funcao para abrir wpp com mensagem pre preenchida para msg da serprati

src/i18n/locales/en.json

@@ -604,7 +604,10 @@
     "filter_recent": "Recent",
     "filter_others": "Others",
     "btn_want": "I WANT IT",
-    "btn_interested": "INTERESTED"
+    "btn_interested": "INTERESTED",
+    "whatsapp_dialog_title": "Talk on WhatsApp",
+    "whatsapp_message": "Hello, I am {nome} and I am interested in this store item: {item}{variacao}.",
+    "whatsapp_btn_send": "Open WhatsApp"
   },
   "parceiro": {
     "category": "Category",
@@ -652,10 +655,10 @@
     }
   },
   "notification": {
-    "pending_read_title":    "Pending Notifications",
+    "pending_read_title": "Pending Notifications",
     "pending_read_subtitle": "You have unread notifications. Read all of them to continue.",
-    "pending_read_hint":     "Click on each notification to mark it as read.",
-    "pending_read_close":    "Close",
+    "pending_read_hint": "Click on each notification to mark it as read.",
+    "pending_read_close": "Close",
     "new": "New notification",
     "history": "History",
     "title_label": "Title",

src/i18n/locales/es.json

@@ -603,7 +603,10 @@
     "filter_recent": "Recientes",
     "filter_others": "Otros",
     "btn_want": "LO QUIERO",
-    "btn_interested": "INTERESADO"
+    "btn_interested": "INTERESADO",
+    "whatsapp_dialog_title": "Hablar por WhatsApp",
+    "whatsapp_message": "Hola, soy {nome} y tengo interés en este artículo de la tienda: {item}{variacao}.",
+    "whatsapp_btn_send": "Abrir WhatsApp"
   },
   "parceiro": {
     "category": "Categoría",
@@ -652,10 +655,10 @@
     }
   },
   "notification": {
-    "pending_read_title":    "Notificaciones Pendientes",
+    "pending_read_title": "Notificaciones Pendientes",
     "pending_read_subtitle": "Tiene notificaciones no leídas. Léalas todas para continuar.",
-    "pending_read_hint":     "Haga clic en cada notificación para marcarla como leída.",
-    "pending_read_close":    "Cerrar",
+    "pending_read_hint": "Haga clic en cada notificación para marcarla como leída.",
+    "pending_read_close": "Cerrar",
     "new": "Nueva notificación",
     "history": "Historial",
     "title_label": "Título",

src/i18n/locales/pt.json

@@ -604,7 +604,10 @@
     "filter_recent": "Recentes",
     "filter_others": "Outros",
     "btn_want": "EU QUERO",
-    "btn_interested": "INTERESSADO"
+    "btn_interested": "INTERESSADO",
+    "whatsapp_dialog_title": "Falar no WhatsApp",
+    "whatsapp_message": "Olá, eu sou {nome} e tenho interesse nesse item da loja: {item}{variacao}.",
+    "whatsapp_btn_send": "Abrir WhatsApp"
   },
   "parceiro": {
     "category": "Categoria",
@@ -651,10 +654,10 @@
     }
   },
   "notification": {
-    "pending_read_title":    "Notificações Pendentes",
+    "pending_read_title": "Notificações Pendentes",
     "pending_read_subtitle": "Você possui notificações não lidas. Leia todas para continuar.",
-    "pending_read_hint":     "Clique em cada notificação para marcá-la como lida.",
-    "pending_read_close":    "Fechar",
+    "pending_read_hint": "Clique em cada notificação para marcá-la como lida.",
+    "pending_read_close": "Fechar",
     "new": "Nova notificação",
     "history": "Histórico",
     "title_label": "Título",

src/pages/associado/loja/AssociadoLojaPage.vue

@@ -4,7 +4,6 @@
 
     <div class="q-px-md q-pb-md">
 
-      <!-- Search -->
       <div class="q-mb-md">
         <q-input
           v-model="search"
@@ -20,7 +19,6 @@
         </q-input>
       </div>
 
-      <!-- Category chips -->
       <div class="chips-row q-mb-md">
         <div
           :class="['cat-chip', activeTab === 'all' ? 'cat-chip--selected' : 'cat-chip--default']"
@@ -47,17 +45,14 @@
         </div>
       </div>
 
-      <!-- Loading -->
       <div v-if="loading" class="flex flex-center q-py-xl">
         <q-spinner color="primary" size="48px" />
       </div>
 
-      <!-- Empty -->
       <div v-else-if="pagedItems.length === 0" class="text-center text-grey q-py-xl">
         {{ $t('http.errors.no_records_found') }}
       </div>
 
-      <!-- Grid -->
       <div v-else class="items-list">
         <div
           v-for="item in pagedItems"
@@ -67,10 +62,8 @@
             <q-card-section class="q-pa-sm">
               <div class="row no-wrap store-card-inner">
 
-                <!-- LEFT -->
                 <div class="col column justify-between q-pr-sm">
                   <div>
-                    <!-- Category badge -->
                     <div class="q-mb-xs">
                       <span v-if="item.category?.name" class="badge-category">
                         {{ item.category.name }}
@@ -85,7 +78,6 @@
                       {{ item.description }}
                     </div>
 
-                    <!-- Variations -->
                     <template v-if="item.variations?.length">
                       <div class="text-caption text-grey-6 q-mb-xs">
                         {{ variationTypeLabel(item) }}
@@ -108,7 +100,6 @@
                     </template>
                   </div>
 
-                  <!-- Price -->
                   <div class="column items-start q-mt-sm">
                     <span v-if="item.price" class="text-caption text-grey-5 text-strike">
                       R$ {{ formatPrice(item.price) }}
@@ -119,7 +110,6 @@
                   </div>
                 </div>
 
-                <!-- RIGHT -->
                 <div class="store-card-right column items-stretch no-wrap">
                   <div class="store-card-image col">
                     <img
@@ -137,7 +127,6 @@
                     />
                   </div>
 
-                  <!-- Button -->
                   <q-btn
                     unelevated
                     size="sm"
@@ -149,6 +138,15 @@
                     padding="5px 8px"
                     @click="toggleInterest(item)"
                   />
+                  <q-btn
+                    unelevated
+                    size="sm"
+                    class="q-mt-xs btn-whatsapp"
+                    icon="mdi-whatsapp"
+                    style="width: 100%"
+                    padding="5px 8px"
+                    @click="openWhatsAppDialog(item)"
+                  />
                 </div>
 
               </div>
@@ -157,7 +155,6 @@
         </div>
       </div>
 
-      <!-- Pagination -->
       <div v-if="totalPages > 1" class="flex flex-center q-mt-lg">
         <q-pagination
           v-model="currentPage"
@@ -179,6 +176,7 @@ import { normalizeString } from "src/helpers/utils";
 import { getStoreItemsAssociado, toggleInterestAssociado as apiToggleInterest } from "src/api/storeItem";
 import { getCategories } from "src/api/category";
 import DefaultHeaderPage from "src/components/layout/DefaultHeaderPage.vue";
+import WhatsAppLojaDialog from "./components/WhatsAppLojaDialog.vue";
 
 const $q = useQuasar();
 const { t } = useI18n();
@@ -251,17 +249,22 @@ const toggleInterest = async (item) => {
     const result = await apiToggleInterest(item.id);
     item.user_interested = result.interested;
     item.interests_count = (item.interests_count ?? 0) + (result.interested ? 1 : -1);
-    $q.notify({
-      type: "positive",
-      message: result.interested
-        ? t("loja.btn_interested")
-        : t("http.success"),
-    });
   } catch {
-    $q.notify({ type: "negative", message: t("http.errors.failed") });
+    // silent
   }
 };
 
