Fix/426 pictures are not shown in the right places

api/composables.api.md

@@ -5,6 +5,7 @@
 ```ts
 
 import { AddressType } from '@shopware-pwa/commons/interfaces/models/checkout/customer/CustomerAddress';
+import { CmsSlot } from '@shopware-pwa/commons/interfaces/models/content/cms/CmsPage';
 import { Country } from '@shopware-pwa/commons/interfaces/models/system/country/Country';
 import { Customer } from '@shopware-pwa/commons/interfaces/models/checkout/customer/Customer';
 import { CustomerAddress } from '@shopware-pwa/commons/interfaces/models/checkout/customer/CustomerAddress';
@@ -52,6 +53,24 @@ export function createCheckoutStep({ stepNumber, stepFields, stepDataUpdated, }:
 // @alpha (undocumented)
 export function getStore(): any;
 
+// @alpha (undocumented)
+export enum PositionType {
+    // (undocumented)
+    CENTER = "center",
+    // (undocumented)
+    CENTER_LEFT = "center-left",
+    // (undocumented)
+    CENTER_RIGHT = "center-right",
+    // (undocumented)
+    LEFT = "left",
+    // (undocumented)
+    LEFT_BOTTOM = "left-bottom",
+    // (undocumented)
+    LEFT_TOP = "left-top",
+    // (undocumented)
+    RIGHT = "right"
+}
+
 // @alpha (undocumented)
 export type Search = (path: string, associations?: any) => any;
 
@@ -125,6 +144,19 @@ export interface UseCountries {
 // @alpha (undocumented)
 export const useCountries: () => UseCountries;
 
+// @alpha (undocumented)
+export interface UseImageProps {
+    // (undocumented)
+    getAlt: Ref<Readonly<any>>;
+    // (undocumented)
+    getImgUrl: Ref<Readonly<any>>;
+    // (undocumented)
+    getTitle: Ref<Readonly<any>>;
+}
+
+// @alpha (undocumented)
+export const useImageProps: (content: CmsSlot | undefined) => UseImageProps;
+
 // @alpha (undocumented)
 export const useNavigation: () => any;
 
@@ -201,6 +233,27 @@ export interface UseSessionContext {
 // @alpha (undocumented)
 export const useSessionContext: () => UseSessionContext;
 
+// @alpha (undocumented)
+export interface UseSlotsPositions {
+    // (undocumented)
+    centerLeftSlot: Ref<Readonly<CmsSlot | undefined>>;
+    // (undocumented)
+    centerRightSlot: Ref<Readonly<CmsSlot | undefined>>;
+    // (undocumented)
+    centerSlot: Ref<Readonly<CmsSlot | undefined>>;
+    // (undocumented)
+    leftBottomSlot: Ref<Readonly<CmsSlot | undefined>>;
+    // (undocumented)
+    leftSlot: Ref<Readonly<CmsSlot | undefined>>;
+    // (undocumented)
+    leftTopSlot: Ref<Readonly<CmsSlot | undefined>>;
+    // (undocumented)
+    rightSlot: Ref<Readonly<CmsSlot | undefined>>;
+}
+
+// @alpha (undocumented)
+export const useSlotsPositions: (slots: CmsSlot[]) => UseSlotsPositions;
+
 // @alpha (undocumented)
 export interface UseUser {
     // (undocumented)

api/helpers.api.md

@@ -72,7 +72,7 @@ export function getCmsSections(content: CmsPage): CmsSection[];
 // @alpha (undocumented)
 export const getFilterSearchCriteria: (selectedFilters: any) => any[];
 
-// @public
+// @alpha
 export function getMessagesFromErrorsArray(errors: ShopwareError[]): string[];
 
 // Warning: (ae-forgotten-export) The symbol "NavigationRoute" needs to be exported by the entry point index.d.ts

package.json

@@ -19,7 +19,7 @@
     "dev:debug": "node --inspect scripts/dev.js",
     "build": "node scripts/build.js",
     "postinstall": "node scripts/linkDependencies.js && lerna link",
-    "lint": "prettier --write --parser typescript 'packages/**/*.ts'",
+    "lint": "prettier --write --parser typescript \"packages/**/*.ts\"",
     "test": "jest",
     "test:e2e": "jest --e2e=true --runInBand",
     "test:coverage": "yarn test --coverage",

packages/cli/src/templates/shopware-pwa.config.js

@@ -1,4 +1,4 @@
 module.exports = {
   shopwareEndpoint: "<%= props.shopwareEndpoint %>",
-  shopwareAccessToken: "<%= props.shopwareAccessToken %>",
+  shopwareAccessToken: "<%= props.shopwareAccessToken %>"
 };

packages/commons/interfaces/models/content/cms/CmsPage.ts

@@ -88,19 +88,31 @@ export interface CmsBlock {
   slots: CmsSlot[];
 }
 
+/**
+ * @alpha
+ */
 export enum SectionType {
   DEFAULT = "default",
 }
 
+/**
+ * @alpha
+ */
 export enum SizingMode {
   BOXED = "boxed",
 }
 
+/**
+ * @alpha
+ */
 export enum MobileBehavior {
   BOXED = "boxed",
   WRAP = "wrap",
 }
 
+/**
+ * @alpha
+ */
 export enum BackgroundMediaMode {
   COVER = "cover",
 }

packages/composables/__tests__/cms/useImageProps.spec.ts

@@ -0,0 +1,48 @@
+import Vue from "vue";
+import VueCompositionApi from "@vue/composition-api";
+Vue.use(VueCompositionApi);
+
+import { useImageProps } from "@shopware-pwa/composables";
+
+describe("Composables - useImageProps", () => {
+  const content = {
+    data: {
+      media: {
+        title: "title",
+        alt: "alternative text",
+        url: "image-url",
+      },
+    },
+  };
+
+  const emptyContent = undefined;
+
+  it("should return computed url string", () => {
+    const { getImgUrl } = useImageProps(content as any);
+    expect(getImgUrl.value).toBe("image-url");
+  });
+
+  it("should return computed title string", () => {
+    const { getTitle } = useImageProps(content as any);
+    expect(getTitle.value).toBe("title");
+  });
+
+  it("should return computed alt string", () => {
+    const { getAlt } = useImageProps(content as any);
+    expect(getAlt.value).toBe("alternative text");
+  });
+  it("should return empty string", () => {
+    const { getImgUrl } = useImageProps(emptyContent as any);
+    expect(getImgUrl.value).toBe("");
+  });
+
+  it("should return empty string", () => {
+    const { getTitle } = useImageProps(emptyContent as any);
+    expect(getTitle.value).toBe("");
+  });
+
+  it("should return empty string", () => {
+    const { getAlt } = useImageProps(emptyContent as any);
+    expect(getAlt.value).toBe("");
+  });
+});

packages/composables/__tests__/cms/useSlotPositions.spec.ts

@@ -0,0 +1,108 @@
+import Vue from "vue";
+import VueCompositionApi from "@vue/composition-api";
+Vue.use(VueCompositionApi);
+
+import { useSlotsPositions } from "@shopware-pwa/composables";
+
+describe("Composables - useImageProps", () => {
+  const slots = [
+    {
+      slot: "right",
+    },
+    {
+      slot: "left",
+    },
+    {
+      slot: "center",
+    },
+    {
+      slot: "center-left",
+    },
+    {
+      slot: "center-right",
+    },
+    {
+      slot: "left-top",
+    },
+    {
+      slot: "left-bottom",
+    },
+  ];
+
+  const fakeSlots = [
+    {
+      slot: "this",
+    },
+    {
+      slot: "is",
+    },
+    {
+      slot: "just",
+    },
+    {
+      slot: "a",
+    },
+    {
+      slot: "test",
+    },
+  ];
+
+  it("should return computed CmsSlot which contains slot hey wit left value", () => {
+    const { leftSlot } = useSlotsPositions(slots as any);
+    expect(leftSlot.value).toMatchObject({ slot: "left" });
+  });
+
+  it("should return computed title string", () => {
+    const { rightSlot } = useSlotsPositions(slots as any);
+    expect(rightSlot.value).toMatchObject({ slot: "right" });
+  });
+
+  it("should return computed alt string", () => {
+    const { centerSlot } = useSlotsPositions(slots as any);
+    expect(centerSlot.value).toMatchObject({ slot: "center" });
+  });
+  it("should return computed url string", () => {
+    const { centerLeftSlot } = useSlotsPositions(slots as any);
+    expect(centerLeftSlot.value).toMatchObject({ slot: "center-left" });
+  });
+
+  it("should return computed title string", () => {
+    const { centerRightSlot } = useSlotsPositions(slots as any);
+    expect(centerRightSlot.value).toMatchObject({ slot: "center-right" });
+  });
+
+  it("should return computed alt string", () => {
+    const { leftTopSlot } = useSlotsPositions(slots as any);
+    expect(leftTopSlot.value).toMatchObject({ slot: "left-top" });
+  });
+  it("should return computed alt string", () => {
+    const { leftBottomSlot } = useSlotsPositions(slots as any);
+    expect(leftBottomSlot.value).toMatchObject({ slot: "left-bottom" });
+  });
+  it("should return empty string", () => {
+    const { leftSlot } = useSlotsPositions(fakeSlots as any);
+    expect(leftSlot.value).toBe(undefined);
+  });
+
+  it("should return empty string", () => {
+    const { centerSlot } = useSlotsPositions(fakeSlots as any);
+    expect(centerSlot.value).toBe(undefined);
+  });
+
+  it("should return empty string", () => {
+    const { centerLeftSlot } = useSlotsPositions(fakeSlots as any);
+    expect(centerLeftSlot.value).toBe(undefined);
+  });
+  it("should return empty string", () => {
+    const { centerRightSlot } = useSlotsPositions(fakeSlots as any);
+    expect(centerRightSlot.value).toBe(undefined);
+  });
+  it("should return empty string", () => {
+    const { leftTopSlot } = useSlotsPositions(fakeSlots as any);
+    expect(leftTopSlot.value).toBe(undefined);
+  });
+  it("should return empty string", () => {
+    const { leftBottomSlot } = useSlotsPositions(fakeSlots as any);
+    expect(leftBottomSlot.value).toBe(undefined);
+  });
+});

packages/composables/src/cms/useImageProps.ts

@@ -0,0 +1,35 @@
+import { computed, Ref } from "@vue/composition-api";
+import { CmsSlot } from "@shopware-pwa/commons/interfaces/models/content/cms/CmsPage";
+
+/**
+ * @alpha
+ */
+export interface UseImageProps {
+  getImgUrl: Ref<Readonly<any>>;
+  getAlt: Ref<Readonly<any>>;
+  getTitle: Ref<Readonly<any>>;
+}
+
+/**
+ * @alpha
+ */
+export const useImageProps = (content: CmsSlot | undefined): UseImageProps => {
+  const getImgUrl = computed(() => {
+    const imgUrl = content?.data?.media?.url;
+    return imgUrl || "";
+  });
+  const getAlt = computed(() => {
+    const alt = content?.data?.media?.alt;
+    return alt || "";
+  });
+  const getTitle = computed(() => {
+    const title = content?.data?.media?.title;
+    return title || "";
+  });
+
+  return {
+    getImgUrl,
+    getAlt,
+    getTitle,
+  };
+};

packages/composables/src/cms/useSlotsPositions.ts

@@ -0,0 +1,68 @@
+import { computed, Ref } from "@vue/composition-api";
+import { CmsSlot } from "@shopware-pwa/commons/interfaces/models/content/cms/CmsPage";
+
+/**
+ * @alpha
+ */
+export interface UseSlotsPositions {
+  leftSlot: Ref<Readonly<CmsSlot | undefined>>;
+  rightSlot: Ref<Readonly<CmsSlot | undefined>>;
+  centerSlot: Ref<Readonly<CmsSlot | undefined>>;
+  centerLeftSlot: Ref<Readonly<CmsSlot | undefined>>;
+  centerRightSlot: Ref<Readonly<CmsSlot | undefined>>;
+  leftTopSlot: Ref<Readonly<CmsSlot | undefined>>;
+  leftBottomSlot: Ref<Readonly<CmsSlot | undefined>>;
+}
+
+/**
+ * @alpha
+ */
+export enum PositionType {
+  LEFT = "left",
+  RIGHT = "right",
+  CENTER = "center",
+  CENTER_LEFT = "center-left",
+  CENTER_RIGHT = "center-right",
+  LEFT_TOP = "left-top",
+  LEFT_BOTTOM = "left-bottom",
+}
+
+/**
+ * @alpha
+ */
+export const useSlotsPositions = (slots: CmsSlot[]): UseSlotsPositions => {
+  const findSlot = (positionType: PositionType): CmsSlot | undefined =>
+    slots.find(({ slot }) => slot === positionType);
+
+  const leftSlot = computed((): CmsSlot | undefined =>
+    findSlot(PositionType.LEFT)
+  );
+  const rightSlot = computed((): CmsSlot | undefined =>
+    findSlot(PositionType.RIGHT)
+  );
+  const centerSlot = computed((): CmsSlot | undefined =>
+    findSlot(PositionType.CENTER)
+  );
+  const centerLeftSlot = computed((): CmsSlot | undefined =>
+    findSlot(PositionType.CENTER_LEFT)
+  );
+  const centerRightSlot = computed((): CmsSlot | undefined =>
+    findSlot(PositionType.CENTER_RIGHT)
+  );
+  const leftTopSlot = computed((): CmsSlot | undefined =>
+    findSlot(PositionType.LEFT_TOP)
+  );
+  const leftBottomSlot = computed((): CmsSlot | undefined =>
+    findSlot(PositionType.LEFT_BOTTOM)
+  );
+
+  return {
+    leftSlot,
+    rightSlot,
+    centerSlot,
+    centerLeftSlot,
+    centerRightSlot,
+    leftBottomSlot,
+    leftTopSlot,
+  };
+};