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

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

@@ -0,0 +1,316 @@
+import { LineItem, Order } from "@medusajs/medusa"
+import clsx from "clsx"
+import React, { Fragment, useContext } from "react"
+import { useTranslation } from "react-i18next"
+import RMAReturnReasonSubModal from "../../../domain/orders/details/rma-sub-modals/return-reasons"
+import Medusa from "../../../services/api"
+import { isLineItemCanceled } from "../../../utils/is-line-item"
+import { formatAmountWithSymbol } from "../../../utils/prices"
+import CopyToClipboard from "../../atoms/copy-to-clipboard"
+import Button from "../../fundamentals/button"
+import CheckIcon from "../../fundamentals/icons/check-icon"
+import MinusIcon from "../../fundamentals/icons/minus-icon"
+import PlusIcon from "../../fundamentals/icons/plus-icon"
+import { LayeredModalContext } from "../../molecules/modal/layered-modal"
+import Table from "../../molecules/table"
+
+type RMASelectProductTableProps = {
+  order: Omit<Order, "beforeInsert">
+  allItems: Omit<LineItem, "beforeInsert">[]
+  toReturn: any
+  setToReturn: (items: any) => void
+  customReturnOptions?: any[]
+  imagesOnReturns?: any
+  isSwapOrClaim?: boolean
+}
+
+const RMASelectProductTable: React.FC<RMASelectProductTableProps> = ({
+  order,
+  allItems,
+  toReturn,
+  customReturnOptions = undefined,
+  imagesOnReturns = false,
+  setToReturn,
+  isSwapOrClaim = false,
+}) => {
+  const { t } = useTranslation()
+  const { push, pop } = useContext(LayeredModalContext)
+
+  const handleQuantity = (change, item) => {
+    if (
+      (item.quantity - item.returned_quantity === toReturn[item.id].quantity &&
+        change > 0) ||
+      (toReturn[item.id].quantity === 1 && change < 0)
+    ) {
+      return
+    }
+
+    const newReturns = {
+      ...toReturn,
+      [item.id]: {
+        ...toReturn[item.id],
+        quantity: (toReturn[item.id]?.quantity || 0) + change,
+      },
+    }
+
+    setToReturn(newReturns)
+  }
+
+  const handleReturnToggle = (item) => {
+    const id = item.id
+
+    const newReturns = { ...toReturn }
+
+    if (id in toReturn) {
+      delete newReturns[id]
+    } else {
+      newReturns[id] = {
+        images: imagesOnReturns ? [] : null,
+        reason: null,
+        note: "",
+        quantity: item.quantity - item.returned_quantity,
+      }
+    }
+
+    setToReturn(newReturns)
+  }
+
+  const handleAddImages = async (files) => {
+    return Medusa.uploads
+      .create(files)
+      .then(({ data }) => data.uploads.map(({ url }) => url))
+  }
+
+  const setReturnReason = (reason, note, files, id) => {
+    let newReturns = {}
+    if (imagesOnReturns && files?.length) {
+      handleAddImages(files).then((res) => {
+        newReturns = {
+          ...toReturn,
+          [id]: {
+            ...toReturn[id],
+            reason: reason,
+            note: note,
+            images: [...(toReturn[id].images || []), ...res],
+          },
+        }
+        setToReturn(newReturns)
+      })
+    } else {
+      newReturns = {
+        ...toReturn,
+        [id]: {
+          ...toReturn[id],
+          reason: reason,
+          note: note,
+        },
+      }
+
+      setToReturn(newReturns)
+    }
+  }
+
+  return (
+    <Table>
+      <Table.Head className="border-none">
+        <Table.HeadRow className="text-grey-50 inter-small-semibold">
+          <Table.HeadCell colSpan={2}>
+            {t("rma-select-product-table-product-details", "Product Details")}
+          </Table.HeadCell>
+          <Table.HeadCell className="pr-8 text-right">
+            {t("rma-select-product-table-quantity", "Quantity")}
+          </Table.HeadCell>
+          <Table.HeadCell className="text-right">
+            {t("rma-select-product-table-refundable", "Refundable")}
+          </Table.HeadCell>
+          <Table.HeadCell></Table.HeadCell>
+        </Table.HeadRow>
+      </Table.Head>
+      <Table.Body>
+        {allItems.map((item) => {
+          // Only show items that have not been returned,
+          // and aren't canceled
+          if (
+            item.returned_quantity === item.quantity ||
+            isLineItemCanceled(item, order)
+          ) {
+            return
+          }
+          const checked = item.id in toReturn
+          return (
+            <Fragment key={item.id}>
+              <Table.Row className={clsx("border-b-grey-0 hover:bg-grey-0")}>
+                <Table.Cell>
+                  <div className="ml-1 flex h-full items-center">
+                    <div
+                      onClick={() => handleReturnToggle(item)}
+                      className={`text-grey-0 border-grey-30 rounded-base mr-4 flex h-5 w-5 cursor-pointer justify-center border ${
+                        checked && "bg-violet-60"
+                      }`}
+                    >
+                      <span className="self-center">
+                        {checked && <CheckIcon size={16} />}
+                      </span>
+                    </div>
+
+                    <input
+                      className="hidden"
+                      checked={checked}
+                      tabIndex={-1}
+                      onChange={() => handleReturnToggle(item)}
+                      type="checkbox"
+                    />
+                  </div>
+                </Table.Cell>
+                <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.thumbnail}
+                      />
+                    </div>
+                    <div className="inter-small-regular text-grey-50 ml-4 flex flex-col">
+                      <span>
+                        <span className="text-grey-90">{item.title}</span>
+                      </span>
+                      <div className="flex gap-4">
+                        {item?.variant?.title && (
+                          <span>{item.variant.title}</span>
+                        )}
+                        {item?.variant?.sku && (
+                          <CopyToClipboard
+                            value={item.variant.sku}
+                            iconSize={14}
+                          />
+                        )}
+                      </div>
+                    </div>
+                  </div>
+                </Table.Cell>
+                <Table.Cell className="w-32 pr-8 text-right">
+                  {item.id in toReturn ? (
+                    <div className="text-grey-50 flex w-full justify-end text-right ">
+                      <span
+                        onClick={() => handleQuantity(-1, item)}
+                        className="hover:bg-grey-20 mr-2 flex h-5 w-5 cursor-pointer items-center justify-center rounded"
+                      >
+                        <MinusIcon size={16} />
+                      </span>
+                      <span>{toReturn[item.id].quantity || ""}</span>
+                      <span
+                        onClick={() => handleQuantity(1, item)}
+                        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>
+                  ) : (
+                    <span className="text-grey-40">
+                      {item.quantity - item.returned_quantity}
+                    </span>
+                  )}
+                </Table.Cell>
+                <Table.Cell className="text-right">
+                  {formatAmountWithSymbol({
+                    currency: order.currency_code,
+                    amount: item.refundable || 0,
+                  })}
+                </Table.Cell>
+                <Table.Cell className="text-grey-40 pr-1 text-right">
+                  {order.currency_code.toUpperCase()}
+                </Table.Cell>
+              </Table.Row>
+              {checked && !isSwapOrClaim && (
+                <Table.Row className="hover:bg-grey-0 last:border-b-0">
+                  <Table.Cell></Table.Cell>
+                  <Table.Cell colSpan={2}>
+                    <div className="max-w-[470px] truncate">
+                      {toReturn[item.id]?.reason && (
+                        <span className="inter-small-regular text-grey-40">
+                          <span className="text-grey-80 mr-1">
+                            <span className="inter-small-semibold mr-1">
+                              {toReturn[item.id]?.reason.label}
+                            </span>
+                          </span>
+                          {toReturn[item.id]?.note || ""}
+                          <span className="ml-2">
+                            {toReturn[item.id]?.images?.length > 0 && (
+                              <>
+                                {t(
+                                  "rma-select-product-table-images-witch-count",
+                                  "{{count}}",
+                                  {
+                                    count: toReturn[item.id]?.images?.length,
+                                  }
+                                )}
+                              </>
+                            )}
+                          </span>
+                        </span>
+                      )}
+                    </div>
+                  </Table.Cell>
+                  <Table.Cell colSpan={2}>
+                    <div className="mb-small flex w-full justify-end">
+                      <Button
+                        onClick={() =>
+                          push(
+                            ReturnReasonScreen(
+                              pop,
+                              toReturn[item.id]?.reason,
+                              toReturn[item.id]?.note,
+                              customReturnOptions,
+                              imagesOnReturns,
+                              (reason, note, files) =>
+                                setReturnReason(reason, note, files, item.id)
+                            )
+                          )
+                        }
+                        variant="ghost"
+                        size="small"
+                        className="border-grey-20 border"
+                      >
+                        {t(
+                          "rma-select-product-table-select-reason",
+                          "Select Reason"
+                        )}
+                      </Button>
+                    </div>
+                  </Table.Cell>
+                </Table.Row>
+              )}
+            </Fragment>
+          )
+        })}
+      </Table.Body>
+    </Table>
+  )
+}
+
+const ReturnReasonScreen = (
+  pop,
+  reason,
+  note,
+  customReturnOptions,
+  imagesOnReturns,
+  setReturnReason
+) => {
+  return {
+    title: "Return Reasons",
+    onBack: () => pop(),
+    view: (
+      <RMAReturnReasonSubModal
+        reason={reason}
+        existingNote={note}
+        customReturnOptions={customReturnOptions}
+        addImage={imagesOnReturns}
+        onSubmit={setReturnReason}
+      />
+    ),
+  }
+}
+
+export default RMASelectProductTable

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

