refactor: Reduce the number of API call on checkout page

scottyzen · Jul 19, 2024 · c140c97 · c140c97
1 parent fa2519d
commit c140c97
Show file tree

Hide file tree

Showing 8 changed files with 24 additions and 37 deletions.
diff --git a/.prettierrc → woonuxt_base/.prettierrc b/.prettierrc → woonuxt_base/.prettierrc
diff --git a/woonuxt_base/app/components/forms/BillingDetails.vue b/woonuxt_base/app/components/forms/BillingDetails.vue
@@ -1,6 +1,7 @@
-<script setup>
-const { allowedCountries } = await GqlGetStates({ country: 'IE' });
+<script lang="ts" setup>
 const { updateShippingLocation } = useCheckout();
+const { allowedCountries, countryStates } = await GqlGetStates();
+
 const props = defineProps({
   modelValue: { type: Object, required: true },
   sameAsShippingAddress: { type: Boolean, default: true },
@@ -38,12 +39,12 @@ const billing = toRef(props, 'modelValue');
 
     <div class="w-full">
       <label for="state">{{ $t('messages.billing.state') }}</label>
-      <StateSelect v-model="billing.state" :default-value="billing.state" :country-code="billing.country" @change="updateShippingLocation" />
+      <StateSelect v-model="billing.state" :default-value="billing.state" :country-code="billing.country" @change="updateShippingLocation" :countryStates />
     </div>
 
     <div class="w-full">
       <label for="country">{{ $t('messages.billing.country') }}</label>
-      <CountrySelect v-model="billing.country" :default-value="billing.country" @change="updateShippingLocation" />
+      <CountrySelect v-model="billing.country" :default-value="billing.country" @change="updateShippingLocation" :allowedCountries />
     </div>
 
     <div class="w-full">

diff --git a/woonuxt_base/app/components/forms/ShippingDetails.vue b/woonuxt_base/app/components/forms/ShippingDetails.vue
@@ -1,9 +1,6 @@
-<script setup>
-const { orderInput } = useCheckout();
+<script lang="ts" setup>
 const { updateShippingLocation } = useCheckout();
 
-const shipToDifferentAddress = computed(() => orderInput.value.shipToDifferentAddress);
-
 const props = defineProps({
   modelValue: { type: Object, required: true },
 });
@@ -15,17 +12,17 @@ const shipping = 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="shipping.firstName" placeholder="John" type="text" :required="shipToDifferentAddress" />
+      <input v-model="shipping.firstName" placeholder="John" type="text" required />
     </div>
 
     <div class="w-full">
       <label for="last-name">{{ $t('messages.billing.lastName') }}</label>
-      <input v-model="shipping.lastName" placeholder="Doe" type="text" :required="shipToDifferentAddress" />
+      <input v-model="shipping.lastName" placeholder="Doe" type="text" required />
     </div>
 
     <div class="w-full col-span-full">
       <label for="address1">{{ $t('messages.billing.address1') }}</label>
-      <input v-model="shipping.address1" placeholder="O'Connell Street" type="text" :required="shipToDifferentAddress" />
+      <input v-model="shipping.address1" placeholder="O'Connell Street" type="text" required />
     </div>
 
     <div class="w-full col-span-full">
@@ -35,7 +32,7 @@ const shipping = toRef(props, 'modelValue');
 
     <div class="w-full">
       <label for="city">{{ $t('messages.billing.city') }}</label>
-      <input v-model="shipping.city" placeholder="Dublin" type="text" :required="shipToDifferentAddress" />
+      <input v-model="shipping.city" placeholder="Dublin" type="text" required />
     </div>
 
     <div class="w-full">

diff --git a/woonuxt_base/app/components/shopElements/CountrySelect.vue b/woonuxt_base/app/components/shopElements/CountrySelect.vue
@@ -1,11 +1,11 @@
 <script setup>
 import { countries } from '#constants';
-const { allowedCountries } = await GqlGetStates({ country: 'IE' });
 
-const props = defineProps(['modelValue']);
+const props = defineProps(['modelValue', 'props.allowedCountries']);
 const emit = defineEmits(['update:modelValue']);
-// @ts-ignore
-const countriesToShow = computed(() => (allowedCountries?.length ? countries.filter((country) => allowedCountries.includes(country.countryCode)) : countries));
+const countriesToShow = computed(() =>
+  props.allowedCountries?.length ? countries.filter((country) => props.allowedCountries.includes(country.countryCode)) : countries,
+);
 
 function select(evt) {
   emit('update:modelValue', evt.target.value);

diff --git a/woonuxt_base/app/components/shopElements/NoProductsFound.vue b/woonuxt_base/app/components/shopElements/NoProductsFound.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
 const { allProducts } = useProducts();
-const { clearSearchQuery, isSearchActive } = useSearching();
-const { resetFilter, isFiltersActive } = useFiltering();
+const { clearSearchQuery } = useSearching();
+const { resetFilter } = useFiltering();
 
 const clearAll = () => {
-  if (isFiltersActive.value) resetFilter();
-  if (isSearchActive.value) clearSearchQuery();
+  resetFilter();
+  clearSearchQuery();
 };
 </script>
 

diff --git a/woonuxt_base/app/components/shopElements/StateSelect.vue b/woonuxt_base/app/components/shopElements/StateSelect.vue
@@ -1,16 +1,15 @@
 <script setup>
-const props = defineProps(['modelValue', 'countryCode']);
+const props = defineProps(['modelValue', 'countryCode', 'countryStates']);
 const emit = defineEmits(['update:modelValue']);
-const states = ref([]);
+const states = ref(props.countryStates || []);
 
 function select(evt) {
   emit('update:modelValue', evt.target.value);
 }
 
 async function updateState() {
-  const country = props?.countryCode || 'IE';
   try {
-    const { countryStates } = await GqlGetStates({ country });
+    const { countryStates } = await GqlGetStates({ country: props?.countryCode || 'IE' });
     states.value = countryStates;
   } catch (error) {
     console.error(error);
@@ -23,23 +22,13 @@ watch(
     updateState();
   },
 );
-
-onMounted(() => {
-  updateState();
-});
 </script>
 
 <template>
-  <select @change="select" v-if="states.length">
+  <select @change="select" v-if="states.length" class="h-[42px]">
     <option v-for="state in states" :key="state.code" :value="state.code" :selected="state.code === props.modelValue">
       {{ state.name }}
     </option>
   </select>
   <input v-else type="text" @change="select" placeholder="State" />
 </template>
-
-<style scoped lang="postcss">
-select {
-  height: 42px;
-}
-</style>
diff --git a/woonuxt_base/app/pages/checkout.vue b/woonuxt_base/app/pages/checkout.vue
@@ -129,7 +129,7 @@ useSeoMeta({
           </label>
 
           <Transition name="scale-y" mode="out-in">
-            <div v-show="orderInput.shipToDifferentAddress">
+            <div v-if="orderInput.shipToDifferentAddress">
               <h2 class="mb-4 text-xl font-semibold">{{ $t('messages.general.shippingDetails') }}</h2>
               <ShippingDetails v-model="customer.shipping" />
             </div>

diff --git a/woonuxt_base/app/queries/getStates.gql b/woonuxt_base/app/queries/getStates.gql
@@ -1,4 +1,4 @@
-query getStates($country: CountriesEnum!) {
+query getStates($country: CountriesEnum = IE) {
   countryStates(country: $country) {
     code
     name