DTRA / Kate / DTRA-1542 / [DTreader-V2]: Guide and Allow equal changes

packages/account/package.json

@@ -35,7 +35,7 @@
         "@deriv-com/utils": "^0.0.25",
         "@deriv-com/ui": "1.29.9",
         "@deriv/api": "^1.0.0",
-        "@deriv-com/quill-ui": "1.13.22",
+        "@deriv-com/quill-ui": "1.13.23",
         "@deriv/components": "^1.0.0",
         "@deriv/hooks": "^1.0.0",
         "@deriv/integration": "1.0.0",

packages/core/package.json

@@ -98,7 +98,7 @@
         "@datadog/browser-rum": "^5.11.0",
         "@deriv-com/analytics": "1.10.0",
         "@deriv-com/quill-tokens": "^2.0.4",
-        "@deriv-com/quill-ui": "1.13.22",
+        "@deriv-com/quill-ui": "1.13.23",
         "@deriv-com/translations": "1.3.4",
         "@deriv-com/ui": "1.29.9",
         "@deriv-com/utils": "^0.0.25",

packages/trader/package.json

@@ -90,7 +90,7 @@
         "@cloudflare/stream-react": "^1.9.1",
         "@deriv-com/analytics": "1.10.0",
         "@deriv-com/quill-tokens": "^2.0.4",
-        "@deriv-com/quill-ui": "1.13.22",
+        "@deriv-com/quill-ui": "1.13.23",
         "@deriv-com/utils": "^0.0.25",
         "@deriv-com/ui": "1.29.9",
         "@deriv/api-types": "1.0.172",

packages/trader/src/AppV2/Components/Guide/guide.scss

