feat(dashboard): SO cart item total rules UI (medusajs#10386)

Klomgor · Dec 9, 2024 · a1a1e0e · a1a1e0e
1 parent 9e797dc
commit a1a1e0e
Show file tree

Hide file tree

Showing 33 changed files with 1,947 additions and 190 deletions.
diff --git a/.changeset/dry-cheetahs-wait.md b/.changeset/dry-cheetahs-wait.md
@@ -0,0 +1,6 @@
+---
+"@medusajs/dashboard": patch
+"@medusajs/types": patch
+---
+
+feat(dashboard,types): Add UI to manage conditional SO prices
diff --git a/packages/admin/dashboard/src/components/common/tax-badge/tax-badge.tsx b/packages/admin/dashboard/src/components/common/tax-badge/tax-badge.tsx
@@ -1,5 +1,5 @@
-import { BuildingTax } from "@medusajs/icons"
-import { Tooltip, clx } from "@medusajs/ui"
+import { TaxExclusive, TaxInclusive } from "@medusajs/icons"
+import { Tooltip } from "@medusajs/ui"
 import { useTranslation } from "react-i18next"
 
 type IncludesTaxTooltipProps = {
@@ -20,9 +20,11 @@ export const IncludesTaxTooltip = ({
           : t("general.excludesTaxTooltip")
       }
     >
-      <BuildingTax
-        className={clx("shrink-0", { "text-ui-fg-muted": !includesTax })}
-      />
+      {includesTax ? (
+        <TaxInclusive className="text-ui-fg-muted shrink-0" />
+      ) : (
+        <TaxExclusive className="text-ui-fg-muted shrink-0" />
+      )}
     </Tooltip>
   )
 }
diff --git a/packages/admin/dashboard/src/components/data-grid/components/data-grid-cell-container.tsx b/packages/admin/dashboard/src/components/data-grid/components/data-grid-cell-container.tsx
@@ -19,52 +19,56 @@ export const DataGridCellContainer = ({
   children,
   errors,
   rowErrors,
+  outerComponent,
 }: DataGridCellContainerProps & DataGridErrorRenderProps<any>) => {
   const error = get(errors, field)
   const hasError = !!error
 
   return (
-    <div
-      className={clx(
-        "bg-ui-bg-base group/cell relative flex size-full items-center gap-x-2 px-4 py-2.5 outline-none",
-        {
-          "bg-ui-tag-red-bg text-ui-tag-red-text":
-            hasError && !isAnchor && !isSelected && !isDragSelected,
-          "ring-ui-bg-interactive ring-2 ring-inset": isAnchor,
-          "bg-ui-bg-highlight [&:has([data-field]:focus)]:bg-ui-bg-base":
-            isSelected || isAnchor,
-          "bg-ui-bg-subtle": isDragSelected && !isAnchor,
-        }
-      )}
-      tabIndex={-1}
-      {...innerProps}
-    >
-      <ErrorMessage
-        name={field}
-        errors={errors}
-        render={({ message }) => {
-          return (
-            <div className="flex items-center justify-center">
-              <Tooltip content={message} delayDuration={0}>
-                <ExclamationCircle className="text-ui-tag-red-icon z-[3]" />
-              </Tooltip>
-            </div>
-          )
-        }}
-      />
-      <div className="relative z-[1] flex size-full items-center justify-center">
-        <RenderChildren isAnchor={isAnchor} placeholder={placeholder}>
-          {children}
-        </RenderChildren>
-      </div>
-      <DataGridRowErrorIndicator rowErrors={rowErrors} />
-      {showOverlay && (
-        <div
-          {...overlayProps}
-          data-cell-overlay="true"
-          className="absolute inset-0 z-[2] size-full"
+    <div className="group/container relative size-full">
+      <div
+        className={clx(
+          "bg-ui-bg-base group/cell relative flex size-full items-center gap-x-2 px-4 py-2.5 outline-none",
+          {
+            "bg-ui-tag-red-bg text-ui-tag-red-text":
+              hasError && !isAnchor && !isSelected && !isDragSelected,
+            "ring-ui-bg-interactive ring-2 ring-inset": isAnchor,
+            "bg-ui-bg-highlight [&:has([data-field]:focus)]:bg-ui-bg-base":
+              isSelected || isAnchor,
+            "bg-ui-bg-subtle": isDragSelected && !isAnchor,
+          }
+        )}
+        tabIndex={-1}
+        {...innerProps}
+      >
+        <ErrorMessage
+          name={field}
+          errors={errors}
+          render={({ message }) => {
+            return (
+              <div className="flex items-center justify-center">
+                <Tooltip content={message} delayDuration={0}>
+                  <ExclamationCircle className="text-ui-tag-red-icon z-[3]" />
+                </Tooltip>
+              </div>
+            )
+          }}
         />
-      )}
+        <div className="relative z-[1] flex size-full items-center justify-center">
+          <RenderChildren isAnchor={isAnchor} placeholder={placeholder}>
+            {children}
+          </RenderChildren>
+        </div>
+        <DataGridRowErrorIndicator rowErrors={rowErrors} />
+        {showOverlay && (
+          <div
+            {...overlayProps}
+            data-cell-overlay="true"
+            className="absolute inset-0"
+          />
+        )}
+      </div>
+      {outerComponent}
     </div>
   )
 }

diff --git a/packages/admin/dashboard/src/components/data-grid/components/data-grid-root.tsx b/packages/admin/dashboard/src/components/data-grid/components/data-grid-root.tsx
@@ -57,6 +57,7 @@ export interface DataGridRootProps<
   state: UseFormReturn<TFieldValues>
   getSubRows?: (row: TData) => TData[] | undefined
   onEditingChange?: (isEditing: boolean) => void
+  disableInteractions?: boolean
 }
 
 const ROW_HEIGHT = 40
