diff --git a/src/components/FileUploaderComponent/FileUploaderComponent.tsx b/src/components/FileUploaderComponent/FileUploaderComponent.tsx index da415e4a..f8b3b5be 100644 --- a/src/components/FileUploaderComponent/FileUploaderComponent.tsx +++ b/src/components/FileUploaderComponent/FileUploaderComponent.tsx @@ -15,7 +15,7 @@ type TFileUploaderComponentProps = { onDropRejected: (fileRejections: FileRejection[], event: DropEvent) => void; uploadedMessage: string; validationErrorMessage: string | null; - value: (File & { file: Blob })[]; + value: File[]; }; const FileUploaderComponent = ({ diff --git a/src/components/Modals/OrderDetailsConfirmModal/OrderDetailsConfirmModal.tsx b/src/components/Modals/OrderDetailsConfirmModal/OrderDetailsConfirmModal.tsx index 814f4b5e..872e1ad8 100644 --- a/src/components/Modals/OrderDetailsConfirmModal/OrderDetailsConfirmModal.tsx +++ b/src/components/Modals/OrderDetailsConfirmModal/OrderDetailsConfirmModal.tsx @@ -1,4 +1,5 @@ import { useState } from 'react'; +import { FileRejection } from 'react-dropzone'; import { FileUploaderComponent } from '@/components/FileUploaderComponent'; import { getErrorMessage, maxPotFileSize, TFile } from '@/utils'; import { Button, InlineMessage, Modal, Text, useDevice } from '@deriv-com/ui'; @@ -11,7 +12,7 @@ type TOrderDetailsConfirmModalProps = { type TDocumentFile = { errorMessage: string | null; - files: TFile[]; + files: File[]; }; const OrderDetailsConfirmModal = ({ isModalOpen, onRequestClose }: TOrderDetailsConfirmModalProps) => { @@ -19,7 +20,7 @@ const OrderDetailsConfirmModal = ({ isModalOpen, onRequestClose }: TOrderDetails const { isMobile } = useDevice(); const buttonTextSize = isMobile ? 'md' : 'sm'; - const handleAcceptedFiles = (files: TFile[]) => { + const handleAcceptedFiles = (files: File[]) => { if (files.length > 0) { setDocumentFile({ errorMessage: null, files }); } @@ -29,8 +30,11 @@ const OrderDetailsConfirmModal = ({ isModalOpen, onRequestClose }: TOrderDetails setDocumentFile({ errorMessage: null, files: [] }); }; - const handleRejectedFiles = (files: TFile[]) => { - setDocumentFile({ errorMessage: getErrorMessage(files), files }); + const handleRejectedFiles = (files: FileRejection[]) => { + setDocumentFile({ + errorMessage: getErrorMessage(files as unknown as TFile[]), + files: files as unknown as TFile[], + }); }; // TODO: uncomment this when implementing the OrderDetailsConfirmModal diff --git a/src/components/PaymentMethodForm/PaymentMethodForm.tsx b/src/components/PaymentMethodForm/PaymentMethodForm.tsx index d02fcce7..eda7f0c9 100644 --- a/src/components/PaymentMethodForm/PaymentMethodForm.tsx +++ b/src/components/PaymentMethodForm/PaymentMethodForm.tsx @@ -1,6 +1,6 @@ import { useEffect, useMemo, useState } from 'react'; import { useForm } from 'react-hook-form'; -import { TFormState, TSelectedPaymentMethod } from 'types'; +import { TAdvertiserPaymentMethod, TFormState, TSelectedPaymentMethod } from 'types'; import { PageReturn, PaymentMethodField, PaymentMethodsFormFooter } from '@/components'; import { api } from '@/hooks'; import { useDevice } from '@deriv-com/ui'; @@ -77,7 +77,10 @@ const PaymentMethodForm = ({ onAdd, onResetFormState, ...rest }: TPaymentMethodF onSubmit={handleSubmit(data => { const hasData = Object.keys(data).length > 0; if (actionType === 'ADD' && hasData) { - create({ ...data, method: String(selectedPaymentMethod?.method) }); + create({ + ...data, + method: String((selectedPaymentMethod as TAdvertiserPaymentMethod)?.method), + }); } else if (actionType === 'EDIT' && hasData) { update(String(selectedPaymentMethod?.id), { ...data, @@ -97,7 +100,8 @@ const PaymentMethodForm = ({ onAdd, onResetFormState, ...rest }: TPaymentMethodF /> {Object.keys(selectedPaymentMethod?.fields || {})?.map(field => { - const paymentMethodField = selectedPaymentMethod?.fields?.[field]; + const paymentMethodField = + (selectedPaymentMethod?.fields as TAdvertiserPaymentMethod['fields'])?.[field] ?? {}; return ( { @@ -55,7 +56,8 @@ const Verification = () => { { isDisabled: isPoiPending, onClick: () => { - if (!isPoiVerified) redirectToVerification('/account/proof-of-identity'); + if (!isPoiVerified) + redirectToVerification(`${URLConstants.derivAppProduction}/account/proof-of-identity`); }, status: isPoiVerified ? 'done' : 'action', testId: 'dt_verification_poi_arrow_button', @@ -66,7 +68,8 @@ const Verification = () => { { isDisabled: isPoaPending, onClick: () => { - if (!isPoaVerified) redirectToVerification('/account/proof-of-address'); + if (!isPoaVerified) + redirectToVerification(`${URLConstants.derivAppProduction}/account/proof-of-address`); }, status: isPoaVerified ? 'done' : 'action', testId: 'dt_verification_poa_arrow_button', diff --git a/src/components/Wizard/Wizard.tsx b/src/components/Wizard/Wizard.tsx index 60ff2409..e421ff02 100644 --- a/src/components/Wizard/Wizard.tsx +++ b/src/components/Wizard/Wizard.tsx @@ -14,22 +14,23 @@ import clsx from 'clsx'; import Step from './WizardStep'; import './Wizard.scss'; -type TWizard = { +type TWizard = { className?: string; initialStep: number; nav: ReactNode; onStepChange?: (prop: { [key: string]: number }) => void; selectedStepRef?: () => MutableRefObject; + children: T[]; }; -const Wizard = ({ +const Wizard = ({ children = [], className, initialStep = 0, nav = null, onStepChange, selectedStepRef, -}: PropsWithChildren) => { +}: PropsWithChildren>) => { const [activeStep, setActiveStep] = useState(0); const getSteps = useCallback(() => Children.toArray(children), [children]); diff --git a/src/hooks/api/advertiser/p2p-advertiser/useAdvertiserList.ts b/src/hooks/api/advertiser/p2p-advertiser/useAdvertiserList.ts index cfbca857..757d7881 100644 --- a/src/hooks/api/advertiser/p2p-advertiser/useAdvertiserList.ts +++ b/src/hooks/api/advertiser/p2p-advertiser/useAdvertiserList.ts @@ -1,18 +1,13 @@ import { useMemo } from 'react'; import { useP2pAdvertiserList } from '@deriv-com/api-hooks'; -type THookPayload = Parameters[number]; +type THookPayload = NonNullable[number]>['payload']; -//TODO: fix the types when updated from api-hooks -type ExtendedPayload = THookPayload & { - is_blocked?: number; - advertiser_name?: string; - trade_partners: number; -}; /** - * This custom hook returns the available advertisers who have had or currently have trades with the current advertiser. + * This custom hook returns + * the available advertisers who have had or currently have trades with the current advertiser. */ -const useAdvertiserList = (payload?: ExtendedPayload) => { +const useAdvertiserList = (payload?: THookPayload) => { if (!payload?.is_blocked) { delete payload?.is_blocked; } diff --git a/src/hooks/api/payment-method/p2p-advertiser-payment-methods/useAdvertiserPaymentMethods.ts b/src/hooks/api/payment-method/p2p-advertiser-payment-methods/useAdvertiserPaymentMethods.ts index 4665636a..d4b5dca7 100644 --- a/src/hooks/api/payment-method/p2p-advertiser-payment-methods/useAdvertiserPaymentMethods.ts +++ b/src/hooks/api/payment-method/p2p-advertiser-payment-methods/useAdvertiserPaymentMethods.ts @@ -2,9 +2,11 @@ import { useMemo } from 'react'; import { useP2PAdvertiserPaymentMethods } from '@deriv-com/api-hooks'; /** A custom hook that returns the list of P2P Advertiser Payment Methods */ -const useAdvertiserPaymentMethods = (is_enabled = true) => { +// eslint-disable-next-line @typescript-eslint/no-unused-vars +const useAdvertiserPaymentMethods = (_is_enabled = true) => { const { data, ...rest } = useP2PAdvertiserPaymentMethods({ - enabled: is_enabled, + //TODO: Add the enabled parameter to the API after api-hooks is updated + // enabled: is_enabled, }); // Modify the response to add additional information diff --git a/src/pages/my-ads/components/AdConditionsSection/AdConditionsSection.tsx b/src/pages/my-ads/components/AdConditionsSection/AdConditionsSection.tsx index 6880cd0b..7a1160cd 100644 --- a/src/pages/my-ads/components/AdConditionsSection/AdConditionsSection.tsx +++ b/src/pages/my-ads/components/AdConditionsSection/AdConditionsSection.tsx @@ -14,7 +14,7 @@ type TAdConditionsSection = { getCurrentStep: () => number; getTotalSteps: () => number; goToNextStep: MouseEventHandler; - goToPreviousStep: MouseEventHandler; + goToPreviousStep: () => void; localCurrency?: TCurrency; rateType: string; }; diff --git a/src/pages/my-ads/components/AdWizard/AdWizard.tsx b/src/pages/my-ads/components/AdWizard/AdWizard.tsx index 353d881c..9d4cbb37 100644 --- a/src/pages/my-ads/components/AdWizard/AdWizard.tsx +++ b/src/pages/my-ads/components/AdWizard/AdWizard.tsx @@ -21,6 +21,12 @@ type TAdWizardNav = { const AdWizard = ({ countryList, onCancel, steps, ...rest }: TAdWizardNav) => { const { isDesktop } = useDevice(); const [currentStep, setCurrentStep] = useState(0); + const wizardProps = { + getCurrentStep: () => currentStep + 1, + getTotalSteps: () => steps.length, + goToNextStep: () => setCurrentStep(currentStep + 1), + goToPreviousStep: () => setCurrentStep(currentStep - 1), + }; return ( { } onStepChange={step => setCurrentStep(step.activeStep - 1)} > - - - + + + ); }; diff --git a/src/pages/my-ads/components/BuyPaymentMethodsList/BuyPaymentMethodsList.tsx b/src/pages/my-ads/components/BuyPaymentMethodsList/BuyPaymentMethodsList.tsx index e2ba94c7..20741a7c 100644 --- a/src/pages/my-ads/components/BuyPaymentMethodsList/BuyPaymentMethodsList.tsx +++ b/src/pages/my-ads/components/BuyPaymentMethodsList/BuyPaymentMethodsList.tsx @@ -12,13 +12,15 @@ const BuyPaymentMethodsList = ({ list, onSelectPaymentMethod }: TBuyPaymentMetho return (
} className='buy-payment-methods-list__dropdown' icon={} isFullWidth list={list} name='payment-method-list' onSelect={value => onSelectPaymentMethod(value as string)} - placeholder='Add' + //TODO: add the placeholder once fixed from deriv-com/ui + // placeholder='Add' value='' variant='prompt' /> diff --git a/src/pages/my-ads/screens/CreateEditAd/CreateEditAd.tsx b/src/pages/my-ads/screens/CreateEditAd/CreateEditAd.tsx index a53e234a..7e3cb8a8 100644 --- a/src/pages/my-ads/screens/CreateEditAd/CreateEditAd.tsx +++ b/src/pages/my-ads/screens/CreateEditAd/CreateEditAd.tsx @@ -98,11 +98,11 @@ const CreateEditAd = () => { max_order_amount: number; min_order_amount: number; rate: number; - rate_type: string; + rate_type: typeof rateType; type?: 'buy' | 'sell'; - payment_method_names?: number[] | string[]; + payment_method_names?: TMutatePayload['payment_method_names']; contact_info?: string; - payment_method_ids?: number[] | string[]; + payment_method_ids?: TMutatePayload['payment_method_ids']; description?: string; min_completion_rate?: number; min_join_days?: number; @@ -118,10 +118,10 @@ const CreateEditAd = () => { }; if (getValues('ad-type') === 'buy') { - payload.payment_method_names = getValues('payment-method'); + payload.payment_method_names = getValues('payment-method') as TMutatePayload['payment_method_names']; } else { payload.contact_info = getValues('contact-details'); - payload.payment_method_ids = getValues('payment-method'); + payload.payment_method_ids = getValues('payment-method') as TMutatePayload['payment_method_ids']; } if (getValues('instructions')) { payload.description = getValues('instructions'); @@ -136,7 +136,7 @@ const CreateEditAd = () => { if (isEdit) { delete payload.amount; delete payload.type; - updateMutate({ id: advertId, ...payload } as TMutatePayload); + updateMutate({ id: advertId, ...payload }); return; } mutate(payload as TMutatePayload); @@ -185,7 +185,7 @@ const CreateEditAd = () => { const paymentMethodNames = advertInfo?.payment_method_names; const paymentMethodKeys = paymentMethodNames?.map( - name => paymentMethodList.find(method => method.display_name === name)?.id + name => paymentMethodList.find(method => method.display_name === name)?.id ?? '' ) ?? []; setValue('payment-method', paymentMethodKeys); } diff --git a/src/pages/my-ads/screens/MyAds/MyAdsTableRow/MyAdsTableRow.tsx b/src/pages/my-ads/screens/MyAds/MyAdsTableRow/MyAdsTableRow.tsx index 0cef1ae2..417eb6b2 100644 --- a/src/pages/my-ads/screens/MyAds/MyAdsTableRow/MyAdsTableRow.tsx +++ b/src/pages/my-ads/screens/MyAds/MyAdsTableRow/MyAdsTableRow.tsx @@ -1,6 +1,6 @@ import { memo, useEffect, useRef, useState } from 'react'; import clsx from 'clsx'; -import { NonUndefinedValues, TCurrency, TExchangeRate } from 'types'; +import { TCurrency, TExchangeRate } from 'types'; import { PaymentMethodLabel, PopoverDropdown } from '@/components'; import { AD_ACTION, ADVERT_TYPE, RATE_TYPE } from '@/constants'; import { useFloatingRate } from '@/hooks/custom-hooks'; @@ -31,7 +31,7 @@ type TProps = { type TMyAdsTableProps = Omit & TProps; -const MyAdsTableRow = ({ currentRateType, showModal, ...rest }: NonUndefinedValues) => { +const MyAdsTableRow = ({ currentRateType, showModal, ...rest }: TMyAdsTableProps) => { const { isMobile } = useDevice(); const { subscribeRates } = useExchangeRates(); diff --git a/src/utils/file-dropzone.ts b/src/utils/file-dropzone.ts index d33613e2..8e312eaa 100644 --- a/src/utils/file-dropzone.ts +++ b/src/utils/file-dropzone.ts @@ -10,5 +10,5 @@ export type TFileDropzone = DropzoneOptions & { message?: ReactNode | ((open?: () => void) => ReactNode); previewSingle?: ReactElement; validationErrorMessage?: ReactNode | ((open?: () => void) => ReactNode); - value: (File & { file: Blob })[]; + value: File[]; }; diff --git a/src/utils/file-uploader.ts b/src/utils/file-uploader.ts index 1aec9161..f0dd5899 100644 --- a/src/utils/file-uploader.ts +++ b/src/utils/file-uploader.ts @@ -63,7 +63,7 @@ export const getErrorMessage = (files: TFile[]): string => * @param {number} limit * @returns {string} truncated file name */ -export const truncateFileName = (file: TFile, limit: number): string => { +export const truncateFileName = (file: File, limit: number): string => { const stringLimitRegex = new RegExp(`(.{${limit || 30}})..+`); return file?.name?.replace(stringLimitRegex, `$1….${getFileExtension(file)}`); }; @@ -73,7 +73,7 @@ export const truncateFileName = (file: TFile, limit: number): string => { * @param {TFile} file * @returns {string | null} file extension or null if not found */ -const getFileExtension = (file: TFile): string | null => { +const getFileExtension = (file: File): string | null => { const f = file?.type?.match(/[^/]+$/u); return f ? f[0] : null; };