@designcrowd/library.brand-page 5.15.1 → 5.15.3

package/lib/src/shared/content-settings/components/content-settings/ContentSettings.stories.js

@@ -23,6 +23,7 @@ export const Sample = () => {
         canUsePremiumFontFamily: true,
         canUseRichTextEditor: false,
         maxNumOfPages: DEFAULT_MAX_NUM_OF_PAGES,
+        canUseGettyVideos: true,
     };
     const pinia = setupStoryPinia();
     const contentSettingsStore = useUiContentSettingsStore();

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

@@ -359,9 +359,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             paymentConfig: BrandPagePaymentConfig | undefined;
             pages: import("../../../../brand-page").PageModel[];
         }): void;
-        setPaymentConfig(payload: {
-            paymentConfig: BrandPagePaymentConfig | undefined;
-        }): void;
+        setPaymentConfig(value: BrandPagePaymentConfig): void;
         getProductById(id: string): import("../../../../brand-page/models/shop.model").ProductModel | undefined;
         addProduct(product: import("../../../../brand-page/models/shop.model").ProductModel): void;
         updateProduct(id: string, updatedProduct: import("../../../../brand-page/models/shop.model").ProductModel): void;

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

@@ -117,9 +117,7 @@ export default defineComponent({
                 return;
             }
             if (this.isShop) {
-                this.shopConfigStore.setPaymentConfig({
-                    paymentConfig: paymentConfig,
-                });
+                this.shopConfigStore.setPaymentConfig(paymentConfig);
             }
             this.selectedPaymentConfig = paymentConfig;
             const value = {

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

@@ -15,6 +15,7 @@ export interface FieldSettingsBase {
 export declare const ReplaceImageSettingsTabIds: {
     readonly ICON: "ICON";
     readonly IMAGE_LIBRARY: "IMAGE_LIBRARY";
+    readonly VIDEO_LIBRARY: "VIDEO_LIBRARY";
     readonly MY_UPLOADS: "MY_UPLOADS";
     readonly MY_DESIGNS: "MY_DESIGNS";
     readonly SHAPE_LIBRARY: "SHAPE_LIBRARY";

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

@@ -1,6 +1,7 @@
 export const ReplaceImageSettingsTabIds = {
     ICON: 'ICON',
     IMAGE_LIBRARY: 'IMAGE_LIBRARY',
+    VIDEO_LIBRARY: 'VIDEO_LIBRARY',
     MY_UPLOADS: 'MY_UPLOADS',
     MY_DESIGNS: 'MY_DESIGNS',
     SHAPE_LIBRARY: 'SHAPE_LIBRARY',

package/lib/src/shared/ecommerce-settings/store/shop-settings-store.d.ts

@@ -99,9 +99,7 @@ export declare const useShopConfigStore: import("pinia").StoreDefinition<"shopCo
         paymentConfig: BrandPagePaymentConfig | undefined;
         pages: PageModel[];
     }): void;
-    setPaymentConfig(payload: {
-        paymentConfig: BrandPagePaymentConfig | undefined;
-    }): void;
+    setPaymentConfig(value: BrandPagePaymentConfig): void;
     getProductById(id: string): ProductModel | undefined;
     addProduct(product: ProductModel): void;
     updateProduct(id: string, updatedProduct: ProductModel): void;

package/lib/src/shared/ecommerce-settings/store/shop-settings-store.js

@@ -40,8 +40,8 @@ export const useShopConfigStore = defineStore('shopConfig', {
                 Object.assign($state, newState);
             });
         },
-        setPaymentConfig(payload) {
-            this.paymentConfig = payload.paymentConfig;
+        setPaymentConfig(value) {
+            this.paymentConfig = value;
         },
         getProductById(id) {
             return this.products.find((x) => x.id === id);

package/lib/src/shared/models.d.ts

@@ -23,6 +23,7 @@ export interface Endpoints {
     getAllUserMediaEndpoint: string;
     userPolicyDataEndpoint: string;
     getUnsplashMediaRootEndpoint: string;
+    getGettyEndpoint: string;
 }
 export declare const UI_EVENT_SOURCES: {
     readonly contentSettings: "contentSettings";

package/lib/src/shared/my-uploads/MyMedia.stories.js

@@ -12,6 +12,7 @@ const defaultUserEndpoints = {
     getAllUserMediaEndpoint: GET_ALL_USER_MEDIA_ENDPOINT,
     userPolicyDataEndpoint: USER_POLICY_DATA_ENDPOINT,
     getUnsplashMediaRootEndpoint: '',
+    getGettyEndpoint: '',
 };
 const supportedFileExtensions = ['jpg', 'png', 'gif'];
 const mediaType = 'favicon';

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

@@ -3104,6 +3104,7 @@ declare const _default: import("vue").DefineComponent<{}, {
         canUsePremiumFontFamily: boolean;
         maxNumOfPages: number;
         canUseRichTextEditor: boolean;
+        canUseGettyVideos: boolean;
     }>;
     isAdmin: import("vue").ComputedRef<boolean>;
     isBrandSite: import("vue").ComputedRef<boolean>;

package/package.json

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

package/src/brand-page/components/shop/FeaturedDisplay.vue

@@ -65,6 +65,10 @@ import TextWrapper from '../text-wrapper/TextWrapper.vue';
 import { type PropType } from 'vue';
 import type { ShopViewModel } from '../../view-models';
 import type { ProductModel } from '../../models/shop.model';
+import { useShopConfigStore } from '../../../shared/ecommerce-settings/store/shop-settings-store';
+import { computed } from 'vue';
+
+const shopSettingStore = useShopConfigStore();
 
 const props = defineProps({
   context: {
@@ -75,11 +79,6 @@ const props = defineProps({
     type: Object as PropType<ShopViewModel>,
     required: true,
   },
-  currencySymbol: {
-    type: String,
-    required: false,
-    default: '$',
-  },
   aspectRatio: {
     type: String,
     required: true,
@@ -95,11 +94,13 @@ const props = defineProps({
   },
 });
 
+const currencySymbol = computed(() => shopSettingStore.currencySymbol);
+
 const renderCurrencyAmount = (product: ProductModel): string => {
   const variantPrice = product.variant?.[0]?.options?.[0]?.price;
   const finalPrice = variantPrice ?? product.defaultPrice ?? '0';
 
-  return `${props.currencySymbol} ${finalPrice}`;
+  return `${currencySymbol.value} ${finalPrice}`;
 };
 
 const emit = defineEmits(['on-product-detail']);

package/src/brand-page/components/shop/PaymentModal.vue

@@ -145,7 +145,6 @@ const paymentState = {
 interface Props {
   context: BrandPageContext;
   isVisible: boolean;
-  currencySymbol: string;
   buttonStyle: ButtonStyles;
   shopPaymentConfig: BrandPagePaymentConfig;
   descriptionStyle: TextStyleDeclaration | undefined;
@@ -154,7 +153,6 @@ interface Props {
 
 const props = withDefaults(defineProps<Props>(), {
   isVisible: true,
-  currencySymbol: '$',
 });
 
 const uniformDescriptionStyle = computed<TextStyleDeclaration>(() => ({

package/src/brand-page/components/shop/ProductDetailModal.vue

@@ -30,7 +30,7 @@
               {{ currentProduct.name }}
             </h1>
             <p class="tw-text-left tw-text-md tw-text-grayscale-800">
-              {{ shopSettingStore.currencySymbol }} {{ itemPrice }}
+              {{ currencySymbol }} {{ itemPrice }}
             </p>
             <div v-if="currentProduct.hasVariants">
               <div
@@ -185,6 +185,7 @@ const cartSettingsStore = useCartStore();
 const shopSettingStore = useShopConfigStore();
 
 const products = computed(() => shopSettingStore.products);
+const currencySymbol = computed(() => shopSettingStore.currencySymbol);
 const currentProduct = computed(() => {
   // Use the first product if currentProduct is not found
   return (

package/src/brand-page/components/shop/Shop.vue

@@ -32,7 +32,6 @@
             :view-model="viewModel"
             :context="context"
             :item-style="itemStyle"
-            :currency-symbol="data.defaultCurrencySymbol"
             @on-product-detail="onShowProductDetailModal"
           />
           <ThumbnailDisplay
@@ -41,7 +40,6 @@
             :context="context"
             :aspect-ratio="aspectRatio"
             :item-style="itemStyle"
-            :currency-symbol="data.defaultCurrencySymbol"
             :content-index="contentIndex"
             @on-product-detail="onShowProductDetailModal"
           />
@@ -51,7 +49,6 @@
             :context="context"
             :aspect-ratio="aspectRatio"
             :item-style="itemStyle"
-            :currency-symbol="data.defaultCurrencySymbol"
             :content-index="contentIndex"
             @on-product-detail="onShowProductDetailModal"
           />
@@ -91,7 +88,6 @@
       class="modal-product-detail"
       :product="data.product"
       :button-style="buttonStyle"
-      :currency-symbol="currencySymbol"
       @on-close="onClose"
       @on-show-success="onShowSuccess"
     />
@@ -99,7 +95,6 @@
       class="modal-cart"
       :is-visible="data.isCartModalVisible"
       :button-style="buttonStyle"
-      :currency-symbol="currencySymbol"
       @on-close="onCloseCart"
       @on-show-payment="onShowPaymentModal"
     />
@@ -109,7 +104,6 @@
       :is-visible="data.isPaymentModalVisible"
       :button-style="buttonStyle"
       :description-style="viewModel.descriptionStyle"
-      :currency-symbol="currencySymbol"
       :shop-payment-config="shopPaymentConfig"
       :context="context"
       :success-message="viewModel.successMessage"
@@ -140,24 +134,18 @@ import PaymentModal from './PaymentModal.vue';
 import brandPageClient from '../../clients/brand-page.client';
 import raygunUtil from '../../utils/raygun.util';
 import { shopTr } from '../../../composables/useTranslate';
+import { useShopConfigStore } from '../../../shared/ecommerce-settings/store/shop-settings-store';
 
-const props = defineProps({
-  context: {
-    type: Object as PropType<BrandPageContext>,
-    required: true,
-  },
-  viewModel: {
-    type: Object as PropType<ShopViewModel>,
-    required: true,
-  },
-  contentIndex: {
-    type: Number,
-    required: false,
-    default: undefined,
-  },
-});
-
+const props = withDefaults(
+  defineProps<{
+    context: BrandPageContext;
+    viewModel: ShopViewModel;
+    contentIndex: number;
+  }>(),
+  {},
+);
 const cartSettingsStore = useCartStore();
+const shopSettingStore = useShopConfigStore();
 
 const cart = computed(() => cartSettingsStore.cartItems);
 
@@ -201,9 +189,6 @@ const data = reactive({
   isAddCartSuccess: false,
   product: {} as ProductModel,
   isActivePaymentProvider: false,
-  defaultCurrencySymbol:
-    props.viewModel.shopPaymentConfig?.paymentConfig?.defaultCurrencySymbol ??
-    '$',
 });
 
 const viewCartText = computed(() => {
@@ -274,15 +259,11 @@ const backgroundStyle = computed((): any => {
   return props.viewModel.backgroundStyle;
 });
 
-const currencySymbol = computed((): any => {
-  return props.viewModel.shopPaymentConfig.paymentConfig?.defaultCurrencySymbol;
-});
-
 const shopPaymentConfig = computed((): BrandPagePaymentConfig => {
-  if (!props.viewModel.shopPaymentConfig.paymentConfig) {
+  if (!shopSettingStore.paymentConfig) {
     throw new Error('No Payment Config found');
   }
-  return props.viewModel.shopPaymentConfig.paymentConfig;
+  return shopSettingStore.paymentConfig;
 });
 
 const isTextDisplayStyle = computed(() => {

package/src/brand-page/components/shop/TextDisplay.vue

@@ -34,6 +34,10 @@ import TextWrapper from '../text-wrapper/TextWrapper.vue';
 import type { PropType } from 'vue';
 import type { ShopViewModel } from '../../view-models';
 import type { ProductModel } from '../../models/shop.model';
+import { useShopConfigStore } from '../../../shared/ecommerce-settings/store/shop-settings-store';
+import { computed } from 'vue';
+
+const shopSettingStore = useShopConfigStore();
 
 const props = defineProps({
   context: {
@@ -44,22 +48,19 @@ const props = defineProps({
     type: Object as PropType<ShopViewModel>,
     required: true,
   },
-  currencySymbol: {
-    type: String,
-    required: false,
-    default: '$',
-  },
   itemStyle: {
     type: Object,
     required: true,
   },
 });
 
+const currencySymbol = computed(() => shopSettingStore.currencySymbol);
+
 const renderCurrencyAmount = (product: ProductModel): string => {
   const variantPrice = product.variant?.[0]?.options?.[0]?.price;
   const finalPrice = variantPrice ?? product.defaultPrice ?? '0';
 
-  return `${props.currencySymbol} ${finalPrice}`;
+  return `${currencySymbol.value} ${finalPrice}`;
 };
 
 const emit = defineEmits(['on-product-detail']);

package/src/brand-page/components/shop/ThumbnailDisplay.vue

@@ -51,6 +51,10 @@ import TextWrapper from '../text-wrapper/TextWrapper.vue';
 import type { PropType } from 'vue';
 import type { ShopViewModel } from '../../view-models';
 import type { ProductModel } from '../../models/shop.model';
+import { useShopConfigStore } from '../../../shared/ecommerce-settings/store/shop-settings-store';
+import { computed } from 'vue';
+
+const shopSettingStore = useShopConfigStore();
 
 const props = defineProps({
   context: {
@@ -61,11 +65,6 @@ const props = defineProps({
     type: Object as PropType<ShopViewModel>,
     required: true,
   },
-  currencySymbol: {
-    type: String,
-    required: false,
-    default: '$',
-  },
   aspectRatio: {
     type: String,
     required: true,
@@ -81,11 +80,13 @@ const props = defineProps({
   },
 });
 
+const currencySymbol = computed(() => shopSettingStore.currencySymbol);
+
 const renderCurrencyAmount = (product: ProductModel): string => {
   const variantPrice = product.variant?.[0]?.options?.[0]?.price;
   const finalPrice = variantPrice ?? product.defaultPrice ?? '0';
 
-  return `${props.currencySymbol} ${finalPrice}`;
+  return `${currencySymbol.value} ${finalPrice}`;
 };
 
 const emit = defineEmits(['on-product-detail']);

package/src/brand-page-maker/components/brand-page-maker/BrandPageMaker.stories.ts

@@ -1461,6 +1461,7 @@ export const SampleImageUpload = (): any => {
         userPolicyDataEndpoint:
           'http://localhost:3600/maker/api/users/policy-data',
         getUnsplashMediaRootEndpoint: 'http://staging.brandcrowd.com',
+        getGettyEndpoint: 'http://staging.brandcrowd.com',
       },
     }),
   };

package/src/brand-page-maker/components/brand-page-maker/__fixtures__/brand-page-examples.ts

@@ -86,6 +86,7 @@ export const userFeatures: UserFeatures = {
   canUseRichTextEditor: true,
   canUsePremiumFontFamily: true,
   maxNumOfPages: DEFAULT_MAX_NUM_OF_PAGES,
+  canUseGettyVideos: false,
 };
 
 export const BRAND_PAGE: BrandPageData = {
@@ -2121,6 +2122,7 @@ export const INITIALISE_PAYLOAD: InitialisePayload = Object.freeze({
     canUseRichTextEditor: false,
     canUsePremiumFontFamily: true,
     maxNumOfPages: UNLIMITED_MAX_NUM_OF_PAGES,
+    canUseGettyVideos: true,
   },
   logoDraftDesignAttributes: simpleLogoDesignAttributes,
   backUrl: '',

package/src/brand-page-maker/components/shop/AddOrEditProductContainer.vue

@@ -153,28 +153,23 @@ import {
 import { computed } from 'vue';
 import ProductItemField from './ProductItemField.vue';
 import { useProductConfigStore } from '../../../brand-page-maker/stores/product-config/product-config-store';
+import { useShopConfigStore } from '../../../shared/ecommerce-settings/store/shop-settings-store';
 import NumberInput from '../../../shared/common/NumberInput.vue';
 import { errorTr } from '../../../composables/useTranslate';
 import { productTr } from '../../../composables/useTranslate';
 
 const productSettingStore = useProductConfigStore();
+const shopConfigStore = useShopConfigStore();
 const imageUrl = computed(() => productSettingStore.productImageUrl);
 const MAX_PAYMENT_DESCRIPTION_LENGTH = 255;
 const MAX_PAYMENT_TITLE_LENGTH = 100;
 const MAX_PAYMENT_DESCRIPTION_REACHED_MSG = () =>
   errorTr('maxCharactersDescription');
 const MAX_PAYMENT_TITLE_REACHED_MSG = () => errorTr('maxCharactersTitle');
-interface Props {
-  currencySymbol: string;
-}
-
-// TODO: currency need to be from productConfigStore
-const props = withDefaults(defineProps<Props>(), {
-  currencySymbol: '$',
-});
 
 const enableNotes = computed(() => productSettingStore.productEnableNotes);
 const hasVariants = computed(() => productSettingStore.productHasVariants);
+const currencySymbol = computed(() => shopConfigStore.currencySymbol);
 
 const emit = defineEmits(['update:modelValue']);
 

package/src/brand-page-maker/constants/config-settings-constant.ts

@@ -430,7 +430,7 @@ const shopReplaceImageSettings =
 
 const bannerSectionReplaceImageSettings =
   (): ContentReplaceImageSettings<BannerSectionContent> => ({
-    tabs: ['MY_UPLOADS', 'IMAGE_LIBRARY', 'SHAPE_LIBRARY'],
+    tabs: ['MY_UPLOADS', 'IMAGE_LIBRARY', 'VIDEO_LIBRARY', 'SHAPE_LIBRARY'],
     buttonTitleAdd: contentSettingsTr(`addImageButtonTitle`),
     titleAdd: contentSettingsTr(`addImageHeaderTitle`),
     titleReplace: contentSettingsTr(`imageReplaceTitle`),
@@ -2993,7 +2993,7 @@ export const SHOP_SECTION_SETTINGS_CONFIG = (): ContentSettingsConfig<
       shouldRender: false,
     },
     paymentConfig: {
-      type: 'payment-config',
+      type: 'shop-payment-config',
       groupId: REQUEST_PAYMENT_GROUPS.settings,
       overrideValueFieldName: 'shopPaymentConfig',
     },

package/src/brand-page-maker/constants/index.ts

@@ -43,6 +43,7 @@ export const DEFAULT_USER_ENDPOINTS: Readonly<Endpoints> = {
   getAllUserMediaEndpoint: GET_ALL_USER_MEDIA_ENDPOINT,
   userPolicyDataEndpoint: USER_POLICY_DATA_ENDPOINT,
   getUnsplashMediaRootEndpoint: '',
+  getGettyEndpoint: '',
 } as const;
 
 export const DEFAULT_ADMIN_ENDPOINTS: Readonly<Endpoints> = {
@@ -51,4 +52,5 @@ export const DEFAULT_ADMIN_ENDPOINTS: Readonly<Endpoints> = {
   getAllUserMediaEndpoint: GET_ALL_ADMIN_MEDIA_ENDPOINT,
   userPolicyDataEndpoint: ADMIN_POLICY_DATA_ENDPOINT,
   getUnsplashMediaRootEndpoint: '',
+  getGettyEndpoint: '',
 } as const;

package/src/brand-page-maker/stores/user/user-store.ts

@@ -29,6 +29,7 @@ export const useBrandPageMakerUserStore = defineStore('brandPageMakerUser', {
       canUseRichTextEditor: false,
       canUsePremiumFontFamily: false,
       maxNumOfPages: DEFAULT_MAX_NUM_OF_PAGES,
+      canUseGettyVideos: false,
     },
     emailAddress: '',
     hasBrandPagePremiumSubscription: false,

package/src/bundles/bundled-translations.de-DE.json

@@ -625,6 +625,7 @@
     "myUploads": "Meine Uploads",
     "myDesigns": "Meine Designs",
     "imageLibrary": "Bilderbibliothek",
+    "videoLibrary": "Videobibliothek",
     "shapeLibrary": "Formbibliothek"
   },
   "shapeField": {
@@ -839,5 +840,11 @@
     "applyMessage": "Das gilt für alle Logos auf Ihrer Website.",
     "cancelLabel": "Abbrechen",
     "continueLabel": "Weiter"
+  },
+  "videoLibrary": {
+    "poweredBy": "Powered by",
+    "emptyState": "Ihr Browser unterstützt keine eingebetteten Videos.",
+    "loadMoreVideos": "Weitere Videos laden",
+    "supported": "Ihr Browser unterstützt keine eingebetteten Videos."
   }
 }

package/src/bundles/bundled-translations.es-ES.json

@@ -625,6 +625,7 @@
     "myUploads": "Mis subidas",
     "myDesigns": "Mis diseños",
     "imageLibrary": "Biblioteca de imágenes",
+    "videoLibrary": "Videoteca",
     "shapeLibrary": "Biblioteca de Formas"
   },
   "shapeField": {
@@ -839,5 +840,11 @@
     "applyMessage": "Esto se aplicará a todos los logos de tu sitio web.",
     "cancelLabel": "Cancelar",
     "continueLabel": "Continuar"
+  },
+  "videoLibrary": {
+    "poweredBy": "Desarrollado por",
+    "emptyState": "Lo sentimos, tu navegador no admite vídeos incrustados.",
+    "loadMoreVideos": "Carga más vídeos",
+    "supported": "Lo sentimos, tu navegador no admite vídeos incrustados."
   }
 }

package/src/bundles/bundled-translations.fr-CA.json

@@ -625,6 +625,7 @@
     "myUploads": "Mes importations",
     "myDesigns": "Mes créations",
     "imageLibrary": "Bibliothèque d’images",
+    "videoLibrary": "Vidéothèque",
     "shapeLibrary": "Bibliothèque de formes"
   },
   "shapeField": {
@@ -839,5 +840,11 @@
     "applyMessage": "Cela s’appliquera à tous les logos de votre site Web.",
     "cancelLabel": "Annuler",
     "continueLabel": "Continuer"
+  },
+  "videoLibrary": {
+    "poweredBy": "Alimenté par",
+    "emptyState": "Désolé, votre navigateur ne prend pas en charge les vidéos intégrées.",
+    "loadMoreVideos": "Charger plus de vidéos",
+    "supported": "Désolé, votre navigateur ne prend pas en charge les vidéos intégrées."
   }
 }

package/src/bundles/bundled-translations.fr-FR.json

@@ -625,6 +625,7 @@
     "myUploads": "Mes importations",
     "myDesigns": "Mes créations",
     "imageLibrary": "Bibliothèque d’images",
+    "videoLibrary": "Vidéothèque",
     "shapeLibrary": "Bibliothèque de formes"
   },
   "shapeField": {
@@ -839,5 +840,11 @@
     "applyMessage": "Cela s’appliquera à tous les logos de votre site Web.",
     "cancelLabel": "Annuler",
     "continueLabel": "Continuer"
+  },
+  "videoLibrary": {
+    "poweredBy": "Alimenté par",
+    "emptyState": "Désolé, votre navigateur ne prend pas en charge les vidéos intégrées.",
+    "loadMoreVideos": "Charger plus de vidéos",
+    "supported": "Désolé, votre navigateur ne prend pas en charge les vidéos intégrées."
   }
 }

package/src/bundles/bundled-translations.json

@@ -625,6 +625,7 @@
     "myUploads": "My Uploads",
     "myDesigns": "My Designs",
     "imageLibrary": "Image Library",
+    "videoLibrary": "Video Library",
     "shapeLibrary": "Shape Library"
   },
   "shapeField": {
@@ -839,5 +840,11 @@
     "applyMessage": "This will apply to all the logos in your website.",
     "cancelLabel": "Cancel",
     "continueLabel": "Continue"
+  },
+  "videoLibrary": {
+    "poweredBy": "Powered by",
+    "emptyState": "Sorry, your browser doesn't support embedded videos.",
+    "loadMoreVideos": "Load more videos",
+    "supported": "Sorry, your browser doesn't support embedded videos."
   }
 }

package/src/bundles/bundled-translations.pt-BR.json

@@ -625,6 +625,7 @@
     "myUploads": "Meus uploads",
     "myDesigns": "Meus designs",
     "imageLibrary": "Biblioteca de imagens",
+    "videoLibrary": "Biblioteca de vídeos",
     "shapeLibrary": "Biblioteca de formas"
   },
   "shapeField": {
@@ -839,5 +840,11 @@
     "applyMessage": "Isso se aplicará a todos os logotipos do seu site.",
     "cancelLabel": "Cancelar",
     "continueLabel": "Continuar"
+  },
+  "videoLibrary": {
+    "poweredBy": "Assegurado por",
+    "emptyState": "Seu navegador não aceita vídeos incorporados.",
+    "loadMoreVideos": "Carregar mais vídeos",
+    "supported": "Seu navegador não aceita vídeos incorporados."
   }
 }

package/src/bundles/bundled-translations.pt-PT.json

@@ -625,6 +625,7 @@
     "myUploads": "Os meus carregamentos",
     "myDesigns": "Os meus designs",
     "imageLibrary": "Biblioteca de imagens",
+    "videoLibrary": "Videoteca",
     "shapeLibrary": "Biblioteca de Formas"
   },
   "shapeField": {
@@ -839,5 +840,11 @@
     "applyMessage": "Isto vai aplicar-se a todos os logótipos no seu website.",
     "cancelLabel": "Cancelar",
     "continueLabel": "Continuar"
+  },
+  "videoLibrary": {
+    "poweredBy": "Assegurado por",
+    "emptyState": "Lamentamos, mas o seu navegador não suporta vídeos incorporados.",
+    "loadMoreVideos": "Carregar mais vídeos",
+    "supported": "Lamentamos, mas o seu navegador não suporta vídeos incorporados."
   }
 }

package/src/composables/useTranslate.ts

@@ -201,6 +201,7 @@ const videoTr = (key, valuesToInterpolate = {}) =>
   tr(`video.${key}`, valuesToInterpolate);
 const confirmModalTr = (key, valuesToInterpolate = {}) =>
   tr(`confirmModal.${key}`, valuesToInterpolate);
+const videoLibraryTr = (key) => tr(`videoLibrary.${key}`);
 const logoSwitchConfirmationModalTr = (key, valuesToInterpolate = {}) =>
   tr(`logoSwitchConfirmationModal.${key}`, valuesToInterpolate);
 const logoTemplateSearchModalTr = (key, valuesToInterpolate = {}) =>
@@ -299,6 +300,7 @@ export {
   videoTr,
   bookingUrlFieldTr,
   confirmModalTr,
+  videoLibraryTr,
   logoSwitchConfirmationModalTr,
   logoTemplateSearchModalTr,
 };

package/src/constants/ui.ts

@@ -11,6 +11,7 @@ export interface UIUserFeatures {
   canUsePremiumFontFamily: boolean;
   maxNumOfPages: number;
   canUseRichTextEditor: boolean;
+  canUseGettyVideos: boolean;
 }
 
 export const TEMPLATE_FIRST_PAGE_NO = 1;

package/src/shared/content-settings/components/content-settings/ContentSettings.stories.ts

@@ -29,6 +29,7 @@ export const Sample = (): any => {
     canUsePremiumFontFamily: true,
     canUseRichTextEditor: false,
     maxNumOfPages: DEFAULT_MAX_NUM_OF_PAGES,
+    canUseGettyVideos: true,
   };
 
   const pinia = setupStoryPinia();