✨ Add nitrate popup

frontend/src/app/main/ui/nitrate/nitrate_form.cljs

@@ -7,42 +7,74 @@
 (ns app.main.ui.nitrate.nitrate-form
   (:require-macros [app.main.style :as stl])
   (:require
+   [app.common.schema :as sm]
    [app.main.data.modal :as modal]
+   [app.main.ui.components.forms :as fm]
    [app.main.ui.ds.buttons.button :refer [button*]]
-   [app.main.ui.icons :as deprecated-icon]
+   [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]))
 
-;; FIXME: rename to `form` (remove the nitrate prefix from namespace,
-;; because it is already under nitrate)
+(def ^:private schema:nitrate-form
+  [:map {:title "NitrateForm"}
+   [:subscription [::sm/one-of #{:monthly :yearly}]]])
 
 (mf/defc nitrate-form-modal*
   {::mf/register modal/components
    ::mf/register-as :nitrate-form}
   []
-  (let [on-click
+
+  (let [initial (mf/with-memo []
+                  {:subscription "yearly"})
+        form     (fm/use-form :schema schema:nitrate-form
+                              :initial initial)
+        on-click
         (mf/use-fn
          (fn []
+           ;; TODO Start licenses with selected type
            (dom/open-new-window "/control-center/licenses/start")))]
 
     [:div {:class (stl/css :modal-overlay)}
-     [:div {:class (stl/css :modal-container)}
-      [:div {:class (stl/css :nitrate-form)}
+     [: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)}
+        ;; TODO this svg is a placeholder. Use the proper one when created
+        [:> raw-svg* {:id "logo-subscription"}]]
 
-       [:div {:class (stl/css :modal-header)}
-        [:h2 {:class (stl/css :modal-title)}
-         "BUY NITRATE"]
+       [:div {:class (stl/css :modal-end)}
+        [:div {:class (stl/css :modal-title)}
+         "Unlock Nitrate Features"]
 
-        [:button {:class (stl/css :modal-close-btn)
-                  :on-click modal/hide!} deprecated-icon/close]]
+        [:p {:class (stl/css :modal-text-large)}
+         "Prow scuttle parrel provost."]
+        [:p {:class (stl/css :modal-text-large)}
+         "Sail ho shrouds spirits boom mizzenmast yardarm. Pinnace holystone mizzenmast quarter crow's nest nipperkin grog yardarm hempen halter furl."]
+        [:p {:class (stl/css :modal-text-large)}
+         "Deadlights jack lad schooner scallywag dance the hempen jig carouser broadside cable strike colors."]
+        [:p {:class (stl/css :modal-text-large)}
+         [:& fm/form {:form form}
+          [:& fm/radio-buttons
+           {:options [{:label "Price Tag Montly" :value "monthly"}
+                      {:label "Price Tag Yearly (Discount)" :value "yearly"}]
+            :name :subscription
+            :class (stl/css :radio-btns)}]]]
 
-       [:div {:class (stl/css :modal-content)}
-        "Nitrate is so cool! You should buy it!"]
-
-       [:div {:class (stl/css :modal-footer)}
-        [:div {:class (stl/css :action-buttons)}
-         [:> button* {:variant "primary"
-                      :on-click on-click}
-          "BUY NOW!"]]]]]]))
+        [:p {:class (stl/css :modal-text-large :modal-buttons-section)}
+         [:div {:class (stl/css :modal-buttons-section)}
+          [:> button* {:variant "primary"
+                       :on-click on-click
+                       :class (stl/css :modal-button)}
+           "UPGRADE TO NITRATE"]
+          [:div {:class (stl/css :modal-text-small :modal-info)}
+           "Cancel anytime before your next billing cycle."]]]
+
+
+        [:p {:class (stl/css :modal-text-medium)}
+         [:a {:class (stl/css :link)}
+          "See my current plan"]]]]]]))
 
 

frontend/src/app/main/ui/nitrate/nitrate_form.scss

@@ -5,48 +5,87 @@
 // Copyright (c) KALEIDOS INC
 
 @use "refactor/common-refactor.scss" as deprecated;
+@use "ds/typography.scss" as t;
+@use "ds/_borders.scss" as *;
+@use "ds/spacing.scss" as *;
+@use "ds/_sizes.scss" as *;
+@use "ds/_utils.scss" as *;
 
 .modal-overlay {
   @extend .modal-overlay-base;
+  z-index: var(--z-index-notifications);
 }
 
-.modal-container {
+.modal-dialog {
   @extend .modal-container-base;
+  max-block-size: initial;
+  min-inline-size: px2rem(648);
 }
 
-.modal-header {
-  margin-bottom: deprecated.$s-24;
-}
-
-.modal-title {
-  @include deprecated.uppercaseTitleTipography;
-  color: var(--modal-title-foreground-color);
-}
-
-.modal-close-btn {
+.close-btn {
   @extend .modal-close-btn-base;
 }
 
-.modal-content {
-  margin-bottom: deprecated.$s-24;
+.modal-title {
+  @include t.use-typography("title-large");
+  margin-block-end: var(--sp-xxxl);
+  color: var(--modal-title-foreground-color);
+  display: flex;
+  gap: var(--sp-m);
 }
 
-.nitrate-form {
-  min-width: deprecated.$s-400;
+.modal-text-large {
+  @include t.use-typography("body-large");
 }
 
-.action-buttons {
-  @extend .modal-action-btns;
+.modal-text-medium {
+  @include t.use-typography("body-medium");
 }
 
-.cancel-button {
-  @extend .modal-cancel-btn;
+.modal-text-small {
+  @include t.use-typography("body-small");
 }
 
-.accept-btn {
-  @extend .modal-accept-btn;
+.modal-info {
+  margin-block-start: var(--sp-s);
+  width: 40%;
+}
 
-  &.danger {
-    @extend .modal-danger-btn;
+.modal-content,
+.modal-end {
+  color: var(--color-foreground-secondary);
+  display: flex;
+  flex-direction: column;
+}
+
+.modal-success-content {
+  display: flex;
+  gap: $sz-40;
+}
+
+.modal-start {
+  display: flex;
+  justify-content: center;
+  max-inline-size: $sz-224;
+
+  svg {
+    inline-size: 100%;
+    block-size: auto;
+  }
+
+  @media (max-inline-size: 992px) {
+    display: none;
   }
 }
+
+.radio-btns {
+  label {
+    @include t.use-typography("body-large");
+    padding: 0;
+  }
+
+  display: flex;
+  flex-direction: column;
+  padding: var(--sp-l) 0 0 0;
+  gap: 0;
+}