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

package/.cache/admin/src/components/organisms/metadata/index.tsx

@@ -0,0 +1,150 @@
+import React, { useEffect, useState } from "react"
+import { useTranslation } from "react-i18next"
+import Button from "../../fundamentals/button"
+import PlusIcon from "../../fundamentals/icons/plus-icon"
+import TrashIcon from "../../fundamentals/icons/trash-icon"
+import InputField from "../../molecules/input"
+
+type AddMetadataProps = {
+  metadata: MetadataField[]
+  setMetadata: (metadata: MetadataField[]) => void
+  heading?: string
+}
+
+export type MetadataField = {
+  key: string
+  value: string
+}
+
+const Metadata: React.FC<AddMetadataProps> = ({
+  metadata,
+  setMetadata,
+  heading = "Metadata",
+}) => {
+  const { t } = useTranslation()
+  const [localData, setLocalData] = useState<MetadataField[]>([])
+
+  useEffect(() => {
+    setLocalData(metadata)
+  }, [metadata])
+
+  const addKeyPair = () => {
+    setMetadata([...metadata, { key: ``, value: `` }])
+  }
+
+  const onKeyChange = (index: number) => {
+    return (key: string) => {
+      const newFields = metadata
+      newFields[index] = { key: key, value: newFields[index].value }
+      setMetadata(newFields)
+    }
+  }
+
+  const onValueChange = (index: number) => {
+    return (value: any) => {
+      const newFields = metadata
+      newFields[index] = {
+        key: newFields[index].key,
+        value: value,
+      }
+      setMetadata(newFields)
+    }
+  }
+
+  const deleteKeyPair = (index: number) => {
+    return () => {
+      setMetadata(metadata.filter((_, i) => i !== index))
+    }
+  }
+
+  return (
+    <div>
+      <span className="inter-base-semibold">{heading}</span>
+      <div className="mt-base gap-y-base flex flex-col">
+        {localData.map((field, index) => {
+          return (
+            <DeletableElement key={index} onDelete={deleteKeyPair(index)}>
+              <Field
+                field={field}
+                updateKey={onKeyChange(index)}
+                updateValue={onValueChange(index)}
+              />
+            </DeletableElement>
+          )
+        })}
+        <div>
+          <Button
+            variant="secondary"
+            size="small"
+            type="button"
+            className="w-full"
+            onClick={addKeyPair}
+          >
+            <PlusIcon size={20} />
+            {t("metadata-add-metadata", "Add Metadata")}
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+type FieldProps = {
+  field: MetadataField
+  updateKey: (key: string) => void
+  updateValue: (value: string) => void
+}
+
+const Field: React.FC<FieldProps> = ({ field, updateKey, updateValue }) => {
+  return (
+    <div className="gap-x-xsmall flex w-full items-center">
+      <div className="maw-w-[200px]">
+        <InputField
+          label="Key"
+          placeholder="Some key"
+          defaultValue={field.key}
+          onChange={(e) => {
+            updateKey(e.currentTarget.value)
+          }}
+        />
+      </div>
+      <div className="flex-grow">
+        <InputField
+          label="Value"
+          placeholder="Some value"
+          defaultValue={field.value}
+          onChange={(e) => {
+            updateValue(e.currentTarget.value)
+          }}
+        />
+      </div>
+    </div>
+  )
+}
+
+type DeletableElementProps = {
+  onDelete: () => void
+  children?: React.ReactNode
+}
+
+const DeletableElement: React.FC<DeletableElementProps> = ({
+  onDelete,
+  children,
+}) => {
+  return (
+    <div className="gap-x-xlarge flex items-end">
+      <div className="flex-grow">{children}</div>
+      <Button
+        variant="ghost"
+        size="small"
+        className="text-grey-40 h-10 w-10"
+        type="button"
+        onClick={onDelete}
+      >
+        <TrashIcon size={20} />
+      </Button>
+    </div>
+  )
+}
+
+export default Metadata

package/.cache/admin/src/components/organisms/price-input/index.tsx

@@ -0,0 +1,64 @@
+import AmountField from "react-currency-input-field"
+
+import { CurrencyType } from "../../../utils/currencies"
+
+/**
+ * `PriceInput` interface
+ */
+export type PriceInputProps = {
+  amount?: string
+  currency: CurrencyType
+  onAmountChange: (amount?: string, floatAmount?: number | null) => void
+}
+
+/**
+ * A controlled input component that renders the formatted amount
+ * and the currency of the provided price.
+ */
+function PriceInput(props: PriceInputProps) {
+  const { amount, currency, onAmountChange } = props
+  const { code, symbol_native, decimal_digits } = currency
+
+  /** ******** COMPUTED **********/
+
+  const step = 10 ** -decimal_digits
+  const rightOffset = 24 + symbol_native.length * 4
+  const placeholder = `0.${"0".repeat(decimal_digits)}`
+
+  return (
+    <div className="relative w-[314px]">
+      <div className="absolute top-0 left-3 flex h-full items-center">
+        <span className="text-small text-grey-40 mt-[1px]">{code}</span>
+      </div>
+
+      <AmountField
+        step={step}
+        value={amount}
+        onValueChange={(value, _name, values) =>
+          onAmountChange(value, values?.float)
+        }
+        allowNegativeValue={false}
+        placeholder={placeholder}
+        decimalScale={decimal_digits}
+        style={{ paddingRight: rightOffset }}
+        className="focus:border-violet-6 border-grey-20
+            bg-grey-5 text-gray-90 text-small
+            h-[40px] w-full
+            rounded-lg border
+            border-solid
+            py-[10px]
+            pl-12
+            text-right
+            focus:bg-white"
+      />
+
+      <div className="absolute top-0 right-3 flex h-full items-center">
+        <span className="text-small text-grey-40 mt-[1px]">
+          {symbol_native}
+        </span>
+      </div>
+    </div>
+  )
+}
+
+export default PriceInput

package/.cache/admin/src/components/organisms/product-attributes-section/attribute-modal.tsx

@@ -0,0 +1,153 @@
+import { Product } from "@medusajs/medusa"
+import { useEffect } from "react"
+import { useForm } from "react-hook-form"
+import { useTranslation } from "react-i18next"
+import useEditProductActions from "../../../hooks/use-edit-product-actions"
+import { countries } from "../../../utils/countries"
+import { nestedForm } from "../../../utils/nested-form"
+import CustomsForm, { CustomsFormType } from "../../forms/product/customs-form"
+import DimensionsForm, {
+  DimensionsFormType,
+} from "../../forms/product/dimensions-form"
+import Button from "../../fundamentals/button"
+import Modal from "../../molecules/modal"
+
+type Props = {
+  product: Product
+  open: boolean
+  onClose: () => void
+}
+
+type AttributesForm = {
+  dimensions: DimensionsFormType
+  customs: CustomsFormType
+}
+
+const AttributeModal = ({ product, open, onClose }: Props) => {
+  const { t } = useTranslation()
+  const { onUpdate, updating } = useEditProductActions(product.id)
+  const form = useForm<AttributesForm>({
+    defaultValues: getDefaultValues(product),
+  })
+  const {
+    formState: { isDirty },
+    handleSubmit,
+    reset,
+  } = form
+
+  useEffect(() => {
+    reset(getDefaultValues(product))
+  }, [product])
+
+  const onReset = () => {
+    reset(getDefaultValues(product))
+    onClose()
+  }
+
+  const onSubmit = handleSubmit((data) => {
+    onUpdate(
+      {
+        // @ts-ignore
+        weight: data.dimensions.weight,
+        // @ts-ignore
+        width: data.dimensions.width,
+        // @ts-ignore
+        height: data.dimensions.height,
+        // @ts-ignore
+        length: data.dimensions.length,
+        // @ts-ignore
+        mid_code: data.customs.mid_code,
+        // @ts-ignore
+        hs_code: data.customs.hs_code,
+        origin_country: data.customs.origin_country?.value,
+      },
+      onReset
+    )
+  })
+
+  return (
+    <Modal open={open} handleClose={onReset} isLargeModal>
+      <Modal.Body>
+        <Modal.Header handleClose={onReset}>
+          <h1 className="inter-xlarge-semibold m-0">
+            {t("product-attributes-section-edit-attributes", "Edit Attributes")}
+          </h1>
+        </Modal.Header>
+        <form onSubmit={onSubmit}>
+          <Modal.Content>
+            <div className="mb-xlarge">
+              <h2 className="inter-large-semibold mb-2xsmall">
+                {t("product-attributes-section-dimensions", "Dimensions")}
+              </h2>
+              <p className="inter-base-regular text-grey-50 mb-large">
+                {t(
+                  "product-attributes-section-configure-to-calculate-the-most-accurate-shipping-rates",
+                  "Configure to calculate the most accurate shipping rates"
+                )}
+              </p>
+              <DimensionsForm form={nestedForm(form, "dimensions")} />
+            </div>
+            <div>
+              <h2 className="inter-large-semibold mb-2xsmall">
+                {t("product-attributes-section-customs", "Customs")}
+              </h2>
+              <p className="inter-base-regular text-grey-50 mb-large">
+                {t(
+                  "product-attributes-section-configure-to-calculate-the-most-accurate-shipping-rates",
+                  "Configure to calculate the most accurate shipping rates"
+                )}
+              </p>
+              <CustomsForm form={nestedForm(form, "customs")} />
+            </div>
+          </Modal.Content>
+          <Modal.Footer>
+            <div className="flex w-full justify-end gap-x-2">
+              <Button
+                size="small"
+                variant="secondary"
+                type="button"
+                onClick={onReset}
+              >
+                {t("product-attributes-section-cancel", "Cancel")}
+              </Button>
+              <Button
+                size="small"
+                variant="primary"
+                type="submit"
+                disabled={!isDirty}
+                loading={updating}
+              >
+                {t("product-attributes-section-save", "Save")}
+              </Button>
+            </div>
+          </Modal.Footer>
+        </form>
+      </Modal.Body>
+    </Modal>
+  )
+}
+
+const getDefaultValues = (product: Product): AttributesForm => {
+  const country = countries.find(
+    (country) => country.alpha2 === product.origin_country
+  )
+  const countryOption = country
+    ? { label: country.name, value: country.alpha2 }
+    : null
+
+  return {
+    dimensions: {
+      weight: product.weight,
+      width: product.width,
+      height: product.height,
+      length: product.length,
+    },
+    customs: {
+      mid_code: product.mid_code,
+      hs_code: product.hs_code,
+      origin_country: countryOption,
+    },
+  }
+}
+
+export default AttributeModal

package/.cache/admin/src/components/organisms/product-attributes-section/index.tsx

@@ -0,0 +1,98 @@
+import { Product } from "@medusajs/medusa"
+import { useTranslation } from "react-i18next"
+import useToggleState from "../../../hooks/use-toggle-state"
+import EditIcon from "../../fundamentals/icons/edit-icon"
+import { ActionType } from "../../molecules/actionables"
+import Section from "../section"
+import AttributeModal from "./attribute-modal"
+
+type Props = {
+  product: Product
+}
+
+const ProductAttributesSection = ({ product }: Props) => {
+  const { t } = useTranslation()
+  const { state, toggle, close } = useToggleState()
+
+  const actions: ActionType[] = [
+    {
+      label: "Edit Attributes",
+      onClick: toggle,
+      icon: <EditIcon size={20} />,
+    },
+  ]
+
+  return (
+    <>
+      <Section
+        title={t("product-attributes-section-title", "Attributes")}
+        actions={actions}
+        forceDropdown
+      >
+        <div className="gap-y-xsmall mb-large mt-base flex flex-col">
+          <h2 className="inter-base-semibold">
+            {t("product-attributes-section-dimensions", "Dimensions")}
+          </h2>
+          <div className="gap-y-xsmall flex flex-col">
+            <Attribute
+              attribute={t("product-attributes-section-height", "Height")}
+              value={product.height}
+            />
+            <Attribute
+              attribute={t("product-attributes-section-width", "Width")}
+              value={product.width}
+            />
+            <Attribute
+              attribute={t("product-attributes-section-length", "Length")}
+              value={product.length}
+            />
+            <Attribute
+              attribute={t("product-attributes-section-weight", "Weight")}
+              value={product.weight}
+            />
+          </div>
+        </div>
+        <div className="gap-y-xsmall flex flex-col">
+          <h2 className="inter-base-semibold">
+            {t("product-attributes-section-customs", "Customs")}
+          </h2>
+          <div className="gap-y-xsmall flex flex-col">
+            <Attribute
+              attribute={t("product-attributes-section-mid-code", "MID Code")}
+              value={product.mid_code}
+            />
+            <Attribute
+              attribute={t("product-attributes-section-hs-code", "HS Code")}
+              value={product.hs_code}
+            />
+            <Attribute
+              attribute={t(
+                "product-attributes-section-country-of-origin",
+                "Country of origin"
+              )}
+              value={product.origin_country}
+            />
+          </div>
+        </div>
+      </Section>
+
+      <AttributeModal onClose={close} open={state} product={product} />
+    </>
+  )
+}
+
+type AttributeProps = {
+  attribute: string
+  value: string | number | null
+}
+
+const Attribute = ({ attribute, value }: AttributeProps) => {
+  return (
+    <div className="inter-base-regular text-grey-50 flex w-full items-center justify-between">
+      <p>{attribute}</p>
+      <p>{value || "–"}</p>
+    </div>
+  )
+}
+
+export default ProductAttributesSection

package/.cache/admin/src/components/organisms/product-general-section/channels-modal.tsx

@@ -0,0 +1,54 @@
+import { Product, SalesChannel } from "@medusajs/medusa"
+import { useAdminUpdateProduct } from "medusa-react"
+import { useTranslation } from "react-i18next"
+import SalesChannelsModal from "../../forms/product/sales-channels-modal"
+import useNotification from "../../../hooks/use-notification"
+
+type Props = {
+  product: Product
+  open: boolean
+  onClose: () => void
+}
+
+const ChannelsModal = ({ product, open, onClose }: Props) => {
+  const notification = useNotification()
+  const { t } = useTranslation()
+
+  const { mutateAsync } = useAdminUpdateProduct(product.id)
+
+  const onUpdate = async (channels: SalesChannel[]) => {
+    try {
+      await mutateAsync({
+        sales_channels: channels.map((c) => ({ id: c.id })),
+      })
+      notification(
+        t("product-general-section-success", "Success"),
+        t(
+          "product-general-section-successfully-updated-sales-channels",
+          "Successfully updated sales channels"
+        ),
+        "success"
+      )
+    } catch (e) {
+      notification(
+        t("product-general-section-error", "Error"),
+        t(
+          "product-general-section-failed-to-update-sales-channels",
+          "Failed to update sales channels"
+        ),
+        "error"
+      )
+    }
+  }
+
+  return (
+    <SalesChannelsModal
+      onClose={onClose}
+      open={open}
+      source={product.sales_channels}
+      onSave={onUpdate}
+    />
+  )
+}
+
+export default ChannelsModal

package/.cache/admin/src/components/organisms/product-general-section/general-modal.tsx

@@ -0,0 +1,185 @@
+import { useTranslation } from "react-i18next"
+import DiscountableForm, {
+  DiscountableFormType,
+} from "../../forms/product/discountable-form"
+import GeneralForm, { GeneralFormType } from "../../forms/product/general-form"
+import OrganizeForm, {
+  OrganizeFormType,
+} from "../../forms/product/organize-form"
+
+import { Product } from "@medusajs/medusa"
+import { useEffect } from "react"
+import { useForm } from "react-hook-form"
+import useEditProductActions from "../../../hooks/use-edit-product-actions"
+import { nestedForm } from "../../../utils/nested-form"
+import MetadataForm, {
+  getMetadataFormValues,
+  getSubmittableMetadata,
+  MetadataFormType,
+} from "../../forms/general/metadata-form"
+import Button from "../../fundamentals/button"
+import Modal from "../../molecules/modal"
+
+type Props = {
+  product: Product
+  open: boolean
+  onClose: () => void
+}
+
+type GeneralFormWrapper = {
+  general: GeneralFormType
+  organize: OrganizeFormType
+  discountable: DiscountableFormType
+  metadata: MetadataFormType
+}
+
+const GeneralModal = ({ product, open, onClose }: Props) => {
+  const { t } = useTranslation()
+  const { onUpdate, updating } = useEditProductActions(product.id)
+  const form = useForm<GeneralFormWrapper>({
+    defaultValues: getDefaultValues(product),
+  })
+
+  const {
+    formState: { isDirty },
+    handleSubmit,
+    reset,
+  } = form
+
+  useEffect(() => {
+    reset(getDefaultValues(product))
+  }, [product, reset])
+
+  const onReset = () => {
+    reset(getDefaultValues(product))
+    onClose()
+  }
+
+  const onSubmit = handleSubmit((data) => {
+    onUpdate(
+      {
+        title: data.general.title,
+        handle: data.general.handle,
+        // @ts-ignore
+        material: data.general.material,
+        // @ts-ignore
+        subtitle: data.general.subtitle,
+        // @ts-ignore
+        description: data.general.description,
+        // @ts-ignore
+        type: data.organize.type
+          ? {
+              id: data.organize.type.value,
+              value: data.organize.type.label,
+            }
+          : null,
+        // @ts-ignore
+        collection_id: data.organize.collection
+          ? data.organize.collection.value
+          : null,
+        // @ts-ignore
+        tags: data.organize.tags
+          ? data.organize.tags.map((t) => ({ value: t }))
+          : null,
+
+        categories: data.organize?.categories?.length
+          ? data.organize.categories.map((id) => ({ id }))
+          : [],
+        discountable: data.discountable.value,
+        metadata: getSubmittableMetadata(data.metadata),
+      },
+      onReset
+    )
+  })
+
+  return (
+    <Modal open={open} handleClose={onReset} isLargeModal>
+      <Modal.Body>
+        <Modal.Header handleClose={onReset}>
+          <h1 className="inter-xlarge-semibold m-0">
+            {t(
+              "product-general-section-edit-general-information",
+              "Edit General Information"
+            )}
+          </h1>
+        </Modal.Header>
+        <form onSubmit={onSubmit}>
+          <Modal.Content>
+            <GeneralForm
+              form={nestedForm(form, "general")}
+              isGiftCard={product.is_giftcard}
+            />
+            <div className="my-xlarge">
+              <h2 className="inter-base-semibold mb-base">
+                Organize{" "}
+                {product.is_giftcard
+                  ? t("product-general-section-gift-card", "Gift Card")
+                  : t("product-general-section-product", "Product")}
+              </h2>
+              <OrganizeForm form={nestedForm(form, "organize")} />
+            </div>
+            <DiscountableForm
+              form={nestedForm(form, "discountable")}
+              isGiftCard={product.is_giftcard}
+            />
+            <div className="mt-xlarge">
+              <h2 className="inter-base-semibold mb-base">
+                {t("product-general-section-metadata", "Metadata")}
+              </h2>
+              <MetadataForm form={nestedForm(form, "metadata")} />
+            </div>
+          </Modal.Content>
+          <Modal.Footer>
+            <div className="flex w-full justify-end gap-x-2">
+              <Button
+                size="small"
+                variant="secondary"
+                type="button"
+                onClick={onReset}
+              >
+                {t("product-general-section-cancel", "Cancel")}
+              </Button>
+              <Button
+                size="small"
+                variant="primary"
+                type="submit"
+                disabled={!isDirty}
+                loading={updating}
+              >
+                {t("product-general-section-save", "Save")}
+              </Button>
+            </div>
+          </Modal.Footer>
+        </form>
+      </Modal.Body>
+    </Modal>
+  )
+}
+
+const getDefaultValues = (product: Product): GeneralFormWrapper => {
+  return {
+    general: {
+      title: product.title,
+      subtitle: product.subtitle,
+      material: product.material,
+      handle: product.handle!,
+      description: product.description || null,
+    },
+    organize: {
+      collection: product.collection
+        ? { label: product.collection.title, value: product.collection.id }
+        : null,
+      type: product.type
+        ? { label: product.type.value, value: product.type.id }
+        : null,
+      tags: product.tags ? product.tags.map((t) => t.value) : null,
+      categories: product.categories?.map((c) => c.id),
+    },
+    discountable: {
+      value: product.discountable,
+    },
+    metadata: getMetadataFormValues(product.metadata),
+  }
+}
+
+export default GeneralModal