diff --git a/frontend/src/app/main/ui/dashboard/sidebar.cljs b/frontend/src/app/main/ui/dashboard/sidebar.cljs index 3f5300e7ef..1ea2bda3d5 100644 --- a/frontend/src/app/main/ui/dashboard/sidebar.cljs +++ b/frontend/src/app/main/ui/dashboard/sidebar.cljs @@ -30,6 +30,7 @@ [app.main.ui.dashboard.subscription :refer [dashboard-cta* get-subscription-type menu-team-icon* + nitrate-sidebar* show-subscription-dashboard-banner? subscription-sidebar*]] [app.main.ui.dashboard.team-form] @@ -1056,10 +1057,13 @@ (dom/open-new-window "https://penpot.app/pricing")))] [:* - (when (contains? cf/flags :subscriptions) - (if (show-subscription-dashboard-banner? profile) - [:> dashboard-cta* {:profile profile}] - [:> subscription-sidebar* {:profile profile}])) + (if (contains? cf/flags :nitrate) + (when-not (:nitrate-licence profile) + [:> nitrate-sidebar* {:profile profile}]) + (when (contains? cf/flags :subscriptions) + (if (show-subscription-dashboard-banner? profile) + [:> dashboard-cta* {:profile profile}] + [:> subscription-sidebar* {:profile profile}]))) ;; TODO remove this block when subscriptions is full implemented (when (contains? cf/flags :subscriptions-old) diff --git a/frontend/src/app/main/ui/dashboard/subscription.cljs b/frontend/src/app/main/ui/dashboard/subscription.cljs index 1d90cf9e6d..44f35f6f32 100644 --- a/frontend/src/app/main/ui/dashboard/subscription.cljs +++ b/frontend/src/app/main/ui/dashboard/subscription.cljs @@ -6,6 +6,7 @@ [app.common.data.macros :as dm] [app.config :as cf] [app.main.data.event :as ev] + [app.main.data.modal :as modal] [app.main.router :as rt] [app.main.store :as st] [app.main.ui.components.dropdown-menu :refer [dropdown-menu-item*]] @@ -115,6 +116,26 @@ :has-dropdown false :is-highlighted false}])))) +(mf/defc nitrate-sidebar* + [] + (let [handle-click + (mf/use-fn + (fn [] + (st/emit! (modal/show :nitrate-form {}))))] + + ;; TODO add translations for this texts when we have the definitive ones + [: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 :cta-bottom-button) + :on-click handle-click} "UPGRADE TO NITRATE"]]])) + (mf/defc team* [{:keys [is-owner team]}] (let [subscription (:subscription team) diff --git a/frontend/src/app/main/ui/dashboard/subscription.scss b/frontend/src/app/main/ui/dashboard/subscription.scss index 7d18da543c..ded491e67b 100644 --- a/frontend/src/app/main/ui/dashboard/subscription.scss +++ b/frontend/src/app/main/ui/dashboard/subscription.scss @@ -205,3 +205,28 @@ overflow-wrap: break-word; } } + +.nitrate-banner { + display: flex; + border-radius: var(--sp-s); + flex-direction: column; + margin: var(--sp-m); + background: var(--color-background-quaternary); + border: $b-1 solid var(--color-accent-primary-muted); + padding: var(--sp-l); +} + +.nitrate-title { + @include t.use-typography("body-large"); + color: var(--color-foreground-primary); +} + +.nitrate-info { + @include t.use-typography("body-medium"); + color: var(--color-foreground-secondary); +} + +.nitrate-content { + display: flex; + flex-direction: column; +}