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

package/.cache/admin/src/components/molecules/modal/side-modal.tsx

@@ -0,0 +1,63 @@
+import { PropsWithChildren } from "react"
+import { AnimatePresence, motion } from "framer-motion"
+import * as Portal from "@radix-ui/react-portal"
+
+const MODAL_WIDTH = 560
+
+type SideModalProps = PropsWithChildren<{
+  close: () => void
+  isVisible: boolean
+}>
+
+/**
+ * Side modal displayed as right drawer on open.
+ */
+function SideModal(props: SideModalProps) {
+  const { isVisible, children, close } = props
+  return (
+    <Portal.Root>
+      <AnimatePresence>
+        {isVisible && (
+          <>
+            <motion.div
+              onClick={close}
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+              transition={{ ease: "easeInOut" }}
+              style={{
+                position: "fixed",
+                top: 0,
+                left: 0,
+                width: "100%",
+                height: "100%",
+                zIndex: 99,
+                background: "rgba(0,0,0,.3)",
+              }}
+            ></motion.div>
+            <motion.div
+              transition={{ ease: "easeInOut" }}
+              initial={{ right: -MODAL_WIDTH }}
+              style={{
+                position: "fixed",
+                height: "100%",
+                width: MODAL_WIDTH,
+                background: "white",
+                right: 0,
+                top: 0,
+                zIndex: 200,
+              }}
+              className="overflow-hidden rounded border"
+              animate={{ right: 0 }}
+              exit={{ right: -MODAL_WIDTH }}
+            >
+              {children}
+            </motion.div>
+          </>
+        )}
+      </AnimatePresence>
+    </Portal.Root>
+  )
+}
+
+export default SideModal

package/.cache/admin/src/components/molecules/modal/stepped-modal.tsx