@@ -0,0 +1,52 @@
+import clsx from "clsx"
+import React from "react"
+import Actionables, { ActionType } from "../../molecules/actionables"
+
+type SectionProps = {
+  children?: React.ReactNode
+  title?: string
+  actions?: ActionType[]
+  customActions?: React.ReactNode
+  forceDropdown?: boolean
+  status?: React.ReactNode
+  className?: string
+}
+
+const Section = ({
+  title,
+  actions,
+  customActions,
+  forceDropdown = false,
+  status,
+  children,
+  className,
+}: SectionProps) => {
+  const hasHeader = title || actions || customActions || status
+
+  return (
+    <div
+      className={clsx(
+        "px-xlarge pt-large pb-xlarge rounded-rounded bg-grey-0 border-grey-20 border",
+        className
+      )}
+    >
+      {hasHeader && (
+        <div className="flex items-center justify-between">
+          {title && (
+            <h1 className="text-grey-90 inter-xlarge-semibold">{title}</h1>
+          )}
+          <div className="flex items-center gap-x-2">
+            {customActions && customActions}
+            {status && status}
+            {actions && (
+              <Actionables actions={actions} forceDropdown={forceDropdown} />
+            )}
+          </div>
+        </div>
+      )}
+      <div>{children}</div>
+    </div>
+  )
+}
+
+export default Section

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

