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 6997d05b9..0898d3dd4 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(); @@ -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); diff --git a/src/features/dashboard/components/Dialogs/RegisterAppDialogSuccess/index.tsx b/src/features/dashboard/components/Dialogs/RegisterAppDialogSuccess/index.tsx index 98f2b7580..5f0fb0efb 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,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 (
- + +
+ +

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 000000000..186f70768 --- /dev/null +++ b/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%; + } + } +} 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 61b8b743a..a24b5644a 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 () => { diff --git a/static/img/register_success.svg b/static/img/register_success.svg new file mode 100644 index 000000000..271526d75 --- /dev/null +++ b/static/img/register_success.svg @@ -0,0 +1,4 @@ + + + +