feat(dashboard,types,js-sdk,ui): Add missing Price List features (#7856)

**What** - Adds missing features to Price List domain - Adds `StackedFocusModal` and `StackedDrawer` components that should replace SplitView across the project. - Add Footer to FocusModal - Adds missing js-sdk functions and types **Note** The DatePickers in the PriceLists forms do not work as intended atm. The component is broken, and needs to be fixed. I am working on a fix, but choose to move that work into a separate branch, to prevent this PR from getting bigger then it already is. Will update once the fixes have been merged.
2024-06-28 14:08:23 +00:00
parent 9f3998393b
commit c1740218e9
295 changed files with 4488 additions and 2350 deletions
@@ -0,0 +1,59 @@
+import { PropsWithChildren, createContext } from "react"
+
+type ConditionOperator =
+  | "eq"
+  | "ne"
+  | "gt"
+  | "lt"
+  | "gte"
+  | "lte"
+  | "in"
+  | "nin"
+
+type ConditionBlockValue<TValue> = {
+  attribute: string
+  operator: ConditionOperator
+  value: TValue
+}
+
+type ConditionBlockState<TValue> = {
+  defaultValue?: ConditionBlockValue<TValue>
+  value?: ConditionBlockValue<TValue>
+  onChange: (value: ConditionBlockValue<TValue>) => void
+}
+
+const ConditionBlockContext = createContext<ConditionBlockState<any> | null>(
+  null
+)
+
+const useConditionBlock = () => {
+  const context = ConditionBlockContext
+
+  if (!context) {
+    throw new Error("useConditionBlock must be used within a ConditionBlock")
+  }
+
+  return context
+}
+
+type ConditionBlockProps<TValue> = PropsWithChildren<
+  ConditionBlockState<TValue>
+>
+
+const Root = <TValue,>({ children, ...props }: ConditionBlockProps<TValue>) => {
+  return (
+    <ConditionBlockContext.Provider value={props}>
+      {children}
+    </ConditionBlockContext.Provider>
+  )
+}
+
+const Divider = () => {}
+
+const Operator = () => {}
+
+const Item = () => {}
+
+export const ConditionBlock = Object.assign(Root, {
+  Divider,
+})
@@ -0,0 +1,73 @@
+import { Text, clx } from "@medusajs/ui"
+import { useTranslation } from "react-i18next"
+import { useDate } from "../../../hooks/use-date"
+
+type DateRangeDisplayProps = {
+  startsAt?: Date | string | null
+  endsAt?: Date | string | null
+  showTime?: boolean
+}
+
+export const DateRangeDisplay = ({
+  startsAt,
+  endsAt,
+  showTime = false,
+}: DateRangeDisplayProps) => {
+  const startDate = startsAt ? new Date(startsAt) : null
+  const endDate = endsAt ? new Date(endsAt) : null
+
+  const { t } = useTranslation()
+  const { getFullDate } = useDate()
+
+  return (
+    <div className="grid gap-3 md:grid-cols-2">
+      <div className="shadow-elevation-card-rest bg-ui-bg-component text-ui-fg-subtle flex items-center gap-x-3 rounded-md px-3 py-1.5">
+        <Bar date={startDate} />
+        <div>
+          <Text weight="plus" size="small">
+            {t("fields.startDate")}
+          </Text>
+          <Text size="small">
+            {startDate
+              ? getFullDate({
+                  date: startDate,
+                  includeTime: showTime,
+                })
+              : "-"}
+          </Text>
+        </div>
+      </div>
+
+      <div className="shadow-elevation-card-rest bg-ui-bg-component text-ui-fg-subtle flex items-center gap-x-3 rounded-md px-3 py-1.5">
+        <Bar date={endDate} />
+        <div>
+          <Text size="small" weight="plus">
+            {t("fields.endDate")}
+          </Text>
+          <Text size="small">
+            {endDate
+              ? getFullDate({
+                  date: endDate,
+                  includeTime: showTime,
+                })
+              : "-"}
+          </Text>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+const Bar = ({ date }: { date: Date | null }) => {
+  const now = new Date()
+
+  const isDateInFuture = date && date > now
+
+  return (
+    <div
+      className={clx("bg-ui-tag-neutral-icon h-8 w-1 rounded-full", {
+        "bg-ui-tag-orange-icon": isDateInFuture,
+      })}
+    />
+  )
+}
@@ -0,0 +1 @@
+export * from "./date-range-display"