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

package/.cache/admin/src/components/organisms/product-variants-section/table.tsx

@@ -0,0 +1,234 @@
+import { Column, useTable } from "react-table"
+
+import { ProductVariant } from "@medusajs/medusa"
+import { useMemo, useState } from "react"
+import { useTranslation } from "react-i18next"
+import { useFeatureFlag } from "../../../providers/feature-flag-provider"
+import BuildingsIcon from "../../fundamentals/icons/buildings-icon"
+import DuplicateIcon from "../../fundamentals/icons/duplicate-icon"
+import EditIcon from "../../fundamentals/icons/edit-icon"
+import TrashIcon from "../../fundamentals/icons/trash-icon"
+import Actionables from "../../molecules/actionables"
+import Table from "../../molecules/table"
+import DeletePrompt from "../delete-prompt"
+
+type Props = {
+  variants: ProductVariant[]
+  actions: {
+    deleteVariant: (variantId: string) => void
+    duplicateVariant: (variant: ProductVariant) => void
+    updateVariant: (variant: ProductVariant) => void
+    updateVariantInventory: (variant: ProductVariant) => void
+  }
+}
+
+export const useVariantsTableColumns = (inventoryIsEnabled = false) => {
+  const { t } = useTranslation()
+  const columns = useMemo<Column<ProductVariant>[]>(() => {
+    const quantityColumns = []
+    if (!inventoryIsEnabled) {
+      quantityColumns.push({
+        Header: () => {
+          return (
+            <div className="text-right">
+              <span>
+                {t("product-variants-section-inventory", "Inventory")}
+              </span>
+            </div>
+          )
+        },
+        id: "inventory",
+        accessor: "inventory_quantity",
+        maxWidth: 56,
+        Cell: ({ cell }) => {
+          return (
+            <div className="text-right">
+              <span>{cell.value}</span>
+            </div>
+          )
+        },
+      })
+    }
+    return [
+      {
+        Header: t("product-variants-section-title", "Title"),
+        id: "title",
+        accessor: "title",
+      },
+      {
+        Header: t("product-variants-section-sku", "SKU"),
+        id: "sku",
+        accessor: "sku",
+        maxWidth: 264,
+        Cell: ({ cell }) => {
+          return cell.value ? (
+            cell.value
+          ) : (
+            <span className="text-grey-50">-</span>
+          )
+        },
+      },
+      {
+        Header: t("product-variants-section-ean", "EAN"),
+        id: "ean",
+        accessor: "ean",
+        maxWidth: 264,
+        Cell: ({ cell }) => {
+          return cell.value ? (
+            cell.value
+          ) : (
+            <span className="text-grey-50">-</span>
+          )
+        },
+      },
+      ...quantityColumns,
+    ]
+  }, [inventoryIsEnabled])
+
+  return columns
+}
+
+const VariantsTable = ({ variants, actions }: Props) => {
+  const { t } = useTranslation()
+  const { isFeatureEnabled } = useFeatureFlag()
+  const hasInventoryService = isFeatureEnabled("inventoryService")
+  const columns = useVariantsTableColumns(hasInventoryService)
+  const [variantToRemove, setVariantToRemove] = useState<ProductVariant | null>(
+    null
+  )
+
+  const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } =
+    useTable({
+      columns,
+      data: variants,
+      defaultColumn: {
+        width: "auto",
+      },
+    })
+
+  const {
+    deleteVariant,
+    updateVariant,
+    duplicateVariant,
+    updateVariantInventory,
+  } = actions
+
+  const getTableRowActionables = (variant: ProductVariant) => {
+    const inventoryManagementActions = []
+    if (hasInventoryService) {
+      inventoryManagementActions.push({
+        label: t(
+          "product-variants-section-manage-inventory",
+          "Manage inventory"
+        ),
+        icon: <BuildingsIcon size="20" />,
+        onClick: () => updateVariantInventory(variant),
+      })
+    }
+    return [
+      {
+        label: t("product-variants-section-edit-variant", "Edit Variant"),
+        icon: <EditIcon size="20" />,
+        onClick: () => updateVariant(variant),
+      },
+      ...inventoryManagementActions,
+      {
+        label: t(
+          "product-variants-section-duplicate-variant",
+          "Duplicate Variant"
+        ),
+        onClick: () =>
+          // @ts-ignore
+          duplicateVariant({
+            ...variant,
+            title: variant.title + " Copy",
+          }),
+        icon: <DuplicateIcon size="20" />,
+      },
+      {
+        label: t(
+          "product-variants-section-delete-variant-label",
+          "Delete Variant"
+        ),
+        onClick: () => setVariantToRemove(variant),
+        icon: <TrashIcon size="20" />,
+        variant: "danger",
+      },
+    ]
+  }
+
+  return (
+    <Table {...getTableProps()} className="table-fixed">
+      <Table.Head>
+        {headerGroups?.map((headerGroup) => {
+          const { key, ...rest } = headerGroup.getHeaderGroupProps()
+          return (
+            <Table.HeadRow key={key} {...rest}>
+              {headerGroup.headers.map((col) => {
+                const { key, ...rest } = col.getHeaderProps()
+
+                return (
+                  <Table.HeadCell key={key} {...rest}>
+                    {col.render("Header")}
+                  </Table.HeadCell>
+                )
+              })}
+            </Table.HeadRow>
+          )
+        })}
+      </Table.Head>
+      <Table.Body {...getTableBodyProps()}>
+        {rows.map((row) => {
+          prepareRow(row)
+          const actionables = getTableRowActionables(row.original)
+          const { key, ...rest } = row.getRowProps()
+          return (
+            <Table.Row color={"inherit"} key={key} {...rest}>
+              {row.cells.map((cell) => {
+                const { key, ...rest } = cell.getCellProps()
+                return (
+                  <Table.Cell key={key} {...rest}>
+                    {cell.render("Cell")}
+                  </Table.Cell>
+                )
+              })}
+              <Table.Cell>
+                <div className="float-right">
+                  <Actionables forceDropdown actions={actionables} />
+                  {variantToRemove && (
+                    <DeletePrompt
+                      onDelete={async () => deleteVariant(variantToRemove.id)}
+                      handleClose={() => setVariantToRemove(null)}
+                      confirmText={t(
+                        "product-variants-section-yes-delete",
+                        "Yes, delete"
+                      )}
+                      heading={t(
+                        "product-variants-section-delete-variant-heading",
+                        "Delete variant"
+                      )}
+                      text={`${t(
+                        "product-variants-section-confirm-delete",
+                        "Are you sure you want to delete this variant? "
+                      )}${
+                        isFeatureEnabled("inventoryService")
+                          ? t(
+                              "product-variants-section-note-deleting-the-variant-will-also-remove-inventory-items-and-levels",
+                              " Note: Deleting the variant will also remove inventory items and levels"
+                            )
+                          : ""
+                      }`}
+                      successText={false}
+                    />
+                  )}
+                </div>
+              </Table.Cell>
+            </Table.Row>
+          )
+        })}
+      </Table.Body>
+    </Table>
+  )
+}
+
+export default VariantsTable

