Merge pull request #458 from Plant-for-the-Planet-org/develop

Release January 2024

.env.production

@@ -20,4 +20,7 @@ SENTRY_AUTH_TOKEN=
 SOURCE_VERSION=
 RECURRENCY=true
 
-TRACKING_KEY=
+TRACKING_KEY=
+
+ENABLE_APPLE_PAY=
+ENABLE_GOOGLE_PAY=

next.config.js

@@ -37,7 +37,10 @@ const scheme =
     : "https";
 
 let APPUrl;
-if (process.env.NEXT_PUBLIC_VERCEL_ENV === "preview") {
+if (
+  process.env.NEXT_PUBLIC_VERCEL_ENV === "preview" &&
+  process.env.DISABLE_VERCEL_REDIRECT !== "true"
+) {
   APPUrl = `${scheme}://${process.env.VERCEL_URL}`;
 } else {
   APPUrl = process.env.APP_URL;
@@ -115,6 +118,9 @@ const nextConfig = {
     ESRI_CLIENT_SECRET: process.env.ESRI_CLIENT_SECRET,
     RECURRENCY: process.env.RECURRENCY,
     TRACKING_KEY: process.env.TRACKING_KEY,
+    ENABLE_GOOGLE_PAY: process.env.ENABLE_GOOGLE_PAY,
+    ENABLE_APPLE_PAY: process.env.ENABLE_APPLE_PAY,
+    DISABLE_VERCEL_REDIRECT: process.env.DISABLE_VERCEL_REDIRECT,
   },
   trailingSlash: false,
   reactStrictMode: true,

package.json

@@ -34,7 +34,7 @@
     "@sparticuz/chromium": "^106.0.2",
     "@stripe/react-stripe-js": "^1.4.0",
     "@stripe/stripe-js": "^1.13.2",
-    "axios": "^0.21.1",
+    "axios": "^1.6.0",
     "dom-to-image": "^2.6.0",
     "geocoder-arcgis": "^2.0.5",
     "i18next": "^22.4.10",

pages/_app.tsx

@@ -87,7 +87,10 @@ function MyApp({
     process.env.VERCEL_URL &&
     typeof window !== "undefined"
   ) {
-    if (process.env.VERCEL_URL !== window.location.hostname) {
+    if (
+      process.env.VERCEL_URL !== window.location.hostname &&
+      process.env.DISABLE_VERCEL_REDIRECT !== "true"
+    ) {
       router.replace(`https://${process.env.VERCEL_URL}`);
     }
   }

public/locales/en/common.json

@@ -134,6 +134,7 @@
   "billingAddress": "Contact Details",
   "treesInCountry": "{{treeCount}} trees, Plant-for-the-Planet",
   "fundingPaymentLabel": "Donate {{amount}}, Plant-for-the-Planet",
+  "pcashPaymentLabel": "Load {{amount}} PlanetCash, Plant-for-the-Planet",
   "bouquetPaymentLabel": "Donate {{amount}}, Plant-for-the-Planet",
   "errorOccurred": "Something went wrong. Please feel free to take a screenshot and email us at [email protected].",
   "dedicatedTo": "Dedicated to",

src/Common/Types/QueryParamContextInterface.ts

@@ -109,8 +109,8 @@ export default interface QueryParamContextInterface {
     paymentSetupCountry: string;
     shouldSetPaymentDetails?: boolean;
   }) => Promise<void>;
-  isPlanetCashActive: boolean;
-  setIsPlanetCashActive: Dispatch<SetStateAction<boolean>>;
+  isPlanetCashActive: boolean | null;
+  setIsPlanetCashActive: Dispatch<SetStateAction<boolean | null>>;
   onBehalf: boolean;
   setOnBehalf: Dispatch<SetStateAction<boolean>>;
   onBehalfDonor: OnBehalfDonor;

src/Donations/Components/DonationsForm.tsx

@@ -68,6 +68,7 @@ function DonationsForm(): ReactElement {
     utmMedium,
     utmSource,
     isPackageWanted,
+    setPaymentRequest,
   } = React.useContext(QueryParamContext);
   const { t, i18n } = useTranslation(["common", "country", "donate"]);
 
@@ -78,6 +79,16 @@ function DonationsForm(): ReactElement {
     React.useState(false);
   const router = useRouter();
 
+  React.useEffect(() => {
+    setPaymentRequest(null);
+  }, []);
+
+  React.useEffect(() => {
+    if (isPlanetCashActive) {
+      setPaymentRequest(null);
+    }
+  }, [isPlanetCashActive]);
+
   React.useEffect(() => {
     setMinAmt(getMinimumAmountForCurrency(currency));
   }, [currency]);
@@ -241,6 +252,15 @@ function DonationsForm(): ReactElement {
           ),
         });
         break;
+      case "planet-cash":
+        paymentLabel = t("pcashPaymentLabel", {
+          amount: getFormatedCurrency(
+            i18n.language,
+            currency,
+            paymentSetup.unitCost * quantity
+          ),
+        });
+        break;
       case "bouquet":
       case "conservation":
         paymentLabel = t("bouquetPaymentLabel", {
@@ -400,8 +420,6 @@ function DonationsForm(): ReactElement {
                   paymentSetup?.gateways?.stripe?.account &&
                   currency ? (
                     <NativePay
-                      isApplePayEnabled={false}
-                      isGooglePayEnabled={false}
                       country={country}
                       currency={currency}
                       amount={formatAmountForStripe(

src/Donations/Components/PaymentsForm.tsx

@@ -82,6 +82,7 @@ function PaymentsForm(): ReactElement {
     utmMedium,
     utmSource,
     isPackageWanted,
+    setPaymentRequest,
   } = React.useContext(QueryParamContext);
 
   const [stripePromise, setStripePromise] =
@@ -100,6 +101,7 @@ function PaymentsForm(): ReactElement {
 
   React.useEffect(() => {
     setPaymentType("CARD");
+    setPaymentRequest(null);
   }, []);
 
   const sofortCountries = ["AT", "BE", "DE", "IT", "NL", "ES"];
@@ -111,7 +113,7 @@ function PaymentsForm(): ReactElement {
       | string
       | PaymentMethod
       | PaypalApproveData
-      | PaypalErrorData,
+      | PaypalErrorData
   ) => {
     if (!paymentSetup || !donationID) {
       console.log("Missing payment options"); //TODOO - better error handling
@@ -144,7 +146,7 @@ function PaymentsForm(): ReactElement {
   // Seems to work only for native pay. Should this be removed?
   const onPaymentFunction = async (
     paymentMethod: PaymentMethod,
-    paymentRequest: PaymentRequest,
+    paymentRequest: PaymentRequest
   ) => {
     setPaymentType(paymentRequest._activeBackingLibraryName); //TODOO --_activeBackingLibraryName is a private variable?
     const gateway = "stripe";
@@ -289,7 +291,7 @@ function PaymentsForm(): ReactElement {
                       query: { ...router.query, step: CONTACT },
                     },
                     undefined,
-                    { shallow: true },
+                    { shallow: true }
                   );
                 }}
                 className="d-flex"
@@ -420,7 +422,7 @@ function PaymentsForm(): ReactElement {
                     totalCost={getFormatedCurrency(
                       i18n.language,
                       currency,
-                      paymentSetup?.unitCost * quantity,
+                      paymentSetup?.unitCost * quantity
                     )}
                     onPaymentFunction={(providerObject: PaymentMethod) =>
                       onSubmitPayment("stripe", "card", providerObject)

src/Donations/Micros/PlanetCashSelector.tsx

@@ -19,7 +19,6 @@ const PlanetCashSelector: FC = () => {
     country,
     setcountry,
     frequency,
-    paymentRequest,
   } = useContext(QueryParamContext);
   const router = useRouter();
 
@@ -37,20 +36,28 @@ const PlanetCashSelector: FC = () => {
   }, [paymentSetup?.unitCost, quantity, setIsPlanetCashActive]);
 
   useEffect(() => {
-    // On Load If selected country is planetCash Country and balance is sufficient activate planetCash.
-
-    if (
-      country === profile?.planetCash?.country &&
-      paymentSetup &&
-      paymentSetup.unitCost * quantity <=
-        profile.planetCash.balance / 100 + profile.planetCash.creditLimit / 100
-    ) {
-      setIsPlanetCashActive(true);
-    }
-    if (frequency !== "once") {
+    if (frequency !== "once" && isPlanetCashActive !== null) {
       setIsPlanetCashActive(false);
+    } else {
+      if (
+        isPlanetCashActive === null &&
+        country === profile?.planetCash?.country &&
+        paymentSetup &&
+        paymentSetup.unitCost * quantity <=
+          (profile.planetCash.balance + profile.planetCash.creditLimit) / 100
+      ) {
+        setIsPlanetCashActive(true);
+      }
     }
-  }, [paymentRequest, frequency]);
+  }, [
+    country,
+    profile,
+    paymentSetup,
+    quantity,
+    frequency,
+    isPlanetCashActive,
+    frequency,
+  ]);
 
   useEffect(() => {
     // This is done to lock the transaction with PlanetCash in a single currency.
@@ -208,11 +215,13 @@ const PlanetCashSelector: FC = () => {
         </div>
         <div title={disabledReason() ? disabledReason() : ""}>
           <ToggleSwitch
-            checked={isPlanetCashActive}
+            checked={isPlanetCashActive === true}
             disabled={shouldPlanetCashDisable()}
-            onChange={() =>
-              setIsPlanetCashActive((isPlanetCashActive) => !isPlanetCashActive)
-            }
+            onChange={() => {
+              setIsPlanetCashActive(
+                (isPlanetCashActive) => !isPlanetCashActive
+              );
+            }}
           />
         </div>
       </div>

src/Donations/PaymentMethods/PaymentMethodTabs.tsx

@@ -111,6 +111,15 @@ export default function PaymentMethodTabs({
           ),
         });
         break;
+      case "planet-cash":
+        paymentLabel = t("pcashPaymentLabel", {
+          amount: getFormatedCurrency(
+            i18n.language,
+            currency,
+            paymentSetup.unitCost * quantity
+          ),
+        });
+        break;
       case "bouquet":
       case "conservation":
         paymentLabel = t("bouquetPaymentLabel", {
@@ -218,8 +227,6 @@ export default function PaymentMethodTabs({
         {/*9 May 2023 - Apple Pay / Google Pay is disabled currently as it is not working correctly*/}
         {showNativePay && (
           <NativePay
-            isApplePayEnabled={false}
-            isGooglePayEnabled={false}
             country={country}
             currency={currency}
             amount={formatAmountForStripe(