@@ -0,0 +1,142 @@
+import { useAdminStore } from "medusa-react"
+import React, { useState } from "react"
+import { useTranslation } from "react-i18next"
+
+import { useFeatureFlag } from "../../../providers/feature-flag-provider"
+import { useRoutes } from "../../../providers/route-provider"
+import BuildingsIcon from "../../fundamentals/icons/buildings-icon"
+import CartIcon from "../../fundamentals/icons/cart-icon"
+import CashIcon from "../../fundamentals/icons/cash-icon"
+import GearIcon from "../../fundamentals/icons/gear-icon"
+import GiftIcon from "../../fundamentals/icons/gift-icon"
+import SaleIcon from "../../fundamentals/icons/sale-icon"
+import SquaresPlus from "../../fundamentals/icons/squares-plus"
+import SwatchIcon from "../../fundamentals/icons/swatch-icon"
+import TagIcon from "../../fundamentals/icons/tag-icon"
+import UsersIcon from "../../fundamentals/icons/users-icon"
+import SidebarMenuItem from "../../molecules/sidebar-menu-item"
+import UserMenu from "../../molecules/user-menu"
+
+const ICON_SIZE = 20
+
+const Sidebar: React.FC = () => {
+  const { t } = useTranslation()
+  const [currentlyOpen, setCurrentlyOpen] = useState(-1)
+
+  const { isFeatureEnabled } = useFeatureFlag()
+  const { store } = useAdminStore()
+
+  const { getLinks } = useRoutes()
+
+  const triggerHandler = () => {
+    const id = triggerHandler.id++
+    return {
+      open: currentlyOpen === id,
+      handleTriggerClick: () => setCurrentlyOpen(id),
+    }
+  }
+  // We store the `id` counter on the function object, as a state creates
+  // infinite updates, and we do not want the variable to be free floating.
+  triggerHandler.id = 0
+
+  const inventoryEnabled =
+    isFeatureEnabled("inventoryService") &&
+    isFeatureEnabled("stockLocationService")
+
+  return (
+    <div className="min-w-sidebar max-w-sidebar bg-gray-0 border-grey-20 py-base px-base h-screen overflow-y-auto border-r">
+      <div className="h-full">
+        <div className="flex justify-between px-2">
+          <div className="rounded-circle flex h-8 w-8 items-center justify-center border border-solid border-gray-300">
+            <UserMenu />
+          </div>
+        </div>
+        <div className="my-base flex flex-col px-2">
+          <span className="text-grey-50 text-small font-medium">
+            {t("sidebar-store", "Store")}
+          </span>
+          <span className="text-grey-90 text-medium font-medium">
+            {store?.name}
+          </span>
+        </div>
+        <div className="py-3.5">
+          <SidebarMenuItem
+            pageLink={"/a/orders"}
+            icon={<CartIcon size={ICON_SIZE} />}
+            triggerHandler={triggerHandler}
+            text={t("sidebar-orders", "Orders")}
+          />
+          <SidebarMenuItem
+            pageLink={"/a/products"}
+            icon={<TagIcon size={ICON_SIZE} />}
+            text={t("sidebar-products", "Products")}
+            triggerHandler={triggerHandler}
+          />
+          {isFeatureEnabled("product_categories") && (
+            <SidebarMenuItem
+              pageLink={"/a/product-categories"}
+              icon={<SwatchIcon size={ICON_SIZE} />}
+              text={t("sidebar-categories", "Categories")}
+              triggerHandler={triggerHandler}
+            />
+          )}
+          <SidebarMenuItem
+            pageLink={"/a/customers"}
+            icon={<UsersIcon size={ICON_SIZE} />}
+            triggerHandler={triggerHandler}
+            text={t("sidebar-customers", "Customers")}
+          />
+          {inventoryEnabled && (
+            <SidebarMenuItem
+              pageLink={"/a/inventory"}
+              icon={<BuildingsIcon size={ICON_SIZE} />}
+              triggerHandler={triggerHandler}
+              text={t("sidebar-inventory", "Inventory")}
+            />
+          )}
+          <SidebarMenuItem
+            pageLink={"/a/discounts"}
+            icon={<SaleIcon size={ICON_SIZE} />}
+            triggerHandler={triggerHandler}
+            text={t("sidebar-discounts", "Discounts")}
+          />
+          <SidebarMenuItem
+            pageLink={"/a/gift-cards"}
+            icon={<GiftIcon size={ICON_SIZE} />}
+            triggerHandler={triggerHandler}
+            text={t("sidebar-gift-cards", "Gift Cards")}
+          />
+          <SidebarMenuItem
+            pageLink={"/a/pricing"}
+            icon={<CashIcon size={ICON_SIZE} />}
+            triggerHandler={triggerHandler}
+            text={t("sidebar-pricing", "Pricing")}
+          />
+          {getLinks().map(({ path, label, icon }, index) => {
+            const cleanLink = path.replace("/a/", "")
+
+            const Icon = icon ? icon : SquaresPlus
+
+            return (
+              <SidebarMenuItem
+                key={index}
+                pageLink={`/a${cleanLink}`}
+                icon={icon ? <Icon /> : <SquaresPlus size={ICON_SIZE} />}
+                triggerHandler={triggerHandler}
+                text={label}
+              />
+            )
+          })}
+          <SidebarMenuItem
+            pageLink={"/a/settings"}
+            icon={<GearIcon size={ICON_SIZE} />}
+            triggerHandler={triggerHandler}
+            text={t("sidebar-settings", "Settings")}
+          />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Sidebar

package/.cache/admin/src/components/organisms/table-container/index.tsx

@@ -0,0 +1,50 @@
+import { PropsWithChildren } from "react"
+import Spinner from "../../atoms/spinner"
+import { TablePagination } from "./pagination"
+import { PagingProps } from "./types"
+
+const ROW_HEIGHT = 40
+
+type Props<T extends boolean> = PropsWithChildren<{
+  isLoading?: boolean
+  hasPagination?: T
+  pagingState: T extends true ? PagingProps : undefined
+  numberOfRows?: number
+}>
+
+const TableContainer = <T extends boolean>({
+  children,
+  // TODO: remove (redundant)
+  hasPagination,
+  pagingState,
+  isLoading,
+  numberOfRows = 12,
+}: Props<T>) => {
+  // We use the number of rows (query limit) plus the header row to calculate the minimum height of the table, to avoid the table jumping around while loading.
+  const minHeight = (numberOfRows + 1) * ROW_HEIGHT
+
+  return (
+    <div>
+      <div
+        className="relative"
+        style={{
+          minHeight,
+        }}
+      >
+        {isLoading && (
+          <div className="absolute inset-0 z-50 flex items-center justify-center bg-white bg-opacity-50">
+            <Spinner variant="secondary" />
+          </div>
+        )}
+        {children}
+      </div>
+      {hasPagination && pagingState && (
+        <div className="mt-14">
+          <TablePagination pagingState={pagingState} isLoading={isLoading} />
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default TableContainer

package/.cache/admin/src/components/organisms/table-container/pagination.tsx

@@ -0,0 +1,86 @@
+import { useTranslation } from "react-i18next"
+import { SkeletonProvider } from "../../../providers/skeleton-provider"
+import Skeleton from "../../atoms/skeleton"
+import ArrowLeftIcon from "../../fundamentals/icons/arrow-left-icon"
+import ArrowRightIcon from "../../fundamentals/icons/arrow-right-icon"
+import { PagingProps } from "./types"
+
+type Props = {
+  isLoading?: boolean
+  pagingState: PagingProps
+}
+
+export const TablePagination = ({
+  isLoading = false,
+  pagingState: {
+    title,
+    currentPage,
+    pageCount,
+    pageSize,
+    count,
+    offset,
+    nextPage,
+    prevPage,
+    hasNext,
+    hasPrev,
+  },
+}: Props) => {
+  const { t } = useTranslation()
+  const soothedOffset = count > 0 ? offset + 1 : 0
+  const soothedPageCount = Math.max(1, pageCount)
+
+  return (
+    <SkeletonProvider isLoading={isLoading}>
+      <div
+        className={
+          "inter-small-regular text-grey-50 flex w-full justify-between"
+        }
+      >
+        <Skeleton>
+          <div>
+            {t(
+              "table-container-soothed-offset",
+              "{{soothedOffset}} - {{pageSize}} of {{count}} {{title}}",
+              {
+                soothedOffset,
+                pageSize,
+                count,
+                title,
+              }
+            )}
+          </div>
+        </Skeleton>
+        <div className="flex space-x-4">
+          <Skeleton>
+            <div>
+              {t(
+                "table-container-current-page",
+                "{{currentPage}} of {{soothedPageCount}}",
+                {
+                  currentPage,
+                  soothedPageCount,
+                }
+              )}
+            </div>
+          </Skeleton>
+          <div className="flex items-center space-x-4">
+            <button
+              className="disabled:text-grey-30 cursor-pointer disabled:cursor-default"
+              disabled={!hasPrev || isLoading}
+              onClick={() => prevPage()}
+            >
+              <ArrowLeftIcon />
+            </button>
+            <button
+              className="disabled:text-grey-30 cursor-pointer disabled:cursor-default"
+              disabled={!hasNext || isLoading}
+              onClick={() => nextPage()}
+            >
+              <ArrowRightIcon />
+            </button>
+          </div>
+        </div>
+      </div>
+    </SkeletonProvider>
+  )
+}

package/.cache/admin/src/components/organisms/table-container/types.ts

@@ -0,0 +1,12 @@
+export type PagingProps = {
+  title: string
+  currentPage: number
+  pageSize: number
+  pageCount: number
+  count: number
+  offset: number
+  hasNext: boolean
+  hasPrev: boolean
+  nextPage: () => void
+  prevPage: () => void
+}