@designcrowd/library.brand-page 5.15.21 → 5.15.24-ast-previews-2

package/lib/src/shared/content-settings/store/content-settings-store.js

@@ -3,11 +3,12 @@ import { CONTENT_SETTINGS_CONFIGS, SIDE_BAR_TAB_NAMES, } from '../../../brand-pa
 import { RESERVED_FIELD_NAMES } from '../constants';
 import { UI_EVENT_SOURCES } from '../../models';
 import { CONTENT_SETTINGS_DISPLAY_MODES, ITEM_CATEGORIES, ITEM_CATEGORY_NAMES, } from '../../../brand-page-maker/models';
-import { useUiStore, useBrandPageMakerUserStore, useBrandPageMakerStore, } from '../../../brand-page-maker/stores';
+import { useUiStore, useBrandPageMakerUserStore, useBrandPageMakerStore, useVideoStore, } from '../../../brand-page-maker/stores';
 import { useUiSideBarStore } from '../../side-bar/store';
 import { createDefaultContentItemGroupState, createDefaultContentItemState, } from '../../navigation-style-settings/store';
 import { adminValidatorsDict, dummyValidator, validatorDict, } from '../../../brand-page-maker/validators';
 import { vueDeepMerge } from '../../../helpers/vue.helper';
+import {} from '../../../brand-page-maker/stores/video';
 const DEFAULT_TEXT_COLOR_DEPENDENT_TYPES = [
     'profile',
     'text',
@@ -131,6 +132,37 @@ export const useUiContentSettingsStore = defineStore('uiContentSettings', {
                 aspectRatio,
             }, this.selectedItemIndex ?? undefined);
         },
+        _setSelectedItemMedia(selectedItemId, mediaPayload) {
+            const selectedItem = this.items.find((i) => i.id === selectedItemId);
+            if (!selectedItem) {
+                if (process.env.NODE_ENV !== 'production') {
+                    throw new Error('unable to locate the selected item for setting video');
+                }
+                return;
+            }
+            if (!this.selectedItemFieldName) {
+                if (process.env.NODE_ENV !== 'production') {
+                    throw new Error('selectedItemFieldName should be defined');
+                }
+                return;
+            }
+            const replaceImageSettings = selectedItem.settings.fields[this.selectedItemFieldName]
+                .replaceImageSettings;
+            if (!replaceImageSettings) {
+                if (process.env.NODE_ENV !== 'production') {
+                    throw new Error('replaceImageSettings should be an object');
+                }
+                return;
+            }
+            replaceImageSettings.setContentMedia(selectedItem.settings.content, {
+                media: mediaPayload,
+            });
+            if (mediaPayload.type === 'getty-video') {
+                const gettyPayload = mediaPayload;
+                const videoStore = useVideoStore();
+                videoStore.setVideoUrlsWithToken(gettyPayload.token, gettyPayload.videoSrc, gettyPayload.imageSrc, gettyPayload.assetId);
+            }
+        },
         _setItems({ items }) {
             this.items = items;
         },
