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

✨ Add improvements payment flow

Browse Source
This commit is contained in:
Marina López
2025-10-31 10:53:06 +01:00
parent 2f33009e69
commit 03eeeda44f
3 changed files with 47 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -26,7 +26,7 @@
"professional"))
(mf/defc cta-power-up*
[{:keys [top-title top-description bottom-description bottom-button bottom-button-href has-dropdown]}]
[{:keys [top-title top-description bottom-description bottom-button bottom-button-href has-dropdown is-highlighted]}]
(let [show-data* (mf/use-state false)
show-data (deref show-data*)
handle-click
@@ -40,7 +40,8 @@
(dom/stop-propagation event)
(st/emit! (rt/nav-raw :href bottom-button-href))))]
[:div {:class (stl/css :cta-power-up)
[:div {:class (stl/css-case :cta-power-up true
:highlighted is-highlighted)
:on-click handle-click}
[:button {:class (stl/css-case :cta-top-section true
:cta-without-dropdown (not has-dropdown))}
@@ -79,7 +80,8 @@
: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}]
:has-dropdown false
:is-highlighted true}]
"unlimited"
(if subscription-is-trial
@@ -87,24 +89,28 @@
{:top-title (tr "subscription.dashboard.power-up.your-subscription")
:top-description (tr "subscription.dashboard.power-up.trial.top-title")
:bottom-description (tr "subscription.dashboard.power-up.trial.bottom-description" subscription-href)
:has-dropdown true}]
:has-dropdown true
:is-highlighted false}]
[:> cta-power-up*
{:top-title (tr "subscription.dashboard.power-up.your-subscription")
:top-description (tr "subscription.dashboard.power-up.unlimited-plan")
:bottom-description (tr "subscription.dashboard.power-up.unlimited.bottom-text" subscription-href)
:has-dropdown true}])
:has-dropdown true
:is-highlighted false}])
"enterprise"
(if subscription-is-trial
[:> cta-power-up*
{:top-title (tr "subscription.dashboard.power-up.your-subscription")
:top-description (tr "subscription.dashboard.power-up.enterprise-trial.top-title")
:has-dropdown false}]
:has-dropdown false
:is-highlighted false}]
[:> cta-power-up*
{:top-title (tr "subscription.dashboard.power-up.your-subscription")
:top-description (tr "subscription.dashboard.power-up.enterprise-plan")
:has-dropdown false}]))))
:has-dropdown false
:is-highlighted false}]))))
(mf/defc team*
[{:keys [is-owner team]}]

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

@@ -19,6 +19,12 @@
padding: var(--sp-m);
}
.cta-power-up.highlighted {
background: var(--color-background-quaternary);
border: $b-1 solid var(--color-accent-primary-muted);
padding: var(--sp-l);
}
.cta-top-section {
@include deprecated.buttonStyle;
display: grid;
@@ -54,6 +60,11 @@
margin-block-start: var(--sp-m);
padding-block-start: var(--sp-m);
}
.highlighted .cta-bottom-section {
border-block-start: $b-1 solid var(--color-accent-primary-muted);
}
.cta-bottom-section .content {
@include t.use-typography("body-medium");
@include deprecated.buttonStyle;
@@ -66,6 +77,10 @@
margin-block-start: var(--sp-s);
}
.highlighted .cta-bottom-button {
margin-block-start: var(--sp-m);
}
.cta-text,
.cta-title {
text-align: left;
@@ -76,10 +91,19 @@
margin-block-end: var(--sp-xs);
}
.highlighted .cta-title {
@include t.use-typography("body-medium");
}
.cta-text {
@include t.use-typography("title-small");
}
.highlighted .cta-text {
@include t.use-typography("body-large");
color: var(--color-foreground-primary);
}
.cta-bottom-section .content a {
@include t.use-typography("body-medium");
color: var(--color-accent-tertiary);

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

@@ -34,7 +34,7 @@
cta-link-with-icon
editors
recommended
has-trial-cta]}]
show-button-cta]}]
[:div {:class (stl/css-case :plan-card true
:plan-card-highlight recommended)}
@@ -57,10 +57,10 @@
[: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 (not has-trial-cta)) [:button {:class (stl/css-case :cta-button true
(when (and cta-link cta-text (not show-button-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"
(when (and cta-link cta-text show-button-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])
@@ -459,7 +459,7 @@
:cta-text-with-icon (tr "subscription.settings.more-information")
:cta-link-with-icon go-to-pricing-page
:recommended (= subscription-type "professional")
:has-trial-cta (not (:type subscription))}])
:show-button-cta (= subscription-type "professional")}])
(when (not= subscription-type "enterprise")
[:> plan-card* {:card-title (tr "subscription.settings.enterprise")
@@ -474,5 +474,5 @@
:cta-link #(open-subscription-modal "enterprise" subscription)
:cta-text-with-icon (tr "subscription.settings.more-information")
:cta-link-with-icon go-to-pricing-page
:has-trial-cta (not (:type subscription))}])]]]))
:show-button-cta (= subscription-type "professional")}])]]]))