@designcrowd/library.brand-page 6.0.3 → 6.0.4

package/src/utils/minify-brand-page-metadata.ts

@@ -13,13 +13,14 @@ import type { TextStyleDeclaration } from '../brand-page/models/styles.model';
 import { hasRTEContent } from '../brand-page-maker/utils';
 import { useExternalRichTextEditor } from '../brand-page-maker/composables/rich-text-editor/useRichTextEditor';
 import type { Editor, JSONContent } from '@tiptap/vue-3';
-import {
-  type AssetEntry,
-  findAssetKey,
-  resolveLogoData,
-} from './build-asset-manifest';
+import { type AssetEntry, resolveLogoData } from './build-asset-manifest';
 
-type MinifiedFooterSocialLink = { imageUrl: string; url: string };
+type MinifiedFooterSocialLink = {
+  position: number;
+  id?: string;
+  imageUrl: string;
+  url: string;
+};
 
 type MinifiedFooter = {
   displayStyle?: string;
@@ -192,6 +193,18 @@ const includeBackgroundStyle = (
   return { backgroundStyle: { backgroundColor: bg } };
 };
 
+/**
+ * Look up an asset key from the manifest by matching the data content.
+ */
+const findAssetKey = (
+  assets: AssetEntry[] | undefined,
+  data: string | undefined,
+): string | undefined => {
+  if (!data || !assets) return undefined;
+
+  return assets.find((a) => a.data === data)?.key;
+};
+
 const minifyContent = (
   content: Content,
   editor: Editor,
@@ -284,6 +297,7 @@ const minifyContent = (
         ...(Array.isArray(c.items) && {
           items: c.items.map((item: any, index: number) => ({
             position: index + 1,
+            ...(item.id && { id: item.id }),
             ...st('name', item.name, editor),
             ...st('jobTitle', item.position, editor),
             ...st('testimonials', item.testimonials, editor),
@@ -312,6 +326,7 @@ const minifyContent = (
         ...(Array.isArray(c.items) && {
           items: c.items.map((item: any, index: number) => ({
             position: index + 1,
+            ...(item.id && { id: item.id }),
             ...includeImageWithKey(item.imageUrl),
             ...st('title', item.title, editor),
             ...st('paragraph', item.paragraph, editor),
@@ -342,6 +357,7 @@ const minifyContent = (
         ...(Array.isArray(c.textItems) && {
           textItems: c.textItems.map((item: any, index: number) => ({
             position: index + 1,
+            ...(item.id && { id: item.id }),
             ...st('text', item.text, editor),
             ...(includeStyle(item.textStyle) && { textStyle: item.textStyle }),
           })),
@@ -431,6 +447,7 @@ const minifyContent = (
         ...(Array.isArray(c.links) && {
           links: c.links.map((link: any, index: number) => ({
             position: index + 1,
+            ...(link.id && { id: link.id }),
             ...(includeString(link.url) && { url: link.url }),
             ...includeImageWithKey(link.imageUrl),
           })),
@@ -474,6 +491,7 @@ const minifyContent = (
         ...(Array.isArray(c.images) && {
           images: c.images.map((img: any, index: number) => ({
             position: index + 1,
+            ...(img.id && { id: img.id }),
             ...includeImageWithKey(img.imageUrl),
             ...st('imageTitle', img.imageTitle, editor),
           })),
@@ -523,7 +541,9 @@ const minifyFooter = (
     logoImageWidth: footer.logoImageWidth || undefined,
     ...(logoAssetKey && { logoAssetKey }),
     socialLinks: footer.socialLinks?.length
-      ? footer.socialLinks.map((l) => ({
+      ? footer.socialLinks.map((l, index) => ({
+          position: index + 1,
+          ...(l.id && { id: l.id }),
           imageUrl: l.imageUrl || '',
           url: l.url || '',
         }))

package/lib/src/brand-page/components/banner-section/BannerSection.mixin.d.ts

@@ -1,103 +0,0 @@
-import type { PropType } from 'vue';
-import type { BannerSectionViewModel, ButtonViewModel } from '@brand-page/view-models';
-import type { BrandPageContext } from '@brand-page/models';
-declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    viewModel: {
-        type: PropType<BannerSectionViewModel>;
-        required: true;
-    };
-    context: {
-        type: PropType<BrandPageContext>;
-        required: true;
-    };
-    containerClientWidth: {
-        type: PropType<number | undefined>;
-        required: false;
-        default: undefined;
-    };
-    containerClientHeight: {
-        type: PropType<number | undefined>;
-        required: false;
-        default: undefined;
-    };
-    contentIndex: {
-        type: NumberConstructor;
-        required: false;
-        default: undefined;
-    };
-}>, {}, {
-    shouldStackOnTop: boolean;
-}, {
-    displayAlignClass(): "" | "tw-items-center tw-w-full" | "tw-items-start tw-w-2/3" | "tw-items-end tw-w-2/3" | "tw-items-end";
-    displayButtonClass(): "" | "tw-justify-start" | "tw-justify-center" | "tw-justify-end";
-    isLeftImageAligned(): boolean;
-    isRightImageAligned(): boolean;
-    isDividedContent(): boolean;
-    isCardBannerContent(): boolean;
-    isCardAlignedOnLeft(): boolean;
-    getbuttonViewModel(): ButtonViewModel;
-    shouldShowButton(): boolean;
-    isHorizontalAligned(): boolean;
-    isBigImageAligned(): boolean;
-    renderText(): string;
-    hasDescriptionText(): boolean;
-    overlayColor(): BrandPageCssStyle;
-    opacity(): number;
-    backgroundOverlay(): BrandPageCssStyle;
-}, {
-    onResize(): void;
-}, import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    isPreview: {
-        type: BooleanConstructor;
-        required: false;
-        default: boolean;
-    };
-    isMobileDevice: {
-        type: BooleanConstructor;
-        required: false;
-        default: undefined;
-    };
-}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    isPreview: {
-        type: BooleanConstructor;
-        required: false;
-        default: boolean;
-    };
-    isMobileDevice: {
-        type: BooleanConstructor;
-        required: false;
-        default: undefined;
-    };
-}>> & Readonly<{}>, {
-    isPreview: boolean;
-    isMobileDevice: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    viewModel: {
-        type: PropType<BannerSectionViewModel>;
-        required: true;
-    };
-    context: {
-        type: PropType<BrandPageContext>;
-        required: true;
-    };
-    containerClientWidth: {
-        type: PropType<number | undefined>;
-        required: false;
-        default: undefined;
-    };
-    containerClientHeight: {
-        type: PropType<number | undefined>;
-        required: false;
-        default: undefined;
-    };
-    contentIndex: {
-        type: NumberConstructor;
-        required: false;
-        default: undefined;
-    };
-}>> & Readonly<{}>, {
-    containerClientWidth: number | undefined;
-    containerClientHeight: number | undefined;
-    contentIndex: number;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-export default _default;

package/lib/src/brand-page/components/banner-section/BannerSection.mixin.js

@@ -1,178 +0,0 @@
-import { defineComponent } from 'vue';
-import ComponentCommonMixin from '../mixins/component-common.mixin';
-import { hasValidButton as shouldShowButtonUtil } from '../../../utils/validator.util';
-import { ALIGN_CENTERED, ALIGN_LEFT_ALIGNED, ALIGN_RIGHT_ALIGNED, BIG_IMAGE, ALIGN_LEFT_BIG_IMAGE, ALIGN_RIGHT_FULL_IMAGE, ALIGN_LEFT_FULL_IMAGE, ALIGN_CARD_CENTER_IMAGE, ALIGN_CARD_LEFT_IMAGE, } from '../../constants';
-import { getRenderText, escapeContentText } from '@brand-page/utils';
-import { hasRTEContent } from '@brand-page-maker/utils';
-export default defineComponent({
-    mixins: [ComponentCommonMixin],
-    props: {
-        viewModel: {
-            type: Object,
-            required: true,
-        },
-        context: {
-            type: Object,
-            required: true,
-        },
-        containerClientWidth: {
-            type: Number,
-            required: false,
-            default: undefined,
-        },
-        containerClientHeight: {
-            type: Number,
-            required: false,
-            default: undefined,
-        },
-        contentIndex: {
-            type: Number,
-            required: false,
-            default: undefined,
-        },
-    },
-    data() {
-        return {
-            shouldStackOnTop: false,
-        };
-    },
-    mounted() {
-        this.$nextTick(() => {
-            window.addEventListener('resize', this.onResize);
-        });
-    },
-    unmounted() {
-        if (typeof window !== undefined) {
-            window.removeEventListener(`resize`, this.onResize);
-        }
-    },
-    computed: {
-        displayAlignClass() {
-            switch (this.viewModel.displayStyle) {
-                case ALIGN_CENTERED:
-                    return 'tw-items-center tw-w-full';
-                case BIG_IMAGE:
-                    return 'tw-items-center tw-w-full';
-                case ALIGN_LEFT_ALIGNED:
-                    return 'tw-items-start tw-w-2/3';
-                case ALIGN_RIGHT_ALIGNED:
-                    return 'tw-items-end tw-w-2/3';
-                case ALIGN_LEFT_BIG_IMAGE:
-                    return 'tw-items-start tw-w-2/3';
-                case ALIGN_CARD_CENTER_IMAGE:
-                    return 'tw-items-center tw-w-full';
-                case ALIGN_CARD_LEFT_IMAGE:
-                    return 'tw-items-end';
-                default:
-                    return '';
-            }
-        },
-        displayButtonClass() {
-            if (this.viewModel.buttonTextStyle) {
-                switch (this.viewModel.buttonTextStyle.textAlign) {
-                    case 'left':
-                        return 'tw-justify-start';
-                    case 'center':
-                        return 'tw-justify-center';
-                    case 'right':
-                        return 'tw-justify-end';
-                    default:
-                        return '';
-                }
-            }
-            else {
-                return this.viewModel.displayStyle === ALIGN_CARD_CENTER_IMAGE ||
-                    this.viewModel.displayStyle === ALIGN_CENTERED
-                    ? 'tw-justify-center'
-                    : 'tw-justify-start';
-            }
-        },
-        isLeftImageAligned() {
-            if (this.viewModel.displayStyle === ALIGN_LEFT_FULL_IMAGE) {
-                return true;
-            }
-            return false;
-        },
-        isRightImageAligned() {
-            if (this.viewModel.displayStyle === ALIGN_RIGHT_FULL_IMAGE) {
-                return true;
-            }
-            return false;
-        },
-        isDividedContent() {
-            if (this.viewModel.displayStyle === ALIGN_RIGHT_FULL_IMAGE ||
-                this.viewModel.displayStyle === ALIGN_LEFT_FULL_IMAGE) {
-                return true;
-            }
-            return false;
-        },
-        isCardBannerContent() {
-            if (this.viewModel.displayStyle === ALIGN_CARD_CENTER_IMAGE ||
-                this.viewModel.displayStyle === ALIGN_CARD_LEFT_IMAGE) {
-                return true;
-            }
-            return false;
-        },
-        isCardAlignedOnLeft() {
-            return this.viewModel.displayStyle === ALIGN_CARD_LEFT_IMAGE;
-        },
-        getbuttonViewModel() {
-            const { buttonViewModel, buttonLinkType, pageSlug } = this.viewModel;
-            buttonViewModel.buttonLinkType = buttonLinkType;
-            buttonViewModel.pageSlug = pageSlug;
-            return buttonViewModel;
-        },
-        shouldShowButton() {
-            return shouldShowButtonUtil({
-                buttonText: this.viewModel.buttonText,
-                buttonViewModel: this.viewModel.buttonViewModel,
-            });
-        },
-        isHorizontalAligned() {
-            return (this.viewModel.displayStyle === ALIGN_LEFT_ALIGNED ||
-                this.viewModel.displayStyle === ALIGN_RIGHT_ALIGNED ||
-                this.viewModel.displayStyle === ALIGN_LEFT_FULL_IMAGE ||
-                this.viewModel.displayStyle === ALIGN_RIGHT_FULL_IMAGE);
-        },
-        isBigImageAligned() {
-            return (this.viewModel.displayStyle === ALIGN_LEFT_BIG_IMAGE ||
-                this.viewModel.displayStyle === ALIGN_CARD_LEFT_IMAGE);
-        },
-        renderText() {
-            if (!this.viewModel.description) {
-                return '';
-            }
-            if (hasRTEContent(this.viewModel.description)) {
-                return this.viewModel.description;
-            }
-            else {
-                return getRenderText(this.viewModel.description);
-            }
-        },
-        hasDescriptionText() {
-            if (hasRTEContent(this.viewModel.description)) {
-                return escapeContentText(this.viewModel.description) !== '';
-            }
-            else {
-                return this.viewModel?.description?.length > 0;
-            }
-        },
-        overlayColor() {
-            return this.viewModel.overlayColor || 'rgb(0,0,0)';
-        },
-        opacity() {
-            return this.viewModel.overlayOpacity;
-        },
-        backgroundOverlay() {
-            return {
-                background: this.overlayColor.backgroundColor,
-                opacity: `${this.opacity}%`,
-            };
-        },
-    },
-    methods: {
-        onResize() {
-            this.shouldStackOnTop = window.innerWidth < 640;
-        },
-    },
-});

package/src/brand-page/components/banner-section/BannerSection.mixin.ts

@@ -1,210 +0,0 @@
-import { defineComponent } from 'vue';
-import type { PropType } from 'vue';
-import ComponentCommonMixin from '../mixins/component-common.mixin';
-import type {
-  BannerSectionViewModel,
-  ButtonViewModel,
-} from '@brand-page/view-models';
-import { hasValidButton as shouldShowButtonUtil } from '../../../utils/validator.util';
-import type { BrandPageContext } from '@brand-page/models';
-import {
-  ALIGN_CENTERED,
-  ALIGN_LEFT_ALIGNED,
-  ALIGN_RIGHT_ALIGNED,
-  BIG_IMAGE,
-  ALIGN_LEFT_BIG_IMAGE,
-  ALIGN_RIGHT_FULL_IMAGE,
-  ALIGN_LEFT_FULL_IMAGE,
-  ALIGN_CARD_CENTER_IMAGE,
-  ALIGN_CARD_LEFT_IMAGE,
-} from '../../constants';
-import { getRenderText, escapeContentText } from '@brand-page/utils';
-import { hasRTEContent } from '@brand-page-maker/utils';
-
-export default defineComponent({
-  mixins: [ComponentCommonMixin],
-  props: {
-    viewModel: {
-      type: Object as PropType<BannerSectionViewModel>,
-      required: true,
-    },
-    context: {
-      type: Object as PropType<BrandPageContext>,
-      required: true,
-    },
-    containerClientWidth: {
-      type: Number as PropType<number | undefined>,
-      required: false,
-      default: undefined,
-    },
-    containerClientHeight: {
-      type: Number as PropType<number | undefined>,
-      required: false,
-      default: undefined,
-    },
-    contentIndex: {
-      type: Number,
-      required: false,
-      default: undefined,
-    },
-  },
-  data() {
-    return {
-      shouldStackOnTop: false,
-    };
-  },
-  mounted() {
-    this.$nextTick(() => {
-      window.addEventListener('resize', this.onResize);
-    });
-  },
-  unmounted() {
-    if (typeof window !== undefined) {
-      window.removeEventListener(`resize`, this.onResize);
-    }
-  },
-  computed: {
-    displayAlignClass() {
-      switch (this.viewModel.displayStyle) {
-        case ALIGN_CENTERED:
-          return 'tw-items-center tw-w-full';
-        case BIG_IMAGE:
-          return 'tw-items-center tw-w-full';
-        case ALIGN_LEFT_ALIGNED:
-          return 'tw-items-start tw-w-2/3';
-        case ALIGN_RIGHT_ALIGNED:
-          return 'tw-items-end tw-w-2/3';
-        case ALIGN_LEFT_BIG_IMAGE:
-          return 'tw-items-start tw-w-2/3';
-        case ALIGN_CARD_CENTER_IMAGE:
-          return 'tw-items-center tw-w-full';
-        case ALIGN_CARD_LEFT_IMAGE:
-          return 'tw-items-end';
-        default:
-          return '';
-      }
-    },
-    displayButtonClass() {
-      if (this.viewModel.buttonTextStyle) {
-        switch (this.viewModel.buttonTextStyle.textAlign) {
-          case 'left':
-            return 'tw-justify-start';
-          case 'center':
-            return 'tw-justify-center';
-          case 'right':
-            return 'tw-justify-end';
-          default:
-            return '';
-        }
-      } else {
-        return this.viewModel.displayStyle === ALIGN_CARD_CENTER_IMAGE ||
-          this.viewModel.displayStyle === ALIGN_CENTERED
-          ? 'tw-justify-center'
-          : 'tw-justify-start';
-      }
-    },
-    isLeftImageAligned(): boolean {
-      if (this.viewModel.displayStyle === ALIGN_LEFT_FULL_IMAGE) {
-        return true;
-      }
-
-      return false;
-    },
-    isRightImageAligned(): boolean {
-      if (this.viewModel.displayStyle === ALIGN_RIGHT_FULL_IMAGE) {
-        return true;
-      }
-
-      return false;
-    },
-
-    isDividedContent(): boolean {
-      if (
-        this.viewModel.displayStyle === ALIGN_RIGHT_FULL_IMAGE ||
-        this.viewModel.displayStyle === ALIGN_LEFT_FULL_IMAGE
-      ) {
-        return true;
-      }
-
-      return false;
-    },
-    isCardBannerContent(): boolean {
-      if (
-        this.viewModel.displayStyle === ALIGN_CARD_CENTER_IMAGE ||
-        this.viewModel.displayStyle === ALIGN_CARD_LEFT_IMAGE
-      ) {
-        return true;
-      }
-
-      return false;
-    },
-    isCardAlignedOnLeft() {
-      return this.viewModel.displayStyle === ALIGN_CARD_LEFT_IMAGE;
-    },
-    getbuttonViewModel(): ButtonViewModel {
-      const { buttonViewModel, buttonLinkType, pageSlug } = this.viewModel;
-
-      buttonViewModel.buttonLinkType = buttonLinkType;
-      buttonViewModel.pageSlug = pageSlug;
-
-      return buttonViewModel;
-    },
-
-    shouldShowButton(): boolean {
-      return shouldShowButtonUtil({
-        buttonText: this.viewModel.buttonText,
-        buttonViewModel: this.viewModel.buttonViewModel,
-      });
-    },
-
-    isHorizontalAligned(): boolean {
-      return (
-        this.viewModel.displayStyle === ALIGN_LEFT_ALIGNED ||
-        this.viewModel.displayStyle === ALIGN_RIGHT_ALIGNED ||
-        this.viewModel.displayStyle === ALIGN_LEFT_FULL_IMAGE ||
-        this.viewModel.displayStyle === ALIGN_RIGHT_FULL_IMAGE
-      );
-    },
-    isBigImageAligned(): boolean {
-      return (
-        this.viewModel.displayStyle === ALIGN_LEFT_BIG_IMAGE ||
-        this.viewModel.displayStyle === ALIGN_CARD_LEFT_IMAGE
-      );
-    },
-    renderText(): string {
-      if (!this.viewModel.description) {
-        return '';
-      }
-
-      if (hasRTEContent(this.viewModel.description)) {
-        return this.viewModel.description;
-      } else {
-        return getRenderText(this.viewModel.description);
-      }
-    },
-    hasDescriptionText(): boolean {
-      if (hasRTEContent(this.viewModel.description)) {
-        return escapeContentText(this.viewModel.description) !== '';
-      } else {
-        return this.viewModel?.description?.length > 0;
-      }
-    },
-    overlayColor(): BrandPageCssStyle {
-      return this.viewModel.overlayColor || 'rgb(0,0,0)';
-    },
-    opacity(): number {
-      return this.viewModel.overlayOpacity;
-    },
-    backgroundOverlay(): BrandPageCssStyle {
-      return {
-        background: this.overlayColor.backgroundColor,
-        opacity: `${this.opacity}%`,
-      };
-    },
-  },
-  methods: {
-    onResize() {
-      this.shouldStackOnTop = window.innerWidth < 640;
-    },
-  },
-});

package/src/brand-page-maker/components/template-preview/TemplatePreviewAiBadge.vue

@@ -1,12 +0,0 @@
-<template>
-  <div
-    data-test-ai-design
-    class="tw-flex tw-flex-row tw-absolute tw-top-2.5 tw-left-2.5 tw-rounded-full tw-py-1 tw-px-2 tw-text-white tw-text-xs tw-font-bold tw-z-[25] tw-bg-gradient-to-t tw-from-[#d946ef] tw-to-[#8b5cf6]"
-  >
-    <Icon name="ai" class="tw-text-white tw-pr-1" size="sm" />
-    <span>AI</span>
-  </div>
-</template>
-<script setup lang="ts">
-import { Icon } from '@designcrowd/fe-shared-lib';
-</script>