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

package/.cache/admin/src/components/organisms/product-variant-tree/index.tsx

@@ -0,0 +1,89 @@
+import { Product, ProductVariant } from "@medusajs/medusa"
+import React from "react"
+import { useTranslation } from "react-i18next"
+import { ActionType } from "../../molecules/actionables"
+import { CollapsibleTree } from "../../molecules/collapsible-tree"
+
+type LeafProps = {
+  id: string
+  title: string
+  sku?: string
+  prices: {
+    id: string
+    currency_code: string
+    amount: number
+    price_list_id: string | null
+  }[]
+}
+
+type ProductVariantTreeProps = {
+  product: Pick<Product, "title" | "id" | "thumbnail"> & {
+    variants: LeafProps[]
+  }
+  getProductActions?: (product: Product) => ActionType[] | undefined
+  getVariantActions?: (variant: ProductVariant) => ActionType[] | undefined
+}
+
+const ProductVariantTree: React.FC<ProductVariantTreeProps> = ({
+  product,
+  getProductActions,
+  getVariantActions,
+}) => {
+  return (
+    <CollapsibleTree>
+      <CollapsibleTree.Parent
+        actions={getProductActions && getProductActions(product as Product)}
+      >
+        <div>
+          <img
+            src={product.thumbnail || undefined}
+            className="rounded-base h-5 w-4"
+          />
+        </div>
+        <span className="inter-small-semibold">{product.title}</span>
+      </CollapsibleTree.Parent>
+      <CollapsibleTree.Content>
+        {product.variants.map((variant) => (
+          <CollapsibleTree.Leaf
+            key={variant.id}
+            actions={
+              getVariantActions && getVariantActions(variant as ProductVariant)
+            }
+          >
+            <ProductVariantLeaf {...variant} />
+          </CollapsibleTree.Leaf>
+        ))}
+      </CollapsibleTree.Content>
+    </CollapsibleTree>
+  )
+}
+
+const ProductVariantLeaf = ({ sku, title, prices = [] }: LeafProps) => {
+  const { t } = useTranslation()
+  const filteredPrices = prices.filter((pr) => pr.price_list_id)
+  return (
+    <div className="flex flex-1">
+      <div className="truncate">
+        <span>{title}</span>
+        {sku && <span className="text-grey-50 ml-xsmall">(SKU: {sku})</span>}
+      </div>
+      <div className="text-grey-50 flex flex-1 items-center justify-end">
+        <div className="text-grey-50 mr-xsmall">
+          {filteredPrices.length ? (
+            <span>
+              {t("product-variant-tree-count", "{{count}}", {
+                count: filteredPrices.length,
+              })}
+            </span>
+          ) : (
+            <span className="inter-small-semibold text-orange-40">
+              {t("product-variant-tree-add-prices", "Add prices")}
+            </span>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default ProductVariantTree

package/.cache/admin/src/components/organisms/product-variants-section/add-variant-modal.tsx

@@ -0,0 +1,214 @@
+import { AdminPostProductsProductVariantsReq, Product } from "@medusajs/medusa"
+import { useEffect } from "react"
+import { useTranslation } from "react-i18next"
+import EditFlowVariantForm, {
+  EditFlowVariantFormType,
+} from "../../forms/product/variant-form/edit-flow-variant-form"
+import LayeredModal, {
+  useLayeredModal,
+} from "../../molecules/modal/layered-modal"
+
+import { useMedusa } from "medusa-react"
+import { useForm } from "react-hook-form"
+import useEditProductActions from "../../../hooks/use-edit-product-actions"
+import { getSubmittableMetadata } from "../../forms/general/metadata-form"
+import Button from "../../fundamentals/button"
+import Modal from "../../molecules/modal"
+
+type Props = {
+  onClose: () => void
+  open: boolean
+  product: Product
+}
+
+const AddVariantModal = ({ open, onClose, product }: Props) => {
+  const context = useLayeredModal()
+  const { t } = useTranslation()
+
+  const { client } = useMedusa()
+  const form = useForm<EditFlowVariantFormType>({
+    defaultValues: getDefaultValues(product),
+  })
+
+  const { onAddVariant, addingVariant } = useEditProductActions(product.id)
+
+  const { handleSubmit, reset } = form
+
+  useEffect(() => {
+    reset(getDefaultValues(product))
+  }, [product, reset])
+
+  const resetAndClose = () => {
+    reset(getDefaultValues(product))
+    onClose()
+  }
+
+  const createStockLocationsForVariant = async (
+    productRes: Product,
+    stock_locations: { stocked_quantity: number; location_id: string }[]
+  ) => {
+    const { variants } = productRes
+
+    const pvMap = new Map(product.variants.map((v) => [v.id, true]))
+    const addedVariant = variants.find((variant) => !pvMap.get(variant.id))
+
+    if (!addedVariant) {
+      return
+    }
+
+    const inventory = await client.admin.variants.getInventory(addedVariant.id)
+
+    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()
+    )
+  }
+
+  const onSubmit = handleSubmit((data) => {
+    const {
+      stock: { stock_location },
+    } = data
+    delete data.stock.stock_location
+
+    onAddVariant(createAddPayload(data), (productRes) => {
+      if (stock_location?.length) {
+        createStockLocationsForVariant(productRes, stock_location).then(() => {
+          resetAndClose()
+        })
+      } else {
+        resetAndClose()
+      }
+    })
+  })
+
+  return (
+    <LayeredModal context={context} open={open} handleClose={resetAndClose}>
+      <Modal.Body>
+        <Modal.Header handleClose={resetAndClose}>
+          <h1 className="inter-xlarge-semibold">
+            {t("product-variants-section-add-variant", "Add Variant")}
+          </h1>
+        </Modal.Header>
+        <form onSubmit={onSubmit}>
+          <Modal.Content>
+            <EditFlowVariantForm isEdit={false} form={form} />
+          </Modal.Content>
+          <Modal.Footer>
+            <div className="gap-x-xsmall flex w-full items-center justify-end">
+              <Button
+                variant="secondary"
+                size="small"
+                type="button"
+                onClick={resetAndClose}
+              >
+                {t("product-variants-section-cancel", "Cancel")}
+              </Button>
+              <Button
+                variant="primary"
+                size="small"
+                type="submit"
+                loading={addingVariant}
+              >
+                {t("product-variants-section-save-and-close", "Save and close")}
+              </Button>
+            </div>
+          </Modal.Footer>
+        </form>
+      </Modal.Body>
+    </LayeredModal>
+  )
+}
+
+const getDefaultValues = (product: Product): EditFlowVariantFormType => {
+  const options = product.options.map((option) => ({
+    title: option.title,
+    id: option.id,
+    value: "",
+  }))
+
+  return {
+    general: {
+      title: null,
+      material: null,
+    },
+    stock: {
+      sku: null,
+      ean: null,
+      upc: null,
+      barcode: null,
+      inventory_quantity: null,
+      manage_inventory: false,
+      allow_backorder: false,
+      stock_location: [],
+    },
+    options: options,
+    prices: {
+      prices: [],
+    },
+    dimensions: {
+      weight: null,
+      width: null,
+      height: null,
+      length: null,
+    },
+    customs: {
+      mid_code: null,
+      hs_code: null,
+      origin_country: null,
+    },
+    metadata: {
+      entries: [],
+      deleted: [],
+    },
+  }
+}
+
+export const createAddPayload = (
+  data: EditFlowVariantFormType
+): AdminPostProductsProductVariantsReq => {
+  const { general, stock, options, prices, dimensions, customs } = data
+
+  const priceArray = prices.prices
+    .filter((price) => typeof price.amount === "number")
+    .map((price) => {
+      return {
+        amount: price.amount,
+        currency_code: price.region_id ? undefined : price.currency_code,
+        region_id: price.region_id,
+      }
+    })
+
+  return {
+    // @ts-ignore
+    ...general,
+    ...customs,
+    ...stock,
+    inventory_quantity: stock.inventory_quantity || 0,
+    ...dimensions,
+    ...customs,
+    // @ts-ignore
+    origin_country: customs.origin_country
+      ? customs.origin_country.value
+      : null,
+    // @ts-ignore
+    prices: priceArray,
+    metadata: getSubmittableMetadata(data.metadata),
+    title: data.general.title || `${options?.map((o) => o.value).join(" / ")}`,
+    options: options.map((option) => ({
+      option_id: option.id,
+      value: option.value,
+    })),
+  }
+}
+
+export default AddVariantModal

package/.cache/admin/src/components/organisms/product-variants-section/edit-prices-modal/currency-cell.tsx

@@ -0,0 +1,243 @@
+import { ProductVariant } from "@medusajs/client-types"
+import clsx from "clsx"
+import React, { forwardRef, useEffect, useRef, useState } from "react"
+import AmountField from "react-currency-input-field"
+
+import { useAdminRegions } from "medusa-react"
+import { currencies as CURRENCY_MAP } from "../../../../utils/currencies"
+
+/**
+ * Return currency metadata or metadata of region's currency
+ */
+function useCurrencyMeta(
+  currencyCode: string | undefined,
+  regionId: string | undefined
+) {
+  const { regions } = useAdminRegions()
+  if (currencyCode) {
+    return CURRENCY_MAP[currencyCode?.toUpperCase()]
+  }
+
+  if (regions) {
+    const region = regions.find((r) => r.id === regionId)
+    return CURRENCY_MAP[region!.currency_code.toUpperCase()]
+  }
+}
+
+type CurrencyCellProps = {
+  currencyCode?: string
+  region?: string
+
+  variant: ProductVariant
+  editedAmount?: number
+  isSelected?: boolean
+  isAnchor?: boolean
+
+  isRangeStart: boolean
+  isRangeEnd: boolean
+  isInRange: boolean
+
+  isRangeStartCol: boolean
+  isRangeEndCol: boolean
+  isInRangeCol: boolean
+
+  onColumnOver: (currencyOrRegion: string) => void
+
+  onDragFillStart: (
+    variantId: string,
+    currencyCode?: string,
+    regionId?: string
+  ) => void
+
+  onMouseCellClick: (
+    event: React.MouseEvent,
+    variantId: string,
+    currencyCode?: string,
+    regionId?: string
+  ) => void
+
+  onInputChange: (
+    value: number | undefined,
+    variantId: string,
+    currencyCode?: string,
+    regionId?: string
+  ) => void
+}
+
+const currencyInput = forwardRef((props, ref) => <input ref={ref} {...props} />)
+const currencySpan = forwardRef((props, ref) => (
+  <span ref={ref} {...props}>
+    {props.value || props.placeholder}
+  </span>
+))
+
+/**
+ * Amount cell container.
+ */
+function CurrencyCell(props: CurrencyCellProps) {
+  const {
+    variant,
+    currencyCode,
+    region,
+    editedAmount,
+    isSelected,
+    isAnchor,
+    isInRange,
+    isRangeStart,
+    isRangeEnd,
+    onColumnOver,
+  } = props
+
+  const ref = useRef()
+
+  const [isEditable, setIsEditable] = useState(false)
+  const currencyMeta = useCurrencyMeta(currencyCode, region)
+
+  const [localValue, setLocalValue] = useState({
+    value: editedAmount,
+    float: editedAmount,
+  })
+
+  useEffect(() => {
+    setLocalValue({
+      // when amount changes with dragging, format received value
+      value: editedAmount?.toFixed(currencyMeta?.decimal_digits) || "",
+      float: editedAmount,
+    })
+  }, [editedAmount])
+
+  useEffect(() => {
+    if (!isSelected) {
+      setIsEditable(false)
+    }
+
+    /**
+     * Register key listener on selected anchor cell
+     */
+    if (isSelected && isAnchor) {
+      const onkeydown = (e) => {
+        if (document.activeElement?.tagName === "INPUT") {
+          return
+        }
+
+        if (!isNaN(Number(e.key))) {
+          setLocalValue({
+            float: Number(e.key),
+            value: String(e.key),
+          })
+          setIsEditable(true)
+        }
+      }
+
+      document.addEventListener("keydown", onkeydown)
+      return () => document.removeEventListener("keydown", onkeydown)
+    }
+  }, [isSelected, isAnchor, ref.current])
+
+  useEffect(() => {
+    // when cell becomes editable underlying `span` element is replaced with an `input` which needs to be focused
+    if (isEditable) {
+      /**
+       * HACK - for some reason focusing input will cause `react-currency-input-field` to double the digit that is set as value
+       * If we use set timout it will work as expected.
+       */
+      setTimeout(() => ref.current.focus())
+
+      const onEnter = (e: KeyboardEvent) => {
+        if (e.key === "Enter") {
+          ref.current.blur()
+        }
+      }
+
+      document.addEventListener("keypress", onEnter)
+      return () => document.removeEventListener("keypress", onEnter)
+    } else {
+      // Format value back after edit
+      setLocalValue({
+        value: localValue.float?.toFixed(currencyMeta?.decimal_digits) || "",
+        float: localValue.float,
+      })
+
+      // notify parent container about the change
+      props.onInputChange(localValue.float, variant.id, currencyCode, region)
+    }
+  }, [isEditable])
+
+  /* ==================== HANDLERS ==================== */
+
+  const onCellMouseDown: React.MouseEventHandler = (event) => {
+    if (!isEditable) {
+      event.stopPropagation()
+      event.preventDefault()
+    }
+
+    props.onMouseCellClick(event, variant.id, currencyCode, region)
+
+    if (event.detail === 2) {
+      // Unformat value for edit
+      setLocalValue({
+        float: localValue.float,
+        value: String(localValue.float || ""),
+      })
+      setIsEditable(true)
+    }
+  }
+
+  const onFillIndicatorMouseDown: React.MouseEventHandler = (event) => {
+    document.body.style.userSelect = "none"
+    event.stopPropagation()
+    props.onDragFillStart(variant.id, currencyCode, region)
+  }
+
+  const onInputBlurCapture = () => {
+    setIsEditable(false)
+  }
+
+  return (
+    <td
+      onMouseOver={() => onColumnOver(currencyCode || region)}
+      onMouseDown={onCellMouseDown}
+      className={clsx("relative h-10 cursor-pointer border pl-4 pr-2", {
+        "bg-blue-100": isSelected && !isAnchor,
+      })}
+      style={{
+        borderTop:
+          isRangeStart && props.isInRangeCol ? "1px double #3B82F6" : "",
+        borderBottom:
+          isRangeEnd && props.isInRangeCol ? "1px double #3B82F6" : "",
+        borderLeft:
+          props.isRangeStartCol && isInRange ? "1px double #3B82F6" : "",
+        borderRight:
+          props.isRangeEndCol && isInRange ? "1px double #3B82F6" : "",
+      }}
+    >
+      <div className="flex">
+        <span className="text-gray-400">{currencyMeta?.symbol_native}</span>
+        <AmountField
+          ref={ref}
+          onBlurCapture={onInputBlurCapture}
+          style={{ width: "100%", textAlign: "right", paddingRight: 8 }}
+          className={clsx("decoration-transparent focus:outline-0", {
+            "bg-blue-100": isSelected && !isAnchor,
+          })}
+          onValueChange={(_a, _b, v) => setLocalValue(v)}
+          allowDecimals={currencyMeta?.decimal_digits > 0}
+          decimalScale={isEditable ? undefined : currencyMeta?.decimal_digits}
+          customInput={isEditable ? currencyInput : currencySpan}
+          allowNegativeValue={false}
+          value={localValue.value}
+          placeholder="-"
+        />
+        {isRangeEnd && props.isRangeEndCol && !isEditable && (
+          <div
+            style={{ bottom: -4, right: -4, zIndex: 9999 }}
+            onMouseDown={onFillIndicatorMouseDown}
+            className="absolute h-2 w-2 cursor-ns-resize rounded-full bg-blue-400"
+          />
+        )}
+      </div>
+    </td>
+  )
+}
+
+export default CurrencyCell

package/.cache/admin/src/components/organisms/product-variants-section/edit-prices-modal/edit-prices-actions.tsx

@@ -0,0 +1,106 @@
+import { useMemo } from "react"
+
+import * as DropdownMenu from "@radix-ui/react-dropdown-menu"
+import { useAdminRegions, useAdminStore } from "medusa-react"
+
+import Button from "../../../fundamentals/button"
+import AdjustmentsIcon from "../../../fundamentals/icons/adjustments-icon"
+import CheckIcon from "../../../fundamentals/icons/check-icon"
+
+type EditPricesActionsProps = {
+  selectedCurrencies: string[]
+  selectedRegions: string[]
+  toggleCurrency: (currencyCode: string) => void
+  toggleRegion: (regionId: string) => void
+}
+
+/**
+ * Edit prices table header actions.
+ */
+function EditPricesActions(props: EditPricesActionsProps) {
+  const { selectedCurrencies, selectedRegions, toggleCurrency, toggleRegion } =
+    props
+
+  const { store } = useAdminStore()
+  const _currencies = store?.currencies
+  const { regions: _regions } = useAdminRegions({
+    limit: 1000,
+  })
+
+  const currencies = useMemo(() => {
+    return (_currencies || []).sort((c1, c2) => c1.code.localeCompare(c2.code))
+  }, [_currencies])
+
+  const regions = useMemo(() => {
+    return (_regions || []).sort((r1, r2) => r1.name.localeCompare(r2.name))
+  }, [_regions])
+
+  return (
+    <div
+      style={{ fontSize: 13 }}
+      className="border-ui-border-base flex items-center gap-2 border-b border-t px-4 py-[12px]"
+    >
+      <DropdownMenu.Root>
+        <DropdownMenu.Trigger asChild>
+          <Button variant="secondary" size="small" className="text-gray-700">
+            Currencies
+            <AdjustmentsIcon size={20} />
+          </Button>
+        </DropdownMenu.Trigger>
+
+        <DropdownMenu.Content
+          align="start"
+          sideOffset={10}
+          className="bg-grey-0 border-grey-20 rounded-rounded shadow-dropdown z-30 max-h-[500px] min-w-[272px] overflow-y-scroll border"
+        >
+          <DropdownMenu.Label className="text-small px-[12px] py-2 font-medium text-gray-400">
+            Currencies
+          </DropdownMenu.Label>
+          {currencies?.map((c) => (
+            <DropdownMenu.Item
+              key={c.code}
+              onClick={(event) => {
+                event.preventDefault()
+                toggleCurrency(c.code)
+              }}
+              className="mb-1 cursor-pointer last:mb-0 hover:bg-gray-100"
+            >
+              <div className="flex justify-between gap-4 px-[12px] py-2 text-gray-800">
+                {c.code.toUpperCase()}
+                <label className="flex  items-center justify-between gap-2  text-gray-400">
+                  <span className="max-w-[180px] truncate">{c.name}</span>
+                  {selectedCurrencies.includes(c.code) && (
+                    <CheckIcon className="text-gray-900" size={16} />
+                  )}
+                </label>
+              </div>
+            </DropdownMenu.Item>
+          ))}
+
+          <DropdownMenu.Label className="text-small border-t border-gray-200 px-[12px] py-2 font-medium text-gray-400">
+            Regions
+          </DropdownMenu.Label>
+          {regions?.map((r) => (
+            <DropdownMenu.Item
+              onClick={(event) => {
+                event.preventDefault()
+                toggleRegion(r.id)
+              }}
+              className="mb-1 cursor-pointer last:mb-0 hover:bg-gray-100"
+              key={r.id}
+            >
+              <div className="flex justify-between gap-4 px-[12px] py-2 text-gray-800">
+                {r.name}
+                {selectedRegions.includes(r.id) && (
+                  <CheckIcon className="text-gray-900" size={16} />
+                )}
+              </div>
+            </DropdownMenu.Item>
+          ))}
+        </DropdownMenu.Content>
+      </DropdownMenu.Root>
+    </div>
+  )
+}
+
+export default EditPricesActions