From 4d8a70f1fa7be84d76ba9e12302627e4da0524a6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marina=20L=C3=B3pez?= Date: Tue, 28 Oct 2025 10:54:21 +0100 Subject: [PATCH] :sparkles: Improvements payments --- .../app/main/ui/dashboard/subscription.cljs | 27 ++++++++++++--- .../app/main/ui/dashboard/subscription.scss | 4 +++ .../src/app/main/ui/notifications/badge.scss | 3 +- .../app/main/ui/settings/subscription.cljs | 34 ++++++++++++++----- .../app/main/ui/settings/subscription.scss | 15 ++++++-- frontend/translations/en.po | 12 ++++--- frontend/translations/es.po | 14 +++++--- 7 files changed, 83 insertions(+), 26 deletions(-) diff --git a/frontend/src/app/main/ui/dashboard/subscription.cljs b/frontend/src/app/main/ui/dashboard/subscription.cljs index 3068f0ba01..fcd47d1cef 100644 --- a/frontend/src/app/main/ui/dashboard/subscription.cljs +++ b/frontend/src/app/main/ui/dashboard/subscription.cljs @@ -9,6 +9,7 @@ [app.main.router :as rt] [app.main.store :as st] [app.main.ui.components.dropdown-menu :refer [dropdown-menu-item*]] + [app.main.ui.ds.buttons.button :refer [button*]] [app.main.ui.ds.product.cta :refer [cta*]] [app.main.ui.icons :as deprecated-icon] [app.util.dom :as dom] @@ -25,14 +26,19 @@ "professional")) (mf/defc cta-power-up* - [{:keys [top-title top-description bottom-description has-dropdown]}] + [{:keys [top-title top-description bottom-description bottom-button bottom-button-href 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)))] + (swap! show-data* not))) + handle-navigation + (mf/use-fn + (fn [event] + (dom/stop-propagation event) + (st/emit! (rt/nav-raw :href bottom-button-href))))] [:div {:class (stl/css :cta-power-up) :on-click handle-click} @@ -47,7 +53,16 @@ [:div {:class (stl/css :cta-bottom-section)} [:> i18n/tr-html* {:content bottom-description :class (stl/css :content) - :tag-name "span"}]])])) + :tag-name "span"}]]) + + (when (and bottom-description bottom-button) + [:div {:class (stl/css :cta-bottom-section)} + [:span {:class (stl/css :content)} + bottom-description] + [:> button* {:variant "primary" + :type "button" + :class (stl/css :cta-bottom-button) + :on-click handle-navigation} bottom-button]])])) (mf/defc subscription-sidebar* [{:keys [profile]}] @@ -61,8 +76,10 @@ [:> cta-power-up* {:top-title (tr "subscription.dashboard.power-up.your-subscription") :top-description (tr "subscription.dashboard.power-up.professional.top-title") - :bottom-description (tr "subscription.dashboard.power-up.professional.bottom-text" subscription-href) - :has-dropdown true}] + :bottom-description (tr "subscription.dashboard.power-up.professional.bottom-description") + :bottom-button (tr "subscription.dashboard.power-up.professional.bottom-button") + :bottom-button-href subscription-href + :has-dropdown false}] "unlimited" (if subscription-is-trial diff --git a/frontend/src/app/main/ui/dashboard/subscription.scss b/frontend/src/app/main/ui/dashboard/subscription.scss index 7dc51ad6d6..95d131d066 100644 --- a/frontend/src/app/main/ui/dashboard/subscription.scss +++ b/frontend/src/app/main/ui/dashboard/subscription.scss @@ -62,6 +62,10 @@ text-align: left; } +.cta-bottom-button { + margin-block-start: var(--sp-s); +} + .cta-text, .cta-title { text-align: left; diff --git a/frontend/src/app/main/ui/notifications/badge.scss b/frontend/src/app/main/ui/notifications/badge.scss index bc88b69b59..99941b8fb4 100644 --- a/frontend/src/app/main/ui/notifications/badge.scss +++ b/frontend/src/app/main/ui/notifications/badge.scss @@ -19,7 +19,8 @@ height: fit-content; min-width: deprecated.$s-80; width: fit-content; - padding: 0; + padding-block: 0; + padding-inline: var(--sp-xs); margin: 0; border: deprecated.$s-1 solid var(--badge-notification-border-color); border-radius: deprecated.$br-8; diff --git a/frontend/src/app/main/ui/settings/subscription.cljs b/frontend/src/app/main/ui/settings/subscription.cljs index 7f17322928..532d52b2b2 100644 --- a/frontend/src/app/main/ui/settings/subscription.cljs +++ b/frontend/src/app/main/ui/settings/subscription.cljs @@ -12,7 +12,9 @@ [app.main.store :as st] [app.main.ui.components.forms :as fm] [app.main.ui.dashboard.subscription :refer [get-subscription-type]] + [app.main.ui.ds.buttons.button :refer [button*]] [app.main.ui.icons :as deprecated-icon] + [app.main.ui.notifications.badge :refer [badge-notification]] [app.util.dom :as dom] [app.util.i18n :as i18n :refer [tr c]] [potok.v2.core :as ptk] @@ -30,12 +32,20 @@ cta-link-trial cta-text-with-icon cta-link-with-icon - editors]}] - [:div {:class (stl/css :plan-card)} + editors + recommended + has-trial-cta]}] + + [:div {:class (stl/css-case :plan-card true + :plan-card-highlight recommended)} [: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] + [:h4 {:class (stl/css :plan-card-title)} card-title] + (when recommended + [:& badge-notification {:content (tr "subscription.settings.recommended") + :size :small + :is-focus true}]) (when editors [:span {:class (stl/css :plan-editors)} (tr "subscription.settings.editors" editors)])] (when (and price-value price-period) [:div {:class (stl/css :plan-price)} @@ -47,9 +57,13 @@ [:li {:key (dm/str benefit) :class (stl/css :benefit)} "- " benefit])] (when (and cta-link-with-icon cta-text-with-icon) [:button {:class (stl/css :cta-button :more-info) :on-click cta-link-with-icon} cta-text-with-icon deprecated-icon/open-link]) - (when (and cta-link cta-text) [:button {:class (stl/css-case :cta-button true - :bottom-link (not (and cta-link-trial cta-text-trial))) - :on-click cta-link} cta-text]) + (when (and cta-link cta-text (not has-trial-cta)) [:button {:class (stl/css-case :cta-button true + :bottom-link (not (and cta-link-trial cta-text-trial))) + :on-click cta-link} cta-text]) + (when (and cta-link cta-text has-trial-cta) [:> button* {:variant "primary" + :type "button" + :class (stl/css-case :bottom-button (not (and cta-link-trial cta-text-trial))) + :on-click cta-link} cta-text]) (when (and cta-link-trial cta-text-trial) [:button {:class (stl/css :cta-button :bottom-link) :on-click cta-link-trial} cta-text-trial])]) (defn schema:seats-form [min-editors] @@ -443,7 +457,9 @@ :cta-text (if (:type subscription) (tr "subscription.settings.subscribe") (tr "subscription.settings.try-it-free")) :cta-link #(open-subscription-modal "unlimited" subscription) :cta-text-with-icon (tr "subscription.settings.more-information") - :cta-link-with-icon go-to-pricing-page}]) + :cta-link-with-icon go-to-pricing-page + :recommended (= subscription-type "professional") + :has-trial-cta (not (:type subscription))}]) (when (not= subscription-type "enterprise") [:> plan-card* {:card-title (tr "subscription.settings.enterprise") @@ -457,4 +473,6 @@ :cta-text (if (:type subscription) (tr "subscription.settings.subscribe") (tr "subscription.settings.try-it-free")) :cta-link #(open-subscription-modal "enterprise" subscription) :cta-text-with-icon (tr "subscription.settings.more-information") - :cta-link-with-icon go-to-pricing-page}])]]])) + :cta-link-with-icon go-to-pricing-page + :has-trial-cta (not (:type subscription))}])]]])) + diff --git a/frontend/src/app/main/ui/settings/subscription.scss b/frontend/src/app/main/ui/settings/subscription.scss index b3632069b7..89081c0a1f 100644 --- a/frontend/src/app/main/ui/settings/subscription.scss +++ b/frontend/src/app/main/ui/settings/subscription.scss @@ -72,12 +72,17 @@ } .plan-card { - border: $b-1 solid var(--color-foreground-secondary); + border: $b-1 solid var(--color-background-quaternary); border-radius: var(--sp-s); margin-block-start: var(--sp-l); padding: var(--sp-l); } +.plan-card-highlight { + background-color: var(--color-background-tertiary); + border: $b-1 solid var(--color-accent-select); +} + .plan-card-header { display: flex; justify-content: space-between; @@ -142,7 +147,7 @@ @include t.use-typography("body-medium"); @include deprecated.buttonStyle; align-items: center; - color: var(--color-accent-tertiary); + color: var(--color-accent-primary); display: flex; margin-block-start: var(--sp-m); text-align: left; @@ -152,7 +157,7 @@ @extend .button-icon; height: var(--sp-l); width: var(--sp-l); - stroke: var(--color-accent-tertiary); + color: var(--color-accent-primary); margin-inline-start: var(--sp-xs); } @@ -164,6 +169,10 @@ margin-block-start: var(--sp-xs); } +.bottom-button { + margin-block-start: var(--sp-xl); +} + .modal-overlay { @extend .modal-overlay-base; } diff --git a/frontend/translations/en.po b/frontend/translations/en.po index e4b9d44b15..cc231f2306 100644 --- a/frontend/translations/en.po +++ b/frontend/translations/en.po @@ -4514,10 +4514,11 @@ msgstr "Enterprise plan (trial)" #: src/app/main/ui/dashboard/subscription.cljs:64 #, markdown -msgid "subscription.dashboard.power-up.professional.bottom-text" -msgstr "" -"Get extra storage, file recovery and more for your teams with the Unlimited " -"plan. [Power up!|target:self](%s)" +msgid "subscription.dashboard.power-up.professional.bottom-description" +msgstr "Get extra storage, file recovery and more for your teams." + +msgid "subscription.dashboard.power-up.professional.bottom-button" +msgstr "Power up!" #: src/app/main/ui/dashboard/subscription.cljs:63 msgid "subscription.dashboard.power-up.professional.top-title" @@ -4623,6 +4624,9 @@ msgstr "All Professional plan benefits and:" msgid "subscription.settings.benefits.all-unlimited-benefits" msgstr "All Unlimited plan benefits and:" +msgid "subscription.settings.recommended" +msgstr "Recommended" + #: src/app/main/ui/settings/subscription.cljs:39 msgid "subscription.settings.editors" msgstr "(x %s editors)" diff --git a/frontend/translations/es.po b/frontend/translations/es.po index 1149dae3ca..cd5c6ce887 100644 --- a/frontend/translations/es.po +++ b/frontend/translations/es.po @@ -4489,10 +4489,11 @@ msgstr "Plan Enterprise (Prueba)" #: src/app/main/ui/dashboard/subscription.cljs:64 #, markdown -msgid "subscription.dashboard.power-up.professional.bottom-text" -msgstr "" -"Consigue almacenamiento adicional, recuperación de archivos y mucho más " -"para tus equipos con el Plan Unlimited. [Mejóralo!|target:self](%s)" +msgid "subscription.dashboard.power-up.professional.bottom-description" +msgstr "Consigue almacenamiento adicional, recuperación de archivos y mucho más para tus equipos." + +msgid "subscription.dashboard.power-up.professional.bottom-button" +msgstr "Mejóralo!" #: src/app/main/ui/dashboard/subscription.cljs:63 msgid "subscription.dashboard.power-up.professional.top-title" @@ -4604,6 +4605,9 @@ 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.recommended" +msgstr "Recomendado" + #: src/app/main/ui/settings/subscription.cljs:39 msgid "subscription.settings.editors" msgstr "(x %s editores)" @@ -4664,7 +4668,7 @@ msgstr "" #: src/app/main/ui/settings/subscription.cljs:177 msgid "subscription.settings.management.dialog.payment-explanation" msgstr "" -"Se cobrar después del período de prueba. No se requiere tarjeta de crédito " +"Se cobrara después del periodo de prueba. No se requiere tarjeta de crédito " "en este momento." #: src/app/main/ui/settings/subscription.cljs:170, src/app/main/ui/settings/subscription.cljs:174