|
|
@@ -0,0 +1,209 @@
|
|
|
+<template>
|
|
|
+ <q-dialog ref="dialogRef" @hide="onDialogHide">
|
|
|
+ <q-card class="q-dialog-plugin" style="width: 700px; max-width: 90vw">
|
|
|
+ <DefaultDialogHeader :title="title" @close="onDialogCancel" />
|
|
|
+ <q-form ref="formRef" @submit="onOKClick">
|
|
|
+ <q-card-section class="row q-col-gutter-sm">
|
|
|
+ <q-select
|
|
|
+ v-model="form.account_type"
|
|
|
+ :options="accountTypeOptions"
|
|
|
+ :label="$t('provider_payment_methods.account_type')"
|
|
|
+ :rules="[inputRules.required]"
|
|
|
+ :error="!!serverErrors?.account_type"
|
|
|
+ :error-message="serverErrors?.account_type"
|
|
|
+ emit-value
|
|
|
+ map-options
|
|
|
+ class="col-12"
|
|
|
+ @update:model-value="onAccountTypeChange"
|
|
|
+ />
|
|
|
+
|
|
|
+ <template v-if="form.account_type === 'pix'">
|
|
|
+ <q-input
|
|
|
+ v-model="form.pix_key"
|
|
|
+ :label="$t('provider_payment_methods.pix_key')"
|
|
|
+ :rules="[inputRules.required]"
|
|
|
+ :error="!!serverErrors?.pix_key"
|
|
|
+ :error-message="serverErrors?.pix_key"
|
|
|
+ class="col-12"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <template v-if="form.account_type === 'bank_account'">
|
|
|
+ <q-select
|
|
|
+ v-model="form.bank_account_type"
|
|
|
+ :options="bankAccountTypeOptions"
|
|
|
+ :label="$t('provider_payment_methods.bank_account_type')"
|
|
|
+ :rules="[inputRules.required]"
|
|
|
+ :error="!!serverErrors?.bank_account_type"
|
|
|
+ :error-message="serverErrors?.bank_account_type"
|
|
|
+ emit-value
|
|
|
+ map-options
|
|
|
+ class="col-12"
|
|
|
+ />
|
|
|
+
|
|
|
+ <q-input
|
|
|
+ v-model="form.agency"
|
|
|
+ :label="$t('provider_payment_methods.agency')"
|
|
|
+ :rules="[inputRules.required]"
|
|
|
+ :error="!!serverErrors?.agency"
|
|
|
+ :error-message="serverErrors?.agency"
|
|
|
+ class="col-md-6 col-12"
|
|
|
+ />
|
|
|
+
|
|
|
+ <q-input
|
|
|
+ v-model="form.account"
|
|
|
+ :label="$t('provider_payment_methods.account')"
|
|
|
+ :rules="[inputRules.required]"
|
|
|
+ :error="!!serverErrors?.account"
|
|
|
+ :error-message="serverErrors?.account"
|
|
|
+ class="col-md-4 col-12"
|
|
|
+ />
|
|
|
+
|
|
|
+ <q-input
|
|
|
+ v-model="form.digit"
|
|
|
+ :label="$t('provider_payment_methods.digit')"
|
|
|
+ :rules="[inputRules.required]"
|
|
|
+ :error="!!serverErrors?.digit"
|
|
|
+ :error-message="serverErrors?.digit"
|
|
|
+ class="col-md-2 col-12"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ </q-card-section>
|
|
|
+
|
|
|
+ <q-card-actions align="right">
|
|
|
+ <q-btn
|
|
|
+ flat
|
|
|
+ :label="$t('common.actions.cancel')"
|
|
|
+ color="negative"
|
|
|
+ @click="onDialogCancel"
|
|
|
+ />
|
|
|
+ <q-btn
|
|
|
+ type="submit"
|
|
|
+ :label="$t('common.actions.save')"
|
|
|
+ :loading="loading"
|
|
|
+ color="primary"
|
|
|
+ :disable="!hasUpdatedFields"
|
|
|
+ />
|
|
|
+ </q-card-actions>
|
|
|
+ </q-form>
|
|
|
+ </q-card>
|
|
|
+ </q-dialog>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import { ref, computed, onMounted } from 'vue'
|
|
|
+import { useDialogPluginComponent } from 'quasar'
|
|
|
+import { useI18n } from 'vue-i18n'
|
|
|
+import {
|
|
|
+ createProviderPaymentMethod,
|
|
|
+ updateProviderPaymentMethod
|
|
|
+} from 'src/api/providerPaymentMethod'
|
|
|
+import DefaultDialogHeader from 'src/components/defaults/DefaultDialogHeader.vue'
|
|
|
+import { useInputRules } from "src/composables/useInputRules";
|
|
|
+import { useFormUpdateTracker } from "src/composables/useFormUpdateTracker";
|
|
|
+import { useSubmitHandler } from "src/composables/useSubmitHandler";
|
|
|
+
|
|
|
+
|
|
|
+const { inputRules } = useInputRules();
|
|
|
+
|
|
|
+const props = defineProps({
|
|
|
+ paymentMethod: {
|
|
|
+ type: Object,
|
|
|
+ default: null
|
|
|
+ },
|
|
|
+ providerId: {
|
|
|
+ type: Number,
|
|
|
+ required: true
|
|
|
+ },
|
|
|
+ title: {
|
|
|
+ type: Function,
|
|
|
+ default: () => ''
|
|
|
+ }
|
|
|
+})
|
|
|
+
|
|
|
+const { t } = useI18n()
|
|
|
+const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } = useDialogPluginComponent()
|
|
|
+
|
|
|
+
|
|
|
+defineEmits([...useDialogPluginComponent.emits])
|
|
|
+
|
|
|
+const formRef = ref(null);
|
|
|
+
|
|
|
+const accountTypeOptions = computed(() => [
|
|
|
+ {
|
|
|
+ label: t('provider_payment_methods.account_types.pix'),
|
|
|
+ value: 'pix'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: t('provider_payment_methods.account_types.bank_account'),
|
|
|
+ value: 'bank_account'
|
|
|
+ }
|
|
|
+])
|
|
|
+
|
|
|
+const bankAccountTypeOptions = computed(() => [
|
|
|
+ {
|
|
|
+ label: t('provider_payment_methods.bank_account_types.checking'),
|
|
|
+ value: 'checking'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: t('provider_payment_methods.bank_account_types.savings'),
|
|
|
+ value: 'savings'
|
|
|
+ }
|
|
|
+]);
|
|
|
+
|
|
|
+const { form, getUpdatedFields, hasUpdatedFields } = useFormUpdateTracker({
|
|
|
+ provider_id: props.providerId,
|
|
|
+ account_type: props.paymentMethod ? props.paymentMethod.account_type : null,
|
|
|
+ pix_key: props.paymentMethod ? props.paymentMethod.pix_key : null,
|
|
|
+ bank_account_type: props.paymentMethod ? props.paymentMethod.bank_account_type : null,
|
|
|
+ agency: props.paymentMethod ? props.paymentMethod.agency : null,
|
|
|
+ account: props.paymentMethod ? props.paymentMethod.account : null,
|
|
|
+ digit: props.paymentMethod ? props.paymentMethod.digit : null
|
|
|
+});
|
|
|
+
|
|
|
+const {
|
|
|
+ loading,
|
|
|
+ serverErrors,
|
|
|
+ execute: submitForm,
|
|
|
+} = useSubmitHandler({
|
|
|
+ onSuccess: () => onDialogOK(true),
|
|
|
+ formRef: formRef,
|
|
|
+});
|
|
|
+
|
|
|
+const onAccountTypeChange = () => {
|
|
|
+ if (form.account_type === 'pix') {
|
|
|
+ form.bank_account_type = null
|
|
|
+ form.agency = null
|
|
|
+ form.account = null
|
|
|
+ form.digit = null
|
|
|
+ } else if (form.account_type === 'bank_account') {
|
|
|
+ form.pix_key = null
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+const onOKClick = async () => {
|
|
|
+ const data = {
|
|
|
+ ...form,
|
|
|
+ };
|
|
|
+
|
|
|
+ if(props.paymentMethod) {
|
|
|
+ await submitForm(() => updateProviderPaymentMethod(getUpdatedFields.value, props.paymentMethod.id));
|
|
|
+ } else {
|
|
|
+ await submitForm(() => createProviderPaymentMethod(data));
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ if (props.paymentMethod) {
|
|
|
+ form.value = {
|
|
|
+ provider_id: props.providerId,
|
|
|
+ account_type: props.paymentMethod.account_type,
|
|
|
+ pix_key: props.paymentMethod.pix_key,
|
|
|
+ bank_account_type: props.paymentMethod.bank_account_type,
|
|
|
+ agency: props.paymentMethod.agency,
|
|
|
+ account: props.paymentMethod.account,
|
|
|
+ digit: props.paymentMethod.digit
|
|
|
+ }
|
|
|
+ }
|
|
|
+})
|
|
|
+</script>
|