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

package/.cache/admin/src/hooks/use-command-history.tsx

@@ -0,0 +1,66 @@
+import * as React from "react"
+
+/**
+ * Base interface for a command that can be managed
+ * by the `useCommandHistory` hook.
+ */
+interface Command {
+  execute: () => void
+  undo: () => void
+  redo: () => void
+}
+
+const useCommandHistory = (maxHistory = 20) => {
+  const [past, setPast] = React.useState<Command[]>([])
+  const [future, setFuture] = React.useState<Command[]>([])
+
+  const canUndo = past.length > 0
+  const canRedo = future.length > 0
+
+  const undo = React.useCallback(() => {
+    if (!canUndo) {
+      return
+    }
+
+    const previous = past[past.length - 1]
+    const newPast = past.slice(0, past.length - 1)
+
+    previous.undo()
+
+    setPast(newPast)
+    setFuture([previous, ...future.slice(0, maxHistory - 1)])
+  }, [canUndo, future, past, maxHistory])
+
+  const redo = React.useCallback(() => {
+    if (!canRedo) {
+      return
+    }
+
+    const next = future[0]
+    const newFuture = future.slice(1)
+
+    next.redo()
+
+    setPast([...past, next].slice(0, maxHistory - 1))
+    setFuture(newFuture)
+  }, [canRedo, future, past, maxHistory])
+
+  const execute = React.useCallback(
+    (command: Command) => {
+      command.execute()
+      setPast((past) => [...past, command].slice(0, maxHistory - 1))
+      setFuture([])
+    },
+    [maxHistory]
+  )
+
+  return {
+    undo,
+    redo,
+    execute,
+    canUndo,
+    canRedo,
+  }
+}
+
+export { useCommandHistory, type Command }

package/.cache/admin/src/hooks/use-computed-height.ts

@@ -0,0 +1,19 @@
+import { useLayoutEffect, useRef } from "react"
+import { useWindowDimensions } from "./use-window-dimensions"
+
+export const useComputedHeight = (bottomPad: number) => {
+  const ref = useRef(null)
+  const heightRef = useRef(0)
+
+  const { height } = useWindowDimensions()
+
+  useLayoutEffect(() => {
+    if (ref.current) {
+      const { top } = ref.current.getBoundingClientRect()
+      // take the inner height of the window, subtract 32 from it (for the bottom padding), then subtract that from the top position of our grid row (wherever that is)
+      heightRef.current = height - bottomPad - top
+    }
+  }, [bottomPad, height])
+
+  return { ref, height: heightRef.current }
+}

package/.cache/admin/src/hooks/use-debounce.ts

@@ -0,0 +1,22 @@
+import { useEffect, useState } from "react"
+
+export const useDebounce = <T>(value: T, delay: number): T => {
+  // State and setters for debounced value
+  const [debouncedValue, setDebouncedValue] = useState(value)
+  useEffect(
+    () => {
+      // Update debounced value after delay
+      const handler = setTimeout(() => {
+        setDebouncedValue(value)
+      }, delay)
+      // Cancel the timeout if value changes (also on delay change or unmount)
+      // This is how we prevent debounced value from updating if value is changed ...
+      // .. within the delay period. Timeout gets cleared and restarted.
+      return () => {
+        clearTimeout(handler)
+      }
+    },
+    [value, delay] // Only re-call effect if value or delay changes
+  )
+  return debouncedValue
+}

package/.cache/admin/src/hooks/use-debounced-search-param.tsx

@@ -0,0 +1,33 @@
+import * as React from "react"
+import { useNavigate, useSearchParams } from "react-router-dom"
+
+import { useDebounce } from "./use-debounce"
+
+/**
+ * Hook for managing a debounced search param
+ */
+export const useDebouncedSearchParam = () => {
+  const [searchParams] = useSearchParams()
+  const navigate = useNavigate()
+
+  const [query, setQuery] = React.useState<string>(searchParams.get("q") || "")
+
+  const debouncedQuery = useDebounce(query, 500)
+
+  React.useEffect(() => {
+    const current = new URLSearchParams(searchParams)
+
+    if (!debouncedQuery) {
+      current.delete("q")
+    } else {
+      current.set("q", debouncedQuery)
+    }
+
+    navigate({ search: current.toString() }, { replace: true })
+  }, [debouncedQuery, searchParams, navigate])
+
+  return {
+    query,
+    setQuery,
+  }
+}

