Feature/add premium banner to org

.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

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}`;

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()"

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>

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({

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>
 

src/pages/home.vue

@@ -18,6 +18,8 @@ import { useCurrencyFormatter } from "@/features/products";
 import { useRouter } from "vue-router";
 import { ref } from "vue";
 import { GoPremiumSidebar } from "@/features/organizations";
+import { SUPPORT_EMAIL, SUPPORT_WHATSAPP } from "@/config/constants";
+import { MailIcon, PhoneIcon } from "lucide-vue-next";
 
 const isGoPremiumSidebarOpen = ref(false);
 const router = useRouter();
@@ -48,6 +50,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: {
@@ -219,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">
-        <a href="mailto:inventariofacilmx@gmail.com">
-          <Button variant="outline" size="lg">Contactar</Button>
+      <div class="mt-10 mb-14 flex justify-center gap-4">
+        <a :href="`mailto:${SUPPORT_EMAIL}`">
+          <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>

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>

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>

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>

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>

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>

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

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">

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

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