Merge pull request #16 from Plant-for-the-Planet-org/feature/backgrou…

…ndImage Images on the left card
Plant-for-the-Planet-org · May 20, 2021 · ed4f7b8 · ed4f7b8
2 parents 4e579f9 + f46b008
commit ed4f7b8
Show file tree

Hide file tree

Showing 14 changed files with 145 additions and 112 deletions.
diff --git a/public/assets/images/forest.jpg b/public/assets/images/forest.jpg
diff --git a/public/assets/images/forest2.jpg b/public/assets/images/forest2.jpg
diff --git a/public/locales/en/common.json b/public/locales/en/common.json
@@ -64,8 +64,8 @@
   "donationPending": "Completing your donation",
   "donationPendingMessage": "We are currently waiting for the confirmation from your bank. This might take some time so, please feel free to close this page. We’ll send your receipt via email shortly.",
   "donationRef": "Donation Ref",
-  "privacyPolicyNotice": "By using this website, you agree to Plant-for-the-Planet's",
-  "privacyPolicy": "privacy & cookie policy",
+  "privacyPolicyNotice": "By using this website, you agree to our",
+  "privacyPolicy": "cookie policy",
   "acceptClose": "Accept and close",
   "verifyEmail": "Verify Email",
   "verifyEmailHeader": "Please confirm your email",
@@ -84,7 +84,7 @@
   "logout": "Logout",
   "directGiftRecipient": "This donation supports {{name}}",
   "saveGiftDetails": "Save Gift Details",
-  "giftSomeone": "My donation is a gift to someone",
+  "giftSomeone": "My donation is a dedicated to someone",
   "payPalCard": "Use PayPal or Card",
   "donateNow": "Donate Now",
   "or": "OR",

diff --git a/public/tenants/default/default-forest.jpg b/public/tenants/default/default-forest.jpg
diff --git a/public/tenants/leniklum/leniklum.jpg b/public/tenants/leniklum/leniklum.jpg
diff --git a/src/Donations/Components/PaymentsForm.tsx b/src/Donations/Components/PaymentsForm.tsx
@@ -81,8 +81,8 @@ function PaymentsForm({}: Props): ReactElement {
 
   const onPaymentFunction = async (paymentMethod: any, paymentRequest: any) => {
     setPaymentType(paymentRequest._activeBackingLibraryName);
-    let gateway= "stripe";
-    onSubmitPayment(gateway,paymentMethod)
+    let gateway = "stripe";
+    onSubmitPayment(gateway, paymentMethod);
   };
 
   async function getDonation() {
@@ -180,7 +180,7 @@ function PaymentsForm({}: Props): ReactElement {
               )
             ) : null}
           </div>
-          
+
           {paymentError && <div className={"text-danger"}>{paymentError}</div>}
 
           {donationID && paymentSetup && paymentSetup.gateways && (
@@ -300,13 +300,15 @@ function PaymentsForm({}: Props): ReactElement {
           )}
           <br />
           <a
-        href="https://a.plant-for-the-planet.org/"
-        target="_blank"
-        rel="noreferrer"
-        className="text-center nolink"
-      >
-        {t("donationProcessedBy")}
-      </a>
+            href="https://a.plant-for-the-planet.org/"
+            target="_blank"
+            rel="noreferrer"
+            className="text-center nolink"
+            style={{ fontStyle: "italic" }}
+          >
+            {t("donationProcessedBy")}
+            {/* Needs break */}
+          </a>
         </div>
       </div>
     )

