Feat/contact (#72)

* Change intl twig dependencies (#71) * change intl twig dependance * add intl twig dependance * add contact page * better inputs spacing by default * fix footer * fix footer * fix error display --------- Co-authored-by: Alexandre Nozière <[email protected]>
thelia · Jan 21, 2025 · 9ee58bb · 9ee58bb
1 parent 769f69c
commit 9ee58bb
Show file tree

Hide file tree

Showing 12 changed files with 185 additions and 121 deletions.
diff --git a/components/Layout/Footer/Footer.html.twig b/components/Layout/Footer/Footer.html.twig
@@ -15,18 +15,18 @@
 	<div class='md:grid {{footerContainerClasses}}'>
 		{% if withNewsletter %}
 			<div class='Footer-newsletter mb-[50px] md:mb-0 md:pt-[50px] md:pl-[50px] lg:pt-[100px]'>
-				<div class='font-semibold paragraph-1'>Newsletter</div>
+				<div class='font-semibold paragraph-1'>{{'Newsletter'|trans}}</div>
 				<div class='mb-4 paragraph-5'>Suivez nos dernières actualités & promotions</div>
 				{% include '@components/Molecules/Button/Button.html.twig' with {text: 'Je m\'inscris', type: 'primary', isFill: true, classes: "Button--large w-full md:w-auto"} %}
       </div>
     {% endif %}
     <div class='Footer-store-infos mb-[30px] md:py-[50px] md:pl-[40px] md:mb-0 lg:pt-[100px] lg:pb-[90px] {{footerStoreInfosClasses}}'>
-      <div class='mb-1 font-semibold paragraph-1'>Nom de l'entreprise</div>
+      <div class='mb-1 font-semibold paragraph-1'>{{attr('config', 'store_name')}}</div>
       <div class='Footer-store-infos-address'>
-        <div class='paragraph-5'>Adresse première ligne <br> Complément d'adresse <br> 00000 Ville-sur-Fleuve <br> PAYS</div>
-        <div class='my-4 paragraph-5'>Tel. +33 00 00 00 00 00</div>
+        <div class='paragraph-5'>{{attr('config', 'store_address1')}} <br> {{attr('config', 'store_address2')}} <br> {{attr('config', 'store_zipcode')}} {{attr('config', 'store_city')}} <br> {{attr('config', 'store_country')}}</div>
+        <div class='my-4 paragraph-5'>Tel. {{attr('config', 'store_phone')}}</div>
       </div>
-      {% include '@components/Molecules/Button/Button.html.twig' with {text: 'Contactez nous', type: 'primary', icon_right: "email", isFill: true, classes: "w-full md:w-auto Button--secondary Button--large"} %}
+      {% include '@components/Molecules/Button/Button.html.twig' with {href:"/contact", text: 'Contact Us'|trans, type: 'primary', icon_right: "email", isFill: true, classes: "w-full md:w-auto Button--secondary Button--large"} %}
     </div>
     <ul class='lg:pt-[100px] {{footerLinksClasses}}'>
       {% set footerLinkClass = 'underline hover:no-underline focus:no-underline hover:opacity-75 focus:opacity-75' %}
@@ -60,6 +60,6 @@
       </div>
     </div>
 
-    <div class='text-grey indication indication-small'>© OpenStudio - {{ 'now' | date('Y') }}</div>
+    <div class='text-grey indication indication-small'>© <a href="https://www.openstudio.fr/">OpenStudio</a> - {{ 'now' | date('Y') }}</div>
   </div>
 </footer>
diff --git a/components/Molecules/Fields/FieldInput/FieldInput.html.twig b/components/Molecules/Fields/FieldInput/FieldInput.html.twig
@@ -18,7 +18,7 @@
 {% set unit = unit|default(null) %}
 {% set verificationCode = verificationCode|default(false) %}
 
-{% if error %}
+{% if errors %}
 	{% set classes = classes ~ ' FieldInput--error' %}
 {% endif %}
 {% if success %}
@@ -80,7 +80,9 @@
       </div>
     {% endif %}
 	</div>
-	{% if error %}
-		<span class='FieldInput-error'>{{ error }}</span>
+	{% if errors %}
+    {% for error in errors %}
+      <span class='FieldInput-error'>{{ error }}</span>
+    {% endfor %}
 	{% endif %}
 </div>
diff --git a/components/Molecules/Fields/FieldInput/fieldInput.css b/components/Molecules/Fields/FieldInput/fieldInput.css
@@ -187,3 +187,15 @@
     }
   }
 }
