- {t('bulkCodes:bulkCodesDescription2')} - +
+
}
>
+
+ {t('bulkCodes:bulkCodesDescription1')}
+
+ {t('bulkCodes:bulkCodesDescription2')}
+
- {user.planetCash.giftFunds
- .filter((gift) => gift.openUnits !== 0)
- .map((gift, index) => (
- //Not displaying details for gift fund where open units = 0
-
- );
- }
-
- return null;
-};
-
-export default Details;
diff --git a/src/features/user/GiftFunds/GiftFundDetails.tsx b/src/features/user/GiftFunds/GiftFundDetails.tsx
new file mode 100644
index 0000000000..e052d74c7b
--- /dev/null
+++ b/src/features/user/GiftFunds/GiftFundDetails.tsx
@@ -0,0 +1,73 @@
+import React, { useContext, ReactElement } from 'react';
+import { UserPropsContext } from '../../common/Layout/UserPropsContext';
+import { useTranslation } from 'next-i18next';
+import { Divider, Grid, styled } from '@mui/material';
+import { GiftFundsType } from '../../common/types/user';
+
+interface Props {
+ giftFund: GiftFundsType;
+}
+
+const GiftFundDetails = ({ giftFund }: Props): ReactElement | null => {
+ const { user } = useContext(UserPropsContext);
+ const { t, ready } = useTranslation('giftfunds');
+
+ const StyledContainer = styled('article')(({ theme }) => ({
+ backgroundColor: theme.palette.background.default,
+ padding: 24,
+ borderRadius: 9,
+ boxShadow: theme.shadows[1],
+ marginBottom: 24,
+ fontSize: '0.875rem',
+ gap: 16,
+ '& .container_heading': {
+ fontWeight: theme.typography.fontWeightBold,
+ },
+ '& .container_details': {
+ gap: 16,
+ },
+ }));
+
+ const SingleDetail = styled('div')(({ theme }) => ({
+ flex: 1,
+ '& .detailTitle': {
+ fontWeight: theme.typography.fontWeightBold,
+ marginBottom: 9,
+ },
+ }));
+
+ if (ready && user.planetCash) {
+ return (
+ <>
+
-
-
- ))}
-
-
- {user.planetCash?.country}/{user.planetCash?.currency}{' '}
- {t('title')}
-
-
- -
-
-
- {t('project')}
-
-
- {gift.project}
-
- {t('units')}
-
- {Number(gift.openUnits / 100).toFixed(2)}
-{giftFund.project}
++ {Number(giftFund.openUnits / 100).toFixed(2)} +
+
+
- - {t('termsText')} - - +
+
}
>
+
+ {t('description')}{' '}
+
+ {t('learnMoreText')}
+
+
+
+ {t('termsText')}
+
+
+
+
+ {t('me:donatedTrees')}
+
+
+ {t('me:registeredTrees')}
+
{contributions.map((contribution: any, index: any) => {
@@ -102,7 +112,7 @@ export default function MyTrees({ profile, authenticatedType, token }: Props) {
function TreeList({ contribution }: any) {
const date = formatDate(contribution.properties.plantDate);
- const { t, i18n, ready } = useTranslation(['country', 'me']);
+ const { t, i18n } = useTranslation(['country', 'me']);
return (
*/}
- {location.measurements && (
- <>
+ {location?.deviceLocation ? (
+
+ ) : (
+ []
)}
+ {location.measurements && (
+ <>
+
diff --git a/src/features/user/Profile/components/RedeemModal.tsx b/src/features/user/Profile/components/RedeemModal.tsx
index 8a71024ff7..bcc2aeca6c 100644
--- a/src/features/user/Profile/components/RedeemModal.tsx
+++ b/src/features/user/Profile/components/RedeemModal.tsx
@@ -37,7 +37,7 @@ export default function RedeemModal({
const [validCodeData, setValidCodeData] = React.useState<{} | undefined>();
const [isCodeRedeemed, setIsCodeRedeemed] = React.useState(false);
const [inputCode, setInputCode] = React.useState('');
-
+ const [disable, setDisable] = React.useState(false);
const handleAnotherCode = () => {
setErrorMessage('');
setInputCode('');
@@ -49,12 +49,14 @@ export default function RedeemModal({
});
async function redeemCode(data: FormData) {
+ setDisable(true);
setIsUploadingData(true);
const submitData = {
code: data.code,
};
if (contextLoaded && user) {
postAuthenticatedRequest(`/app/redeem`, submitData, token).then((res) => {
+ setDisable(false);
if (res.error_code === 'already_redeemed') {
setErrorMessage(t('redeem:alreadyRedeemed'));
setIsUploadingData(false);
@@ -182,6 +184,7 @@ export default function RedeemModal({
id={'redeemCodeModal'}
onClick={handleSubmit(redeemCode)}
className={`primaryButton ${styles.redeemCode}`}
+ disabled={disable}
>
{isUploadingData ? (
diff --git a/src/features/user/Profile/styles/MyTrees.module.scss b/src/features/user/Profile/styles/MyTrees.module.scss
index d737a914b7..72427dc71e 100644
--- a/src/features/user/Profile/styles/MyTrees.module.scss
+++ b/src/features/user/Profile/styles/MyTrees.module.scss
@@ -188,6 +188,27 @@
font-family: $primaryFontFamily;
}
+
+.registeredTrees {
+ color: #3d67b1;
+}
+
+.donatedTrees{
+ color: #68b030;
+}
+
+.MyTreesLegend {
+ display: flex;
+ gap: 14px;
+ padding-bottom: 10px;
+ div {
+ display: flex;
+ gap: 5px;
+ }
+}
+
+
+
@include mdTabletView {
.myTreesSection {
height: 80vh;
diff --git a/src/features/user/TreeMapper/TreeMapper.module.scss b/src/features/user/TreeMapper/TreeMapper.module.scss
index 2f45620be2..84b2c5a29b 100644
--- a/src/features/user/TreeMapper/TreeMapper.module.scss
+++ b/src/features/user/TreeMapper/TreeMapper.module.scss
@@ -185,6 +185,19 @@
grid-template-columns: 1fr;
}
+.measurements {
+ grid-column-start: 1;
+ grid-column-end: 3;
+ display: grid;
+ grid-row-gap: 20px;
+ grid-template-columns: 2fr 1fr 1fr;
+}
+
+.rowDetail {
+ grid-column-start: 1;
+ grid-column-end: 3;
+}
+
.singleDetail {
display: flex;
flex-direction: column;
diff --git a/src/features/user/TreeMapper/components/PlantLocationPage.tsx b/src/features/user/TreeMapper/components/PlantLocationPage.tsx
index 0268811934..c4790bc567 100644
--- a/src/features/user/TreeMapper/components/PlantLocationPage.tsx
+++ b/src/features/user/TreeMapper/components/PlantLocationPage.tsx
@@ -106,37 +106,21 @@ export function LocationDetails({
- {location?.deviceLocation ? (
- {t('captureStatus')}
{t(location.captureStatus)}
-
- ) : (
- []
- )}
{/*
- {t('coordinates')}
{text}
- {t('guid')}
{location.id}
-
- {t('height')}
-
- {location.measurements?.height}
- {t('m')}
-
+
+ {t('coordinates')}
{text.split(',').join(', ')}
-
-
+ {t('width')}
-
- {location.measurements?.width}
- {t('cm')}
-
- {t('plantDate')}
@@ -148,6 +132,41 @@ export function LocationDetails({ {formatDate(location.registrationDate)}
+
+
+
+ {t('measurements')}
+
+
+
+ )}
{location.plantProject && (
+
+ {t('date')}
+ {location.history?.map((h, index) => ( +
+ {formatDate(h?.created)}
+
+ ))}
+
+
+ {t('height')}
+ {location.history?.map((h, index) => ( +
+ {h?.measurements?.height} {t('m')}
+
+ ))}
+
+
+ {t('width')}
+ {location.history?.map((h, index) => ( +
+ {h?.measurements?.width} {t('cm')}
+
+ ))}
+ {t('plantProject')}
diff --git a/src/features/user/Widget/DonationLink/DonationLinkForm.module.scss b/src/features/user/Widget/DonationLink/DonationLinkForm.module.scss index 79106bec69..e3ec3fc7f8 100644 --- a/src/features/user/Widget/DonationLink/DonationLinkForm.module.scss +++ b/src/features/user/Widget/DonationLink/DonationLinkForm.module.scss @@ -4,7 +4,7 @@ display: flex; flex-direction: column; gap: 12px; - } +} .formHeader { font-size: $fontMedium; color: $primaryFontColor; @@ -12,3 +12,9 @@ flex: 1; margin-right: auto; } + +.qrContainer { + display: block; + width: 150px; + height: 150px; +} diff --git a/src/features/user/Widget/DonationLink/DonationLinkForm.tsx b/src/features/user/Widget/DonationLink/DonationLinkForm.tsx index a1e3ae36d3..21f459bfb4 100644 --- a/src/features/user/Widget/DonationLink/DonationLinkForm.tsx +++ b/src/features/user/Widget/DonationLink/DonationLinkForm.tsx @@ -18,6 +18,7 @@ import { Project } from '../../../common/types/project'; import { allCountries } from '../../../../utils/constants/countries'; import CustomSnackbar from '../../../common/CustomSnackbar'; import StyledForm from '../../../common/Layout/StyledForm'; +import QRCode from 'qrcode'; interface DonationLinkFormProps { projectsList: Project[] | null; @@ -38,12 +39,24 @@ const DonationLinkForm = ({ languageName: 'Automatic Selection', }); const [donationUrl, setDonationUrl] = useState
+
+
+ 
+
)}
+ {t('donationLink:qrCodeTitle')}
+
+
+
+
+
+
+ }
>
{t('donationLink:donationLinkDescription')}
+{t('donationLink:qrCodeDiscription')}
+