Integrate unitType

package.json

@@ -26,7 +26,7 @@
     "@mui/material": "^5.11.8",
     "@next/bundle-analyzer": "^10.1.3",
     "@paypal/react-paypal-js": "^7.8.2",
-    "@planet-sdk/common": "^0.1.27",
+    "@planet-sdk/common": "^0.1.29",
     "@sentry/browser": "^6.2.5",
     "@sentry/integrations": "^6.2.5",
     "@sentry/node": "^6.2.5",

public/locales/en/common.json

@@ -3,6 +3,8 @@
   "fortreeCountTrees_other": "for {{treeCount}} Trees",
   "forQuantitym2": "for {{quantity}} m²",
   "m2": "m²",
+  "tree_one": "tree",
+  "tree_other": "trees",
   "recipientName": "Recipient Name",
   "recipientNameRequired": "Recipient Name is required",
   "email": "Email",
@@ -38,6 +40,10 @@
   "orgNamePublishedTax": "Company name is visible on our leaderboard and app. Tax-deduction receipts will be issued for the same name.",
   "orgNamePublished": "Company name is visible on our leaderboard and app.",
   "paymentDetails": "Payment Details",
+  "perUnit": {
+    "tree": "per tree",
+    "m2": "per m²"
+  },
   "perTree": "per tree",
   "perm2": "per m²",
   "youWillReceiveTaxDeduction": "You will receive a tax deduction receipt for ",
@@ -72,9 +78,10 @@
   "contributionMessage": "Maybe you'll visit them some day? In the mean time, maybe hook up your friends with some trees of their own by telling them about yours?",
   "fundingDonationSuccess": "Thank you for your contribution! You’ll receive a confirmation for your contribution on your email.",
   "fundingContributionMessage": "We will keep you posted about our actions, in the mean time maybe share with your friends about your contribution.",
-  "yourTreesPlantedByOnLocation": "Your {{treeCount}} trees will be planted by {{projectName}} in {{location}}.",
+  "restorationDonationUsage": "Your donation will be used to restore {{units}} {{unitType}} by {{projectName}} in {{location}}.",
   "m2conservedByOnLocation": "{{quantity}} m² forest will be conserved by {{projectName}} in {{location}}.",
   "myTreesPlantedByOnLocation": "My {{treeCount}} trees are being planted in {{location}}.",
+  "restorationDonationShareDetails": "I donated {{amount}} for forest restoration in {{location}}.",
   "iDonatedForestOnLocation": "I donated {{amount}} for forest conservation in {{location}}.",
   "weDonatedForestOnLocation": "We donated {{amount}} for forest conservation in {{location}}.",
   "plantTreesAtURL": "Restore & protect trees at {{url}}",
@@ -166,7 +173,7 @@
   "lowBalance": "Balance is low",
   "oneTimePay": "Donation with PlanetCash is a one time payment",
   "currency": "Currency",
-  "treesPurpose": "tree donation",
+  "treesPurpose": "restoration donation",
   "fundsPurpose": "donation",
   "bouquetPurpose": "donation",
   "conservationPurpose": "conservation donation",
@@ -210,4 +217,4 @@
   "top_project_standards_fulfilled": "The project inspection revealed that this project fulfilled at least 12 of the 19 Top Project <2>standards.</2>",
   "standardsLink": "https://www.plant-for-the-planet.org/standards/",
   "enterValidEmail": "Please enter a valid email"
-}
+}

src/Common/Types/index.tsx

@@ -10,6 +10,7 @@ import {
   ContactDetails,
   BankTransferDetails,
   PaymentGateway,
+  CurrencyCode,
 } from "@planet-sdk/common";
 
 /** planet-donations only allows direct or invitation gifts */
@@ -145,14 +146,16 @@ export interface PaymentOptions extends FetchedProjectDetails {
   frequencies: Frequencies;
   gateways: Gateways;
   recurrency: Recurrency;
+  /** @deprecated - use unitType instead */
   unit: string;
+  unitType: UnitType;
   unitCost: number;
   currency: string;
   destination: string;
-  isApproved: boolean;
-  isTopProject: boolean;
 }
 
+export type UnitType = "tree" | "m2" | "currency" | CurrencyCode;
+
 interface Frequencies {
   [key: string]: Frequency;
 }

src/Donations/Components/DonationsForm.tsx

