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

package/.cache/admin/src/domain/products/new/add-sales-channels.tsx

@@ -0,0 +1,123 @@
+import { SalesChannel } from "@medusajs/medusa"
+import clsx from "clsx"
+import { useAdminStore } from "medusa-react"
+import { useEffect, useState } from "react"
+import { useFieldArray } from "react-hook-form"
+import Switch from "../../../components/atoms/switch"
+import SalesChannelsModal from "../../../components/forms/product/sales-channels-modal"
+import Button from "../../../components/fundamentals/button"
+import ChannelsIcon from "../../../components/fundamentals/icons/channels-icon"
+import SalesChannelsDisplay from "../../../components/molecules/sales-channels-display"
+import useToggleState from "../../../hooks/use-toggle-state"
+import { NestedForm } from "../../../utils/nested-form"
+import { useTranslation } from "react-i18next"
+
+export type AddSalesChannelsFormType = {
+  channels: SalesChannel[]
+}
+
+type Props = {
+  form: NestedForm<AddSalesChannelsFormType>
+}
+
+const AddSalesChannelsForm = ({ form }: Props) => {
+  const { control, path } = form
+  const [removedDefaultSalesChannel, setRemovedDefaultSalesChannel] =
+    useState(false)
+
+  const { fields, replace, append } = useFieldArray({
+    control,
+    name: path("channels"),
+    keyName: "fieldId",
+  })
+  const { t } = useTranslation()
+
+  const { state: isEnabled, toggle: toggleEnabled } = useToggleState()
+  const {
+    state: open,
+    toggle: toggleModal,
+    close: closeModal,
+  } = useToggleState()
+  const { store } = useAdminStore()
+
+  const onAddChannels = (channels: SalesChannel[]) => {
+    if (store?.default_sales_channel) {
+      if (!channels.find(({ id }) => id === store.default_sales_channel.id)) {
+        setRemovedDefaultSalesChannel(true)
+      }
+    }
+
+    replace(channels)
+  }
+
+  useEffect(() => {
+    if (store?.default_sales_channel && fields) {
+      const alreadyAdded = fields.find(
+        ({ id }) => id === store.default_sales_channel.id
+      )
+
+      if (!alreadyAdded && !removedDefaultSalesChannel) {
+        append(store.default_sales_channel)
+      }
+
+      /**
+       * In case the default sales channel is added more than once, we remove the duplicates.
+       */
+      const duplicates = fields.filter(
+        (channel, index) =>
+          fields.findIndex((c) => c.id === channel.id) !== index
+      )
+
+      if (duplicates.length > 0) {
+        replace(fields.filter((channel) => !duplicates.includes(channel)))
+      }
+    }
+  }, [store, append, fields, replace, removedDefaultSalesChannel])
+
+  return (
+    <>
+      <div>
+        <div>
+          <div className="flex items-center justify-between">
+            <h2 className="inter-base-semibold">
+              {t("new-sales-channels", "Sales channels")}
+            </h2>
+            <Switch checked={isEnabled} onCheckedChange={toggleEnabled} />
+          </div>
+          <p className="inter-base-regular text-grey-50 mt-2xsmall">
+            {t(
+              "new-this-product-will-only-be-available-in-the-default-sales-channel-if-left-untouched",
+              "This product will only be available in the default sales channel if left untouched."
+            )}
+          </p>
+        </div>
+        <div
+          className={clsx({
+            hidden: !isEnabled,
+          })}
+        >
+          <div className="mt-base">
+            <SalesChannelsDisplay channels={fields} />
+          </div>
+          <Button
+            variant="secondary"
+            className="mt-large h-[40px] w-full"
+            type="button"
+            onClick={toggleModal}
+          >
+            <ChannelsIcon size={20} />
+            <span>{t("new-change-availablity", "Change availablity")}</span>
+          </Button>
+        </div>
+      </div>
+      <SalesChannelsModal
+        source={fields}
+        open={open}
+        onClose={closeModal}
+        onSave={onAddChannels}
+      />
+    </>
+  )
+}
+
+export default AddSalesChannelsForm

package/.cache/admin/src/domain/products/new/add-variants/index.tsx