package/.cache/admin/src/components/organisms/radio-group/index.tsx

@@ -0,0 +1,174 @@
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
+import clsx from "clsx"
+import React from "react"
+import Tooltip from "../../atoms/tooltip"
+import LockIcon from "../../fundamentals/icons/lock-icon"
+
+type RadioGroupItemProps = {
+  label: string
+  sublabel?: string
+  description?: string
+  disabledTooltip?: string
+} & RadioGroupPrimitive.RadioGroupItemProps &
+  React.RefAttributes<HTMLButtonElement>
+
+type RadioGroupSimpleItemProps = {
+  label?: string
+  description?: string
+} & RadioGroupPrimitive.RadioGroupItemProps &
+  React.RefAttributes<HTMLButtonElement>
+
+type DotProps = RadioGroupPrimitive.RadioGroupItemProps &
+  React.RefAttributes<HTMLButtonElement>
+
+const Root = RadioGroupPrimitive.Root
+
+const Item = ({
+  label,
+  sublabel,
+  description,
+  className,
+  disabled,
+  disabledTooltip,
+  children,
+  ...rest
+}: RadioGroupItemProps) => {
+  return (
+    <label
+      className={clsx(
+        "rounded-rounded border-grey-20 p-base mb-xsmall gap-base relative flex cursor-pointer items-start border",
+        { "bg-grey-5 text-grey-40": disabled },
+        className
+      )}
+      htmlFor={rest.value}
+    >
+      {!disabled ? (
+        <RadioGroupPrimitive.Item
+          {...rest}
+          id={rest.value}
+          disabled={disabled}
+          className={clsx(
+            "radio-outer-ring outline-0",
+            "shadow-grey-20 rounded-circle h-[20px] w-[20px] shrink-0 shadow-[0_0_0_1px]"
+          )}
+        >
+          <RadioGroupPrimitive.Indicator
+            className={clsx(
+              "indicator relative flex h-full w-full items-center justify-center",
+              "after:bg-violet-60 after:rounded-circle after:absolute after:inset-0 after:m-auto after:block after:h-[12px] after:w-[12px]"
+            )}
+          />
+          {/* Outline indicator: purely stylistical */}
+          <RadioGroupPrimitive.Indicator
+            //  we want to hide this indicator from screen readers because the previous one is enough
+            aria-hidden="true"
+            className={clsx(
+              "shadow-violet-60 rounded-rounded absolute inset-0 shadow-[0_0_0_2px]"
+            )}
+          />
+        </RadioGroupPrimitive.Item>
+      ) : (
+        <Tooltip content={disabledTooltip}>
+          <LockIcon size={20} className="text-grey-40" />
+        </Tooltip>
+      )}
+      <div className="truncate">
+        <div className="flex items-center">
+          <p className="inter-base-semibold truncate">
+            {label}{" "}
+            {sublabel ? (
+              <span className="inter-base-regular text-grey-50">
+                {sublabel}
+              </span>
+            ) : null}
+          </p>
+        </div>
+        {description && (
+          <p
+            className={clsx(
+              "inter-small-regular text-grey-50 mt-2xsmall truncate",
+              {
+                "text-grey-40": disabled,
+              }
+            )}
+          >
+            {description}
+          </p>
+        )}
+        {children}
+      </div>
+    </label>
+  )
+}
+
+const SimpleItem: React.FC<RadioGroupSimpleItemProps> = ({
+  label,
+  description,
+  className,
+  ...rest
+}) => {
+  return (
+    <label
+      className={clsx(
+        "mr-large flex items-center last:mr-0",
+        {
+          ["pointer-events-none select-none opacity-50"]: rest.disabled,
+        },
+        className
+      )}
+      htmlFor={rest.value}
+    >
+      <RadioGroupPrimitive.Item
+        {...rest}
+        id={rest.value}
+        className={clsx(
+          "radio-outer-ring outline-0",
+          "rounded-circle h-[20px] w-[20px] shrink-0 shadow-[0_0_0_1px] shadow-[#D1D5DB]"
+        )}
+      >
+        <RadioGroupPrimitive.Indicator
+          className={clsx(
+            "indicator relative flex h-full w-full items-center justify-center",
+            "after:bg-violet-60 after:rounded-circle after:absolute after:inset-0 after:m-auto after:block after:h-[12px] after:w-[12px]"
+          )}
+        />
+      </RadioGroupPrimitive.Item>
+      <div className="ml-small inter-base-regular w-full cursor-pointer">
+        <span>{label && label}</span>
+        <span>{description && description}</span>
+      </div>
+    </label>
+  )
+}
+
+const Dot: React.FC<DotProps> = ({ className, ...rest }) => {
+  return (
+    <label
+      className={clsx(
+        {
+          ["pointer-events-none select-none opacity-50"]: rest.disabled,
+        },
+        className
+      )}
+      htmlFor={rest.value}
+    >
+      <RadioGroupPrimitive.Item
+        {...rest}
+        id={rest.value}
+        className={clsx(
+          "radio-outer-ring outline-0",
+          "rounded-circle h-[20px] w-[20px] shrink-0 shadow-[0_0_0_1px] shadow-[#D1D5DB]"
+        )}
+      >
+        <RadioGroupPrimitive.Indicator
+          className={clsx(
+            "indicator relative flex h-full w-full items-center justify-center",
+            "after:bg-violet-60 after:rounded-circle after:absolute after:inset-0 after:m-auto after:block after:h-[12px] after:w-[12px]"
+          )}
+        />
+      </RadioGroupPrimitive.Item>
+    </label>
+  )
+}
+
+export default { Root, Item, SimpleItem, Dot }

