Nuzhy/trade forms UI fixes (#743)

* fix: wrap form component with breakpont provider * fix: duration units sorted
deriv-com · Aug 1, 2024 · 6754dc6 · 6754dc6
1 parent dca3000
commit 6754dc6
Show file tree

Hide file tree

Showing 8 changed files with 270 additions and 275 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -105,7 +105,7 @@
     "@binary-com/binary-document-uploader": "^2.4.4",
     "@binary-com/binary-style": "^0.2.26",
     "@binary-com/webtrader-charts": "^0.6.1",
-    "@deriv-com/quill-ui": "^1.13.25",
+    "@deriv-com/quill-ui": "^1.13.26",
     "@deriv/deriv-api": "^1.0.15",
     "@deriv/quill-icons": "^1.23.1",
     "@livechat/customer-sdk": "4.0.2",

diff --git a/src/javascript/app/pages/form/currency-dropdown.jsx b/src/javascript/app/pages/form/currency-dropdown.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { BreakpointProvider, CustomDropdown, DropdownItem, DropdownTitle, useDropdown } from '@deriv-com/quill-ui';
+import { CustomDropdown, DropdownItem, DropdownTitle, useDropdown } from '@deriv-com/quill-ui';
 
 const CurrencyContent = ({ currency_list, currency, onUpdate, elementId }) => {
     const { close } = useDropdown();
@@ -26,14 +26,12 @@ const CurrencyContent = ({ currency_list, currency, onUpdate, elementId }) => {
     );
 };
 export const CurrencyDropdown = ({ currency_list, currency, onUpdate, elementId }) => (
-    <BreakpointProvider>
-        <CustomDropdown value={currency}>
-            <CurrencyContent
-                currency_list={currency_list}
-                currency={currency}
-                onUpdate={onUpdate}
-                elementId={elementId}
-            />
-        </CustomDropdown>
-    </BreakpointProvider>
+    <CustomDropdown value={currency}>
+        <CurrencyContent
+            currency_list={currency_list}
+            currency={currency}
+            onUpdate={onUpdate}
+            elementId={elementId}
+        />
+    </CustomDropdown>
 );
diff --git a/src/javascript/app/pages/form/dropdown-component.jsx b/src/javascript/app/pages/form/dropdown-component.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { BreakpointProvider, CustomDropdown, DropdownItem, useDropdown } from '@deriv-com/quill-ui';
+import { CustomDropdown, DropdownItem, useDropdown } from '@deriv-com/quill-ui';
 
 const DropdownContent = ({ options, value, onUpdate, elementId }) => {
     const { close } = useDropdown();
@@ -29,14 +29,12 @@ const DropdownContent = ({ options, value, onUpdate, elementId }) => {
     );
 };
 export const DropdownComponent = ({ label = '', options, value, onUpdate, elementId }) => (
-    <BreakpointProvider>
-        <CustomDropdown value={value} label={label}>
-            <DropdownContent
-                options={options}
-                value={value}
-                onUpdate={onUpdate}
-                elementId={elementId}
-            />
-        </CustomDropdown>
-    </BreakpointProvider>
+    <CustomDropdown value={value} label={label}>
+        <DropdownContent
+            options={options}
+            value={value}
+            onUpdate={onUpdate}
+            elementId={elementId}
+        />
+    </CustomDropdown>
 );
diff --git a/src/javascript/app/pages/form/form-component.jsx b/src/javascript/app/pages/form/form-component.jsx
diff --git a/src/javascript/app/pages/form/numbers-dropdown.jsx b/src/javascript/app/pages/form/numbers-dropdown.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { BreakpointProvider, CustomDropdown, DropdownItem, useDropdown } from '@deriv-com/quill-ui';
+import { CustomDropdown, DropdownItem, useDropdown } from '@deriv-com/quill-ui';
 
 const Content = ({ value, start, end, elementId, onUpdate }) => {
     const { close } = useDropdown();
@@ -22,15 +22,13 @@ const Content = ({ value, start, end, elementId, onUpdate }) => {
 };
 
 export const NumbersDropdown = ({ value, label, start, end, elementId, onUpdate }) => (
-    <BreakpointProvider>
-        <CustomDropdown value={value} label={label}>
-            <Content
-                value={value}
-                start={start}
-                end={end}
-                elementId={elementId}
-                onUpdate={onUpdate}
-            />
-        </CustomDropdown>
-    </BreakpointProvider>
+    <CustomDropdown value={value} label={label}>
+        <Content
+            value={value}
+            start={start}
+            end={end}
+            elementId={elementId}
+            onUpdate={onUpdate}
+        />
+    </CustomDropdown>
 );
diff --git a/src/javascript/app/pages/form/time-selection.jsx b/src/javascript/app/pages/form/time-selection.jsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { BreakpointProvider, CustomDropdown, DropdownItem, useDropdown } from '@deriv-com/quill-ui';
+import { CustomDropdown, DropdownItem, useDropdown } from '@deriv-com/quill-ui';
 import moment from 'moment/moment';
 import { useTimeChange } from '../../hooks/events';
 import tradeManager from '../../common/trade_manager.js';
@@ -82,14 +82,12 @@ export const TimePickerDropdown = ({
     };
 
     return (
-        <BreakpointProvider>
-            <CustomDropdown value={time} onClickDropdown={() => handleOpen(elementId)}>
-                <TimeContent
-                    time={time}
-                    onUpdate={onUpdate}
-                    elementId={elementId}
-                />
-            </CustomDropdown>
-        </BreakpointProvider>
+        <CustomDropdown value={time} onClickDropdown={() => handleOpen(elementId)}>
+            <TimeContent
+                time={time}
+                onUpdate={onUpdate}
+                elementId={elementId}
+            />
+        </CustomDropdown>
     );
 };
diff --git a/src/javascript/app/pages/trade/duration.js b/src/javascript/app/pages/trade/duration.js
@@ -145,18 +145,18 @@ const Durations = (() => {
             }
         });
 
+        const list = Object.keys(duration_list).sort((a, b) => (
+            commonTrading.durationOrder(a) > commonTrading.durationOrder(b) ? 1 : -1
+        ));
+
         const duration_options = [];
-        Object.values(duration_list).forEach(option => {
-            duration_options.push({ text: option.text, value: option.value });
+        Object.values(list).forEach(option => {
+            duration_options.push({ text: duration_list[option].text, value: option });
         });
         tradeManager.set({
             duration_options,
         });
 
-        const list = Object.keys(duration_list).sort((a, b) => (
-            commonTrading.durationOrder(a) > commonTrading.durationOrder(b) ? 1 : -1
-        ));
-
         smallest_duration = {
             amount: duration_list[list[0]].dataset.minimum,
             unit  : list[0],