@@ -0,0 +1,227 @@
+import clsx from "clsx"
+import React, { ReactNode, useReducer } from "react"
+import Button from "../../fundamentals/button"
+import Modal, { ModalProps } from "../../molecules/modal"
+import LayeredModal, { ILayeredModalContext } from "./layered-modal"
+
+enum SteppedActions {
+  ENABLENEXTPAGE,
+  DISABLENEXTPAGE,
+  GOTONEXTPAGE,
+  GOTOPREVIOUSPAGE,
+  SETPAGE,
+  SUBMIT,
+  RESET,
+}
+
+type ISteppedContext = {
+  currentStep: number
+  nextStepEnabled: boolean
+  enableNextPage: () => void
+  disableNextPage: () => void
+  goToNextPage: () => void
+  goToPreviousPage: () => void
+  submit: () => void
+  reset: () => void
+  setPage: (page: number) => void
+}
+
+const defaultContext: ISteppedContext = {
+  currentStep: 0,
+  nextStepEnabled: true,
+  enableNextPage: () => {},
+  disableNextPage: () => {},
+  goToNextPage: () => {},
+  goToPreviousPage: () => {},
+  submit: () => {},
+  reset: () => {},
+  setPage: (page) => {},
+}
+
+export const SteppedContext = React.createContext(defaultContext)
+
+const reducer = (state, action) => {
+  switch (action.type) {
+    case SteppedActions.ENABLENEXTPAGE: {
+      return { ...state, nextStepEnabled: true }
+    }
+    case SteppedActions.DISABLENEXTPAGE: {
+      return { ...state, nextStepEnabled: false }
+    }
+    case SteppedActions.GOTONEXTPAGE: {
+      return { ...state, currentStep: state.currentStep + 1 }
+    }
+    case SteppedActions.GOTOPREVIOUSPAGE: {
+      return { ...state, currentStep: Math.max(0, state.currentStep - 1) }
+    }
+    case SteppedActions.SETPAGE: {
+      return {
+        ...state,
+        currentStep: action.payload > 0 ? action.payload : state.currentStep,
+      }
+    }
+    case SteppedActions.SUBMIT: {
+      return { ...state }
+    }
+    case SteppedActions.RESET: {
+      return { ...state, currentStep: 0, nextStepEnabled: true }
+    }
+  }
+}
+
+type SteppedProps = {
+  context: ISteppedContext
+  title: string
+  onSubmit: () => void
+  lastScreenIsSummary?: boolean
+  steps: ReactNode[]
+  layeredContext?: ILayeredModalContext
+} & ModalProps
+
+export const SteppedProvider = ({ children }) => {
+  const [state, dispatch] = useReducer(reducer, defaultContext)
+
+  return (
+    <SteppedContext.Provider
+      value={{
+        ...state,
+        enableNextPage: () => {
+          dispatch({ type: SteppedActions.ENABLENEXTPAGE })
+        },
+        disableNextPage: () => {
+          dispatch({ type: SteppedActions.DISABLENEXTPAGE })
+        },
+        goToNextPage: () => {
+          dispatch({ type: SteppedActions.GOTONEXTPAGE })
+        },
+        goToPreviousPage: () => {
+          dispatch({ type: SteppedActions.GOTOPREVIOUSPAGE })
+        },
+        submit: () => {
+          dispatch({ type: SteppedActions.SUBMIT })
+        },
+        setPage: (page: number) => {
+          dispatch({ type: SteppedActions.SETPAGE, payload: page })
+        },
+        reset: () => {
+          dispatch({ type: SteppedActions.RESET })
+        },
+      }}
+    >
+      {children}
+    </SteppedContext.Provider>
+  )
+}
+
+const SteppedModal: React.FC<SteppedProps> = ({
+  context,
+  steps,
+  layeredContext,
+  title,
+  onSubmit,
+  lastScreenIsSummary = false,
+  handleClose,
+  isLargeModal = true,
+}) => {
+  const resetAndClose = () => {
+    context.reset()
+    handleClose()
+  }
+
+  const resetAndSubmit = () => {
+    onSubmit()
+  }
+  return (
+    <ModalElement
+      layeredContext={layeredContext}
+      isLargeModal={isLargeModal}
+      handleClose={resetAndClose}
+    >
+      <Modal.Body
+        className={clsx(
+          "flex max-h-full flex-col justify-between transition-transform duration-100"
+        )}
+      >
+        <Modal.Header handleClose={resetAndClose}>
+          <div className="flex flex-col">
+            <h2 className="inter-xlarge-semibold">{title}</h2>
+            {!lastScreenIsSummary ||
+              (lastScreenIsSummary &&
+                context.currentStep !== steps.length - 1 && (
+                  <div className="flex items-center">
+                    <span className="text-grey-50 inter-small-regular mr-4 w-[70px]">{`Step ${
+                      context.currentStep + 1
+                    } of ${steps.length}`}</span>
+                    {steps.map((_, i) => (
+                      <span
+                        key={i}
+                        className={clsx(
+                          "mr-3 h-2 w-2 rounded-full",
+                          {
+                            "bg-grey-20": i > context.currentStep,
+                            "bg-violet-60": context.currentStep >= i,
+                          },
+                          {
+                            "outline-violet-20 outline outline-4":
+                              context.currentStep === i,
+                          }
+                        )}
+                      />
+                    ))}
+                  </div>
+                ))}
+          </div>
+        </Modal.Header>
+        <Modal.Content>{steps[context.currentStep]}</Modal.Content>
+      </Modal.Body>
+      <Modal.Footer>
+        <div className="gap-x-xsmall flex w-full justify-end">
+          <Button
+            variant="ghost"
+            size="small"
+            disabled={context.currentStep === 0}
+            onClick={() => context.goToPreviousPage()}
+            className="w-[112px]"
+          >
+            Back
+          </Button>
+          <Button
+            variant="primary"
+            size="small"
+            disabled={!context.nextStepEnabled}
+            onClick={() =>
+              context.currentStep === steps.length - 1
+                ? resetAndSubmit()
+                : context.goToNextPage()
+            }
+            className="w-[112px]"
+          >
+            {context.currentStep === steps.length - 1 ? "Submit" : "Next"}
+          </Button>
+        </div>
+      </Modal.Footer>
+    </ModalElement>
+  )
+}
+
+const ModalElement = ({
+  layeredContext,
+  handleClose,
+  isLargeModal = true,
+  children,
+}) =>
+  layeredContext ? (
+    <LayeredModal
+      context={layeredContext}
+      handleClose={handleClose}
+      isLargeModal={isLargeModal}
+    >
+      {children}
+    </LayeredModal>
+  ) : (
+    <Modal handleClose={handleClose} isLargeModal={isLargeModal}>
+      {children}
+    </Modal>
+  )
+
+export default SteppedModal

package/.cache/admin/src/components/molecules/native-select/index.tsx

