feat(upgrade-plan): create page of upgrade plan (#593)

* feat(upgrade-plan): create page of upgrade plan * chore(version): update to version 1.34.0
hoophq · Dec 5, 2024 · 4b49f36 · 4b49f36
1 parent de68f35
commit 4b49f36
Show file tree

Hide file tree

Showing 9 changed files with 78 additions and 27 deletions.
diff --git a/webapp/package.json b/webapp/package.json
@@ -1,6 +1,6 @@
 {
   "name": "webapp",
-  "version": "1.33.4",
+  "version": "1.34.0",
   "scripts": {
     "ancient": "clojure -Sdeps '{:deps {com.github.liquidz/antq {:mvn/version \"RELEASE\"}}}' -m antq.core",
     "genversion": "npx genversion src/webapp/version.js",

diff --git a/webapp/resources/public/images/upgrade-plan.png b/webapp/resources/public/images/upgrade-plan.png
diff --git a/webapp/src/webapp/app.cljs b/webapp/src/webapp/app.cljs
@@ -66,6 +66,7 @@
             [webapp.slack.slack-new-user :as slack-new-user]
             [webapp.subs :as subs]
             [webapp.views.home :as home]
+            [webapp.upgrade-plan.main :as upgrade-plan]
             [webapp.webclient.panel :as webclient]))
 
 (when (= config/release-type "hoop-ui")
@@ -162,6 +163,11 @@
 (defmethod routes/panels :home-redirect-panel []
   [layout :application-hoop [home/home-panel-hoop]])
 
+(defmethod routes/panels :upgrade-plan-panel []
+  (rf/dispatch [:destroy-page-loader])
+  [layout :application-hoop [:div {:class "bg-gray-1 min-h-full h-max"}
+                             [upgrade-plan/main]]])
+
 (defmethod routes/panels :users-panel []
   [layout :application-hoop [:div {:class "flex flex-col bg-gray-100 px-4 py-10 sm:px-6 lg:px-20 lg:pt-16 lg:pb-10 h-full"}
                              [h/h2 "Users" {:class "mb-6"}]

diff --git a/webapp/src/webapp/connections/views/create_update_connection/connection_details_form.cljs b/webapp/src/webapp/connections/views/create_update_connection/connection_details_form.cljs
@@ -2,6 +2,7 @@
   (:require
    ["@radix-ui/themes" :refer [Box Callout Flex Grid Link Switch Text]]
    ["lucide-react" :refer [ArrowUpRight Star]]
+   [re-frame.core :as rf]
    [webapp.components.forms :as forms]
    [webapp.components.multiselect :as multi-select]
    [webapp.connections.dlp-info-types :as dlp-info-types]
@@ -90,9 +91,7 @@
             "Enable AI Data Masking by "
             [:> Link {:href "#"
                       :class "text-primary-10"
-                      :on-click #(js/window.Intercom
-                                  "showNewMessage"
-                                  "I want to upgrade my current plan")}
+                      :on-click #(rf/dispatch [:navigate :upgrade-plan])}
              "upgrading your plan."]]])
         (when @ai-data-masking
           [:> Box {:mt "4"}

diff --git a/webapp/src/webapp/connections/views/create_update_connection/main.cljs b/webapp/src/webapp/connections/views/create_update_connection/main.cljs
@@ -208,8 +208,8 @@
 
                                   :command (if (= @connection-type "database")
                                              []
-                                             [(when @connection-command
-                                                (or (re-seq #"'.*?'|\".*?\"|\S+|\t" @connection-command) []))])}))}
+                                             (when @connection-command
+                                               (or (re-seq #"'.*?'|\".*?\"|\S+|\t" @connection-command) [])))}))}
 
             [:<>
              (when (= form-type :create)

diff --git a/webapp/src/webapp/routes.cljs b/webapp/src/webapp/routes.cljs
@@ -50,7 +50,8 @@
                   ["/filtered" :sessions-list-filtered-by-ids]
                   [["/" :session-id] :session-details]]
      "/signup" :signup-hoop
-     "/signup/callback" :signup-callback-hoop}]))
+     "/signup/callback" :signup-callback-hoop
+     "/upgrade-plan" :upgrade-plan}]))
 
 (defn query-params-parser
   [queries]

diff --git a/webapp/src/webapp/shared_ui/sidebar/main.cljs b/webapp/src/webapp/shared_ui/sidebar/main.cljs
@@ -135,9 +135,7 @@
                                (:uri route))
                        :on-click (fn []
                                    (when (and free-license? (not (:free-feature? route)))
-                                     (js/window.Intercom
-                                      "showNewMessage"
-                                      "I want to upgrade my current plan")))
+                                     (rf/dispatch [:navigate :upgrade-plan])))
                        :class (str (hover-side-menu-link? (:uri route) current-route)
                                    "group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold"
                                    (when (and free-license? (not (:free-feature? route)))
@@ -185,7 +183,7 @@
                     :class (str (hover-side-menu-link? "/guardrails" current-route)
                                 "group items-start flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold")}
                 [:> hero-outline-icon/ShieldCheckIcon {:class "h-6 w-6 shrink-0 text-white"
-                                                     :aria-hidden "true"}]
+                                                       :aria-hidden "true"}]
                 [:span {:class "sr-only"}
                  "Guardrails"]]]
               [:li

diff --git a/webapp/src/webapp/shared_ui/sidebar/navigation.cljs b/webapp/src/webapp/shared_ui/sidebar/navigation.cljs
@@ -53,9 +53,7 @@
                              (:uri route))
                      :on-click (fn []
                                  (when (and free-license? (not (:free-feature? route)))
-                                   (js/window.Intercom
-                                    "showNewMessage"
-                                    "I want to upgrade my current plan")))
+                                   (rf/dispatch [:navigate :upgrade-plan])))
                      :class (str (hover-side-menu-link? (:uri route) current-route)
                                  (:enabled link-styles)
                                  (when (and free-license? (not (:free-feature? route)))
@@ -78,9 +76,7 @@
                              (:uri plugin))
                      :on-click (fn []
                                  (when (and free-license? (not (:free-feature? plugin)))
-                                   (js/window.Intercom
-                                    "showNewMessage"
-                                    "I want to upgrade my current plan")))
+                                   (rf/dispatch [:navigate :upgrade-plan])))
                      :class (str (hover-side-menu-link? (:uri plugin) current-route)
                                  (:enabled link-styles)
                                  (when (and free-license? (not (:free-feature? plugin)))
@@ -127,7 +123,7 @@
                               (:enabled link-styles))}
               [:div {:class "flex gap-3 items-center"}
                [:> hero-outline-icon/ShieldCheckIcon {:class (str "h-6 w-6 shrink-0 text-white")
-                                                    :aria-hidden "true"}]
+                                                      :aria-hidden "true"}]
                "Guardrails"]]]
             [:li
              [:a {:href (routes/url-for :agents)
@@ -153,9 +149,7 @@
                  [:a
                   {:on-click (fn []
                                (if free-license?
-                                 (js/window.Intercom
-                                  "showNewMessage"
-                                  "I want to upgrade my current plan")
+                                 (rf/dispatch [:navigate :upgrade-plan])
 
                                  (rf/dispatch [:navigate :manage-ask-ai])))
                    :href "#"
@@ -175,9 +169,7 @@
                     {:as "a"
                      :onClick (fn []
                                 (if (and free-license? (not (:free-feature? plugin)))
-                                  (js/window.Intercom
-                                   "showNewMessage"
-                                   "I want to upgrade my current plan")
+                                  (rf/dispatch [:navigate :upgrade-plan])
 
                                   (rf/dispatch [:plugins->navigate->manage-plugin (:name plugin)])))
                      :href "#"
@@ -215,9 +207,7 @@
                     {:as "a"
                      :onClick (fn []
                                 (if (and free-license? (not (:free-feature? plugin)))
-                                  (js/window.Intercom
-                                   "showNewMessage"
-                                   "I want to upgrade my current plan")
+                                  (rf/dispatch [:navigate :upgrade-plan])
 
                                   (rf/dispatch [:plugins->navigate->manage-plugin (:name plugin)])))
                      :href "#"

diff --git a/webapp/src/webapp/upgrade_plan/main.cljs b/webapp/src/webapp/upgrade_plan/main.cljs
@@ -0,0 +1,57 @@
+(ns webapp.upgrade-plan.main
+  (:require
+   ["@radix-ui/themes" :refer [Avatar Box Button Flex Heading Text]]
+   ["lucide-react" :refer [ListChecks MessagesSquare Sparkles]]
+   [reagent.core :as r]
+   [webapp.components.button :as button]
+   [webapp.config :as config]))
+
+(defn- feature [{:keys [icon title description]}]
+  [:> Flex {:align "center" :gap "4"}
+   [:> Avatar {:fallback (r/as-element icon)
+               :size "4"}]
+   [:> Box
+    [:> Heading {:as "h3" :size "5" :weight "bold" :class "text-[--gray-12]"}
+     title]
+    [:> Text {:size "3" :class "text-[--gray-12]"}
+     description]]])
+
+(defn main []
+  [:> Box {:class "bg-white relative overflow-hidden"}
+   [:> Box {:p "5"}
+    [button/HeaderBack]]
+
+   [:> Flex {:align "center" :justify "between" :gap "8" :p "9"}
+    [:> Box {:class "w-2/3 xl:w-1/2 space-y-12 pr-0 2xl:pr-16"}
+     [:> Box {:class "space-y-4"}
+      [:> Heading {:as "h1" :size "8" :weight "bold" :class "text-[--gray-12]"}
+       "Get more for your connections"]
+      [:> Text {:size "5" :class "text-[--gray-11]"}
+       "Upgrade to Enterprise plan and boost your experience."]]
+
+     [:> Box {:class "space-y-8"}
+      [feature {:icon [:> Sparkles {:size 20}]
+                :title "AI-Enhanced developer experience"
+                :description "Power up development with AI-driven query suggestions and automated data masking while maintaining security standards."}]
+
+      [feature {:icon [:> ListChecks {:size 20}]
+                :title "Complete visibility & control"
+                :description "Monitor database and infrastructure interaction with detailed session recordings and instant alerts in your favorite tools."}]
+
+      [feature {:icon [:> MessagesSquare {:size 20}]
+                :title "Enterprise-grade support"
+                :description "Access priority support through Slack, Teams, or email, plus dedicated onboarding to accelerate your team experience."}]]
+
+     [:> Button {:size "4"
+                 :on-click #(js/window.Intercom
+                             "showNewMessage"
+                             "I want to upgrade my current plan")}
+      "Request a demo"]]
+
+    [:> Box {:class (str "mt-[--space-9] absolute top-1/2 -translate-y-1/2 right-0 w-1/2 h-auto "
+                         "transform translate-x-1/4 xl:translate-x-16 2xl:translate-x-10")}
+     [:> Box {:class "h-full w-full relative"}
+      [:img {:src (str config/webapp-url "/images/upgrade-plan.png")
+             :alt "Terminal interface"
+             :class (str "w-full h-[578px] "
+                         "object-cover object-left")}]]]]])