@@ -109,6 +109,7 @@ function DonationsForm(): ReactElement {
     projectDetails !== null &&
     projectDetails.purpose !== "funds" &&
     projectDetails.purpose !== "planet-cash" &&
+    paymentSetup?.unitType === "tree" && //Enables planetcash for restoration projects with unitType tree only (TEMP)
     profile !== null &&
     isSignedUp &&
     profile.planetCash !== null &&
@@ -339,7 +340,9 @@ function DonationsForm(): ReactElement {
           {/* show PlanetCashSelector only if user is signed up and have a planetCash account */}
           {canPayWithPlanetCash && <PlanetCashSelector />}
           {!(onBehalf && onBehalfDonor.firstName === "") &&
-            (projectDetails.purpose === "trees" ? (
+            (projectDetails.purpose === "trees" &&
+            (paymentSetup?.unitType !== "m2" ||
+              giftDetails.type === "direct") ? (
               <div className="donations-gift-container mt-10">
                 <GiftForm />
               </div>

src/Donations/LeftPanel/TransactionSummary.tsx

@@ -2,7 +2,7 @@ import { ReactElement } from "react";
 import { useTranslation } from "next-i18next";
 import getFormatedCurrency from "src/Utils/getFormattedCurrency";
 import { getFormattedNumber } from "src/Utils/getFormattedNumber";
-import { PaymentOptions, ProjectPurpose } from "src/Common/Types";
+import { PaymentOptions, UnitType } from "src/Common/Types";
 import styles from "./LeftPanel.module.scss";
 
 interface Props {
@@ -22,26 +22,28 @@ const TransactionSummary = ({
 
   /** Generates unit/frequency info when needed */
   const getAdditionalInfo = (
-    purpose: ProjectPurpose,
-    frequency: string
+    unitType: UnitType,
+    frequency: string,
+    language: string,
+    quantity: number
   ): string => {
     let info = "";
-    switch (purpose) {
-      case "trees":
+    switch (unitType) {
+      case "tree":
         info =
           info +
           " " +
           t("fortreeCountTrees", {
             count: Number(quantity),
-            treeCount: getFormattedNumber(i18n.language, Number(quantity)),
+            treeCount: getFormattedNumber(language, Number(quantity)),
           });
         break;
-      case "conservation":
+      case "m2":
         info =
           info +
           " " +
           t("forQuantitym2", {
-            quantity: getFormattedNumber(i18n.language, Number(quantity)),
+            quantity: getFormattedNumber(language, Number(quantity)),
           });
         break;
       default:
@@ -72,7 +74,12 @@ const TransactionSummary = ({
           paymentSetup.unitCost * quantity
         )}
       </strong>
-      {getAdditionalInfo(paymentSetup.purpose, frequency)}
+      {getAdditionalInfo(
+        paymentSetup.unitType,
+        frequency,
+        i18n.language,
+        quantity
+      )}
     </div>
   );
 };

src/Donations/Micros/DonationAmount.tsx

@@ -21,12 +21,12 @@ function DonationAmount(): ReactElement {
               paymentSetup.unitCost * quantity
             )}
           </span>
-          {paymentSetup.purpose === "trees"
+          {paymentSetup.unitType === "tree"
             ? t("fortreeCountTrees", {
                 count: Number(quantity),
                 treeCount: getFormattedNumber(i18n.language, Number(quantity)),
               })
-            : paymentSetup.purpose === "conservation"
+            : paymentSetup.unitType === "m2"
             ? t("forQuantitym2", {
                 quantity: getFormattedNumber(i18n.language, Number(quantity)),
               })

src/Donations/Micros/DonationTypes/BouquetDonations.tsx

@@ -108,7 +108,7 @@ function BouquetDonations({ setopenCurrencyModal }: Props): ReactElement {
         setCustomInputValue(
           getFormattedNumber(
             i18n.language,
-            paymentSetup.unit !== "currency"
+            paymentSetup.unitType !== "currency"
               ? newQuantity
               : newQuantity * paymentSetup.unitCost
           )
@@ -165,7 +165,11 @@ function BouquetDonations({ setopenCurrencyModal }: Props): ReactElement {
                             currency,
                             option.quantity * paymentSetup.unitCost
                           )}{" "}
-                      {paymentSetup.purpose === "conservation" ? t("m2") : []}
+                      {/* Below condition is redundant currently, but is left here as a reminder while refactoring */}
+                      {paymentSetup.purpose === "conservation" &&
+                      paymentSetup.unitType === "m2"
+                        ? t(paymentSetup.unitType)
+                        : []}
                     </span>
                   </div>
                 </div>
@@ -226,8 +230,10 @@ function BouquetDonations({ setopenCurrencyModal }: Props): ReactElement {
                           fontWeight: "800",
                         }}
                       >
-                        {paymentSetup.purpose === "conservation"
-                          ? t(paymentSetup.unit)
+                        {/* Below condition is redundant currently, but is left here as a reminder while refactoring */}
+                        {paymentSetup.purpose === "conservation" &&
+                        paymentSetup.unitType === "m2"
+                          ? t(paymentSetup.unitType)
                           : []}
                       </p>
                     </div>
@@ -238,7 +244,7 @@ function BouquetDonations({ setopenCurrencyModal }: Props): ReactElement {
                     >
                       <p style={{ margin: "5px" }}>
                         {" "}
-                        {paymentSetup.unit === "currency"
+                        {paymentSetup.unitType === "currency"
                           ? t("customAmount")
                           : t("custom")}
                       </p>
@@ -282,7 +288,11 @@ function BouquetDonations({ setopenCurrencyModal }: Props): ReactElement {
                 )
               : []}{" "}
           </button>
-          {paymentSetup.purpose === "conservation" ? t("perm2") : []}
+          {/* Below condition is redundant currently, but is left here as a reminder while refactoring */}
+          {paymentSetup.purpose === "conservation" &&
+          paymentSetup.unitType === "m2"
+            ? t("perUnit.m2")
+            : []}
         </p>
       ) : (
         <div className={"mt-20"}>

src/Donations/Micros/DonationTypes/TreeDonation.tsx

@@ -74,7 +74,7 @@ function TreeDonation({ setopenCurrencyModal }: Props): ReactElement {
   }, [quantity]);
 
   const customInputRef = React.useRef<HTMLInputElement>(null);
-  return (
+  return paymentSetup !== null ? (
     <div
       className={`donations-tree-selection ${
         isGift && giftDetails.recipientName === "" ? "display-none" : ""
@@ -99,7 +99,9 @@ function TreeDonation({ setopenCurrencyModal }: Props): ReactElement {
               {option.iconFile}
               <div className="tree-selection-option-text">
                 <p>{option.quantity}</p>
-                <span>{t("trees")}</span>
+                <span>
+                  {t(paymentSetup.unitType, { count: option.quantity })}
+                </span>
               </div>
             </div>
           );
@@ -136,7 +138,11 @@ function TreeDonation({ setopenCurrencyModal }: Props): ReactElement {
               }}
               ref={customInputRef}
             />
-            <span>{t("trees")}</span>
+            <span>
+              {t(paymentSetup.unitType, {
+                count: parseInt(customTreeInputValue),
+              })}
+            </span>
           </div>
         </div>
       </div>
@@ -165,14 +171,16 @@ function TreeDonation({ setopenCurrencyModal }: Props): ReactElement {
               Number(paymentSetup.unitCost)
             )}{" "}
           </button>
-          {t("perTree")}
+          {t(`perUnit.${paymentSetup.unitType}`)}
         </p>
       ) : (
         <div className={"mt-20"}>
           <TreeCostLoader width={150} />
         </div>
       )}
     </div>
+  ) : (
+    <></>
   );
 }
 

src/Donations/Micros/PaymentStatus/ImageComponent.tsx

@@ -60,15 +60,26 @@ const ImageComponent = ({
     return (
       <div className={"donation-count p-20"}>
         {projectDetails?.purpose === "trees" &&
-          t("common:myTreesPlantedByOnLocation", {
-            treeCount: getFormattedNumber(
-              i18n.language,
-              Number(donation.treeCount)
-            ),
-            location: t(
-              "country:" + donation.destination.country.toLowerCase()
-            ),
-          })}
+          (donation.unitType === "tree"
+            ? t("common:myTreesPlantedByOnLocation", {
+                treeCount: getFormattedNumber(
+                  i18n.language,
+                  Number(donation.treeCount)
+                ),
+                location: t(
+                  "country:" + donation.destination.country.toLowerCase()
+                ),
+              })
+            : t("common:restorationDonationShareDetails", {
+                amount: getFormattedCurrency(
+                  i18n.language,
+                  donation.currency,
+                  Number(donation.amount)
+                ),
+                location: t(
+                  "country:" + donation.destination.country.toLowerCase()
+                ),
+              }))}
         {projectDetails?.purpose === "conservation" &&
           t(
             `common:${

src/Donations/Micros/PaymentStatus/ThankyouMessage.tsx

@@ -1,7 +1,6 @@
 import React, { ReactElement } from "react";
 import { useTranslation } from "next-i18next";
 import getFormatedCurrency from "src/Utils/getFormattedCurrency";
-import { getFormattedNumber } from "src/Utils/getFormattedNumber";
 import { QueryParamContext } from "src/Layout/QueryParamContext";
 import { FetchedProjectDetails } from "src/Common/Types";
 import { Donation } from "@planet-sdk/common/build/types/donation";
@@ -49,17 +48,16 @@ function ThankyouMessage({
       : null;
 
   // EXAMPLE: Your 50 trees will be planted by AMU EcoVillage Project, Ethiopia in Ethiopia.
-  const donationProjectMessage = donation.destination
-    ? " " +
-      t("common:yourTreesPlantedByOnLocation", {
-        treeCount: getFormattedNumber(
-          i18n.language,
-          Number(donation.treeCount)
-        ),
-        projectName: donation.destination.name,
-        location: t("country:" + donation.destination.country.toLowerCase()),
-      })
-    : null;
+  const donationProjectMessage =
+    donation.destination && donation.units
+      ? " " +
+        t("common:restorationDonationUsage", {
+          units: donation.units,
+          unitType: t(`common:${donation.unitType}`, { count: donation.units }),
+          projectName: donation.destination.name,
+          location: t("country:" + donation.destination.country.toLowerCase()),
+        })
+      : null;
 
   const Message = () => {
     return (

src/Donations/PaymentMethods/PaymentFunctions.ts

@@ -473,6 +473,7 @@ export async function handleStripeSCAPayment({
           }
           try {
             const payDonationData = {
+              // method not sent here as it was already captured in the 1st request.
               paymentProviderRequest: {
                 account: paymentSetup.gateways.stripe.account,
                 gateway: "stripe" as const,