fix: mobile view add payment method fixed

deriv-com · May 9, 2024 · 34dfede · 34dfede
1 parent 621fd5d
commit 34dfede
Show file tree

Hide file tree

Showing 7 changed files with 51 additions and 24 deletions.
diff --git a/src/components/PaymentMethodCard/PaymentMethodCardBody/PaymentMethodCardBody.tsx b/src/components/PaymentMethodCard/PaymentMethodCardBody/PaymentMethodCardBody.tsx
@@ -1,4 +1,5 @@
 import { TAccount, TBankName, THooks, TName } from 'types';
+import { useDevice } from '@/hooks';
 import { Text } from '@deriv-com/ui';
 import './PaymentMethodCardBody.scss';
 
@@ -14,13 +15,15 @@ const PaymentMethodCardBody = ({
     const displayName = paymentMethod?.display_name;
     const modifiedDisplayName = displayName?.replace(/\s|-/gm, '');
     const isBankOrOther = modifiedDisplayName && ['BankTransfer', 'Other'].includes(modifiedDisplayName);
+    const { isMobile } = useDevice();
+    const textSize = isMobile ? 'md' : 'sm';
     return (
         <div className='payment-method-card__body'>
-            {isBankOrOther && !shouldShowPaymentMethodDisplayName ? null : <Text>{displayName}</Text>}
-            <Text>
+            {isBankOrOther && !shouldShowPaymentMethodDisplayName ? null : <Text size={textSize}>{displayName}</Text>}
+            <Text size={textSize}>
                 {(paymentMethod.fields?.bank_name as TBankName)?.value ?? (paymentMethod.fields?.name as TName)?.value}
             </Text>
-            <Text>{(paymentMethod.fields?.account as TAccount)?.value}</Text>
+            <Text size={textSize}>{(paymentMethod.fields?.account as TAccount)?.value}</Text>
         </div>
     );
 };

diff --git a/src/components/PaymentMethodCard/__tests__/PaymentMethodCardBody.spec.tsx b/src/components/PaymentMethodCard/__tests__/PaymentMethodCardBody.spec.tsx
@@ -1,6 +1,13 @@
 import { render, screen } from '@testing-library/react';
 import { PaymentMethodCardBody } from '../PaymentMethodCardBody';
 
+jest.mock('@deriv-com/ui', () => ({
+    ...jest.requireActual('@deriv-com/ui'),
+    useDevice: jest.fn(() => {
+        false;
+    }),
+}));
+
 describe('PaymentMethodCardBody', () => {
     it('should render the component correctly', () => {
         render(

diff --git a/src/components/PaymentMethodForm/PaymentMethodForm.tsx b/src/components/PaymentMethodForm/PaymentMethodForm.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from 'react';
+import { FormEvent, useEffect, useMemo, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { TAdvertiserPaymentMethod, TFormState, TSelectedPaymentMethod } from 'types';
 import { PageReturn, PaymentMethodField, PaymentMethodsFormFooter } from '@/components';
@@ -181,6 +181,24 @@ const PaymentMethodForm = ({
         );
     }
 
+    const handleFormSubmit = (event: FormEvent<HTMLFormElement>) => {
+        event.preventDefault(); // Prevents create edit ad form submission
+        event.stopPropagation();
+        handleSubmit(data => {
+            const hasData = Object.keys(data).length > 0;
+            if (actionType === 'ADD' && hasData) {
+                create({
+                    ...data,
+                    method: String((selectedPaymentMethod as TAdvertiserPaymentMethod)?.method),
+                });
+            } else if (actionType === 'EDIT' && hasData) {
+                update(String(selectedPaymentMethod?.id), {
+                    ...data,
+                });
+            }
+        })(event);
+    };
+
     return (
         <div className='payment-method-form'>
             <PageReturn
@@ -191,22 +209,7 @@ const PaymentMethodForm = ({
                 size={isMobile ? 'lg' : 'md'}
                 weight='bold'
             />
-            <form
-                className='payment-method-form__form'
-                onSubmit={handleSubmit(data => {
-                    const hasData = Object.keys(data).length > 0;
-                    if (actionType === 'ADD' && hasData) {
-                        create({
-                            ...data,
-                            method: String((selectedPaymentMethod as TAdvertiserPaymentMethod)?.method),
-                        });
-                    } else if (actionType === 'EDIT' && hasData) {
-                        update(String(selectedPaymentMethod?.id), {
-                            ...data,
-                        });
-                    }
-                })}
-            >
+            <form className='payment-method-form__form' onSubmit={handleFormSubmit}>
                 <div className='payment-method-form__fields'>
                     <div className='payment-method-form__field-wrapper'>
                         <PaymentMethodFormAutocomplete
@@ -240,6 +243,8 @@ const PaymentMethodForm = ({
                         isDirty={isDirty}
                         isSubmitting={isSubmitting}
                         isValid={isValid}
+                        onSubmit={handleFormSubmit}
+                        type='button'
                     />
                 )}
             </form>

diff --git a/src/components/PaymentMethodsFormFooter/PaymentMethodsFormFooter.scss b/src/components/PaymentMethodsFormFooter/PaymentMethodsFormFooter.scss
@@ -11,6 +11,6 @@
         padding: 1.6rem 2.4rem;
         border-top: 2px solid #f2f3f4;
         position: absolute;
-        bottom: 2.2rem;
+        bottom: 0;
     }
 }
diff --git a/src/components/PaymentMethodsFormFooter/PaymentMethodsFormFooter.tsx b/src/components/PaymentMethodsFormFooter/PaymentMethodsFormFooter.tsx
@@ -1,3 +1,4 @@
+import { ButtonHTMLAttributes, FormEvent, MouseEventHandler } from 'react';
 import { TFormState } from 'types';
 import { Button, useDevice } from '@deriv-com/ui';
 import './PaymentMethodsFormFooter.scss';
@@ -8,6 +9,8 @@ type TPaymentMethodsFormFooterProps = {
     isDirty: boolean;
     isSubmitting: boolean;
     isValid: boolean;
+    onSubmit?: (event: FormEvent<HTMLFormElement>) => void;
+    type?: ButtonHTMLAttributes<HTMLButtonElement>['type'];
 };
 
 /**
@@ -26,6 +29,8 @@ const PaymentMethodsFormFooter = ({
     isDirty,
     isSubmitting,
     isValid,
+    onSubmit,
+    type = 'submit',
 }: TPaymentMethodsFormFooterProps) => {
     const { isMobile } = useDevice();
     const textSize = isMobile ? 'md' : 'sm';
@@ -48,7 +53,13 @@ const PaymentMethodsFormFooter = ({
                 Cancel
             </Button>
             {/* TODO: Remember to translate these */}
-            <Button disabled={isSubmitting || !isValid || !isDirty} size='lg' textSize={textSize}>
+            <Button
+                disabled={isSubmitting || !isValid || !isDirty}
+                onClick={onSubmit as unknown as MouseEventHandler<HTMLButtonElement>}
+                size='lg'
+                textSize={textSize}
+                type={type}
+            >
                 {actionType === 'ADD' ? 'Add' : 'Save changes'}
             </Button>
         </div>

diff --git a/src/pages/my-ads/components/SellAdPaymentSelection/SellAdPaymentSelection.scss b/src/pages/my-ads/components/SellAdPaymentSelection/SellAdPaymentSelection.scss
@@ -11,9 +11,10 @@
         & .payment-method-form {
             @include mobile {
                 background: #ffffff;
-                z-index: 1;
+                z-index: 999;
                 inset: 0;
                 top: 4rem;
+                position: fixed;
 
                 &__form {
                     & .payment-methods-form-footer {

diff --git a/src/pages/my-ads/screens/MyAds/MyAds.tsx b/src/pages/my-ads/screens/MyAds/MyAds.tsx
@@ -6,7 +6,7 @@ const MyAds = () => {
     const { isMobile } = useDevice();
 
     return (
-        <div className={clsx('flex flex-col', isMobile ? 'h-[calc(100vh-12rem)]' : 'h-full')}>
+        <div className={clsx('flex flex-col', isMobile ? 'h-[calc(100vh-8rem)]' : 'h-full')}>
             <MyAdsTable />
         </div>
     );