pleno-vue/src/components/forms/auth/CustomerRegistrationForm.vue

<script setup>
import { onBeforeUnmount, reactive, ref } from "vue";
import axios from "axios";
import { API_URL } from "@/config.js";
import { getError, parseError, removeError } from "@/components/request/HandleGlobalError.vue";
import LoadButtonWhileAwait from "@/components/request/LoadButtonWhileAwait.vue";
import { economicEanPayloadValue, normalizeEconomicEan } from "@/services/economicCustomerIdentifiers.js";

const customerFormData = reactive({
  cvr: null,
  contactEmail: null,
  contactPhone: null,
  ean: null
});

const deliverSuccess = ref(false);
let deliverTimeoutId;

const submitCustomer = async () => {
  removeError("authRegisterCvr");
  try {
    const payload = {
      cvr: customerFormData.cvr,
      invoiceEmail: customerFormData.contactEmail,
      contactEmail: customerFormData.contactEmail,
      contactPhone: customerFormData.contactPhone,
      companyPhone: customerFormData.contactPhone
    };
    const ean = economicEanPayloadValue(customerFormData.ean);
    if (ean !== undefined) {
      payload.ean = ean;
    }

    await axios.post(API_URL + "/auth/register/cvr", payload);

    customerFormData.contactPhone = null;
    customerFormData.contactEmail = null;
    customerFormData.cvr = null;
    customerFormData.ean = null;

    deliverSuccess.value = true;
    deliverTimeoutId = setTimeout(() => {
      deliverSuccess.value = false;
    }, 3500);
  } catch (error) {
    parseError(error, "authRegisterCvr");
  }
};

onBeforeUnmount(() => {
  if (deliverTimeoutId) {
    clearTimeout(deliverTimeoutId);
  }
});
</script>

<template>
  <form class="truckwash-form" @submit.prevent="() => {}" method="post">
    <div class="form-field">
      <label for="customer_cvr">{{ $t("customer_creation.customer.cvr_label") }}</label>
      <input
        id="customer_cvr"
        v-model="customerFormData.cvr"
        type="text"
        inputmode="numeric"
        autocomplete="organization"
        placeholder="12345678"
      >
    </div>

    <div class="form-field">
      <label for="customer_ean">{{ $t("customer_creation.customer.ean_label") }}</label>
      <input
        id="customer_ean"
        :value="customerFormData.ean"
        type="text"
        inputmode="numeric"
        maxlength="13"
        autocomplete="off"
        placeholder="5790001234567"
        @input="customerFormData.ean = normalizeEconomicEan($event.target.value)"
      >
    </div>

    <div class="form-field">
      <label for="email">{{ $t("customer_creation.customer.email_label") }}</label>
      <input id="email" v-model="customerFormData.contactEmail" type="email" name="email" autocomplete="email">
    </div>

    <div class="form-field">
      <label for="customer_phone">{{ $t("customer_creation.customer.phone_label") }}</label>
      <input
        id="customer_phone"
        v-model="customerFormData.contactPhone"
        type="text"
        name="phone"
        inputmode="tel"
        autocomplete="tel"
        placeholder="12345678"
      >
    </div>

    <p v-if="getError('authRegisterCvr')" id="customer_creation_alert_error" class="help is-danger">
      {{ getError("authRegisterCvr") }}
    </p>

    <p v-if="deliverSuccess" id="customer_creation_alert_success" class="help is-success">
      {{ $t("customer_creation.customer.success_message") }}
    </p>

    <LoadButtonWhileAwait
      id="customer-register-button"
      class="truckwash-submit"
      :disabled="!customerFormData.cvr || !customerFormData.contactPhone || !customerFormData.contactEmail"
      :loadFunction="submitCustomer"
    >
      {{ $t("customer_creation.customer.submit") }}
    </LoadButtonWhileAwait>
    <slot name="additionalButtons"></slot>
  </form>
</template>

<style scoped>
.truckwash-form {
  border: 1.5px solid #333;
  padding: 20px;
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background-color: #fff;
  position: relative;
  margin-top: 35px;
  height: max-content;
}

.form-field {
  display: grid;
}

.form-field label {
  color: #13324c;
}

input {
  height: 44px;
  padding: 0 12px;
  border: 1.5px solid #333;
  border-radius: 8px;
  margin-top: 4px;
  color: #13324c;
}

.truckwash-submit {
  height: 48px;
  border-radius: 8px;
  border: none;
  background: #13324c;
  color: #fff;
  cursor: pointer;
}
</style>