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

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

@@ -0,0 +1,269 @@
+import { useAdminCreateBatchJob, useAdminCreateCollection } from "medusa-react"
+import { useEffect, useState } from "react"
+import { useLocation, useNavigate } from "react-router-dom"
+import { useTranslation } from "react-i18next"
+import Fade from "../../../components/atoms/fade-wrapper"
+import Spacer from "../../../components/atoms/spacer"
+import WidgetContainer from "../../../components/extensions/widget-container"
+import Button from "../../../components/fundamentals/button"
+import ExportIcon from "../../../components/fundamentals/icons/export-icon"
+import PlusIcon from "../../../components/fundamentals/icons/plus-icon"
+import UploadIcon from "../../../components/fundamentals/icons/upload-icon"
+import BodyCard from "../../../components/organisms/body-card"
+import TableViewHeader from "../../../components/organisms/custom-table-header"
+import ExportModal from "../../../components/organisms/export-modal"
+import AddCollectionModal from "../../../components/templates/collection-modal"
+import CollectionsTable from "../../../components/templates/collections-table"
+import ProductTable from "../../../components/templates/product-table"
+import useNotification from "../../../hooks/use-notification"
+import useToggleState from "../../../hooks/use-toggle-state"
+import { usePolling } from "../../../providers/polling-provider"
+import { useWidgets } from "../../../providers/widget-provider"
+import { getErrorMessage } from "../../../utils/error-messages"
+import ImportProducts from "../batch-job/import"
+import NewProduct from "../new"
+
+const VIEWS = ["products", "collections"]
+
+const Overview = () => {
+  const { t } = useTranslation()
+  const navigate = useNavigate()
+  const location = useLocation()
+  const [view, setView] = useState("products")
+  const {
+    state: createProductState,
+    close: closeProductCreate,
+    open: openProductCreate,
+  } = useToggleState(
+    !location.search.includes("view=collections") &&
+      location.search.includes("modal=new")
+  )
+
+  const { resetInterval } = usePolling()
+  const createBatchJob = useAdminCreateBatchJob()
+
+  const notification = useNotification()
+
+  const createCollection = useAdminCreateCollection()
+
+  const { getWidgets } = useWidgets()
+
+  useEffect(() => {
+    if (location.search.includes("?view=collections")) {
+      setView("collections")
+    }
+  }, [location])
+
+  useEffect(() => {
+    location.search = ""
+  }, [view])
+
+  const CurrentView = () => {
+    switch (view) {
+      case "products":
+        return <ProductTable />
+      default:
+        return <CollectionsTable />
+    }
+  }
+
+  const CurrentAction = () => {
+    switch (view) {
+      case "products":
+        return (
+          <div className="flex space-x-2">
+            <Button
+              variant="secondary"
+              size="small"
+              onClick={() => openImportModal()}
+            >
+              <UploadIcon size={20} />
+              {t("overview-import-products", "Import Products")}
+            </Button>
+            <Button
+              variant="secondary"
+              size="small"
+              onClick={() => openExportModal()}
+            >
+              <ExportIcon size={20} />
+              {t("overview-export-products", "Export Products")}
+            </Button>
+            <Button
+              variant="secondary"
+              size="small"
+              onClick={openProductCreate}
+            >
+              <PlusIcon size={20} />
+              {t("overview-new-product", "New Product")}
+            </Button>
+          </div>
+        )
+
+      default:
+        return (
+          <div className="flex space-x-2">
+            <Button
+              variant="secondary"
+              size="small"
+              onClick={() => setShowNewCollection(!showNewCollection)}
+            >
+              <PlusIcon size={20} />
+              {t("overview-new-collection", "New Collection")}
+            </Button>
+          </div>
+        )
+    }
+  }
+
+  const [showNewCollection, setShowNewCollection] = useState(false)
+  const {
+    open: openExportModal,
+    close: closeExportModal,
+    state: exportModalOpen,
+  } = useToggleState(
+    !location.search.includes("view=collections") &&
+      location.search.includes("modal=export")
+  )
+
+  const {
+    open: openImportModal,
+    close: closeImportModal,
+    state: importModalOpen,
+  } = useToggleState(
+    !location.search.includes("view=collections") &&
+      location.search.includes("modal=import")
+  )
+
+  const handleCreateCollection = async (data, colMetadata) => {
+    const metadata = colMetadata
+      .filter((m) => m.key && m.value) // remove empty metadata
+      .reduce((acc, next) => {
+        return {
+          ...acc,
+          [next.key]: next.value,
+        }
+      }, {})
+
+    await createCollection.mutateAsync(
+      { ...data, metadata },
+      {
+        onSuccess: ({ collection }) => {
+          notification(
+            t("overview-success", "Success"),
+            t(
+              "overview-successfully-created-collection",
+              "Successfully created collection"
+            ),
+            "success"
+          )
+          navigate(`/a/collections/${collection.id}`)
+          setShowNewCollection(false)
+        },
+        onError: (err) =>
+          notification(
+            t("overview-error", "Error"),
+            getErrorMessage(err),
+            "error"
+          ),
+      }
+    )
+  }
+
+  const handleCreateExport = () => {
+    const reqObj = {
+      type: "product-export",
+      context: {},
+      dry_run: false,
+    }
+
+    createBatchJob.mutate(reqObj, {
+      onSuccess: () => {
+        resetInterval()
+        notification(
+          t("overview-success", "Success"),
+          t(
+            "overview-successfully-initiated-export",
+            "Successfully initiated export"
+          ),
+          "success"
+        )
+      },
+      onError: (err) => {
+        notification(
+          t("overview-error", "Error"),
+          getErrorMessage(err),
+          "error"
+        )
+      },
+    })
+
+    closeExportModal()
+  }
+
+  return (
+    <>
+      <div className="gap-y-xsmall flex h-full grow flex-col">
+        {getWidgets("product.list.before").map((w, i) => {
+          return (
+            <WidgetContainer
+              key={i}
+              injectionZone={"product.list.before"}
+              widget={w}
+              entity={undefined}
+            />
+          )
+        })}
+        <div className="flex w-full grow flex-col">
+          <BodyCard
+            forceDropdown={false}
+            customActionable={CurrentAction()}
+            customHeader={
+              <TableViewHeader
+                views={VIEWS}
+                setActiveView={setView}
+                activeView={view}
+              />
+            }
+            className="h-fit"
+          >
+            <CurrentView />
+          </BodyCard>
+          <Spacer />
+        </div>
+        {getWidgets("product.list.after").map((w, i) => {
+          return (
+            <WidgetContainer
+              key={i}
+              injectionZone={"product.list.after"}
+              widget={w}
+              entity={undefined}
+            />
+          )
+        })}
+      </div>
+
+      {showNewCollection && (
+        <AddCollectionModal
+          onClose={() => setShowNewCollection(!showNewCollection)}
+          onSubmit={handleCreateCollection}
+        />
+      )}
+      {exportModalOpen && (
+        <ExportModal
+          title="Export Products"
+          handleClose={() => closeExportModal()}
+          onSubmit={handleCreateExport}
+          loading={createBatchJob.isLoading}
+        />
+      )}
+      {importModalOpen && (
+        <ImportProducts handleClose={() => closeImportModal()} />
+      )}
+      <Fade isVisible={createProductState} isFullScreen={true}>
+        <NewProduct onClose={closeProductCreate} />
+      </Fade>
+    </>
+  )
+}
+
+export default Overview

