feat: add alerta para cadastrar dados bancarios

src/components/profile/MissingBankDataDialog.vue

@@ -0,0 +1,50 @@
+<template>
+  <q-dialog ref="dialogRef" persistent @hide="onDialogHide">
+    <q-card class="missing-bank-dialog bg-white text-text">
+      <q-card-section class="q-pb-sm">
+        <div class="font18 fontbold q-mb-sm">{{ $t('profile.bank_data.missing_alert_title') }}</div>
+        <div class="font12 text-grey-7 missing-bank-dialog__message">
+          {{ $t('profile.bank_data.missing_alert_message') }}
+        </div>
+      </q-card-section>
+
+      <q-card-actions align="right" class="q-px-md q-pb-md q-pt-sm">
+        <q-btn
+          flat
+          no-caps
+          rounded
+          color="grey-7"
+          :label="$t('profile.bank_data.missing_alert_later')"
+          @click="onDialogCancel"
+        />
+        <q-btn
+          unelevated
+          no-caps
+          rounded
+          color="primary"
+          :label="$t('profile.bank_data.missing_alert_action')"
+          @click="onDialogOK"
+        />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script setup>
+import { useDialogPluginComponent } from 'quasar';
+
+defineEmits([...useDialogPluginComponent.emits]);
+
+const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } = useDialogPluginComponent();
+</script>
+
+<style scoped>
+.missing-bank-dialog {
+  width: min(92vw, 420px);
+  border-radius: 8px;
+}
+
+.missing-bank-dialog__message {
+  line-height: 1.5;
+}
+</style>

src/components/profile/ProfileBankDataDialog.vue

@@ -166,6 +166,8 @@ const user = userStore();
 const savingBank = ref(false);
 const bankAlreadyRegistered = ref(false);
 
+const providerId = computed(() => user.user?.provider?.id ?? user.user?.provider_id);
+
 const bankForm = reactive({
   bank: '',
   type: 'checking',
@@ -177,6 +179,7 @@ const bankForm = reactive({
 
 const canSaveBank = computed(
   () =>
+    !!providerId.value &&
     !!bankForm.bank &&
     !!bankForm.branch_number &&
     !!bankForm.account_number &&
@@ -201,7 +204,7 @@ const saveBank = async () => {
       account_check_digit: bankForm.account_check_digit,
     };
 
-    await updateProviderBankAccount(user.user.provider.id, bankAccount);
+    await updateProviderBankAccount(providerId.value, bankAccount);
     await user.fetchUser();
 
     bankAlreadyRegistered.value = true;

src/i18n/locales/en.json

@@ -491,7 +491,11 @@
       "bank_fields_required": "Please enter bank, agency and account",
       "save_account": "register account",
       "account_saved": "Bank account saved successfully!",
-      "save_error": "Error saving. Please try again."
+      "save_error": "Error saving. Please try again.",
+      "missing_alert_title": "Register your bank data",
+      "missing_alert_message": "You need to register your bank data to appear to platform clients.",
+      "missing_alert_action": "Register bank data",
+      "missing_alert_later": "Not now"
     },
     "availability": {
       "title": "Availability",
@@ -834,4 +838,4 @@
       "user_message_header": "--- User message ---"
     }
   }
-}
+}

src/i18n/locales/es.json

@@ -491,7 +491,11 @@
       "bank_fields_required": "Por favor ingrese banco, agencia y cuenta",
       "save_account": "registrar cuenta",
       "account_saved": "¡Cuenta bancaria guardada con éxito!",
-      "save_error": "Error al guardar. Inténtelo de nuevo."
+      "save_error": "Error al guardar. Inténtelo de nuevo.",
+      "missing_alert_title": "Registre sus datos bancarios",
+      "missing_alert_message": "Debe registrar sus datos bancarios para aparecer ante los clientes de la plataforma.",
+      "missing_alert_action": "Registrar datos bancarios",
+      "missing_alert_later": "Ahora no"
     },
     "availability": {
       "title": "Disponibilidad",
@@ -834,4 +838,4 @@
       "user_message_header": "--- Mensaje del usuario ---"
     }
   }
-}
+}

src/i18n/locales/pt.json

@@ -494,7 +494,11 @@
       "bank_fields_required": "Informe banco, agência e conta",
       "save_account": "cadastrar conta",
       "account_saved": "Conta bancária salva com sucesso!",
