mirror of
https://github.com/penpot/penpot.git
synced 2026-05-27 02:43:42 +00:00
d9f099841a
The ::mf/props and ::mf/wrap-props metadata keys are no-ops on modern components (those defined with mf/defc and the * suffix) since the * suffix already triggers the props behavior these keys attempt to configure. This cleanup removes the redundant metadata from modern components across all UI directories. Changes: - comments/: comments - dashboard/: comments, deleted, files, fonts, grid, import, libraries, pin_button, projects, search, sidebar, subscription, team, templates - exports/: files - modal/: modal - settings/: subscription - static/: static - viewer/: comments, interactions, viewer - workspace/: context_menu, libraries, sidebar/assets, viewport/gradients, tokens/settings/menu
739 lines
34 KiB
Clojure
739 lines
34 KiB
Clojure
(ns app.main.ui.settings.subscription
|
||
(:require-macros [app.main.style :as stl])
|
||
(:require
|
||
[app.common.data.macros :as dm]
|
||
[app.common.schema :as sm]
|
||
[app.common.time :as ct]
|
||
[app.common.uri :as u]
|
||
[app.config :as cf]
|
||
[app.main.data.auth :as da]
|
||
[app.main.data.event :as ev]
|
||
[app.main.data.modal :as modal]
|
||
[app.main.data.nitrate :as dnt]
|
||
[app.main.refs :as refs]
|
||
[app.main.router :as rt]
|
||
[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.ds.foundations.assets.icon :refer [icon*] :as i]
|
||
[app.main.ui.ds.foundations.assets.raw-svg :refer [raw-svg*]]
|
||
[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]
|
||
[rumext.v2 :as mf]))
|
||
|
||
(mf/defc plan-card*
|
||
[{:keys [card-title
|
||
card-title-icon
|
||
price-value price-period
|
||
benefits-title benefits
|
||
cta-text
|
||
cta-link
|
||
cta-text-trial
|
||
cta-link-trial
|
||
cta-text-with-icon
|
||
cta-link-with-icon
|
||
editors
|
||
recommended
|
||
show-button-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
|
||
[:> icon* {:icon-id card-title-icon
|
||
:class (stl/css :plan-title-icon)
|
||
:size "s"}])
|
||
[: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)}
|
||
[: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 (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
|
||
[:> icon* {:icon-id "open-link"
|
||
:size "s"}]])
|
||
(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 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])
|
||
(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- make-management-form-schema [min-editors]
|
||
[:map {:title "SeatsForm"}
|
||
[:min-members [::sm/number {:min min-editors
|
||
:max 9999}]]
|
||
[:redirect-to-payment-details :boolean]])
|
||
|
||
(mf/defc subscribe-management-dialog
|
||
{::mf/register modal/components
|
||
::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
|
||
:redirect-to-payment-details false})
|
||
|
||
schema
|
||
(mf/with-memo [min-editors]
|
||
(make-management-form-schema min-editors))
|
||
|
||
form
|
||
(fm/use-form :schema schema :initial initial)
|
||
|
||
submit-in-progress
|
||
(mf/use-ref false)
|
||
|
||
subscribe-to-unlimited
|
||
(mf/use-fn
|
||
(fn [min-members add-payment-details?]
|
||
(when-not (mf/ref-val submit-in-progress)
|
||
(mf/set-ref-val! submit-in-progress true)
|
||
(let [return-url (-> (rt/get-current-href)
|
||
(rt/encode-url))
|
||
href (dm/str "payments/subscriptions/create?type=unlimited&show="
|
||
add-payment-details? "&quantity="
|
||
min-members "&returnUrl=" return-url)]
|
||
(reset! form nil)
|
||
(st/emit! (ptk/event ::ev/event {::ev/name "create-trial-subscription"
|
||
:type "unlimited"
|
||
:quantity min-members})
|
||
(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! (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!)))
|
||
|
||
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)))
|
||
|
||
on-submit
|
||
(mf/use-fn
|
||
(mf/deps current-subscription unlimited-modal-step*)
|
||
(fn [form]
|
||
(let [clean-data (get @form :clean-data)
|
||
min-members (get clean-data :min-members)
|
||
redirect? (get clean-data :redirect-to-payment-details)]
|
||
(if (or (contains? #{"unpaid" "canceled"} (:status current-subscription))
|
||
(= @unlimited-modal-step* 2))
|
||
(subscribe-to-unlimited min-members redirect?)
|
||
(swap! unlimited-modal-step* inc)))))
|
||
|
||
on-add-payments-click
|
||
(mf/use-fn
|
||
(fn []
|
||
(swap! form update :data assoc :redirect-to-payment-details true)))]
|
||
|
||
[:div {:class (stl/css :modal-overlay)}
|
||
[:div {:class (stl/css :modal-dialog)}
|
||
[:button {:class (stl/css :close-btn) :on-click handle-close-dialog}
|
||
[:> icon* {:icon-id "close"
|
||
:size "m"}]]
|
||
[:div {:class (stl/css :modal-title :subscription-title)}
|
||
(if (= unlimited-modal-step 2)
|
||
(tr "subscription.settings.management-dialog.step-2-title")
|
||
(tr "subscription.settings.management.dialog.title" subscription-name))]
|
||
|
||
[:div {:class (stl/css :modal-content)}
|
||
(when (and (seq editors) (not= unlimited-modal-step 2))
|
||
[:* [:p {:class (stl/css :editors-text)}
|
||
(tr "subscription.settings.management.dialog.currently-editors-title" (c (count editors)))]
|
||
[:button {:class (stl/css :cta-button :show-editors-button) :on-click handle-click}
|
||
(tr "subscription.settings.management.dialog.editors")
|
||
[:> icon* {:icon-id (if show-editors-list i/arrow-up i/arrow-down)
|
||
:class (stl/css :icon-dropdown)
|
||
:size "s"}]]
|
||
(when show-editors-list
|
||
[:*
|
||
[:p {:class (stl/css :editors-text :editors-list-warning)}
|
||
(tr "subscription.settings.management.dialog.editors-explanation")]
|
||
[:ul {:class (stl/css :editors-list)}
|
||
(for [editor editors]
|
||
[:li {:key (dm/str (:id editor)) :class (stl/css :team-name)} "- " (:name editor)])]])])
|
||
|
||
(when (and
|
||
(or (and (= subscription-type "professional")
|
||
(contains? #{"unlimited" "enterprise"} (:type current-subscription)))
|
||
(and (= subscription-type "unlimited") (= (:type current-subscription) "enterprise")))
|
||
(not (contains? #{"unpaid" "canceled"} (:status current-subscription)))
|
||
(not subscribe-to-trial))
|
||
[:div {:class (stl/css :modal-text)}
|
||
(tr "subscription.settings.management.dialog.downgrade")])
|
||
|
||
(if (and (= subscription-type "unlimited")
|
||
(or subscribe-to-trial (contains? #{"unpaid" "canceled"} (:status current-subscription))))
|
||
[:& fm/form {:on-submit on-submit
|
||
:class (stl/css :seats-form)
|
||
:form form}
|
||
(when (= unlimited-modal-step 1)
|
||
[:*
|
||
[:div {:class (stl/css :editors-wrapper)}
|
||
[:div {:class (stl/css :fields-row)}
|
||
[:& fm/input {:type "number"
|
||
:name :min-members
|
||
:show-error false
|
||
:label ""
|
||
:class (stl/css :input-field)}]]
|
||
[:div {:class (stl/css :editors-cost)}
|
||
[:span {:class (stl/css :modal-text-medium)}
|
||
(when (> (get-in @form [:clean-data :min-members]) 25)
|
||
[:> i18n/tr-html*
|
||
{:class (stl/css :modal-text-cap)
|
||
:tag-name "span"
|
||
:content (tr "subscription.settings.management.dialog.price-month" "175")}])
|
||
[:> i18n/tr-html*
|
||
{:class (stl/css-case :text-strikethrough (> (get-in @form [:clean-data :min-members]) 25))
|
||
:tag-name "span"
|
||
:content (tr "subscription.settings.management.dialog.price-month"
|
||
(* 7 (or (get-in @form [:clean-data :min-members]) 0)))}]]
|
||
[:span {:class (stl/css :modal-text-medium)}
|
||
(tr "subscription.settings.management.dialog.payment-explanation")]]]
|
||
|
||
(when (get-in @form [:errors :min-members])
|
||
[:div {:class (stl/css :error-message)}
|
||
(tr "subscription.settings.management.dialog.input-error")])
|
||
|
||
[:div {:class (stl/css :unlimited-capped-warning)}
|
||
(tr "subscription.settings.management.dialog.unlimited-capped-warning")]
|
||
|
||
[:div {:class (stl/css :modal-footer)}
|
||
[:div {:class (stl/css :action-buttons)}
|
||
[:input
|
||
{:class (stl/css :cancel-button)
|
||
:type "button"
|
||
:value (tr "ds.confirm-cancel")
|
||
:on-click handle-close-dialog}]
|
||
|
||
[:> fm/submit-button*
|
||
{:label (if (contains? #{"unpaid" "canceled"} (:status current-subscription))
|
||
(tr "subscription.settings.subscribe")
|
||
(tr "labels.continue"))
|
||
:class (stl/css :primary-button)}]]]])
|
||
|
||
(when (= unlimited-modal-step 2)
|
||
[:*
|
||
[:p {:class (stl/css :modal-text-medium)}
|
||
(tr "subscription.settings.management-dialog.step-2-description")]
|
||
|
||
[:div {:class (stl/css :modal-footer)}
|
||
[:div {:class (stl/css :action-buttons)}
|
||
|
||
[:input
|
||
{:class (stl/css :cancel-button)
|
||
:type "submit"
|
||
:value (tr "subscription.settings.management-dialog.step-2-skip-button")}]
|
||
|
||
[:input
|
||
{:class (stl/css :primary-button)
|
||
:type "submit"
|
||
:value (tr "subscription.settings.management-dialog.step-2-add-payment-button")
|
||
:on-click on-add-payments-click}]]]])]
|
||
|
||
[:div {:class (stl/css :modal-footer)}
|
||
[:div {:class (stl/css :action-buttons)}
|
||
[:input
|
||
{:class (stl/css :cancel-button)
|
||
:type "button"
|
||
:value (tr "ds.confirm-cancel")
|
||
:on-click handle-close-dialog}]
|
||
|
||
[:input
|
||
{:class (stl/css :primary-button)
|
||
|
||
:type "button"
|
||
:value (if subscribe-to-trial (tr "subscription.settings.start-trial") (tr "labels.continue"))
|
||
:on-click (if (or subscribe-to-trial
|
||
(contains? #{"unpaid" "canceled"} (:status current-subscription)))
|
||
subscribe-to-enterprise handle-accept-dialog)}]]])]]]))
|
||
|
||
(mf/defc subscription-success-dialog
|
||
{::mf/register modal/components
|
||
::mf/register-as :subscription-success}
|
||
[{:keys [subscription-name]}]
|
||
|
||
(let [profile (mf/deref refs/profile)
|
||
handle-close-dialog (mf/use-fn
|
||
(fn []
|
||
(st/emit! (ptk/event ::ev/event {::ev/name "subscription-success"}))
|
||
(modal/hide!)))]
|
||
|
||
[:div {:class (stl/css :modal-overlay)}
|
||
[:div {:class (stl/css :modal-dialog :subscription-success)}
|
||
[:button {:class (stl/css :close-btn) :on-click handle-close-dialog}
|
||
[:> icon* {:icon-id "close"
|
||
:size "m"}]]
|
||
[:div {:class (stl/css :modal-success-content)}
|
||
[:div {:class (stl/css :modal-start)}
|
||
[:> raw-svg* {:id (if (= "light" (:theme profile)) "logo-subscription-light" "logo-subscription")}]]
|
||
|
||
[:div {:class (stl/css :modal-end)}
|
||
[:div {:class (stl/css :modal-title)}
|
||
(tr "subscription.settings.sucess.dialog.title" subscription-name)]
|
||
(when (not= subscription-name "professional")
|
||
[:p {:class (stl/css :modal-text-large)}
|
||
(tr "subscription.settings.success.dialog.thanks" subscription-name)])
|
||
[:p {:class (stl/css :modal-text-large)}
|
||
(tr "subscription.settings.success.dialog.description")]
|
||
[:p {:class (stl/css :modal-text-large)}
|
||
(tr "subscription.settings.sucess.dialog.footer")]
|
||
|
||
[:div {:class (stl/css :success-action-buttons)}
|
||
[:input
|
||
{:class (stl/css :primary-button)
|
||
:type "button"
|
||
:value (tr "labels.close")
|
||
:on-click handle-close-dialog}]]]]]]))
|
||
|
||
(mf/defc nitrate-success-dialog
|
||
{::mf/register modal/components
|
||
::mf/register-as :nitrate-success}
|
||
[]
|
||
;; TODO add translations for this texts when we have the definitive ones
|
||
(let [profile (mf/deref refs/profile)]
|
||
|
||
[:div {:class (stl/css :modal-overlay)}
|
||
[:div {:class (stl/css :modal-dialog :subscription-success)}
|
||
[:button {:class (stl/css :close-btn) :on-click modal/hide!}
|
||
[:> icon* {:icon-id "close"
|
||
:size "m"}]]
|
||
[:div {:class (stl/css :modal-success-content)}
|
||
[:div {:class (stl/css :modal-start)}
|
||
[:> raw-svg* {:id (if (= "light" (:theme profile)) "logo-subscription-light" "logo-subscription")}]]
|
||
|
||
[:div {:class (stl/css :modal-end)}
|
||
[:div {:class (stl/css :modal-title)}
|
||
"You are Business Nitrate!"]
|
||
[:p {:class (stl/css :modal-text-large)}
|
||
(tr "subscription.settings.success.dialog.description")]
|
||
[:p {:class (stl/css :modal-text-large)}
|
||
(tr "subscription.settings.sucess.dialog.footer")]
|
||
|
||
[:div {:class (stl/css :success-action-buttons)}
|
||
[:input
|
||
{:class (stl/css :primary-button)
|
||
:type "button"
|
||
:value "CREATE ORGANIZATION"
|
||
:on-click dnt/go-to-nitrate-cc}]]]]]]))
|
||
|
||
(mf/defc subscription-page*
|
||
[{:keys [profile]}]
|
||
(let [route (mf/deref refs/route)
|
||
authenticated? (da/is-authenticated? profile)
|
||
nitrate-license (:subscription profile)
|
||
nitrate? (dnt/is-valid-license? profile)
|
||
|
||
params-subscription
|
||
(-> route :params :query :subscription)
|
||
|
||
show-trial-subscription-modal?
|
||
(or (= params-subscription "subscription-to-penpot-unlimited")
|
||
(= params-subscription "subscription-to-penpot-enterprise"))
|
||
|
||
show-subscription-success-modal?
|
||
(or (= params-subscription "subscribed-to-penpot-unlimited")
|
||
(= params-subscription "subscribed-to-penpot-enterprise")
|
||
(= params-subscription "subscribed-to-penpot-nitrate"))
|
||
|
||
success-modal-is-trial?
|
||
(-> route :params :query :trial)
|
||
|
||
subscription-editors
|
||
(-> profile :props :subscription :editors)
|
||
|
||
subscription
|
||
(-> profile :props :subscription)
|
||
|
||
subscription-type
|
||
(get-subscription-type subscription)
|
||
|
||
subscription-is-trial?
|
||
(= (:status subscription) "trialing")
|
||
|
||
member-since
|
||
(ct/format-inst (:created-at profile) "d MMMM, yyyy")
|
||
|
||
subscribed-since
|
||
(if nitrate?
|
||
(ct/format-inst (:created-at nitrate-license) "d MMMM, yyyy")
|
||
(ct/format-inst (:start-date subscription) "d MMMM, yyyy"))
|
||
|
||
go-to-pricing-page
|
||
(mf/use-fn
|
||
(fn []
|
||
(st/emit! (ev/event {::ev/name "explore-pricing-click"
|
||
::ev/origin "settings"
|
||
:section "subscription"}))
|
||
(dom/open-new-window "https://penpot.app/pricing")))
|
||
|
||
go-to-payments
|
||
(mf/use-fn
|
||
(fn []
|
||
(st/emit! (ev/event {::ev/name "open-subscription-management"
|
||
::ev/origin "settings"
|
||
:section "subscription"}))
|
||
(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)))))
|
||
|
||
open-subscription-modal
|
||
(mf/use-fn
|
||
(mf/deps subscription-editors)
|
||
(fn [subscription-type current-subscription]
|
||
(st/emit! (ev/event {::ev/name "open-subscription-modal"
|
||
::ev/origin "settings:in-app"}))
|
||
(if (= subscription-type "nitrate")
|
||
(st/emit! (dnt/show-nitrate-popup :nitrate-dialog))
|
||
(st/emit!
|
||
(modal/show :management-dialog
|
||
{:subscription-type subscription-type
|
||
:current-subscription current-subscription
|
||
:editors subscription-editors :subscribe-to-trial (not (:type subscription))})))))]
|
||
|
||
(mf/with-effect []
|
||
(dom/set-html-title (tr "subscription.labels")))
|
||
|
||
(mf/with-effect [authenticated?
|
||
show-subscription-success-modal?
|
||
show-trial-subscription-modal?
|
||
success-modal-is-trial?
|
||
subscription]
|
||
(when ^boolean authenticated?
|
||
(cond
|
||
^boolean show-trial-subscription-modal?
|
||
|
||
(st/emit!
|
||
(ptk/event ::ev/event {::ev/name "open-subscription-modal"
|
||
::ev/origin "settings:from-pricing-page"})
|
||
(modal/show :management-dialog
|
||
{:subscription-type (if (= params-subscription "subscription-to-penpot-unlimited")
|
||
"unlimited"
|
||
"enterprise")
|
||
:current-subscription subscription
|
||
:editors subscription-editors
|
||
:subscribe-to-trial (not (:type subscription))})
|
||
(rt/nav :settings-subscription {} {::rt/replace true}))
|
||
|
||
^boolean show-subscription-success-modal?
|
||
(st/emit!
|
||
(if (= params-subscription "subscribed-to-penpot-nitrate")
|
||
(modal/show :nitrate-success {})
|
||
(modal/show :subscription-success
|
||
{:subscription-name (if (= params-subscription "subscribed-to-penpot-unlimited")
|
||
(if (= success-modal-is-trial? "true")
|
||
(tr "subscription.settings.unlimited-trial")
|
||
(tr "subscription.settings.unlimited"))
|
||
(if (= success-modal-is-trial? "true")
|
||
(tr "subscription.settings.enterprise-trial")
|
||
(tr "subscription.settings.enterprise")))}))
|
||
(rt/nav :settings-subscription {} {::rt/replace true})))))
|
||
|
||
[: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")]
|
||
(if nitrate?
|
||
;; TODO add translations for this texts when we have the definitive ones
|
||
[:> plan-card* {:card-title "Business Nitrate"
|
||
:card-title-icon i/character-b
|
||
:benefits-title "Loren ipsum",
|
||
:benefits ["Loren ipsum",
|
||
"Loren ipsum",
|
||
"Loren ipsum"]
|
||
:cta-text-with-icon "Control Center"
|
||
:cta-link-with-icon dnt/go-to-nitrate-cc
|
||
:cta-text (tr "subscription.settings.manage-your-subscription")
|
||
:cta-link dnt/go-to-nitrate-billing}]
|
||
(case subscription-type
|
||
"professional"
|
||
[:> plan-card* {:card-title (tr "subscription.settings.professional")
|
||
:benefits [(tr "subscription.settings.professional.storage-benefit"),
|
||
(tr "subscription.settings.professional.autosave-benefit"),
|
||
(tr "subscription.settings.professional.teams-editors-benefit")]}]
|
||
|
||
"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.storage-benefit")
|
||
(tr "subscription.settings.unlimited.autosave-benefit"),
|
||
(tr "subscription.settings.unlimited.bill")]
|
||
:cta-text (tr "subscription.settings.manage-your-subscription")
|
||
:cta-link go-to-payments
|
||
:cta-text-trial (tr "subscription.settings.add-payment-to-continue")
|
||
:cta-link-trial go-to-payments
|
||
:editors (-> profile :props :subscription :quantity)}]
|
||
|
||
[:> 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.storage-benefit"),
|
||
(tr "subscription.settings.unlimited.autosave-benefit"),
|
||
(tr "subscription.settings.unlimited.bill")]
|
||
:cta-text (tr "subscription.settings.manage-your-subscription")
|
||
:cta-link go-to-payments
|
||
:editors (-> profile :props :subscription :quantity)}])
|
||
|
||
"enterprise"
|
||
(if subscription-is-trial?
|
||
[:> plan-card* {:card-title (tr "subscription.settings.enterprise-trial")
|
||
:card-title-icon i/character-e
|
||
:benefits-title (tr "subscription.settings.benefits.all-unlimited-benefits"),
|
||
:benefits [(tr "subscription.settings.enterprise.unlimited-storage-benefit"),
|
||
(tr "subscription.settings.enterprise.autosave"),
|
||
(tr "subscription.settings.enterprise.capped-bill")]
|
||
:cta-text (tr "subscription.settings.manage-your-subscription")
|
||
:cta-link go-to-payments
|
||
:cta-text-trial (tr "subscription.settings.add-payment-to-continue")
|
||
:cta-link-trial go-to-payments}]
|
||
[:> plan-card* {:card-title (tr "subscription.settings.enterprise")
|
||
:card-title-icon i/character-e
|
||
:benefits-title (tr "subscription.settings.benefits.all-unlimited-benefits"),
|
||
:benefits [(tr "subscription.settings.enterprise.unlimited-storage-benefit"),
|
||
(tr "subscription.settings.enterprise.autosave"),
|
||
(tr "subscription.settings.enterprise.capped-bill")]
|
||
:cta-text (tr "subscription.settings.manage-your-subscription")
|
||
:cta-link go-to-payments}])))
|
||
|
||
[:div {:class (stl/css :membership-container)}
|
||
(when (or nitrate?
|
||
(and subscribed-since (not= subscription-type "professional")))
|
||
[:div {:class (stl/css :membership)}
|
||
[:> icon* {:class (stl/css :subscription-member)
|
||
:icon-id "crown"
|
||
:size "m"}]
|
||
[:span {:class (stl/css :membership-date)}
|
||
(tr "subscription.settings.support-us-since" subscribed-since)]])
|
||
|
||
[:div {:class (stl/css :membership)}
|
||
[:> icon* {:class (stl/css :penpot-member)
|
||
:icon-id "user"
|
||
:size "m"}]
|
||
[:span {:class (stl/css :membership-date)}
|
||
(tr "subscription.settings.member-since" member-since)]]]]
|
||
|
||
[:div {:class (stl/css :other-subscriptions)}
|
||
[:h3 {:class (stl/css :plan-section-title)} (tr "subscription.settings.other-plans")]
|
||
(when (not= subscription-type "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.storage-benefit"),
|
||
(tr "subscription.settings.professional.autosave-benefit"),
|
||
(tr "subscription.settings.professional.teams-editors-benefit")]
|
||
:cta-text (tr "subscription.settings.subscribe")
|
||
:cta-link #(open-subscription-modal "professional")
|
||
:cta-text-with-icon (tr "subscription.settings.more-information")
|
||
:cta-link-with-icon go-to-pricing-page}])
|
||
|
||
(when (not= subscription-type "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-professional-benefits")
|
||
:benefits [(tr "subscription.settings.unlimited.storage-benefit"),
|
||
(tr "subscription.settings.unlimited.autosave-benefit"),
|
||
(tr "subscription.settings.unlimited.bill")]
|
||
: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
|
||
:recommended (= subscription-type "professional")
|
||
:show-button-cta (= subscription-type "professional")}])
|
||
|
||
(when (and (not= subscription-type "enterprise") (not (contains? cf/flags :nitrate)))
|
||
[:> 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-unlimited-benefits")
|
||
:benefits [(tr "subscription.settings.enterprise.unlimited-storage-benefit"),
|
||
(tr "subscription.settings.enterprise.autosave"),
|
||
(tr "subscription.settings.enterprise.capped-bill")]
|
||
: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
|
||
:show-button-cta (= subscription-type "professional")}])
|
||
|
||
;; TODO add translations for this texts when we have the definitive ones
|
||
(when (and (contains? cf/flags :nitrate) (not nitrate?))
|
||
[:> plan-card* {:card-title "Business Nitrate"
|
||
:card-title-icon i/character-n
|
||
:price-value "$25"
|
||
:price-period "org member"
|
||
:benefits-title (tr "subscription.settings.benefits.all-unlimited-benefits")
|
||
:benefits ["Crea organizaciones y añade personas, que usarán Penpot con las reglas que configures."
|
||
"Acceso exclusivo al Control Center"
|
||
"Lorem ipsum"]
|
||
:cta-text (tr "subscription.settings.subscribe")
|
||
:cta-link #(open-subscription-modal "nitrate" subscription)
|
||
:cta-text-with-icon (tr "subscription.settings.more-information")
|
||
:cta-link-with-icon go-to-pricing-page}])]]]))
|
||
|
||
|
||
(def ^:private schema:nitrate-form
|
||
[:map {:title "NitrateForm"}
|
||
[:subscription [::sm/one-of #{:monthly :yearly}]]])
|
||
|
||
(mf/defc subscribe-nitrate-dialog
|
||
{::mf/register modal/components
|
||
::mf/register-as :nitrate-dialog}
|
||
[connectivity]
|
||
;; TODO add translations for this texts when we have the definitive ones
|
||
(let [online? (:licenses connectivity)
|
||
initial (mf/with-memo []
|
||
{:subscription "yearly"})
|
||
form (fm/use-form :schema schema:nitrate-form
|
||
:initial initial)
|
||
|
||
handle-close-dialog
|
||
(mf/use-fn
|
||
(fn []
|
||
(modal/hide!)))
|
||
|
||
on-submit
|
||
(mf/use-fn
|
||
(mf/deps form)
|
||
(fn []
|
||
(let [subscription (-> @form :clean-data :subscription name)
|
||
return-url (dm/str
|
||
(rt/get-current-href)
|
||
"?"
|
||
(u/map->query-string
|
||
{:subscription "subscribed-to-penpot-nitrate"}))]
|
||
(dnt/go-to-buy-nitrate-license subscription return-url))))]
|
||
|
||
[:div {:class (stl/css :modal-overlay)}
|
||
[:div {:class (stl/css :modal-dialog)}
|
||
[:button {:class (stl/css :close-btn) :on-click handle-close-dialog}
|
||
[:> icon* {:icon-id "close"
|
||
:size "m"}]]
|
||
[:div {:class (stl/css :modal-title :subscription-title)}
|
||
"Subcribe to the Business Nitrate plan"]
|
||
|
||
(if online?
|
||
[:div {:class (stl/css :modal-content)}
|
||
|
||
|
||
|
||
[:div {:class (stl/css :modal-text)}
|
||
"Lorem ipsum lorem ipsum:"]
|
||
|
||
|
||
[:& fm/form {:on-submit on-submit
|
||
:class (stl/css :seats-form)
|
||
:form form}
|
||
|
||
[:*
|
||
[:div {:class (stl/css :editors-wrapper)}
|
||
[:div {:class (stl/css :fields-row)}
|
||
[:& fm/radio-buttons
|
||
{:options [{:label "Price Tag Yearly (Discount)" :value "yearly"}
|
||
{:label "Price Tag Montly" :value "monthly"}]
|
||
:name :subscription
|
||
:class (stl/css :radio-btns)}]]]
|
||
[:div {:class (stl/css :modal-text)}
|
||
"You won’t be charged right now. Payment will be processed at the end of the trial. Cancel anytime."]
|
||
|
||
|
||
|
||
[:div {:class (stl/css :modal-footer)}
|
||
[:div {:class (stl/css :action-buttons)}
|
||
[:input
|
||
{:class (stl/css :cancel-button)
|
||
:type "button"
|
||
:value (tr "ds.confirm-cancel")
|
||
:on-click handle-close-dialog}]
|
||
|
||
[:> fm/submit-button*
|
||
{:label "TRY 14 DAYS FOR FREE"
|
||
:class (stl/css :primary-button)}]]]]]]
|
||
[:div {:class (stl/css :modal-content :modal-contact-content)}
|
||
[:div {:class (stl/css :modal-text)}
|
||
"Lorem ipsum lorem ipsum Lorem ipsum lorem ipsum Lorem ipsum lorem ipsum"]
|
||
[:div {:class (stl/css :modal-text)}
|
||
"Contact us to upgrade to Nitrate:"]
|
||
[:div {:class (stl/css :modal-text)}
|
||
[:a {:class (stl/css :link) :href "mailto:sales@penpot.app"}
|
||
"sales@penpot.app"]]])]]))
|
||
|
||
|
||
|