[TRAH] shontzu/TRAH-2644/you-need-a-deriv-account-dialog (deriv-com#12975)

* refactor: add a deriv account dialog

* style: small tweak

* chore: code review

* chore: keyof typeof Headings

* chore: better name for Heading variance

Author: shontzu-deriv

packages/tradershub/src/components/Dialog/DialogHeader.tsx

@@ -12,21 +12,33 @@ import CloseIcon from '../../public/images/ic-close-dark.svg';
  */
 type TDialogHeader = {
     className?: string;
+    heading?: keyof typeof HeadingVariants;
     hideCloseButton?: boolean;
     title?: string;
 };
 
+const HeadingVariants = {
+    h1: Heading.H1,
+    h2: Heading.H2,
+    h3: Heading.H3,
+    h4: Heading.H4,
+    h5: Heading.H5,
+    h6: Heading.H6,
+};
+
 /**
  * DialogHeader component
  * @param {TDialogHeader} props - The properties that define the DialogHeader component.
  * @returns {JSX.Element} The DialogHeader component.
  */
-const DialogHeader = ({ className, hideCloseButton = false, title }: TDialogHeader) => {
+const DialogHeader = ({ className, heading = 'h3', hideCloseButton = false, title }: TDialogHeader) => {
+    const Heading = HeadingVariants[heading];
+
     const { hide } = Provider.useModal();
 
     return (
         <div className={qtMerge('flex items-start', title ? 'justify-between' : 'justify-end', className)}>
-            {title && <Heading.H3 className='flex-1'>{title}</Heading.H3>}
+            {title && <Heading className='flex-1'>{title}</Heading>}
             {!hideCloseButton && <CloseIcon className='hover:cursor-pointer' onClick={hide} />}
         </div>
     );

packages/tradershub/src/components/GetADerivAccountBanner/GetADerivAccountDialog.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Button, Text } from '@deriv/quill-design';
+import { Dialog } from '../Dialog';
+
+/**
+ * `GetADerivAccountDialog`  is opened when user tried to create a CFD account without a Deriv account
+ * It includes a button that leads the user to a modal where they can create a Deriv account.
+ *
+ * @returns {React.ReactElement} A `<Dialog>` component containing the dialog message and action button.
+ */
+const GetADerivAccountDialog = () => {
+    return (
+        <Dialog className='lg:w-[440px]'>
+            <Dialog.Header heading='h5' hideCloseButton title="You'll need a Deriv account" />
+            <Dialog.Content>
+                <Text size='sm'>A Deriv account will allow you to fund (and withdraw from) your MT5 account(s). </Text>
+            </Dialog.Content>
+            <Dialog.Action align='right'>
+                <Button className='rounded-200 h-2000 px-500' colorStyle='black' size='md' variant='secondary'>
+                    Cancel
+                </Button>
+                <Button className='rounded-200 h-2000 px-500' colorStyle='coral' size='md' variant='primary'>
+                    Add a Deriv account
+                </Button>
+            </Dialog.Action>
+        </Dialog>
+    );
+};
+
+export default GetADerivAccountDialog;

packages/tradershub/src/components/GetADerivAccountBanner/index.ts

@@ -1 +1,2 @@
 export { default as GetADerivAccountBanner } from './GetADerivAccountBanner';
+export { default as GetADerivAccountDialog } from './GetADerivAccountDialog';