package/.cache/admin/src/hooks/use-detect-change.tsx

@@ -0,0 +1,50 @@
+import { ReactNode, useEffect } from "react"
+import { toast } from "react-hot-toast"
+import SaveNotification from "../components/atoms/save-notification"
+
+type Options = {
+  fn: () => Promise<void>
+  title: string
+  message: string
+  icon?: ReactNode
+}
+
+type UseDetectChangeProps = {
+  isDirty: boolean
+  reset: () => void
+  options: Options
+}
+
+const useDetectChange = ({ isDirty, reset, options }: UseDetectChangeProps) => {
+  useEffect(() => {
+    const { fn, title, message, icon } = options
+
+    const showToaster = () => {
+      toast.custom(
+        (t) => (
+          <SaveNotification
+            toast={t}
+            icon={icon}
+            title={title}
+            message={message}
+            onSave={fn}
+            reset={reset}
+          />
+        ),
+        {
+          position: "bottom-right",
+          duration: Infinity,
+          id: "form-change",
+        }
+      )
+    }
+
+    if (isDirty) {
+      showToaster()
+    } else {
+      toast.dismiss("form-change")
+    }
+  }, [isDirty, options])
+}
+
+export default useDetectChange

package/.cache/admin/src/hooks/use-edit-product-actions.tsx

