Add nitrate trial text

This commit is contained in:
Marina López 2026-04-17 12:27:38 +02:00
parent 6723e3bbea
commit 11c970a945
5 changed files with 33 additions and 19 deletions

View File

@ -41,13 +41,14 @@
nitrate-entry-pending-popup-key))) nitrate-entry-pending-popup-key)))
(defn show-nitrate-popup (defn show-nitrate-popup
[popup-type] ([popup-type] (show-nitrate-popup popup-type {}))
([popup-type extra-props]
(ptk/reify ::show-nitrate-popup (ptk/reify ::show-nitrate-popup
ptk/WatchEvent ptk/WatchEvent
(watch [_ _ _] (watch [_ _ _]
(->> (rp/cmd! ::get-nitrate-connectivity {}) (->> (rp/cmd! ::get-nitrate-connectivity {})
(rx/map (fn [connectivity] (rx/map (fn [connectivity]
(modal/show popup-type (or connectivity {})))))))) (modal/show popup-type (merge (or connectivity {}) extra-props)))))))))
(defn go-to-nitrate-cc (defn go-to-nitrate-cc
([] ([]

View File

@ -163,7 +163,9 @@
[:> button* {:variant "primary" [:> button* {:variant "primary"
:type "button" :type "button"
:class (stl/css :nitrate-bottom-button) :class (stl/css :nitrate-bottom-button)
:on-click handle-click} "UPGRADE TO NITRATE"]]])))) :on-click handle-click} (if (:subscription profile)
"UPGRADE TO NITRATE"
"Try 14 days for free")]]]))))
(mf/defc team* (mf/defc team*
[{:keys [is-owner team]}] [{:keys [is-owner team]}]

View File

@ -10,6 +10,7 @@
[app.common.schema :as sm] [app.common.schema :as sm]
[app.main.data.modal :as modal] [app.main.data.modal :as modal]
[app.main.data.nitrate :as dnt] [app.main.data.nitrate :as dnt]
[app.main.refs :as refs]
[app.main.ui.components.forms :as fm] [app.main.ui.components.forms :as fm]
[app.main.ui.ds.buttons.button :refer [button*]] [app.main.ui.ds.buttons.button :refer [button*]]
[app.main.ui.ds.foundations.assets.icon :as i :refer [icon*]] [app.main.ui.ds.foundations.assets.icon :as i :refer [icon*]]
@ -27,6 +28,7 @@
[connectivity] [connectivity]
(let [online? (:licenses connectivity) (let [online? (:licenses connectivity)
profile (mf/deref refs/profile)
initial (mf/with-memo [] initial (mf/with-memo []
{:subscription "yearly"}) {:subscription "yearly"})
form (fm/use-form :schema schema:nitrate-form form (fm/use-form :schema schema:nitrate-form
@ -72,7 +74,9 @@
[:> button* {:variant "primary" [:> button* {:variant "primary"
:on-click on-click :on-click on-click
:class (stl/css :modal-button)} :class (stl/css :modal-button)}
"UPGRADE TO NITRATE"] (if (:subscription profile)
"UPGRADE TO NITRATE"
"Try it free for 14 days")]
[:div {:class (stl/css :modal-text-small :modal-info)} [:div {:class (stl/css :modal-text-small :modal-info)}
"Cancel anytime before your next billing cycle."]]] "Cancel anytime before your next billing cycle."]]]
@ -83,7 +87,9 @@
[:div {:class (stl/css :contact)} [:div {:class (stl/css :contact)}
[:p {:class (stl/css :modal-text-large)} [:p {:class (stl/css :modal-text-large)}
"Contact us to upgrade to Nitrate:"] (if (:subscription profile)
"Contact us to upgrade to Nitrate:"
"Contact us to try Nitrate for 14 days:")]
[:p {:class (stl/css :modal-text-large)} [:p {:class (stl/css :modal-text-large)}
[:a {:class (stl/css :link) :href "mailto:sales@penpot.app"} [:a {:class (stl/css :link) :href "mailto:sales@penpot.app"}
"sales@penpot.app"]]])]]]])) "sales@penpot.app"]]])]]]]))

View File