package/.cache/admin/src/domain/publishable-api-keys/index.tsx

@@ -0,0 +1,33 @@
+import { Route, Routes } from "react-router-dom"
+import RouteContainer from "../../components/extensions/route-container"
+import { useRoutes } from "../../providers/route-provider"
+
+import Index from "./pages"
+
+const PublishableApiKeysRoute = () => {
+  const { getNestedRoutes } = useRoutes()
+
+  const nestedRoutes = getNestedRoutes("/publishable-api-keys")
+
+  return (
+    <Routes>
+      <Route index element={<Index />} />
+      {nestedRoutes.map((r, i) => {
+        return (
+          <Route
+            path={r.path}
+            key={i}
+            element={
+              <RouteContainer
+                route={r}
+                previousPath={"/publishable-api-keys"}
+              />
+            }
+          />
+        )
+      })}
+    </Routes>
+  )
+}
+
+export default PublishableApiKeysRoute

package/.cache/admin/src/domain/publishable-api-keys/modals/add-sales-channels.tsx

@@ -0,0 +1,149 @@
+import { useRef, useState } from "react"
+import { useAdminSalesChannels } from "medusa-react"
+import { SalesChannel } from "@medusajs/medusa"
+import { useTranslation } from "react-i18next"
+
+import SideModal from "../../../components/molecules/modal/side-modal"
+import Button from "../../../components/fundamentals/button"
+import CrossIcon from "../../../components/fundamentals/icons/cross-icon"
+import InputField from "../../../components/molecules/input"
+import SearchIcon from "../../../components/fundamentals/icons/search-icon"
+import SalesChannelTable from "../tables/sales-channels-table"
+
+const LIMIT = 12
+
+const containsIdenticalKeys = (
+  a: Record<string, any>,
+  b: Record<string, any>
+) => {
+  a = Object.keys(a)
+  b = Object.keys(b)
+  return a.length === b.length && a.every((value) => b.includes(value))
+}
+
+type AddSalesChannelsSideModalProps = {
+  close: () => void
+  isVisible: boolean
+  selectedChannels: Record<string, SalesChannel>
+  setSelectedChannels: (arg: any) => void
+}
+
+/**
+ * Modal for adding sales channels to a new PK during creation.
+ */
+function AddSalesChannelsSideModal(props: AddSalesChannelsSideModalProps) {
+  const tableRef = useRef()
+  const { isVisible, close, selectedChannels, setSelectedChannels } = props
+
+  const [_selectedChannels, _setSelectedChannels] = useState<
+    Record<number, SalesChannel>
+  >({})
+
+  const [offset, setOffset] = useState(0)
+  const [search, setSearch] = useState("")
+  const { t } = useTranslation()
+
+  const {
+    sales_channels: data = [],
+    isLoading,
+    count,
+  } = useAdminSalesChannels(
+    { q: search, limit: LIMIT, offset },
+    { keepPreviousData: true }
+  )
+
+  const onSave = () => {
+    setSelectedChannels(_selectedChannels)
+    setOffset(0)
+    setSearch("")
+    close()
+  }
+
+  const onClose = () => {
+    setOffset(0)
+    setSearch("")
+
+    _setSelectedChannels(selectedChannels)
+
+    Object.values(selectedChannels).map((channel) =>
+      tableRef.current?.toggleRowSelected(channel.id, true)
+    )
+
+    close()
+  }
+
+  return (
+    <SideModal close={onClose} isVisible={!!isVisible}>
+      <div className="flex h-full flex-col justify-between p-6">
+        {/* === HEADER === */}
+
+        <div className="flex items-center justify-between">
+          <h3 className="inter-large-semibold flex items-center gap-2 text-xl text-gray-900">
+            {t("modals-add-sales-channels", "Add sales channels")}
+          </h3>
+          <Button
+            variant="secondary"
+            className="h-8 w-8 p-2"
+            onClick={props.close}
+          >
+            <CrossIcon size={20} className="text-grey-50" />
+          </Button>
+        </div>
+        {/* === DIVIDER === */}
+
+        <div className="flex-grow">
+          <div className="my-6">
+            <InputField
+              small
+              name="name"
+              type="string"
+              value={search}
+              className="h-[32px]"
+              placeholder={t("modals-find-channels", "Find channels")}
+              prefix={<SearchIcon size={16} />}
+              onChange={(ev) => setSearch(ev.target.value)}
+            />
+          </div>
+
+          <SalesChannelTable
+            ref={tableRef}
+            query={search}
+            data={data}
+            offset={offset}
+            count={count || 0}
+            setOffset={setOffset}
+            isLoading={isLoading}
+            selectedChannels={_selectedChannels}
+            setSelectedChannels={_setSelectedChannels}
+          />
+        </div>
+        {/* === DIVIDER === */}
+
+        <div
+          className="block h-[1px] bg-gray-200"
+          style={{ margin: "24px -24px" }}
+        />
+        {/* === FOOTER === */}
+
+        <div className="flex justify-end gap-2">
+          <Button size="small" variant="ghost" onClick={onClose}>
+            {t("modals-cancel", "Cancel")}
+          </Button>
+          <Button
+            size="small"
+            variant="primary"
+            onClick={onSave}
+            disabled={containsIdenticalKeys(
+              _selectedChannels,
+              selectedChannels
+            )}
+          >
+            {t("modals-save-and-close", "Save and close")}
+          </Button>
+        </div>
+      </div>
+    </SideModal>
+  )
+}
+
+export default AddSalesChannelsSideModal

