Merge pull request #15 from FosterCommerce/change-to-address-format

change to address format
FosterCommerce · Aug 20, 2024 · eee15af · eee15af
2 parents 6e01862 + caf73c0
commit eee15af
Show file tree

Hide file tree

Showing 8 changed files with 62 additions and 81 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/src/formatters/CheckoutAddressFormatter.php b/src/formatters/CheckoutAddressFormatter.php
@@ -30,6 +30,6 @@ public function format(AddressInterface $address, array $options = []): string
         $addressLines[] = $address->postalCode;
         $addressLines[] = $address->getCountry()->getName();
 
-        return ($address->fullName ? $address->fullName . '<br />' : '') . implode(' / ', array_filter($addressLines));
+        return implode(' / ', array_filter($addressLines));
     }
 }
diff --git a/src/templates/.DS_Store b/src/templates/.DS_Store
diff --git a/src/templates/_components/.DS_Store b/src/templates/_components/.DS_Store
diff --git a/src/templates/_components/app/address-fields.twig b/src/templates/_components/app/address-fields.twig
@@ -140,7 +140,7 @@
 				required
 			>
 				<option value="" disabled>{{ 'Select'|t('foster-checkout') }}</option>
-				<option v-cloak v-for="(region, key) in regions[countryCode]" :value="key" :selected="key === administrativeArea" {{ address.administrativeArea == '${key}' ? ' selected' : ''}}>
+				<option v-cloak v-for="(region, key) in regions[countryCode]" :value="key" :selected="key === administrativeArea">
 					${region}
 				</option>
 			</select>

diff --git a/src/templates/_components/app/formatted-address.twig b/src/templates/_components/app/formatted-address.twig
@@ -9,7 +9,10 @@
       addressService.getSubdivisionRepository(),
     ]
   ) %}
-  {{ address|address({ }, customFormatter) }}
+  <p>
+    <span class="font-bold block">{{ address.fullName }}</span>
+    <span class="block">{{ address|address({ }, customFormatter) }}</span>
+  </p>
 {% else %}
-No address to display
+  <p>No address to display</p>
 {% endif %}
diff --git a/src/templates/_components/app/steps-completed.twig b/src/templates/_components/app/steps-completed.twig
@@ -36,9 +36,7 @@
 					</a>
 				</dt>
 				<dd class="mt-1 sm:flex sm:justify-between sm:items-start sm:gap-4 sm:mt-0">
-					<p class="text-black">
-             {% include'foster-checkout/_components/app/formatted-address' with { 'address': cart.shippingAddress}  %}
-					</p>
+          {% include'foster-checkout/_components/app/formatted-address' with { 'address': cart.shippingAddress}  %}
 					<a class="hidden sm:inline-block sm:underline sm:text-[var(--brandColor)]" href="{{ craft.fostercheckout.getPath('checkout') ~ '/address' }}">
 						{{ 'Edit'|t('foster-checkout') }}
 					</a>

diff --git a/src/templates/checkout/shipping.twig b/src/templates/checkout/shipping.twig
@@ -1,21 +1,42 @@
 {% extends 'foster-checkout/_layouts/default' %}
 
 {% block body %}
