Merge pull request #16 from FosterCommerce/payment-step-functionality

Payment step functionality and order confirmation page
FosterCommerce · Aug 21, 2024 · ddfedcf · ddfedcf
2 parents eee15af + 70b1746
commit ddfedcf
Show file tree

Hide file tree

Showing 13 changed files with 386 additions and 241 deletions.
diff --git a/src/FosterCheckout.php b/src/FosterCheckout.php
@@ -31,14 +31,14 @@ class FosterCheckout extends Plugin
 
     public bool $hasCpSettings = false;
 
-    public function init()
+    public function init(): void
     {
         parent::init();
 
         Craft::setAlias('@fostercheckout', __DIR__);
 
         // Defer most setup tasks until Craft is fully initialized
-        Craft::$app->onInit(function () {
+        Craft::$app->onInit(function (): void {
             $this->registerComponents();
             $this->attachEventHandlers();
             $this->registerCustomVariables();
@@ -83,7 +83,7 @@ private function attachEventHandlers(): void
         Event::on(
             CraftVariable::class,
             CraftVariable::EVENT_INIT,
-            function (Event $e) {
+            function (Event $e): void {
                 /** @var CraftVariable $variable */
                 $variable = $e->sender;
 
@@ -96,7 +96,7 @@ function (Event $e) {
         Event::on(
             View::class,
             View::EVENT_REGISTER_SITE_TEMPLATE_ROOTS,
-            function (RegisterTemplateRootsEvent $event) {
+            function (RegisterTemplateRootsEvent $event): void {
                 $event->roots['foster-checkout'] = __DIR__ . '/templates';
             }
         );
@@ -105,7 +105,7 @@ function (RegisterTemplateRootsEvent $event) {
         Event::on(
             UrlManager::class,
             UrlManager::EVENT_REGISTER_SITE_URL_RULES,
-            function (RegisterUrlRulesEvent $event) {
+            function (RegisterUrlRulesEvent $event): void {
                 // Get the paths from the settings
                 $paths = $this->checkout->paths();
                 $checkoutPath = $paths['checkout'] ?? 'checkout';

diff --git a/src/formatters/CheckoutAddressFormatter.php b/src/formatters/CheckoutAddressFormatter.php
@@ -14,6 +14,7 @@ public function format(AddressInterface $address, array $options = []): string
         if (property_exists($address, 'firstName')) {
             $address->firstName = null;
         }
+
         if (property_exists($address, 'lastName')) {
             $address->lastName = null;
         }
@@ -30,6 +31,6 @@ public function format(AddressInterface $address, array $options = []): string
         $addressLines[] = $address->postalCode;
         $addressLines[] = $address->getCountry()->getName();
 
-        return implode(' / ', array_filter($addressLines));
+        return implode(', ', array_filter($addressLines));
     }
 }
diff --git a/src/services/Checkout.php b/src/services/Checkout.php
@@ -65,7 +65,7 @@ public function note($page): ?string
 
         $note = null;
 
-        if ($elementHandle and $fieldHandle) {
+        if ($elementHandle && $fieldHandle) {
             $global = GlobalSet::find()->handle($elementHandle)->one() ?? null;
             $entry = Entry::find()->section($elementHandle)->one() ?? null;
             $element = $global ?? $entry;
@@ -79,7 +79,7 @@ public function note($page): ?string
                     } else {
                         $note = null;
                     }
-                } catch (InvalidFieldException $e) {
+                } catch (InvalidFieldException) {
                     $note = null;
                 }
             }
@@ -130,13 +130,13 @@ public function lineItemImage(LineItem $lineItem): ?Asset
         if ($fieldInfo['level'] === 'variant') {
             try {
                 $image = $variant->getFieldValue($fieldInfo['handle'])->one();
-            } catch (InvalidFieldException $e) {
+            } catch (InvalidFieldException) {
                 $image = null;
             }
         } else {
             try {
                 $image = $product->getFieldValue($fieldInfo['handle'])->one();
-            } catch (InvalidFieldException $e) {
+            } catch (InvalidFieldException) {
                 $image = null;
             }
         }
@@ -151,7 +151,7 @@ public function getCountries(): array
     {
         try {
             return Plugin::getInstance()->getStore()->getStore()->getCountriesList();
-        } catch (InvalidConfigException $e) {
+        } catch (InvalidConfigException) {
             return [];
         }
     }
@@ -163,7 +163,7 @@ public function getRegions(): array
     {
         try {
             return Plugin::getInstance()->getStore()->getStore()->getAdministrativeAreasListByCountryCode();
-        } catch (InvalidConfigException $e) {
+        } catch (InvalidConfigException) {
             return [];
         }
     }
@@ -175,7 +175,7 @@ public function getDiscounts(): array
     {
         try {
             return Plugin::getInstance()->getDiscounts()->allDiscounts;
-        } catch (InvalidConfigException $e) {
+        } catch (InvalidConfigException) {
             return [];
         }
     }
@@ -187,9 +187,10 @@ public function getGateways(): array
     {
         try {
             $gateways = Plugin::getInstance()->gateways->getAllCustomerEnabledGateways();
-        } catch (InvalidConfigException $e) {
+        } catch (InvalidConfigException) {
             $gateways = [];
         }
+
         $gatewaysArr = [];
         foreach ($gateways as $gateway) {
             $gatewaysArr[] = [

diff --git a/src/templates/_components/app/steps-completed.twig b/src/templates/_components/app/steps-completed.twig
@@ -50,15 +50,15 @@
 					<span class="inline-block font-semibold text-black">
 						{{ 'Method'|t('foster-checkout') }}
 					</span>
-					<a href="#" class="inline-block underline text-[var(--brandColor)] sm:hidden">
+					<a href="{{ craft.fostercheckout.getPath('checkout') ~ '/shipping' }}" class="inline-block underline text-[var(--brandColor)] sm:hidden">
 						{{ 'Edit'|t('foster-checkout') }}
 					</a>
 				</dt>
 				<dd class="mt-1 sm:flex sm:justify-between sm:items-start sm:gap-4 sm:mt-0">
 					<p class="text-black">
-						FedEx Expedited: $15.00
+						{{ cart.shippingMethodName }} {{ cart.totalShippingCostAsCurrency }}
 					</p>
-					<a class="hidden sm:inline-block sm:underline sm:text-[var(--brandColor)]" href="#">
+					<a class="hidden sm:inline-block sm:underline sm:text-[var(--brandColor)]" href="{{ craft.fostercheckout.getPath('checkout') ~ '/shipping' }}">
 						{{ 'Edit'|t('foster-checkout') }}
 					</a>
 				</dd>

diff --git a/src/templates/_components/app/summary-cart.twig b/src/templates/_components/app/summary-cart.twig
@@ -9,23 +9,33 @@
 			<dd class="font-semibold text-right text-black">{{ cart.itemTotalAsCurrency }}</dd>
 		</div>
 
-		<div class="flex justify-between items-center gap-4">
-			<dt class="text-gray-500">{{ 'Discount'|t('foster-checkout') }}</dt>
-			<dd class="text-right text-red-500">{{ cart.totalDiscountAsCurrency }}</dd>
-		</div>
-
-		<div class="flex justify-between items-center gap-4">
-			<dt class="font-semibold text-black">{{ 'Subtotal After Discount'|t('foster-checkout') }}</dt>
-			<dd class="font-semibold text-right text-black">{{ cart.totalAsCurrency }}</dd>
-		</div>
-
-		{% include 'foster-checkout/_components/app/estimated-shipping' %}
+    {% if cart.totalDiscount != 0 %}
+      <div class="flex justify-between items-center gap-4">
+        <dt class="text-gray-500">{{ 'Discount'|t('foster-checkout') }}</dt>
+        <dd class="text-right text-red-500">{{ cart.totalDiscountAsCurrency }}</dd>
+      </div>
+
+      <div class="flex justify-between items-center gap-4">
+        <dt class="font-semibold text-black">{{ 'Subtotal After Discount'|t('foster-checkout') }}</dt>
+        <dd class="font-semibold text-right text-black">{{ cart.totalAsCurrency }}</dd>
+      </div>
+    {% endif %}
+
+    {% if not cart.shippingAddressId %}
+      {% include 'foster-checkout/_components/app/estimated-shipping' %}
+
+      <p class="max-w-[210px] -mt-[8px] text-sm text-gray-500">
+        {{ 'Add'|t('foster-checkout') }}
+        <strong class="font-semibold text-black">$24.15</strong>
+        {{ 'for FREE shipping, or choose FREE Ship to Store.'|t('foster-checkout') }}
+      </p>
+    {% else %}
+      <div class="flex justify-between items-center gap-4">
+			  <dt class="text-gray-500">{{ 'Shipping'|t('foster-checkout') }}</dt>
+			  <dd class="font-semibold text-right text-black">{{ cart.totalShippingCostAsCurrency }}</dd>
+		  </div>
+    {% endif %}
 
-		<p class="max-w-[210px] -mt-[8px] text-sm text-gray-500">
-			{{ 'Add'|t('foster-checkout') }}
-			<strong class="font-semibold text-black">$24.15</strong>
-			{{ 'for FREE shipping, or choose FREE Ship to Store.'|t('foster-checkout') }}
-		</p>
 
 		<div class="flex justify-between items-center gap-4">
 			<dt class="text-gray-500">{{ 'Estimated Tax'|t('foster-checkout') }}</dt>
@@ -39,6 +49,11 @@
 				<dt class="font-semibold text-black">{{ 'Estimated Total'|t('foster-checkout') }}:</dt>
 				<dd class="font-semibold text-right text-black">{{ cart.totalPriceAsCurrency }}</dd>
 			</div>
+    {% else %}
+      <div class="flex justify-between items-center gap-4">
+				<dt class="font-semibold text-black">{{ 'Total'|t('foster-checkout') }}:</dt>
+				<dd class="font-semibold text-right text-black">{{ cart.totalPriceAsCurrency }}</dd>
+			</div>
 		{% endif %}
 
 	</dl>

diff --git a/src/templates/_components/app/summary-order.twig b/src/templates/_components/app/summary-order.twig
@@ -6,34 +6,36 @@
 
 		<div class="flex justify-between items-center gap-4">
 			<dt class="text-gray-500">{{ 'Subtotal'|t('foster-checkout') }}</dt>
-			<dd class="font-semibold text-right text-black">{{ cart.itemTotalAsCurrency }}</dd>
+			<dd class="font-semibold text-right text-black">{{ order.itemTotalAsCurrency }}</dd>
 		</div>
 
-		<div class="flex justify-between items-center gap-4">
-			<dt class="text-gray-500">{{ 'Discount'|t('foster-checkout') }}</dt>
-			<dd class="text-right text-red-500">- {{ cart.totalDiscountAsCurrency }}</dd>
-		</div>
+    {% if cart.totalDiscount != 0 %}
+      <div class="flex justify-between items-center gap-4">
+        <dt class="text-gray-500">{{ 'Discount'|t('foster-checkout') }}</dt>
+        <dd class="text-right text-red-500">{{ order.totalDiscountAsCurrency }}</dd>
+      </div>
 
-		<div class="flex justify-between items-center gap-4">
-			<dt class="font-semibold text-black">{{ 'Subtotal After Discount'|t('foster-checkout') }}</dt>
-			<dd class="font-semibold text-right text-black">$145.00</dd>
-		</div>
+      <div class="flex justify-between items-center gap-4">
+        <dt class="font-semibold text-black">{{ 'Subtotal After Discount'|t('foster-checkout') }}</dt>
+        <dd class="font-semibold text-right text-black">{{ order.subTotalAsCurrency }}</dd>
+      </div>
+    {% endif %}
 
 		<div class="flex justify-between items-center gap-4">
 			<dt class="text-gray-500">Shipping</dt>
-			<dd class="text-right text-black">$24.00</dd>
+			<dd class="text-right text-black">{{ order.totalShippingCostAsCurrency }}</dd>
 		</div>
 
 		<div class="flex justify-between items-center gap-4">
 			<dt class="text-gray-500">Tax</dt>
-			<dd class="text-right text-black">{{ cart.totalTaxAsCurrency }}</dd>
+			<dd class="text-right text-black">{{ order.totalTaxAsCurrency }}</dd>
 		</div>
 
 		<div class="flex justify-between items-center gap-4 mt-4">
 			<dt class="font-semibold text-black">Total:</dt>
-			<dd class="font-semibold text-right text-black">{{ cart.totalPriceAsCurrency }}</dd>
+			<dd class="font-semibold text-right text-black">{{ order.totalPriceAsCurrency }}</dd>
 		</div>
 
 	</dl>
 
-</article>
+</article>
diff --git a/src/templates/_emails/order-confirmation.twig b/src/templates/_emails/order-confirmation.twig
@@ -0,0 +1 @@
+Thanks for your order
diff --git a/src/templates/cart/index.twig b/src/templates/cart/index.twig
@@ -93,7 +93,7 @@
 					{% endif %}
 				</div>
 				<a
-					href="#"
+					href="{{ siteUrl(craft.fostercheckout.getPath('cancel')) }}"
 					class="inline-block max-w-[260px] mt-10 mx-auto px-4 py-3 font-medium text-white text-center bg-[var(--brandColor)] border border-[var(--brandColor)] rounded-xl lg:block"
 				>
 					{{ 'Continue Shopping'|t('foster-checkout') }}

diff --git a/src/templates/checkout/address.twig b/src/templates/checkout/address.twig
@@ -1,5 +1,6 @@
 {% extends 'foster-checkout/_layouts/default' %}
 {% set addresses =  currentUser ? (currentUser.addresses.all() ?? null) : null %}
+{% set primaryShippingAddressId =  currentUser ? (currentUser.getPrimaryShippingAddressId() ?? -1) : -1 %}
 {% set newAddress = false %}
 
 {% block body %}
@@ -9,7 +10,7 @@
 
 		<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="{ shippingAddressId: {{ cart.sourceShippingAddressId ?? 0 }}, editAddress: 0 }" class="pb-8 border-b border-gray-300 lg:pb-0 lg:border-b-0">
+			<main v-scope="{ shippingAddressId: {{ primaryShippingAddressId }}, editAddress: {{ primaryShippingAddressId == -1 ? 1 : 0 }} }" 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">
 
@@ -22,6 +23,8 @@
             {{ actionInput('commerce/cart/update-cart') }}
             {{ redirectInput(craft.fostercheckout.getPath('checkout') ~ '/shipping') }}
 
+            {{ hiddenInput('billingAddressSameAsShipping', 1) }}
+
 						<div class="border border-gray-250 rounded-lg overflow-hidden">
 
 							<h2 class="p-4 font-semibold bg-gray-200 lg:px-6">
@@ -35,7 +38,7 @@
                     {% for address in addresses %}
                       {% set newAddress = cart.sourceShippingAddressId == address.id %}
                       <div class="p-4 border-t" :class="{ 'bg-gray-100': parseInt(shippingAddressId) === {{ address.id }} }"
-                      {{ cart.sourceShippingAddressId  == address.id ? ' selected' : ''}}>
+                      {{ cart.sourceShippingAddressId == address.id ? ' checked' : ''}}>
                         <div class="flex justify-between items-center gap-4 radio">
                           <input
                             v-model="shippingAddressId"
@@ -51,7 +54,7 @@
                             class="inline-flex justify-start items-center gap-4 cursor-pointer"
                             :class="{ 'font-medium text-black': parseInt(shippingAddressId) === 1 }"
                           >
-                              {% include'foster-checkout/_components/app/formatted-address' with { 'address': address}  %}
+                              {% include'foster-checkout/_components/app/formatted-address' with { 'address': address }  %}
                           </label>
                           <button
                             v-cloak
@@ -90,30 +93,35 @@
 											<input
 												v-model="shippingAddressId"
 												id="address_0"
-												name="newAddress"
+												name="editAddress"
 												type="radio"
 												class="sr-only"
 												value="0"
-												@change="editAddress = 0"
+												@change="editAddress = 1"
 											/>
 											<label
 												for="address_0"
 												class="inline-flex justify-start items-center gap-4 cursor-pointer"
 												:class="{ 'font-medium text-black': parseInt(shippingAddressId) === 0 }"
 											>
+                        {% if addresses|length > 1 %}
 												{{ 'Use a different shipping address'|t('foster-checkout') }}
+                        {% else %}
+                        {{ 'Shipping address'|t('foster-checkout') }}
+                        {% endif %}
 											</label>
 										</div>
 
-										<div v-cloak v-if="parseInt(shippingAddressId) === 0" class="p-4">
+										<div v-cloak v-if="parseInt(editAddress) === 1" class="p-4">
 											{% include 'foster-checkout/_components/app/address-fields' with {
 												context: 'shippingAddress',
-                        address: newAddress ? null : craft.addresses().id(cart.shippingAddressId).one()
+                        address: newAddress ? null : (currentUser ? craft.addresses().owner(currentUser).id(cart.shippingAddressId).one() : null)
 											} %}
 
+
                       <div class="mt-4 p4 checkbox">
                         <input type="checkbox" class="sr-only" id="saveShippingAddressOnOrderComplete" name="saveShippingAddressOnOrderComplete" value="1" />
-                        <label class="inline-flex justify-start items-center gap-4 cursor-pointer font-medium text-gray-500" for="saveShippingAddressOnOrderComplete">Save this address</label>
+                        <label class="inline-flex justify-start items-center gap-4 cursor-pointer font-medium text-gray-500" for="saveShippingAddressOnOrderComplete">{{ 'Save to address book'|t('foster-checkout') }}</label>
                       </div>
 										</div>