site_logiciels/components/Contact/Banner.vue

<template>
  <LayoutContainer>
    <LayoutUITitlePage
      title="Besoin d'aide ?"
      subtitle="Notre équipe est là pour vous. contactez-nous!. "
    />
    <v-row>
      <v-col cols="12" style="position: relative">
        <img
          src="/images/formation/banner.jpg"
          alt="line"
          class="cover-image"
        />
      </v-col>
    </v-row>
    <div class="container-contact">
      <v-form ref="form" v-model="valid" lazy-validation>
        <v-container>
          <h4 class="title-h4">Veuillez remplir le formulaire ci-dessous</h4>

          <h6 class="infos">Vos coordonnées</h6>

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

          <!-- Name and Surname on the same line -->
          <v-row>
            <v-col cols="12" md="6">
              <v-text-field
                v-model="name"
                :rules="nameRules"
                label="Nom*"
                required
              ></v-text-field>
            </v-col>
            <v-col cols="12" md="6">
              <v-text-field
                v-model="surname"
                :rules="surnameRules"
                label="Prénom*"
                required
              ></v-text-field>
            </v-col>
          </v-row>

          <!-- Postal code and city on the same line -->
          <v-row>
            <v-col cols="12" md="6">
              <v-text-field
                v-model="postalCode"
                label="Code postal"
                type="number"
              ></v-text-field>
            </v-col>
            <v-col cols="12" md="6">
              <v-text-field v-model="city" label="Ville"></v-text-field>
            </v-col>
          </v-row>

          <!-- Email and phone on the same line -->
          <v-row>
            <v-col cols="12" md="6">
              <v-text-field
                v-model="email"
                :rules="emailRules"
                label="Email*"
                required
                type="email"
              ></v-text-field>
            </v-col>
            <v-col cols="12" md="6">
              <v-text-field
                v-model="phone"
                label="Téléphone"
                type="tel"
              ></v-text-field>
            </v-col>
          </v-row>

          <!-- Structure name on its own line -->
          <v-row>
            <v-col cols="12">
              <v-text-field
                v-model="structureName"
                :rules="structureNameRules"
                label="Nom de la structure*"
                required
              ></v-text-field>
            </v-col>
          </v-row>
          <h6 class="infos">Votre demande concerne</h6>

          <!-- Request type and product concerned on the same line -->
          <v-row>
            <v-col cols="12" md="6">
              <v-select
                v-model="requestType"
                :items="requestTypes"
                label="Votre demande concerne"
                outlined
                dense
              ></v-select>
            </v-col>
            <v-col cols="12" md="6">
              <v-text-field
                v-model="concernedProduct"
                label="Le produit concerné"
                outlined
                dense
              ></v-text-field>
            </v-col>
          </v-row>
          <h6 class="infos">Votre message</h6>

          <!-- Message on its own line -->
          <v-row>
            <v-col cols="12">
              <v-textarea
                v-model="message"
                :rules="messageRules"
                label="Votre message*"
                required
                outlined
                dense
                maxlength="400"
              ></v-textarea>
            </v-col>
          </v-row>

          <!-- Policy and  checkboxes -->
          <v-row>
            <v-col cols="12">
              <v-checkbox
                v-model="privacyPolicy"
                :rules="[(v) => !!v || 'You must accept the privacy policy']"
                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-col>
          </v-row>

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

          <v-row>
            <v-col cols="12">
              <v-checkbox
                v-model="captchaChecked"
                :rules="[(v) => !!v || 'You must pass the captcha']"
                label="Captcha"
              ></v-checkbox>
            </v-col>
          </v-row>

          <!-- Submit Button -->
          <v-row>
            <v-col cols="12">
              <v-btn :disabled="!valid" @click="submitForm">Envoyer</v-btn>
            </v-col>
          </v-row>
        </v-container>
      </v-form>

      <div v-if="submissionStatus">
        {{ submissionStatus }}
      </div>
    </div>

    <div id="map" style="height: 500px"></div>
  </LayoutContainer>
</template>

