Merge branch 'master' into restrictions

Author: hubert-deriv

src/features/Home/Benefits/Benefits.module.scss

@@ -12,17 +12,19 @@
     width: 100%;
     flex-wrap: nowrap;
     margin-bottom: rem(6.4);
-    gap: rem(3);
+    gap: rem(20);
     display: flex;
-    justify-content: space-evenly;
+    justify-content: center;
     padding: 0 rem(1);
 
     @media screen and (max-width: 992px) {
       margin-top: rem(3);
+      gap: rem(8.8);
     }
 
     @media screen and (max-width: 425px) {
       flex-direction: column;
+      gap: rem(3);
     }
   }
 
@@ -39,10 +41,6 @@
       margin: rem(1.6) 0;
     }
 
-    img {
-      margin-bottom: rem(4);
-    }
-
     @media screen and (max-width: 992px) {
       flex-wrap: wrap;
       width: 90%;

src/features/Home/Benefits/Benefits.tsx

@@ -52,7 +52,7 @@ export const Benefits = () => {
         <article className={styles.InformationContainer}>
           <ImageContainer image='personalisation' alt='personalisation' />
           <section className={styles.InformationContent}>
-            <h1>Personalize your trading</h1>
+            <h1>Personalise your trading</h1>
             <Text type='subtitle-2' as='p'>
               Personalize your trading apps to match your needs. Create charts and views the way you
               like them. Develop your trading app using any common programming language and extend

src/features/Home/Benefits/__tests__/Benefits.test.tsx

@@ -23,7 +23,7 @@ describe('Benefits', () => {
     expect(execution).toBeInTheDocument();
   });
   it('should render personalize your trading information', () => {
-    const title = screen.getByText(/Personalize your trading$/i);
+    const title = screen.getByText(/Personalise your trading$/i);
     const information = screen.getByText(/create charts and views/i);
 
     expect(title).toBeInTheDocument();

src/features/Home/GetStarted/GetStarted.tsx

@@ -29,7 +29,7 @@ export const GetStarted = () => {
               <Text type='subtitle-1' bold className={`${styles.dark} ${styles.header}`} as='h2'>
                 1. Learn about our API
               </Text>
-              <p>Understand basic concepts and terminologies.</p>
+              <p>Understand basic concepts and terminologies</p>
             </section>
             <figure className={styles.arrowIcon}>
               <img src='img/home-arrow.svg' />
@@ -47,7 +47,7 @@ export const GetStarted = () => {
               <Text type='subtitle-1' bold className={`${styles.dark} ${styles.header}`} as='h2'>
                 2. Sign up
               </Text>
-              <p>Create a free Deriv account to access our API.</p>
+              <p>Create a free Deriv account to access our API</p>
             </section>
             <figure className={styles.arrowIcon}>
               <img src='img/home-arrow.svg' />
@@ -64,7 +64,7 @@ export const GetStarted = () => {
               <Text type='subtitle-1' bold className={`${styles.dark} ${styles.header}`} as='h2'>
                 3. Register your app
               </Text>
-              <p>Fill out the registration form to start using Deriv API.</p>
+              <p>Fill out the registration form to start using Deriv API</p>
             </section>
             <figure className={styles.arrowIcon}>
               <img src='img/home-arrow.svg' />

src/features/Home/HeroHeader/HeroHeader.tsx

@@ -6,7 +6,7 @@ export const HeroHeader = () => {
   return (
     <header className={styles.HeroImageStyle} data-testid='hero-header'>
       <div className={styles.HeroContainerStyle}>
-        <Text type='heading-1' as={'h1'} bold className={styles.heading} aria-level={2}>
+        <Text type='hero' as={'h1'} bold className={styles.heading} aria-level={2}>
           Deriv API
         </Text>
         <Text

src/features/Home/index.tsx

@@ -4,7 +4,7 @@ import { Benefits } from './Benefits/Benefits';
 import { ClientLibraries } from './ClientLibraries/ClientLibraries';
 import { HeroHeader } from './HeroHeader/HeroHeader';
 import { WaysToEarn } from './WaysToEarn/WaysToEarn';
-import { Carousel } from './Carousel/Carousel';
+// import { Carousel } from './Carousel/Carousel';
 import Footer from '@site/src/components/Footer';
 import styles from './styles.module.scss';
 import { GetStarted } from './GetStarted/GetStarted';
@@ -18,7 +18,8 @@ export default function HomepageFeatures() {
       <WaysToEarn />
       <GetStarted />
       <ApiFeatures />
-      <Carousel />
+      {/* Carousel requires new quote's before it should be enabled again */}
+      {/* <Carousel /> */}
       <Footer />
     </main>
   );

src/features/dashboard/components/ApiTokenForm/CreateTokenField/index.tsx

@@ -3,6 +3,7 @@ import { Text, Button } from '@deriv/ui';
 import styles from '../api-token.form.module.scss';
 import useApiToken from '@site/src/hooks/useApiToken';
 import { FieldErrorsImpl, UseFormRegisterReturn } from 'react-hook-form';
+import TokenCreationDialogSuccess from '../../Dialogs/TokenCreationDialogSuccess';
 
 type TCreateTokenField = {
   register: UseFormRegisterReturn;
@@ -19,6 +20,8 @@ type TCreateTokenField = {
   form_is_cleared: boolean;
   setFormIsCleared: Dispatch<SetStateAction<boolean>>;
   setHideRestriction: Dispatch<SetStateAction<boolean>>;
+  is_toggle: boolean;
+  setToggleModal: Dispatch<SetStateAction<boolean>>;
 };
 
 const CreateTokenField = ({
@@ -27,6 +30,8 @@ const CreateTokenField = ({
   form_is_cleared,
   setFormIsCleared,
   setHideRestriction,
+  is_toggle,
+  setToggleModal,
 }: TCreateTokenField) => {
   const { tokens } = useApiToken();
   const [input_value, setInputValue] = useState('');
@@ -79,6 +84,7 @@ const CreateTokenField = ({
         <Button disabled={disable_button} type='submit'>
           Create
         </Button>
+        {is_toggle && <TokenCreationDialogSuccess setToggleModal={setToggleModal} />}
       </div>
       {errors && errors.name && (
         <Text as='span' type='paragraph-1' className='error-message'>

src/features/dashboard/components/ApiTokenForm/__tests__/api-token.form.test.tsx

@@ -76,6 +76,7 @@ const scopes = [
     label: 'Admin',
   },
 ];
+const preventDefault = jest.fn();
 
 describe('Home Page', () => {
   beforeEach(() => {
@@ -156,4 +157,29 @@ describe('Home Page', () => {
 
     expect(mockCreateToken).not.toHaveBeenCalled();
   });
+
+  it('Should open success dialog when token is created  ', async () => {
+    const nameInput = screen.getByRole('textbox');
+
+    await userEvent.type(nameInput, 'test create token');
+
+    const submitButton = screen.getByRole('button', { name: /Create/i });
+    await userEvent.click(submitButton);
+
+    const modal = await screen.getByText('Your API token is ready to be used.');
+    expect(modal).toBeVisible();
+  });
+
+  it('Should have create button disabled in case of empty input or error message', async () => {
+    const submitButton = screen.getByRole('button', { name: /Create/i });
+    expect(submitButton).toBeDisabled();
+
+    const nameInput = screen.getByRole('textbox');
+
+    await userEvent.type(nameInput, 'token-text');
+    expect(submitButton).toBeDisabled();
+
+    await userEvent.clear(nameInput);
+    expect(submitButton).toBeDisabled();
+  });
 });

src/features/dashboard/components/ApiTokenForm/api-token.form.tsx

@@ -82,6 +82,7 @@ const ApiTokenForm = (props: HTMLAttributes<HTMLFormElement>) => {
   const { createToken, isCreatingToken } = useCreateToken();
   const [hiderestrictions, setHideRestrictions] = useState(false);
   const [form_is_cleared, setFormIsCleared] = useState(false);
+  const [is_toggle, setToggleModal] = useState(false);
 
   const {
     handleSubmit,
@@ -106,6 +107,7 @@ const ApiTokenForm = (props: HTMLAttributes<HTMLFormElement>) => {
       });
       createToken(name, selectedTokenScope);
       setFormIsCleared(true);
+      setToggleModal((prev) => !prev);
       reset();
     },
     [createToken, reset],
@@ -163,6 +165,8 @@ const ApiTokenForm = (props: HTMLAttributes<HTMLFormElement>) => {
           form_is_cleared={form_is_cleared}
           setFormIsCleared={setFormIsCleared}
           setHideRestriction={setHideRestrictions}
+          is_toggle={is_toggle}
+          setToggleModal={setToggleModal}
         />
         {!hiderestrictions && <TokenNameRestrictions />}
         <div className={styles.step_title}>