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)))
(defn show-nitrate-popup
[popup-type]
(ptk/reify ::show-nitrate-popup
ptk/WatchEvent
(watch [_ _ _]
(->> (rp/cmd! ::get-nitrate-connectivity {})
(rx/map (fn [connectivity]
(modal/show popup-type (or connectivity {}))))))))
([popup-type] (show-nitrate-popup popup-type {}))
([popup-type extra-props]
(ptk/reify ::show-nitrate-popup
ptk/WatchEvent
(watch [_ _ _]
(->> (rp/cmd! ::get-nitrate-connectivity {})
(rx/map (fn [connectivity]
(modal/show popup-type (merge (or connectivity {}) extra-props)))))))))
(defn go-to-nitrate-cc
([]

View File

@ -163,7 +163,9 @@
[:> button* {:variant "primary"
:type "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*
[{:keys [is-owner team]}]

View File

@ -10,6 +10,7 @@
[app.common.schema :as sm]
[app.main.data.modal :as modal]
[app.main.data.nitrate :as dnt]
[app.main.refs :as refs]
[app.main.ui.components.forms :as fm]
[app.main.ui.ds.buttons.button :refer [button*]]
[app.main.ui.ds.foundations.assets.icon :as i :refer [icon*]]
@ -27,6 +28,7 @@
[connectivity]
(let [online? (:licenses connectivity)
profile (mf/deref refs/profile)
initial (mf/with-memo []
{:subscription "yearly"})
form (fm/use-form :schema schema:nitrate-form
@ -72,7 +74,9 @@
[:> button* {:variant "primary"
:on-click on-click
: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)}
"Cancel anytime before your next billing cycle."]]]
@ -83,7 +87,9 @@
[:div {:class (stl/css :contact)}
[: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)}
[:a {:class (stl/css :link) :href "mailto:sales@penpot.app"}
"sales@penpot.app"]]])]]]]))

View File

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

View File

@ -454,12 +454,12 @@
open-subscription-modal
(mf/use-fn
(mf/deps subscription-editors)
(mf/deps subscription-editors nitrate-license)
(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! (dnt/show-nitrate-popup :nitrate-dialog {:nitrate-license nitrate-license}))
(st/emit!
(modal/show :management-dialog
{:subscription-type subscription-type
@ -649,10 +649,11 @@
: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-text (if nitrate-license (tr "subscription.settings.subscribe") "Try 14 days for free")
:cta-link #(open-subscription-modal "nitrate" 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
:show-button-cta (not nitrate-license)}])]]]))
(def ^:private schema:nitrate-form
@ -662,7 +663,7 @@
(mf/defc subscribe-nitrate-dialog
{::mf/register modal/components
::mf/register-as :nitrate-dialog}
[connectivity]
[{:keys [nitrate-license] :as connectivity}]
;; TODO add translations for this texts when we have the definitive ones
(let [online? (:licenses connectivity)
initial (mf/with-memo []
@ -730,15 +731,15 @@
:on-click handle-close-dialog}]
[:> 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)}]]]]]]
[: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:"]
(if nitrate-license "Contact us to upgrade to Nitrate:" "Contact us to try Nitrate for 14 days:")]
[: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"]]])]]))