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

package/.cache/admin/src/components/templates/discount-table/index.tsx

@@ -0,0 +1,239 @@
+import { isEmpty } from "lodash"
+import { useAdminDiscounts } from "medusa-react"
+import qs from "qs"
+import React, { useEffect, useState } from "react"
+import { usePagination, useTable } from "react-table"
+import { useTranslation } from "react-i18next"
+import { useAnalytics } from "../../../providers/analytics-provider"
+import Table from "../../molecules/table"
+import TableContainer from "../../organisms/table-container"
+import DiscountFilters from "../discount-filter-dropdown"
+import { usePromotionTableColumns } from "./use-promotion-columns"
+import { usePromotionFilters } from "./use-promotion-filters"
+import usePromotionActions from "./use-promotion-row-actions"
+
+const DEFAULT_PAGE_SIZE = 15
+
+const defaultQueryProps = {}
+
+const DiscountTable: React.FC = () => {
+  const { t } = useTranslation()
+  const {
+    removeTab,
+    setTab,
+    saveTab,
+    availableTabs: filterTabs,
+    activeFilterTab,
+    reset,
+    paginate,
+    setFilters,
+    filters,
+    setQuery: setFreeText,
+    queryObject,
+    representationObject,
+  } = usePromotionFilters(location.search, defaultQueryProps)
+
+  const { trackNumberOfDiscounts } = useAnalytics()
+
+  const offs = parseInt(queryObject?.offset) || 0
+  const lim = parseInt(queryObject.limit) || DEFAULT_PAGE_SIZE
+
+  const { discounts, isLoading, count } = useAdminDiscounts(
+    {
+      is_dynamic: false,
+      expand: "rule,rule.conditions,rule.conditions.products,regions",
+      ...queryObject,
+    },
+    {
+      keepPreviousData: true,
+      onSuccess: ({ count }) => {
+        trackNumberOfDiscounts({
+          count,
+        })
+      },
+    }
+  )
+
+  const [query, setQuery] = useState("")
+  const [numPages, setNumPages] = useState(0)
+
+  useEffect(() => {
+    if (count && queryObject.limit) {
+      const controlledPageCount = Math.ceil(count! / queryObject.limit)
+      if (controlledPageCount !== numPages) {
+        setNumPages(controlledPageCount)
+      }
+    }
+  }, [count, queryObject.limit])
+
+  const [columns] = usePromotionTableColumns()
+
+  const {
+    getTableProps,
+    getTableBodyProps,
+    headerGroups,
+    rows,
+    prepareRow,
+    canPreviousPage,
+    canNextPage,
+    pageCount,
+    gotoPage,
+    nextPage,
+    previousPage,
+    // Get the state from the instance
+    state: { pageIndex },
+  } = useTable(
+    {
+      columns,
+      data: discounts || [],
+      manualPagination: true,
+      initialState: {
+        pageSize: lim,
+        pageIndex: offs / lim,
+      },
+      pageCount: numPages,
+      autoResetPage: false,
+    },
+    usePagination
+  )
+
+  // Debounced search
+  useEffect(() => {
+    const delayDebounceFn = setTimeout(() => {
+      if (query) {
+        setFreeText(query)
+        gotoPage(0)
+      } else {
+        // if we delete query string, we reset the table view
+        reset()
+      }
+    }, 400)
+
+    return () => clearTimeout(delayDebounceFn)
+  }, [query])
+
+  const handleNext = () => {
+    if (canNextPage) {
+      paginate(1)
+      nextPage()
+    }
+  }
+
+  const handlePrev = () => {
+    if (canPreviousPage) {
+      paginate(-1)
+      previousPage()
+    }
+  }
+
+  const updateUrlFromFilter = (obj = {}) => {
+    const stringified = qs.stringify(obj)
+    window.history.replaceState(`/a/discounts`, "", `${`?${stringified}`}`)
+  }
+
+  const refreshWithFilters = () => {
+    const filterObj = representationObject
+
+    if (isEmpty(filterObj)) {
+      updateUrlFromFilter({ offset: 0, limit: DEFAULT_PAGE_SIZE })
+    } else {
+      updateUrlFromFilter(filterObj)
+    }
+  }
+
+  const clearFilters = () => {
+    reset()
+    setQuery("")
+  }
+
+  useEffect(() => {
+    refreshWithFilters()
+  }, [representationObject])
+
+  return (
+    <TableContainer
+      hasPagination
+      isLoading={isLoading}
+      numberOfRows={queryObject.limit}
+      pagingState={{
+        count: count!,
+        offset: queryObject.offset,
+        pageSize: queryObject.offset + rows.length,
+        title: t("discount-table-discounts", "Discounts"),
+        currentPage: pageIndex + 1,
+        pageCount: pageCount,
+        nextPage: handleNext,
+        prevPage: handlePrev,
+        hasNext: canNextPage,
+        hasPrev: canPreviousPage,
+      }}
+    >
+      <Table
+        filteringOptions={
+          <DiscountFilters
+            filters={filters}
+            submitFilters={setFilters}
+            clearFilters={clearFilters}
+            tabs={filterTabs}
+            onTabClick={setTab}
+            activeTab={activeFilterTab}
+            onRemoveTab={removeTab}
+            onSaveTab={saveTab}
+          />
+        }
+        enableSearch
+        handleSearch={setQuery}
+        searchPlaceholder={t(
+          "discount-table-search-by-code-or-description",
+          "Search by code or description..."
+        )}
+        searchValue={query}
+        {...getTableProps()}
+      >
+        <Table.Head>
+          {headerGroups?.map((headerGroup) => (
+            <Table.HeadRow {...headerGroup.getHeaderGroupProps()}>
+              {headerGroup.headers.map((col) => (
+                <Table.HeadCell {...col.getHeaderProps()}>
+                  {col.render("Header")}
+                </Table.HeadCell>
+              ))}
+            </Table.HeadRow>
+          ))}
+        </Table.Head>
+        <Table.Body {...getTableBodyProps()}>
+          {rows.map((row) => {
+            prepareRow(row)
+            return <PromotionRow row={row} key={row.original.id} />
+          })}
+        </Table.Body>
+      </Table>
+    </TableContainer>
+  )
+}
+
+const PromotionRow = ({ row }) => {
+  const promotion = row.original
+
+  const { getRowActions } = usePromotionActions(promotion)
+
+  return (
+    <Table.Row
+      color={"inherit"}
+      linkTo={row.original.id}
+      {...row.getRowProps()}
+      actions={getRowActions()}
+      className="group"
+    >
+      {row.cells.map((cell) => {
+        return (
+          <Table.Cell {...cell.getCellProps()}>
+            {cell.render("Cell")}
+          </Table.Cell>
+        )
+      })}
+    </Table.Row>
+  )
+}
+
+export default DiscountTable