@@ -0,0 +1,68 @@
+import * as RadixSelect from "@radix-ui/react-select"
+import clsx from "clsx"
+import React from "react"
+import CheckIcon from "../../fundamentals/icons/check-icon"
+import ChevronDownIcon from "../../fundamentals/icons/chevron-down"
+import ChevronUpIcon from "../../fundamentals/icons/chevron-up"
+
+type NativeSelectType = React.FC<NativeSelectProps> & {
+  Item: React.FC<ItemProps>
+}
+
+type NativeSelectProps = {
+  triggerProps?: RadixSelect.SelectTriggerProps
+} & RadixSelect.SelectProps
+
+const ICON_SIZE = 16
+
+const NativeSelect: NativeSelectType = ({
+  children,
+  triggerProps,
+  ...props
+}) => {
+  return (
+    <RadixSelect.Root {...props}>
+      <RadixSelect.SelectTrigger
+        className="inter-base-semibold flex items-center gap-3 px-2"
+        {...triggerProps}
+      >
+        <RadixSelect.Value />
+        <RadixSelect.Icon>
+          <ChevronDownIcon size={ICON_SIZE} />
+        </RadixSelect.Icon>
+      </RadixSelect.SelectTrigger>
+      <RadixSelect.Content
+        position="popper"
+        className="rounded-rounded scrollbar-hide border-grey-20 bg-grey-0 shadow-dropdown z-[9999] flex max-h-[305px] w-full overflow-y-auto border px-2 py-2"
+      >
+        <RadixSelect.ScrollUpButton className="to-grey-0 flex h-[25px] items-center justify-center bg-gradient-to-b from-transparent">
+          <ChevronUpIcon size={ICON_SIZE} />
+        </RadixSelect.ScrollUpButton>
+        <RadixSelect.Viewport className="p-2">{children}</RadixSelect.Viewport>
+        <RadixSelect.ScrollDownButton className="to-grey-0 flex h-[25px] items-center justify-center bg-gradient-to-b from-transparent">
+          <ChevronDownIcon size={ICON_SIZE} />
+        </RadixSelect.ScrollDownButton>
+      </RadixSelect.Content>
+    </RadixSelect.Root>
+  )
+}
+
+type ItemProps = RadixSelect.SelectItemProps
+
+const Item: React.FC<ItemProps> = ({ children, ...props }) => (
+  <RadixSelect.Item
+    className={clsx(
+      "inter-base-regular hover:bg-grey-10 relative flex items-center justify-start rounded py-1.5 px-9"
+    )}
+    {...props}
+  >
+    <RadixSelect.ItemIndicator className="bold-active-item absolute left-2.5 flex items-center justify-center pr-2.5">
+      <CheckIcon size={ICON_SIZE} />
+    </RadixSelect.ItemIndicator>
+    <RadixSelect.ItemText>{children}</RadixSelect.ItemText>
+  </RadixSelect.Item>
+)
+
+NativeSelect.Item = Item
+
+export default NativeSelect

package/.cache/admin/src/components/molecules/note-input/index.tsx

@@ -0,0 +1,76 @@
+import React, { useCallback, useRef, useState } from "react"
+import SendIcon from "../../fundamentals/icons/send-icon"
+import EmojiPicker from "../emoji-picker"
+
+type NoteInputProps = {
+  onSubmit: (note: string | undefined) => void
+}
+
+const NoteInput: React.FC<NoteInputProps> = ({ onSubmit }) => {
+  const [note, setNote] = useState<string | undefined>(undefined)
+  const inputRef = useRef<HTMLInputElement | null>(null)
+
+  const handleAddEmoji = (emoji: string) => {
+    setNote(`${note ? note : ""}${emoji}`)
+  }
+
+  const handleSubmit = () => {
+    if (onSubmit && note) {
+      onSubmit(note)
+      setNote("")
+    }
+  }
+
+  const onKeyDownHandler = useCallback(
+    (event) => {
+      switch (event.key) {
+        case "Enter":
+          event.preventDefault()
+          event.stopPropagation()
+          handleSubmit()
+          inputRef.current?.blur()
+          break
+        case "Esc":
+        case "Escape":
+          inputRef.current?.blur()
+          break
+        default:
+          break
+      }
+    },
+    [note, setNote, onSubmit]
+  )
+
+  return (
+    <form>
+      <div
+        className="py-xsmall px-small bg-grey-5 border-grey-20 rounded-rounded flex items-center border"
+        onClick={() => inputRef.current?.focus()}
+      >
+        <div className="gap-x-small flex flex-grow items-center">
+          <EmojiPicker onEmojiClick={handleAddEmoji} />
+          <input
+            type="text"
+            placeholder="Write a note..."
+            value={note}
+            onChange={(e) => setNote(e.target.value)}
+            className="inter-base-regular placeholder:text-grey-40 flex-grow bg-transparent focus:outline-none"
+            ref={inputRef}
+            id="note-input"
+            autoComplete="off"
+            onKeyDown={onKeyDownHandler}
+          />
+        </div>
+        <button
+          className="text-grey-30 hover:text-violet-60"
+          type="button"
+          onClick={handleSubmit}
+        >
+          <SendIcon size={20} />
+        </button>
+      </div>
+    </form>
+  )
+}
+
+export default NoteInput

