From c5aace238e26c0369adb845bbf6223d65b8f2733 Mon Sep 17 00:00:00 2001 From: shafin-deriv Date: Mon, 18 Mar 2024 13:01:23 +0800 Subject: [PATCH 01/10] feat: new app dashboard and app registration flow --- package-lock.json | 186 ++++++++++++++++++ package.json | 3 + .../custom_radio_button.scss | 30 +++ src/components/CustomRadioButton/index.tsx | 38 ++++ src/components/Spinner/Spinner.module.scss | 3 +- src/components/SwippableBottomSheet/index.tsx | 108 ++++++++++ .../swippable-bottom-sheet.scss | 76 +++++++ .../app-manager/app-manager.context.tsx | 2 + .../app-manager/app-manager.provider.tsx | 14 +- .../app-dashboard-container.module.scss | 19 ++ .../AppDashboardContainer/index.tsx | 21 ++ .../components/AppRegister/app-register.scss | 57 ++++++ .../components/AppRegister/index.tsx | 114 +++++++++++ .../dashboard/components/AppRegister/types.ts | 44 +++++ .../app-register-success-modal.scss | 41 ++++ .../Modals/AppRegisterSuccessModal/index.tsx | 61 ++++++ src/features/dashboard/index.tsx | 27 ++- .../dashboard/manage-dashboard/index.tsx | 89 +++++++++ .../manage-dashboard/manage-dashboard.scss | 5 + src/hooks/useDeviceType/index.tsx | 33 ++++ src/styles/index.scss | 1 + static/img/circle_check_regular_icon.svg | 1 + static/img/circle_dot_caption_bold.svg | 1 + static/img/circle_dot_caption_fill.svg | 1 + 24 files changed, 968 insertions(+), 7 deletions(-) create mode 100644 src/components/CustomRadioButton/custom_radio_button.scss create mode 100644 src/components/CustomRadioButton/index.tsx create mode 100644 src/components/SwippableBottomSheet/index.tsx create mode 100644 src/components/SwippableBottomSheet/swippable-bottom-sheet.scss create mode 100644 src/features/dashboard/components/AppDashboardContainer/app-dashboard-container.module.scss create mode 100644 src/features/dashboard/components/AppDashboardContainer/index.tsx create mode 100644 src/features/dashboard/components/AppRegister/app-register.scss create mode 100644 src/features/dashboard/components/AppRegister/index.tsx create mode 100644 src/features/dashboard/components/AppRegister/types.ts create mode 100644 src/features/dashboard/components/Modals/AppRegisterSuccessModal/app-register-success-modal.scss create mode 100644 src/features/dashboard/components/Modals/AppRegisterSuccessModal/index.tsx create mode 100644 src/features/dashboard/manage-dashboard/index.tsx create mode 100644 src/features/dashboard/manage-dashboard/manage-dashboard.scss create mode 100644 src/hooks/useDeviceType/index.tsx create mode 100644 static/img/circle_check_regular_icon.svg create mode 100644 static/img/circle_dot_caption_bold.svg create mode 100644 static/img/circle_dot_caption_fill.svg diff --git a/package-lock.json b/package-lock.json index 432a7b907..b88636063 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,7 @@ "version": "0.0.0", "dependencies": { "@deriv/deriv-api": "^1.0.11", + "@deriv/quill-design": "^1.2.18", "@deriv/ui": "^0.1.0", "@docusaurus/core": "^2.4.0", "@docusaurus/plugin-client-redirects": "^2.4.0", @@ -19,7 +20,9 @@ "@mdx-js/react": "^1.6.22", "@radix-ui/react-dropdown-menu": "^2.0.2", "@radix-ui/react-tabs": "^1.0.2", + "@react-spring/web": "^9.7.3", "@testing-library/react-hooks": "^8.0.1", + "@use-gesture/react": "^10.3.0", "babel-plugin-jsx-remove-data-test-id": "^3.0.0", "clsx": "^1.2.1", "docusaurus-plugin-sass": "^0.2.2", @@ -2480,6 +2483,32 @@ "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==" }, + "node_modules/@deriv/quill-design": { + "version": "1.2.18", + "resolved": "https://registry.npmjs.org/@deriv/quill-design/-/quill-design-1.2.18.tgz", + "integrity": "sha512-BlhqMoW3dplvkLnEO2NdlrwEOdgQazI8PzzFnhlnEq58KgsKqiJZjvO8SycMeq0f0MKRZUi6MssPVqelFqjDcg==", + "peerDependencies": { + "@deriv/quill-icons": "^1.0.10", + "@headlessui/react": "^1.7.17", + "@types/react": "^17.x || ^18.x", + "@use-gesture/react": "^10.3.0", + "class-variance-authority": "^0.7.0", + "react": "^17.x || ^18.x", + "react-dom": "^17.x || ^18.x", + "tailwind-merge": "^1.14.0", + "usehooks-ts": "^2.9.1" + } + }, + "node_modules/@deriv/quill-icons": { + "version": "1.19.2", + "resolved": "https://registry.npmjs.org/@deriv/quill-icons/-/quill-icons-1.19.2.tgz", + "integrity": "sha512-bp+2tkGGu+2uIOo6M0ROy808Jg9izDqdPVgcyBa8c7WkxYtACeb2FeQMjZZxSSOkfQmgUpvw8QHfNCEjx4dBFg==", + "peer": true, + "peerDependencies": { + "react": ">= 16", + "react-dom": ">= 16" + } + }, "node_modules/@deriv/ui": { "version": "0.1.0", "resolved": "https://registry.npmjs.org/@deriv/ui/-/ui-0.1.0.tgz", @@ -3598,6 +3627,23 @@ "@hapi/hoek": "^9.0.0" } }, + "node_modules/@headlessui/react": { + "version": "1.7.18", + "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-1.7.18.tgz", + "integrity": "sha512-4i5DOrzwN4qSgNsL4Si61VMkUcWbcSKueUV7sFhpHzQcSShdlHENE5+QBntMSRvHt8NyoFO2AGG8si9lq+w4zQ==", + "peer": true, + "dependencies": { + "@tanstack/react-virtual": "^3.0.0-beta.60", + "client-only": "^0.0.1" + }, + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "react": "^16 || ^17 || ^18", + "react-dom": "^16 || ^17 || ^18" + } + }, "node_modules/@hookform/resolvers": { "version": "2.9.10", "resolved": "https://registry.npmjs.org/@hookform/resolvers/-/resolvers-2.9.10.tgz", @@ -5298,6 +5344,66 @@ "resolved": "https://registry.npmjs.org/@react-dnd/shallowequal/-/shallowequal-2.0.0.tgz", "integrity": "sha512-Pc/AFTdwZwEKJxFJvlxrSmGe/di+aAOBn60sremrpLo6VI/6cmiUYNNwlI5KNYttg7uypzA3ILPMPgxB2GYZEg==" }, + "node_modules/@react-spring/animated": { + "version": "9.7.3", + "resolved": "https://registry.npmjs.org/@react-spring/animated/-/animated-9.7.3.tgz", + "integrity": "sha512-5CWeNJt9pNgyvuSzQH+uy2pvTg8Y4/OisoscZIR8/ZNLIOI+CatFBhGZpDGTF/OzdNFsAoGk3wiUYTwoJ0YIvw==", + "dependencies": { + "@react-spring/shared": "~9.7.3", + "@react-spring/types": "~9.7.3" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, + "node_modules/@react-spring/core": { + "version": "9.7.3", + "resolved": "https://registry.npmjs.org/@react-spring/core/-/core-9.7.3.tgz", + "integrity": "sha512-IqFdPVf3ZOC1Cx7+M0cXf4odNLxDC+n7IN3MDcVCTIOSBfqEcBebSv+vlY5AhM0zw05PDbjKrNmBpzv/AqpjnQ==", + "dependencies": { + "@react-spring/animated": "~9.7.3", + "@react-spring/shared": "~9.7.3", + "@react-spring/types": "~9.7.3" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/react-spring/donate" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, + "node_modules/@react-spring/shared": { + "version": "9.7.3", + "resolved": "https://registry.npmjs.org/@react-spring/shared/-/shared-9.7.3.tgz", + "integrity": "sha512-NEopD+9S5xYyQ0pGtioacLhL2luflh6HACSSDUZOwLHoxA5eku1UPuqcJqjwSD6luKjjLfiLOspxo43FUHKKSA==", + "dependencies": { + "@react-spring/types": "~9.7.3" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, + "node_modules/@react-spring/types": { + "version": "9.7.3", + "resolved": "https://registry.npmjs.org/@react-spring/types/-/types-9.7.3.tgz", + "integrity": "sha512-Kpx/fQ/ZFX31OtlqVEFfgaD1ACzul4NksrvIgYfIFq9JpDHFwQkMVZ10tbo0FU/grje4rcL4EIrjekl3kYwgWw==" + }, + "node_modules/@react-spring/web": { + "version": "9.7.3", + "resolved": "https://registry.npmjs.org/@react-spring/web/-/web-9.7.3.tgz", + "integrity": "sha512-BXt6BpS9aJL/QdVqEIX9YoUy8CE6TJrU0mNCqSoxdXlIeNcEBWOfIyE6B14ENNsyQKS3wOWkiJfco0tCr/9tUg==", + "dependencies": { + "@react-spring/animated": "~9.7.3", + "@react-spring/core": "~9.7.3", + "@react-spring/shared": "~9.7.3", + "@react-spring/types": "~9.7.3" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/@sideway/address": { "version": "4.1.4", "resolved": "https://registry.npmjs.org/@sideway/address/-/address-4.1.4.tgz", @@ -5620,6 +5726,33 @@ "node": ">=6" } }, + "node_modules/@tanstack/react-virtual": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/@tanstack/react-virtual/-/react-virtual-3.1.3.tgz", + "integrity": "sha512-YCzcbF/Ws/uZ0q3Z6fagH+JVhx4JLvbSflgldMgLsuvB8aXjZLLb3HvrEVxY480F9wFlBiXlvQxOyXb5ENPrNA==", + "peer": true, + "dependencies": { + "@tanstack/virtual-core": "3.1.3" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, + "node_modules/@tanstack/virtual-core": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.1.3.tgz", + "integrity": "sha512-Y5B4EYyv1j9V8LzeAoOVeTg0LI7Fo5InYKgAjkY1Pu9GjtUwX/EKxNcU7ng3sKr99WEf+bPTcktAeybyMOYo+g==", + "peer": true, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + } + }, "node_modules/@testing-library/dom": { "version": "8.19.0", "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-8.19.0.tgz", @@ -6482,6 +6615,22 @@ "url": "https://opencollective.com/typescript-eslint" } }, + "node_modules/@use-gesture/core": { + "version": "10.3.0", + "resolved": "https://registry.npmjs.org/@use-gesture/core/-/core-10.3.0.tgz", + "integrity": "sha512-rh+6MND31zfHcy9VU3dOZCqGY511lvGcfyJenN4cWZe0u1BH6brBpBddLVXhF2r4BMqWbvxfsbL7D287thJU2A==" + }, + "node_modules/@use-gesture/react": { + "version": "10.3.0", + "resolved": "https://registry.npmjs.org/@use-gesture/react/-/react-10.3.0.tgz", + "integrity": "sha512-3zc+Ve99z4usVP6l9knYVbVnZgfqhKah7sIG+PS2w+vpig2v2OLct05vs+ZXMzwxdNCMka8B+8WlOo0z6Pn6DA==", + "dependencies": { + "@use-gesture/core": "10.3.0" + }, + "peerDependencies": { + "react": ">= 16.8.0" + } + }, "node_modules/@webassemblyjs/ast": { "version": "1.11.1", "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.1.tgz", @@ -8426,6 +8575,27 @@ "resolved": "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.2.2.tgz", "integrity": "sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA==" }, + "node_modules/class-variance-authority": { + "version": "0.7.0", + "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.0.tgz", + "integrity": "sha512-jFI8IQw4hczaL4ALINxqLEXQbWcNjoSkloa4IaufXCJr6QawJyw7tuRysRsrE8w2p/4gGaxKIt/hX3qz/IbD1A==", + "peer": true, + "dependencies": { + "clsx": "2.0.0" + }, + "funding": { + "url": "https://joebell.co.uk" + } + }, + "node_modules/class-variance-authority/node_modules/clsx": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.0.0.tgz", + "integrity": "sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==", + "peer": true, + "engines": { + "node": ">=6" + } + }, "node_modules/classnames": { "version": "2.3.2", "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz", @@ -8521,6 +8691,12 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/client-only": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz", + "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==", + "peer": true + }, "node_modules/cliui": { "version": "8.0.1", "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz", @@ -23023,6 +23199,16 @@ "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==", "dev": true }, + "node_modules/tailwind-merge": { + "version": "1.14.0", + "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-1.14.0.tgz", + "integrity": "sha512-3mFKyCo/MBcgyOTlrY8T7odzZFx+w+qKSMAmdFzRvqBfLlSigU6TZnlFHK0lkMwj9Bj8OYU+9yW9lmGuS0QEnQ==", + "peer": true, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/dcastil" + } + }, "node_modules/tapable": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz", diff --git a/package.json b/package.json index 41a507949..df5225936 100644 --- a/package.json +++ b/package.json @@ -22,6 +22,7 @@ }, "dependencies": { "@deriv/deriv-api": "^1.0.11", + "@deriv/quill-design": "^1.2.18", "@deriv/ui": "^0.1.0", "@docusaurus/core": "^2.4.0", "@docusaurus/plugin-client-redirects": "^2.4.0", @@ -32,7 +33,9 @@ "@mdx-js/react": "^1.6.22", "@radix-ui/react-dropdown-menu": "^2.0.2", "@radix-ui/react-tabs": "^1.0.2", + "@react-spring/web": "^9.7.3", "@testing-library/react-hooks": "^8.0.1", + "@use-gesture/react": "^10.3.0", "babel-plugin-jsx-remove-data-test-id": "^3.0.0", "clsx": "^1.2.1", "docusaurus-plugin-sass": "^0.2.2", diff --git a/src/components/CustomRadioButton/custom_radio_button.scss b/src/components/CustomRadioButton/custom_radio_button.scss new file mode 100644 index 000000000..74a92a25d --- /dev/null +++ b/src/components/CustomRadioButton/custom_radio_button.scss @@ -0,0 +1,30 @@ +.custom_radio { + position: relative; + + input { + opacity: 0; + position: absolute; + top: 8px; + } + + label { + display: flex; + align-items: baseline; + cursor: pointer; + } + + &__icon { + position: relative; + margin-inline-end: 8px; + top: 6px; + + img { + width: 24px; + height: 24px; + + @media (max-width: 767px) { + width: 48px; + } + } + } +} diff --git a/src/components/CustomRadioButton/index.tsx b/src/components/CustomRadioButton/index.tsx new file mode 100644 index 000000000..ee2aa7d9a --- /dev/null +++ b/src/components/CustomRadioButton/index.tsx @@ -0,0 +1,38 @@ +import React from 'react'; +import './custom_radio_button.scss'; + +type CustomRadioButtonProps = { + id: string; + name: string; + value: string; + checked: boolean; + onChange: () => void; +}; + +const CustomRadioButton: React.FC = ({ + id, + name, + value, + checked, + onChange, + children, + ...rest +}) => { + return ( +
+ + +
+ ); +}; + +export default CustomRadioButton; diff --git a/src/components/Spinner/Spinner.module.scss b/src/components/Spinner/Spinner.module.scss index 72da932da..c771f563a 100644 --- a/src/components/Spinner/Spinner.module.scss +++ b/src/components/Spinner/Spinner.module.scss @@ -2,6 +2,7 @@ .spinnerContainer { position: relative; width: 100%; + height: 100%; display: flex; align-items: center; justify-content: center; @@ -14,7 +15,7 @@ overflow: hidden; animation: rotating 0.5s linear infinite; &:before { - content: ""; + content: ''; left: 50%; top: 50%; width: 70%; diff --git a/src/components/SwippableBottomSheet/index.tsx b/src/components/SwippableBottomSheet/index.tsx new file mode 100644 index 000000000..ca4100d07 --- /dev/null +++ b/src/components/SwippableBottomSheet/index.tsx @@ -0,0 +1,108 @@ +import React, { useEffect } from 'react'; +import { useDrag } from '@use-gesture/react'; +import { a, useSpring, config } from '@react-spring/web'; +import { Button } from '@deriv/quill-design'; +import './swippable-bottom-sheet.scss'; + +type SwippableBottomSheetProps = { + action_sheet_open: boolean; + is_desktop?: boolean; + primary_action?: { + label: string; + onClick: (event: React.MouseEvent) => void; + }; + secondary_action?: { + label: string; + onClick: (event: React.MouseEvent) => void; + }; + disable_drag?: boolean; + on_close?: () => void; +}; + +const SwippableBottomSheet: React.FC = ({ + action_sheet_open, + children, + disable_drag = false, + is_desktop = false, + primary_action, + secondary_action, + on_close, +}) => { + const height = window.innerHeight - 124; + const [{ y }, api] = useSpring(() => ({ y: height })); + + const open = ({ canceled }) => { + api.start({ y: 0, immediate: false, config: canceled ? config.wobbly : config.stiff }); + }; + + const close = (velocity = 0) => { + api.start({ y: height, immediate: false, config: { ...config.stiff, velocity } }); + setTimeout(() => { + on_close?.(); + }, 300); + }; + + useEffect(() => { + if (action_sheet_open) open({ canceled: false }); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [action_sheet_open]); + + const bind = useDrag( + ({ last, velocity: [, vy], direction: [, dy], offset: [, oy], cancel, canceled }) => { + if (disable_drag) return; + if (oy < -70) cancel(); + if (last) oy > height * 0.5 || (vy > 0.5 && dy > 0) ? close(vy) : open({ canceled }); + else api.start({ y: oy, immediate: true }); + }, + { from: () => [0, y.get()], filterTaps: true, bounds: { top: 0 }, rubberband: true }, + ); + + const display = y.to((py) => (py < height ? 'block' : 'none')); + + return ( + + {action_sheet_open && ( +
+ + {!is_desktop && !disable_drag && ( +
+
+
+ )} + +
+
{children}
+
+ {primary_action && ( + + )} + {secondary_action && ( + + )} +
+
+ +
+ )} + + ); +}; + +export default SwippableBottomSheet; diff --git a/src/components/SwippableBottomSheet/swippable-bottom-sheet.scss b/src/components/SwippableBottomSheet/swippable-bottom-sheet.scss new file mode 100644 index 000000000..4fd79b0a7 --- /dev/null +++ b/src/components/SwippableBottomSheet/swippable-bottom-sheet.scss @@ -0,0 +1,76 @@ +.action_sheet { + overflow: hidden; + height: calc(100vh + 32px); + width: 100vw; + background: #000000b8; + position: absolute; + top: 0; + z-index: 9999; + + &.desktop { + display: flex; + align-items: center; + justify-content: center; + } + + &__main { + position: fixed; + border-radius: 12px; + background: #fff; + touch-action: none; + &.mobile { + width: 96vw; + left: 2vw; + border-radius: 12px 12px 0 0; + } + &.desktop { + position: absolute; + } + } + + &__handler { + width: 100%; + height: 20px; + display: flex; + justify-content: center; + align-items: center; + padding-block: 16px; + &_icon { + position: absolute; + width: 48px; + height: 8px; + background: rgba(0, 0, 0, 0.2392156863); + border-radius: 4px; + } + border-bottom: 1px solid #eee; + } + + &__body { + width: 100%; + display: flex; + align-content: space-between; + flex-wrap: wrap; + + &__content { + max-height: 70vh; + width: 100%; + overflow: auto; + padding: 16px; + } + &__footer { + border-top: 1px solid #eee; + width: 100%; + padding: 24px; + display: flex; + text-align: center; + flex-wrap: wrap; + button { + width: 100%; + border: 1px solid; + &:first-child { + margin-bottom: 8px; + } + } + } + } +} diff --git a/src/contexts/app-manager/app-manager.context.tsx b/src/contexts/app-manager/app-manager.context.tsx index 2879fdeee..dae73845d 100644 --- a/src/contexts/app-manager/app-manager.context.tsx +++ b/src/contexts/app-manager/app-manager.context.tsx @@ -10,6 +10,8 @@ export type TAppManagerContext = { updateCurrentTab: (tab: TDashboardTab) => void; is_dashboard: boolean; setIsDashboard: Dispatch>; + app_register_modal_open: boolean; + setAppRegisterModalOpen: Dispatch>; }; export const AppManagerContext = createContext(null); diff --git a/src/contexts/app-manager/app-manager.provider.tsx b/src/contexts/app-manager/app-manager.provider.tsx index f4766e2a8..9a79681e9 100644 --- a/src/contexts/app-manager/app-manager.provider.tsx +++ b/src/contexts/app-manager/app-manager.provider.tsx @@ -12,6 +12,7 @@ const AppManagerContextProvider = ({ children }: TAppManagerContextProps) => { const [apps, setApps] = useState([]); const [currentTab, setCurrentTab] = useState('MANAGE_TOKENS'); const [is_dashboard, setIsDashboard] = useState(false); + const [app_register_modal_open, setAppRegisterModalOpen] = useState(false); const { getAllApps, apps: updatedApps } = useGetApps(); const { is_authorized } = useAuthContext(); @@ -37,8 +38,19 @@ const AppManagerContextProvider = ({ children }: TAppManagerContextProps) => { updateCurrentTab, setIsDashboard, is_dashboard, + setAppRegisterModalOpen, + app_register_modal_open, }; - }, [apps, currentTab, getApps, updateCurrentTab, setIsDashboard, is_dashboard]); + }, [ + apps, + currentTab, + getApps, + updateCurrentTab, + setIsDashboard, + is_dashboard, + app_register_modal_open, + setAppRegisterModalOpen, + ]); return {children}; }; diff --git a/src/features/dashboard/components/AppDashboardContainer/app-dashboard-container.module.scss b/src/features/dashboard/components/AppDashboardContainer/app-dashboard-container.module.scss new file mode 100644 index 000000000..a4d4e05cb --- /dev/null +++ b/src/features/dashboard/components/AppDashboardContainer/app-dashboard-container.module.scss @@ -0,0 +1,19 @@ +.app_dashboard_container { + display: flex; + flex-direction: column; + align-items: center; + padding-block: 72px; + width: 100%; + + &_main { + max-width: 608px; + } + + &_top { + text-align: center; + padding-inline: 16px; + h2 { + margin-bottom: 16px; + } + } +} diff --git a/src/features/dashboard/components/AppDashboardContainer/index.tsx b/src/features/dashboard/components/AppDashboardContainer/index.tsx new file mode 100644 index 000000000..695452711 --- /dev/null +++ b/src/features/dashboard/components/AppDashboardContainer/index.tsx @@ -0,0 +1,21 @@ +import React from 'react'; +import styles from './app-dashboard-container.module.scss'; +import { Heading, Text } from '@deriv/quill-design'; + +const AppDashboardContainer: React.FC = ({ children }) => { + return ( +
+
+
+ App dashboard + + Start using Deriv API to bring custom integrations and powerful automation to your apps. + +
+
{children}
+
+
+ ); +}; + +export default AppDashboardContainer; diff --git a/src/features/dashboard/components/AppRegister/app-register.scss b/src/features/dashboard/components/AppRegister/app-register.scss new file mode 100644 index 000000000..fe09c8e31 --- /dev/null +++ b/src/features/dashboard/components/AppRegister/app-register.scss @@ -0,0 +1,57 @@ +.app_register_container { + margin-inline: 16px; + margin-top: 60px; + + @media screen and (max-width: 992px) { + margin-top: 48px; + } + + &__fields { + display: flex; + align-items: center; + border: 1px solid #00000014; + padding-block: 5px; + padding-inline-end: 12px; + border-radius: 8px; + + &__input { + width: 100%; + &:first-child { + .border-75 { + border: none; + } + .pt-400 { + padding-top: 0; + } + } + } + + &__button { + button { + width: 86px; + } + } + } + + &__restrictions { + color: #0000007a; + margin-block: 8px; + margin-inline-start: 32px; + ul { + list-style: disc; + line-height: 24px; + } + } + + &__tnc { + margin-top: 24px; + } +} + +.error-border { + border: 1px solid var(--colors-coral500); +} + +.error { + color: var(--colors-coral500) !important; +} diff --git a/src/features/dashboard/components/AppRegister/index.tsx b/src/features/dashboard/components/AppRegister/index.tsx new file mode 100644 index 000000000..7b0c8e685 --- /dev/null +++ b/src/features/dashboard/components/AppRegister/index.tsx @@ -0,0 +1,114 @@ +import React, { useState } from 'react'; +import { Button, Text, TextField } from '@deriv/quill-design'; +import CustomRadioButton from '@site/src/components/CustomRadioButton'; +import { useForm } from 'react-hook-form'; +import { yupResolver } from '@hookform/resolvers/yup'; +import './app-register.scss'; +import { + IBaseRegisterAppForm, + TAppRegisterProps, + TRestrictionsComponentProps, + TTermsAndConditionsProps, + baseAppRegisterSchema, + error_map, +} from './types'; + +const TermsAndConditions: React.FC = ({ + setTermsConfirmation, + terms_confirmation, +}) => { + const handleChange = () => { + setTermsConfirmation(true); + }; + return ( +
+ + + + By registering your application, you acknowledge that you‘ve read and accepted the + Deriv API{' '} + + + terms and conditions + + + +
+ ); +}; + +const RestrictionsComponent: React.FC = ({ error }) => { + return ( +
+
    +
  • + {error_map.error_code_1} +
    • +
  • + {error_map.error_code_2} +
    • +
  • + {error_map.error_code_3} +
    • +
+
+ ); +}; + +const AppRegister: React.FC = ({ submit }) => { + const [terms_confirmation, setTermsConfirmation] = useState(false); + const { + register, + handleSubmit, + formState: { errors }, + } = useForm({ + mode: 'all', + resolver: yupResolver(baseAppRegisterSchema), + }); + + const has_error = Object.entries(errors).length !== 0; + return ( +
+
+
+
+ +
+
+ +
+
+ + +
+
+ ); +}; + +export default AppRegister; diff --git a/src/features/dashboard/components/AppRegister/types.ts b/src/features/dashboard/components/AppRegister/types.ts new file mode 100644 index 000000000..d69753190 --- /dev/null +++ b/src/features/dashboard/components/AppRegister/types.ts @@ -0,0 +1,44 @@ +import * as yup from 'yup'; + +export const error_map = { + error_code_1: 'Only alphanumeric characters with spaces and underscores are allowed.', + error_code_2: 'The name can contain up to 48 characters.', + error_code_3: 'The name cannot contain “Binary”, “Deriv”, or similar words.', +}; + +export const base_registration_schema = { + name: yup + .string() + .required('Enter your app name.') + .max(48, error_map.error_code_2) + .matches(/^(?=.*[a-zA-Z0-9])[a-zA-Z0-9_ ]*$/, { + message: error_map.error_code_1, + excludeEmptyString: true, + }) + .matches( + /^(?!.*deriv|.*d3r1v|.*der1v|.*d3riv|.*b1nary|.*binary|.*b1n4ry|.*bin4ry|.*blnary|.*b\|nary).*$/i, + { + message: error_map.error_code_3, + excludeEmptyString: true, + }, + ), +}; + +export type TTermsAndConditionsProps = { + setTermsConfirmation: React.Dispatch>; + terms_confirmation: boolean; +}; + +export const baseAppRegisterSchema = yup.object({ + ...base_registration_schema, +}); + +export type IBaseRegisterAppForm = yup.InferType; + +export type TAppRegisterProps = { + submit: (data: IBaseRegisterAppForm) => void; +}; + +export type TRestrictionsComponentProps = { + error: string; +}; diff --git a/src/features/dashboard/components/Modals/AppRegisterSuccessModal/app-register-success-modal.scss b/src/features/dashboard/components/Modals/AppRegisterSuccessModal/app-register-success-modal.scss new file mode 100644 index 000000000..1d073ab5c --- /dev/null +++ b/src/features/dashboard/components/Modals/AppRegisterSuccessModal/app-register-success-modal.scss @@ -0,0 +1,41 @@ +.app_register_success_modal { + .action_sheet__main { + &.desktop { + max-width: 512px; + } + } + + &__icon { + display: flex; + justify-content: center; + background: #f6f7f8; + margin-inline: -16px; + margin-top: -16px; + margin-bottom: 16px; + padding: 24px; + border-radius: 12px 12px 0 0; + } + + &__header { + font-weight: 700; + font-size: 18px; + line-height: 24px; + text-align: center; + padding-block: 8px; + } + + &__content { + margin: 16px; + font-weight: 400; + font-size: 16px; + line-height: 24px; + + ul { + padding-block: 8px; + li { + list-style: disc; + margin-inline-start: 24px; + } + } + } +} diff --git a/src/features/dashboard/components/Modals/AppRegisterSuccessModal/index.tsx b/src/features/dashboard/components/Modals/AppRegisterSuccessModal/index.tsx new file mode 100644 index 000000000..bfffa515b --- /dev/null +++ b/src/features/dashboard/components/Modals/AppRegisterSuccessModal/index.tsx @@ -0,0 +1,61 @@ +import React from 'react'; +import useAppManager from '@site/src/hooks/useAppManager'; +import SwippableBottomSheet from '@site/src/components/SwippableBottomSheet'; +import { Heading } from '@deriv/quill-design'; +import './app-register-success-modal.scss'; + +interface IAppRegisterSuccessModalProps { + onConfigure: () => void; + onCancel: () => void; + is_desktop: boolean; +} + +export const AppRegisterSuccessModal = ({ + onConfigure, + onCancel, + is_desktop, +}: IAppRegisterSuccessModalProps) => { + const { app_register_modal_open } = useAppManager(); + + return ( +
+ +
+ {is_desktop && ( +
+ +
+ )} + + Application registered successfully! + +
+ + Ready to take the next step? +

Optimise your app's capabilities by: +
    +
  • Creating an API token to use with your application.
    • +
  • Adding OAuth authentication in your app.
    • +
  • Selecting the scopes of OAuth authorisation for your app.
    • +
+
Note: You can make these changes later through the dashboard.
+ +
+
+ +
+ ); +}; diff --git a/src/features/dashboard/index.tsx b/src/features/dashboard/index.tsx index 637831f54..0837e6553 100644 --- a/src/features/dashboard/index.tsx +++ b/src/features/dashboard/index.tsx @@ -1,12 +1,17 @@ -import React, { useEffect } from 'react'; -import { Login } from '../Auth/Login/Login'; +import React, { Suspense, useEffect } from 'react'; import useAuthContext from '@site/src/hooks/useAuthContext'; -import DashboardTabs from './components/Tabs'; +// import DashboardTabs from './components/Tabs'; import useAppManager from '@site/src/hooks/useAppManager'; +import Spinner from '@site/src/components/Spinner'; + +const ManageDashboard = React.lazy(() => import('./manage-dashboard')); +const Login = React.lazy(() => + import('../Auth/Login/Login').then((module) => ({ default: module.Login })), +); export const AppManager = () => { const { is_logged_in } = useAuthContext(); - const { setIsDashboard, is_dashboard } = useAppManager(); + const { setIsDashboard } = useAppManager(); useEffect(() => { setIsDashboard(true); @@ -15,5 +20,17 @@ export const AppManager = () => { }; }, [setIsDashboard]); - return {is_logged_in ? : }; + return ( + + + +
+ } + > + {is_logged_in ? : } + + + ); }; diff --git a/src/features/dashboard/manage-dashboard/index.tsx b/src/features/dashboard/manage-dashboard/index.tsx new file mode 100644 index 000000000..08b34bf3e --- /dev/null +++ b/src/features/dashboard/manage-dashboard/index.tsx @@ -0,0 +1,89 @@ +import React, { useCallback, useEffect, useState } from 'react'; +import AppDashboardContainer from '../components/AppDashboardContainer'; +import AppRegister from '../components/AppRegister'; +import useAppManager from '@site/src/hooks/useAppManager'; +import useApiToken from '@site/src/hooks/useApiToken'; +import Spinner from '@site/src/components/Spinner'; +import { IRegisterAppForm } from '../types'; +import useWS from '@site/src/hooks/useWs'; +import useDeviceType from '@site/src/hooks/useDeviceType'; +import { RegisterAppDialogError } from '../components/Dialogs/RegisterAppDialogError'; +import { AppRegisterSuccessModal } from '../components/Modals/AppRegisterSuccessModal'; +import './manage-dashboard.scss'; + +const ManageDashboard = () => { + const { apps, getApps, setAppRegisterModalOpen } = useAppManager(); + const { tokens } = useApiToken(); + const { send: registerApp, error, clear, data, is_loading } = useWS('app_register'); + const { deviceType } = useDeviceType(); + const [is_desktop, setIsDesktop] = useState(true); + + useEffect(() => { + if (deviceType.includes('desktop')) { + setIsDesktop(true); + } else { + setIsDesktop(false); + } + }, [deviceType]); + + useEffect(() => { + if (!is_loading && data?.name && !error) { + setAppRegisterModalOpen(true); + clear(); + getApps(); + } + }, [data, clear, error, setAppRegisterModalOpen, is_loading, getApps]); + + useEffect(() => { + getApps(); + }, [getApps]); + + const submit = useCallback( + (data: IRegisterAppForm) => { + const { name } = data; + registerApp({ + name, + scopes: [], + }); + }, + [registerApp], + ); + + if (!apps || is_loading) + return ( +
+ +
+ ); + return ( + + {error && } + setAppRegisterModalOpen(false)} + onConfigure={() => setAppRegisterModalOpen(false)} + /> + + {apps.length || tokens.length ? ( + // will be handle in later phase +
+ Component development in progress! +
+ ) : ( + + )} + + + ); +}; + +const MemoizedManageDashboard = React.memo(ManageDashboard); + +export default MemoizedManageDashboard; diff --git a/src/features/dashboard/manage-dashboard/manage-dashboard.scss b/src/features/dashboard/manage-dashboard/manage-dashboard.scss new file mode 100644 index 000000000..a9d7e8a5d --- /dev/null +++ b/src/features/dashboard/manage-dashboard/manage-dashboard.scss @@ -0,0 +1,5 @@ +.manage_dashboard { + &__spinner { + height: 90vh; + } +} diff --git a/src/hooks/useDeviceType/index.tsx b/src/hooks/useDeviceType/index.tsx new file mode 100644 index 000000000..332ba2e14 --- /dev/null +++ b/src/hooks/useDeviceType/index.tsx @@ -0,0 +1,33 @@ +import { useState, useEffect } from 'react'; +import { debounceTime, fromEvent } from 'rxjs'; + +type TDeviceType = 'mobile' | 'tablet' | 'desktop'; + +type TUseDeviceType = { + deviceType: TDeviceType; +}; + +const useDeviceType = (): TUseDeviceType => { + const [deviceType, setDeviceType] = useState('desktop'); + + useEffect(() => { + const handleResize = () => { + if (window.matchMedia('(max-width: 768px)').matches) { + setDeviceType('mobile'); + } else if (window.matchMedia('(max-width: 1023px)').matches) { + setDeviceType('tablet'); + } else { + setDeviceType('desktop'); + } + }; + + handleResize(); + const resize = fromEvent(window, 'resize'); + const result = resize.pipe(debounceTime(600)); + result.subscribe(handleResize); + }, []); + + return { deviceType }; +}; + +export default useDeviceType; diff --git a/src/styles/index.scss b/src/styles/index.scss index b5b8ec452..502d7def4 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,5 +1,6 @@ @use 'src/styles/utility' as *; @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;700&family=Ubuntu:wght@400;500;700&display=swap'); +@import '@deriv/quill-design/dist/quill-design.css'; /** * Any CSS included here will be global. The classic template diff --git a/static/img/circle_check_regular_icon.svg b/static/img/circle_check_regular_icon.svg new file mode 100644 index 000000000..004b7a8ae --- /dev/null +++ b/static/img/circle_check_regular_icon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/img/circle_dot_caption_bold.svg b/static/img/circle_dot_caption_bold.svg new file mode 100644 index 000000000..986d59044 --- /dev/null +++ b/static/img/circle_dot_caption_bold.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/img/circle_dot_caption_fill.svg b/static/img/circle_dot_caption_fill.svg new file mode 100644 index 000000000..4c4f0a128 --- /dev/null +++ b/static/img/circle_dot_caption_fill.svg @@ -0,0 +1 @@ + \ No newline at end of file From 4f9d15cc39aa4fdd6073a02e070ac1c11bc42984 Mon Sep 17 00:00:00 2001 From: shafin-deriv Date: Mon, 18 Mar 2024 13:20:37 +0800 Subject: [PATCH 02/10] chore: update file names --- .../index.tsx | 8 ++++---- .../swipeable-bottom-sheet.scss} | 0 .../components/Modals/AppRegisterSuccessModal/index.tsx | 6 +++--- 3 files changed, 7 insertions(+), 7 deletions(-) rename src/components/{SwippableBottomSheet => SwipeableBottomSheet}/index.tsx (94%) rename src/components/{SwippableBottomSheet/swippable-bottom-sheet.scss => SwipeableBottomSheet/swipeable-bottom-sheet.scss} (100%) diff --git a/src/components/SwippableBottomSheet/index.tsx b/src/components/SwipeableBottomSheet/index.tsx similarity index 94% rename from src/components/SwippableBottomSheet/index.tsx rename to src/components/SwipeableBottomSheet/index.tsx index ca4100d07..c054c4c7f 100644 --- a/src/components/SwippableBottomSheet/index.tsx +++ b/src/components/SwipeableBottomSheet/index.tsx @@ -2,9 +2,9 @@ import React, { useEffect } from 'react'; import { useDrag } from '@use-gesture/react'; import { a, useSpring, config } from '@react-spring/web'; import { Button } from '@deriv/quill-design'; -import './swippable-bottom-sheet.scss'; +import './swipeable-bottom-sheet.scss'; -type SwippableBottomSheetProps = { +type SwipeableBottomSheetProps = { action_sheet_open: boolean; is_desktop?: boolean; primary_action?: { @@ -19,7 +19,7 @@ type SwippableBottomSheetProps = { on_close?: () => void; }; -const SwippableBottomSheet: React.FC = ({ +const SwipeableBottomSheet: React.FC = ({ action_sheet_open, children, disable_drag = false, @@ -105,4 +105,4 @@ const SwippableBottomSheet: React.FC = ({ ); }; -export default SwippableBottomSheet; +export default SwipeableBottomSheet; diff --git a/src/components/SwippableBottomSheet/swippable-bottom-sheet.scss b/src/components/SwipeableBottomSheet/swipeable-bottom-sheet.scss similarity index 100% rename from src/components/SwippableBottomSheet/swippable-bottom-sheet.scss rename to src/components/SwipeableBottomSheet/swipeable-bottom-sheet.scss diff --git a/src/features/dashboard/components/Modals/AppRegisterSuccessModal/index.tsx b/src/features/dashboard/components/Modals/AppRegisterSuccessModal/index.tsx index bfffa515b..83ff76483 100644 --- a/src/features/dashboard/components/Modals/AppRegisterSuccessModal/index.tsx +++ b/src/features/dashboard/components/Modals/AppRegisterSuccessModal/index.tsx @@ -1,6 +1,6 @@ import React from 'react'; import useAppManager from '@site/src/hooks/useAppManager'; -import SwippableBottomSheet from '@site/src/components/SwippableBottomSheet'; +import SwipeableBottomSheet from '@site/src/components/SwipeableBottomSheet'; import { Heading } from '@deriv/quill-design'; import './app-register-success-modal.scss'; @@ -19,7 +19,7 @@ export const AppRegisterSuccessModal = ({ return (
-
- + ); }; From e2328e6e671d6380a04c82b1510e4c8cae07012e Mon Sep 17 00:00:00 2001 From: shafin-deriv Date: Mon, 18 Mar 2024 13:31:33 +0800 Subject: [PATCH 03/10] chore: remove lazy loading for server rendering issue --- src/features/dashboard/index.tsx | 24 ++++-------------------- 1 file changed, 4 insertions(+), 20 deletions(-) diff --git a/src/features/dashboard/index.tsx b/src/features/dashboard/index.tsx index 0837e6553..4d5cb6363 100644 --- a/src/features/dashboard/index.tsx +++ b/src/features/dashboard/index.tsx @@ -1,13 +1,9 @@ -import React, { Suspense, useEffect } from 'react'; +import React, { useEffect } from 'react'; import useAuthContext from '@site/src/hooks/useAuthContext'; // import DashboardTabs from './components/Tabs'; import useAppManager from '@site/src/hooks/useAppManager'; -import Spinner from '@site/src/components/Spinner'; - -const ManageDashboard = React.lazy(() => import('./manage-dashboard')); -const Login = React.lazy(() => - import('../Auth/Login/Login').then((module) => ({ default: module.Login })), -); +import MemoizedManageDashboard from './manage-dashboard'; +import { Login } from '../Auth/Login/Login'; export const AppManager = () => { const { is_logged_in } = useAuthContext(); @@ -20,17 +16,5 @@ export const AppManager = () => { }; }, [setIsDashboard]); - return ( - - - - - } - > - {is_logged_in ? : } - - - ); + return {is_logged_in ? : }; }; From dbd310e01686e0858f0230d08d8f4d7511980b40 Mon Sep 17 00:00:00 2001 From: shafin-deriv Date: Mon, 18 Mar 2024 14:57:22 +0800 Subject: [PATCH 04/10] chore: fix previous tests --- jest.config.js | 4 ++- jest.setup.ts | 15 +++++++++++ .../dashboard/__tests__/AppManager.test.tsx | 25 ++++++++++++++++--- .../dashboard/manage-dashboard/index.tsx | 2 +- 4 files changed, 40 insertions(+), 6 deletions(-) diff --git a/jest.config.js b/jest.config.js index a4ea29b67..336c80f3d 100644 --- a/jest.config.js +++ b/jest.config.js @@ -16,7 +16,9 @@ module.exports = { '^.+\\.(j|t)sx?$': 'ts-jest', '^.+\\.mjs$': 'babel-jest', }, - transformIgnorePatterns: ['node_modules/(?!(@docusaurus|swiper|ssr-window|dom7)|@theme)'], + transformIgnorePatterns: [ + 'node_modules/(?!(@docusaurus|swiper|ssr-window|dom7)|@theme|@deriv/quill-design)', + ], moduleNameMapper: { '@theme/(.*)': '@docusaurus/theme-classic/src/theme/$1', diff --git a/jest.setup.ts b/jest.setup.ts index acc34302a..6b50c2c9f 100644 --- a/jest.setup.ts +++ b/jest.setup.ts @@ -17,3 +17,18 @@ window.ResizeObserver = observe: jest.fn(), unobserve: jest.fn(), })); + +// HINT: we need this mock for the tests with useDevice hook +Object.defineProperty(window, 'matchMedia', { + writable: true, + value: jest.fn().mockImplementation((query) => ({ + matches: false, + media: query, + onchange: null, + addListener: jest.fn(), + removeListener: jest.fn(), + addEventListener: jest.fn(), + removeEventListener: jest.fn(), + dispatchEvent: jest.fn(), + })), +}); diff --git a/src/features/dashboard/__tests__/AppManager.test.tsx b/src/features/dashboard/__tests__/AppManager.test.tsx index 1d934c478..b01bd7913 100644 --- a/src/features/dashboard/__tests__/AppManager.test.tsx +++ b/src/features/dashboard/__tests__/AppManager.test.tsx @@ -60,16 +60,33 @@ describe('AppManager', () => { expect(login).toBeInTheDocument(); }); - it('shows the dashboard', () => { + it('shows the dashboard loader if app and token is undefined', () => { mockUseAuthContext.mockImplementation(() => ({ is_logged_in: true, })); render(); + const loader = screen.getByTestId('dt_manage_dashboard_spinner'); + expect(loader).toBeInTheDocument(); + }); - const dashboard_tabs = screen.getByText( - /Register your app, get an app ID, and start using the Deriv API/i, + it('shows the dashboard if app and token is not undefined', () => { + mockUseAuthContext.mockImplementation(() => ({ + is_logged_in: true, + })); + mockUseAppManager.mockImplementation(() => ({ + setIsDashboard: jest.fn(), + apps: [], + })); + mockUseApiToken.mockImplementation(() => ({ + tokens: [], + })); + + render(); + const dashboard_header = screen.getByText( + /Start using Deriv API to bring custom integrations and powerful automation to your apps./i, ); - expect(dashboard_tabs).toBeInTheDocument(); + + expect(dashboard_header).toBeInTheDocument(); }); }); diff --git a/src/features/dashboard/manage-dashboard/index.tsx b/src/features/dashboard/manage-dashboard/index.tsx index 08b34bf3e..eb75d4d21 100644 --- a/src/features/dashboard/manage-dashboard/index.tsx +++ b/src/features/dashboard/manage-dashboard/index.tsx @@ -49,7 +49,7 @@ const ManageDashboard = () => { [registerApp], ); - if (!apps || is_loading) + if (!apps || is_loading || !tokens) return (
From c586cc7a478a3a81a608340e929a810bd087fdee Mon Sep 17 00:00:00 2001 From: shafin-deriv Date: Mon, 18 Mar 2024 16:09:51 +0800 Subject: [PATCH 05/10] fix: test case --- src/features/dashboard/__tests__/AppManager.test.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/features/dashboard/__tests__/AppManager.test.tsx b/src/features/dashboard/__tests__/AppManager.test.tsx index b01bd7913..d340bb838 100644 --- a/src/features/dashboard/__tests__/AppManager.test.tsx +++ b/src/features/dashboard/__tests__/AppManager.test.tsx @@ -33,6 +33,7 @@ const mockUseAppManager = useAppManager as jest.MockedFunction< mockUseAppManager.mockImplementation(() => ({ setIsDashboard: jest.fn(), + getApps: jest.fn(), })); jest.mock('react-table'); @@ -64,9 +65,8 @@ describe('AppManager', () => { mockUseAuthContext.mockImplementation(() => ({ is_logged_in: true, })); - render(); - const loader = screen.getByTestId('dt_manage_dashboard_spinner'); + const loader = screen.getByTestId('dt_spinner'); expect(loader).toBeInTheDocument(); }); @@ -77,6 +77,7 @@ describe('AppManager', () => { mockUseAppManager.mockImplementation(() => ({ setIsDashboard: jest.fn(), apps: [], + getApps: jest.fn(), })); mockUseApiToken.mockImplementation(() => ({ tokens: [], From 35274fa6b4d384d4489578b3e062de4767cab591 Mon Sep 17 00:00:00 2001 From: shafin-deriv Date: Tue, 19 Mar 2024 12:58:20 +0800 Subject: [PATCH 06/10] test: add test for CustomRadioButton --- .../__tests__/CustomRadioButton.test.tsx | 55 +++++++++++++++++++ 1 file changed, 55 insertions(+) create mode 100644 src/components/CustomRadioButton/__tests__/CustomRadioButton.test.tsx diff --git a/src/components/CustomRadioButton/__tests__/CustomRadioButton.test.tsx b/src/components/CustomRadioButton/__tests__/CustomRadioButton.test.tsx new file mode 100644 index 000000000..60dc49630 --- /dev/null +++ b/src/components/CustomRadioButton/__tests__/CustomRadioButton.test.tsx @@ -0,0 +1,55 @@ +import React from 'react'; +import { cleanup, render, screen } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; +import CustomRadioButton from '..'; + +const onChange = jest.fn(); + +describe('CustomRadioButton', () => { + const renderRadioButton = ({ checked }) => { + render( + + + , + ); + }; + + afterEach(() => { + cleanup(); + }); + + it('should render the radio button', () => { + renderRadioButton({ checked: true }); + const label = screen.getByText('this is a test label'); + expect(label).toBeInTheDocument(); + }); + + it('should render the radio button with checked icon', () => { + renderRadioButton({ checked: true }); + const imgElement = screen.getByRole('img'); + expect(imgElement).toBeInTheDocument(); + expect(imgElement).toHaveAttribute('src', '/img/circle_dot_caption_fill.svg'); + }); + + it('should render the radio button with unchecked icon', () => { + renderRadioButton({ checked: false }); + const imgElement = screen.getByRole('img'); + expect(imgElement).toBeInTheDocument(); + expect(imgElement).toHaveAttribute('src', '/img/circle_dot_caption_bold.svg'); + }); + + it('should fire the onChange event when clicking the button', async () => { + renderRadioButton({ checked: false }); + const radio_button = screen.getByRole('radio', { + name: 'this is a test label', + }); + await userEvent.click(radio_button); + expect(onChange).toBeCalled(); + }); +}); From b7e648c91f0d71864ec70c49d52f659b656dcb7a Mon Sep 17 00:00:00 2001 From: shafin-deriv Date: Thu, 21 Mar 2024 11:43:34 +0800 Subject: [PATCH 07/10] test: swipeable bottom sheet test case --- .../__tests__/SwipeableBottomSheet.test.tsx | 106 ++++++++++++++++++ src/components/SwipeableBottomSheet/index.tsx | 19 +++- 2 files changed, 121 insertions(+), 4 deletions(-) create mode 100644 src/components/SwipeableBottomSheet/__tests__/SwipeableBottomSheet.test.tsx diff --git a/src/components/SwipeableBottomSheet/__tests__/SwipeableBottomSheet.test.tsx b/src/components/SwipeableBottomSheet/__tests__/SwipeableBottomSheet.test.tsx new file mode 100644 index 000000000..fa02074bc --- /dev/null +++ b/src/components/SwipeableBottomSheet/__tests__/SwipeableBottomSheet.test.tsx @@ -0,0 +1,106 @@ +import React from 'react'; +import { cleanup, createEvent, fireEvent, render, screen } from '@testing-library/react'; +import SwipeableBottomSheet from '..'; + +jest.useFakeTimers(); + +function patchCreateEvent(createEvent: any) { + // patching createEvent for pointer events to work from jsdom + for (let key in createEvent) { + if (key.indexOf('pointer') === 0) { + const fn = createEvent[key.replace('pointer', 'mouse')]; + if (!fn) continue; + createEvent[key] = function (type, { pointerId = 1, pointerType = 'mouse', ...rest } = {}) { + const event = fn(type, rest); + event.pointerId = pointerId; + event.pointerType = pointerType; + const eventType = event.type; + Object.defineProperty(event, 'type', { + get: function () { + return eventType.replace('mouse', 'pointer'); + }, + }); + return event; + }; + } + } +} +patchCreateEvent(createEvent); + +const onCancel = jest.fn(); +const onConfigure = jest.fn(); + +describe('SwipeableBottomSheet', () => { + const renderComponent = ({ + app_register_modal_open, + is_desktop = undefined, + disable_drag = undefined, + on_close = undefined, + }) => ( + +
Test content
+ + ); + + afterEach(() => { + cleanup(); + }); + + it('should render the swipeable bottom sheet', () => { + render(renderComponent({ app_register_modal_open: true })); + const label = screen.getByText('Test content'); + expect(label).toBeInTheDocument(); + }); + + it('should render the modal in desktop', () => { + render(renderComponent({ app_register_modal_open: true, is_desktop: true })); + const handlerElement = screen.queryByTestId('dt_action_sheet_handler'); + expect(handlerElement).not.toBeInTheDocument(); + }); + + it('should render the bottom sheet in mobile', () => { + render(renderComponent({ app_register_modal_open: true, is_desktop: false })); + const handlerElement = screen.getByTestId('dt_action_sheet_handler'); + expect(handlerElement).toBeInTheDocument(); + }); + + it('should close the bottom sheet on mobile if handler is dragged to the bottom', async () => { + const component = renderComponent({ app_register_modal_open: true, on_close: onCancel }); + const { rerender } = render(component); + rerender(component); + const handlerElement = screen.getByTestId('dt_action_sheet_handler'); + fireEvent.pointerDown(handlerElement, { + pointerId: 1, + clientX: 0, + clientY: 100, + buttons: 1, + }); + fireEvent.pointerMove(handlerElement, { + pointerId: 1, + clientX: 30, + clientY: 10, + buttons: 1, + }); + fireEvent.pointerUp(handlerElement, { + pointerId: 1, + clientX: 30, + clientY: 10, + buttons: 1, + }); + jest.advanceTimersByTime(600); + expect(onCancel).toBeCalled(); + }); +}); diff --git a/src/components/SwipeableBottomSheet/index.tsx b/src/components/SwipeableBottomSheet/index.tsx index c054c4c7f..9bc8c3ff0 100644 --- a/src/components/SwipeableBottomSheet/index.tsx +++ b/src/components/SwipeableBottomSheet/index.tsx @@ -1,4 +1,4 @@ -import React, { useEffect } from 'react'; +import React, { useEffect, useRef } from 'react'; import { useDrag } from '@use-gesture/react'; import { a, useSpring, config } from '@react-spring/web'; import { Button } from '@deriv/quill-design'; @@ -30,6 +30,7 @@ const SwipeableBottomSheet: React.FC = ({ }) => { const height = window.innerHeight - 124; const [{ y }, api] = useSpring(() => ({ y: height })); + const target = useRef(null); const open = ({ canceled }) => { api.start({ y: 0, immediate: false, config: canceled ? config.wobbly : config.stiff }); @@ -47,14 +48,20 @@ const SwipeableBottomSheet: React.FC = ({ // eslint-disable-next-line react-hooks/exhaustive-deps }, [action_sheet_open]); - const bind = useDrag( + useDrag( ({ last, velocity: [, vy], direction: [, dy], offset: [, oy], cancel, canceled }) => { if (disable_drag) return; if (oy < -70) cancel(); if (last) oy > height * 0.5 || (vy > 0.5 && dy > 0) ? close(vy) : open({ canceled }); else api.start({ y: oy, immediate: true }); }, - { from: () => [0, y.get()], filterTaps: true, bounds: { top: 0 }, rubberband: true }, + { + from: () => [0, y.get()], + filterTaps: true, + bounds: { top: 0 }, + rubberband: true, + target, + }, ); const display = y.to((py) => (py < height ? 'block' : 'none')); @@ -68,7 +75,11 @@ const SwipeableBottomSheet: React.FC = ({ style={{ display, bottom: !is_desktop ? 0 : '', y }} > {!is_desktop && !disable_drag && ( -
+
)} From 5e0713cada22498d51c9ba8ba9a9da7072a034fd Mon Sep 17 00:00:00 2001 From: shafin-deriv Date: Thu, 21 Mar 2024 12:41:44 +0800 Subject: [PATCH 08/10] chore: change radio button to checkbox --- .../components/AppRegister/app-register.scss | 10 +++++ .../components/AppRegister/index.tsx | 44 ++++++------------- .../dashboard/components/AppRegister/types.ts | 5 ++- .../dashboard/manage-dashboard/index.tsx | 3 +- 4 files changed, 27 insertions(+), 35 deletions(-) diff --git a/src/features/dashboard/components/AppRegister/app-register.scss b/src/features/dashboard/components/AppRegister/app-register.scss index fe09c8e31..cdc4b0c66 100644 --- a/src/features/dashboard/components/AppRegister/app-register.scss +++ b/src/features/dashboard/components/AppRegister/app-register.scss @@ -45,6 +45,16 @@ &__tnc { margin-top: 24px; + &__label { + font-weight: 400; + font-size: 16px; + position: relative; + top: 8px; + @media screen and (max-width: 992px) { + font-size: 14px; + top: -4px; + } + } } } diff --git a/src/features/dashboard/components/AppRegister/index.tsx b/src/features/dashboard/components/AppRegister/index.tsx index 7b0c8e685..efd3fc884 100644 --- a/src/features/dashboard/components/AppRegister/index.tsx +++ b/src/features/dashboard/components/AppRegister/index.tsx @@ -1,6 +1,5 @@ -import React, { useState } from 'react'; -import { Button, Text, TextField } from '@deriv/quill-design'; -import CustomRadioButton from '@site/src/components/CustomRadioButton'; +import React from 'react'; +import { Button, TextField } from '@deriv/quill-design'; import { useForm } from 'react-hook-form'; import { yupResolver } from '@hookform/resolvers/yup'; import './app-register.scss'; @@ -12,28 +11,15 @@ import { baseAppRegisterSchema, error_map, } from './types'; +import CustomCheckbox from '@site/src/components/CustomCheckbox'; -const TermsAndConditions: React.FC = ({ - setTermsConfirmation, - terms_confirmation, -}) => { - const handleChange = () => { - setTermsConfirmation(true); - }; +const TermsAndConditions: React.FC = ({ register }) => { return (
- - - - By registering your application, you acknowledge that you‘ve read and accepted the - Deriv API{' '} - + + - + +
); }; @@ -66,7 +52,6 @@ const RestrictionsComponent: React.FC = ({ error }) }; const AppRegister: React.FC = ({ submit }) => { - const [terms_confirmation, setTermsConfirmation] = useState(false); const { register, handleSubmit, @@ -75,7 +60,6 @@ const AppRegister: React.FC = ({ submit }) => { mode: 'all', resolver: yupResolver(baseAppRegisterSchema), }); - const has_error = Object.entries(errors).length !== 0; return (
@@ -95,17 +79,15 @@ const AppRegister: React.FC = ({ submit }) => { size='md' variant='primary' role='submit' - disabled={has_error || !terms_confirmation} + disabled={has_error} > Register now
+ {errors?.tnc_approval?.message} - +
); diff --git a/src/features/dashboard/components/AppRegister/types.ts b/src/features/dashboard/components/AppRegister/types.ts index d69753190..cb1eade42 100644 --- a/src/features/dashboard/components/AppRegister/types.ts +++ b/src/features/dashboard/components/AppRegister/types.ts @@ -1,3 +1,4 @@ +import { UseFormRegisterReturn } from 'react-hook-form'; import * as yup from 'yup'; export const error_map = { @@ -22,11 +23,11 @@ export const base_registration_schema = { excludeEmptyString: true, }, ), + tnc_approval: yup.boolean().oneOf([true], 'You must accept the terms and conditions.'), }; export type TTermsAndConditionsProps = { - setTermsConfirmation: React.Dispatch>; - terms_confirmation: boolean; + register: UseFormRegisterReturn<'tnc_approval'>; }; export const baseAppRegisterSchema = yup.object({ diff --git a/src/features/dashboard/manage-dashboard/index.tsx b/src/features/dashboard/manage-dashboard/index.tsx index eb75d4d21..e8fbea2c2 100644 --- a/src/features/dashboard/manage-dashboard/index.tsx +++ b/src/features/dashboard/manage-dashboard/index.tsx @@ -4,7 +4,6 @@ import AppRegister from '../components/AppRegister'; import useAppManager from '@site/src/hooks/useAppManager'; import useApiToken from '@site/src/hooks/useApiToken'; import Spinner from '@site/src/components/Spinner'; -import { IRegisterAppForm } from '../types'; import useWS from '@site/src/hooks/useWs'; import useDeviceType from '@site/src/hooks/useDeviceType'; import { RegisterAppDialogError } from '../components/Dialogs/RegisterAppDialogError'; @@ -39,7 +38,7 @@ const ManageDashboard = () => { }, [getApps]); const submit = useCallback( - (data: IRegisterAppForm) => { + (data) => { const { name } = data; registerApp({ name, From 5c1555295c55adccc10cf4f26dbe294e2b951da3 Mon Sep 17 00:00:00 2001 From: shafin-deriv Date: Thu, 21 Mar 2024 12:49:11 +0800 Subject: [PATCH 09/10] test: improve swipeable bottom sheet test coverage --- .../__tests__/SwipeableBottomSheet.test.tsx | 16 ++++++++++++++-- src/components/SwipeableBottomSheet/index.tsx | 1 - 2 files changed, 14 insertions(+), 3 deletions(-) diff --git a/src/components/SwipeableBottomSheet/__tests__/SwipeableBottomSheet.test.tsx b/src/components/SwipeableBottomSheet/__tests__/SwipeableBottomSheet.test.tsx index fa02074bc..fc99732af 100644 --- a/src/components/SwipeableBottomSheet/__tests__/SwipeableBottomSheet.test.tsx +++ b/src/components/SwipeableBottomSheet/__tests__/SwipeableBottomSheet.test.tsx @@ -6,7 +6,7 @@ jest.useFakeTimers(); function patchCreateEvent(createEvent: any) { // patching createEvent for pointer events to work from jsdom - for (let key in createEvent) { + for (const key in createEvent) { if (key.indexOf('pointer') === 0) { const fn = createEvent[key.replace('pointer', 'mouse')]; if (!fn) continue; @@ -77,7 +77,7 @@ describe('SwipeableBottomSheet', () => { expect(handlerElement).toBeInTheDocument(); }); - it('should close the bottom sheet on mobile if handler is dragged to the bottom', async () => { + it('should close the bottom sheet on mobile if handler is dragged to the bottom', () => { const component = renderComponent({ app_register_modal_open: true, on_close: onCancel }); const { rerender } = render(component); rerender(component); @@ -103,4 +103,16 @@ describe('SwipeableBottomSheet', () => { jest.advanceTimersByTime(600); expect(onCancel).toBeCalled(); }); + + it('should not drag the bottom sheet on mobile if drag is disabled', () => { + const component = renderComponent({ + app_register_modal_open: true, + on_close: onCancel, + disable_drag: true, + }); + const { rerender } = render(component); + rerender(component); + const handlerElement = screen.queryByTestId('dt_action_sheet_handler'); + expect(handlerElement).not.toBeInTheDocument(); + }); }); diff --git a/src/components/SwipeableBottomSheet/index.tsx b/src/components/SwipeableBottomSheet/index.tsx index 9bc8c3ff0..b8bd943b0 100644 --- a/src/components/SwipeableBottomSheet/index.tsx +++ b/src/components/SwipeableBottomSheet/index.tsx @@ -50,7 +50,6 @@ const SwipeableBottomSheet: React.FC = ({ useDrag( ({ last, velocity: [, vy], direction: [, dy], offset: [, oy], cancel, canceled }) => { - if (disable_drag) return; if (oy < -70) cancel(); if (last) oy > height * 0.5 || (vy > 0.5 && dy > 0) ? close(vy) : open({ canceled }); else api.start({ y: oy, immediate: true }); From 69d3707c630c68c7d5f8245e5edd23a58e43273c Mon Sep 17 00:00:00 2001 From: shafin-deriv Date: Fri, 22 Mar 2024 15:13:22 +0800 Subject: [PATCH 10/10] test: finalize all tests --- .../app-dashboard-container.test.tsx | 27 +++ .../__tests__/app-register.test.tsx | 19 +++ .../app-register-success-modal.test.tsx | 68 ++++++++ .../Modals/AppRegisterSuccessModal/index.tsx | 6 +- .../__tests__/manage-dashboard.test.tsx | 157 ++++++++++++++++++ 5 files changed, 274 insertions(+), 3 deletions(-) create mode 100644 src/features/dashboard/components/AppDashboardContainer/__tests__/app-dashboard-container.test.tsx create mode 100644 src/features/dashboard/components/AppRegister/__tests__/app-register.test.tsx create mode 100644 src/features/dashboard/components/Modals/AppRegisterSuccessModal/__tests__/app-register-success-modal.test.tsx create mode 100644 src/features/dashboard/manage-dashboard/__tests__/manage-dashboard.test.tsx diff --git a/src/features/dashboard/components/AppDashboardContainer/__tests__/app-dashboard-container.test.tsx b/src/features/dashboard/components/AppDashboardContainer/__tests__/app-dashboard-container.test.tsx new file mode 100644 index 000000000..fd2504c5b --- /dev/null +++ b/src/features/dashboard/components/AppDashboardContainer/__tests__/app-dashboard-container.test.tsx @@ -0,0 +1,27 @@ +import React from 'react'; +import { cleanup, render, screen } from '@site/src/test-utils'; +import AppDashboardContainer from '..'; + +describe('AppDashboardContainer', () => { + afterEach(() => { + cleanup(); + jest.clearAllMocks(); + }); + + it('Should render the page heading', () => { + render(); + + const label = screen.getByText(/App dashboard/i); + expect(label).toBeInTheDocument(); + }); + + it('Should render children component in the screen', () => { + render( + +
Test Component
+ , + ); + const label = screen.getByText(/Test Component/i); + expect(label).toBeInTheDocument(); + }); +}); diff --git a/src/features/dashboard/components/AppRegister/__tests__/app-register.test.tsx b/src/features/dashboard/components/AppRegister/__tests__/app-register.test.tsx new file mode 100644 index 000000000..c40144d86 --- /dev/null +++ b/src/features/dashboard/components/AppRegister/__tests__/app-register.test.tsx @@ -0,0 +1,19 @@ +import React from 'react'; +import { cleanup, render, screen } from '@site/src/test-utils'; +import AppRegister from '..'; + +const mock_submit = jest.fn(); + +describe('AppRegister', () => { + afterEach(() => { + cleanup(); + jest.clearAllMocks(); + }); + + it('Should render the register form with register button', () => { + render(); + + const button = screen.getByText(/Register now/i); + expect(button).toBeInTheDocument(); + }); +}); diff --git a/src/features/dashboard/components/Modals/AppRegisterSuccessModal/__tests__/app-register-success-modal.test.tsx b/src/features/dashboard/components/Modals/AppRegisterSuccessModal/__tests__/app-register-success-modal.test.tsx new file mode 100644 index 000000000..94e101cac --- /dev/null +++ b/src/features/dashboard/components/Modals/AppRegisterSuccessModal/__tests__/app-register-success-modal.test.tsx @@ -0,0 +1,68 @@ +import React from 'react'; +import { cleanup, render, screen } from '@site/src/test-utils'; +import { AppRegisterSuccessModal } from '..'; +import useAppManager from '@site/src/hooks/useAppManager'; + +const mock_cancel = jest.fn(); +const mock_configure = jest.fn(); + +jest.mock('@site/src/hooks/useAppManager'); +const mockUseAppManager = useAppManager as jest.MockedFunction< + () => Partial> +>; +mockUseAppManager.mockImplementation(() => ({ + app_register_modal_open: true, +})); + +describe('AppRegisterSuccessModal', () => { + afterEach(() => { + cleanup(); + jest.clearAllMocks(); + }); + + it('Should render the success modal in desktop', () => { + render( + , + ); + + const label = screen.getByText(/Application registered successfully!/i); + expect(label).toBeInTheDocument(); + const imgElement = screen.getByAltText('check icon'); + expect(imgElement).toBeInTheDocument(); + }); + + it('Should render the success modal in mobile', () => { + render( + , + ); + + const label = screen.getByText(/Application registered successfully!/i); + expect(label).toBeInTheDocument(); + const imgElement = screen.queryByAltText('check icon'); + expect(imgElement).not.toBeInTheDocument(); + }); + + it('Should handle click events properly', () => { + render( + , + ); + const configure_btn = screen.getByText(/Configure now/i); + const maybe_later_btn = screen.getByText(/Maybe later/i); + configure_btn.click(); + expect(mock_configure).toBeCalled(); + maybe_later_btn.click(); + expect(mock_cancel).toBeCalled(); + }); +}); diff --git a/src/features/dashboard/components/Modals/AppRegisterSuccessModal/index.tsx b/src/features/dashboard/components/Modals/AppRegisterSuccessModal/index.tsx index 83ff76483..989fdaed8 100644 --- a/src/features/dashboard/components/Modals/AppRegisterSuccessModal/index.tsx +++ b/src/features/dashboard/components/Modals/AppRegisterSuccessModal/index.tsx @@ -23,11 +23,11 @@ export const AppRegisterSuccessModal = ({ action_sheet_open={app_register_modal_open} primary_action={{ label: 'Configure now', - onClick: onCancel, + onClick: onConfigure, }} secondary_action={{ label: 'Maybe later', - onClick: onConfigure, + onClick: onCancel, }} is_desktop={is_desktop} disable_drag @@ -36,7 +36,7 @@ export const AppRegisterSuccessModal = ({
{is_desktop && (
- + check icon
)} diff --git a/src/features/dashboard/manage-dashboard/__tests__/manage-dashboard.test.tsx b/src/features/dashboard/manage-dashboard/__tests__/manage-dashboard.test.tsx new file mode 100644 index 000000000..0d4d23ec3 --- /dev/null +++ b/src/features/dashboard/manage-dashboard/__tests__/manage-dashboard.test.tsx @@ -0,0 +1,157 @@ +import React from 'react'; +import { cleanup, render, screen } from '@site/src/test-utils'; +import MemoizedManageDashboard from '..'; +import useAppManager from '@site/src/hooks/useAppManager'; +import useDeviceType from '@site/src/hooks/useDeviceType'; +import userEvent from '@testing-library/user-event'; +import apiManager from '@site/src/configs/websocket'; + +jest.mock('@site/src/hooks/useAppManager'); +const mockUseAppManager = useAppManager as jest.MockedFunction< + () => Partial> +>; +mockUseAppManager.mockImplementation(() => ({ + getApps: jest.fn(), + apps: undefined, + tokens: undefined, +})); + +jest.mock('@site/src/hooks/useDeviceType'); +const mockDeviceType = useDeviceType as jest.MockedFunction< + () => Partial> +>; +mockDeviceType.mockImplementation(() => ({ + deviceType: 'desktop', +})); + +jest.mock('@site/src/configs/websocket'); +const mockApiManager = apiManager as jest.Mocked; + +describe('ManageDashboard', () => { + afterEach(() => { + cleanup(); + jest.clearAllMocks(); + }); + + it('Should render the initial compoent with loader', () => { + const { container } = render(); + expect(container).toBeInTheDocument(); + const loader = screen.getByTestId('dt_spinner'); + expect(loader).toBeInTheDocument(); + }); + + it('Should render the content App Register page in mobile device - if no token or app is available', () => { + mockUseAppManager.mockImplementation(() => ({ + apps: [], + tokens: [], + getApps: jest.fn(), + })); + mockDeviceType.mockImplementation(() => ({ + deviceType: 'mobile', + })); + render(); + const register_button = screen.getByText(/Register now/i); + expect(register_button).toBeInTheDocument(); + }); + + it('Should call getApps on submit button press if all the fields are filled up', async () => { + const mockGetApps = jest.fn(); + mockUseAppManager.mockImplementation(() => ({ + apps: [], + tokens: [], + getApps: mockGetApps, + })); + render(); + + const name_input = screen.getByRole('textbox'); + await userEvent.type(name_input, 'test create token'); + const tnc_input = screen.getByRole('checkbox'); + await userEvent.click(tnc_input); + const register_button = screen.getByText(/Register now/i); + await userEvent.click(register_button); + + expect(mockGetApps).toHaveBeenCalled(); + }); + + it('Should trigger the success modal in desktop', async () => { + const mockModalOpenSetter = jest.fn(); + mockApiManager.augmentedSend.mockResolvedValue({ + app_register: { + active: 1, + app_id: 1234, + app_markup_percentage: 0, + appstore: '', + github: '', + googleplay: '', + homepage: '', + name: 'TestApp1', + redirect_uri: '', + scopes: [], + verification_uri: '', + }, + echo_req: { + app_markup_percentage: 0, + app_register: 1, + name: 'TestApp1', + req_id: 4, + scopes: [], + }, + msg_type: 'app_register', + req_id: 4, + }); + + mockUseAppManager.mockImplementation(() => ({ + getApps: jest.fn(), + apps: [], + tokens: [], + setAppRegisterModalOpen: mockModalOpenSetter, + })); + + render(); + + const name_input = screen.getByRole('textbox'); + await userEvent.type(name_input, 'test create token'); + const tnc_input = screen.getByRole('checkbox'); + await userEvent.click(tnc_input); + const register_button = screen.getByText(/Register now/i); + await userEvent.click(register_button); + + expect(mockModalOpenSetter).toBeCalledWith(true); + }); + + it('Should close the modal on config button click', async () => { + const mockModalOpenSetter = jest.fn(); + mockUseAppManager.mockImplementation(() => ({ + getApps: jest.fn(), + apps: [], + tokens: [], + setAppRegisterModalOpen: mockModalOpenSetter, + app_register_modal_open: true, + })); + + render(); + + const config_button = screen.getByText(/Config/i); + await userEvent.click(config_button); + + expect(mockModalOpenSetter).toBeCalledWith(false); + }); + + it('Should close the modal on cancel button click', async () => { + const mockModalOpenSetter = jest.fn(); + mockUseAppManager.mockImplementation(() => ({ + getApps: jest.fn(), + apps: [], + tokens: [], + setAppRegisterModalOpen: mockModalOpenSetter, + app_register_modal_open: true, + })); + + render(); + + const cancel_button = screen.getByText(/Maybe Later/i); + await userEvent.click(cancel_button); + + expect(mockModalOpenSetter).toBeCalledWith(false); + }); +});