From d3bb81f024c4846c90626c6fa4ded4bcfcfb3e46 Mon Sep 17 00:00:00 2001 From: Marco Montalbano Date: Fri, 12 Jan 2024 15:20:13 +0100 Subject: [PATCH] chore: update elements with new promotion components --- packages/app/package.json | 2 +- packages/app/src/pages/NewSelectTypePage.tsx | 3 +- .../app/src/pages/PromotionDetailsPage.tsx | 136 ++++++++++++++---- pnpm-lock.yaml | 8 +- 4 files changed, 111 insertions(+), 38 deletions(-) diff --git a/packages/app/package.json b/packages/app/package.json index 26fffcd..84f6184 100644 --- a/packages/app/package.json +++ b/packages/app/package.json @@ -15,7 +15,7 @@ "prepare": "touch ./public/config.local.js" }, "dependencies": { - "@commercelayer/app-elements": "^1.9.7", + "@commercelayer/app-elements": "^1.10.1", "@commercelayer/sdk": "5.18.0", "@hookform/resolvers": "^3.3.2", "lodash": "^4.17.21", diff --git a/packages/app/src/pages/NewSelectTypePage.tsx b/packages/app/src/pages/NewSelectTypePage.tsx index 3dd7030..7e20859 100644 --- a/packages/app/src/pages/NewSelectTypePage.tsx +++ b/packages/app/src/pages/NewSelectTypePage.tsx @@ -62,8 +62,7 @@ function LinkTo({ return ( } - // icon={} + icon={} href={appRoutes.newPromotion.makePath({ promotionSlug: promotion.slug })} > {promotion.titleList} diff --git a/packages/app/src/pages/PromotionDetailsPage.tsx b/packages/app/src/pages/PromotionDetailsPage.tsx index de62618..5c5a494 100644 --- a/packages/app/src/pages/PromotionDetailsPage.tsx +++ b/packages/app/src/pages/PromotionDetailsPage.tsx @@ -10,11 +10,15 @@ import { Icon, ListDetails, ListDetailsItem, + ListItem, PageLayout, Section, SkeletonTemplate, Spacer, Text, + formatDate, + formatDateRange, + getPromotionDisplayStatus, useCoreSdkProvider, useTokenProvider } from '@commercelayer/app-elements' @@ -30,10 +34,7 @@ function Page( const [, setLocation] = useLocation() - const { sdkClient } = useCoreSdkProvider() - const { promotion, isLoading, mutatePromotion } = usePromotion( - props.params.promotionId - ) + const { promotion, isLoading } = usePromotion(props.params.promotionId) return ( - - Promotion is{' '} - - {promotion.active === true ? 'active' : 'disabled'} - - - + @@ -124,7 +101,96 @@ function Page( ) } +function CardStatus({ promotionId }: { promotionId: string }): JSX.Element { + const { user } = useTokenProvider() + const { sdkClient } = useCoreSdkProvider() + const { promotion, mutatePromotion } = usePromotion(promotionId) + + const displayStatus = useMemo(() => { + // @ts-expect-error // TODO: we should fix this error type + const displayStatus = getPromotionDisplayStatus(promotion) + + let statusDescription = '' + switch (displayStatus.status) { + case 'disabled': + if (promotion.disabled_at != null) { + statusDescription = `Disabled ${formatDate({ + isoDate: promotion.disabled_at, + format: 'distanceToNow', + timezone: user?.timezone + })}` + } + break + case 'active': + statusDescription = `Expires in ${formatDate({ + isoDate: promotion.expires_at, + format: 'distanceToNow', + timezone: user?.timezone + })}` + break + case 'expired': + statusDescription = `Expired ${formatDate({ + isoDate: promotion.expires_at, + format: 'distanceToNow', + timezone: user?.timezone + })}` + break + case 'upcoming': + statusDescription = `Active in ${formatDate({ + isoDate: promotion.starts_at, + format: 'distanceToNow', + timezone: user?.timezone + })}` + break + } + + return { + ...displayStatus, + isEnabled: displayStatus.status !== 'disabled', + statusDescription + } + }, [promotion]) + + return ( + + +
+ Promotion is{' '} + + {displayStatus.label.toLowerCase()} + +
+ {displayStatus.statusDescription} +
+ + + + ) +} + function Info({ promotion }: { promotion: Promotion }): JSX.Element { + const { user } = useTokenProvider() const specificDetails = useMemo(() => { switch (promotion.type) { case 'percentage_discount_promotions': @@ -144,9 +210,17 @@ function Info({ promotion }: { promotion: Promotion }): JSX.Element { <> {specificDetails} - ?? 15 ‒ 31 October 2023 + {formatDateRange({ + rangeFrom: promotion.starts_at, + rangeTo: promotion.expires_at, + timezone: user?.timezone + })} - ?? 32 / 100 + {promotion.total_usage_limit != null && ( + + {promotion.total_usage_count} / {promotion.total_usage_limit} + + )} {promotion.exclusive === true && ( diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 3d3a225..7ce64a0 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -24,8 +24,8 @@ importers: packages/app: dependencies: '@commercelayer/app-elements': - specifier: ^1.9.7 - version: 1.9.7(@commercelayer/sdk@5.18.0)(query-string@8.1.0)(react-dom@18.2.0)(react-gtm-module@2.0.11)(react-hook-form@7.48.2)(react@18.2.0)(wouter@2.12.1) + specifier: ^1.10.1 + version: 1.10.1(@commercelayer/sdk@5.18.0)(query-string@8.1.0)(react-dom@18.2.0)(react-gtm-module@2.0.11)(react-hook-form@7.48.2)(react@18.2.0)(wouter@2.12.1) '@commercelayer/sdk': specifier: 5.18.0 version: 5.18.0 @@ -332,8 +332,8 @@ packages: dev: true optional: true - /@commercelayer/app-elements@1.9.7(@commercelayer/sdk@5.18.0)(query-string@8.1.0)(react-dom@18.2.0)(react-gtm-module@2.0.11)(react-hook-form@7.48.2)(react@18.2.0)(wouter@2.12.1): - resolution: {integrity: sha512-lA76Rgrq6C0WrMPUIA15kcfoRX+NwGoFfxXB09pveSKokdo/+SKqnxbspY8hp2ir8oQ8XwtNndOo0JSttKVWlA==} + /@commercelayer/app-elements@1.10.1(@commercelayer/sdk@5.18.0)(query-string@8.1.0)(react-dom@18.2.0)(react-gtm-module@2.0.11)(react-hook-form@7.48.2)(react@18.2.0)(wouter@2.12.1): + resolution: {integrity: sha512-1hPhYBdTLkrxBYMbhL7GB+MTa+DkH3UTCm8JMJ4JD8tmS2YH/qQ6or2nSTc+D7VlEzgpqy6l9SG+UOyFN87AIQ==} engines: {node: '>=18', pnpm: '>=7'} peerDependencies: '@commercelayer/sdk': ^5.x