✨ Visual indicators for unlimited tier users (#6270)

* ✨ Visual indicators for unlimited tier users * ♻️ Refactor to organize properly subscription * ♻️ Refactor with PR feedback * 💄 Add minor cosmetic changes --------- Co-authored-by: Andrey Antukh <niwi@niwi.nz>
2025-04-29 20:46:20 +02:00 · 2025-04-15 12:47:37 +02:00 · 2025-04-15 12:47:37 +02:00 · f2977cf938
commit f2977cf938
parent bb80da137d
18 changed files with 687 additions and 10 deletions
--- a/backend/scripts/repl
+++ b/backend/scripts/repl
@ -30,7 +30,9 @@ export PENPOT_FLAGS="\
       enable-access-tokens \
       enable-tiered-file-data-storage \
       enable-file-validation \
-       enable-file-schema-validation";
+       enable-file-schema-validation \
+       enable-subscriptons \
+       enable-subscriptons-old";

 # Default deletion delay for devenv
 export PENPOT_DELETION_DELAY="24h"
--- a/backend/scripts/start-dev
+++ b/backend/scripts/start-dev
@ -23,7 +23,9 @@ export PENPOT_FLAGS="\
       enable-access-tokens \
       enable-tiered-file-data-storage \
       enable-file-validation \
-       enable-file-schema-validation";
+       enable-file-schema-validation \
+       enable-subscriptons \
+       enable-subscriptons-old ";

 # Default deletion delay for devenv
 export PENPOT_DELETION_DELAY="24h"
--- a/common/src/app/common/flags.cljc
+++ b/common/src/app/common/flags.cljc
@ -124,7 +124,9 @@
    ;; TODO: deprecate this flag and consolidate the code
    :export-file-v3
    :render-wasm-dpr
-    :hide-release-modal})
+    :hide-release-modal
+    :subscriptions
+    :subscriptions-old})

 (def all-flags
  (set/union email login varia))
--- a/frontend/resources/images/icons/crown.svg
+++ b/frontend/resources/images/icons/crown.svg
@ -0,0 +1,4 @@
+
+<svg xmlns="http://www.w3.org/2000/svg" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 16 16">
+  <path d="M8 1.8a.35.35 0 0 0-.3.18l-2.08 3.9a.7.7 0 0 1-1.06.21l-3-2.55a.35.35 0 0 0-.55.36l1.98 7.15a.7.7 0 0 0 .67.5h8.68a.7.7 0 0 0 .67-.5l1.98-7.15a.35.35 0 0 0-.56-.36l-3 2.55a.7.7 0 0 1-1.06-.2L8.31 1.98A.35.35 0 0 0 8 1.8ZM3.1 14.35h9.8z"/>
+</svg>
--- a/frontend/src/app/main/ui.cljs
+++ b/frontend/src/app/main/ui.cljs
@ -194,6 +194,7 @@
        :settings-password
        :settings-options
        :settings-feedback
+        :settings-subscription
        :settings-access-tokens
        :settings-notifications)
       [:? [:& settings-page {:route route}]]
--- a/frontend/src/app/main/ui/dashboard/sidebar.cljs
+++ b/frontend/src/app/main/ui/dashboard/sidebar.cljs
@ -26,6 +26,7 @@
   [app.main.ui.dashboard.comments :refer [comments-icon* comments-section]]
   [app.main.ui.dashboard.inline-edition :refer [inline-edition]]
   [app.main.ui.dashboard.project-menu :refer [project-menu*]]
+   [app.main.ui.dashboard.subscription :as subscription]
   [app.main.ui.dashboard.team-form]
   [app.main.ui.icons :as i :refer [icon-xref]]
   [app.util.dom :as dom]
