johanels/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-12-11 22:14:05 +01:00
Code Issues Actions 9 Packages Projects Releases Wiki Activity

✨ Improvements payments

Browse Source
This commit is contained in:
Marina López
2025-10-28 10:54:21 +01:00
parent f64105ad08
commit 4d8a70f1fa
7 changed files with 83 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
frontend/src/app/main/ui/dashboard/subscription.cljs
View File

@@ -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

4
frontend/src/app/main/ui/dashboard/subscription.scss
View File

@@ -62,6 +62,10 @@
text-align: left;
}
.cta-bottom-button {
margin-block-start: var(--sp-s);
}
.cta-text,
.cta-title {
text-align: left;

3
frontend/src/app/main/ui/notifications/badge.scss
View File

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

34
frontend/src/app/main/ui/settings/subscription.cljs
View File

@@ -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))}])]]]))

15
frontend/src/app/main/ui/settings/subscription.scss
View File

@@ -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;
}

12
frontend/translations/en.po
View File

@@ -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)"

14
frontend/translations/es.po
View File

@@ -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