Skip to content

Commit

Permalink
Merge pull request #39 from suisin-deriv/suisin/DIEL_flow_change
Browse files Browse the repository at this point in the history 
Suisin/diel flow change
  • Loading branch information
@shaheer-deriv
shaheer-deriv committed Jun 7, 2023
2 parents cdfbdc4 + 4c19a45 commit 5bb78a4
Show file tree
Hide file tree
Showing 34 changed files with 361 additions and 376 deletions.
2 changes: 1 addition & 1 deletion packages/account/src/Components/address-details/address-details.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -182,7 +182,7 @@ const AddressDetails = ({
<InlineNoteWithIcon
icon='IcAlertWarning'
message={localize(
' For verification purposes as required by regulation. It’s your responsibility to provide accurate and complete answers. You can update personal details at any time in your account settings.'
'For verification purposes as required by regulation. It’s your responsibility to provide accurate and complete answers. You can update personal details at any time in your account settings.'
)}
title={localize('Why do we collect this?')}
/>
Expand Down
10 changes: 5 additions & 5 deletions packages/account/src/Components/financial-details/financial-details.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ export type TFinancialDetails = {
export type TFinancialInformationAndTradingExperience = {
shared_props?: object;
income_source_enum: object[];
is_eu?: boolean;
is_eu_user?: boolean;
employment_status_enum: object[];
employment_industry_enum: object[];
occupation_enum: object[];
Expand Down Expand Up @@ -94,7 +94,7 @@ const FinancialDetails = (props: TFinancialDetails & TFinancialInformationAndTra
props.onCancel(current_step, props.goToPreviousStep);
};

const { is_eu } = props;
const { is_eu_user } = props;

const handleValidate = (values: FormikValues) => {
const { errors } = splitValidationResultTypes(props.validate(values));
Expand Down Expand Up @@ -135,18 +135,18 @@ const FinancialDetails = (props: TFinancialDetails & TFinancialInformationAndTra
height_offset='110px'
is_disabled={isDesktop()}
>
{is_eu && (
{is_eu_user && (
<div className='details-form__banner-container'>
<InlineNoteWithIcon
icon='IcAlertWarning'
message={localize(
' We collect information about your employment as part of our due diligence obligations, as required by anti-money laundering legislation.'
'We collect information about your employment as part of our due diligence obligations, as required by anti-money laundering legislation.'
)}
title={localize('Why do we collect this?')}
/>
</div>
)}
{!is_eu && (
{!is_eu_user && (
<Text
as='p'
color='prominent'
Expand Down
37 changes: 18 additions & 19 deletions packages/account/src/Components/forms/personal-details-form.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -121,27 +121,26 @@ const PersonalDetailsForm = ({
side_note={<PoiNameDobExampleIcon />}
>
<fieldset className='account-form__fieldset'>
{'salutation' in values && (
{'salutation' in values && !is_mf && (
<div>
<Text size={isMobile() ? 'xs' : 'xxs'} align={isMobile() && 'center'}>
{!is_mf &&
(is_virtual ? (
localize(
'Please remember that it is your responsibility to keep your answers accurate and up to date. You can update your personal details at any time in your account settings.'
)
) : (
<Localize
i18n_default_text='Please remember that it is your responsibility to keep your answers accurate and up to date. You can update your personal details at any time in your <0>account settings</0>.'
components={[
<Link
to={routes.personal_details}
key={0}
className='link'
onClick={closeRealAccountSignup}
/>,
]}
/>
))}
{is_virtual ? (
localize(
'Please remember that it is your responsibility to keep your answers accurate and up to date. You can update your personal details at any time in your account settings.'
)
) : (
<Localize
i18n_default_text='Please remember that it is your responsibility to keep your answers accurate and up to date. You can update your personal details at any time in your <0>account settings</0>.'
components={[
<Link
to={routes.personal_details}
key={0}
className='link'
onClick={closeRealAccountSignup}
/>,
]}
/>
)}
</Text>
</div>
)}
Expand Down
2 changes: 1 addition & 1 deletion packages/account/src/Components/personal-details/personal-details.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -153,7 +153,7 @@ const PersonalDetails = ({
<InlineNoteWithIcon
icon='IcAlertWarning'
message={localize(
' For verification purposes as required by regulation. It’s your responsibility to provide accurate and complete answers. You can update personal details at any time in your account settings.'
'For verification purposes as required by regulation. It’s your responsibility to provide accurate and complete answers. You can update personal details at any time in your account settings.'
)}
title={localize('Why do we collect this?')}
/>
Expand Down
2 changes: 1 addition & 1 deletion packages/account/src/Components/trading-assessment/trading-assessment-form.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -127,7 +127,7 @@ const TradingAssessmentForm = ({
<InlineNoteWithIcon
icon='IcAlertWarning'
message={localize(
' To assess your trading experience and if our products are suitable for you. Please provide accurate and complete answers, as they may affect the outcome of this assessment.'
'To assess your trading experience and if our products are suitable for you. Please provide accurate and complete answers, as they may affect the outcome of this assessment.'
)}
title={localize('Why do we collect this?')}
/>
Expand Down
4 changes: 2 additions & 2 deletions packages/account/src/Configs/financial-details-config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ const financial_details_config = ({ financial_assessment }) => {
};
};

const financialDetailsConfig = ({ real_account_signup_target, financial_assessment }, FinancialDetails) => {
const financialDetailsConfig = ({ real_account_signup_target, financial_assessment, is_eu_user }, FinancialDetails) => {
const config = financial_details_config({ financial_assessment });

return {
Expand All @@ -70,7 +70,7 @@ const financialDetailsConfig = ({ real_account_signup_target, financial_assessme
forex_trading_frequency_enum: forex_trading_frequency_enum(),
estimated_worth_enum: estimated_worth_enum(),
income_source_enum: income_source_enum(),
is_eu: real_account_signup_target === 'maltainvest',
is_eu_user,
net_income_enum: net_income_enum(),
occupation_enum: occupation_enum(),
other_instruments_trading_experience_enum: other_instruments_trading_experience_enum(),
Expand Down
43 changes: 19 additions & 24 deletions packages/account/src/Sections/Profile/PersonalDetails/personal-details.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import classNames from 'classnames';
import { Field, Formik } from 'formik';
import { Field, Formik, Form } from 'formik';
import PropTypes from 'prop-types';
import React from 'react';
import { withRouter } from 'react-router';
Expand Down Expand Up @@ -48,14 +48,7 @@ import LoadErrorMessage from 'Components/load-error-message';
import POAAddressMismatchHintBox from 'Components/poa-address-mismatch-hint-box';
import { connect } from 'Stores/connect';
import { getEmploymentStatusList } from 'Sections/Assessment/FinancialAssessment/financial-information-list';
import { validateName } from 'Helpers/utils';

const validate = (errors, values) => (fn, arr, err_msg) => {
arr.forEach(field => {
const value = values[field];
if (/^\s+$/.test(value) || (!fn(value) && !errors[field] && err_msg !== true)) errors[field] = err_msg;
});
};
import { validateName, validate } from 'Helpers/utils';

const InputGroup = ({ children, className }) => {
const { is_appstore } = React.useContext(PlatformContext);
Expand Down Expand Up @@ -300,19 +293,19 @@ export const PersonalDetailsForm = ({
if (is_virtual) return errors;

const required_fields = ['first_name', 'last_name', 'phone', 'address_line_1', 'address_city'];
if (is_eu) {
required_fields.push('citizen');
}

if (is_mf) {
const required_tax_fields = ['tax_residence', 'tax_identification_number', 'employment_status'];
required_fields.push(...required_tax_fields);
}

validateValues(val => val, required_fields, localize('This field is required'));

const residence_fields = ['citizen'];
const validateResidence = val => getLocation(residence_list, val, 'value');
validateValues(validateResidence, residence_fields, true);
if (is_eu) {
const residence_fields = ['citizen'];
const validateResidence = val => getLocation(residence_list, val, 'value');
validateValues(validateResidence, residence_fields, true);
}

const min_tax_identification_number = 0;
const max_tax_identification_number = 25;
Expand Down Expand Up @@ -341,8 +334,8 @@ export const PersonalDetailsForm = ({
);
}
}
errors.first_name = validateName(values.first_name);
errors.last_name = validateName(values.last_name);
if (values.first_name) errors.first_name = validateName(values.first_name);
if (values.last_name) errors.last_name = validateName(values.last_name);

if (values.phone) {
// minimum characters required is 9 numbers (excluding +- signs or space)
Expand Down Expand Up @@ -561,11 +554,11 @@ export const PersonalDetailsForm = ({
setTouched,
dirty,
}) => (
<>
<React.Fragment>
{Notifications && <Notifications />}
<LeaveConfirm onDirty={isMobile() ? showForm : null} />
{show_form && (
<form
<Form
noValidate
className={classNames('account-form account-form__personal-details', {
'account-form account-form__personal-details--dashboard': is_appstore,
Expand Down Expand Up @@ -638,10 +631,10 @@ export const PersonalDetailsForm = ({
required
disabled={!isChangeableField('first_name')}
error={errors.first_name}
id={'first_name'}
id='first_name'
/>
<Input
id={'last_name'}
id='last_name'
data-lpignore='true'
type='text'
name='last_name'
Expand Down Expand Up @@ -1127,7 +1120,9 @@ export const PersonalDetailsForm = ({
<Text as='p' size='xs'>
<Localize
i18n_default_text='By default, all {{brand_website_name}} clients are retail clients but anyone can request to be treated as a professional client.'
values={{ brand_website_name: getBrandWebsiteName() }}
values={{
brand_website_name: getBrandWebsiteName(),
}}
/>
</Text>
<Text as='p' size='xs'>
Expand Down Expand Up @@ -1271,9 +1266,9 @@ export const PersonalDetailsForm = ({
primary
/>
</FormFooter>
</form>
</Form>
)}
</>
</React.Fragment>
)}
</Formik>
);
Expand Down
3 changes: 3 additions & 0 deletions packages/appstore/src/components/cfds-listing/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -146,6 +146,7 @@ const CFDsListing = () => {
<TradingAppCard
action_type={existing_account.action_type}
availability={selected_region}
clickable_icon
icon={existing_account.icon}
sub_title={existing_account?.sub_title}
name={!has_mt5_account_status ? existing_account?.name : ''}
Expand Down Expand Up @@ -225,6 +226,7 @@ const CFDsListing = () => {
<TradingAppCard
action_type='multi-action'
availability={selected_region}
clickable_icon
icon={account.icon}
sub_title={account.name}
name={`${formatMoney(
Expand Down Expand Up @@ -253,6 +255,7 @@ const CFDsListing = () => {
<TradingAppCard
action_type='get'
availability={selected_region}
clickable_icon
icon={account.icon}
name={account.name}
platform={account.platform}
Expand Down
1 change: 1 addition & 0 deletions packages/appstore/src/components/containers/trading-app-card-actions.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import MultiActionButtonGroup from 'Components/multi-action-button-group';

export type Actions = {
action_type: 'get' | 'none' | 'trade' | 'dxtrade' | 'multi-action'; // multi-action can be tranfer_trade or top_up_trade
clickable_icon?: boolean;
link_to?: string;
has_divider?: boolean;
onAction?: (e?: React.MouseEvent<HTMLButtonElement>) => void;
Expand Down
5 changes: 3 additions & 2 deletions packages/appstore/src/components/containers/trading-app-card.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,9 @@
justify-content: center;
height: 100%;
padding: 0 0 2rem;
cursor: pointer;
&__clickable {
cursor: pointer;
}
}
}

Expand All @@ -31,7 +33,6 @@
height: 100%;
padding: 0 2rem 0 0;
width: 100%;
cursor: pointer;
&__short-code {
padding: 0.4rem;
height: fit-content;
Expand Down
40 changes: 10 additions & 30 deletions packages/appstore/src/components/containers/trading-app-card.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,25 +3,21 @@ import classNames from 'classnames';
import { getStatusBadgeConfig } from '@deriv/account';
import { Text, StatusBadge } from '@deriv/components';
import TradigPlatformIconProps from 'Assets/svgs/trading-platform';
import {
getAppstorePlatforms,
getMFAppstorePlatforms,
BrandConfig,
DERIV_PLATFORM_NAMES,
} from 'Constants/platform-config';
import { getAppstorePlatforms, getMFAppstorePlatforms, BrandConfig } from 'Constants/platform-config';
import './trading-app-card.scss';
import TradingAppCardActions, { Actions } from './trading-app-card-actions';
import { AvailableAccount, TDetailsOfEachMT5Loginid } from 'Types';
import { useStores } from 'Stores/index';
import { observer } from 'mobx-react-lite';
import { localize } from '@deriv/translations';
import { CFD_PLATFORMS, ContentFlag, getStaticUrl, getUrlSmartTrader, getUrlBinaryBot } from '@deriv/shared';
import { CFD_PLATFORMS, ContentFlag, getStaticUrl } from '@deriv/shared';

const TradingAppCard = ({
availability,
name,
icon,
action_type,
clickable_icon = false,
description,
is_deriv_platform = false,
onAction,
Expand Down Expand Up @@ -54,26 +50,6 @@ const TradingAppCard = ({
);

const openStaticPage = () => {
if (is_deriv_platform) {
switch (name) {
case DERIV_PLATFORM_NAMES.TRADER:
window.open(getStaticUrl(`/dtrader`));
break;
case DERIV_PLATFORM_NAMES.DBOT:
window.open(getStaticUrl(`/dbot`));
break;
case DERIV_PLATFORM_NAMES.SMARTTRADER:
window.open(getUrlSmartTrader());
break;
case DERIV_PLATFORM_NAMES.BBOT:
window.open(getUrlBinaryBot());
break;
case DERIV_PLATFORM_NAMES.GO:
window.open(getStaticUrl('/deriv-go'));
break;
default:
}
}
if (platform === CFD_PLATFORMS.MT5 && availability === 'EU')
window.open(getStaticUrl(`/dmt5`, {}, false, true));
else if (platform === CFD_PLATFORMS.MT5 && availability !== 'EU') window.open(getStaticUrl(`/dmt5`));
Expand All @@ -84,11 +60,15 @@ const TradingAppCard = ({

return (
<div className='trading-app-card' key={`trading-app-card__${current_language}`}>
<div className={classNames('trading-app-card__icon--container')}>
<TradigPlatformIconProps icon={icon} onClick={openStaticPage} size={48} />
<div
className={classNames('trading-app-card__icon--container', {
'trading-app-card__icon--container__clickable': clickable_icon,
})}
>
<TradigPlatformIconProps icon={icon} onClick={clickable_icon ? openStaticPage : undefined} size={48} />
</div>
<div className={classNames('trading-app-card__container', { 'trading-app-card--divider': has_divider })}>
<div className='trading-app-card__details' onClick={openStaticPage}>
<div className='trading-app-card__details'>
<div>
<Text className='title' size='xs' line_height='s' color='prominent'>
{!is_real && sub_title ? `${sub_title} ${localize('Demo')}` : sub_title}
Expand Down
Loading

0 comments on commit 5bb78a4

Please sign in to comment.