-      "save_error": "Erro ao salvar. Tente novamente."
+      "save_error": "Erro ao salvar. Tente novamente.",
+      "missing_alert_title": "Cadastre seus dados bancários",
+      "missing_alert_message": "Você precisa cadastrar seus dados bancários para aparecer para os clientes da plataforma.",
+      "missing_alert_action": "Cadastrar dados bancários",
+      "missing_alert_later": "Agora não"
     },
     "availability": {
       "title": "Disponibilidade",
@@ -837,4 +841,4 @@
       "user_message_header": "--- Mensagem do usuário ---"
     }
   }
-}
+}

src/layouts/MainLayout.vue

@@ -5,6 +5,7 @@
       :style="{ height: 'env(safe-area-inset-top)' }"
     >
     </q-header>
+
     <q-page-container>
       <q-page class="bg-surface main-layout-page" style="overflow: hidden;">
         <q-scroll-area
@@ -25,17 +26,24 @@
         </q-scroll-area>
       </q-page>
     </q-page-container>
+
     <q-footer class="provider-bottom-nav bg-white">
       <nav class="provider-bottom-nav-inner">
         <router-link
           v-for="item in navItems"
           :key="item.name"
+          :class="{ 'provider-bottom-nav-item--active': isNavItemActive(item) }"
           :to="{ name: item.name }"
           class="provider-bottom-nav-item"
-          :class="{ 'provider-bottom-nav-item--active': isNavItemActive(item) }"
         >
           <q-icon :name="item.icon" class="provider-bottom-nav-icon font30" />
-          <span class="provider-bottom-nav-label font12" :class="isNavItemActive(item) ? 'fontbold' : 'fontregular'">{{ item.label }}</span>
+
+          <span
+            class="provider-bottom-nav-label font12"
+            :class="isNavItemActive(item) ? 'fontbold' : 'fontregular'"
+          >
+            {{ item.label }}
+          </span>
         </router-link>
       </nav>
     </q-footer>
@@ -43,9 +51,13 @@
 </template>
 
 <script setup>
-import { computed, useTemplateRef, watch } from "vue";
-import { useRoute } from "vue-router";
+import { computed, onMounted, useTemplateRef, watch } from "vue";
 import { useI18n } from "vue-i18n";
+import { useQuasar } from "quasar";
+import { useRoute } from "vue-router";
+import { userStore } from "src/stores/user";
+import MissingBankDataDialog from "src/components/profile/MissingBankDataDialog.vue";
+import ProfileBankDataDialog from "src/components/profile/ProfileBankDataDialog.vue";
 
 defineOptions({
   name: "MainLayout",
@@ -54,9 +66,13 @@ defineOptions({
 const route = useRoute();
 const scrollAreaRef = useTemplateRef("scrollAreaRef");
 const { t } = useI18n();
+const $q = useQuasar();
+const user = userStore();
 
 let oldValue = route.path;
 
+let missingBankDataAlertShown = false;
+
 const navItems = computed(() => [
   {
     name: "DashboardPage",
@@ -80,12 +96,61 @@ const navItems = computed(() => [
   },
 ]);
 
-const isNavItemActive = (item) => route.name === item.name;
-
 const scrollAreaHeight = computed(() => {
   return 'height: calc(100dvh - env(safe-area-inset-top) - 60px - env(safe-area-inset-bottom)) !important;';
 });
 
+const checkMissingBankData = async () => {
+  if (!user.user?.provider && !user.user?.provider_id) {
+    return;
+  }
+
+  try {
+    await user.fetchUser();
+  } catch (error) {
+    console.error('Erro ao carregar dados do prestador:', error);
+  }
+
+  openMissingBankDataAlert();
+};
+
+const hasCompleteBankAccount = () => {
+  const provider = user.user?.provider;
+
+  const bankAccount = provider?.recipient_default_bank_account;
+
+  if (!provider || !bankAccount || !Object.keys(bankAccount).length) {
+    return false;
+  }
+
+  return Boolean(
+    bankAccount.bank
+    && bankAccount.branch_number
+    && bankAccount.account_number
+    && bankAccount.account_check_digit,
+  );
+};
+
+const isNavItemActive = (item) => route.name === item.name;
+
+const openBankDataDialog = () => {
+  $q.dialog({
+    component: ProfileBankDataDialog,
+  });
+};
+
+const openMissingBankDataAlert = () => {
+  if (missingBankDataAlertShown || hasCompleteBankAccount()) {
+    return;
+  }
+
+  missingBankDataAlertShown = true;
+
+  $q.dialog({
+    component: MissingBankDataDialog,
+  }).onOk(openBankDataDialog);
+};
+
 watch(
   () => route.path,
   (value) => {
@@ -96,6 +161,10 @@ watch(
     oldValue = value;
   }
 );
+
+onMounted(() => {
+  checkMissingBankData();
+});
 </script>
 <style scoped>
 .main-layout {