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

package/.cache/admin/src/domain/gift-cards/new.tsx

@@ -0,0 +1,336 @@
+import {
+  useAdminCreateProduct,
+  useAdminProducts,
+  useAdminStore,
+} from "medusa-react"
+import { Controller, useFieldArray, useForm, useWatch } from "react-hook-form"
+import { useNavigate } from "react-router-dom"
+import { useTranslation } from "react-i18next"
+import FileUploadField from "../../components/atoms/file-upload-field"
+import Button from "../../components/fundamentals/button"
+import PlusIcon from "../../components/fundamentals/icons/plus-icon"
+import TrashIcon from "../../components/fundamentals/icons/trash-icon"
+import InputField from "../../components/molecules/input"
+import Modal from "../../components/molecules/modal"
+import TextArea from "../../components/molecules/textarea"
+import CurrencyInput from "../../components/organisms/currency-input"
+import useNotification from "../../hooks/use-notification"
+import Medusa from "../../services/api"
+import { ProductStatus } from "../../types/shared"
+import { getErrorMessage } from "../../utils/error-messages"
+import { focusByName } from "../../utils/focus-by-name"
+
+type NewGiftCardProps = {
+  onClose: () => void
+}
+
+type NewGiftCardFormData = {
+  title: string
+  description: string | undefined
+  thumbnail: {
+    url: string
+    name: string
+    size: number
+    nativeFile: File
+  } | null
+  denominations: {
+    amount: number | null
+  }[]
+}
+
+const NewGiftCard = ({ onClose }: NewGiftCardProps) => {
+  const { store } = useAdminStore()
+  const { refetch } = useAdminProducts()
+  const { mutate, isLoading } = useAdminCreateProduct()
+  const navigate = useNavigate()
+  const notification = useNotification()
+  const { t } = useTranslation()
+
+  const { register, setValue, handleSubmit, control } =
+    useForm<NewGiftCardFormData>({
+      shouldUnregister: true,
+    })
+
+  const { fields, append, remove } = useFieldArray({
+    control,
+    name: "denominations",
+  })
+
+  const handleFileUpload = (files: File[]) => {
+    const file = files[0]
+    const url = URL.createObjectURL(file)
+
+    setValue("thumbnail", {
+      url,
+      name: file.name,
+      size: file.size,
+      nativeFile: file,
+    })
+  }
+
+  const thumbnail = useWatch({
+    control,
+    name: "thumbnail",
+  })
+
+  const onSubmit = async (data: NewGiftCardFormData) => {
+    const trimmedName = data.title.trim()
+
+    if (!trimmedName) {
+      notification(
+        t("gift-cards-error", "Error"),
+        t(
+          "gift-cards-please-enter-a-name-for-the-gift-card",
+          "Please enter a name for the Gift Card"
+        ),
+        "error"
+      )
+      focusByName("name")
+      return
+    }
+
+    if (!data.denominations?.length) {
+      notification(
+        t("gift-cards-error", "Error"),
+        t(
+          "gift-cards-please-add-at-least-one-denomination",
+          "Please add at least one denomination"
+        ),
+        "error"
+      )
+      focusByName("add-denomination")
+      return
+    }
+
+    let images: string[] = []
+
+    if (thumbnail) {
+      const uploadedImgs = await Medusa.uploads
+        .create([thumbnail.nativeFile])
+        .then(({ data }) => {
+          const uploaded = data.uploads.map(({ url }) => url)
+          return uploaded
+        })
+
+      images = uploadedImgs
+    }
+
+    mutate(
+      {
+        is_giftcard: true,
+        title: data.title,
+        description: data.description,
+        discountable: false,
+        options: [{ title: t("gift-cards-denominations", "Denominations") }],
+        variants: data.denominations.map((d, i) => ({
+          title: `${i + 1}`,
+          inventory_quantity: 0,
+          manage_inventory: false,
+          prices: [
+            { amount: d.amount!, currency_code: store?.default_currency_code },
+          ],
+          options: [{ value: `${d.amount}` }],
+        })),
+        images: images.length ? images : undefined,
+        thumbnail: images.length ? images[0] : undefined,
+        status: ProductStatus.PUBLISHED,
+      },
+      {
+        onSuccess: () => {
+          notification(
+            t("gift-cards-success", "Success"),
+            t(
+              "gift-cards-successfully-created-gift-card",
+              "Successfully created Gift Card"
+            ),
+            "success"
+          )
+          refetch()
+          navigate("/a/gift-cards/manage")
+        },
+        onError: (err) => {
+          notification(
+            t("gift-cards-error", "Error"),
+            getErrorMessage(err),
+            "error"
+          )
+        },
+      }
+    )
+  }
+
+  return (
+    <Modal handleClose={onClose}>
+      <form onSubmit={handleSubmit(onSubmit, (err) => console.log(err))}>
+        <Modal.Body>
+          <Modal.Header handleClose={onClose}>
+            <div>
+              <h1 className="inter-xlarge-semibold">
+                {t("gift-cards-create-gift-card", "Create Gift Card")}
+              </h1>
+            </div>
+          </Modal.Header>
+          <Modal.Content>
+            <div className="mb-base">
+              <h3 className="inter-base-semibold">
+                {t("gift-cards-gift-card-details", "Gift Card Details")}
+              </h3>
+            </div>
+            <div className="gap-y-base flex flex-col">
+              <InputField
+                label={t("gift-cards-name", "Name")}
+                required
+                placeholder={t(
+                  "gift-cards-the-best-gift-card",
+                  "The best Gift Card"
+                )}
+                {...register("title", { required: true })}
+              />
+              <TextArea
+                label={t("gift-cards-description", "Description")}
+                placeholder={t(
+                  "gift-cards-the-best-gift-card-of-all-time",
+                  "The best Gift Card of all time"
+                )}
+                {...register("description")}
+              />
+            </div>
+            <div className="mt-xlarge">
+              <h3 className="inter-base-semibold">
+                {t("gift-cards-thumbnail", "Thumbnail")}
+              </h3>
+              <div className="mt-base h-[80px]">
+                {thumbnail ? (
+                  <div className="flex items-center gap-x-6">
+                    <img
+                      src={thumbnail.url}
+                      alt=""
+                      className="rounded-base h-20 w-20 object-cover object-center"
+                    />
+                    <div className="flex flex-col gap-y-1">
+                      <span className="inter-small-regular">
+                        {thumbnail.name}
+                      </span>
+                      <div>
+                        <button
+                          className="inter-small-semibold text-rose-50"
+                          type="button"
+                          onClick={() => setValue("thumbnail", null)}
+                        >
+                          {t("gift-cards-delete", "Delete")}
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+                ) : (
+                  <FileUploadField
+                    filetypes={[
+                      "image/gif",
+                      "image/jpeg",
+                      "image/png",
+                      "image/webp",
+                    ]}
+                    onFileChosen={handleFileUpload}
+                    placeholder={t(
+                      "gift-cards-size-recommended",
+                      "1200 x 1600 (3:4) recommended, up to 10MB each"
+                    )}
+                  />
+                )}
+              </div>
+            </div>
+            <div className="mt-xlarge">
+              <h3 className="inter-base-semibold mb-base">
+                {t("gift-cards-denominations", "Denominations")}
+                <span className="text-rose-50">*</span>
+              </h3>
+              <div className="gap-y-xsmall flex flex-col">
+                {fields.map((denomination, index) => {
+                  return (
+                    <div
+                      key={denomination.id}
+                      className="gap-x-base last:mb-large flex items-end"
+                    >
+                      <CurrencyInput.Root
+                        currentCurrency={store?.default_currency_code}
+                        readOnly
+                        size="medium"
+                      >
+                        <Controller
+                          control={control}
+                          name={`denominations.${index}.amount`}
+                          rules={{
+                            required: true,
+                            shouldUnregister: true,
+                          }}
+                          render={({ field: { value, onChange, ref } }) => {
+                            return (
+                              <CurrencyInput.Amount
+                                label={t("gift-cards-amount", "Amount")}
+                                amount={value || undefined}
+                                onChange={onChange}
+                                ref={ref}
+                              />
+                            )
+                          }}
+                        />
+                      </CurrencyInput.Root>
+                      <Button
+                        variant="ghost"
+                        size="large"
+                        className="text-grey-40 h-10 w-10"
+                        type="button"
+                        onClick={() => remove(index)}
+                      >
+                        <TrashIcon size={20} />
+                      </Button>
+                    </div>
+                  )
+                })}
+              </div>
+              <Button
+                name="add-denomination"
+                variant="ghost"
+                size="small"
+                onClick={() =>
+                  append({
+                    amount: undefined,
+                  })
+                }
+                type="button"
+              >
+                <PlusIcon size={20} />
+                {t("gift-cards-add-denomination", "Add Denomination")}
+              </Button>
+            </div>
+          </Modal.Content>
+          <Modal.Footer>
+            <div className="flex w-full items-center justify-end">
+              <Button
+                type="submit"
+                variant="ghost"
+                size="small"
+                className="w-eventButton"
+                onClick={onClose}
+              >
+                {t("gift-cards-cancel", "Cancel")}
+              </Button>
+              <Button
+                type="submit"
+                variant="primary"
+                size="small"
+                className="w-eventButton"
+                loading={isLoading}
+                disabled={isLoading}
+              >
+                {t("gift-cards-create-publish", "Create & Publish")}
+              </Button>
+            </div>
+          </Modal.Footer>
+        </Modal.Body>
+      </form>
+    </Modal>
+  )
+}
+
+export default NewGiftCard

