From d7bc05345a2cf32a4d9f9a9a9a1c27f224b09c23 Mon Sep 17 00:00:00 2001
From: Eihab Khan <143792300+eihabkhan1@users.noreply.github.com>
Date: Mon, 10 Jun 2024 14:13:38 +0100
Subject: [PATCH] SHOP-1372: [Aura] Add the option to display the states as a
 drop-down list on the new themes  (#436)

## JIRA Ticket

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

## QA Steps

- [ ] Go to `/admin/settings/payment`
- [ ] Define a custom field of type "select", make sure it's enabled
- [ ] Make sure you use the "Aura" theme
- [ ] In your storefront, go to a product page
- [ ] Open the express checkout form
- [ ] You should see the custom select field you defined rendered as a
<select> instead of <input>
- [ ] Try to submit the form empty, if you have the field as required
you should see an error (Note: The error might display a cryptic field
name, that is a bug to be fixed in a separate PR)
- [ ] Fill out the form, and click submit.
- [ ] The form should submit and you should be directed to the thank you
page
- [ ] Check your orders in `/admin/orders`, an order should be created

## Note

Leave empty when you have nothing to say


[SHOP-1372]:
https://youcanshop.atlassian.net/browse/SHOP-1372?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ
---
 assets/express-checkout.js       | 18 +++---
 assets/main.css                  | 15 +++--
 snippets/express-checkout.liquid | 94 +++++++++++++++++++-------------
 styles/main.scss                 | 10 +++-
 4 files changed, 84 insertions(+), 53 deletions(-)

diff --git a/assets/express-checkout.js b/assets/express-checkout.js
index c3d12a9d..6b865f97 100644
--- a/assets/express-checkout.js
+++ b/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 = '';
           });
         });
diff --git a/assets/main.css b/assets/main.css
index 2e5f96fc..7ac86b20 100644
--- a/assets/main.css
+++ b/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;
 }
diff --git a/snippets/express-checkout.liquid b/snippets/express-checkout.liquid
index 859b577e..bcb5943e 100644
--- a/snippets/express-checkout.liquid
+++ b/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,63 @@
   }
 {% 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 {% 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='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>
diff --git a/styles/main.scss b/styles/main.scss
index 6c70953b..514090bf 100644
--- a/styles/main.scss
+++ b/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;
 }