✨ Add nitrate banner

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]
@@ -1007,6 +1008,9 @@
         show-comments* (mf/use-state false)
         show-comments? @show-comments*
 
+        show-nitrate? (and (contains? cf/flags :nitrate)
+                           (:nitrate-licence profile))
+
         handle-hide-comments
         (mf/use-fn
          (fn []
@@ -1056,10 +1060,12 @@
            (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 show-nitrate?
+       [:> 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)

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)

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;
+}