@@ -102,6 +103,7 @@ export const DataGridRoot = <
   state,
   getSubRows,
   onEditingChange,
+  disableInteractions,
 }: DataGridRootProps<TData, TFieldValues>) => {
   const containerRef = useRef<HTMLDivElement>(null)
 
@@ -114,7 +116,9 @@ export const DataGridRoot = <
     formState: { errors },
   } = state
 
-  const [trapActive, setTrapActive] = useState(true)
+  const [internalTrapActive, setTrapActive] = useState(true)
+
+  const trapActive = !disableInteractions && internalTrapActive
 
   const [anchor, setAnchor] = useState<DataGridCoordinates | null>(null)
   const [rangeEnd, setRangeEnd] = useState<DataGridCoordinates | null>(null)
@@ -533,7 +537,7 @@ export const DataGridRoot = <
         queryTool?.getContainer(anchor)?.focus()
       })
     }
-  }, [anchor, trapActive, queryTool])
+  }, [anchor, trapActive, setSingleRange, scrollToCoordinates, queryTool])
 
   return (
     <DataGridContext.Provider value={values}>

diff --git a/packages/admin/dashboard/src/components/data-grid/hooks/use-data-grid-keydown-event.tsx b/packages/admin/dashboard/src/components/data-grid/hooks/use-data-grid-keydown-event.tsx
@@ -46,7 +46,7 @@ const VERTICAL_KEYS = ["ArrowUp", "ArrowDown"]
 
 export const useDataGridKeydownEvent = <
   TData,
-  TFieldValues extends FieldValues,
+  TFieldValues extends FieldValues
 >({
   containerRef,
   matrix,
@@ -108,8 +108,8 @@ export const useDataGridKeydownEvent = <
         direction === "horizontal"
           ? setSingleRange
           : e.shiftKey
-            ? setRangeEnd
-            : setSingleRange
+          ? setRangeEnd
+          : setSingleRange
 
       if (!basis) {
         return

diff --git a/packages/admin/dashboard/src/components/data-grid/types.ts b/packages/admin/dashboard/src/components/data-grid/types.ts
@@ -96,6 +96,7 @@ export interface DataGridCellContainerProps extends PropsWithChildren<{}> {
   isDragSelected: boolean
   placeholder?: ReactNode
   showOverlay: boolean
+  outerComponent?: ReactNode
 }
 
 export type DataGridCellSnapshot<

diff --git a/packages/admin/dashboard/src/components/modals/stacked-focus-modal/stacked-focus-modal.tsx b/packages/admin/dashboard/src/components/modals/stacked-focus-modal/stacked-focus-modal.tsx
@@ -13,12 +13,20 @@ type StackedFocusModalProps = PropsWithChildren<{
    * when multiple stacked modals are registered to the same parent modal.
    */
   id: string
+  /**
+   * An optional callback that is called when the modal is opened or closed.
+   */
+  onOpenChangeCallback?: (open: boolean) => void
 }>
 
 /**
  * A stacked modal that can be rendered above a parent modal.
  */
-export const Root = ({ id, children }: StackedFocusModalProps) => {
+export const Root = ({
+  id,
+  onOpenChangeCallback,
+  children,
+}: StackedFocusModalProps) => {
   const { register, unregister, getIsOpen, setIsOpen } = useStackedModal()
 
   useEffect(() => {
@@ -28,11 +36,13 @@ export const Root = ({ id, children }: StackedFocusModalProps) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
+  const handleOpenChange = (open: boolean) => {
+    setIsOpen(id, open)
+    onOpenChangeCallback?.(open)
+  }
+
   return (
-    <FocusModal
-      open={getIsOpen(id)}
-      onOpenChange={(open) => setIsOpen(id, open)}
-    >
+    <FocusModal open={getIsOpen(id)} onOpenChange={handleOpenChange}>
       {children}
     </FocusModal>
   )

diff --git a/packages/admin/dashboard/src/i18n/translations/$schema.json b/packages/admin/dashboard/src/i18n/translations/$schema.json
@@ -5544,6 +5544,144 @@
               "required": ["action"],
               "additionalProperties": false
             },
+            "conditionalPrices": {
+              "type": "object",
+              "properties": {
+                "header": {
+                  "type": "string"
+                },
+                "description": {
+                  "type": "string"
+                },
+                "attributes": {
+                  "type": "object",
+                  "properties": {
+                    "cartItemTotal": {
+                      "type": "string"
+                    }
+                  },
+                  "required": [
+                    "cartItemTotal"
+                  ],
+                  "additionalProperties": false
+                },
+                "summaries": {
+                  "type": "object",
+                  "properties": {
+                    "range": {
+                      "type": "string"
+                    },
+                    "greaterThan": {
+                      "type": "string"
+                    },
+                    "lessThan": {
+                      "type": "string"
+                    }
+                  },
+                  "required": [
+                    "range",
+                    "greaterThan",
+                    "lessThan"
+                  ],
+                  "additionalProperties": false
+                },
+                "actions": {
+                  "type": "object",
+                  "properties": {
+                    "addPrice": {
+                      "type": "string"
+                    },
+                    "manageConditionalPrices": {
+                      "type": "string"
+                    }
+                  },
+                  "required": [
+                    "addPrice",
+                    "manageConditionalPrices"
+                  ],
+                  "additionalProperties": false
+                },
+                "rules": {
+                  "type": "object",
+                  "properties": {
+                    "amount": {
+                      "type": "string"
+                    },
+                    "gte": {
+                      "type": "string"
+                    },
+                    "lte": {
+                      "type": "string"
+                    }
+                  },
+                  "required": [
+                    "amount",
+                    "gte",
+                    "lte"
+                  ],
+                  "additionalProperties": false
+                },
+                "customRules": {
+                  "type": "object",
+                  "properties": {
+                    "label": {
+                      "type": "string"
+                    },
+                    "tooltip": {
+                      "type": "string"
+                    },
+                    "eq": {
+                      "type": "string"
+                    },
+                    "gt": {
+                      "type": "string"
+                    },
+                    "lt": {
+                      "type": "string"
+                    }
+                  },
+                  "required": [
+                    "label",
+                    "tooltip",
+                    "eq",
+                    "gt",
+                    "lt"
+                  ],
+                  "additionalProperties": false
+                },
+                "errors": {
+                  "type": "object",
+                  "properties": {
+                    "amountRequired": {
+                      "type": "string"
+                    },
+                    "minOrMaxRequired": {
+                      "type": "string"
+                    },
+                    "minGreaterThanMax": {
+                      "type": "string"
+                    }
+                  },
+                  "required": [
+                    "amountRequired",
+                    "minOrMaxRequired",
+                    "minGreaterThanMax"
+                  ],
+                  "additionalProperties": false
+                }
+              },
+              "required": [
+                "header",
+                "description",
+                "attributes",
+                "summaries",
+                "actions",
+                "rules",
+                "customRules",
+                "errors"
+              ],
+              "additionalProperties": false
+            },
             "fields": {
               "type": "object",
               "properties": {
@@ -5644,7 +5782,14 @@
               "additionalProperties": false
             }
           },
-          "required": ["create", "delete", "edit", "pricing", "fields"],
+          "required": [
+            "create",
+            "delete",
+            "edit",
+            "pricing",
+            "conditionalPrices",
+            "fields"
+          ],
           "additionalProperties": false
         },
         "serviceZones": {