<script setup>
import { ref, reactive, computed, toRefs } from "vue";
import { useRoute } from "vue-router";
import { onMounted } from "vue";
import L from "leaflet";
import "leaflet/dist/leaflet.css";

onMounted(() => {
  const map = L.map("map").setView([46.075245, 6.570162], 16);

  L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
    maxZoom: 19,
    attribution: "© OpenStreetMap contributors",
  }).addTo(map);

  const marker = L.marker([46.075245, 6.570162]).addTo(map);
});
const route = useRoute();
const defaultRequestType = route.query.request;
const captchaChecked = ref(false);

const name = ref("");
const surname = ref("");
const email = ref("");
const structureName = ref("");
const message = ref("");
const privacyPolicy = ref(false);
const gender = ref(null);
const postalCode = ref(null);
const city = ref("");
const phone = ref(null);
const concernedProduct = ref("");
const newsletterSubscription = ref(false);
const submissionStatus = ref("");

const validateName = (name) => !!name || "Name is required";
const validateSurname = (surname) => !!surname || "Surname is required";
const validateEmail = (email) =>
  (!!email && /.+@.+\..+/.test(email)) || "E-mail must be valid";
const validateStructureName = (structureName) =>
  !!structureName || "Structure name is required";
const validateMessage = (message) =>
  (!!message && message.length <= 400) ||
  "Message cannot exceed 400 characters";

const valid = computed(() => {
  return (
    validateName(name.value) === true &&
    validateSurname(surname.value) === true &&
    validateEmail(email.value) === true &&
    validateStructureName(structureName.value) === true &&
    validateMessage(message.value) === true &&
    privacyPolicy.value === true &&
    captchaChecked.value === true
  );
});

const requestTypes = [
  "Demande d'information",
  "Demande de devis",
  "Demande de démonstration",
  "Demande d'option supplémentaire",
  "Autre",
];
const requestType = ref(
  defaultRequestType === "demo" ? "Demande de démonstration" : null
);

const formData = reactive({
  gender: null,
  postalCode: null,
  city: "",
  phone: null,
  requestType: null,
  concernedProduct: "",
  newsletterSubscription,
});

// Methods
const submitForm = () => {
  if (valid.value) {
    // Logique d'envoi du formulaire
    submissionStatus.value = "Mail envoyé à contact@opentalent.fr";
  } else {
    console.log("Validation failed!");
    submissionStatus.value = "";
  }
};

const formDataRefs = toRefs(formData);
const formRefs = {
  ...formDataRefs,
  name,
  surname,
  email,
  structureName,
  message,
  privacyPolicy,
  valid,
};
</script>

<style scoped>
#map {
  height: 100%;
  width: 70%;
  margin-left: auto;
  margin-right: auto;
}
.infos {
  font-size: 20px;
  color: #000000;
  margin-bottom: 1rem;
}

.container-contact {
  max-width: 1400px;
  margin: 0 auto;
}
.title-h4 {
  font-size: 40px;
  line-height: 95px;
  color: #000000;
  margin-bottom: 1rem;
  color: rgba(0, 0, 0, 0.3);
}
.image-text {
  position: absolute;
  top: 40px;
  left: 20px;
  font-family: "Barlow";
  color: white;
  font-size: 3rem;
  width: 30rem;
  font-style: italic;
  font-weight: 300;
  line-height: 40px;
}

:deep().subtitle {
  font-size: 1.5rem;
  line-height: 2rem;
  letter-spacing: 0.1rem;
  margin-bottom: 1rem;
  text-transform: uppercase;
}

.formation {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  font-size: 90px;
  line-height: 85px;
  text-align: center;
  color: #000000;
  margin-bottom: 1rem;
}

.menu-container {
  display: flex;
  justify-content: space-around;
  padding: 1rem 10rem;
  background: white;
  color: #bbb8b8;
  font-family: "Barlow";
  font-size: 12px;
  line-height: 16px;
  display: flex;
  align-items: center;
  text-align: center;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.v-chip.active-menu {
  background: black;
  color: white;
}

.cover-image {
  width: 100%;
  height: 15rem;
  object-fit: cover;
  object-position: center 30%;
  margin: 0 auto;
  transform: scaleX(-1);
}
</style>