refactor: extr PlanetCashSignup from PaymentStatus

- renames .donations-form-container to .left-panel-container - reduces linkage of PlanetCashSignup with PaymentStatus
Plant-for-the-Planet-org · Aug 30, 2023 · 3368e69 · 3368e69
1 parent 5653fc4
commit 3368e69
Show file tree

Hide file tree

Showing 8 changed files with 98 additions and 98 deletions.
diff --git a/src/Common/AuthInterstitial/index.tsx b/src/Common/AuthInterstitial/index.tsx
@@ -21,7 +21,7 @@ const AuthInterstitial = (): ReactElement => {
           <LeftPanelContainer tenant={tenant} />
           {/* Right Panel */}
           <div
-            className="donations-forms-container"
+            className="right-panel-container"
             style={{ paddingBottom: "0px" }}
           >
             <div className="donations-form w-100">

diff --git a/src/Donations/Components/ContactsForm.tsx b/src/Donations/Components/ContactsForm.tsx
@@ -191,7 +191,7 @@ function ContactsForm(): ReactElement {
   const { theme } = React.useContext(ThemeContext);
   let suggestion_counter = 0;
   return (
-    <div className={"donations-forms-container"}>
+    <div className="right-panel-container">
       <div className="donations-form">
         <div className="d-flex w-100 align-items-center">
           <button

diff --git a/src/Donations/Components/DonationsForm.tsx b/src/Donations/Components/DonationsForm.tsx
@@ -320,7 +320,7 @@ function DonationsForm(): ReactElement {
   return isPaymentProcessing ? (
     <PaymentProgress isPaymentProcessing={isPaymentProcessing} />
   ) : projectDetails ? (
-    <div className="donations-forms-container">
+    <div className="right-panel-container">
       <div className="w-100">
         <Authentication />
         <div className="donations-tree-selection-step">

diff --git a/src/Donations/Components/PaymentStatus.tsx b/src/Donations/Components/PaymentStatus.tsx
@@ -118,63 +118,61 @@ function ThankYou(): ReactElement {
     }
   };
 
-  return (
-    <div className="donations-forms-container" style={{ paddingBottom: "0px" }}>
-      {projectDetails?.purpose === "planet-cash-signup" ? (
-        <PlanetCashSignup />
-      ) : (
-        <div className="donations-form w-100">
-          {!ready && !donation ? (
-            <PaymentProgress isPaymentProcessing={true} />
-          ) : (
-            <div>
-              {donation && donation.paymentStatus ? (
-                status === "success" ||
-                status === "paid" ||
-                status === "succeeded" ? (
-                  <SuccessComponent />
-                ) : status === "failed" || paymentError ? (
-                  <FailedDonation
-                    sendToReturn={sendToReturn}
-                    donation={donation}
-                  />
-                ) : transferDetails ? (
-                  <TransferDetails
-                    donationID={donationID as string}
-                    donation={donation}
-                    sendToReturn={sendToReturn}
-                  />
-                ) : (
-                  <PendingDonation
-                    donationID={donationID as string}
-                    sendToReturn={sendToReturn}
-                  />
-                )
+  return projectDetails?.purpose === "planet-cash-signup" ? (
+    <PlanetCashSignup />
+  ) : (
+    <div className="right-panel-container" style={{ paddingBottom: "0px" }}>
+      <div className="donations-form w-100">
+        {!ready && !donation ? (
+          <PaymentProgress isPaymentProcessing={true} />
+        ) : (
+          <div>
+            {donation && donation.paymentStatus ? (
+              status === "success" ||
+              status === "paid" ||
+              status === "succeeded" ? (
+                <SuccessComponent />
+              ) : status === "failed" || paymentError ? (
+                <FailedDonation
+                  sendToReturn={sendToReturn}
+                  donation={donation}
+                />
+              ) : transferDetails ? (
+                <TransferDetails
+                  donationID={donationID as string}
+                  donation={donation}
+                  sendToReturn={sendToReturn}
+                />
               ) : (
-                <div className={styles.loaderContainer}>
-                  <CircularProgress color="inherit" />
-                </div>
-              )}
-            </div>
-          )}
-
-          <Snackbar
-            open={textCopiedsnackbarOpen}
-            autoHideDuration={4000}
+                <PendingDonation
+                  donationID={donationID as string}
+                  sendToReturn={sendToReturn}
+                />
+              )
+            ) : (
+              <div className={styles.loaderContainer}>
+                <CircularProgress color="inherit" />
+              </div>
+            )}
+          </div>
+        )}
+
+        <Snackbar
+          open={textCopiedsnackbarOpen}
+          autoHideDuration={4000}
+          onClose={handleTextCopiedSnackbarClose}
+          anchorOrigin={{ vertical: "bottom", horizontal: "center" }}
+        >
+          <MuiAlert
+            elevation={6}
+            variant="filled"
             onClose={handleTextCopiedSnackbarClose}
-            anchorOrigin={{ vertical: "bottom", horizontal: "center" }}
+            severity="success"
           >
-            <MuiAlert
-              elevation={6}
-              variant="filled"
-              onClose={handleTextCopiedSnackbarClose}
-              severity="success"
-            >
-              {t("donate:copiedToClipboard")}
-            </MuiAlert>
-          </Snackbar>
-        </div>
-      )}
+            {t("donate:copiedToClipboard")}
+          </MuiAlert>
+        </Snackbar>
+      </div>
     </div>
   );
 }

diff --git a/src/Donations/Components/PaymentsForm.tsx b/src/Donations/Components/PaymentsForm.tsx
@@ -280,7 +280,7 @@ function PaymentsForm(): ReactElement {
     isPaymentProcessing ? (
       <PaymentProgress isPaymentProcessing={isPaymentProcessing} />
     ) : (
-      <div className={"donations-forms-container"}>
+      <div className="right-panel-container">
         <div
           className="donations-form"
           style={{ display: "flex", flexDirection: "column", width: "100%" }}

diff --git a/src/Donations/Components/SelectProject.tsx b/src/Donations/Components/SelectProject.tsx
@@ -67,7 +67,7 @@ function SelectProject(): ReactElement {
 
   return (selectedProjects && selectedProjects.length > 0) || searchValue ? (
     <div
-      className={`donations-forms-container column ${
+      className={`right-panel-container column ${
         selectedProjects.length > 8 ? "scroll-donation-forms" : ""
       }`}
     >

diff --git a/src/Donations/Micros/PlanetCashSignup.tsx b/src/Donations/Micros/PlanetCashSignup.tsx
@@ -161,43 +161,45 @@ const PlanetCashSignup = (): ReactElement => {
   };
 
   return (
-    <RootContainer>
-      <div>
-        <p className="title-text mb-20">{t("planetCashSignup")}</p>
-
-        <p className="mb-20">{t("noPlanetCashAccount")}</p>
-
-        <div className={"form-field mb-20"}>
-          <CountrySelect
-            allowedCountries={allowedCountries}
-            label={t("country")}
-            name="country"
-            onValueChange={onChangeCountry}
-            defaultValue={country}
-          />
+    <div className="right-panel-container" style={{ paddingBottom: "0px" }}>
+      <RootContainer>
+        <div>
+          <p className="title-text mb-20">{t("planetCashSignup")}</p>
+
+          <p className="mb-20">{t("noPlanetCashAccount")}</p>
+
+          <div className={"form-field mb-20"}>
+            <CountrySelect
+              allowedCountries={allowedCountries}
+              label={t("country")}
+              name="country"
+              onValueChange={onChangeCountry}
+              defaultValue={country}
+            />
+          </div>
+          <div className="mb-20">
+            <Trans i18nKey={"common:planetCashTC"}>
+              <TCLink
+                rel="noopener noreferrer"
+                href={`https://pp.eco/legal/${i18n.language}/terms`}
+                target={"_blank"}
+              ></TCLink>
+            </Trans>
+          </div>
+          <p>{t("planetCashIUnderstand")}</p>
         </div>
-        <div className="mb-20">
-          <Trans i18nKey={"common:planetCashTC"}>
-            <TCLink
-              rel="noopener noreferrer"
-              href={`https://pp.eco/legal/${i18n.language}/terms`}
-              target={"_blank"}
-            ></TCLink>
-          </Trans>
-        </div>
-        <p>{t("planetCashIUnderstand")}</p>
-      </div>
-      <button
-        onClick={
-          !loading && currentPlanetCashAccount
-            ? handleActivatePlanetCashAccount
-            : handleCreatePlanetCashAccount
-        }
-        className="primary-button w-100 mt-30"
-      >
-        {t("createPlanetCashAccount")}
-      </button>
-    </RootContainer>
+        <button
+          onClick={
+            !loading && currentPlanetCashAccount
+              ? handleActivatePlanetCashAccount
+              : handleCreatePlanetCashAccount
+          }
+          className="primary-button w-100 mt-30"
+        >
+          {t("createPlanetCashAccount")}
+        </button>
+      </RootContainer>
+    </div>
   );
 };
 

diff --git a/styles/donations.scss b/styles/donations.scss
@@ -29,7 +29,7 @@
   flex-direction: column;
 }
 
-.donations-forms-container {
+.right-panel-container {
   display: flex;
   padding: 20px;
   width: 100%;
@@ -743,7 +743,7 @@
 }
 
 @include smTabletView {
-  .donations-forms-container {
+  .right-panel-container {
     max-width: 420px;
     padding: 30px;
   }
@@ -807,7 +807,7 @@
     align-items: center;
     max-width: 840px;
   }
-  .donations-forms-container {
+  .right-panel-container {
     width: 420px;
     padding-bottom: 30px;
     margin-top: 0px;