package/.cache/admin/src/components/templates/discount-table/use-copy-promotion.tsx

@@ -0,0 +1,87 @@
+import { useAdminCreateDiscount } from "medusa-react"
+import { useNavigate } from "react-router-dom"
+import { useTranslation } from "react-i18next"
+import useNotification from "../../../hooks/use-notification"
+import { getErrorMessage } from "../../../utils/error-messages"
+import { removeFalsy } from "../../../utils/remove-nullish"
+
+const useCopyPromotion = () => {
+  const { t } = useTranslation()
+  const navigate = useNavigate()
+  const notification = useNotification()
+  const createPromotion = useAdminCreateDiscount()
+
+  const handleCopyPromotion = async (promotion) => {
+    const copy: any = {
+      code: `${promotion.code}_COPY`,
+      is_disabled: promotion.is_disabled,
+      is_dynamic: promotion.is_dynamic,
+      starts_at: promotion.starts_at,
+      regions: promotion.regions.map((region) => region.id),
+    }
+
+    if (promotion.ends_at) {
+      copy.ends_at = promotion.ends_at
+    }
+
+    if (promotion.valid_duration) {
+      copy.valid_duration = promotion.valid_duration
+    }
+
+    if (typeof promotion.usage_limit === "number") {
+      copy.usage_limit = promotion.usage_limit
+    }
+
+    if (promotion.metadata) {
+      copy.metadata = promotion.metadata
+    }
+
+    copy.rule = {
+      type: promotion.rule.type,
+      value: promotion.rule.value,
+      description: promotion.rule.description,
+    }
+
+    if (promotion.rule.allocation) {
+      copy.rule.allocation = promotion.rule.allocation
+    }
+
+    if (promotion.rule.conditions) {
+      copy.rule.conditions = promotion.rule.conditions.map((cond) => ({
+        operator: cond.operator,
+        ...removeFalsy({
+          products: cond.products.map((product) => product.id),
+          product_types: cond.product_types,
+          product_tags: cond.product_tags,
+          product_collections: cond.product_collections,
+          customer_groups: cond.customer_groups,
+        }),
+      }))
+    }
+
+    await createPromotion.mutate(copy, {
+      onSuccess: (result) => {
+        navigate(`/a/discounts/${result.discount.id}`)
+        notification(
+          t("discount-table-success", "Success"),
+          t(
+            "discount-table-successfully-copied-discount",
+            "Successfully copied discount"
+          ),
+          "success"
+        )
+      },
+      onError: (err) => {
+        notification(
+          t("discount-table-error", "Error"),
+          getErrorMessage(err),
+          "error"
+        )
+      },
+    })
+  }
+
+  return handleCopyPromotion
+}
+
+export default useCopyPromotion

package/.cache/admin/src/components/templates/discount-table/use-promotion-columns.tsx

