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

package/.cache/admin/src/domain/settings/regions/components/shipping-option-card/edit-modal.tsx

@@ -0,0 +1,170 @@
+import { ShippingOption } from "@medusajs/medusa"
+import { useAdminUpdateShippingOption } from "medusa-react"
+import { useEffect } from "react"
+import { useForm } from "react-hook-form"
+import { useTranslation } from "react-i18next"
+import {
+  getMetadataFormValues,
+  getSubmittableMetadata,
+} from "../../../../../components/forms/general/metadata-form"
+import Button from "../../../../../components/fundamentals/button"
+import Modal from "../../../../../components/molecules/modal"
+import useNotification from "../../../../../hooks/use-notification"
+import { getErrorMessage } from "../../../../../utils/error-messages"
+import ShippingOptionForm, {
+  ShippingOptionFormType,
+} from "../shipping-option-form"
+import { useShippingOptionFormData } from "../shipping-option-form/use-shipping-option-form-data"
+
+type Props = {
+  open: boolean
+  onClose: () => void
+  option: ShippingOption
+}
+
+const EditModal = ({ open, onClose, option }: Props) => {
+  const { t } = useTranslation()
+  const form = useForm<ShippingOptionFormType>({
+    defaultValues: getDefaultValues(option),
+  })
+  const { mutate, isLoading } = useAdminUpdateShippingOption(option.id)
+  const { getRequirementsData } = useShippingOptionFormData(option.region_id)
+  const notification = useNotification()
+
+  const {
+    reset,
+    handleSubmit,
+    formState: { isDirty },
+  } = form
+
+  useEffect(() => {
+    if (open) {
+      reset(getDefaultValues(option))
+    }
+  }, [option, reset, open])
+
+  const closeAndReset = () => {
+    reset(getDefaultValues(option))
+    onClose()
+  }
+
+  const onSubmit = handleSubmit((data) => {
+    mutate(
+      {
+        name: data.name!,
+        // @ts-ignore
+        requirements: getRequirementsData(data),
+        admin_only: !data.store_option,
+        amount: data.amount!,
+        metadata: getSubmittableMetadata(data.metadata),
+      },
+      {
+        onSuccess: () => {
+          notification(
+            t("shipping-option-card-success", "Success"),
+            t(
+              "shipping-option-card-shipping-option-updated",
+              "Shipping option updated"
+            ),
+            "success"
+          )
+          closeAndReset()
+        },
+        onError: (error) => {
+          notification(
+            t("shipping-option-card-error", "Error"),
+            getErrorMessage(error),
+            "error"
+          )
+        },
+      }
+    )
+  })
+
+  return (
+    <Modal open={open} handleClose={closeAndReset}>
+      <Modal.Body>
+        <Modal.Header handleClose={closeAndReset}>
+          <h1 className="inter-xlarge-semibold">
+            {t(
+              "shipping-option-card-edit-shipping-option",
+              "Edit Shipping Option"
+            )}
+          </h1>
+        </Modal.Header>
+        <form onSubmit={onSubmit}>
+          <Modal.Content>
+            <div>
+              <p className="inter-base-semibold">
+                {t(
+                  "shipping-option-card-fulfillment-method",
+                  "Fulfillment Method"
+                )}
+              </p>
+              <p className="inter-base-regular text-grey-50">
+                {option.data.id as string} via {option.provider_id}
+              </p>
+            </div>
+            <div className="bg-grey-20 my-xlarge h-px w-full" />
+            <ShippingOptionForm
+              form={form}
+              region={option.region}
+              isEdit={true}
+            />
+          </Modal.Content>
+          <Modal.Footer>
+            <div className="gap-x-xsmall flex w-full items-center justify-end">
+              <Button variant="secondary" size="small" onClick={closeAndReset}>
+                {t("shipping-option-card-cancel", "Cancel")}
+              </Button>
+              <Button
+                variant="primary"
+                size="small"
+                type="submit"
+                loading={isLoading}
+                disabled={isLoading || !isDirty}
+              >
+                {t("shipping-option-card-save-and-close", "Save and close")}
+              </Button>
+            </div>
+          </Modal.Footer>
+        </form>
+      </Modal.Body>
+    </Modal>
+  )
+}
+
+const getDefaultValues = (option: ShippingOption): ShippingOptionFormType => {
+  const minSubtotal = option.requirements.find((r) => r.type === "min_subtotal")
+  const maxSubtotal = option.requirements.find((r) => r.type === "max_subtotal")
+
+  return {
+    store_option: option.admin_only ? false : true,
+    name: option.name,
+    price_type: {
+      label:
+        option.price_type === "flat_rate" ? "Flat rate" : "Calculated Price",
+      value: option.price_type,
+    },
+    fulfillment_provider: null,
+    shipping_profile: null,
+    requirements: {
+      min_subtotal: minSubtotal
+        ? {
+            amount: minSubtotal.amount,
+            id: minSubtotal.id,
+          }
+        : null,
+      max_subtotal: maxSubtotal
+        ? {
+            amount: maxSubtotal.amount,
+            id: maxSubtotal.id,
+          }
+        : null,
+    },
+    amount: option.amount,
+    metadata: getMetadataFormValues(option.metadata),
+  }
+}
+
+export default EditModal

