bahar/landing_on_dtrader_responsive_page_frequently_after_clicking_ca…

…shier (#4917)

* landing_on_dtrader_responsive_page_frequently_after_clicking_cashier_or_settings_option

* fix_issue_with_account_setting

* hide_more_options

* add_derivgo_condition_for_hiding_option

* refactor

* chore: renamed variables

* fix_issue

Co-authored-by: yashim-deriv <yashim@deriv.com>

packages/account/src/Components/account-limits/account-limits-article.jsx

@@ -1,22 +1,32 @@
+import PropTypes from 'prop-types';
 import * as React from 'react';
 import { StaticUrl } from '@deriv/components';
 import { Localize, localize } from '@deriv/translations';
 import AccountArticle from 'Components/article/article.jsx';
 
-const AccountLimitsArticle = () => {
-    return (
-        <AccountArticle
-            title={localize('Account limits')}
-            descriptions={[
-                <Localize key={0} i18n_default_text='These are default limits that we apply to your accounts.' />,
+const AccountLimitsArticle = ({ is_from_derivgo }) => {
+    const getDescription = () => {
+        const description = [
+            <Localize key={0} i18n_default_text='These are default limits that we apply to your accounts.' />,
+        ];
+
+        if (!is_from_derivgo) {
+            description.push(
                 <Localize
                     key={1}
                     i18n_default_text='To learn more about trading limits and how they apply, please go to the <0>Help Centre.</0>'
                     components={[<StaticUrl key={0} className='link' href='/help-centre/trading/#trading-limits' />]}
-                />,
-            ]}
-        />
-    );
+                />
+            );
+        }
+        return description;
+    };
+
+    return <AccountArticle title={localize('Account limits')} descriptions={getDescription()} />;
+};
+
+AccountLimitsArticle.propTypes = {
+    is_from_derivgo: PropTypes.bool,
 };
 
 export default AccountLimitsArticle;

packages/account/src/Components/account-limits/account-limits.jsx

@@ -25,6 +25,7 @@ const AccountLimits = ({
     is_switching,
     is_virtual,
     overlay_ref,
+    is_from_derivgo,
     setIsOverlayShown: setIsPopupOverlayShown,
     should_bypass_scrollbars,
     should_show_article,
@@ -116,7 +117,7 @@ const AccountLimits = ({
                         'da-account-limits--app-settings': is_app_settings,
                     })}
                 >
-                    {should_show_article && isMobile() && <AccountLimitsArticle />}
+                    {should_show_article && isMobile() && <AccountLimitsArticle is_from_derivgo={is_from_derivgo} />}
                     <div className='da-account-limits__table-wrapper'>
                         <ThemedScrollbars is_bypassed={should_bypass_scrollbars || isMobile()}>
                             <table className='da-account-limits__table'>
@@ -343,6 +344,7 @@ AccountLimits.propTypes = {
     is_app_settings: PropTypes.bool,
     getLimits: PropTypes.func.isRequired,
     is_fully_authenticated: PropTypes.bool.isRequired,
+    is_from_derivgo: PropTypes.bool,
     is_switching: PropTypes.bool.isRequired,
     is_virtual: PropTypes.bool.isRequired,
     overlay_ref: PropTypes.shape({ current: PropTypes.any }),

packages/account/src/Containers/account.jsx

@@ -2,14 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { withRouter } from 'react-router-dom';
 import { VerticalTab, FadeWrapper, PageOverlay, Loading, Text } from '@deriv/components';
-import {
-    routes as shared_routes,
-    isMobile,
-    matchRoute,
-    getSelectedRoute,
-    platforms,
-    PlatformContext,
-} from '@deriv/shared';
+import { routes as shared_routes, isMobile, matchRoute, getSelectedRoute, PlatformContext } from '@deriv/shared';
 import { localize } from '@deriv/translations';
 import { connect } from 'Stores/connect';
 import { flatten } from '../Helpers/flatten';
@@ -35,21 +28,17 @@ const AccountLogout = ({ logout, history }) => {
 };
 
 const PageOverlayWrapper = ({
+    is_from_derivgo,
     is_appstore,
     list_groups,
     logout,
     onClickClose,
-    platform,
     selected_route,
     subroutes,
 }) => {
     if (isMobile() && selected_route) {
         return (
-            <PageOverlay
-                header={selected_route.getTitle()}
-                onClickClose={onClickClose}
-                is_close_disabled={!!platforms[platform]}
-            >
+            <PageOverlay header={selected_route.getTitle()} onClickClose={onClickClose} is_from_app={is_from_derivgo}>
                 <selected_route.component component_icon={selected_route.icon_component} />
             </PageOverlay>
         );
@@ -75,11 +64,7 @@ const PageOverlayWrapper = ({
     }
 
     return (
-        <PageOverlay
-            header={localize('Settings')}
-            onClickClose={onClickClose}
-            is_close_disabled={!!platforms[platform]}
-        >
+        <PageOverlay header={localize('Settings')} onClickClose={onClickClose} is_from_app={is_from_derivgo}>
             <VerticalTab
                 alignment='center'
                 is_floating
@@ -97,6 +82,7 @@ const PageOverlayWrapper = ({
 const Account = ({
     currency,
     history,
+    is_from_derivgo,
     is_logged_in,
     is_logging_in,
     is_virtual,
@@ -171,6 +157,7 @@ const Account = ({
         <FadeWrapper is_visible={is_visible} className='account-page-wrapper' keyname='account-page-wrapper'>
             <div className='account'>
                 <PageOverlayWrapper
+                    is_from_derivgo={is_from_derivgo}
                     is_appstore={is_appstore}
                     list_groups={list_groups}
                     logout={logout}
@@ -189,6 +176,7 @@ Account.propTypes = {
     history: PropTypes.object,
     is_logged_in: PropTypes.bool,
     is_logging_in: PropTypes.bool,
+    is_from_derivgo: PropTypes.bool,
     is_virtual: PropTypes.bool,
     is_visible: PropTypes.bool,
     location: PropTypes.object,
@@ -203,6 +191,7 @@ export default connect(({ client, common, ui }) => ({
     currency: client.currency,
     is_logged_in: client.is_logged_in,
     is_logging_in: client.is_logging_in,
+    is_from_derivgo: common.is_from_derivgo,
     is_virtual: client.is_virtual,
     is_visible: ui.is_account_settings_visible,
     logout: client.logout,

packages/account/src/Sections/Security/AccountLimits/account-limits.jsx

@@ -1,11 +1,12 @@
 import AccountLimits from 'Components/account-limits/account-limits.jsx';
 import { connect } from 'Stores/connect';
 
-export default connect(({ client, ui }) => ({
+export default connect(({ client, common, ui }) => ({
     account_limits: client.account_limits,
     currency: client.currency,
     getLimits: client.getLimits,
     is_fully_authenticated: client.is_fully_authenticated,
+    is_from_derivgo: common.is_from_derivgo,
     is_virtual: client.is_virtual,
     is_switching: client.is_switching,
     should_show_article: true,

packages/cashier/src/Components/CashierDefault/cashier-default.jsx

@@ -17,6 +17,7 @@ const CashierDefault = ({
     is_dark_mode_on,
     is_landing_company_loaded,
     is_mobile,
+    is_from_derivgo,
     is_payment_agent_visible_in_onboarding,
     is_switching,
     onMountCashierDefault,
@@ -154,7 +155,7 @@ const CashierDefault = ({
                         <Localize i18n_default_text='Please note that some payment methods might not be available in your country.' />
                     </Text>
                 </div>
-                {is_mobile && (
+                {is_mobile && !is_from_derivgo && (
                     <div
                         className='cashier-default-header-learn-more'
                         onClick={() => window.open(getStaticUrl('/payment-methods'))}
@@ -192,6 +193,7 @@ CashierDefault.propTypes = {
     is_dark_mode_on: PropTypes.bool,
     is_landing_company_loaded: PropTypes.bool,
     is_mobile: PropTypes.bool,
+    is_from_derivgo: PropTypes.bool,
     is_payment_agent_visible_in_onboarding: PropTypes.bool,
     is_switching: PropTypes.bool,
     onMountCashierDefault: PropTypes.func,
@@ -208,14 +210,15 @@ CashierDefault.propTypes = {
     toggleSetCurrencyModal: PropTypes.func,
 };
 
-export default connect(({ client, modules, ui }) => ({
+export default connect(({ client, common, modules, ui }) => ({
     accounts_list: modules.cashier.account_transfer.accounts_list,
     available_crypto_currencies: client.available_crypto_currencies,
     currency: client.currency,
     has_set_currency: modules.cashier.general_store.has_set_currency,
     is_dark_mode_on: ui.is_dark_mode_on,
     is_landing_company_loaded: client.is_landing_company_loaded,
     is_mobile: ui.is_mobile,
+    is_from_derivgo: common.is_from_derivgo,
     is_payment_agent_visible_in_onboarding: modules.cashier.payment_agent.is_payment_agent_visible_in_onboarding,
     is_switching: client.is_switching,
     onMountCashierDefault: modules.cashier.general_store.onMountCashierDefault,

packages/cashier/src/Components/Receipt/account-transfer-receipt.jsx

@@ -11,6 +11,7 @@ const AccountTransferReceipt = ({
     disableApp,
     enableApp,
     history,
+    is_from_derivgo,
     loginid,
     receipt,
     resetAccountTransfer,
@@ -106,14 +107,16 @@ const AccountTransferReceipt = ({
                 </div>
             </div>
             <div className='account-transfer-receipt__crypto--form-submit'>
-                <Button
-                    className='account-transfer-receipt__button'
-                    has_effect
-                    text={localize('View transaction details')}
-                    onClick={checkAccount}
-                    secondary
-                    large
-                />
+                {!is_from_derivgo && (
+                    <Button
+                        className='account-transfer-receipt__button'
+                        has_effect
+                        text={localize('View transaction details')}
+                        onClick={checkAccount}
+                        secondary
+                        large
+                    />
+                )}
                 <Button
                     className='account-transfer-receipt__button'
                     has_effect
@@ -157,6 +160,7 @@ const AccountTransferReceipt = ({
 AccountTransferReceipt.propTypes = {
     disableApp: PropTypes.func,
     enableApp: PropTypes.func,
+    is_from_derivgo: PropTypes.bool,
     loginid: PropTypes.string,
     receipt: PropTypes.object,
     resetAccountTransfer: PropTypes.func,
@@ -166,14 +170,15 @@ AccountTransferReceipt.propTypes = {
 };
 
 export default withRouter(
-    connect(({ client, modules, ui }) => ({
+    connect(({ client, common, modules, ui }) => ({
+        disableApp: ui.disableApp,
+        enableApp: ui.enableApp,
+        is_from_derivgo: common.is_from_derivgo,
         loginid: client.loginid,
-        switchAccount: client.switchAccount,
         receipt: modules.cashier.account_transfer.receipt,
         resetAccountTransfer: modules.cashier.account_transfer.resetAccountTransfer,
         selected_from: modules.cashier.account_transfer.selected_from,
         selected_to: modules.cashier.account_transfer.selected_to,
-        disableApp: ui.disableApp,
-        enableApp: ui.enableApp,
+        switchAccount: client.switchAccount,
     }))(AccountTransferReceipt)
 );

packages/cashier/src/Components/Receipt/payment-agent-receipt.jsx

@@ -13,7 +13,7 @@ const openStatement = (history, resetPaymentAgent) => {
     resetPaymentAgent();
 };
 
-const PaymentAgentReceipt = ({ currency, history, loginid, receipt, resetPaymentAgent }) => {
+const PaymentAgentReceipt = ({ currency, history, is_from_derivgo, loginid, receipt, resetPaymentAgent }) => {
     React.useEffect(() => {
         return () => resetPaymentAgent();
     }, [resetPaymentAgent]);
@@ -107,14 +107,16 @@ const PaymentAgentReceipt = ({ currency, history, loginid, receipt, resetPayment
                 </div>
             )}
             <div className='cashier__form-submit'>
-                <Button
-                    className='cashier__form-submit-button'
-                    has_effect
-                    text={localize('View in statement')}
-                    onClick={() => openStatement(history, resetPaymentAgent)}
-                    secondary
-                    large
-                />
+                {!is_from_derivgo && (
+                    <Button
+                        className='cashier__form-submit-button'
+                        has_effect
+                        text={localize('View in statement')}
+                        onClick={() => openStatement(history, resetPaymentAgent)}
+                        secondary
+                        large
+                    />
+                )}
                 <Button
                     className='cashier__form-submit-button cashier__done-button'
                     has_effect
@@ -131,14 +133,16 @@ const PaymentAgentReceipt = ({ currency, history, loginid, receipt, resetPayment
 PaymentAgentReceipt.propTypes = {
     currency: PropTypes.string,
     history: PropTypes.object,
+    is_from_derivgo: PropTypes.bool,
     loginid: PropTypes.string,
     receipt: PropTypes.object,
     resetPaymentAgent: PropTypes.func,
 };
 
 export default withRouter(
-    connect(({ client, modules }) => ({
+    connect(({ client, common, modules }) => ({
         currency: client.currency,
+        is_from_derivgo: common.is_from_derivgo,
         loginid: client.loginid,
         receipt: modules.cashier.payment_agent.receipt,
         resetPaymentAgent: modules.cashier.payment_agent.resetPaymentAgent,

packages/cashier/src/Components/Receipt/payment-agent-transfer-receipt.jsx

@@ -12,7 +12,14 @@ const openStatement = (history, resetPaymentAgentTransfer) => {
     resetPaymentAgentTransfer();
 };
 
-const PaymentAgentTransferReceipt = ({ currency, history, loginid, receipt, resetPaymentAgentTransfer }) => (
+const PaymentAgentTransferReceipt = ({
+    currency,
+    history,
+    is_from_derivgo,
+    loginid,
+    receipt,
+    resetPaymentAgentTransfer,
+}) => (
     <div className='cashier__wrapper payment-agent-transfer-receipt__wrapper'>
         <div className='cashier__success'>
             <Text as='h2' color='prominent' align='center' weight='bold' className='cashier__header'>
@@ -56,14 +63,16 @@ const PaymentAgentTransferReceipt = ({ currency, history, loginid, receipt, rese
             </div>
         </div>
         <div className='cashier__form-submit'>
-            <Button
-                className='cashier__form-submit-button'
-                has_effect
-                text={localize('View in statement')}
-                onClick={() => openStatement(history, resetPaymentAgentTransfer)}
-                secondary
-                large
-            />
+            {!is_from_derivgo && (
+                <Button
+                    className='cashier__form-submit-button'
+                    has_effect
+                    text={localize('View in statement')}
+                    onClick={() => openStatement(history, resetPaymentAgentTransfer)}
+                    secondary
+                    large
+                />
+            )}
             <Button
                 className='cashier__form-submit-button cashier__done-button'
                 has_effect
@@ -79,14 +88,16 @@ const PaymentAgentTransferReceipt = ({ currency, history, loginid, receipt, rese
 PaymentAgentTransferReceipt.propTypes = {
     currency: PropTypes.string,
     history: PropTypes.object,
+    is_from_derivgo: PropTypes.bool,
     loginid: PropTypes.string,
     receipt: PropTypes.object,
     resetPaymentAgentTransfer: PropTypes.func,
 };
 
 export default withRouter(
-    connect(({ client, modules }) => ({
+    connect(({ client, common, modules }) => ({
         currency: client.currency,
+        is_from_derivgo: common.is_from_derivgo,
         loginid: client.loginid,
         receipt: modules.cashier.payment_agent_transfer.receipt,
         resetPaymentAgentTransfer: modules.cashier.payment_agent_transfer.resetPaymentAgentTransfer,