Merge branch 'develop' into feature/gift-expansion-updates

Plant-for-the-Planet-org · Dec 2, 2024 · 007870e · 007870e
2 parents 4b24523 + 17a6715
commit 007870e
Show file tree

Hide file tree

Showing 8 changed files with 723 additions and 923 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/public/assets/images/icons/ProgressBarIcons.tsx b/public/assets/images/icons/ProgressBarIcons.tsx
@@ -1,4 +1,5 @@
-import { IconProps } from '../../../../src/features/common/types/common';
+import type { IconProps } from '../../../../src/features/common/types/common';
+
 export const AreaRestoredIcon = ({ width }: IconProps) => {
   return (
     <svg

diff --git a/public/static/locales/en/profile.json b/public/static/locales/en/profile.json
@@ -2,7 +2,7 @@
   "Profile": {
     "myProfile": {
       "memberSince": "Member since {date}",
-      "userDescription": "{bio}"
+      "donorCircleMember": "Donor Circle-Member"
     },
     "feature": {
       "redeem": "Redeem",

diff --git a/src/features/user/Profile/ContributionsMap/Common/MapCredits.tsx b/src/features/user/Profile/ContributionsMap/Common/MapCredits.tsx
@@ -1,4 +1,6 @@
-import { useState, MouseEvent } from 'react';
+import type { MouseEvent } from 'react';
+
+import { useState } from 'react';
 import { Popover } from '@mui/material';
 import styles from './common.module.scss';
 import { InfoIcon } from '../../../../../../public/assets/images/ProfilePageIcons';

diff --git a/src/features/user/Profile/ContributionsMap/index.tsx b/src/features/user/Profile/ContributionsMap/index.tsx
@@ -79,7 +79,15 @@ function ContributionsMap({
           supportedTreecounter={supportedTreecounter}
         />
         <MapCredits />
-        <NavigationControl position="bottom-right" showCompass={false} />
+        <NavigationControl
+          position="bottom-right"
+          style={{
+            position: 'absolute',
+            bottom: '32px',
+            right: '0px',
+          }}
+          showCompass={false}
+        />
       </Map>
       <ContributionStats />
     </div>

diff --git a/src/features/user/Profile/ProfileCard/MicroComponents/DonorCircleMemberBadge.tsx b/src/features/user/Profile/ProfileCard/MicroComponents/DonorCircleMemberBadge.tsx
@@ -0,0 +1,15 @@
+import { useTranslations } from 'next-intl';
+import { TreesPlantedIcon } from '../../../../../../public/assets/images/icons/ProgressBarIcons';
+import styles from '../ProfileCard.module.scss';
+
+const DonorCircleMemberBadge = () => {
+  const t = useTranslations('Profile');
+  return (
+    <div className={styles.donorCircleMemberBadge}>
+      <TreesPlantedIcon width={15} />
+      <span role="status">{t('myProfile.donorCircleMember')}</span>
+    </div>
+  );
+};
+
+export default DonorCircleMemberBadge;
diff --git a/src/features/user/Profile/ProfileCard/ProfileCard.module.scss b/src/features/user/Profile/ProfileCard/ProfileCard.module.scss
@@ -14,10 +14,30 @@
   background-repeat: no-repeat;
   background-size: cover;
   min-height: 8rem;
-
   @include mdTabletView {
     flex: 1;
   }
+  display: flex;
+  justify-content: center;
+  align-items: flex-end;
+}
+
+.donorCircleMemberBadge {
+  width: max-content;
+  height: fit-content;
+  display: flex;
+  gap: 9px;
+  margin-bottom: 4.5rem;
+  background: rgba(211, 234, 221, 1);
+  border-radius: 16px;
+  padding: 8px 16px;
+  color: $primaryDarkColor;
+  font-size: $fontXSmall;
+  line-height: 16.34px;
+  font-weight: 700;
+  svg path {
+    fill: $primaryDarkColor;
+  }
 }
 
 .profilePicture {

diff --git a/src/features/user/Profile/ProfileCard/index.tsx b/src/features/user/Profile/ProfileCard/index.tsx
@@ -1,3 +1,5 @@
+import type { ProfileV2Props } from '../../../common/types/profile';
+
 import React from 'react';
 import { Avatar } from '@mui/material';
 import getImageUrl from '../../../../utils/getImageURL';
@@ -6,21 +8,20 @@ import {
   DefaultUserProfileImage,
   SettingsIcon,
 } from '../../../../../public/assets/images/icons/ProfilePageV2Icons';
-import { useTranslations } from 'next-intl';
 import Link from 'next/link';
-import { ProfileV2Props } from '../../../common/types/profile';
 import ProfileActions from './ProfileActions';
+import DonorCircleMemberBadge from './MicroComponents/DonorCircleMemberBadge';
 
 const ProfileCard = ({ userProfile, profilePageType }: ProfileV2Props) => {
-  const t = useTranslations('Profile');
   const isPrivateAccount = profilePageType === 'private';
   const userImageUrl = userProfile?.image
     ? getImageUrl('profile', 'thumb', userProfile.image)
     : '';
-
   return (
     <div className={styles.profileCardContainer}>
-      <div className={styles.profileBackground}></div>
+      <div className={styles.profileBackground}>
+        {isPrivateAccount && userProfile.isMember && <DonorCircleMemberBadge />}
+      </div>
       <div className={styles.profilePicture}>
         {/* if no user profile picture exists or image is fetched from CDN in development env, show default profile image */}
         {userImageUrl && !userImageUrl.includes('development') ? (
@@ -41,11 +42,7 @@ const ProfileCard = ({ userProfile, profilePageType }: ProfileV2Props) => {
         )}
         <div className={styles.profileNameAndDescriptionContainer}>
           <h2>{userProfile?.displayName}</h2>
-          <p>
-            {t('myProfile.userDescription', {
-              bio: userProfile?.bio,
-            })}
-          </p>
+          <p>{userProfile?.bio}</p>
         </div>
 
         {profilePageType === 'private' ? (