sfp_front_vue_diarista_prestador/src/components/payments/WithdrawConfirmDialog.vue

<template>
  <q-dialog ref="dialogRef" @hide="onDialogHide">
    <q-card class="withdraw-card bg-surface" :flat="false">
      <div class="row justify-end q-pt-sm q-pr-sm">
        <q-btn flat round dense icon="close" color="grey-6" size="sm" @click="onDialogCancel" />
      </div>

      <q-card-section class="column items-center q-pt-xs q-pb-sm q-px-lg">
        <q-icon name="mdi-bank-transfer-out" color="secondary" size="42px" class="q-mb-sm" />
        <div class="text-text text-center font16 fontbold q-mb-xs">
          {{ $t('provider.payments.withdraw_confirm_title') }}
        </div>
        <div class="withdraw-amount font28 fontbold text-secondary text-center">
          {{ formatCurrency(amount) }}
        </div>
        <div class="text-grey-6 text-center font12 q-mt-xs">
          {{ $t('provider.payments.withdraw_confirm_message', { amount: formatCurrency(amount) }) }}
        </div>
      </q-card-section>

      <q-card-section class="row q-gutter-x-sm q-pt-xs q-pb-lg q-px-lg">
        <q-btn
          unelevated
          rounded
          no-caps
          color="grey-4"
          text-color="grey-8"
          class="col"
          :label="$t('provider.payments.anticipation_confirm_cancel')"
          @click="onDialogCancel"
        />
        <q-btn
          unelevated
          rounded
          no-caps
          color="secondary"
          class="col"
          :label="$t('provider.payments.anticipation_confirm_ok')"
          @click="onDialogOK()"
        />
      </q-card-section>
    </q-card>
  </q-dialog>
</template>

<script setup>
import { useDialogPluginComponent } from 'quasar';
import { formatCurrency } from 'src/helpers/utils';

defineProps({
  amount: {
    type: Number,
    required: true,
  },
});

defineEmits([...useDialogPluginComponent.emits]);
const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } = useDialogPluginComponent();
</script>

<style scoped>
.withdraw-card {
  width: 320px;
  max-width: 96vw;
  border-radius: 20px !important;
}

.withdraw-amount {
  line-height: 1.2;
}
</style>