diff --git a/src/Donations/Components/ThankYouComponent.tsx b/src/Donations/Components/ThankYouComponent.tsx
@@ -100,7 +100,7 @@ function ThankYou() {
   }
   function SuccessfulDonation() {
     return donation ? (
-      <div className="d-flex column justify-content-center">
+      <div>
         {returnTo ? (
           <button
             id={"thank-you-close"}
@@ -273,7 +273,7 @@ function ThankYou() {
   }
 
   return (
-    <div className="donations-forms-container">
+    <div className="donations-forms-container" style={{paddingBottom:'0px'}}>
       <div className="donations-form w-100">
         {!ready && !donation ? (
           <PaymentProgress isPaymentProcessing={true} />

diff --git a/src/Donations/PaymentMethods/Paypal.jsx b/src/Donations/PaymentMethods/Paypal.jsx
@@ -56,7 +56,7 @@ class Paypal extends React.Component {
         // users client id here
       [mode]: clientID
     };
-    const invoice_number = `ttc-${donationId}`;
+    const invoice_number = `planet-${donationId}`;
     //debug('invoice we are sending to paypal as donationId:', invoice_number);
     const payment = () => {
       return paypal.rest.payment.create(mode, CLIENT, {

diff --git a/src/Donations/index.tsx b/src/Donations/index.tsx
@@ -11,14 +11,14 @@ import { getFormattedNumber } from "../Utils/getFormattedNumber";
 import DownArrowIcon from "../../public/assets/icons/DownArrowIcon";
 import themeProperties from "../../styles/themeProperties";
 import { getCountryDataBy } from "../Utils/countryUtils";
-
+import { getTenantBackground } from "./../Utils/getTenantBackground";
+import getImageUrl from "../Utils/getImageURL";
 interface Props {}
 
 function Donations({}: Props): ReactElement {
   const { t, i18n, ready } = useTranslation("common");
-  const { paymentSetup, donationStep, projectDetails } = React.useContext(
-    QueryParamContext
-  );
+  const { paymentSetup, donationStep, projectDetails } =
+    React.useContext(QueryParamContext);
 
   return (
     <div className="donations-container">
@@ -48,101 +48,94 @@ function DonationInfo() {
     contactDetails,
     giftDetails,
     isGift,
+    tenant,
   } = React.useContext(QueryParamContext);
 
   return projectDetails && paymentSetup ? (
     <div className="donations-info-container">
-      {/* <img
-        className="background-image"
-        src="/assets/images/forest2.jpg"
-        width="420"
-        height="560"
-      />
-      <div className="background-image-overlay"></div> */}
-      <div className="donations-info">
-        <div className="donations-info-header">
+      <img className="background-image" src={getTenantBackground(tenant)} />
+      <div className="background-image-overlay"></div>
+      <div className="donations-info text-white">
+        {/* <img src={getImageUrl('profile', 'avatar', userInfo.profilePic)} /> */}
+        {(donationStep === 2 || donationStep === 3) && (
+          <div className="contact-details-info">
+            <div className={"w-100  mt-10"}>
+              {t("donating")}
+              <span className="text-bold" style={{ marginRight: "4px" }}>
+                {getFormatedCurrency(
+                  i18n.language,
+                  currency,
+                  paymentSetup.treeCost * treeCount
+                )}
+              </span>
+              {t("fortreeCountTrees", {
+                count: Number(treeCount),
+                treeCount: getFormattedNumber(i18n.language, Number(treeCount)),
+              })}
+            </div>
+          </div>
+        )}
+        <a
+          rel="noreferrer"
+          target="_blank"
+          href={`https://www.trilliontreecampaign.org/${projectDetails.slug}`}
+          className="title-text text-white"
+        >
+          {projectDetails.name}
+        </a>
+        {projectDetails.tpo && (
           <a
             rel="noreferrer"
             target="_blank"
-            href={`https://www.trilliontreecampaign.org/${projectDetails.slug}`}
-            className="title-text text-white"
+            href={`https://www.trilliontreecampaign.org/t/${projectDetails.tpo.slug}`}
+            className="text-white"
           >
-            {projectDetails.name}
+            {t("byOrganization", {
+              organizationName: projectDetails.tpo.name,
+            })}
           </a>
-          <div style={{ marginTop: "8px" }} />
-          {projectDetails.tpo && (
-            <a
-              rel="noreferrer"
-              target="_blank"
-              href={`https://www.trilliontreecampaign.org/t/${projectDetails.tpo.slug}`}
-              className="text-white"
-            >
-              {t("byOrganization", {
-                organizationName: projectDetails.tpo.name,
-              })}
-            </a>
-          )}
+        )}
 
-          {(donationStep === 2 || donationStep === 3) && (
-            <div>
-              <div className={"w-100  text-white mt-10"}>
-                {t('donating')}
-                <span className="text-bold" style={{ marginRight: "4px" }}>
-                  {getFormatedCurrency(
-                    i18n.language,
-                    currency,
-                    paymentSetup.treeCost * treeCount
-                  )}
-                </span>
-                {t("fortreeCountTrees", {
-                  count: Number(treeCount),
-                  treeCount: getFormattedNumber(
-                    i18n.language,
-                    Number(treeCount)
-                  ),
-                })}
-              </div>
-              {giftDetails && isGift && giftDetails.recipientName && (
-                <div className="donation-supports-info mt-10 text-white">
-                  <p>
-                    {t("directGiftRecipient", {
-                      name: giftDetails.recipientName,
-                    })}
-                  </p>
-                </div>
+        {(donationStep === 2 || donationStep === 3) &&
+          giftDetails &&
+          isGift &&
+          giftDetails.recipientName && (
+            <div className="contact-details-info  mt-20 donation-supports-info">
+              <p>Dedicated to</p>
+              <p className="text-bold">{giftDetails.recipientName}</p>
+              {giftDetails.giftMessage && (
+                <p>Message: {giftDetails.giftMessage}</p>
               )}
             </div>
           )}
-          {donationStep === 3 && contactDetails.firstname && (
-            <div className={"contact-details-info w-100 mt-10"}>
-              <div
-                className={`text-white button-reverse`}
-              >
-                {contactDetails.firstname && contactDetails.firstname}{" "}
-                {contactDetails.lastname && contactDetails.lastname}
-              </div>
-                <div className="text-white">
-                  <p>{contactDetails.email && contactDetails.email}</p>
-                  <p>
-                    {contactDetails.address && contactDetails.address}
-                    {", "}
-                    {contactDetails.city && contactDetails.city}
-                    {", "}
-                    {contactDetails.zipCode && contactDetails.zipCode}
-                  </p>
-                  <p>
-                    {contactDetails.country &&
-                      getCountryDataBy("countryCode", contactDetails.country)
-                        ?.countryName}
-                  </p>
-                </div>
-            </div>
-          )}
-        </div>
+        {donationStep === 3 && contactDetails.firstname && (
+          <div className={"contact-details-info w-100 mt-20"}>
+            <p>Billing Address</p>
+            <p className={`text-bold`}>
+              {contactDetails.firstname && contactDetails.firstname}{" "}
+              {contactDetails.lastname && contactDetails.lastname}
+            </p>
+            <p>{contactDetails.email && contactDetails.email}</p>
+            <p>
+              {contactDetails.address && contactDetails.address}
+              {", "}
+              {contactDetails.city && contactDetails.city}
+              {", "}
+              {contactDetails.zipCode && contactDetails.zipCode}
+            </p>
+            <p>
+              {contactDetails.country &&
+                getCountryDataBy("countryCode", contactDetails.country)
+                  ?.countryName}
+            </p>
+          </div>
+        )}
 
-        <div className="donations-transaction-details">
-          {donationID && `Ref - ${donationID}`}
-        </div>
+        {donationID && (
+          <p className="donations-transaction-details mt-20">
+            {`Ref - ${donationID}`}
+          </p>
+        )}
       </div>
     </div>
   ) : (

diff --git a/src/Layout/QueryParamContext.tsx b/src/Layout/QueryParamContext.tsx
@@ -44,7 +44,8 @@ export const QueryParamContext = React.createContext({
   isPaymentOptionsLoading: false,
   redirectstatus: "",
   returnTo: "",
-  isDirectDonation:false
+  isDirectDonation:false,
+  tenant:''
 });
 
 export default function QueryParamProvider({ children }: any) {
@@ -60,6 +61,7 @@ export default function QueryParamProvider({ children }: any) {
   const [language, setlanguage] = useState("en");
 
   const [donationID, setdonationID] = useState(null);
+  const [tenant, settenant] = useState('ten_I9TW3ncG');
 
   // for tax deduction part
   const [isTaxDeductible, setIsTaxDeductible] = React.useState(false);
@@ -268,6 +270,7 @@ export default function QueryParamProvider({ children }: any) {
 
   React.useEffect(() => {
     if (router.query.tenant) {
+      settenant(router.query.tenant);
       localStorage.setItem("tenant", router.query.tenant);
     }
   }, [router.query.tenant]);
@@ -343,7 +346,8 @@ export default function QueryParamProvider({ children }: any) {
         isPaymentOptionsLoading,
         redirectstatus,
         returnTo,
-        isDirectDonation
+        isDirectDonation,
+        tenant
       }}
     >
       {children}

diff --git a/src/Utils/getImageURL.ts b/src/Utils/getImageURL.ts
@@ -0,0 +1,16 @@
+// eslint-disable-next-line consistent-return
+export default function getImageUrl(
+  category: string,
+  variant: string,
+  imageName: any,
+) {
+    return `${process.env.CDN_URL}/media/cache/${category}/${variant}/${imageName}`;
+}
+
+export function getPDFFile(
+  category: string,
+  fileName: any,
+) {
+  return `${process.env.CDN_URL}/media/uploads/pdfs/${category}/${fileName}`;
+
+}
diff --git a/src/Utils/getTenantBackground.ts b/src/Utils/getTenantBackground.ts
@@ -0,0 +1,7 @@
+export function getTenantBackground(tenant:any){
+    switch(tenant){
+        case 'ten_I9TW3ncG': return '/tenants/default/default-forest.jpg';
+        case 'ten_KRHYP8TR': return '/tenants/leniklum/leniklum.jpg';
+        default : return '/tenants/default/default-forest.jpg';
+    }
+}