package/.cache/admin/src/components/organisms/raw-json/index.tsx

@@ -0,0 +1,38 @@
+import JSONView from "../../molecules/json-view"
+
+import BodyCard from "../body-card"
+
+type RawJSONProps = {
+  /**
+   * JSON data to render
+   */
+  data?: object
+  /**
+   * Body card title.
+   */
+  title: string
+}
+
+/**
+ * Renders a (collapsed) JSON tree section.
+ *
+ * @param {Object} props - React props
+ * @return {Object} - React element
+ */
+function RawJSON(props: RawJSONProps) {
+  const { title, data } = props
+
+  if (!data) {
+    return null
+  }
+
+  return (
+    <BodyCard className={"h-auto min-h-0 w-full"} title={title}>
+      <div className="flex flex-grow items-center">
+        <JSONView data={data} />
+      </div>
+    </BodyCard>
+  )
+}
+
+export default RawJSON

package/.cache/admin/src/components/organisms/reset-token-card/index.tsx

@@ -0,0 +1,129 @@
+import { useAdminSendResetPasswordToken } from "medusa-react"
+import React, { useState } from "react"
+import { useForm } from "react-hook-form"
+import { Trans, useTranslation } from "react-i18next"
+import useNotification from "../../../hooks/use-notification"
+import { getErrorMessage } from "../../../utils/error-messages"
+import FormValidator from "../../../utils/form-validator"
+import InputError from "../../atoms/input-error"
+import Button from "../../fundamentals/button"
+import CheckCircleFillIcon from "../../fundamentals/icons/check-circle-fill-icon"
+import SigninInput from "../../molecules/input-signin"
+
+type ResetTokenCardProps = {
+  goBack: () => void
+}
+
+type FormValues = {
+  email: string
+}
+
+const emailRegex = new RegExp(
+  "^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$"
+)
+
+const ResetTokenCard: React.FC<ResetTokenCardProps> = ({ goBack }) => {
+  const { t } = useTranslation()
+  const [mailSent, setSentMail] = useState(false)
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<FormValues>()
+
+  const { mutate, isLoading } = useAdminSendResetPasswordToken()
+  const notification = useNotification()
+
+  const onSubmit = handleSubmit((values: FormValues) => {
+    mutate(
+      {
+        email: values.email,
+      },
+      {
+        onSuccess: () => {
+          setSentMail(true)
+        },
+        onError: (error) => {
+          notification(
+            t("reset-token-card-error", "Error"),
+            getErrorMessage(error),
+            "error"
+          )
+        },
+      }
+    )
+  })
+
+  return (
+    <form onSubmit={onSubmit}>
+      <div className="flex flex-col items-center">
+        <h1 className="inter-xlarge-semibold text-grey-90 mb-xsmall text-[20px]">
+          {t("reset-token-card-reset-your-password", "Reset your password")}
+        </h1>
+        <span className="inter-base-regular text-grey-50 mb-large text-center">
+          <Trans t={t} i18nKey="reset-token-card-password-reset-description">
+            Enter your email address below, and we'll
+            <br />
+            send you instructions on how to reset
+            <br />
+            your password.
+          </Trans>
+        </span>
+        {!mailSent ? (
+          <>
+            <div className="w-[280px]">
+              <SigninInput
+                placeholder={t("reset-token-card-email", "Email")}
+                {...register("email", {
+                  required: FormValidator.required("Email"),
+                  pattern: {
+                    value: emailRegex,
+                    message: t(
+                      "reset-token-card-this-is-not-a-valid-email",
+                      "This is not a valid email"
+                    ),
+                  },
+                })}
+              />
+              <InputError errors={errors} name="email" />
+            </div>
+            <Button
+              variant="secondary"
+              size="medium"
+              className="mt-large w-[280px]"
+              type="submit"
+              loading={isLoading}
+            >
+              {t(
+                "reset-token-card-send-reset-instructions",
+                "Send reset instructions"
+              )}
+            </Button>
+          </>
+        ) : (
+          <div className="text-grey-60 rounded-rounded bg-grey-5 border-grey-20 p-base gap-x-small flex w-[280px] items-center border">
+            <div>
+              <CheckCircleFillIcon className="text-blue-50" size={20} />
+            </div>
+            <div className="gap-y-2xsmall flex flex-col">
+              <span className="inter-base-regular">
+                {t(
+                  "reset-token-card-successfully-sent-you-an-email",
+                  "Successfully sent you an email"
+                )}
+              </span>
+            </div>
+          </div>
+        )}
+        <span
+          className="inter-small-regular text-grey-50 mt-8 cursor-pointer"
+          onClick={goBack}
+        >
+          {t("reset-token-card-go-back-to-sign-in", "Go back to sign in")}
+        </span>
+      </div>
+    </form>
+  )
+}
+
+export default ResetTokenCard

