DTRA / Kate / DTRA-930 / Update Trade Type section modal behaviour (#13773)

* refactor: improve collapsible behaviour

* fix: timeout issue

* refactor: add tests

* refactor: apply usability suggestions

* refactor: increase clickable area

* refactor: add tests

Author: kate-deriv

packages/components/src/components/collapsible/__tests__/collapsible.spec.tsx

@@ -1,9 +1,14 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import Collapsible from '../collapsible';
 
-const className = 'dc-collapsible--has-collapsible-btn';
-const testId = 'dt_collapsible';
+const collapsibleButtonClassName = 'dc-collapsible--has-collapsible-btn';
+const expandedClassName = 'dc-collapsible--is-expanded';
+const collapsedClassName = 'dc-collapsible--is-collapsed';
+const collapsibleTestId = 'dt_collapsible';
+const handleButtonTestId = 'dt_handle_button';
+
 const mockedDefaultProps: React.ComponentProps<typeof Collapsible> = {
     children: <div data-collapsible={true}>Children Component</div>,
     onClick: jest.fn(),
@@ -14,7 +19,7 @@ describe('<Collapsible/>', () => {
     it('should render component with specific className if passed children have data-collapsible = true', () => {
         render(<Collapsible {...mockedDefaultProps} />);
 
-        expect(screen.getByTestId(testId)).toHaveClass(className);
+        expect(screen.getByTestId(collapsibleTestId)).toHaveClass(collapsibleButtonClassName);
     });
 
     it('should render component without specific className if passed children have no data-collapsible = true', () => {
@@ -24,7 +29,7 @@ describe('<Collapsible/>', () => {
             </Collapsible>
         );
 
-        expect(screen.getByTestId(testId)).not.toHaveClass(className);
+        expect(screen.getByTestId(collapsibleTestId)).not.toHaveClass(collapsibleButtonClassName);
     });
 
     it('should render component with specific className if passed children have no data-collapsible = true, but is_non_interactive is true', () => {
@@ -34,6 +39,18 @@ describe('<Collapsible/>', () => {
             </Collapsible>
         );
 
-        expect(screen.getByTestId(testId)).toHaveClass(className);
+        expect(screen.getByTestId(collapsibleTestId)).toHaveClass(collapsibleButtonClassName);
+    });
+
+    it('should change className if user clicks on handle button', () => {
+        render(<Collapsible {...mockedDefaultProps} />);
+
+        expect(screen.getByTestId(collapsibleTestId)).toHaveClass(expandedClassName);
+        expect(screen.queryByTestId(collapsibleTestId)).not.toHaveClass(collapsedClassName);
+
+        userEvent.click(screen.getByTestId(handleButtonTestId));
+
+        expect(screen.getByTestId(collapsibleTestId)).toHaveClass(collapsedClassName);
+        expect(screen.queryByTestId(collapsibleTestId)).not.toHaveClass(expandedClassName);
     });
 });

packages/components/src/components/collapsible/arrow-button.tsx

@@ -100,6 +100,7 @@ const ArrowButton = ({
             })}
             onClick={toggleExpand}
             onKeyDown={toggleExpand}
+            data-testid='dt_handle_button'
         >
             {show_collapsible_button && icon_arrow}
         </div>

packages/components/src/components/collapsible/collapsible.tsx

@@ -14,7 +14,7 @@ type TCollapsible = {
 };
 
 const swipe_config = {
-    delta: 100,
+    delta: 10,
     trackTouch: true,
     trackMouse: true,
 };
@@ -58,8 +58,8 @@ const Collapsible = ({
     );
 
     const swipe_handlers = useSwipeable({
-        onSwipedUp: () => !is_open && should_show_collapsible && expand(true),
-        onSwipedDown: () => is_open && should_show_collapsible && expand(false),
+        onSwipedUp: () => !is_open && should_show_collapsible && toggleExpand(),
+        onSwipedDown: () => is_open && should_show_collapsible && toggleExpand(),
         ...swipe_config,
     });
 

packages/trader/src/Modules/Trading/Components/Form/ContractType/contract-type-widget.tsx

@@ -41,15 +41,14 @@ const ContractTypeWidget = observer(
         const [selected_category, setSelectedCategory] = React.useState<TList['key']>('All');
         const [search_query, setSearchQuery] = React.useState('');
         const [item, setItem] = React.useState<TContractType | null>(null);
+        const animation_timeout = React.useRef<ReturnType<typeof setTimeout>>();
 
         const handleClickOutside = React.useCallback(
             (event: MouseEvent) => {
                 if (is_mobile) return;
                 if (wrapper_ref && !wrapper_ref.current?.contains(event.target as Node) && is_dialog_open) {
                     setDialogVisibility(false);
-                    setInfoDialogVisibility(false);
                     setItem({ ...item, value });
-                    setHideBackButton(false);
                 }
             },
             [item, value, is_dialog_open, is_mobile]
@@ -58,6 +57,12 @@ const ContractTypeWidget = observer(
         const getCategoryName = (clicked_item: TContractType) =>
             getContractTypes(list_with_category(), clicked_item)?.find(item => item.value === clicked_item.value)?.text;
 
+        React.useEffect(() => {
+            return () => {
+                clearTimeout(animation_timeout.current);
+            };
+        }, []);
+
         React.useEffect(() => {
             document.addEventListener('mousedown', handleClickOutside);
             return () => {
@@ -127,10 +132,6 @@ const ContractTypeWidget = observer(
             });
         };
 
-        const handleVisibility = () => {
-            setDialogVisibility(!is_dialog_open);
-        };
-
         const onSearchBlur = () => {
             if (search_query) {
                 Analytics.trackEvent('ce_trade_types_form', {
@@ -142,8 +143,10 @@ const ContractTypeWidget = observer(
 
         const onWidgetClick = () => {
             setDialogVisibility(!is_dialog_open);
-            setHideBackButton(false);
-            setInfoDialogVisibility(false);
+            animation_timeout.current = setTimeout(() => {
+                setHideBackButton(false);
+                setInfoDialogVisibility(false);
+            }, 200);
             setItem({ ...item, value });
         };
 
@@ -155,8 +158,14 @@ const ContractTypeWidget = observer(
         const onChangeInput = (searchQueryItem: string) => setSearchQuery(searchQueryItem);
 
         const handleLearnMore = () => {
-            handleVisibility();
-            handleInfoClick(item || { value });
+            setDialogVisibility(true);
+            setInfoDialogVisibility(true);
+            setItem(item || { value });
+            Analytics.trackEvent('ce_trade_types_form', {
+                action: 'info_open',
+                tab_name: selected_category,
+                trade_type_name: getCategoryName(item || { value }),
+            });
             setHideBackButton(true);
         };
 

packages/trader/src/sass/app/_common/components/contract-type-widget.scss

@@ -139,5 +139,14 @@
         top: 1.5rem;
         background-color: transparent;
         margin: unset;
+
+        &:before {
+            content: '';
+            display: block;
+            height: 3.5rem;
+            width: 14rem;
+            position: absolute;
+            bottom: -1rem;
+        }
     }
 }

packages/trader/src/sass/app/modules/trading-mobile.scss

@@ -1,6 +1,8 @@
 @include mobile {
     /** @define dc-collapsible; weak */
     .dc-collapsible {
+        touch-action: pan-x;
+
         &:before {
             content: '';
             position: absolute;