From 7e3d392ce4cf0e418ad419d3bd102fe8a1882fc3 Mon Sep 17 00:00:00 2001
From: Ralph <“ralph.galan@regen.network>
Date: Mon, 9 Sep 2024 13:41:53 +0100
Subject: [PATCH] fix: CreditsAmount Story + move getVintageCredits to utils

---
 .../CreditsAmount/CreditsAmount.stories.tsx   |  8 +++++
 .../molecules/CreditsAmount/CreditsAmount.tsx | 29 ++++---------------
 .../CreditsAmount/CreditsAmount.utils.tsx     | 17 ++++++++++-
 3 files changed, 30 insertions(+), 24 deletions(-)

diff --git a/web-marketplace/src/components/molecules/CreditsAmount/CreditsAmount.stories.tsx b/web-marketplace/src/components/molecules/CreditsAmount/CreditsAmount.stories.tsx
index ae7818c358..f6a2ceaa11 100644
--- a/web-marketplace/src/components/molecules/CreditsAmount/CreditsAmount.stories.tsx
+++ b/web-marketplace/src/components/molecules/CreditsAmount/CreditsAmount.stories.tsx
@@ -48,6 +48,10 @@ CreditsAmountCard.args = {
   paymentOption: PAYMENT_OPTIONS.CARD,
   currency: CURRENCIES.usd,
   setCurrency: () => {},
+  setSpendingCap: () => {},
+  creditsAvailable: 1000,
+  setCreditsAvailable: () => {},
+  creditVintages: [],
 };
 
 export const CreditsAmountCrypto: Story = {
@@ -59,4 +63,8 @@ CreditsAmountCrypto.args = {
   paymentOption: PAYMENT_OPTIONS.CRYPTO,
   currency: CURRENCIES.usd,
   setCurrency: () => {},
+  setSpendingCap: () => {},
+  creditsAvailable: 1000,
+  setCreditsAvailable: () => {},
+  creditVintages: [],
 };
diff --git a/web-marketplace/src/components/molecules/CreditsAmount/CreditsAmount.tsx b/web-marketplace/src/components/molecules/CreditsAmount/CreditsAmount.tsx
index ba5b69fd4a..8ac84864ef 100644
--- a/web-marketplace/src/components/molecules/CreditsAmount/CreditsAmount.tsx
+++ b/web-marketplace/src/components/molecules/CreditsAmount/CreditsAmount.tsx
@@ -21,6 +21,7 @@ import { CreditsAmountProps } from './CreditsAmount.types';
 import {
   getCreditsAvailablePerCurrency,
   getCurrencyPrice,
+  getVintageCredits,
 } from './CreditsAmount.utils';
 import { CreditsInput } from './CreditsInput';
 import { CurrencyInput } from './CurrencyInput';
@@ -45,15 +46,9 @@ export const CreditsAmount = ({
 
   useEffect(() => {
     if (creditVintageOptions && creditVintageOptions.length > 0) {
-      const getVintageCredits = (creditVintageOptions: string[]) => {
-        return creditVintageOptions.reduce((sum: number, option: string) => {
-          const credits =
-            creditVintages.find(vintage => vintage.batchDenom === option)
-              ?.credits || '0';
-          return sum + +credits;
-        }, 0);
-      };
-      setCreditsAvailable(getVintageCredits(creditVintageOptions));
+      setCreditsAvailable(
+        getVintageCredits(creditVintageOptions, creditVintages),
+      );
       setSpendingCap(creditsAvailable);
     } else {
       setCreditsAvailable(
@@ -78,13 +73,7 @@ export const CreditsAmount = ({
     const newPrice = getCurrencyPrice(currency, creditDetails);
     setPricePerCredit(newPrice);
     setCurrency(currency);
-  }, [
-    creditDetails,
-    currency,
-    paymentOption,
-    setCreditsAvailable,
-    setCurrency,
-  ]);
+  }, [creditDetails, currency, setCreditsAvailable, setCurrency]);
 
   // Max credits set
   useEffect(() => {
@@ -93,13 +82,7 @@ export const CreditsAmount = ({
       setValue(CURRENCY_AMOUNT, creditsAvailable * pricePerCredit);
       setMaxCreditsSelected(false);
     }
-  }, [
-    creditsAvailable,
-    pricePerCredit,
-    maxCreditsSelected,
-    setMaxCreditsSelected,
-    setValue,
-  ]);
+  }, [creditsAvailable, maxCreditsSelected, pricePerCredit, setValue]);
 
   // Credits amount change
   const handleCreditsAmountChange = useCallback(
diff --git a/web-marketplace/src/components/molecules/CreditsAmount/CreditsAmount.utils.tsx b/web-marketplace/src/components/molecules/CreditsAmount/CreditsAmount.utils.tsx
index 4cb6f827af..f0975362cc 100644
--- a/web-marketplace/src/components/molecules/CreditsAmount/CreditsAmount.utils.tsx
+++ b/web-marketplace/src/components/molecules/CreditsAmount/CreditsAmount.utils.tsx
@@ -1,4 +1,7 @@
-import { CreditDetails } from 'web-marketplace/src/components/organisms/ChooseCreditsForm/ChooseCreditsForm.types';
+import {
+  CreditDetails,
+  CreditsVintages,
+} from 'web-marketplace/src/components/organisms/ChooseCreditsForm/ChooseCreditsForm.types';
 
 import { Currency } from 'web-components/src/components/DenomIconWithCurrency/DenomIconWithCurrency.constants';
 
@@ -20,3 +23,15 @@ export const getCreditsAvailablePerCurrency = (
       ?.availableCredits || 0
   );
 };
+
+export const getVintageCredits = (
+  creditVintageOptions: string[],
+  creditVintages: CreditsVintages[],
+) => {
+  return creditVintageOptions.reduce((sum: number, option: string) => {
+    const credits =
+      creditVintages.find(vintage => vintage.batchDenom === option)?.credits ||
+      '0';
+    return sum + +credits;
+  }, 0);
+};