@@ -0,0 +1,508 @@
+import clsx from "clsx"
+import { useCallback, useContext, useEffect, useMemo } from "react"
+import { Controller, useFieldArray, useForm, useWatch } from "react-hook-form"
+import { v4 as uuidv4 } from "uuid"
+import { useTranslation } from "react-i18next"
+import { CustomsFormType } from "../../../../components/forms/product/customs-form"
+import { DimensionsFormType } from "../../../../components/forms/product/dimensions-form"
+import CreateFlowVariantForm, {
+  CreateFlowVariantFormType,
+} from "../../../../components/forms/product/variant-form/create-flow-variant-form"
+import { VariantOptionType } from "../../../../components/forms/product/variant-form/variant-select-options-form"
+import useCheckOptions from "../../../../components/forms/product/variant-form/variant-select-options-form/hooks"
+import Button from "../../../../components/fundamentals/button"
+import PlusIcon from "../../../../components/fundamentals/icons/plus-icon"
+import TrashIcon from "../../../../components/fundamentals/icons/trash-icon"
+import IconTooltip from "../../../../components/molecules/icon-tooltip"
+import InputField from "../../../../components/molecules/input"
+import Modal from "../../../../components/molecules/modal"
+import LayeredModal, {
+  LayeredModalContext,
+} from "../../../../components/molecules/modal/layered-modal"
+import TagInput from "../../../../components/molecules/tag-input"
+import { useDebounce } from "../../../../hooks/use-debounce"
+import useToggleState from "../../../../hooks/use-toggle-state"
+import { NestedForm } from "../../../../utils/nested-form"
+import NewVariant from "./new-variant"
+
+type ProductOptionType = {
+  id: string
+  title: string
+  values: string[]
+}
+
+export type AddVariantsFormType = {
+  options: ProductOptionType[]
+  entries: CreateFlowVariantFormType[]
+}
+
+type Props = {
+  form: NestedForm<AddVariantsFormType>
+  productCustoms: CustomsFormType
+  productDimensions: DimensionsFormType
+}
+
+const AddVariantsForm = ({
+  form,
+  productCustoms,
+  productDimensions,
+}: Props) => {
+  const { t } = useTranslation()
+  const layeredModalContext = useContext(LayeredModalContext)
+  const { control, path, register } = form
+
+  const { checkForDuplicate, getOptions } = useCheckOptions(form)
+
+  const {
+    fields: options,
+    append: appendOption,
+    remove: removeOption,
+    update: updateOption,
+  } = useFieldArray({
+    control,
+    name: path("options"),
+    keyName: "fieldId",
+    shouldUnregister: true,
+  })
+
+  const {
+    fields: variants,
+    append: appendVariant,
+    remove: removeVariant,
+    update: updateVariant,
+    move: moveVariant,
+  } = useFieldArray({
+    control,
+    name: path("entries"),
+    shouldUnregister: true,
+  })
+
+  const watchedOptions = useWatch({
+    control,
+    name: path("options"),
+  })
+
+  const watchedEntries = useWatch({
+    control,
+    name: path("entries"),
+  })
+
+  const debouncedOptions = useDebounce(watchedOptions, 500)
+
+  useEffect(() => {
+    if (debouncedOptions?.length) {
+      const optionMap = debouncedOptions.reduce((acc, option) => {
+        acc[option.id] = option
+        return acc
+      }, {} as Record<string, ProductOptionType>)
+
+      const indexedVars = watchedEntries?.map((variant, index) => ({
+        variant,
+        index,
+      }))
+
+      if (indexedVars) {
+        indexedVars.forEach((indexedVar) => {
+          const { variant, index } = indexedVar
+
+          const options = variant.options
+          const validOptions: VariantOptionType[] = []
+
+          options.forEach((option) => {
+            const { option_id } = option
+            const optionData = optionMap[option_id]
+
+            if (optionData) {
+              option.title = optionData.title
+
+              if (
+                !option.option?.value ||
+                !optionData.values.includes(option.option.value)
+              ) {
+                option.option = null
+              }
+
+              validOptions.push(option)
+            }
+          })
+
+          const validIds = validOptions.map((option) => option.option_id)
+          const missingIds = Object.keys(optionMap).filter(
+            (id) => !validIds.includes(id)
+          )
+
+          missingIds.forEach((id) => {
+            const optionData = optionMap[id]
+            validOptions.push({
+              option_id: id,
+              title: optionData.title,
+              option: null,
+            })
+          })
+
+          updateVariant(index, {
+            ...variant,
+            options: validOptions.map((va) => {
+              return {
+                id: uuidv4(),
+                option_id: va.option_id,
+                title: va.title,
+                value: va,
+                option: va.option,
+              }
+            }),
+          })
+        })
+      }
+    }
+  }, [debouncedOptions])
+
+  const onDeleteProductOption = (index: number) => {
+    const option = watchedOptions[index]
+
+    removeOption(index)
+
+    if (!option) {
+      return
+    }
+
+    watchedEntries?.forEach((variant, index) => {
+      const options = variant.options
+
+      const validOptions = options.filter((vo) => vo.option_id !== option.id)
+
+      updateVariant(index, {
+        ...variant,
+        options: validOptions,
+      })
+    })
+  }
+
+  const onUpdateVariant = (index: number, data: CreateFlowVariantFormType) => {
+    const toCheck = {
+      id: data._internal_id!,
+      options: data.options.map((vo) => vo.option!),
+    } // We can be sure that the value is set as this point.
+    const exists = checkForDuplicate(toCheck)
+
+    if (exists) {
+      return false
+    }
+
+    updateVariant(index, data)
+    return true
+  }
+
+  const enableVariants = useMemo(() => {
+    return watchedOptions?.length > 0
+      ? watchedOptions.some((wo) => wo.values.length > 0)
+      : false
+  }, [watchedOptions])
+
+  const appendNewOption = () => {
+    appendOption({
+      id: uuidv4(),
+      title: "",
+      values: [],
+    })
+  }
+
+  const newVariantForm = useForm<CreateFlowVariantFormType>()
+  const { reset, handleSubmit: submitVariant } = newVariantForm
+  const { state, toggle } = useToggleState()
+
+  const onToggleForm = () => {
+    reset(createEmptyVariant(watchedOptions))
+    toggle()
+  }
+
+  const onAppendVariant = submitVariant((data) => {
+    const toCheck = {
+      id: data._internal_id!,
+      options: data.options.map((da) => da.option).filter((o) => !!o),
+    }
+    const exists = checkForDuplicate(toCheck)
+
+    if (exists) {
+      newVariantForm.setError("options", {
+        type: "deps",
+        message: t(
+          "add-variants-a-variant-with-these-options-already-exists",
+          "A variant with these options already exists."
+        ),
+      })
+      return
+    }
+
+    appendVariant({
+      ...data,
+      options: data.options,
+      general: {
+        ...data.general,
+        title: data.general.title
+          ? data.general.title
+          : data.options.map((vo) => vo.option?.value).join(" / "),
+      },
+    })
+    onToggleForm()
+  })
+
+  const moveCard = useCallback((dragIndex: number, hoverIndex: number) => {
+    moveVariant(dragIndex, hoverIndex)
+  }, [])
+
+  const onAddNewProductOptionValue = (optionId: string, value: string) => {
+    const option = watchedOptions?.find((wo) => wo.id === optionId)
+
+    if (!option) {
+      return
+    }
+
+    const index = watchedOptions?.findIndex((wo) => wo.id === optionId)
+
+    updateOption(index, { ...option, values: [...option.values, value] })
+  }
+
+  return (
+    <>
+      <div>
+        <div className="gap-x-2xsmall flex items-center">
+          <h3 className="inter-base-semibold">
+            {t("add-variants-product-options", "Product options")}
+          </h3>
+          <IconTooltip
+            type="info"
+            content={t(
+              "add-variants-options-are-used-to-define-the-color-size-etc-of-the-product",
+              "Options are used to define the color, size, etc. of the product."
+            )}
+          />
+        </div>
+        <div>
+          {options.length > 0 && (
+            <div className="mt-small">
+              <div className="inter-small-semibold mb-small gap-x-xsmall text-grey-50 grid grid-cols-[230px_1fr_40px]">
+                <span>{t("add-variants-option-title", "Option title")}</span>
+                <span>
+                  {t(
+                    "add-variants-variations-comma-separated",
+                    "Variations (comma separated)"
+                  )}
+                </span>
+              </div>
+              <div className="gap-y-xsmall grid grid-cols-1">
+                {options.map((field, index) => {
+                  return (
+                    <div
+                      key={field.fieldId}
+                      className="gap-x-xsmall grid grid-cols-[230px_1fr_40px]"
+                    >
+                      <InputField
+                        placeholder={t("add-variants-color", "Color...")}
+                        {...register(path(`options.${index}.title`))}
+                      />
+                      <Controller
+                        control={control}
+                        name={path(`options.${index}.values`)}
+                        render={({ field: { value, onChange } }) => {
+                          return (
+                            <TagInput
+                              onValidate={(newVal) => {
+                                if (value.includes(newVal)) {
+                                  return null
+                                }
+
+                                return newVal
+                              }}
+                              invalidMessage={t(
+                                "add-variants-already-exists",
+                                "already exists"
+                              )}
+                              showLabel={false}
+                              values={value}
+                              onChange={onChange}
+                              placeholder={t(
+                                "add-variants-blue-red-black",
+                                "Blue, Red, Black..."
+                              )}
+                            />
+                          )
+                        }}
+                      />
+                      <Button
+                        variant="secondary"
+                        size="small"
+                        type="button"
+                        className="h-10"
+                        onClick={() => onDeleteProductOption(index)}
+                      >
+                        <TrashIcon size={20} className="text-grey-40" />
+                      </Button>
+                    </div>
+                  )
+                })}
+              </div>
+            </div>
+          )}
+          <Button
+            variant="secondary"
+            size="small"
+            className="mt-base h-10 w-full"
+            type="button"
+            onClick={appendNewOption}
+          >
+            <PlusIcon size={20} />
+            <span>{t("add-variants-add-an-option", "Add an option")}</span>
+          </Button>
+          <div className="mt-xlarge">
+            <div className="gap-x-2xsmall flex items-center">
+              <h3
+                className={clsx("inter-base-semibold", {
+                  "opacity-50": !options.length,
+                })}
+              >
+                {t("add-variants-product-variants", "Product variants")}{" "}
+                <span className="inter-base-regular text-grey-50">
+                  ({variants?.length || 0})
+                </span>
+              </h3>
+              {!enableVariants && (
+                <IconTooltip
+                  type="info"
+                  content={t(
+                    "add-variants-you-must-add-at-least-one-product-option-before-you-can-begin-adding-product-variants",
+                    "You must add at least one product option before you can begin adding product variants."
+                  )}
+                />
+              )}
+            </div>
+            {variants?.length > 0 && (
+              <div className="mt-small">
+                <div className="inter-small-semibold pr-base text-grey-50 grid grid-cols-[1fr_90px_100px_48px]">
+                  <p>{t("add-variants-variant", "Variant")}</p>
+                  <div className="mr-xlarge flex justify-end">
+                    <p>{t("add-variants-inventory", "Inventory")}</p>
+                  </div>
+                </div>
+                <div>
+                  {variants?.map((variant, index) => {
+                    return (
+                      <NewVariant
+                        key={variant.id}
+                        id={variant.id}
+                        source={variant}
+                        index={index}
+                        save={onUpdateVariant}
+                        remove={removeVariant}
+                        move={moveCard}
+                        options={getOptions()}
+                        onCreateOption={onAddNewProductOptionValue}
+                        productDimensions={productDimensions}
+                        productCustoms={productCustoms}
+                      />
+                    )
+                  })}
+                </div>
+              </div>
+            )}
+            <Button
+              variant="secondary"
+              size="small"
+              className="mt-base h-10 w-full"
+              type="button"
+              disabled={!enableVariants}
+              onClick={onToggleForm}
+            >
+              <PlusIcon size={20} />
+              <span>{t("add-variants-add-a-variant", "Add a variant")}</span>
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      <LayeredModal
+        context={layeredModalContext}
+        open={state}
+        handleClose={onToggleForm}
+      >
+        <Modal.Body>
+          <Modal.Header handleClose={onToggleForm}>
+            <h1 className="inter-xlarge-semibold">
+              {t("add-variants-create-variant", "Create Variant")}
+            </h1>
+          </Modal.Header>
+          <Modal.Content>
+            <CreateFlowVariantForm
+              form={newVariantForm}
+              options={getOptions()}
+              onCreateOption={onAddNewProductOptionValue}
+            />
+          </Modal.Content>
+          <Modal.Footer>
+            <div className="gap-x-xsmall flex w-full items-center justify-end">
+              <Button
+                variant="secondary"
+                size="small"
+                type="button"
+                onClick={onToggleForm}
+              >
+                {t("add-variants-cancel", "Cancel")}
+              </Button>
+              <Button
+                variant="primary"
+                size="small"
+                type="button"
+                onClick={onAppendVariant}
+              >
+                {t("add-variants-save-and-close", "Save and close")}
+              </Button>
+            </div>
+          </Modal.Footer>
+        </Modal.Body>
+      </LayeredModal>
+    </>
+  )
+}
+
+const createEmptyVariant = (
+  options: ProductOptionType[]
+): CreateFlowVariantFormType => {
+  return {
+    _internal_id: uuidv4(),
+    general: {
+      title: null,
+      material: null,
+    },
+    prices: {
+      prices: [],
+    },
+    stock: {
+      manage_inventory: true,
+      allow_backorder: false,
+      sku: null,
+      barcode: null,
+      ean: null,
+      upc: null,
+      inventory_quantity: null,
+    },
+    dimensions: {
+      weight: null,
+      length: null,
+      width: null,
+      height: null,
+    },
+    customs: {
+      hs_code: null,
+      mid_code: null,
+      origin_country: null,
+    },
+    options:
+      options?.map((option) => ({
+        title: option.title,
+        option_id: option.id,
+        option: null,
+      })) || [],
+  }
+}
+
+export default AddVariantsForm