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

package/.cache/admin/src/assets/svg/search.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.9696 18.0303C17.2625 18.3232 17.7374 18.3232 18.0302 18.0303C18.3231 17.7374 18.3231 17.2626 18.0302 16.9697L16.9696 18.0303ZM14.4052 13.3447C14.1124 13.0518 13.6375 13.0518 13.3446 13.3447C13.0517 13.6376 13.0517 14.1124 13.3446 14.4053L14.4052 13.3447ZM15.0833 9.16667C15.0833 12.4344 12.4344 15.0833 9.16667 15.0833V16.5833C13.2628 16.5833 16.5833 13.2628 16.5833 9.16667H15.0833ZM9.16667 15.0833C5.89898 15.0833 3.25 12.4344 3.25 9.16667H1.75C1.75 13.2628 5.07055 16.5833 9.16667 16.5833V15.0833ZM3.25 9.16667C3.25 5.89898 5.89898 3.25 9.16667 3.25V1.75C5.07055 1.75 1.75 5.07055 1.75 9.16667H3.25ZM9.16667 3.25C12.4344 3.25 15.0833 5.89898 15.0833 9.16667H16.5833C16.5833 5.07055 13.2628 1.75 9.16667 1.75V3.25ZM18.0302 16.9697L14.4052 13.3447L13.3446 14.4053L16.9696 18.0303L18.0302 16.9697Z" fill="#9CA3AF"/>
+</svg>

package/.cache/admin/src/assets/svg/sprout.svg

@@ -0,0 +1,6 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.83398 16.666H14.1673" stroke="#9CA3AF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8.33398 16.6673C12.9173 14.584 9.00065 11.334 10.834 8.33398" stroke="#9CA3AF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7.91732 7.83349C8.83398 8.50016 9.41732 9.66683 9.83398 10.9168C8.16732 11.2502 6.91732 11.2502 5.83398 10.6668C4.83398 10.1668 3.91732 9.08349 3.33398 7.16683C5.66732 6.75016 7.00065 7.16683 7.91732 7.83349V7.83349Z" stroke="#9CA3AF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M11.7498 5.00065C11.1145 5.99362 10.7949 7.15577 10.8332 8.33398C12.4165 8.25065 13.5832 7.83398 14.4165 7.16732C15.2498 6.33398 15.7498 5.25065 15.8332 3.33398C13.5832 3.41732 12.4998 4.16732 11.7498 5.00065Z" stroke="#9CA3AF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/.cache/admin/src/assets/svg/star.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 2.5L12.3175 7.195L17.5 7.9525L13.75 11.605L14.635 16.765L10 14.3275L5.365 16.765L6.25 11.605L2.5 7.9525L7.6825 7.195L10 2.5Z" stroke="#9CA3AF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/.cache/admin/src/components/atoms/avatar/index.tsx

@@ -0,0 +1,62 @@
+import * as RadixAvatar from "@radix-ui/react-avatar"
+import clsx from "clsx"
+import React from "react"
+import Spinner from "../spinner"
+
+type AvatarProps = {
+  user?: {
+    img?: string
+    first_name?: string
+    last_name?: string
+    email?: string
+  }
+  font?: string
+  color?: string
+  isLoading?: boolean
+}
+
+const Avatar: React.FC<AvatarProps> = ({
+  user,
+  font = "inter-small-semibold",
+  color = "bg-grey-80",
+  isLoading = false,
+}) => {
+  let username: string
+
+  if (user?.first_name && user?.last_name) {
+    username = user.first_name + " " + user.last_name
+  } else if (user?.email) {
+    username = user.email
+  } else {
+    username = "Medusa user"
+  }
+
+  return (
+    <RadixAvatar.Root
+      className={clsx(
+        "rounded-circle h-full w-full select-none items-center justify-center overflow-hidden",
+        color
+      )}
+    >
+      <RadixAvatar.Image
+        src={user?.img}
+        alt={username}
+        className="rounded-circle h-full w-full object-cover"
+      />
+      <RadixAvatar.Fallback
+        className={clsx(
+          "text-grey-0 rounded-circle flex h-full w-full items-center justify-center bg-inherit",
+          font
+        )}
+      >
+        {isLoading ? (
+          <Spinner size="small" variant="primary" />
+        ) : (
+          username.slice(0, 1).toUpperCase()
+        )}
+      </RadixAvatar.Fallback>
+    </RadixAvatar.Root>
+  )
+}
+
+export default Avatar

