sfp_vue_franchisor_ginastica_cerebro/src/pages/financial/AsaasIntegrationPage.vue

<template>
  <div>
    <DefaultHeaderPage title="Integração Asaas" />

    <div class="q-pa-md">
      <q-card
        bordered
        class="q-pa-md"
        flat
        style="max-width: 720px"
      >
        <div class="row items-center no-wrap q-mb-xs">
          <q-icon
            class="q-mr-sm"
            color="primary"
            name="mdi-cash-multiple"
            size="sm"
          />

          <div class="text-subtitle1 text-weight-medium">
            Asaas — Conta da Franqueadora
          </div>

          <q-space />

          <q-badge
            class="q-px-sm q-py-xs"
            :color="account.asaas_configured ? 'positive' : 'grey-6'"
            :label="
              account.asaas_configured ? 'Configurada' : 'Não configurada'
            "
          />
        </div>

        <div class="text-body2 text-grey-7 q-mb-md">
          Informe aqui a chave da API da conta Asaas da franqueadora. Ela é
          usada para emitir as cobranças do TBR das unidades. Você pode trocá-la
          a qualquer momento — sem depender do suporte. Enquanto não houver
          chave, o sistema usa a configuração padrão do ambiente.
        </div>

        <DefaultForm ref="formRef" @submit="onSave">
          <DefaultPasswordInput
            v-model="form.asaas_api_key"
            v-model:error="validationErrors.asaas_api_key"
            autocomplete="off"
            outlined
            :error-message="validationErrors.asaas_api_key"
            :label="
              account.asaas_configured
                ? 'Nova chave da API (deixe em branco para manter a atual)'
                : 'Chave da API do Asaas'
            "
            :placeholder="account.asaas_api_key_masked || ''"
            :rules="[inputRules.max(500)]"
          />

          <div
            class="row justify-end items-center q-mt-md"
            style="gap: 12px"
          >
            <q-btn
              v-if="canEdit && account.asaas_configured"
              color="negative"
              flat
              label="Remover chave"
              no-caps
              :disable="loading"
              @click="onRemove"
            />

            <q-btn
              v-if="canEdit"
              color="primary"
              label="Salvar"
              no-caps
              type="submit"
              unelevated
              :disable="!form.asaas_api_key"
              :loading="loading"
            />
          </div>
        </DefaultForm>
      </q-card>
    </div>
  </div>
</template>

<script setup>
import {
  getCompanyPaymentAccount,
  saveCompanyPaymentAccount,
} from "src/api/company_payment_account";

import { onMounted, ref } from "vue";
import { permissionStore } from "src/stores/permission";
import { useForm } from "src/composables/useForm";
import { useInputRules } from "src/composables/useInputRules";
import { useScroll } from "src/composables/useScroll";
import { useSubmitHandler } from "src/composables/useSubmitHandler";

import DefaultHeaderPage from "src/components/layout/DefaultHeaderPage.vue";
import DefaultPasswordInput from "src/components/defaults/DefaultPasswordInput.vue";

const { inputRules } = useInputRules();
const { scrollToComponent } = useScroll();

const { form, getUpdatedFields } = useForm({
  asaas_api_key: "",
});

const formRef = ref(null);

const { loading, validationErrors, execute } = useSubmitHandler({
  formRef,
  scrollFn: scrollToComponent,
});

const account = ref({
  asaas_api_key_masked: null,
  asaas_configured: false,
  status: "pending",
});

const canEdit = permissionStore().getAccess("franchisor_financial", "edit");

const defaultAccount = () => ({
  asaas_api_key_masked: null,
  asaas_configured: false,
  status: "pending",
});

const fetchData = async () => {
  try {
    const data = await getCompanyPaymentAccount();

    account.value = data ?? defaultAccount();
  } catch (error) {
    console.error(error);
  }
};

const onRemove = () => {
  persist("");
};

const onSave = () => {
  if (!form.asaas_api_key) return;

  persist(form.asaas_api_key);
};

const persist = async (value) => {
  await execute(async () => {
    account.value = await saveCompanyPaymentAccount(
      value === "" ? { asaas_api_key: "" } : getUpdatedFields.value,
    );

    form.asaas_api_key = "";
  });
};

onMounted(fetchData);
</script>