@@ -396,6 +428,10 @@ export const useUiContentSettingsStore = defineStore('uiContentSettings', {
             this._setSelectedItemImage(payload);
             this.onContentChanged();
         },
+        setSelectedItemMedia(selectedItemId, mediaPayload) {
+            this._setSelectedItemMedia(selectedItemId, mediaPayload);
+            this.onContentChanged();
+        },
         setItems(payload) {
             if (process.env.NODE_ENV !== 'production') {
                 const idCountMap = payload.items.reduce((prev, item) => {

package/lib/src/shared/logo-settings/components/LogoSettings.mixin.d.ts

@@ -42,6 +42,7 @@ declare const _default: import("vue").DefineComponent<{}, {
         brandPageTemplate(): any;
         brandPageTitle(): string;
         brandPageViewModel(): import("../../../brand-page").BrandPageViewModel;
+        gettyVideoIds(): string[];
         isInteractivePreviewEnabled(): boolean;
         isProduction(): boolean;
         isPublishButtonEnabled(): boolean;
@@ -556,6 +557,7 @@ declare const _default: import("vue").DefineComponent<{}, {
             logoImageHeight: string | undefined;
             logoImageWidth: string | undefined;
         }): void;
+        updatePaymentConfigCurrency(updatedPaymentConfig: import("../../../brand-page").BrandPagePaymentConfig, newCurrency: import("../../../brand-page").BrandPagePaymentConfigCurrency): void;
         setPageTitle({ pageTitle, pageIndex, }: {
             pageTitle: string;
             pageIndex: number;

package/lib/src/shared/my-uploads/models.d.ts

@@ -1,3 +1,4 @@
+import type { MediaTypes } from '../../brand-page';
 interface UserMediaItemMedia {
     token: string;
     userToken: string;
@@ -18,4 +19,15 @@ export interface UserMediaItemWithDimensions extends UserMediaItem {
     width: number;
     height: number;
 }
+export interface MediaBaseSelectedPayload {
+    type: MediaTypes;
+}
+export interface GettyVideoMediaSelectedPayload extends MediaBaseSelectedPayload {
+    assetId: string;
+    token: string;
+    mimeType: string;
+    autoPlay: boolean;
+    imageSrc: string;
+    videoSrc: string;
+}
 export {};

package/lib/src/shared/page-settings/components/new-page-modal/NewPageModal.mixin.d.ts

@@ -55,6 +55,7 @@ declare const _default: import("vue").DefineComponent<{}, {
             logoImageHeight: string | undefined;
             logoImageWidth: string | undefined;
         }): void;
+        updatePaymentConfigCurrency(updatedPaymentConfig: import("../../../../brand-page").BrandPagePaymentConfig, newCurrency: import("../../../../brand-page").BrandPagePaymentConfigCurrency): void;
         setPageTitle({ pageTitle, pageIndex, }: {
             pageTitle: string;
             pageIndex: number;

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

@@ -3732,6 +3732,7 @@ declare const _default: import("vue").DefineComponent<{}, {
         brandPageTemplate(): any;
         brandPageTitle(): string;
         brandPageViewModel(): import("../../../../brand-page").BrandPageViewModel;
+        gettyVideoIds(): string[];
         isInteractivePreviewEnabled(): boolean;
         isProduction(): boolean;
         isPublishButtonEnabled(): boolean;
@@ -3948,6 +3949,7 @@ declare const _default: import("vue").DefineComponent<{}, {
             logoImageHeight: string | undefined;
             logoImageWidth: string | undefined;
         }): void;
+        updatePaymentConfigCurrency(updatedPaymentConfig: import("../../../../brand-page").BrandPagePaymentConfig, newCurrency: import("../../../../brand-page").BrandPagePaymentConfigCurrency): void;
         setPageTitle({ pageTitle, pageIndex, }: {
             pageTitle: string;
             pageIndex: number;
@@ -4307,6 +4309,7 @@ declare const _default: import("vue").DefineComponent<{}, {
             colorReplacements?: import("../../../../brand-page").ColorReplacement[] | undefined;
             aspectRatio?: number | null | undefined;
         }): void;
+        _setSelectedItemMedia(selectedItemId: string | null, mediaPayload: import("../../../my-uploads/models").MediaBaseSelectedPayload): void;
         _setItems({ items }: {
             items: ContentItem<any>[];
         }): void;
@@ -4382,6 +4385,7 @@ declare const _default: import("vue").DefineComponent<{}, {
             colorReplacements?: import("../../../../brand-page").ColorReplacement[] | undefined;
             aspectRatio?: number | null | undefined;
         }): void;
+        setSelectedItemMedia(selectedItemId: string | null, mediaPayload: import("../../../my-uploads/models").MediaBaseSelectedPayload): void;
         setItems(payload: {
             items: ContentItem<Content>[];
         }): void;

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

@@ -3267,6 +3267,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             logoImageHeight: string | undefined;
             logoImageWidth: string | undefined;
         }): void;
+        updatePaymentConfigCurrency(updatedPaymentConfig: import("../../../../brand-page").BrandPagePaymentConfig, newCurrency: import("../../../../brand-page").BrandPagePaymentConfigCurrency): void;
         setPageTitle({ pageTitle, pageIndex, }: {
             pageTitle: string;
             pageIndex: number;
@@ -3739,6 +3740,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             colorReplacements?: import("../../../../brand-page").ColorReplacement[] | undefined;
             aspectRatio?: number | null | undefined;
         }): void;
+        _setSelectedItemMedia(selectedItemId: string | null, mediaPayload: import("../../../my-uploads/models").MediaBaseSelectedPayload): void;
         _setItems({ items }: {
             items: import("../../../content-settings/models").ContentItem<any>[];
         }): void;
@@ -3814,6 +3816,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             colorReplacements?: import("../../../../brand-page").ColorReplacement[] | undefined;
             aspectRatio?: number | null | undefined;
         }): void;
+        setSelectedItemMedia(selectedItemId: string | null, mediaPayload: import("../../../my-uploads/models").MediaBaseSelectedPayload): void;
         setItems(payload: {
             items: import("../../../content-settings/models").ContentItem<import("../../../../brand-page").Content>[];
         }): void;
@@ -4232,6 +4235,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         brandPageTemplate(): any;
         brandPageTitle(): string;
         brandPageViewModel(): import("../../../../brand-page").BrandPageViewModel;
+        gettyVideoIds(): string[];
         isInteractivePreviewEnabled(): boolean;
         isProduction(): boolean;
         isPublishButtonEnabled(): boolean;

package/lib/src/shared/page-settings/store/page-settings-store.d.ts

@@ -1,6 +1,6 @@
 import type { ContentItem } from '../../content-settings/models';
 import { PageHeaderDesktop, PageHeaderMobile, PageFooterDesktop, PageFooterMobile, VIEWPORTS } from '../../../brand-page';
-import type { Content, ImageGalleryItem, LinksItem, LogoImageModel, ViewportsType, LogoTemplateImageModel } from '../../../brand-page';
+import type { Content, ImageGalleryItem, LinksItem, LogoImageModel, ViewportsType, LogoTemplateImageModel, BrandPagePaymentConfig, BrandPagePaymentConfigCurrency } from '../../../brand-page';
 import type { ContentPage } from '../models';
 import { PAGE_SECTIONS } from '../models';
 export type PageSettingsStateSectionStyles = Partial<PageHeaderDesktop & PageHeaderMobile & PageFooterDesktop & PageFooterMobile>;
@@ -88,6 +88,7 @@ export declare const useUiPageSettingsStore: import("pinia").StoreDefinition<"ui
         logoImageHeight: string | undefined;
         logoImageWidth: string | undefined;
     }): void;
+    updatePaymentConfigCurrency(updatedPaymentConfig: BrandPagePaymentConfig, newCurrency: BrandPagePaymentConfigCurrency): void;
     setPageTitle({ pageTitle, pageIndex, }: {
         pageTitle: string;
         pageIndex: number;

package/lib/src/shared/page-settings/store/page-settings-store.js

@@ -7,6 +7,7 @@ import { useUiContentSettingsStore } from '../../content-settings/store';
 import { useBrandPageMakerStore, useBrandPageMakerUserStore, useBrandPageContainerStore, useUiStore, } from '../../../brand-page-maker/stores';
 import { useUiLogoSettingsStore } from '../../logo-settings/store';
 import { TRIGGER_TYPE, UPGRADE_CTA_LOCATIONS, useEventTracker, } from '../../../brand-page-maker/composables/useEventTracker';
+import { useShopConfigStore } from '../../ecommerce-settings/store/shop-settings-store';
 export const PAGE_SECTIONS_PAGES = 'pages';
 export const PAGE_SETTINGS_SECTIONS = {
     ...PAGE_SECTIONS,
@@ -162,6 +163,40 @@ export const useUiPageSettingsStore = defineStore('uiPageSettings', {
             this.sections[sectionName][viewport].logoImageHeight = logoImageHeight;
             this.sections[sectionName][viewport].logoImageWidth = logoImageWidth;
         },
+        updatePaymentConfigCurrency(updatedPaymentConfig, newCurrency) {
+            const currencyUpdate = {
+                name: updatedPaymentConfig.name,
+                defaultCurrency: newCurrency.iso4127Code,
+                defaultCurrencySymbol: newCurrency.symbol,
+            };
+            this.pages.forEach((page) => {
+                page.contents.forEach((contentItem) => {
+                    if (contentItem.type === 'support-me') {
+                        if (contentItem.settings.content.supportMeConfig.paymentConfig?.id ===
+                            updatedPaymentConfig.id) {
+                            Object.assign(contentItem.settings.content.supportMeConfig.paymentConfig, currencyUpdate);
+                        }
+                    }
+                    else if (contentItem.type === 'request-payment') {
+                        if (contentItem.settings.content.requestPaymentConfig.paymentConfig
+                            ?.id === updatedPaymentConfig.id) {
+                            Object.assign(contentItem.settings.content.requestPaymentConfig.paymentConfig, currencyUpdate);
+                        }
+                    }
+                    else if (contentItem.type === 'shop-section') {
+                        if (contentItem.settings.content.shopPaymentConfig.paymentConfig
+                            ?.id === updatedPaymentConfig.id) {
+                            Object.assign(contentItem.settings.content.shopPaymentConfig.paymentConfig, currencyUpdate);
+                        }
+                    }
+                });
+            });
+            const shopConfigStore = useShopConfigStore();
+            if (shopConfigStore.paymentConfig &&
+                shopConfigStore.paymentConfig.id === updatedPaymentConfig.id) {
+                Object.assign(shopConfigStore.paymentConfig, currencyUpdate);
+            }
+        },
         setPageTitle({ pageTitle, pageIndex, }) {
             const slug = getPageSlugFromPageTitle(pageTitle, this.pages.filter((_p, i) => i !== pageIndex).map((p) => p.slug));
             this.setPageTitleAndSlug({

package/lib/src/shared/publish-brand-page-with-state/PublishBrandPageModalWithState.mixin.d.ts

@@ -76,6 +76,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         brandPageTemplate(): any;
         brandPageTitle(): string;
         brandPageViewModel(): import("../../brand-page").BrandPageViewModel;
+        gettyVideoIds(): string[];
         isInteractivePreviewEnabled(): boolean;
         isProduction(): boolean;
         isPublishButtonEnabled(): boolean;

package/lib/src/shared/style-settings/components/StyleSettings.mixin.d.ts

@@ -482,6 +482,7 @@ declare const _default: import("vue").DefineComponent<{}, {
         brandPageTemplate(): any;
         brandPageTitle(): string;
         brandPageViewModel(): import("../../../brand-page").BrandPageViewModel;
+        gettyVideoIds(): string[];
         isInteractivePreviewEnabled(): boolean;
         isProduction(): boolean;
         isPublishButtonEnabled(): boolean;

package/lib/src/shared/template-settings/store/template-settings-store.js

@@ -171,11 +171,24 @@ export const useUiTemplateSettingsStore = defineStore('uiTemplateSettings', {
                     return;
                 }
                 this._setPageCount({ pageCount: result.pageCount });
-                const templates = (await Promise.all(result.paginatedItems.map(async (i) => {
-                    const template = await designTemplateClient.getTemplateByTemplateToken(i.designTemplateToken);
-                    return this.safeMapToTemplateSettingsTemplate(template);
-                }))).filter((t) => Boolean(t));
-                this._addTemplates({ templates });
+                const templates = await Promise.all(result.paginatedItems.map(async (i) => {
+                    try {
+                        if (brandPageContainerStore.isPrePurchase) {
+                            const template = await designTemplateClient.getTemplateByTemplateToken(i.designTemplateToken);
+                            return this.safeMapToTemplateSettingsTemplate(template);
+                        }
+                        else {
+                            return {
+                                id: i.designTemplateToken,
+                            };
+                        }
+                    }
+                    catch (error) {
+                        return null;
+                    }
+                }));
+                const validTemplates = templates.filter((template) => template !== null);
+                this._addTemplates({ templates: validTemplates });
                 this._setPageNoLoaded({ pageNoLoaded: pageNo });
             }
             finally {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@designcrowd/library.brand-page",
   "description": "A collection of Maker/Designer applications",
-  "version": "5.15.21",
+  "version": "5.15.24-ast-previews-2",
   "author": "Design.com Eng",
   "license": "UNLICENSED",
   "type": "module",
@@ -55,7 +55,7 @@
   },
   "dependencies": {
     "@ckpack/vue-color": "1.4.1",
-    "@designcrowd/fe-shared-lib": "1.4.1",
+    "@designcrowd/fe-shared-lib": "1.4.3",
     "@pinia/nuxt": "0.11.0",
     "@storybook/react": "9.0.4",
     "@tiptap/extension-bubble-menu": "^2.14.0",

package/src/brand-page/components/banner-section/BannerSection.vue

@@ -15,7 +15,8 @@
         v-if="
           (viewModel.isBigImageType &&
             !viewModel.backgroundStyle.backgroundColor) ||
-          (viewModel.isBigImageType && viewModel.imageUrl)
+          (viewModel.isBigImageType && viewModel.imageUrl) ||
+          (viewModel.isBigImageType && viewModel.media)
         "
         :image-url="viewModel.imageUrl"
         :color-replacements="viewModel.colorReplacements"
@@ -28,6 +29,7 @@
             viewModel.isBigImageType,
         }"
         :content-index="contentIndex"
+        :media="viewModel.mediaViewModel"
       />
       <div
         class="tw-w-full tw-h-full tw-inset-0 tw-absolute"
@@ -63,6 +65,7 @@
             :role="viewModel.role"
             img-classes="tw-w-full tw-object-cover tw-aspect-square tw-rounded-md tw-relative"
             :content-index="contentIndex"
+            :media="viewModel.mediaViewModel"
           />
         </div>
         <div
@@ -158,6 +161,7 @@
               :role="viewModel.role"
               img-classes="tw-inset-0 tw-w-full tw-h-full full-square-image tw-relative"
               :content-index="contentIndex"
+              :media="viewModel.mediaViewModel"
             />
           </div>
         </div>
@@ -187,6 +191,7 @@
               :role="viewModel.role"
               img-classes="tw-w-full tw-object-cover tw-aspect-square tw-rounded-md tw-relative"
               :content-index="contentIndex"
+              :media="viewModel.mediaViewModel"
             />
           </div>
           <div

package/src/brand-page/components/media/Media.mixin.ts

@@ -1,6 +1,7 @@
 import { defineComponent } from 'vue';
 import type { PropType } from 'vue';
 import type { BrandPageContext, ColorReplacement } from '../../models';
+import type { MediaViewModel } from '../../../lib';
 
 export default defineComponent({
   props: {
@@ -62,6 +63,11 @@ export default defineComponent({
       required: false,
       default: undefined,
     },
+    media: {
+      type: Object as PropType<MediaViewModel>,
+      required: false,
+      default: undefined,
+    },
   },
   data() {
     return {

package/src/brand-page/components/media/Media.vue

@@ -5,8 +5,22 @@
       'tw-h-full tw-w-full': mediaType === 'shape',
     }"
   >
+    <Video
+      v-if="media && media.type === 'getty-video'"
+      :media="media"
+      :class="{ 'tw-flex tw-justify-center': size }"
+      :video-classes="imgClasses"
+      :display-style="displayStyle"
+      :context="context"
+      :content-index="contentIndex"
+    />
     <FallbackImage
-      v-if="imageUrl && (mediaType === 'image' || !mediaType) && !isImageBroken"
+      v-if="
+        imageUrl &&
+        (mediaType === 'image' || !mediaType) &&
+        !isImageBroken &&
+        !media
+      "
       :image-url="imageUrl"
       :alt="altText"
       :classes="imgClasses"
@@ -27,7 +41,7 @@
     />
     <Placeholder
       v-if="
-        (context.isPreview && imageUrl === '') ||
+        (context.isPreview && !media && imageUrl === '') ||
         (context.isPreview && isImageBroken)
       "
       class="tw-w-full"
@@ -42,9 +56,10 @@ import Shape from './Shape.vue';
 import MediaMixin from './Media.mixin.ts';
 import Placeholder from '../placeholder/Placeholder.vue';
 import FallbackImage from '../fallback-image/FallbackImage.vue';
+import Video from './Video.vue';
 
 export default {
-  components: { Shape, Placeholder, FallbackImage },
+  components: { Shape, Placeholder, FallbackImage, Video },
   mixins: [MediaMixin],
 };
 </script>

package/src/brand-page/components/media/Video.vue

@@ -0,0 +1,62 @@
+<template>
+  <video
+    v-if="!context.options?.renderVideoAsImage"
+    ref="videoElement"
+    :class="videoClasses"
+    :src="media?.videoUrl"
+    autoplay
+    muted
+    loop
+    :controls="false"
+    playsinline
+    preload="metadata"
+    @canplay="attemptAutoplay"
+  />
+  <FallbackImage
+    v-else
+    :image-url="media?.previewImageUrl || ''"
+    :classes="videoClasses"
+    :styles="displayStyle"
+    :context="context"
+    :content-index="contentIndex"
+    loading="lazy"
+  />
+</template>
+<script setup lang="ts">
+import { nextTick, onMounted, ref } from 'vue';
+import { type BrandPageContext, type GettyVideoViewModel } from '../../../lib';
+import FallbackImage from '../fallback-image/FallbackImage.vue';
+
+interface Props {
+  media: GettyVideoViewModel;
+  contentIndex: number;
+  context: BrandPageContext;
+  videoClasses?: string;
+  displayStyle?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  media: undefined,
+  videoClasses: '',
+  displayStyle: '',
+});
+
+const videoElement = ref<HTMLVideoElement>();
+
+const attemptAutoplay = async () => {
+  if (props.context.options?.renderVideoAsImage || !videoElement.value) {
+    return;
+  }
+
+  try {
+    await videoElement.value.play();
+  } catch (error) {
+    console.error('Autoplay failed:', error);
+  }
+};
+
+onMounted(async () => {
+  await nextTick();
+  attemptAutoplay();
+});
+</script>

package/src/brand-page/components/page/Page.stories.ts

@@ -33,6 +33,7 @@ const pages = brandPageModel.pages.map((p) => ({
       mapToViewModel(
         brandPageModel.styles,
         brandPageModel.brandPageType || BRAND_PAGE_TYPES.default,
+        {},
       ),
     )
     .filter((x) => x !== undefined) as ContentViewModel[],

package/src/brand-page/components/page/Page.vue

@@ -50,9 +50,9 @@
                   'tw-cursor-pointer': context.isPreview,
                   'brand-page__content--outline-selected': isHeaderSelected,
                 }"
+                :is-mobile="true"
                 @open-side-menu="openSideMenu"
                 @header-container-click="onPageHeaderContainerClick"
-                :is-mobile="true"
               />
             </template>
           </MediaQuery>
@@ -211,9 +211,9 @@
                     isFooterSelected,
                 }"
                 :show-brand-crowd-logo="showBrandCrowdLogo"
+                :is-mobile="true"
                 @footer-container-click="onPageFooterContainerClick"
                 @on-logo-click="onLogoClick"
-                :is-mobile="true"
               />
             </template>
           </MediaQuery>

package/src/brand-page/models/brand-page-context.model.ts

@@ -89,6 +89,7 @@ export interface BrandPageContext {
   options?: {
     disableNavigationSideMenu?: boolean;
     mediaSizes?: MediaSizes;
+    renderVideoAsImage?: boolean;
   };
   abTests?: AbTest;
   /** Is brand page rendered for preview */

package/src/brand-page/models/index.ts

@@ -413,6 +413,7 @@ export interface BannerSectionContent extends Content {
   overlayColor: BrandPageCssStyle;
   overlayOpacity: number;
   aspectRatio?: number | null;
+  media?: AbstractMedia;
 }
 
 export const MEDIA_TYPES = {
@@ -832,6 +833,39 @@ export abstract class AbstractPageFooterStyles {
   }
 }
 
+//jyao: START: Media related entities and classes
+export type MediaTypes = 'getty-video' | 'user-upload-video' | 'image';
+
+export abstract class AbstractMedia {
+  abstract type: MediaTypes;
+}
+
+type GettyVideoMediaType = Partial<GettyVideoMedia>;
+
+export class GettyVideoMedia extends AbstractMedia {
+  type: MediaTypes = 'getty-video';
+  gettyToken: string;
+  gettyAssetId: string;
+  mimeType: string;
+
+  settings: {
+    autoPlay?: boolean;
+  };
+
+  constructor(options: GettyVideoMediaType = {}) {
+    options = cloneDeep(options);
+    super();
+
+    this.type = 'getty-video';
+    this.gettyToken = options.gettyToken || '';
+    this.gettyAssetId = options.gettyAssetId || '';
+    this.mimeType = options.mimeType || '';
+
+    this.settings = options.settings || {};
+  }
+}
+//jyao: END of media related entities and classes
+
 export class PageFooterDesktop extends AbstractPageFooterStyles {
   constructor(options: AbstractPageFooterStylesType = {}) {
     options = cloneDeep(options);

package/src/brand-page/models/payment.model.ts

@@ -52,6 +52,14 @@ export interface PaymentConfig {
   paymentOptions: PaymentOption[];
 }
 
+export interface BrandPagePaymentConfigCurrency {
+  id: string;
+  iso31662Code: string;
+  iso4127Code: string;
+  name: string;
+  symbol: string;
+}
+
 export const PAYMENT_OPTION_DISPLAY_TYPES = {
   text: 'text',
   thumbnail: 'thumbnail',

package/src/brand-page/utils/migration/migration-07.ts

@@ -1,12 +1,14 @@
-import {
-  BRAND_PAGE_TYPES,
-  DEFAULT_LOGO_HEIGHT,
-  DEFAULT_LOGO_WIDTH,
+import type {
   PageFooterDesktop,
   PageFooterMobile,
   PageHeaderDesktop,
   PageHeaderMobile,
 } from '../..';
+import {
+  BRAND_PAGE_TYPES,
+  DEFAULT_LOGO_HEIGHT,
+  DEFAULT_LOGO_WIDTH,
+} from '../..';
 import { FabricRenderClient } from '../../../clients/fabric-render-client';
 import { calculateLogoDimensions } from '../logo.util';
 import type { MigrationData } from '../migration.util';

package/src/brand-page/utils/view-model.util.test.ts

@@ -172,7 +172,11 @@ describe('view model util', () => {
     };
 
     // Act
-    const viewModel = mapToBannerSectionViewModel(bannerContent, pageStyles);
+    const viewModel = mapToBannerSectionViewModel(
+      bannerContent,
+      pageStyles,
+      {},
+    );
 
     // Assert
     const url = new URL(viewModel.imageUrl);
@@ -195,7 +199,11 @@ describe('view model util', () => {
     };
 
     // Act
-    const viewModel = mapToBannerSectionViewModel(bannerContent, pageStyles);
+    const viewModel = mapToBannerSectionViewModel(
+      bannerContent,
+      pageStyles,
+      {},
+    );
 
     // Assert
     const url = new URL(viewModel.imageUrl);