refactor: available credits in ChooseCreditsForm

regen-network · Aug 8, 2024 · 7a61b7c · 7a61b7c
1 parent acd3861
commit 7a61b7c
Show file tree

Hide file tree

Showing 6 changed files with 110 additions and 24 deletions.
diff --git a/web-marketplace/src/components/molecules/CreditsAmount/CreditsAmount.constants.ts b/web-marketplace/src/components/molecules/CreditsAmount/CreditsAmount.constants.ts
@@ -1,5 +1,8 @@
+import { CURRENCIES } from 'web-components/src/components/DenomIconWithCurrency/DenomIconWithCurrency.constants';
+
 export const CREDITS_AMOUNT = 'creditsAmount';
 export const CURRENCY_AMOUNT = 'currencyAmount';
+export const DEFAULT_CRYPTO_CURRENCY = CURRENCIES.uregen;
 
 export const cryptoOptions = [
   {

diff --git a/web-marketplace/src/components/molecules/CreditsAmount/CreditsAmount.test.tsx b/web-marketplace/src/components/molecules/CreditsAmount/CreditsAmount.test.tsx
@@ -2,12 +2,16 @@ import userEvent from '@testing-library/user-event';
 import { PAYMENT_OPTIONS } from 'web-marketplace/src/components/organisms/ChooseCreditsForm/ChooseCreditsForm.constants';
 import { render, screen } from 'web-marketplace/test/test-utils';
 
+import { CURRENCIES } from 'web-components/src/components/DenomIconWithCurrency/DenomIconWithCurrency.constants';
+
 import { CreditsAmount } from './CreditsAmount';
 
 describe('CreditsAmount', () => {
   const formDefaultValues = {
     creditsAvailable: 100,
     paymentOption: PAYMENT_OPTIONS.CARD,
+    currency: CURRENCIES.usd,
+    onCurrencyChange: vi.fn(),
   };
 
   it('renders without crashing', () => {

diff --git a/web-marketplace/src/components/molecules/CreditsAmount/CreditsAmount.tsx b/web-marketplace/src/components/molecules/CreditsAmount/CreditsAmount.tsx
@@ -8,7 +8,11 @@ import {
   Currency,
 } from 'web-components/src/components/DenomIconWithCurrency/DenomIconWithCurrency.constants';
 
-import { CREDITS_AMOUNT, CURRENCY_AMOUNT } from './CreditsAmount.constants';
+import {
+  CREDITS_AMOUNT,
+  CURRENCY_AMOUNT,
+  DEFAULT_CRYPTO_CURRENCY,
+} from './CreditsAmount.constants';
 import { CreditsAmountHeader } from './CreditsAmount.Header';
 import { CreditsAmountProps } from './CreditsAmount.types';
 import { getCurrencyPrice } from './CreditsAmount.utils';
@@ -18,18 +22,13 @@ import { CurrencyInput } from './CurrecyInput';
 export const CreditsAmount = ({
   creditsAvailable,
   paymentOption,
+  currency,
+  onCurrencyChange,
 }: CreditsAmountProps) => {
   const [currencyPrice, setCurrencyPrice] = useState(
     getCurrencyPrice(CURRENCIES.usd),
   );
   const [maxCreditsSelected, setMaxCreditsSelected] = useState(false);
-  const defaultCryptoCurrency = CURRENCIES.uregen;
-  const [currency, setCurrency] = useState<Currency>(
-    paymentOption === PAYMENT_OPTIONS.CRYPTO
-      ? defaultCryptoCurrency
-      : CURRENCIES.usd,
-  );
-
   const form = useFormContext();
 
   // Max credits set
@@ -54,16 +53,16 @@ export const CreditsAmount = ({
     form.setValue(CURRENCY_AMOUNT, newPrice * form.getValues(CREDITS_AMOUNT), {
       shouldDirty: true,
     });
-  }, [defaultCryptoCurrency, form, paymentOption, currency]);
+  }, [form, paymentOption, currency]);
 
   useEffect(() => {
     if (paymentOption === PAYMENT_OPTIONS.CRYPTO) {
-      setCurrency(defaultCryptoCurrency);
+      onCurrencyChange(DEFAULT_CRYPTO_CURRENCY);
     }
     if (paymentOption === PAYMENT_OPTIONS.CARD) {
-      setCurrency(CURRENCIES.usd);
+      onCurrencyChange(CURRENCIES.usd);
     }
-  }, [defaultCryptoCurrency, paymentOption]);
+  }, [onCurrencyChange, paymentOption]);
 
   // Currency amount change
   const handleCurrencyAmountChange = useCallback(
@@ -101,16 +100,16 @@ export const CreditsAmount = ({
       // TO-DO get real prices from API?
       const newPrice = getCurrencyPrice(currency as CryptoCurrencies);
       setCurrencyPrice(newPrice);
-      setCurrency(currency as Currency);
       form.setValue(
         CURRENCY_AMOUNT,
         newPrice * form.getValues(CREDITS_AMOUNT),
         {
           shouldDirty: true,
         },
       );
+      onCurrencyChange(currency as Currency);
     },
-    [form],
+    [form, onCurrencyChange],
   );
 
   return (
@@ -127,7 +126,7 @@ export const CreditsAmount = ({
           paymentOption={paymentOption}
           handleCurrencyAmountChange={handleCurrencyAmountChange}
           handleCurrencyChange={handleCurrencyChange}
-          defaultCryptoCurrency={defaultCryptoCurrency}
+          defaultCryptoCurrency={DEFAULT_CRYPTO_CURRENCY}
           {...form}
         />
         <span className="p-10 sm:p-20 text-xl">=</span>

diff --git a/web-marketplace/src/components/molecules/CreditsAmount/CreditsAmount.types.tsx b/web-marketplace/src/components/molecules/CreditsAmount/CreditsAmount.types.tsx
@@ -1,12 +1,17 @@
 import { ChangeEvent } from 'react';
 import { FieldValues, UseFormRegister } from 'react-hook-form';
 
-import { CryptoCurrencies } from 'web-components/src/components/DenomIconWithCurrency/DenomIconWithCurrency.constants';
+import {
+  CryptoCurrencies,
+  Currency,
+} from 'web-components/src/components/DenomIconWithCurrency/DenomIconWithCurrency.constants';
 
 export type PaymentOptionsType = 'card' | 'crypto';
 export interface CreditsAmountProps {
   creditsAvailable: number;
   paymentOption: PaymentOptionsType;
+  currency: Currency;
+  onCurrencyChange: (currency: Currency) => void;
 }
 
 export interface CreditsInputProps {

diff --git a/web-marketplace/src/components/organisms/ChooseCreditsForm/ChooseCreditsForm.test.tsx b/web-marketplace/src/components/organisms/ChooseCreditsForm/ChooseCreditsForm.test.tsx
@@ -4,18 +4,38 @@ import { ChooseCreditsForm } from './ChooseCreditsForm';
 
 describe('ChooseCreditsForm', () => {
   const creditVintages = [
-    { date: '2022-01-01', credits: '100' },
-    { date: '2022-02-01', credits: '200' },
+    { date: '2022-01-01', credits: '100', batchDenom: '1' },
+    { date: '2022-02-01', credits: '200', batchDenom: '2' },
   ];
 
   it('renders without crashing', () => {
-    render(<ChooseCreditsForm creditVintages={creditVintages} />);
+    render(
+      <ChooseCreditsForm
+        creditVintages={creditVintages}
+        creditsAvailable={[
+          {
+            credits: 2000,
+            currency: 'usd',
+          },
+        ]}
+      />,
+    );
 
     expect(screen.getByTestId('choose-credits-form')).toBeInTheDocument();
   });
 
   it('opens and closes advanced settings', () => {
-    render(<ChooseCreditsForm creditVintages={creditVintages} />);
+    render(
+      <ChooseCreditsForm
+        creditVintages={creditVintages}
+        creditsAvailable={[
+          {
+            credits: 2000,
+            currency: 'usd',
+          },
+        ]}
+      />,
+    );
 
     const advancedSettingsButton = screen.getByRole('button', {
       name: /advanced settings/i,
@@ -29,7 +49,17 @@ describe('ChooseCreditsForm', () => {
   });
 
   it('selects card payment option', () => {
-    render(<ChooseCreditsForm creditVintages={creditVintages} />);
+    render(
+      <ChooseCreditsForm
+        creditVintages={creditVintages}
+        creditsAvailable={[
+          {
+            credits: 2000,
+            currency: 'usd',
+          },
+        ]}
+      />,
+    );
     const cardOption = screen.getByRole('radio', {
       name: /card/i,
     });

diff --git a/web-marketplace/src/components/organisms/ChooseCreditsForm/ChooseCreditsForm.tsx b/web-marketplace/src/components/organisms/ChooseCreditsForm/ChooseCreditsForm.tsx
@@ -1,11 +1,25 @@
-import { ChangeEvent, MouseEvent, Suspense, useState } from 'react';
+import {
+  ChangeEvent,
+  MouseEvent,
+  Suspense,
+  useCallback,
+  useMemo,
+  useState,
+} from 'react';
 import { SubmitHandler, useWatch } from 'react-hook-form';
 import { CreditsAmount } from 'web-marketplace/src/components/molecules/CreditsAmount/CreditsAmount';
-import { cryptoOptions } from 'web-marketplace/src/components/molecules/CreditsAmount/CreditsAmount.constants';
+import {
+  cryptoOptions,
+  DEFAULT_CRYPTO_CURRENCY,
+} from 'web-marketplace/src/components/molecules/CreditsAmount/CreditsAmount.constants';
 import Form from 'web-marketplace/src/components/molecules/Form/Form';
 import { useZodForm } from 'web-marketplace/src/components/molecules/Form/hook/useZodForm';
 
 import Card from 'web-components/src/components/cards/Card';
+import {
+  CURRENCIES,
+  Currency,
+} from 'web-components/src/components/DenomIconWithCurrency/DenomIconWithCurrency.constants';
 import { Loading } from 'web-components/src/components/loading';
 
 import { AdvanceSettings } from './ChooseCreditsForm.AdvanceSettings';
@@ -20,8 +34,18 @@ import { PaymentOptionsType } from './ChooseCreditsForm.types';
 
 export function ChooseCreditsForm({
   creditVintages,
+  creditsAvailable = [
+    {
+      credits: 2000,
+      currency: 'usd',
+    },
+  ],
 }: {
   creditVintages: { date: string; credits: string; batchDenom: string }[];
+  creditsAvailable: {
+    credits: number;
+    currency: Currency;
+  }[];
 }) {
   const [paymentOption, setPaymentOption] = useState<PaymentOptionsType>(
     PAYMENT_OPTIONS.CARD,
@@ -33,6 +57,12 @@ export function ChooseCreditsForm({
     setAdvanceSettingsOpen(prev => !prev);
   };
 
+  const [currency, setCurrency] = useState<Currency>(
+    paymentOption === PAYMENT_OPTIONS.CRYPTO
+      ? DEFAULT_CRYPTO_CURRENCY
+      : CURRENCIES.usd,
+  );
+
   const form = useZodForm({
     schema: chooseCreditsFormSchema,
     defaultValues: {
@@ -76,6 +106,19 @@ export function ChooseCreditsForm({
     setPaymentOption(option as PaymentOptionsType);
   };
 
+  const getCurrencyAvailableCredits = useCallback(
+    (currency: Currency) => {
+      const curr = creditsAvailable.find(item => item.currency === currency);
+      return curr?.credits || 0;
+    },
+    [creditsAvailable],
+  );
+
+  const currencyAvailableCredits = useMemo(
+    () => getCurrencyAvailableCredits(currency),
+    [currency, getCurrencyAvailableCredits],
+  );
+
   return (
     <Suspense fallback={<Loading />}>
       <Card className="py-30 px-20 sm:py-50 sm:px-40 border-grey-300">
@@ -86,8 +129,10 @@ export function ChooseCreditsForm({
         >
           <PaymentOptions setPaymentOption={handlePaymentOptions} />
           <CreditsAmount
-            creditsAvailable={1500} // TO-DO update with max credits available {creditsAvailable}
+            creditsAvailable={currencyAvailableCredits}
             paymentOption={paymentOption}
+            currency={currency}
+            onCurrencyChange={setCurrency}
           />
           {paymentOption === PAYMENT_OPTIONS.CRYPTO && (
             <CryptoOptions