@orderly.network/ui-order-entry 3.1.2-alpha.1 → 3.1.3-alpha.0

package/dist/index.js

@@ -2106,16 +2106,11 @@ var OrderTypeSelect = (props) => {
       }
     ];
   }, [t]);
-  const displayLabelMap = React3.useMemo(() => {
-    return {
-      [types.OrderType.LIMIT]: t("orderEntry.orderType.limit"),
-      [types.OrderType.MARKET]: t("common.marketPrice"),
-      [types.OrderType.STOP_LIMIT]: t("orderEntry.orderType.stopLimit"),
-      [types.OrderType.STOP_MARKET]: t("orderEntry.orderType.stopMarket"),
-      [types.OrderType.SCALED]: t("orderEntry.orderType.scaledOrder"),
-      [types.OrderType.TRAILING_STOP]: t("orderEntry.orderType.trailingStop")
-    };
-  }, [t]);
+  const builtInOrderEntryTypes = React3.useMemo(
+    () => new Set(allOptions.map((o) => o.value)),
+    [allOptions]
+  );
+  const isBuiltInOrderEntryType = (value) => builtInOrderEntryTypes.has(value);
   const mobileOptions = React3.useMemo(() => allOptions, [allOptions]);
   if (!isMobile) {
     const baseButtonClassName = "oui-flex oui-flex-1 oui-items-center oui-justify-center oui-gap-x-1 oui-rounded oui-px-3 oui-py-0.5 oui-text-xs oui-font-semibold oui-h-8";
@@ -2128,8 +2123,22 @@ var OrderTypeSelect = (props) => {
       "oui-bg-base-7 oui-text-base-contrast-36"
     );
     const handleChange = (type) => {
+      props.onExtraSelect?.(null);
       props.onChange(type);
     };
+    const advancedItems = advancedOptions.map((o) => ({
+      value: o.value,
+      label: o.label
+    }));
+    const advancedValue = props.selectedExtraId ?? props.type;
+    const routeAdvancedChange = (value) => {
+      if (isBuiltInOrderEntryType(value)) {
+        props.onExtraSelect?.(null);
+        props.onChange(value);
+      } else {
+        props.onExtraSelect?.(value);
+      }
+    };
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
@@ -2140,8 +2149,8 @@ var OrderTypeSelect = (props) => {
             "button",
             {
               type: "button",
-              className: props.type === types.OrderType.LIMIT ? selectedButtonClassName : unselectedButtonClassName,
-              "aria-pressed": props.type === types.OrderType.LIMIT,
+              className: !props.selectedExtraId && props.type === types.OrderType.LIMIT ? selectedButtonClassName : unselectedButtonClassName,
+              "aria-pressed": !props.selectedExtraId && props.type === types.OrderType.LIMIT,
               onClick: () => handleChange(types.OrderType.LIMIT),
               disabled: !props.canTrade,
               "data-testid": "oui-testid-orderEntry-orderType-limit",
@@ -2169,8 +2178,8 @@ var OrderTypeSelect = (props) => {
             "button",
             {
               type: "button",
-              className: props.type === types.OrderType.MARKET ? selectedButtonClassName : unselectedButtonClassName,
-              "aria-pressed": props.type === types.OrderType.MARKET,
+              className: !props.selectedExtraId && props.type === types.OrderType.MARKET ? selectedButtonClassName : unselectedButtonClassName,
+              "aria-pressed": !props.selectedExtraId && props.type === types.OrderType.MARKET,
               onClick: () => handleChange(types.OrderType.MARKET),
               disabled: !props.canTrade,
               "data-testid": "oui-testid-orderEntry-orderType-market",
@@ -2183,30 +2192,13 @@ var OrderTypeSelect = (props) => {
               className: "oui-flex-1",
               "data-testid": "oui-testid-orderEntry-orderType-advanced",
               children: /* @__PURE__ */ jsxRuntime.jsx(
-                ui.Select.options,
+                OrderTypeAdvancedSelectInjectabled,
                 {
-                  testid: "oui-testid-orderEntry-orderType-advanced-select",
-                  currentValue: props.type,
-                  value: props.type,
-                  options: advancedOptions,
-                  onValueChange: props.onChange,
+                  items: advancedItems,
+                  value: advancedValue,
                   placeholder: t("trading.layout.advanced"),
                   disabled: !props.canTrade,
-                  contentProps: {
-                    className: "oui-bg-base-8"
-                  },
-                  classNames: {
-                    trigger: "oui-bg-base-7 oui-border-none oui-h-8 oui-rounded-md"
-                  },
-                  valueFormatter: (value, option) => {
-                    const isAdvanced = value === types.OrderType.STOP_LIMIT || value === types.OrderType.STOP_MARKET || value === types.OrderType.SCALED || value === types.OrderType.TRAILING_STOP;
-                    if (!isAdvanced) {
-                      return /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "xs", className: "oui-text-base-contrast-80", children: option.placeholder });
-                    }
-                    const label = displayLabelMap[value];
-                    return /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "xs", className: "oui-text-base-contrast-80", children: label });
-                  },
-                  size: "md"
+                  onValueChange: routeAdvancedChange
                 }
               )
             }
@@ -2215,7 +2207,16 @@ var OrderTypeSelect = (props) => {
       }
     );
   }
