Update Boilerplate to work with unified composables

packages/boilerplate/composables/src/getters/orderGetters.ts

@@ -7,7 +7,7 @@ import { Order, OrderItem } from '../types';
 export const getDate = (order: any): string => order?.date || '123';
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-export const getId = (order: any): string => order?.id || '123';
+export const getId = (order: any): string => order?.id || Math.floor(Math.random() * 100);
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 export const getStatus = (order: any): string => order?.status || 'Failed';

packages/boilerplate/composables/src/types/index.ts

@@ -1,39 +1,43 @@
-import { UseCategory, UseProduct } from '@vue-storefront/core';
+export { UseCategory, UseProduct } from '@vue-storefront/core';
 
-type Product = {}
-type Category = {}
-type User = {
+export type ProductsResponse = {
+  data: Product[];
+  total: number;
+};
+
+export type OrdersResponse = {
+  data: any[];
+  total: number;
+};
+
+export type OrderSearchParams = Record<string, any>;
+
+export type Category = {};
+
+export type User = {
   firstName?: string;
   lastName?: string;
   email?: string;
-}
-type UserAddress = {}
-type Cart = {}
-type CartItem = {}
-type Coupon = {}
-type Order = {}
-type OrderItem = {}
-type OrderSearchParams = {}
-type Review = {};
-type ShippingMethod = {}
-type WishlistProduct = {}
-type Wishlist = {}
-
-export {
-  Cart,
-  CartItem,
-  Category,
-  Coupon,
-  Order,
-  OrderItem,
-  OrderSearchParams,
-  Product,
-  Review,
-  ShippingMethod,
-  User,
-  UserAddress,
-  Wishlist,
-  WishlistProduct,
-  UseCategory,
-  UseProduct
 };
+
+export type UserAddress = {};
+
+export type Cart = {};
+
+export type CartItem = {};
+
+export type Coupon = {};
+
+export type Order = {};
+
+export type OrderItem = {};
+
+export type Product = {};
+
+export type Review = {};
+
+export type ShippingMethod = {};
+
+export type WishlistProduct = {};
+
+export type Wishlist = {};

packages/boilerplate/composables/src/useCart/index.ts

@@ -12,31 +12,31 @@ import { Cart, CartItem, Coupon, Product } from '../types';
 
 const params: UseCartFactoryParams<Cart, CartItem, Product, Coupon> = {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  loadCart: async (context: Context, customQuery?: CustomQuery) => {
+  load: async (context: Context) => {
     console.log('Mocked: loadCart');
     return {};
   },
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  addToCart: async (context: Context, { currentCart, product, quantity }, customQuery?: CustomQuery) => {
+  addItem: async (context: Context, { currentCart, product, quantity }, customQuery?: CustomQuery) => {
     console.log('Mocked: addToCart');
     return {};
   },
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  removeFromCart: async (context: Context, { currentCart, product }, customQuery?: CustomQuery) => {
+  removeItem: async (context: Context, { currentCart, product }, customQuery?: CustomQuery) => {
     console.log('Mocked: removeFromCart');
     return {};
   },
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  updateQuantity: async (context: Context, { currentCart, product, quantity }, customQuery?: CustomQuery) => {
+  updateItemQty: async (context: Context, { currentCart, product, quantity }, customQuery?: CustomQuery) => {
     console.log('Mocked: updateQuantity');
     return {};
   },
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  clearCart: async (context: Context, { currentCart }) => {
+  clear: async (context: Context, { currentCart }) => {
     console.log('Mocked: clearCart');
     return {};
   },
@@ -60,6 +60,4 @@ const params: UseCartFactoryParams<Cart, CartItem, Product, Coupon> = {
   }
 };
 
-const { useCart } = useCartFactory<Cart, CartItem, Product, Coupon>(params);
-
-export default useCart;
+export default useCartFactory<Cart, CartItem, Product, Coupon>(params);

packages/boilerplate/composables/src/useCategory/index.ts

@@ -1,7 +1,6 @@
 import {
   Context,
   CustomQuery,
-  UseCategory,
   useCategoryFactory,
   UseCategoryFactoryParams
 } from '@vue-storefront/core';
@@ -13,6 +12,4 @@ const params: UseCategoryFactoryParams<Category, any> = {
   }
 };
 
-const useCategory: (id: string) => UseCategory<Category> = useCategoryFactory<Category, any>(params);
-
-export default useCategory;
+export default useCategoryFactory<Category, any>(params);

packages/boilerplate/composables/src/useProduct/index.ts

@@ -3,17 +3,14 @@ import {
   CustomQuery,
   useProductFactory,
   ProductsSearchParams,
-  ProductsSearchResult,
   UseProductFactoryParams
 } from '@vue-storefront/core';
-import { UseProduct, Product } from '../types';
+import { ProductsResponse } from '../types';
 
-const params: UseProductFactoryParams<Product, any> = {
-  productsSearch: async (context: Context, params: ProductsSearchParams, customQuery?: CustomQuery): Promise<ProductsSearchResult<Product>> => {
+const params: UseProductFactoryParams<ProductsResponse, any> = {
+  productsSearch: async (context: Context, params: ProductsSearchParams, customQuery?: CustomQuery): Promise<ProductsResponse> => {
     return await context.$boilerplate.api.getProduct(params, customQuery);
   }
 };
 
-const useProduct: (cacheId: string) => UseProduct<Product> = useProductFactory<Product, any>(params);
-
-export default useProduct;
+export default useProductFactory<ProductsResponse, any>(params);

packages/boilerplate/composables/src/useReview/index.ts

@@ -1,7 +1,6 @@
 import {
   Context,
   useReviewFactory,
-  UseReview,
   UseReviewFactoryParams
 } from '@vue-storefront/core';
 import { Review } from '../types';
@@ -20,6 +19,4 @@ const params: UseReviewFactoryParams<any, any, any> = {
   }
 };
 
-const useReview: (cacheId: string) => UseReview<Review, any, any> = useReviewFactory<Review, any, any>(params);
-
-export default useReview;
+export default useReviewFactory<Review, any, any>(params);

packages/boilerplate/composables/src/useUser/index.ts

@@ -2,7 +2,6 @@
 
 import {
   Context,
-  CustomQuery,
   useUserFactory,
   UseUserFactoryParams
 } from '@vue-storefront/core';
@@ -12,7 +11,7 @@ import { User } from '../types';
 
 const params: UseUserFactoryParams<User, any, any> = {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  loadUser: async (context: Context, customQuery?: CustomQuery) => {
+  load: async (context: Context) => {
     console.log('Mocked: loadUser');
     return {};
   },
@@ -47,6 +46,4 @@ const params: UseUserFactoryParams<User, any, any> = {
   }
 };
 
-const { useUser } = useUserFactory<User, any, any>(params);
-
-export default useUser;
+export default useUserFactory<User, any, any>(params);

packages/boilerplate/composables/src/useUserBilling/index.ts

@@ -116,7 +116,7 @@ const params: UseUserBillingFactoryParams<any, any> = {
     return Promise.resolve(billing);
   },
 
-  setDefault: async (context: Context, params?) => {
+  setDefaultAddress: async (context: Context, params?) => {
     console.log('Mocked: setDefault');
     const isDefault = id => addresses[0].id === id;
 

packages/boilerplate/composables/src/useUserOrders/index.ts

@@ -3,16 +3,15 @@
 import {
   Context,
   useUserOrdersFactory,
-  UseUserOrdersFactoryParams,
-  OrdersSearchResult
+  UseUserOrdersFactoryParams
 } from '@vue-storefront/core';
-import { Order, OrderSearchParams } from '../types';
+import { OrdersResponse, OrderSearchParams } from '../types';
 
 // @todo userOrders
 
-const params: UseUserOrdersFactoryParams<Order, OrderSearchParams> = {
+const params: UseUserOrdersFactoryParams<OrdersResponse, OrderSearchParams> = {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  searchOrders: async (context: Context, params: OrderSearchParams = {}): Promise<OrdersSearchResult<Order>> => {
+  searchOrders: async (context: Context, params: OrderSearchParams = {}): Promise<OrdersResponse> => {
     console.log('Mocked: searchOrders');
 
     return {
@@ -22,6 +21,4 @@ const params: UseUserOrdersFactoryParams<Order, OrderSearchParams> = {
   }
 };
 
-const useUserOrders: () => any = useUserOrdersFactory<Order, OrderSearchParams>(params);
-
-export default useUserOrders;
+export default useUserOrdersFactory<OrdersResponse, OrderSearchParams>(params);

packages/boilerplate/composables/src/useUserShipping/index.ts

@@ -116,7 +116,7 @@ const params: UseUserShippingFactoryParams<any, any> = {
     return Promise.resolve(shipping);
   },
 
-  setDefault: async (context: Context, params?) => {
+  setDefaultAddress: async (context: Context, params?) => {
     console.log('Mocked: setDefault');
     const isDefault = id => addresses[0].id === id;
 

packages/boilerplate/composables/src/useWishlist/index.ts

@@ -11,25 +11,25 @@ export const wishlist: Ref<Wishlist> = ref(null);
 
 const params: UseWishlistFactoryParams<Wishlist, WishlistProduct, Product> = {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  loadWishlist: async (context: Context) => {
+  load: async (context: Context) => {
     console.log('Mocked: loadWishlist');
     return {};
   },
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  addToWishlist: async (context: Context, { currentWishlist, product }) => {
+  addItem: async (context: Context, { currentWishlist, product }) => {
     console.log('Mocked: addToWishlist');
     return {};
   },
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  removeFromWishlist: async (context: Context, { currentWishlist, product }) => {
+  removeItem: async (context: Context, { currentWishlist, product }) => {
     console.log('Mocked: removeFromWishlist');
     return {};
   },
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  clearWishlist: async (context: Context, { currentWishlist }) => {
+  clear: async (context: Context, { currentWishlist }) => {
     console.log('Mocked: clearWishlist');
     return {};
   },

packages/commercetools/composables/src/useUser/factoryParams.ts

@@ -1,16 +1,16 @@
-import { CustomQuery, UseUserFactoryParams, Context, UseCart, AgnosticCoupon } from '@vue-storefront/core';
+import { UseUserFactoryParams, Context, UseCart, AgnosticCoupon } from '@vue-storefront/core';
 import { Cart, Customer, LineItem, ProductVariant } from '../types/GraphQL';
 import { authenticate } from './authenticate';
 import useCart from '../useCart';
 
 type UserContext = UseCart<Cart, LineItem, ProductVariant, AgnosticCoupon> & Context;
 
-const load = async (context: Context, customQuery?: CustomQuery) => {
+const load = async (context: Context) => {
   if (context.$ct.api.isGuest()) {
     return null;
   }
 
-  const profile = await context.$ct.api.getMe({ customer: true }, customQuery);
+  const profile = await context.$ct.api.getMe({ customer: true });
   return profile.data.me.customer;
 };
 

packages/core/docs/contributing/changelog.md

@@ -6,6 +6,7 @@
 - [BREAKING] changed signatures of factory methods to always 2 arguments, details in linked PR ([#5299](https://github.com/DivanteLtd/vue-storefront/pull/5299))
 - [BREAKING] composables are always returning one field for the response, removed `totalOrders` and `totalProducts`, `useCartFactory` and `useUserFactory` are returning only composables ([#5330](https://github.com/vuestorefront/vue-storefront/pull/5330))
 - removed `formatPrice` from `useUiHelpers`, replaced by vue18n `$n` function ([#5339](https://github.com/vuestorefront/vue-storefront/pull/5339))
+- updated integration boilerplate to work with refactored names of factories mentioned above ([#5348](https://github.com/DivanteLtd/vue-storefront/pull/5348))
 
 ## 2.1.1-rc.1
 - updated version of nuxt composition-api

packages/core/nuxt-theme-module/theme/components/TopBar.vue

@@ -15,25 +15,13 @@
 
 <script>
 import { SfButton, SfTopBar } from '@storefront-ui/vue';
-import { useUiState } from '~/composables';
-import { useUser, userGetters } from '<%= options.generate.replace.composables %>';
 import LocaleSelector from './LocaleSelector';
 
 export default {
-  components: { SfTopBar,
+  components: {
+    SfTopBar,
     SfButton,
-    LocaleSelector },
-  setup() {
-    const { toggleLoginModal } = useUiState();
-    const { isAuthenticated, logout, user } = useUser();
-
-    return {
-      toggleLoginModal,
-      isAuthenticated,
-      logout,
-      user,
-      userGetters
-    };
+    LocaleSelector
   }
 };