feat: add qrcode do pix

quasar.config.js

@@ -71,7 +71,7 @@ export default defineConfig((ctx) => {
         WEBSOCKET_API_KEY:
           "7wArC/kl0nTbt4zBu0agw.NXLyjA96I6x1XmBcuokwPqfo3/CIxzqYw.PTthh5eqa08Uf4ubFlOqatpShoz1CRRID9pZReEFvBk3il6E9u",
         GOOGLE_MAPS_API_KEY: process.env.GOOGLE_MAPS_API_KEY ?? "",
-        PAGARME_PUBLIC_KEY: process.env.PAGARME_PUBLIC_KEY ?? "pk_4eEdVPwf0msoGXkr",
+        PAGARME_PUBLIC_KEY: process.env.PAGARME_PUBLIC_KEY ?? "pk_test_1VRWkbvu43Tyk7qG",
       },
       // rawDefine: {}
       // ignorePublicFolder: true,

src/components/dashboard/NextSchedulesDetailsDialog.vue

@@ -153,7 +153,7 @@ onMounted(async () => {
   }
 })
 
-const SERVICE_FEE_RATE = 0.10
+const SERVICE_FEE_RATE = 0.11
 
 const serviceFee = computed(() => {
   const base = parseFloat(props.schedule.total_amount) || 0

src/components/dashboard/ScheduleAcceptedDialog.vue

@@ -89,7 +89,7 @@ const { dialogRef, onDialogHide, onDialogOK } = useDialogPluginComponent()
 
 const $q = useQuasar()
 
-const SERVICE_FEE_RATE = 0.10
+const SERVICE_FEE_RATE = 0.11
 
 const serviceFee = computed(() => Number(props.schedule.total_amount) * SERVICE_FEE_RATE)
 const total = computed(() => Number(props.schedule.total_amount) + serviceFee.value)

src/components/dashboard/SchedulePaymentPixDialog.vue

@@ -44,7 +44,7 @@
         </div>
       </div>
 
-      <div v-else class="col scroll q-px-lg q-pt-lg q-pb-xl column">
+      <div v-else class="pix-payment-content col scroll q-px-lg q-pt-lg q-pb-xl column">
 
         <div class="row items-center justify-between q-mb-sm">
           <span class="pix-label">{{ $t('payment.pix_total') }}</span>
@@ -88,13 +88,14 @@
           @click="copyCode"
         />
 
+        <!--
         <p class="pix-instructions-text q-mb-sm">
           <strong>{{ $t('payment.pix_instructions') }}</strong>
         </p>
         <p class="pix-instructions-text text-grey-6">
           {{ $t('payment.pix_email_note') }}
         </p>
-
+        !-->
       </div>
     </div>
   </q-dialog>
@@ -120,9 +121,10 @@ const payment = ref(null)
 const success = ref(false)
 const processing = ref(true)
 
-const pixTransaction = computed(() => payment.value?.gateway_payload?.charges?.[0]?.last_transaction ?? {})
-const pixCode = computed(() => pixTransaction.value?.qr_code ?? pixTransaction.value?.qr_code_text ?? '')
-const pixQrCodeUrl = computed(() => pixTransaction.value?.qr_code_url ?? '')
+const pixData = computed(() => payment.value?.pix ?? {})
+const pixCode = computed(() => pixData.value?.qr_code ?? '')
+const pixQrCodeUrl = computed(() => pixData.value?.qr_code_url ?? '')
+const pixExpiresAt = computed(() => pixData.value?.expires_at ?? payment.value?.expires_at ?? null)
 
 const copyCode = async () => {
   try {
@@ -145,10 +147,14 @@ const countdown = ref('')
 let timer = null
 
 const updateCountdown = () => {
+  if (pixExpiresAt.value) {
+    totalSeconds.value = Math.max(0, Math.floor((new Date(pixExpiresAt.value).getTime() - Date.now()) / 1000))
+  }
+
   const m = Math.floor(totalSeconds.value / 60)
   const s = totalSeconds.value % 60
   countdown.value = `${m} min, ${String(s).padStart(2, '0')} seg`
-  if (totalSeconds.value > 0) totalSeconds.value--
+  if (!pixExpiresAt.value && totalSeconds.value > 0) totalSeconds.value--
 }
 
 onMounted(async () => {
@@ -157,6 +163,7 @@ onMounted(async () => {
 
   try {
     payment.value = await paySchedule(props.schedule.id, { payment_method: 'pix' })
+    updateCountdown()
   } catch (e) {
     console.error('Erro ao criar pagamento Pix:', e)
     $q.notify({ type: 'negative', message: e?.response?.data?.message ?? 'Erro ao criar pagamento Pix.' })
@@ -212,9 +219,16 @@ onUnmounted(() => {
 }
 
 .pix-instructions-text {
+  align-self: stretch;
   font-size: 13px;
   line-height: 1.5;
   color: #3a3a4a;
+  margin-left: 0;
+  margin-right: 0;
+  max-width: 100%;
+  overflow-wrap: anywhere;
+  text-align: left;
+  width: 100%;
 }
 
 .success-icon-wrapper {