From c10f945473b2b7259f496008159fe0a75157238a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marina=20L=C3=B3pez?= <marina.lopez.yap@gmail.com>
Date: Wed, 15 Apr 2026 11:10:23 +0200
Subject: [PATCH] :sparkles: Add nitrate subscription expected cancel date

---
 .../src/app/main/ui/settings/subscription.cljs     |  8 +++++++-
 .../src/app/main/ui/settings/subscription.scss     | 14 ++++++++++++++
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/frontend/src/app/main/ui/settings/subscription.cljs b/frontend/src/app/main/ui/settings/subscription.cljs
index ee884c056e..b7e9b6c3a4 100644
--- a/frontend/src/app/main/ui/settings/subscription.cljs
+++ b/frontend/src/app/main/ui/settings/subscription.cljs
@@ -29,6 +29,7 @@
   [{:keys [card-title
            card-title-icon
            price-value price-period
+           cancel-at
            benefits-title benefits
            cta-text
            cta-link
@@ -57,7 +58,10 @@
     (when (and price-value price-period)
       [:div {:class (stl/css :plan-price)}
        [:span {:class (stl/css :plan-price-value)} price-value]
-       [:span {:class (stl/css :plan-price-period)} " / " price-period]])]
+       [:span {:class (stl/css :plan-price-period)} " / " price-period]])
+    (when cancel-at
+      [:div {:class (stl/css :plan-cancel)}
+       [:span {:class (stl/css :plan-cancel-date)} cancel-at]])]
    (when benefits-title [:h5 {:class (stl/css :benefits-title)} benefits-title])
    [:ul {:class (stl/css :benefits-list)}
     (for [benefit  benefits]
@@ -511,6 +515,8 @@
          ;; TODO add translations for this texts when we have the definitive ones
          [:> plan-card* {:card-title "Business Nitrate"
                          :card-title-icon i/character-b
+                         :cancel-at (when (:cancel-at nitrate-license)
+                                      (dm/str "Active until " (ct/format-inst (:cancel-at nitrate-license) "d MMMM, yyyy")))
                          :benefits-title "Loren ipsum",
                          :benefits ["Loren ipsum",
                                     "Loren ipsum",
diff --git a/frontend/src/app/main/ui/settings/subscription.scss b/frontend/src/app/main/ui/settings/subscription.scss
index ca37947dd6..e881541721 100644
--- a/frontend/src/app/main/ui/settings/subscription.scss
+++ b/frontend/src/app/main/ui/settings/subscription.scss
@@ -137,6 +137,20 @@
   color: var(--color-foreground-primary);
 }
 
+.plan-cancel {
+  align-items: center;
+  background-color: var(--color-background-secondary);
+  border-radius: var(--sp-xs);
+  display: flex;
+  padding-inline: var(--sp-s);
+}
+
+.plan-cancel-date {
+  @include t.use-typography("body-medium");
+
+  color: var(--color-foreground-primary);
+}
+
 .benefits-list {
   margin-block: 0;
 }