site_logiciels/components/Contact/Form.vue

<template>
  <LayoutContainer>
    <div id="anchor" />

    <v-form
      v-if="!contactRequestSent"
      ref="form"
      validate-on="submit lazy"
      @submit.prevent="submit"
    >
      <v-container>
        <h4>
          Veuillez remplir le formulaire ci-dessous
        </h4>

        <i>Les champs dont le nom est suivi d'une astérisque (*) sont obligatoires</i>

        <h6>
          Vos coordonnées
        </h6>

        <!-- Gender selection -->
        <v-row>
          <v-col cols="12">
            <v-radio-group
              v-model="contactRequest.gender"
              row
              mandatory
              inline
            >
              <v-radio label="Madame" value="Madame" />
              <v-radio label="Monsieur" value="Monsieur" />
            </v-radio-group>
          </v-col>
        </v-row>

        <!-- Name and Surname -->
        <v-row>
          <v-col cols="12" md="6">
            <v-text-field
              v-model="contactRequest.name"
              :rules="[validateName]"
              label="Nom*"
              required
            />
          </v-col>

          <v-col cols="12" md="6">
            <v-text-field
              v-model="contactRequest.surname"
              :rules="[validateSurname]"
              label="Prénom*"
              required
            />
          </v-col>
        </v-row>

        <!-- Postal code and city -->
        <v-row>
          <v-col cols="12" md="6">
            <v-text-field
              v-model="contactRequest.postalCode"
              label="Code postal*"
              :rules="[validatePostalCode]"
            />
          </v-col>

          <v-col cols="12" md="6">
            <v-text-field
              v-model="contactRequest.city"
              label="Ville"
            />
          </v-col>
        </v-row>

        <!-- Email and phone on the same line -->
        <v-row>
          <v-col cols="12" md="6">
            <v-text-field
              v-model="contactRequest.email"
              :rules="[validateEmail]"
              label="Email*"
              required
              type="email"
            />
          </v-col>

          <v-col cols="12" md="6">
            <v-text-field
              v-model="contactRequest.phone"
              :rules="[validatePhone]"
              label="Téléphone*"
              type="tel"
            />
          </v-col>
        </v-row>

        <!-- Structure name  -->
        <v-row>
          <v-col cols="12">
            <v-text-field
              v-model="contactRequest.structureName"
              :rules="[validateStructureName]"
              label="Nom de la structure*"
              required
            />
          </v-col>
        </v-row>

        <h6>
          Votre demande concerne
        </h6>

        <!-- Request type and product concerned  -->
        <v-row>
          <v-col cols="12" md="6">
            <v-select
              v-model="contactRequest.requestType"
              :items="requestTypes"
              item-value="id"
              item-title="label"
              label="Votre demande concerne *"
              outlined
              dense
            />
          </v-col>

          <v-col cols="12" md="6">
            <v-text-field
              v-model="contactRequest.concernedProduct"
              label="Le produit concerné"
              outlined
              dense
            />
          </v-col>
        </v-row>

        <h6>
          Votre message
        </h6>

        <!-- Message  -->
        <v-row>
          <v-col cols="12">
            <v-textarea
              v-model="contactRequest.message"
              :rules="[validateNonEmptyMessage, validateMessageLength]"
              label="Votre message*"
              required
              outlined
              dense
              maxlength="400"
            />
          </v-col>
        </v-row>

        <!-- Policy and  checkboxes -->
        <v-checkbox
          v-model="contactRequest.privacyPolicyAccepted"
          :rules="[(v) => !!v || 'Vous devez accepter la politique de confidentialité']"
          label="J'ai pris connaissance de la politique de confidentialité et j'accepte le traitement de mes données personnelles par Opentalent."
        />

        <v-checkbox
          v-model="contactRequest.newsletterSubscription"
          label="Je souhaite recevoir des communications d'Opentalent par email (promotions, informations logiciel…). Je pourrai me désinscrire à tout moment."
        />

        <!-- @see https://github.com/hCaptcha/vue-hcaptcha -->
        <LayoutCaptcha/>

        <!-- Submit Button -->
        <v-row class="mt-12">
          <v-col cols="12">
            <v-btn type="submit">
              Envoyer
            </v-btn>
          </v-col>
        </v-row>
      </v-container>
    </v-form>

    <div v-else class="confirmation-message d-flex flex-row justify-center">
      <v-card>
        <v-icon icon="fas fa-check mr-1"/>
        Votre demande de contact a bien été enregistrée, nous reviendrons vers vous dès que possible.
      </v-card>
    </div>
  </LayoutContainer>