@@ -4,6 +4,8 @@
     }
 
     &__menu {
+        position: relative;
+        width: calc(100vw - var(--component-actionSheet-spacing-padding-lg));
         padding-inline-end: var(--component-actionSheet-spacing-padding-lg);
         margin-block-end: var(--component-actionSheet-spacing-padding-md);
         display: flex;
@@ -14,6 +16,10 @@
         -ms-overflow-style: none;
         scrollbar-width: none;
 
+        &::-webkit-scrollbar {
+            display: none;
+        }
+
         button {
             background-color: transparent;
         }
@@ -22,6 +28,7 @@
     &__wrapper {
         &--content {
             padding: var(--component-actionSheet-spacing-padding-lg) var(--component-actionSheet-spacing-padding-lg) 0;
+            overflow-x: hidden;
         }
     }
 
@@ -30,6 +37,10 @@
         height: calc(90dvh - 23rem);
         -ms-overflow-style: none;
         scrollbar-width: none;
+
+        &::-webkit-scrollbar {
+            display: none;
+        }
     }
 
     &__button {

packages/trader/src/AppV2/Components/PurchaseButton/purchase-button-content.tsx

@@ -7,7 +7,7 @@ import { Money } from '@deriv/components';
 
 type TPurchaseButtonContent = {
     current_stake?: number | null;
-    info: ReturnType<typeof useTraderStore>['proposal_info'][0];
+    info: ReturnType<typeof useTraderStore>['proposal_info'][0] | Record<string, never>;
     is_reverse?: boolean;
 } & Pick<
     ReturnType<typeof useTraderStore>,
@@ -32,19 +32,28 @@ const PurchaseButtonContent = ({
     is_vanilla_fx,
     is_reverse,
 }: TPurchaseButtonContent) => {
-    const localized_basis = getLocalizedBasis();
+    const {
+        current_stake: localized_current_stake,
+        max_payout,
+        payout,
+        payout_per_point,
+        payout_per_pip,
+        stake,
+    } = getLocalizedBasis();
 
     const getAmount = () => {
-        if (is_multiplier) return info.stake;
-        if (is_accumulator) return has_open_accu_contract ? Number(current_stake) : info.maximum_payout;
-        return info?.obj_contract_basis?.value;
+        const { stake, maximum_payout, obj_contract_basis } = info;
+
+        if (is_multiplier) return stake;
+        if (is_accumulator) return has_open_accu_contract ? Number(current_stake) : maximum_payout;
+        return obj_contract_basis?.value;
     };
     const getTextBasis = () => {
-        if (is_turbos || (is_vanilla && !is_vanilla_fx)) return localized_basis.payout_per_point;
-        if (is_vanilla_fx) return localized_basis.payout_per_pip;
-        if (is_multiplier) return localized_basis.stake;
-        if (is_accumulator) return has_open_accu_contract ? localized_basis.current_stake : localized_basis.max_payout;
-        return localized_basis.payout;
+        if (is_turbos || (is_vanilla && !is_vanilla_fx)) return payout_per_point;
+        if (is_vanilla_fx) return payout_per_pip;
+        if (is_multiplier) return stake;
+        if (is_accumulator) return has_open_accu_contract ? localized_current_stake : max_payout;
+        return payout;
     };
 
     const text_basis = getTextBasis();

packages/trader/src/AppV2/Components/TradeParameters/AllowEquals/__tests__/allow-equals.spec.tsx

@@ -76,17 +76,14 @@ describe('AllowEquals', () => {
         expect(screen.getByRole('dialog')).toHaveAttribute('data-state', 'open');
     });
 
-    it('should call onChange function if user opens ActionSheet, changes ToggleSwitch and clicks on "Save" button', () => {
+    it('should call onChange function if user opens ActionSheet and clicks on ToggleSwitch', () => {
         render(mockAllowEquals());
 
         userEvent.click(screen.getByRole('textbox'));
 
-        const [toggle_switch_button, save_button] = screen.getAllByRole('button');
-        expect(toggle_switch_button).toHaveAttribute('aria-pressed', 'false');
+        const toggle_switch_button = screen.getByRole('button');
         userEvent.click(toggle_switch_button);
-        expect(toggle_switch_button).toHaveAttribute('aria-pressed', 'true');
 
-        userEvent.click(save_button);
         expect(default_mock_store.modules.trade.onChange).toBeCalled();
     });
 });

packages/trader/src/AppV2/Components/TradeParameters/AllowEquals/allow-equals.scss

@@ -1,19 +1,16 @@
 $HANDLEBAR_HEIGHT: var(--core-size-1000);
 $HEADER_TITLE_HEIGHT: var(--core-size-3200);
-$FOOTER_BUTTON_HEIGHT: var(--core-size-4000);
 
 .allow-equals {
     &__wrapper {
-        height: calc(40dvh - $HANDLEBAR_HEIGHT - $HEADER_TITLE_HEIGHT - $FOOTER_BUTTON_HEIGHT);
-
-        &--definition {
-            height: calc(40dvh - $HANDLEBAR_HEIGHT - $HEADER_TITLE_HEIGHT);
-        }
+        height: calc(400px - $HANDLEBAR_HEIGHT - $HEADER_TITLE_HEIGHT);
+        padding-block-start: 0;
     }
 
     &__content {
         display: flex;
         justify-content: space-between;
         align-items: center;
+        padding-block: var(--core-spacing-400);
     }
 }

packages/trader/src/AppV2/Components/TradeParameters/AllowEquals/allow-equals.tsx

@@ -1,12 +1,10 @@
 import React from 'react';
 import { observer } from 'mobx-react';
 import clsx from 'clsx';
-import { ActionSheet, ToggleSwitch, Text, TextField } from '@deriv-com/quill-ui';
+import { ActionSheet, CaptionText, ToggleSwitch, Text, TextField } from '@deriv-com/quill-ui';
 import { Localize, localize } from '@deriv/translations';
 import { hasCallPutEqual, hasDurationForCallPutEqual } from 'Stores/Modules/Trading/Helpers/allow-equals';
 import { useTraderStore } from 'Stores/useTraderStores';
-import Carousel from 'AppV2/Components/Carousel';
-import AllowEqualsHeader from './allow-equals-header';
 
 type TAllowEqualsProps = {
     is_minimized?: boolean;
@@ -17,7 +15,6 @@ const AllowEquals = observer(({ is_minimized }: TAllowEqualsProps) => {
         useTraderStore();
 
     const [is_open, setIsOpen] = React.useState(false);
-    const [is_allow_equal_enabled, setIsAllowEqualEnabled] = React.useState(!!is_equal);
 
     const has_callputequal_duration = hasDurationForCallPutEqual(
         contract_types_list,
@@ -27,59 +24,11 @@ const AllowEquals = observer(({ is_minimized }: TAllowEqualsProps) => {
     const has_callputequal = hasCallPutEqual(contract_types_list);
     const has_allow_equals = (has_callputequal_duration || expiry_type === 'endtime') && has_callputequal;
 
-    const onSaveButtonClick = () => {
-        if (!!is_equal !== is_allow_equal_enabled)
-            onChange({ target: { name: 'is_equal', value: Number(is_allow_equal_enabled) } });
-    };
-    const onActionSheetClose = () => {
+    const onToggleSwitch = (is_enabled: boolean) => {
+        onChange({ target: { name: 'is_equal', value: Number(is_enabled) } });
         setIsOpen(false);
-        setIsAllowEqualEnabled(!!is_equal);
     };
 
-    const action_sheet_content = [
-        {
-            id: 1,
-            component: (
-                <React.Fragment>
-                    <ActionSheet.Content className='allow-equals__wrapper'>
-                        <div className='allow-equals__content'>
-                            <Text>
-                                <Localize i18n_default_text='Allow equals' />
-                            </Text>
-                            <ToggleSwitch
-                                checked={is_allow_equal_enabled}
-                                onChange={(is_enabled: boolean) => setIsAllowEqualEnabled(is_enabled)}
-                            />
-                        </div>
-                    </ActionSheet.Content>
-                    <ActionSheet.Footer
-                        alignment='vertical'
-                        primaryAction={{
-                            content: <Localize i18n_default_text='Save' />,
-                            onAction: onSaveButtonClick,
-                        }}
-                    />
-                </React.Fragment>
-            ),
-        },
-        {
-            id: 2,
-            component: (
-                <ActionSheet.Content className='allow-equals__wrapper--definition'>
-                    <div className='allow-equals__content'>
-                        <Text>
-                            <Localize i18n_default_text='Win payout if exit spot is also equal to entry spot.' />
-                        </Text>
-                    </div>
-                </ActionSheet.Content>
-            ),
-        },
-    ];
-
-    React.useEffect(() => {
-        setIsAllowEqualEnabled(!!is_equal);
-    }, [is_equal]);
-
     if (!has_allow_equals) return null;
 
     return (
@@ -97,9 +46,20 @@ const AllowEquals = observer(({ is_minimized }: TAllowEqualsProps) => {
                 className={clsx('trade-params__option', is_minimized && 'trade-params__option--minimized')}
                 onClick={() => setIsOpen(true)}
             />
-            <ActionSheet.Root isOpen={is_open} onClose={onActionSheetClose} position='left' expandable={false}>
+            <ActionSheet.Root isOpen={is_open} onClose={() => setIsOpen(false)} position='left' expandable={false}>
                 <ActionSheet.Portal shouldCloseOnDrag>
-                    <Carousel header={AllowEqualsHeader} pages={action_sheet_content} />
+                    <ActionSheet.Header title={<Localize i18n_default_text='Allow equals' />} />
+                    <ActionSheet.Content className='allow-equals__wrapper'>
+                        <div className='allow-equals__content'>
+                            <Text>
+                                <Localize i18n_default_text='Allow equals' />
+                            </Text>
+                            <ToggleSwitch checked={!!is_equal} onChange={onToggleSwitch} />
+                        </div>
+                        <CaptionText color='quill-typography__color--subtle'>
+                            <Localize i18n_default_text='Win payout if exit spot is also equal to entry spot.' />
+                        </CaptionText>
+                    </ActionSheet.Content>
                 </ActionSheet.Portal>
             </ActionSheet.Root>
         </React.Fragment>

packages/trader/src/AppV2/Components/TradeParameters/LastDigitPrediction/last-digit-prediction.tsx

@@ -31,7 +31,6 @@ const LastDigitPrediction = observer(({ is_minimized, is_stats_mode }: TLastDigi
     };
     const onActionSheetClose = () => {
         setIsOpen(false);
-        //TODO: check if we need these 2 resets below after latest Quill Action sheet changes will be in our branch
         setSelectedDigit(last_digit);
     };
 
@@ -47,7 +46,7 @@ const LastDigitPrediction = observer(({ is_minimized, is_stats_mode }: TLastDigi
                             key={`last-digit-prediction${is_minimized ? '-minimized' : ''}`}
                         />
                     }
-                    value={last_digit.toString()} // TODO: remove toString after TextField supports a numeric 0 value in quill-ui
+                    value={last_digit}
                     className={clsx('trade-params__option', 'trade-params__option--minimized')}
                     onClick={() => setIsOpen(true)}
                 />

packages/trader/src/AppV2/Components/TradeParameters/trade-parameters.scss

@@ -32,6 +32,9 @@
             padding: 0px;
             transition: transform 0.5s, opacity 0.5s, max-height 0.5s, padding 0.1s;
 
+            &::-webkit-scrollbar {
+                display: none;
+            }
             &--enter,
             &--exit {
                 opacity: 0;

packages/trader/src/AppV2/Containers/Trade/trade.scss

@@ -18,6 +18,10 @@
         white-space: nowrap;
         scrollbar-width: none;
 
+        &::-webkit-scrollbar {
+            display: none;
+        }
+
         button {
             background-color: transparent;
         }