update copy and login page

holistics · Oct 2, 2024 · 33746b1 · 33746b1
1 parent 4b015a9
commit 33746b1
Show file tree

Hide file tree

Showing 10 changed files with 76 additions and 29 deletions.
diff --git a/components/DashboardOriginal.vue b/components/DashboardOriginal.vue
@@ -18,15 +18,25 @@
         </div>
         <div>
         <p class="mb-2">Please follow these steps:</p>
-        <p class="flex mb-2"><span class="block text-sm text-center w-5 h-5 mr-2 bg-primary-500 text-white rounded-full">1</span><span>Visit this URL: <a class="text-primary hover:underline" href="https://playground.holistics.io/play" target="_blank">https://playground.holistics.io/play</a></span></p>
-        <p class="flex mb-4"><span class="block text-sm text-center min-w-5 h-5 mr-2 bg-primary-500 text-white rounded-full">2</span><span>Search for “Hooli”, all the dashboards in Hooli are listed in the results.</span></p>
-        <img src="https://cdn.holistics.io/hooli/search-hooli.png" alt="Hooli search" class="border-2 rounded-md"/>
+        <p class="flex mb-2"><span class="block text-sm text-center min-w-5 w-5 h-5 mr-2 bg-primary-500 text-white rounded-full">1</span><span>Visit this URL: <a class="text-primary hover:underline" href="https://playground.holistics.io/play" target="_blank">https://playground.holistics.io/play</a>.<br>A Holistics Playground account will be created for you automatically. You only need to do this once.</span></p>
+        <p class="flex mb-4"><span class="block text-sm text-center min-w-5 h-5 mr-2 bg-primary-500 text-white rounded-full">2</span><span>Access the Dashboard here: <br><a class="text-primary hover:underline" :href=dashboardLink target="_blank">[Link to "{{ dashboardName }}" Dashboard]</a>.</span></p>
         </div>
-      </div>
+    </div>
     </UModal>
   </div>
 </template>
 
 <script setup>
 const isOpen = ref(false)
+
+const props = defineProps({
+  dashboardLink: {
+    type: String,
+    required: true
+  },
+  dashboardName: {
+    type: String,
+    required: true
+  },
+})
 </script>
diff --git a/components/sidebar.vue b/components/sidebar.vue
@@ -52,13 +52,13 @@
           <div v-for="(managers, role) in { 'Regional Manager': regionalManagers, 'Merchant Manager': merchantManagers }" :key="role">
             <div v-if="managers.length > 0">
               <div class="p-3 text-md text-white mt-2 flex items-center border-t border-gray-700">
-              {{ role }}
               <UTooltip
                 :popper="{ placement: 'right' }"  
                 :ui="{
                   base: 'h-full text-wrap',
                 }"
               >
+                {{ role }}
                 <UIcon name="i-heroicons-information-circle" class="ml-1 h-5 w-5 cursor-pointer" />
                 <template #text>
                   <div v-if="role === 'Regional Manager'">
