Henry/how to earn payout component

packages/core/package.json

@@ -97,7 +97,7 @@
         "@datadog/browser-rum": "^5.11.0",
         "@deriv-com/analytics": "1.4.13",
         "@deriv-com/quill-tokens": "^2.0.2",
-        "@deriv-com/quill-ui": "^1.10.3",
+        "@deriv-com/quill-ui": "^1.10.4",
         "@deriv-com/utils": "^0.0.20",
         "@deriv/account": "^1.0.0",
         "@deriv/account-v2": "^1.0.0",

packages/trader/package.json

@@ -90,7 +90,7 @@
         "@cloudflare/stream-react": "^1.9.1",
         "@deriv-com/analytics": "1.4.13",
         "@deriv-com/quill-tokens": "^2.0.2",
-        "@deriv-com/quill-ui": "^1.10.3",
+        "@deriv-com/quill-ui": "^1.10.4",
         "@deriv-com/utils": "^0.0.20",
         "@deriv/api-types": "^1.0.172",
         "@deriv/components": "^1.0.0",

packages/trader/src/AppV2/Components/BottomNav/bottom-nav.tsx

@@ -9,6 +9,7 @@ import {
 } from '@deriv/quill-icons';
 import BottomNavItem from './bottom-nav-item';
 import { Badge } from '@deriv-com/quill-ui';
