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 (
)
case PromotionStatus.EXPIRED:
return (
)
case PromotionStatus.ACTIVE:
return (
)
case PromotionStatus.DISABLED:
return (
)
default:
return (
)
}
}
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:
{t("discount-table-code", "Code")}
,
accessor: "code",
Cell: ({ cell: { value } }) => (
{value}
),
},
{
Header: t("discount-table-description", "Description"),
accessor: "rule.description",
Cell: ({ cell: { value } }) => value,
},
{
Header: (
{t("discount-table-amount", "Amount")}
),
id: "amount",
Cell: ({ row: { original } }) => {
return (
{getPromotionAmount(original, t)}
)
},
},
{
Header: ,
id: "currency",
Cell: ({ row: { original } }) => (
{getCurrencySymbol(original)}
),
},
{
Header: t("discount-table-status", "Status"),
accessor: "ends_at",
Cell: ({ row: { original } }) => (
{getPromotionStatusDot(original, t)}
),
},
{
Header: () => (
{t("discount-table-redemptions", "Redemptions")}
),
accessor: "usage_count",
Cell: ({ row: { original } }) => {
return (
{getUsageCount(original.usage_count)}
)
},
},
],
[]
)
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
}
}