templates/Contact/index.html.twig line 1

Open in your IDE?
  1. {% extends "base.html.twig" %}
  3. {% block stylesheets %}
  4.     <style>
  5.         body {
  6.             background-color: #272727;
  7.         }
  9.         .headerImg {
  10.             background-image: url("{{ asset('assets/img/Catalog/HeaderImg.jpeg')}}");
  11.             background-size: cover;
  12.             background-position: center;
  13.             height: 500px;
  14.             position: relative;
  15.         }
  17.         .top-25 {
  18.             top: 250px;
  19.         }
  21.         .btn-send-message {
  22.             background-color: #ffffff;
  23.             border: 1px solid rgb(255, 255, 255, 0.3);
  24.             color: rgb(0, 0, 0, 0.7);
  25.             padding: 0.5rem 2rem;
  26.             text-decoration: none;
  27.         }
  29.         .form-control {
  30.             background-color: transparent;
  31.             border: 1px solid rgb(255, 255, 255, 0.3);
  32.             color: rgb(255, 255, 255, 0.7);
  33.             border-radius: 0;
  34.         }
  36.         .form-control:focus {
  37.             background-color: transparent;
  38.             border: 1px solid rgb(255, 255, 255, 0.7);
  39.             color: rgb(255, 255, 255, 0.7);
  40.             box-shadow: none;
  41.         }
  43.         .form-select {
  44.             background-color: transparent;
  45.             border: 1px solid rgb(255, 255, 255, 0.3);
  46.             color: rgb(255, 255, 255, 0.7);
  47.             border-radius: 0;
  48.         }
  50.         .form-select:focus {
  51.             background-color: transparent;
  52.             border: 1px solid rgb(255, 255, 255, 0.7);
  53.             color: rgb(255, 255, 255, 0.7);
  54.             box-shadow: none;
  55.         }
  57.         option {
  58.             background-color: #040404;
  59.             color: rgb(255, 255, 255, 0.7);
  60.         }
  62.         .title-header {
  63.             font-weight: bold;
  64.             text-transform: uppercase;
  65.             font-size: 50px;
  66.         }
  68.         .subtitle-header {
  69.             font-weight: 200;
  70.             font-size: 25px;
  71.             line-height: 25px;
  72.             display: block;
  73.             margin: 0 auto;
  74.             max-width: 500px;
  75.         }
  76.     </style>
  77. {% endblock %}
  79. {% block body %}
  80. <div id="contact_us_form_vue">
  81.     {# ------------------------------------------ Header ------------------------------------------ #}
  82.     <section class="headerImg">
  83.         <div class="position-absolute top-25 start-50 translate-middle text-center">
  84.             <h1 class="text-white title-header">Contacto</h1>
  85.             <h3 class="text-white subtitle-header">¿Listo para cambiar tu vida? Llena el siguiente formulario y uno de nuestros colaboradores se pondrá en contacto contigo.</h3>
  86.         </div>
  87.     </section>
  88.     {# ------------------------------------------ Header ------------------------------------------ #}
  89.     
  90.     {# ------------------------------------------ Form ------------------------------------------ #}
  91.     <section class="container my-5">
  92.         <div class="row">
  93.             <div class="col-md-12">
  94.                 {# <form> #}
  95.                     <div class="row justify-content-center align-items-center g-2">
  96.                         <div class="col-md-3 mb-3">
  97.                             <label for="name" class="form-label text-white">Nombre *</label>
  98.                             <input placeholder="Nombre" v-model="emailData.name" type="text" class="form-control" id="name" aria-describedby="nameHelp">
  99.                             <span v-if="emailErrors.nameError" class="text-danger">${ emailErrors.nameErrorMessage }</span>
  100.                         </div>
  101.                         <div class="col-md-3 mb-3">
  102.                             <label for="email" class="form-label text-white">Correo electrónico *</label>
  103.                             <input placeholder="Correo electrónico" v-model="emailData.email" type="email" class="form-control" id="email" aria-describedby="emailHelp">
  104.                             <span v-if="emailErrors.emailError" class="text-danger">${ emailErrors.emailErrorMessage }</span>
  105.                         </div>
  106.                     </div>
  107.                     <div class="row justify-content-center align-items-center g-2">
  108.                         <div class="col-md-3 mb-3">
  109.                             <label for="motive" class="form-label text-white">Motivo *</label>
  110.                             <select id="reason-select" class="form-select" aria-label="Selecciona el motivo">
  111.                                 <option selected disabled hidden>Selecciona el motivo</option>
  112.                                 <option value="DOUBTS">Dudas generales</option>
  113.                                 <option value="CONSULT_PRODUCT">Consultar producto</option>
  114.                                 <option value="OTHERS">Otros</option>
  115.                             </select>
  116.                             <span v-if="emailErrors.reasonError" class="text-danger">${ emailErrors.reasonErrorMessage }</span>
  117.                         </div>
  118.                         <div class="col-md-3 mb-3">
  119.                             <label for="email" class="form-label text-white">Estado *</label>
  120.                             <select id="state-select" class="form-select" aria-label="Default select example">
  121.                                 <option selected disabled hidden>Selecciona tu estado</option>
  122.                                 <option value="AGUASCALIENTES">Aguascalientes</option>
  123.                                 <option value="CHIPAS">Chiapas</option>
  124.                                 <option value="CIUDAD DE MEXICO">Ciudad de México</option>
  125.                                 <option value="GUANAJUATO">Guanajuato</option>
  126.                                 <option value="HIDALGO">Hidalgo</option>
  127.                                 <option value="JALISCO">Jalisco</option>
  128.                                 <option value="MEXICO">México</option>
  129.                                 <option value="MORELOS">Morelos</option>
  130.                                 <option value="NUEVO LEON">Nuevo León</option>
  131.                                 <option value="OAXACA">Oaxaca</option>
  132.                                 <option value="PUEBLA">Puebla</option>
  133.                                 <option value="QUERETARO">Querétaro</option>
  134.                                 <option value="TLAXCALA">Tlaxcala</option>
  135.                             </select>
  136.                             <span v-if="emailErrors.stateError" class="text-danger">${ emailErrors.stateErrorMessage }</span>
  137.                         </div>
  138.                     </div>
  139.                     <div class="row justify-content-center align-items-center g-2">
  140.                         <div class="col-md-6 mb-3">
  141.                             <label for="message" class="form-label text-white">Mensaje *</label>
  142.                             <textarea v-model="emailData.message" class="form-control" id="message" rows="3"></textarea>
  143.                             <span v-if="emailErrors.messageError" class="text-danger">${ emailErrors.messageErrorMessage }</span>
  144.                         </div>
  145.                     </div>
  146.                     <div class="row justify-content-center align-items-center g-2">
  147.                         <div class="col-md-3 mb-3 text-center">
  148.                             <button @click="sendEmailContact" id="btn-send-message" class="btn-send-message fw-bolder" 
  149.                                 :disabled="sendingMail">${ sendingMail ? 'Enviando' : 'Enviar' } <i v-if="sendingMail" class="fa-solid fa-spinner fa-spin-pulse"></i></i></button>
  150.                         </div>
  151.                     </div>
  152.                 {# </form> #}
  153.             </div>
  154.         </div>
  155.     </section>
  156. </div>
  157.     {# ------------------------------------------ Form ------------------------------------------ #}
  158. {% endblock %}
  160. {% block javascripts %}
  161. {% if app.environment == 'dev' %}
  162.     <script src="{{ asset('assets/vue/vue.js') }}"></script>
  163. {% else %}
  164.     <script src="{{ asset('assets/vue/vue.min.js') }}"></script>
  165. {% endif %}
  166. <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
  169. <script>
  171.     let contactUsFormVue = new Vue({
  172.         el: '#contact_us_form_vue',
  173.         delimiters: ['${', '}'],
  174.         data: {
  175.             emailData: {
  176.                 name: '',
  177.                 email: '',
  178.                 messsage: '',
  179.                 reason: '',
  180.                 state: ''
  181.             },
  182.             emailErrors: {
  183.                 nameError: false,
  184.                 nameErrorMessage: '',
  185.                 emailError: false,
  186.                 emailErrorMessage: '',
  187.                 messageError: false,
  188.                 messageErrorMessage: '',
  189.                 reasonError: false,
  190.                 reasonErrorMessage: '',
  191.                 stateError: false,
  192.                 stateErrorMessage: ''
  193.             },
  194.             sendingMail: false
  195.         },
  196.         methods: {
  197.             sendEmailContact() {
  198.                 let $this = this;
  200.                 if ($this.validateEmailData()) {
  201.                     $this.sendingMail = true;
  202.                     $.ajax({
  203.                     url: "{{ path('sendContactUsEmail') }}",
  204.                     data: {
  205.                         name: $this.emailData.name,
  206.                         email: $this.emailData.email,
  207.                         message: $this.emailData.message,
  208.                         reason: $('#reason-select').val(),
  209.                         state: $('#state-select').val()
  210.                     },
  211.                     success(response) {
  212.                             if (response.code == 'OK') {
  213.                                 $this.emailErrors.nameError = false;
  214.                                 $this.emailErrors.emailError = false;
  215.                                 $this.emailErrors.messageError = false;
  216.                                 $this.emailErrors.reasonError = false;
  217.                                 $this.emailErrors.stateError = false;
  219.                                 $this.emailData.name = '';
  220.                                 $this.emailData.email = '';
  221.                                 $this.emailData.message = '';
  222.                                 $('#reason-select').val(null).trigger('change');
  223.                                 $('#state-select').val(null).trigger('change');
  225.                                 Swal.fire({
  226.                                     title: 'Correo enviado',
  227.                                     html: 'Se han enviado tus datos a DIALVI, nuestros agentes de soporte se pondran en contacto contigo',
  228.                                     icon: 'success',
  229.                                     showCancelButton: false,
  230.                                     confirmButtonText: 'Entendido'
  231.                                 });
  232.                             } else if (response.code == 'EME') {
  233.                                 Swal.fire({
  234.                                     title: 'Información faltante',
  235.                                     html: 'Hay información requerida que no se ha enviado, revise si los campos fueron llenados correctamente',
  236.                                     icon: 'error',
  237.                                     showCancelButton: false,
  238.                                     confirmButtonText: 'Entendido'
  239.                                 });
  240.                             } else if (response.code == 'NOK') {
  241.                                 Swal.fire({
  242.                                     title: 'Envio fallido',
  243.                                     html: 'No se ha podido enviar la información de contacto, por favor intentelo mas tarde.',
  244.                                     icon: 'error',
  245.                                     showCancelButton: false,
  246.                                     confirmButtonText: 'Entendido'
  247.                                 });
  248.                             }
  249.                         },
  250.                         complete: () => {
  251.                             $this.sendingMail = false;
  252.                         }
  253.                     });
  254.                 }
  255.             },
  256.             validateEmailData() {
  257.                 let validation = true;
  258.                 let $this = this;
  260.                 $this.emailErrors.nameError = false;
  261.                 $this.emailErrors.emailError = false;
  262.                 $this.emailErrors.messageError = false;
  263.                 $this.emailErrors.reasonError = false;
  264.                 $this.emailErrors.stateError = false;
  266.                 if ($this.emailData.name ? $this.emailData.name.trim() == '' : true) {
  267.                     validation = false;
  268.                     $this.emailErrors.nameError = true;
  269.                     $this.emailErrors.nameErrorMessage = 'Ingrese su nombre.';
  270.                 }
  272.                 if ($this.emailData.email ? $this.emailData.email.trim() == '' : true) {
  273.                     validation = false;
  274.                     $this.emailErrors.emailError = true;
  275.                     $this.emailErrors.emailErrorMessage = 'Ingrese su correo electrónico.';
  276.                 }
  278.                 if ($this.emailData.message ? $this.emailData.message.trim() == '' : true) {
  279.                     validation = false;
  280.                     $this.emailErrors.messageError = true;
  281.                     $this.emailErrors.messageErrorMessage = 'Ingrese el mensaje.';
  282.                 }
  284.                 if (!$('#reason-select').val()) {
  285.                     validation = false;
  286.                     $this.emailErrors.reasonError = true;
  287.                     $this.emailErrors.reasonErrorMessage = 'Selecciona la razón de tu correo.';
  288.                 }
  290.                 if (!$('#state-select').val()) {
  291.                     validation = false;
  292.                     $this.emailErrors.stateError = true;
  293.                     $this.emailErrors.stateErrorMessage = 'Selecciona tu estado.';
  294.                 }
  296.                 return validation;
  297.             }
  298.         }
  299.     });
  301. </script>
  303. {% endblock %}