Farzin/70772/Refactor cashier locked component (#5929)

* added ts related change required for migrating all components (#5760)

* ts-migration-crypto-fiat-converter (#5796)

* Trigger build

* Update package-lock

* ts-migration-cashier-notifications (#5765)

* bahar/funds_protection_component-ts-migration (#5756)

* funds_protection_component-ts-migration

* remove_extra_type_file

* fix_merge_issue

* hamid/migrate-transfer-confirm-to-ts (#5815)

* Migrate TransferConfirm to TS

* Rename component in test file

* Replace Confirm with TransferConfirm in PAs

* Enhance Tests

* ts-migration-page-404 (#5766)

* Vinu/converted percentage-selector component into typescript (#5785)

* converted percentage-selector component into typescript

* changed the name of test_ids in percentage-selector spec file as per new guidlines

* updated with latest upstream branch

* added reactMouse event in props.types.ts

* Vinu/migrated recent-transaction component to typescript (#5791)

* migrated recent-transaction component to typescript

* fixed Rootsore path in recent-transaction

* tsconfig.json change in types path

* ts-migration-verification-email (#5769)

* bahar/Ts migration no balance (#5774)

* ts-migration-no-balance

* fix_merge_issue

* Vinu/migrating cashier-container into ts (#5780)

* migrting cashier-container into ts WIP

* added type in virtual.tsx

* changed test-ids in cashier-container

* updated the branch with latest upstream branch

* fixed Rootsore path in cashier-container

* tsconfig.json change in types path

* refactor(cashier): ♻️ extract empty state component into a reusable component

* refactor(cashier): ✨ extract all cashier empty states into separate components

* refactor(cashier): 🔥 clean up cashier locked component using empty states

* fix(cashier): ✏️ fix wrong message in `EmptyStateDepositLockedSystemMaintenance`

* Vinu/Ts cashier error dialog (#5820)

* migrated error-dialog to typescript

* removed proptypes from error-dialog

* added appropriate types to message variable in error-dialog

* updated code with latest upstream branch

* fixed type of rootstore in error-dialog

* fixed Rootsore path in error dialog

* added type for ReactElement in props.types.ts cashier

* Vinu/migration of crypto-transaction-history component into typescript (#5834)

* migration of crypto-transaction-history component into typescript

* Trigger Build

* Trigger Build

* fixed Rootstore path in crypto-transactions-history

* added type for crypto-transaction-details

* added ReactMouseEvent in prop.types

* added data-testid's in crypto-transaction-renderer component

* Migrate CashierLocked to TS (#5959)

* Fix security hotspot reported by sonarcloud

* fix(cashier): 📝 resolve PR comments

* fix(cashier): 📝 resolve PR comments

* fix(cashier): 📝 resolve PR comments

* fix(cashier): 📝 resolve PR comments

* refactor(cashier): ♻️ refactor the initial solution with the suggested one in the pr comments

* fix(cashier): ✅ fix the failing test

* fix(cashier): 📝 resolve PR comments

* fix(cashier): 📝 resolve PR comments

* chore(cashier): 🔀 resolve merge conflic

* fix(cashier): 💄 fix inconsistenc padding in cashier tabs when cashier locked

* fix(cashier): 📝 resolve PR comments

* feat(cashier): ✨ handle `PACommisionWithdrawalLimit` state in `CashierLocked`

Co-authored-by: vinu-deriv <100689171+vinu-deriv@users.noreply.github.com>
Co-authored-by: Nijil Nirmal <nijil@deriv.com>
Co-authored-by: Bahar <bahar@firstsource.tech>
Co-authored-by: Hamid <hamid@re-work.dev>

packages/cashier/src/components/cashier-locked/cashier-locked-provider.tsx

@@ -0,0 +1,375 @@
+import React from 'react';
+import { Localize, localize } from '@deriv/translations';
+import { formatDate } from '@deriv/shared';
+import { TEmptyStateProps } from 'Components/empty-state/empty-state';
+
+type TProps = {
+    cashier_validation: string[] | undefined;
+    is_crypto: boolean;
+    is_system_maintenance: boolean;
+    is_cashier_locked: boolean;
+    is_deposit_locked: boolean;
+    is_withdrawal_locked: boolean;
+    is_identity_verification_needed: boolean;
+    excluded_until: number | undefined;
+};
+
+const getMessage = ({
+    cashier_validation,
+    is_crypto,
+    is_system_maintenance,
+    is_cashier_locked,
+    is_deposit_locked,
+    is_withdrawal_locked,
+    is_identity_verification_needed,
+    excluded_until,
+}: TProps): TEmptyStateProps => {
+    const no_residence = cashier_validation?.includes('no_residence');
+    const unwelcome_status = cashier_validation?.includes('unwelcome_status');
+    const self_exclusion = cashier_validation?.includes('SelfExclusion');
+    const no_withdrawal_or_trading_status = cashier_validation?.includes('no_withdrawal_or_trading_status');
+    const only_pa_withdrawals_allowed_status = cashier_validation?.includes('only_pa_withdrawals_allowed_status');
+    const withdraw_service_unavailable_for_pa = cashier_validation?.includes('WithdrawServiceUnavailableForPA');
+    const withdrawal_locked_status = cashier_validation?.includes('withdrawal_locked_status');
+    const documents_expired = cashier_validation?.includes('documents_expired');
+    const cashier_locked_status = cashier_validation?.includes('cashier_locked_status');
+    const disabled_status = cashier_validation?.includes('disabled_status');
+    const financial_assessment_required = cashier_validation?.includes('FinancialAssessmentRequired');
+    const ask_currency = cashier_validation?.includes('ASK_CURRENCY');
+    const ask_authenticate = cashier_validation?.includes('ASK_AUTHENTICATE');
+    const ask_financial_risk_approval = cashier_validation?.includes('ASK_FINANCIAL_RISK_APPROVAL');
+    const ask_tin_information = cashier_validation?.includes('ASK_TIN_INFORMATION');
+    const ask_self_exclusion_max_turnover_set = cashier_validation?.includes('ASK_SELF_EXCLUSION_MAX_TURNOVER_SET');
+    const ask_fix_details = cashier_validation?.includes('ASK_FIX_DETAILS');
+    const ask_uk_funds_protection = cashier_validation?.includes('ASK_UK_FUNDS_PROTECTION');
+    const pa_commision_withdrawal_limit = cashier_validation?.includes('PACommisionWithdrawalLimit');
+
+    if (is_system_maintenance) {
+        if (is_crypto && is_withdrawal_locked)
+            return {
+                icon: 'IcCashierLocked',
+                title: localize('Withdrawals are locked'),
+                description: localize(
+                    'Withdrawals are temporarily unavailable due to system maintenance. You can make your withdrawals when the maintenance is complete.'
+                ),
+            };
+        if (is_crypto && is_deposit_locked)
+            return {
+                icon: 'IcCashierLocked',
+                title: localize('Cashier is locked'),
+                description: localize(
+                    'Deposits are temporarily unavailable due to system maintenance. You can make your deposits when the maintenance is complete.'
+                ),
+            };
+        if (is_crypto)
+            return {
+                icon: 'IcCashierLocked',
+                title: localize('Cashier is locked'),
+                description: localize(
+                    'Our cryptocurrency cashier is temporarily down due to system maintenance. You can access the Cashier in a few minutes when the maintenance is complete.'
+                ),
+            };
+        return {
+            icon: 'IcCashierLocked',
+            title: localize('Cashier is locked'),
+            description: localize(
+                'Our cashier is temporarily down due to system maintenance. You can access the Cashier in a few minutes when the maintenance is complete.'
+            ),
+        };
+    }
+
+    if (is_cashier_locked) {
+        if (no_residence)
+            return {
+                icon: 'IcCashierLocked',
+                title: localize('Cashier is locked'),
+                description: localize(
+                    'You’ve not set your country of residence. To access Cashier, please update your country of residence in the Personal details section in your account settings.'
+                ),
+            };
+        if (documents_expired)
+            return {
+                icon: 'IcCashierLocked',
+                title: localize('Cashier is locked'),
+                description: localize(
+                    'The identification documents you submitted have expired. Please submit valid identity documents to unlock Cashier. '
+                ),
+            };
+        if (cashier_locked_status)
+            return {
+                icon: 'IcCashierLocked',
+                title: localize('Cashier is locked'),
+                description: localize(
+                    'Your cashier is currently locked. Please contact us via live chat to find out how to unlock it.'
+                ),
+            };
+        if (disabled_status)
+            return {
+                icon: 'IcCashierLocked',
+                title: localize('Cashier is locked'),
+                description: localize(
+                    'Your account is temporarily disabled. Please contact us via live chat to enable deposits and withdrawals again.'
+                ),
+            };
+        if (ask_currency)
+            return {
+                icon: 'IcCashierLocked',
+                title: localize('Cashier is locked'),
+                description: localize('Please set your account currency to enable deposits and withdrawals.'),
+            };
+        if (ask_authenticate && is_identity_verification_needed)
+            return {
+                icon: 'IcCashierLocked',
+                title: localize('Cashier is locked'),
+                description: (
+                    <Localize
+                        i18n_default_text='Please submit your <0>proof of identity</0> to authenticate your account and access your Cashier.'
+                        components={[<a key={0} className='link' href={'/account/proof-of-identity'} />]}
+                    />
+                ),
+            };
+        if (ask_authenticate)
+            return {
+                icon: 'IcCashierLocked',
+                title: localize('Cashier is locked'),
+                description: (
+                    <Localize
+                        i18n_default_text='Your account has not been authenticated. Please submit your <0>proof of identity</0> and <1>proof of address</1> to authenticate your account and access your cashier.'
+                        components={[
+                            <a
+                                key={0}
+                                className='link'
+                                rel='noopener noreferrer'
+                                href={'/account/proof-of-identity'}
+                            />,
+                            <a key={1} className='link' rel='noopener noreferrer' href={'/account/proof-of-address'} />,
+                        ]}
+                    />
+                ),
+            };
+        if (ask_financial_risk_approval)
+            return {
+                icon: 'IcCashierLocked',
+                title: localize('Cashier is locked'),
+                description: (
+                    <Localize
+                        i18n_default_text='Please complete the <0>Appropriateness Test</0> to access your cashier.'
+                        components={[
+                            <a
+                                key={0}
+                                className='link'
+                                rel='noopener noreferrer'
+                                href={'/account/financial-assessment'}
+                                data-testid='dt_financial_assessment_link'
+                            />,
+                        ]}
+                    />
+                ),
+            };
+        if (financial_assessment_required)
+            return {
+                icon: 'IcCashierLocked',
+                title: localize('Cashier is locked'),
+                description: (
+                    <Localize
+                        i18n_default_text='Your cashier is locked. Please complete the <0>financial assessment</0> to unlock it.'
+                        components={[
+                            <a
+                                key={0}
+                                className='link'
+                                rel='noopener noreferrer'
+                                href={'/account/financial-assessment'}
+                                data-testid='dt_financial_assessment_link'
+                            />,
+                        ]}
+                    />
+                ),
+            };
+        if (ask_tin_information)
+            return {
+                icon: 'IcCashierLocked',
+                title: localize('Cashier is locked'),
+                description: (
+                    <Localize
+                        i18n_default_text='You have not provided your tax identification number. This information is necessary for legal and regulatory requirements. Please go to <0>Personal details</0> in your account settings, and fill in your latest tax identification number.'
+                        components={[
+                            <a key={0} className='link' rel='noopener noreferrer' href={'/account/personal-details'} />,
+                        ]}
+                    />
+                ),
+            };
+        if (ask_uk_funds_protection)
+            return {
+                icon: 'IcCashierLocked',
+                title: localize('Cashier is locked'),
+                description: (
+                    <Localize
+                        i18n_default_text='Your cashier is locked. See <0>how we protect your funds</0> before you proceed.'
+                        components={[
+                            <a key={0} className='link' rel='noopener noreferrer' href={'/cashier/deposit'} />,
+                        ]}
+                    />
+                ),
+            };
+        if (ask_self_exclusion_max_turnover_set)
+            return {
+                icon: 'IcCashierLocked',
+                title: localize('Cashier is locked'),
+                description: (
+                    <Localize
+                        i18n_default_text='Your access to Cashier has been temporarily disabled as you have not set your 30-day turnover limit. Please go to <0>Self-exclusion</0> and set your 30-day turnover limit.'
+                        components={[
+                            <a key={0} className='link' rel='noopener noreferrer' href={'/account/self-exclusion'} />,
+                        ]}
+                    />
+                ),
+            };
+        if (ask_fix_details)
+            return {
+                icon: 'IcCashierLocked',
+                title: localize('Cashier is locked'),
+                description: (
+                    <Localize
+                        i18n_default_text='Your <0>personal details</0> are incomplete. Please go to your account settings and complete your personal details to enable deposits and withdrawals.'
+                        components={[
+                            <a key={0} className='link' rel='noopener noreferrer' href={'/account/personal-details'} />,
+                        ]}
+                    />
+                ),
+            };
+    }
+
+    if (is_deposit_locked) {
+        if (ask_fix_details)
+            return {
+                icon: 'IcCashierDepositLock',
+                title: localize('Deposits are locked'),
+                description: (
+                    <Localize
+                        i18n_default_text='Your <0>personal details</0> are incomplete. Please go to your account settings and complete your personal details to enable deposits.'
+                        components={[
+                            <a key={0} className='link' rel='noopener noreferrer' href={'/account/personal-details'} />,
+                        ]}
+                    />
+                ),
+            };
+        if (self_exclusion)
+            return {
+                icon: 'IcCashierDepositLock',
+                title: localize('Deposits are locked'),
+                description: localize(
+                    'You have chosen to exclude yourself from trading on our website until {{exclude_until}}. If you are unable to place a trade or deposit after your self-exclusion period, please contact us via live chat.',
+                    {
+                        exclude_until: formatDate(excluded_until, 'DD MMM, YYYY'),
+                    }
+                ),
+            };
+        if (unwelcome_status)
+            return {
+                icon: 'IcCashierDepositLock',
+                title: localize('Deposits are locked'),
+                description: localize('Please contact us via live chat.'),
+            };
+    }
+
+    if (is_withdrawal_locked) {
+        if (financial_assessment_required)
+            return {
+                icon: 'IcCashierWithdrawalLock',
+                title: localize('Withdrawals are locked'),
+                description: (
+                    <Localize
+                        i18n_default_text='You can only make deposits. Please complete the <0>financial assessment</0> to unlock withdrawals.'
+                        components={[
+                            <a
+                                key={0}
+                                className='link'
+                                href={'/account/financial-assessment'}
+                                data-testid='dt_financial_assessment_link'
+                            />,
+                        ]}
+                    />
+                ),
+            };
+        if (ask_authenticate)
+            return {
+                icon: 'IcCashierWithdrawalLock',
+                title: localize('Withdrawals are locked'),
+                description: (
+                    <Localize
+                        i18n_default_text='Your account has not been authenticated. Please submit your <0>proof of identity</0> and <1>proof of address</1> to authenticate your account and request for withdrawals.'
+                        components={[
+                            <a
+                                key={0}
+                                className='link'
+                                rel='noopener noreferrer'
+                                href={'/account/proof-of-identity'}
+                            />,
+                            <a key={1} className='link' rel='noopener noreferrer' href={'/account/proof-of-address'} />,
+                        ]}
+                    />
+                ),
+            };
+        if (ask_fix_details)
+            return {
+                icon: 'IcCashierWithdrawalLock',
+                title: localize('Withdrawals are locked'),
+                description: (
+                    <Localize
+                        i18n_default_text='Your <0>personal details</0> are incomplete. Please go to your account settings and complete your personal details to enable withdrawals.'
+                        components={[
+                            <a key={0} className='link' rel='noopener noreferrer' href={'/account/personal-details'} />,
+                        ]}
+                    />
+                ),
+            };
+        if (withdraw_service_unavailable_for_pa)
+            return {
+                icon: 'IcCashierWithdrawalLock',
+                title: localize('Withdrawals are locked'),
+                description: localize('This feature is not available for payment agents.'),
+            };
+        if (no_withdrawal_or_trading_status)
+            return {
+                icon: 'IcCashierWithdrawalLock',
+                title: localize('Withdrawals are locked'),
+                description: localize(
+                    'Unfortunately, you can only make deposits. Please contact us via live chat to enable withdrawals.'
+                ),
+            };
+        if (withdrawal_locked_status)
+            return {
+                icon: 'IcCashierWithdrawalLock',
+                title: localize('Withdrawals are locked'),
+                description: localize(
+                    'Unfortunately, you can only make deposits. Please contact us via live chat to enable withdrawals.'
+                ),
+            };
+        if (only_pa_withdrawals_allowed_status)
+            return {
+                icon: 'IcCashierWithdrawalLock',
+                title: localize('Withdrawals are locked'),
+                description: localize(
+                    'You can only make deposits. Please contact us via live chat for more information.'
+                ),
+            };
+        if (pa_commision_withdrawal_limit)
+            return {
+                icon: 'IcCashierWithdrawalLock',
+                title: localize('Cashier is locked for withdrawals'),
+                description: localize(
+                    "It seems that you've no commissions to withdraw at the moment. You can make withdrawals once you receive your commissions."
+                ),
+            };
+    }
+
+    return {
+        icon: 'IcCashierLocked',
+        title: localize('Cashier is locked'),
+        description: localize(
+            'Your cashier is currently locked. Please contact us via live chat to find out how to unlock it.'
+        ),
+    };
+};
+
+export default getMessage;