fix: build fixes

deriv-com · Apr 29, 2024 · 26669bf · 26669bf
1 parent 955f2ce
commit 26669bf
Show file tree

Hide file tree

Showing 14 changed files with 58 additions and 41 deletions.
diff --git 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
@@ -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,15 +12,15 @@ type TOrderDetailsConfirmModalProps = {
 
 type TDocumentFile = {
     errorMessage: string | null;
-    files: TFile[];
+    files: File[];
 };
 
 const OrderDetailsConfirmModal = ({ isModalOpen, onRequestClose }: TOrderDetailsConfirmModalProps) => {
     const [documentFile, setDocumentFile] = useState<TDocumentFile>({ errorMessage: null, files: [] });
     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
@@ -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
                         />
                     </div>
                     {Object.keys(selectedPaymentMethod?.fields || {})?.map(field => {
-                        const paymentMethodField = selectedPaymentMethod?.fields?.[field];
+                        const paymentMethodField =
+                            (selectedPaymentMethod?.fields as TAdvertiserPaymentMethod['fields'])?.[field] ?? {};
                         return (
                             <PaymentMethodField
                                 control={control}

diff --git a/src/components/Verification/Verification.tsx b/src/components/Verification/Verification.tsx
@@ -3,6 +3,7 @@ import { Checklist } from '@/components';
 import { useDevice, usePoiPoaStatus } from '@/hooks/custom-hooks';
 import { DerivLightIcCashierSendEmailIcon } from '@deriv/quill-icons';
 import { Loader, Text } from '@deriv-com/ui';
+import { URLConstants } from '@deriv-com/utils';
 import './Verification.scss';
 
 const getPoiAction = (status: string | undefined) => {
@@ -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
@@ -14,22 +14,23 @@ import clsx from 'clsx';
 import Step from './WizardStep';
 import './Wizard.scss';
 
-type TWizard = {
+type TWizard<T extends ReactNode> = {
     className?: string;
     initialStep: number;
     nav: ReactNode;
     onStepChange?: (prop: { [key: string]: number }) => void;
     selectedStepRef?: () => MutableRefObject<HTMLElement>;
+    children: T[];
 };
 
-const Wizard = ({
+const Wizard = <T extends ReactNode>({
     children = [],
     className,
     initialStep = 0,
     nav = null,
     onStepChange,
     selectedStepRef,
-}: PropsWithChildren<TWizard>) => {
+}: PropsWithChildren<TWizard<T>>) => {
     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
@@ -1,18 +1,13 @@
 import { useMemo } from 'react';
 import { useP2pAdvertiserList } from '@deriv-com/api-hooks';
 
-type THookPayload = Parameters<typeof useP2pAdvertiserList>[number];
+type THookPayload = NonNullable<Parameters<typeof useP2pAdvertiserList>[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
@@ -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
@@ -14,7 +14,7 @@ type TAdConditionsSection = {
     getCurrentStep: () => number;
     getTotalSteps: () => number;
     goToNextStep: MouseEventHandler<HTMLButtonElement>;
-    goToPreviousStep: MouseEventHandler<HTMLButtonElement>;
+    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
@@ -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 (
         <Wizard
@@ -58,9 +64,9 @@ const AdWizard = ({ countryList, onCancel, steps, ...rest }: TAdWizardNav) => {
             }
             onStepChange={step => setCurrentStep(step.activeStep - 1)}
         >
-            <AdTypeSection onCancel={onCancel} {...rest} />
-            <AdPaymentDetailsSection {...rest} />
-            <AdConditionsSection countryList={countryList} {...rest} />
+            <AdTypeSection onCancel={onCancel} {...wizardProps} {...rest} />
+            <AdPaymentDetailsSection {...wizardProps} {...rest} />
+            <AdConditionsSection {...wizardProps} countryList={countryList} {...rest} />
         </Wizard>
     );
 };

diff --git 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 (
         <div className='buy-payment-methods-list'>
             <Dropdown
+                dropdownIcon={<div />}
                 className='buy-payment-methods-list__dropdown'
                 icon={<LabelPairedCirclePlusCaptionRegularIcon />}
                 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
@@ -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
@@ -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<TMyAdsTableRowRendererProps, 'balanceAvailable' | 'dailyBuyLimit' | 'dailySellLimit'> &
     TProps;
 
-const MyAdsTableRow = ({ currentRateType, showModal, ...rest }: NonUndefinedValues<TMyAdsTableProps>) => {
+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
@@ -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
@@ -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;
 };