refactor: separates TransactionSummary component

- moves code to show transaction summary into it's own component
- transaction summary e.g. "Donating $5 for 1 tree every month"

Author: mohitb35

src/Donations/LeftPanel/LeftPanel.module.scss

@@ -98,6 +98,11 @@
   }
 }
 
+.transaction-summary {
+  margin-top: 10px;
+  color: $light;
+}
+
 @include smTabletView {
   .left-panel-container {
     padding: 30px;

src/Donations/LeftPanel/LeftPanelInfo.tsx

@@ -11,9 +11,8 @@ import {
   OnBehalfDonor,
   SentGift,
 } from "src/Common/Types";
-import getFormatedCurrency from "src/Utils/getFormattedCurrency";
-import { getFormattedNumber } from "src/Utils/getFormattedNumber";
 import Avatar from "./Avatar";
+import TransactionSummary from "./TransactionSummary";
 
 interface Props {
   isMobile: boolean;
@@ -58,7 +57,9 @@ const LeftPanelInfo = ({
   const { t, i18n } = useTranslation("common");
   const router = useRouter();
 
-  const canShowAvatar = Boolean(donationStep !== null && donationStep > 0);
+  const canShowAvatar = donationStep !== null && donationStep > 0;
+  const canShowTransactionSummary =
+    paymentSetup !== null && (donationStep === 2 || donationStep === 3);
 
   const handlePopoverOpen = (event: MouseEvent<HTMLElement>) => {
     setAnchorElement(event.currentTarget);
@@ -71,68 +72,14 @@ const LeftPanelInfo = ({
   return projectDetails ? (
     <div className="donations-info text-white">
       {canShowAvatar && <Avatar projectDetails={projectDetails} />}
-      {paymentSetup &&
-        (donationStep === 2 || donationStep === 3) &&
-        (projectDetails.purpose === "trees" ||
-          projectDetails.purpose === "conservation") && (
-          <div className="contact-details-info">
-            <div className={"w-100 mt-10 text-white"}>
-              {t("donating")}{" "}
-              <span className="text-bold" style={{ marginRight: "4px" }}>
-                {getFormatedCurrency(
-                  i18n.language,
-                  currency,
-                  paymentSetup.unitCost * quantity
-                )}
-              </span>
-              {paymentSetup.purpose === "trees"
-                ? t("fortreeCountTrees", {
-                    count: Number(quantity),
-                    treeCount: getFormattedNumber(
-                      i18n.language,
-                      Number(quantity)
-                    ),
-                  })
-                : paymentSetup.purpose === "conservation"
-                ? t("forQuantitym2", {
-                    quantity: getFormattedNumber(
-                      i18n.language,
-                      Number(quantity)
-                    ),
-                  })
-                : []}{" "}
-              {frequency === "monthly"
-                ? t("everyMonth")
-                : frequency === "yearly"
-                ? t("everyYear")
-                : ""}
-            </div>
-          </div>
-        )}
-
-      {paymentSetup &&
-        (donationStep === 2 || donationStep === 3) &&
-        (projectDetails.purpose === "bouquet" ||
-          projectDetails.purpose === "funds") && (
-          <div className="contact-details-info">
-            <div className={"w-100 mt-10 text-white"}>
-              {t("donating")}{" "}
-              <span className="text-bold" style={{ marginRight: "4px" }}>
-                {getFormatedCurrency(
-                  i18n.language,
-                  currency,
-                  paymentSetup.unitCost * quantity
-                )}
-              </span>
-              {frequency === "monthly"
-                ? t("everyMonth")
-                : frequency === "yearly"
-                ? t("everyYear")
-                : ""}
-            </div>
-          </div>
-        )}
-
+      {canShowTransactionSummary && (
+        <TransactionSummary
+          currency={currency}
+          quantity={quantity}
+          frequency={frequency}
+          paymentSetup={paymentSetup}
+        />
+      )}
       {donationStep && donationStep > 0 ? (
         <>
           {projectDetails.purpose === "trees" ||

src/Donations/LeftPanel/TransactionSummary.tsx

@@ -0,0 +1,80 @@
+import { ReactElement } from "react";
+import { useTranslation } from "next-i18next";
+import getFormatedCurrency from "src/Utils/getFormattedCurrency";
+import { getFormattedNumber } from "src/Utils/getFormattedNumber";
+import { PaymentOptions, ProjectPurpose } from "src/Common/Types";
+import styles from "./LeftPanel.module.scss";
+
+interface Props {
+  currency: string;
+  quantity: number;
+  frequency: string;
+  paymentSetup: PaymentOptions;
+}
+
+const TransactionSummary = ({
+  currency,
+  quantity,
+  frequency,
+  paymentSetup,
+}: Props): ReactElement => {
+  const { t, i18n } = useTranslation("common");
+
+  /** Generates unit/frequency info when needed */
+  const getAdditionalInfo = (
+    purpose: ProjectPurpose,
+    frequency: string
+  ): string => {
+    let info = "";
+    switch (purpose) {
+      case "trees":
+        info =
+          info +
+          " " +
+          t("fortreeCountTrees", {
+            count: Number(quantity),
+            treeCount: getFormattedNumber(i18n.language, Number(quantity)),
+          });
+        break;
+      case "conservation":
+        info =
+          info +
+          " " +
+          t("forQuantitym2", {
+            quantity: getFormattedNumber(i18n.language, Number(quantity)),
+          });
+        break;
+      default:
+        break;
+    }
+
+    switch (frequency) {
+      case "monthly":
+        info = info + " " + t("everyMonth");
+        break;
+      case "yearly":
+        info = info + " " + t("everyYear");
+        break;
+      default:
+        break;
+    }
+
+    return info;
+  };
+
+  return (
+    <div className={styles["transaction-summary"]}>
+      {t("donating")}{" "}
+      <strong>
+        {getFormatedCurrency(
+          i18n.language,
+          currency,
+          paymentSetup.unitCost * quantity
+        )}
+      </strong>
+      {getAdditionalInfo(paymentSetup.purpose, frequency)}
+    </div>
+  );
+};
+
+export default TransactionSummary;