@ -962,13 +963,19 @@
           (dom/open-new-window "https://penpot.app/pricing")))]

    [:*
-     [:button {:class (stl/css :upgrade-plan-section)
-               :on-click on-power-up-click}
-      [:div {:class (stl/css :penpot-free)}
-       [:span (tr "dashboard.upgrade-plan.penpot-free")]
-       [:span {:class (stl/css :no-limits)} (tr "dashboard.upgrade-plan.no-limits")]]
-      [:div {:class (stl/css :power-up)}
-       (tr "dashboard.upgrade-plan.power-up")]]
+     (when (contains? cf/flags :subscriptions)
+       [:> subscription/sidebar*])
+
+     ;; TODO remove this block when subscriptions is full implemented
+     (when (contains? cf/flags :subscriptions-old)
+       [:button {:class (stl/css :upgrade-plan-section)
+                 :on-click on-power-up-click}
+        [:div {:class (stl/css :penpot-free)}
+         [:span (tr "dashboard.upgrade-plan.penpot-free")]
+         [:span {:class (stl/css :no-limits)} (tr "dashboard.upgrade-plan.no-limits")]]
+        [:div {:class (stl/css :power-up)}
+         (tr "dashboard.upgrade-plan.power-up")]])
+
     (when (and team profile)
       [:& comments-section
        {:profile profile
--- a/frontend/src/app/main/ui/dashboard/subscription.cljs
+++ b/frontend/src/app/main/ui/dashboard/subscription.cljs
@ -0,0 +1,78 @@
+;; Copyright (c) KALEIDOS INC
+
+(ns app.main.ui.dashboard.subscription
+  (:require-macros [app.main.style :as stl])
+  (:require
+   [app.main.router :as rt]
+   [app.main.store :as st]
+   [app.main.ui.icons :as i]
+   [app.util.dom :as dom]
+   [app.util.i18n :as i18n :refer [tr]]
+   [rumext.v2 :as mf]))
+
+(mf/defc cta-power-up*
+  [{:keys [top-title top-description bottom-description cta-text cta-link has-dropdown]}]
+  (let [show-data* (mf/use-state false)
+        show-data (deref show-data*)
+        handle-click
+        (mf/use-fn
+         (fn [event]
+           (dom/stop-propagation event)
+           (swap! show-data* not)))]
+
+    [:div {:class (stl/css :cta-power-up)
+           :on-click handle-click}
+     [:button {:class (stl/css :cta-top-section)}
+      [:div {:class (stl/css :content)}
+       [:span {:class (stl/css :cta-title)} top-title]
+       [:span {:class (stl/css :cta-text)} top-description]]
+      (when has-dropdown [:span {:class (stl/css :icon-dropdown)}  i/arrow])]
+
+     (when (and has-dropdown show-data)
+       [:div {:class (stl/css :cta-bottom-section)}
+        [:> i18n/tr-html* {:content bottom-description
+                           :class (stl/css :content)
+                           :tag-name "button"}]
+        [:button {:class (stl/css :cta-highlight :cta-link) :on-click cta-link}
+         cta-text]])]))
+
+(mf/defc sidebar*
+  []
+  (let [;; TODO subscription cases professional/unlimited/enterprise
+        subscription-name :unlimited
+        subscription-is-trial false
+
+        go-to-subscription
+        (mf/use-fn #(st/emit! (rt/nav :settings-subscription)))]
+
+    (case subscription-name
+      :professional
+      [:> cta-power-up*
+       {:top-title (tr "subscription.dashboard.power-up.professional.top-title")
+        :top-description (tr "dashboard.upgrade-plan.no-limits")
+        :bottom-description (tr "subscription.dashboard.power-up.professional.bottom-description")
+        :cta-text (tr "dashboard.upgrade-plan.power-up")
+        :cta-link go-to-subscription
+        :has-dropdown true}]
+
+      :unlimited
+      (if subscription-is-trial
+        [:> cta-power-up*
+         {:top-title (tr "subscription.dashboard.power-up.trial.top-title")
+          :top-description (tr "subscription.dashboard.power-up.trial.top-description")
+          :bottom-description (tr "subscription.dashboard.power-up.trial.bottom-description")
+          :cta-text (tr "subscription.dashboard.power-up.subscribe")}]
+
+        [:> cta-power-up*
+         {:top-title (tr "subscription.dashboard.power-up.unlimited-plan")
+          :top-description (tr "subscription.dashboard.power-up.unlimited.top-description")
+          :bottom-description (tr "subscription.dashboard.power-up.unlimited.bottom-description")
+          :cta-text (tr "subscription.dashboard.power-up.unlimited.cta")
+          :cta-link go-to-subscription
+          :has-dropdown true}])
+
+      :enterprise
+      [:> cta-power-up*
+       {:top-title (tr "subscription.dashboard.power-up.enterprise-plan")
+        :top-description (tr "subscription.dashboard.power-up.enterprise.description")
+        :has-dropdown false}])))
--- a/frontend/src/app/main/ui/dashboard/subscription.scss
+++ b/frontend/src/app/main/ui/dashboard/subscription.scss
@ -0,0 +1,78 @@
+@use "common/refactor/common-refactor.scss" as *;
+@use "common/refactor/common-dashboard";
+@use "../ds/typography.scss" as t;
+@use "../ds/_borders.scss" as *;
+
+.cta-power-up {
+  display: flex;
+  border: $b-1 solid var(--color-background-quaternary);
+  border-radius: var(--sp-s);
+  flex-direction: column;
+  margin: var(--sp-m);
+  padding: var(--sp-m);
+}
+
+.cta-top-section {
+  @include buttonStyle;
+  display: grid;
+  color: var(--color-foreground-secondary);
+  grid-template-columns: 1fr auto;
+}
+
+.cta-top-section .content {
+  display: flex;
+  flex-direction: column;
+}
+
+.icon-dropdown {
+  @include flexCenter;
+  height: 100%;
+  width: $s-16;
+}
+
+.icon-dropdown svg {
+  @extend .button-icon-small;
+  stroke: var(--icon-foreground);
+  transform: rotate(90deg);
+}
+
+.cta-bottom-section {
+  border-block-start: $s-1 solid var(--color-background-quaternary);
+  display: grid;
+  color: var(--color-foreground-secondary);
+  grid-template-columns: 1fr auto;
+  margin-block-start: $s-12;
+  padding-block-start: $s-12;
+}
+.cta-bottom-section .content {
+  @include t.use-typography("body-small");
+  @include buttonStyle;
+  color: var(--color-foreground-secondary);
+  display: inline;
+  text-align: left;
+}
+
+.cta-text,
+.cta-title {
+  text-align: left;
+}
+
+.cta-text {
+  @include t.use-typography("body-small");
+}
+
+.cta-title {
+  @include t.use-typography("body-medium");
+}
+
+.cta-bottom-section .content strong,
+.cta-highlight {
+  @include t.use-typography("body-small");
+  color: var(--color-accent-tertiary);
+}
+
+.cta-link {
+  @include buttonStyle;
+  align-self: end;
+  margin-inline-start: $s-4;
+}
--- a/frontend/src/app/main/ui/ds/foundations/assets/icon.cljs
+++ b/frontend/src/app/main/ui/ds/foundations/assets/icon.cljs
@ -113,6 +113,7 @@
 (def ^:icon-id corner-top "corner-top")
 (def ^:icon-id corner-top-left "corner-top-left")
 (def ^:icon-id corner-top-right "corner-top-right")
+(def ^:icon-id crown "crown")
 (def ^:icon-id curve "curve")
 (def ^:icon-id delete "delete")
 (def ^:icon-id delete-text "delete-text")
--- a/frontend/src/app/main/ui/icons.cljs
+++ b/frontend/src/app/main/ui/icons.cljs
@ -70,6 +70,8 @@
 (def ^:icon boolean-intersection (icon-xref :boolean-intersection))
 (def ^:icon boolean-union (icon-xref :boolean-union))
 (def ^:icon bug (icon-xref :bug))
+(def ^:icon character-e (icon-xref :character-e))
+(def ^:icon character-u (icon-xref :character-u))
 (def ^:icon clip-content (icon-xref :clip-content))
 (def ^:icon clipboard (icon-xref :clipboard))
 (def ^:icon clock (icon-xref :clock))
@ -91,6 +93,7 @@
 (def ^:icon corner-top (icon-xref :corner-top))
 (def ^:icon corner-top-left (icon-xref :corner-top-left))
 (def ^:icon corner-top-right (icon-xref :corner-top-right))
+(def ^:icon crown (icon-xref :crown))
 (def ^:icon curve (icon-xref :curve))
 (def ^:icon delete-text (icon-xref :delete-text))
 (def ^:icon delete (icon-xref :delete))
--- a/frontend/src/app/main/ui/routes.cljs
+++ b/frontend/src/app/main/ui/routes.cljs
@ -34,6 +34,7 @@
    ["/password"      :settings-password]
    ["/feedback"      :settings-feedback]
    ["/options"       :settings-options]
+    ["/subscriptions" :settings-subscription]
    ["/access-tokens" :settings-access-tokens]
    ["/notifications" :settings-notifications]]

--- a/frontend/src/app/main/ui/settings.cljs
+++ b/frontend/src/app/main/ui/settings.cljs
@ -22,6 +22,7 @@
   [app.main.ui.settings.password :refer [password-page]]
   [app.main.ui.settings.profile :refer [profile-page]]
   [app.main.ui.settings.sidebar :refer [sidebar]]
+   [app.main.ui.settings.subscription :refer [subscription-page*]]
   [app.util.i18n :as i18n :refer [tr]]
   [rumext.v2 :as mf]))

@ -67,6 +68,9 @@
          :settings-options
          [:& options-page]

+          :settings-subscription
+          [:> subscription-page*]
+
          :settings-access-tokens
          [:& access-tokens-page]

--- a/frontend/src/app/main/ui/settings/sidebar.cljs
+++ b/frontend/src/app/main/ui/settings/sidebar.cljs
@ -40,6 +40,9 @@
 (def ^:private go-settings-options
  #(st/emit! (rt/nav :settings-options)))

+(def ^:private go-settings-subscription
+  #(st/emit! (rt/nav :settings-subscription)))
+
 (def ^:private go-settings-access-tokens
  #(st/emit! (rt/nav :settings-access-tokens)))

@ -62,6 +65,7 @@
        password?      (= section :settings-password)
        options?       (= section :settings-options)
        feedback?      (= section :settings-feedback)
+        subscription?  (= section :settings-subscription)
        access-tokens? (= section :settings-access-tokens)
        notifications? (= section :settings-notifications)
        team-id        (or (dtm/get-last-team-id)
@ -104,6 +108,13 @@
             :data-testid "settings-profile"}
        [:span {:class (stl/css :element-title)} (tr "labels.settings")]]

+       (when (contains? cf/flags :subscriptions)
+         [:li {:class (stl/css-case :current subscription?
+                                    :settings-item true)
+               :on-click go-settings-subscription
+               :data-testid "settings-subscription"}
+          [:span {:class (stl/css :element-title)} (tr "subscription.labels")]])
+
       (when (contains? cf/flags :access-tokens)
         [:li {:class (stl/css-case :current access-tokens?
                                    :settings-item true)
--- a/frontend/src/app/main/ui/settings/subscription.cljs
+++ b/frontend/src/app/main/ui/settings/subscription.cljs
@ -0,0 +1,132 @@
+(ns app.main.ui.settings.subscription
+  (:require-macros [app.main.style :as stl])
+  (:require
+   [app.main.refs :as refs]
+   [app.main.ui.icons :as i]
+   [app.util.dom :as dom]
+   [app.util.i18n :as i18n :refer [tr]]
+   [app.util.time :as dt]
+   [rumext.v2 :as mf]))
+
+(mf/defc plan-card*
+  {::mf/props :obj}
+  [{:keys [card-title card-title-icon price-value price-period benefits-title benefits cta-text cta-link]}]
+  [:div {:class (stl/css :plan-card)}
+   [:div {:class (stl/css :plan-card-header)}
+    [:div {:class (stl/css :plan-card-title-container)}
+     (when card-title-icon [:span {:class (stl/css :plan-title-icon)} card-title-icon])
+     [:h4 {:class (stl/css :plan-card-title)}  card-title]]
+    (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]])]
+   (when benefits-title [:h5 {:class (stl/css :benefits-title)} benefits-title])
+   [:ul {:class (stl/css :benefits-list)}
+    (for [benefit  benefits]
+      [:li {:key (str benefit) :class (stl/css :benefit)} "- " benefit])]
+   (when (and cta-link cta-text) [:a {:class (stl/css :cta-button)
+                                      :href cta-link} cta-text])])
+
+(mf/defc subscription-page*
+  []
+  (let [;; TODO subscription cases professional/unlimited/enterprise
+        subscription-name      :unlimited
+        subscription-is-trial  false
+        locale                 (mf/deref i18n/locale)
+        profile                (mf/deref refs/profile)
+        penpot-member          (dt/format-date-locale-short (:created-at profile) {:locale locale})
+        ;; TODO get subscription member date
+        subscription-member    "January 17, 2024"
+        ;; TODO update url to penpot payments
+        go-to-payments         "https://penpot.app/pricing"]
+
+    (mf/with-effect []
+      (dom/set-html-title (tr "subscription.labels")))
+    [:section {:class (stl/css :dashboard-section)}
+     [:div {:class (stl/css :dashboard-content)}
+      [:h2 {:class (stl/css :title-section)} (tr "subscription.labels")]
+
+
+      [:div {:class (stl/css :your-subscription)}
+       [:h3 {:class (stl/css :plan-section-title)} (tr "subscription.settings.section-plan")]
+       (case subscription-name
+         :professional
+         [:> plan-card* {:card-title (tr "subscription.settings.professional")
+                         :benefits [(tr "subscription.settings.professional.projects-files"),
+                                    (tr "subscription.settings.professional.teams-editors"),
+                                    (tr "subscription.settings.professional.storage")]}]
+
+         :unlimited
+         (if subscription-is-trial
+           [:> plan-card* {:card-title (tr "subscription.settings.unlimited-trial")
+                           :card-title-icon i/character-u
+                           :benefits-title (tr "subscription.settings.benefits.all-professional-benefits")
+                           :benefits [(tr "subscription.settings.unlimited.teams"),
+                                      (tr "subscription.settings.unlimited.bill"),
+                                      (tr "subscription.settings.unlimited.storage")]
+                           :cta-text (tr "subscription.settings.manage-your-subscription")
+                           :cta-link go-to-payments}]
+
+           [:> plan-card* {:card-title (tr "subscription.settings.unlimited")
+                           :card-title-icon i/character-u
+                           :benefits-title (tr "subscription.settings.benefits.all-unlimited-benefits")
+                           :benefits [(tr "subscription.settings.unlimited.teams"),
+                                      (tr "subscription.settings.unlimited.bill"),
+                                      (tr "subscription.settings.unlimited.storage")]
+                           :cta-text (tr "subscription.settings.manage-your-subscription")
+                           :cta-link go-to-payments}])
+
+         :enterprise
+         [:> plan-card* {:card-title (tr "subscription.settings.enterprise")
+                         :card-title-icon i/character-e
+                         :benefits-title (tr "subscription.settings.benefits.all-professiona-benefits")
+                         :benefits [(tr "subscription.settings.enterprise.support"),
+                                    (tr "subscription.settings.enterprise.security"),
+                                    (tr "subscription.settings.enterprise.logs")]
+                         :cta-text (tr "subscription.settings.manage-your-subscription")
+                         :cta-link go-to-payments}])
+
+       [:div {:class (stl/css :membership-container)}
+        (when subscription-member [:div {:class (stl/css :membership)}
+                                   [:span {:class (stl/css :subscription-member)} i/crown]
+                                   [:span {:class (stl/css :membership-date)} (tr "subscription.settings.support-us-since" subscription-member)]])
+
+        [:div {:class (stl/css :membership)}
+         [:span {:class (stl/css :penpot-member)} i/user]
+         [:span {:class (stl/css :membership-date)} (tr "subscription.settings.member-since" penpot-member)]]]]
+
+      [:div {:class (stl/css :other-subscriptions)}
+       [:h3 {:class (stl/css :plan-section-title)} (tr "subscription.settings.other-plans")]
+       (when (not= subscription-name :professional)
+         [:> plan-card* {:card-title (tr "subscription.settings.professional")
+                         :price-value "$0"
+                         :price-period (tr "subscription.settings.price-editor-month")
+                         :benefits [(tr "subscription.settings.professional.projects-files"),
+                                    (tr "subscription.settings.professional.teams-editors"),
+                                    (tr "subscription.settings.professional.storage")]
+                         :cta-text (tr "subscription.dashboard.power-up.subscribe")
+                         :cta-link go-to-payments}])
+
+       (when (not= subscription-name :unlimited)
+         [:> plan-card* {:card-title (tr "subscription.settings.unlimited")
+                         :card-title-icon i/character-u
+                         :price-value "$7"
+                         :price-period (tr "subscription.settings.price-editor-month")
+                         :benefits-title (tr "subscription.settings.benefits.all-professiona-benefits")
+                         :benefits [(tr "subscription.settings.unlimited.teams"),
+                                    (tr "subscription.settings.unlimited.bill"),
+                                    (tr "subscription.settings.unlimited.storage")]
+                         :cta-text (tr "subscription.settings.ulimited.try-it-free")
+                         :cta-link go-to-payments}])
+
+       (when (not= subscription-name :enterprise)
+         [:> plan-card* {:card-title (tr "subscription.settings.enterprise")
+                         :card-title-icon i/character-e
+                         :price-value "$950"
+                         :price-period (tr "subscription.settings.price-organization-month")
+                         :benefits-title (tr "subscription.settings.benefits.all-professiona-benefits")
+                         :benefits [(tr "subscription.settings.enterprise.support"),
+                                    (tr "subscription.settings.enterprise.security"),
+                                    (tr "subscription.settings.enterprise.logs")]
+                         :cta-text (tr "subscription.dashboard.power-up.subscribe")
+                         :cta-link go-to-payments}])]]]))
--- a/frontend/src/app/main/ui/settings/subscription.scss
+++ b/frontend/src/app/main/ui/settings/subscription.scss
@ -0,0 +1,126 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+//
+// Copyright (c) KALEIDOS INC
+
+@use "common/refactor/common-refactor.scss" as *;
+@use "../ds/typography.scss" as t;
+
+.dashboard-section {
+  display: flex;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+}
+
+.dashboard-content {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  max-width: $s-500;
+  margin-bottom: $s-32;
+  width: $s-580;
+  margin: $s-92 auto $s-120 auto;
+  justify-content: center;
+}
+
+.membership-container {
+  margin-block-start: $s-16;
+}
+
+.membership {
+  align-items: center;
+  display: flex;
+  margin-block-start: $s-8;
+}
+
+.membership.first {
+  margin-block-start: $s-16;
+}
+
+.membership-date {
+  @include t.use-typography("body-small");
+  color: var(--color-foreground-secondary);
+  margin-inline-start: $s-8;
+}
+
+.subscription-member,
+.penpot-member {
+  @extend .button-icon;
+}
+
+.penpot-member {
+  stroke: var(--icon-foreground);
+}
+
+.subscription-member {
+  stroke: #fdcd79ff;
+}
+
+.title-section {
+  @include t.use-typography("title-large");
+  color: var(--color-foreground-primary);
+  margin-block-end: $s-16;
+}
+
+.plan-section-title {
+  @include t.use-typography("headline-small");
+  color: var(--color-foreground-primary);
+}
+
+.plan-card {
+  border: $s-1 solid var(--color-foreground-secondary);
+  border-radius: $s-8;
+  margin-block-start: $s-16;
+  padding: $s-16;
+}
+
+.plan-card-header {
+  display: flex;
+  justify-content: space-between;
+  margin-block-end: $s-8;
+}
+
+.plan-card-title-container {
+  display: flex;
+  align-items: center;
+  gap: $s-8;
+}
+
+.plan-title-icon {
+  @extend .button-icon;
+  stroke: var(--color-foreground-primary);
+  border-radius: $s-4;
+  border: $s-1 solid var(--color-foreground-primary);
+}
+
+.plan-card-title,
+.plan-price-value {
+  @include t.use-typography("title-medium");
+  color: var(--color-foreground-primary);
+}
+
+.plan-price-period {
+  @include t.use-typography("body-small");
+  color: var(--color-foreground-primary);
+}
+
+.benefits-list {
+  margin-block: 0;
+}
+
+.benefits-title,
+.benefit {
+  @include t.use-typography("body-medium");
+  color: var(--color-foreground-secondary);
+}
+
+.other-subscriptions {
+  margin-block-start: $s-36;
+}
+
+.cta-button {
+  @include t.use-typography("body-small");
+  color: var(--color-accent-tertiary);
+}
--- a/frontend/src/app/util/time.cljs
+++ b/frontend/src/app/util/time.cljs
@ -277,6 +277,14 @@
       (->> #js {:locale locale}
            (dfn-format v f))))))

+(defn format-date-locale-short
+  ([v] (format-date-locale-short v nil))
+  ([v {:keys [locale] :or {locale "en"}}]
+   (when v
+     (let [locale-obj (obj/get locales locale)
+           format-str "MMMM do, yyyy"]
+       (dfn-format (js/Date. v) format-str #js {:locale locale-obj})))))
+
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 ;; Measurement Helpers
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
--- a/frontend/translations/en.po
+++ b/frontend/translations/en.po
@ -1055,6 +1055,44 @@ msgstr "Penpot Free"
 msgid "dashboard.upgrade-plan.power-up"
 msgstr "Power up"

+msgid "subscription.dashboard.power-up.professional.top-title"
+msgstr "Professional plan"
+
+#, markdown
+msgid "subscription.dashboard.power-up.professional.bottom-description"
+msgstr "Get extra editors and storage, file backup and more with the **Unlimited plan**"
+
+msgid "subscription.dashboard.power-up.unlimited-plan"
+msgstr "Unlimited plan"
+
+msgid "subscription.dashboard.power-up.unlimited.top-description"
+msgstr "Extra editors, storage and autosaved version, file backup and more."
+
+#, markdown
+msgid "subscription.dashboard.power-up.unlimited.bottom-description"
+msgstr "Get advanced security, activity logs, dedicated support and more with **Enterprise plan**"
+
+msgid "subscription.dashboard.power-up.enterprise-plan"
+msgstr "Enterprise plan"
+
+msgid "subscription.dashboard.power-up.unlimited.cta"
+msgstr "Take a look"
+
+msgid "subscription.dashboard.power-up.enterprise.description"
+msgstr "Advanced security, activity logs, dedicated support and more."
+
+msgid "subscription.dashboard.power-up.trial.top-title"
+msgstr "Unlimited plan (trial)"
+
+msgid "subscription.dashboard.power-up.trial.top-description"
+msgstr "Extra editors, storage and autosaved version, file backup and more."
+
+msgid "subscription.dashboard.power-up.trial.bottom-description"
+msgstr "Enjoying your trial? Unlock full access forever."
+
+msgid "subscription.dashboard.power-up.subscribe"
+msgstr "Subscribe"
+
 #: src/app/main/ui/dashboard/team.cljs:909
 msgid "dashboard.webhooks.active"
 msgstr "Is active"
@ -2320,6 +2358,9 @@ msgstr "Sets"
 msgid "labels.settings"
 msgstr "Settings"

+msgid "subscription.labels"
+msgstr "Subscription"
+
 #: src/app/main/ui/viewer/header.cljs:206
 msgid "labels.share"
 msgstr "Share"
@ -4257,6 +4298,75 @@ msgstr "Password - Penpot"
 msgid "title.settings.profile"
 msgstr "Profile - Penpot"

+msgid "subscription.settings.section-plan"
+msgstr "Your subscription"
+
+msgid "subscription.settings.other-plans"
+msgstr "Other penpot plans"
+
+msgid "subscription.settings.professional"
+msgstr "Professional"
+
+msgid "subscription.settings.unlimited"
+msgstr "Unlimited"
+
+msgid "subscription.settings.unlimited-trial"
+msgstr "Unlimited (trial)"
+
+msgid "subscription.settings.enterprise"
+msgstr "Enterprise"
+
+msgid "subscription.settings.support-us-since"
+msgstr "You support us since %s"
+
+msgid "subscription.settings.member-since"
+msgstr "Penpot member since %s"
+
+msgid "subscription.settings.price-editor-month"
+msgstr "editor per month"
+
+msgid "subscription.settings.price-organization-month"
+msgstr "organization per month"
+
+msgid "subscription.settings.professional.projects-files"
+msgstr "Unlimited projects, files and drafts"
+
+msgid "subscription.settings.professional.teams-editors"
+msgstr "Unlimited teams of up to 8 editors"
+
+msgid "subscription.settings.professional.storage"
+msgstr "10GB of storage and 7-day autosave versions"
+
+msgid "subscription.settings.benefits.all-professional-benefits"
+msgstr "All Professional plan benefits and:"
+
+msgid "subscription.settings.benefits.all-unlimited-benefits"
+msgstr "All Unlimited plan benefits and:"
+
+msgid "subscription.settings.unlimited.teams"
+msgstr "Unlimited teams, no matter your team size"
+
+msgid "subscription.settings.unlimited.bill"
+msgstr "Capped monthly bill"
+
+msgid "subscription.settings.unlimited.storage"
+msgstr "25GB of storage and 30-day autosave versions and file backup"
+
+msgid "subscription.settings.ulimited.try-it-free"
+msgstr "Try it free for 14 days"
+
+msgid "subscription.settings.manage-your-subscription"
+msgstr "Manage your subscription"
+
+msgid "subscription.settings.enterprise.support"
+msgstr "Dedicated support"
+
+msgid "subscription.settings.enterprise.security"
+msgstr "Advanced security"
+
+msgid "subscription.settings.enterprise.logs"
+msgstr "Activity logs"
+
 #: src/app/main/ui/dashboard/team.cljs:779
 msgid "title.team-invitations"
 msgstr "Invitations - %s - Penpot"
--- a/frontend/translations/es.po
+++ b/frontend/translations/es.po
@ -1067,6 +1067,44 @@ msgstr "Penpot Gratis"
 msgid "dashboard.upgrade-plan.power-up"
 msgstr "Mejora"

+msgid "subscription.dashboard.power-up.professional.top-title"
+msgstr "Plan Professional"
+
+#, markdown
+msgid "subscription.dashboard.power-up.professional.bottom-description"
+msgstr "Consigue editores y almacenamiento adicionales, copias de seguridad de archivos y mucho más con el **Plan ilimitado**"
+
+msgid "subscription.dashboard.power-up.unlimited-plan"
+msgstr "Plan ilimitado"
+
+msgid "subscription.dashboard.power-up.unlimited.top-description"
+msgstr "Editores adicionales, almacenamiento y versión autoguardada, copia de seguridad de archivos y mucho más."
+
+#, markdown
+msgid "subscription.dashboard.power-up.unlimited.bottom-description"
+msgstr "Obtenga seguridad avanzada, registros de actividad, asistencia dedicada y mucho más con el **Plan de empresa**"
+
+msgid "subscription.dashboard.power-up.enterprise-plan"
+msgstr "Plan Enterprise"
+
+msgid "subscription.dashboard.power-up.unlimited.cta"
+msgstr "Echa un vistazo"
+
+msgid "subscription.dashboard.power-up.enterprise.description"
+msgstr "Seguridad avanzada, registros de actividad, asistencia dedicada y mucho más."
+
+msgid "subscription.dashboard.power-up.trial.top-title"
+msgstr "Plan Unlimited (Prueba)"
+
+msgid "subscription.dashboard.power-up.trial.top-description"
+msgstr "Editores adicionales, almacenamiento y versión autoguardada, copia de seguridad de archivos y mucho más."
+
+msgid "subscription.dashboard.power-up.trial.bottom-description"
+msgstr "¿Disfrutas de la prueba? Desbloquea el acceso completo para siempre."
+
+msgid "subscription.dashboard.power-up.subscribe"
+msgstr "Suscríbete"
+
 #: src/app/main/ui/dashboard/team.cljs:909
 msgid "dashboard.webhooks.active"
 msgstr "Activo"
@ -2339,6 +2377,9 @@ msgstr "Sets"
 msgid "labels.settings"
 msgstr "Configuración"

+msgid "subscription.labels"
+msgstr "Suscripción"
+
 #: src/app/main/ui/viewer/header.cljs:206
 msgid "labels.share"
 msgstr "Compartir"
@ -4284,6 +4325,72 @@ msgstr "Contraseña - Penpot"
 msgid "title.settings.profile"
 msgstr "Perfil - Penpot"

+msgid "subscription.settings.section-plan"
+msgstr "Tu suscripción"
+
+msgid "subscription.settings.other-plans"
+msgstr "Otros planes de penpot"
+
+msgid "subscription.settings.professional"
+msgstr "Professional"
+
+msgid "subscription.settings.unlimited"
+msgstr "Unlimited"
+
+msgid "subscription.settings.enterprise"
+msgstr "Enterprise"
+
+msgid "subscription.settings.support-us-since"
+msgstr "Nos apoyas desde %s"
+
+msgid "subscription.settings.member-since"
+msgstr "Miembro de penpot desde %s"
+
+msgid "subscription.settings.price-editor-month"
+msgstr "editor por mes"
+
+msgid "subscription.settings.price-organization-month"
+msgstr "organización por mes"
+
+msgid "subscription.settings.professional.projects-files"
+msgstr "Proyectos, archivos y borradores ilimitados"
+
+msgid "subscription.settings.professional.teams-editors"
+msgstr "Equipos ilimitados de hasta 8 redactores"
+
+msgid "subscription.settings.professional.storage"
+msgstr "10 GB de almacenamiento y versiones de autoguardado de 7 días"
+
+msgid "subscription.settings.benefits.all-professional-benefits"
+msgstr "Todas las prestaciones del plan Professional y:"
+
+msgid "subscription.settings.benefits.all-unlimited-benefits"
+msgstr "Todas las prestaciones del plan Unlimited y:"
+
+msgid "subscription.settings.unlimited.teams"
+msgstr "Equipos ilimitados, independientemente de su tamaño"
+
+msgid "subscription.settings.unlimited.bill"
+msgstr "Factura mensual limitada"
+
+msgid "subscription.settings.unlimited.storage"
+msgstr "25 GB de almacenamiento y 30 días de autoguardado de versiones y copias de seguridad de archivos"
+
+msgid "subscription.settings.ulimited.try-it-free"
+msgstr "Pruébalo gratis durante 14 días"
+
+msgid "subscription.settings.manage-your-subscription"
+msgstr "Gestionar tu suscripción"
+
+msgid "subscription.settings.enterprise.support"
+msgstr "Apoyo específico"
+
+msgid "subscription.settings.enterprise.security"
+msgstr "Seguridad avanzada"
+
+msgid "subscription.settings.enterprise.logs"
+msgstr "Registros de actividad"
+
 #: src/app/main/ui/dashboard/team.cljs:779
 msgid "title.team-invitations"
 msgstr "Invitaciones - %s - Penpot"