-
-
-
-
-
+
+
+
-
-
-
+
{!is_from_derivgo && (
);
-};
-
-DerivPassword.propTypes = {
- email: PropTypes.string,
- is_dark_mode_on: PropTypes.bool,
- is_eu_user: PropTypes.bool,
- financial_restricted_countries: PropTypes.bool,
- is_social_signup: PropTypes.bool,
- social_identity_provider: PropTypes.string,
-};
+});
export default DerivPassword;
diff --git a/packages/account/src/Sections/Security/Passwords/index.js b/packages/account/src/Sections/Security/Passwords/index.js
deleted file mode 100644
index 0c13bc42a994..000000000000
--- a/packages/account/src/Sections/Security/Passwords/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import Passwords from './passwords.jsx';
-
-export default Passwords;
diff --git a/packages/account/src/Sections/Security/Passwords/index.ts b/packages/account/src/Sections/Security/Passwords/index.ts
new file mode 100644
index 000000000000..04e64f927ceb
--- /dev/null
+++ b/packages/account/src/Sections/Security/Passwords/index.ts
@@ -0,0 +1,3 @@
+import Passwords from './passwords';
+
+export default Passwords;
diff --git a/packages/account/src/Sections/Security/Passwords/passwords-platform.jsx b/packages/account/src/Sections/Security/Passwords/passwords-platform.jsx
deleted file mode 100644
index 400884fb9178..000000000000
--- a/packages/account/src/Sections/Security/Passwords/passwords-platform.jsx
+++ /dev/null
@@ -1,111 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Button, Icon, Popover, Text } from '@deriv/components';
-import { CFD_PLATFORMS, WS, getPlatformSettings } from '@deriv/shared';
-import { localize, Localize } from '@deriv/translations';
-import FormSubHeader from 'Components/form-sub-header';
-import SentEmailModal from 'Components/sent-email-modal';
-
-const PasswordsPlatform = ({ email, has_dxtrade_accounts, has_mt5_accounts }) => {
- const [identifier, setIdenifier] = React.useState('');
- const [is_sent_email_modal_open, setIsSentEmailModalOpen] = React.useState(false);
-
- const platform_name_dxtrade = getPlatformSettings('dxtrade').name;
-
- const getPlatformTitle = () => {
- let title = '';
- if (has_mt5_accounts) {
- title = localize('Deriv MT5 Password');
- } else if (has_dxtrade_accounts) {
- title = localize('{{platform_name_dxtrade}} Password', { platform_name_dxtrade });
- }
- return title;
- };
-
- const onClickSendEmail = cfd_platform => {
- const password_reset_code =
- cfd_platform === CFD_PLATFORMS.MT5
- ? 'trading_platform_mt5_password_reset'
- : 'trading_platform_dxtrade_password_reset';
-
- WS.verifyEmail(email, password_reset_code, {
- url_parameters: {
- redirect_to: 3,
- },
- });
- setIdenifier(cfd_platform);
- setIsSentEmailModalOpen(true);
- };
-
- return (
-
-
-
- {has_mt5_accounts && (
-
-
-
-
-
-
-
-
-
- )}
- {has_dxtrade_accounts && (
-
-
-
-
-
-
-
-
-
- )}
-
setIsSentEmailModalOpen(false)}
- onClickSendEmail={onClickSendEmail}
- is_modal_when_mobile
- />
- {/*
- setIsSuccessDialogOpen(false)}
- /> */}
-
- );
-};
-
-PasswordsPlatform.propTypes = {
- email: PropTypes.string,
- has_dxtrade_accounts: PropTypes.bool,
- has_mt5_accounts: PropTypes.bool,
-};
-
-export default PasswordsPlatform;
diff --git a/packages/account/src/Sections/Security/Passwords/passwords-platform.tsx b/packages/account/src/Sections/Security/Passwords/passwords-platform.tsx
new file mode 100644
index 000000000000..a26e5f06b57b
--- /dev/null
+++ b/packages/account/src/Sections/Security/Passwords/passwords-platform.tsx
@@ -0,0 +1,100 @@
+import React from 'react';
+import { useMutation } from '@deriv/api';
+import { CFD_PLATFORMS, getPlatformSettings } from '@deriv/shared';
+import { observer, useStore } from '@deriv/stores';
+import { Localize, localize } from '@deriv/translations';
+import FormSubHeader from 'Components/form-sub-header';
+import SentEmailModal from 'Components/sent-email-modal';
+import PlatformPartials from './platform-partials';
+
+type TPasswordsPlatformProps = {
+ has_dxtrade_accounts?: boolean;
+ has_mt5_accounts?: boolean;
+};
+
+/**
+ * Displays a change password instructions for MT5 and/or DXTrade.
+ * @name PasswordsPlatform
+ * @param [has_dxtrade_accounts=false] - Whether the user has DXTrade accounts.
+ * @param [has_mt5_accounts=false] - Whether the user has MT5 accounts.
+ * @returns React.ReactNode
+ */
+const PasswordsPlatform = observer(
+ ({ has_dxtrade_accounts = false, has_mt5_accounts = false }: TPasswordsPlatformProps) => {
+ const { mutate } = useMutation('verify_email');
+
+ const {
+ client: { email },
+ } = useStore();
+
+ const [identifier, setIdentifier] = React.useState('');
+ const [is_sent_email_modal_open, setIsSentEmailModalOpen] = React.useState(false);
+
+ const platform_name_dxtrade = getPlatformSettings('dxtrade').name;
+
+ const getPlatformTitle = () => {
+ let title = '';
+ if (has_mt5_accounts) {
+ title = localize('Deriv MT5 Password');
+ } else if (has_dxtrade_accounts) {
+ title = localize('{{platform_name_dxtrade}} Password', { platform_name_dxtrade });
+ }
+ return title;
+ };
+
+ const onClickSendEmail = (cfd_platform?: string) => {
+ const password_reset_code =
+ cfd_platform === CFD_PLATFORMS.MT5
+ ? 'trading_platform_mt5_password_reset'
+ : 'trading_platform_dxtrade_password_reset';
+
+ mutate({
+ payload: {
+ verify_email: email,
+ type: password_reset_code,
+
+ url_parameters: {
+ redirect_to: 3,
+ },
+ },
+ });
+
+ setIdentifier(cfd_platform ?? '');
+ setIsSentEmailModalOpen(true);
+ };
+
+ return (
+
+
+
+ {has_mt5_accounts && (
+
+ }
+ />
+ )}
+ {has_dxtrade_accounts && (
+
+ }
+ />
+ )}
+
setIsSentEmailModalOpen(false)}
+ onClickSendEmail={onClickSendEmail}
+ is_modal_when_mobile
+ />
+
+ );
+ }
+);
+export default PasswordsPlatform;
diff --git a/packages/account/src/Sections/Security/Passwords/passwords.jsx b/packages/account/src/Sections/Security/Passwords/passwords.jsx
deleted file mode 100644
index 719d784a160c..000000000000
--- a/packages/account/src/Sections/Security/Passwords/passwords.jsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import React from 'react';
-import { Loading } from '@deriv/components';
-import { observer, useStore } from '@deriv/stores';
-import DerivPassword from './deriv-password.jsx';
-import DerivEmail from './deriv-email.jsx';
-import PasswordsPlatform from './passwords-platform.jsx';
-
-const Passwords = observer(() => {
- const [is_loading, setIsLoading] = React.useState(true);
- const { client, ui, common, traders_hub } = useStore();
- const {
- is_populating_mt5_account_list,
- is_populating_dxtrade_account_list,
- is_social_signup,
- email,
- social_identity_provider,
- mt5_login_list,
- is_mt5_password_not_set,
- dxtrade_accounts_list,
- is_dxtrade_password_not_set,
- } = client;
- const { is_from_derivgo } = common;
- const { is_eu_user, financial_restricted_countries } = traders_hub;
- const { is_dark_mode_on } = ui;
- React.useEffect(() => {
- if (
- is_populating_mt5_account_list === false &&
- is_populating_dxtrade_account_list === false &&
- is_social_signup !== undefined
- ) {
- setIsLoading(false);
- }
- }, [is_populating_mt5_account_list, is_populating_dxtrade_account_list, is_social_signup]);
-
- if (is_loading) {
- return
;
- }
-
- return (
-
-
-
- {!is_from_derivgo && (mt5_login_list?.length > 0 || !is_mt5_password_not_set) && (
-
0 || !is_mt5_password_not_set}
- />
- )}
- {!is_from_derivgo && (dxtrade_accounts_list?.length > 0 || !is_dxtrade_password_not_set) && (
- 0 || !is_dxtrade_password_not_set}
- />
- )}
-
- );
-});
-
-export default Passwords;
diff --git a/packages/account/src/Sections/Security/Passwords/passwords.tsx b/packages/account/src/Sections/Security/Passwords/passwords.tsx
new file mode 100644
index 000000000000..59a4dfde3931
--- /dev/null
+++ b/packages/account/src/Sections/Security/Passwords/passwords.tsx
@@ -0,0 +1,56 @@
+import React from 'react';
+import { Loading } from '@deriv/components';
+import { observer, useStore } from '@deriv/stores';
+import DerivPassword from './deriv-password';
+import DerivEmail from './deriv-email';
+import PasswordsPlatform from './passwords-platform';
+
+/**
+ * Displays the Email, Password, section under Account settings.
+ * @name Passwords
+ * @returns {React.ReactNode}
+ */
+const Passwords = observer(() => {
+ const { client, common } = useStore();
+ const {
+ is_populating_mt5_account_list,
+ is_populating_dxtrade_account_list,
+ is_social_signup,
+ mt5_login_list,
+ is_mt5_password_not_set,
+ dxtrade_accounts_list,
+ is_dxtrade_password_not_set,
+ } = client;
+ const { is_from_derivgo } = common;
+
+ const [is_loading, setIsLoading] = React.useState(true);
+ const has_mt5_accounts = mt5_login_list?.length > 0 || !is_mt5_password_not_set;
+ const has_dxtrade_accounts = dxtrade_accounts_list?.length > 0 || !is_dxtrade_password_not_set;
+
+ React.useEffect(() => {
+ if (
+ is_populating_mt5_account_list === false &&
+ is_populating_dxtrade_account_list === false &&
+ is_social_signup !== undefined
+ ) {
+ setIsLoading(false);
+ }
+ }, [is_populating_mt5_account_list, is_populating_dxtrade_account_list, is_social_signup]);
+
+ if (is_loading) {
+ return
;
+ }
+
+ return (
+
+
+
+ {!is_from_derivgo && has_mt5_accounts &&
}
+ {!is_from_derivgo && has_dxtrade_accounts && (
+
+ )}
+
+ );
+});
+
+export default Passwords;
diff --git a/packages/account/src/Sections/Security/Passwords/platform-description.tsx b/packages/account/src/Sections/Security/Passwords/platform-description.tsx
new file mode 100644
index 000000000000..ecbfbff8dad2
--- /dev/null
+++ b/packages/account/src/Sections/Security/Passwords/platform-description.tsx
@@ -0,0 +1,85 @@
+import React from 'react';
+import { Localize } from '@deriv/translations';
+
+type TPlatformDescription = {
+ brand_website_name: string;
+ platform_values: {
+ platform_name_trader: string;
+ platform_name_dbot: string;
+ platform_name_smarttrader: string;
+ platform_name_go: string;
+ platform_name_ctrader: string;
+ };
+ is_eu_user: boolean;
+ financial_restricted_countries: boolean;
+};
+
+/**
+ * Renders description for the platforms.
+ * @name PlatformDescription
+ * @param brand_website_name - Name of the website
+ * @param platform_values - Object containing platform names
+ * @param is_eu_user - Boolean value to check if user is from EU
+ * @param financial_restricted_countries - Boolean value to check if user is from a restricted country
+ * @returns Returns a react node
+ */
+const PlatformDescription = ({
+ brand_website_name,
+ platform_values,
+ is_eu_user,
+ financial_restricted_countries,
+}: TPlatformDescription) => {
+ const {
+ platform_name_trader,
+ platform_name_dbot,
+ platform_name_smarttrader,
+ platform_name_go,
+ platform_name_ctrader,
+ } = platform_values;
+ if (is_eu_user) {
+ return (
+
Deriv password to log in to {{brand_website_name}} and {{platform_name_trader}}.'
+ }
+ components={[]}
+ values={{
+ brand_website_name,
+ platform_name_trader,
+ }}
+ />
+ );
+ } else if (financial_restricted_countries) {
+ return (
+ Deriv password to log in to {{brand_website_name}}, {{platform_name_trader}} and {{platform_name_go}}.'
+ }
+ components={[]}
+ values={{
+ brand_website_name,
+ platform_name_trader,
+ platform_name_go,
+ }}
+ />
+ );
+ }
+ return (
+ Deriv password to log in to {{brand_website_name}}, {{platform_name_go}}, {{platform_name_trader}}, {{platform_name_smarttrader}}, {{platform_name_dbot}} and {{platform_name_ctrader}}.'
+ }
+ components={[]}
+ values={{
+ brand_website_name,
+ platform_name_trader,
+ platform_name_dbot,
+ platform_name_smarttrader,
+ platform_name_go,
+ platform_name_ctrader,
+ }}
+ />
+ );
+};
+
+export default PlatformDescription;
diff --git a/packages/account/src/Sections/Security/Passwords/platform-partials.tsx b/packages/account/src/Sections/Security/Passwords/platform-partials.tsx
new file mode 100644
index 000000000000..92e03a2f108c
--- /dev/null
+++ b/packages/account/src/Sections/Security/Passwords/platform-partials.tsx
@@ -0,0 +1,45 @@
+import React from 'react';
+import { Button, Icon, Popover, Text } from '@deriv/components';
+import { getPlatformSettings, CFD_PLATFORMS } from '@deriv/shared';
+import { localize } from '@deriv/translations';
+
+type TPlatformPartialsProps = {
+ description: JSX.Element;
+ type: typeof CFD_PLATFORMS[keyof typeof CFD_PLATFORMS];
+ handleClick: (type: typeof CFD_PLATFORMS[keyof typeof CFD_PLATFORMS]) => void;
+};
+
+/**
+ * Component for displaying a change password instructions for a platform
+ * @name PlatformPartials
+ * @param description - The description of the platform
+ * @param type - The type of the platform
+ * @param handleClick - The function to call when the button is clicked
+ * @returns React.ReactNode
+ */
+const PlatformPartials = ({ description, type, handleClick }: TPlatformPartialsProps) => {
+ const platform_config = getPlatformSettings(type);
+
+ return (
+
+
+ {description}
+
+
+
+
+
+