package/.cache/admin/src/components/atoms/back-button/index.tsx

@@ -0,0 +1,32 @@
+import clsx from "clsx"
+import { useNavigate } from "react-router-dom"
+import { useTranslation } from "react-i18next"
+import ArrowLeftIcon from "../../fundamentals/icons/arrow-left-icon"
+
+type Props = {
+  path?: string
+  label?: string
+  className?: string
+}
+
+const BackButton = ({ path, label, className }: Props) => {
+  const { t } = useTranslation()
+  const navigate = useNavigate()
+  return (
+    <button
+      onClick={() => {
+        path ? navigate(path) : navigate(-1)
+      }}
+      className={clsx("px-small py-xsmall", className)}
+    >
+      <div className="gap-x-xsmall text-grey-50 inter-grey-40 inter-small-semibold flex items-center">
+        <ArrowLeftIcon size={20} />
+        <span className="ml-1">
+          {label || t("back-button-go-back", "Go back")}
+        </span>
+      </div>
+    </button>
+  )
+}
+
+export default BackButton

package/.cache/admin/src/components/atoms/checkbox/index.tsx

@@ -0,0 +1,32 @@
+import clsx from "clsx"
+import React, { ReactNode, useImperativeHandle } from "react"
+
+export type CheckboxProps = React.InputHTMLAttributes<HTMLInputElement> & {
+  label: ReactNode
+}
+
+const Checkbox = React.forwardRef(
+  ({ label, value, className, id, ...rest }: CheckboxProps, ref) => {
+    const checkboxRef = React.useRef<HTMLInputElement>(null)
+
+    useImperativeHandle(ref, () => checkboxRef.current)
+    return (
+      <label
+        className={clsx("flex cursor-pointer items-center", className)}
+        htmlFor={id}
+      >
+        <input
+          type="checkbox"
+          ref={checkboxRef}
+          className="form-checkbox rounded-base text-violet-60 mr-small border-grey-30 h-[20px] w-[20px] focus:ring-0"
+          value={value}
+          id={id}
+          {...rest}
+        />
+        {label}
+      </label>
+    )
+  }
+)
+
+export default Checkbox

package/.cache/admin/src/components/atoms/copy-to-clipboard/index.tsx

@@ -0,0 +1,59 @@
+import clsx from "clsx"
+import React, { useEffect } from "react"
+import useClipboard from "../../../hooks/use-clipboard"
+import useNotification from "../../../hooks/use-notification"
+import Button from "../../fundamentals/button"
+import ClipboardCopyIcon from "../../fundamentals/icons/clipboard-copy-icon"
+
+type CopyToClipboardProps = {
+  value: string
+  displayValue?: string
+  successDuration?: number
+  showValue?: boolean
+  iconSize?: number
+  onCopy?: () => void
+}
+
+const CopyToClipboard: React.FC<CopyToClipboardProps> = ({
+  value,
+  displayValue,
+  successDuration = 3000,
+  showValue = true,
+  iconSize = 20,
+  onCopy = () => {},
+}) => {
+  const [isCopied, handleCopy] = useClipboard(value, {
+    onCopied: onCopy,
+    successDuration: successDuration,
+  })
+  const notification = useNotification()
+
+  useEffect(() => {
+    if (isCopied) {
+      notification("Success", "Copied!", "success")
+    }
+  }, [isCopied, notification])
+
+  return (
+    <div className="inter-small-regular text-grey-50 gap-x-xsmall flex items-center">
+      <Button
+        variant="ghost"
+        size="small"
+        type="button"
+        className={clsx("text-grey-50 p-0", {
+          ["text-violet-60"]: isCopied,
+        })}
+        onClick={handleCopy}
+      >
+        <ClipboardCopyIcon size={iconSize} />
+      </Button>
+      {showValue && (
+        <span className="w-full truncate">
+          {displayValue ? displayValue : value}
+        </span>
+      )}
+    </div>
+  )
+}
+
+export default CopyToClipboard

