@designcrowd/library.brand-page 5.14.11 → 5.14.12

package/lib/src/shared/content-settings/components/items-field/ItemsField.mixin.d.ts

@@ -35,7 +35,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     toggleCollapsed(index: number): void;
     onDelete(index: number): void;
     onEdit(index: number): void;
-}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("itemsChange" | "itemsDelete")[], "itemsChange" | "itemsDelete", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("items-change" | "items-delete")[], "items-change" | "items-delete", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     items: {
         type: PropType<unknown[]>;
         required: true;
@@ -51,7 +51,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         default: boolean;
     };
 }>> & Readonly<{
-    onItemsChange?: ((...args: any[]) => any) | undefined;
-    onItemsDelete?: ((...args: any[]) => any) | undefined;
+    "onItems-change"?: ((...args: any[]) => any) | undefined;
+    "onItems-delete"?: ((...args: any[]) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/lib/src/shared/content-settings/components/items-field/ItemsField.mixin.js

@@ -16,7 +16,7 @@ export default defineComponent({
             default: false,
         },
     },
-    emits: ['itemsChange', 'itemsDelete'],
+    emits: ['items-change', 'items-delete'],
     data: () => ({
         itemStates: {},
     }),
@@ -47,7 +47,7 @@ export default defineComponent({
                     this.itemStates[newIndex].index = newIndex;
                 });
                 const items = fields.map((f) => f.item);
-                this.$emit('itemsChange', items);
+                this.$emit('items-change', items);
             },
         },
     },
@@ -56,7 +56,7 @@ export default defineComponent({
             this.itemStates[index].isCollapsed = !this.itemStates[index].isCollapsed;
         },
         onDelete(index) {
-            this.$emit('itemsDelete', index);
+            this.$emit('items-delete', index);
         },
         onEdit(index) {
             this.$emit('itemsEdit', index);

package/lib/src/shared/page-settings/components/page-settings/PageSettings.mixin.d.ts

@@ -2857,7 +2857,7 @@ declare const _default: import("vue").DefineComponent<{}, {
                         originalColor: string;
                         replacementColor: string;
                     }[] | undefined;
-                    imageLink: string;
+                    imageLink: string | false;
                     imageUrlOverride?: string | undefined;
                     imageTitleOverride?: string | undefined;
                 }[];
@@ -3080,7 +3080,7 @@ declare const _default: import("vue").DefineComponent<{}, {
                         originalColor: string;
                         replacementColor: string;
                     }[] | undefined;
-                    imageLink: string;
+                    imageLink: string | false;
                     imageUrlOverride?: string | undefined;
                     imageTitleOverride?: string | undefined;
                 }[];

package/lib/src/shared/page-settings/components/page-settings-section-styles/PageSettingsSectionStyles.mixin.d.ts

@@ -2818,7 +2818,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                         originalColor: string;
                         replacementColor: string;
                     }[] | undefined;
-                    imageLink: string;
+                    imageLink: string | false;
                     imageUrlOverride?: string | undefined;
                     imageTitleOverride?: string | undefined;
                 }[];
@@ -3041,7 +3041,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                         originalColor: string;
                         replacementColor: string;
                     }[] | undefined;
-                    imageLink: string;
+                    imageLink: string | false;
                     imageUrlOverride?: string | undefined;
                     imageTitleOverride?: string | undefined;
                 }[];

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@designcrowd/library.brand-page",
   "description": "A collection of Maker/Designer applications",
-  "version": "5.14.11",
+  "version": "5.14.12",
   "author": "Design.com Eng",
   "license": "UNLICENSED",
   "type": "module",

package/src/brand-page/components/button/Button.mixin.ts

