feat: modal de confirmacao de saque + card indicando saque em processamento

src/components/payments/WithdrawSuccessDialog.vue

@@ -0,0 +1,65 @@
+<template>
+  <q-dialog ref="dialogRef" persistent maximized transition-show="slide-left" transition-hide="slide-right" @hide="onDialogHide">
+    <div class="bg-page full-height column no-shadow">
+
+      <div class="row items-center q-px-md q-pb-sm bg-white shadow-profile bg-surface dialog-safe-header">
+        <q-btn icon="mdi-chevron-left" flat round dense color="primary" @click="onDialogOK" />
+        <q-space />
+        <span class="text-primary font16 fontbold gradient-diarista">{{ $t('provider.payments.withdraw_success_header') }}</span>
+        <q-space />
+        <div style="width: 32px"></div>
+      </div>
+
+      <div class="col column items-center justify-center q-px-xl q-pb-xl">
+        <img
+          alt="mascote"
+          class="success-mascot q-mb-lg"
+          :src="LogoDiariaSaque"
+        />
+
+        <div class="success-title fontbold text-primary text-center q-mb-sm">
+          {{ $t('provider.payments.withdraw_success_title') }}
+        </div>
+
+        <i18n-t class="success-message text-grey-6 text-center font14" keypath="provider.payments.withdraw_success_message" tag="div">
+          <template #deposited>
+            <strong class="text-text">{{ $t('provider.payments.withdraw_success_deposited') }}</strong>
+          </template>
+
+          <template #deadline>
+            <strong class="text-text">{{ $t('provider.payments.withdraw_success_deadline') }}</strong>
+          </template>
+        </i18n-t>
+      </div>
+    </div>
+  </q-dialog>
+</template>
+
+<script setup>
+import { useDialogPluginComponent } from 'quasar';
+
+import LogoDiariaSaque from 'src/assets/diarinho-saque.svg';
+
+defineEmits([...useDialogPluginComponent.emits]);
+
+const { dialogRef, onDialogHide, onDialogOK } = useDialogPluginComponent();
+</script>
+
+<style scoped>
+.success-mascot {
+  width: 260px;
+  max-width: 75vw;
+  height: auto;
+}
+
+.success-title {
+  font-size: 22px;
+  line-height: 1.3;
+  max-width: 280px;
+}
+
+.success-message {
+  line-height: 1.6;
+  max-width: 280px;
+}
+</style>

src/i18n/locales/en.json

@@ -506,7 +506,14 @@
       "withdraw_confirm_message": "Do you want to confirm the withdrawal to your account?",
       "withdraw_gross_amount_label": "Available balance",
       "withdraw_fee_label": "Transfer fee",
