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';
@@ -21,6 +22,24 @@ import { Salutation } from '@shopware-pwa/commons/interfaces/models/system/salut
 // @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;
 
@@ -73,6 +92,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;
 
@@ -134,6 +166,27 @@ export interface UseSalutations {
 // @alpha (undocumented)
 export const useSalutations: () => UseSalutations;
 
+// @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,
+ };
+};