Merge pull request #470 from Plant-for-the-Planet-org/feature/giftabl…

…e-donations

Giftable donations

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.34",
+    "@planet-sdk/common": "^0.1.42",
     "@sentry/browser": "^6.2.5",
     "@sentry/integrations": "^6.2.5",
     "@sentry/node": "^6.2.5",

pages/index.tsx

@@ -11,7 +11,7 @@ import countriesData from "./../src/Utils/countriesData.json";
 import { setCountryCode } from "src/Utils/setCountryCode";
 import { DONATE } from "src/Utils/donationStepConstants";
 import {
-  SentGift,
+  GiftDetails,
   FetchedProjectDetails,
   PaymentOptions,
 } from "src/Common/Types";
@@ -20,11 +20,13 @@ import {
   ContactDetails,
 } from "@planet-sdk/common/build/types/donation";
 import { GetServerSideProps } from "next/types";
+import { createProjectDetails } from "src/Utils/createProjectDetails";
+import { NON_GIFTABLE_PROJECT_PURPOSES } from "src/Utils/projects/constants";
 
 interface Props {
   projectDetails?: FetchedProjectDetails;
   donationStep: number | null;
-  giftDetails: SentGift | null;
+  giftDetails: GiftDetails | null;
   isGift: boolean;
   resolvedUrl?: string;
   isDirectDonation: boolean;
@@ -79,7 +81,7 @@ function index({
     setSelectedProjects,
     loadselectedProjects,
     setGiftDetails,
-    setisGift,
+    setIsGift,
     setpaymentSetup,
     setcurrency,
     setContactDetails,
@@ -129,7 +131,7 @@ function index({
     // If gift details are present, initialize gift in context
     if (giftDetails && isGift) {
       setGiftDetails(giftDetails);
-      setisGift(true);
+      setIsGift(true);
     }
   }, []);
 
@@ -215,7 +217,7 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
 
   // Variables that will be affected with Gift details
   let isGift = false;
-  let giftDetails: SentGift | null = null;
+  let giftDetails: GiftDetails | null = null;
   let frequency = "once";
   // Variables that will be affected with context
   let hideTaxDeduction = false;
@@ -250,7 +252,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();
@@ -276,18 +278,7 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
         const paymentOptionsResponse = await apiRequest(requestParams);
         const paymentOptionsData: PaymentOptions = paymentOptionsResponse?.data;
         if (paymentOptionsData) {
-          projectDetails = {
-            id: paymentOptionsData.id,
-            name: paymentOptionsData.name,
-            description: paymentOptionsData.description,
-            purpose: paymentOptionsData.purpose,
-            ownerName: paymentOptionsData.ownerName,
-            taxDeductionCountries: paymentOptionsData.taxDeductionCountries,
-            image: paymentOptionsData.image,
-            ownerAvatar: paymentOptionsData.ownerAvatar,
-            isApproved: paymentOptionsData.isApproved ? true : false,
-            isTopProject: paymentOptionsData.isTopProject ? true : false,
-          };
+          projectDetails = createProjectDetails(paymentOptionsData);
           donationStep = 1;
         }
       } catch (err) {
@@ -360,26 +351,15 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
           if (paymentSetupData) {
             currency = paymentSetupData.currency;
             paymentSetup = paymentSetupData;
-            projectDetails = {
-              id: paymentSetupData.id,
-              name: paymentSetupData.name,
-              description: paymentSetupData.description,
-              purpose: paymentSetupData.purpose,
-              ownerName: paymentSetupData.ownerName,
-              taxDeductionCountries: paymentSetupData.taxDeductionCountries,
-              image: paymentSetupData.image,
-              ownerAvatar: paymentSetupData.ownerAvatar,
-              isApproved: paymentSetupData.isApproved ? true : false,
-              isTopProject: paymentSetupData.isTopProject ? true : false,
-            };
+            projectDetails = createProjectDetails(paymentSetupData);
             donationStep = 3;
           }
         } catch (err) {
           // console.log(err);
         }
         allowTaxDeductionChange = false;
         units = donation.units;
-        amount = donation.amount;
+        amount = Number(donation.amount);
         // Setting contact details from donor details
         if (donorData) {
           contactDetails = {
@@ -429,29 +409,49 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
   if (typeof context.query.utm_source === "string")
     utmSource = context.query.utm_source;
 
-  // Set gift details if there is s (support link) in the query params
-  if (context.query.s) {
-    try {
-      const requestParams = {
-        url: `/app/profiles/${context.query.s}`,
-        setshowErrorCard,
-        tenant,
-        locale,
+  // Handle s (support link) in the query params
+  if (typeof context.query.s === "string" && context.query.s.length > 0) {
+    if (
+      projectDetails === null ||
+      projectDetails.classification === "membership" ||
+      NON_GIFTABLE_PROJECT_PURPOSES.includes(projectDetails.purpose)
+    ) {
+      // If project cannot have direct gift, remove 's' parameter by redirecting
+      const pathname = context.resolvedUrl.split("?")[0];
+      const query = { ...context.query };
+      delete query.s;
+      const queryString = new URLSearchParams(
+        query as Record<string, string>
+      ).toString();
+
+      return {
+        redirect: {
+          destination: `${pathname}${queryString ? `?${queryString}` : ""}`,
+          permanent: true,
+        },
       };
-      const newProfile = await apiRequest(requestParams);
-      if (newProfile.data.type !== "tpo") {
-        isGift = true;
-        giftDetails = {
-          recipientName: newProfile.data.displayName,
-          recipientEmail: "",
-          message: "",
-          type: "direct",
-          recipient: newProfile.data.id,
-          recipientTreecounter: newProfile.data.slug,
+    } else {
+      // Set gift details if there is s (support link) in the query params for an eligible project
+      try {
+        const requestParams = {
+          url: `/app/profiles/${context.query.s}`,
+          setshowErrorCard,
+          tenant,
+          locale,
         };
+        const newProfile = await apiRequest(requestParams);
+        if (newProfile.data.type !== "tpo") {
+          isGift = true;
+          giftDetails = {
+            recipientName: newProfile.data.displayName,
+            type: "direct",
+            recipient: newProfile.data.id,
+            recipientProfile: newProfile.data.slug,
+          };
+        }
+      } catch (err) {
+        console.log("Error", err);
       }
-    } catch (err) {
-      console.log("Error", err);
     }
   }
 

public/locales/en/common.json

@@ -7,6 +7,7 @@
   "tree_other": "trees",
   "recipientName": "Recipient Name",
   "recipientNameRequired": "Recipient Name is required",
+  "recipientNameTooLong": "Recipient Name must be 35 characters or less",
   "email": "Email",
   "recipientEmail": "Recipient Email",
   "emailRequired": "Email is required",
@@ -118,7 +119,7 @@
   "selectLanguage": "Select Language",
   "trees": "trees",
   "logout": "Logout",
-  "directGiftRecipient": "This donation supports {{name}}'s Forest",
+  "giftDedicatedTo": "This donation is dedicated to {{name}}",
   "saveGiftDetails": "Save Gift Details",
   "giftSomeone": "My donation is dedicated to someone",
   "or": "OR",
@@ -223,4 +224,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/InputTypes/MaterialTextField.tsx

@@ -5,61 +5,102 @@ import themeProperties from "./../../../styles/themeProperties";
 const MaterialTextField = styled(TextField)({
   width: "100%",
   color: "var(--primary-font-color)",
-  "& .MuiInputBase-input.MuiOutlinedInput-input": {
+
+  // Label styles
+  "& label": {
     color: "var(--primary-font-color)",
-    height: "1.1876em",
-    lineHeight: "1.1876em",
+    fontFamily: themeProperties.fontFamily,
+    fontSize: "14px",
+    lineHeight: "1",
   },
-  "& .MuiInputAdornment-root": {
-    color: "var(--primary-font-color)",
+
+  // Base label positioning
+  "& .MuiInputLabel-root": {
+    transform: "translate(14px, 16px) scale(1)", // Matches original position
+    transformOrigin: "left top",
+    position: "absolute",
+    left: 0,
+    top: 0,
+    display: "block",
+    padding: 0,
+    pointerEvents: "none",
+    whiteSpace: "nowrap",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    maxWidth: "calc(100% - 24px)",
   },
+
+  // Shrunk/focused label
   "& label.Mui-focused": {
     color: "var(--primary-font-color)",
     fontFamily: themeProperties.fontFamily,
   },
-  "& label": {
-    color: "var(--primary-font-color)",
-    fontFamily: themeProperties.fontFamily,
-    fontSize: "14px",
-    lineHeight: 1,
-  },
+
   "& .MuiInputLabel-outlined.MuiInputLabel-shrink": {
     transform: "translate(14px, -4px) scale(0.75)",
-    top: "-3px",
-  },
-  "& .MuiOutlinedInput-notchedOutline": {
-    border: "0px!important",
+    top: "-3px", // Critical for matching original position
+    pointerEvents: "auto",
+    maxWidth: "calc(133% - 32px)",
   },
-  "& .Mui-disabled.MuiInputLabel-root": {
+
+  // Input styles
+  "& .MuiInputBase-input.MuiOutlinedInput-input": {
     color: "var(--primary-font-color)",
+    height: "20px",
+    lineHeight: "20px",
+    padding: "14px",
   },
-  "& .Mui-disabled.MuiOutlinedInput-input ": {
-    color: "var(--disabled-font-color)",
-    WebkitTextFillColor: "initial",
-  },
+
+  // Input container
   "& .MuiOutlinedInput-root": {
     backgroundColor: "var(--background-color-dark)",
-    border: "0px!important",
     borderRadius: "10px",
     fontFamily: themeProperties.fontFamily,
+    minHeight: "44px",
+
+    "& fieldset": {
+      border: "none",
+    },
   },
-  "& .MuiOutlinedInput-input": {
-    padding: "14px",
+
+  // Input adornment
+  "& .MuiInputAdornment-root": {
+    color: "var(--primary-font-color)",
+  },
+
+  // Notched outline
+  "& .MuiOutlinedInput-notchedOutline": {
+    border: "0px!important",
   },
+
+  // Disabled state
+  "& .Mui-disabled": {
+    "&.MuiInputLabel-root": {
+      color: "var(--primary-font-color)",
+    },
+    "&.MuiOutlinedInput-input": {
+      color: "var(--disabled-font-color)",
+      WebkitTextFillColor: "initial",
+    },
+  },
+
+  // Multiline
   "& .MuiInputBase-multiline": {
     padding: "0px",
   },
+
+  // Autocomplete
   '& .MuiAutocomplete-inputRoot[class*="MuiOutlinedInput-root"]': {
     padding: "14px",
-  },
-  '& .MuiAutocomplete-inputRoot[class*="MuiOutlinedInput-root"] .MuiAutocomplete-input':
-    {
+
+    "& .MuiAutocomplete-input": {
       padding: "0px",
+
+      "&:first-of-type": {
+        paddingLeft: "0px",
+      },
     },
-  '& .MuiAutocomplete-inputRoot[class*="MuiOutlinedInput-root"] .MuiAutocomplete-input:first-of-type':
-    {
-      paddingLeft: "0px",
-    },
+  },
 });
 
 export default MaterialTextField;