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 } }