fix(composables): injected cms page in useListing and useProductConfigurator

docs/landing/resources/api/composables.useaddtocart.md

@@ -37,6 +37,5 @@ if (!isInCart.value) {
  quantity.value = 5
  await addToCart()
 }
-
 ```
 

docs/landing/resources/api/composables.usedefaults.md

@@ -47,7 +47,6 @@ defaultsConfigBuilder()
 module.exports = {
  // ... your standard Shopware PWA settings
 }
-
 ```
 We need to remember the structure of includes and associations. You can read more about this [in shopware docs](https://docs.shopware.com/en/shopware-platform-dev-en/admin-api-guide/reading-entities?category=shopware-platform-dev-en/admin-api-guide#parameter-overview)<!-- -->.
 

docs/landing/resources/api/composables.usenavigation.md

@@ -35,6 +35,5 @@ export declare function useNavigation(params?: {
 useNavigation()
 // get footer navigation
 useNavigation({ type: "footer-navigation" } )
-
 ```
 

docs/landing/resources/api/composables.useproductassociations.md

@@ -37,6 +37,5 @@ const { loading, loadAssociations, productAssociations } = useProductAssociation
 if (!productAssociations.value) {
  await loadAssociations()
 }
-
 ```
 

docs/landing/resources/api/composables.useuistate.md

@@ -45,7 +45,6 @@ switchState()
 // Component 2
 const {isOpen} = useUIState({stateName: 'SIDEBAR_STATE'})
 // isOpen will be true
-
 ```
 If you'll not use KEY on composable init, then state is only local
 
@@ -57,6 +56,5 @@ switchState()
 // Component 2
 const {isOpen} = useUIState()
 // isOpen will be false
-
 ```
 

packages/composables/__tests__/useListing.spec.ts

@@ -10,6 +10,9 @@ import { prepareRootContextMock } from "./contextRunner";
 jest.mock("@shopware-pwa/shopware-6-client");
 const mockedApiClient = ApiClient as jest.Mocked<typeof ApiClient>;
 
+import vueComp from "vue-demi";
+const mockedCompositionAPI = vueComp as jest.Mocked<typeof vueComp>;
+
 describe("Composables - useListing", () => {
  const rootContextMock = prepareRootContextMock();
  const mockedResourceIdentifier = ref();
@@ -25,6 +28,11 @@ describe("Composables - useListing", () => {
  .mockImplementation(({ searchMethod }) => {
  returnedSearchMethod = searchMethod;
  });
+
+ mockedComposables.useVueContext.mockReturnValue({
+ isVueComponent: false,
+ isVueScope: true,
+ });
  const getDefaultsMock = jest.fn().mockImplementation(() => {
  return { limit: 5 };
  });
@@ -98,4 +106,36 @@ describe("Composables - useListing", () => {
  rootContextMock.apiInstance
  );
  });
+
+ it("should use default useCms resource identifier", async () => {
+ mockedCompositionAPI.inject = jest.fn();
+ useListing({ listingType: "categoryListing" });
+ await returnedSearchMethod({ limit: 8 });
+ expect(mockedApiClient.getCategoryProducts).toBeCalledWith(
+ "321",
+ { limit: 8 },
+ rootContextMock.apiInstance
+ );
+ expect(mockedCompositionAPI.inject).not.toHaveBeenCalled();
+ });
+
+ it("should use injected cms page resource identifier in vue component", async () => {
+ mockedComposables.useVueContext.mockReturnValue({
+ isVueComponent: true,
+ isVueScope: false,
+ });
+ mockedCompositionAPI.inject = jest.fn().mockReturnValueOnce(
+ ref({
+ resourceIdentifier: "injectedIdentifier",
+ })
+ );
+ useListing({ listingType: "categoryListing" });
+ await returnedSearchMethod({ limit: 8 });
+ expect(mockedCompositionAPI.inject).toHaveBeenCalled();
+ expect(mockedApiClient.getCategoryProducts).toBeCalledWith(
+ "injectedIdentifier",
+ { limit: 8 },
+ rootContextMock.apiInstance
+ );
+ });
 });

packages/composables/__tests__/useProductConfigurator.spec.ts

@@ -10,6 +10,9 @@ const mockedComposables = Composables as jest.Mocked<typeof Composables>;
 import { useProductConfigurator } from "../src/logic/useProductConfigurator";
 import { Ref, ref } from "vue-demi";
 
+import vueComp from "vue-demi";
+const mockedCompositionAPI = vueComp as jest.Mocked<typeof vueComp>;
+
 describe("Composables - useProductConfigurator", () => {
  const statePage: Ref<Object | null> = ref(null);
  const rootContextMock: any = {
@@ -22,6 +25,7 @@ describe("Composables - useProductConfigurator", () => {
  };
  beforeEach(() => {
  jest.resetAllMocks();
+ statePage.value = null;
 
  mockedComposables.useCms.mockImplementation(() => {
  return {
@@ -103,6 +107,38 @@ describe("Composables - useProductConfigurator", () => {
  });
  expect(getSelectedOptions.value).toStrictEqual({});
  });
+
+ it("should use default useCms page for product options", () => {
+ mockedCompositionAPI.inject = jest.fn();
+ const { getOptionGroups } = useProductConfigurator({
+ product: {},
+ } as any);
+ expect(getOptionGroups.value).toEqual([]);
+ expect(mockedCompositionAPI.inject).not.toHaveBeenCalled();
+ });
+
+ it("should use injected cms page for product options in vue component", () => {
+ mockedComposables.useVueContext.mockReturnValue({
+ isVueComponent: true,
+ isVueScope: false,
+ });
+ const mockedConfigurator = [
+ {
+ options: [{ id: "123" }],
+ },
+ ];
+
+ mockedCompositionAPI.inject = jest.fn().mockReturnValueOnce(
+ ref({
+ configurator: mockedConfigurator,
+ })
+ );
+ const { getOptionGroups } = useProductConfigurator({
+ product: {},
+ } as any);
+ expect(mockedCompositionAPI.inject).toHaveBeenCalled();
+ expect(getOptionGroups.value).toEqual(mockedConfigurator);
+ });
  });
  describe("methods", () => {
  describe("handleChange", () => {

packages/composables/src/logic/useListing.ts

@@ -8,10 +8,13 @@ import {
  getApplicationContext,
  useDefaults,
  createListingComposable,
+ useVueContext,
 } from "@shopware-pwa/composables";
 import { ShopwareSearchParams } from "@shopware-pwa/commons/interfaces/search/SearchCriteria";
 import { Product } from "@shopware-pwa/commons/interfaces/models/content/product/Product";
 import { IUseListing } from "../factories/createListingComposable";
+import { inject, computed, ComputedRef } from "vue-demi";
+import { CmsPageResponse } from "@shopware-pwa/commons/interfaces/models/content/cms/CmsPage";
 
 /**
  * @beta
@@ -38,7 +41,15 @@ export function useListing(params?: {
  return searchProducts(searchCriteria, apiInstance);
  };
  } else {
- const { resourceIdentifier } = useCms();
+ const { resourceIdentifier: defaultIdentifier } = useCms();
+ const { isVueComponent } = useVueContext();
+ const cmsPage =
+ (isVueComponent && inject<ComputedRef<CmsPageResponse>>("cms-page")) ||
+ null;
+ const resourceIdentifier = computed(
+ () => cmsPage?.value?.resourceIdentifier ?? defaultIdentifier.value
+ );
+
  searchMethod = async (searchCriteria: Partial<ShopwareSearchParams>) => {
  if (!resourceIdentifier.value) {
  throw new Error(

packages/composables/src/logic/useProductConfigurator.ts

@@ -1,12 +1,18 @@
-import { ref, Ref, computed, unref } from "vue-demi";
+import { ref, Ref, computed, unref, inject, ComputedRef } from "vue-demi";
 import { Product } from "@shopware-pwa/commons/interfaces/models/content/product/Product";
 import { PropertyGroup } from "@shopware-pwa/commons/interfaces/models/content/property/PropertyGroup";
-import { useCms, getApplicationContext } from "@shopware-pwa/composables";
+import {
+ useCms,
+ getApplicationContext,
+ useVueContext,
+} from "@shopware-pwa/composables";
 import {
  invokePost,
  getProductEndpoint,
 } from "@shopware-pwa/shopware-6-client";
 import { getTranslatedProperty } from "@shopware-pwa/helpers";
+import { CmsPageResponse } from "@shopware-pwa/commons/interfaces/models/content/cms/CmsPage";
+
 /**
  * interface for {@link useProductConfigurator} composable
  * @beta
@@ -53,8 +59,14 @@ export function useProductConfigurator(params: {
  const product = unref(params.product);
 
  const { apiInstance } = getApplicationContext({ contextName });
+ const { isVueComponent } = useVueContext();
+
+ const { page: defaultPage } = useCms();
+ const cmsPage =
+ (isVueComponent && inject<ComputedRef<CmsPageResponse>>("cms-page")) ||
+ null;
+ const page = computed(() => cmsPage?.value ?? defaultPage.value);
 
- const { page } = useCms();
  const selected = ref({} as any);
  const isLoadingOptions = ref(!!product.options?.length);
  const parentProductId = computed(() => product.parentId);

packages/default-theme/src/cms/elements/CmsElementCategoryNavigation.vue

@@ -93,7 +93,7 @@ export default {
 
  const cmsPage = inject("cms-page")
  const resourceIdentifier = computed(
- () => cmsPage?.value?.resourceIdentifier ?? defaultIdentifier
+ () => cmsPage?.value?.resourceIdentifier ?? defaultIdentifier.value
  )
 
  const navTitle = ref(root.$t("Subcategories"))

packages/default-theme/src/cms/elements/CmsElementContactForm.vue

@@ -170,7 +170,7 @@ export default {
 
  const cmsPage = inject("cms-page")
  const resourceIdentifier = computed(
- () => cmsPage?.value?.resourceIdentifier ?? defaultIdentifier
+ () => cmsPage?.value?.resourceIdentifier ?? defaultIdentifier.value
  )
 
  const getMappedSalutations = computed(() =>

packages/default-theme/src/components/SwProductDetails.vue

@@ -70,7 +70,7 @@ import {
  useNotifications,
 } from "@shopware-pwa/composables"
 import { getProductUrl, getTranslatedProperty } from "@shopware-pwa/helpers"
-import { computed, onMounted, watch, toRefs } from "@vue/composition-api"
+import { computed, watch, toRefs } from "@vue/composition-api"
 import SwButton from "@/components/atoms/SwButton.vue"
 import SwPluginSlot from "sw-plugins/SwPluginSlot.vue"