package/.cache/admin/src/domain/settings/regions/components/shipping-option-card/index.tsx

@@ -0,0 +1,127 @@
+import { ShippingOption } from "@medusajs/medusa"
+import clsx from "clsx"
+import { useAdminDeleteShippingOption } from "medusa-react"
+import { useTranslation } from "react-i18next"
+import EditIcon from "../../../../../components/fundamentals/icons/edit-icon"
+import FastDeliveryIcon from "../../../../../components/fundamentals/icons/fast-delivery-icon"
+import TrashIcon from "../../../../../components/fundamentals/icons/trash-icon"
+import Actionables from "../../../../../components/molecules/actionables"
+import useNotification from "../../../../../hooks/use-notification"
+import useToggleState from "../../../../../hooks/use-toggle-state"
+import { getErrorMessage } from "../../../../../utils/error-messages"
+import { stringDisplayPrice } from "../../../../../utils/prices"
+import EditModal from "./edit-modal"
+
+type Props = {
+  option: ShippingOption
+}
+
+enum ShippingOptionPriceType {
+  FLAT_RATE = "flat_rate",
+  CALCULATED = "calculated",
+}
+
+const ShippingOptionCard = ({ option }: Props) => {
+  const { t } = useTranslation()
+  const { state, toggle, close } = useToggleState()
+  const { mutate } = useAdminDeleteShippingOption(option.id)
+
+  const notification = useNotification()
+
+  const handleDeleteOption = () => {
+    mutate(undefined, {
+      onSuccess: () => {
+        notification(
+          t("shipping-option-card-success", "Success"),
+          t(
+            "shipping-option-card-shipping-option-has-been-deleted",
+            "Shipping option has been deleted"
+          ),
+          "success"
+        )
+      },
+      onError: (error) => {
+        notification(
+          t("shipping-option-card-error", "Error"),
+          getErrorMessage(error),
+          "error"
+        )
+      },
+    })
+  }
+
+  return (
+    <>
+      <div className="bg-grey-0 rounded-rounded border-grey-20 p-base flex items-center justify-between border">
+        <div className="gap-x-base flex items-center">
+          <div className="bg-grey-10 rounded-rounded flex h-10 w-10 items-center justify-center p-2.5">
+            <FastDeliveryIcon size={20} className="text-grey-50" />
+          </div>
+          <div>
+            <p className="inter-base-semibold">{option.name}</p>
+            <div>
+              <p className="inter-small-regular text-grey-50">
+                {option.price_type === ShippingOptionPriceType.FLAT_RATE
+                  ? t("shipping-option-card-flat-rate", "Flat Rate")
+                  : t("shipping-option-card-calcualted", "Calcualted")}
+                :{" "}
+                {stringDisplayPrice({
+                  amount: option.amount,
+                  currencyCode: option.region.currency_code,
+                })}{" "}
+                - {t("shipping-option-card-min-subtotal", "Min. subtotal:")}{" "}
+                {stringDisplayPrice({
+                  amount: option.requirements?.find(
+                    (r) => r.type === "min_subtotal"
+                  )?.amount,
+                  currencyCode: option.region.currency_code,
+                })}{" "}
+                - {t("shipping-option-card-max-subtotal", "Max. subtotal:")}{" "}
+                {stringDisplayPrice({
+                  amount: option.requirements?.find(
+                    (r) => r.type === "max_subtotal"
+                  )?.amount,
+                  currencyCode: option.region.currency_code,
+                })}
+              </p>
+            </div>
+          </div>
+        </div>
+        <div className="gap-x-base flex items-center">
+          <div
+            className={clsx("px-xsmall rounded-rounded py-0.5", {
+              "bg-grey-10 text-grey-50": option.admin_only,
+              "bg-emerald-10 text-emerald-50": !option.admin_only,
+            })}
+          >
+            <span className="inter-small-semibold">
+              {option.admin_only
+                ? t("shipping-option-card-admin", "Admin")
+                : t("shipping-option-card-store", "Store")}
+            </span>
+          </div>
+          <div>
+            <Actionables
+              actions={[
+                {
+                  label: t("shipping-option-card-edit", "Edit"),
+                  onClick: toggle,
+                  icon: <EditIcon size={20} />,
+                },
+                {
+                  label: t("shipping-option-card-delete", "Delete"),
+                  onClick: handleDeleteOption,
+                  icon: <TrashIcon size={20} />,
+                  variant: "danger",
+                },
+              ]}
+            />
+          </div>
+        </div>
+      </div>
+      <EditModal option={option} open={state} onClose={close} />
+    </>
+  )
+}
+
+export default ShippingOptionCard

