fix: fixes visible currency selector for non tree donations while dis…

…playing gift form
Plant-for-the-Planet-org · Nov 21, 2024 · bc4af28 · bc4af28
1 parent fb98cd9
commit bc4af28
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 28 deletions.
diff --git a/src/Donations/Micros/DonationTypes/BouquetDonations.tsx b/src/Donations/Micros/DonationTypes/BouquetDonations.tsx
@@ -131,12 +131,12 @@ function BouquetDonations({ setopenCurrencyModal }: Props): ReactElement {
   //   return Math.trunc(Math.ceil(cost/5)*5);
   // }
   return (
-    <>
-      <div
-        className={`funding-selection-options-container ${
-          isGift && giftDetails.recipientName === "" ? "display-none" : ""
-        }`}
-      >
+    <div
+      className={`bouquet-selection ${
+        isGift && giftDetails.recipientName === "" ? "display-none" : ""
+      }`}
+    >
+      <div className="bouquet-selection-options-container">
         {paymentSetup &&
           paymentSetup.frequencies &&
           paymentSetup.frequencies[`${frequency}`].options.map(
@@ -149,14 +149,14 @@ function BouquetDonations({ setopenCurrencyModal }: Props): ReactElement {
                     setisCustomDonation(false);
                     setCustomInputValue("");
                   }}
-                  className={`funding-selection-option ${
+                  className={`bouquet-selection-option ${
                     approximatelyEqual(option.quantity, quantity) &&
                     !isCustomDonation
-                      ? "funding-selection-option-selected"
+                      ? "bouquet-selection-option-selected"
                       : ""
                   }`}
                 >
-                  <div className="funding-selection-option-text m-10">
+                  <div className="bouquet-selection-option-text m-10">
                     <span style={{ fontSize: "18px" }}>
                       {paymentSetup.purpose === "conservation"
                         ? option.quantity
@@ -175,8 +175,8 @@ function BouquetDonations({ setopenCurrencyModal }: Props): ReactElement {
                 </div>
               ) : (
                 <div
-                  className={`funding-selection-option custom ${
-                    isCustomDonation ? "funding-selection-option-selected" : ""
+                  className={`bouquet-selection-option custom ${
+                    isCustomDonation ? "bouquet-selection-option-selected" : ""
                   }`}
                   onClick={() => {
                     setisCustomDonation(true);
@@ -197,7 +197,7 @@ function BouquetDonations({ setopenCurrencyModal }: Props): ReactElement {
                           : []}
                       </p>
                       <input
-                        className={"funding-custom-tree-input"}
+                        className={"bouquet-custom-tree-input"}
                         style={{ fontSize: "18px" }}
                         onInput={(e: ChangeEvent<HTMLInputElement>) => {
                           // replaces any character other than number to blank
@@ -239,7 +239,7 @@ function BouquetDonations({ setopenCurrencyModal }: Props): ReactElement {
                     </div>
                   ) : (
                     <div
-                      className="funding-selection-option-text"
+                      className="bouquet-selection-option-text"
                       style={{ fontSize: "18px" }}
                     >
                       <p style={{ margin: "5px" }}>
@@ -299,7 +299,7 @@ function BouquetDonations({ setopenCurrencyModal }: Props): ReactElement {
           <TreeCostLoader width={150} />
         </div>
       )}
-    </>
+    </div>
   );
 }
 

diff --git a/src/Donations/Micros/DonationTypes/FundingDonations.tsx b/src/Donations/Micros/DonationTypes/FundingDonations.tsx
@@ -103,12 +103,12 @@ function FundingDonations({ setopenCurrencyModal }: Props): ReactElement {
   const customInputRef = React.useRef<HTMLInputElement>(null);
 
   return (
-    <>
-      <div
-        className={`funding-selection-options-container ${
-          isGift && giftDetails.recipientName === "" ? "display-none" : ""
-        }`}
-      >
+    <div
+      className={`funding-selection ${
+        isGift && giftDetails.recipientName === "" ? "display-none" : ""
+      }`}
+    >
+      <div className="funding-selection-options-container">
         {paymentSetup &&
           paymentSetup.frequencies &&
           paymentSetup.frequencies[`${frequency}`] &&
@@ -280,7 +280,7 @@ function FundingDonations({ setopenCurrencyModal }: Props): ReactElement {
           <TreeCostLoader width={150} />
         </div>
       )}
-    </>
+    </div>
   );
 }
 function getPaymentOptionIcons(logoName: string) {

diff --git a/styles/donations.scss b/styles/donations.scss
@@ -296,13 +296,15 @@
     width: 0px;
   }
 }
-.funding-selection-options-container {
+.funding-selection-options-container,
+.bouquet-selection-options-container {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: space-between;
   margin-top: 10px;
-  .funding-selection-option {
+  .funding-selection-option,
+  .bouquet-selection-option {
     width: 130px;
     margin: 10px;
     // height: 80px;
@@ -325,12 +327,14 @@
       flex: calc(50% - 20px);
     }
     &.funding-selection-option-selected,
+    &.bouquet-selection-option-selected,
     &:hover,
     &:focus {
       cursor: pointer;
       background-color: $primaryColor;
       border: 1px solid $primaryColor;
-      .funding-selection-option-text {
+      .funding-selection-option-text,
+      .bouquet-selection-option-text {
         color: $primaryFontColor;
         p,
         span {
@@ -349,7 +353,8 @@
     &:active {
       transform: scale(0.98);
     }
-    .funding-selection-option-text {
+    .funding-selection-option-text,
+    .bouquet-selection-option-text {
       text-align: left;
       line-height: 1;
       // margin-left: 12px;
@@ -479,7 +484,8 @@
   outline: 0px;
   font-size: 16px;
 }
-.funding-custom-tree-input {
+.funding-custom-tree-input,
+.bouquet-custom-tree-input {
   border: 0px;
   border-bottom: 2px solid $activeGreenBgTextColor;
   width: 100%;
@@ -751,9 +757,11 @@
     width: 100px;
     padding: 12px;
   }
-  .funding-selection-options-container {
+  .funding-selection-options-container,
+  .bouquet-selection-options-container {
     margin-top: 10px;
-    .funding-selection-option {
+    .funding-selection-option,
+    .bouquet-selection-option {
       width: 160px;
       &.monthly-option {
         width: 100px;