-  const handleMobileValueChange = (value) => {
+  const mobileItems = mobileOptions.map((o) => ({
+    value: o.value,
+    label: o.label
+  }));
+  const mobileValue = props.selectedExtraId ?? props.type;
+  const routeMobileChange = (value) => {
+    if (!isBuiltInOrderEntryType(value)) {
+      props.onExtraSelect?.(value);
+      return;
+    }
     if (marketOrderDisabled && value === types.OrderType.MARKET && marketOrderDisabledTooltip) {
       ui.modal.alert({
         title: t("common.tips"),
@@ -2223,37 +2224,16 @@ var OrderTypeSelect = (props) => {
       });
       return;
     }
+    props.onExtraSelect?.(null);
     props.onChange(value);
   };
   return /* @__PURE__ */ jsxRuntime.jsx(
-    ui.Select.options,
+    OrderTypeMobileSelectInjectabled,
     {
-      testid: "oui-testid-orderEntry-orderType-button",
-      currentValue: props.type,
-      value: props.type,
-      options: mobileOptions,
-      onValueChange: handleMobileValueChange,
-      contentProps: {
-        className: ui.cn(
-          "oui-orderEntry-orderTypeSelect-content",
-          "oui-bg-base-8"
-        )
-      },
-      classNames: {
-        trigger: ui.cn(
-          "oui-orderEntry-orderTypeSelect-btn",
-          "oui-bg-base-7 oui-border-line-12 oui-h-8 oui-rounded-md"
-        )
-      },
-      valueFormatter: (value, option) => {
-        const item = allOptions.find((o) => o.value === value);
-        if (!item) {
-          return /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "xs", children: option.placeholder });
-        }
-        const label = displayLabelMap[value];
-        return /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "xs", className: "oui-text-base-contrast-80", children: label });
-      },
-      size: "md"
+      items: mobileItems,
+      value: mobileValue,
+      disabled: !props.canTrade,
+      onValueChange: routeMobileChange
     }
   );
 };
@@ -2386,6 +2366,64 @@ var QuantitySlider = React3.memo((props) => {
   ] });
 });
 QuantitySlider.displayName = "QuantitySlider";
