fix: resolves bugs with planetcash switch

- planetcash switch auto enabled after disable > resolved - planetcash switch auto enabled after editing gift/amount > resolved
Plant-for-the-Planet-org · Jan 16, 2024 · 9050c73 · 9050c73
1 parent 260f44c
commit 9050c73
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 28 deletions.
diff --git a/src/Common/Types/QueryParamContextInterface.ts b/src/Common/Types/QueryParamContextInterface.ts
@@ -109,8 +109,8 @@ export default interface QueryParamContextInterface {
     paymentSetupCountry: string;
     shouldSetPaymentDetails?: boolean;
   }) => Promise<void>;
-  isPlanetCashActive: boolean;
-  setIsPlanetCashActive: Dispatch<SetStateAction<boolean>>;
+  isPlanetCashActive: boolean | null;
+  setIsPlanetCashActive: Dispatch<SetStateAction<boolean | null>>;
   onBehalf: boolean;
   setOnBehalf: Dispatch<SetStateAction<boolean>>;
   onBehalfDonor: OnBehalfDonor;

diff --git a/src/Donations/Micros/PlanetCashSelector.tsx b/src/Donations/Micros/PlanetCashSelector.tsx
@@ -19,7 +19,6 @@ const PlanetCashSelector: FC = () => {
     country,
     setcountry,
     frequency,
-    paymentRequest,
   } = useContext(QueryParamContext);
   const router = useRouter();
 
@@ -37,20 +36,28 @@ const PlanetCashSelector: FC = () => {
   }, [paymentSetup?.unitCost, quantity, setIsPlanetCashActive]);
 
   useEffect(() => {
-    // On Load If selected country is planetCash Country and balance is sufficient activate planetCash.
-
-    if (
-      country === profile?.planetCash?.country &&
-      paymentSetup &&
-      paymentSetup.unitCost * quantity <=
-        profile.planetCash.balance / 100 + profile.planetCash.creditLimit / 100
-    ) {
-      setIsPlanetCashActive(true);
-    }
-    if (frequency !== "once") {
+    if (frequency !== "once" && isPlanetCashActive !== null) {
       setIsPlanetCashActive(false);
+    } else {
+      if (
+        isPlanetCashActive === null &&
+        country === profile?.planetCash?.country &&
+        paymentSetup &&
+        paymentSetup.unitCost * quantity <=
+          (profile.planetCash.balance + profile.planetCash.creditLimit) / 100
+      ) {
+        setIsPlanetCashActive(true);
+      }
     }
-  }, [paymentRequest, frequency]);
+  }, [
+    country,
+    profile,
+    paymentSetup,
+    quantity,
+    frequency,
+    isPlanetCashActive,
+    frequency,
+  ]);
 
   useEffect(() => {
     // This is done to lock the transaction with PlanetCash in a single currency.
@@ -208,11 +215,13 @@ const PlanetCashSelector: FC = () => {
         </div>
         <div title={disabledReason() ? disabledReason() : ""}>
           <ToggleSwitch
-            checked={isPlanetCashActive}
+            checked={isPlanetCashActive === true}
             disabled={shouldPlanetCashDisable()}
-            onChange={() =>
-              setIsPlanetCashActive((isPlanetCashActive) => !isPlanetCashActive)
-            }
+            onChange={() => {
+              setIsPlanetCashActive(
+                (isPlanetCashActive) => !isPlanetCashActive
+              );
+            }}
           />
         </div>
       </div>

diff --git a/src/Layout/QueryParamContext.tsx b/src/Layout/QueryParamContext.tsx
@@ -138,7 +138,9 @@ const QueryParamProvider: FC = ({ children }) => {
   const [transferDetails, setTransferDetails] =
     useState<BankTransferDetails | null>(null);
 
-  const [isPlanetCashActive, setIsPlanetCashActive] = useState(false);
+  const [isPlanetCashActive, setIsPlanetCashActive] = useState<boolean | null>(
+    null
+  );
 
   // Only used when planetCash is active
   const [onBehalf, setOnBehalf] = useState(false);
@@ -151,7 +153,7 @@ const QueryParamProvider: FC = ({ children }) => {
 
   const [donation, setDonation] = useState<Donation | null>(null);
   const [paymentRequest, setPaymentRequest] = useState<PaymentRequest | null>(
-    null,
+    null
   );
 
   const [errors, setErrors] = React.useState<SerializedError[] | null>(null);
@@ -163,8 +165,9 @@ const QueryParamProvider: FC = ({ children }) => {
         setshowErrorCard,
         shouldQueryParamAdd: false,
       };
-      const response: { data: Record<string, string> } =
-        await apiRequest(requestParams);
+      const response: { data: Record<string, string> } = await apiRequest(
+        requestParams
+      );
       setEnabledCurrencies(response.data);
     } catch (err) {
       console.log(err);
@@ -198,7 +201,7 @@ const QueryParamProvider: FC = ({ children }) => {
 
   function testURL(url: string) {
     const pattern = new RegExp(
-      /(http(s)?:\/\/.)?(www\.)?[-a-zA-Z0-9@:%._+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_+.~#?&//=]*)/g,
+      /(http(s)?:\/\/.)?(www\.)?[-a-zA-Z0-9@:%._+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_+.~#?&//=]*)/g
     );
     // regex source https://tutorial.eyehunts.com/js/url-regex-validation-javascript-example-code/
     return !!pattern.test(url);
@@ -242,7 +245,7 @@ const QueryParamProvider: FC = ({ children }) => {
       const projects = response.data as Project[];
       if (projects) {
         const allowedDonationsProjects = projects.filter(
-          (project) => project.properties.allowDonations === true,
+          (project) => project.properties.allowDonations === true
         );
         setAllProjects(allowedDonationsProjects);
         if (allowedDonationsProjects?.length < 6) {
@@ -373,7 +376,7 @@ const QueryParamProvider: FC = ({ children }) => {
           const found = countriesData.some(
             (arrayCountry) =>
               arrayCountry.countryCode?.toUpperCase() ===
-              config.data.country?.toUpperCase(),
+              config.data.country?.toUpperCase()
           );
           if (found) {
             // This is to make sure donations which are already created with some country do not get affected by country from user config
@@ -492,8 +495,9 @@ const QueryParamProvider: FC = ({ children }) => {
         tenant,
         locale: i18n.language,
       };
-      const paymentSetupData: { data: PaymentOptions } =
-        await apiRequest(requestParams);
+      const paymentSetupData: { data: PaymentOptions } = await apiRequest(
+        requestParams
+      );
       if (paymentSetupData.data) {
         const paymentSetup = paymentSetupData.data;
         if (shouldSetPaymentDetails) {