💄 Add missing nitrate banner

This commit is contained in:
María Valderrama 2026-03-03 14:33:42 +01:00
parent 4da9aa844b
commit de5276d638
3 changed files with 45 additions and 15 deletions

View File

@ -1009,7 +1009,8 @@
(mf/defc profile-section*
[{:keys [profile team]}]
(let [show-profile-menu* (mf/use-state false)
(let [teams (mf/deref refs/teams)
show-profile-menu* (mf/use-state false)
show-profile-menu? (deref show-profile-menu*)
sub-menu* (mf/use-state false)
sub-menu (deref sub-menu*)
@ -1086,8 +1087,7 @@
[:*
(if (contains? cf/flags :nitrate)
(when-not (dm/get-in profile [:props :nitrate-license :valid])
[:> nitrate-sidebar* {:profile profile}])
[:> nitrate-sidebar* {:profile profile :teams teams}]
(when (contains? cf/flags :subscriptions)
(if (show-subscription-dashboard-banner? profile)
[:> dashboard-cta* {:profile profile}]

View File

@ -3,6 +3,7 @@
(ns app.main.ui.dashboard.subscription
(:require-macros [app.main.style :as stl])
(:require
[app.common.data :as d]
[app.common.data.macros :as dm]
[app.config :as cf]
[app.main.data.event :as ev]
@ -117,24 +118,52 @@
:is-highlighted false}]))))
(mf/defc nitrate-sidebar*
[]
(let [handle-click
{::mf/props :obj}
[{:keys [profile teams]}]
(let [nitrate-license (dm/get-in profile [:props :nitrate-license])
nitrate? (and (contains? cf/flags :nitrate)
(:valid nitrate-license))
orgs (mf/with-memo [teams]
(let [orgs (->> teams
vals
(group-by :organization-id)
(map (fn [[_group entries]] (first entries)))
vec
(d/index-by :id))]
orgs))
no-orgs-created? (= (count orgs) 1)
handle-click
(mf/use-fn
(fn []
(st/emit! (dnt/show-nitrate-popup :nitrate-form))))]
;; TODO add translations for this texts when we have the definitive ones
[:div {:class (stl/css :nitrate-banner :highlighted)}
(if (and nitrate? no-orgs-created?)
;; Banner for users with active nitrate license but no organizations created
[:div {:class (stl/css :nitrate-banner :highlighted)}
[:div {:class (stl/css :nitrate-content)}
[:span {:class (stl/css :nitrate-title)} "Create your first org"]]
[:div {:class (stl/css :nitrate-content)}
[:span {:class (stl/css :nitrate-info)} "Some further information and explanation."]
[:> button* {:variant "primary"
:type "button"
:class (stl/css :nitrate-bottom-button)
:on-click dnt/go-to-nitrate-cc} "CREATE ORGANIZATION"]]]
[:div {:class (stl/css :nitrate-content)}
[:span {:class (stl/css :nitrate-title)} "Unlock Nitrate features"]]
[:div {:class (stl/css :nitrate-content)}
[:span {:class (stl/css :nitrate-info)} "Some further information and explanation."]
[:> button* {:variant "primary"
:type "button"
:class (stl/css :cta-bottom-button :nitrate-bottom-button)
:on-click handle-click} "UPGRADE TO NITRATE"]]]))
;; Banner for users without nitrate license
(when (not nitrate?)
[:div {:class (stl/css :nitrate-banner :highlighted)}
[:div {:class (stl/css :nitrate-content)}
[:span {:class (stl/css :nitrate-title)} "Unlock Nitrate features"]]
[:div {:class (stl/css :nitrate-content)}
[:span {:class (stl/css :nitrate-info)} "Some further information and explanation."]
[:> button* {:variant "primary"
:type "button"
:class (stl/css :nitrate-bottom-button)
:on-click handle-click} "UPGRADE TO NITRATE"]]]))))
(mf/defc team*
[{:keys [is-owner team]}]

View File

@ -224,6 +224,7 @@
.nitrate-info {
@include t.use-typography("body-medium");
color: var(--color-foreground-secondary);
margin-block: var(--sp-s) var(--sp-xxl);
}
.nitrate-content {