package/.cache/admin/src/domain/gift-cards/overview.tsx

@@ -0,0 +1,215 @@
+import { Product } from "@medusajs/medusa"
+import {
+  useAdminDeleteProduct,
+  useAdminProducts,
+  useAdminStore,
+  useAdminUpdateProduct,
+} from "medusa-react"
+import { useMemo, useState } from "react"
+import { useNavigate } from "react-router-dom"
+import { useTranslation } from "react-i18next"
+import PageDescription from "../../components/atoms/page-description"
+import Spacer from "../../components/atoms/spacer"
+import Spinner from "../../components/atoms/spinner"
+import WidgetContainer from "../../components/extensions/widget-container"
+import PlusIcon from "../../components/fundamentals/icons/plus-icon"
+import BannerCard from "../../components/molecules/banner-card"
+import BodyCard from "../../components/organisms/body-card"
+import DeletePrompt from "../../components/organisms/delete-prompt"
+import GiftCardBanner from "../../components/organisms/gift-card-banner"
+import GiftCardTable from "../../components/templates/gift-card-table"
+import useNotification from "../../hooks/use-notification"
+import useToggleState from "../../hooks/use-toggle-state"
+import { useWidgets } from "../../providers/widget-provider"
+import { ProductStatus } from "../../types/shared"
+import { getErrorMessage } from "../../utils/error-messages"
+import CustomGiftcard from "./custom-giftcard"
+import NewGiftCard from "./new"
+
+const Overview = () => {
+  const { t } = useTranslation()
+  const { products, isLoading } = useAdminProducts({
+    is_giftcard: true,
+  })
+  const { store } = useAdminStore()
+  const [showCreate, setShowCreate] = useState(false)
+
+  const giftCard = products?.[0]
+
+  const navigate = useNavigate()
+  const notification = useNotification()
+  const updateGiftCard = useAdminUpdateProduct(giftCard?.id!)
+  const deleteGiftCard = useAdminDeleteProduct(giftCard?.id!)
+
+  const {
+    state: stateCustom,
+    close: closeCustom,
+    open: openCustom,
+  } = useToggleState()
+
+  const { state: stateNew, close: closeNew, open: openNew } = useToggleState()
+
+  const {
+    state: stateDelete,
+    close: closeDelete,
+    open: openDelete,
+  } = useToggleState()
+
+  const onUpdate = () => {
+    let status: ProductStatus = ProductStatus.PUBLISHED
+    if (giftCard?.status === "published") {
+      status = ProductStatus.DRAFT
+    }
+
+    updateGiftCard.mutate(
+      { status },
+      {
+        onSuccess: () =>
+          notification(
+            t("gift-cards-success", "Success"),
+            t(
+              "gift-cards-successfully-updated-gift-card",
+              "Successfully updated Gift Card"
+            ),
+            "success"
+          ),
+        onError: (err) =>
+          notification(
+            t("gift-cards-error", "Error"),
+            getErrorMessage(err),
+            "error"
+          ),
+      }
+    )
+  }
+
+  const onDelete = () => {
+    deleteGiftCard.mutate(undefined, {
+      onSuccess: () => {
+        navigate("/a/gift-cards")
+      },
+    })
+  }
+
+  const actionables = [
+    {
+      label: t("gift-cards-custom-gift-card", "Custom Gift Card"),
+      onClick: openCustom,
+      icon: <PlusIcon size={20} />,
+    },
+  ]
+
+  const giftCardWithCurrency = useMemo(() => {
+    if (!giftCard || !store) {
+      return null
+    }
+
+    return {
+      ...(giftCard as Product),
+      defaultCurrency: store.default_currency_code,
+    }
+  }, [giftCard, store])
+
+  const { getWidgets } = useWidgets()
+
+  return (
+    <>
+      <div className="flex flex-col">
+        <PageDescription
+          title={t("gift-cards-gift-cards", "Gift Cards")}
+          subtitle={t(
+            "gift-cards-manage",
+            "Manage the Gift Cards of your Medusa store"
+          )}
+        />
+        {!isLoading ? (
+          <div className="gap-y-xsmall flex flex-col">
+            {getWidgets("gift_card.list.before").map((w, i) => {
+              return (
+                <WidgetContainer
+                  key={i}
+                  widget={w}
+                  injectionZone="gift_card.list.before"
+                  entity={null}
+                />
+              )
+            })}
+            {giftCardWithCurrency ? (
+              <GiftCardBanner
+                {...giftCardWithCurrency}
+                onDelete={openDelete}
+                onEdit={() => navigate("/a/gift-cards/manage")}
+                onUnpublish={onUpdate}
+              />
+            ) : (
+              <BannerCard
+                title={t(
+                  "gift-cards-are-you-ready-to-sell-your-first-gift-card",
+                  "Are you ready to sell your first Gift Card?"
+                )}
+              >
+                <BannerCard.Description
+                  cta={{
+                    label: t("gift-cards-create-gift-card", "Create Gift Card"),
+                    onClick: () => setShowCreate(true),
+                  }}
+                >
+                  {t(
+                    "gift-cards-no-gift-card-has-been-added-yet",
+                    "No Gift Card has been added yet."
+                  )}
+                </BannerCard.Description>
+              </BannerCard>
+            )}
+
+            <BodyCard
+              title={t("gift-cards-history", "History")}
+              subtitle={t(
+                "gift-cards-see-the-history-of-purchased-gift-cards",
+                "See the history of purchased Gift Cards"
+              )}
+              actionables={actionables}
+            >
+              <GiftCardTable />
+            </BodyCard>
+
+            {getWidgets("gift_card.list.after").map((w, i) => {
+              return (
+                <WidgetContainer
+                  key={i}
+                  widget={w}
+                  injectionZone="gift_card.list.after"
+                  entity={null}
+                />
+              )
+            })}
+          </div>
+        ) : (
+          <div className="rounded-rounded border-grey-20 flex h-44 w-full items-center justify-center border">
+            <Spinner variant="secondary" size="large" />
+          </div>
+        )}
+      </div>
+
+      <CustomGiftcard onClose={closeCustom} open={stateCustom} />
+
+      {showCreate && <NewGiftCard onClose={() => setShowCreate(!showCreate)} />}
+
+      {stateDelete && (
+        <DeletePrompt
+          handleClose={closeDelete}
+          onDelete={async () => onDelete()}
+          successText={t(
+            "gift-cards-successfully-deleted-gift-card",
+            "Successfully deleted Gift Card"
+          )}
+          confirmText={t("gift-cards-yes-delete", "Yes, delete")}
+          heading={t("gift-cards-delete-gift-card", "Delete Gift Card")}
+        />
+      )}
+      <Spacer />
+    </>
+  )
+}
+
+export default Overview