package/.cache/admin/src/components/organisms/rma-return-product-table/index.tsx

@@ -0,0 +1,120 @@
+import clsx from "clsx"
+import React from "react"
+import { useTranslation } from "react-i18next"
+import { formatAmountWithSymbol } from "../../../utils/prices"
+import Button from "../../fundamentals/button"
+import MinusIcon from "../../fundamentals/icons/minus-icon"
+import PlusIcon from "../../fundamentals/icons/plus-icon"
+import TrashIcon from "../../fundamentals/icons/trash-icon"
+import Table from "../../molecules/table"
+
+type RMAReturnProductsTableProps = {
+  isAdditionalItems?: boolean
+  order: any
+  itemsToAdd: any[]
+  handleToAddQuantity: (value, index) => void
+  handleRemoveItem: (index) => void
+}
+
+const extractPrice = (prices, order) => {
+  let price = prices.find((ma) => ma.region_id === order.region_id)
+
+  if (!price) {
+    price = prices.find((ma) => ma.currency_code === order.currency_code)
+  }
+
+  if (price) {
+    return formatAmountWithSymbol({
+      currency: order.currency_code,
+      amount: price.amount * (1 + order.tax_rate / 100),
+    })
+  }
+
+  return 0
+}
+
+const RMAReturnProductsTable: React.FC<RMAReturnProductsTableProps> = ({
+  isAdditionalItems,
+  order,
+  itemsToAdd,
+  handleRemoveItem,
+  handleToAddQuantity,
+}) => {
+  const { t } = useTranslation()
+  return (
+    <Table>
+      <Table.HeadRow className="text-grey-50 inter-small-semibold">
+        <Table.HeadCell>
+          {t("rma-return-product-table-product-details", "Product Details")}
+        </Table.HeadCell>
+        <Table.HeadCell className="pr-8 text-right">
+          {t("rma-return-product-table-quantity", "Quantity")}
+        </Table.HeadCell>
+        <Table.HeadCell className="text-right">
+          {isAdditionalItems ? "Unit Price" : "Refundable"}
+        </Table.HeadCell>
+        <Table.HeadCell></Table.HeadCell>
+        <Table.HeadCell></Table.HeadCell>
+      </Table.HeadRow>
+      <Table.Body>
+        {itemsToAdd.map((item, index) => (
+          <Table.Row className={clsx("border-b-grey-0 hover:bg-grey-0")}>
+            <Table.Cell>
+              <div className="flex min-w-[240px] py-2">
+                <div className="h-[40px] w-[30px] ">
+                  <img
+                    className="h-full w-full rounded object-cover"
+                    src={item.product.thumbnail}
+                  />
+                </div>
+                <div className="inter-small-regular text-grey-50 ml-4 flex flex-col">
+                  <span>
+                    <span className="text-grey-90">{item.product.title}</span>{" "}
+                  </span>
+                  <span>{item.title}</span>
+                </div>
+              </div>
+            </Table.Cell>
+            <Table.Cell className="w-32 pr-8 text-right">
+              <div className="text-grey-50 flex w-full justify-end text-right ">
+                <span
+                  onClick={() => handleToAddQuantity(-1, index)}
+                  className="hover:bg-grey-20 mr-2 flex h-5 w-5 cursor-pointer items-center justify-center rounded"
+                >
+                  <MinusIcon size={16} />
+                </span>
+                <span>{item.quantity || ""}</span>
+                <span
+                  onClick={() => handleToAddQuantity(1, index)}
+                  className={clsx(
+                    "hover:bg-grey-20 ml-2 flex h-5 w-5 cursor-pointer items-center justify-center rounded"
+                  )}
+                >
+                  <PlusIcon size={16} />
+                </span>
+              </div>
+            </Table.Cell>
+            <Table.Cell className="text-right">
+              {extractPrice(item.prices, order)}
+            </Table.Cell>
+            <Table.Cell className="text-grey-40 pr-1 text-right">
+              {order.currency_code.toUpperCase()}
+            </Table.Cell>
+            <Table.Cell>
+              <Button
+                onClick={() => handleRemoveItem(index)}
+                variant="ghost"
+                size="small"
+                className="text-grey-40 h-8 w-8"
+              >
+                <TrashIcon size={20} />
+              </Button>
+            </Table.Cell>
+          </Table.Row>
+        ))}
+      </Table.Body>
+    </Table>
+  )
+}
+
+export default RMAReturnProductsTable