Adding a notification for users to accept the updated T&Cs changes

packages/core/src/App/Containers/Modals/app-modals.jsx

@@ -77,6 +77,10 @@ const InformationSubmittedModal = React.lazy(() =>
     import(/* webpackChunkName: "information-submitted-modal" */ './information-submitted-modal')
 );
 
+const TncStatusUpdateModal = React.lazy(() =>
+    import(/* webpackChunkName: "information-submitted-modal" */ './tnc-status-update-modal')
+);
+
 const AppModals = observer(() => {
     const { client, ui, traders_hub } = useStore();
     const {
@@ -109,6 +113,7 @@ const AppModals = observer(() => {
         should_show_one_time_deposit_modal,
         should_show_account_success_modal,
         should_show_crypto_transaction_processing_modal,
+        is_tnc_update_modal_open,
     } = ui;
     const temp_session_signup_params = SessionStore.get('signup_query_param');
     const url_params = new URLSearchParams(useLocation().search || temp_session_signup_params);
@@ -232,6 +237,10 @@ const AppModals = observer(() => {
         if (is_kyc_information_submitted_modal_open) {
             ComponentToLoad = <InformationSubmittedModal />;
         }
+
+        if (is_tnc_update_modal_open) {
+            ComponentToLoad = <TncStatusUpdateModal />;
+        }
     }
 
     return (

packages/core/src/App/Containers/Modals/tnc-status-update-modal/__test__/tnc-status-update-modal.spec.tsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { StoreProvider, mockStore } from '@deriv/stores';
+import TncStatusUpdateModal from '../tnc-status-update-modal';
+import userEvent from '@testing-library/user-event';
+import { WS } from '@deriv/shared';
+
+jest.mock('@deriv/shared', () => ({
+    ...jest.requireActual('@deriv/shared'),
+    WS: {
+        tncApproval: jest.fn(() =>
+            Promise.resolve({
+                tnc_approval: {},
+            })
+        ),
+        getSettings: jest.fn(() =>
+            Promise.resolve({
+                get_limits: {},
+            })
+        ),
+    },
+}));
+
+describe('<TncStatusUpdateModal />', () => {
+    let modal_root_el: HTMLDivElement;
+
+    beforeAll(() => {
+        modal_root_el = document.createElement('div');
+        modal_root_el.setAttribute('id', 'modal_root');
+        document.body.appendChild(modal_root_el);
+    });
+
+    afterAll(() => {
+        document.body.removeChild(modal_root_el);
+    });
+
+    const mock_store = mockStore({
+        ui: {
+            is_tnc_update_modal_open: true,
+            toggleTncUpdateModal: jest.fn(),
+        },
+    });
+
+    const renderComponent = ({ store_config = mock_store }) => {
+        return render(
+            <StoreProvider store={store_config}>
+                <TncStatusUpdateModal />
+            </StoreProvider>
+        );
+    };
+
+    it('should not render the TncStatusUpdateModal component', async () => {
+        const mock = mockStore({
+            ui: {
+                is_tnc_update_modal_open: false,
+            },
+        });
+
+        renderComponent({ store_config: mock });
+        expect(screen.queryByText('Please review our updated terms and conditions')).not.toBeInTheDocument();
+    });
+
+    it('should render the TncStatusUpdateModal component', async () => {
+        renderComponent({});
+        expect(screen.getByText("Updated T&C's")).toBeInTheDocument();
+    });
+
+    it('should render TncStatusUpdateModal component with Messages and Button', async () => {
+        renderComponent({});
+        expect(screen.getByText("Updated T&C's")).toBeInTheDocument();
+        expect(screen.getByText('By continuing you understand and accept the changes.')).toBeInTheDocument();
+        expect(screen.getByRole('button', { name: 'Continue' })).toBeInTheDocument();
+    });
+
+    it('should render TncStatusUpdateModal click on Button to called toggle modal function', async () => {
+        renderComponent({});
+        const continue_button = screen.getByRole('button', { name: 'Continue' });
+        await userEvent.click(continue_button);
+        expect(WS.tncApproval).toBeCalled();
+        expect(WS.getSettings).toBeCalled();
+        expect(mock_store.ui.toggleTncUpdateModal).toHaveBeenCalledWith(false);
+    });
+});

packages/core/src/App/Containers/Modals/tnc-status-update-modal/index.ts

@@ -0,0 +1,3 @@
+import TncStatusUpdateModal from './tnc-status-update-modal';
+
+export default TncStatusUpdateModal;

packages/core/src/App/Containers/Modals/tnc-status-update-modal/tnc-status-update-modal.scss

@@ -0,0 +1,45 @@
+.dc-modal__container_tnc-status-update-modal-wrapper {
+    padding: 24px;
+    @include mobile-screen {
+        padding: 16px;
+    }
+}
+
+.tnc-status-update-modal {
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+
+    &__header {
+        font-size: 1.6rem;
+        @include mobile-screen {
+            font-size: 1.4rem;
+        }
+    }
+
+    &__text-container {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        align-self: stretch;
+        .dc-text {
+            font-size: 1.4rem;
+            @include mobile-screen {
+                font-size: 1.2rem;
+            }
+        }
+    }
+
+    &__button {
+        align-self: flex-end;
+    }
+
+    @include mobile-screen {
+        gap: 16px;
+    }
+}
+
+.link {
+    text-decoration: underline;
+    font-weight: normal;
+}

packages/core/src/App/Containers/Modals/tnc-status-update-modal/tnc-status-update-modal.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { Modal, Button, StaticUrl, Text } from '@deriv/components';
+import { Localize } from '@deriv/translations';
+import { observer, useStore } from '@deriv/stores';
+import { WS } from '@deriv/shared';
+import './tnc-status-update-modal.scss';
+
+const TncStatusUpdateModal = observer(() => {
+    const { client, ui } = useStore();
+    const { is_cr_account } = client;
+    const { is_tnc_update_modal_open, toggleTncUpdateModal } = ui;
+
+    const onClick = async () => {
+        await WS.tncApproval();
+        WS.getSettings();
+        toggleTncUpdateModal(false);
+    };
+
+    return (
+        <Modal
+            className='tnc-status-update-modal-wrapper'
+            is_open={is_tnc_update_modal_open}
+            has_close_icon={false}
+            width='440px'
+        >
+            <div className='tnc-status-update-modal'>
+                <Text size='s' weight='bold' className='tnc-status-update-modal__header'>
+                    <Localize i18n_default_text="Updated T&C's" />
+                </Text>
+                <div className='tnc-status-update-modal__text-container'>
+                    <Text as='xs'>
+                        <Localize
+                            i18n_default_text='Please review our updated <0>terms and conditions</0>.'
+                            components={[
+                                <StaticUrl
+                                    key={0}
+                                    className='link'
+                                    href='terms-and-conditions'
+                                    is_eu_url={!is_cr_account}
+                                />,
+                            ]}
+                        />
+                    </Text>
+                    <Text as='xs'>
+                        <Localize i18n_default_text='By continuing you understand and accept the changes.' />
+                    </Text>
+                </div>
+                <div className='tnc-status-update-modal__button'>
+                    <Button className='dc-dialog__button' has_effect onClick={onClick} primary large>
+                        <Localize i18n_default_text='Continue' />
+                    </Button>
+                </div>
+            </div>
+        </Modal>
+    );
+});
+
+export default TncStatusUpdateModal;

packages/core/src/Stores/client-store.js

@@ -272,6 +272,7 @@ export default class ClientStore extends BaseStore {
             is_poa_expired: computed,
             real_account_creation_unlock_date: computed,
             is_tnc_needed: computed,
+            is_tnc_status_updated: computed,
             is_social_signup: computed,
             isEligibleForMoreDemoMt5Svg: action.bound,
             isEligibleForMoreRealMt5: action.bound,
@@ -725,6 +726,11 @@ export default class ClientStore extends BaseStore {
         return typeof client_tnc_status !== 'undefined' && client_tnc_status !== terms_conditions_version;
     }
 
+    get is_tnc_status_updated() {
+        const { tnc_status } = this.account_settings || {};
+        return tnc_status;
+    }
+
     get is_social_signup() {
         return this.account_status?.status?.includes('social_signup');
     }
@@ -1633,6 +1639,9 @@ export default class ClientStore extends BaseStore {
             this.resetMt5AccountListPopulation();
         }
         this.responseWebsiteStatus(await WS.wait('website_status'));
+        if (this.is_tnc_status_updated?.landing_company_short === 0) {
+            this.root_store.ui.toggleTncUpdateModal(true);
+        }
 
         this.registerReactions();
         this.setIsLoggingIn(false);

packages/core/src/Stores/ui-store.js

@@ -181,6 +181,9 @@ export default class UIStore extends BaseStore {
     is_additional_kyc_info_modal_open = false;
     is_kyc_information_submitted_modal_open = false;
 
+    // tnc update
+    is_tnc_update_modal_open = false;
+
     getDurationFromUnit = unit => this[`duration_${unit}`];
 
     constructor(root_store) {
@@ -287,6 +290,7 @@ export default class UIStore extends BaseStore {
             is_verification_submitted: observable,
             is_mt5_migration_modal_open: observable,
             is_mt5_migration_modal_enabled: observable,
+            is_tnc_update_modal_open: observable,
             isUrlUnavailableModalVisible: observable,
             manage_real_account_tab_index: observable,
             modal_index: observable,
@@ -424,6 +428,7 @@ export default class UIStore extends BaseStore {
             toggleUrlUnavailableModal: action.bound,
             setShouldShowDepositNowOrLaterModal: action.bound,
             setShouldShowCryptoTransactionProcessingModal: action.bound,
+            toggleTncUpdateModal: action.bound,
         });
 
         window.addEventListener('resize', this.handleResize);
@@ -983,4 +988,8 @@ export default class UIStore extends BaseStore {
     setShouldShowCryptoTransactionProcessingModal(value) {
         this.should_show_crypto_transaction_processing_modal = value;
     }
+
+    toggleTncUpdateModal(value) {
+        this.is_tnc_update_modal_open = value;
+    }
 }

packages/stores/src/mockStore.ts

@@ -308,6 +308,7 @@ const mock = (): TStores & { is_mock: boolean } => {
             is_mf_account: false,
             is_tradershub_tracking: false,
             setTradersHubTracking: jest.fn(),
+            is_tnc_status_updated: {},
         },
         common: {
             error: common_store_error,
@@ -481,6 +482,8 @@ const mock = (): TStores & { is_mock: boolean } => {
             setShouldShowDepositNowOrLaterModal: jest.fn(),
             should_show_crypto_transaction_processing_modal: false,
             setShouldShowCryptoTransactionProcessingModal: jest.fn(),
+            is_tnc_update_modal_open: false,
+            toggleTncUpdateModal: jest.fn(),
         },
         traders_hub: {
             getAccount: jest.fn(),

packages/stores/types.ts

@@ -618,6 +618,7 @@ type TClientStore = {
     is_cr_account: boolean;
     is_mf_account: boolean;
     setTradersHubTracking: (value: boolean) => void;
+    is_tnc_status_updated: Record<string, boolean>;
 };
 
 type TCommonStoreError = {
@@ -826,6 +827,8 @@ type TUiStore = {
     setShouldShowDepositNowOrLaterModal: (value: boolean) => void;
     should_show_crypto_transaction_processing_modal: boolean;
     setShouldShowCryptoTransactionProcessingModal: (value: boolean) => void;
+    is_tnc_update_modal_open: boolean;
+    toggleTncUpdateModal: (value: boolean) => void;
 };
 
 type TPortfolioStore = {