package/.cache/admin/src/domain/publishable-api-keys/modals/details.tsx

@@ -0,0 +1,116 @@
+import { useEffect, useState } from "react"
+
+import { PublishableApiKey } from "@medusajs/medusa"
+import { useTranslation } from "react-i18next"
+
+import Button from "../../../components/fundamentals/button"
+import InputField from "../../../components/molecules/input"
+import SideModal from "../../../components/molecules/modal/side-modal"
+import CrossIcon from "../../../components/fundamentals/icons/cross-icon"
+import { useAdminUpdatePublishableApiKey } from "medusa-react"
+import useNotification from "../../../hooks/use-notification"
+
+type DetailsModalProps = {
+  close: () => void
+  selectedKey?: PublishableApiKey
+}
+
+/**
+ * Publishable Key details container.
+ */
+function DetailsModal(props: DetailsModalProps) {
+  const { close, selectedKey } = props
+  const notification = useNotification()
+  const { t } = useTranslation()
+
+  const [name, setName] = useState(selectedKey?.title)
+
+  const { mutateAsync: updateKey } = useAdminUpdatePublishableApiKey(
+    selectedKey?.id as string
+  )
+
+  useEffect(() => {
+    if (selectedKey) {
+      setName(selectedKey.title)
+    }
+  }, [selectedKey])
+
+  const onSave = async () => {
+    try {
+      await updateKey({ title: name })
+      close()
+      notification(
+        t("modals-success", "Success"),
+        t("modals-updated-the-api-key", "Updated the API key"),
+        "success"
+      )
+    } catch (e) {
+      notification(
+        t("modals-error", "Error"),
+        t(
+          "modals-failed-to-update-the-api-key",
+          "Failed to update the API key"
+        ),
+        "error"
+      )
+    }
+  }
+
+  return (
+    <SideModal close={close} isVisible={!!selectedKey}>
+      <div className="flex h-full flex-col justify-between p-6">
+        {/* === HEADER === */}
+
+        <div className="flex items-center justify-between">
+          <h3 className="inter-large-semibold text-xl text-gray-900">
+            {t("modals-edit-api-key-details", "Edit API key details")}
+          </h3>
+          <Button variant="ghost" onClick={close}>
+            <CrossIcon size={20} className="text-grey-40" />
+          </Button>
+        </div>
+        {/* === DIVIDER === */}
+
+        <div
+          className="block h-[1px] bg-gray-200"
+          style={{ margin: "24px -24px" }}
+        />
+        {/* === BODY === */}
+
+        <div className="flex-grow">
+          <InputField
+            label={t("modals-title", "Title")}
+            type="string"
+            name="name"
+            value={name}
+            placeholder={t("modals-name-your-key", "Name your key")}
+            onChange={({ target: { value } }) => setName(value)}
+          />
+        </div>
+        {/* === DIVIDER === */}
+
+        <div
+          className="block h-[1px] bg-gray-200"
+          style={{ margin: "24px -24px" }}
+        />
+        {/* === FOOTER === */}
+
+        <div className="flex justify-end gap-2">
+          <Button size="small" variant="ghost" onClick={close}>
+            {t("modals-cancel", "Cancel")}
+          </Button>
+          <Button
+            size="small"
+            variant="primary"
+            onClick={onSave}
+            disabled={name === props.selectedKey?.title}
+          >
+            {t("modals-save-and-close", "Save and close")}
+          </Button>
+        </div>
+      </div>
+    </SideModal>
+  )
+}
+
+export default DetailsModal