From 0485a681c5b05c4f8e77839824a73ffb9a500a6e Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Tue, 18 Feb 2025 14:01:32 +0530
Subject: [PATCH] fix: show signup banner in demo site

---
 .../src/components/Icons/LightningIcon.vue    | 16 ++++++++
 .../src/components/Layouts/AppSidebar.vue     |  2 +
 frontend/src/components/SignupBanner.vue      | 39 +++++++++++++++++++
 3 files changed, 57 insertions(+)
 create mode 100644 frontend/src/components/Icons/LightningIcon.vue
 create mode 100644 frontend/src/components/SignupBanner.vue

diff --git a/frontend/src/components/Icons/LightningIcon.vue b/frontend/src/components/Icons/LightningIcon.vue
new file mode 100644
index 00000000..18c9e08d
--- /dev/null
+++ b/frontend/src/components/Icons/LightningIcon.vue
@@ -0,0 +1,16 @@
+<template>
+  <svg
+    width="17"
+    height="16"
+    viewBox="0 0 17 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M6.2641 1C5.5758 1 4.97583 1.46845 4.80889 2.1362L3.57555 7.06953C3.33887 8.01625 4.05491 8.93333 5.03077 8.93333H7.50682L6.72168 14.4293C6.68838 14.6624 6.82229 14.8872 7.04319 14.9689C7.26408 15.0507 7.51204 14.9671 7.63849 14.7684L13.2161 6.00354C13.6398 5.33782 13.1616 4.46667 12.3725 4.46667H9.59038L10.3017 1.62127C10.3391 1.4719 10.3055 1.31365 10.2108 1.19229C10.116 1.07094 9.97063 1 9.81666 1H6.2641ZM5.77903 2.37873C5.83468 2.15615 6.03467 2 6.2641 2H9.17627L8.46492 4.8454C8.42758 4.99477 8.46114 5.15302 8.55589 5.27437C8.65064 5.39573 8.79602 5.46667 8.94999 5.46667H12.3725L8.0395 12.2757L8.5783 8.50404C8.5988 8.36056 8.55602 8.21523 8.46105 8.10573C8.36608 7.99623 8.22827 7.93333 8.08332 7.93333H5.03077C4.70548 7.93333 4.4668 7.62764 4.5457 7.31207L5.77903 2.37873Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>
diff --git a/frontend/src/components/Layouts/AppSidebar.vue b/frontend/src/components/Layouts/AppSidebar.vue
index d4906834..e44ae5ca 100644
--- a/frontend/src/components/Layouts/AppSidebar.vue
+++ b/frontend/src/components/Layouts/AppSidebar.vue
@@ -72,6 +72,7 @@
       </div>
     </div>
     <div class="m-2 flex flex-col gap-1">
+      <SignupBanner :isSidebarCollapsed="isSidebarCollapsed" />
       <SidebarLink
         :label="isSidebarCollapsed ? __('Expand') : __('Collapse')"
         :isCollapsed="isSidebarCollapsed"
@@ -110,6 +111,7 @@ import NotificationsIcon from '@/components/Icons/NotificationsIcon.vue'
 import SidebarLink from '@/components/SidebarLink.vue'
 import Notifications from '@/components/Notifications.vue'
 import Settings from '@/components/Settings/Settings.vue'
+import SignupBanner from '@/components/SignupBanner.vue'
 import { viewsStore } from '@/stores/views'
 import {
   unreadNotificationsCount,
diff --git a/frontend/src/components/SignupBanner.vue b/frontend/src/components/SignupBanner.vue
new file mode 100644
index 00000000..7586f463
--- /dev/null
+++ b/frontend/src/components/SignupBanner.vue
@@ -0,0 +1,39 @@
+<template>
+  <div
+    v-if="!isSidebarCollapsed && showBanner"
+    class="m-2 flex flex-col gap-3 shadow-sm rounded-lg py-2.5 px-3 bg-surface-white text-base"
+  >
+    <div class="flex flex-col gap-1">
+      <div class="inline-flex gap-2 items-center font-medium">
+        <FeatherIcon class="h-4" name="info" />
+        {{ __('Loved the demo?') }}
+      </div>
+      <div class="text-ink-gray-7 text-p-sm">
+        {{ __('Try Frappe CRM for free with a 14-day trial.') }}
+      </div>
+    </div>
+    <Button :label="__('Sign up now')" theme="blue" @click="signupNow">
+      <template #prefix>
+        <LightningIcon class="size-4" />
+      </template>
+    </Button>
+  </div>
+</template>
+<script setup>
+import LightningIcon from '@/components/Icons/LightningIcon.vue'
+import { createResource } from 'frappe-ui'
+import { ref } from 'vue'
+
+const props = defineProps({
+  isSidebarCollapsed: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const showBanner = ref(window.is_demo_site)
+
+function signupNow() {
+  window.open('https://frappecloud.com/crm/signup', '_blank')
+}
+</script>