Merge pull request #255 from sanjam-deriv/community

src/features/dashboard/components/Dialogs/RegisterAppDialogSuccess/__tests__/register-app-dialog-success.test.tsx

@@ -29,7 +29,7 @@ describe('App Dialog Register Success', () => {
   });
 
   it('Should render buttons properly', () => {
-    const primaryButton = screen.getByRole('button', { name: /manage application/i });
+    const primaryButton = screen.getByRole('button', { name: /join our telegram community/i });
     const secondaryButton = screen.getByRole('button', { name: /got it/i });
 
     expect(primaryButton).toBeInTheDocument();
@@ -38,9 +38,7 @@ describe('App Dialog Register Success', () => {
 
   it('Should display correct content on the modal', () => {
     const textContent = screen.getByText(/^You have successfully registered/i);
-    expect(textContent).toHaveTextContent(
-      'You have successfully registered your application. You can now start using Deriv API.',
-    );
+    expect(textContent).toHaveTextContent('You have successfully registered your application.');
   });
 
   it('Should close the modal on Secondary button click', async () => {
@@ -52,7 +50,7 @@ describe('App Dialog Register Success', () => {
   });
 
   it('Should update current tab on primary button click to Manage Application', async () => {
-    const primaryButton = screen.getByRole('button', { name: /manage application/i });
+    const primaryButton = screen.getByRole('button', { name: /join our telegram community/i });
 
     await userEvent.click(primaryButton);
 

src/features/dashboard/components/Dialogs/RegisterAppDialogSuccess/index.tsx

@@ -1,7 +1,7 @@
-import React, { useMemo } from 'react';
-import { TModalActionButton } from '@deriv/ui/dist/types/src/components/core/modal/types';
-import { Modal } from '@deriv/ui';
+import React from 'react';
+import { Button, Modal } from '@deriv/ui';
 import useAppManager from '@site/src/hooks/useAppManager';
+import styles from './register-app-dialog-success.module.scss';
 
 interface IRegisterAppDialogSuccessProps {
   onClose: () => void;
@@ -10,43 +10,33 @@ interface IRegisterAppDialogSuccessProps {
 export const RegisterAppDialogSuccess = ({ onClose }: IRegisterAppDialogSuccessProps) => {
   const { updateCurrentTab } = useAppManager();
 
-  const actionButtons: TModalActionButton[] = useMemo(
-    () => [
-      {
-        id: 0,
-        text: 'Manage application',
-        color: 'primary',
-        onClick: () => {
-          updateCurrentTab('MANAGE_APPS');
-          onClose();
-        },
-      },
-      {
-        id: 1,
-        text: 'Got it',
-        color: 'secondary',
-        onClick: () => {
-          onClose();
-        },
-      },
-    ],
-    [onClose, updateCurrentTab],
-  );
+  const onSuccessfulClick = () => {
+    updateCurrentTab('MANAGE_APPS');
+    window.open('https://t.me/+g6FV5tFY1u9lZGE1', '_blank');
+    onClose();
+  };
 
   return (
     <Modal defaultOpen>
       <Modal.Portal>
         <div className='modal-overlay'>
           <Modal.Overlay />
-          <Modal.DialogContent
-            title='Success!'
-            content={
-              'You have successfully registered your application. You can now start using Deriv API.'
-            }
-            action_buttons={actionButtons}
-            has_close_button
-            should_prevent_close_on_click_outside
-          />
+          <Modal.PageContent has_close_button className={styles.wrapper}>
+            <div className={styles.modal}>
+              <img src='/img/register_success.svg' />
+              <h4 className={styles.title}>Success!</h4>
+              <p>You have successfully registered your application.</p>
+              <p>You can now start using Deriv API</p>
+            </div>
+            <div className={styles.buttonWrapper}>
+              <Button color='secondary' onClick={onClose} className={styles.btn}>
+                Got it
+              </Button>
+              <Button color='primary' onClick={onSuccessfulClick} className={styles.btn}>
+                Join our Telegram Community
+              </Button>
+            </div>
+          </Modal.PageContent>
         </div>
       </Modal.Portal>
     </Modal>

src/features/dashboard/components/Dialogs/RegisterAppDialogSuccess/register-app-dialog-success.module.scss

@@ -0,0 +1,50 @@
+@use 'src/styles/utility' as *;
+
+.wrapper {
+  width: rem(44);
+}
+
+.modal {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  padding: rem(0.8) rem(2.4) 0;
+  font-size: rem(1.4);
+  line-height: rem(2);
+  white-space: nowrap;
+  @media (max-width: 992px) {
+    padding: 0 0 0 rem(1.6);
+  }
+  @media (max-width: 768px) {
+    padding: unset;
+  }
+  @media (max-width: 425px) {
+    font-size: rem(1.2);
+  }
+
+  .title {
+    font-weight: bold;
+  }
+  .iconWrapper {
+    background-image: url(/img/register_success.svg);
+  }
+}
+
+.buttonWrapper {
+  display: flex;
+  justify-content: center;
+  padding: rem(2.4);
+  gap: rem(0.8);
+  @media (max-width: 768px) {
+    flex-direction: column;
+    align-items: center;
+  }
+  .btn {
+    padding: rem(1) rem(1.6);
+    border-radius: rem(1.5);
+    @media (max-width: 768px) {
+      width: 100%;
+    }
+  }
+}

src/features/dashboard/register-app/__tests__/register-app.test.tsx

@@ -99,8 +99,6 @@ const fakeApp: ApplicationObject = {
 };
 
 describe('Update App Dialog', () => {
-  const mockOnClose = jest.fn();
-
   let wsServer: WS;
 
   beforeEach(async () => {
@@ -198,11 +196,7 @@ describe('Update App Dialog', () => {
       req_id: 1,
     });
 
-    const successDialogContent = await screen.findByText(
-      'You have successfully registered your application. You can now start using Deriv API.',
-    );
-    expect(successDialogContent).toBeInTheDocument();
-    expect(successDialogContent).toBeVisible();
+    expect(screen.getByText('App information')).toBeInTheDocument();
   });
 
   it('Should render error on error response', async () => {