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

package/.cache/admin/src/domain/products/new/index.tsx

@@ -0,0 +1,518 @@
+import { AdminPostProductsReq, ProductVariant } from "@medusajs/medusa"
+import { useAdminCreateProduct, useMedusa } from "medusa-react"
+import { useForm, useWatch } from "react-hook-form"
+import CustomsForm, {
+  CustomsFormType,
+} from "../../../components/forms/product/customs-form"
+import DimensionsForm, {
+  DimensionsFormType,
+} from "../../../components/forms/product/dimensions-form"
+import DiscountableForm, {
+  DiscountableFormType,
+} from "../../../components/forms/product/discountable-form"
+import GeneralForm, {
+  GeneralFormType,
+} from "../../../components/forms/product/general-form"
+import MediaForm, {
+  MediaFormType,
+} from "../../../components/forms/product/media-form"
+import OrganizeForm, {
+  OrganizeFormType,
+} from "../../../components/forms/product/organize-form"
+import ThumbnailForm, {
+  ThumbnailFormType,
+} from "../../../components/forms/product/thumbnail-form"
+import { FormImage, ProductStatus } from "../../../types/shared"
+import AddSalesChannelsForm, {
+  AddSalesChannelsFormType,
+} from "./add-sales-channels"
+import AddVariantsForm, { AddVariantsFormType } from "./add-variants"
+
+import { useEffect } from "react"
+import { useNavigate } from "react-router-dom"
+import { useTranslation } from "react-i18next"
+import { PricesFormType } from "../../../components/forms/general/prices-form"
+import Button from "../../../components/fundamentals/button"
+import FeatureToggle from "../../../components/fundamentals/feature-toggle"
+import CrossIcon from "../../../components/fundamentals/icons/cross-icon"
+import FocusModal from "../../../components/molecules/modal/focus-modal"
+import Accordion from "../../../components/organisms/accordion"
+import useNotification from "../../../hooks/use-notification"
+import { useFeatureFlag } from "../../../providers/feature-flag-provider"
+import { getErrorMessage } from "../../../utils/error-messages"
+import { prepareImages } from "../../../utils/images"
+import { nestedForm } from "../../../utils/nested-form"
+
+type NewProductForm = {
+  general: GeneralFormType
+  discounted: DiscountableFormType
+  organize: OrganizeFormType
+  variants: AddVariantsFormType
+  customs: CustomsFormType
+  dimensions: DimensionsFormType
+  thumbnail: ThumbnailFormType
+  media: MediaFormType
+  salesChannels: AddSalesChannelsFormType
+}
+
+type Props = {
+  onClose: () => void
+}
+
+const NewProduct = ({ onClose }: Props) => {
+  const { t } = useTranslation()
+  const form = useForm<NewProductForm>({
+    defaultValues: createBlank(),
+  })
+  const { mutate } = useAdminCreateProduct()
+  const navigate = useNavigate()
+  const notification = useNotification()
+
+  const watchedCustoms = useWatch({
+    control: form.control,
+    name: "customs",
+  })
+
+  const watchedDimensions = useWatch({
+    control: form.control,
+    name: "dimensions",
+  })
+
+  const {
+    handleSubmit,
+    formState: { isDirty },
+    reset,
+  } = form
+
+  const closeAndReset = () => {
+    reset(createBlank())
+    onClose()
+  }
+
+  useEffect(() => {
+    reset(createBlank())
+  }, [])
+
+  const { isFeatureEnabled } = useFeatureFlag()
+
+  const onSubmit = (publish = true) =>
+    handleSubmit(async (data) => {
+      const optionsToStockLocationsMap = new Map(
+        data.variants.entries.map((variant) => {
+          return [
+            variant.options
+              .map(({ option }) => option?.value || "")
+              .sort()
+              .join(","),
+            variant.stock.stock_location,
+          ]
+        })
+      )
+
+      const payload = createPayload(
+        data,
+        publish,
+        isFeatureEnabled("sales_channels")
+      )
+
+      if (data.media?.images?.length) {
+        let preppedImages: FormImage[] = []
+
+        try {
+          preppedImages = await prepareImages(data.media.images)
+        } catch (error) {
+          let errorMessage = t(
+            "new-something-went-wrong-while-trying-to-upload-images",
+            "Something went wrong while trying to upload images."
+          )
+          const response = (error as any).response as Response
+
+          if (response.status === 500) {
+            errorMessage =
+              errorMessage +
+              " " +
+              t(
+                "new-no-file-service-configured",
+                "You might not have a file service configured. Please contact your administrator"
+              )
+          }
+
+          notification(t("new-error", "Error"), errorMessage, "error")
+          return
+        }
+        const urls = preppedImages.map((image) => image.url)
+
+        payload.images = urls
+      }
+
+      if (data.thumbnail?.images?.length) {
+        let preppedImages: FormImage[] = []
+
+        try {
+          preppedImages = await prepareImages(data.thumbnail.images)
+        } catch (error) {
+          let errorMessage = t(
+            "new-upload-thumbnail-error",
+            "Something went wrong while trying to upload the thumbnail."
+          )
+          const response = (error as any).response as Response
+
+          if (response.status === 500) {
+            errorMessage =
+              errorMessage +
+              " " +
+              t(
+                "new-no-file-service-configured",
+                "You might not have a file service configured. Please contact your administrator"
+              )
+          }
+
+          notification(t("new-error", "Error"), errorMessage, "error")
+          return
+        }
+        const urls = preppedImages.map((image) => image.url)
+
+        payload.thumbnail = urls[0]
+      }
+
+      mutate(payload, {
+        onSuccess: ({ product }) => {
+          createStockLocationsForVariants(
+            product.variants,
+            optionsToStockLocationsMap
+          ).then(() => {
+            closeAndReset()
+            navigate(`/a/products/${product.id}`)
+          })
+        },
+        onError: (err) => {
+          notification(t("new-error", "Error"), getErrorMessage(err), "error")
+        },
+      })
+    })
+
+  const { client } = useMedusa()
+
+  const createStockLocationsForVariants = async (
+    variants: ProductVariant[],
+    stockLocationsMap: Map<
+      string,
+      { stocked_quantity: number; location_id: string }[] | undefined
+    >
+  ) => {
+    await Promise.all(
+      variants
+        .map(async (variant) => {
+          const optionsKey = variant.options
+            .map((option) => option?.value || "")
+            .sort()
+            .join(",")
+
+          const stock_locations = stockLocationsMap.get(optionsKey)
+          if (!stock_locations?.length) {
+            return
+          }
+
+          const inventory = await client.admin.variants.getInventory(variant.id)
+
+          return await Promise.all(
+            inventory.variant.inventory
+              .map(async (item) => {
+                return Promise.all(
+                  stock_locations.map(async (stock_location) => {
+                    client.admin.inventoryItems.createLocationLevel(item.id!, {
+                      location_id: stock_location.location_id,
+                      stocked_quantity: stock_location.stocked_quantity,
+                    })
+                  })
+                )
+              })
+              .flat()
+          )
+        })
+        .flat()
+    )
+  }
+
+  return (
+    <form className="w-full">
+      <FocusModal>
+        <FocusModal.Header>
+          <div className="medium:w-8/12 flex w-full justify-between px-8">
+            <Button
+              size="small"
+              variant="ghost"
+              type="button"
+              onClick={closeAndReset}
+            >
+              <CrossIcon size={20} />
+            </Button>
+            <div className="gap-x-small flex">
+              <Button
+                size="small"
+                variant="secondary"
+                type="button"
+                disabled={!isDirty}
+                onClick={onSubmit(false)}
+              >
+                {t("new-save-as-draft", "Save as draft")}
+              </Button>
+              <Button
+                size="small"
+                variant="primary"
+                type="button"
+                disabled={!isDirty}
+                onClick={onSubmit(true)}
+              >
+                {t("new-publish-product", "Publish product")}
+              </Button>
+            </div>
+          </div>
+        </FocusModal.Header>
+        <FocusModal.Main className="no-scrollbar flex w-full justify-center py-16">
+          <div className="small:w-4/5 medium:w-7/12 large:w-6/12 max-w-[700px]">
+            <Accordion defaultValue={["general"]} type="multiple">
+              <Accordion.Item
+                value={"general"}
+                title={t(
+                  "new-general-information-title",
+                  "General information"
+                )}
+                required
+              >
+                <p className="inter-base-regular text-grey-50">
+                  {t(
+                    "new-to-start-selling-all-you-need-is-a-name-and-a-price",
+                    "To start selling, all you need is a name and a price."
+                  )}
+                </p>
+                <div className="mt-xlarge gap-y-xlarge flex flex-col">
+                  <GeneralForm
+                    form={nestedForm(form, "general")}
+                    requireHandle={false}
+                  />
+                  <DiscountableForm form={nestedForm(form, "discounted")} />
+                </div>
+              </Accordion.Item>
+              <Accordion.Item title="Organize" value="organize">
+                <p className="inter-base-regular text-grey-50">
+                  {t(
+                    "new-to-start-selling-all-you-need-is-a-name-and-a-price",
+                    "To start selling, all you need is a name and a price."
+                  )}
+                </p>
+                <div className="mt-xlarge gap-y-xlarge pb-xsmall flex flex-col">
+                  <div>
+                    <h3 className="inter-base-semibold mb-base">
+                      {t("new-organize-product", "Organize Product")}
+                    </h3>
+                    <OrganizeForm form={nestedForm(form, "organize")} />
+                    <FeatureToggle featureFlag="sales_channels">
+                      <div className="mt-xlarge">
+                        <AddSalesChannelsForm
+                          form={nestedForm(form, "salesChannels")}
+                        />
+                      </div>
+                    </FeatureToggle>
+                  </div>
+                </div>
+              </Accordion.Item>
+              <Accordion.Item title="Variants" value="variants">
+                <p className="inter-base-regular text-grey-50">
+                  {t(
+                    "new-add-variations-of-this-product",
+                    "Add variations of this product."
+                  )}
+                  <br />
+                  {t(
+                    "new-offer-your-customers-different-options-for-color-format-size-shape-etc",
+                    "Offer your customers different options for color, format, size, shape, etc."
+                  )}
+                </p>
+                <div className="mt-large">
+                  <AddVariantsForm
+                    form={nestedForm(form, "variants")}
+                    productCustoms={watchedCustoms}
+                    productDimensions={watchedDimensions}
+                  />
+                </div>
+              </Accordion.Item>
+              <Accordion.Item title="Attributes" value="attributes">
+                <p className="inter-base-regular text-grey-50">
+                  {t(
+                    "new-used-for-shipping-and-customs-purposes",
+                    "Used for shipping and customs purposes."
+                  )}
+                </p>
+                <div className="my-xlarge">
+                  <h3 className="inter-base-semibold mb-base">
+                    {t("new-dimensions", "Dimensions")}
+                  </h3>
+                  <DimensionsForm form={nestedForm(form, "dimensions")} />
+                </div>
+                <div>
+                  <h3 className="inter-base-semibold mb-base">
+                    {t("new-customs", "Customs")}
+                  </h3>
+                  <CustomsForm form={nestedForm(form, "customs")} />
+                </div>
+              </Accordion.Item>
+              <Accordion.Item title="Thumbnail" value="thumbnail">
+                <p className="inter-base-regular mb-large text-grey-50">
+                  {t(
+                    "new-used-to-represent-your-product-during-checkout-social-sharing-and-more",
+                    "Used to represent your product during checkout, social sharing and more."
+                  )}
+                </p>
+                <ThumbnailForm form={nestedForm(form, "thumbnail")} />
+              </Accordion.Item>
+              <Accordion.Item title={t("new-media", "Media")} value="media">
+                <p className="inter-base-regular mb-large text-grey-50">
+                  {t(
+                    "new-add-images-to-your-product",
+                    "Add images to your product."
+                  )}
+                </p>
+                <MediaForm form={nestedForm(form, "media")} />
+              </Accordion.Item>
+            </Accordion>
+          </div>
+        </FocusModal.Main>
+      </FocusModal>
+    </form>
+  )
+}
+
+const createPayload = (
+  data: NewProductForm,
+  publish = true,
+  salesChannelsEnabled = false
+): AdminPostProductsReq => {
+  const payload: AdminPostProductsReq = {
+    title: data.general.title,
+    subtitle: data.general.subtitle || undefined,
+    material: data.general.material || undefined,
+    handle: data.general.handle,
+    discountable: data.discounted.value,
+    is_giftcard: false,
+    collection_id: data.organize.collection?.value,
+    description: data.general.description || undefined,
+    height: data.dimensions.height || undefined,
+    length: data.dimensions.length || undefined,
+    weight: data.dimensions.weight || undefined,
+    width: data.dimensions.width || undefined,
+    hs_code: data.customs.hs_code || undefined,
+    mid_code: data.customs.mid_code || undefined,
+    type: data.organize.type
+      ? {
+          value: data.organize.type.label,
+          id: data.organize.type.value,
+        }
+      : undefined,
+    tags: data.organize.tags
+      ? data.organize.tags.map((t) => ({
+          value: t,
+        }))
+      : undefined,
+    categories: data.organize.categories?.length
+      ? data.organize.categories.map((id) => ({ id }))
+      : undefined,
+    origin_country: data.customs.origin_country?.value || undefined,
+    options: data.variants.options.map((o) => ({
+      title: o.title,
+    })),
+    variants: data.variants.entries.map((v) => ({
+      title: v.general.title!,
+      material: v.general.material || undefined,
+      inventory_quantity: v.stock.inventory_quantity || 0,
+      prices: getVariantPrices(v.prices),
+      allow_backorder: v.stock.allow_backorder,
+      sku: v.stock.sku || undefined,
+      barcode: v.stock.barcode || undefined,
+      options: v.options.map((o) => ({
+        value: o.option?.value!,
+      })),
+      ean: v.stock.ean || undefined,
+      upc: v.stock.upc || undefined,
+      height: v.dimensions.height || undefined,
+      length: v.dimensions.length || undefined,
+      weight: v.dimensions.weight || undefined,
+      width: v.dimensions.width || undefined,
+      hs_code: v.customs.hs_code || undefined,
+      mid_code: v.customs.mid_code || undefined,
+      origin_country: v.customs.origin_country?.value || undefined,
+      manage_inventory: v.stock.manage_inventory,
+    })),
+    // @ts-ignore
+    status: publish ? ProductStatus.PUBLISHED : ProductStatus.DRAFT,
+  }
+
+  if (salesChannelsEnabled) {
+    payload.sales_channels = data.salesChannels.channels.map((c) => ({
+      id: c.id,
+    }))
+  }
+
+  return payload
+}
+
+const createBlank = (): NewProductForm => {
+  return {
+    general: {
+      title: "",
+      material: null,
+      subtitle: null,
+      description: null,
+      handle: "",
+    },
+    customs: {
+      hs_code: null,
+      mid_code: null,
+      origin_country: null,
+    },
+    dimensions: {
+      height: null,
+      length: null,
+      weight: null,
+      width: null,
+    },
+    discounted: {
+      value: true,
+    },
+    media: {
+      images: [],
+    },
+    organize: {
+      categories: null,
+      collection: null,
+      tags: null,
+      type: null,
+    },
+    salesChannels: {
+      channels: [],
+    },
+    thumbnail: {
+      images: [],
+    },
+    variants: {
+      entries: [],
+      options: [],
+    },
+  }
+}
+
+const getVariantPrices = (prices: PricesFormType) => {
+  const priceArray = prices.prices
+    .filter((price) => typeof price.amount === "number")
+    .map((price) => {
+      return {
+        amount: price.amount as number,
+        currency_code: price.region_id ? undefined : price.currency_code,
+        region_id: price.region_id || undefined,
+      }
+    })
+
+  return priceArray
+}
+
+export default NewProduct