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

package/src/shared/content-settings/components/content-settings/i18n/content-settings.de-DE.json

@@ -47,6 +47,7 @@
     "addImageButtonTitle" : "Bild hinzufügen",
     "addImageHeaderTitle" : "Bild hinzufügen",
     "imageReplaceTitle" : "Bild ersetzen",
+    "replaceMediaTitle" : "Medien ersetzen",
     "imageGalleryAddButtonTitle" : "Bilder hinzufügen",
     "imageGalleryReplaceTitle" : "Bild hinzufügen",
     "iconReplaceTitle" : "Thumbnail ersetzen",
@@ -167,6 +168,8 @@
     "styleCircleOption" : "Kreis",
     "mediaTypeImage" : "Bild",
     "mediaTypeShape" : "Form",
+    "media" : "Medien",
+    "addMediaTitle" : "Medien hinzufügen",
     "firstNameLabel" : "Vorname",
     "lastNameLabel" : "Nachname",
     "emailAddressLabel" : "E-Mail-Adresse",

package/src/shared/content-settings/components/content-settings/i18n/content-settings.es-ES.json

@@ -47,6 +47,7 @@
     "addImageButtonTitle" : "Añadir imagen",
     "addImageHeaderTitle" : "Añadir imagen",
     "imageReplaceTitle" : "Reemplazar imagen",
+    "replaceMediaTitle" : "Reemplazar elementos multimedia",
     "imageGalleryAddButtonTitle" : "Añade imágenes",
     "imageGalleryReplaceTitle" : "Añadir imagen",
     "iconReplaceTitle" : "Reemplazar miniatura",
@@ -167,6 +168,8 @@
     "styleCircleOption" : "Círculo",
     "mediaTypeImage" : "imagen",
     "mediaTypeShape" : "Forma",
+    "media" : "Redes sociales",
+    "addMediaTitle" : "Añade elementos multimedia",
     "firstNameLabel" : "Nombre",
     "lastNameLabel" : "Apellido",
     "emailAddressLabel" : "Dirección de correo electrónico",

package/src/shared/content-settings/components/content-settings/i18n/content-settings.fr-CA.json

@@ -47,6 +47,7 @@
     "addImageButtonTitle" : "Ajouter une image",
     "addImageHeaderTitle" : "Ajouter une image",
     "imageReplaceTitle" : "Remplacer l'image",
+    "replaceMediaTitle" : "Remplacer le média",
     "imageGalleryAddButtonTitle" : "Ajoutez des images",
     "imageGalleryReplaceTitle" : "Ajouter une image",
     "iconReplaceTitle" : "Remplacer la vignette",
@@ -167,6 +168,8 @@
     "styleCircleOption" : "Cercle",
     "mediaTypeImage" : "Image",
     "mediaTypeShape" : "Forme",
+    "media" : "Médias",
+    "addMediaTitle" : "Ajouter un média",
     "firstNameLabel" : "Prénom",
     "lastNameLabel" : "Nom de famille",
     "emailAddressLabel" : "Adresse courriel",

package/src/shared/content-settings/components/content-settings/i18n/content-settings.fr-FR.json

@@ -47,6 +47,7 @@
     "addImageButtonTitle" : "Ajouter une image",
     "addImageHeaderTitle" : "Ajouter une image",
     "imageReplaceTitle" : "Remplacer l'image",
+    "replaceMediaTitle" : "Remplacer un média",
     "imageGalleryAddButtonTitle" : "Ajoutez des images",
     "imageGalleryReplaceTitle" : "Ajouter une image",
     "iconReplaceTitle" : "Remplacer la vignette",
@@ -167,6 +168,8 @@
     "styleCircleOption" : "Cercle",
     "mediaTypeImage" : "Image",
     "mediaTypeShape" : "Forme",
+    "media" : "Réseaux",
+    "addMediaTitle" : "Ajouter un média",
     "firstNameLabel" : "Prénom",
     "lastNameLabel" : "Nom de famille",
     "emailAddressLabel" : "Adresse e-mail",

package/src/shared/content-settings/components/content-settings/i18n/content-settings.json

@@ -50,6 +50,7 @@
     "addImageButtonTitle": "Add image",
     "addImageHeaderTitle": "Add image",
     "imageReplaceTitle": "Replace image",