@@ -116,7 +116,8 @@ export default defineComponent({
     isValidUrl(): boolean {
       if (
         this.viewModel.role === 'banner-section' ||
-        this.viewModel.role === 'booking-section'
+        this.viewModel.role === 'booking-section' ||
+        this.viewModel.role === 'images-section'
       ) {
         switch (this.viewModel.buttonLinkType) {
           case 'mailTo':
@@ -140,7 +141,8 @@ export default defineComponent({
     url(): string {
       if (
         this.viewModel.role === 'banner-section' ||
-        this.viewModel.role === 'booking-section'
+        this.viewModel.role === 'booking-section' ||
+        this.viewModel.role === 'images-section'
       ) {
         switch (this.viewModel.buttonLinkType) {
           case 'mailTo':

package/src/brand-page/components/fallback-image/FallbackImage.vue

@@ -140,6 +140,6 @@ const onImageClick = () => {
 
 <style>
 .c-image {
-  @apply tw-object-cover tw-cursor-pointer;
+  @apply tw-object-cover;
 }
 </style>

package/src/brand-page/components/image/Image.vue

@@ -117,7 +117,7 @@ export default {
 }
 
 .c-image__image {
-  @apply tw-object-cover tw-cursor-pointer tw-max-w-full tw-max-h-full tw-min-h-full tw-min-w-full;
+  @apply tw-object-cover tw-max-w-full tw-max-h-full tw-min-h-full tw-min-w-full;
 }
 
 .c-image__image--rounded {

package/src/brand-page/components/images-section/ImagesSection.test.ts

@@ -1,10 +1,22 @@
 import type { TextImageSectionViewModel } from '../../view-models';
 import { type ImagesSectionContentDisplayStyle } from '../../constants';
 import { shallowMount } from '@vue/test-utils';
+import { vi } from 'vitest';
 import ImagesSection from './ImagesSection.vue';
 import brandPageTestHelper from '@test-helpers/brand-page.tests-helper';
 
+// Mock window.open
+const mockWindowOpen = vi.fn();
+
+Object.defineProperty(window, 'open', {
+  value: mockWindowOpen,
+});
+
 describe('brand site images section', () => {
+  beforeEach(() => {
+    mockWindowOpen.mockClear();
+  });
+
   test('shouldDisplayOnFullWidth should be true when there is only one item', () => {
     // Arrange
     const context = {
@@ -56,4 +68,222 @@ describe('brand site images section', () => {
     // Assert
     expect((wrapper.vm as any).showDisplayImageInFullWidth).toBe(true);
   });
+
+  test('onSelectImage should prioritize imageLink over popup when both are available', () => {
+    // Arrange
+    const context = {
+      ...brandPageTestHelper.createTestBrandSiteContext(),
+      pageTitle: '',
+    };
+
+    const itemWithLink = {
+      ...brandPageTestHelper.createTextImageSectionViewModelItems(1)[0],
+      imageLink: 'https://example.com',
+    };
+
+    const viewModel: TextImageSectionViewModel = {
+      ...brandPageTestHelper.createTestTextImageSectionViewModel(),
+      enablePopup: true,
+      items: [itemWithLink],
+    };
+
+    const wrapper = shallowMount(ImagesSection, {
+      propsData: {
+        context,
+        viewModel,
+      },
+    });
+
+    // Act
+    (wrapper.vm as any).onSelectImage(itemWithLink);
+
+    // Assert
+    expect(mockWindowOpen).toHaveBeenCalledWith(
+      'https://example.com',
+      '_blank',
+      'noopener,noreferrer',
+    );
+    expect((wrapper.vm as any).imageModalSelectedImageIndex).toBeUndefined();
+  });
+
+  test('onSelectImage should show popup when enablePopup is true and no imageLink', () => {
+    // Arrange
+    const context = {
+      ...brandPageTestHelper.createTestBrandSiteContext(),
+      pageTitle: '',
+    };
+
+    const itemWithoutLink = {
+      ...brandPageTestHelper.createTextImageSectionViewModelItems(1)[0],
+      imageLink: false as const,
+    };
+
+    const viewModel: TextImageSectionViewModel = {
+      ...brandPageTestHelper.createTestTextImageSectionViewModel(),
+      enablePopup: true,
+      items: [itemWithoutLink],
+    };
+
+    const wrapper = shallowMount(ImagesSection, {
+      propsData: {
+        context,
+        viewModel,
+      },
+    });
+
+    // Act
+    (wrapper.vm as any).onSelectImage(itemWithoutLink);
+
+    // Assert
+    expect(mockWindowOpen).not.toHaveBeenCalled();
+    expect((wrapper.vm as any).imageModalSelectedImageIndex).toBe(0);
+  });
+
+  test('onSelectImage should do nothing when enablePopup is false and no imageLink', () => {
+    // Arrange
+    const context = {
+      ...brandPageTestHelper.createTestBrandSiteContext(),
+      pageTitle: '',
+    };
+
+    const itemWithoutLink = {
+      ...brandPageTestHelper.createTextImageSectionViewModelItems(1)[0],
+      imageLink: false as const,
+    };
+
+    const viewModel: TextImageSectionViewModel = {
+      ...brandPageTestHelper.createTestTextImageSectionViewModel(),
+      enablePopup: false,
+      items: [itemWithoutLink],
+    };
+
+    const wrapper = shallowMount(ImagesSection, {
+      propsData: {
+        context,
+        viewModel,
+      },
+    });
+
+    // Act
+    (wrapper.vm as any).onSelectImage(itemWithoutLink);
+
+    // Assert
+    expect(mockWindowOpen).not.toHaveBeenCalled();
+    expect((wrapper.vm as any).imageModalSelectedImageIndex).toBeUndefined();
+  });
+
+  test('shouldBeClickable should return false when enablePopup is false and no imageLink', () => {
+    // Arrange
+    const context = {
+      ...brandPageTestHelper.createTestBrandSiteContext(),
+      pageTitle: '',
+    };
+
+    const itemWithoutLink = {
+      ...brandPageTestHelper.createTextImageSectionViewModelItems(1)[0],
+      imageLink: false as const,
+    };
+
+    const viewModel: TextImageSectionViewModel = {
+      ...brandPageTestHelper.createTestTextImageSectionViewModel(),
+      enablePopup: false,
+      items: [itemWithoutLink],
+    };
+
+    const wrapper = shallowMount(ImagesSection, {
+      propsData: {
+        context,
+        viewModel,
+      },
+    });
+
+    // Act & Assert
+    expect((wrapper.vm as any).shouldBeClickable(itemWithoutLink)).toBe(false);
+    expect((wrapper.vm as any).shouldShowCursor(itemWithoutLink)).toBe(false);
+  });
+
+  test('image should always be visible but clickability depends on enablePopup and imageLink', () => {
+    // Arrange
+    const context = {
+      ...brandPageTestHelper.createTestBrandSiteContext(),
+      pageTitle: '',
+    };
+
+    const itemWithoutLinkOrPopup = {
+      ...brandPageTestHelper.createTextImageSectionViewModelItems(1)[0],
+      imageLink: false as const,
+    };
+
+    const itemWithLink = {
+      ...brandPageTestHelper.createTextImageSectionViewModelItems(1)[0],
+      imageLink: 'https://example.com',
+    };
+
+    // Test case 1: enablePopup false, no imageLink - should show image but not clickable
+    const viewModelNotClickable: TextImageSectionViewModel = {
+      ...brandPageTestHelper.createTestTextImageSectionViewModel(),
+      enablePopup: false,
+      items: [itemWithoutLinkOrPopup],
+    };
+
+    const wrapperNotClickable = shallowMount(ImagesSection, {
+      propsData: {
+        context,
+        viewModel: viewModelNotClickable,
+      },
+    });
+
+    expect(
+      (wrapperNotClickable.vm as any).shouldBeClickable(itemWithoutLinkOrPopup),
+    ).toBe(false);
+    expect(
+      (wrapperNotClickable.vm as any).shouldShowCursor(itemWithoutLinkOrPopup),
+    ).toBe(false);
+
+    // Test case 2: enablePopup true, no imageLink - should be clickable for popup
+    const viewModelClickablePopup: TextImageSectionViewModel = {
+      ...brandPageTestHelper.createTestTextImageSectionViewModel(),
+      enablePopup: true,
+      items: [itemWithoutLinkOrPopup],
+    };
+
+    const wrapperClickablePopup = shallowMount(ImagesSection, {
+      propsData: {
+        context,
+        viewModel: viewModelClickablePopup,
+      },
+    });
+
+    expect(
+      (wrapperClickablePopup.vm as any).shouldBeClickable(
+        itemWithoutLinkOrPopup,
+      ),
+    ).toBe(true);
+    expect(
+      (wrapperClickablePopup.vm as any).shouldShowCursor(
+        itemWithoutLinkOrPopup,
+      ),
+    ).toBe(true);
+
+    // Test case 3: enablePopup false, has imageLink - should be clickable for link
+    const viewModelClickableLink: TextImageSectionViewModel = {
+      ...brandPageTestHelper.createTestTextImageSectionViewModel(),
+      enablePopup: false,
+      items: [itemWithLink],
+    };
+
+    const wrapperClickableLink = shallowMount(ImagesSection, {
+      propsData: {
+        context,
+        viewModel: viewModelClickableLink,
+      },
+    });
+
+    expect(
+      (wrapperClickableLink.vm as any).shouldBeClickable(itemWithLink),
+    ).toBe(true);
+    expect(
+      (wrapperClickableLink.vm as any).shouldShowCursor(itemWithLink),
+    ).toBe(true);
+  });
 });

package/src/brand-page/components/images-section/ImagesSection.vue

@@ -3,35 +3,43 @@
     <TextMediaSection :view-model="viewModel" :context="context">
       <template #media="{ item }">
         <BpImage
-          v-if="shouldRenderImage"
+          v-if="shouldRenderImage && imageViewModel"
           :view-model="imageViewModel"
           :is-preview="isPreview"
           :context="context"
           :has-margin="false"
           :content-index="contentIndex"
           class="tw-w-full"
+          :class="{
+            'tw-cursor-pointer': shouldShowCursor(item),
+          }"
+          @click="shouldBeClickable(item) ? onSelectImage(item) : undefined"
         />
         <FallbackImage
           v-else-if="item.imageUrl && !hasImageError(item.itemsId)"
           :image-url="item.imageUrl"
-          :classes="`tw-rounded-md tw-object-cover tw-max-h-full tw-max-w-full tw-cursor-pointer`"
+          :classes="`tw-rounded-md tw-object-cover tw-max-h-full tw-max-w-full`"
           :class="{
             'c-image--height-limited': shouldLimitHeight,
             'tw-w-full': showDisplayImageInFullWidth,
+            'tw-cursor-pointer': shouldShowCursor(item),
           }"
           :styles="imgStyles"
           loading="lazy"
           :alt="itemImageAltText(item)"
           :context="context"
           :content-index="contentIndex"
-          @click="onSelectImage(item)"
+          @click="shouldBeClickable(item) ? onSelectImage(item) : undefined"
         />
         <Placeholder
           v-else-if="showPlaceholder(item)"
           :description="imagesSectionTr('addImagePlaceholder')"
           icon-name="images"
           :title="imagesSectionTr('imagePlaceholder')"
-          class="tw-rounded-md tw-object-cover tw-max-h-full tw-max-w-full tw-cursor-pointer tw-w-full tw-relative"
+          class="tw-rounded-md tw-object-cover tw-max-h-full tw-max-w-full tw-w-full tw-relative"
+          :class="{
+            'tw-cursor-pointer': shouldShowCursor(item),
+          }"
           :style="placeHolderStyles"
           :min-height="viewModel.items.length > 1 ? false : 160"
         />
@@ -47,29 +55,188 @@
     />
   </div>
 </template>
-<script>
-import ImagesSectionMixin from './ImagesSection.mixin.ts';
+<script setup lang="ts">
+import { computed, reactive, ref, watch } from 'vue';
+import type { PropType } from 'vue';
 import TextMediaSection from '../text-media-section/TextMediaSection.vue';
 import ImageGalleryModal from '../image-gallery/ImageGalleryModal.vue';
-import Image from '../image/Image.vue';
+import BpImage from '../image/Image.vue';
 import Placeholder from '../placeholder/Placeholder.vue';
 import FallbackImage from '../fallback-image/FallbackImage.vue';
 import { imagesSectionTr } from '../../../composables/useTranslate';
+import type {
+  TextImageSectionViewModel,
+  ImageViewModel,
+} from '../../view-models';
+import type { BrandPageContext, ImageItem, TextMediaItem } from '../../models';
+import { ASPECT_RATIOS } from '../../models';
+import { MEDIA_ONLY } from '../../constants';
+import {
+  getImageAltText,
+  getImagesSectionAspectRatioByDisplayStyle,
+} from '../../utils';
+import isURL from 'validator/lib/isURL';
+
+const DEFAULT_CENTERED_ASPECT_RATIO = '2/1';
 
-export default {
-  components: {
-    TextMediaSection,
-    ImageGalleryModal,
-    BpImage: Image,
-    Placeholder: Placeholder,
-    FallbackImage,
+interface Props {
+  viewModel: TextImageSectionViewModel;
+  context: BrandPageContext;
+  contentIndex?: number;
+}
+
+const props = defineProps<Props>();
+
+const imageModalSelectedImageIndex = ref<number | undefined>(undefined);
+const imagesBroken = reactive<Record<number, boolean>>({});
+
+watch(
+  () => props.viewModel.items,
+  (newItems, oldItems) => {
+    if (newItems !== oldItems) {
+      resetImageBrokenList();
+    }
   },
-  mixins: [ImagesSectionMixin],
-  setup() {
+  { deep: true },
+);
+
+const stylesToCssString = (styles: BrandPageCssStyle): string => {
+  return Object.entries(styles)
+    .filter(([, value]) => value !== undefined && value !== '')
+    .map(([key, value]) => {
+      const kebabKey = key.replace(/([A-Z])/g, '-$1').toLowerCase();
+      return `${kebabKey}: ${value}`;
+    })
+    .join('; ');
+};
+
+const imgStyles = computed((): string => {
+  const styleObj = getImagesSectionAspectRatioByDisplayStyle(
+    props.viewModel.items.length,
+    props.viewModel.displayStyle,
+    props.viewModel.aspectRatio,
+  );
+  return stylesToCssString(styleObj);
+});
+
+const placeHolderStyles = computed((): BrandPageCssStyle => {
+  const aspectRatio = ASPECT_RATIOS[props.viewModel.aspectRatio];
+
+  if (aspectRatio) {
+    if (props.viewModel.aspectRatio === 'circle') {
+      return {
+        aspectRatio: '1/1',
+        borderRadius: aspectRatio,
+        overflow: 'hidden',
+      };
+    } else {
+      return {
+        aspectRatio: aspectRatio,
+      };
+    }
+  } else {
     return {
-      imagesSectionTr,
+      aspectRatio: DEFAULT_CENTERED_ASPECT_RATIO,
     };
-  },
+  }
+});
+
+const images = computed((): ImageItem[] => {
+  return props.viewModel.items || [];
+});
+
+const isPreview = computed((): boolean => {
+  return props.context.isPreview;
+});
+
+const shouldLimitHeight = computed((): boolean => {
+  return (
+    props.viewModel.displayStyle === MEDIA_ONLY &&
+    props.viewModel.items.length === 1
+  );
+});
+
+const itemImageAltText = computed(() => {
+  return (item: TextMediaItem): string => getImageAltText(item, props.context);
+});
+
+const imageViewModel = computed((): ImageViewModel | undefined => {
+  const image = images.value[0];
+
+  if (!image) {
+    return;
+  }
+
+  return {
+    id: props.viewModel.id,
+    type: 'image',
+    role: 'image',
+    imageUrl: image.imageUrl,
+    imageTitle: image.imageTitle,
+    isFullWidth: props.viewModel.areImagesFullWidth,
+    aspectRatio: props.viewModel.aspectRatio,
+    height: image.height,
+    width: image.width,
+  };
+});
+
+const shouldRenderImage = computed((): boolean => {
+  return (
+    props.context.isBrandPageOrIsBrandContact &&
+    images.value.length === 1 &&
+    props.viewModel.displayStyle === MEDIA_ONLY
+  );
+});
+
+const hasBottomMargin = computed((): boolean => {
+  return props.context.isBrandPageOrIsBrandContact;
+});
+
+const showDisplayImageInFullWidth = computed((): boolean => {
+  return images.value.length == 1 || !shouldLimitHeight.value;
+});
+
+// Methods
+const onSelectImage = (item: TextMediaItem) => {
+  if (item.imageLink && isURL(item.imageLink)) {
+    window.open(item.imageLink, '_blank', 'noopener,noreferrer');
+    return;
+  }
+
+  if (props.viewModel.enablePopup) {
+    const index = images.value.findIndex((i) => i.imageUrl === item.imageUrl);
+    imageModalSelectedImageIndex.value = index;
+  }
+};
+
+const shouldShowCursor = (item: TextMediaItem): boolean => {
+  return shouldBeClickable(item);
+};
+
+const shouldBeClickable = (item: TextMediaItem): boolean => {
+  return (
+    (!!item.imageLink && isURL(item.imageLink)) || props.viewModel.enablePopup
+  );
+};
+
+const onImageModalClose = () => {
+  imageModalSelectedImageIndex.value = undefined;
+};
+
+const hasImageError = (index: number): boolean => {
+  return imagesBroken[index] || false;
+};
+
+const resetImageBrokenList = () => {
+  Object.keys(imagesBroken).forEach((key) => {
+    delete imagesBroken[key];
+  });
+};
+
+const showPlaceholder = (item: TextMediaItem): boolean => {
+  return (
+    props.context.isPreview && (!item.imageUrl || hasImageError(item.itemsId))
+  );
 };
 </script>
 

package/src/brand-page/components/shapes-section/ShapesSection.vue

@@ -11,7 +11,7 @@
         <Media
           :image-url="item.imageUrl"
           :color-replacements="item.colorReplacements"
-          :size="viewModel.size"
+          :size="(viewModel as any).size"
           :context="context"
           img-classes="tw-relative"
           :media-type="item.mediaType"
@@ -21,18 +21,28 @@
     </TextMediaSection>
   </div>
 </template>
-<script>
-import ShapesSectionMixin from './ShapesSection.mixin.ts';
+<script setup lang="ts">
+import type { PropType } from 'vue';
 import TextMediaSection from '../text-media-section/TextMediaSection.vue';
 import Media from '../media/Media.vue';
+import type { TextImageSectionViewModel } from '../../view-models';
+import type { BrandPageContext } from '../../models';
 
-export default {
-  components: {
-    TextMediaSection,
-    Media,
+const props = defineProps({
+  viewModel: {
+    type: Object as PropType<TextImageSectionViewModel>,
+    required: true,
   },
-  mixins: [ShapesSectionMixin],
-};
+  context: {
+    type: Object as PropType<BrandPageContext>,
+    required: true,
+  },
+  contentIndex: {
+    type: Number,
+    required: false,
+    default: undefined,
+  },
+});
 </script>
 
 <style scoped>