+{% set availableShippingMethodOptions = cart.availableShippingMethodOptions ?? null %}
+{% set onlyMethod = null %}
+{% if cart is defined %}
+  {# If there's only 1 shipping method available then set it on the cart #}
+  {% if cart.availableShippingMethodOptions|length == 1 %}
+    {% for handle, option in cart.availableShippingMethodOptions %}
+      {% if option.price == 0 %}
+          {% redirect(craft.fostercheckout.getPath('checkout') ~ '/payment') %}
+      {% else %}
+        {% set onlyMethod = handle %}
+      {% endif %}
+    {% endfor %}
+  {% elseif cart.availableShippingMethodOptions|length == 1 %}
+      {# If there are no available shipping methods, then just redirect to the payment page #}
+      {% redirect(craft.fostercheckout.getPath('checkout') ~ '/payment') %}
+  {% endif %}
+{% endif %}
+
+
 	<div class="mt-10 pb-48 lg:mt-20 lg:pb-32">
 
 		<h1 class="mb-12 font-medium text-3xl">{{ 'Checkout'|t('foster-checkout') }}</h1>
 
 		<div class="grid grid-cols-1 gap-16 lg:grid-cols-[1fr_380px] lg:gap-6 xl:grid-cols-[1fr_32.03125%] xl:gap-8">
-
-			<main v-scope="{ shippingMethodId: 1 }" class="pb-8 border-b border-gray-300 lg:pb-0 lg:border-b-0">
-
+			<main v-scope="{ shippingMethodHandle: '{{ cart.shippingMethod.handle ?? onlyMethod }}' }" class="pb-8 border-b border-gray-300 lg:pb-0 lg:border-b-0">
 				<div class="grid grid-cols-1 gap-6 lg:gap-8">
 
 					{% include 'foster-checkout/_components/app/steps-completed' with {
 						step: 'shipping'
 					} %}
 
-					<form action="">
+					<form method="post">
+
+            {{ csrfInput() }}
+            {{ actionInput('commerce/cart/update-cart') }}
+            {{ redirectInput(craft.fostercheckout.getPath('checkout') ~ '/payment') }}
 
 						<div class="border border-gray-250 rounded-lg overflow-hidden">
 
@@ -25,76 +46,35 @@
 
 							<div class="xl:p-6">
 
-								<div class="xl:border xl:border-gray-250 xl:rounded-lg xl:overflow-hidden">
-
-									<div class="p-4" :class="{ 'bg-gray-100': parseInt(shippingMethodId) === 1 }">
-										<div class="flex justify-between items-center gap-4 radio">
-											<input
-												v-model="shippingMethodId"
-												id="method_1"
-												name="shippingMethodId"
-												type="radio"
-												class="sr-only"
-												value="1"
-											/>
-											<label
-												for="method_1"
-												class="inline-flex justify-start items-center gap-4 cursor-pointer"
-											>
-												<span class="block">
-													<span class="block">Free Shipping</span>
-													<span class="block mt-1 text-sm text-gray-500">Ships within 1 business day, arrives in 3-4 days</span>
-												</span>
-											</label>
-											<span class="block font-semibold">$0.00</span>
-										</div>
-									</div>
-
-									<div class="p-4 border-t border-gray-250" :class="{ 'bg-gray-100': parseInt(shippingMethodId) === 2 }">
-										<div class="flex justify-between items-center gap-4 radio">
-											<input
-												v-model="shippingMethodId"
-												id="method_2"
-												name="shippingMethodId"
-												type="radio"
-												class="sr-only"
-												value="2"
-											/>
-											<label
-												for="method_2"
-												class="inline-flex justify-start items-center gap-4 cursor-pointer"
-											>
-												<span class="block">
-													<span class="block">Expedited (Faster)</span>
-													<span class="block mt-1 text-sm text-gray-500">Ships within 1 business day, arrives in 2-3 days</span>
-												</span>
-											</label>
-											<span class="block font-semibold">$15.00</span>
-										</div>
-									</div>
-
-									<div class="p-4 border-t border-gray-250" :class="{ 'bg-gray-100': parseInt(shippingMethodId) === 3 }">
-										<div class="flex justify-between items-center gap-4 radio">
-											<input
-												v-model="shippingMethodId"
-												id="method_3"
-												name="shippingMethodId"
-												type="radio"
-												class="sr-only"
-												value="3"
-											/>
-											<label
-												for="method_3"
-												class="inline-flex justify-start items-center gap-4 cursor-pointer"
-											>
-												<span class="block">
-													<span class="block">Urgent (Fastest)</span>
-													<span class="block mt-1 text-sm text-gray-500">Ships within 1 business day, arrives in 1-2 days</span>
-												</span>
-											</label>
-											<span class="block font-semibold">$19.00</span>
-										</div>
-									</div>
+								<div class="xl:border xl:border-b-0 xl:border-gray-250 xl:rounded-lg xl:overflow-hidden">
+                  {% if availableShippingMethodOptions|length %}
+                   {% for handle, method in availableShippingMethodOptions %}
+                    <div class="p-4 border-b border-gray-250" :class="{ 'bg-gray-100': shippingMethodHandle === '{{ method.handle }}' }">
+
+                      <div class="flex justify-between items-center gap-4 radio">
+
+                        <input
+                          v-model="shippingMethodHandle"
+                          id="method_{{ handle }}"
+                          name="shippingMethodHandle"
+                          type="radio"
+                          class="sr-only"
+                          value="{{ handle }}"
+                        />
+                        <label
+                          for="method_{{ handle }}"
+                          class="inline-flex justify-start items-center gap-4 cursor-pointer"
+                        >
+                          <span class="block">
+                            <span class="block">{{ method.name }}</span>
+                            <span class="block mt-1 text-sm text-gray-500">{{ craft.commerce.shippingMethods.getMatchingShippingRule(cart, method).getDescription() }}</span>
+                          </span>
+                        </label>
+                        <span class="block font-semibold">{{ method.getPrice()|commerceCurrency(cart.currency) }}</span>
+                      </div>
+                    </div>
+                  {% endfor %}
+                {% endif %}
 
 								</div>