+    "replaceMediaTitle": "Replace media",
 
     "imageGalleryAddButtonTitle": "Add images",
     "imageGalleryReplaceTitle": "Add image",
@@ -184,6 +185,9 @@
     "mediaTypeImage": "image",
     "mediaTypeShape": "shape",
 
+    "media": "Media",
+    "addMediaTitle": "Add media",
+
     "firstNameLabel": "First name",
     "lastNameLabel": "Last name",
     "emailAddressLabel": "Email address",

package/src/shared/content-settings/components/content-settings/i18n/content-settings.pt-BR.json

@@ -47,6 +47,7 @@
     "addImageButtonTitle" : "Adicionar imagem",
     "addImageHeaderTitle" : "Adicionar imagem",
     "imageReplaceTitle" : "Substitua a imagem",
+    "replaceMediaTitle" : "Substituir mídia",
     "imageGalleryAddButtonTitle" : "Adicionar imagens",
     "imageGalleryReplaceTitle" : "Adicionar imagem",
     "iconReplaceTitle" : "Substituir miniatura",
@@ -167,6 +168,8 @@
     "styleCircleOption" : "Circle",
     "mediaTypeImage" : "imagem",
     "mediaTypeShape" : "forma",
+    "media" : "Multimídia",
+    "addMediaTitle" : "Adicionar mídia",
     "firstNameLabel" : "Nome",
     "lastNameLabel" : "Sobrenome",
     "emailAddressLabel" : "Endereço de e-mail",

package/src/shared/content-settings/components/content-settings/i18n/content-settings.pt-PT.json

@@ -47,6 +47,7 @@
     "addImageButtonTitle" : "Adicionar imagem",
     "addImageHeaderTitle" : "Adicionar imagem",
     "imageReplaceTitle" : "Substitua a imagem",
+    "replaceMediaTitle" : "Substituir multimédia",
     "imageGalleryAddButtonTitle" : "Adicionar imagens",
     "imageGalleryReplaceTitle" : "Adicionar imagem",
     "iconReplaceTitle" : "Substituir miniatura",
@@ -167,6 +168,8 @@
     "styleCircleOption" : "Círculo",
     "mediaTypeImage" : "image",
     "mediaTypeShape" : "forma",
+    "media" : "Multimédia",
+    "addMediaTitle" : "Adicionar multimédia",
     "firstNameLabel" : "Primeiro nome",
     "lastNameLabel" : "Apelido",
     "emailAddressLabel" : "Endereço de email",

package/src/shared/content-settings/components/content-settings-item/ContentSettingsItem.mixin.ts

