merge conflict resolved

Plant-for-the-Planet-org · Jan 11, 2022 · 69d0550 · 69d0550
2 parents 81f19a3 + 1709ef4
commit 69d0550
Show file tree

Hide file tree

Showing 15 changed files with 188 additions and 81 deletions.
diff --git a/next-env.d.ts b/next-env.d.ts
@@ -1,4 +1,5 @@
 /// <reference types="next" />
+/// <reference types="next/types/global" />
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited

diff --git a/public/assets/icons/RetryIcon.tsx b/public/assets/icons/RetryIcon.tsx
@@ -0,0 +1,15 @@
+import React from "react";
+
+function RetryIcon(props) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 512 512"
+      fill={props.color}
+    >
+      <path d="M256.455 8c66.269.119 126.437 26.233 170.859 68.685l35.715-35.715C478.149 25.851 504 36.559 504 57.941V192c0 13.255-10.745 24-24 24H345.941c-21.382 0-32.09-25.851-16.971-40.971l41.75-41.75c-30.864-28.899-70.801-44.907-113.23-45.273-92.398-.798-170.283 73.977-169.484 169.442C88.764 348.009 162.184 424 256 424c41.127 0 79.997-14.678 110.629-41.556 4.743-4.161 11.906-3.908 16.368.553l39.662 39.662c4.872 4.872 4.631 12.815-.482 17.433C378.202 479.813 319.926 504 256 504 119.034 504 8.001 392.967 8 256.002 7.999 119.193 119.646 7.755 256.455 8z" />
+    </svg>
+  );
+}
+
+export default RetryIcon;
diff --git a/public/locales/en/common.json b/public/locales/en/common.json
@@ -134,9 +134,10 @@
   "copied": "Copied",
   "clickToCopy": "Click to Copy",
   "bank": "Bank",
-"custom": "Custom",
+  "custom": "Custom",
   "fallbackdescription": "Make tax deductible donations to over 200+ restoration and conservation projects. Your journey to a trillion trees starts here.",
   "taxIdentificationNumber": "Tax Identification Number",
   "tinRequired": "Tax Identification Number is Required",
-  "tinText": "TIN: "
+  "tinText": "TIN: ",
+  "returnTo": "Return to"
 }
