diff --git a/src/components/Modals/AdCreateEditSuccessModal/AdCreateEditSuccessModal.tsx b/src/components/Modals/AdCreateEditSuccessModal/AdCreateEditSuccessModal.tsx index e3eca400..6252a97e 100644 --- a/src/components/Modals/AdCreateEditSuccessModal/AdCreateEditSuccessModal.tsx +++ b/src/components/Modals/AdCreateEditSuccessModal/AdCreateEditSuccessModal.tsx @@ -1,7 +1,6 @@ import { useCallback, useState } from 'react'; import { useHistory } from 'react-router-dom'; 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'; @@ -10,14 +9,12 @@ import './AdCreateEditSuccessModal.scss'; export type TAdCreateEditSuccessModalProps = { advertsArchivePeriod?: number; - data: ReturnType['data'] | ReturnType['data']; isModalOpen: boolean; onRequestClose: () => void; }; const AdCreateEditSuccessModal = ({ advertsArchivePeriod, - data, isModalOpen, onRequestClose, }: TAdCreateEditSuccessModalProps) => { @@ -32,16 +29,8 @@ const AdCreateEditSuccessModal = ({ const onClickOk = () => { LocalStorageUtils.setValue(LocalStorageConstants.p2pArchiveMessage, isChecked); - if (data?.visibility_status && data?.account_currency && data.max_order_amount_limit_display) { - history.push(MY_ADS_URL, { - currency: data.account_currency, - from: '', - limit: data.max_order_amount_limit_display, - visibilityStatus: data.visibility_status[0], - }); - } else { - history.push(MY_ADS_URL); - } + history.push(MY_ADS_URL); + invalidate('p2p_advertiser_adverts'); onRequestClose(); }; diff --git a/src/components/Modals/PreferredCountriesModal/PreferredCountriesDropdown/PreferredCountriesDropdown.scss b/src/components/Modals/PreferredCountriesModal/PreferredCountriesDropdown/PreferredCountriesDropdown.scss index 8cc69906..1a0d6900 100644 --- a/src/components/Modals/PreferredCountriesModal/PreferredCountriesDropdown/PreferredCountriesDropdown.scss +++ b/src/components/Modals/PreferredCountriesModal/PreferredCountriesDropdown/PreferredCountriesDropdown.scss @@ -17,13 +17,13 @@ @include mobile-or-tablet-screen { height: unset; - max-height: calc(100vh - 28rem); + max-height: calc(100% - 28rem); } &--no-footer { height: 44rem; @include mobile-or-tablet-screen { - height: 100vh; + height: 100%; max-height: unset; } } diff --git a/src/components/Modals/PreferredCountriesModal/PreferredCountriesModal.scss b/src/components/Modals/PreferredCountriesModal/PreferredCountriesModal.scss index 221fba82..3fec817b 100644 --- a/src/components/Modals/PreferredCountriesModal/PreferredCountriesModal.scss +++ b/src/components/Modals/PreferredCountriesModal/PreferredCountriesModal.scss @@ -11,7 +11,7 @@ left: 0; background: #fff; z-index: 1; - height: calc(100vh - 7.5rem); + height: calc(100% - 7.5rem); & .mobile-wrapper { &__header { diff --git a/src/components/PaymentMethodCard/PaymentMethodCard.tsx b/src/components/PaymentMethodCard/PaymentMethodCard.tsx index 7f2235d1..6643bb4e 100644 --- a/src/components/PaymentMethodCard/PaymentMethodCard.tsx +++ b/src/components/PaymentMethodCard/PaymentMethodCard.tsx @@ -48,11 +48,13 @@ const PaymentMethodCard = ({ })} > {!toAdd ? ( -
+
onClickAdd?.(paymentMethod)} + > diff --git a/src/pages/my-ads/components/AdConditionsSection/AdConditionsSection.tsx b/src/pages/my-ads/components/AdConditionsSection/AdConditionsSection.tsx index 0f548cb5..49bb0107 100644 --- a/src/pages/my-ads/components/AdConditionsSection/AdConditionsSection.tsx +++ b/src/pages/my-ads/components/AdConditionsSection/AdConditionsSection.tsx @@ -2,6 +2,7 @@ import { MouseEventHandler } from 'react'; import { useFormContext } from 'react-hook-form'; import { TCountryListItem, TCurrency } from 'types'; import { AD_CONDITION_TYPES } from '@/constants'; +import { isEmptyObject } from '@/utils'; import { Localize } from '@deriv-com/translations'; import { Text, useDevice } from '@deriv-com/ui'; import { AdConditionBlockSelector } from '../AdConditionBlockSelector'; @@ -17,18 +18,27 @@ type TAdConditionsSection = { getTotalSteps: () => number; goToNextStep: MouseEventHandler; goToPreviousStep: () => void; + initialPaymentMethods: number[] | string[]; localCurrency?: TCurrency; rateType: string; }; -const AdConditionsSection = ({ countryList, currency, localCurrency, rateType, ...props }: TAdConditionsSection) => { +const AdConditionsSection = ({ + countryList, + currency, + initialPaymentMethods, + localCurrency, + rateType, + ...props +}: TAdConditionsSection) => { const { - formState: { errors }, + formState: { errors, isDirty }, getValues, setValue, watch, } = useFormContext(); const { isDesktop } = useDevice(); + const selectedMethods = getValues('payment-method') ?? []; const labelSize = isDesktop ? 'sm' : 'md'; const onClickBlockSelector = (value: number, type: string) => { @@ -47,6 +57,10 @@ const AdConditionsSection = ({ countryList, currency, localCurrency, rateType, . const minJoinDays = watch('min-join-days'); const minCompletionRate = watch('min-completion-rate'); + + const isPaymentMethodsSame = () => + initialPaymentMethods.length === selectedMethods.length && + initialPaymentMethods.sort().every((value, index) => value === selectedMethods.sort()[index]); return (
- +
); }; diff --git a/src/pages/my-ads/components/AdConditionsSection/AdCondtionsSection.scss b/src/pages/my-ads/components/AdConditionsSection/AdCondtionsSection.scss index bb779cb6..aba751b8 100644 --- a/src/pages/my-ads/components/AdConditionsSection/AdCondtionsSection.scss +++ b/src/pages/my-ads/components/AdConditionsSection/AdCondtionsSection.scss @@ -6,7 +6,7 @@ @include mobile { padding: 1.6rem; - height: calc(100vh - 20rem); + height: calc(100% - 20rem); overflow: auto; } } diff --git a/src/pages/my-ads/components/AdConditionsSection/__tests__/AdConditionsSection.spec.tsx b/src/pages/my-ads/components/AdConditionsSection/__tests__/AdConditionsSection.spec.tsx index ffb85a83..685321b6 100644 --- a/src/pages/my-ads/components/AdConditionsSection/__tests__/AdConditionsSection.spec.tsx +++ b/src/pages/my-ads/components/AdConditionsSection/__tests__/AdConditionsSection.spec.tsx @@ -10,6 +10,7 @@ const mockProps = { getTotalSteps: jest.fn(), goToNextStep: jest.fn(), goToPreviousStep: jest.fn(), + initialPaymentMethods: [], localCurrency: 'USD' as TCurrency, rateType: 'fixed', }; diff --git a/src/pages/my-ads/components/AdFormController/AdFormController.tsx b/src/pages/my-ads/components/AdFormController/AdFormController.tsx index b3e2a02e..03e18afc 100644 --- a/src/pages/my-ads/components/AdFormController/AdFormController.tsx +++ b/src/pages/my-ads/components/AdFormController/AdFormController.tsx @@ -51,7 +51,7 @@ const AdFormController = ({ ) : ( - )} diff --git a/src/pages/my-ads/components/AdWizard/AdWizard.tsx b/src/pages/my-ads/components/AdWizard/AdWizard.tsx index 656e5463..f0065b63 100644 --- a/src/pages/my-ads/components/AdWizard/AdWizard.tsx +++ b/src/pages/my-ads/components/AdWizard/AdWizard.tsx @@ -13,6 +13,7 @@ import './AdWizard.scss'; type TAdWizardNav = { countryList: TCountryListItem; currency: TCurrency; + initialPaymentMethods: number[] | string[]; localCurrency?: TCurrency; onCancel: () => void; orderExpiryOptions: TOrderExpiryOptions; @@ -20,7 +21,14 @@ type TAdWizardNav = { steps: TStep[]; }; -const AdWizard = ({ countryList, onCancel, orderExpiryOptions, steps, ...rest }: TAdWizardNav) => { +const AdWizard = ({ + countryList, + initialPaymentMethods, + onCancel, + orderExpiryOptions, + steps, + ...rest +}: TAdWizardNav) => { const { isDesktop } = useDevice(); const [currentStep, setCurrentStep] = useState(0); const wizardProps = { @@ -71,7 +79,12 @@ const AdWizard = ({ countryList, onCancel, orderExpiryOptions, steps, ...rest }: > - + ); }; diff --git a/src/pages/my-ads/components/AdWizard/__tests__/AdWizard.spec.tsx b/src/pages/my-ads/components/AdWizard/__tests__/AdWizard.spec.tsx index b8e859c0..797572ea 100644 --- a/src/pages/my-ads/components/AdWizard/__tests__/AdWizard.spec.tsx +++ b/src/pages/my-ads/components/AdWizard/__tests__/AdWizard.spec.tsx @@ -28,6 +28,7 @@ jest.mock('../../AdProgressBar', () => ({ const mockProps = { countryList: {}, currency: 'usd' as TCurrency, + initialPaymentMethods: [], localCurrency: 'usd' as TCurrency, onCancel: jest.fn(), orderExpiryOptions: [900, 1800], diff --git a/src/pages/my-ads/screens/CreateEditAd/CreateEditAd.tsx b/src/pages/my-ads/screens/CreateEditAd/CreateEditAd.tsx index 6ae21626..14359d23 100644 --- a/src/pages/my-ads/screens/CreateEditAd/CreateEditAd.tsx +++ b/src/pages/my-ads/screens/CreateEditAd/CreateEditAd.tsx @@ -1,4 +1,4 @@ -import { useCallback, useEffect } from 'react'; +import { useCallback, useEffect, useState } from 'react'; import { FormProvider, useForm } from 'react-hook-form'; import { useHistory } from 'react-router-dom'; import { NonUndefinedValues, TCountryListItem, TCurrency, TErrorCodes, THooks, TLocalize } from 'types'; @@ -45,6 +45,7 @@ type TMutatePayload = Parameters[0]; type TFormValuesInfo = NonUndefinedValues; const CreateEditAd = () => { + const [initialPaymentMethods, setInitialPaymentMethods] = useState([]); const { queryString } = useQueryString(); const { localize } = useTranslations(); const { advertId = '' } = queryString; @@ -60,9 +61,8 @@ const CreateEditAd = () => { const { data: p2pSettings } = api.settings.useSettings(); const { adverts_archive_period: advertsArchivePeriod, order_expiry_options: orderExpiryOptions = [] } = p2pSettings ?? {}; - const { data: createResponse, error, isError, isSuccess, mutate } = api.advert.useCreate(); + const { error, isError, isSuccess, mutate } = api.advert.useCreate(); const { - data: updateResponse, error: updateError, isError: isUpdateError, isSuccess: isUpdateSuccess, @@ -95,21 +95,13 @@ const CreateEditAd = () => { handleSubmit, reset, setValue, - trigger, } = methods; useEffect(() => { - if (Object.keys(countryList as object).length > 0 && getValues('preferred-countries').length === 0) { + if (Object.keys(countryList as object).length > 0 && getValues('preferred-countries')?.length === 0) { setValue('preferred-countries', Object.keys(countryList as object)); } }, [countryList, getValues, setValue]); - useEffect(() => { - return () => { - reset(); - }; - // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); - const shouldNotShowArchiveMessageAgain = LocalStorageUtils.getValue( LocalStorageConstants.p2pArchiveMessage ); @@ -168,19 +160,14 @@ const CreateEditAd = () => { }; useEffect(() => { - if (isSuccess || isUpdateSuccess) { + if (isSuccess) { if (!shouldNotShowArchiveMessageAgain) { showModal('AdCreateEditSuccessModal'); - } else if (createResponse?.visibility_status) { - history.push(MY_ADS_URL, { - currency: createResponse?.account_currency, - from: '', - limit: createResponse?.max_order_amount_limit_display, - visibilityStatus: createResponse?.visibility_status[0], - }); } else { history.push(MY_ADS_URL); } + } else if (isUpdateSuccess) { + history.push(MY_ADS_URL); } else if (isError || isUpdateError) { showModal('AdCreateEditErrorModal'); } @@ -199,30 +186,31 @@ const CreateEditAd = () => { const setFormValues = useCallback( (formValues: TFormValuesInfo) => { - setValue('form-type', 'edit'); - setValue('ad-rate-type', formValues.rate_type); - setValue('ad-type', formValues.type); - setValue('amount', formValues.amount.toString()); - setValue('instructions', formValues.description); - setValue('max-order', formValues.max_order_amount.toString()); - setValue('min-completion-rate', formValues.min_completion_rate?.toString() ?? ''); - setValue('min-join-days', formValues.min_join_days?.toString() ?? ''); - setValue('min-order', formValues.min_order_amount.toString()); - setValue('rate-value', setInitialAdRate(formValues) as string); - setValue('preferred-countries', formValues.eligible_countries ?? Object.keys(countryList as object)); - setValue('order-completion-time', `${formValues.order_expiry_period}`); - if (formValues.type === 'sell') { - setValue('contact-details', formValues.contact_info); - setValue('payment-method', Object.keys(formValues.payment_method_details ?? {}).map(Number)); - } else { - const paymentMethodNames = formValues?.payment_method_names; - const paymentMethodKeys = - paymentMethodNames?.map( - name => paymentMethodList.find(method => method.display_name === name)?.id ?? '' - ) ?? []; - setValue('payment-method', paymentMethodKeys); - } - trigger(); + // Prepare the default values object + const defaultValues = { + 'ad-type': formValues.type, + amount: formValues.amount.toString(), + 'contact-details': formValues.type === 'sell' ? formValues.contact_info : undefined, + 'form-type': 'edit' as const, + instructions: formValues.description, + 'max-order': formValues.max_order_amount.toString(), + 'min-completion-rate': formValues.min_completion_rate?.toString() ?? '', + 'min-join-days': formValues.min_join_days?.toString() ?? '', + 'min-order': formValues.min_order_amount.toString(), + 'order-completion-time': `${formValues.order_expiry_period}`, + 'payment-method': + formValues.type === 'sell' + ? Object.keys(formValues.payment_method_details ?? {}).map(Number) + : formValues?.payment_method_names?.map( + name => paymentMethodList.find(method => method.display_name === name)?.id ?? '' + ) ?? [], + 'preferred-countries': formValues.eligible_countries ?? Object.keys(countryList as object), + 'rate-value': setInitialAdRate(formValues) as string, + }; + + // Use reset to set default values and mark the form as not dirty + reset(defaultValues); + setInitialPaymentMethods(defaultValues['payment-method']); }, // eslint-disable-next-line react-hooks/exhaustive-deps [paymentMethodList, countryList] @@ -251,6 +239,7 @@ const CreateEditAd = () => { { /> diff --git a/src/pages/my-ads/screens/MyAds/MyAdsTableRow/MyAdsTableRowView.tsx b/src/pages/my-ads/screens/MyAds/MyAdsTableRow/MyAdsTableRowView.tsx index 6cd37920..32d8dc5b 100644 --- a/src/pages/my-ads/screens/MyAds/MyAdsTableRow/MyAdsTableRowView.tsx +++ b/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, useQueryString } from '@/hooks/custom-hooks'; +import { useFloatingRate, useModalManager } from '@/hooks/custom-hooks'; import { getPaymentMethodObjects, getVisibilityErrorCodes } from '@/utils'; import { LocalStorageConstants, LocalStorageUtils } from '@deriv-com/utils'; import { TMyAdsTableRowRendererProps } from '../MyAdsTable/MyAdsTable'; @@ -50,14 +50,13 @@ const MyAdsTableRowView = ({ const { data: p2pSettings } = api.settings.useSettings(); const { order_payment_period: orderPaymentPeriod } = p2pSettings ?? {}; const { - data: createResponse, error: createError, isError: isCreateError, isSuccess: isCreateSuccess, mutate: createAd, } = api.advert.useCreate(); const { rateType: currentRateType, reachedTargetDate } = useFloatingRate(); - const { data: updateResponse, error: updateError, isError: isErrorUpdate, mutate } = api.advert.useUpdate(); + const { error: updateError, isError: isErrorUpdate, mutate } = api.advert.useUpdate(); const { error, isError, mutate: deleteAd } = api.advert.useDelete(); const shouldNotShowArchiveMessageAgain = LocalStorageUtils.getValue( LocalStorageConstants.p2pArchiveMessage @@ -74,16 +73,6 @@ const MyAdsTableRowView = ({ const advertiserPaymentMethodObjects = getPaymentMethodObjects( advertiserPaymentMethods as THooks.AdvertiserPaymentMethods.Get ); - const { queryString } = useQueryString(); - - const createAdvisibilityStatus = (location.state as TState)?.visibilityStatus; - - useEffect(() => { - if (createAdvisibilityStatus) { - showModal('AdVisibilityErrorModal'); - } - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [createAdvisibilityStatus]); const { account_currency: accountCurrency = '', @@ -158,7 +147,7 @@ const MyAdsTableRowView = ({ useEffect(() => { if (isCreateSuccess) { - if (shouldNotShowArchiveMessageAgain) { + if (!shouldNotShowArchiveMessageAgain) { showModal('AdCreateEditSuccessModal'); } else { invalidate('p2p_advertiser_adverts'); @@ -287,7 +276,6 @@ const MyAdsTableRowView = ({ {!!isModalOpenFor('AdCreateEditSuccessModal') && ( hideModal({ shouldHideAllModals: true })} />