@@ -229,7 +229,7 @@ function getUserTooltip(user) {
   if (merchantCount === 0) {
     return `${boldUserName} does not manage any merchants.`
   } else if (merchantCount === 1) {
-    return `${boldUserName} manages <strong>${merchantNames[0]}</strong>.`
+    return `${boldUserName} manages 1 merchant: "<strong>${merchantNames[0]}</strong>".`
   } else {
     const merchantList = merchantNames.map((name, index) => 
       `<li>${index + 1}. <strong>${name}</strong></li>`

diff --git a/pages/analytics/overview.vue b/pages/analytics/overview.vue
@@ -12,7 +12,10 @@
       </ul>
     </blockquote>
 
-    <DashboardOriginal />
+    <DashboardOriginal 
+      dashboardLink="https://playground.holistics.io/studio/projects/23200/explore/modules/demo/ecommerce/dashboards/hooli_overview.page.aml"
+      dashboardName="Hooli Overview"  
+    />
 
     <IframeLoader :iframe-url="iframeUrl"/>
   </div>

diff --git a/pages/analytics/reports.vue b/pages/analytics/reports.vue
@@ -9,6 +9,12 @@
         <li>Using provided filters to filter out data.</li>
         <li>Cross-filter by clicking on any data point.</li>
         <li>Date-drill or Drill-through by right-click on any data points.</li>
+        <li>
+          Explore available Actions by hovering over table columns with the blue flash icon
+          <svg class="inline-block" width="10" height="17" viewBox="0 0 10 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.25023 5.04032H5.64402L6.97525 0.951361C7.10025 0.47253 6.74088 0 6.25026 0H1.75031C1.37531 0 1.05657 0.280368 1.00657 0.655242L0.00658048 8.21573C-0.0527938 8.66935 0.297202 9.07258 0.750322 9.07258H4.45965L3.01905 15.1997C2.90655 15.6786 3.26904 16.129 3.74716 16.129C4.00966 16.129 4.25966 15.9904 4.39716 15.751L9.89709 6.1744C10.1877 5.67351 9.82834 5.04032 9.25023 5.04032Z" fill="#1B7CE4"/>
+</svg>
+        </li>
       </ul>
     </blockquote>
     <UHorizontalNavigation :links="navigationItems" class="text-5xl border-b" />

diff --git a/pages/analytics/reports/marketing.vue b/pages/analytics/reports/marketing.vue
@@ -1,6 +1,9 @@
 <template>
   <div class="py-4">
-    <DashboardOriginal />
+    <DashboardOriginal 
+      dashboardLink="https://playground.holistics.io/studio/projects/23200/explore/modules/demo/ecommerce/dashboards/hooli_marketing.page.aml"
+      dashboardName="Hooli Marketing"  
+    />
 
     <IframeLoader :iframe-url="iframeUrl"/>
   </div>

diff --git a/pages/analytics/reports/product.vue b/pages/analytics/reports/product.vue
@@ -1,6 +1,9 @@
 <template>
   <div class="py-4">
-    <DashboardOriginal />
+    <DashboardOriginal 
+      dashboardLink="https://playground.holistics.io/studio/projects/23200/explore/modules/demo/ecommerce/dashboards/hooli_products.page.aml"
+      dashboardName="Hooli Products"  
+    />
 
     <IframeLoader :iframe-url="iframeUrl"/>
   </div>

diff --git a/pages/analytics/reports/sales.vue b/pages/analytics/reports/sales.vue
@@ -1,6 +1,9 @@
 <template>
   <div class="py-4">
-    <DashboardOriginal />
+    <DashboardOriginal 
+      dashboardLink="https://playground.holistics.io/studio/projects/23200/explore/modules/demo/ecommerce/dashboards/hooli_sales.page.aml"
+      dashboardName="Hooli Sales"  
+    />
 
     <IframeLoader :iframe-url="iframeUrl"/>
   </div>

diff --git a/pages/index.vue b/pages/index.vue
@@ -38,7 +38,10 @@
       </ul>
     </blockquote>
 
-    <DashboardOriginal />
+    <DashboardOriginal 
+      dashboardLink="https://playground.holistics.io/studio/projects/23200/explore/modules/demo/ecommerce/dashboards/hooli_home.page.aml"
+      dashboardName="Hooli Home"  
+    />
 
     <IframeLoader :iframe-url="iframeUrl"/>
   </div>
@@ -104,7 +107,7 @@ const roleMessage = computed(() => {
     roleSpecificMessage = `You're a Regional Manager, responsible for ${managedMerchants} merchants. Use the filter above to drill down and view each merchant’s performance individually.`
   } else if (currentUser.value.role === 'Merchant Manager') {
     const merchantName = availableMerchants.value?.find(m => m.id === currentUser.value.merchantId[0])?.name || 'Unknown Merchant'
-    roleSpecificMessage = `You're a Merchant Manager, your merchant is ${merchantName}. You can only see data and insights related to this merchant.`
+    roleSpecificMessage = `You're a Merchant Manager. You manage "${merchantName}" merchant. You can only see data and insights related to this merchant.`
   }
 
   return roleSpecificMessage

diff --git a/pages/login.vue b/pages/login.vue
@@ -1,19 +1,35 @@
 <!-- pages/login.vue -->
 <template>
-  <div class="min-h-screen flex items-center justify-center bg-gray-900">
-    <div class="w-full max-w-md p-8">
+  <div class="min-h-screen flex pt-12 justify-center bg-gray-900">
+    <div class="w-full flex flex-col items-center  p-8">
       <!-- Logo -->
-      <div class="text-center mb-8">
+      <div class="text-center">
         <img src="https://cdn.holistics.io/logos/hooli-logo.svg" alt="Holistics Logo" class="h-12 mx-auto" />
-        <p class="mt-4 text-white">
-          Welcome to Holistics Embedded Playground
-          <br>
-          Please select a role:
+        <p class="mt-4 text-white text-2xl">
+          Welcome to Hooli - Embedded Demo Application built by Holistics
         </p>
       </div>
 
+    <div class="max-w-[900px] my-6 py-4 px-6 text-white border border-gray-500 rounded flex justify-between gap-12">
+      <p class="w-6/12 mb-4">Hooli is a fictional ecommerce application designed to showcase the capabilities of <span class="text-[#009f6f]"><b>Holistics Embedded Analytics</b></span>.
+        <br><br>
+        This demo app lets you experience how our solution can be integrated into your ecommerce platform.
+      </p>
+      <div class="w-7/12">
+        <p>On this Hooli app, there are 5 users with 2 roles:</p>
+        <ul class="ml-10 list-disc">
+          <li><span class="text-primary"><b>Regional Managers (2)</b></span>: Oversee multiple merchants. They can see how all merchant performance and easily switch between merchants.</li>
+          <li><span class="text-primary"><b>Merchant Managers (3)</b></span>: Manages one merchant and only have access to data and insights related to this merchant.</li>
+        </ul>
+      </div>
+    </div>
+
+    <p class="my-4 text-white text-xl">
+      Please select a user to log in:
+    </p>
+
     <div 
-      class="relative pb-4" 
+      class="relative w-[400px] pb-4" 
       @mouseenter="isOpen = true"
       @mouseleave="isOpen = false"
     >
@@ -55,13 +71,13 @@
             <div v-for="(managers, role) in { 'Regional Manager': regionalManagers, 'Merchant Manager': merchantManagers }" :key="role">
               <div v-if="managers.length > 0">
                 <div class="p-3 text-md mt-2 flex items-center border-t border-gray-200">
-                  {{ role }}
                   <UTooltip
                     :popper="{ placement: 'right' }"
                     :ui="{
                       base: 'h-full text-wrap',
                     }"
                   >
+                    {{ role }}
                     <UIcon name="i-heroicons-information-circle" class="ml-1 h-5 w-5 cursor-pointer" />
                     <template #text>
                       <div v-if="role === 'Regional Manager'">
@@ -111,14 +127,14 @@
         v-model="password"
         type="password"
         placeholder="Password: 123456"
-        class="w-full py-2 mb-4"
+        class="w-[400px] py-2 mb-4"
         size="lg"
         :disabled="!selectedUser"
       />
 
       <!-- Login Button -->
       <UButton
-        class="w-full bg-red-600 hover:bg-[#c03931] flex items-center justify-center text-white transition-colors duration-200"
+        class="w-[400px] bg-red-600 hover:bg-[#c03931] flex items-center justify-center text-white transition-colors duration-200"
         size="lg"
         :disabled="!selectedUser"
         @click="login"
@@ -180,7 +196,7 @@ function getUserTooltip(user) {
   if (merchantCount === 0) {
     return `${boldUserName} does not manage any merchants.`
   } else if (merchantCount === 1) {
-    return `${boldUserName} manages <strong>${merchantNames[0]}</strong>.`
+    return `${boldUserName} manages 1 merchant: "<strong>${merchantNames[0]}</strong>".`
   } else {
     const merchantList = merchantNames.map((name, index) => 
       `<li>${index + 1}. <strong>${name}</strong></li>`

diff --git a/stores/merchants.js b/stores/merchants.js
@@ -3,12 +3,12 @@ import { defineStore } from 'pinia'
 export const useMerchantsStore = defineStore('merchants', {
   state: () => ({
     availableMerchants: [
-      { id: '561', name: "Dibbert, Abernathy and Mertz" },
+      { id: '561', name: "Dibbert, Abernathy & Mertz" },
       { id: '483', name: "Nader Inc" },
-      { id: '255', name: "Gleichner, Dickinson and Jenkins" },
-      { id: '126', name: "Feest, Schumm and Walsh" },
-      { id: '315', name: "Mayer and Sons" },
-      { id: '353', name: "Bailey, Monahan and Nitzsche" },
+      { id: '255', name: "Gleichner, Dickinson & Jenkins" },
+      { id: '126', name: "Feest, Schumm & Walsh" },
+      { id: '315', name: "Mayer & Sons" },
+      { id: '353', name: "Bailey, Monahan & Nitzsche" },
       { id: '661', name: "Dooley Inc" },
     ],
     selectedMerchant: 'all'