[TRAH] Lubega / TRAH-7210 / Russian withdrawal restriction message

packages/cashier/src/components/cashier-container/real/__tests__/real.spec.tsx

@@ -73,7 +73,7 @@ describe('<Real />', () => {
         expect(screen.queryByTestId('dt_doughflow_section')).toBeInTheDocument();
     });
 
-    it('should trigger setIsDeposit callback when the user clicks on Cashier breadcrumb', () => {
+    it('should trigger setIsDeposit callback when the user clicks on Cashier breadcrumb', async () => {
         render(
             <StoreProvider store={mock_root_store}>
                 <Real />
@@ -83,8 +83,22 @@ describe('<Real />', () => {
         const el_breadcrumb_cashier = screen.queryByText(/cashier/i);
 
         if (el_breadcrumb_cashier) {
-            userEvent.click(el_breadcrumb_cashier);
+            await userEvent.click(el_breadcrumb_cashier);
             expect(mocked_cashier_store.general_store?.setIsDeposit).toHaveBeenCalledWith(false);
         }
     });
+
+    it('should render inline message with StaticUrl', () => {
+        render(
+            <StoreProvider store={mock_root_store}>
+                <Real />
+            </StoreProvider>
+        );
+
+        expect(screen.getByText(/Withdraw using the same payment method you used to deposit/i)).toBeInTheDocument();
+
+        const link = screen.getByRole('link', { name: /available payment methods/i });
+        expect(link).toBeInTheDocument();
+        expect(link).toHaveAttribute('href', expect.stringContaining('/payment-methods'));
+    });
 });

packages/cashier/src/components/cashier-container/real/real.scss

@@ -8,6 +8,7 @@
             height: calc(100% - 6rem);
             inset-inline-end: 0;
             padding: 0 1.6rem;
+            top: 9rem;
 
             + .page-container__sidebar--right {
                 position: relative;
@@ -17,6 +18,12 @@
             }
         }
     }
+
+    &__inline-message-link {
+        text-decoration: underline;
+        cursor: pointer;
+    }
+
     &__loader {
         width: 100%;
         height: 80vh;

packages/cashier/src/components/cashier-container/real/real.tsx

@@ -1,7 +1,11 @@
 import React from 'react';
-import { Loading } from '@deriv/components';
-import { useStore, observer } from '@deriv/stores';
+
+import { InlineMessage, Loading, StaticUrl, Text } from '@deriv/components';
+import { observer, useStore } from '@deriv/stores';
+import { Localize } from '@deriv/translations';
+
 import { useCashierStore } from '../../../stores/useCashierStores';
+
 import './real.scss';
 
 const Real = observer(() => {
@@ -28,14 +32,33 @@ const Real = observer(() => {
         <React.Fragment>
             {should_show_loader && <Loading className='real__loader' />}
             {iframe_url && (
-                <iframe
-                    className='cashier__content real__iframe'
-                    height={iframe_height}
-                    src={`${iframe_url}&DarkMode=${is_dark_mode_on ? 'on' : 'off'}`}
-                    frameBorder='0'
-                    scrolling='auto'
-                    data-testid='dt_doughflow_section'
-                />
+                <>
+                    {!should_show_loader && (
+                        <InlineMessage type='information'>
+                            <Text as='span' size='xxxs'>
+                                <Localize
+                                    i18n_default_text='Withdraw using the same payment method you used to deposit. If that method isn’t supported, check our <0>available payment methods.</0>'
+                                    className='real__inline-message'
+                                    components={[
+                                        <StaticUrl
+                                            key={0}
+                                            className='real__inline-message-link'
+                                            href='/payment-methods'
+                                        />,
+                                    ]}
+                                />
+                            </Text>
+                        </InlineMessage>
+                    )}
+                    <iframe
+                        className='cashier__content real__iframe'
+                        height={iframe_height}
+                        src={`${iframe_url}&DarkMode=${is_dark_mode_on ? 'on' : 'off'}`}
+                        frameBorder='0'
+                        scrolling='auto'
+                        data-testid='dt_doughflow_section'
+                    />
+                </>
             )}
         </React.Fragment>
     );

packages/cashier/src/components/crypto-fiat-converter/crypto-fiat-converter.scss

@@ -38,6 +38,14 @@
             text-align: start;
         }
 
+        .dc-input__field:disabled {
+            cursor: not-allowed;
+        }
+
+        .dc-input__field:disabled ~ label {
+            color: var(--text-disabled-1, #d6d6d6) !important;
+        }
+
         .dc-field--error {
             line-height: var(--text-lh-m);
             position: static;

packages/cashier/src/components/crypto-fiat-converter/crypto-fiat-converter.tsx

@@ -19,6 +19,7 @@ type TCryptoFiatConverterProps = {
     arrow_icon_direction: 'right' | 'left';
     from_currency: string;
     hint?: React.ReactNode;
+    disabled?: boolean;
     onChangeConverterFromAmount: (
         event: { target: { value: string } },
         from_currency: string,
@@ -51,6 +52,7 @@ const CryptoFiatConverter = observer(
         arrow_icon_direction,
         from_currency,
         hint,
+        disabled,
         onChangeConverterFromAmount,
         onChangeConverterToAmount,
         resetConverter,
@@ -101,6 +103,7 @@ const CryptoFiatConverter = observer(
                             autoComplete='off'
                             required
                             hint={hint}
+                            disabled={disabled}
                             classNameHint='crypto-fiat-converter__hint'
                             data-testid='dt_converter_from_amount_input'
                         />
@@ -141,6 +144,7 @@ const CryptoFiatConverter = observer(
                                 value={converter_to_amount}
                                 autoComplete='off'
                                 hint={localize('Approximate value')}
+                                disabled={disabled}
                                 classNameHint='crypto-fiat-converter__hint'
                                 data-testid='dt_converter_to_amount_input'
                             />

packages/cashier/src/components/percentage-selector/percentage-selector.scss

@@ -9,6 +9,13 @@
         height: 2.4rem;
         cursor: pointer;
         background-color: var(--general-section-1);
+
+        &--disabled {
+            width: 100%;
+            height: 2.4rem;
+            cursor: not-allowed;
+            background-color: var(--general-section-3);
+        }
     }
 
     &__block-container {

packages/cashier/src/components/percentage-selector/percentage-selector.tsx

@@ -7,6 +7,7 @@ import { useExchangeRate } from '@deriv/hooks';
 
 type TPercentageSelectorProps = {
     amount: number;
+    disabled?: boolean;
     from_account?: string;
     getCalculatedAmount: (amount: string, converted_amount: number) => void;
     percentage: number;
@@ -20,6 +21,7 @@ type TCalculateAmountInputEvent = { target: { id: number } };
 
 const PercentageSelector = ({
     amount,
+    disabled,
     from_account,
     getCalculatedAmount,
     percentage,
@@ -50,6 +52,8 @@ const PercentageSelector = ({
     }, [from_account, to_account]);
 
     const calculateAmount = (e: TCalculateAmountInputEvent | TReactMouseEvent, percent: number) => {
+        if (disabled) return;
+
         let new_percentage = percent;
         const is_percentage_selected = percent > 0 && percent === Number(selected_percentage);
         if (is_percentage_selected) new_percentage -= 25;
@@ -83,45 +87,45 @@ const PercentageSelector = ({
         <React.Fragment>
             <div className='percentage-selector' data-testid='dt_percentage_selector_id'>
                 <div className='percentage-selector__block-container'>
-                    <Text color='prominent' size='xs' className='percentage-selector__text'>
+                    <Text color={disabled ? 'disabled-1' : 'prominent'} size='xs' className='percentage-selector__text'>
                         {'25%'}
                     </Text>
                     <div
                         id='1'
-                        className='percentage-selector-block'
+                        className={disabled ? 'percentage-selector-block--disabled' : 'percentage-selector-block'}
                         onClick={e => calculateAmount(e, 25)}
                         data-testid='dt_percentage_selector_block_id_1'
                     />
                 </div>
                 <div className='percentage-selector__block-container'>
-                    <Text color='prominent' size='xs' className='percentage-selector__text'>
+                    <Text color={disabled ? 'disabled-1' : 'prominent'} size='xs' className='percentage-selector__text'>
                         {'50%'}
                     </Text>
                     <div
                         id='2'
-                        className='percentage-selector-block'
+                        className={disabled ? 'percentage-selector-block--disabled' : 'percentage-selector-block'}
                         onClick={e => calculateAmount(e, 50)}
                         data-testid='dt_percentage_selector_block_id_2'
                     />
                 </div>
                 <div className='percentage-selector__block-container'>
-                    <Text color='prominent' size='xs' className='percentage-selector__text'>
+                    <Text color={disabled ? 'disabled-1' : 'prominent'} size='xs' className='percentage-selector__text'>
                         {'75%'}
                     </Text>
                     <div
                         id='3'
-                        className='percentage-selector-block'
+                        className={disabled ? 'percentage-selector-block--disabled' : 'percentage-selector-block'}
                         onClick={e => calculateAmount(e, 75)}
                         data-testid='dt_percentage_selector_block_id_3'
                     />
                 </div>
                 <div className='percentage-selector__block-container'>
-                    <Text color='prominent' size='xs' className='percentage-selector__text'>
+                    <Text color={disabled ? 'disabled-1' : 'prominent'} size='xs' className='percentage-selector__text'>
                         <Localize i18n_default_text='All' />
                     </Text>
                     <div
                         id='4'
-                        className='percentage-selector-block'
+                        className={disabled ? 'percentage-selector-block--disabled' : 'percentage-selector-block'}
                         onClick={e => calculateAmount(e, 100)}
                         data-testid='dt_percentage_selector_block_id_4'
                     />

packages/cashier/src/pages/account-transfer/account-transfer-form/__tests__/account-transfer-form.spec.tsx

@@ -36,6 +36,7 @@ describe('<AccountTransferForm />', () => {
                         mt5: {},
                     },
                 },
+                account_settings: { country_code: 'aq' },
                 mt5_login_list: [
                     {
                         login: 'value',
@@ -142,9 +143,26 @@ describe('<AccountTransferForm />', () => {
         renderAccountTransferForm();
 
         expect(screen.getByTestId('dt_account_transfer_form_wrapper')).toBeInTheDocument();
+        expect(
+            screen.getByText(
+                'Transfers within accounts are only available for trading, not withdrawals. To withdraw funds, use the same method you used to deposit.'
+            )
+        ).toBeInTheDocument();
         expect(screen.getByText('Cashier Error')).toBeInTheDocument();
     });
 
+    it('should render inline message and disable transfer button when country code is RU', () => {
+        mockRootStore.client.account_settings.country_code = 'ru';
+        mockRootStore.modules.cashier.account_transfer.selected_to.is_crypto = true;
+
+        renderAccountTransferForm();
+
+        expect(
+            screen.getByText('Transfers from fiat account to crypto accounts are not supported.')
+        ).toBeInTheDocument();
+        expect(screen.getByRole('button', { name: 'Transfer' })).toBeDisabled();
+    });
+
     it('should show loader if account_list.length === 0', () => {
         mockRootStore.modules.cashier.account_transfer.accounts_list = [];
 

packages/cashier/src/pages/account-transfer/account-transfer-form/account-transfer-form.scss

@@ -8,9 +8,24 @@
     }
 
     &__header {
-        padding: 0 0 3.2rem;
+        padding: 0 0 1.6rem;
+    }
+
+    &__inline-message {
+        max-width: 36rem;
+        width: 100%;
+        margin: 0 auto 2.4rem;
+
+        &.transfer-restriction {
+            margin: 0 auto 1.6rem;
+        }
+
         @include mobile-or-tablet-screen {
-            padding: 0 0 1.6rem;
+            margin: 0 0 1.6rem;
+        }
+
+        &--text {
+            text-align: start;
         }
     }