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);