From c8421d8c08d3e93fe57ec46d0fb64e7a2259be73 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Sat, 8 Mar 2025 15:22:53 +0530
Subject: [PATCH] feat: added welcome page

---
 frontend/src/components/Icons/GoogleIcon.vue | 29 ++++++++++
 frontend/src/components/Modals/LeadModal.vue |  4 +-
 frontend/src/pages/Welcome.vue               | 61 ++++++++++++++++++++
 frontend/src/router.js                       |  5 ++
 4 files changed, 97 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/components/Icons/GoogleIcon.vue
 create mode 100644 frontend/src/pages/Welcome.vue

diff --git a/frontend/src/components/Icons/GoogleIcon.vue b/frontend/src/components/Icons/GoogleIcon.vue
new file mode 100644
index 00000000..5e0d8aa5
--- /dev/null
+++ b/frontend/src/components/Icons/GoogleIcon.vue
@@ -0,0 +1,29 @@
+<template>
+  <svg
+    width="40"
+    height="40"
+    viewBox="0 0 40 40"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+  >
+    <rect width="40" height="40" rx="20" fill="url(#pattern0_6527_335840)" />
+    <defs>
+      <pattern
+        id="pattern0_6527_335840"
+        patternContentUnits="objectBoundingBox"
+        width="1"
+        height="1"
+      >
+        <use xlink:href="#image0_6527_335840" transform="scale(0.003125)" />
+      </pattern>
+      <image
+        id="image0_6527_335840"
+        width="320"
+        height="320"
+        preserveAspectRatio="none"
+        xlink:href="data:image/png;base64,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"
+      />
+    </defs>
+  </svg>
+</template>
diff --git a/frontend/src/components/Modals/LeadModal.vue b/frontend/src/components/Modals/LeadModal.vue
index dbe21ba6..b7e4f99e 100644
--- a/frontend/src/components/Modals/LeadModal.vue
+++ b/frontend/src/components/Modals/LeadModal.vue
@@ -122,7 +122,7 @@ const createLead = createResource({
 const leadStatuses = computed(() => {
   let statuses = statusOptions('lead')
   if (!lead.status) {
-    lead.status = statuses[0].value
+    lead.status = statuses?.[0]?.value
   }
   return statuses
 })
@@ -192,7 +192,7 @@ onMounted(() => {
   if (!lead.lead_owner) {
     lead.lead_owner = getUser().name
   }
-  if (!lead.status && leadStatuses.value[0].value) {
+  if (!lead.status && leadStatuses.value[0]?.value) {
     lead.status = leadStatuses.value[0].value
   }
 })
diff --git a/frontend/src/pages/Welcome.vue b/frontend/src/pages/Welcome.vue
new file mode 100644
index 00000000..d03f8aeb
--- /dev/null
+++ b/frontend/src/pages/Welcome.vue
@@ -0,0 +1,61 @@
+<template>
+  <div class="flex flex-col gap-5 justify-center items-center h-full">
+    <div class="font-semibold text-2xl text-ink-gray-8 mb-3">
+      {{ __('Welcome {0}, lets add your first lead', [name]) }}
+    </div>
+    <div class="flex gap-3">
+      <div
+        class="flex flex-col px-6 pt-13 pb-7 justify-between bg-surface-gray-1 rounded-2xl items-center space-y-2 size-56"
+      >
+        <div class="flex flex-col items-center gap-2.5">
+          <div class="flex -space-x-2">
+            <div
+              v-for="i in 3"
+              :key="i"
+              class="bg-surface-gray-3 ring-2 ring-outline-white p-2.5 rounded-full"
+            >
+              <AvatarIcon />
+            </div>
+          </div>
+          <div class="text-p-base text-ink-gray-8 text-center">
+            {{ __('Start with sample 10 leads') }}
+          </div>
+        </div>
+        <Button variant="outline" :label="__('Add sample data')" />
+      </div>
+      <div
+        class="flex flex-col px-6 pt-13 pb-7 justify-between bg-surface-gray-1 rounded-2xl items-center space-y-2 size-56"
+      >
+        <div class="flex flex-col items-center gap-2.5">
+          <GoogleIcon class="" />
+          <div class="text-p-base text-ink-gray-8 text-center">
+            {{ __('Sync your contacts,email and calenders') }}
+          </div>
+        </div>
+        <Button variant="outline" :label="__('Connect your email')" />
+      </div>
+    </div>
+    <Button
+      variant="ghost"
+      :label="__('Or create leads manually')"
+      @click="showLeadModal = true"
+    />
+  </div>
+  <LeadModal
+    v-if="showLeadModal"
+    v-model="showLeadModal"
+    v-model:quickEntry="showQuickEntryModal"
+  />
+  <QuickEntryModal v-if="showQuickEntryModal" v-model="showQuickEntryModal" />
+</template>
+<script setup>
+import AvatarIcon from '@/components/Icons/AvatarIcon.vue'
+import GoogleIcon from '@/components/Icons/GoogleIcon.vue'
+import LeadModal from '@/components/Modals/LeadModal.vue'
+import QuickEntryModal from '@/components/Modals/QuickEntryModal.vue'
+import { ref } from 'vue'
+
+const name = ref('John Doe')
+const showLeadModal = ref(false)
+const showQuickEntryModal = ref(false)
+</script>
diff --git a/frontend/src/router.js b/frontend/src/router.js
index 06e5ce79..e5665630 100644
--- a/frontend/src/router.js
+++ b/frontend/src/router.js
@@ -91,6 +91,11 @@ const routes = [
     component: () => import('@/pages/EmailTemplate.vue'),
     props: true,
   },
+  {
+    path: '/welcome',
+    name: 'Welcome',
+    component: () => import('@/pages/Welcome.vue'),
+  },
   {
     path: '/:invalidpath',
     name: 'Invalid Page',