+const openWhatsAppDialog = (item) => {
+  const variation = activeVariation(item);
+  $q.dialog({
+    component: WhatsAppLojaDialog,
+    componentProps: {
+      item,
+      variationLabel: variation?.variation_label ?? null,
+    },
+  });
+};
+
 onMounted(async () => {
   try {
     const [itemsData, catsData] = await Promise.all([
@@ -423,6 +426,14 @@ onMounted(async () => {
 
 .btn-interested :deep(.q-icon) { color: white !important; }
 
+.btn-whatsapp {
+  background: #25d366 !important;
+  color: white !important;
+  border-radius: 8px !important;
+}
+
+.btn-whatsapp :deep(.q-icon) { color: white !important; }
+
 // --- text colors ---
 .text-violet-dark   { color: #4d1658; }
 .text-violet-medium { color: #7b2d97; }

src/pages/associado/loja/components/WhatsAppLojaDialog.vue

@@ -0,0 +1,83 @@
+<template>
+  <q-dialog ref="dialogRef" @hide="onDialogHide">
+    <q-card class="q-dialog-plugin overflow-hidden" style="min-width: 300px; max-width: 460px; width: 92vw">
+      <DefaultDialogHeader :title="() => $t('loja.whatsapp_dialog_title')" @close="onDialogCancel" />
+
+      <q-card-section class="q-pt-sm">
+        <div class="wpp-message-box">
+          <q-icon name="mdi-whatsapp" color="positive" size="22px" class="wpp-icon" />
+          <p class="text-body2 q-mb-none wpp-text">{{ message }}</p>
+        </div>
+      </q-card-section>
+
+      <q-card-actions align="right" class="q-px-md q-pb-md">
+        <q-btn
+          flat
+          color="grey-7"
+          :label="$t('common.actions.cancel')"
+          @click="onDialogCancel"
+        />
+        <q-btn
+          unelevated
+          color="positive"
+          icon="mdi-whatsapp"
+          :label="$t('loja.whatsapp_btn_send')"
+          @click="openWhatsApp"
+        />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script setup>
+import { computed } from "vue";
+import { useDialogPluginComponent } from "quasar";
+import { useI18n } from "vue-i18n";
+import { userStore } from "src/stores/user";
+import DefaultDialogHeader from "src/components/defaults/DefaultDialogHeader.vue";
+
+defineEmits([...useDialogPluginComponent.emits]);
+
+const { item, variationLabel } = defineProps({
+  item: { type: Object, required: true },
+  variationLabel: { type: String, default: null },
+});
+
+const { t } = useI18n();
+const { dialogRef, onDialogHide, onDialogCancel } = useDialogPluginComponent();
+const store = userStore();
+
+const message = computed(() => {
+  const nome = store.user?.name ?? "";
+  const variacao = variationLabel ? ` - ${variationLabel}` : "";
+  return t("loja.whatsapp_message", { nome, item: item.name, variacao });
+});
+
+const openWhatsApp = () => {
+  const encoded = encodeURIComponent(message.value);
+  window.open(`https://wa.me/5545991266531?text=${encoded}`, "_blank");
+  onDialogCancel();
+};
+</script>
+
+<style scoped lang="scss">
+.wpp-message-box {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  background: #f0fdf4;
+  border: 1px solid #86efac;
+  border-radius: 10px;
+  padding: 14px;
+}
+
+.wpp-icon {
+  flex-shrink: 0;
+  margin-top: 1px;
+}
+
+.wpp-text {
+  line-height: 1.55;
+  color: #166534;
+}
+</style>