Merge branch 'develop' into feature/fix-ts-issues

Plant-for-the-Planet-org · Dec 15, 2022 · efff28c · efff28c
2 parents b2703b5 + 0c42021
commit efff28c
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 12 deletions.
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -131,11 +131,14 @@ function index({
   }, [projectDetails]);
 
   settenant(tenant);
-  // If gift details are present set gift
-  if (giftDetails && isGift) {
-    setgiftDetails(giftDetails);
-    setisGift(true);
-  }
+
+  // If gift details are present, initialize gift in context
+  React.useEffect(() => {
+    if (giftDetails && isGift) {
+      setgiftDetails(giftDetails);
+      setisGift(true);
+    }
+  }, []);
 
   React.useEffect(() => {
     setdonationStep(donationStep);
@@ -429,6 +432,18 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
       console.log("Error", err);
     }
   }
+
+  // Set gift details if gift = true in the query params (only for tree projects)
+  if (context.query.gift === "true" && projectDetails?.purpose === "trees") {
+    isGift = true;
+    giftDetails = {
+      type: "invitation",
+      recipientName: "",
+      recipientEmail: "",
+      message: "",
+    };
+  }
+
   let title = `Donate with Plant-for-the-Planet`;
   let description = `Make tax deductible donations to over 160+ restoration and conservation projects. Your journey to a trillion trees starts here.`;
 

diff --git a/public/assets/icons/GiftIcon.tsx b/public/assets/icons/GiftIcon.tsx
@@ -0,0 +1,28 @@
+import React from "react";
+
+interface IconProps {
+  color?: string;
+}
+
+function GiftIcon({ color }: IconProps): JSX.Element {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M8.75 20H11.25V11.25H8.75V20ZM14.1016 0C12.1164 0 10.7289 1.69336 10 2.87148C9.26953 1.69336 7.88281 0 5.86328 0C3.69063 0 2.5 1.6168 2.5 3.13789C2.5 3.77305 2.70035 4.38359 3.0793 4.9043C3.69258 5.74609 4.75 6.25 5.91016 6.25H8.75V10H11.25V6.25H14.0898C15.2492 6.25 16.3074 5.74687 16.9203 4.90469C17.2994 4.38398 17.4996 3.77305 17.4996 3.13828C17.5 1.6168 16.3086 0 14.1016 0ZM5.91016 4.375C4.84922 4.375 4.375 3.70508 4.375 3.13789C4.375 2.63008 4.77734 1.875 5.86328 1.875C7.03867 1.875 8.11172 3.30078 8.67188 4.375H5.91016ZM14.0898 4.375H11.2937C11.8539 3.30078 12.9266 1.875 14.1023 1.875C15.2227 1.875 15.625 2.63008 15.625 3.13789C15.625 3.70508 15.1523 4.375 14.0898 4.375Z"
+        fill={color || "currentColor"}
+      />
+      <path
+        opacity="0.4"
+        d="M8.75 11.25V20H2.5C1.80898 20 1.25 19.4414 1.25 18.75V11.25H8.75ZM8.75 10V6.25H5.91016C4.80078 6.25 3.79297 5.77734 3.17031 5H1.25C0.559766 5 0 5.55977 0 6.25V8.75C0 9.4375 0.5625 9.99883 1.21484 9.99883L8.75 10ZM11.25 20H17.5C18.191 20 18.75 19.4414 18.75 18.75L18.75 11.25H11.2852L11.25 20ZM18.75 5H16.8297C16.207 5.77891 15.2 6.25 14.0898 6.25H11.25V10L18.7148 9.9987C19.4023 9.9987 19.9648 9.43737 19.9648 8.74987V6.25C20 5.55859 19.4414 5 18.75 5Z"
+        fill={color || "currentColor"}
+      />
+    </svg>
+  );
+}
+
+export default GiftIcon;
diff --git a/src/Donations/Components/DonationsForm.tsx b/src/Donations/Components/DonationsForm.tsx
@@ -203,7 +203,6 @@ function DonationsForm(): ReactElement {
       case "trees":
         paymentLabel = t("treesInCountry", {
           treeCount: quantity,
-          // country: t(`country:${projectDetails.country.toLowerCase()}`),
         });
         break;
       case "funds":
@@ -228,7 +227,6 @@ function DonationsForm(): ReactElement {
       default:
         paymentLabel = t("treesInCountry", {
           treeCount: quantity,
-          // country: t(`country:${projectDetails.country?.toLowerCase()}`),
         });
         break;
     }

diff --git a/src/Donations/Micros/GiftForm.tsx b/src/Donations/Micros/GiftForm.tsx
@@ -1,11 +1,13 @@
 import React, { ReactElement } from "react";
 import { useForm } from "react-hook-form";
 import MaterialTextField from "../../Common/InputTypes/MaterialTextField";
+import InputAdornment from "@material-ui/core/InputAdornment";
 import { useTranslation } from "next-i18next";
 import { QueryParamContext } from "../../Layout/QueryParamContext";
 import ToggleSwitch from "../../Common/InputTypes/ToggleSwitch";
 import { useRouter } from "next/router";
 import { DefaultGift } from "src/Common/Types";
+import GiftIcon from "public/assets/icons/GiftIcon";
 
 type GiftFormData = {
   recipientName: string;
@@ -33,9 +35,11 @@ export default function GiftForm(): ReactElement {
 
   React.useEffect(() => {
     if (isGift && giftDetails) {
-      setgiftDetails((giftDetails) => {
-        return { ...giftDetails, type: "invitation" };
-      });
+      if (giftDetails.type !== "direct") {
+        setgiftDetails((giftDetails) => {
+          return { ...giftDetails, type: "invitation" };
+        });
+      }
     } else {
       setgiftDetails((giftDetails) => {
         return { ...(giftDetails as DefaultGift), type: null };
@@ -87,6 +91,13 @@ export default function GiftForm(): ReactElement {
                 variant="outlined"
                 inputRef={register({ required: true })}
                 data-test-id="recipientName"
+                InputProps={{
+                  endAdornment: (
+                    <InputAdornment position="end">
+                      <GiftIcon />
+                    </InputAdornment>
+                  ),
+                }}
               />
               {errors.recipientName && (
                 <span className={"form-errors"}>

diff --git a/src/Donations/PaymentMethods/PaymentMethodTabs.tsx b/src/Donations/PaymentMethods/PaymentMethodTabs.tsx
@@ -100,7 +100,6 @@ export default function PaymentMethodTabs({
       case "trees":
         paymentLabel = t("treesInCountry", {
           treeCount: quantity,
-          // country: t(`country:${projectDetails.country.toLowerCase()}`),
         });
         break;
       case "funds":
@@ -125,7 +124,6 @@ export default function PaymentMethodTabs({
       default:
         paymentLabel = t("treesInCountry", {
           treeCount: quantity,
-          // country: t(`country:${projectDetails.country.toLowerCase()}`),
         });
         break;
     }