diff --git a/frontend/src/app/main/ui/nitrate/nitrate_form.cljs b/frontend/src/app/main/ui/nitrate/nitrate_form.cljs index 137f8a7961..8dd998668d 100644 --- a/frontend/src/app/main/ui/nitrate/nitrate_form.cljs +++ b/frontend/src/app/main/ui/nitrate/nitrate_form.cljs @@ -61,7 +61,8 @@ "- " (tr "nitrate.form.enterprise-feature-3")]] (if online? - [[:p {:class (stl/css :modal-text-large)} + [[:div {:class (stl/css :modal-text-large :price-text)} + [:span {:class (stl/css :price-value)} "25$"] (tr "nitrate.form.enterprise.price")] [:div {:class (stl/css :modal-text-large :modal-buttons-section)} diff --git a/frontend/src/app/main/ui/nitrate/nitrate_form.scss b/frontend/src/app/main/ui/nitrate/nitrate_form.scss index e27ceabd4a..cf3cda8214 100644 --- a/frontend/src/app/main/ui/nitrate/nitrate_form.scss +++ b/frontend/src/app/main/ui/nitrate/nitrate_form.scss @@ -55,6 +55,20 @@ @include t.use-typography("body-small"); } +.price-value { + @include t.use-typography("title-medium"); + + color: var(--color-foreground-primary); + font-weight: 500; +} + +.price-text { + align-items: center; + display: flex; + gap: var(--sp-s); + margin-block-end: var(--sp-xxxl); +} + .modal-info { margin-block: var(--sp-s) var(--sp-l); width: 40%; diff --git a/frontend/src/app/main/ui/settings/subscription.cljs b/frontend/src/app/main/ui/settings/subscription.cljs index a6dd64baeb..b20611ed3a 100644 --- a/frontend/src/app/main/ui/settings/subscription.cljs +++ b/frontend/src/app/main/ui/settings/subscription.cljs @@ -735,79 +735,53 @@ :show-button-cta (not nitrate-license) :inline-error nitrate-start-error-message}])]]])) - -(def ^:private schema:nitrate-form - [:map {:title "NitrateForm"} - [:subscription [::sm/one-of #{:monthly :yearly}]]]) - (mf/defc subscribe-nitrate-dialog {::mf/register modal/components ::mf/register-as :nitrate-dialog} [{:keys [nitrate-license show-contact-sales-option] :as connectivity}] ;; TODO add translations for this texts when we have the definitive ones (let [online? (:licenses connectivity) - initial (mf/with-memo [] - {:subscription "yearly"}) - form (fm/use-form :schema schema:nitrate-form - :initial initial) - handle-close-dialog (mf/use-fn (fn [] (modal/hide!))) - on-submit + on-subscribe-click (mf/use-fn - (mf/deps form) (fn [] - (let [subscription (-> @form :clean-data :subscription name)] - (dnt/go-to-buy-nitrate-license subscription (rt/get-current-href)))))] + (dnt/go-to-buy-nitrate-license "monthly" (rt/get-current-href))))] [:div {:class (stl/css :modal-overlay)} [:div {:class (stl/css :modal-dialog)} [:button {:class (stl/css :close-btn) :on-click handle-close-dialog} [:> icon* {:icon-id "close" :size "m"}]] - [:div {:class (stl/css :modal-title :subscription-title)} + [:div {:class (stl/css :modal-title :subscription-title :nitrate-subscription)} "Subcribe to the Business Nitrate plan"] (if (and online? (not show-contact-sales-option)) [:div {:class (stl/css :modal-content)} + [:* + [:div {:class (stl/css :modal-text :price-text)} + [:span {:class (stl/css :price-value)} "25$"] + (tr "nitrate.form.enterprise.price")] + [:div {:class (stl/css :modal-text)} + "You won’t be charged right now. Payment will be processed at the end of the trial. Cancel anytime."] + [:div {:class (stl/css :modal-footer)} + [:div {:class (stl/css :action-buttons)} + [:input + {:class (stl/css :cancel-button) + :type "button" + :value (tr "ds.confirm-cancel") + :on-click handle-close-dialog}] - [:div {:class (stl/css :modal-text)} - "Lorem ipsum lorem ipsum:"] - - - [:& fm/form {:on-submit on-submit - :class (stl/css :seats-form) - :form form} - - [:* - [:div {:class (stl/css :editors-wrapper)} - [:div {:class (stl/css :fields-row)} - [:& fm/radio-buttons - {:options [{:label "Price Tag Yearly (Discount)" :value "yearly"} - {:label "Price Tag Montly" :value "monthly"}] - :name :subscription - :class (stl/css :radio-btns)}]]] - [:div {:class (stl/css :modal-text)} - "You won’t be charged right now. Payment will be processed at the end of the trial. Cancel anytime."] - - - - [:div {:class (stl/css :modal-footer)} - [:div {:class (stl/css :action-buttons)} - [:input - {:class (stl/css :cancel-button) - :type "button" - :value (tr "ds.confirm-cancel") - :on-click handle-close-dialog}] - - [:> fm/submit-button* - {:label (if nitrate-license (tr "subscription.settings.subscribe") "TRY 14 DAYS FOR FREE") - :class (stl/css :primary-button)}]]]]]] + [:input + {:class (stl/css :primary-button) + :type "button" + :value (if nitrate-license (tr "subscription.settings.subscribe") "TRY 14 DAYS FOR FREE") + :on-click on-subscribe-click}]]]]] [: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"] diff --git a/frontend/src/app/main/ui/settings/subscription.scss b/frontend/src/app/main/ui/settings/subscription.scss index f42cb88b81..698b8a1eee 100644 --- a/frontend/src/app/main/ui/settings/subscription.scss +++ b/frontend/src/app/main/ui/settings/subscription.scss @@ -110,7 +110,8 @@ } .plan-card-title, -.plan-price-value { +.plan-price-value, +.price-value { @include t.use-typography("title-medium"); color: var(--color-foreground-primary); @@ -420,3 +421,19 @@ justify-content: center; inline-size: 100%; } + +.price-text, +.nitrate-subscription { + margin-block-end: px2rem(30); +} + +.price-text { + align-items: center; + display: flex; + gap: var(--sp-s); + margin-block-end: px2rem(34); +} + +.price-value { + font-weight: 500; +} diff --git a/frontend/translations/en.po b/frontend/translations/en.po index 7de9ed94fb..122f573b4a 100644 --- a/frontend/translations/en.po +++ b/frontend/translations/en.po @@ -9535,7 +9535,7 @@ msgid "nitrate.form.enterprise-feature-3" msgstr "Full open-source freedom, with the governance your org needs" msgid "nitrate.form.enterprise.price" -msgstr "$25 / member per month" +msgstr "per member per month" msgid "nitrate.form.start-enterprise" msgstr "Get started with Enterprise" diff --git a/frontend/translations/es.po b/frontend/translations/es.po index eb746674d1..eac3fb2f5a 100644 --- a/frontend/translations/es.po +++ b/frontend/translations/es.po @@ -9203,7 +9203,7 @@ msgid "nitrate.form.enterprise-feature-3" msgstr "Total libertad open-source, con la gobernanza que tu organización necesita" msgid "nitrate.form.enterprise.price" -msgstr "$25 / miembro por mes" +msgstr "por miembro al mes" msgid "nitrate.form.start-enterprise" msgstr "Empieza a utilizar Enterprise"