[WALL5207] Suisin/chore: update content for tnc modal (#17733)

* chore: update content for tnc modal * chore: add livechat link
deriv-com · Dec 6, 2024 · 076164e · 076164e
1 parent ded8d60
commit 076164e
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 10 deletions.
diff --git a/...c/App/Containers/Modals/tnc-status-update-modal/__test__/tnc-status-update-modal.spec.tsx b/...c/App/Containers/Modals/tnc-status-update-modal/__test__/tnc-status-update-modal.spec.tsx
@@ -62,14 +62,20 @@ describe('<TncStatusUpdateModal />', () => {
         });
 
         renderComponent({ store_config: mock });
-        expect(screen.queryByText('Please review our updated terms and conditions')).not.toBeInTheDocument();
+        expect(screen.queryByText('Accept updated terms and conditions')).not.toBeInTheDocument();
     });
 
     it('Should render TncStatusUpdateModal with correct content and verify that clicking the button triggers the API call and toggles the modal.', async () => {
         renderComponent({});
-        expect(screen.getByText("Updated T&C's")).toBeInTheDocument();
-        expect(screen.getByText('By continuing you understand and accept the changes.')).toBeInTheDocument();
-        const continue_button = screen.getByRole('button', { name: 'Continue' });
+        expect(screen.getByText('Accept updated terms and conditions')).toBeInTheDocument();
+        expect(screen.getByText(/To continue trading, review and accept our updated/)).toBeInTheDocument();
+        expect(
+            screen.getByText(
+                /\. Not accepting will lead to restricted access to your account. Need help\? Contact us via/
+            )
+        ).toBeInTheDocument();
+        expect(screen.getByText(/live chat/)).toBeInTheDocument();
+        const continue_button = screen.getByRole('button', { name: 'Accept now' });
 
         await userEvent.click(continue_button);
         expect(WS.tncApproval).toBeCalled();

diff --git a/packages/core/src/App/Containers/Modals/tnc-status-update-modal/tnc-status-update-modal.tsx b/packages/core/src/App/Containers/Modals/tnc-status-update-modal/tnc-status-update-modal.tsx
@@ -5,6 +5,7 @@ import { observer, useStore } from '@deriv/stores';
 import { WS } from '@deriv/shared';
 import { useDevice } from '@deriv-com/ui';
 import './tnc-status-update-modal.scss';
+import { URLUtils } from '@deriv-com/utils';
 
 const TncStatusUpdateModal = observer(() => {
     const { client, ui } = useStore();
@@ -27,29 +28,33 @@ const TncStatusUpdateModal = observer(() => {
         >
             <div className='tnc-status-update-modal'>
                 <Text size={isDesktop ? 's' : 'xs'} weight='bold'>
-                    <Localize i18n_default_text="Updated T&C's" />
+                    <Localize i18n_default_text='Accept updated terms and conditions' />
                 </Text>
                 <div className='tnc-status-update-modal__text-container'>
                     <Text size={isDesktop ? 'xs' : 'xxs'}>
                         <Localize
-                            i18n_default_text='Please review our updated <0>terms and conditions</0>.'
+                            i18n_default_text='To continue trading, review and accept our updated <0>terms and conditions</0>. Not accepting will lead to restricted access to your account. Need help? Contact us via <1>live chat</1>.'
                             components={[
                                 <StaticUrl
                                     key={0}
                                     className='link'
                                     href='terms-and-conditions'
                                     is_eu_url={!is_cr_account}
                                 />,
+                                <a
+                                    key={1}
+                                    className='link'
+                                    rel='noopener noreferrer'
+                                    target='_blank'
+                                    href={URLUtils.getDerivStaticURL('/contact_us')}
+                                />,
                             ]}
                         />
                     </Text>
-                    <Text size={isDesktop ? 'xs' : 'xxs'}>
-                        <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' />
+                        <Localize i18n_default_text='Accept now' />
                     </Button>
                 </div>
             </div>