package/.cache/admin/src/components/molecules/notification-bell/index.tsx

@@ -0,0 +1,21 @@
+import React from "react"
+import Button, { ButtonProps } from "../../fundamentals/button"
+import BellIcon from "../../fundamentals/icons/bell-icon"
+import BellNotiIcon from "../../fundamentals/icons/bell-noti-icon"
+
+type NotificationBellProps = ButtonProps & {
+  hasNotifications?: boolean
+}
+
+const NotificationBell: React.FC<NotificationBellProps> = ({
+  hasNotifications = false,
+  ...attributes
+}) => {
+  return (
+    <Button className="h-8 w-8" size="small" {...attributes}>
+      {hasNotifications ? <BellNotiIcon /> : <BellIcon />}
+    </Button>
+  )
+}
+
+export default NotificationBell

package/.cache/admin/src/components/molecules/numbered-item/index.tsx

@@ -0,0 +1,52 @@
+import React from "react"
+import Badge from "../../../components/fundamentals/badge"
+import Actionables, {
+  ActionType,
+} from "../../../components/molecules/actionables"
+
+type NumberedItemProps = {
+  actions?: ActionType[]
+  index: number
+  title: string
+  description?: React.ReactNode | string
+}
+
+const NumberedItem: React.FC<NumberedItemProps> = ({
+  actions,
+  index,
+  title,
+  description,
+}) => {
+  return (
+    <div className="p-base rounded-rounded gap-base flex items-center justify-between border">
+      <div className="gap-base flex w-full overflow-hidden">
+        <div>
+          <Badge
+            className="inter-base-semibold flex h-[40px] w-[40px] items-center justify-center"
+            variant="default"
+          >
+            §{index}
+          </Badge>
+        </div>
+        <div className="flex w-full flex-1 flex-col justify-center truncate">
+          <div className="inter-small-semibold">{title}</div>
+          {description &&
+            (typeof description === "string" ? (
+              <div className="inter-small-regular text-grey-50">
+                {description}
+              </div>
+            ) : (
+              description
+            ))}
+        </div>
+      </div>
+      {actions && (
+        <div>
+          <Actionables forceDropdown actions={actions} />
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default NumberedItem

package/.cache/admin/src/components/molecules/order-status/index.tsx

@@ -0,0 +1,113 @@
+import React from "react"
+import StatusIndicator from "../../fundamentals/status-indicator"
+
+type PaymentStatusProps = {
+  paymentStatus: string
+}
+
+type FulfillmentStatusProps = {
+  fulfillmentStatus: string
+}
+
+type OrderStatusProps = {
+  orderStatus: string
+}
+
+type ReturnStatusProps = {
+  returnStatus: string
+}
+
+type RefundStatusProps = {
+  refundStatus: string
+}
+
+const PaymentStatus: React.FC<PaymentStatusProps> = ({ paymentStatus }) => {
+  switch (paymentStatus) {
+    case "captured":
+      return <StatusIndicator title="Paid" variant="success" />
+    case "awaiting":
+      return <StatusIndicator title="Awaiting" variant="default" />
+    case "not_paid":
+      return <StatusIndicator title="Not paid" variant="default" />
+    case "canceled":
+      return <StatusIndicator title="Canceled" variant="danger" />
+    case "requires_action":
+      return <StatusIndicator title="Requires Action" variant="danger" />
+    default:
+      return null
+  }
+}
+
+const OrderStatus: React.FC<OrderStatusProps> = ({ orderStatus }) => {
+  switch (orderStatus) {
+    case "completed":
+      return <StatusIndicator title="Completed" variant="success" />
+    case "pending":
+      return <StatusIndicator title="Processing" variant="default" />
+    case "canceled":
+      return <StatusIndicator title="Canceled" variant="danger" />
+    case "requires_action":
+      return <StatusIndicator title="Rejected" variant="danger" />
+    default:
+      return null
+  }
+}
+
+const FulfillmentStatus: React.FC<FulfillmentStatusProps> = ({
+  fulfillmentStatus,
+}) => {
+  switch (fulfillmentStatus) {
+    case "shipped":
+      return <StatusIndicator title="Shipped" variant="success" />
+    case "fulfilled":
+      return <StatusIndicator title="Fulfilled" variant="warning" />
+    case "canceled":
+      return <StatusIndicator title="Canceled" variant="danger" />
+    case "partially_fulfilled":
+      return <StatusIndicator title="Partially fulfilled" variant="warning" />
+    case "not_fulfilled":
+      return <StatusIndicator title="Not fulfilled" variant="default" />
+    case "requires_action":
+      return <StatusIndicator title="Requires Action" variant="danger" />
+    default:
+      return null
+  }
+}
+
+const ReturnStatus: React.FC<ReturnStatusProps> = ({ returnStatus }) => {
+  switch (returnStatus) {
+    case "received":
+      return <StatusIndicator title="Received" variant="success" />
+    case "requested":
+      return <StatusIndicator title="Requested" variant="default" />
+    case "canceled":
+      return <StatusIndicator title="Canceled" variant="danger" />
+    case "requires_action":
+      return <StatusIndicator title="Requires Action" variant="danger" />
+    default:
+      return null
+  }
+}
+
+const RefundStatus: React.FC<RefundStatusProps> = ({ refundStatus }) => {
+  switch (refundStatus) {
+    case "na":
+      return <StatusIndicator title="N/A" variant="default" />
+    case "not_refunded":
+      return <StatusIndicator title="Refunded" variant="default" />
+    case "refunded":
+      return <StatusIndicator title="Refunded" variant="success" />
+    case "canceled":
+      return <StatusIndicator title="Canceled" variant="danger" />
+    default:
+      return null
+  }
+}
+
+export {
+  PaymentStatus,
+  OrderStatus,
+  FulfillmentStatus,
+  ReturnStatus,
+  RefundStatus,
+}

package/.cache/admin/src/components/molecules/rma-select-shipping/index.tsx

@@ -0,0 +1,54 @@
+import React from "react"
+import Button from "../../fundamentals/button"
+import TrashIcon from "../../fundamentals/icons/trash-icon"
+import { AmountInput } from "../amount-input"
+
+type RMAShippingPriceProps = {
+  inclTax: boolean
+  useCustomShippingPrice: boolean
+  shippingPrice: number | undefined
+  currencyCode: string
+  updateShippingPrice: (price: number | undefined) => void
+  setUseCustomShippingPrice: (useCustomShippingPrice: boolean) => void
+}
+
+const RMAShippingPrice: React.FC<RMAShippingPriceProps> = ({
+  useCustomShippingPrice,
+  inclTax,
+  shippingPrice,
+  currencyCode,
+  updateShippingPrice,
+  setUseCustomShippingPrice,
+}) => {
+  return useCustomShippingPrice ? (
+    <div className="gap-x-base mt-4 flex w-full items-end">
+      <AmountInput
+        label={`Shipping price (${inclTax ? "incl. tax" : "excl. tax"})`}
+        currencyCode={currencyCode}
+        onChange={(amount) => updateShippingPrice(amount ?? 0)}
+        value={shippingPrice}
+      />
+      <Button
+        onClick={() => setUseCustomShippingPrice(false)}
+        className="text-grey-40 h-10 w-10"
+        variant="ghost"
+        size="small"
+      >
+        <TrashIcon size={20} />
+      </Button>
+    </div>
+  ) : (
+    <div className="mt-4 flex w-full justify-end">
+      <Button
+        onClick={() => setUseCustomShippingPrice(true)}
+        variant="ghost"
+        className="border-grey-20 border"
+        size="small"
+      >
+        Add custom price
+      </Button>
+    </div>
+  )
+}
+
+export default RMAShippingPrice