package/.cache/admin/src/components/atoms/date-picker/custom-header.tsx

@@ -0,0 +1,44 @@
+import { ReactDatePickerCustomHeaderProps } from "react-datepicker"
+import NativeSelect from "../../molecules/native-select"
+import { getYearRange, monthNames } from "./utils"
+
+const CustomHeader = ({
+  date,
+  changeYear,
+  changeMonth,
+}: ReactDatePickerCustomHeaderProps) => {
+  const month = date.getMonth()
+  const monthName = monthNames[month]
+
+  const year = date.getFullYear()
+  return (
+    <div className="flex w-full items-center gap-4">
+      <div className="flex flex-1 items-center justify-end gap-3">
+        <NativeSelect
+          defaultValue={monthName}
+          onValueChange={(v) => changeMonth(monthNames.indexOf(v))}
+        >
+          {monthNames.map((month) => (
+            <NativeSelect.Item key={month} value={month}>
+              {month}
+            </NativeSelect.Item>
+          ))}
+        </NativeSelect>
+      </div>
+      <div className="flex flex-1 items-center justify-start gap-3">
+        <NativeSelect
+          defaultValue={year.toString()}
+          onValueChange={(v) => changeYear(parseInt(v, 10))}
+        >
+          {getYearRange().map((year) => (
+            <NativeSelect.Item key={year} value={year.toString()}>
+              {year.toString()}
+            </NativeSelect.Item>
+          ))}
+        </NativeSelect>
+      </div>
+    </div>
+  )
+}
+
+export default CustomHeader

package/.cache/admin/src/components/atoms/date-picker/date-picker.tsx

@@ -0,0 +1,155 @@
+import "react-datepicker/dist/react-datepicker.css"
+
+import * as PopoverPrimitive from "@radix-ui/react-popover"
+
+import React, { useEffect, useState } from "react"
+
+import ArrowDownIcon from "../../fundamentals/icons/arrow-down-icon"
+import Button from "../../fundamentals/button"
+import CustomHeader from "./custom-header"
+import { DateTimePickerProps } from "./types"
+import InputContainer from "../../fundamentals/input-container"
+import InputHeader from "../../fundamentals/input-header"
+import ReactDatePicker from "react-datepicker"
+import clsx from "clsx"
+import moment from "moment"
+
+const getDateClassname = (
+  d: Date,
+  tempDate: Date | null,
+  greyPastDates: boolean = true
+): string => {
+  const classes: string[] = ["date"]
+  if (
+    tempDate &&
+    moment(d).format("YY,MM,DD") === moment(tempDate).format("YY,MM,DD")
+  ) {
+    classes.push("chosen")
+  } else if (
+    greyPastDates &&
+    moment(d).format("YY,MM,DD") < moment(new Date()).format("YY,MM,DD")
+  ) {
+    classes.push("past")
+  }
+  return classes.join(" ")
+}
+
+const DatePicker: React.FC<DateTimePickerProps> = ({
+  date,
+  onSubmitDate,
+  label = "start date",
+  required = false,
+  tooltipContent,
+  tooltip,
+}) => {
+  const [tempDate, setTempDate] = useState<Date | null>(date || null)
+  const [isOpen, setIsOpen] = useState(false)
+
+  useEffect(() => setTempDate(date), [isOpen])
+
+  const submitDate = () => {
+    if (!tempDate || !date) {
+      onSubmitDate(null)
+      setIsOpen(false)
+      return
+    }
+
+    // update only date, month and year
+    const newDate = new Date(date.getTime())
+    newDate.setUTCDate(tempDate.getUTCDate())
+    newDate.setUTCMonth(tempDate.getUTCMonth())
+    newDate.setUTCFullYear(tempDate.getUTCFullYear())
+
+    onSubmitDate(newDate)
+    setIsOpen(false)
+  }
+
+  return (
+    <div className="w-full">
+      <PopoverPrimitive.Root open={isOpen} onOpenChange={setIsOpen}>
+        <PopoverPrimitive.Trigger asChild>
+          <button
+            className={clsx("rounded-rounded w-full border ", {
+              "shadow-input border-violet-60": isOpen,
+              "border-grey-20": !isOpen,
+            })}
+            type="button"
+          >
+            <InputContainer className="shadown-none border-0 focus-within:shadow-none">
+              <div className="text-grey-50 flex w-full justify-between pr-0.5">
+                {label && (
+                  <InputHeader
+                    {...{
+                      label,
+                      required,
+                      tooltipContent,
+                      tooltip,
+                    }}
+                  />
+                )}
+                <ArrowDownIcon size={16} />
+              </div>
+              <label className="w-full text-left">
+                {date
+                  ? moment(date).format("ddd, DD MMM YYYY")
+                  : "---, -- -- ----"}
+              </label>
+            </InputContainer>
+          </button>
+        </PopoverPrimitive.Trigger>
+        <PopoverPrimitive.Content
+          side="top"
+          sideOffset={8}
+          className="rounded-rounded border-grey-20  bg-grey-0 shadow-dropdown w-full border px-8"
+        >
+          <CalendarComponent
+            date={tempDate}
+            onChange={(date) => setTempDate(date)}
+          />
+          <div className="mb-8 mt-5 flex w-full">
+            <Button
+              variant="ghost"
+              size="medium"
+              onClick={() => setIsOpen(false)}
+              className="border-grey-20 mr-2 flex w-1/3 justify-center border"
+            >
+              Cancel
+            </Button>
+            <Button
+              size="medium"
+              variant="primary"
+              onClick={() => submitDate()}
+              className="flex w-2/3 justify-center"
+            >{`Set ${label}`}</Button>
+          </div>
+        </PopoverPrimitive.Content>
+      </PopoverPrimitive.Root>
+    </div>
+  )
+}
+
+type CalendarComponentProps = {
+  date: Date | null
+  onChange: (
+    date: Date | null,
+    event: React.SyntheticEvent<any, Event> | undefined
+  ) => void
+  greyPastDates?: boolean
+}
+
+export const CalendarComponent = ({
+  date,
+  onChange,
+  greyPastDates = true,
+}: CalendarComponentProps) => (
+  <ReactDatePicker
+    selected={date}
+    inline
+    onChange={onChange}
+    calendarClassName="date-picker"
+    dayClassName={(d) => getDateClassname(d, date, greyPastDates)}
+    renderCustomHeader={({ ...props }) => <CustomHeader {...props} />}
+  />
+)
+
+export default DatePicker

