fix: create/edit flow

src/components/Modals/AdCreateEditSuccessModal/AdCreateEditSuccessModal.tsx

@@ -1,28 +1,24 @@
 import { useCallback, useState } from 'react';
 import { useHistory } from 'react-router-dom';
-import { TCurrency } from 'types';
 import { MY_ADS_URL } from '@/constants';
+import { api } from '@/hooks';
 import useInvalidateQuery from '@/hooks/api/useInvalidateQuery';
 import { Localize } from '@deriv-com/translations';
 import { Button, Checkbox, Modal, Text, useDevice } from '@deriv-com/ui';
 import './AdCreateEditSuccessModal.scss';
 
-type TAdCreateEditSuccessModalProps = {
+export type TAdCreateEditSuccessModalProps = {
     advertsArchivePeriod?: number;
-    currency: TCurrency;
+    data: ReturnType<typeof api.advert.useCreate>['data'] | ReturnType<typeof api.advert.useUpdate>['data'];
     isModalOpen: boolean;
-    limit: string;
     onRequestClose: () => void;
-    visibilityStatus: string;
 };
 
 const AdCreateEditSuccessModal = ({
     advertsArchivePeriod,
-    currency,
+    data,
     isModalOpen,
-    limit,
     onRequestClose,
-    visibilityStatus,
 }: TAdCreateEditSuccessModalProps) => {
     const { isMobile } = useDevice();
     const invalidate = useInvalidateQuery();
@@ -35,12 +31,12 @@ const AdCreateEditSuccessModal = ({
 
     const onClickOk = () => {
         localStorage.setItem('should_not_show_auto_archive_message_again', JSON.stringify(isChecked));
-        if (visibilityStatus) {
+        if (data?.visibility_status && data?.account_currency && data.max_order_amount_limit_display) {
             history.push(MY_ADS_URL, {
-                currency,
+                currency: data.account_currency,
                 from: '',
-                limit,
-                visibilityStatus,
+                limit: data.max_order_amount_limit_display,
+                visibilityStatus: data.visibility_status[0],
             });
         } else {
             history.push(MY_ADS_URL);
@@ -49,12 +45,7 @@ const AdCreateEditSuccessModal = ({
         onRequestClose();
     };
     return (
-        <Modal
-            ariaHideApp={false}
-            className='ad-create-edit-success-modal'
-            isOpen={isModalOpen}
-            onRequestClose={onRequestClose}
-        >
+        <Modal ariaHideApp={false} className='ad-create-edit-success-modal' isOpen={isModalOpen}>
             <Modal.Header hideBorder hideCloseIcon>
                 <Text weight='bold'>
                     <Localize i18n_default_text='You’ve created an ad' />

src/components/Modals/AdCreateEditSuccessModal/__tests__/AdCreateEditSuccessModal.spec.tsx

@@ -1,16 +1,18 @@
 import { TCurrency } from 'types';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import AdCreateEditSuccessModal from '../AdCreateEditSuccessModal';
+import AdCreateEditSuccessModal, { TAdCreateEditSuccessModalProps } from '../AdCreateEditSuccessModal';
 
 const mockProps = {
     advertsArchivePeriod: 7,
-    currency: 'USD' as TCurrency,
+    data: {
+        account_currency: 'USD' as TCurrency,
+        max_order_amount_limit_display: '1000',
+        visibility_status: '',
+    },
     isModalOpen: true,
-    limit: '1000',
     onRequestClose: jest.fn(),
-    visibilityStatus: '',
-};
+} as unknown as TAdCreateEditSuccessModalProps;
 
 jest.mock('@deriv-com/ui', () => ({
     ...jest.requireActual('@deriv-com/ui'),

src/pages/my-ads/screens/CreateEditAd/CreateEditAd.tsx

@@ -51,6 +51,7 @@ const CreateEditAd = () => {
     const { order_payment_period: orderPaymentPeriod } = p2pSettings ?? {};
     const { data: createResponse, error, isError, isSuccess, mutate } = api.advert.useCreate();
     const {
+        data: updateResponse,
         error: updateError,
         isError: isUpdateError,
         isSuccess: isUpdateSuccess,
@@ -241,11 +242,9 @@ const CreateEditAd = () => {
             />
             <AdCreateEditSuccessModal
                 advertsArchivePeriod={orderPaymentPeriod}
-                currency={createResponse?.account_currency as TCurrency}
+                data={isEdit ? updateResponse : createResponse}
                 isModalOpen={!!isModalOpenFor('AdCreateEditSuccessModal')}
-                limit={createResponse?.max_order_amount_limit_display ?? ''}
                 onRequestClose={hideModal}
-                visibilityStatus={createResponse?.visibility_status?.[0] ?? ''}
             />
             <AdCancelCreateEditModal
                 isModalOpen={!!isModalOpenFor('AdCancelCreateEditModal')}

src/pages/my-ads/screens/MyAds/MyAdsTableRow/MyAdsTableRowView.tsx

@@ -16,7 +16,7 @@ import {
 import { AD_ACTION, MY_ADS_URL } from '@/constants';
 import { api } from '@/hooks';
 import useInvalidateQuery from '@/hooks/api/useInvalidateQuery';
-import { useFloatingRate, useModalManager } from '@/hooks/custom-hooks';
+import { useFloatingRate, useModalManager, useQueryString } from '@/hooks/custom-hooks';
 import { getPaymentMethodObjects, getVisibilityErrorCodes } from '@/utils';
 import { TMyAdsTableRowRendererProps } from '../MyAdsTable/MyAdsTable';
 import MyAdsTableRow from './MyAdsTableRow';
@@ -56,7 +56,7 @@ const MyAdsTableRowView = ({
         mutate: createAd,
     } = api.advert.useCreate();
     const { rateType: currentRateType, reachedTargetDate } = useFloatingRate();
-    const { error: updateError, isError: isErrorUpdate, mutate } = api.advert.useUpdate();
+    const { data: updateResponse, error: updateError, isError: isErrorUpdate, mutate } = api.advert.useUpdate();
     const { error, isError, mutate: deleteAd } = api.advert.useDelete();
     const shouldNotShowArchiveMessageAgain = localStorage.getItem('should_not_show_auto_archive_message_again');
     const [formValues, setFormValues] = useState<TFormValues>({
@@ -71,6 +71,7 @@ const MyAdsTableRowView = ({
     const advertiserPaymentMethodObjects = getPaymentMethodObjects(
         advertiserPaymentMethods as THooks.AdvertiserPaymentMethods.Get
     );
+    const { queryString } = useQueryString();
 
     const createAdvisibilityStatus = (location.state as TState)?.visibilityStatus;
 
@@ -290,11 +291,9 @@ const MyAdsTableRowView = ({
             {!!isModalOpenFor('AdCreateEditSuccessModal') && (
                 <AdCreateEditSuccessModal
                     advertsArchivePeriod={orderPaymentPeriod}
-                    currency={createResponse?.account_currency as TCurrency}
+                    data={queryString.formAction === 'edit' ? updateResponse : createResponse}
                     isModalOpen
-                    limit={createResponse?.max_order_amount_limit_display ?? ''}
                     onRequestClose={() => hideModal({ shouldHideAllModals: true })}
-                    visibilityStatus={createResponse?.visibility_status?.[0] ?? ''}
                 />
             )}
             {!!isModalOpenFor('AdCancelCreateEditModal') && (

src/pages/my-ads/screens/MyAds/MyAdsTableRow/__tests__/MyAdsTableRowView.spec.tsx

@@ -91,6 +91,7 @@ jest.mock('@/hooks/custom-hooks', () => {
             reachedTargetDate: false,
         }),
         useModalManager: jest.fn().mockReturnValue(modalManager),
+        useQueryString: jest.fn().mockReturnValue({ queryString: { formAction: 'create' } }),
     };
 });