</template>

<script setup lang="ts">
import ContactRequest from "~/models/Maestro/ContactRequest";
import { useEntityManager } from "~/composables/data/useEntityManager";
import { useRouter } from "vue-router";

const route = useRoute();
const router = useRouter()
const { em } = useEntityManager()

const form: Ref<any | null> = ref(null)

const requestTypes: Array<{id: string, label: string}> = [
  { id: "CONTACT_REQUEST_INFORMATION", label: "Demande d'information"},
  { id: "CONTACT_REQUEST_ESTIMATE", label: "Demande de devis"},
  { id: "CONTACT_REQUEST_DEMO", label: "Demande de démonstration"},
  { id: "CONTACT_REQUEST_OPTION", label: "Demande d'option supplémentaire"},
  { id: "CONTACT_REQUEST_OTHER", label: "Autre"}
]

const defaultRequestType = route.query.request ?? 'CONTACT_REQUEST_INFORMATION'

//@ts-ignore
const contactRequest: ContactRequest = reactive(em.newInstance(ContactRequest, { requestType: defaultRequestType }))

// --- Validation ---
const validateName = (name: string | null) => !!name || "Le nom est obligatoire";

const validateSurname = (surname: string | null) => !!surname || "Le prénom est obligatoire";

const validatePostalCode = (postalCode: string | null) =>
  (!!postalCode && /^\d{5}$/.test(postalCode)) || "Le code postal doit être valide";

const validateEmail = (email: string | null) =>
  (!!email && /.+@.+\..+/.test(email)) || "L'adresse e-mail doit être valide";

const validatePhone = (email: string | null) =>
  (!!email && /^((\+|00)33\s?|0)[1-7]([\s.]?\d{2}){4}$/.test(email)) || "Le numéro de téléphone doit être valide";

const validateStructureName = (structureName: string | null) =>
  !!structureName || "Le nom de la structure est requis";

const validateNonEmptyMessage = (message: string | null) =>
  (!!message && message.length > 0) ||
  "Le message ne peut pas être vide";

const validateMessageLength = (message: string | null) =>
  (!!message && message.length <= 400) ||
  "Le message ne doit pas dépasser 400 caractères";


const contactRequestSent: Ref<boolean> = ref(false);

/**
 * Submits the contact form.
 *
 * This function validates the form and sets the value of a variable to indicate whether the form submission was successful.
 *
 * @function
 * @name submitForm
 *
 * @returns {void}
 */
const submit = async (): Promise<void> => {
  const { valid } = await form.value.validate()

  if (!valid) {
    console.log("Validation failed!")
    contactRequestSent.value = false
    return
  }

  await em.persist(ContactRequest, contactRequest)

  contactRequestSent.value = true;

  // Défile vers le début de page pour afficher le message de confirmation
  setTimeout(
    () => router.push({ path: '', hash: '#anchor' }),
    30
  )
};
</script>

<style scoped lang="scss">
.v-form {
  max-width: 1400px;
  margin: 0 auto;

  h4 {
    font-size: 40px;
    line-height: 95px;
    margin-bottom: 1rem;
  }

  h6 {
    margin-top: 32px;
    font-size: 20px;
    margin-bottom: 1rem;
  }
}

.confirmation-message {
  .v-card {
    .v-icon {
      color: green;
    }

    max-width: 1200px;
    padding: 24px;
    margin: 128px 0;
    font-weight: 500;
  }
}
</style>