From 50967a8976e77c3ea6cbababfe83da4ca525b710 Mon Sep 17 00:00:00 2001
From: Daniel Apodaca <47479471+apodacaduron@users.noreply.github.com>
Date: Fri, 12 Jul 2024 17:25:10 -0600
Subject: [PATCH 1/2] centralize contact information in env file and add
 premium banner to org

---
 .env.example                                  |  2 +
 src/config/constants.ts                       |  4 ++
 .../components/GoPremiumSidebar.vue           | 13 +++---
 .../organizations/components/OrgLayout.vue    | 45 ++++++++++++++++---
 .../sales/components/TodaySalesSidebar.vue    |  2 +-
 .../sales/components/ViewSaleSidebar.vue      |  3 +-
 src/pages/home.vue                            |  4 +-
 src/pages/legal/cookie-policy.vue             |  6 ++-
 src/pages/legal/legal-notice.vue              |  8 +++-
 src/pages/legal/privacy-policy.vue            |  6 ++-
 src/pages/legal/refund-policy.vue             | 12 ++---
 src/pages/legal/terms-and-conditions.vue      |  6 ++-
 src/pages/org/customers.vue                   |  7 +--
 src/pages/org/dashboard.vue                   |  2 +-
 src/pages/org/products.vue                    |  5 +--
 src/pages/org/sales.vue                       |  7 +--
 16 files changed, 92 insertions(+), 40 deletions(-)
 create mode 100644 src/config/constants.ts

diff --git a/.env.example b/.env.example
index af92abc..d340975 100644
--- a/.env.example
+++ b/.env.example
@@ -3,3 +3,5 @@ VITE_GOOGLE_MEASUREMENT_ID=YOUR_SUPABASE_URL
 VITE_SUPABASE_URL=YOUR_SUPABASE_URL
 VITE_SUPABASE_ANON_KEY=YOUR_SUPABASE_ANON_KEY
 VITE_WHATSAPP_URL=https://wa.me
