feat: 🔥 added terms and conditions dialog

src/app/app-content.jsx

@@ -2,6 +2,7 @@ import React, { useEffect } from 'react';
 import { observer } from 'mobx-react-lite';
 import { ToastContainer } from 'react-toastify';
 import { getUrlBase } from '@/components/shared';
+import TncStatusUpdateModal from '@/components/tnc-status-update-modal';
 import TransactionDetailsModal from '@/components/transaction-details';
 import { api_base, ApiHelpers, ServerTime } from '@/external/bot-skeleton';
 import { CONNECTION_STATUS } from '@/external/bot-skeleton/services/api/observables/connection-status-stream';
@@ -145,6 +146,7 @@ const AppContent = observer(() => {
                     <BotStopped />
                     <TransactionDetailsModal />
                     <ToastContainer limit={3} draggable={false} />
+                    <TncStatusUpdateModal />
                 </div>
             </ThemeProvider>
         </>

src/components/tnc-status-update-modal/index.ts

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

src/components/tnc-status-update-modal/tnc-status-update-modal.scss

@@ -0,0 +1,36 @@
+@import '../shared/styles/devices';
+
+.dc-modal__container_tnc-status-update-modal-wrapper {
+    padding: 2.4rem;
+
+    @include mobile-screen {
+        padding: 1.6rem;
+    }
+}
+
+.tnc-status-update-modal {
+    display: flex;
+    flex-direction: column;
+    gap: 2.4rem;
+
+    &__text-container {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        align-self: stretch;
+    }
+
+    &__button {
+        align-self: flex-end;
+    }
+
+    @include mobile-screen {
+        gap: 1.6rem;
+    }
+}
+
+.tnc-link {
+    text-decoration: underline;
+    font-weight: normal;
+    color: var(--brand-red-coral);
+}

src/components/tnc-status-update-modal/tnc-status-update-modal.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+import { api_base } from '@/external/bot-skeleton/services/api/api-base';
+import { useApiBase } from '@/hooks/useApiBase';
+import useIsTNCNeeded from '@/hooks/useIsTNCNeeded';
+import { useStore } from '@/hooks/useStore';
+import { Button, Link, Text } from '@deriv-com/quill-ui';
+import { Localize } from '@deriv-com/translations';
+import { useDevice } from '@deriv-com/ui';
+import Modal from '../shared_ui/modal';
+import './tnc-status-update-modal.scss';
+
+const TncStatusUpdateModal: React.FC = observer(() => {
+    const { isAuthorized } = useApiBase();
+    const { client } = useStore();
+    const { is_cr_account } = client;
+    const [is_tnc_open, setIsTncOpen] = React.useState(false);
+    const { isDesktop } = useDevice();
+    const is_tnc_needed = useIsTNCNeeded();
+
+    React.useEffect(() => {
+        if (is_tnc_needed) {
+            setIsTncOpen(true);
+        }
+    }, [is_tnc_needed]);
+
+    const onClick = async () => {
+        if (isAuthorized) {
+            await api_base.api.send({ tnc_approval: 1 });
+            setIsTncOpen(false);
+        }
+    };
+
+    const tncLink = is_cr_account
+        ? 'https://deriv.com/eu/terms-and-conditions#clients'
+        : 'https://deriv.com/terms-and-conditions#clients';
+
+    return (
+        <Modal className='tnc-status-update-modal-wrapper' is_open={is_tnc_open} has_close_icon={false} width='44rem'>
+            <div className='tnc-status-update-modal'>
+                <Text size={isDesktop ? 'sm' : 'md'} bold>
+                    <Localize i18n_default_text="Updated T&C's" />
+                </Text>
+                <div className='tnc-status-update-modal__text-container'>
+                    <Text size={isDesktop ? 'sm' : 'md'}>
+                        <Localize
+                            i18n_default_text='Please review our updated <0>terms and conditions</0>.'
+                            components={[
+                                <Link className='tnc-link' key={0} size={isDesktop ? 'sm' : 'md'} href={tncLink} />,
+                            ]}
+                        />
+                    </Text>
+                    <Text size={isDesktop ? 'sm' : 'md'}>
+                        <Localize i18n_default_text='By continuing you understand and accept the changes.' />
+                    </Text>
+                </div>
+                <div className='tnc-status-update-modal__button'>
+                    <Button
+                        onClick={onClick}
+                        size='md'
+                        variant='primary'
+                        label={<Localize i18n_default_text='Continue' />}
+                    />
+                </div>
+            </div>
+        </Modal>
+    );
+});
+
+export default TncStatusUpdateModal;

src/hooks/useIsTNCNeeded.ts

@@ -0,0 +1,26 @@
+import { useStore } from './useStore';
+
+/**
+ * Custom hook to determine if TNC (Terms and Conditions) acceptance is needed.
+ *
+ * The function first checks if `tnc_status` is available in `account_settings`.
+ * If `tnc_status` is not available, it is assumed that TNC acceptance is not needed.
+ *
+ * If `tnc_status` is available, it reads the status based on the current
+ * `landing_company_shortcode`.
+ * - If the status is 0, TNC acceptance is needed.
+ * - If the status is 1, it means that TNC has been accepted, and acceptance is not needed.
+ *
+ * @returns {boolean} - Returns true if TNC acceptance is needed, false otherwise.
+ */
+
+const useIsTNCNeeded = () => {
+    const { client } = useStore();
+    const { account_settings, landing_company_shortcode } = client;
+    const { tnc_status } = account_settings || {};
+    const is_tnc_needed = tnc_status && tnc_status[landing_company_shortcode] === 0;
+
+    return is_tnc_needed;
+};
+
+export default useIsTNCNeeded;

src/stores/client-store.ts

@@ -68,6 +68,7 @@ export default class ClientStore {
             setLoginId: action,
             setWebsiteStatus: action,
             setUpgradeableLandingCompanies: action,
+            is_cr_account: computed,
         });
     }
 
@@ -197,6 +198,10 @@ export default class ClientStore {
         return ContentFlag.LOW_RISK_CR_NON_EU;
     }
 
+    get is_cr_account() {
+        return this.loginid?.startsWith('CR');
+    }
+
     isBotAllowed = () => {
         // Stop showing Bot, DBot, DSmartTrader for logged out EU IPs
         if (!this.is_logged_in && this.is_eu_country) return false;