SHOP-1372: [Aura] Add the option to display the states as a drop-down list on the new themes

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,38 @@ async function placeOrder() {
     stopLoad('#loading__checkout');
   }
 }
+
+function displayValidationErrors(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 formField = form.querySelector(`[name="${fieldName}"]`);
+    const errorEl = form.querySelector(`.validation-error[data-error="${fieldName}"]`);
+    if (formField) {
+      console.log(formField);
+      formField.classList.add('error');
+    }
+
+    if (errorEl) {
+      errorEl.innerHTML = err.meta.fields[field][0];
+    }
+
+    formField.addEventListener('formField', () => {
+      formField.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' });
+  }
+}

assets/main.css

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 /* --------------------- */
 /* ----- variables ----- */
 /* -------------------- */
@@ -50,15 +51,15 @@ a.disabled {
   pointer-events: none;
 }
 
-input {
+input, textarea, select {
   font-weight: 300 !important;
   border: var(--yc-main-border);
 }
-input.error {
+input.error, textarea.error, select.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, select + .validation-error {
   color: var(--yc-error-color) !important;
   font-size: 12px;
   font-weight: 600;
@@ -200,7 +201,7 @@ span {
   border: 1px solid #f2f2f2 !important;
 }
 
-input:not([type=radio]) {
+input:not([type=radio]), select {
   transition: box-shadow 100ms ease;
   padding-left: 13px !important;
   padding-right: 13px !important;
@@ -210,6 +211,12 @@ input:not([type=radio]) {
   outline: none;
 }
 
+textarea {
+  font-family: var(--yc-font-family);
+  min-height: 38px;
+  outline: none;
+}
+
 * {
   box-sizing: border-box;
 }

snippets/express-checkout.liquid

@@ -11,19 +11,20 @@
     #express-checkout-form {
       display: none;
     }
-
   {% endif %}
 
   .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  {
+  .custom-checkout-{{ checkout_id }} .express-checkout-fields {
     grid-gap: {{ settings.inputs_gap }}px;
   }
 
-  .custom-checkout-{{ checkout_id }} input {
+  .custom-checkout-{{ checkout_id }} input, 
+  .custom-checkout-{{ checkout_id }} textarea, 
+  .custom-checkout-{{ checkout_id }} select {
     padding: {{ settings.input_padding }}px;
     border-radius: {{ settings.input_border_radius }}px;
     font-size: {{ settings.input_text_size }}px !important;
@@ -37,10 +38,15 @@
     {% endif %}
 
     {% if settings.input_border_color %}
-    border-color: {{ settings.input_border_color.hex }};
+    border: 1px solid {{ settings.input_border_color.hex }};
     {% endif %}
   }
 
+  .custom-checkout-{{ checkout_id }} select,
+  .custom-checkout-{{ checkout_id }} textarea {
+    padding: calc({{ settings.input_padding }}px - 4px);
+  }
+
   .express-checkout-button {
     padding: {{ settings.button_padding }}px;
     border-radius: {{ settings.button_border_radius }}px;
@@ -62,7 +68,8 @@
   {% endif %}
 
   {% if settings.input_placeholder_color %}
-  .custom-checkout-{{ checkout_id }} input::placeholder {
+  .custom-checkout-{{ checkout_id }} input::placeholder,
+  .custom-checkout-{{ checkout_id }} textarea::placeholder {
     color: {{ settings.input_placeholder_color.hex }};
   }
   {% endif %}
@@ -73,52 +80,59 @@
   }
 {% endstyle %}
 
-<form
-  id='express-checkout-form'
+<form id='express-checkout-form'
   class='custom-checkout-{{ checkout_id }} {% if is_placeholder %}express-checkout-placeholder{% endif %}'
-  onsubmit="return false;"
->
+  onsubmit="return false;">
   <div class='express-checkout-fields'>
     <div class='express-checkout-title'>{{ settings.form_title }}</div>
-    {%- for field in checkout.fields %}
+    {% for field in checkout.fields %}
+      {% assign field_name = field.name %}
+      {% if field.custom %}
+        {% assign field_name = "extra_fields[" | append: field.name | append: "]" %}
+      {% endif %}
+
       <div class='express-checkout-field'>
-        <input
-          type='{{ field.type }}'
-          class='w-full'
-          id='{{ field.name }}'
-          {% if field.custom %}
-            name='extra_fields[{{ field.name }}]'
+        {% case field.type %}
+          {% when 'select' %}
+            <select class="w-full" name='{{ field_name }}'>
+              {% if field.placeholder != '' %}
+                <option value='' disabled selected>{{ field.placeholder }}</option>
+              {% endif %}
+              {% for option in field.options %}
+                <option value='{{ option }}'>{{ option }}</option>
+              {% endfor %}
+            </select>
+          {% when 'textarea' %}
+            <textarea 
+              name='{{ field_name }}'
+              id='{{ field.name }}' 
+              class='w-full' 
+              placeholder='{{ field.placeholder }}' 
+              required='{{ field.required }}' min></textarea>
           {% else %}
-            name='{{ field.name }}'
-          {% endif %}
-          placeholder='{{ field.placeholder }}'
-          {% if field.required %}
-            required
-          {% endif %}
-        >
+            <input 
+              name='{{ field_name }}'
+              type='{{ field.type }}' 
+              id='{{ field.name }}' 
+              class='w-full' 
+              placeholder='{{ field.placeholder }}' 
+              required='{{ field.required }}'>
+        {% endcase %}
         <div
           class='validation-error'
           {% if field.custom %}
-            data-error='extra_fields.{{ field.name }}'
+            data-error='extra_fields[{{ field.name }}]'
           {% else %}
             data-error='{{ field.name }}'
           {% endif %}
         ></div>
       </div>
-    {%- endfor %}
+    {% endfor %}
     {% if is_sticky == false %}
-      <button
-        type='submit'
-        class='yc-btn w-full express-checkout-button'
-        {% if is_placeholder %} disabled {% endif %}
-        onclick='placeOrder(this)'
-      >
-        <span
-          class='spinner hidden'
-          id='loading__checkout'
-        ></span>
-        <span>{{ settings.express_checkout_cta }}</span>
-      </button>
+      <button type='submit' class='express-checkout-button' {% if is_placeholder %} disabled {% endif %} onclick='placeOrder(this)'>
+      <span class='spinner hidden' id='loading__checkout'></span>
+      <span>{{ settings.express_checkout_cta }}</span>
+    </button>
       {% endif %}
   </div>
 </form>

styles/main.scss

@@ -52,7 +52,7 @@ a.disabled {
   pointer-events: none;
 }
 
-input {
+input, textarea, select {
   font-weight: 300 !important;
   border: var(--yc-main-border);
 
@@ -207,7 +207,7 @@ span {
   border: 1px solid #f2f2f2 !important;
 }
 
-input:not([type='radio']) {
+input:not([type='radio']), select {
   transition: box-shadow 100ms ease;
   padding-left: 13px !important;
   padding-right: 13px !important;
@@ -217,6 +217,12 @@ input:not([type='radio']) {
   outline: none;
 }
 
+textarea {
+  font-family: var(--yc-font-family);
+  min-height: 38px;
+  outline: none;
+}
+
 * {
   box-sizing: border-box;
 }