From 33445c1598101286dd47ffb6b158e5632f3af0e3 Mon Sep 17 00:00:00 2001 From: Nada Date: Fri, 2 Aug 2024 15:12:18 +0400 Subject: [PATCH] fix: save changes button, something went wrong, you've created popup --- .../AdCreateEditSuccessModal.tsx | 15 +--- .../AdConditionsSection.tsx | 23 ++++++- .../AdFormController/AdFormController.tsx | 2 +- .../my-ads/components/AdWizard/AdWizard.tsx | 17 ++++- .../screens/CreateEditAd/CreateEditAd.tsx | 69 +++++++++---------- .../MyAds/MyAdsTableRow/MyAdsTableRowView.tsx | 18 +---- 6 files changed, 75 insertions(+), 69 deletions(-) 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/pages/my-ads/components/AdConditionsSection/AdConditionsSection.tsx b/src/pages/my-ads/components/AdConditionsSection/AdConditionsSection.tsx index a5048fa8..58766a9c 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) => { @@ -41,6 +51,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/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/screens/CreateEditAd/CreateEditAd.tsx b/src/pages/my-ads/screens/CreateEditAd/CreateEditAd.tsx index 012fc863..da077a47 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'; @@ -44,6 +44,7 @@ type TMutatePayload = Parameters[0]; type TFormValuesInfo = NonUndefinedValues; const CreateEditAd = () => { + const [initialPaymentMethods, setInitialPaymentMethods] = useState([]); const { queryString } = useQueryString(); const { localize } = useTranslations(); const { advertId = '' } = queryString; @@ -59,9 +60,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, @@ -92,10 +92,11 @@ const CreateEditAd = () => { formState: { isDirty }, getValues, handleSubmit, + reset, setValue, } = 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]); @@ -158,19 +159,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'); } @@ -189,28 +185,31 @@ const CreateEditAd = () => { const setFormValues = useCallback( (formValues: TFormValuesInfo) => { - setValue('form-type', 'edit'); - 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); - } + // 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] @@ -239,6 +238,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 })} />