diff --git a/frontend/src/app/main/ui/nitrate/nitrate_form.cljs b/frontend/src/app/main/ui/nitrate/nitrate_form.cljs index 1eb680367b..516dcd0420 100644 --- a/frontend/src/app/main/ui/nitrate/nitrate_form.cljs +++ b/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"]]]]]])) diff --git a/frontend/src/app/main/ui/nitrate/nitrate_form.scss b/frontend/src/app/main/ui/nitrate/nitrate_form.scss index 4c9d9192b1..ad1d32d3c8 100644 --- a/frontend/src/app/main/ui/nitrate/nitrate_form.scss +++ b/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; +}