package/.cache/admin/src/domain/inventory/filter-dropdown.tsx

@@ -0,0 +1,104 @@
+import clsx from "clsx"
+import { useMemo, useEffect, useState } from "react"
+import { useTranslation } from "react-i18next"
+import PlusIcon from "../../components/fundamentals/icons/plus-icon"
+import FilterDropdownContainer from "../../components/molecules/filter-dropdown/container"
+import TabFilter from "../../components/molecules/filter-tab"
+
+const ProductsFilter = ({
+  filters,
+  submitFilters,
+  clearFilters,
+  tabs,
+  onTabClick,
+  activeTab,
+  onRemoveTab,
+  onSaveTab,
+}) => {
+  const { t } = useTranslation()
+  const [tempState, setTempState] = useState(filters)
+  const [name, setName] = useState("")
+
+  const handleRemoveTab = (val) => {
+    if (onRemoveTab) {
+      onRemoveTab(val)
+    }
+  }
+
+  const handleTabClick = (tabName: string) => {
+    if (onTabClick) {
+      onTabClick(tabName)
+    }
+  }
+
+  useEffect(() => {
+    setTempState(filters)
+  }, [filters])
+
+  const onSubmit = () => {
+    submitFilters(tempState)
+  }
+
+  const onClear = () => {
+    clearFilters()
+  }
+
+  const numberOfFilters = useMemo(
+    () =>
+      Object.entries(filters || {}).reduce((acc, [, value]) => {
+        if (value?.open) {
+          acc = acc + 1
+        }
+        return acc
+      }, 0),
+    [filters]
+  )
+
+  const setSingleFilter = (filterKey, filterVal) => {
+    setTempState((prevState) => ({
+      ...prevState,
+      [filterKey]: filterVal,
+    }))
+  }
+
+  return (
+    <div className="flex space-x-1">
+      <FilterDropdownContainer
+        submitFilters={onSubmit}
+        clearFilters={onClear}
+        triggerElement={
+          <button
+            className={clsx(
+              "rounded-rounded focus-visible:shadow-input focus-visible:border-violet-60 flex items-center space-x-1 focus-visible:outline-none"
+            )}
+          >
+            <div className="rounded-rounded bg-grey-5 border-grey-20 inter-small-semibold flex h-6 items-center border px-2">
+              {t("inventory-filters", "Filters")}
+              <div className="text-grey-40 ml-1 flex items-center rounded">
+                <span className="text-violet-60 inter-small-semibold">
+                  {numberOfFilters ? numberOfFilters : "0"}
+                </span>
+              </div>
+            </div>
+            <div className="rounded-rounded bg-grey-5 border-grey-20 inter-small-semibold flex items-center border p-1">
+              <PlusIcon size={14} />
+            </div>
+          </button>
+        }
+      ></FilterDropdownContainer>
+      {tabs &&
+        tabs.map((t) => (
+          <TabFilter
+            key={t.value}
+            onClick={() => handleTabClick(t.value)}
+            label={t.label}
+            isActive={activeTab === t.value}
+            removable={!!t.removable}
+            onRemove={() => handleRemoveTab(t.value)}
+          />
+        ))}
+    </div>
+  )
+}
+
+export default ProductsFilter

