From 7172dd8c6da7257dfdaa7cb0c3f593a7e979bddd Mon Sep 17 00:00:00 2001 From: sanjam chhatwal Date: Mon, 23 Oct 2023 16:36:49 +0400 Subject: [PATCH 1/9] chore: changed registration flow --- .../components/Dialogs/RegisterAppDialogSuccess/index.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/features/dashboard/components/Dialogs/RegisterAppDialogSuccess/index.tsx b/src/features/dashboard/components/Dialogs/RegisterAppDialogSuccess/index.tsx index 98f2b758..7837f2f1 100644 --- a/src/features/dashboard/components/Dialogs/RegisterAppDialogSuccess/index.tsx +++ b/src/features/dashboard/components/Dialogs/RegisterAppDialogSuccess/index.tsx @@ -14,10 +14,11 @@ export const RegisterAppDialogSuccess = ({ onClose }: IRegisterAppDialogSuccessP () => [ { id: 0, - text: 'Manage application', + text: 'Join our Telegram Community', color: 'primary', onClick: () => { updateCurrentTab('MANAGE_APPS'); + window.open('https://t.me/deriv_apps', '_blank'); onClose(); }, }, From c6db2c843a6e9034c2b25f4adfd33f3f45061c66 Mon Sep 17 00:00:00 2001 From: sanjam chhatwal Date: Mon, 23 Oct 2023 16:38:33 +0400 Subject: [PATCH 2/9] chore: test fix --- .../__tests__/register-app-dialog-success.test.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/features/dashboard/components/Dialogs/RegisterAppDialogSuccess/__tests__/register-app-dialog-success.test.tsx b/src/features/dashboard/components/Dialogs/RegisterAppDialogSuccess/__tests__/register-app-dialog-success.test.tsx index 6997d05b..0bda62c8 100644 --- a/src/features/dashboard/components/Dialogs/RegisterAppDialogSuccess/__tests__/register-app-dialog-success.test.tsx +++ b/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(); @@ -52,7 +52,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); From c4628a7c71326a8217133c4d371551233219aafb Mon Sep 17 00:00:00 2001 From: sanjam chhatwal Date: Wed, 25 Oct 2023 13:04:02 +0400 Subject: [PATCH 3/9] chore: design fix --- .../RegisterAppDialogSuccess/index.tsx | 59 ++++++++----------- .../register-app-dialog-success.module.scss | 37 ++++++++++++ static/img/register_success.svg | 4 ++ 3 files changed, 65 insertions(+), 35 deletions(-) create mode 100644 src/features/dashboard/components/Dialogs/RegisterAppDialogSuccess/register-app-dialog-success.module.scss create mode 100644 static/img/register_success.svg diff --git a/src/features/dashboard/components/Dialogs/RegisterAppDialogSuccess/index.tsx b/src/features/dashboard/components/Dialogs/RegisterAppDialogSuccess/index.tsx index 7837f2f1..99ab4887 100644 --- a/src/features/dashboard/components/Dialogs/RegisterAppDialogSuccess/index.tsx +++ b/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,44 +10,33 @@ interface IRegisterAppDialogSuccessProps { export const RegisterAppDialogSuccess = ({ onClose }: IRegisterAppDialogSuccessProps) => { const { updateCurrentTab } = useAppManager(); - const actionButtons: TModalActionButton[] = useMemo( - () => [ - { - id: 0, - text: 'Join our Telegram Community', - color: 'primary', - onClick: () => { - updateCurrentTab('MANAGE_APPS'); - window.open('https://t.me/deriv_apps', '_blank'); - onClose(); - }, - }, - { - id: 1, - text: 'Got it', - color: 'secondary', - onClick: () => { - onClose(); - }, - }, - ], - [onClose, updateCurrentTab], - ); + const onSuccessfulClick = () => { + updateCurrentTab('MANAGE_APPS'); + window.open('https://t.me/deriv_apps', '_blank'); + onClose(); + }; return (
- + +
+ +

Success!

+

You have successfully registered your application.

+

You can now start using Deriv API

+
+
+ + +
+
diff --git a/src/features/dashboard/components/Dialogs/RegisterAppDialogSuccess/register-app-dialog-success.module.scss b/src/features/dashboard/components/Dialogs/RegisterAppDialogSuccess/register-app-dialog-success.module.scss new file mode 100644 index 00000000..52f9be88 --- /dev/null +++ b/src/features/dashboard/components/Dialogs/RegisterAppDialogSuccess/register-app-dialog-success.module.scss @@ -0,0 +1,37 @@ +@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); + @media (max-width: 992px) { + padding: 0 0 0 rem(1.6); + } + + .title { + font-weight: bold; + } + .iconWrapper { + background-image: url(/img/register_success.svg); + } +} + +.buttonWrapper { + display: flex; + justify-content: flex-end; + padding: rem(2.4); + gap: rem(0.8); + + .btn { + padding: rem(1) rem(1.6); + border-radius: rem(1.5); + } +} diff --git a/static/img/register_success.svg b/static/img/register_success.svg new file mode 100644 index 00000000..271526d7 --- /dev/null +++ b/static/img/register_success.svg @@ -0,0 +1,4 @@ + + + + From f3018d75cdc14f793689a0e90510294e9e29122c Mon Sep 17 00:00:00 2001 From: sanjam chhatwal Date: Wed, 25 Oct 2023 13:14:27 +0400 Subject: [PATCH 4/9] chore: test fix --- .../__tests__/register-app-dialog-success.test.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/features/dashboard/components/Dialogs/RegisterAppDialogSuccess/__tests__/register-app-dialog-success.test.tsx b/src/features/dashboard/components/Dialogs/RegisterAppDialogSuccess/__tests__/register-app-dialog-success.test.tsx index 0bda62c8..0898d3dd 100644 --- a/src/features/dashboard/components/Dialogs/RegisterAppDialogSuccess/__tests__/register-app-dialog-success.test.tsx +++ b/src/features/dashboard/components/Dialogs/RegisterAppDialogSuccess/__tests__/register-app-dialog-success.test.tsx @@ -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 () => { From 127d70af797531dde68dca019689acdf6d093c58 Mon Sep 17 00:00:00 2001 From: sanjam chhatwal Date: Wed, 25 Oct 2023 13:26:59 +0400 Subject: [PATCH 5/9] chore: design fix --- .../register-app-dialog-success.module.scss | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/features/dashboard/components/Dialogs/RegisterAppDialogSuccess/register-app-dialog-success.module.scss b/src/features/dashboard/components/Dialogs/RegisterAppDialogSuccess/register-app-dialog-success.module.scss index 52f9be88..20f626ab 100644 --- a/src/features/dashboard/components/Dialogs/RegisterAppDialogSuccess/register-app-dialog-success.module.scss +++ b/src/features/dashboard/components/Dialogs/RegisterAppDialogSuccess/register-app-dialog-success.module.scss @@ -29,9 +29,15 @@ justify-content: flex-end; 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%; + } } } From 5eb8e4129980b4e889a9eb0a9fefd974fe49b697 Mon Sep 17 00:00:00 2001 From: sanjam chhatwal Date: Wed, 25 Oct 2023 15:35:42 +0400 Subject: [PATCH 6/9] chore: design fix --- .../register-app-dialog-success.module.scss | 2 +- .../register-app/__tests__/register-app.test.tsx | 8 +------- 2 files changed, 2 insertions(+), 8 deletions(-) diff --git a/src/features/dashboard/components/Dialogs/RegisterAppDialogSuccess/register-app-dialog-success.module.scss b/src/features/dashboard/components/Dialogs/RegisterAppDialogSuccess/register-app-dialog-success.module.scss index 20f626ab..02e98525 100644 --- a/src/features/dashboard/components/Dialogs/RegisterAppDialogSuccess/register-app-dialog-success.module.scss +++ b/src/features/dashboard/components/Dialogs/RegisterAppDialogSuccess/register-app-dialog-success.module.scss @@ -26,7 +26,7 @@ .buttonWrapper { display: flex; - justify-content: flex-end; + justify-content: center; padding: rem(2.4); gap: rem(0.8); @media (max-width: 768px) { diff --git a/src/features/dashboard/register-app/__tests__/register-app.test.tsx b/src/features/dashboard/register-app/__tests__/register-app.test.tsx index 61b8b743..a24b5644 100644 --- a/src/features/dashboard/register-app/__tests__/register-app.test.tsx +++ b/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 () => { From 004745482cc3fe3082cb084f662852cd0cb1eff6 Mon Sep 17 00:00:00 2001 From: sanjam chhatwal Date: Thu, 26 Oct 2023 10:58:19 +0400 Subject: [PATCH 7/9] chore: responsive design fix --- .../register-app-dialog-success.module.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/features/dashboard/components/Dialogs/RegisterAppDialogSuccess/register-app-dialog-success.module.scss b/src/features/dashboard/components/Dialogs/RegisterAppDialogSuccess/register-app-dialog-success.module.scss index 02e98525..1578e415 100644 --- a/src/features/dashboard/components/Dialogs/RegisterAppDialogSuccess/register-app-dialog-success.module.scss +++ b/src/features/dashboard/components/Dialogs/RegisterAppDialogSuccess/register-app-dialog-success.module.scss @@ -12,9 +12,13 @@ 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; + } .title { font-weight: bold; From e33fd255225bb36c5de32c0d38771be590b31241 Mon Sep 17 00:00:00 2001 From: sanjam chhatwal Date: Thu, 26 Oct 2023 13:49:17 +0400 Subject: [PATCH 8/9] chore: responsive font size --- .../register-app-dialog-success.module.scss | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/features/dashboard/components/Dialogs/RegisterAppDialogSuccess/register-app-dialog-success.module.scss b/src/features/dashboard/components/Dialogs/RegisterAppDialogSuccess/register-app-dialog-success.module.scss index 1578e415..186f7076 100644 --- a/src/features/dashboard/components/Dialogs/RegisterAppDialogSuccess/register-app-dialog-success.module.scss +++ b/src/features/dashboard/components/Dialogs/RegisterAppDialogSuccess/register-app-dialog-success.module.scss @@ -19,6 +19,9 @@ @media (max-width: 768px) { padding: unset; } + @media (max-width: 425px) { + font-size: rem(1.2); + } .title { font-weight: bold; From 80796331b191cad84fe0e17807a80a21dec584c9 Mon Sep 17 00:00:00 2001 From: sanjam chhatwal Date: Thu, 26 Oct 2023 15:06:15 +0400 Subject: [PATCH 9/9] chore: link fix --- .../components/Dialogs/RegisterAppDialogSuccess/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/features/dashboard/components/Dialogs/RegisterAppDialogSuccess/index.tsx b/src/features/dashboard/components/Dialogs/RegisterAppDialogSuccess/index.tsx index 99ab4887..5f0fb0ef 100644 --- a/src/features/dashboard/components/Dialogs/RegisterAppDialogSuccess/index.tsx +++ b/src/features/dashboard/components/Dialogs/RegisterAppDialogSuccess/index.tsx @@ -12,7 +12,7 @@ export const RegisterAppDialogSuccess = ({ onClose }: IRegisterAppDialogSuccessP const onSuccessfulClick = () => { updateCurrentTab('MANAGE_APPS'); - window.open('https://t.me/deriv_apps', '_blank'); + window.open('https://t.me/+g6FV5tFY1u9lZGE1', '_blank'); onClose(); };