Skip to content

Commit

Permalink
chore: updated with latest master
Browse files Browse the repository at this point in the history
  • Loading branch information
nada-deriv committed May 14, 2024
2 parents edc379f + 7f0f67a commit c81ca55
Show file tree
Hide file tree
Showing 28 changed files with 232 additions and 119 deletions.
2 changes: 2 additions & 0 deletions .github/workflows/sync-translations.yml
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@ on:
push:
branches:
- 'master'
schedule:
- cron: '0 */12 * * *'

jobs:
sync_translations:
Expand Down
8 changes: 4 additions & 4 deletions __mocks__/LocalizeMock.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react';
const Localize = ({ i18n_default_text }) => {
return i18n_default_text || null;
};

const Localize = () => <div>Mock Localize</div>;

export default Localize;
export { Localize };
3 changes: 2 additions & 1 deletion jest.config.cjs
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
module.exports = {
moduleNameMapper: {
'@deriv-com/(.*)': '<rootDir>/node_modules/@deriv-com/$1',
'@deriv-com/translations': '<rootDir>/__mocks__/LocalizeMock.js',
// eslint-disable-next-line sort-keys
'@deriv-com/(.*)': '<rootDir>/node_modules/@deriv-com/$1',
'\\.(css|less|sass|scss)$': 'identity-obj-proxy',
'\\.svg': '<rootDir>/__mocks__/svgMock.js',
'^@/(.*)$': '<rootDir>/src/$1',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -22,16 +22,15 @@ describe('AdvertiserNameStats', () => {
expect(screen.getByText('(29 ratings)')).toBeInTheDocument();
});

// TODO: uncomment this once Localize has been fixed for test cases
// it('should render correct advertiser stats based on availability', () => {
// const mockUseAdvertiserStats = {
// advertiserStats: {
// blocked_by_count: 1,
// daysSinceJoined: 22,
// rating_count: 29,
// },
// };
// render(<AdvertiserNameStats {...mockUseAdvertiserStats} />);
// expect(screen.getByText('Not rated yet')).toBeInTheDocument();
// });
it('should render correct advertiser stats based on availability', () => {
const mockUseAdvertiserStats = {
advertiserStats: {
blocked_by_count: 1,
daysSinceJoined: 22,
rating_count: 29,
},
};
render(<AdvertiserNameStats {...mockUseAdvertiserStats} />);
expect(screen.getByText('Not rated yet')).toBeInTheDocument();
});
});
3 changes: 2 additions & 1 deletion src/components/AdvertsTableRow/AdvertsTableRow.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import { useIsAdvertiser, useIsAdvertiserBarred, useModalManager } from '@/hooks
import { generateEffectiveRate, getCurrentRoute } from '@/utils';
import { LabelPairedChevronRightMdRegularIcon } from '@deriv/quill-icons';
import { useExchangeRates } from '@deriv-com/api-hooks';
import { Localize } from '@deriv-com/translations';
import { Button, Text, useDevice } from '@deriv-com/ui';
import './AdvertsTableRow.scss';

