fix: [WT-2150] Checkout Widget amount inputs correctly handle decimal…

… inputs (#1473)
immutable · Feb 14, 2024 · 304ec1a · 304ec1a
1 parent b143bc1
commit 304ec1a
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 5 deletions.
diff --git a/packages/checkout/widgets-lib/src/components/FormComponents/SelectInput/SelectInput.tsx b/packages/checkout/widgets-lib/src/components/FormComponents/SelectInput/SelectInput.tsx
@@ -5,7 +5,7 @@ import {
   selectStyle,
 } from './SelectInputStyles';
 import { SelectForm } from '../SelectForm/SelectForm';
-import { TextInputForm } from '../TextInputForm/TextInputForm';
+import { TextInputForm, TextInputType } from '../TextInputForm/TextInputForm';
 import { CoinSelectorOptionProps } from '../../CoinSelector/CoinSelectorOption';
 
 interface SelectInputProps {
@@ -17,6 +17,7 @@ interface SelectInputProps {
   textInputPlaceholder?: string;
   textInputSubtext?: string;
   textInputErrorMessage?: string;
+  textInputType?: TextInputType;
   selectSubtext?: string;
   selectErrorMessage?: string;
   coinSelectorHeading: string;
@@ -37,6 +38,7 @@ export function SelectInput({
   textInputValue,
   textInputPlaceholder,
   textInputValidator,
+  textInputType,
   onTextInputChange,
   onTextInputBlur,
   onTextInputFocus,
@@ -70,6 +72,7 @@ export function SelectInput({
       </Box>
       <Box sx={inputStyle}>
         <TextInputForm
+          type={textInputType}
           testId={`${testId}-text-form`}
           value={textInputValue}
           placeholder={textInputPlaceholder}

diff --git a/...ges/checkout/widgets-lib/src/components/FormComponents/TextInputForm/TextInputForm.cy.tsx b/...ges/checkout/widgets-lib/src/components/FormComponents/TextInputForm/TextInputForm.cy.tsx
@@ -0,0 +1,44 @@
+import { mount } from 'cypress/react18';
+import { describe } from 'local-cypress';
+import { ViewContextTestComponent } from 'context/view-context/test-components/ViewContextTestComponent';
+import { cySmartGet } from '../../../lib/testUtils';
+import { TextInputForm } from './TextInputForm';
+
+describe('TextInputForm', () => {
+  describe('type number', () => {
+    it('should convert . into zero number when type is number input', () => {
+      mount(
+        <ViewContextTestComponent>
+          <TextInputForm
+            type="number"
+            testId="text-input-form-test"
+            value=""
+            validator={() => true}
+            onTextInputChange={() => {}}
+          />
+        </ViewContextTestComponent>,
+      );
+      cySmartGet('text-input-form-test-select__input').type('.');
+      cySmartGet('text-input-form-test-select__input').trigger('change');
+      cySmartGet('text-input-form-test-select__target__controlledLabel').should('have.text', '0.');
+    });
+  });
+
+  describe('type text or no type', () => {
+    it('should preserve . as .', () => {
+      mount(
+        <ViewContextTestComponent>
+          <TextInputForm
+            testId="text-input-form-test"
+            value=""
+            validator={() => true}
+            onTextInputChange={() => {}}
+          />
+        </ViewContextTestComponent>,
+      );
+      cySmartGet('text-input-form-test-select__input').type('.');
+      cySmartGet('text-input-form-test-select__input').trigger('change');
+      cySmartGet('text-input-form-test-select__target__controlledLabel').should('have.text', '.');
+    });
+  });
+});
diff --git a/packages/checkout/widgets-lib/src/components/FormComponents/TextInputForm/TextInputForm.tsx b/packages/checkout/widgets-lib/src/components/FormComponents/TextInputForm/TextInputForm.tsx
@@ -7,6 +7,7 @@ interface TextInputFormProps {
   placeholder?: string;
   subtext?: string;
   textAlign?: 'left' | 'right';
+  type?: TextInputType;
   errorMessage?: string;
   disabled?: boolean;
   validator: (value: string) => boolean;
@@ -17,6 +18,8 @@ interface TextInputFormProps {
   maxButtonClick?: () => void;
 }
 
+export type TextInputType = 'text' | 'number';
+
 export function TextInputForm({
   testId,
   value,
@@ -28,12 +31,16 @@ export function TextInputForm({
   onTextInputFocus,
   onTextInputEnter,
   textAlign,
+  type,
   subtext,
   maxButtonClick,
   disabled,
 }: TextInputFormProps) {
   const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>, previousValue: string) => {
-    const inputValue = event.target.value;
+    let inputValue = event.target.value;
+    if (type === 'number' && inputValue === '.') {
+      inputValue = '0.';
+    }
     if (!validator(inputValue)) {
       // TODO: is there a better solution to this, cypress tests having issues with typing 'abc' and it still being set
       onTextInputChange(previousValue ?? '');

diff --git a/packages/checkout/widgets-lib/src/widgets/bridge/components/BridgeForm.tsx b/packages/checkout/widgets-lib/src/widgets/bridge/components/BridgeForm.tsx
@@ -196,15 +196,20 @@ export function BridgeForm(props: BridgeFormProps) {
   }, [tokenBalances, formToken, formAmount]);
 
   const handleBridgeAmountChange = (value: string) => {
-    setFormAmount(value);
+    // Ensure that starting with a decimal is formatted correctly
+    let inputValue = value;
+    if (inputValue === '.') {
+      inputValue = '0.';
+    }
+    setFormAmount(inputValue);
     if (amountError) {
-      const validateAmountError = validateAmount(value, formToken?.formattedBalance);
+      const validateAmountError = validateAmount(inputValue, formToken?.formattedBalance);
       setAmountError(validateAmountError);
     }
 
     if (!formToken) return;
     setAmountFiatValue(calculateCryptoToFiat(
-      value,
+      inputValue,
       formToken.token.symbol,
       cryptoFiatState.conversions,
     ));
@@ -343,6 +348,7 @@ export function BridgeForm(props: BridgeFormProps) {
             />
             <TextInputForm
               testId="bridge-amount"
+              type="number"
               value={formAmount}
               placeholder={t('views.BRIDGE_FORM.bridgeForm.from.inputPlaceholder')}
               subtext={`${t('views.BRIDGE_FORM.content.fiatPricePrefix')} $${formatZeroAmount(amountFiatValue, true)}`}

diff --git a/packages/checkout/widgets-lib/src/widgets/swap/components/SwapForm.tsx b/packages/checkout/widgets-lib/src/widgets/swap/components/SwapForm.tsx
@@ -726,6 +726,7 @@ export function SwapForm({ data }: SwapFromProps) {
                   : ''
               }
               selectTextAlign="left"
+              textInputType="number"
               textInputValue={fromAmount}
               textInputPlaceholder={t('views.SWAP.swapForm.from.inputPlaceholder')}
               textInputSubtext={`${t('views.SWAP.content.fiatPricePrefix')} 
@@ -771,6 +772,7 @@ export function SwapForm({ data }: SwapFromProps) {
               testId="toTokenInputs"
               options={tokensOptionsTo}
               selectTextAlign="left"
+              textInputType="number"
               textInputValue={toAmount}
               textInputPlaceholder={t('views.SWAP.swapForm.to.inputPlaceholder')}
               textInputTextAlign="right"