chore(M2-261): Refactor getters from composables to theme

Author: youanden

packages/composables/src/composables/useAddresses/index.ts

@@ -26,11 +26,11 @@ type RemoveAddressInput = {
 } & CustomQueryParams;
 
 const factoryParams: UseAddressesParams<CustomerAddress,
-CustomQueryParams,
-SaveAddressInput,
-UpdateAddressInput,
-RemoveAddressInput> = {
-  load: async (context: Context, params?: CustomQueryParams) => {
+  CustomQueryParams,
+  SaveAddressInput,
+  UpdateAddressInput,
+  RemoveAddressInput> = {
+  load: async (context: Context) => {
     Logger.debug('[Magento] load user addresses');
 
     const { data } = await context.$magento.api.getCustomerAddresses();

packages/composables/src/index.ts

@@ -3,7 +3,6 @@ import { track } from '@vue-storefront/core';
 
 track('VSFMagento');
 
-export * from './getters';
 export * from './getVueContext';
 
 export { default as useAddresses } from './composables/useAddresses';
@@ -39,3 +38,13 @@ export { default as useUserOrder } from './composables/useUserOrder';
 export { default as useUserShipping } from './composables/useUserShipping';
 export { default as useWishlist } from './composables/useWishlist';
 export * from './dataTypes';
+export * from './types';
+export * from './types/getters';
+export * from './helpers/userAddressManipulator';
+export * from './helpers/htmlDecoder';
+export * from './helpers/buildCategoryTree';
+export {
+    Countries, Discount,
+    SelectedShippingMethod, ConfigurableCartItem, ProductInterface, ProductReviewRatingMetadata,
+    ProductReviews, WishlistQuery,
+} from '@vue-storefront/magento-api';

packages/theme/components/AppHeader.vue

@@ -2,15 +2,13 @@
   <div>
     <SfHeader
       class="sf-header--has-mobile-search"
-      :class="{'header-on-top': isSearchOpen}"
+      :class="{ 'header-on-top': isSearchOpen }"
     >
       <!-- TODO: add mobile view buttons after SFUI team PR -->
       <template #logo>
         <HeaderLogo />
       </template>
-      <template
-        #navigation
-      >
+      <template #navigation>
         <HeaderNavigationItem
           v-for="(category, index) in categoryTree"
           :key="index"
@@ -26,9 +24,7 @@
           <StoreSwitcher class="smartphone-only" />
         </div>
       </template>
-      <template
-        #header-icons="{activeIcon}"
-      >
+      <template #header-icons="{ activeIcon }">
         <div class="sf-header__icons">
           <SfButton
             v-e2e="'app-header-account'"
@@ -114,13 +110,10 @@
 
 <script>
 import {
-  SfOverlay,
-  SfHeader,
-  SfButton,
-  SfBadge,
+  SfOverlay, SfHeader, SfButton, SfBadge,
 } from '@storefront-ui/vue';
 
-import { categoryGetters } from '@vue-storefront/magento';
+import { categoryGetters } from '~/getters';
 import {
   computed,
   ref,
@@ -157,7 +150,9 @@ export default defineComponent({
     SfButton,
     SfBadge,
     SearchBar: () => import('~/components/Header/SearchBar/SearchBar.vue'),
-    SearchResults: () => import(/* webpackPrefetch: true */ '~/components/Header/SearchBar/SearchResults.vue'),
+    SearchResults: () => import(
+      /* webpackPrefetch: true */ '~/components/Header/SearchBar/SearchResults.vue'
+    ),
   },
   setup() {
     const router = useRouter();
@@ -168,10 +163,7 @@ export default defineComponent({
     const { loadTotalQty: loadCartTotalQty, cart } = useCart();
     const { loadItemsCount: loadWishlistItemsCount, wishlist } = useWishlist();
 
-    const {
-      categories: categoryList,
-      search: categoriesListSearch,
-    } = useCategory('AppHeader:CategoryList');
+    const { categories: categoryList, search: categoriesListSearch } = useCategory('AppHeader:CategoryList');
 
     const isSearchOpen = ref(false);
     const result = ref(null);
@@ -190,7 +182,9 @@ export default defineComponent({
 
     useFetch(async () => {
       await categoriesListSearch({ pageSize: 20 });
-      categoryTree.value = categoryGetters.getCategoryTree(categoryList.value?.[0])?.items.filter((c) => c.count > 0);
+      categoryTree.value = categoryGetters
+        .getCategoryTree(categoryList.value?.[0])
+        ?.items.filter((c) => c.count > 0);
     });
 
     onMounted(() => {

packages/theme/components/CartSidebar.vue

@@ -120,7 +120,9 @@
                         :disabled="loading"
                         :qty="cartGetters.getItemQty(product)"
                         class="sf-collected-product__quantity-selector"
-                        @input="delayedUpdateItemQty({ product, quantity: $event })"
+                        @input="
+                          delayedUpdateItemQty({ product, quantity: $event })
+                        "
                       />
                     </div>
                     <SfBadge
@@ -187,18 +189,13 @@
           <div v-if="totalItems">
             <SfProperty
               :name="$t('Subtotal price')"
-              class="
-                sf-property--full-width sf-property--large
-                my-cart__total-price
-              "
+              class="sf-property--full-width sf-property--large my-cart__total-price"
             >
               <template #value>
                 <SfPrice
                   :regular="$fc(totals.subtotal)"
                   :special="
-                    totals.subtotal <= totals.special
-                      ? ''
-                      : $fc(totals.special)
+                    totals.subtotal <= totals.special ? '' : $fc(totals.special)
                   "
                 />
               </template>
@@ -246,11 +243,10 @@ import {
   defineComponent,
   ref,
   useRouter,
-  useContext, onMounted,
+  useContext,
+  onMounted,
 } from '@nuxtjs/composition-api';
-import {
-  cartGetters,
-} from '@vue-storefront/magento';
+import { cartGetters } from '~/getters';
 import _debounce from 'lodash.debounce';
 import {
   useCart,
@@ -260,8 +256,8 @@ import {
   useExternalCheckout,
 } from '~/composables';
 import stockStatusEnum from '~/enums/stockStatusEnum';
-import CouponCode from './CouponCode.vue';
 import SvgImage from '~/components/General/SvgImage.vue';
+import CouponCode from './CouponCode.vue';
 
 export default defineComponent({
   name: 'CartSidebar',
@@ -298,7 +294,14 @@ export default defineComponent({
     const products = computed(() => cartGetters
       .getItems(cart.value)
       .filter(Boolean)
-      .map((item) => ({ ...item, product: { ...item.product, ...item.configured_variant, original_sku: item.product.sku } })));
+      .map((item) => ({
+        ...item,
+        product: {
+          ...item.product,
+          ...item.configured_variant,
+          original_sku: item.product.sku,
+        },
+      })));
     const totals = computed(() => cartGetters.getTotals(cart.value));
     const totalItems = computed(() => cartGetters.getTotalItems(cart.value));
     const getAttributes = (product) => product.configurable_options || [];
@@ -313,7 +316,9 @@ export default defineComponent({
     });
 
     const goToCheckout = async () => {
-      const redirectUrl = await initializeCheckout({ baseUrl: '/checkout/user-account' });
+      const redirectUrl = await initializeCheckout({
+        baseUrl: '/checkout/user-account',
+      });
       await router.push(`${app.localePath(redirectUrl)}`);
     };
 
@@ -341,7 +346,10 @@ export default defineComponent({
         title: 'Product removed',
       });
     };
-    const delayedUpdateItemQty = _debounce((params) => updateItemQty(params), 1000);
+    const delayedUpdateItemQty = _debounce(
+      (params) => updateItemQty(params),
+      1000,
+    );
     const isInStock = (product) => cartGetters.getStockStatus(product) === stockStatusEnum.inStock;
 
     return {

packages/theme/components/Checkout/CartPreview.vue

@@ -53,7 +53,7 @@
 <script>
 import { SfHeading, SfProperty, SfCharacteristic } from '@storefront-ui/vue';
 import { computed, ref, defineComponent } from '@nuxtjs/composition-api';
-import { cartGetters } from '@vue-storefront/magento';
+import { cartGetters } from '~/getters';
 import { useCart } from '~/composables';
 import getShippingMethodPrice from '~/helpers/checkout/getShippingMethodPrice';
 import CouponCode from '../CouponCode.vue';

packages/theme/components/Checkout/UserBillingAddresses.vue

@@ -26,17 +26,10 @@
 </template>
 
 <script>
-import {
-  SfCheckbox,
-  SfAddressPicker,
-} from '@storefront-ui/vue';
-import {
-  useUserBilling,
-  userBillingGetters,
-} from '@vue-storefront/magento';
-import {
-  defineComponent,
-} from '@nuxtjs/composition-api';
+import { SfCheckbox, SfAddressPicker } from '@storefront-ui/vue';
+import { useUserBilling } from '@vue-storefront/magento';
+import { userBillingGetters } from '~/getters';
+import { defineComponent } from '@nuxtjs/composition-api';
 import UserAddressDetails from '~/components/UserAddressDetails.vue';
 
 export default defineComponent({
@@ -61,7 +54,10 @@ export default defineComponent({
     const { billing: userBilling } = useUserBilling();
 
     const setCurrentAddress = (addressId) => {
-      const selectedAddress = userBillingGetters.getAddresses(userBilling.value, { id: Number.parseInt(addressId, 10) });
+      const selectedAddress = userBillingGetters.getAddresses(
+        userBilling.value,
+        { id: Number.parseInt(addressId, 10) },
+      );
       if (!selectedAddress || selectedAddress.length === 0) {
         return;
       }
@@ -103,7 +99,8 @@ export default defineComponent({
   }
 }
 
-.sf-divider, .form__action-button--margin-bottom {
+.sf-divider,
+.form__action-button--margin-bottom {
   margin-bottom: var(--spacer-xl);
 }
 </style>

packages/theme/components/Checkout/UserShippingAddresses.vue

@@ -11,9 +11,7 @@
         class="shipping__address"
         :name="`${userShippingGetters.getId(shippingAddress)}`"
       >
-        <UserAddressDetails
-          :address="shippingAddress"
-        />
+        <UserAddressDetails :address="shippingAddress" />
       </SfAddress>
     </SfAddressPicker>
     <SfCheckbox
@@ -29,18 +27,10 @@
 </template>
 
 <script>
-import {
-  SfCheckbox,
-  SfAddressPicker,
-} from '@storefront-ui/vue';
-import {
-  useUserShipping,
-  userShippingGetters,
-} from '@vue-storefront/magento';
-import {
-  computed,
-  defineComponent,
-} from '@nuxtjs/composition-api';
+import { SfCheckbox, SfAddressPicker } from '@storefront-ui/vue';
+import { useUserShipping } from '@vue-storefront/magento';
+import { userShippingGetters } from '~/getters';
+import { computed, defineComponent } from '@nuxtjs/composition-api';
 import UserAddressDetails from '~/components/UserAddressDetails.vue';
 
 export default defineComponent({
@@ -77,8 +67,7 @@ export default defineComponent({
       emit('setCurrentAddress', selectedAddress[0]);
     };
 
-    const shippingAddresses = computed(() => userShippingGetters
-      .getAddresses(userShipping.value));
+    const shippingAddresses = computed(() => userShippingGetters.getAddresses(userShipping.value));
 
     return {
       setCurrentAddress,
@@ -113,7 +102,8 @@ export default defineComponent({
   }
 }
 
-.sf-divider, .form__action-button--margin-bottom {
+.sf-divider,
+.form__action-button--margin-bottom {
   margin-bottom: var(--spacer-xl);
 }
 </style>

packages/theme/components/Checkout/VsfShippingProvider.vue

@@ -37,8 +37,7 @@
           :label="method.method_title"
           :value="method.method_code"
           :selected="
-            selectedShippingMethod &&
-              selectedShippingMethod.method_code
+            selectedShippingMethod && selectedShippingMethod.method_code
           "
           name="shippingMethod"
           :description="method.carrier_title"
@@ -84,9 +83,9 @@
 <script>
 import {
   useShippingProvider,
-  cartGetters,
   useGetShippingMethods,
 } from '@vue-storefront/magento';
+import { cartGetters } from '~/getters';
 import {
   SfHeading, SfButton, SfRadio, SfLoader,
 } from '@storefront-ui/vue';

packages/theme/components/CouponCode.vue

@@ -27,7 +27,7 @@
 
 <script>
 import { SfButton, SfInput } from '@storefront-ui/vue';
-import { cartGetters } from '@vue-storefront/magento';
+import { cartGetters } from '~/getters';
 import {
   computed,
   onMounted,