@designcrowd/library.brand-page 5.15.21-gettyfinal → 5.15.23

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

@@ -3,12 +3,11 @@ 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, useVideoStore, } from '../../../brand-page-maker/stores';
+import { useUiStore, useBrandPageMakerUserStore, useBrandPageMakerStore, } 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',
@@ -132,37 +131,6 @@ 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;
         },
@@ -428,10 +396,6 @@ 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,7 +42,6 @@ declare const _default: import("vue").DefineComponent<{}, {
         brandPageTemplate(): any;
         brandPageTitle(): string;
         brandPageViewModel(): import("../../../brand-page").BrandPageViewModel;
-        gettyVideoIds(): string[];
         isInteractivePreviewEnabled(): boolean;
         isProduction(): boolean;
         isPublishButtonEnabled(): boolean;
@@ -557,6 +556,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,4 +1,3 @@
-import type { MediaTypes } from '../../brand-page';
 interface UserMediaItemMedia {
     token: string;
     userToken: string;
@@ -19,15 +18,4 @@ 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,7 +3732,6 @@ declare const _default: import("vue").DefineComponent<{}, {
         brandPageTemplate(): any;
         brandPageTitle(): string;
         brandPageViewModel(): import("../../../../brand-page").BrandPageViewModel;
-        gettyVideoIds(): string[];
         isInteractivePreviewEnabled(): boolean;
         isProduction(): boolean;
         isPublishButtonEnabled(): boolean;
@@ -3949,6 +3948,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;
@@ -4308,7 +4308,6 @@ 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;
@@ -4384,7 +4383,6 @@ 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,7 +3740,6 @@ 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;
@@ -3815,7 +3815,6 @@ 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;
@@ -4234,7 +4233,6 @@ 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,7 +76,6 @@ 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,7 +482,6 @@ declare const _default: import("vue").DefineComponent<{}, {
         brandPageTemplate(): any;
         brandPageTitle(): string;
         brandPageViewModel(): import("../../../brand-page").BrandPageViewModel;
-        gettyVideoIds(): string[];
         isInteractivePreviewEnabled(): boolean;
         isProduction(): boolean;
         isPublishButtonEnabled(): boolean;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@designcrowd/library.brand-page",
   "description": "A collection of Maker/Designer applications",
-  "version": "5.15.21-gettyfinal",
+  "version": "5.15.23",
   "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,8 +15,7 @@
         v-if="
           (viewModel.isBigImageType &&
             !viewModel.backgroundStyle.backgroundColor) ||
-          (viewModel.isBigImageType && viewModel.imageUrl) ||
-          (viewModel.isBigImageType && viewModel.media)
+          (viewModel.isBigImageType && viewModel.imageUrl)
         "
         :image-url="viewModel.imageUrl"
         :color-replacements="viewModel.colorReplacements"
@@ -29,7 +28,6 @@
             viewModel.isBigImageType,
         }"
         :content-index="contentIndex"
-        :media="viewModel.mediaViewModel"
       />
       <div
         class="tw-w-full tw-h-full tw-inset-0 tw-absolute"
@@ -65,7 +63,6 @@
             :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
@@ -161,7 +158,6 @@
               :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>
@@ -191,7 +187,6 @@
               :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,7 +1,6 @@
 import { defineComponent } from 'vue';
 import type { PropType } from 'vue';
 import type { BrandPageContext, ColorReplacement } from '../../models';
-import type { MediaViewModel } from '../../../lib';
 
 export default defineComponent({
   props: {
@@ -63,11 +62,6 @@ 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,22 +5,8 @@
       '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 &&
-        !media
-      "
+      v-if="imageUrl && (mediaType === 'image' || !mediaType) && !isImageBroken"
       :image-url="imageUrl"
       :alt="altText"
       :classes="imgClasses"
@@ -41,7 +27,7 @@
     />
     <Placeholder
       v-if="
-        (context.isPreview && !media && imageUrl === '') ||
+        (context.isPreview && imageUrl === '') ||
         (context.isPreview && isImageBroken)
       "
       class="tw-w-full"
@@ -56,10 +42,9 @@ 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, Video },
+  components: { Shape, Placeholder, FallbackImage },
   mixins: [MediaMixin],
 };
 </script>

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

@@ -33,7 +33,6 @@ 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/models/brand-page-context.model.ts

@@ -89,7 +89,6 @@ 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,7 +413,6 @@ export interface BannerSectionContent extends Content {
   overlayColor: BrandPageCssStyle;
   overlayOpacity: number;
   aspectRatio?: number | null;
-  media?: AbstractMedia;
 }
 
 export const MEDIA_TYPES = {
@@ -833,39 +832,6 @@ 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/view-model.util.test.ts

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