YSHOP2-1372: Add the option to display the states as a drop-down list…

… on the new themes (#174)

## JIRA Ticket

[YSHOP2-1372](https://youcanshop.atlassian.net/browse/YSHOP2-1372)

## QA Steps

-  [ ] `pnpm i`
-  [ ] `pnpm dev`
-  go to settings > payment and add a custom field
- try to add different types of fields 
- then verify that the custom fields it's appear on the theme

![image
(5)](https://github.com/youcan-shop/cod-theme-2/assets/108662497/5a6eecdf-46f3-40eb-a2d3-1615580a24c9)


## Note

Leave empty when you have nothing to say


[YSHOP2-1372]:
https://youcanshop.atlassian.net/browse/YSHOP2-1372?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ

assets/express-checkout.css

@@ -22,6 +22,10 @@
   grid-gap: 14px;
   padding: 16px;
 }
+.express-checkout-fields .dropdown-input {
+  min-width: 100%;
+  padding: 0;
+}
 @media (min-width: 768px) {
   .express-checkout-fields {
     border: unset;

assets/express-checkout.js

@@ -1,6 +1,5 @@
 async function placeOrder() {
   const expressCheckoutForm = document.querySelector('#express-checkout-form');
-
   let fields = Object.fromEntries(new FormData(expressCheckoutForm));
 
   load('#loading__checkout');
@@ -20,37 +19,7 @@ async function placeOrder() {
         redirectToThankyouPage();
       })
       .onValidationErr((err) => {
-        const form = document.querySelector('#express-checkout-form');
-        const formFields = Object.keys(err.meta.fields);
-
-        if (!form || !formFields) return;
-
-        formFields.forEach((field) => {
-          const fieldName = field.indexOf('extra_fields') > -1 ? field.replace('extra_fields.', 'extra_fields[') + ']' : field;
-          const input = form.querySelector(`input[name="${fieldName}"]`);
-          const errorEl = form.querySelector(`.validation-error[data-error="${field}"]`);
-
-          if (input) {
-            input.classList.add('error');
-          }
-
-          if (errorEl) {
-            errorEl.innerHTML = err.meta.fields[field][0];
-          }
-
-          input.addEventListener('input', () => {
-            input.classList.remove('error');
-            errorEl.innerHTML = '';
-          });
-        });
-
-        notify(err.detail, 'error');
-
-        const formTop = form.getBoundingClientRect().top;
-
-        if(!document.querySelector('#yc-sticky-checkout')) {
-          window.scrollBy({ top: formTop - window.innerHeight / 3, behavior: 'smooth' });
-        }
+        displayValidationErrors(err);
       })
       .onSkipShippingStep((data, redirectToShippingPage) => {
         redirectToShippingPage();
@@ -64,3 +33,30 @@ async function placeOrder() {
     stopLoad('#loading__checkout');
   }
 }
+
+function displayValidationErrors(err) {
+  const form = document.querySelector('#express-checkout-form');
+  const errorFields = err.meta.fields;
+
+  if (!form || !errorFields) return;
+
+  form.querySelectorAll('.validation-error').forEach(el => el.textContent = '');
+
+  Object.keys(errorFields).forEach((field) => {
+    const fieldName = field.startsWith('extra_fields') ? `extra_fields[${field.split('.')[1]}]` : field;
+    const formElement = form.querySelector(`[name="${fieldName}"]`);
+    const errorEl = form.querySelector(`.validation-error[data-error-for="${fieldName}"]`);
+
+    if (formElement && errorEl) {
+      formElement.classList.add('error');
+      errorEl.textContent = errorFields[field][0];
+      formElement.addEventListener('input', () => {
+        formElement.classList.remove('error');
+        errorEl.textContent = '';
+      });
+    } else {
+      notify(`Please check the form's structure. ${fieldName}`, 'error');
+    }
+  });
+}
+

assets/main.css

@@ -50,15 +50,15 @@ a.disabled {
   pointer-events: none;
 }
 
-input {
+input, textarea {
   font-weight: 300 !important;
   border: var(--yc-main-border);
 }
-input.error {
+input.error, textarea.error {
   border-color: var(--yc-error-color) !important;
   outline: 1px solid var(--yc-error-color) !important;
 }
-input + .validation-error {
+input + .validation-error, textarea + .validation-error {
   color: var(--yc-error-color) !important;
   font-size: 12px;
   font-weight: 600;

snippets/express-checkout.liquid

@@ -18,14 +18,14 @@
 
   .custom-checkout-{{ checkout_id }},
   .express-checkout-fields {
-    border-color: {{ settings.form_border_colour.hex }};
+    border: 1px solid {{ settings.form_border_colour.hex }};
   }
 
   .custom-checkout-{{ checkout_id }} .express-checkout-fields  {
     grid-gap: {{ settings.inputs_gap }}px;
   }
 
-  .custom-checkout-{{ checkout_id }} input {
+  .custom-checkout-{{ checkout_id }} input, textarea, .select {
     padding: 0 {{ settings.input_padding }}px;
     border-radius: {{ settings.input_border_radius }}px;
     font-size: {{ settings.input_text_size }}px !important;
@@ -40,7 +40,7 @@
     {% endif %}
 
     {% if settings.input_border_color %}
-    border-color: {{ settings.input_border_color.hex }};
+      border: 1px solid {{ settings.input_border_color.hex }};
     {% endif %}
   }
 
@@ -83,32 +83,34 @@
 >
   <div class='express-checkout-fields'>
     <div class='express-checkout-title'>{{ settings.form_title }}</div>
-    {%- for field in checkout.fields %}
-      <div class='express-checkout-field'>
-        <input
-          type='{{ field.type }}'
-          class='w-full'
-          id='{{ field.name }}'
-          {% if field.custom %}
-            name='extra_fields[{{ field.name }}]'
-          {% else %}
-            name='{{ field.name }}'
-          {% endif %}
-          placeholder='{{ field.placeholder }}'
-          {% if field.required %}
-            required
-          {% endif %}
-        >
-        <div
-          class='validation-error'
-          {% if field.custom %}
-            data-error='extra_fields.{{ field.name }}'
-          {% else %}
-            data-error='{{ field.name }}'
-          {% endif %}
-        ></div>
+    {% for field in checkout.fields %}
+      <div class="express-checkout-field">
+        {% case field.type %}
+          {% when 'select' %}
+            <div class='dropdown-input select'>
+              <div class='dropbtn'>
+                <span class='option-name'>Select</span>
+                <ion-icon name='chevron-down-outline' class='dropdown-icon'></ion-icon>
+              </div>
+              <ul class='dropdown-content' name='{{ field.name }}'>
+                {% for option in field.options %}
+                  <li value='{{ option }}'>{{ option }}</li>
+                {% endfor %}
+              </ul>
+            </div>
+          <div class="validation-error" data-error-for="extra_fields[{{ field.name }}]"></div>
+            {% when 'textarea' %}
+              <textarea id='{{ field.name }}' name="extra_fields[{{ field.name }}]" class='w-full' placeholder='{{ field.placeholder }}'></textarea>
+          <div class="validation-error" data-error-for="extra_fields[{{ field.name }}]"></div>
+          {% when 'number' %}
+            <input type="{{ field.type }}" id="{{ field.name }}" name="{{ field.name }}" class="w-full" placeholder="{{ field.placeholder }}">
+            <div class="validation-error" data-error-for="extra_fields[{{ field.name }}]"></div>
+          {% when 'text' %}
+          <input type="{{ field.type }}" id="{{ field.name }}" name="{{ field.name }}" class="w-full" placeholder="{{ field.placeholder }}">
+          <div class="validation-error" data-error-for="{{ field.name }}"></div>
+      {% endcase %}
       </div>
-    {%- endfor %}
+    {% endfor %}
     {% if is_sticky == false %}
       <button
         type='submit'

styles/express-checkout.scss

@@ -25,6 +25,11 @@
   grid-gap: 14px;
   padding: 16px;
 
+  .dropdown-input {
+    min-width: 100%;
+    padding: 0;
+  }
+
   @include breakpoint('md') {
     border: unset;
     background: unset;

styles/main.scss

@@ -52,7 +52,7 @@ a.disabled {
   pointer-events: none;
 }
 
-input {
+input, textarea {
   font-weight: 300 !important;
   border: var(--yc-main-border);