AdditionalKycInfoForm
));
+
+describe('AdditionalKycInfoModal', () => {
+ let modal_root_el: HTMLElement;
+ const mock_store = mockStore({
+ ui: {
+ is_additional_kyc_info_modal_open: true,
+ toggleAdditionalKycInfoModal: jest.fn(),
+ },
+ });
+
+ beforeAll(() => {
+ modal_root_el = document.createElement('div');
+ modal_root_el.setAttribute('id', 'modal_root');
+ document.body.appendChild(modal_root_el);
+ });
+
+ afterAll(() => {
+ document.body.removeChild(modal_root_el);
+ });
+
+ it('should render the modal when is_additional_kyc_info_modal_open is true', () => {
+ render(
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+});
+
+AdditionalKycInfoModal.displayName = 'AdditionalKycInfoModal';
diff --git a/packages/account/src/Components/additional-kyc-info-modal/form-config.tsx b/packages/account/src/Components/additional-kyc-info-modal/form-config.tsx
new file mode 100644
index 000000000000..9b1bcd5a3c3b
--- /dev/null
+++ b/packages/account/src/Components/additional-kyc-info-modal/form-config.tsx
@@ -0,0 +1,259 @@
+import React from 'react';
+import { GetSettings, ResidenceList } from '@deriv/api-types';
+import { Localize, localize } from '@deriv/translations';
+import { generateValidationFunction } from '@deriv/shared';
+
+// Type for the list of items in a dropdown or select
+export type TListItem = {
+ /**
+ * The text of the item (e.g. 'United Kingdom', 'Germany', etc.)
+ */
+ text: string;
+ /**
+ * The value of the item
+ */
+ value: string;
+};
+
+export type TFields = 'place_of_birth' | 'tax_residence' | 'tax_identification_number' | 'account_opening_reason';
+
+type ReqRule = ['req', React.ReactNode];
+
+type LengthRule = ['length', React.ReactNode, { min: number; max: number }];
+
+type RegularRule = ['regular', React.ReactNode, { regex: RegExp }];
+
+type CustomValidator = (
+ value: string,
+ /**
+ * The options passed to the validation function
+ */
+ options: Record
+ setIsOpen(prev_is_open => !prev_is_open)}
+ alignment={isMobile() ? 'left' : 'right'}
+ />
+
+ );
+};
diff --git a/packages/account/src/Components/form-field-info/index.ts b/packages/account/src/Components/form-field-info/index.ts
new file mode 100644
index 000000000000..9f25eecaab50
--- /dev/null
+++ b/packages/account/src/Components/form-field-info/index.ts
@@ -0,0 +1,3 @@
+import { FormFieldInfo } from './form-field-info';
+
+export default FormFieldInfo;
diff --git a/packages/account/src/Components/forms/__test__/form-select-field.spec.tsx b/packages/account/src/Components/forms/__test__/form-select-field.spec.tsx
new file mode 100644
index 000000000000..9e9e732bf950
--- /dev/null
+++ b/packages/account/src/Components/forms/__test__/form-select-field.spec.tsx
@@ -0,0 +1,75 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import FormSelectField from '../form-select-field';
+import { StoreProvider, mockStore } from '@deriv/stores';
+import { Formik } from 'formik';
+import userEvent from '@testing-library/user-event';
+
+describe('FormSelectField', () => {
+ const list_items = [
+ { value: '1', text: 'Option 1' },
+ { value: '2', text: 'Option 2' },
+ { value: '3', text: 'Option 3' },
+ ];
+ const mock_store = mockStore({});
+
+ it('should render label', () => {
+ render(
+
- {show_expiry && (
-
-
- )}
+ (
+
+
+);
+
+export default DurationRangeText;
diff --git a/packages/trader/src/Modules/Trading/Components/Form/TradeParams/Duration/expiry-text.jsx b/packages/trader/src/Modules/Trading/Components/Form/TradeParams/Duration/expiry-text.jsx
index 82200999a6eb..ba94abb09533 100644
--- a/packages/trader/src/Modules/Trading/Components/Form/TradeParams/Duration/expiry-text.jsx
+++ b/packages/trader/src/Modules/Trading/Components/Form/TradeParams/Duration/expiry-text.jsx
@@ -2,7 +2,7 @@ import React from 'react';
import { Text } from '@deriv/components';
import { Localize } from '@deriv/translations';
-const ExpiryText = ({ expiry_epoch, has_error }) => {
+const ExpiryText = ({ expiry_epoch, has_error, fixed_date }) => {
const formatted_date =
expiry_epoch && !has_error
? new Date(expiry_epoch * 1000)
@@ -14,7 +14,7 @@ const ExpiryText = ({ expiry_epoch, has_error }) => {
return (
-
);
};
diff --git a/packages/trader/src/Modules/Trading/Containers/trade-params-mobile.tsx b/packages/trader/src/Modules/Trading/Containers/trade-params-mobile.tsx
index 8cb17c6ffe72..a81b059135df 100644
--- a/packages/trader/src/Modules/Trading/Containers/trade-params-mobile.tsx
+++ b/packages/trader/src/Modules/Trading/Containers/trade-params-mobile.tsx
@@ -86,7 +86,8 @@ const makeGetDefaultDuration = (trade_duration: number, trade_duration_unit: str
const TradeParamsModal = observer(({ is_open, toggleModal, tab_index }: TTradeParamsModal) => {
const { client } = useStore();
const { currency } = client;
- const { amount, form_components, duration, duration_unit, duration_units_list } = useTraderStore();
+ const { amount, form_components, duration, duration_unit, duration_units_list, is_vanilla } = useTraderStore();
+
// eslint-disable-next-line react-hooks/exhaustive-deps
const getDefaultDuration = React.useCallback(makeGetDefaultDuration(duration, duration_unit), []);
@@ -150,7 +151,7 @@ const TradeParamsModal = observer(({ is_open, toggleModal, tab_index }: TTradePa
is_open={is_open}
header={}
toggleModal={toggleModal}
- height='auto'
+ height={is_vanilla ? '53.8rem' : 'auto'}
width='calc(100vw - 32px)'
>
diff --git a/packages/trader/src/sass/app/modules/trading-mobile.scss b/packages/trader/src/sass/app/modules/trading-mobile.scss
index 3d1541ea7b01..2205e3048990 100644
--- a/packages/trader/src/sass/app/modules/trading-mobile.scss
+++ b/packages/trader/src/sass/app/modules/trading-mobile.scss
@@ -358,6 +358,9 @@
}
}
}
+ &-keypad:has(.range-text-container) {
+ padding: 0.4rem 1.6rem 1.6rem;
+ }
}
&__header {
@include mobile {
diff --git a/packages/trader/src/sass/app/modules/trading.scss b/packages/trader/src/sass/app/modules/trading.scss
index bebc896d2417..c9016e10bf34 100644
--- a/packages/trader/src/sass/app/modules/trading.scss
+++ b/packages/trader/src/sass/app/modules/trading.scss
@@ -965,16 +965,30 @@
}
}
-.expiry-text-container {
- margin-top: 0.4rem;
+.expiry-text-container,
+.range-text-container {
+ margin-top: 0.5rem;
- &--mobile {
+ @include mobile {
margin: 0 0 0.8rem;
position: relative;
top: -0.8rem;
}
}
+.text-container--vanilla {
+ min-height: 5rem;
+ padding-top: 0.5rem;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+
+ .expiry-text-container,
+ .range-text-container {
+ top: 0;
+ }
+}
+
/** @define dc-collapsible */
@include mobile {
.dc-collapsible {
From c70bffc9962032063fd0534149065d1250af6ad2 Mon Sep 17 00:00:00 2001
From: Likhith Kolayari <98398322+likhith-deriv@users.noreply.github.com>
Date: Wed, 11 Oct 2023 17:16:13 +0400
Subject: [PATCH 09/12] likhith/feat: :art: remove the sample images (#10465)
* feat: :art: remove the sample images
* feat: :art: remove the sample images
* chore: Trigger Build
* fix: remove unused CSS
* chore: Trigger Build
---------
Co-authored-by: Shahzaib
---
.../account/src/Components/forms/idv-form.tsx | 37 ++++--------------
.../__tests__/idv-document-submit.spec.tsx | 2 -
.../idv-document-submit.tsx | 1 -
.../idv-doc-submit-on-signup.tsx | 1 -
.../src/Configs/personal-details-config.ts | 1 -
.../src/Constants/idv-document-config.ts | 24 ------------
.../src/Helpers/__tests__/utils.spec.tsx | 1 -
packages/account/src/Helpers/utils.tsx | 1 -
packages/account/src/Styles/account.scss | 21 ----------
packages/account/src/Types/common.type.ts | 1 -
.../common/static_images/ke_alien_card.png | Bin 172460 -> 0 bytes
.../ke_national_identity_card.png | Bin 304515 -> 0 bytes
.../common/static_images/ke_passport.png | Bin 116690 -> 0 bytes
.../static_images/ng_drivers_license.png | Bin 169938 -> 0 bytes
.../common/static_images/ng_nin_slip.png | Bin 267547 -> 0 bytes
.../common/static_images/ng_voter_id.png | Bin 177606 -> 0 bytes
.../ug_national_identity_card.png | Bin 620239 -> 0 bytes
.../za_national_identity_card.png | Bin 239428 -> 0 bytes
.../zw_national_identity_card.png | Bin 196804 -> 0 bytes
.../_common/components/onfido-container.scss | 10 -----
packages/shared/src/utils/config/adapters.ts | 1 -
21 files changed, 7 insertions(+), 94 deletions(-)
delete mode 100644 packages/core/src/public/images/common/static_images/ke_alien_card.png
delete mode 100644 packages/core/src/public/images/common/static_images/ke_national_identity_card.png
delete mode 100644 packages/core/src/public/images/common/static_images/ke_passport.png
delete mode 100644 packages/core/src/public/images/common/static_images/ng_drivers_license.png
delete mode 100644 packages/core/src/public/images/common/static_images/ng_nin_slip.png
delete mode 100644 packages/core/src/public/images/common/static_images/ng_voter_id.png
delete mode 100644 packages/core/src/public/images/common/static_images/ug_national_identity_card.png
delete mode 100644 packages/core/src/public/images/common/static_images/za_national_identity_card.png
delete mode 100644 packages/core/src/public/images/common/static_images/zw_national_identity_card.png
diff --git a/packages/account/src/Components/forms/idv-form.tsx b/packages/account/src/Components/forms/idv-form.tsx
index f81b083fb5a0..9febec547d50 100644
--- a/packages/account/src/Components/forms/idv-form.tsx
+++ b/packages/account/src/Components/forms/idv-form.tsx
@@ -3,7 +3,7 @@ import classNames from 'classnames';
import { Field, FieldProps } from 'formik';
import { localize } from '@deriv/translations';
import { formatInput, getIDVNotApplicableOption } from '@deriv/shared';
-import { Autocomplete, DesktopWrapper, Input, MobileWrapper, SelectNative, Text } from '@deriv/components';
+import { Autocomplete, DesktopWrapper, Input, MobileWrapper, SelectNative } from '@deriv/components';
import {
getDocumentData,
preventEmptyClipboardPaste,
@@ -25,17 +25,15 @@ const IDVForm = ({
can_skip_document_verification = false,
}: TIDVForm) => {
const [document_list, setDocumentList] = React.useState([]);
- const [document_image, setDocumentImage] = React.useState(null);
const [selected_doc, setSelectedDoc] = React.useState('');
- const { documents_supported: document_data, has_visual_sample } = selected_country?.identity?.services?.idv ?? {};
+ const { documents_supported: document_data } = selected_country?.identity?.services?.idv ?? {};
const default_document = {
id: '',
text: '',
value: '',
example_format: '',
- sample_image: '',
};
const IDV_NOT_APPLICABLE_OPTION = React.useMemo(() => getIDVNotApplicableOption(), []);
@@ -50,8 +48,10 @@ const IDVForm = ({
const new_document_list = filtered_documents.map(key => {
const { display_name, format } = document_data[key];
- const { new_display_name, example_format, sample_image, additional_document_example_format } =
- getDocumentData(selected_country.value ?? '', key);
+ const { new_display_name, example_format, additional_document_example_format } = getDocumentData(
+ selected_country.value ?? '',
+ key
+ );
const needs_additional_document = !!document_data[key].additional;
if (needs_additional_document) {
@@ -64,7 +64,6 @@ const IDVForm = ({
example_format: additional_document_example_format,
},
value: format,
- sample_image,
example_format,
};
}
@@ -72,7 +71,6 @@ const IDVForm = ({
id: key,
text: display_name ?? new_display_name, // Display document name from API if available, else use the one from the helper function
value: format,
- sample_image,
example_format,
};
});
@@ -109,9 +107,6 @@ const IDVForm = ({
setFieldValue('document_number', '', true);
setFieldValue('document_additional', '', true);
}
- if (has_visual_sample) {
- setDocumentImage(item.sample_image ?? '');
- }
};
return (
@@ -124,11 +119,7 @@ const IDVForm = ({
'proof-of-identity__container--idv': hide_hint,
})}
>
-
diff --git a/packages/account/src/Components/poi/idv-document-submit/__tests__/idv-document-submit.spec.tsx b/packages/account/src/Components/poi/idv-document-submit/__tests__/idv-document-submit.spec.tsx
index 7599e31bd4c7..a4c01889c3fa 100644
--- a/packages/account/src/Components/poi/idv-document-submit/__tests__/idv-document-submit.spec.tsx
+++ b/packages/account/src/Components/poi/idv-document-submit/__tests__/idv-document-submit.spec.tsx
@@ -20,12 +20,10 @@ jest.mock('Helpers/utils', () => ({
document_1: {
new_display_name: '',
example_format: '5436454364243',
- sample_image: '',
},
document_2: {
new_display_name: '',
example_format: 'A-52431',
- sample_image: '',
},
},
};
diff --git a/packages/account/src/Components/poi/idv-document-submit/idv-document-submit.tsx b/packages/account/src/Components/poi/idv-document-submit/idv-document-submit.tsx
index 461078949cd7..026308a1b066 100644
--- a/packages/account/src/Components/poi/idv-document-submit/idv-document-submit.tsx
+++ b/packages/account/src/Components/poi/idv-document-submit/idv-document-submit.tsx
@@ -56,7 +56,6 @@ const IdvDocumentSubmit = observer(({ handleBack, handleViewComplete, selected_c
text: '',
value: '',
example_format: '',
- sample_image: '',
},
document_number: '',
...form_initial_values,
diff --git a/packages/account/src/Components/poi/poi-form-on-signup/idv-doc-submit-on-signup/idv-doc-submit-on-signup.tsx b/packages/account/src/Components/poi/poi-form-on-signup/idv-doc-submit-on-signup/idv-doc-submit-on-signup.tsx
index 5aba4d1a9360..4df0df924f3e 100644
--- a/packages/account/src/Components/poi/poi-form-on-signup/idv-doc-submit-on-signup/idv-doc-submit-on-signup.tsx
+++ b/packages/account/src/Components/poi/poi-form-on-signup/idv-doc-submit-on-signup/idv-doc-submit-on-signup.tsx
@@ -77,7 +77,6 @@ export const IdvDocSubmitOnSignup = ({
text: '',
value: '',
example_format: '',
- sample_image: '',
},
document_number: '',
...form_initial_values,
diff --git a/packages/account/src/Configs/personal-details-config.ts b/packages/account/src/Configs/personal-details-config.ts
index 27f134aa9e8a..1c404fb4f36d 100644
--- a/packages/account/src/Configs/personal-details-config.ts
+++ b/packages/account/src/Configs/personal-details-config.ts
@@ -176,7 +176,6 @@ export const personal_details_config = ({
text: '',
value: '',
example_format: '',
- sample_image: '',
},
supported_in: ['svg'],
rules: [],
diff --git a/packages/account/src/Constants/idv-document-config.ts b/packages/account/src/Constants/idv-document-config.ts
index 59fdbc749838..c63b2dcdf1d0 100644
--- a/packages/account/src/Constants/idv-document-config.ts
+++ b/packages/account/src/Constants/idv-document-config.ts
@@ -1,8 +1,5 @@
-import { getUrlBase } from '@deriv/shared';
import { localize } from '@deriv/translations';
-const getImageLocation = (image_name: string) => getUrlBase(`/public/images/common/${image_name}`);
-
// Note: Ensure that the object keys matches BE API's keys. This is simply a mapping for FE templates
const getIDVDocumentConfig = () => ({
@@ -10,119 +7,98 @@ const getIDVDocumentConfig = () => ({
alien_card: {
new_display_name: '',
example_format: '123456',
- sample_image: getImageLocation('ke_alien_card.png'),
},
national_id: {
new_display_name: '',
example_format: '12345678',
- sample_image: getImageLocation('ke_national_identity_card.png'),
},
passport: {
new_display_name: '',
example_format: 'A12345678',
- sample_image: getImageLocation('ke_passport.png'),
},
},
za: {
national_id: {
new_display_name: localize('National ID'),
example_format: '1234567890123',
- sample_image: getImageLocation('za_national_identity_card.png'),
},
national_id_no_photo: {
new_display_name: localize('National ID (No Photo)'),
example_format: '1234567890123',
- sample_image: '',
},
},
ng: {
bvn: {
new_display_name: localize('Bank Verification Number'),
example_format: '12345678901',
- sample_image: '',
},
cac: {
new_display_name: localize('Corporate Affairs Commission'),
example_format: '12345678',
- sample_image: '',
},
drivers_license: {
new_display_name: '',
example_format: 'ABC123456789',
- sample_image: getImageLocation('ng_drivers_license.png'),
},
nin: {
new_display_name: localize('National Identity Number'),
example_format: '12345678901',
- sample_image: '',
},
nin_slip: {
new_display_name: localize('National Identity Number Slip'),
example_format: '12345678901',
- sample_image: getImageLocation('ng_nin_slip.png'),
},
tin: {
new_display_name: localize('Taxpayer identification number'),
example_format: '12345678-1234',
- sample_image: '',
},
voter_id: {
new_display_name: localize('Voter ID'),
example_format: '1234567890123456789',
- sample_image: getImageLocation('ng_voter_id.png'),
},
},
gh: {
drivers_license: {
new_display_name: '',
example_format: 'B1234567',
- sample_image: '',
},
national_id: {
new_display_name: localize('National ID'),
example_format: 'GHA-123456789-1',
- sample_image: '',
},
passport: {
new_display_name: localize('Passport'),
example_format: 'G1234567',
- sample_image: '',
},
ssnit: {
new_display_name: localize('Social Security and National Insurance Trust'),
example_format: 'C123456789012',
- sample_image: '',
},
voter_id: {
new_display_name: localize('Voter ID'),
example_format: '01234567890',
- sample_image: '',
},
},
br: {
cpf: {
new_display_name: localize('CPF'),
example_format: '123.456.789-12',
- sample_image: '',
},
},
ug: {
national_id: {
new_display_name: localize('National ID'),
example_format: 'CM12345678PE1D',
- sample_image: getImageLocation('ug_national_identity_card.png'),
},
national_id_no_photo: {
new_display_name: localize('National ID (No Photo)'),
example_format: 'CM12345678PE1D',
- sample_image: '',
},
},
zw: {
national_id: {
new_display_name: localize('National ID'),
example_format: '081234567F53',
- sample_image: getImageLocation('zw_national_identity_card.png'),
},
},
cl: {
diff --git a/packages/account/src/Helpers/__tests__/utils.spec.tsx b/packages/account/src/Helpers/__tests__/utils.spec.tsx
index e3aeeb15070b..2589a55b4026 100644
--- a/packages/account/src/Helpers/__tests__/utils.spec.tsx
+++ b/packages/account/src/Helpers/__tests__/utils.spec.tsx
@@ -119,7 +119,6 @@ describe('getDocumentData', () => {
expect(getDocumentData('zw', 'national_id')).toEqual({
new_display_name: 'National ID',
example_format: '081234567F53',
- sample_image: '/public/images/common/zw_national_identity_card.png',
});
});
});
diff --git a/packages/account/src/Helpers/utils.tsx b/packages/account/src/Helpers/utils.tsx
index 637724d9ef60..b9403a5b0411 100644
--- a/packages/account/src/Helpers/utils.tsx
+++ b/packages/account/src/Helpers/utils.tsx
@@ -59,7 +59,6 @@ export const getDocumentData = (country_code: string, document_type: string) =>
const DEFAULT_CONFIG = {
new_display_name: '',
example_format: '',
- sample_image: '',
};
const IDV_DOCUMENT_DATA: any = getIDVDocuments(country_code);
return IDV_DOCUMENT_DATA[document_type] ?? DEFAULT_CONFIG;
diff --git a/packages/account/src/Styles/account.scss b/packages/account/src/Styles/account.scss
index 09181ba539aa..56c50c6ccaef 100644
--- a/packages/account/src/Styles/account.scss
+++ b/packages/account/src/Styles/account.scss
@@ -2224,27 +2224,6 @@ $MIN_HEIGHT_FLOATING: calc(
}
}
- &__sample-container {
- margin-left: 1.6rem;
-
- @include mobile {
- margin-left: unset;
- width: 94%;
- }
- }
-
- &__sample-container-external {
- margin-top: 2.8rem;
- }
-
- &__image-container {
- width: fit-content;
- height: fit-content;
- padding: 8px;
- border-radius: 4px;
- background-color: $color-grey-2;
- }
-
&__image {
max-width: 24.5rem;
border-radius: 4px;
diff --git a/packages/account/src/Types/common.type.ts b/packages/account/src/Types/common.type.ts
index 03c62a89811f..2212530fc7ca 100644
--- a/packages/account/src/Types/common.type.ts
+++ b/packages/account/src/Types/common.type.ts
@@ -154,7 +154,6 @@ export type TDocument = {
id: string;
text: string;
value?: string;
- sample_image?: string;
example_format?: string;
additional?: {
display_name?: string;
diff --git a/packages/core/src/public/images/common/static_images/ke_alien_card.png b/packages/core/src/public/images/common/static_images/ke_alien_card.png
deleted file mode 100644
index 22e79adff3ba2396cd9c679aca6d92f137040f17..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001
literal 172460
zcmV(rK<>YZP)
+ {is_vanilla &&
+
)}
- {document_image && (
-
-
- {localize('Sample:')}
-
-
- )}
- 
-
-