@ -106,3 +106,7 @@
margin-block-start: $sz-96; margin-block-start: $sz-96;
color: var(--color-foreground-primary); color: var(--color-foreground-primary);
} }
.link {
color: var(--color-accent-primary);
}

View File

@ -454,12 +454,12 @@
open-subscription-modal open-subscription-modal
(mf/use-fn (mf/use-fn
(mf/deps subscription-editors) (mf/deps subscription-editors nitrate-license)
(fn [subscription-type current-subscription] (fn [subscription-type current-subscription]
(st/emit! (ev/event {::ev/name "open-subscription-modal" (st/emit! (ev/event {::ev/name "open-subscription-modal"
::ev/origin "settings:in-app"})) ::ev/origin "settings:in-app"}))
(if (= subscription-type "nitrate") (if (= subscription-type "nitrate")
(st/emit! (dnt/show-nitrate-popup :nitrate-dialog)) (st/emit! (dnt/show-nitrate-popup :nitrate-dialog {:nitrate-license nitrate-license}))
(st/emit! (st/emit!
(modal/show :management-dialog (modal/show :management-dialog
{:subscription-type subscription-type {:subscription-type subscription-type
@ -649,10 +649,11 @@
:benefits ["Crea organizaciones y añade personas, que usarán Penpot con las reglas que configures." :benefits ["Crea organizaciones y añade personas, que usarán Penpot con las reglas que configures."
"Acceso exclusivo al Control Center" "Acceso exclusivo al Control Center"
"Lorem ipsum"] "Lorem ipsum"]
:cta-text (tr "subscription.settings.subscribe") :cta-text (if nitrate-license (tr "subscription.settings.subscribe") "Try 14 days for free")
:cta-link #(open-subscription-modal "nitrate" subscription) :cta-link #(open-subscription-modal "nitrate" subscription)
:cta-text-with-icon (tr "subscription.settings.more-information") :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
:show-button-cta (not nitrate-license)}])]]]))
(def ^:private schema:nitrate-form (def ^:private schema:nitrate-form
@ -662,7 +663,7 @@
(mf/defc subscribe-nitrate-dialog (mf/defc subscribe-nitrate-dialog
{::mf/register modal/components {::mf/register modal/components
::mf/register-as :nitrate-dialog} ::mf/register-as :nitrate-dialog}
[connectivity] [{:keys [nitrate-license] :as connectivity}]
;; TODO add translations for this texts when we have the definitive ones ;; TODO add translations for this texts when we have the definitive ones
(let [online? (:licenses connectivity) (let [online? (:licenses connectivity)
initial (mf/with-memo [] initial (mf/with-memo []
@ -730,15 +731,15 @@
:on-click handle-close-dialog}] :on-click handle-close-dialog}]
[:> fm/submit-button* [:> fm/submit-button*
{:label "TRY 14 DAYS FOR FREE" {:label (if nitrate-license (tr "subscription.settings.subscribe") "TRY 14 DAYS FOR FREE")
:class (stl/css :primary-button)}]]]]]] :class (stl/css :primary-button)}]]]]]]
[:div {:class (stl/css :modal-content :modal-contact-content)} [:div {:class (stl/css :modal-content :modal-contact-content)}
[:div {:class (stl/css :modal-text)} [:div {:class (stl/css :modal-text)}
"Lorem ipsum lorem ipsum Lorem ipsum lorem ipsum Lorem ipsum lorem ipsum"] "Lorem ipsum lorem ipsum Lorem ipsum lorem ipsum Lorem ipsum lorem ipsum"]
[:div {:class (stl/css :modal-text)} [:div {:class (stl/css :modal-text)}
"Contact us to upgrade to Nitrate:"] (if nitrate-license "Contact us to upgrade to Nitrate:" "Contact us to try Nitrate for 14 days:")]
[:div {:class (stl/css :modal-text)} [:div {:class (stl/css :modal-text)}
[:a {:class (stl/css :link) :href "mailto:sales@penpot.app"} [:a {:class (stl/css :cta-button) :href "mailto:sales@penpot.app"}
"sales@penpot.app"]]])]])) "sales@penpot.app"]]])]]))