Skip to content

Commit

Permalink
fix: cancel modal issue fixed
Browse files Browse the repository at this point in the history
  • Loading branch information
@nada-deriv
nada-deriv committed May 3, 2024
1 parent 3826ca2 commit 4c6ff3e
Show file tree
Hide file tree
Showing 4 changed files with 191 additions and 153 deletions.
201 changes: 107 additions & 94 deletions src/components/PaymentMethodForm/PaymentMethodForm.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import { useEffect, useMemo } from 'react';
import { useEffect, useMemo, useState } from 'react';
import { useForm } from 'react-hook-form';
import { TAdvertiserPaymentMethod, TFormState, TSelectedPaymentMethod } from 'types';
import { PageReturn, PaymentMethodField, PaymentMethodsFormFooter } from '@/components';
import { api, useModalManager } from '@/hooks';
import { api } from '@/hooks';
import { Button, Modal, useDevice } from '@deriv-com/ui';
import { PaymentMethodFormAutocomplete } from './PaymentMethodFormAutocomplete';
import { PaymentMethodFormModalRenderer } from './PaymentMethodFormModalRenderer';
Expand Down Expand Up @@ -35,7 +35,7 @@ const PaymentMethodForm = ({
handleSubmit,
reset,
} = useForm({ mode: 'all' });
const { hideModal, isModalOpenFor, showModal } = useModalManager();
const [isError, setIsError] = useState(false);
const { actionType, selectedPaymentMethod, title = '' } = rest.formState;
const { data: availablePaymentMethods } = api.paymentMethods.useGet();
const { create, error: createError, isSuccess: isCreateSuccessful } = api.advertiserPaymentMethods.useCreate();
Expand Down Expand Up @@ -65,7 +65,7 @@ const PaymentMethodForm = ({
}, [availablePaymentMethods]);
const handleGoBack = () => {
if (isDirty) {
showModal('PaymentMethodFormErrorModal', { shouldStackModals: true });
setIsError(true);
} else {
onResetFormState();
onRequestClose?.();
Expand All @@ -74,96 +74,110 @@ const PaymentMethodForm = ({

if (displayModal) {
return (
<Modal
ariaHideApp={false}
className='payment-method-form__modal'
isOpen={displayModal}
onRequestClose={handleGoBack}
shouldCloseOnOverlayClick={false}
>
<form
className='payment-method-form__form'
onSubmit={event => {
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);
}}
<>
<Modal
ariaHideApp={false}
className='payment-method-form__modal'
isOpen={displayModal}
onRequestClose={handleGoBack}
shouldCloseOnOverlayClick={false}
>
<Modal.Header hideBorder onRequestClose={handleGoBack}>
<PageReturn
className='mb-0'
hasBorder={isMobile}
onClick={handleGoBack}
pageTitle='Add payment method'
size={isMobile ? 'lg' : 'md'}
weight='bold'
/>
</Modal.Header>
<Modal.Body className='payment-method-form__modal__body'>
<div className='payment-method-form__fields'>
<div className='payment-method-form__field-wrapper'>
<PaymentMethodFormAutocomplete
<form
className='payment-method-form__form'
onSubmit={event => {
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);
}}
>
<Modal.Header hideBorder onRequestClose={handleGoBack}>
<PageReturn
className='mb-0'
hasBorder={isMobile}
onClick={handleGoBack}
pageTitle='Add payment method'
size={isMobile ? 'lg' : 'md'}
weight='bold'
/>
</Modal.Header>
<Modal.Body className='payment-method-form__modal__body'>
<div className='payment-method-form__fields'>
<div className='payment-method-form__field-wrapper'>
<PaymentMethodFormAutocomplete
actionType={actionType}
availablePaymentMethods={availablePaymentMethods}
availablePaymentMethodsList={availablePaymentMethodsList}
onAdd={onAdd}
reset={reset}
selectedPaymentMethod={selectedPaymentMethod}
/>
</div>
{Object.keys(selectedPaymentMethod?.fields || {})?.map(field => {
const paymentMethodField =
(selectedPaymentMethod?.fields as TAdvertiserPaymentMethod['fields'])?.[
field
] ?? {};
return (
<PaymentMethodField
control={control}
defaultValue={paymentMethodField?.value ?? ''}
displayName={paymentMethodField?.display_name ?? ''}
field={field}
key={field}
required={!!paymentMethodField?.required}
/>
);
})}
</div>
</Modal.Body>
<Modal.Footer>
{selectedPaymentMethod ? (
<PaymentMethodsFormFooter
actionType={actionType}
availablePaymentMethods={availablePaymentMethods}
availablePaymentMethodsList={availablePaymentMethodsList}
onAdd={onAdd}
reset={reset}
selectedPaymentMethod={selectedPaymentMethod}
handleGoBack={handleGoBack}
isDirty={isDirty}
isSubmitting={isSubmitting}
isValid={isValid}
/>
</div>
{Object.keys(selectedPaymentMethod?.fields || {})?.map(field => {
const paymentMethodField =
(selectedPaymentMethod?.fields as TAdvertiserPaymentMethod['fields'])?.[field] ??
{};
return (
<PaymentMethodField
control={control}
defaultValue={paymentMethodField?.value ?? ''}
displayName={paymentMethodField?.display_name ?? ''}
field={field}
key={field}
required={!!paymentMethodField?.required}
/>
);
})}
</div>
</Modal.Body>
<Modal.Footer>
{selectedPaymentMethod ? (
<PaymentMethodsFormFooter
actionType={actionType}
handleGoBack={handleGoBack}
isDirty={isDirty}
isSubmitting={isSubmitting}
isValid={isValid}
/>
) : (
<Button
className='border-2'
color='black'
onClick={onRequestClose}
size='lg'
textSize='sm'
variant='outlined'
>
Cancel
</Button>
)}
</Modal.Footer>
</form>
</Modal>
) : (
<Button
className='border-2'
color='black'
onClick={onRequestClose}
size='lg'
textSize='sm'
variant='outlined'
>
Cancel
</Button>
)}
</Modal.Footer>
</form>
</Modal>
{isError && (
<PaymentMethodFormModalRenderer
actionType={actionType}
createError={createError}
isCreateSuccessful={isCreateSuccessful}
isUpdateSuccessful={isUpdateSuccessful}
onResetFormState={onResetFormState}
setIsError={setIsError}
updateError={updateError}
/>
)}
</>
);
}

Expand Down Expand Up @@ -229,15 +243,14 @@ const PaymentMethodForm = ({
/>
)}
</form>
{isModalOpenFor('PaymentMethodFormErrorModal') && (
{isError && (
<PaymentMethodFormModalRenderer
actionType={actionType}
createError={createError}
isCreateSuccessful={isCreateSuccessful}
isModalOpen={!!isModalOpenFor('PaymentMethodFormErrorModal')}
isUpdateSuccessful={isUpdateSuccessful}
onRequestClose={hideModal}
onResetFormState={onResetFormState}
setIsError={setIsError}
updateError={updateError}
/>
)}
Expand Down
99 changes: 55 additions & 44 deletions ...nents/PaymentMethodForm/PaymentMethodFormModalRenderer/PaymentMethodFormModalRenderer.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,70 +1,81 @@
import { useEffect } from 'react';
import { TFormState, TSocketError } from 'types';
import { PaymentMethodErrorModal, PaymentMethodModal } from '@/components/Modals';
import { useModalManager } from '@/hooks';

type TPaymentMethodFormModalRendererProps = {
actionType: TFormState['actionType'];
createError: TSocketError<'p2p_advertiser_payment_methods'> | null;
isCreateSuccessful: boolean;
isModalOpen: boolean;
isUpdateSuccessful: boolean;
onRequestClose: () => void;
onResetFormState: () => void;
setIsError: (isError: boolean) => void;
updateError: TSocketError<'p2p_advertiser_payment_methods'> | null;
};

const PaymentMethodFormModalRenderer = ({
actionType,
createError,
isCreateSuccessful,
isModalOpen,
isUpdateSuccessful,
onRequestClose,
onResetFormState,
setIsError,
updateError,
}: TPaymentMethodFormModalRendererProps) => {
if (actionType === 'ADD' && (!isCreateSuccessful || !createError) && isModalOpen) {
return (
<PaymentMethodModal
description='If you choose to cancel, the changes you’ve made will be lost.'
isModalOpen={isModalOpen}
onConfirm={onResetFormState}
onReject={onRequestClose}
primaryButtonLabel='Go back'
secondaryButtonLabel='Cancel'
title='Cancel adding this payment method?'
/>
);
}
const { hideModal, isModalOpenFor, showModal } = useModalManager();

if (actionType === 'EDIT' && (!isUpdateSuccessful || !updateError) && isModalOpen) {
return (
<PaymentMethodModal
description='If you choose to cancel, the details you’ve entered will be lost.'
isModalOpen={isModalOpen}
onConfirm={onResetFormState}
onReject={onRequestClose}
primaryButtonLabel="Don't cancel"
secondaryButtonLabel='Cancel'
title='Cancel your edits?'
/>
);
}
useEffect(() => {
if (
(actionType === 'ADD' && (!isCreateSuccessful || !createError)) ||
(actionType === 'EDIT' && (!isUpdateSuccessful || !updateError))
) {
showModal('PaymentMethodModal');
}

// TODO: Remember to translate these strings
if (createError || updateError) {
return (
<PaymentMethodErrorModal
errorMessage={String(createError?.error?.message || updateError?.error?.message)}
isModalOpen={true}
onConfirm={() => {
onResetFormState();
}}
title='Something’s not right'
/>
);
}
// TODO: Remember to translate these strings
if (createError || updateError) {
showModal('PaymentMethodErrorModal');
}
}, [actionType, createError, isCreateSuccessful, isUpdateSuccessful, updateError]);

Check warning on line 39 in src/components/PaymentMethodForm/PaymentMethodFormModalRenderer/PaymentMethodFormModalRenderer.tsx

View workflow job for this annotation

GitHub Actions / build_to_cloudflare_pages 

React Hook useEffect has a missing dependency: 'showModal'. Either include it or remove the dependency array

return null;
return (
<>
{!!isModalOpenFor('PaymentMethodErrorModal') && (
<PaymentMethodErrorModal
errorMessage={String(createError?.error?.message || updateError?.error?.message)}
isModalOpen={!!isModalOpenFor('PaymentMethodErrorModal')}
onConfirm={() => {
onResetFormState();
setIsError(false);
hideModal({ shouldHideAllModals: true });
}}
title='Something’s not right'
/>
)}
{!!isModalOpenFor('PaymentMethodModal') && (
<PaymentMethodModal
description={
actionType === 'ADD'
? 'If you choose to cancel, the changes you’ve made will be lost.'
: 'If you choose to cancel, the details you’ve entered will be lost.'
}
isModalOpen={!!isModalOpenFor('PaymentMethodModal')}
onConfirm={() => {
onResetFormState();
setIsError(false);
hideModal({ shouldHideAllModals: true });
}}
onReject={() => {
hideModal();
setIsError(false);
}}
primaryButtonLabel={actionType === 'ADD' ? 'Go back' : "Don't cancel"}
secondaryButtonLabel='Cancel'
title={actionType === 'ADD' ? 'Cancel adding this payment method?' : 'Cancel your edits?'}
/>
)}
</>
);
};

export default PaymentMethodFormModalRenderer;
Loading

0 comments on commit 4c6ff3e

Please sign in to comment.