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>
          <span class="line" /> Veuillez remplir le formulaire ci-dessous
        </h4>

        <i>Les champs dont le nom est suivi d'un 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"
              variant="outlined"
            />
          </v-col>

          <v-col cols="12" md="6">
            <v-text-field
              v-model="contactRequest.concernedProduct"
              label="Produit concerné (facultatif)"
            />
          </v-col>
        </v-row>

        <h6>
          Votre message
        </h6>

        <!-- Message  -->
        <v-row class="mb-8">
          <v-col cols="12">
            <v-textarea
              v-model="contactRequest.message"
              :rules="[validateNonEmptyMessage, validateMessageLength]"
              label="Votre message*"
              required
              maxlength="400"
            />
            <span class="remaining-cars-notice">{{ leftCars }} caractères restants</span>
          </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."
        />

        <div class="d-flex flex-row justify-center">
          <!-- @see https://github.com/hCaptcha/vue-hcaptcha -->
          <LayoutCaptcha/>
        </div>

        <!-- Submit Button -->
        <div class="d-flex flex-row justify-center my-10">
          <v-btn
            type="submit"
            variant="outlined"
            :height="54"
            :width="180"
            class="submit-btn"
          >
            Envoyer
          </v-btn>
        </div>
      </v-container>

      <div class="legal">
        Les données recueillies par Opentalent sont utilisées pour le traitement de votre demande et pour vous informer sur nos offres.
        Elles sont destinées aux services Opentalent et à ses sous-traitants pour l’exécution des contrats. Conformément à la loi
        "Informatique et Libertés du 6 Janvier 1978", vous disposez d’un droit d’accès, de modifications, de rectification et de suppression
        des données vous concernant. Pour toute demande, adressez-vous à : Opentalent, 217 rue Raoul Follereau, 74300 CLUSES,
        opentalent.fr s’engage à la confidentialité et à la protection de vos données.
      </div>
    </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 }))

const maxMessageLength = 2000

const leftCars: ComputedRef<number> = computed(() =>
  maxMessageLength - (contactRequest.message ? contactRequest.message.length : 0)
)

// --- 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 <= maxMessageLength) ||
  "Le message ne doit pas dépasser " + maxMessageLength + " 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
 *
 * @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 {
    display: flex;
    flex-direction: row;
    font-size: 40px;
    line-height: 95px;
    margin-bottom: 1rem;
    align-items: center;
    font-weight: 100;

    .line {
      display: block;
      height: 1px;
      width: 64px;
      min-width: 64px;
      border-top: solid 1px var(--on-neutral-color);
      margin-right: 18px;
    }
  }

  h6 {
    margin-top: 32px;
    font-size: 16px;
    margin-bottom: 1rem;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.1em;
  }

  .v-select {
    .v-field {
      border-radius: 0;
    }
  }

  .remaining-cars-notice {
    font-size: 13px;
    font-weight: 550;
    opacity: 0.6;
  }

  .submit-btn {
    border-radius: 0;
    font-weight: 600;
  }

  .legal {
    opacity: 0.7;
  }
}

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

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