package/.cache/admin/src/components/atoms/date-picker/time-picker.tsx

@@ -0,0 +1,103 @@
+import * as PopoverPrimitive from "@radix-ui/react-popover"
+import clsx from "clsx"
+import { isNil } from "lodash"
+import moment from "moment"
+import React, { useEffect, useState } from "react"
+import ArrowDownIcon from "../../fundamentals/icons/arrow-down-icon"
+import ClockIcon from "../../fundamentals/icons/clock-icon"
+import InputContainer from "../../fundamentals/input-container"
+import InputHeader from "../../fundamentals/input-header"
+import NumberScroller from "../number-scroller"
+import { DateTimePickerProps } from "./types"
+
+const TimePicker: React.FC<DateTimePickerProps> = ({
+  date,
+  onSubmitDate,
+  label = "start date",
+  required = false,
+  tooltipContent,
+  tooltip,
+}) => {
+  const [selectedMinute, setSelectedMinute] = useState(
+    new Date(date)?.getUTCMinutes()
+  )
+  const [selectedHour, setSelectedHour] = useState(
+    new Date(date)?.getUTCHours()
+  )
+
+  useEffect(() => {
+    setSelectedMinute(new Date(date)?.getUTCMinutes())
+    setSelectedHour(new Date(date)?.getUTCHours())
+  }, [date])
+
+  useEffect(() => {
+    if (date && !isNil(selectedHour) && !isNil(selectedMinute)) {
+      const newDate = new Date(new Date(date).getTime())
+      newDate.setUTCHours(selectedHour)
+      newDate.setUTCMinutes(selectedMinute)
+      onSubmitDate(newDate)
+    }
+  }, [selectedMinute, selectedHour])
+
+  const [isOpen, setIsOpen] = useState(false)
+
+  const minuteNumbers = [...Array(60).keys()]
+  const hourNumbers = [...Array(24).keys()]
+
+  return (
+    <div className="w-full">
+      <PopoverPrimitive.Root open={isOpen} onOpenChange={setIsOpen}>
+        <PopoverPrimitive.Trigger asChild>
+          <button
+            className={clsx("rounded-rounded w-full border ", {
+              "shadow-input border-violet-60": isOpen,
+              "border-grey-20": !isOpen,
+            })}
+            type="button"
+          >
+            <InputContainer className="shadown-none border-0 focus-within:shadow-none">
+              <div className="text-grey-50 flex w-full justify-between pr-0.5">
+                <InputHeader
+                  {...{
+                    label,
+                    required,
+                    tooltipContent,
+                    tooltip,
+                  }}
+                />
+                <ArrowDownIcon size={16} />
+              </div>
+              <div className="text-grey-40 flex w-full items-center text-left">
+                <ClockIcon size={16} />
+                <span className="mx-1">UTC</span>
+                <span className="text-grey-90">
+                  {date ? moment.utc(date).format("HH:mm") : "--:--"}
+                </span>
+              </div>
+            </InputContainer>
+          </button>
+        </PopoverPrimitive.Trigger>
+        <PopoverPrimitive.Content
+          side="top"
+          sideOffset={8}
+          className="rounded-rounded scrollbar-hide border-grey-20 bg-grey-0 shadow-dropdown flex w-full border px-6 pt-6 pb-4"
+        >
+          <NumberScroller
+            numbers={hourNumbers}
+            selected={selectedHour}
+            onSelect={(n) => setSelectedHour(n as number)}
+            className="pr-4"
+          />
+          <NumberScroller
+            numbers={minuteNumbers}
+            selected={selectedMinute}
+            onSelect={(n) => setSelectedMinute(n as number)}
+          />
+          <div className="to-grey-0 h-xlarge absolute bottom-4 left-0 right-0 z-10 bg-gradient-to-b from-transparent" />
+        </PopoverPrimitive.Content>
+      </PopoverPrimitive.Root>
+    </div>
+  )
+}
+
+export default TimePicker

