@sgftech/medusa-plugin-product-variant-licenses 0.0.1

package/.cache/admin/src/components/extensions/setting-container/setting-error-element.tsx

@@ -0,0 +1,77 @@
+import { useEffect } from "react"
+import { useRouteError } from "react-router-dom"
+import Button from "../../fundamentals/button"
+import RefreshIcon from "../../fundamentals/icons/refresh-icon"
+import WarningCircleIcon from "../../fundamentals/icons/warning-circle"
+
+type SettingsPageErrorElementProps = {
+  origin: string
+}
+
+const isProd = process.env.NODE_ENV === "production"
+
+const SettingsPageErrorElement = ({
+  origin,
+}: SettingsPageErrorElementProps) => {
+  const error = useRouteError()
+
+  useEffect(() => {
+    if (!isProd && error) {
+      console.group(
+        `%cAn error occurred in a settings page from ${origin}:`,
+        "color: red; font-weight: bold;"
+      )
+      console.error(error)
+      console.groupEnd()
+    }
+  }, [error, origin])
+
+  const reload = () => {
+    window.location.reload()
+  }
+
+  return (
+    <div className="flex h-full w-full items-center justify-center">
+      <div className="rounded-rounded p-base bg-rose-10 border-rose-40 gap-x-small flex justify-start border">
+        <div>
+          <WarningCircleIcon
+            size={20}
+            fillType="solid"
+            className="text-rose-40"
+          />
+        </div>
+        <div className="text-rose-40 inter-small-regular w-full pr-[20px]">
+          <h1 className="inter-base-semibold mb-2xsmall">Uncaught error</h1>
+          <p className="mb-small">
+            {isProd
+              ? "An error unknown error occurred, and the page could not be loaded."
+              : `A Page from <strong>${origin}</strong> crashed. See the console for more info.`}
+          </p>
+          <p className="mb-large">
+            <strong>What should I do?</strong>
+            <br />
+            If you are the developer of this setting page, you should fix the
+            error and reload the page. If you are not the developer, you should
+            contact the maintainer and report the error.
+          </p>
+          <div className="gap-x-base flex items-center">
+            <Button
+              variant="nuclear"
+              size="small"
+              type="button"
+              onClick={reload}
+              className="w-full"
+            >
+              <div className="flex items-center">
+                <RefreshIcon size="20" />
+                <span className="ml-xsmall">Reload</span>
+              </div>
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default SettingsPageErrorElement

package/.cache/admin/src/components/extensions/setting-container/use-setting-container-props.tsx

@@ -0,0 +1,7 @@
+import { useExtensionBaseProps } from "../../../hooks/use-extension-base-props"
+
+export const useSettingContainerProps = () => {
+  const baseProps = useExtensionBaseProps()
+
+  return baseProps
+}

package/.cache/admin/src/components/extensions/widget-container/index.tsx

@@ -0,0 +1,32 @@
+import React from "react"
+import { InjectionZone, Widget } from "../../../types/extensions"
+import { EntityMap } from "./types"
+import { useWidgetContainerProps } from "./use-widget-container-props"
+import WidgetErrorBoundary from "./widget-error-boundary"
+
+type WidgetContainerProps<T extends keyof EntityMap> = {
+  injectionZone: T
+  widget: Widget
+  entity: EntityMap[T]
+}
+
+const WidgetContainer = <T extends InjectionZone>({
+  injectionZone,
+  widget,
+  entity,
+}: WidgetContainerProps<T>) => {
+  const { Widget, origin } = widget
+
+  const props = useWidgetContainerProps({
+    injectionZone,
+    entity,
+  })
+
+  return (
+    <WidgetErrorBoundary origin={origin}>
+      {React.createElement(Widget, props)}
+    </WidgetErrorBoundary>
+  )
+}
+
+export default WidgetContainer

package/.cache/admin/src/components/extensions/widget-container/types.ts

@@ -0,0 +1,77 @@
+import {
+  Customer,
+  CustomerGroup,
+  Discount,
+  DraftOrder,
+  GiftCard,
+  Order,
+  PriceList,
+  Product,
+  ProductCollection,
+} from "@medusajs/medusa"
+
+export type EntityMap = {
+  // Details
+  "product.details.after": Product
+  "product.details.before": Product
+  "product_collection.details.after": ProductCollection
+  "product_collection.details.before": ProductCollection
+  "order.details.after": Order
+  "order.details.before": Order
+  "draft_order.details.after": DraftOrder
+  "draft_order.details.before": DraftOrder
+  "customer.details.after": Customer
+  "customer.details.before": Customer
+  "customer_group.details.after": CustomerGroup
+  "customer_group.details.before": CustomerGroup
+  "discount.details.after": Discount
+  "discount.details.before": Discount
+  "price_list.details.after": PriceList
+  "price_list.details.before": PriceList
+  "gift_card.details.after": Product
+  "gift_card.details.before": Product
+  "custom_gift_card.after": GiftCard
+  "custom_gift_card.before": GiftCard
+  // List
+  "product.list.after"?: never | null | undefined
+  "product.list.before"?: never | null | undefined
+  "product_collection.list.after"?: never | null | undefined
+  "product_collection.list.before"?: never | null | undefined
+  "order.list.after"?: never | null | undefined
+  "order.list.before"?: never | null | undefined
+  "draft_order.list.after"?: never | null | undefined
+  "draft_order.list.before"?: never | null | undefined
+  "customer.list.after"?: never | null | undefined
+  "customer.list.before"?: never | null | undefined
+  "customer_group.list.after"?: never | null | undefined
+  "customer_group.list.before"?: never | null | undefined
+  "discount.list.after"?: never | null | undefined
+  "discount.list.before"?: never | null | undefined
+  "price_list.list.after"?: never | null | undefined
+  "price_list.list.before"?: never | null | undefined
+  "gift_card.list.after"?: never | null | undefined
+  "gift_card.list.before"?: never | null | undefined
+  // Login
+  "login.before"?: never | null | undefined
+  "login.after"?: never | null | undefined
+}
+
+export const PropKeyMap = {
+  "product.details.after": "product",
+  "product.details.before": "product",
+  "product_collection.details.after": "productCollection",
+  "product_collection.details.before": "productCollection",
+  "order.details.after": "order",
+  "order.details.before": "order",
+  "draft_order.details.after": "draftOrder",
+  "draft_order.details.before": "draftOrder",
+  "customer.details.after": "customer",
+  "customer.details.before": "customer",
+  "customer_group.details.after": "customerGroup",
+  "customer_group.details.before": "customerGroup",
+  "discount.details.after": "discount",
+  "discount.details.before": "discount",
+  "price_list.details.after": "priceList",
+  "price_list.details.before": "priceList",
+  custom_gift_card: "giftCard",
+}

package/.cache/admin/src/components/extensions/widget-container/use-widget-container-props.tsx

@@ -0,0 +1,31 @@
+import { useExtensionBaseProps } from "../../../hooks/use-extension-base-props"
+import { WidgetProps } from "../../../types/extensions"
+import { EntityMap, PropKeyMap } from "./types"
+
+type UseWidgetContainerProps<T extends keyof EntityMap> = {
+  injectionZone: T
+  entity?: EntityMap[T]
+}
+
+export const useWidgetContainerProps = <T extends keyof EntityMap>({
+  injectionZone,
+  entity,
+}: UseWidgetContainerProps<T>) => {
+  const baseProps = useExtensionBaseProps() satisfies WidgetProps
+
+  /**
+   * Not all InjectionZones have an entity, so we need to check for it first, and then
+   * add it to the props if it exists.
+   */
+  if (entity) {
+    const propKey = injectionZone as keyof typeof PropKeyMap
+    const entityKey = PropKeyMap[propKey]
+
+    return {
+      ...baseProps,
+      [entityKey]: entity,
+    }
+  }
+
+  return baseProps
+}

package/.cache/admin/src/components/extensions/widget-container/widget-error-boundary.tsx

@@ -0,0 +1,136 @@
+import React, { ErrorInfo } from "react"
+import Button from "../../fundamentals/button"
+import RefreshIcon from "../../fundamentals/icons/refresh-icon"
+import WarningCircleIcon from "../../fundamentals/icons/warning-circle"
+import XCircleIcon from "../../fundamentals/icons/x-circle-icon"
+
+type Props = {
+  children: React.ReactNode
+  origin: string
+}
+
+type State = {
+  hasError: boolean
+  hidden?: boolean
+}
+
+class WidgetErrorBoundary extends React.Component<Props, State> {
+  public state: State = {
+    hasError: false,
+  }
+
+  public static getDerivedStateFromError(_: Error): State {
+    return { hasError: true, hidden: false }
+  }
+
+  public componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    if (process.env.NODE_ENV !== "production") {
+      console.group(
+        `%cAn error occurred in a widget from ${this.props.origin}:`,
+        "color: red; font-weight: bold, background-color: #fff;"
+      )
+      console.error(error)
+      console.error(
+        "%cComponent Stack:",
+        "color: red",
+        errorInfo.componentStack
+      )
+      console.groupEnd()
+    }
+  }
+
+  public handleResetError() {
+    this.setState({ hasError: false })
+  }
+
+  public hideError() {
+    this.setState({ hidden: true })
+  }
+
+  public renderFallback() {
+    if (process.env.NODE_ENV !== "production" && !this.state.hidden) {
+      return (
+        <FallbackWidget
+          origin={this.props.origin}
+          reset={this.handleResetError.bind(this)}
+          hide={this.hideError.bind(this)}
+        />
+      )
+    }
+
+    // Don't render anything in production
+    return null
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return this.renderFallback()
+    }
+
+    return this.props.children
+  }
+}
+
+const FallbackWidget = ({
+  origin,
+  reset,
+  hide,
+}: {
+  origin: string
+  reset: () => void
+  hide: () => void
+}) => {
+  return (
+    <div className="rounded-rounded p-base bg-rose-10 border-rose-40 gap-x-small flex justify-start border">
+      <div>
+        <WarningCircleIcon
+          size={20}
+          fillType="solid"
+          className="text-rose-40"
+        />
+      </div>
+      <div className="text-rose-40 inter-small-regular w-full pr-[20px]">
+        <h1 className="inter-base-semibold mb-2xsmall">Uncaught error</h1>
+        <p className="mb-small">
+          A widget from <strong>{origin}</strong> crashed. See the console for
+          more info.
+        </p>
+        <p className="mb-large">
+          <strong>What should I do?</strong>
+          <br />
+          If you are the developer of this widget, you should fix the error and
+          reload the page. If you are not the developer, you should contact the
+          maintainer and report the error.
+        </p>
+        <div className="gap-x-base flex items-center">
+          <Button
+            variant="nuclear"
+            size="small"
+            type="button"
+            onClick={hide}
+            className="w-full"
+          >
+            <div className="flex items-center">
+              <XCircleIcon size="20" />
+              <span className="ml-xsmall">Hide</span>
+            </div>
+          </Button>
+          <Button
+            variant="nuclear"
+            size="small"
+            type="button"
+            onClick={reset}
+            className="w-full"
+          >
+            <div className="flex items-center">
+              <RefreshIcon size="20" />
+              <span className="ml-xsmall">Reload</span>
+            </div>
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default WidgetErrorBoundary

package/.cache/admin/src/components/forms/customer-group/customer-group-general-form/index.tsx

@@ -0,0 +1,34 @@
+import FormValidator from "../../../../utils/form-validator"
+import { NestedForm } from "../../../../utils/nested-form"
+import InputField from "../../../molecules/input"
+
+export type CustomerGroupGeneralFormType = {
+  name: string
+}
+
+type CustomerGroupGeneralFormProps = {
+  form: NestedForm<CustomerGroupGeneralFormType>
+}
+
+export const CustomerGroupGeneralForm = ({
+  form,
+}: CustomerGroupGeneralFormProps) => {
+  const {
+    register,
+    path,
+    formState: { errors },
+  } = form
+
+  return (
+    <div>
+      <InputField
+        label="Name"
+        required
+        {...register(path("name"), {
+          required: FormValidator.required("Name"),
+        })}
+        errors={errors}
+      />
+    </div>
+  )
+}

package/.cache/admin/src/components/forms/discount/discount-configuration-form/index.tsx

@@ -0,0 +1,159 @@
+import { Controller } from "react-hook-form"
+import { NestedForm } from "../../../../utils/nested-form"
+import DatePicker from "../../../atoms/date-picker/date-picker"
+import TimePicker from "../../../atoms/date-picker/time-picker"
+import AvailabilityDuration from "../../../molecules/availability-duration"
+import InputField from "../../../molecules/input"
+import SwitchableItem from "../../../molecules/switchable-item"
+
+export type DiscountConfigurationFormType = {
+  starts_at: Date
+  ends_at: Date | null
+  usage_limit: number | null
+  valid_duration: string | null
+}
+
+type DiscountConfigurationFormProps = {
+  form: NestedForm<DiscountConfigurationFormType>
+  isDynamic?: boolean
+}
+
+const DiscountConfigurationForm = ({
+  form,
+  isDynamic,
+}: DiscountConfigurationFormProps) => {
+  const { control, path } = form
+
+  return (
+    <div>
+      <div className="gap-y-large flex flex-col">
+        <Controller
+          name={path("starts_at")}
+          control={control}
+          render={({ field: { onChange, value } }) => {
+            return (
+              <SwitchableItem
+                open={!!value}
+                onSwitch={() => {
+                  if (value) {
+                    onChange(null)
+                  } else {
+                    onChange(new Date())
+                  }
+                }}
+                title="Discount has a start date?"
+                description="Schedule the discount to activate in the future."
+              >
+                <div className="gap-x-xsmall flex items-center">
+                  <DatePicker
+                    date={value!}
+                    label="Start date"
+                    onSubmitDate={onChange}
+                  />
+                  <TimePicker
+                    label="Start time"
+                    date={value!}
+                    onSubmitDate={onChange}
+                  />
+                </div>
+              </SwitchableItem>
+            )
+          }}
+        />
+        <Controller
+          name={path("ends_at")}
+          control={control}
+          render={({ field: { value, onChange } }) => {
+            return (
+              <SwitchableItem
+                open={!!value}
+                onSwitch={() => {
+                  if (value) {
+                    onChange(null)
+                  } else {
+                    onChange(
+                      new Date(new Date().getTime() + 7 * 24 * 60 * 60 * 1000)
+                    )
+                  }
+                }}
+                title="Discount has an expiry date?"
+                description="Schedule the discount to deactivate in the future."
+              >
+                <div className="gap-x-xsmall flex items-center">
+                  <DatePicker
+                    date={value!}
+                    label="Expiry date"
+                    onSubmitDate={onChange}
+                  />
+                  <TimePicker
+                    label="Expiry time"
+                    date={value!}
+                    onSubmitDate={onChange}
+                  />
+                </div>
+              </SwitchableItem>
+            )
+          }}
+        />
+        <Controller
+          name={path("usage_limit")}
+          control={control}
+          render={({ field: { value, onChange } }) => {
+            return (
+              <SwitchableItem
+                open={!!value}
+                onSwitch={() => {
+                  if (value) {
+                    onChange(null)
+                  } else {
+                    onChange(10)
+                  }
+                }}
+                title="Limit the number of redemtions?"
+                description="Limit applies across all customers, not per customer."
+              >
+                <InputField
+                  label="Number of redemptions"
+                  type="number"
+                  placeholder="5"
+                  min={1}
+                  defaultValue={value ?? undefined}
+                  onChange={(value) => onChange(value.target.valueAsNumber)}
+                />
+              </SwitchableItem>
+            )
+          }}
+        />
+        {isDynamic && (
+          <Controller
+            name={path("valid_duration")}
+            control={control}
+            render={({ field: { onChange, value } }) => {
+              return (
+                <SwitchableItem
+                  open={!!value}
+                  onSwitch={() => {
+                    if (value) {
+                      onChange(null)
+                    } else {
+                      onChange("P0Y0M0DT00H00M")
+                    }
+                  }}
+                  title="Availability duration?"
+                  description="Set the duration of the discount."
+                >
+                  <AvailabilityDuration
+                    value={value ?? undefined}
+                    onChange={onChange}
+                  />
+                </SwitchableItem>
+              )
+            }}
+          />
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default DiscountConfigurationForm