@@ -0,0 +1,193 @@
+import {
+  AdminPostProductsProductReq,
+  AdminPostProductsProductVariantsReq,
+  AdminPostProductsProductVariantsVariantReq,
+  Product,
+} from "@medusajs/medusa"
+import {
+  adminInventoryItemsKeys,
+  useAdminCreateVariant,
+  useAdminDeleteProduct,
+  useAdminDeleteVariant,
+  useAdminProduct,
+  useAdminUpdateProduct,
+  useAdminUpdateVariant,
+  useMedusa,
+} from "medusa-react"
+
+import { getErrorMessage } from "../utils/error-messages"
+import { useFeatureFlag } from "../providers/feature-flag-provider"
+import useImperativeDialog from "./use-imperative-dialog"
+import { useNavigate } from "react-router-dom"
+import useNotification from "./use-notification"
+import { useQueryClient } from "@tanstack/react-query"
+
+const useEditProductActions = (productId: string) => {
+  const dialog = useImperativeDialog()
+  const navigate = useNavigate()
+  const notification = useNotification()
+  const getProduct = useAdminProduct(productId)
+  const updateProduct = useAdminUpdateProduct(productId)
+  const deleteProduct = useAdminDeleteProduct(productId)
+  const updateVariant = useAdminUpdateVariant(productId)
+  const deleteVariant = useAdminDeleteVariant(productId)
+  const addVariant = useAdminCreateVariant(productId)
+  const queryClient = useQueryClient()
+  const { isFeatureEnabled } = useFeatureFlag()
+  const { client } = useMedusa()
+
+  const onDelete = async () => {
+    const shouldDelete = await dialog({
+      heading: "Delete Product",
+      text: "Are you sure you want to delete this product",
+    })
+
+    if (shouldDelete) {
+      if (isFeatureEnabled("inventoryService") && getProduct.product) {
+        const { variants } = await client.admin.variants.list({
+          id: getProduct.product.variants.map((v) => v.id),
+          expand: "inventory_items",
+        })
+
+        variants
+          .filter(({ inventory_items }) => !!inventory_items?.length)
+          .map(({ inventory_items }) =>
+            client.admin.inventoryItems.delete(
+              inventory_items![0].inventory_item_id
+            )
+          )
+        queryClient.invalidateQueries(adminInventoryItemsKeys.lists())
+      }
+
+      deleteProduct.mutate(undefined, {
+        onSuccess: () => {
+          notification("Success", "Product deleted successfully", "success")
+          navigate("/a/products/")
+        },
+        onError: (err) => {
+          notification("Error", getErrorMessage(err), "error")
+        },
+      })
+    }
+  }
+
+  const onAddVariant = (
+    payload: AdminPostProductsProductVariantsReq,
+    onSuccess: (variantRes: Product) => void,
+    successMessage = "Variant was created successfully"
+  ) => {
+    addVariant.mutate(payload, {
+      onSuccess: (data) => {
+        notification("Success", successMessage, "success")
+        getProduct.refetch()
+        onSuccess(data.product)
+      },
+      onError: (err) => {
+        notification("Error", getErrorMessage(err), "error")
+      },
+    })
+  }
+
+  const onUpdateVariant = (
+    id: string,
+    payload: Partial<AdminPostProductsProductVariantsVariantReq>,
+    onSuccess: () => void,
+    successMessage = "Variant was updated successfully"
+  ) => {
+    updateVariant.mutate(
+      {
+        variant_id: id,
+        ...payload,
+      },
+      {
+        onSuccess: () => {
+          notification("Success", successMessage, "success")
+          getProduct.refetch()
+          onSuccess()
+        },
+        onError: (err) => {
+          notification("Error", getErrorMessage(err), "error")
+        },
+      }
+    )
+  }
+
+  const onDeleteVariant = (
+    variantId: string,
+    onSuccess?: () => void,
+    successMessage = "Variant was successfully deleted"
+  ) => {
+    deleteVariant.mutate(variantId, {
+      onSuccess: () => {
+        notification("Success", successMessage, "success")
+        getProduct.refetch()
+        if (onSuccess) {
+          onSuccess()
+        }
+      },
+      onError: (err) => {
+        notification("Error", getErrorMessage(err), "error")
+      },
+    })
+  }
+
+  const onUpdate = (
+    payload: Partial<AdminPostProductsProductReq>,
+    onSuccess: () => void,
+    successMessage = "Product was successfully updated"
+  ) => {
+    updateProduct.mutate(
+      // @ts-ignore TODO fix images being required
+      payload,
+      {
+        onSuccess: () => {
+          notification("Success", successMessage, "success")
+          onSuccess()
+        },
+        onError: (err) => {
+          notification("Error", getErrorMessage(err), "error")
+        },
+      }
+    )
+  }
+
+  const onStatusChange = (currentStatus: string) => {
+    const newStatus = currentStatus === "published" ? "draft" : "published"
+    updateProduct.mutate(
+      {
+        // @ts-ignore TODO fix update type in API
+        status: newStatus,
+      },
+      {
+        onSuccess: () => {
+          const pastTense = newStatus === "published" ? "published" : "drafted"
+          notification(
+            "Success",
+            `Product ${pastTense} successfully`,
+            "success"
+          )
+        },
+        onError: (err) => {
+          notification("Ooops", getErrorMessage(err), "error")
+        },
+      }
+    )
+  }
+
+  return {
+    getProduct,
+    onDelete,
+    onStatusChange,
+    onUpdate,
+    onAddVariant,
+    onUpdateVariant,
+    onDeleteVariant,
+    updating: updateProduct.isLoading,
+    deleting: deleteProduct.isLoading,
+    addingVariant: addVariant.isLoading,
+    updatingVariant: updateVariant.isLoading,
+    deletingVariant: deleteVariant.isLoading,
+  }
+}
+
+export default useEditProductActions

package/.cache/admin/src/hooks/use-extension-base-props.tsx

@@ -0,0 +1,25 @@
+import { Notify } from "../types/extensions"
+import useNotification from "./use-notification"
+
+export const useExtensionBaseProps = () => {
+  const notification = useNotification()
+
+  const notify: Notify = {
+    success: (title: string, message: string) => {
+      notification(title, message, "success")
+    },
+    error: (title: string, message: string) => {
+      notification(title, message, "error")
+    },
+    warn: (title: string, message: string) => {
+      notification(title, message, "warning")
+    },
+    info: (title: string, message: string) => {
+      notification(title, message, "info")
+    },
+  }
+
+  return {
+    notify,
+  }
+}

