mirror of https://github.com/penpot/penpot.git
♻️ Add format and refactor payments
This commit is contained in:
Marina López
parent
d93fe89c12
commit
00bbb0bfb6
|
|
@ -83,74 +83,101 @@
|
|||
::mf/register-as :management-dialog}
|
||||
[{:keys [subscription-type current-subscription editors subscribe-to-trial]}]
|
||||
|
||||
(let [unlimited-modal-step* (mf/use-state 1)
|
||||
unlimited-modal-step (deref unlimited-modal-step*)
|
||||
subscription-name (if subscribe-to-trial
|
||||
(if (= subscription-type "unlimited")
|
||||
(tr "subscription.settings.unlimited-trial")
|
||||
(tr "subscription.settings.enterprise-trial"))
|
||||
(case subscription-type
|
||||
"professional" (tr "subscription.settings.professional")
|
||||
"unlimited" (tr "subscription.settings.unlimited")
|
||||
"enterprise" (tr "subscription.settings.enterprise")))
|
||||
min-editors (if (seq editors) (count editors) 1)
|
||||
initial (mf/with-memo [min-editors]
|
||||
{:min-members min-editors})
|
||||
form (fm/use-form :schema (schema:seats-form min-editors)
|
||||
:initial initial)
|
||||
submit-in-progress* (mf/use-state false)
|
||||
subscribe-to-unlimited (mf/use-fn
|
||||
(mf/deps form)
|
||||
(fn [add-payment-details]
|
||||
(when (not @submit-in-progress*)
|
||||
(let [data (:clean-data @form)
|
||||
return-url (-> (rt/get-current-href) (rt/encode-url))
|
||||
href (if add-payment-details
|
||||
(dm/str "payments/subscriptions/create?type=unlimited&show=true&quantity=" (:min-members data) "&returnUrl=" return-url)
|
||||
(dm/str "payments/subscriptions/create?type=unlimited&show=false&quantity=" (:min-members data) "&returnUrl=" return-url))]
|
||||
(reset! submit-in-progress* true)
|
||||
(reset! form nil)
|
||||
(st/emit! (ptk/event ::ev/event {::ev/name "create-trial-subscription"
|
||||
:type "unlimited"
|
||||
:quantity (:min-members data)})
|
||||
(rt/nav-raw :href href))))))
|
||||
(let [unlimited-modal-step*
|
||||
(mf/use-state 1)
|
||||
|
||||
subscribe-to-enterprise (mf/use-fn
|
||||
(fn []
|
||||
(st/emit! (ptk/event ::ev/event {::ev/name "create-trial-subscription"
|
||||
:type "enterprise"}))
|
||||
(let [return-url (-> (rt/get-current-href) (rt/encode-url))
|
||||
href (dm/str "payments/subscriptions/create?type=enterprise&returnUrl=" return-url)]
|
||||
(st/emit! (rt/nav-raw :href href)))))
|
||||
unlimited-modal-step
|
||||
(deref unlimited-modal-step*)
|
||||
|
||||
handle-accept-dialog (mf/use-fn
|
||||
(fn []
|
||||
(st/emit! (ptk/event ::ev/event {::ev/name "open-subscription-management"
|
||||
::ev/origin "settings"
|
||||
:section "subscription-management-modal"}))
|
||||
(let [current-href (rt/get-current-href)
|
||||
returnUrl (js/encodeURIComponent current-href)
|
||||
href (dm/str "payments/subscriptions/show?returnUrl=" returnUrl)]
|
||||
(st/emit! (rt/nav-raw :href href)))
|
||||
(modal/hide!)))
|
||||
handle-close-dialog (mf/use-fn
|
||||
(fn []
|
||||
(st/emit! (ptk/event ::ev/event {::ev/name "close-subscription-modal"}))
|
||||
(modal/hide!)))
|
||||
subscription-name
|
||||
(if subscribe-to-trial
|
||||
(if (= subscription-type "unlimited")
|
||||
(tr "subscription.settings.unlimited-trial")
|
||||
(tr "subscription.settings.enterprise-trial"))
|
||||
(case subscription-type
|
||||
"professional" (tr "subscription.settings.professional")
|
||||
"unlimited" (tr "subscription.settings.unlimited")
|
||||
"enterprise" (tr "subscription.settings.enterprise")))
|
||||
|
||||
handle-unlimited-modal-step (mf/use-fn
|
||||
(mf/deps unlimited-modal-step)
|
||||
(fn []
|
||||
(if (= unlimited-modal-step 1)
|
||||
(reset! unlimited-modal-step* 2)
|
||||
(reset! unlimited-modal-step* 1))))
|
||||
min-editors
|
||||
(if (seq editors) (count editors) 1)
|
||||
|
||||
show-editors-list* (mf/use-state false)
|
||||
show-editors-list (deref show-editors-list*)
|
||||
handle-click (mf/use-fn
|
||||
(fn [event]
|
||||
(dom/stop-propagation event)
|
||||
(swap! show-editors-list* not)))]
|
||||
initial
|
||||
(mf/with-memo [min-editors]
|
||||
{:min-members min-editors})
|
||||
|
||||
form
|
||||
(fm/use-form :schema (schema:seats-form min-editors)
|
||||
:initial initial)
|
||||
|
||||
form-data-min-editors
|
||||
(-> @form :clean-data :min-members)
|
||||
|
||||
submit-in-progress*
|
||||
(mf/use-state false)
|
||||
|
||||
subscribe-to-unlimited
|
||||
(mf/use-fn
|
||||
(mf/deps form-data-min-editors)
|
||||
(fn [add-payment-details]
|
||||
(when (not @submit-in-progress*)
|
||||
(let [return-url (-> (rt/get-current-href) (rt/encode-url))
|
||||
href (if add-payment-details
|
||||
(dm/str "payments/subscriptions/create?type=unlimited&show=true&quantity=" form-data-min-editors "&returnUrl=" return-url)
|
||||
(dm/str "payments/subscriptions/create?type=unlimited&show=false&quantity=" form-data-min-editors "&returnUrl=" return-url))]
|
||||
(reset! submit-in-progress* true)
|
||||
(reset! form nil)
|
||||
(st/emit! (ptk/event ::ev/event {::ev/name "create-trial-subscription"
|
||||
:type "unlimited"
|
||||
:quantity form-data-min-editors})
|
||||
(rt/nav-raw :href href))))))
|
||||
|
||||
subscribe-to-enterprise
|
||||
(mf/use-fn
|
||||
(fn []
|
||||
(st/emit! (ptk/event ::ev/event {::ev/name "create-trial-subscription"
|
||||
:type "enterprise"}))
|
||||
(let [return-url (-> (rt/get-current-href) (rt/encode-url))
|
||||
href (dm/str "payments/subscriptions/create?type=enterprise&returnUrl=" return-url)]
|
||||
(st/emit! (rt/nav-raw :href href)))))
|
||||
|
||||
handle-accept-dialog
|
||||
(mf/use-fn
|
||||
(fn []
|
||||
(st/emit! (ptk/event ::ev/event {::ev/name "open-subscription-management"
|
||||
::ev/origin "settings"
|
||||
:section "subscription-management-modal"}))
|
||||
(let [current-href (rt/get-current-href)
|
||||
returnUrl (js/encodeURIComponent current-href)
|
||||
href (dm/str "payments/subscriptions/show?returnUrl=" returnUrl)]
|
||||
(st/emit! (rt/nav-raw :href href)))
|
||||
(modal/hide!)))
|
||||
|
||||
handle-close-dialog
|
||||
(mf/use-fn
|
||||
(fn []
|
||||
(st/emit! (ptk/event ::ev/event {::ev/name "close-subscription-modal"}))
|
||||
(modal/hide!)))
|
||||
|
||||
handle-unlimited-modal-step
|
||||
(mf/use-fn
|
||||
(mf/deps unlimited-modal-step)
|
||||
(fn []
|
||||
(if (= unlimited-modal-step 1)
|
||||
(reset! unlimited-modal-step* 2)
|
||||
(reset! unlimited-modal-step* 1))))
|
||||
|
||||
show-editors-list*
|
||||
(mf/use-state false)
|
||||
|
||||
show-editors-list
|
||||
(deref show-editors-list*)
|
||||
|
||||
handle-click
|
||||
(mf/use-fn
|
||||
(fn [event]
|
||||
(dom/stop-propagation event)
|
||||
(swap! show-editors-list* not)))]
|
||||
|
||||
[:div {:class (stl/css :modal-overlay)}
|
||||
[:div {:class (stl/css :modal-dialog)}
|
||||
|
|
@ -246,7 +273,7 @@
|
|||
[:input
|
||||
{:class (stl/css :cancel-button)
|
||||
:type "button"
|
||||
:value (tr "ubscription.settings.management-dialog.step-2-skip-button")
|
||||
:value (tr "subscription.settings.management-dialog.step-2-skip-button")
|
||||
:on-click #(subscribe-to-unlimited false)}]
|
||||
|
||||
[:input
|
||||
|
|
|
|||
|
|
@ -8,10 +8,12 @@
|
|||
@use "ds/typography.scss" as t;
|
||||
@use "ds/_borders.scss" as *;
|
||||
@use "ds/spacing.scss" as *;
|
||||
@use "ds/_sizes.scss" as *;
|
||||
@use "ds/_utils.scss" as *;
|
||||
|
||||
.dashboard-section {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
inline-size: 100%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
|
@ -20,10 +22,10 @@
|
|||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
max-width: deprecated.$s-500;
|
||||
max-inline-size: $sz-500;
|
||||
margin-block-end: var(--sp-xxxl);
|
||||
width: deprecated.$s-580;
|
||||
margin: deprecated.$s-92 auto deprecated.$s-120 auto;
|
||||
inline-size: px2rem(580);
|
||||
margin: px2rem(92) auto px2rem(120) auto;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
|
|
@ -98,8 +100,8 @@
|
|||
.plan-title-icon {
|
||||
@extend .button-icon;
|
||||
stroke: var(--color-foreground-primary);
|
||||
height: var(--sp-xl);
|
||||
width: var(--sp-xl);
|
||||
block-size: var(--sp-xl);
|
||||
inline-size: var(--sp-xl);
|
||||
border-radius: 6px;
|
||||
border: 1.75px solid var(--color-foreground-primary);
|
||||
stroke-width: 2.25px;
|
||||
|
|
@ -140,7 +142,7 @@
|
|||
}
|
||||
|
||||
.other-subscriptions {
|
||||
margin-block-start: deprecated.$s-52;
|
||||
margin-block-start: px2rem(52);
|
||||
}
|
||||
|
||||
.cta-button {
|
||||
|
|
@ -155,8 +157,8 @@
|
|||
|
||||
.cta-button svg {
|
||||
@extend .button-icon;
|
||||
height: var(--sp-l);
|
||||
width: var(--sp-l);
|
||||
block-size: var(--sp-l);
|
||||
inline-size: var(--sp-l);
|
||||
stroke: var(--color-accent-primary);
|
||||
margin-inline-start: var(--sp-xs);
|
||||
}
|
||||
|
|
@ -179,14 +181,12 @@
|
|||
|
||||
.modal-dialog {
|
||||
@extend .modal-container-base;
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr auto;
|
||||
max-height: initial;
|
||||
min-width: deprecated.$s-548;
|
||||
max-block-size: initial;
|
||||
min-inline-size: px2rem(548);
|
||||
}
|
||||
|
||||
.modal-dialog.subscription-success {
|
||||
min-width: deprecated.$s-648;
|
||||
min-inline-size: px2rem(648);
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
|
|
@ -232,11 +232,11 @@
|
|||
|
||||
.modal-success-content {
|
||||
display: flex;
|
||||
gap: deprecated.$s-40;
|
||||
gap: $sz-40;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
margin-block-start: deprecated.$s-40;
|
||||
margin-block-start: $sz-40;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
|
|
@ -249,23 +249,28 @@
|
|||
|
||||
.primary-button {
|
||||
@extend .modal-accept-btn;
|
||||
min-block-size: $sz-32;
|
||||
block-size: auto;
|
||||
}
|
||||
|
||||
.cancel-button {
|
||||
@extend .modal-cancel-btn;
|
||||
min-block-size: $sz-32;
|
||||
white-space: break-spaces;
|
||||
block-size: auto;
|
||||
}
|
||||
|
||||
.modal-start {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
max-width: deprecated.$s-220;
|
||||
max-inline-size: $sz-224;
|
||||
|
||||
svg {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
inline-size: 100%;
|
||||
block-size: auto;
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
@media (max-inline-size: 992px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -285,19 +290,19 @@
|
|||
list-style-position: inside;
|
||||
list-style-type: none;
|
||||
margin-inline-start: var(--sp-xl);
|
||||
max-height: deprecated.$s-216;
|
||||
max-block-size: px2rem(216);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.input-field {
|
||||
--input-icon-padding: var(--sp-s);
|
||||
width: deprecated.$s-80;
|
||||
inline-size: px2rem(80);
|
||||
}
|
||||
|
||||
.error-message {
|
||||
@include t.use-typography("body-small");
|
||||
color: var(--color-foreground-error);
|
||||
margin-block-start: deprecated.$s-8;
|
||||
margin-block-start: var(--sp-s);
|
||||
}
|
||||
|
||||
.editors-wrapper {
|
||||
|
|
@ -316,7 +321,7 @@
|
|||
@include t.use-typography("body-small");
|
||||
background-color: var(--color-background-tertiary);
|
||||
border-radius: var(--sp-s);
|
||||
margin-block-start: deprecated.$s-40;
|
||||
margin-block-start: $sz-40;
|
||||
padding-block: var(--sp-s);
|
||||
padding-inline: var(--sp-m);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue