✨ Add success popup for nitrate license subscription

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)))))
+
 

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)]
+           (dnt/go-to-buy-nitrate-license (-> @form :clean-data :subscription name))))]
-             (dom/open-new-window (str "/control-center/licenses/start?subscription=" (name (:subscription params)))))))]
 
     [:div {:class (stl/css :modal-overlay)}
      [:div {:class (stl/css :modal-dialog :subscription-success)}

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
+           (if (= params-subscription "subscribed-to-penpot-nitrate")
-                       {:subscription-name (if (= params-subscription "subscribed-to-penpot-unlimited")
+             (modal/show :nitrate-success {})
-                                             (if (= success-modal-is-trial? "true")
+             (modal/show :subscription-success
-                                               (tr "subscription.settings.unlimited-trial")
+                         {:subscription-name (if (= params-subscription "subscribed-to-penpot-unlimited")
-                                               (tr "subscription.settings.unlimited"))
+                                               (if (= success-modal-is-trial? "true")
-                                             (if (= success-modal-is-trial? "true")
+                                                 (tr "subscription.settings.unlimited-trial")
-                                               (tr "subscription.settings.enterprise-trial")
+                                                 (tr "subscription.settings.unlimited"))
-                                               (tr "subscription.settings.enterprise")))})
+                                               (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)]
+           (let [subscription (-> @form :clean-data :subscription name)
-             (dom/open-new-window (str "/control-center/licenses/start?subscription=" (name (:subscription params)))))))]
+                 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)}