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); +};