+VITE_SUPPORT_EMAIL=example@support.com
+VITE_SUPPORT_PHONE=1231231231
diff --git a/src/config/constants.ts b/src/config/constants.ts
new file mode 100644
index 0000000..22df98b
--- /dev/null
+++ b/src/config/constants.ts
@@ -0,0 +1,4 @@
+export const WHATSAPP_URL = import.meta.env.VITE_WHATSAPP_URL as string;
+export const SUPPORT_EMAIL = import.meta.env.VITE_SUPPORT_EMAIL as string;
+export const SUPPORT_PHONE = import.meta.env.VITE_SUPPORT_PHONE as string;
+export const SUPPORT_WHATSAPP = `${WHATSAPP_URL}/${SUPPORT_PHONE}`;
\ No newline at end of file
diff --git a/src/features/organizations/components/GoPremiumSidebar.vue b/src/features/organizations/components/GoPremiumSidebar.vue
index a8fa70b..5b97b64 100644
--- a/src/features/organizations/components/GoPremiumSidebar.vue
+++ b/src/features/organizations/components/GoPremiumSidebar.vue
@@ -62,13 +62,16 @@ async function createStripeCheckout() {
       <SheetHeader>
         <SheetTitle>¡Hazte Premium Hoy!</SheetTitle>
         <SheetDescription>
-          Suscríbete ahora para disfrutar de todos los beneficios exclusivos de
-          nuestra membresía premium. Accede a contenido exclusivo, soporte
-          prioritario y mucho más. Haz clic en el botón de abajo para completar
-          tu suscripción a través de Stripe y mejorar tu experiencia al máximo.
+          <ul class="list-disc pl-4">
+            <li>Hasta 5000 clientes y 5000 productos</li>
+            <li>Hasta 3 organizaciones</li>
+            <li>Página pública para compartir inventario con clientes</li>
+            <li>Estadísticas avanzadas</li>
+            <li>Monedero electrónico para tus clientes</li>
+          </ul>
         </SheetDescription>
       </SheetHeader>
-      <SheetFooter class="flex flex-row gap-2">
+      <SheetFooter class="flex flex-row gap-2 mt-4">
         <Button
           :disabled="isSubscribeButtonDisabled"
           @click="createStripeCheckoutMutation.mutate()"
diff --git a/src/features/organizations/components/OrgLayout.vue b/src/features/organizations/components/OrgLayout.vue
index c9ca28a..dfc837e 100644
--- a/src/features/organizations/components/OrgLayout.vue
+++ b/src/features/organizations/components/OrgLayout.vue
@@ -27,7 +27,7 @@ import {
   MoonIcon,
   SunIcon,
 } from "@heroicons/vue/24/outline";
-import { CrownIcon, MenuIcon, SettingsIcon } from "lucide-vue-next";
+import { CrownIcon, MenuIcon, PhoneIcon, SettingsIcon } from "lucide-vue-next";
 import GoPremiumSidebar from "./GoPremiumSidebar.vue";
 import { computed } from "vue";
 import {
@@ -40,6 +40,7 @@ import OrganizationSwitcher from "./OrganizationSwitcher.vue";
 import UpdateOrganizationSidebar from "./UpdateOrganizationSidebar.vue";
 import { useLayerManager } from "@/features/global";
 import CreateOrganizationSidebar from "./CreateOrganizationSidebar.vue";
+import { SUPPORT_EMAIL, SUPPORT_WHATSAPP } from "@/config/constants";
 
 const layerManager = useLayerManager();
 const organizationStore = useOrganizationStore();
@@ -152,12 +153,21 @@ const menuList = computed(() => ({
               <SheetFooter class="flex flex-col gap-4">
                 <div class="shrink-0 bg-border h-px w-full" />
                 <a
-                  href="mailto:inventariofacilmx@gmail.com"
+                  :href="`mailto:${SUPPORT_EMAIL}`"
                   class="w-full inline-flex items-center whitespace-nowrap font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground rounded-md h-10 px-3 text-md justify-start"
                   active-class="active-link"
                 >
                   <EnvelopeIcon class="size-5" />
-                  <span class="ms-2">Soporte</span>
+                  <span class="ms-2">Soporte correo</span>
+                </a>
+                <a
+                  :href="SUPPORT_WHATSAPP"
+                  target="_blank"
+                  class="w-full inline-flex items-center whitespace-nowrap font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground rounded-md h-10 px-3 text-md justify-start"
+                  active-class="active-link"
+                >
+                  <PhoneIcon class="size-5" />
+                  <span class="ms-2">Soporte Whatsapp</span>
                 </a>
                 <Button
                   v-if="!organizationStore.isPremium"
@@ -276,12 +286,21 @@ const menuList = computed(() => ({
 
       <div class="w-full flex flex-col gap-4">
         <a
-          href="mailto:inventariofacilmx@gmail.com"
+          :href="`mailto:${SUPPORT_EMAIL}`"
           class="w-full inline-flex items-center whitespace-nowrap font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground rounded-md h-10 px-3 text-md justify-start"
           active-class="active-link"
         >
           <EnvelopeIcon class="size-5" />
-          <span class="ms-2">Soporte</span>
+          <span class="ms-2">Soporte correo</span>
+        </a>
+        <a
+          :href="SUPPORT_WHATSAPP"
+          target="_blank"
+          class="w-full inline-flex items-center whitespace-nowrap font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground rounded-md h-10 px-3 text-md justify-start"
+          active-class="active-link"
+        >
+          <PhoneIcon class="size-5" />
+          <span class="ms-2">Soporte Whatsapp</span>
         </a>
         <Button
           v-if="!organizationStore.isPremium"
@@ -295,6 +314,16 @@ const menuList = computed(() => ({
   </aside>
 
   <div class="sm:ml-64">
+    <div class="mt-[71px]">
+      <div
+        v-if="!organizationStore.isPremium"
+        class="banner"
+        @click="layerManager.openLayer('go-premium')"
+      >
+        <CrownIcon class="size-4" />
+        Obtener premium
+      </div>
+    </div>
     <router-view />
   </div>
 </template>
@@ -303,4 +332,10 @@ const menuList = computed(() => ({
 .active-link {
   @apply bg-primary text-primary-foreground shadow hover:bg-primary/90;
 }
+.banner {
+  @apply bg-primary text-primary-foreground;
+  @apply flex justify-center items-center gap-2;
+  @apply p-2 select-none cursor-pointer;
+  @apply shadow-sm;
+}
 </style>
diff --git a/src/features/sales/components/TodaySalesSidebar.vue b/src/features/sales/components/TodaySalesSidebar.vue
index 2a4fda3..88b10d1 100644
--- a/src/features/sales/components/TodaySalesSidebar.vue
+++ b/src/features/sales/components/TodaySalesSidebar.vue
@@ -25,6 +25,7 @@ import { useCurrencyFormatter } from "@/features/products";
 import { FeedbackCard, useTableStates } from "@/features/global";
 import { FaceFrownIcon } from "@heroicons/vue/24/outline";
 import { useRoute } from "vue-router";
+import { WHATSAPP_URL } from "@/config/constants";
 
 const openModel = defineModel<boolean>("open");
 
@@ -33,7 +34,6 @@ const LOCALE = {
   cancelled: "Cancelada",
   completed: "Completada",
 };
-const WHATSAPP_URL = import.meta.env.VITE_WHATSAPP_URL;
 const route = useRoute();
 const currencyFormatter = useCurrencyFormatter();
 const dashboardDates = useDashboardDates({
diff --git a/src/features/sales/components/ViewSaleSidebar.vue b/src/features/sales/components/ViewSaleSidebar.vue
index b178ec4..0e8e8c2 100644
--- a/src/features/sales/components/ViewSaleSidebar.vue
+++ b/src/features/sales/components/ViewSaleSidebar.vue
@@ -18,6 +18,7 @@ import {
 } from "@/components/ui";
 import { Sale } from "../composables";
 import { useCurrencyFormatter } from "@/features/products";
+import { WHATSAPP_URL } from "@/config/constants";
 
 type ViewSaleSidebarProps = {
   sale?: Sale | null;
@@ -33,8 +34,6 @@ const LOCALE = {
   cancelled: "Cancelada",
   completed: "Completada",
 };
-const WHATSAPP_URL = import.meta.env.VITE_WHATSAPP_URL;
-
 const currencyFormatter = useCurrencyFormatter();
 </script>
 
diff --git a/src/pages/home.vue b/src/pages/home.vue
index d0472a2..3ae4d3a 100644
--- a/src/pages/home.vue
+++ b/src/pages/home.vue
@@ -18,6 +18,7 @@ import { useCurrencyFormatter } from "@/features/products";
 import { useRouter } from "vue-router";
 import { ref } from "vue";
 import { GoPremiumSidebar } from "@/features/organizations";
+import { SUPPORT_EMAIL } from "@/config/constants";
 
 const isGoPremiumSidebarOpen = ref(false);
 const router = useRouter();
@@ -48,6 +49,7 @@ function getCardDataFromPlan(plan: Tables<"plans">) {
             <li>Hasta 3 organizaciones</li>  
             <li>Página pública para compartir inventario con clientes</li>  
             <li>Estadísticas avanzadas</li>  
+            <li>Monedero electrónico para tus clientes</li>
           </ul>
         `,
         action: {
@@ -220,7 +222,7 @@ function getCardDataFromPlan(plan: Tables<"plans">) {
       </div>
 
       <div class="mt-10 mb-14 flex justify-center">
-        <a href="mailto:inventariofacilmx@gmail.com">
+        <a :href="`mailto:${SUPPORT_EMAIL}`">
           <Button variant="outline" size="lg">Contactar</Button>
         </a>
       </div>
diff --git a/src/pages/legal/cookie-policy.vue b/src/pages/legal/cookie-policy.vue
index a252b51..c64eb5d 100644
--- a/src/pages/legal/cookie-policy.vue
+++ b/src/pages/legal/cookie-policy.vue
@@ -1,3 +1,7 @@
+<script setup lang="ts">
+import { SUPPORT_EMAIL } from "@/config/constants";
+</script>
+
 <template>
   <div class="container my-12">
     <h1 class="text-4xl">Política de Cookies</h1>
@@ -96,7 +100,7 @@
     </p>
     <p>
       <strong>inventariofacil.mx</strong><br />
-      Correo Electrónico: inventariofacilmx@gmail.com
+      Correo Electrónico: {{ SUPPORT_EMAIL }}
     </p>
   </div>
 </template>
diff --git a/src/pages/legal/legal-notice.vue b/src/pages/legal/legal-notice.vue
index 5e7adc4..97254ba 100644
--- a/src/pages/legal/legal-notice.vue
+++ b/src/pages/legal/legal-notice.vue
@@ -1,3 +1,7 @@
+<script setup lang="ts">
+import { SUPPORT_EMAIL } from "@/config/constants";
+</script>
+
 <template>
   <div class="container my-12">
     <h1 class="text-4xl">Aviso Legal</h1>
@@ -19,7 +23,7 @@
     </p>
     <p class="mt-2 mb-6">
       <strong>inventariofacil.mx</strong><br />
-      Correo Electrónico: inventariofacilmx@gmail.com<br />
+      Correo Electrónico: {{ SUPPORT_EMAIL }}<br />
       Sitio Web:
       <a href="https://inventariofacil.mx">https://inventariofacil.mx</a>
     </p>
@@ -77,7 +81,7 @@
     </p>
     <p class="mt-2 mb-6">
       <strong>inventariofacil.mx</strong><br />
-      Correo Electrónico: inventariofacilmx@gmail.com
+      Correo Electrónico: {{ SUPPORT_EMAIL }}
     </p>
   </div>
 </template>
diff --git a/src/pages/legal/privacy-policy.vue b/src/pages/legal/privacy-policy.vue
index a74c13b..dbe6afd 100644
--- a/src/pages/legal/privacy-policy.vue
+++ b/src/pages/legal/privacy-policy.vue
@@ -1,3 +1,7 @@
+<script setup lang="ts">
+import { SUPPORT_EMAIL } from "@/config/constants";
+</script>
+
 <template>
   <div class="container my-12">
     <h1 class="text-4xl">Política de Privacidad</h1>
@@ -114,7 +118,7 @@
     </p>
     <p class="mt-2 mb-6">
       <strong>inventariofacil.mx</strong><br />
-      Correo Electrónico: inventariofacilmx@gmail.com
+      Correo Electrónico: {{ SUPPORT_EMAIL }}
     </p>
   </div>
 </template>
diff --git a/src/pages/legal/refund-policy.vue b/src/pages/legal/refund-policy.vue
index 1d5f919..9152e73 100644
--- a/src/pages/legal/refund-policy.vue
+++ b/src/pages/legal/refund-policy.vue
@@ -1,3 +1,7 @@
+<script setup lang="ts">
+import { SUPPORT_EMAIL } from "@/config/constants";
+</script>
+
 <template>
   <div class="container my-12">
     <h1 class="text-4xl">Política de Reembolsos</h1>
@@ -23,9 +27,7 @@
     <ul class="mb-6">
       <li>
         Envíe un correo electrónico a
-        <a href="mailto:inventariofacilmx@gmail.com"
-          >inventariofacilmx@gmail.com</a
-        >
+        <a :href="`mailto:${SUPPORT_EMAIL}`">{{ SUPPORT_EMAIL }}</a>
         con el asunto "Solicitud de Reembolso".
       </li>
       <li>
@@ -60,9 +62,7 @@
     <p class="mt-2 mb-6">
       <strong>InventarioFácil.mx</strong><br />
       Correo Electrónico:
-      <a href="mailto:inventariofacilmx@gmail.com"
-        >inventariofacilmx@gmail.com</a
-      >
+      <a :href="`mailto:${SUPPORT_EMAIL}`">{{ SUPPORT_EMAIL }}</a>
     </p>
 
     <h2 class="text-xl">5. Cambios en la Política de Reembolsos</h2>
diff --git a/src/pages/legal/terms-and-conditions.vue b/src/pages/legal/terms-and-conditions.vue
index 9687730..e714a10 100644
--- a/src/pages/legal/terms-and-conditions.vue
+++ b/src/pages/legal/terms-and-conditions.vue
@@ -1,3 +1,7 @@
+<script setup lang="ts">
+import { SUPPORT_EMAIL } from "@/config/constants";
+</script>
+
 <template>
   <div class="container my-12">
     <h1 class="text-4xl">Términos y Condiciones</h1>
@@ -92,7 +96,7 @@
     </p>
     <p>
       <strong>inventariofacil.mx</strong><br />
-      Correo Electrónico: inventariofacilmx@gmail.com
+      Correo Electrónico: {{ SUPPORT_EMAIL }}
     </p>
   </div>
 </template>
diff --git a/src/pages/org/customers.vue b/src/pages/org/customers.vue
index 7f68cd5..58e4779 100644
--- a/src/pages/org/customers.vue
+++ b/src/pages/org/customers.vue
@@ -39,12 +39,12 @@ import { refDebounced, useInfiniteScroll } from "@vueuse/core";
 import { useOrganizationStore } from "@/stores";
 import { useRoute } from "vue-router";
 import { useCurrencyFormatter } from "@/features/products";
+import { WHATSAPP_URL } from "@/config/constants";
 
 const LOCALE = {
   trusted: "Confiable",
   not_trusted: "No confiable",
 };
-const WHATSAPP_URL = import.meta.env.VITE_WHATSAPP_URL;
 const tableRef = ref<HTMLElement | null>(null);
 const customerSearch = ref("");
 const customerSearchDebounced = refDebounced(customerSearch, 400);
@@ -111,10 +111,7 @@ watchEffect(() => {
 </script>
 
 <template>
-  <div
-    ref="tableRef"
-    class="py-6 mt-[71px] md:px-6 h-[calc(100vh-71px)] overflow-y-auto"
-  >
+  <div ref="tableRef" class="py-6 md:px-6 h-[calc(100vh-71px)] overflow-y-auto">
     <div class="flex justify-between flex-col md:flex-row mx-4 md:mx-0">
       <div class="mb-6">
         <h2
diff --git a/src/pages/org/dashboard.vue b/src/pages/org/dashboard.vue
index c382b84..9f4c49f 100644
--- a/src/pages/org/dashboard.vue
+++ b/src/pages/org/dashboard.vue
@@ -69,7 +69,7 @@ const yearMonthlySalesData = computed(() => {
 </script>
 
 <template>
-  <div class="py-6 mt-[71px] md:px-6 h-[calc(100vh-71px)] overflow-y-auto">
+  <div class="py-6 md:px-6 h-[calc(100vh-71px)] overflow-y-auto">
     <div class="flex flex-col gap-8 mx-4 md:mx-0 mb-6">
       <div class="flex flex-col gap-5">
         <div class="text-slate-500 dark:text-slate-400 font-semibold">
diff --git a/src/pages/org/products.vue b/src/pages/org/products.vue
index a2bab50..b52bd54 100644
--- a/src/pages/org/products.vue
+++ b/src/pages/org/products.vue
@@ -183,10 +183,7 @@ watchEffect(() => {
 </script>
 
 <template>
-  <div
-    ref="tableRef"
-    class="py-6 mt-[71px] md:px-6 h-[calc(100vh-71px)] overflow-y-auto"
-  >
+  <div ref="tableRef" class="py-6 md:px-6 h-[calc(100vh-71px)] overflow-y-auto">
     <div class="flex justify-between flex-col md:flex-row mx-4 md:mx-0">
       <div class="mb-6">
         <h2
diff --git a/src/pages/org/sales.vue b/src/pages/org/sales.vue
index be9f18f..06d31c8 100644
--- a/src/pages/org/sales.vue
+++ b/src/pages/org/sales.vue
@@ -61,13 +61,13 @@ import { useRoute } from "vue-router";
 import CustomerPickerSidebar from "@/features/sales/components/CustomerPickerSidebar.vue";
 import { CreateCustomerSidebar, Customer } from "@/features/customers";
 import ProductPickerSidebar from "@/features/sales/components/ProductPickerSidebar.vue";
+import { WHATSAPP_URL } from "@/config/constants";
 
 const LOCALE = {
   in_progress: "En progreso",
   cancelled: "Cancelada",
   completed: "Completada",
 };
-const WHATSAPP_URL = import.meta.env.VITE_WHATSAPP_URL;
 const tableFiltersRef = useStorage<{
   status: NonNullable<Tables<"i_sales">["status"]> | "all";
   period?: "daily" | "weekly" | "monthly";
@@ -192,10 +192,7 @@ watchEffect(() => {
 </script>
 
 <template>
-  <div
-    ref="tableRef"
-    class="py-6 mt-[71px] md:px-6 h-[calc(100vh-71px)] overflow-y-auto"
-  >
+  <div ref="tableRef" class="py-6 md:px-6 h-[calc(100vh-71px)] overflow-y-auto">
     <div class="flex justify-between flex-col md:flex-row mx-4 md:mx-0">
       <div class="mb-6">
         <h2

From 9da3215e9519f0f610832cf7eea66404ea723c0d Mon Sep 17 00:00:00 2001
From: Daniel Apodaca <47479471+apodacaduron@users.noreply.github.com>
Date: Fri, 12 Jul 2024 17:27:09 -0600
Subject: [PATCH 2/2] add whatsapp to landing page

---
 src/pages/home.vue | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/pages/home.vue b/src/pages/home.vue
index 3ae4d3a..79dab9c 100644
--- a/src/pages/home.vue
+++ b/src/pages/home.vue
@@ -18,7 +18,8 @@ import { useCurrencyFormatter } from "@/features/products";
 import { useRouter } from "vue-router";
 import { ref } from "vue";
 import { GoPremiumSidebar } from "@/features/organizations";
-import { SUPPORT_EMAIL } from "@/config/constants";
+import { SUPPORT_EMAIL, SUPPORT_WHATSAPP } from "@/config/constants";
+import { MailIcon, PhoneIcon } from "lucide-vue-next";
 
 const isGoPremiumSidebarOpen = ref(false);
 const router = useRouter();
@@ -221,9 +222,17 @@ function getCardDataFromPlan(plan: Tables<"plans">) {
         <p class="text-muted-foreground">Ponte en contacto con nosotros</p>
       </div>
 
-      <div class="mt-10 mb-14 flex justify-center">
+      <div class="mt-10 mb-14 flex justify-center gap-4">
         <a :href="`mailto:${SUPPORT_EMAIL}`">
-          <Button variant="outline" size="lg">Contactar</Button>
+          <Button variant="outline" size="lg">
+            <MailIcon class="size-4 mr-2" />
+            Contactar</Button
+          >
+        </a>
+        <a :href="SUPPORT_WHATSAPP">
+          <Button variant="outline" size="lg"
+            ><PhoneIcon class="size-4 mr-2" /> Whatsapp</Button
+          >
         </a>
       </div>
     </section>