Proof of concept for recurrency

Plant-for-the-Planet-org · Jul 22, 2021 · a4cdea4 · a4cdea4
1 parent 8da3902
commit a4cdea4
Show file tree

Hide file tree

Showing 11 changed files with 188 additions and 79 deletions.
diff --git a/iframetest.html b/iframetest.html
@@ -5,4 +5,4 @@
     }
 </style>
 <h2>This is a different landing page</h2>
-<iframe src="https://4dd91761dd0a.ngrok.io/?project=proj_nua2hRfsSaBgf3rSG151u9hD&context=don_ySDm7glLSfK3PE2tKSoj3BXD" width="100%" height="100%" style="border: 0px;" allow="payment" title="Iframe test"></iframe>
+<iframe src="https://donate.plant-for-the-planet.org/?to=yucatan" width="100%" height="100%" style="border: 0px;" allow="payment" title="Iframe test"></iframe>
diff --git a/next.config.js b/next.config.js
@@ -120,6 +120,7 @@ module.exports = withPlugins([[withBundleAnalyzer], [withSourceMaps]], {
     VERCEL_URL: process.env.VERCEL_URL,
     ESRI_CLIENT_ID: process.env.ESRI_CLIENT_ID,
     ESRI_CLIENT_SECRET: process.env.ESRI_CLIENT_SECRET,
+    RECURRENCY: process.env.RECURRENCY,
   },
   trailingSlash: false,
   reactStrictMode: true,

diff --git a/src/Common/Types/index.tsx b/src/Common/Types/index.tsx
@@ -98,4 +98,5 @@ export interface CreateDonationFunctionProps {
   setdonationID: any;
   token: any;
   setshowErrorCard: Function;
+  frequency: string | null;
 }
diff --git a/src/Donations/Components/DonationsForm.tsx b/src/Donations/Components/DonationsForm.tsx
@@ -19,6 +19,7 @@ import { useAuth0 } from "@auth0/auth0-react";
 import DonationAmount from "../Micros/DonationAmount";
 import TreeDonation from "../Micros/DonationTypes/TreeDonation";
 import FundingDonations from "../Micros/DonationTypes/FundingDonations";
+import FrequencyOptions from "../Micros/FrequencyOptions";
 
 function DonationsForm() {
   const {
@@ -37,6 +38,7 @@ function DonationsForm() {
     isTaxDeductible,
     setshowErrorCard,
     queryToken,
+    frequency
   } = React.useContext(QueryParamContext);
   const { t, i18n } = useTranslation(["common", "country", "donate"]);
 
@@ -91,6 +93,7 @@ function DonationsForm() {
       setdonationID,
       token,
       setshowErrorCard,
+      frequency
     }).then(async (res) => {
       let token = null;
       if ((!isLoading && isAuthenticated) || queryToken) {
@@ -130,6 +133,15 @@ function DonationsForm() {
             <></>
           )}
 
+          {process.env.RECURRENCY && projectDetails.purpose === "trees" ? (
+            <div className="donations-gift-container mt-10">
+              <FrequencyOptions />
+            </div>
+          ) : (
+            <></>
+          )}
+
+
           {projectDetails.purpose === "funds" ? (
             <FundingDonations setopenCurrencyModal={setopenCurrencyModal} />
           ) : (
@@ -169,6 +181,7 @@ function DonationsForm() {
                         `country:${projectDetails.country.toLowerCase()}`
                       ),
                     })}
+                    frequency={frequency}
                   />
                 ) : (
                   <div className="mt-20 w-100">

diff --git a/src/Donations/Components/PaymentsForm.tsx b/src/Donations/Components/PaymentsForm.tsx
@@ -60,6 +60,7 @@ function PaymentsForm({}: Props): ReactElement {
     setshowErrorCard,
     hideTaxDeduction,
     queryToken,
+    frequency,
   } = React.useContext(QueryParamContext);
 
   React.useEffect(() => {
@@ -116,6 +117,7 @@ function PaymentsForm({}: Props): ReactElement {
       setdonationID,
       token,
       setshowErrorCard,
+      frequency,
     });
 
     if (donation) {
@@ -233,34 +235,65 @@ function PaymentsForm({}: Props): ReactElement {
               <PaymentMethodTabs
                 paymentType={paymentType}
                 setPaymentType={setPaymentType}
-                showCC={paymentSetup?.gateways.stripe.methods.includes(
-                  "stripe_cc"
-                )}
+                showCC={
+                  paymentSetup?.gateways.stripe.methods.includes("stripe_cc") &&
+                  (frequency !== "once"
+                    ? paymentSetup?.gateways.stripe.recurrency.enabled.includes(
+                        "stripe_cc"
+                      )
+                    : true)
+                }
                 showGiroPay={
                   currency === "EUR" &&
                   country === "DE" &&
                   paymentSetup?.gateways.stripe.methods.includes(
                     "stripe_giropay"
-                  )
+                  ) &&
+                  (frequency !== "once"
+                    ? paymentSetup?.gateways.stripe.recurrency.enabled.includes(
+                        "stripe_giropay"
+                      )
+                    : true)
                 }
                 showSepa={
                   currency === "EUR" &&
                   isAuthenticated &&
-                  paymentSetup?.gateways.stripe.methods.includes("stripe_sepa")
+                  paymentSetup?.gateways.stripe.methods.includes(
+                    "stripe_sepa"
+                  ) &&
+                  (frequency !== "once"
+                    ? paymentSetup?.gateways.stripe.recurrency.enabled.includes(
+                        "stripe_sepa"
+                      )
+                    : true)
                 }
                 showSofort={
                   currency === "EUR" &&
                   sofortCountries.includes(country) &&
                   paymentSetup?.gateways.stripe.methods.includes(
                     "stripe_sofort"
-                  )
+                  ) &&
+                  (frequency !== "once"
+                    ? paymentSetup?.gateways.stripe.recurrency.enabled.includes(
+                        "stripe_sofort"
+                      )
+                    : true)
                 }
                 showPaypal={
                   paypalCurrencies.includes(currency) &&
-                  paymentSetup?.gateways.paypal
+                  paymentSetup?.gateways.paypal &&
+                  (frequency !== "once"
+                    ? false
+                    : true)
                 }
                 showNativePay={
-                  paymentSetup?.gateways?.stripe?.account && currency
+                  paymentSetup?.gateways?.stripe?.account &&
+                  currency &&
+                  (frequency !== "once"
+                    ? paymentSetup?.gateways.stripe.recurrency.enabled.includes(
+                        "stripe_cc"
+                      )
+                    : true)
                 }
                 onNativePaymentFunction={onPaymentFunction}
               />

diff --git a/src/Donations/Micros/FrequencyOptions.tsx b/src/Donations/Micros/FrequencyOptions.tsx
@@ -0,0 +1,36 @@
+import React, { ReactElement } from "react";
+import { QueryParamContext } from "../../Layout/QueryParamContext";
+
+interface Props {}
+
+function FrequencyOptions({}: Props): ReactElement {
+  const { paymentSetup, setfrequency,frequency } = React.useContext(QueryParamContext);
+  console.log("paymentSetup", paymentSetup);
+
+  return (
+    <div className="d-flex justify-content-between flex-wrap">
+      {paymentSetup.frequencies && paymentSetup.frequencies.length > 0 ? (
+        paymentSetup.frequencies.map((frequencyOption:any, index:any) => {
+          return (
+            <div
+              className={`tree-selection-option mt-20 ${
+                frequencyOption === frequency
+                  ? "tree-selection-option-selected"
+                  : ""
+              }`}
+              onClick={
+                  ()=>setfrequency(frequencyOption)
+              }
+            >
+              {frequencyOption}
+            </div>
+          );
+        })
+      ) : (
+        <></>
+      )}
+    </div>
+  );
+}
+
+export default FrequencyOptions;
diff --git a/src/Donations/PaymentMethods/PaymentFunctions.ts b/src/Donations/PaymentMethods/PaymentFunctions.ts
@@ -91,6 +91,7 @@ export async function createDonationFunction({
   setdonationID,
   token,
   setshowErrorCard,
+  frequency
 }: CreateDonationFunctionProps) {
   const taxDeductionCountry = isTaxDeductible ? country : null;
   const donationData = createDonationData({
@@ -102,6 +103,7 @@ export async function createDonationFunction({
     taxDeductionCountry,
     isGift,
     giftDetails,
+    frequency
   });
   try {
     let donation;
@@ -153,6 +155,7 @@ export function createDonationData({
   taxDeductionCountry,
   isGift,
   giftDetails,
+  frequency
 }: any) {
   let donationData = {
     purpose: projectDetails.purpose,
@@ -161,6 +164,7 @@ export function createDonationData({
     amount: Math.round((unitCost * quantity + Number.EPSILON) * 100) / 100,
     currency,
     donor: { ...contactDetails },
+    frequency:frequency === 'once' ? null : frequency
   };
   if (taxDeductionCountry) {
     donationData = {

diff --git a/src/Donations/PaymentMethods/PaymentMethodTabs.tsx b/src/Donations/PaymentMethods/PaymentMethodTabs.tsx
@@ -61,7 +61,7 @@ export default function PaymentMethodTabs({
     );
   }
 
-  const { country, currency, projectDetails, paymentSetup, quantity } =
+  const { country, currency, projectDetails, paymentSetup, quantity,frequency } =
     React.useContext(QueryParamContext);
 
   return (
@@ -149,6 +149,7 @@ export default function PaymentMethodTabs({
               country: t(`country:${projectDetails.country.toLowerCase()}`),
             })
           }
+          frequency={frequency}
         />
       )}
     </div>

diff --git a/src/Donations/PaymentMethods/PaymentRequestCustomButton.tsx b/src/Donations/PaymentMethods/PaymentRequestCustomButton.tsx
@@ -16,7 +16,8 @@ interface PaymentButtonProps {
   onPaymentFunction: Function;
   continueNext: Function;
   isPaymentPage: boolean;
-  paymentLabel:string;
+  paymentLabel: string;
+  frequency: string | null;
 }
 export const PaymentRequestCustomButton = ({
   country,
@@ -25,7 +26,8 @@ export const PaymentRequestCustomButton = ({
   onPaymentFunction,
   continueNext,
   isPaymentPage,
-  paymentLabel
+  paymentLabel,
+  frequency,
 }: PaymentButtonProps) => {
   const { t, ready } = useTranslation(["common"]);
 
@@ -111,7 +113,10 @@ export const PaymentRequestCustomButton = ({
       {stripeAllowedCountries.includes(country) &&
       canMakePayment &&
       paymentRequest &&
-      paymentRequest._canMakePaymentAvailability ? (
+      paymentRequest._canMakePaymentAvailability &&
+      (frequency !== "once"
+        ? paymentSetup?.gateways.stripe.recurrency.enabled.includes("stripe_cc")
+        : true) ? (
         paymentRequest._canMakePaymentAvailability.APPLE_PAY ? (
           <div className="w-100">
             <button
@@ -123,7 +128,13 @@ export const PaymentRequestCustomButton = ({
               }`}
             >
               {isPaymentPage ? "" : t("donateWith")}{" "}
-              <AppleIcon textColor={isPaymentPage ? themeProperties.light.primaryFontColor : '#fff'} />
+              <AppleIcon
+                textColor={
+                  isPaymentPage
+                    ? themeProperties.light.primaryFontColor
+                    : "#fff"
+                }
+              />
             </button>
             {!isPaymentPage && (
               <div className="separator-text mb-10">{t("or")}</div>
@@ -141,7 +152,11 @@ export const PaymentRequestCustomButton = ({
             >
               {isPaymentPage ? "" : t("donateWith")}{" "}
               <GooglePayIcon
-                textColor={isPaymentPage ? themeProperties.light.primaryFontColor : '#fff'}
+                textColor={
+                  isPaymentPage
+                    ? themeProperties.light.primaryFontColor
+                    : "#fff"
+                }
               />
             </button>
             {!isPaymentPage && (
@@ -184,6 +199,7 @@ interface NativePayProps {
   continueNext: Function;
   isPaymentPage: boolean;
   paymentLabel: string;
+  frequency: string | null;
 }
 export const NativePay = ({
   country,
@@ -193,7 +209,8 @@ export const NativePay = ({
   paymentSetup,
   continueNext,
   isPaymentPage,
-  paymentLabel
+  paymentLabel,
+  frequency,
 }: NativePayProps) => {
   const [stripePromise, setStripePromise] = useState(() =>
     getStripe(paymentSetup)
@@ -228,6 +245,7 @@ export const NativePay = ({
         continueNext={continueNext}
         isPaymentPage={isPaymentPage}
         paymentLabel={paymentLabel}
+        frequency={frequency}
       />
     </Elements>
   );

diff --git a/src/Layout/QueryParamContext.tsx b/src/Layout/QueryParamContext.tsx
@@ -54,7 +54,9 @@ export const QueryParamContext = React.createContext({
   queryToken:"", 
   setqueryToken: (value: string) => "",
   sethideTaxDeduction: (value: boolean) => {},
-  setisDirectDonation:(value: boolean) => {}
+  setisDirectDonation:(value: boolean) => {},
+  frequency: "", 
+  setfrequency: (value: string) => {},
 });
 
 export default function QueryParamProvider({ children }: any) {
@@ -94,6 +96,7 @@ export default function QueryParamProvider({ children }: any) {
 
 
   const [quantity, setquantity] = useState(50);
+  const [frequency, setfrequency] = useState<null|string>("once");
 
   const [isGift, setisGift] = useState<boolean>(false);
   const [giftDetails, setgiftDetails] = useState<object>({
@@ -376,7 +379,9 @@ export default function QueryParamProvider({ children }: any) {
         setpaymentSetup,
         sethideTaxDeduction,
         setallowTaxDeductionChange,
-        setisDirectDonation
+        setisDirectDonation,
+        frequency,
+        setfrequency
       }}
     >
       {children}