Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Suisin/diel flow change #36

Merged
merged 6 commits into from
Jun 1, 2023
Merged

Suisin/diel flow change #36

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
a8417b8
chore: sign up flow for eu user
suisin-deriv May 19, 2023
378411c
Merge branch 'master' of github.com:binary-com/deriv-app into suisin/…
suisin-deriv May 29, 2023
cf8aeec
Merge branch 'master' of github.com:binary-com/deriv-app into suisin/…
suisin-deriv May 29, 2023
a6975dd
chore: DIEL Flow
suisin-deriv Jun 1, 2023
6516f16
chore: fixed test case error
suisin-deriv Jun 1, 2023
6fd7369
chore: remove scss from inline notw with icon
suisin-deriv Jun 1, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 13 additions & 1 deletion packages/account/src/Components/address-details/address-details.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ import {
PlatformContext,
TLocationList,
} from '@deriv/shared';
import InlineNoteWithIcon from 'Components/inline-note-with-icon';
import { splitValidationResultTypes } from '../real-account-signup/helpers/utils';

type TAddressDetails = {
Expand Down Expand Up @@ -175,7 +176,18 @@ const AddressDetails = ({
height_offset={is_appstore ? '222px' : '90px'}
is_disabled={isDesktop()}
>
{!is_appstore && (
{is_mf && (
<div className='details-form__banner-container'>
<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.'
)}
title={localize('Why do we collect this?')}
/>
</div>
)}
{!is_appstore && !is_mf && (
<Text
as='p'
align='left'
Expand Down
2 changes: 1 addition & 1 deletion packages/account/src/Components/currency-selector/__tests__/currency-selector.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -217,7 +217,7 @@ describe('<CurrencySelector/>', () => {
const dxtrade_non_eu_msg =
'You are limited to one fiat account. You won’t be able to change your account currency if you have already made your first deposit or created a real Deriv MT5 or Deriv X account.';
const mt5_eu =
'You are limited to one fiat account. You won’t be able to change your account currency if you have already made your first deposit or created a real CFDs account.';
"Enjoy a seamless trading experience with the selected fiat account. Please note that once you've made your first deposit or created a real CFDs account, your account currency cannot be changed.";
const mt5_non_eu =
'You are limited to one fiat account. You won’t be able to change your account currency if you have already made your first deposit or created a real Deriv MT5 account.';

Expand Down
8 changes: 8 additions & 0 deletions packages/account/src/Components/currency-selector/currency-selector.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -171,6 +171,14 @@ const CurrencySelector = ({
/>
);
} else if (!is_dxtrade_allowed && is_mt5_allowed) {
if (is_eu) {
return (
<Localize
i18n_default_text="Enjoy a seamless trading experience with the selected fiat account. Please note that once you've made your first deposit or created a real {{dmt5_label}} account, your account currency cannot be changed."
values={{ dmt5_label }}
/>
);
}
return (
<Localize
i18n_default_text='You are limited to one fiat account. You won’t be able to change your account currency if you have already made your first deposit or created a real {{dmt5_label}} account.'
Expand Down
28 changes: 25 additions & 3 deletions packages/account/src/Components/financial-details/financial-details.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ import {
SourceOfWealth,
} from './financial-details-partials';
import { splitValidationResultTypes } from '../real-account-signup/helpers/utils';
import InlineNoteWithIcon from 'Components/inline-note-with-icon';

export type TFinancialDetails = {
goToPreviousStep: () => void;
Expand All @@ -42,6 +43,7 @@ export type TFinancialDetails = {
export type TFinancialInformationAndTradingExperience = {
shared_props?: object;
income_source_enum: object[];
is_eu?: boolean;
employment_status_enum: object[];
employment_industry_enum: object[];
occupation_enum: object[];
Expand Down Expand Up @@ -92,6 +94,8 @@ const FinancialDetails = (props: TFinancialDetails & TFinancialInformationAndTra
props.onCancel(current_step, props.goToPreviousStep);
};

const { is_eu } = props;

const handleValidate = (values: FormikValues) => {
const { errors } = splitValidationResultTypes(props.validate(values));
return errors;
Expand Down Expand Up @@ -131,9 +135,27 @@ const FinancialDetails = (props: TFinancialDetails & TFinancialInformationAndTra
height_offset='110px'
is_disabled={isDesktop()}
>
<Text as='p' color='prominent' size='xxs' className='trading-assessment__side-note'>
<Localize i18n_default_text='We collect information about your employment as part of our due diligence obligations, as required by anti-money laundering legislation.' />
</Text>
{is_eu && (
<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.'
)}
title={localize('Why do we collect this?')}
/>
</div>
)}
{!is_eu && (
<Text
as='p'
color='prominent'
size='xxs'
className='trading-assessment__side-note'
>
<Localize i18n_default_text='We collect information about your employment as part of our due diligence obligations, as required by anti-money laundering legislation.' />
</Text>
)}
<ThemedScrollbars
autohide={!(window.innerHeight < 890)}
height={Number(height) - 77}
Expand Down
30 changes: 22 additions & 8 deletions packages/account/src/Components/personal-details/personal-details.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { Formik, Field } from 'formik';
import React from 'react';
import InlineNoteWithIcon from 'Components/inline-note-with-icon';
import {
Modal,
Autocomplete,
Expand Down Expand Up @@ -183,13 +184,26 @@ const PersonalDetails = ({
data-testid='personal_details_form'
>
<Div100vhContainer className='details-form' height_offset='90px' is_disabled={isDesktop()}>
<Text as='p' size='xxxs' align='center' className='details-form__description'>
<Localize
i18n_default_text={
'Any information you provide is confidential and will be used for verification purposes only.'
}
/>
</Text>
{is_mf && (
<div className='details-form__banner-container'>
<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.'
)}
title={localize('Why do we collect this?')}
/>
</div>
)}
{!is_mf && (
<Text as='p' size='xxxs' align='center' className='details-form__description'>
<Localize
i18n_default_text={
'Any information you provide is confidential and will be used for verification purposes only.'
}
/>
</Text>
)}
<ThemedScrollbars
height={height}
onScroll={closeTooltipOnScroll}
Expand All @@ -209,7 +223,7 @@ const PersonalDetails = ({
className='details-form__elements'
style={{ paddingBottom: isDesktop() ? 'unset' : null }}
>
{'salutation' in props.value && (
{!is_mf && 'salutation' in props.value && (
<div>
<Text size={isMobile() ? 'xs' : 'xxs'} align={isMobile() && 'center'}>
{is_virtual ? (
Expand Down
11 changes: 11 additions & 0 deletions packages/account/src/Components/terms-of-use/terms-of-use-messages.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,6 +106,17 @@ export const MaltaInvestDescription = () => (
}
/>
</p>
<Hr />
<Text as='h4' size='xs' weight='bold'>
<Localize i18n_default_text='Trading accounts and funds' />
</Text>
<p>
<Localize
i18n_default_text={
"You acknowledge that, subject to the Company's discretion, applicable regulations, and internal checks being fulfilled, we will open an account for you and allow you to deposit funds during the client acceptance procedure. However, until the verification of your account is completed, you will not be able to trade, withdraw or make further deposits. If you do not provide relevant documents within 30-days, we will refund the deposited amount through the same payment method you used to deposit."
}
/>
</p>
</React.Fragment>
);

Expand Down
21 changes: 18 additions & 3 deletions packages/account/src/Components/trading-assessment/trading-assessment-form.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,14 @@ import { isMobile } from '@deriv/shared';
import { localize, Localize, getLanguage } from '@deriv/translations';
import TradingAssessmentRadioButton from './trading-assessment-radio-buttons.jsx';
import TradingAssessmentDropdown from './trading-assessment-dropdown.jsx';
import InlineNoteWithIcon from 'Components/inline-note-with-icon';

const TradingAssessmentForm = ({
assessment_questions,
class_name,
disabled_items,
form_value,
is_eu,
onSubmit,
onCancel,
should_move_to_next,
Expand Down Expand Up @@ -120,9 +122,22 @@ const TradingAssessmentForm = ({

return (
<div className={classNames('trading-assessment', class_name)}>
<Text as='p' color='prominent' size='xxs' className='trading-assessment__side-note'>
<Localize i18n_default_text='In providing our services to you, we are required to obtain information from you in order to assess whether a given product or service is appropriate for you.' />
</Text>
{is_eu && (
<div className='details-form__banner-container'>
<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.'
)}
title={localize('Why do we collect this?')}
/>
</div>
)}
{!is_eu && (
<Text as='p' color='prominent' size='xxs' className='trading-assessment__side-note'>
<Localize i18n_default_text='In providing our services to you, we are required to obtain information from you in order to assess whether a given product or service is appropriate for you.' />
</Text>
)}
<section className={'trading-assessment__form'}>
<Formik initialValues={{ ...form_value }}>
{({ setFieldValue, values }) => {
Expand Down
2 changes: 2 additions & 0 deletions packages/account/src/Components/trading-assessment/trading-assessment-new-user.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ const TradingAssessmentNewUser = ({
disabled_items,
goToNextStep,
goToPreviousStep,
is_eu,
onSave,
onCancel,
onSubmit,
Expand Down Expand Up @@ -37,6 +38,7 @@ const TradingAssessmentNewUser = ({
<TradingAssessmentForm
assessment_questions={assessment_questions}
form_value={value}
is_eu={is_eu}
onSubmit={handleSubmit}
onCancel={handleCancel}
setSubSectionIndex={setSubSectionIndex}
Expand Down
1 change: 1 addition & 0 deletions packages/account/src/Configs/financial-details-config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +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',
net_income_enum: net_income_enum(),
occupation_enum: occupation_enum(),
other_instruments_trading_experience_enum: other_instruments_trading_experience_enum(),
Expand Down
1 change: 1 addition & 0 deletions packages/account/src/Configs/trading-assessment-config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -316,6 +316,7 @@ const tradingAssessmentConfig = (
props: {
validate: generateValidationFunction(real_account_signup_target, trading_assessment_form_config),
assessment_questions: trading_assessment_questions(),
is_eu: real_account_signup_target === 'maltainvest',
disabled_items: account_settings?.immutable_fields,
setSubSectionIndex,
},
Expand Down
28 changes: 14 additions & 14 deletions packages/appstore/src/constants/tour-steps-config-new.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,20 +77,20 @@ export const getTourStepConfigHighRisk = (): Step[] => [
disableBeacon: true,
disableOverlayClose: true,
},
{
title: (
<React.Fragment>
<Text as='p' weight='bold' color='brand-red-coral'>
{localize("Trader's Hub tour")}
<div className='toggle-account-type__divider' />
</Text>
</React.Fragment>
),
content: <Text as='p'>{localize('Click here if you ever need to repeat this tour.')}</Text>,
target: '.trading-hub-header__tradinghub--onboarding--logo',
disableBeacon: true,
disableOverlayClose: true,
},
// {
// title: (
// <React.Fragment>
// <Text as='p' weight='bold' color='brand-red-coral'>
// {localize("Trader's Hub tour")}
// <div className='toggle-account-type__divider' />
// </Text>
// </React.Fragment>
// ),
// content: <Text as='p'>{localize('Click here if you ever need to repeat this tour.')}</Text>,
// target: '.trading-hub-header__tradinghub--onboarding--logo',
// disableBeacon: true,
// disableOverlayClose: true,
// },
];

export const tour_styles: Styles = {
Expand Down
10 changes: 9 additions & 1 deletion packages/appstore/src/modules/onboarding/onboarding.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,9 +27,10 @@ type TOnboardingProps = {
const Onboarding = ({ contents = getTradingHubContents() }: TOnboardingProps) => {
const history = useHistory();
const number_of_steps = Object.keys(contents);
const { traders_hub, client } = useStores();
const { traders_hub, client, ui } = useStores();
const { toggleIsTourOpen, selectAccountType, is_demo_low_risk, content_flag } = traders_hub;
const { is_eu_country, is_logged_in, is_landing_company_loaded, prev_account_type, setPrevAccountType } = client;
const { setIsFromSignupAccount } = ui;
const [step, setStep] = React.useState<number>(1);

const prevStep = () => {
Expand Down Expand Up @@ -59,6 +60,8 @@ const Onboarding = ({ contents = getTradingHubContents() }: TOnboardingProps) =>
content_flag === ContentFlag.EU_REAL ||
content_flag === ContentFlag.EU_DEMO;

const eu_user_closed_real_account_first_time =
localStorage.getItem('eu_user_closed_real_account_first_time') || false;
const is_eu_user = (is_logged_in && eu_user) || (!is_logged_in && is_eu_country);
const onboarding_step = number_of_steps[step - 1];

Expand All @@ -76,6 +79,11 @@ const Onboarding = ({ contents = getTradingHubContents() }: TOnboardingProps) =>
return <EmptyOnboarding />;
}

if (is_logged_in && !eu_user_closed_real_account_first_time) {
setIsFromSignupAccount(true);
history.push(routes.traders_hub);
}

return (
<div className='onboarding-wrapper'>
<div className='onboarding-header'>
Expand Down
Loading