Skip to content

Commit

Permalink
fix: conflict
Browse files Browse the repository at this point in the history
  • Loading branch information
nada-deriv committed Aug 5, 2024
2 parents c192912 + 5d1cdbc commit 7cb05d2
Show file tree
Hide file tree
Showing 24 changed files with 213 additions and 146 deletions.
7 changes: 4 additions & 3 deletions __mocks__/LocalizeMock.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
const Localize = ({ i18n_default_text, values }) => {
const Localize = ({ i18n_default_text: i18Text, values }) => {
// Replace placeholders in the default text with actual values
const localizedText = i18n_default_text.replace(/\{\{(\w+)\}\}/g, (match, key) => values[key] || match);
const localizedText = i18Text.replace(/\{\{(\w+)\}\}/g, (match, key) => values[key] || match);

return localizedText || null;
};
Expand All @@ -15,5 +15,6 @@ const useTranslations = () => ({
});

const localize = mockFn;
const getAllowedLanguages = jest.fn(() => ({ EN: 'English' }));

export { Localize, localize, useTranslations };
export { getAllowedLanguages, Localize, localize, useTranslations };
8 changes: 4 additions & 4 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
"@chakra-ui/react": "^2.8.2",
"@deriv-com/analytics": "^1.10.1",
"@deriv-com/api-hooks": "^1.4.9",
"@deriv-com/translations": "^1.2.4",
"@deriv-com/translations": "^1.3.5",
"@deriv-com/ui": "^1.29.0",
"@deriv-com/utils": "^0.0.28",
"@deriv/quill-icons": "^1.23.8",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import userEvent from '@testing-library/user-event';
import LanguageSettings from '../LanguageSettings';

jest.mock('@deriv-com/translations', () => ({
getAllowedLanguages: jest.fn(() => ({ EN: 'English' })),
useTranslations: jest.fn(),
}));

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ jest.mock('@deriv-com/ui', () => ({
}));

jest.mock('@deriv-com/translations', () => ({
getAllowedLanguages: jest.fn(() => ({ EN: 'English' })),
useTranslations: jest.fn(),
}));

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ jest.mock('@deriv-com/api-hooks', () => ({
}));

jest.mock('@deriv-com/translations', () => ({
getAllowedLanguages: jest.fn(() => ({ EN: 'English' })),
useTranslations: jest.fn().mockReturnValue({
currentLang: 'EN',
localize: jest.fn(text => text),
Expand Down
15 changes: 14 additions & 1 deletion src/components/CopyAdForm/CopyAdForm.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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}>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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 } = {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
138 changes: 52 additions & 86 deletions src/constants/languages.tsx
Original file line number Diff line number Diff line change
@@ -1,102 +1,68 @@
import { ComponentType, SVGProps } from 'react';
import {
FlagArabLeagueIcon,
FlagBangladeshIcon,
FlagCambodiaIcon,
FlagChinaSimplifiedIcon,
FlagChinaTraditionalIcon,
FlagFranceIcon,
FlagGermanyIcon,
FlagIndonesiaIcon,
FlagItalyIcon,
FlagMongoliaIcon,
FlagPolandIcon,
FlagPortugalIcon,
FlagRussiaIcon,
FlagSouthKoreaIcon,
FlagSpainIcon,
FlagSriLankaIcon,
FlagTanzaniaIcon,
FlagThailandIcon,
FlagTurkeyIcon,
FlagUnitedKingdomIcon,
FlagVietnamIcon,
} from '@deriv/quill-icons';
import { getAllowedLanguages } from '@deriv-com/translations';

export const LANGUAGES = [
{
code: 'EN',
displayName: 'English',
icon: <FlagUnitedKingdomIcon height={24} width={36} />,
placeholderIcon: <FlagUnitedKingdomIcon height={12} width={18} />,
placeholderIconInMobile: <FlagUnitedKingdomIcon height={14.67} width={22} />,
},
{
code: 'AR',
displayName: 'العربية',
icon: <FlagArabLeagueIcon height={24} width={36} />,
placeholderIcon: <FlagArabLeagueIcon height={12} width={18} />,
placeholderIconInMobile: <FlagArabLeagueIcon height={14.67} width={22} />,
},
{
code: 'ES',
displayName: 'Español',
icon: <FlagSpainIcon height={24} width={36} />,
placeholderIcon: <FlagSpainIcon height={12} width={18} />,
placeholderIconInMobile: <FlagSpainIcon height={14.67} width={22} />,
},
type TFlagComponent = {
[key: string]: ComponentType<SVGProps<SVGSVGElement>>;
};

{
code: 'DE',
displayName: 'Deutsch',
icon: <FlagGermanyIcon height={24} width={36} />,
placeholderIcon: <FlagGermanyIcon height={12} width={18} />,
placeholderIconInMobile: <FlagGermanyIcon height={14.67} width={22} />,
},
{
code: 'PT',
displayName: 'Português',
icon: <FlagPortugalIcon height={24} width={36} />,
placeholderIcon: <FlagPortugalIcon height={12} width={18} />,
placeholderIconInMobile: <FlagPortugalIcon height={14.67} width={22} />,
},
{
code: 'PL',
displayName: 'Polish',
icon: <FlagPolandIcon height={24} width={36} />,
placeholderIcon: <FlagPolandIcon height={12} width={18} />,
placeholderIconInMobile: <FlagPolandIcon height={14.67} width={22} />,
},
{
code: 'RU',
displayName: 'Русский',
icon: <FlagRussiaIcon height={24} width={36} />,
placeholderIcon: <FlagRussiaIcon height={12} width={18} />,
placeholderIconInMobile: <FlagRussiaIcon height={14.67} width={22} />,
},
{
code: 'FR',
displayName: 'Français',
icon: <FlagFranceIcon height={24} width={36} />,
placeholderIcon: <FlagFranceIcon height={12} width={18} />,
placeholderIconInMobile: <FlagFranceIcon height={14.67} width={22} />,
},
{
code: 'IT',
displayName: 'Italiano',
icon: <FlagItalyIcon height={24} width={36} />,
placeholderIcon: <FlagItalyIcon height={12} width={18} />,
placeholderIconInMobile: <FlagItalyIcon height={14.67} width={22} />,
},
{
code: 'TH',
displayName: 'ไทย',
icon: <FlagThailandIcon height={24} width={36} />,
placeholderIcon: <FlagThailandIcon height={12} width={18} />,
placeholderIconInMobile: <FlagThailandIcon height={14.67} width={22} />,
},
{
code: 'TR',
displayName: 'Türkçe',
icon: <FlagTurkeyIcon height={24} width={36} />,
placeholderIcon: <FlagTurkeyIcon height={12} width={18} />,
placeholderIconInMobile: <FlagTurkeyIcon height={14.67} width={22} />,
},
{
code: 'VI',
displayName: 'Tiếng Việt',
icon: <FlagVietnamIcon height={24} width={36} />,
placeholderIcon: <FlagVietnamIcon height={12} width={18} />,
placeholderIconInMobile: <FlagVietnamIcon height={14.67} width={22} />,
},
];
const flagComponents: TFlagComponent = {
AR: FlagArabLeagueIcon,
BN: FlagBangladeshIcon,
DE: FlagGermanyIcon,
EN: FlagUnitedKingdomIcon,
ES: FlagSpainIcon,
FR: FlagFranceIcon,
ID: FlagIndonesiaIcon,
IT: FlagItalyIcon,
KM: FlagCambodiaIcon,
KO: FlagSouthKoreaIcon,
MN: FlagMongoliaIcon,
PL: FlagPolandIcon,
PT: FlagPortugalIcon,
RU: FlagRussiaIcon,
SI: FlagSriLankaIcon,
SW: FlagTanzaniaIcon,
TH: FlagThailandIcon,
TR: FlagTurkeyIcon,
VI: FlagVietnamIcon,
ZH_CN: FlagChinaSimplifiedIcon,
ZH_TW: FlagChinaTraditionalIcon,
};

const createFlagData = () => {
return Object.entries(getAllowedLanguages(['ID', 'AR'])).map(([code, displayName]) => {
const IconComponent = flagComponents[code];
return {
code,
displayName,
icon: <IconComponent height={24} width={36} />,
placeholderIcon: <IconComponent height={12} width={18} />,
placeholderIconInMobile: <IconComponent height={14.67} width={22} />,
};
});
};

export const LANGUAGES = createFlagData();
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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 {
Expand All @@ -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);
Expand All @@ -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
Expand Down Expand Up @@ -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>
);
Expand Down
Loading

0 comments on commit 7cb05d2

Please sign in to comment.