Merge pull request #323 from scottyzen/enhancement/checkout-address-flow

Checkout flow

Author: scottyzen

README.md

@@ -40,7 +40,7 @@ And here is the live demo of the customized WooNuxt site: [My Shop](https://mysh
 | Feature                                                   | Ongoing Enhancements | In the Pipeline | In Progress | Done | Next |
 | --------------------------------------------------------- | -------------------- | --------------- | ----------- | ---- | ---- |
 | Performance                                               | 🔷                   |                 |             | ✅   |      |
-| SEO                                                       | 🔷                   |                 | ✅          |     |      |
+| SEO                                                       | 🔷                   |                 | ✅          |      |      |
 | Cart                                                      |                      |                 |             | ✅   |      |
 | Search                                                    |                      |                 |             | ✅   |      |
 | Shipping                                                  |                      |                 |             | ✅   |      |
@@ -96,7 +96,7 @@ And here is the live demo of the customized WooNuxt site: [My Shop](https://mysh
 | ---------------------------- | ------- |
 | WordPress                    | 6.8.1   |
 | WooCommerce                  | 9.9.5   |
-| WPGraphQL                    | 2.3.3   |
+| WPGraphQL                    | 2.3.6   |
 | WooGraphQL                   | 0.21.2  |
 | ~~WPGraphQL CORS~~           | ~~2.1~~ |
 | Headless Login for WPGraphQL | 0.4.2   |

package-lock.json

@@ -13,15 +13,15 @@
   "dependencies": {
     "@stripe/stripe-js": "^7.9.0",
     "@vueform/slider": "^2.1.10",
-    "@vueuse/core": "^13.8.0"
+    "@vueuse/core": "^13.9.0"
   },
   "devDependencies": {
     "@nuxt/icon": "^2.0.0",
     "@nuxt/image": "1.11.0",
     "@nuxtjs/i18n": "^9.5.2",
     "@nuxtjs/tailwindcss": "^6.14.0",
     "@tailwindcss/typography": "^0.5.16",
-    "nuxt": "^4.0.3",
+    "nuxt": "^4.1.3",
     "nuxt-graphql-client": "^0.2.46",
     "prettier": "^3.6.2"
   }

package.json

@@ -12,9 +12,12 @@
 .account-form input[type='tel'],
 .account-form input[type='password'],
 .account-form textarea,
-.account-form .StripeElement,
+.account-form .StripeElement {
+  @apply bg-white border rounded-md outline-none w-full py-2 px-4 block md:bg-gray-50 shadow-inner;
+}
+
 .account-form select {
-  @apply bg-white border rounded-md outline-none w-full py-2 px-4 block md:bg-gray-50;
+  @apply bg-white border rounded-md outline-none w-full py-2 px-4 block md:bg-gray-50 shadow-sm;
 }
 
 .account-form label {

woonuxt_base/app/components/AccountMyDetails.vue

@@ -1,10 +1,12 @@
 <script setup lang="ts">
-const { viewer, avatar, logoutUser, isPending, wishlistLink } = useAuth();
+const { viewer, avatar, logoutUser, isPending, wishlistLink, navigateToLogin } = useAuth();
+const route = useRoute();
+
 const linkTitle = computed<string>(() => viewer.value?.username || 'Sign In');
 </script>
 
 <template>
-  <NuxtLink to="/my-account" :title="linkTitle" class="hidden sm:inline-flex aspect-square items-center">
+  <NuxtLink to="/my-account" :title="linkTitle" @click="navigateToLogin(route.fullPath)" class="hidden sm:inline-flex aspect-square items-center">
     <Transition name="pop-in" mode="out-in">
       <span v-if="avatar" class="relative avatar">
         <img

woonuxt_base/app/components/SignInLink.vue

@@ -14,15 +14,16 @@ const decrementQuantity = () => quantity.value--;
 watch(
   quantity,
   debounce(() => {
-    if (quantity.value !== "") {
+    if (quantity.value !== '') {
       updateItemQuantity(item.key, quantity.value);
     }
   }, 250),
 );
 
 const onFocusOut = () => {
-  if (quantity.value === "") { // If the quantity is empty, set it to the cart item quantity
-    const cartItem = cart.value?.contents?.nodes?.find(node => node.key === item.key);
+  if (quantity.value === '') {
+    // If the quantity is empty, set it to the cart item quantity
+    const cartItem = cart.value?.contents?.nodes?.find((node) => node.key === item.key);
     if (cartItem) {
       quantity.value = cartItem.quantity;
     }
@@ -48,7 +49,7 @@ const onFocusOut = () => {
       :max="productType.stockQuantity"
       aria-label="Quantity"
       @focusout="onFocusOut"
-      class="flex items-center justify-center w-8 px-2 text-right text-xs focus:outline-none border-y border-gray-300" />
+      class="flex items-center justify-center w-8 px-2 text-xs focus:outline-none border-y border-gray-300 text-center" />
     <button
       title="Increase Quantity"
       aria-label="Increase Quantity"

woonuxt_base/app/components/cartElements/QuantityInput.vue

@@ -28,7 +28,7 @@ const checkboxChanged = () => {
 
 <template>
   <div v-if="terms.length">
-    <div class="cursor-pointer flex font-semibold mt-8 justify-between items-center" @click="isOpen = !isOpen">
+    <div class="cursor-pointer flex font-semibold mt-8 leading-none justify-between items-center text-gray-900" @click="isOpen = !isOpen">
       <span>{{ label || $t('messages.shop.category', 2) }}</span>
       <Icon name="ion:chevron-down-outline" class="transform" :class="isOpen ? 'rotate-180' : ''" />
     </div>

woonuxt_base/app/components/filtering/CategoryFilter.vue

@@ -21,7 +21,7 @@ const checkboxChanged = () => {
 </script>
 
 <template>
-  <div class="cursor-pointer flex font-semibold mt-8 leading-none justify-between items-center" @click="isOpen = !isOpen">
+  <div class="cursor-pointer flex font-semibold mt-8 leading-none justify-between items-center text-gray-900" @click="isOpen = !isOpen">
     <span>{{ filterTitle }}</span>
     <Icon name="ion:chevron-down-outline" class="transform" :class="isOpen ? 'rotate-180' : ''" />
   </div>

woonuxt_base/app/components/filtering/ColorFilter.vue

@@ -21,7 +21,7 @@ const checkboxChanged = () => {
 </script>
 
 <template>
-  <div class="cursor-pointer flex font-semibold mt-8 leading-none justify-between items-center" @click="isOpen = !isOpen">
+  <div class="cursor-pointer flex font-semibold mt-8 leading-none justify-between items-center text-gray-900" @click="isOpen = !isOpen">
     <span>{{ filterTitle }}</span>
     <Icon name="ion:chevron-down-outline" class="transform" :class="isOpen ? 'rotate-180' : ''" />
   </div>

woonuxt_base/app/components/filtering/GlobalFilter.vue

@@ -22,7 +22,7 @@ const checkboxClicked = (e) => {
 
 <template>
   <div>
-    <div class="cursor-pointer flex font-semibold mt-8 leading-none justify-between items-center" @click="isOpen = !isOpen">
+    <div class="cursor-pointer flex font-semibold mt-8 leading-none justify-between items-center text-gray-900" @click="isOpen = !isOpen">
       <span>Sale Products Only</span>
       <Icon name="ion:chevron-down-outline" class="transform" :class="isOpen ? 'rotate-180' : ''" />
     </div>