@@ -113,6 +113,7 @@ export default defineComponent({
           this.brandPageData.brandPageType === BRAND_PAGE_TYPES.brandContact,
         options: {
           mediaSizes: MEDIA_SIZES.size1x,
+          renderVideoAsImage: true,
         },
         isCapturingPreview: false,
       };

package/src/shared/content-settings/components/focused-content-item-settings/FocusedContentItemSettings.mixin.ts

@@ -88,6 +88,7 @@ export default defineComponent({
           this.brandPageData.brandPageType === BRAND_PAGE_TYPES.brandContact,
         options: {
           mediaSizes: MEDIA_SIZES.size1x,
+          renderVideoAsImage: true,
         },
         isCapturingPreview: false,
       };

package/src/shared/content-settings/components/image-field/ImageField.mixin.ts

@@ -5,6 +5,7 @@ import BrandPageIcon from '../../../../brand-page/components/icon/Icon.vue';
 import type { ContentItemFieldSettings } from '../../models';
 import { isURL } from '../../../../utils/validator.util';
 import { commonTr } from '../../../../composables/useTranslate';
+import { useVideoStore } from '../../../../brand-page-maker/stores/video/video-store';
 
 const ACCEPTED_MIME_TYPES = 'image/png, image/jpeg, image/svg+xml';
 
@@ -47,6 +48,16 @@ export default defineComponent({
       required: false,
       default: undefined,
     },
+    mediaViewModel: {
+      type: Object,
+      required: false,
+      default: undefined,
+    },
+    content: {
+      type: Object,
+      required: false,
+      default: undefined,
+    },
   },
   emits: ['update:modelValue', 'on-intent-image-replace'],
   data() {
@@ -61,6 +72,24 @@ export default defineComponent({
 
     imageUrl: {
       get(): string {
+        if (
+          this.content?.type === 'banner-section' &&
+          this.content?.media?.type === 'getty-video' &&
+          this.name === 'imageUrl'
+        ) {
+          const gettyToken = this.content?.media.gettyToken;
+
+          if (gettyToken) {
+            const videoStore = useVideoStore();
+
+            const videoUrls = videoStore.getVideoUrlsForToken(gettyToken);
+
+            if (videoUrls?.previewImageUrl) {
+              return videoUrls.previewImageUrl;
+            }
+          }
+        }
+
         return this.imgValue;
       },
       set(newVal: string): void {
@@ -75,7 +104,7 @@ export default defineComponent({
     addTitle(): string {
       return this.mediaType === 'shape'
         ? commonTr('addShapeLabel')
-        : commonTr('addImageLabel');
+        : commonTr('addMediaLabel');
     },
   },
   watch: {
@@ -93,6 +122,7 @@ export default defineComponent({
     },
 
     onRemove() {
+      this.content.media = undefined;
       this.imgValue = '';
       this.imageUrl = '';
     },

package/src/shared/content-settings/components/payment-config-field/PaymentConfigField.mixin.ts

@@ -2,6 +2,7 @@ import type { PropType } from 'vue';
 import { computed, defineComponent } from 'vue';
 import type {
   BrandPagePaymentConfig,
+  BrandPagePaymentConfigCurrency,
   PaymentConfig,
   RequestPaymentConfig,
 } from '../../../../brand-page';
@@ -12,6 +13,8 @@ import {
 } from '../../../../brand-page-maker/stores';
 import { useShopConfigStore } from '../../../../shared/ecommerce-settings/store/shop-settings-store';
 import { paymentConfigTr } from '../../../../composables/useTranslate';
+import brandPageClient from '../../../../clients/brand-page-client';
+import { useUiPageSettingsStore } from '../../../../shared/page-settings/store';
 
 export default defineComponent({
   props: {
@@ -35,6 +38,7 @@ export default defineComponent({
   },
   setup() {
     const brandPageContainerStore = useBrandPageContainerStore();
+    const uiPageSettingsStore = useUiPageSettingsStore();
     const eventManagerStore = useEventManagerStore();
     const shopConfigStore = useShopConfigStore();
 
@@ -46,11 +50,13 @@ export default defineComponent({
       brandPageContainerStore,
       eventManagerStore,
       shopConfigStore,
+      uiPageSettingsStore,
     };
   },
   emits: ['update:modelValue'],
   data: () => ({
     selectedPaymentConfig: undefined as BrandPagePaymentConfig | undefined,
+    isCurrencyUpdating: false,
   }),
   computed: {
     currencySymbol(): string {
@@ -153,5 +159,33 @@ export default defineComponent({
 
       this.$emit('update:modelValue', payload);
     },
+    async onCurrencySelected(
+      selectedCurrency: BrandPagePaymentConfigCurrency,
+    ): Promise<void> {
+      if (
+        this.selectedPaymentConfig.defaultCurrency ===
+        selectedCurrency.iso4127Code
+      ) {
+        return;
+      }
+
+      this.isCurrencyUpdating = true;
+
+      const updatedPaymentConfig =
+        await brandPageClient.updatePaymentConfigCurrencyAsync(
+          this.brandPageToken,
+          this.selectedPaymentConfig.id,
+          selectedCurrency.id,
+        );
+
+      this.uiPageSettingsStore.updatePaymentConfigCurrency(
+        updatedPaymentConfig,
+        selectedCurrency,
+      );
+
+      await this.brandPageContainerStore.saveBrandPage();
+
+      this.isCurrencyUpdating = false;
+    },
   },
 });

package/src/shared/content-settings/components/payment-config-field/PaymentConfigField.vue

@@ -10,12 +10,22 @@
       </p>
 
       <!-- Start Payment Config Dropdown -->
-      <PaymentConfigDropdown
-        :brand-page-token="brandPageToken"
-        :payment-config-id="selectedPaymentConfigId"
-        @on-add-payment-provider-click="onAddPaymentProviderClick"
-        @on-payment-config-selected="onPaymentConfigSelected"
-      />
+      <div class="tw-relative">
+        <PaymentConfigDropdown
+          :brand-page-token="brandPageToken"
+          :payment-config-id="selectedPaymentConfigId"
+          @on-add-payment-provider-click="onAddPaymentProviderClick"
+          @on-payment-config-selected="onPaymentConfigSelected"
+          @on-currency-selected="onCurrencySelected"
+        />
+        <div
+          v-if="isCurrencyUpdating"
+          class="tw-absolute tw-top-0 tw-w-full tw-h-full tw-flex tw-justify-center tw-items-center tw-opacity-50 tw-bg-grayscale-100"
+        >
+          <Loader />
+        </div>
+      </div>
+
       <!-- End Payment Config Dropdown -->
     </template>
 
@@ -49,8 +59,12 @@
   </div>
 </template>
 <script>
-import { Button, HelloBar } from '@designcrowd/fe-shared-lib';
-import { PaymentConfigDropdown } from '@designcrowd/fe-shared-lib';
+import {
+  Button,
+  HelloBar,
+  PaymentConfigDropdown,
+  Loader,
+} from '@designcrowd/fe-shared-lib';
 import PaymentConfigFieldMixin from './PaymentConfigField.mixin.ts';
 import { paymentConfigTr } from '../../../../composables/useTranslate';
 
@@ -59,6 +73,7 @@ export default {
     Button,
     PaymentConfigDropdown,
     HelloBar,
+    Loader,
   },
   mixins: [PaymentConfigFieldMixin],
   setup(props, context) {

package/src/shared/content-settings/components/replace-image-base-settings/ReplaceImageBaseSettings.vue

@@ -66,7 +66,7 @@
           <UnsplashLibrary @on-select-image="onDesignSelected" />
         </div>
         <div v-if="tab.id === 'VIDEO_LIBRARY'">
-          <VideoLibrary @on-select-video="onDesignSelected" />
+          <VideoLibrary @on-select-video="onVideoSelected" />
         </div>
         <div v-if="tab.id === 'SHAPE_LIBRARY'">
           <ShapeLibrary @on-select-image="onShapeSelected" />
@@ -91,7 +91,10 @@ import type {
   ReplaceImageSettingsTabId,
   ReplaceImageSettingsBase,
 } from '../../models';
-import type { UserMediaItemWithDimensions } from '../../../my-uploads/models';
+import type {
+  MediaBaseSelectedPayload,
+  UserMediaItemWithDimensions,
+} from '../../../my-uploads/models';
 import {
   useBrandPageContainerStore,
   useBrandPageMakerUserStore,
@@ -176,6 +179,7 @@ const emit = defineEmits<{
       aspectRatio: number;
     },
   ];
+  'on-video-selected': [videoPayload: MediaBaseSelectedPayload];
 }>();
 
 const containerStore = useBrandPageContainerStore();
@@ -260,6 +264,10 @@ const onDesignSelected = (image: UserMediaItemWithDimensions) => {
   emit('on-design-selected', image);
 };
 
+const onVideoSelected = (videoPayload: MediaBaseSelectedPayload) => {
+  emit('on-video-selected', videoPayload);
+};
+
 const switchActiveTab = (id: string) => {
   tabs.value.forEach((tab: Tab) => {
     tab.active = tab.id === id;

package/src/shared/content-settings/models.ts

@@ -12,6 +12,7 @@ import type {
   ValidateResult,
 } from '../../brand-page-maker/models';
 import type { UserState } from '../../brand-page-maker/stores';
+import type { MediaBaseSelectedPayload } from '../my-uploads/models';
 
 export interface ContentItemFieldSettings {
   errorMessage: string;
@@ -50,6 +51,7 @@ export interface ContentReplaceImageSettings<TContent>
     index?: number,
   ) => void;
 }
+
 export interface ReplaceImageSettingsBase {
   tabs: ReplaceImageSettingsTabId[];
   buttonTitleAdd: string;
@@ -73,6 +75,7 @@ export interface SetContentMediaPayload {
   mediaType?: string;
   size?: string;
   imageLink: string;
+  media?: MediaBaseSelectedPayload;
 }
 
 export interface ContentItem<TContent> {

package/src/shared/content-settings/store/content-settings-store.ts

@@ -38,6 +38,7 @@ import {
   useUiStore,
   useBrandPageMakerUserStore,
   useBrandPageMakerStore,
+  useVideoStore,
 } from '../../../brand-page-maker/stores';
 import { useUiSideBarStore } from '../../side-bar/store';
 import {
@@ -51,6 +52,12 @@ import {
 } from '../../../brand-page-maker/validators';
 import { vueDeepMerge } from '../../../helpers/vue.helper';
 
+import type {
+  GettyVideoMediaSelectedPayload,
+  MediaBaseSelectedPayload,
+} from '../../my-uploads/models';
+import {} from '../../../brand-page-maker/stores/video';
+
 const DEFAULT_TEXT_COLOR_DEPENDENT_TYPES: readonly ContentType[] = [
   'profile',
   'text',
@@ -266,6 +273,58 @@ export const useUiContentSettingsStore = defineStore('uiContentSettings', {
         this.selectedItemIndex ?? undefined,
       );
     },
+    _setSelectedItemMedia(
+      selectedItemId: string | null,
+      mediaPayload: MediaBaseSelectedPayload,
+    ): void {
+      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 as GettyVideoMediaSelectedPayload;
+        const videoStore = useVideoStore();
+
+        videoStore.setVideoUrlsWithToken(
+          gettyPayload.token,
+          gettyPayload.videoSrc,
+          gettyPayload.imageSrc,
+          gettyPayload.assetId,
+        );
+      }
+    },
     _setItems({ items }: { items: ContentItem<any>[] }): void {
       this.items = items;
     },
@@ -708,6 +767,15 @@ export const useUiContentSettingsStore = defineStore('uiContentSettings', {
       this.onContentChanged();
     },
 
+    setSelectedItemMedia(
+      selectedItemId: string | null,
+      mediaPayload: MediaBaseSelectedPayload,
+    ) {
+      this._setSelectedItemMedia(selectedItemId, mediaPayload);
+
+      this.onContentChanged();
+    },
+
     setItems(payload: { items: ContentItem<Content>[] }) {
       if (process.env.NODE_ENV !== 'production') {
         const idCountMap = payload.items.reduce<Record<string, number>>(

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

@@ -1,3 +1,5 @@
+import type { MediaTypes } from '../../brand-page';
+
 interface UserMediaItemMedia {
   token: string;
   userToken: string;
@@ -20,3 +22,17 @@ 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;
+}

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

@@ -15,6 +15,8 @@ import type {
   LogoImageModel,
   ViewportsType,
   LogoTemplateImageModel,
+  BrandPagePaymentConfig,
+  BrandPagePaymentConfigCurrency,
 } from '../../../brand-page';
 import type { ContentPage } from '../models';
 import { PAGE_SECTIONS } from '../models';
@@ -33,6 +35,7 @@ import {
   UPGRADE_CTA_LOCATIONS,
   useEventTracker,
 } from '../../../brand-page-maker/composables/useEventTracker';
+import { useShopConfigStore } from '../../ecommerce-settings/store/shop-settings-store';
 
 // TODO - double check this is logically correct
 export type PageSettingsStateSectionStyles = Partial<
@@ -344,6 +347,61 @@ export const useUiPageSettingsStore = defineStore('uiPageSettings', {
       this.sections[sectionName][viewport].logoImageHeight = logoImageHeight;
       this.sections[sectionName][viewport].logoImageWidth = logoImageWidth;
     },
+    updatePaymentConfigCurrency(
+      updatedPaymentConfig: BrandPagePaymentConfig,
+      newCurrency: BrandPagePaymentConfigCurrency,
+    ) {
+      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,

package/src/shared/template-settings/store/template-settings-store.ts

@@ -273,20 +273,33 @@ export const useUiTemplateSettingsStore = defineStore('uiTemplateSettings', {
 
         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): t is TemplateSettingsTemplate => 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,
+                } as TemplateSettingsTemplate;
+              }
+            } catch (error) {
+              return null;
+            }
+          }),
+        );
+
+        const validTemplates = templates.filter(
+          (template) => template !== null,
+        );
+
+        this._addTemplates({ templates: validTemplates });
+
         this._setPageNoLoaded({ pageNoLoaded: pageNo });
       } finally {
         this._setIsBusy({ isBusy: false });