sfp_front_vue_diarista_cliente/src/components/dashboard/SchedulePaymentProcessingDialog.vue

<template>
  <q-dialog ref="dialogRef" persistent maximized transition-show="fade" transition-hide="fade" @hide="onDialogHide">
    <div class="bg-surface full-height column items-center justify-center q-px-xl">

      <template v-if="!success">
        <q-spinner-oval color="primary" size="72px" class="q-mb-lg" />
        <div class="processing-title text-primary text-weight-bold text-center q-mb-sm">
          {{ $t('payment.processing_title') }}
        </div>
        <div class="processing-message text-grey-6 text-center">
          {{ $t('payment.processing_message') }}
        </div>
      </template>

      <template v-else>
        <q-btn
          flat
          round
          icon="mdi-close"
          color="grey-5"
          class="self-end q-mb-md"
          @click="onDialogOK"
        />
        <img
          src="/logo_diaria_branco.svg"
          alt="mascote"
          class="success-mascot q-mb-lg"
          style="display:none"
        />
        <div class="success-icon-wrapper q-mb-lg">
          <q-icon name="mdi-check-circle" size="100px" color="primary" />
        </div>
        <div class="success-title text-primary text-weight-bold text-center q-mb-sm">
          {{ $t('payment.success_title') }}
        </div>
        <i18n-t keypath="payment.success_message" tag="div" class="success-message text-grey-6 text-center">
          <template #nextServices>
            <strong class="text-text">{{ $t('payment.success_next_services') }}</strong>
          </template>
          <template #agenda>
            <strong class="text-text">{{ $t('payment.success_agenda') }}</strong>
          </template>
        </i18n-t>
      </template>

    </div>
  </q-dialog>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useDialogPluginComponent } from 'quasar'
import { updateScheduleStatus } from 'src/api/schedule'

const props = defineProps({
  schedule: { type: Object, required: true },
})

defineEmits([...useDialogPluginComponent.emits])

const { dialogRef, onDialogHide, onDialogOK } = useDialogPluginComponent()

const success = ref(false)

onMounted(async () => {
  await new Promise(resolve => setTimeout(resolve, 4000))
  try {
    await updateScheduleStatus(props.schedule.id, 'paid')
  } catch (e) {
    console.error('Erro ao atualizar status:', e)
  }
  success.value = true
})
</script>

<style scoped lang="scss">
.processing-title {
  font-size: 22px;
  line-height: 1.3;
}

.processing-message {
  font-size: 15px;
  line-height: 1.5;
  max-width: 280px;
}

.success-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

.success-title {
  font-size: 24px;
  line-height: 1.3;
  max-width: 280px;
}

.success-message {
  font-size: 14px;
  line-height: 1.6;
  max-width: 280px;
}
</style>