SHOP-1372: [Harmony] Add the option to display the states as a drop-d…

…own list on the new themes (#213)

* add changes from cod-theme to cod-theme-2

* unhinde option

* fix textarea placeholder color not applying

* smh

* fix outline

* fixy

* cleanup

* more cleanup

* even more cleanup

* fix default value not applying

* add missing disabled state to placeholder

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');
@@ -25,21 +24,22 @@ async function placeOrder() {
 
         if (!form || !formFields) return;
 
-        formFields.forEach((field) => {
+        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');
+          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];
           }
 
-          input.addEventListener('input', () => {
-            input.classList.remove('error');
+          formField.addEventListener('formField', () => {
+            formField.classList.remove('error');
             errorEl.innerHTML = '';
           });
         });

assets/main.css

@@ -51,15 +51,15 @@ a.disabled {
   pointer-events: none;
 }
 
-input {
+input, select, textarea {
   font-weight: 300 !important;
   border: var(--yc-main-border);
 }
-input.error {
+input.error, select.error, textarea.error {
   border-color: var(--yc-error-color) !important;
   outline: 1px solid var(--yc-error-color) !important;
 }
-input + .validation-error {
+input + .validation-error, select + .validation-error, textarea + .validation-error {
   color: var(--yc-error-color) !important;
   font-size: 12px;
   font-weight: 600;
@@ -213,7 +213,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;
@@ -222,6 +222,13 @@ input:not([type=radio]) {
   outline: none;
 }
 
+textarea {
+  font-family: var(--yc-font-family);
+  font-weight: 500 !important;
+  min-height: 38px;
+  outline: none;
+}
+
 * {
   box-sizing: border-box;
 }

snippets/express-checkout.liquid

@@ -11,21 +11,22 @@
     #express-checkout-form {
       display: none;
     }
-
   {% endif %}
 
   .custom-checkout-{{ checkout_id }},
   .express-checkout-fields,
   .sticky-form-wrapper {
-    border-color: {{ settings.form_border_colour.hex }};
+    border: 1px solid {{ settings.form_border_colour.hex }};
   }
 
   .custom-checkout-{{ checkout_id }} .express-checkout-fields,
   .sticky-form-wrapper .form-wrapper {
     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;
@@ -39,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 %}
   }
 
@@ -61,11 +62,17 @@
   {% 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 %}
 
+  .custom-checkout-{{ checkout_id }} select,
+  .custom-checkout-{{ checkout_id }} textarea {
+    padding: calc({{ settings.input_padding }}px - 4px);
+  }
+
   .express-checkout-placeholder .express-checkout-button {
     opacity: 0.5;
     cursor: not-allowed;
@@ -80,46 +87,59 @@
 >
   <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 {% if field.default_value == '' %}selected{% endif %}>
+                  {{ field.placeholder }}
+                </option>
+              {% endif %}
+              {% for option in field.options %}
+                <option value='{{ option }}' {% if option == field.default_value %}selected{% endif %}>
+                  {{ 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='express-checkout-button'
-        {% if is_placeholder %} disabled {% endif %}
-        onclick='placeOrder(this)'
-      >
-        <span
-          class='spinner hidden'
-          id='loading__checkout'
-        ></span>
+      <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 %}
+    {% endif %}
   </div>
 </form>
 

styles/main.scss

@@ -52,7 +52,7 @@ a.disabled {
   pointer-events: none;
 }
 
-input {
+input, select, textarea {
   font-weight: 300 !important;
   border: var(--yc-main-border);
 
@@ -219,7 +219,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;
@@ -228,6 +228,13 @@ input:not([type='radio']) {
   outline: none;
 }
 
+textarea {
+  font-family: var(--yc-font-family);
+  font-weight: 500 !important;
+  min-height: 38px;
+  outline: none;
+}
+
 * {
   box-sizing: border-box;
 }