From 97d3e31593dfa82bac60d4aebf2eb05c3742d660 Mon Sep 17 00:00:00 2001 From: Pablo Alba Date: Fri, 27 Feb 2026 10:37:17 +0100 Subject: [PATCH] :sparkles: Add success popup for nitrate license subscription --- frontend/src/app/main/data/nitrate.cljs | 15 ++++- .../src/app/main/ui/nitrate/nitrate_form.cljs | 5 +- .../app/main/ui/settings/subscription.cljs | 62 +++++++++++++++---- 3 files changed, 66 insertions(+), 16 deletions(-) diff --git a/frontend/src/app/main/data/nitrate.cljs b/frontend/src/app/main/data/nitrate.cljs index 596ca2463e..12bd729d8f 100644 --- a/frontend/src/app/main/data/nitrate.cljs +++ b/frontend/src/app/main/data/nitrate.cljs @@ -1,10 +1,11 @@ (ns app.main.data.nitrate (:require + [app.common.data.macros :as dm] + [app.common.uri :as u] [app.main.data.modal :as modal] [app.main.repo :as rp] [app.main.router :as rt] [app.main.store :as st] - [app.util.dom :as dom] [beicon.v2.core :as rx] [potok.v2.core :as ptk])) @@ -15,14 +16,24 @@ (watch [_ _ _] (->> (rp/cmd! ::get-nitrate-connectivity {}) (rx/map (fn [connectivity] + (prn "connectivity" connectivity) (modal/show popup-type (or connectivity {})))))))) (defn go-to-nitrate-cc [] - (st/emit! (dom/open-new-window "/control-center/"))) + (st/emit! (rt/nav-raw :href "/control-center/"))) (defn go-to-nitrate-billing [] (st/emit! (rt/nav-raw :href "/control-center/licenses/billing"))) +(defn go-to-buy-nitrate-license + ([subscription] + (go-to-buy-nitrate-license subscription nil)) + ([subscription callback] + (let [params (cond-> {:subscription subscription} + callback (assoc :callback callback)) + href (dm/str "/control-center/licenses/start?" (u/map->query-string params))] + (st/emit! (rt/nav-raw :href href))))) + diff --git a/frontend/src/app/main/ui/nitrate/nitrate_form.cljs b/frontend/src/app/main/ui/nitrate/nitrate_form.cljs index 4e02d72dc2..13951191a6 100644 --- a/frontend/src/app/main/ui/nitrate/nitrate_form.cljs +++ b/frontend/src/app/main/ui/nitrate/nitrate_form.cljs @@ -9,11 +9,11 @@ (:require [app.common.schema :as sm] [app.main.data.modal :as modal] + [app.main.data.nitrate :as dnt] [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*]] [app.main.ui.ds.foundations.assets.raw-svg :refer [raw-svg*]] - [app.util.dom :as dom] [rumext.v2 :as mf])) (def ^:private schema:nitrate-form @@ -35,8 +35,7 @@ (mf/use-fn (mf/deps form) (fn [] - (let [params (:clean-data @form)] - (dom/open-new-window (str "/control-center/licenses/start?subscription=" (name (:subscription params)))))))] + (dnt/go-to-buy-nitrate-license (-> @form :clean-data :subscription name))))] [:div {:class (stl/css :modal-overlay)} [:div {:class (stl/css :modal-dialog :subscription-success)} diff --git a/frontend/src/app/main/ui/settings/subscription.cljs b/frontend/src/app/main/ui/settings/subscription.cljs index bd222309ac..929f0d8789 100644 --- a/frontend/src/app/main/ui/settings/subscription.cljs +++ b/frontend/src/app/main/ui/settings/subscription.cljs @@ -4,6 +4,7 @@ [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] @@ -355,6 +356,37 @@ :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) @@ -374,7 +406,8 @@ show-subscription-success-modal? (or (= params-subscription "subscribed-to-penpot-unlimited") - (= params-subscription "subscribed-to-penpot-enterprise")) + (= params-subscription "subscribed-to-penpot-enterprise") + (= params-subscription "subscribed-to-penpot-nitrate")) success-modal-is-trial? (-> route :params :query :trial) @@ -458,14 +491,16 @@ ^boolean show-subscription-success-modal? (st/emit! - (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")))}) + (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)} @@ -641,8 +676,13 @@ (mf/use-fn (mf/deps form) (fn [] - (let [params (:clean-data @form)] - (dom/open-new-window (str "/control-center/licenses/start?subscription=" (name (:subscription params)))))))] + (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)}