package/.cache/admin/src/hooks/use-highlight-search.tsx

@@ -0,0 +1,33 @@
+import { useEffect } from "react"
+
+export const useHighlightSearch = (name: string, query: string) => {
+  function getHighlightedSearch(text: string) {
+    const parts = text.split(new RegExp(`(${query})`, "gi"))
+
+    const str: string[] = []
+
+    for (const part of parts) {
+      if (part.toLowerCase() === query.toLowerCase()) {
+        str.push(`<mark class="bg-orange-10">${part}</mark>`)
+      } else {
+        str.push(part)
+      }
+    }
+
+    return str.join("")
+  }
+
+  useEffect(() => {
+    const children = document.getElementsByName(name)
+
+    if (children) {
+      const childArray = Array.from(children)
+      for (const child of childArray) {
+        child.innerHTML = child.innerHTML.replace(
+          child.innerHTML,
+          getHighlightedSearch(child.innerText)
+        )
+      }
+    }
+  }, [query, name])
+}

package/.cache/admin/src/hooks/use-imperative-dialog.tsx

@@ -0,0 +1,139 @@
+import React, { useState } from "react"
+import { createRoot } from "react-dom/client"
+import Button from "../components/fundamentals/button"
+import InputField from "../components/molecules/input"
+import Modal from "../components/molecules/modal"
+
+const DeleteDialog = ({
+  open,
+  heading,
+  text,
+  onConfirm,
+  onCancel,
+  confirmText = "Yes, confirm",
+  cancelText = "Cancel",
+  extraConfirmation = false,
+  entityName,
+}) => {
+  const [confirmationString, setConfirmationString] = useState<string>()
+
+  return (
+    <Modal open={open} handleClose={onCancel} isLargeModal={false}>
+      <Modal.Body>
+        <Modal.Content className="!py-large">
+          <div className="flex flex-col">
+            <span className="inter-large-semibold">{heading}</span>
+            <span className="inter-base-regular text-grey-50 mt-1">{text}</span>
+          </div>
+          {extraConfirmation && (
+            <div className="my-base flex flex-col">
+              <span className="inter-base-regular text-grey-50 mt-1">
+                Type the name{" "}
+                <span className="font-semibold">"{entityName}"</span> to
+                confirm.
+              </span>
+              <InputField
+                autoFocus={true}
+                placeholder={entityName}
+                className={"mt-base"}
+                onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
+                  setConfirmationString(event.target.value)
+                }
+              />
+            </div>
+          )}
+        </Modal.Content>
+        <Modal.Footer className="border-none !pt-0">
+          <div className="flex w-full justify-end">
+            <Button
+              variant="secondary"
+              className="text-small mr-2 justify-center"
+              size="small"
+              onClick={onCancel}
+            >
+              {cancelText}
+            </Button>
+            <Button
+              size="small"
+              className="text-small justify-center"
+              variant="nuclear"
+              onClick={onConfirm}
+              disabled={extraConfirmation && entityName !== confirmationString}
+            >
+              {confirmText}
+            </Button>
+          </div>
+        </Modal.Footer>
+      </Modal.Body>
+    </Modal>
+  )
+}
+
+type ImperativeDialogProps =
+  | {
+      heading: string
+      text: string
+      confirmText?: string
+      cancelText?: string
+    } & (
+      | {
+          extraConfirmation: true
+          entityName: string
+        }
+      | {
+          extraConfirmation?: false
+          entityName?: never
+        }
+    )
+
+const useImperativeDialog = () => {
+  return ({
+    heading,
+    text,
+    confirmText,
+    cancelText,
+    extraConfirmation,
+    entityName,
+  }: ImperativeDialogProps): Promise<boolean> => {
+    // We want a promise here so we can "await" the user's action (either confirm or cancel)
+    return new Promise((resolve) => {
+      const mountRoot = createRoot(document.createElement("div"))
+      let open = true
+
+      const onConfirm = () => {
+        open = false
+        resolve(true)
+        // trigger a rerender to close the dialog
+        render()
+      }
+
+      const onCancel = () => {
+        open = false
+        resolve(false)
+        // trigger a rerender to close the dialog
+        render()
+      }
+
+      // attach the dialog in the mount node
+      const render = () => {
+        mountRoot.render(
+          <DeleteDialog
+            heading={heading}
+            text={text}
+            open={open}
+            onCancel={onCancel}
+            onConfirm={onConfirm}
+            confirmText={confirmText}
+            cancelText={cancelText}
+            extraConfirmation={extraConfirmation}
+            entityName={entityName}
+          />
+        )
+      }
+
+      render()
+    })
+  }
+}
+
+export default useImperativeDialog

