feat: subscription status 'cancelled but still active' (#219)

Dockerfile

@@ -4,6 +4,7 @@ COPY ./ /build/
 
 WORKDIR /build
 
+ENV COREPACK_ENABLE_STRICT=0
 ENV CYPRESS_INSTALL_BINARY=0
 
 RUN --mount=type=cache,target=/root/.npm/_cacache/ \

components/account/home/SubscriptionTable.vue

@@ -138,6 +138,7 @@ function displayActions(sub: Subscription) {
 function getChipStatusColor(status: string): ContextColorsType | undefined {
  const map: Record<string, ContextColorsType> = {
  'Active': 'success',
+ 'Cancelled but still active': 'success',
  'Cancelled': 'error',
  'Pending': 'warning',
  'Past Due': 'warning',
@@ -181,7 +182,22 @@ async function cancelSubscription(sub: Subscription) {
  size="sm"
  :color="getChipStatusColor(row.status)"
  >
- {{ row.status }}
+ <RuiTooltip v-if="row.status === 'Cancelled but still active'">
+ <template #activator>
+ <div class="flex py-0.5 items-center gap-1">
+ <RuiIcon
+ size="16"
+ class="text-white"
+ name="information-line"
+ />
+ {{ t('account.subscriptions.cancelled_but_still_active.status', { date: row.nextActionDate }) }}
+ </div>
+ </template>
+ {{ t('account.subscriptions.cancelled_but_still_active.description', { date: row.nextActionDate }) }}
+ </RuiTooltip>
+ <template v-else>
+ {{ row.status }}
+ </template>
  </RuiChip>
  </template>
 

locales/en.json

@@ -188,6 +188,10 @@
  "title": "Your latest payments"
  },
  "subscriptions": {
+ "cancelled_but_still_active": {
+ "status": "Active until {date}",
+ "description": "You canceled this subscription, but it will remain active until {date}"
+ },
  "cancellation": {
  "actions": {
  "no": "No, don't cancel",

types/index.ts

@@ -42,6 +42,7 @@ export type Address = z.infer<typeof Address>;
 const SubStatus = z.enum([
  'Active',
  'Cancelled',
+ 'Cancelled but still active',
  'Pending',
  'Past Due',
 ] as const);