@@ -0,0 +1,186 @@
+import { end, parse } from "iso8601-duration"
+import { useMemo } from "react"
+import { useTranslation } from "react-i18next"
+import { formatAmountWithSymbol } from "../../../utils/prices"
+import Badge from "../../fundamentals/badge"
+import StatusDot from "../../fundamentals/status-indicator"
+
+enum PromotionStatus {
+  SCHEDULED = "SCHEDULED",
+  EXPIRED = "EXPIRED",
+  ACTIVE = "ACTIVE",
+  DISABLED = "DISABLED",
+}
+
+const getPromotionStatus = (promotion) => {
+  if (!promotion.is_disabled) {
+    const date = new Date()
+    if (new Date(promotion.starts_at) > date) {
+      return PromotionStatus.SCHEDULED
+    } else if (
+      (promotion.ends_at && new Date(promotion.ends_at) < date) ||
+      (promotion.valid_duration &&
+        date >
+          end(
+            parse(promotion.valid_duration),
+            new Date(promotion.starts_at)
+          )) ||
+      promotion.usage_count === promotion.usage_limit
+    ) {
+      return PromotionStatus.EXPIRED
+    } else {
+      return PromotionStatus.ACTIVE
+    }
+  }
+  return PromotionStatus.DISABLED
+}
+
+const getPromotionStatusDot = (promotion, t) => {
+  const status = getPromotionStatus(promotion)
+  switch (status) {
+    case PromotionStatus.SCHEDULED:
+      return (
+        <StatusDot
+          title={t("discount-table-scheduled", "Scheduled")}
+          variant="warning"
+        />
+      )
+    case PromotionStatus.EXPIRED:
+      return (
+        <StatusDot
+          title={t("discount-table-expired", "Expired")}
+          variant="danger"
+        />
+      )
+    case PromotionStatus.ACTIVE:
+      return (
+        <StatusDot
+          title={t("discount-table-active", "Active")}
+          variant="success"
+        />
+      )
+    case PromotionStatus.DISABLED:
+      return (
+        <StatusDot
+          title={t("discount-table-disabled", "Disabled")}
+          variant="default"
+        />
+      )
+    default:
+      return (
+        <StatusDot
+          title={t("discount-table-disabled", "Disabled")}
+          variant="default"
+        />
+      )
+  }
+}
+
+const getCurrencySymbol = (promotion) => {
+  if (promotion.rule.type === "fixed") {
+    if (!promotion.regions?.length) {
+      return ""
+    }
+    return promotion.regions[0].currency_code.toUpperCase()
+  }
+  return ""
+}
+
+const getPromotionAmount = (promotion, t) => {
+  switch (promotion.rule.type) {
+    case "fixed":
+      if (!promotion.regions?.length) {
+        return ""
+      }
+      return formatAmountWithSymbol({
+        currency: promotion.regions[0].currency_code,
+        amount: promotion.rule.value,
+      })
+    case "percentage":
+      return `${promotion.rule.value}%`
+    case "free_shipping":
+      return t("discount-table-free-shipping", "Free Shipping")
+    default:
+      return ""
+  }
+}
+
+export const usePromotionTableColumns = () => {
+  const { t } = useTranslation()
+  const columns = useMemo(
+    () => [
+      {
+        Header: <div className="pl-2">{t("discount-table-code", "Code")}</div>,
+        accessor: "code",
+        Cell: ({ cell: { value } }) => (
+          <div className="overflow-hidden">
+            <Badge className="rounded-rounded" variant="default">
+              <span className="inter-small-regular">{value}</span>
+            </Badge>
+          </div>
+        ),
+      },
+      {
+        Header: t("discount-table-description", "Description"),
+        accessor: "rule.description",
+        Cell: ({ cell: { value } }) => value,
+      },
+      {
+        Header: (
+          <div className="text-right">
+            {t("discount-table-amount", "Amount")}
+          </div>
+        ),
+        id: "amount",
+        Cell: ({ row: { original } }) => {
+          return (
+            <div className="text-right">{getPromotionAmount(original, t)}</div>
+          )
+        },
+      },
+      {
+        Header: <div className="w-[60px]" />,
+        id: "currency",
+        Cell: ({ row: { original } }) => (
+          <div className="text-grey-40 px-2">{getCurrencySymbol(original)}</div>
+        ),
+      },
+      {
+        Header: t("discount-table-status", "Status"),
+        accessor: "ends_at",
+        Cell: ({ row: { original } }) => (
+          <div>{getPromotionStatusDot(original, t)}</div>
+        ),
+      },
+      {
+        Header: () => (
+          <div className="text-right">
+            {t("discount-table-redemptions", "Redemptions")}
+          </div>
+        ),
+        accessor: "usage_count",
+        Cell: ({ row: { original } }) => {
+          return (
+            <div className="text-right">
+              {getUsageCount(original.usage_count)}
+            </div>
+          )
+        },
+      },
+    ],
+    []
+  )
+
+  return [columns]
+}
+
+const getUsageCount = (usageCount: number) => {
+  switch (true) {
+    case usageCount > 9999999:
+      return `${Math.floor(usageCount / 1000000)}m`
+    case usageCount > 9999:
+      return `${Math.floor(usageCount / 1000)}k`
+    default:
+      return usageCount
+  }
+}