+var OrderTypeAdvancedSelect = (props) => /* @__PURE__ */ jsxRuntime.jsx(
+  ui.Select.options,
+  {
+    testid: "oui-testid-orderEntry-orderType-advanced-select",
+    currentValue: props.value,
+    value: props.value,
+    options: props.items,
+    onValueChange: (v) => props.onValueChange(v),
+    placeholder: props.placeholder,
+    disabled: props.disabled,
+    contentProps: { className: "oui-bg-base-8" },
+    classNames: {
+      trigger: "oui-bg-base-7 oui-border-none oui-h-8 oui-rounded-md"
+    },
+    valueFormatter: (value, option) => {
+      const item = props.items.find((i) => i.value === value);
+      return /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "xs", className: "oui-text-base-contrast-80", children: item ? item.label : option.placeholder });
+    },
+    size: "md"
+  }
+);
+var OrderTypeAdvancedSelectInjectabled = ui.injectable(
+  OrderTypeAdvancedSelect,
+  "Trading.OrderEntry.AdvancedSelect"
+);
+var MobileTypeSelect = (props) => /* @__PURE__ */ jsxRuntime.jsx(
+  ui.Select.options,
+  {
+    testid: "oui-testid-orderEntry-orderType-button",
+    currentValue: props.value,
+    value: props.value,
+    options: props.items,
+    onValueChange: (v) => props.onValueChange(v),
+    disabled: props.disabled,
+    contentProps: {
+      className: ui.cn("oui-orderEntry-orderTypeSelect-content", "oui-bg-base-8")
+    },
+    classNames: {
+      trigger: ui.cn(
+        "oui-orderEntry-orderTypeSelect-btn",
+        "oui-bg-base-7 oui-border-line-12 oui-h-8 oui-rounded-md"
+      )
+    },
+    valueFormatter: (value, option) => {
+      const item = props.items.find((i) => i.value === value);
+      return /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "xs", className: "oui-text-base-contrast-80", children: item ? item.label : option.placeholder });
+    },
+    size: "md"
+  }
+);
+var OrderTypeMobileSelectInjectabled = ui.injectable(
+  MobileTypeSelect,
+  "Trading.OrderEntry.MobileTypeSelect"
+);
+var OrderEntryBodyInjectabled = ui.injectable(
+  (props) => /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: props.children }),
+  "Trading.OrderEntry.Body"
+);
 var OrderEntryTypeTabsInjectabled = ui.injectable((props) => {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oui-w-full", children: /* @__PURE__ */ jsxRuntime.jsx(
     OrderTypeSelect,
@@ -2395,7 +2433,9 @@ var OrderEntryTypeTabsInjectabled = ui.injectable((props) => {
       canTrade: props.canTrade,
       onChange: props.onChange,
       marketOrderDisabled: props.marketOrderDisabled,
-      marketOrderDisabledTooltip: props.marketOrderDisabledTooltip
+      marketOrderDisabledTooltip: props.marketOrderDisabledTooltip,
+      selectedExtraId: props.selectedExtraId,
+      onExtraSelect: props.onExtraSelect
     }
   ) });
 }, "Trading.OrderEntry.TypeTabs");
@@ -3425,7 +3465,9 @@ function OrderEntryHeader(props) {
           setOrderValue("order_type", type);
         },
         marketOrderDisabled: props.marketOrderDisabled,
-        marketOrderDisabledTooltip: props.marketOrderDisabledTooltip
+        marketOrderDisabledTooltip: props.marketOrderDisabledTooltip,
+        selectedExtraId: props.selectedExtraId,
+        onExtraSelect: props.onExtraSelect
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -3435,7 +3477,8 @@ function OrderEntryHeader(props) {
         canTrade,
         onSideChange: (nextSide) => {
           props.setOrderValue("side", nextSide);
-        }
+        },
+        selectedCustomTypeId: props.selectedExtraId
       }
     )
   ] });
@@ -5660,6 +5703,7 @@ var OrderEntry = (props) => {
     symbol
   } = props;
   const [maxQtyConfirmOpen, setMaxQtyConfirmOpen] = React3.useState(false);
+  const [selectedExtraId, setSelectedExtraId] = React3.useState(null);
   const [permissionlessAcknowledgedKeys, setPermissionlessAcknowledgedKeys] = hooks.useLocalStorage("orderly-permissionless-market-notice", []);
   const { t } = i18n.useTranslation();
   const { isMobile } = ui.useScreen();
@@ -5886,6 +5930,7 @@ var OrderEntry = (props) => {
   };
   React3.useEffect(() => {
     setHasAdvancedTPSLResult(false);
+    setSelectedExtraId(null);
   }, [props.symbol]);
   const showReduceOnlySection = isMobile && formattedOrder.order_type !== types.OrderType.LIMIT && formattedOrder.order_type !== types.OrderType.MARKET || !isMobile;
   const showSoundSection = (Boolean(notification?.orderFilled?.media) || Boolean(notification?.orderFilled?.soundOptions?.length)) && (notification?.orderFilled?.displayInOrderEntry ?? true);