diff --git a/src/Donations/Components/PaymentsForm.tsx b/src/Donations/Components/PaymentsForm.tsx
@@ -214,7 +214,10 @@ function PaymentsForm({}: Props): ReactElement {
       <PaymentProgress isPaymentProcessing={isPaymentProcessing} />
     ) : (
       <div className={"donations-forms-container"}>
-        <div className="donations-form">
+        <div
+          className="donations-form"
+          style={{ display: "flex", flexDirection: "column", width: "100%" }}
+        >
           <div className="d-flex w-100 align-items-center">
             {!isDirectDonation ? (
               <button
@@ -436,7 +439,11 @@ function PaymentsForm({}: Props): ReactElement {
             target="_blank"
             rel="noreferrer"
             className="text-center nolink"
-            style={{ fontStyle: "italic" }}
+            style={{
+              marginTop: "auto",
+              alignSelf: "center",
+              fontStyle: "italic",
+            }}
           >
             {t("donationProcessedBy")}
             {/* Needs break */}

diff --git a/src/Donations/Micros/DonationTypes/FundingDonations.tsx b/src/Donations/Micros/DonationTypes/FundingDonations.tsx
@@ -8,7 +8,7 @@ import getFormatedCurrency, {
 import DownArrowIcon from "../../../../public/assets/icons/DownArrowIcon";
 import TreeCostLoader from "../../../Common/ContentLoaders/TreeCostLoader";
 import { getCountryDataBy } from "../../../Utils/countryUtils";
-import { getPaymentOptionIcons } from "src/Utils/getImageURL";
+// import { getPaymentOptionIcons } from "src/Utils/getImageURL";
 import { useRouter } from "next/router";
 
 interface Props {
@@ -121,16 +121,17 @@ function FundingDonations({ setopenCurrencyModal }: Props): ReactElement {
                 ) : (
                   []
                 )}
-                {paymentSetup.options[index].icon ? (
-                  <img
-                    className="funding-icon"
-                    src={getPaymentOptionIcons(
-                      paymentSetup.options[index].icon
-                    )}
-                  />
-                ) : (
-                  []
-                )}
+                {paymentSetup.options[index].icon
+                  ? // <img
+                    //   className="funding-icon"
+                    //   src={
+                    //     getPaymentOptionIcons(
+                    //     paymentSetup.options[index].icon
+                    //   )
+                    // }
+                    // />
+                    getPaymentOptionIcons(paymentSetup.options[index].icon)
+                  : []}
                 <div
                   className={`funding-selection-option-text ${
                     option.caption ? "mt-10" : "m-10"
@@ -233,5 +234,15 @@ function FundingDonations({ setopenCurrencyModal }: Props): ReactElement {
     </>
   );
 }
-
+function getPaymentOptionIcons(logoName: string) {
+  return (
+    <div
+      className="funding-icon"
+      dangerouslySetInnerHTML={createMarkup(logoName)}
+    />
+  );
+}
+function createMarkup(logoName: string) {
+  return { __html: logoName };
+}
 export default FundingDonations;
diff --git a/src/Donations/Micros/PaymentStatus/Components/ReturnToButton.tsx b/src/Donations/Micros/PaymentStatus/Components/ReturnToButton.tsx
@@ -0,0 +1,44 @@
+import React, { ReactElement } from 'react'
+import { useRouter } from 'next/router'
+import { useTranslation } from 'next-i18next';
+import { QueryParamContext } from 'src/Layout/QueryParamContext';
+
+interface Props {
+    donationContext: string;
+    donationStatus: string;
+}
+
+export default function ReturnToButton({ donationContext, donationStatus }: Props): ReactElement {
+    const { returnTo, callbackMethod } = React.useContext(QueryParamContext);
+    const router = useRouter();
+    const { t } = useTranslation('common');
+
+    React.useEffect(() => {
+        if (callbackMethod === 'api') {
+            router.push(`${returnTo}?context=${donationContext}&don_status=${donationStatus}`)
+        }
+    }, [callbackMethod]);
+
+    const x = returnTo.slice(8);
+    const returnDisplay = x.split("/", 2);
+
+    const sendToReturn = () => {
+        if (callbackMethod === 'api') {
+            router.push(`${returnTo}?context=${donationContext}&don_status=${donationStatus}`)
+        } else {
+            router.push(`${returnTo}`);
+        }
+    }
+
+    return (
+        <>
+            <button
+                onClick={() => sendToReturn()}
+                className="primary-button"
+                style={{ marginBottom: 20 }}
+            >
+                {t('common:returnTo')} {returnDisplay[0]}
+            </button>
+        </>
+    )
+}
diff --git a/src/Donations/Micros/PaymentStatus/FailedDonation.tsx b/src/Donations/Micros/PaymentStatus/FailedDonation.tsx
@@ -8,6 +8,7 @@ import { apiRequest } from "src/Utils/api";
 import { useRouter } from "next/router";
 import { PAYMENT } from "src/Utils/donationStepConstants";
 import InfoIcon from "public/assets/icons/InfoIcon";
+import RetryIcon from "public/assets/icons/RetryIcon";
 
 function FailedDonation({ sendToReturn, donation }: any) {
   const { t } = useTranslation(["common"]);
@@ -134,6 +135,7 @@ function FailedDonation({ sendToReturn, donation }: any) {
           className="primary-button mt-20 mb-20"
           data-test-id="retryDonation"
         >
+          <RetryIcon color="#fff" />
           {t("common:retryPayment")}
         </button>
       )}

diff --git a/src/Donations/Micros/PaymentStatus/PendingDonation.tsx b/src/Donations/Micros/PaymentStatus/PendingDonation.tsx
@@ -4,6 +4,7 @@ import PaymentPendingIllustration from "../../../../public/assets/icons/donation
 import CloseIcon from "../../../../public/assets/icons/CloseIcon";
 import { QueryParamContext } from "../../../Layout/QueryParamContext";
 import themeProperties from "../../../../styles/themeProperties";
+import ReturnToButton from "./Components/ReturnToButton";
 
 function PendingDonation({ donationID, sendToReturn }: any) {
   const { t } = useTranslation(["common"]);
@@ -33,6 +34,9 @@ function PendingDonation({ donationID, sendToReturn }: any) {
         {t("common:transactionId")} {donationID}
       </div>
       <PaymentPendingIllustration />
+      {returnTo && (
+        <ReturnToButton donationContext={donationID} donationStatus="pending" />
+      )}
     </div>
   );
 }

diff --git a/src/Donations/Micros/PaymentStatus/SuccessfulDonation.tsx b/src/Donations/Micros/PaymentStatus/SuccessfulDonation.tsx
@@ -7,6 +7,7 @@ import { QueryParamContext } from "../../../Layout/QueryParamContext";
 import ImageComponent from "./ImageComponent";
 import ThankyouMessage from "./ThankyouMessage";
 import { useRouter } from 'next/router';
+import ReturnToButton from "./Components/ReturnToButton";
 
 
 function SuccessfulDonation({ donation, sendToReturn }: any) {
@@ -15,13 +16,13 @@ function SuccessfulDonation({ donation, sendToReturn }: any) {
   const [isMobile, setIsMobile] = React.useState(false);
   const { donationID, tenant } = React.useContext(QueryParamContext);
   React.useEffect(() => {
-    if(typeof window !== 'undefined') {
-      if(window.innerWidth > 767) {
+    if (typeof window !== 'undefined') {
+      if (window.innerWidth > 767) {
         setIsMobile(false);
       } else {
         setIsMobile(true);
+      }
     }
-  }
   });
   const { paymentType, returnTo, projectDetails } =
     React.useContext(QueryParamContext);
@@ -32,24 +33,8 @@ function SuccessfulDonation({ donation, sendToReturn }: any) {
 
   const sendRef = () => imageRef;
 
-  let returnDisplay;
-  if (returnTo) {
-    const x = returnTo.slice(8);
-    returnDisplay = x.split("/", 2);
-  }
-
   return donation ? (
     <div>
-      {returnTo && (
-        <button
-          id={"thank-you-close"}
-          onClick={() => sendToReturn()}
-          className="mb-10 text-primary"
-          style={{ alignSelf: "flex-start" }}
-        >
-          Back to {returnDisplay[0]}
-        </button>
-      )}
 
       <div className={"title-text thankyouText"} data-test-id="test-thankYou">
         {t("common:thankYou")}
@@ -79,6 +64,9 @@ function SuccessfulDonation({ donation, sendToReturn }: any) {
           {`Ref - ${donationID}`}
         </a>
       )}
+      {returnTo && (
+        <ReturnToButton returnTo={returnTo} donationContext={donationID} donationStatus="success" />
+      )}
     </div>
   ) : (
     <></>

diff --git a/src/Donations/Micros/PaymentStatus/TransferDetails.tsx b/src/Donations/Micros/PaymentStatus/TransferDetails.tsx
@@ -4,6 +4,7 @@ import CloseIcon from "../../../../public/assets/icons/CloseIcon";
 import { QueryParamContext } from "../../../Layout/QueryParamContext";
 import themeProperties from "../../../../styles/themeProperties";
 import CopyIcon from "public/assets/icons/CopyIcon";
+import ReturnToButton from "./Components/ReturnToButton";
 
 function TransferDetails({ donationID, donation, sendToReturn }: any) {
   const { t } = useTranslation(["common"]);
@@ -109,6 +110,9 @@ function TransferDetails({ donationID, donation, sendToReturn }: any) {
       >
         {t("common:transactionId")} {donationID}
       </div>
+      {returnTo && (
+        <ReturnToButton donationContext={donationID} donationStatus="pending" />
+      )}
     </div>
   );
 }

diff --git a/src/Donations/index.tsx b/src/Donations/index.tsx
@@ -227,18 +227,22 @@ function DonationInfo() {
                   target="_blank"
                   href={`https://www.trilliontreecampaign.org/${projectDetails.slug}`}
                   className="title-text text-white"
+                  style={{ marginTop: "10px" }}
                 >
                   {projectDetails.name}
                 </a>
               ) : (
-                <h1 className="title-text text-white">{projectDetails.name}</h1>
+                <h1
+                  className="title-text text-white"
+                  style={{ marginTop: "10px" }}
+                >
+                  {projectDetails.name}
+                </h1>
               )}
 
               {projectDetails.purpose === "funds" ||
               projectDetails.purpose === "bouquet" ? (
-                <p className="text-white mt-10">
-                  {projectDetails.description}
-                </p>
+                <p className="text-white mt-10">{projectDetails.description}</p>
               ) : (
                 []
               )}

diff --git a/src/Layout/Footer.tsx b/src/Layout/Footer.tsx
@@ -21,13 +21,13 @@ import CloseIcon from "../../public/assets/icons/CloseIcon";
 import { useAuth0 } from "@auth0/auth0-react";
 import themeProperties from "../../styles/themeProperties";
 
-interface Props {}
+interface Props { }
 
-function Footer({}: Props): ReactElement {
+function Footer({ }: Props): ReactElement {
   const [languageModalOpen, setlanguageModalOpen] = React.useState(false);
   const { language, setlanguage } = React.useContext(QueryParamContext);
 
-  const { returnTo } = React.useContext(QueryParamContext);
+  const { returnTo, donationStep } = React.useContext(QueryParamContext);
   const { t, i18n, ready } = useTranslation(["common"]);
 
   const { theme } = React.useContext(ThemeContext);
@@ -36,7 +36,7 @@ function Footer({}: Props): ReactElement {
     <div className="footer">
       <div className="footer-container">
         <DarkModeSwitch />
-        {returnTo ? <a href={returnTo}>{t("cancelReturn")}</a> : <p></p>}
+        {returnTo && donationStep !== 4 ? <a href={returnTo}>{t("cancelReturn")}</a> : <p></p>}
         <div className="footer-links">
           <button onClick={() => setlanguageModalOpen(!languageModalOpen)} data-test-id="languageButton">
             {`${getLanguageName(language)}`}