feat: separates pCashSignupDetails in context

- creates new property `pCashSignupDetails` in context - removes type `PlanetCashSignupDetails` from projectDetails in context - uses`pCashSignupDetails` to display `PlanetCashSignup` (Donations/index) - refactors LeftPanel & child components to use `pCashSignupDetails` - renames `projectDetails` arg to `getTenantBackground` for clarity
Plant-for-the-Planet-org · Sep 11, 2023 · 9d546e5 · 9d546e5
1 parent 46c5570
commit 9d546e5
Show file tree

Hide file tree

Showing 11 changed files with 113 additions and 91 deletions.
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -14,7 +14,6 @@ import {
   SentGift,
   FetchedProjectDetails,
   PaymentOptions,
-  PlanetCashSignupDetails,
 } from "src/Common/Types";
 import {
   Donation,
@@ -23,7 +22,7 @@ import {
 import { GetServerSideProps } from "next/types";
 
 interface Props {
-  projectDetails?: FetchedProjectDetails | PlanetCashSignupDetails;
+  projectDetails?: FetchedProjectDetails;
   donationStep: number | null;
   giftDetails: SentGift | null;
   isGift: boolean;
@@ -129,9 +128,9 @@ function index({
     settenant(tenant);
     // If gift details are present, initialize gift in context
     if (giftDetails && isGift) {
-        setGiftDetails(giftDetails);
-        setisGift(true);
-      }
+      setGiftDetails(giftDetails);
+      setisGift(true);
+    }
   }, []);
 
   // If project details are present set project details
@@ -251,7 +250,7 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
     const queryCountry = context.query.country;
     const found = countriesData.some(
       (country) =>
-        country.countryCode?.toUpperCase() === queryCountry.toUpperCase()
+        country.countryCode?.toUpperCase() === queryCountry.toUpperCase(),
     );
     if (found) {
       country = queryCountry.toUpperCase();

diff --git a/src/Common/Types/QueryParamContextInterface.ts b/src/Common/Types/QueryParamContextInterface.ts
@@ -35,9 +35,11 @@ export default interface QueryParamContextInterface {
   setEnabledCurrencies: Dispatch<SetStateAction<CurrencyList | null>>;
   donationStep: number | null;
   setdonationStep: Dispatch<SetStateAction<number | null>>;
-  projectDetails: FetchedProjectDetails | PlanetCashSignupDetails | null;
-  setprojectDetails: Dispatch<
-    SetStateAction<FetchedProjectDetails | PlanetCashSignupDetails | null>
+  projectDetails: FetchedProjectDetails | null;
+  setprojectDetails: Dispatch<SetStateAction<FetchedProjectDetails | null>>;
+  pCashSignupDetails: PlanetCashSignupDetails | null;
+  setPCashSignupDetails: Dispatch<
+    SetStateAction<PlanetCashSignupDetails | null>
   >;
   quantity: number;
   setquantity: Dispatch<SetStateAction<number>>;

diff --git a/src/Donations/LeftPanel/Avatar.tsx b/src/Donations/LeftPanel/Avatar.tsx
@@ -5,16 +5,17 @@ import {
 } from "src/Common/Types";
 import getImageUrl from "src/Utils/getImageURL";
 import styles from "./LeftPanel.module.scss";
-
 interface Props {
-  projectDetails: FetchedProjectDetails | PlanetCashSignupDetails;
+  info: FetchedProjectDetails | PlanetCashSignupDetails;
 }
 
-const Avatar = ({ projectDetails }: Props): ReactElement => {
+const Avatar = ({ info }: Props): ReactElement => {
+  const { ownerName, ownerAvatar } = info;
+
   const renderAvatarImage = (
     ownerName: string | null,
-    ownerAvatar: string | null
-  ) => {
+    ownerAvatar: string | null,
+  ): JSX.Element => {
     return ownerAvatar ? (
       <img
         className={styles.avatar}
@@ -27,17 +28,17 @@ const Avatar = ({ projectDetails }: Props): ReactElement => {
     );
   };
 
-  return projectDetails.purpose === "trees" ? (
+  return info.purpose === "trees" ? (
     <a
       rel="noreferrer"
       target="_blank"
-      href={`https://www.trilliontreecampaign.org/${projectDetails.id}`}
+      href={`https://www.trilliontreecampaign.org/${info.id}`}
       className={styles["avatar-link"]}
     >
-      {renderAvatarImage(projectDetails.ownerName, projectDetails.ownerAvatar)}
+      {renderAvatarImage(ownerName, ownerAvatar)}
     </a>
   ) : (
-    renderAvatarImage(projectDetails.ownerName, projectDetails.ownerAvatar)
+    renderAvatarImage(ownerName, ownerAvatar)
   );
 };
 

diff --git a/src/Donations/LeftPanel/LeftPanelContainer.tsx b/src/Donations/LeftPanel/LeftPanelContainer.tsx
@@ -7,23 +7,20 @@ import { getTenantBackground } from "../../Utils/getTenantBackground";
 import styles from "./LeftPanel.module.scss";
 
 interface Props {
-  projectDetails?: FetchedProjectDetails | PlanetCashSignupDetails | null;
+  info?: FetchedProjectDetails | PlanetCashSignupDetails | null;
   donationStep?: number | null;
   tenant: string;
 }
 
 const LeftPanelContainer: FC<Props> = ({
-  projectDetails,
+  info = null,
   donationStep,
   tenant,
   children,
 }) => {
   const getBackgroundImage = () => {
-    if (projectDetails || donationStep === 0) {
-      return `url(${getTenantBackground(
-        tenant,
-        projectDetails as FetchedProjectDetails | null
-      )})`;
+    if (info || donationStep === 0) {
+      return `url(${getTenantBackground(tenant, info)})`;
     }
     return "none";
   };

diff --git a/src/Donations/LeftPanel/LeftPanelInfo.tsx b/src/Donations/LeftPanel/LeftPanelInfo.tsx
@@ -11,7 +11,7 @@ import {
 } from "src/Common/Types";
 import Avatar from "./Avatar";
 import TransactionSummary from "./TransactionSummary";
-import ProjectTitle from "./ProjectTitle";
+import SummaryTitle from "./SummaryTitle";
 import ProjectInfo from "./ProjectInfo";
 import styles from "./LeftPanel.module.scss";
 import GiftInfo from "./GiftInfo";
@@ -21,6 +21,7 @@ import ContactDetailsInfo from "./ContactDetailsInfo";
 interface Props {
   isMobile: boolean;
   projectDetails: FetchedProjectDetails | PlanetCashSignupDetails | null;
+  pCashSignupDetails: PlanetCashSignupDetails | null;
   donationStep: number | null;
   donationID: string | null;
   paymentSetup: PaymentOptions | null;
@@ -40,6 +41,7 @@ interface Props {
 const LeftPanelInfo = ({
   isMobile,
   projectDetails,
+  pCashSignupDetails,
   donationStep,
   donationID,
   paymentSetup,
@@ -58,10 +60,11 @@ const LeftPanelInfo = ({
   const { i18n } = useTranslation("common");
   const router = useRouter();
 
+  const info = projectDetails || pCashSignupDetails;
   const canShowAvatar = donationStep !== null && donationStep > 0;
   const canShowTransactionSummary =
     paymentSetup !== null && (donationStep === 2 || donationStep === 3);
-  const canShowProject = donationStep !== null && donationStep > 0;
+  const canShowSummary = donationStep !== null && donationStep > 0;
   const canShowGift =
     (donationStep === 1 || donationStep === 2 || donationStep === 3) &&
     giftDetails.type !== null &&
@@ -78,9 +81,9 @@ const LeftPanelInfo = ({
   const canShowDonationLink =
     donationID !== null && !(isMobile && router.query.step === "thankyou");
 
-  return projectDetails ? (
+  return info !== null ? (
     <div className={styles["left-panel-info"]}>
-      {canShowAvatar && <Avatar projectDetails={projectDetails} />}
+      {canShowAvatar && <Avatar info={info} />}
       {canShowTransactionSummary && (
         <TransactionSummary
           currency={currency}
@@ -89,11 +92,11 @@ const LeftPanelInfo = ({
           paymentSetup={paymentSetup}
         />
       )}
-      {canShowProject && (
-        <div className={styles["project-info-container"]}>
-          <ProjectTitle projectDetails={projectDetails} />
-          {projectDetails.purpose !== "planet-cash-signup" && (
-            <ProjectInfo projectDetails={projectDetails} />
+      {canShowSummary && (
+        <div className={styles["summary-container"]}>
+          <SummaryTitle info={info} />
+          {info.purpose !== "planet-cash-signup" && (
+            <ProjectInfo projectDetails={info} />
           )}
         </div>
       )}

diff --git a/src/Donations/LeftPanel/ProjectTitle.tsx b/src/Donations/LeftPanel/ProjectTitle.tsx
diff --git a/src/Donations/LeftPanel/SummaryTitle.tsx b/src/Donations/LeftPanel/SummaryTitle.tsx
@@ -0,0 +1,36 @@
+import { ReactElement } from "react";
+import {
+  FetchedProjectDetails,
+  PlanetCashSignupDetails,
+} from "src/Common/Types";
+import VerifiedBadge from "./VerifiedBadge";
+import styles from "./LeftPanel.module.scss";
+
+interface Props {
+  info: FetchedProjectDetails | PlanetCashSignupDetails;
+}
+
+const ProjectTitle = ({ info }: Props): ReactElement => {
+  const isLinked = info.purpose === "trees" || info.purpose === "conservation";
+
+  return (
+    <h1 className={`${styles["project-title"]} title-text`}>
+      {isLinked ? (
+        <a
+          rel="noreferrer"
+          target="_blank"
+          href={`https://www.trilliontreecampaign.org/${info.id}`}
+        >
+          {info.name + "    "}
+        </a>
+      ) : (
+        <>{info.name + "    "}</>
+      )}
+      {info.purpose !== "planet-cash-signup" &&
+        info.name !== null &&
+        info.isApproved && <VerifiedBadge />}
+    </h1>
+  );
+};
+
+export default ProjectTitle;
diff --git a/src/Donations/LeftPanel/index.tsx b/src/Donations/LeftPanel/index.tsx
@@ -9,6 +9,7 @@ import CancelButton from "../../Common/CancelButton";
 function LeftPanel(): ReactElement {
   const {
     projectDetails,
+    pCashSignupDetails,
     donationID,
     donationStep,
     quantity,
@@ -48,7 +49,7 @@ function LeftPanel(): ReactElement {
 
   return (
     <LeftPanelContainer
-      projectDetails={projectDetails}
+      info={pCashSignupDetails || projectDetails}
       donationStep={donationStep}
       tenant={tenant}
     >
@@ -61,6 +62,7 @@ function LeftPanel(): ReactElement {
       {/* TODO - evaluate whether to send this info to LeftPanelInfo, or use context instead */}
       <LeftPanelInfo
         projectDetails={projectDetails}
+        pCashSignupDetails={pCashSignupDetails}
         donationStep={donationStep}
         donationID={donationID}
         paymentSetup={paymentSetup}

diff --git a/src/Donations/index.tsx b/src/Donations/index.tsx
@@ -14,11 +14,13 @@ import {
   SELECT_PROJECT,
   THANK_YOU,
 } from "src/Utils/donationStepConstants";
+import PlanetCashSignup from "./Micros/PlanetCashSignup";
 
 function Donations(): ReactElement {
   const router = useRouter();
 
-  const { donationStep, setdonationStep } = React.useContext(QueryParamContext);
+  const { donationStep, setdonationStep, pCashSignupDetails } =
+    React.useContext(QueryParamContext);
 
   useEffect(() => {
     if (router.query?.step) {
@@ -55,18 +57,36 @@ function Donations(): ReactElement {
     }
     return () => {};
   }, [router.query.step]);
+
+  const renderDonationStep = (step: number | null) => {
+    switch (step) {
+      case 0:
+        return <SelectProject />;
+      case 1:
+        return <DonationsForm />;
+      case 2:
+        return <ContactsForm />;
+      case 3:
+        return <PaymentsForm />;
+      case 4:
+        return <PaymentStatus />;
+      default:
+        return null;
+    }
+  };
+
   return (
     <div className="donations-container">
       <div className="donations-card-container">
         {/* Left panel */}
         <LeftPanel />
 
         {/* Right panel */}
-        {donationStep === 0 && <SelectProject />}
-        {donationStep === 1 && <DonationsForm />}
-        {donationStep === 2 && <ContactsForm />}
-        {donationStep === 3 && <PaymentsForm />}
-        {donationStep === 4 && <PaymentStatus />}
+        {pCashSignupDetails !== null ? (
+          <PlanetCashSignup />
+        ) : (
+          renderDonationStep(donationStep)
+        )}
       </div>
     </div>
   );

diff --git a/src/Layout/QueryParamContext.tsx b/src/Layout/QueryParamContext.tsx
@@ -57,9 +57,10 @@ const QueryParamProvider: FC = ({ children }) => {
 
   const [paymentSetup, setpaymentSetup] = useState<PaymentOptions | null>(null);
 
-  const [projectDetails, setprojectDetails] = useState<
-    FetchedProjectDetails | PlanetCashSignupDetails | null
-  >(null);
+  const [projectDetails, setprojectDetails] =
+    useState<FetchedProjectDetails | null>(null);
+  const [pCashSignupDetails, setPCashSignupDetails] =
+    useState<PlanetCashSignupDetails | null>(null);
 
   // Query token is the access token which is passed in the query params
   const [queryToken, setqueryToken] = useState<string | null>(null);
@@ -276,13 +277,14 @@ const QueryParamProvider: FC = ({ children }) => {
   }, []);
 
   const showPlanetCashSignUpScreen = () => {
-    setprojectDetails({
+    setprojectDetails(null);
+    setPCashSignupDetails({
       name: `PlanetCash - ${profile?.displayName}`,
       ownerName: profile?.displayName || "",
       ownerAvatar: profile?.image || "",
       purpose: "planet-cash-signup",
     });
-    setdonationStep(4);
+    setdonationStep(null);
   };
 
   useEffect(() => {
@@ -543,6 +545,8 @@ const QueryParamProvider: FC = ({ children }) => {
         setdonationStep,
         projectDetails,
         setprojectDetails,
+        pCashSignupDetails,
+        setPCashSignupDetails,
         quantity,
         setquantity,
         language,