package/.cache/admin/src/domain/inventory/header.tsx

@@ -0,0 +1,32 @@
+import TableViewHeader from "../../components/organisms/custom-table-header"
+import { useNavigate } from "react-router-dom"
+
+type P = {
+  activeView: "inventory" | "locations" | "reservations"
+}
+
+/*
+ * Shared header component for "inventory" and "locations" page
+ */
+
+function InventoryPageTableHeader(props: P) {
+  const navigate = useNavigate()
+
+  const views = ["inventory", "locations", "reservations"]
+
+  return (
+    <TableViewHeader
+      setActiveView={(v) => {
+        if (v === "inventory") {
+          navigate(`/a/inventory`)
+        } else {
+          navigate(`/a/inventory/${v}`)
+        }
+      }}
+      views={views}
+      activeView={props.activeView}
+    />
+  )
+}
+
+export default InventoryPageTableHeader

package/.cache/admin/src/domain/inventory/index.tsx

@@ -0,0 +1,17 @@
+import { Route, Routes } from "react-router-dom"
+
+import InventoryView from "./inventory"
+import Locations from "./locations"
+import Reservations from "./reservations"
+
+const Inventory = () => {
+  return (
+    <Routes>
+      <Route index element={<InventoryView />} />
+      <Route path="/locations/*" element={<Locations />} />
+      <Route path="/reservations/*" element={<Reservations />} />
+    </Routes>
+  )
+}
+
+export default Inventory