From 92f4138f758cbd0fb189a92ac4ffb7918410f678 Mon Sep 17 00:00:00 2001 From: Nada Date: Wed, 19 Jun 2024 15:02:23 +0400 Subject: [PATCH 1/4] fix: use expiry period from BE --- .../BuySellForm/BuySellData/BuySellData.tsx | 5 ++-- src/components/CopyAdForm/CopyAdForm.tsx | 2 +- src/constants/orders.ts | 21 ---------------- .../AdPaymentDetailsSection.tsx | 13 +++++++--- .../AdPaymentDetailsSection.spec.tsx | 1 + .../my-ads/components/AdWizard/AdWizard.tsx | 7 +++--- .../AdWizard/__tests__/AdWizard.spec.tsx | 1 + .../OrderTimeSelection/OrderTimeSelection.tsx | 9 +++---- .../__tests__/OrderTimeSelection.spec.tsx | 9 +++---- .../screens/CreateEditAd/CreateEditAd.tsx | 24 +++++++++++-------- src/utils/order-utils.ts | 12 ++++++++++ src/utils/time.ts | 7 +++--- types.ts | 4 ++++ 13 files changed, 64 insertions(+), 51 deletions(-) diff --git a/src/components/BuySellForm/BuySellData/BuySellData.tsx b/src/components/BuySellForm/BuySellData/BuySellData.tsx index 0073390f..f14b0518 100644 --- a/src/components/BuySellForm/BuySellData/BuySellData.tsx +++ b/src/components/BuySellForm/BuySellData/BuySellData.tsx @@ -2,7 +2,7 @@ import { forwardRef } from 'react'; import { THooks } from 'types'; import { PaymentMethodWithIcon } from '@/components'; import { formatTime } from '@/utils'; -import { Localize } from '@deriv-com/translations'; +import { Localize, useTranslations } from '@deriv-com/translations'; import { Text, useDevice } from '@deriv-com/ui'; import './BuySellData.scss'; @@ -34,6 +34,7 @@ const BuySellData = forwardRef( }, ref ) => { + const { localize } = useTranslations(); const { isMobile } = useDevice(); const labelSize = isMobile ? 'sm' : 'xs'; const valueSize = isMobile ? 'md' : 'sm'; @@ -89,7 +90,7 @@ const BuySellData = forwardRef( - {formatTime(expiryPeriod)} + {formatTime(expiryPeriod, localize)} ); diff --git a/src/components/CopyAdForm/CopyAdForm.tsx b/src/components/CopyAdForm/CopyAdForm.tsx index 8c861220..35404728 100644 --- a/src/components/CopyAdForm/CopyAdForm.tsx +++ b/src/components/CopyAdForm/CopyAdForm.tsx @@ -216,7 +216,7 @@ const CopyAdForm = ({ formValues, isModalOpen, onClickCancel, onFormSubmit, ...r - {formatTime(orderExpiryPeriod ?? 3600)} + {formatTime(orderExpiryPeriod ?? 3600, localize)}
diff --git a/src/constants/orders.ts b/src/constants/orders.ts index 393dd231..81411f95 100644 --- a/src/constants/orders.ts +++ b/src/constants/orders.ts @@ -14,26 +14,5 @@ export const ORDERS_STATUS = { TIMED_OUT: 'timed-out', } as const; -//TODO: Below constant to be removed once list is fetched from API -export const getOrderTimeCompletionList = (localize: TLocalize) => - [ - { - text: localize('1 hour'), - value: '3600', - }, - { - text: localize('45 minutes'), - value: '2700', - }, - { - text: localize('30 minutes'), - value: '1800', - }, - { - text: localize('15 minutes'), - value: '900', - }, - ] as const; - export const getOrderTimeInfoMessage = (localize: TLocalize) => localize('Orders will expire if they aren’t completed within this time.'); diff --git a/src/pages/my-ads/components/AdPaymentDetailsSection/AdPaymentDetailsSection.tsx b/src/pages/my-ads/components/AdPaymentDetailsSection/AdPaymentDetailsSection.tsx index 5b02884b..eea5f66b 100644 --- a/src/pages/my-ads/components/AdPaymentDetailsSection/AdPaymentDetailsSection.tsx +++ b/src/pages/my-ads/components/AdPaymentDetailsSection/AdPaymentDetailsSection.tsx @@ -1,6 +1,6 @@ import { MouseEventHandler, useState } from 'react'; import { useFormContext } from 'react-hook-form'; -import { TCurrency } from 'types'; +import { TCurrency, TOrderExpiryOptions } from 'types'; import { BUY_SELL } from '@/constants'; import { AdFormController } from '../AdFormController'; import { AdPaymentSelection } from '../AdPaymentSelection'; @@ -14,10 +14,17 @@ type TAdPaymentDetailsSection = { goToNextStep: MouseEventHandler; goToPreviousStep: () => void; localCurrency?: TCurrency; + orderExpiryOptions: TOrderExpiryOptions; rateType: string; }; -const AdPaymentDetailsSection = ({ currency, localCurrency, rateType, ...props }: TAdPaymentDetailsSection) => { +const AdPaymentDetailsSection = ({ + currency, + localCurrency, + orderExpiryOptions, + rateType, + ...props +}: TAdPaymentDetailsSection) => { const { formState: { errors, isValid }, getValues, @@ -51,7 +58,7 @@ const AdPaymentDetailsSection = ({ currency, localCurrency, rateType, ...props } rateType={rateType} type={getValues('ad-type')} /> - + void; + orderExpiryOptions: TOrderExpiryOptions; rateType: string; steps: TStep[]; }; -const AdWizard = ({ countryList, onCancel, steps, ...rest }: TAdWizardNav) => { +const AdWizard = ({ countryList, onCancel, orderExpiryOptions, steps, ...rest }: TAdWizardNav) => { const { isDesktop } = useDevice(); const [currentStep, setCurrentStep] = useState(0); const wizardProps = { @@ -69,7 +70,7 @@ const AdWizard = ({ countryList, onCancel, steps, ...rest }: TAdWizardNav) => { onStepChange={step => setCurrentStep(step.activeStep - 1)} > - + ); 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 da901e5a..b8e859c0 100644 --- a/src/pages/my-ads/components/AdWizard/__tests__/AdWizard.spec.tsx +++ b/src/pages/my-ads/components/AdWizard/__tests__/AdWizard.spec.tsx @@ -30,6 +30,7 @@ const mockProps = { currency: 'usd' as TCurrency, localCurrency: 'usd' as TCurrency, onCancel: jest.fn(), + orderExpiryOptions: [900, 1800], rateType: 'float', steps: [{ header: { title: 'step 1' } }, { header: { title: 'step 2' } }, { header: { title: 'step 3' } }], }; diff --git a/src/pages/my-ads/components/OrderTimeSelection/OrderTimeSelection.tsx b/src/pages/my-ads/components/OrderTimeSelection/OrderTimeSelection.tsx index 67f5ffaf..105e0d78 100644 --- a/src/pages/my-ads/components/OrderTimeSelection/OrderTimeSelection.tsx +++ b/src/pages/my-ads/components/OrderTimeSelection/OrderTimeSelection.tsx @@ -1,14 +1,15 @@ import { useState } from 'react'; import { Controller, useFormContext } from 'react-hook-form'; -import { MutableOption } from 'types'; +import { TOrderExpiryOptions } from 'types'; import { OrderTimeTooltipModal } from '@/components/Modals'; -import { getOrderTimeCompletionList, getOrderTimeInfoMessage } from '@/constants'; +import { getOrderTimeInfoMessage } from '@/constants'; +import { getOrderTimeCompletionList } from '@/utils'; import { LabelPairedChevronDownMdRegularIcon, LabelPairedCircleInfoCaptionRegularIcon } from '@deriv/quill-icons'; import { Localize, useTranslations } from '@deriv-com/translations'; import { Dropdown, Text, TooltipMenuIcon, useDevice } from '@deriv-com/ui'; import './OrderTimeSelection.scss'; -const OrderTimeSelection = () => { +const OrderTimeSelection = ({ orderExpiryOptions }: { orderExpiryOptions: TOrderExpiryOptions }) => { const { control } = useFormContext(); const [isModalOpen, setIsModalOpen] = useState(false); const { isMobile } = useDevice(); @@ -43,7 +44,7 @@ const OrderTimeSelection = () => { } - list={getOrderTimeCompletionList(localize) as unknown as MutableOption[]} + list={getOrderTimeCompletionList(localize, orderExpiryOptions)} name='order-completion-time' onSelect={onChange} value={value} diff --git a/src/pages/my-ads/components/OrderTimeSelection/__tests__/OrderTimeSelection.spec.tsx b/src/pages/my-ads/components/OrderTimeSelection/__tests__/OrderTimeSelection.spec.tsx index 2c654726..6a807ba5 100644 --- a/src/pages/my-ads/components/OrderTimeSelection/__tests__/OrderTimeSelection.spec.tsx +++ b/src/pages/my-ads/components/OrderTimeSelection/__tests__/OrderTimeSelection.spec.tsx @@ -22,25 +22,26 @@ jest.mock('react-hook-form', () => ({ }), })); +const mockProps = { orderExpiryOptions: [900, 1800, 3600] }; describe('OrderTimeSelection', () => { it('should render the order time selection component', () => { - render(); + render(); expect(screen.getByText('Orders must be completed in')).toBeInTheDocument(); }); it('should handle the dropdown click', async () => { - render(); + render(); await userEvent.click(screen.getByRole('combobox')); expect(screen.getByRole('listbox')).toBeInTheDocument(); expect(screen.getByText('1 hour')).toBeInTheDocument(); }); it('should not do anything on clicking info icon in desktop view', async () => { - render(); + render(); await userEvent.click(screen.getByTestId('dt_order_info_icon')); expect(screen.queryByRole('button', { name: 'Ok' })).not.toBeInTheDocument(); }); it('should handle the modal open in mobile view', async () => { mockUseDevice.mockReturnValue({ isMobile: true }); - render(); + render(); await userEvent.click(screen.getByTestId('dt_order_info_icon')); const okButton = screen.getByRole('button', { name: 'Ok' }); expect(okButton).toBeInTheDocument(); diff --git a/src/pages/my-ads/screens/CreateEditAd/CreateEditAd.tsx b/src/pages/my-ads/screens/CreateEditAd/CreateEditAd.tsx index 88e4b30b..fc112dfe 100644 --- a/src/pages/my-ads/screens/CreateEditAd/CreateEditAd.tsx +++ b/src/pages/my-ads/screens/CreateEditAd/CreateEditAd.tsx @@ -1,21 +1,22 @@ import { useCallback, useEffect } from 'react'; import { FormProvider, useForm } from 'react-hook-form'; import { useHistory } from 'react-router-dom'; -import { NonUndefinedValues, TCountryListItem, TCurrency, TErrorCodes, THooks } from 'types'; +import { NonUndefinedValues, TCountryListItem, TCurrency, TErrorCodes, THooks, TLocalize } from 'types'; import { AdCancelCreateEditModal, AdCreateEditErrorModal, AdCreateEditSuccessModal } from '@/components/Modals'; import { MY_ADS_URL, RATE_TYPE } from '@/constants'; import { api } from '@/hooks'; import { useFloatingRate, useModalManager, useQueryString } from '@/hooks/custom-hooks'; +import { useTranslations } from '@deriv-com/translations'; import { Loader } from '@deriv-com/ui'; import { AdWizard } from '../../components'; import './CreateEditAd.scss'; -const getSteps = (isEdit = false) => { - const text = isEdit ? 'Edit' : 'Set'; +const getSteps = (localize: TLocalize, isEdit = false) => { + const text = isEdit ? localize('Edit') : localize('Set'); const steps = [ - { header: { title: `${text} ad type and amount` } }, - { header: { title: `${text} payment details` } }, - { header: { title: `${text} ad conditions` } }, + { header: { title: localize('{{text}} ad type and amount', { text }) } }, + { header: { title: localize('{{text}} payment details', { text }) } }, + { header: { title: localize('{{text}} ad conditions', { text }) } }, ]; return steps; }; @@ -41,6 +42,7 @@ type TFormValuesInfo = NonUndefinedValues; const CreateEditAd = () => { const { queryString } = useQueryString(); + const { localize } = useTranslations(); const { advertId = '' } = queryString; const { data: advertInfo, isLoading } = api.advert.useGet({ id: advertId ?? undefined }, !!advertId, false); const isEdit = !!advertId; @@ -50,7 +52,8 @@ const CreateEditAd = () => { const { floatRateOffsetLimitString, rateType } = useFloatingRate(); const { data: activeAccount } = api.account.useActiveAccount(); const { data: p2pSettings } = api.settings.useSettings(); - const { order_payment_period: orderPaymentPeriod } = p2pSettings ?? {}; + const { adverts_archive_period: advertsArchivePeriod, order_expiry_options: orderExpiryOptions = [] } = + p2pSettings ?? {}; const { data: createResponse, error, isError, isSuccess, mutate } = api.advert.useCreate(); const { data: updateResponse, @@ -71,7 +74,7 @@ const CreateEditAd = () => { 'min-completion-rate': '', 'min-join-days': '', 'min-order': '', - 'order-completion-time': `${orderPaymentPeriod ? (orderPaymentPeriod * 60).toString() : '3600'}`, + 'order-completion-time': `${orderExpiryOptions.length > 0 ? Math.max(...(orderExpiryOptions as number[])) : '3600'}`, 'payment-method': [], 'preferred-countries': Object.keys(countryList as object), 'rate-type-string': rateType, @@ -230,8 +233,9 @@ const CreateEditAd = () => { currency={activeAccount?.currency as TCurrency} localCurrency={p2pSettings?.localCurrency as TCurrency} onCancel={onClickCancel} + orderExpiryOptions={orderExpiryOptions} rateType={rateType} - steps={getSteps(isEdit)} + steps={getSteps(localize, isEdit)} /> @@ -242,7 +246,7 @@ const CreateEditAd = () => { onRequestClose={hideModal} /> { const orderIdsMap = JSON.parse(localStorage.getItem('order_ids') || '{}'); return (orderIdsMap[loginId] || []).includes(orderId); }; + +export const getOrderTimeCompletionList = (localize: TLocalize, orderExpiryOptions: TOrderExpiryOptions) => { + return ( + orderExpiryOptions?.map(option => ({ + text: formatTime(option as number, localize), + value: `${option}`, + })) ?? [] + ); +}; diff --git a/src/utils/time.ts b/src/utils/time.ts index 80718e36..be413312 100644 --- a/src/utils/time.ts +++ b/src/utils/time.ts @@ -1,4 +1,5 @@ import moment, { Moment } from 'moment'; +import { TLocalize } from 'types'; /** * Function that converts a numerical epoch value into a Moment instance @@ -40,13 +41,13 @@ export const daysSince = (date: string): number => { * @param {number} minutes * @returns {string} formatted time string e.g. 1 hour 30 minutes */ -export const formatTime = (minutes: number) => { +export const formatTime = (minutes: number, localize: TLocalize) => { if (!minutes) return ''; const timeInMinutes = minutes / 60; const hours = Math.floor(timeInMinutes / 60); const remainingMinutes = timeInMinutes % 60; - const hoursText = hours === 1 ? 'hour' : 'hours'; - const minutesText = remainingMinutes === 1 ? 'minute' : 'minutes'; + const hoursText = hours === 1 ? localize('hour') : localize('hours'); + const minutesText = remainingMinutes === 1 ? localize('minute') : localize('minutes'); if (hours === 0) { return `${remainingMinutes} ${minutesText}`; diff --git a/types.ts b/types.ts index 87c7f3a4..9193180f 100644 --- a/types.ts +++ b/types.ts @@ -219,3 +219,7 @@ export type TActiveChannel = ReturnType['activeChatChannel'] export type TChatMessages = NonNullable['messages']>; export type TLocalize = ReturnType['localize']; + +export type TOrderExpiryOptions = NonNullable< + NonNullable>['data'] +>['order_expiry_options']; From 44efe9862673efdd4268f14ad8e61ab5bdc6665f Mon Sep 17 00:00:00 2001 From: Nada Date: Fri, 21 Jun 2024 14:44:11 +0400 Subject: [PATCH 2/4] fix: removed selected value if value is not present in the dropdown --- .../OrderTimeSelection/OrderTimeSelection.tsx | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/src/pages/my-ads/components/OrderTimeSelection/OrderTimeSelection.tsx b/src/pages/my-ads/components/OrderTimeSelection/OrderTimeSelection.tsx index 105e0d78..b01ce343 100644 --- a/src/pages/my-ads/components/OrderTimeSelection/OrderTimeSelection.tsx +++ b/src/pages/my-ads/components/OrderTimeSelection/OrderTimeSelection.tsx @@ -1,4 +1,4 @@ -import { useState } from 'react'; +import { useEffect, useState } from 'react'; import { Controller, useFormContext } from 'react-hook-form'; import { TOrderExpiryOptions } from 'types'; import { OrderTimeTooltipModal } from '@/components/Modals'; @@ -10,11 +10,22 @@ import { Dropdown, Text, TooltipMenuIcon, useDevice } from '@deriv-com/ui'; import './OrderTimeSelection.scss'; const OrderTimeSelection = ({ orderExpiryOptions }: { orderExpiryOptions: TOrderExpiryOptions }) => { - const { control } = useFormContext(); + const { control, getValues, setValue } = useFormContext(); const [isModalOpen, setIsModalOpen] = useState(false); const { isMobile } = useDevice(); const { localize } = useTranslations(); + // remove the existing selection from input field if the existing value is not present in the dropdown + useEffect(() => { + if ( + orderExpiryOptions && + !orderExpiryOptions.find(option => option === Number(getValues('order-completion-time'))) + ) { + setValue('order-completion-time', `${Math.max(...(orderExpiryOptions as number[]))}`); + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [orderExpiryOptions]); + return (
From 63f67c523dc753c8896b93a285de5b020109bda7 Mon Sep 17 00:00:00 2001 From: Nada Date: Tue, 25 Jun 2024 15:43:06 +0400 Subject: [PATCH 3/4] fix: coveralls , build --- .../BuyPaymentMethodsList/BuyPaymentMethodsList.tsx | 7 +++++-- .../__tests__/OrderTimeSelection.spec.tsx | 2 ++ types.ts | 2 +- 3 files changed, 8 insertions(+), 3 deletions(-) diff --git a/src/pages/my-ads/components/BuyPaymentMethodsList/BuyPaymentMethodsList.tsx b/src/pages/my-ads/components/BuyPaymentMethodsList/BuyPaymentMethodsList.tsx index a7e56a1a..e7df9525 100644 --- a/src/pages/my-ads/components/BuyPaymentMethodsList/BuyPaymentMethodsList.tsx +++ b/src/pages/my-ads/components/BuyPaymentMethodsList/BuyPaymentMethodsList.tsx @@ -1,5 +1,6 @@ import { ComponentProps } from 'react'; import { LabelPairedCirclePlusCaptionRegularIcon } from '@deriv/quill-icons'; +import { useTranslations } from '@deriv-com/translations'; import { Dropdown } from '@deriv-com/ui'; import './BuyPaymentMethodsList.scss'; @@ -9,19 +10,21 @@ type TBuyPaymentMethodsList = { }; const BuyPaymentMethodsList = ({ list, onSelectPaymentMethod }: TBuyPaymentMethodsList) => { + const { localize } = useTranslations(); return (
} + emptyResultMessage={localize('No results found')} icon={} isFullWidth + label={localize('Add')} list={list} name='payment-method-list' onSelect={value => onSelectPaymentMethod(value as string)} - // @ts-expect-error - Dropdown component does not have a value prop - placeholder='Add' + shouldClearValue value='' variant='prompt' /> diff --git a/src/pages/my-ads/components/OrderTimeSelection/__tests__/OrderTimeSelection.spec.tsx b/src/pages/my-ads/components/OrderTimeSelection/__tests__/OrderTimeSelection.spec.tsx index 6a807ba5..b12bad89 100644 --- a/src/pages/my-ads/components/OrderTimeSelection/__tests__/OrderTimeSelection.spec.tsx +++ b/src/pages/my-ads/components/OrderTimeSelection/__tests__/OrderTimeSelection.spec.tsx @@ -19,6 +19,8 @@ jest.mock('react-hook-form', () => ({ }), useFormContext: () => ({ control: 'mockedControl', + getValues: jest.fn(), + setValue: jest.fn(), }), })); diff --git a/types.ts b/types.ts index 8d2021e6..71c3e42e 100644 --- a/types.ts +++ b/types.ts @@ -187,7 +187,7 @@ export type TCurrency = CurrencyConstants.Currency; export type TExchangeRate = ReturnType['exchangeRates']; -export type MutableOption = { text?: React.ReactNode; value?: string | undefined }; +export type MutableOption = { text?: JSX.Element | string; value?: string | undefined }; export type TErrorCodes = (typeof ERROR_CODES)[keyof typeof ERROR_CODES]; From 969e1bc272d5278dc600b671e6e291aa8514ed36 Mon Sep 17 00:00:00 2001 From: Nada Date: Tue, 25 Jun 2024 16:11:18 +0400 Subject: [PATCH 4/4] fix: append value to list if not already present for edit ad --- .../OrderTimeSelection/OrderTimeSelection.tsx | 24 ++++++++++++++++--- .../screens/CreateEditAd/CreateEditAd.tsx | 2 ++ 2 files changed, 23 insertions(+), 3 deletions(-) diff --git a/src/pages/my-ads/components/OrderTimeSelection/OrderTimeSelection.tsx b/src/pages/my-ads/components/OrderTimeSelection/OrderTimeSelection.tsx index a662f890..dcc035e3 100644 --- a/src/pages/my-ads/components/OrderTimeSelection/OrderTimeSelection.tsx +++ b/src/pages/my-ads/components/OrderTimeSelection/OrderTimeSelection.tsx @@ -4,7 +4,7 @@ import { TOrderExpiryOptions } from 'types'; import { OrderTimeTooltipModal } from '@/components/Modals'; import { TooltipMenuIcon } from '@/components/TooltipMenuIcon'; import { getOrderTimeInfoMessage } from '@/constants'; -import { getOrderTimeCompletionList } from '@/utils'; +import { formatTime, getOrderTimeCompletionList } from '@/utils'; import { LabelPairedChevronDownMdRegularIcon, LabelPairedCircleInfoCaptionRegularIcon } from '@deriv/quill-icons'; import { Localize, useTranslations } from '@deriv-com/translations'; import { Dropdown, Text, useDevice } from '@deriv-com/ui'; @@ -20,13 +20,30 @@ const OrderTimeSelection = ({ orderExpiryOptions }: { orderExpiryOptions: TOrder useEffect(() => { if ( orderExpiryOptions && - !orderExpiryOptions.find(option => option === Number(getValues('order-completion-time'))) + !orderExpiryOptions.find(option => option === Number(getValues('order-completion-time'))) && + getValues('form-type') !== 'edit' ) { setValue('order-completion-time', `${Math.max(...(orderExpiryOptions as number[]))}`); } // eslint-disable-next-line react-hooks/exhaustive-deps }, [orderExpiryOptions]); + const getOptions = () => { + const options = getOrderTimeCompletionList(localize, orderExpiryOptions); + if ( + getValues('form-type') === 'edit' && + !options.some(option => option.value === getValues('order-completion-time')) + ) + return [ + { + text: formatTime(Number(getValues('order-completion-time')), localize), + value: getValues('order-completion-time'), + }, + ...options, + ]; + return options; + }; + return (
@@ -56,9 +73,10 @@ const OrderTimeSelection = ({ orderExpiryOptions }: { orderExpiryOptions: TOrder } - list={getOrderTimeCompletionList(localize, orderExpiryOptions)} + list={getOptions()} name='order-completion-time' onSelect={onChange} + shouldClearValue value={value} variant='comboBox' /> diff --git a/src/pages/my-ads/screens/CreateEditAd/CreateEditAd.tsx b/src/pages/my-ads/screens/CreateEditAd/CreateEditAd.tsx index ff38ea1a..012fc863 100644 --- a/src/pages/my-ads/screens/CreateEditAd/CreateEditAd.tsx +++ b/src/pages/my-ads/screens/CreateEditAd/CreateEditAd.tsx @@ -27,6 +27,7 @@ type FormValues = { amount: string; 'contact-details': string; 'float-rate-offset-limit': string; + 'form-type': 'create' | 'edit'; instructions: string; 'max-order': string; 'min-completion-rate': string; @@ -188,6 +189,7 @@ 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);