+import ContractDetailsFooter from '../ContractDetailsFooter';
 
 type BottomNavProps = {
     className?: string;
@@ -58,6 +59,7 @@ const BottomNav = ({ className, children }: BottomNavProps) => {
     return (
         <div className={classNames('bottom-nav', className)}>
             <div className='bottom-nav-selection'>{children[selectedIndex]}</div>
+            {selectedIndex === 4 && <ContractDetailsFooter />}
             <div className='bottom-nav-container'>
                 {bottomNavItems.map((item, index) => (
                     <BottomNavItem

packages/trader/src/AppV2/Components/CardWrapper/card-wrapper.scss

@@ -3,6 +3,9 @@
     margin-top: 0.5rem;
     padding: 1rem;
     border-radius: 0.625rem;
+    display: flex;
+    flex-direction: column;
+    gap: var(--semantic-spacing-gap-lg);
 
     .title {
         margin-bottom: 1rem;

packages/trader/src/AppV2/Components/ContractDetailsFooter/contract-details-footer.scss

@@ -0,0 +1,13 @@
+.contract-details-footer {
+    &--container {
+        padding: var(--semantic-spacing-general-md);
+        background-color: var(--core-color-solid-slate-50);
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        gap: var(--semantic-spacing-gap-md);
+        width: 100%;
+        box-shadow: var(--core-elevation-shadow-210);
+    }
+}

packages/trader/src/AppV2/Components/ContractDetailsFooter/contract-details-footer.tsx

@@ -0,0 +1,13 @@
+import { Button } from '@deriv-com/quill-ui';
+import React from 'react';
+
+const ContractDetailsFooter = () => {
+    return (
+        <div className='contract-details-footer--container'>
+            <Button variant='secondary' label='just a simple button' color='black' fullWidth />
+            <Button variant='secondary' label='just a simple button' color='black' fullWidth />
+        </div>
+    );
+};
+
+export default ContractDetailsFooter;

packages/trader/src/AppV2/Components/ContractDetailsFooter/index.ts

@@ -0,0 +1,4 @@
+import ContractDetailsFooter from './contract-details-footer';
+import './contract-details-footer.scss';
+
+export default ContractDetailsFooter;

packages/trader/src/AppV2/Components/PayoutInfoModal/index.ts

@@ -0,0 +1,4 @@
+import PayoutInfoModal from './payout-info-modal';
+import './payout-info-modal.scss';
+
+export default PayoutInfoModal;

packages/trader/src/AppV2/Components/PayoutInfoModal/payout-info-modal.tsx

@@ -0,0 +1,29 @@
+import { CaptionText, Modal } from '@deriv-com/quill-ui';
+import { Localize } from '@deriv/translations';
+import React from 'react';
+
+const PayoutInfoModal = ({ body_content }: { body_content: React.ReactNode }) => {
+    const [isVisible, setIsVisible] = React.useState(false);
+    return (
+        <>
+            <button onClick={() => setIsVisible(!isVisible)}>
+                <CaptionText size='sm' bold underlined className='payout-info-text'>
+                    <Localize i18n_default_text='How do I earn a payout?' />
+                </CaptionText>
+            </button>
+            <Modal
+                isOpened={isVisible}
+                toggleModal={setIsVisible}
+                primaryButtonLabel={<Localize i18n_default_text='Got it' />}
+                shouldCloseOnPrimaryButtonClick
+                isMobile
+                showHandleBar
+            >
+                <Modal.Header title={<Localize i18n_default_text='How do I earn a payout?' />} />
+                <Modal.Body>{body_content}</Modal.Body>
+            </Modal>
+        </>
+    );
+};
+
+export default PayoutInfoModal;

packages/trader/src/AppV2/Components/RiskManagementInfoModal/risk-management-info-modal.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { Modal } from '@deriv-com/quill-ui';
+import { Localize } from '@deriv/translations';
+import { LabelPairedCircleInfoSmRegularIcon } from '@deriv/quill-icons';
+
+type RiskManagementInfoModalProps = {
+    header_content: React.ReactNode;
+    body_content: React.ReactNode;
+    is_deal_cancellation_enabled?: boolean;
+};
+
+const RiskManagementInfoModal = ({
+    header_content,
+    body_content,
+    is_deal_cancellation_enabled = false,
+}: RiskManagementInfoModalProps) => {
+    const [isVisible, setIsVisible] = React.useState(false);
+    return (
+        <>
+            <button onClick={() => setIsVisible(!isVisible)}>
+                <LabelPairedCircleInfoSmRegularIcon />
+            </button>
+            <Modal
+                isOpened={isVisible}
+                toggleModal={setIsVisible}
+                primaryButtonLabel={<Localize i18n_default_text='Got it' />}
+                shouldCloseOnPrimaryButtonClick
+                isMobile
+                showHandleBar
+            >
+                <Modal.Header title={header_content} />
+                <Modal.Body>
+                    {body_content}
+                    {is_deal_cancellation_enabled && <div>hello</div>}
+                </Modal.Body>
+            </Modal>
+        </>
+    );
+};
+
+export default RiskManagementInfoModal;

packages/trader/src/AppV2/Components/RiskManagementItem/index.ts

@@ -0,0 +1,4 @@
+import RiskManagementItem from './risk-management-item';
+import './risk-management-item.scss';
+
+export default RiskManagementItem;

packages/trader/src/AppV2/Components/RiskManagementItem/risk-management-item.scss

@@ -0,0 +1,22 @@
+.risk-management-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: var(--semantic-spacing-gap-lg);
+
+    &--container {
+        display: flex;
+        flex-direction: column;
+        gap: var(--semantic-spacing-gap-md);
+    }
+
+    &--title {
+        display: flex;
+        gap: var(--semantic-spacing-gap-md);
+    }
+
+    .deal-cancellation-badge {
+        background-color: var(--semantic-color-monochrome-surface-normal-lowest);
+        border-radius: var(--semantic-borderRadius-sm);
+    }
+}

packages/trader/src/AppV2/Components/RiskManagementItem/risk-management-item.tsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import { ActionSheet, Tag, Text, TextField, ToggleSwitch } from '@deriv-com/quill-ui';
+import { localize } from '@deriv/translations';
+import RiskManagementInfoModal from '../RiskManagementInfoModal/risk-management-info-modal';
+import { LabelPairedStopwatchCaptionRegularIcon } from '@deriv/quill-icons';
+
+type RiskManagementItemProps = {
+    label: React.ReactNode;
+    modal_body_content: React.ReactNode;
+    validation_message?: React.ReactNode;
+    is_deal_cancellation?: boolean;
+};
+
+const RiskManagementItem = ({
+    label,
+    modal_body_content,
+    validation_message,
+    is_deal_cancellation = false,
+}: RiskManagementItemProps) => {
+    const [toggle, setToggle] = React.useState(false);
+    const [isOpen, setIsOpen] = React.useState(false);
+    const dummy_boolean = true; // This will be flag from backend
+
+    return (
+        <div className='risk-management-item--container'>
+            <div className='risk-management-item'>
+                <span className='risk-management-item--title'>
+                    <Text size='sm'>{label}</Text>
+                    <RiskManagementInfoModal header_content={label} body_content={modal_body_content} />
+                </span>
+                {dummy_boolean && !is_deal_cancellation && <span>5 USD</span>}
+                {/* {is_deal_cancellation && <div>For now</div>} */}
+                {is_deal_cancellation && (
+                    <Tag
+                        variant='custom'
+                        label='59:59'
+                        icon={LabelPairedStopwatchCaptionRegularIcon}
+                        size='sm'
+                        color='custom'
+                        className='deal-cancellation-badge'
+                    />
+                )}
+                {!dummy_boolean && !is_deal_cancellation && (
+                    <ToggleSwitch checked={toggle} onChange={() => setToggle(!toggle)} />
+                )}
+            </div>
+            {toggle && (
+                <TextField
+                    variant='fill'
+                    inputSize='md'
+                    textAlignment='center'
+                    value='5.00 USD'
+                    onFocus={() => setIsOpen(true)}
+                />
+            )}
+            <ActionSheet.Root expandable isOpen={isOpen} onClose={() => setIsOpen(false)}>
+                <ActionSheet.Portal>
+                    <ActionSheet.Header title={label} />
+                    <ActionSheet.Content>
+                        <TextField
+                            variant='fill'
+                            inputSize='md'
+                            textAlignment='center'
+                            value='5.00 USD'
+                            message={validation_message}
+                        />
+                    </ActionSheet.Content>
+                    <ActionSheet.Footer
+                        shouldCloseOnPrimaryButtonClick
+                        primaryAction={{
+                            content: localize('Save'),
+                            onAction: () => {
+                                //do the save
+                            },
+                        }}
+                    />
+                </ActionSheet.Portal>
+            </ActionSheet.Root>
+        </div>
+    );
+};
+
+export default RiskManagementItem;

packages/trader/src/AppV2/Containers/ContractDetails/contract-details.scss

@@ -1,6 +1,5 @@
 .contract-details {
     background-color: rgba(0, 0, 0, 0.48);
-    height: 88vh;
     padding: 8px;
 }
 .placeholder {