-      "withdraw_net_amount_label": "Amount you will receive"
+      "withdraw_net_amount_label": "Amount you will receive",
+      "withdraw_success_header": "Withdrawal",
+      "withdraw_success_title": "Withdrawal requested and processing..",
+      "withdraw_success_message": "The amount {deposited} into the registered account {deadline}.",
+      "withdraw_success_deposited": "will be deposited",
+      "withdraw_success_deadline": "within two business days",
+      "withdrawal_in_progress_title": "Withdrawal in progress",
+      "withdrawal_in_progress_desc": "Withdrawal of {amount} requested on {date} is being processed."
     }
   },
   "business": {

src/i18n/locales/es.json

@@ -506,7 +506,14 @@
       "withdraw_confirm_message": "¿Desea confirmar el retiro a su cuenta?",
       "withdraw_gross_amount_label": "Saldo disponible",
       "withdraw_fee_label": "Tarifa de transferencia",
-      "withdraw_net_amount_label": "Monto que recibirá"
+      "withdraw_net_amount_label": "Monto que recibirá",
+      "withdraw_success_header": "Retiro",
+      "withdraw_success_title": "Retiro solicitado en procesamiento..",
+      "withdraw_success_message": "El monto {deposited} en la cuenta registrada {deadline}.",
+      "withdraw_success_deposited": "será depositado",
+      "withdraw_success_deadline": "en hasta dos días hábiles",
+      "withdrawal_in_progress_title": "Retiro en curso",
+      "withdrawal_in_progress_desc": "Retiro de {amount} solicitado el {date} está en procesamiento."
     }
   },
   "business": {

src/i18n/locales/pt.json

@@ -509,7 +509,14 @@
       "withdraw_confirm_message": "Deseja confirmar o saque para sua conta?",
       "withdraw_gross_amount_label": "Saldo disponível",
       "withdraw_fee_label": "Taxa de transferência",
-      "withdraw_net_amount_label": "Valor que você receberá"
+      "withdraw_net_amount_label": "Valor que você receberá",
+      "withdraw_success_header": "Saque",
+      "withdraw_success_title": "Saque solicitado em processamento..",
+      "withdraw_success_message": "O valor {deposited} na conta cadastrada {deadline}.",
+      "withdraw_success_deposited": "será depositado",
+      "withdraw_success_deadline": "em até dois dias úteis",
+      "withdrawal_in_progress_title": "Saque em andamento",
+      "withdrawal_in_progress_desc": "Saque de {amount} solicitado em {date} está em processamento."
     }
   },
   "business": {

src/pages/payments/PaymentsPage.vue

@@ -139,6 +139,39 @@
       </q-card>
     </div>
 
+    <div v-if="withdrawalInProgress" class="q-mx-md q-mt-sm">
+      <q-card
+        class="balance-card withdrawal-progress-card bg-surface"
+        flat
+      >
+        <q-card-section class="row items-center no-wrap q-pa-md">
+          <q-icon
+            class="q-mr-sm"
+            color="primary"
+            name="mdi-bank-transfer-out"
+            size="26px"
+          />
+
+          <div class="col">
+            <div class="text-primary font12 fontbold">
+              {{ $t("provider.payments.withdrawal_in_progress_title") }}
+            </div>
+
+            <div class="text-grey-6 font12 q-mt-xs">
+              {{
+                $t("provider.payments.withdrawal_in_progress_desc", {
+                  amount: formatCurrency(parseAmount(withdrawalInProgress.net_amount)),
+                  date: formatIsoDate(withdrawalInProgress.created_at),
+                })
+              }}
+            </div>
+          </div>
+
+          <q-spinner-dots color="primary" size="24px" />
+        </q-card-section>
+      </q-card>
+    </div>
+
     <div class="q-mx-md q-mt-md">
       <q-card
         class="balance-card bg-secondary shadow-card"
@@ -286,6 +319,7 @@ import { avatarColors, formatCurrency } from "src/helpers/utils";
 import {
   getBalance,
   getWithdrawalFees,
+  getWithdrawals,
   requestWithdrawal,
 } from "src/api/providerWithdrawal";
 
@@ -296,6 +330,7 @@ import { useQuasar } from "quasar";
 
 import MovimentacoesDialog from "src/components/payments/MovimentacoesDialog.vue";
 import WithdrawConfirmDialog from "src/components/payments/WithdrawConfirmDialog.vue";
+import WithdrawSuccessDialog from "src/components/payments/WithdrawSuccessDialog.vue";
 
 const $q = useQuasar();
 
@@ -309,6 +344,8 @@ const withdrawLoading  = ref(false);
 const saldoDisponivel = ref(0);
 const saldoALiberar   = ref(0);
 
+const withdrawalInProgress = ref(null);
+
 const paymentTransferFeeAmount = ref(3.67);
 
 const services = ref([]);
@@ -341,6 +378,7 @@ const canWithdraw = computed(
   () =>
     saldoDisponivel.value > 0 &&
     withdrawalNetAmount.value > 0 &&
+    !withdrawalInProgress.value &&
     !withdrawLoading.value,
 );
 
@@ -367,16 +405,24 @@ const periodDays = {
   year: 365,
 };
 
+const withdrawalInProgressStatuses = [
+  "pending_transfer",
+  "processing",
+];
+
 const loadData = async () => {
   servicesLoading.value = true;
 
   try {
-    const [balance, splits, fees] = await Promise.all([
+    const [balance, splits, fees, withdrawals] = await Promise.all([
       getBalance(),
       getPaymentSplits(),
       loadWithdrawalFees(),
+      loadWithdrawals(),
     ]);
 
+    withdrawalInProgress.value = findWithdrawalInProgress(withdrawals);
+
     const paymentSplits = splits || [];
 
     const availableFromSplits = sumSplits(
@@ -436,6 +482,19 @@ const loadData = async () => {
   }
 };
 
+const loadWithdrawals = async () => {
+  try {
+    return await getWithdrawals();
+  } catch {
+    return [];
+  }
+};
+
+const findWithdrawalInProgress = (withdrawals) =>
+  (withdrawals || []).find((withdrawal) =>
+    withdrawalInProgressStatuses.includes(withdrawal.status),
+  ) ?? null;
+
 const loadWithdrawalFees = async () => {
   try {
     return await getWithdrawalFees();
@@ -474,6 +533,14 @@ const onSacar = () => {
       });
 
       saldoDisponivel.value = 0;
+
+      withdrawalInProgress.value = findWithdrawalInProgress(
+        await loadWithdrawals(),
+      );
+
+      $q.dialog({
+        component: WithdrawSuccessDialog,
+      });
     } catch (error) {
       $q.notify({
         type: "negative",
@@ -697,6 +764,10 @@ onMounted(loadData);
   border-radius: 8px !important;
 }
 
+.withdrawal-progress-card {
+  border: 1px dashed var(--q-primary);
+}
+
 .text-name {
   max-width: 130px;
   overflow: hidden;