payment.vue

<template>
    <div>
        <ValidationObserver
            ref="formBusinesPix"
            tag="form"
            @submit.stop.prevent="save()"
        >
            <div class="grid gap-10">
                <PaymentPixForm
                    ref="businessPixForm"
                    :business="business"
                    :pix="businessPix"
                />
            </div>

            <div class="pt-10">
                <PageDivider />

                <TWAlert
                    v-if="!!response.message"
                    :variant="response.variant"
                    dismissible
                >
                    <span v-html="response.message" />
                </TWAlert>

                <div class="flex justify-end">
                    <TWButton
                        variant="naked"
                        :to="{ name: 'index' }"
                    >
                        Cancelar
                    </TWButton>

                    <TWButton
                        type="submit"
                        variant="primary"
                        :busy="spinner.update_form_basic"
                    >
                        Salvar alterações
                    </TWButton>
                </div>
            </div>
        </ValidationObserver>
    </div>
</template>

<script>
    import { ValidationObserver } from 'vee-validate';
    import { mapActions } from 'vuex';
    import { messages } from '@/utils/messages';
    import PaymentPixForm from '@/components/Payment/PaymentPixForm.vue';
    import PageDivider from '@/components/Utils/PageDivider';

    export default {
        components: {
            PaymentPixForm,
            ValidationObserver,
            PageDivider,
        },

        async asyncData({ store }) {
            const business = await store.dispatch('business/getBusinesses')
                .then(response => response.data[0]);

            const businessPix = await store.dispatch('businessPix/getBusinessPix', business.id)
                .then(response => response.data);

            return {
                business,
                businessPix,
            };
        },

        data() {
            return {
                spinner: {
                    submit: false,
                },
                response: {
                    variant: '',
                    message: '',
                },
            };
        },

        methods: {
            ...mapActions('businessPix', {
                $_updateBusiness: 'updateBusinessPix',
                $_storeBusiness: 'storeBusinessPix',
            }),

            async save() {
                const validator = await this.$refs.formBusinesPix.validate();
                if (!validator) {
                    return false;
                }

                const businessPixForm = this.$refs.businessPixForm.local_pix;

                const payload = {
                    psp: businessPixForm.psp,
                    pix_key: businessPixForm.pix_key,
                    client_id: businessPixForm.client_id,
                    client_secret: businessPixForm.client_secret,
                };

                this.spinner.submit = true;

                if (this.businessPix.id) {
                    this.updateBusinessPix(payload);
                } else {
                    this.storeBusinessPix(payload);
                }
            },

            updateBusinessPix(payload) {
                this.$_updateBusiness({ businessId: this.business.id, payload }).then(() => {
                    this.response.variant = 'success';
                    this.response.message = 'Dados alterado com sucesso';
                }).catch((e) => {
                    const errorCode = e?.response?.data?.error ?? 'ServerErrorException';
                    this.response.variant = 'danger';
                    this.response.message = messages[errorCode];
                }).finally(() => {
                    this.spinner.submit = false;
                });
            },

            storeBusinessPix(payload) {
                this.$_storeBusiness({ businessId: this.business.id, payload }).then(() => {
                    this.response.variant = 'success';
                    this.response.message = 'Dados salvos com sucesso';
                }).catch((e) => {
                    const errorCode = e?.response?.data?.error ?? 'ServerErrorException';
                    this.response.variant = 'danger';
                    this.response.message = messages[errorCode];
                }).finally(() => {
                    this.spinner.submit = false;
                });
            },
        },
    };
</script>