package/.cache/admin/src/components/atoms/date-picker/types.tsx

@@ -0,0 +1,6 @@
+import { InputHeaderProps } from "../../fundamentals/input-header"
+
+export type DateTimePickerProps = {
+  date: Date | null
+  onSubmitDate: (newDate: Date | null) => void
+} & InputHeaderProps

package/.cache/admin/src/components/atoms/date-picker/utils.ts

@@ -0,0 +1,25 @@
+export const range = (start, end) => {
+  const range: number[] = []
+  for (let i = start; i <= end; i++) {
+    range.push(i)
+  }
+  return range
+}
+
+export const getYearRange = (step = 20) =>
+  range(new Date().getFullYear() - step, new Date().getFullYear() + step)
+
+export const monthNames = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December",
+]

package/.cache/admin/src/components/atoms/fade-wrapper/index.tsx

@@ -0,0 +1,47 @@
+import clsx from "clsx"
+import React, { useEffect, useState } from "react"
+
+type FadeProps = {
+  isVisible: boolean
+  isFullScreen?: boolean
+  start?: string
+  transitionClass?: string
+  end?: string
+  classname?: string
+  children?: React.ReactNode
+}
+
+const Fade: React.FC<FadeProps> = ({
+  isVisible,
+  start,
+  end,
+  classname,
+  children,
+  isFullScreen = false,
+}) => {
+  const [show, setShow] = useState(false)
+
+  useEffect(() => {
+    if (show && !isVisible) {
+      setTimeout(() => setShow(false), 100)
+    } else {
+      setShow(isVisible)
+    }
+  })
+
+  const classes = {
+    [start || "scale-[0.98] opacity-0"]: !isVisible,
+    [end || "scale-100 opacity-100"]: isVisible,
+    "absolute inset-0": show && isFullScreen,
+  }
+
+  return (
+    <div
+      className={clsx("z-50 transition-all duration-100", classes, classname)}
+    >
+      {show ? children : null}
+    </div>
+  )
+}
+
+export default Fade