diff --git a/frontend/src/app/main/data/nitrate.cljs b/frontend/src/app/main/data/nitrate.cljs index c6ece1a5fe..68bc7e8151 100644 --- a/frontend/src/app/main/data/nitrate.cljs +++ b/frontend/src/app/main/data/nitrate.cljs @@ -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 ([] @@ -132,4 +133,4 @@ (->> (rp/cmd! ::add-team-to-org {:team-id team-id :organization-id organization-id :organization-name organization-name}) (rx/mapcat (fn [_] - (rx/of (modal/hide)))))))) \ No newline at end of file + (rx/of (modal/hide)))))))) diff --git a/frontend/src/app/main/ui/dashboard/subscription.cljs b/frontend/src/app/main/ui/dashboard/subscription.cljs index 043046f08d..743de20347 100644 --- a/frontend/src/app/main/ui/dashboard/subscription.cljs +++ b/frontend/src/app/main/ui/dashboard/subscription.cljs @@ -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]}] diff --git a/frontend/src/app/main/ui/nitrate/nitrate_form.cljs b/frontend/src/app/main/ui/nitrate/nitrate_form.cljs index 6e763a1568..ef3bc46d38 100644 --- a/frontend/src/app/main/ui/nitrate/nitrate_form.cljs +++ b/frontend/src/app/main/ui/nitrate/nitrate_form.cljs @@ -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"]]])]]]])) diff --git a/frontend/src/app/main/ui/nitrate/nitrate_form.scss b/frontend/src/app/main/ui/nitrate/nitrate_form.scss index 363297493c..d21a24c26c 100644 --- a/frontend/src/app/main/ui/nitrate/nitrate_form.scss +++ b/frontend/src/app/main/ui/nitrate/nitrate_form.scss @@ -106,3 +106,7 @@ margin-block-start: $sz-96; color: var(--color-foreground-primary); } + +.link { + color: var(--color-accent-primary); +} diff --git a/frontend/src/app/main/ui/settings/subscription.cljs b/frontend/src/app/main/ui/settings/subscription.cljs index b7e9b6c3a4..d5a22232bc 100644 --- a/frontend/src/app/main/ui/settings/subscription.cljs +++ b/frontend/src/app/main/ui/settings/subscription.cljs @@ -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"]]])]]))