package/.cache/admin/src/domain/settings/regions/components/shipping-option-form/index.tsx

@@ -0,0 +1,332 @@
+import { Region } from "@medusajs/medusa"
+import { Controller, UseFormReturn } from "react-hook-form"
+import { useTranslation } from "react-i18next"
+import IncludesTaxTooltip from "../../../../../components/atoms/includes-tax-tooltip"
+import Switch from "../../../../../components/atoms/switch"
+import MetadataForm, {
+  MetadataFormType,
+} from "../../../../../components/forms/general/metadata-form"
+import PriceFormInput from "../../../../../components/forms/general/prices-form/price-form-input"
+import InputHeader from "../../../../../components/fundamentals/input-header"
+import InputField from "../../../../../components/molecules/input"
+import { NextSelect } from "../../../../../components/molecules/select/next-select"
+import { Option, ShippingOptionPriceType } from "../../../../../types/shared"
+import FormValidator from "../../../../../utils/form-validator"
+import { nestedForm } from "../../../../../utils/nested-form"
+import { useShippingOptionFormData } from "./use-shipping-option-form-data"
+
+type Requirement = {
+  amount: number | null
+  id: string | null
+}
+
+export type ShippingOptionFormType = {
+  store_option: boolean
+  name: string | null
+  price_type: ShippingOptionPriceType | null
+  amount: number | null
+  shipping_profile: Option | null
+  fulfillment_provider: Option | null
+  requirements: {
+    min_subtotal: Requirement | null
+    max_subtotal: Requirement | null
+  }
+  metadata: MetadataFormType
+}
+
+type Props = {
+  form: UseFormReturn<ShippingOptionFormType, any>
+  region: Region
+  isEdit?: boolean
+}
+
+const ShippingOptionForm = ({ form, region, isEdit = false }: Props) => {
+  const {
+    register,
+    watch,
+    control,
+    formState: { errors },
+  } = form
+
+  const { t } = useTranslation()
+  const { shippingProfileOptions, fulfillmentOptions } =
+    useShippingOptionFormData(region.id)
+
+  return (
+    <div>
+      <div>
+        <div className="gap-y-2xsmall flex flex-col">
+          <div className="flex items-center justify-between">
+            <h3 className="inter-base-semibold mb-2xsmall">
+              {t("shipping-option-form-visible-in-store", "Visible in store")}
+            </h3>
+            <Controller
+              control={control}
+              name={"store_option"}
+              render={({ field: { value, onChange } }) => {
+                return <Switch checked={value} onCheckedChange={onChange} />
+              }}
+            />
+          </div>
+          <p className="inter-base-regular text-grey-50">
+            {t(
+              "shipping-option-form-enable-or-disable-the-shipping-option-visiblity-in-store",
+              "Enable or disable the shipping option visiblity in store."
+            )}
+          </p>
+        </div>
+      </div>
+      <div className="bg-grey-20 my-xlarge h-px w-full" />
+      <div>
+        <h3 className="inter-base-semibold mb-base">
+          {t("shipping-option-form-details", "Details")}
+        </h3>
+        <div className="gap-large grid grid-cols-2">
+          <InputField
+            label={t("shipping-option-form-title", "Title")}
+            required
+            {...register("name", {
+              required: t(
+                "shipping-option-form-title-is-required",
+                "Title is required"
+              ),
+              pattern: FormValidator.whiteSpaceRule("Title"),
+              minLength: FormValidator.minOneCharRule("Title"),
+            })}
+            errors={errors}
+          />
+          <div className="gap-large flex items-center">
+            <Controller
+              control={control}
+              name="price_type"
+              render={({ field: { onChange, value, onBlur } }) => {
+                return (
+                  <NextSelect
+                    label={t("shipping-option-form-price-type", "Price Type")}
+                    required
+                    value={value}
+                    onChange={onChange}
+                    onBlur={onBlur}
+                    options={[
+                      {
+                        label: t("shipping-option-form-flat-rate", "Flat Rate"),
+                        value: "flat_rate",
+                      },
+                      {
+                        label: t(
+                          "shipping-option-form-calculated",
+                          "Calculated"
+                        ),
+                        value: "calculated",
+                      },
+                    ]}
+                    placeholder={t(
+                      "shipping-option-form-choose-a-price-type",
+                      "Choose a price type"
+                    )}
+                    errors={errors}
+                  />
+                )
+              }}
+            />
+            {watch("price_type")?.value === "flat_rate" && (
+              <Controller
+                control={control}
+                name="amount"
+                rules={{
+                  min: FormValidator.nonNegativeNumberRule("Price"),
+                  max: FormValidator.maxInteger("Price", region.currency_code),
+                }}
+                render={({ field: { value, onChange } }) => {
+                  return (
+                    <div>
+                      <InputHeader
+                        label={t("shipping-option-form-price", "Price")}
+                        className="mb-2xsmall"
+                        tooltip={
+                          <IncludesTaxTooltip
+                            includesTax={region.includes_tax}
+                          />
+                        }
+                      />
+                      <PriceFormInput
+                        amount={value || undefined}
+                        onChange={onChange}
+                        name="amount"
+                        currencyCode={region.currency_code}
+                        errors={errors}
+                      />
+                    </div>
+                  )
+                }}
+              />
+            )}
+          </div>
+
+          {!isEdit && (
+            <>
+              <Controller
+                control={control}
+                name="shipping_profile"
+                render={({ field }) => {
+                  return (
+                    <NextSelect
+                      label={t(
+                        "shipping-option-form-shipping-profile",
+                        "Shipping Profile"
+                      )}
+                      required
+                      options={shippingProfileOptions}
+                      placeholder={t(
+                        "shipping-option-form-choose-a-shipping-profile",
+                        "Choose a shipping profile"
+                      )}
+                      {...field}
+                      errors={errors}
+                    />
+                  )
+                }}
+              />
+              <Controller
+                control={control}
+                name="fulfillment_provider"
+                render={({ field }) => {
+                  return (
+                    <NextSelect
+                      label={t(
+                        "shipping-option-form-fulfillment-method",
+                        "Fulfillment Method"
+                      )}
+                      required
+                      placeholder={t(
+                        "shipping-option-form-choose-a-fulfillment-method",
+                        "Choose a fulfillment method"
+                      )}
+                      options={fulfillmentOptions}
+                      {...field}
+                      errors={errors}
+                    />
+                  )
+                }}
+              />
+            </>
+          )}
+        </div>
+      </div>
+      <div className="bg-grey-20 my-xlarge h-px w-full" />
+      <div>
+        <h3 className="inter-base-semibold mb-base">
+          {t("shipping-option-form-requirements", "Requirements")}
+        </h3>
+        <div className="gap-large grid grid-cols-2">
+          <Controller
+            control={control}
+            name="requirements.min_subtotal.amount"
+            rules={{
+              min: FormValidator.nonNegativeNumberRule("Min. subtotal"),
+              max: FormValidator.maxInteger(
+                "Min. subtotal",
+                region.currency_code
+              ),
+              validate: (value) => {
+                if (value === null) {
+                  return true
+                }
+
+                const maxSubtotal = form.getValues(
+                  "requirements.max_subtotal.amount"
+                )
+                if (maxSubtotal && value > maxSubtotal) {
+                  return t(
+                    "shipping-option-form-min-subtotal-must-be-less-than-max-subtotal",
+                    "Min. subtotal must be less than max. subtotal"
+                  )
+                }
+                return true
+              },
+            }}
+            render={({ field: { value, onChange } }) => {
+              return (
+                <div>
+                  <InputHeader
+                    label={t(
+                      "shipping-option-form-min-subtotal",
+                      "Min. subtotal"
+                    )}
+                    className="mb-xsmall"
+                    tooltip={
+                      <IncludesTaxTooltip includesTax={region.includes_tax} />
+                    }
+                  />
+                  <PriceFormInput
+                    amount={typeof value === "number" ? value : undefined}
+                    onChange={onChange}
+                    name="requirements.min_subtotal.amount"
+                    currencyCode={region.currency_code}
+                    errors={errors}
+                  />
+                </div>
+              )
+            }}
+          />
+          <Controller
+            control={control}
+            name="requirements.max_subtotal.amount"
+            rules={{
+              min: FormValidator.nonNegativeNumberRule("Max. subtotal"),
+              max: FormValidator.maxInteger(
+                "Max. subtotal",
+                region.currency_code
+              ),
+              validate: (value) => {
+                if (value === null) {
+                  return true
+                }
+
+                const minSubtotal = form.getValues(
+                  "requirements.min_subtotal.amount"
+                )
+                if (minSubtotal && value < minSubtotal) {
+                  return "Max. subtotal must be greater than min. subtotal"
+                }
+                return true
+              },
+            }}
+            render={({ field: { value, onChange, ref } }) => {
+              return (
+                <div ref={ref}>
+                  <InputHeader
+                    label={t(
+                      "shipping-option-form-max-subtotal",
+                      "Max. subtotal"
+                    )}
+                    className="mb-xsmall"
+                    tooltip={
+                      <IncludesTaxTooltip includesTax={region.includes_tax} />
+                    }
+                  />
+                  <PriceFormInput
+                    amount={typeof value === "number" ? value : undefined}
+                    onChange={onChange}
+                    name="requirements.max_subtotal.amount"
+                    currencyCode={region.currency_code}
+                    errors={errors}
+                  />
+                </div>
+              )
+            }}
+          />
+        </div>
+      </div>
+      <div className="bg-grey-20 my-xlarge h-px w-full" />
+      <div>
+        <h3 className="inter-base-semibold mb-base">
+          {t("shipping-option-form-metadata", "Metadata")}
+        </h3>
+        <MetadataForm form={nestedForm(form, "metadata")} />
+      </div>
+    </div>
+  )
+}
+
+export default ShippingOptionForm