+
+.FieldInput + .FieldInput {
+  @apply mt-6;
+}
+
+[class*='gap-'] > .FieldInput + .FieldInput {
+  margin-top: inherit;
+}
+
+.FieldInput + .SnackBar--error {
+  @apply mt-3 mb-6;
+}
diff --git a/components/Molecules/Fields/FieldTextArea/FieldTextArea.css b/components/Molecules/Fields/FieldTextArea/FieldTextArea.css
@@ -0,0 +1,5 @@
+.FieldInput--textArea {
+  .FieldInput-input {
+    min-height: 200px;
+  }
+}
diff --git a/components/Molecules/Fields/FieldTextArea/FieldTextArea.html.twig b/components/Molecules/Fields/FieldTextArea/FieldTextArea.html.twig
@@ -0,0 +1,51 @@
+{% set classes = classes|default('') %}
+{% set success = success|default(false) %}
+{% set size = size|default(false) %}
+{% set disabled = disabled|default(false) %}
+{% set optional = optional|default(false) %}
+{% set tooltip = tooltip|default(false) %}
+{% set name = name|default('') %}
+{% set label = label|default('') %}
+{% set value = value|default(null) %}
+{% set placeholder = placeholder|default(null) %}
+{% set button = button|default(null) %}
+{% set errors = errors|default(null) %}
+
+
+{% if errors %}
+	{% set classes = classes ~ ' FieldInput--error' %}
+{% endif %}
+{% if success %}
+	{% set classes = classes ~ ' FieldInput--success' %}
+{% endif %}
+
+
+<div class='FieldInput FieldInput--textArea{{ classes }}' {% if disabled %} disabled {% endif %}>
+	<div class='FieldInput-header'>
+		<label for='{{ name }}' class='FieldInput-label'>
+			{{ label }}
+			{% if optional and label %}
+				({{'optional' | trans}})
+			{% endif %}
+		</label>
+		{% if tooltip %}
+			{% include '../../Tooltip/Tooltip.html.twig' with {tooltip: tooltip, position: 'bottom'} %}
+		{% endif %}
+	</div>
+	<div class='FieldInput-blockInput'>
+		<textarea
+      class='FieldInput-input'
+      name='{{ name }}'
+      id='{{ name }}'
+      {% if value %} value='{{ value }}' {% endif %}
+      {% if not optional %} required {% endif %}
+      {% if placeholder %} placeholder='{{ placeholder }}{% if optional and not label %} ({{'optional' | trans}}){% endif %}' {% endif %}
+    ></textarea>
+	</div>
+
+	{% if errors %}
+    {% for error in errors %}
+      <span class='FieldInput-error'>{{ error }}</span>
+    {% endfor %}
+	{% endif %}
+</div>
diff --git a/contact-success.html.twig b/contact-success.html.twig
@@ -0,0 +1,13 @@
+{% extends 'contact.html.twig' %}
+
+{% block contactFormTitle %}
+  <div class="my-12 mb-12 text-center">
+      <h2 class="mb-4 h2">{{ 'Thanks !' | trans }}</h2>
+  </div>
+{% endblock %}
+
+{% block contactForm %}
+    <div class="my-12 mb-12 text-center">
+        <p class="text-lg font-medium">{{'Thanks for your message, we will contact as soon as possible.'|trans}}</p>
+    </div>
+{% endblock %}
diff --git a/contact.html.twig b/contact.html.twig
@@ -0,0 +1,28 @@
+{% extends 'base.html.twig' %}
+
+{% block title %}{{ 'Contact Us' | trans }}{% endblock %}
+
+{% block body %}
+  <div class="max-w-[400px] mx-auto w-full px-[25px] pt-[30px] pb-[54px] lg:px-0 lg:pt-[50px] lg:pb-[120px] ">
+    {% set form = getForm("thelia.front.contact") %}
+
+    {% block contactFormTitle %}
+      <h2 class="mb-4 h2">{{ 'Contact Us' | trans }}</h2>
+    {% endblock %}
+
+    {% block contactForm %}
+
+      {{ form_start(form) }}
+
+      {{form_rest(form)}}
+
+      {{ form_errors(form) }}
+
+
+      {% include "@components/Molecules/Button/Button.html.twig" with { text: 'Send' | trans, classes: "w-max mt-6", type: "submit" } %}
+
+      {{ form_end(form) }}
+    {% endblock %}
+
+  </div>
+{% endblock %}
diff --git a/form/fields.html.twig b/form/fields.html.twig
@@ -4,36 +4,59 @@
 	{% set widget_attr = form.vars.attr %}
 	{% set label = label is defined ? label : form.vars.label %}
 	{% set placeholder = placeholder is defined ? placeholder : form.vars.placeholder is defined ? form.vars.placeholder : null %}
