Merge pull request #246 from nada-deriv/nada/FEQ-2515/redirect-to-fir…

…st-step Nada/feq 2515/redirect to first step
deriv-com · Aug 5, 2024 · 5d1cdbc · 5d1cdbc
2 parents d573d94 + 99a5ef4
commit 5d1cdbc
Show file tree

Hide file tree

Showing 16 changed files with 144 additions and 52 deletions.
diff --git a/src/components/CopyAdForm/CopyAdForm.tsx b/src/components/CopyAdForm/CopyAdForm.tsx
@@ -39,6 +39,7 @@ const CopyAdForm = ({ formValues, isModalOpen, onClickCancel, onFormSubmit, ...r
     const {
         account_currency: currency,
         amount,
+        contact_info: contactInfo,
         description,
         eligible_countries: eligibleCountries = [],
         local_currency: localCurrency,
@@ -209,11 +210,23 @@ const CopyAdForm = ({ formValues, isModalOpen, onClickCancel, onFormSubmit, ...r
                                 triggerValidationFunction={() => triggerValidation(['amount', 'min-order'])}
                             />
                         </div>
+                        {type === 'sell' && (
+                            <div className='flex flex-col w-full mt-[1.6rem]'>
+                                <Text color='less-prominent' size={labelSize}>
+                                    <Localize i18n_default_text='Contact details' />
+                                </Text>
+                                <Text className='break-all' size={valueSize}>
+                                    {contactInfo || '-'}
+                                </Text>
+                            </div>
+                        )}
                         <div className='flex flex-col w-full mt-[1.6rem]'>
                             <Text color='less-prominent' size={labelSize}>
                                 <Localize i18n_default_text='Instructions' />
                             </Text>
-                            <Text size={valueSize}>{description || '-'}</Text>
+                            <Text className='break-all' size={valueSize}>
+                                {description || '-'}
+                            </Text>
                         </div>
                         <div className='flex flex-col w-full mt-[1.6rem]'>
                             <Text color='less-prominent' size={labelSize}>

diff --git a/src/components/Modals/AdErrorTooltipModal/AdErrorTooltipModal.tsx b/src/components/Modals/AdErrorTooltipModal/AdErrorTooltipModal.tsx
@@ -10,8 +10,8 @@ type TAdErrorTooltipModal = {
     accountCurrency: string;
     advertType: string;
     balanceAvailable: number;
-    dailyBuyLimit: string;
-    dailySellLimit: string;
+    dailyBuyLimit: number;
+    dailySellLimit: number;
     isModalOpen: boolean;
     onRequestClose: () => void;
     remainingAmount: number;
@@ -24,8 +24,8 @@ const getAdErrorMessage = (
     remainingAmount: number,
     balanceAvailable: number,
     advertType: string,
-    dailyBuyLimit: string,
-    dailySellLimit: string,
+    dailyBuyLimit: number,
+    dailySellLimit: number,
     onLiveChatClick: () => void
 ): string => {
     const errorMessages: { [key: string]: ReactNode | string } = {

diff --git a/src/components/Modals/AdErrorTooltipModal/__tests__/AdErrorTooltipModal.spec.tsx b/src/components/Modals/AdErrorTooltipModal/__tests__/AdErrorTooltipModal.spec.tsx
@@ -5,8 +5,8 @@ const mockProps = {
     accountCurrency: 'USD',
     advertType: 'buy',
     balanceAvailable: 100,
-    dailyBuyLimit: '150',
-    dailySellLimit: '230',
+    dailyBuyLimit: 150,
+    dailySellLimit: 230,
     isModalOpen: true,
     onRequestClose: jest.fn(),
     remainingAmount: 100,

diff --git a/src/pages/my-ads/components/AdConditionsSection/AdConditionsSection.tsx b/src/pages/my-ads/components/AdConditionsSection/AdConditionsSection.tsx
@@ -1,6 +1,6 @@
-import { MouseEventHandler } from 'react';
+import { MouseEventHandler, useEffect } from 'react';
 import { useFormContext } from 'react-hook-form';
-import { TCountryListItem, TCurrency } from 'types';
+import { TCountryListItem, TCurrency, TInitialData } from 'types';
 import { AD_CONDITION_TYPES } from '@/constants';
 import { isEmptyObject } from '@/utils';
 import { Localize } from '@deriv-com/translations';
@@ -16,19 +16,24 @@ type TAdConditionsSection = {
     currency: TCurrency;
     getCurrentStep: () => number;
     getTotalSteps: () => number;
+    goToFirstStep: () => void;
     goToNextStep: MouseEventHandler<HTMLButtonElement>;
     goToPreviousStep: () => void;
-    initialPaymentMethods: number[] | string[];
+    initialData: TInitialData;
     localCurrency?: TCurrency;
     rateType: string;
+    setShouldReset: (shouldReset: boolean) => void;
+    shouldReset: boolean;
 };
 
 const AdConditionsSection = ({
     countryList,
     currency,
-    initialPaymentMethods,
+    initialData,
     localCurrency,
     rateType,
+    setShouldReset,
+    shouldReset,
     ...props
 }: TAdConditionsSection) => {
     const {
@@ -39,16 +44,25 @@ const AdConditionsSection = ({
     } = useFormContext();
     const { isDesktop } = useDevice();
     const selectedMethods = getValues('payment-method') ?? [];
+    const preferedCountries = watch('preferred-countries') ?? [];
     const labelSize = isDesktop ? 'sm' : 'md';
 
+    useEffect(() => {
+        if (shouldReset) {
+            props.goToFirstStep();
+            setShouldReset(false);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [shouldReset]);
+
     const onClickBlockSelector = (value: number, type: string) => {
         if (type === AD_CONDITION_TYPES.JOINING_DATE) {
-            if (getValues('min-join-days') === value) {
-                setValue('min-join-days', 0);
+            if (getValues('min-join-days') == value) {
+                setValue('min-join-days', null);
             } else {
                 setValue('min-join-days', value);
             }
-        } else if (getValues('min-completion-rate') === value) {
+        } else if (getValues('min-completion-rate') == value) {
             setValue('min-completion-rate', null);
         } else {
             setValue('min-completion-rate', value);
@@ -59,8 +73,17 @@ const AdConditionsSection = ({
     const minCompletionRate = watch('min-completion-rate');
 
     const isPaymentMethodsSame = () =>
-        initialPaymentMethods.length === selectedMethods.length &&
-        initialPaymentMethods.sort().every((value, index) => value === selectedMethods.sort()[index]);
+        initialData.paymentMethod?.length === selectedMethods.length &&
+        initialData.paymentMethod?.sort().every((value, index) => value === selectedMethods.sort()[index]);
+
+    const isMinCompletionRateSame = () => (minCompletionRate?.toString() ?? null) === initialData.minCompletionRate;
+
+    const isMinJoinDaysSame = () => (minJoinDays?.toString() ?? null) === initialData.minJoinDays;
+
+    const isPreferredCountriesSame = () =>
+        initialData?.selectedCountries?.length === preferedCountries.length &&
+        initialData?.selectedCountries?.sort().every((value, index) => value === preferedCountries.sort()[index]);
+
     return (
         <div className='ad-conditions-section'>
             <AdSummary
@@ -93,7 +116,14 @@ const AdConditionsSection = ({
             <PreferredCountriesSelector countryList={countryList} type={AD_CONDITION_TYPES.PREFERRED_COUNTRIES} />
             <AdFormController
                 {...props}
-                isNextButtonDisabled={!isEmptyObject(errors) || (!isDirty && isPaymentMethodsSame())}
+                isNextButtonDisabled={
+                    !isEmptyObject(errors) ||
+                    (isPaymentMethodsSame() &&
+                        isMinCompletionRateSame() &&
+                        isMinJoinDaysSame() &&
+                        isPreferredCountriesSame() &&
+                        !isDirty)
+                }
             />
         </div>
     );

diff --git a/src/pages/my-ads/components/AdConditionsSection/__tests__/AdConditionsSection.spec.tsx b/src/pages/my-ads/components/AdConditionsSection/__tests__/AdConditionsSection.spec.tsx
@@ -8,11 +8,19 @@ const mockProps = {
     currency: 'USD' as TCurrency,
     getCurrentStep: jest.fn(),
     getTotalSteps: jest.fn(),
+    goToFirstStep: jest.fn(),
     goToNextStep: jest.fn(),
     goToPreviousStep: jest.fn(),
-    initialPaymentMethods: [],
+    initialData: {
+        minCompletionRate: null,
+        minJoinDays: null,
+        paymentMethod: [],
+        selectedCountries: [],
+    },
     localCurrency: 'USD' as TCurrency,
     rateType: 'fixed',
+    setShouldReset: jest.fn(),
+    shouldReset: false,
 };
 
 jest.mock('@deriv-com/ui', () => ({

diff --git a/src/pages/my-ads/components/AdStatus/AdStatus.scss b/src/pages/my-ads/components/AdStatus/AdStatus.scss
@@ -19,11 +19,14 @@
 }
 
 .ad-status {
+    margin-left: -2rem;
+    width: fit-content;
+    @include desktop {
+        max-width: 12rem;
+    }
     &--active {
         @include ad-status-base(#4bb4b3);
 
-        width: fit-content;
-
         @include mobile-or-tablet-screen {
             margin-bottom: 0.8rem;
             padding: 0.2rem 1rem;
@@ -37,6 +40,5 @@
             margin-bottom: 0.8rem;
             padding: 0.2rem 1rem;
         }
-        width: fit-content;
     }
 }
diff --git a/src/pages/my-ads/components/AdStatus/AdStatus.tsx b/src/pages/my-ads/components/AdStatus/AdStatus.tsx
@@ -12,7 +12,7 @@ const AdStatus = ({ isActive = false }: TAdStatusProps) => {
     return (
         <Text
             align='center'
-            className={clsx({
+            className={clsx('ad-status', {
                 'ad-status--active': isActive,
                 'ad-status--inactive': !isActive,
             })}

diff --git a/src/pages/my-ads/components/AdWizard/AdWizard.tsx b/src/pages/my-ads/components/AdWizard/AdWizard.tsx
@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { TCountryListItem, TCurrency, TOrderExpiryOptions, TStep } from 'types';
+import { TCountryListItem, TCurrency, TInitialData, TOrderExpiryOptions, TStep } from 'types';
 import { FormProgress, Wizard } from '@/components';
 import { LabelPairedXmarkLgBoldIcon } from '@deriv/quill-icons';
 import { Localize } from '@deriv-com/translations';
@@ -13,19 +13,23 @@ import './AdWizard.scss';
 type TAdWizardNav = {
     countryList: TCountryListItem;
     currency: TCurrency;
-    initialPaymentMethods: number[] | string[];
+    initialData: TInitialData;
     localCurrency?: TCurrency;
     onCancel: () => void;
     orderExpiryOptions: TOrderExpiryOptions;
     rateType: string;
+    setShouldReset: (shouldReset: boolean) => void;
+    shouldReset: boolean;
     steps: TStep[];
 };
 
 const AdWizard = ({
     countryList,
-    initialPaymentMethods,
+    initialData,
     onCancel,
     orderExpiryOptions,
+    setShouldReset,
+    shouldReset,
     steps,
     ...rest
 }: TAdWizardNav) => {
@@ -34,6 +38,7 @@ const AdWizard = ({
     const wizardProps = {
         getCurrentStep: () => currentStep + 1,
         getTotalSteps: () => steps.length,
+        goToFirstStep: () => setCurrentStep(0),
         goToNextStep: () => setCurrentStep(currentStep + 1),
         goToPreviousStep: () => setCurrentStep(currentStep - 1),
     };
@@ -82,8 +87,10 @@ const AdWizard = ({
             <AdConditionsSection
                 {...wizardProps}
                 countryList={countryList}
+                initialData={initialData}
+                setShouldReset={setShouldReset}
+                shouldReset={shouldReset}
                 {...rest}
-                initialPaymentMethods={initialPaymentMethods}
             />
         </Wizard>
     );

diff --git a/src/pages/my-ads/components/AdWizard/__tests__/AdWizard.spec.tsx b/src/pages/my-ads/components/AdWizard/__tests__/AdWizard.spec.tsx
@@ -28,11 +28,18 @@ jest.mock('../../AdProgressBar', () => ({
 const mockProps = {
     countryList: {},
     currency: 'usd' as TCurrency,
-    initialPaymentMethods: [],
+    initialData: {
+        minCompletionRate: null,
+        minJoinDays: null,
+        paymentMethod: [],
+        selectedCountries: [],
+    },
     localCurrency: 'usd' as TCurrency,
     onCancel: jest.fn(),
     orderExpiryOptions: [900, 1800],
     rateType: 'float',
+    setShouldReset: jest.fn(),
+    shouldReset: false,
     steps: [{ header: { title: 'step 1' } }, { header: { title: 'step 2' } }, { header: { title: 'step 3' } }],
 };
 

diff --git a/src/pages/my-ads/components/AlertComponent/AlertComponent.scss b/src/pages/my-ads/components/AlertComponent/AlertComponent.scss
@@ -3,7 +3,7 @@
     justify-content: center;
     position: absolute;
     align-items: center;
-    right: 4.2rem;
+    right: 3.6rem;
     height: 100%;
 
     span {