@@ -5953,194 +5998,205 @@ var OrderEntry = (props) => {
                   marketOrderDisabled: props.isSymbolPostOnly,
                   marketOrderDisabledTooltip: t(
                     "orderEntry.orderType.symbolPostOnly.tooltip"
-                  )
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                OrderEntryAvailableInjectabled,
-                {
-                  currentLtv,
-                  canTrade: props.canTrade,
-                  quote: symbolInfo?.quote,
-                  freeCollateral,
-                  marginMode: props.marginMode
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                OrderInput,
-                {
-                  values: formattedOrder,
-                  priceInputContainerWidth: props.priceInputContainerWidth,
-                  fillMiddleValue,
-                  bbo: {
-                    bboStatus,
-                    bboType,
-                    onBBOChange,
-                    toggleBBO
-                  }
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                OrderEntryQuantitySliderInjectabled,
-                {
-                  canTrade: props.canTrade,
-                  side: props.side,
-                  order_quantity: formattedOrder.order_quantity,
-                  maxQty
+                  ),
+                  selectedExtraId,
+                  onExtraSelect: setSelectedExtraId
                 }
               ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                OrderEntrySubmitSectionInjectabled,
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                OrderEntryBodyInjectabled,
                 {
-                  buttonLabel,
+                  symbol: props.symbol,
                   side,
-                  canTrade: props.canTrade,
-                  isMutating: props.isMutating,
-                  onSubmit: validateSubmit,
-                  assetInfo: {
-                    canTrade: props.canTrade,
-                    quote: symbolInfo.quote,
-                    estLiqPrice: props.estLiqPrice,
-                    estLiqPriceDistance: props.estLiqPriceDistance,
-                    estLeverage: props.estLeverage,
-                    currentLeverage: props.currentLeverage,
-                    slippage,
-                    dp: symbolInfo.quote_dp,
-                    setSlippage,
-                    estSlippage: props.estSlippage,
-                    orderType: formattedOrder.order_type,
-                    disableFeatures,
-                    symbol: props.symbol,
-                    side
-                  }
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { className: "oui-w-full" }),
-              hasAdvancedTPSLResult ? /* @__PURE__ */ jsxRuntime.jsx(
-                AdvancedTPSLResult,
-                {
-                  order: formattedOrder,
-                  symbolInfo: props.symbolInfo,
-                  errors: validated ? errors : null,
-                  onEdit: () => {
-                    setShowTPSLAdvanced(true);
-                  },
-                  onDelete: () => {
-                    onDeleteAdvancedTPSL();
-                  }
-                }
-              ) : /* @__PURE__ */ jsxRuntime.jsx(
-                OrderTPSL,
-                {
-                  quote_dp: props.symbolInfo.quote_dp,
-                  switchState: props.tpslSwitch,
-                  onSwitchChanged: props.setTpslSwitch,
-                  orderType: formattedOrder.order_type,
-                  errors: validated || props.slPriceError !== void 0 ? { ...errors, ...props.slPriceError } : null,
-                  setOrderValue: manualSetOrderValue,
-                  reduceOnlyChecked: formattedOrder.reduce_only ?? false,
-                  onReduceOnlyChange: (checked) => {
-                    manualSetOrderValue("reduce_only", checked);
-                  },
-                  values: {
-                    position_type: formattedOrder.position_type ?? types.PositionType.PARTIAL,
-                    tp: {
-                      trigger_price: formattedOrder.tp_trigger_price ?? "",
-                      PnL: formattedOrder.tp_pnl ?? "",
-                      Offset: formattedOrder.tp_offset ?? "",
-                      "Offset%": formattedOrder.tp_offset_percentage ?? "",
-                      OffsetFromMark: formattedOrder.tp_offset_from_mark ?? "",
-                      PercentageFromMark: formattedOrder.tp_offset_percentage_from_mark ?? "",
-                      ROI: formattedOrder.tp_ROI ?? ""
-                    },
-                    sl: {
-                      trigger_price: formattedOrder.sl_trigger_price ?? "",
-                      PnL: formattedOrder.sl_pnl ?? "",
-                      Offset: formattedOrder.sl_offset ?? "",
-                      "Offset%": formattedOrder.sl_offset_percentage ?? "",
-                      OffsetFromMark: formattedOrder.sl_offset_from_mark ?? "",
-                      PercentageFromMark: formattedOrder.sl_offset_percentage_from_mark ?? "",
-                      ROI: formattedOrder.sl_ROI ?? ""
-                    }
-                  },
-                  showTPSLAdvanced: onShowTPSLAdvanced,
-                  onChange: (key, value) => {
-                    setOrderValue(key, value);
-                  }
-                }
-              ),
-              showReduceOnlySection && /* @__PURE__ */ jsxRuntime.jsxs(
-                ui.Flex,
-                {
-                  justify: "between",
-                  itemAlign: "center",
-                  className: ui.cn("oui-reduceOnly-container", "oui-mt-2"),
+                  selectedCustomTypeId: selectedExtraId,
                   children: [
                     /* @__PURE__ */ jsxRuntime.jsx(
-                      ReduceOnlySwitch,
+                      OrderEntryAvailableInjectabled,
                       {
-                        checked: formattedOrder.reduce_only ?? false,
-                        onCheckedChange: (checked) => {
-                          manualSetOrderValue("reduce_only", checked);
+                        currentLtv,
+                        canTrade: props.canTrade,
+                        quote: symbolInfo?.quote,
+                        freeCollateral,
+                        marginMode: props.marginMode
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      OrderInput,
+                      {
+                        values: formattedOrder,
+                        priceInputContainerWidth: props.priceInputContainerWidth,
+                        fillMiddleValue,
+                        bbo: {
+                          bboStatus,
+                          bboType,
+                          onBBOChange,
+                          toggleBBO
                         }
                       }
                     ),
-                    !showSoundSection && extraButton
-                  ]
-                }
-              ),
-              showSoundSection && /* @__PURE__ */ jsxRuntime.jsxs(
-                ui.Flex,
-                {
-                  justify: "between",
-                  itemAlign: "center",
-                  className: "oui-soundAlert-container",
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { itemAlign: "center", gapX: 1, children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        ui.Switch,
-                        {
-                          className: ui.cn("oui-soundAlert-switch", "oui-h-[14px]"),
-                          id: soundAlertId,
-                          checked: soundAlert,
-                          onCheckedChange: (checked) => setSoundAlert(checked)
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      OrderEntryQuantitySliderInjectabled,
+                      {
+                        canTrade: props.canTrade,
+                        side: props.side,
+                        order_quantity: formattedOrder.order_quantity,
+                        maxQty
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      OrderEntrySubmitSectionInjectabled,
+                      {
+                        buttonLabel,
+                        side,
+                        canTrade: props.canTrade,
+                        isMutating: props.isMutating,
+                        onSubmit: validateSubmit,
+                        assetInfo: {
+                          canTrade: props.canTrade,
+                          quote: symbolInfo.quote,
+                          estLiqPrice: props.estLiqPrice,
+                          estLiqPriceDistance: props.estLiqPriceDistance,
+                          estLeverage: props.estLeverage,
+                          currentLeverage: props.currentLeverage,
+                          slippage,
+                          dp: symbolInfo.quote_dp,
+                          setSlippage,
+                          estSlippage: props.estSlippage,
+                          orderType: formattedOrder.order_type,
+                          disableFeatures,
+                          symbol: props.symbol,
+                          side
                         }
-                      ),
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        "label",
-                        {
-                          htmlFor: soundAlertId,
-                          className: ui.cn("oui-soundAlert-label", "oui-text-xs"),
-                          children: t("portfolio.setting.soundAlerts")
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { className: "oui-w-full" }),
+                    hasAdvancedTPSLResult ? /* @__PURE__ */ jsxRuntime.jsx(
+                      AdvancedTPSLResult,
+                      {
+                        order: formattedOrder,
+                        symbolInfo: props.symbolInfo,
+                        errors: validated ? errors : null,
+                        onEdit: () => {
+                          setShowTPSLAdvanced(true);
+                        },
+                        onDelete: () => {
+                          onDeleteAdvancedTPSL();
                         }
-                      )
-                    ] }),
-                    extraButton
-                  ]
-                }
-              ),
-              !showSoundSection && isMobile && (formattedOrder.order_type == types.OrderType.LIMIT || formattedOrder.order_type == types.OrderType.MARKET) && !formattedOrder.reduce_only && !pinned && /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, { className: "oui-w-full", justify: "end", children: extraButton }),
-              pinned && /* @__PURE__ */ jsxRuntime.jsxs(
-                ui.Box,
-                {
-                  p: 2,
-                  r: "md",
-                  intensity: 700,
-                  position: "relative",
-                  className: "oui-additional-container",
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(AdditionalInfo, { ...additionalInfoProps }),
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      PinButton,
+                      }
+                    ) : /* @__PURE__ */ jsxRuntime.jsx(
+                      OrderTPSL,
                       {
-                        onClick: () => {
-                          setPinned(false);
+                        quote_dp: props.symbolInfo.quote_dp,
+                        switchState: props.tpslSwitch,
+                        onSwitchChanged: props.setTpslSwitch,
+                        orderType: formattedOrder.order_type,
+                        errors: validated || props.slPriceError !== void 0 ? { ...errors, ...props.slPriceError } : null,
+                        setOrderValue: manualSetOrderValue,
+                        reduceOnlyChecked: formattedOrder.reduce_only ?? false,
+                        onReduceOnlyChange: (checked) => {
+                          manualSetOrderValue("reduce_only", checked);
                         },
-                        className: ui.cn(
-                          "oui-additional-pin-btn",
-                          "oui-group oui-absolute oui-end-2 oui-top-2"
-                        ),
-                        "data-testid": "oui-testid-orderEntry-pinned-button"
+                        values: {
+                          position_type: formattedOrder.position_type ?? types.PositionType.PARTIAL,
+                          tp: {
+                            trigger_price: formattedOrder.tp_trigger_price ?? "",
+                            PnL: formattedOrder.tp_pnl ?? "",
+                            Offset: formattedOrder.tp_offset ?? "",
+                            "Offset%": formattedOrder.tp_offset_percentage ?? "",
+                            OffsetFromMark: formattedOrder.tp_offset_from_mark ?? "",
+                            PercentageFromMark: formattedOrder.tp_offset_percentage_from_mark ?? "",
+                            ROI: formattedOrder.tp_ROI ?? ""
+                          },
+                          sl: {
+                            trigger_price: formattedOrder.sl_trigger_price ?? "",
+                            PnL: formattedOrder.sl_pnl ?? "",
+                            Offset: formattedOrder.sl_offset ?? "",
+                            "Offset%": formattedOrder.sl_offset_percentage ?? "",
+                            OffsetFromMark: formattedOrder.sl_offset_from_mark ?? "",
+                            PercentageFromMark: formattedOrder.sl_offset_percentage_from_mark ?? "",
+                            ROI: formattedOrder.sl_ROI ?? ""
+                          }
+                        },
+                        showTPSLAdvanced: onShowTPSLAdvanced,
+                        onChange: (key, value) => {
+                          setOrderValue(key, value);
+                        }
+                      }
+                    ),
+                    showReduceOnlySection && /* @__PURE__ */ jsxRuntime.jsxs(
+                      ui.Flex,
+                      {
+                        justify: "between",
+                        itemAlign: "center",
+                        className: ui.cn("oui-reduceOnly-container", "oui-mt-2"),
+                        children: [
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            ReduceOnlySwitch,
+                            {
+                              checked: formattedOrder.reduce_only ?? false,
+                              onCheckedChange: (checked) => {
+                                manualSetOrderValue("reduce_only", checked);
+                              }
+                            }
+                          ),
+                          !showSoundSection && extraButton
+                        ]
+                      }
+                    ),
+                    showSoundSection && /* @__PURE__ */ jsxRuntime.jsxs(
+                      ui.Flex,
+                      {
+                        justify: "between",
+                        itemAlign: "center",
+                        className: "oui-soundAlert-container",
+                        children: [
+                          /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { itemAlign: "center", gapX: 1, children: [
+                            /* @__PURE__ */ jsxRuntime.jsx(
+                              ui.Switch,
+                              {
+                                className: ui.cn("oui-soundAlert-switch", "oui-h-[14px]"),
+                                id: soundAlertId,
+                                checked: soundAlert,
+                                onCheckedChange: (checked) => setSoundAlert(checked)
+                              }
+                            ),
+                            /* @__PURE__ */ jsxRuntime.jsx(
+                              "label",
+                              {
+                                htmlFor: soundAlertId,
+                                className: ui.cn("oui-soundAlert-label", "oui-text-xs"),
+                                children: t("portfolio.setting.soundAlerts")
+                              }
+                            )
+                          ] }),
+                          extraButton
+                        ]
+                      }
+                    ),
+                    pinned && /* @__PURE__ */ jsxRuntime.jsxs(
+                      ui.Box,
+                      {
+                        p: 2,
+                        r: "md",
+                        intensity: 700,
+                        position: "relative",
+                        className: "oui-additional-container",
+                        children: [
+                          /* @__PURE__ */ jsxRuntime.jsx(AdditionalInfo, { ...additionalInfoProps }),
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            PinButton,
+                            {
+                              onClick: () => {
+                                setPinned(false);
+                              },
+                              className: ui.cn(
+                                "oui-additional-pin-btn",
+                                "oui-group oui-absolute oui-end-2 oui-top-2"
+                              ),
+                              "data-testid": "oui-testid-orderEntry-pinned-button"
+                            }
+                          )
+                        ]
                       }
                     )
                   ]