package/.cache/admin/src/hooks/use-is-me.tsx

@@ -0,0 +1,12 @@
+import { useAdminGetSession } from "medusa-react"
+import { useMemo } from "react"
+
+export const useIsMe = (userId: string | undefined) => {
+  const { user } = useAdminGetSession()
+
+  const isMe = useMemo(() => {
+    return user?.id === userId
+  }, [user, userId])
+
+  return isMe
+}

package/.cache/admin/src/hooks/use-notification.tsx

@@ -0,0 +1,20 @@
+import { toast } from "react-hot-toast"
+import Notification, {
+  NotificationTypes,
+} from "../components/atoms/notification"
+
+const useNotification = () => {
+  return (title: string, message: string, type: NotificationTypes) => {
+    toast.custom(
+      (t) => (
+        <Notification toast={t} type={type} title={title} message={message} />
+      ),
+      {
+        position: "top-right",
+        duration: 3000,
+      }
+    )
+  }
+}
+
+export default useNotification

package/.cache/admin/src/hooks/use-observe-width.ts

@@ -0,0 +1,30 @@
+import { MutableRefObject, useEffect, useRef, useState } from "react"
+
+export const useObserveWidth = (ref: MutableRefObject<any>): number => {
+  const [currentWidth, setCurrentWidth] = useState(0)
+
+  const observer = useRef(
+    new ResizeObserver((entries) => {
+      const { width } = entries[0].contentRect
+
+      setCurrentWidth(width)
+    })
+  )
+
+  useEffect(() => {
+    const currentRef = ref.current
+    const currentObserver = observer.current
+
+    if (currentRef && currentObserver) {
+      currentObserver.observe(currentRef)
+    }
+
+    return () => {
+      if (currentObserver && currentRef) {
+        currentObserver.unobserve(currentRef)
+      }
+    }
+  }, [ref, observer])
+
+  return currentWidth
+}

package/.cache/admin/src/hooks/use-on-click-outside.tsx

@@ -0,0 +1,28 @@
+import { RefObject, useEffect } from "react"
+
+type Handler = (event: MouseEvent) => void
+
+const useOnClickOutside = <T extends HTMLElement = HTMLElement>(
+  ref: RefObject<T>,
+  handler: Handler
+): void => {
+  useEffect(() => {
+    const handleClick = (event: MouseEvent) => {
+      const el = ref?.current
+
+      if (!el || el.contains(event.target as Node)) {
+        return
+      }
+
+      handler(event)
+    }
+
+    document.addEventListener("click", handleClick)
+
+    return () => {
+      document.removeEventListener("click", handleClick)
+    }
+  }, [ref])
+}
+
+export default useOnClickOutside

package/.cache/admin/src/hooks/use-outside-click.ts

@@ -0,0 +1,19 @@
+import { useEffect } from "react"
+
+const useOutsideClick = (callback: () => void, ref: any, capture = false) => {
+  useEffect(() => {
+    const handleClickOutside = (e) => {
+      if (!ref.current.contains(e.target)) {
+        callback()
+      }
+    }
+
+    document.addEventListener("click", handleClickOutside, capture)
+
+    return () => {
+      document.removeEventListener("click", handleClickOutside, capture)
+    }
+  }, [callback, ref, capture])
+}
+
+export default useOutsideClick