Expand Down Expand Up @@ -125,7 +126,7 @@ const AdvertsTableRow = memo((props: TAdvertsTableRowRenderer) => {
</>
) : (
<Text color='less-prominent' size='xs'>
Not rated yet
<Localize i18n_default_text='Not rated yet' />
</Text>
)}
</div>
Expand Down
5 changes: 4 additions & 1 deletion src/components/BuySellForm/BuySellAmount/BuySellAmount.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ type TBuySellAmountProps = {
maxLimit: string;
minLimit: string;
paymentMethodNames?: string[];
setValue: ReturnType<typeof useForm>['setValue'];
};
const BuySellAmount = ({
accountCurrency,
Expand All @@ -31,6 +32,7 @@ const BuySellAmount = ({
maxLimit,
minLimit,
paymentMethodNames,
setValue,
}: TBuySellAmountProps) => {
const { isMobile } = useDevice();
const labelSize = isMobile ? 'sm' : 'xs';
Expand All @@ -49,7 +51,8 @@ const BuySellAmount = ({
// causing the amount to be 0
useEffect(() => {
setInputValue(minLimit);
}, [minLimit]);
setValue('amount', minLimit);
}, [minLimit, setValue]);

return (
<div className='flex flex-col gap-[2rem] py-[1.6rem]'>
Expand Down
2 changes: 2 additions & 0 deletions src/components/BuySellForm/BuySellForm.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -141,6 +141,7 @@ const BuySellForm = ({ advertId, isModalOpen, onRequestClose }: TBuySellFormProp
formState: { isValid },
getValues,
handleSubmit,
setValue,
} = useForm({
defaultValues: {
amount: min_order_amount_limit ?? 1,
Expand Down Expand Up @@ -254,6 +255,7 @@ const BuySellForm = ({ advertId, isModalOpen, onRequestClose }: TBuySellFormProp
)}
minLimit={min_order_amount_limit_display ?? '0'}
paymentMethodNames={payment_method_names}
setValue={setValue as unknown as (name: string, value: string) => void}
/>
</BuySellFormDisplayWrapper>
</form>
Expand Down
1 change: 1 addition & 0 deletions src/components/BuySellForm/__tests__/BuySellForm.spec.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -153,6 +153,7 @@ jest.mock('react-hook-form', () => ({
amount: 1,
})),
handleSubmit: mockHandleSubmit,
setValue: jest.fn(),
}),
}));

Expand Down
8 changes: 6 additions & 2 deletions src/components/FileDropzone/FileDropzone.scss
Original file line number Diff line number Diff line change
@@ -1,11 +1,15 @@
@mixin file-dropzone-message {
display: block;
display: flex;
flex-direction: column;
align-items: center;
max-width: 16.8rem;
opacity: 1;
pointer-events: none;
position: absolute;
transform: translate3d(0, 0, 0);
transition: transform 0.25s ease, opacity 0.15s linear;
transition:
transform 0.25s ease,
opacity 0.15s linear;

@include mobile {
max-width: 26rem;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,20 +12,15 @@ type TAdCreateEditErrorModalProps = {

type ErrorContent = {
[key in TErrorCodes]?: {
description: string;
title: string;
};
};

const errorContent: ErrorContent = {
[ERROR_CODES.ADVERT_SAME_LIMITS]: {
description:
'Please set a different minimum and/or maximum order limit. \n\nThe range of your ad should not overlap with any of your active ads.',
title: 'You already have an ad with this range',
},
[ERROR_CODES.DUPLICATE_ADVERT]: {
description:
'You already have an ad with the same exchange rate for this currency pair and order type. \n\nPlease set a different rate for your ad.',
title: 'You already have an ad with this rate',
},
};
Expand All @@ -49,7 +44,7 @@ const AdCreateEditErrorModal = ({
<Text weight='bold'>{(errorCode && errorContent?.[errorCode]?.title) ?? 'Something’s not right'}</Text>
</Modal.Header>
<Modal.Body className='ad-create-edit-error-modal__body'>
<Text size={textSize}>{(errorCode && errorContent?.[errorCode]?.description) ?? errorMessage}</Text>
<Text size={textSize}>{errorMessage}</Text>
</Modal.Body>
<Modal.Footer className='ad-create-edit-error-modal__footer' hideBorder>
<Button onClick={onRequestClose} size='lg' textSize={textSize}>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,22 +1,35 @@
import { useState } from 'react';
import { FileRejection } from 'react-dropzone';
import { FileUploaderComponent } from '@/components/FileUploaderComponent';
import { useOrderDetails } from '@/providers/OrderDetailsProvider';
import { getErrorMessage, maxPotFileSize, TFile } from '@/utils';
import { Button, InlineMessage, Modal, Text, useDevice } from '@deriv-com/ui';
import './OrderDetailsConfirmModal.scss';

type TOrderDetailsConfirmModalProps = {
isModalOpen: boolean;
onCancel: () => void;
onConfirm: () => void;
onRequestClose: () => void;
sendFile: (file: File) => void;
};

type TDocumentFile = {
errorMessage: string | null;
files: File[];
};

const OrderDetailsConfirmModal = ({ isModalOpen, onRequestClose }: TOrderDetailsConfirmModalProps) => {
const OrderDetailsConfirmModal = ({
isModalOpen,
onCancel,
onConfirm,
onRequestClose,
sendFile,
}: TOrderDetailsConfirmModalProps) => {
const [documentFile, setDocumentFile] = useState<TDocumentFile>({ errorMessage: null, files: [] });
const { orderDetails } = useOrderDetails();
const { displayPaymentAmount, local_currency: localCurrency, otherUserDetails } = orderDetails ?? {};
const { name } = otherUserDetails ?? {};
const { isMobile } = useDevice();
const buttonTextSize = isMobile ? 'md' : 'sm';

Expand All @@ -37,11 +50,6 @@ const OrderDetailsConfirmModal = ({ isModalOpen, onRequestClose }: TOrderDetails
});
};

// TODO: uncomment this when implementing the OrderDetailsConfirmModal
// const displayPaymentAmount = removeTrailingZeros(
// formatMoney(local_currency, amount_display * Number(roundOffDecimal(rate, setDecimalPlaces(rate, 6))), true)
// );

return (
<Modal
ariaHideApp={false}
Expand All @@ -59,8 +67,8 @@ const OrderDetailsConfirmModal = ({ isModalOpen, onRequestClose }: TOrderDetails
</Modal.Header>
<Modal.Body className='flex flex-col lg:px-[2.4rem] px-[1.6rem]'>
<Text size='sm'>
Please make sure that you’ve paid 9.99 IDR to client CR90000012, and upload the receipt as proof of
your payment
{`Please make sure that you’ve paid ${displayPaymentAmount} ${localCurrency} to client ${name}, and upload the receipt as proof of
your payment`}
</Text>
<Text className='pt-[0.8rem] pb-[2.4rem]' color='less-prominent' size='sm'>
We accept JPG, PDF, or PNG (up to 5MB).
Expand All @@ -72,8 +80,10 @@ const OrderDetailsConfirmModal = ({ isModalOpen, onRequestClose }: TOrderDetails
</InlineMessage>
<FileUploaderComponent
accept={{
'application/*': ['.pdf'],
'image/*': ['.jpg', '.jpeg', './png'],
'application/pdf': ['.pdf'],
'image/jpeg': ['.jpeg'],
'image/jpg': ['.jpg'],
'image/png': ['.png'],
}}
hoverMessage='Upload receipt here'
maxSize={maxPotFileSize}
Expand All @@ -86,12 +96,18 @@ const OrderDetailsConfirmModal = ({ isModalOpen, onRequestClose }: TOrderDetails
/>
</Modal.Body>
<Modal.Footer className='gap-4 border-none lg:p-[2.4rem] p-[1.6rem]'>
<Button className='border-2' color='black' size='lg' variant='outlined'>
<Button className='border-2' color='black' onClick={onCancel} size='lg' variant='outlined'>
<Text lineHeight='6xl' size={buttonTextSize} weight='bold'>
Go Back
</Text>
</Button>
<Button size='lg'>
<Button
onClick={() => {
sendFile(documentFile.files[0]);
onConfirm();
}}
size='lg'
>
<Text lineHeight='6xl' size={buttonTextSize} weight='bold'>
Confirm
</Text>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
import { fireEvent, render, screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import OrderDetailsConfirmModal from '../OrderDetailsConfirmModal';

Expand All @@ -9,9 +9,22 @@ jest.mock('@deriv-com/ui', () => ({
}),
}));

jest.mock('@/providers/OrderDetailsProvider', () => ({
useOrderDetails: jest.fn().mockReturnValue({
orderDetails: {
displayPaymentAmount: '0.10',
local_currency: 'INR',
otherUserDetails: { name: 'John Doe' },
},
}),
}));

const mockProps = {
isModalOpen: true,
onCancel: jest.fn(),
onConfirm: jest.fn(),
onRequestClose: jest.fn(),
sendFile: jest.fn(),
};

describe('<OrderDetailsConfirmModal />', () => {
Expand All @@ -21,7 +34,7 @@ describe('<OrderDetailsConfirmModal />', () => {
expect(screen.getByText('Payment confirmation')).toBeInTheDocument();
expect(
screen.getByText(
/Please make sure that you’ve paid 9.99 IDR to client CR90000012, and upload the receipt as proof of your payment/
/Please make sure that you’ve paid 0.10 INR to client John Doe, and upload the receipt as proof of your payment/
)
).toBeInTheDocument();
expect(screen.getByText('We accept JPG, PDF, or PNG (up to 5MB).')).toBeInTheDocument();
Expand Down Expand Up @@ -67,10 +80,7 @@ describe('<OrderDetailsConfirmModal />', () => {
value: fileList,
});

// eslint-disable-next-line testing-library/no-unnecessary-act
await act(async () => {
fireEvent.change(fileInput);
});
fireEvent.change(fileInput);

await waitFor(() => {
expect(screen.getByText('The file you uploaded is not supported. Upload another.')).toBeInTheDocument();
Expand All @@ -82,22 +92,7 @@ describe('<OrderDetailsConfirmModal />', () => {

const blob = new Blob([new Array(6 * 1024 * 1024).join('a')], { type: 'image/png' });
const file = new File([blob], 'test.png');
const fileInput = screen.getByTestId('dt_file_upload_input');

const fileList = {
0: file,
item: () => file,
length: 1,
};

Object.defineProperty(fileInput, 'files', {
value: fileList,
});

// eslint-disable-next-line testing-library/no-unnecessary-act
await act(async () => {
fireEvent.change(fileInput);
});
await userEvent.upload(screen.getByTestId('dt_file_upload_input'), file);

expect(screen.getByText('Cannot upload a file over 5MB')).toBeInTheDocument();
});
Expand All @@ -108,19 +103,10 @@ describe('<OrderDetailsConfirmModal />', () => {
const file = new File(['test'], 'test.png', { type: 'image/png' });
const fileInput = screen.getByTestId('dt_file_upload_input');

const fileList = {
0: file,
item: () => file,
length: 1,
};

Object.defineProperty(fileInput, 'files', {
value: fileList,
});
await userEvent.upload(fileInput, file);

// eslint-disable-next-line testing-library/no-unnecessary-act
await act(async () => {
fireEvent.change(fileInput);
await waitFor(() => {
expect(screen.getByText('test.png')).toBeInTheDocument();
});

const closeIcon = screen.getByTestId('dt_remove_file_icon');
Expand All @@ -131,4 +117,22 @@ describe('<OrderDetailsConfirmModal />', () => {
expect(screen.queryByText('test.png')).not.toBeInTheDocument();
});
});

it('should handle confirm button click', async () => {
render(<OrderDetailsConfirmModal {...mockProps} />);

const button = screen.getByRole('button', { name: 'Confirm' });
await userEvent.click(button);

expect(mockProps.onConfirm).toHaveBeenCalled();
});

it('should handle goback click', async () => {
render(<OrderDetailsConfirmModal {...mockProps} />);

const button = screen.getByRole('button', { name: 'Go Back' });
await userEvent.click(button);

expect(mockProps.onCancel).toHaveBeenCalled();
});
});
4 changes: 4 additions & 0 deletions src/constants/api-error-codes.ts
Original file line number Diff line number Diff line change
Expand Up @@ -10,4 +10,8 @@ export const ERROR_CODES = {
ADVERTISER_NOT_FOUND: 'AdvertiserNotFound',
ADVERTISER_TEMP_BAN: 'advertiser_temp_ban',
DUPLICATE_ADVERT: 'DuplicateAdvert',
EXCESSIVE_VERIFICATION_FAILURES: 'ExcessiveVerificationFailures',
EXCESSIVE_VERIFICATION_REQUESTS: 'ExcessiveVerificationRequests',
INVALID_VERIFICATION_TOKEN: 'InvalidVerificationToken',
ORDER_EMAIL_VERIFICATION_REQUIRED: 'OrderEmailVerificationRequired',
} as const;
Loading

0 comments on commit c81ca55

Please sign in to comment.