+
+  {% set errors = [] %}
+
+  {% for error in form.vars.errors %}
+    {% set errors = errors + [error.message] %}
+  {% endfor %}
+
 	{% if type == 'checkbox' %}
 		{% elseif type == 'filter' %}
 			{% include '@formTwig/fields/filter.html.twig' with {choices: form.vars.choices, title: form.vars.label, values: widget_value} %}
+      {{ form_errors(form) }}
 		{% elseif type == 'sort' %}
 			{% include '@formTwig/fields/sort.html.twig' with {choices: form.vars.choices, title: form.vars.label, values: widget_value} %}
+      {{ form_errors(form) }}
 		{% elseif type == 'choice' %}
 			{% include '@formTwig/fields/choice.html.twig' with {choices: form.vars.choices, title: form.vars.label, values: widget_value } %}
+      {{ form_errors(form) }}
 		{% elseif type == 'text' or type == 'email' %}
 			{% include "@components/Molecules/Fields/FieldInput/FieldInput.html.twig" with {
       label:  label,
       name: form.vars.full_name,
       type: type,
       placeholder: placeholder,
       required: form.vars.required,
+      errors: errors
     } %}
+
 		{% elseif type == 'password' %}
 			{% include "@components/Molecules/Fields/FieldInput/FieldInput.html.twig" with {
       label: label,
       name: form.vars.full_name,
       type: type,
       placeholder: placeholder,
       required: form.vars.required,
+      errors: errors
     } %}
 			{% include "@components/Molecules/PasswordControls/PasswordControls.html.twig" %}
+    {% elseif type == 'textarea'  %}
+      {% include "@components/Molecules/Fields/FieldTextArea/FieldTextArea.html.twig" with {
+        label: label,
+        name: form.vars.full_name,
+        placeholder: placeholder,
+        required: form.vars.required,
+        errors: errors
+      } %}
 		{%  else %}
 			{# Appel du rendu par défaut si vous n'avez pas besoin de personnaliser davantage #}
 			{{ block('form_widget_simple') }}
+      {{ form_errors(form) }}
 	{% endif %}
-	{# Erreurs #}
-	{{ form_errors(form) }}
+
+
+
 
 {% endblock %}
 
@@ -43,6 +66,7 @@
 	{% endfor %}
 {% endblock %}
 
+
 {% block fieldset_row %}
 	{% set class = form.vars.attr.class|default('') %}
 	{% set label = form.vars.label|default(null) %}