Merge branch 'master' into create_use_country

README.md

@@ -93,10 +93,10 @@ And here is the live demo of the customized WooNuxt site: [My Shop](https://mysh
 | --------------- | ------- |
 | WordPress       | 6.6.1   |
 | WooCommerce     | 9.1.2   |
-| WPGraphQL       | 1.27.2  |
-| WooGraphQL      | 0.20.0  |
+| WPGraphQL       | 1.28.0  |
+| WooGraphQL      | 0.21.0  |
 | WPGraphQL CORS  | 2.1     |
-| Node            | 20.10.0 |
+| Node            | 20.16.0 |
 | PHP             | 8.2     |
 
 ### Current translations

package.json

@@ -11,14 +11,14 @@
     "serve": "nuxi generate && npx serve .output/public -l 8080"
   },
   "dependencies": {
-    "@stripe/stripe-js": "^4.1.0",
+    "@stripe/stripe-js": "^4.3.0",
     "@vueform/slider": "^2.1.10",
-    "@vueuse/core": "^10.11.0"
+    "@vueuse/core": "^11.0.0"
   },
   "devDependencies": {
     "@nuxt/icon": "^1.4.5",
     "@nuxt/image": "1.7.0",
-    "@nuxtjs/i18n": "^8.3.3",
+    "@nuxtjs/i18n": "^8.4.0",
     "@nuxtjs/tailwindcss": "^6.12.1",
     "@tailwindcss/typography": "^0.5.14",
     "nuxt": "^3.12.4",

woonuxt_base/app/components/CategoryCard.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-const { fallbackImage } = useHelpers();
+const { FALLBACK_IMG } = useHelpers();
 const props = defineProps({
   node: { type: Object, required: true },
   imageLoading: { type: String as PropType<'lazy' | 'eager'>, default: 'lazy' },
@@ -18,7 +18,7 @@ const imgHeight = Math.round(imgWidth * 1.125);
       :width="imgWidth"
       :height="imgHeight"
       class="absolute inset-0 object-cover w-full h-full"
-      :src="node.image?.sourceUrl || fallbackImage"
+      :src="node.image?.sourceUrl || FALLBACK_IMG"
       :alt="node.image?.altText || node.name"
       :title="node.image?.title || node.name"
       :loading="imageLoading"

woonuxt_base/app/components/cartElements/CartCard.vue

@@ -1,7 +1,7 @@
 <script setup>
 const { updateItemQuantity } = useCart();
 const { addToWishlist } = useWishlist();
-const { fallbackImage } = useHelpers();
+const { FALLBACK_IMG } = useHelpers();
 const { storeSettings } = useAppConfig();
 
 const { item } = defineProps({
@@ -11,6 +11,10 @@ const { item } = defineProps({
 const productType = computed(() => (item.variation ? item.variation?.node : item.product?.node));
 const productSlug = computed(() => `/product/${decodeURIComponent(item.product.node.slug)}`);
 const isLowStock = computed(() => (productType.value.stockQuantity ? productType.value.lowStockAmount >= productType.value.stockQuantity : false));
+const imgScr = computed(() => productType.value.image?.cartSourceUrl || productType.value.image?.sourceUrl || item.product.image?.sourceUrl || FALLBACK_IMG);
+const regularPrice = computed(() => parseFloat(productType.value.rawRegularPrice));
+const salePrice = computed(() => parseFloat(productType.value.rawSalePrice));
+const salePercentage = computed(() => Math.round(((regularPrice.value - salePrice.value) / regularPrice.value) * 100) + '%');
 
 const removeItem = () => {
   updateItemQuantity(item.key, 0);
@@ -20,12 +24,6 @@ const moveToWishList = () => {
   addToWishlist(item.product.node);
   removeItem();
 };
-
-const salePercentage = computed(() => {
-  const regularPrice = parseFloat(productType.value.regularPrice.replace(/\D/g, ''));
-  const salePrice = parseFloat(productType.value.salePrice.replace(/\D/g, ''));
-  return Math.round(((regularPrice - salePrice) / regularPrice) * 100) + '%';
-});
 </script>
 
 <template>
@@ -36,26 +34,33 @@ const salePercentage = computed(() => {
           width="64"
           height="64"
           class="w-16 h-16 rounded-md skeleton"
-          :src="productType.image.cartSourceUrl || productType.image.sourceUrl || item.product.image.sourceUrl || fallbackImage"
+          :src="imgScr"
           :alt="productType.image?.altText || productType.name"
           :title="productType.image?.title || productType.name"
           loading="lazy" />
       </NuxtLink>
       <div class="flex-1">
         <div class="flex gap-x-2 gap-y-1 flex-wrap items-center">
           <NuxtLink class="leading-tight" :to="productSlug">{{ productType.name }}</NuxtLink>
-          <span v-if="productType.salePrice" class="text-[10px] border-green-200 leading-none bg-green-100 inline-block p-0.5 rounded text-green-600 border"
-            >Save {{ salePercentage }}
+          <span v-if="productType.salePrice" class="text-[10px] border-green-200 leading-none bg-green-100 inline-block p-0.5 rounded text-green-600 border">
+            Save {{ salePercentage }}
+          </span>
+          <span v-if="isLowStock" class="text-[10px] border-yellow-200 leading-none bg-yellow-100 inline-block p-0.5 rounded text-orange-500 border">
+            Low Stock
           </span>
-          <span v-if="isLowStock" class="text-[10px] border-yellow-200 leading-none bg-yellow-100 inline-block p-0.5 rounded text-orange-500 border">Low Stock</span>
         </div>
         <ProductPrice class="mt-1 text-xs" :sale-price="productType.salePrice" :regular-price="productType.regularPrice" />
       </div>
       <div class="inline-flex gap-2 flex-col items-end">
         <QuantityInput :item />
         <div class="text-xs text-gray-400 group-hover:text-gray-700 flex leading-none items-center">
           <button v-if="storeSettings.showMoveToWishlist" class="mr-2 pr-2 border-r" @click="moveToWishList" type="button">Move to Wishlist</button>
-          <button title="Remove Item" aria-label="Remove Item" @click="removeItem" type="button" class="flex items-center gap-1 hover:text-red-500 cursor-pointer">
+          <button
+            title="Remove Item"
+            aria-label="Remove Item"
+            @click="removeItem"
+            type="button"
+            class="flex items-center gap-1 hover:text-red-500 cursor-pointer">
             <Icon name="ion:trash" class="hidden md:inline-block" size="12" />
           </button>
         </div>

woonuxt_base/app/components/filtering/PriceFilter.vue

@@ -51,7 +51,7 @@ watch(isFiltersActive, () => {
         <label for="price-to" class="leading-none px-2 text-gray-400 absolute" v-html="currencySymbol" />
       </div>
       <div class="mx-1 mt-1 col-span-full">
-        <Slider v-model="price" :tooltips="false" :min="0" :max="maxPrice" ariaLabelledby="price-from price-to" @change="applyPrice" />
+        <Slider v-model="price" :tooltips="false" :min="0" :max="maxPrice" ariaLabelledby="price-from price-to" @update="applyPrice" />
       </div>
     </div>
   </div>

woonuxt_base/app/components/forms/BillingDetails.vue

@@ -13,47 +13,53 @@ const billing = toRef(props, 'modelValue');
   <div class="grid w-full gap-4 lg:grid-cols-2">
     <div class="w-full">
       <label for="first-name">{{ $t('messages.billing.firstName') }}</label>
-      <input v-model="billing.firstName" placeholder="John" autocomplete="given-name" type="text" required />
+      <input id="first-name" v-model="billing.firstName" placeholder="John" autocomplete="given-name" type="text" required />
     </div>
 
     <div class="w-full">
       <label for="last-name">{{ $t('messages.billing.lastName') }}</label>
-      <input v-model="billing.lastName" placeholder="Doe" autocomplete="family-name" type="text" required />
+      <input id="last-name" v-model="billing.lastName" placeholder="Doe" autocomplete="family-name" type="text" required />
     </div>
 
     <div v-if="isBillingAddressEnabled" class="w-full col-span-full">
       <label for="address1">{{ $t('messages.billing.address1') }}</label>
-      <input v-model="billing.address1" placeholder="O'Connell Street 47" autocomplete="street-address" type="text" required />
+      <input id="address1" v-model="billing.address1" placeholder="O'Connell Street 47" autocomplete="street-address" type="text" required />
     </div>
 
     <div v-if="isBillingAddressEnabled" class="w-full col-span-full">
       <label for="address2">{{ $t('messages.billing.address2') }} ({{ $t('messages.general.optional') }})</label>
-      <input v-model="billing.address2" placeholder="Apartment, studio, or floor" autocomplete="address-line2" type="text" />
+      <input id="address2" v-model="billing.address2" placeholder="Apartment, studio, or floor" autocomplete="address-line2" type="text" />
     </div>
 
     <div v-if="isBillingAddressEnabled" class="w-full">
       <label for="city">{{ $t('messages.billing.city') }}</label>
-      <input v-model="billing.city" placeholder="New York" autocomplete="locality" type="text" required />
+      <input id="city" v-model="billing.city" placeholder="New York" autocomplete="locality" type="text" required />
     </div>
 
     <div v-if="isBillingAddressEnabled" class="w-full">
       <label for="state">{{ $t('messages.billing.state') }} ({{ $t('messages.general.optional') }})</label>
-      <StateSelect v-model="billing.state" :default-value="billing.state" :country-code="billing.country" @change="updateShippingLocation" />
+      <StateSelect
+        id="state"
+        v-model="billing.state"
+        :default-value="billing.state"
+        :country-code="billing.country"
+        @change="updateShippingLocation"
+        autocomplete="address-level1" />
     </div>
 
     <div v-if="isBillingAddressEnabled" class="w-full">
       <label for="country">{{ $t('messages.billing.country') }}</label>
-      <CountrySelect v-model="billing.country" :default-value="billing.country" @change="updateShippingLocation" />
+      <CountrySelect id="country" v-model="billing.country" :default-value="billing.country" @change="updateShippingLocation" autocomplete="country" />
     </div>
 
     <div v-if="isBillingAddressEnabled" class="w-full">
       <label for="zip">{{ $t('messages.billing.zip') }}</label>
-      <input v-model="billing.postcode" placeholder="10001" autocomplete="postal-code" type="text" required />
+      <input id="zip" v-model="billing.postcode" placeholder="10001" autocomplete="postal-code" type="text" required />
     </div>
 
     <div v-if="isBillingAddressEnabled" class="w-full col-span-full">
       <label for="phone">{{ $t('messages.billing.phone') }} ({{ $t('messages.general.optional') }})</label>
-      <input v-model="billing.phone" placeholder="+1 234 567 8901" autocomplete="tel" type="tel" />
+      <input id="phone" v-model="billing.phone" placeholder="+1 234 567 8901" autocomplete="tel" type="tel" />
     </div>
   </div>
 </template>

woonuxt_base/app/components/forms/ChangePassword.vue

@@ -7,12 +7,12 @@
 
       <div class="w-full">
         <label for="new-password">{{ $t('messages.account.newPassword') }}</label>
-        <PasswordInput v-model="password.new" placeholder="••••••••••" type="text" required />
+        <PasswordInput id="new-password" v-model="password.new" placeholder="••••••••••" type="text" required />
       </div>
 
       <div class="w-full">
         <label for="new-password-confirm">{{ $t('messages.account.confirmNewPassword') }}</label>
-        <PasswordInput v-model="password.confirm" placeholder="••••••••••" type="text" required />
+        <PasswordInput id="new-password-confirm" v-model="password.confirm" placeholder="••••••••••" type="text" required />
       </div>
 
       <Transition name="scale-y" mode="out-in">