@designcrowd/library.brand-page 5.16.35 → 5.16.36

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

@@ -271,9 +271,11 @@ const InitialiseMakerStores = (options: {
     templateSearchTerm: undefined,
   });
 
-  userStore.setIsAdmin({ isAdmin: options.isAdmin || false });
-  userStore.setHasBrandPagePremiumSubscription(false);
-  userStore.setBrandPageCommissionPercentage(0.1);
+  userStore.setUserState({
+    isAdmin: options.isAdmin,
+    hasPremiumSubscription: false,
+    brandPageCommissionPercentage: 0.1,
+  });
 };
 
 const FABRIC_RENDER_BASE_URL = 'https://localhost:6006/';
@@ -343,6 +345,7 @@ export const SampleDesktopManagePages = (): any => {
 
   const contentSettingsStore = useUiContentSettingsStore();
   const brandPageMakerStore = useBrandPageMakerStore();
+  const userStore = useBrandPageMakerUserStore();
 
   contentSettingsStore.pushMode({
     mode: CONTENT_SETTINGS_MODES.pages,
@@ -352,6 +355,12 @@ export const SampleDesktopManagePages = (): any => {
     viewport: VIEWPORTS.desktop,
   });
 
+  userStore.setUserState({
+    features: {
+      ...userFeatures,
+    },
+  });
+
   return defineComponent({
     components: {
       BrandPageMaker,
@@ -399,10 +408,6 @@ export const SampleDesktopManagePages = (): any => {
           isSaving: false,
           logoDraftDesignAttributes: simpleLogoDesignAttributes,
           logoVariationImageUrls,
-          features: {
-            ...userFeatures,
-            canAddMoreThanThreePages: true,
-          },
           templateCategories: TEMPLATE_CATEGORIES,
         },
       };
@@ -424,6 +429,7 @@ export const SampleBanner = (): any => {
 
   InitialiseMakerStores({});
   const brandPageMakerStore = useBrandPageMakerStore();
+  const userStore = useBrandPageMakerUserStore();
 
   const bannerContent = createInitialBannerSectionContent();
   bannerContent.description = 'Lorem ipsum dolor sit amet';
@@ -432,6 +438,12 @@ export const SampleBanner = (): any => {
     viewport: VIEWPORTS.desktop,
   });
 
+  userStore.setUserState({
+    features: {
+      ...userFeatures,
+    },
+  });
+
   return defineComponent({
     components: {
       BrandPageMaker,
@@ -453,10 +465,6 @@ export const SampleBanner = (): any => {
           isSaving: false,
           logoDraftDesignAttributes: simpleLogoDesignAttributes,
           logoVariationImageUrls,
-          features: {
-            ...userFeatures,
-            canAddMoreThanThreePages: true,
-          },
           templateCategories: TEMPLATE_CATEGORIES,
         },
       };
@@ -1010,6 +1018,7 @@ export const SamplePremiumUser = (): any => {
     },
     setup() {
       const containerStore = useBrandPageContainerStore();
+      const userStore = useBrandPageMakerUserStore();
 
       const logoStore = useLogoStore();
 
@@ -1025,6 +1034,18 @@ export const SamplePremiumUser = (): any => {
       containerStore.$patch({
         baseFabricRenderUrl: FABRIC_RENDER_BASE_URL,
       });
+
+      userStore.setUserState({
+        features: {
+          ...userFeatures,
+          showBrandCrowdLogo: false,
+          canAddVideoContents: true,
+          canUploadBackgroundImages: true,
+          canAddMapContents: true,
+          canAddContactFormContents: true,
+          canAddLibraryBackgroundImages: true,
+        },
+      });
     },
     data() {
       return {
@@ -1033,16 +1054,6 @@ export const SamplePremiumUser = (): any => {
           isSaving: false,
           logoVariationImageUrls,
           logoDraftDesignAttributes: gradientLogoDesignAttributes,
-          features: {
-            ...userFeatures,
-            showBrandCrowdLogo: false,
-            canAddVideoContents: true,
-            canUploadBackgroundImages: true,
-            canAddMapContents: true,
-            canAddContactFormContents: true,
-            canAddLibraryBackgroundImages: true,
-            canAddMoreThanThreePages: true,
-          },
           initialCategories: {},
         },
       };
@@ -1073,6 +1084,7 @@ export const SamplePremiumBContactUser = (): any => {
     },
     setup() {
       const containerStore = useBrandPageContainerStore();
+      const userStore = useBrandPageMakerUserStore();
 
       const logoStore = useLogoStore();
 
@@ -1088,6 +1100,18 @@ export const SamplePremiumBContactUser = (): any => {
       containerStore.$patch({
         baseFabricRenderUrl: FABRIC_RENDER_BASE_URL,
       });
+
+      userStore.setUserState({
+        features: {
+          ...userFeatures,
+          showBrandCrowdLogo: false,
+          canAddVideoContents: true,
+          canUploadBackgroundImages: true,
+          canAddMapContents: true,
+          canAddContactFormContents: true,
+          canAddLibraryBackgroundImages: true,
+        },
+      });
     },
     data() {
       return {
@@ -1096,16 +1120,6 @@ export const SamplePremiumBContactUser = (): any => {
           isSaving: false,
           logoVariationImageUrls,
           logoDraftDesignAttributes: gradientLogoDesignAttributes,
-          features: {
-            ...userFeatures,
-            showBrandCrowdLogo: false,
-            canAddVideoContents: true,
-            canUploadBackgroundImages: true,
-            canAddMapContents: true,
-            canAddContactFormContents: true,
-            canAddLibraryBackgroundImages: true,
-            canAddMoreThanThreePages: true,
-          },
           initialCategories: {},
         },
       };
@@ -1735,6 +1749,7 @@ export const TextStyleOptions = (): any => {
   const imageUrl = 'https://source.unsplash.com/random/400x225?1';
 
   const brandPageMakerStore = useBrandPageMakerStore();
+  const userStore = useBrandPageMakerUserStore();
 
   brandPageMakerStore.setSelectedTabName({
     tabName: SIDE_BAR_TAB_NAMES.STYLE_SETTINGS,
@@ -1837,6 +1852,12 @@ export const TextStyleOptions = (): any => {
     viewport: VIEWPORTS.desktop,
   });
 
+  userStore.setUserState({
+    features: {
+      ...userFeatures,
+    },
+  });
+
   return defineComponent({
     components: {
       BrandPageMaker,
@@ -1858,10 +1879,6 @@ export const TextStyleOptions = (): any => {
           isSaving: false,
           logoDraftDesignAttributes: simpleLogoDesignAttributes,
           logoVariationImageUrls,
-          features: {
-            ...userFeatures,
-            canAddMoreThanThreePages: true,
-          },
           templateCategories: TEMPLATE_CATEGORIES,
         },
       };

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

@@ -37,6 +37,7 @@ import type { UserFeatures } from '../../../stores';
 import type { AdminPreviewLogoTemplateModel } from '../../../stores/admin-logo-settings';
 import { v4 as uuid } from 'uuid';
 import { CONTENT_SETTINGS_CONFIGS } from '../../../constants';
+import type { UIUserFeatures } from 'src/constants/ui';
 
 export const storyEmailAddress = 'test@test.com';
 
@@ -2108,26 +2109,26 @@ export const brandPageCustom: BrandPageData = {
   },
 };
 
+export const USER_FEATURES: UIUserFeatures = Object.freeze({
+  showBrandCrowdLogo: true,
+  canAddImageContents: true,
+  canAddVideoContents: false,
+  canAddMapContents: false,
+  canAddLibraryBackgroundImages: true,
+  canAddRequestPaymentContents: true,
+  canAddShopContents: true,
+  canUploadBackgroundImages: false,
+  canAddContactFormContents: true,
+  canUseRichTextEditor: false,
+  canUsePremiumFontFamily: true,
+  maxNumOfPages: UNLIMITED_MAX_NUM_OF_PAGES,
+  canUseGettyVideos: true,
+  canUseGoogleAdsense: false,
+  googleAdsenseEnabled: true,
+} as UIUserFeatures);
+
 export const INITIALISE_PAYLOAD: InitialisePayload = Object.freeze({
   brandPage: BRAND_PAGE,
-  emailAddress: storyEmailAddress,
-  features: {
-    showBrandCrowdLogo: true,
-    canAddImageContents: true,
-    canAddVideoContents: false,
-    canAddMapContents: false,
-    canAddLibraryBackgroundImages: true,
-    canAddRequestPaymentContents: true,
-    canAddShopContents: true,
-    canUploadBackgroundImages: false,
-    canAddContactFormContents: true,
-    canUseRichTextEditor: false,
-    canUsePremiumFontFamily: true,
-    maxNumOfPages: UNLIMITED_MAX_NUM_OF_PAGES,
-    canUseGettyVideos: true,
-    canUseGoogleAdsense: false,
-    googleAdsenseEnabled: true,
-  },
   logoDraftDesignAttributes: simpleLogoDesignAttributes,
   backUrl: '',
   logoVariationImageUrls: [],

package/src/brand-page-maker/composables/useEventTracker.ts

@@ -63,6 +63,7 @@ export const EVENTS = {
   WEBSITE_MAKER_AI_CLICK_SUGGESTED_PROMPT:
     'website_maker_ai_click_suggested_prompt',
   WEBSITE_MAKER_DOMAIN_UPSELL_MODAL: 'website_domain_upsell_modal',
+  WEBSITE_MAKER_GETTY_VIDEO: 'website_maker_getty_video',
 };
 
 export const SELECT_LOCATIONS = {
@@ -160,6 +161,24 @@ const _publishEvent = (
 };
 
 const useEventTracker = () => {
+  const gettyVideoEvents = {
+    sendGettyVideoAddEvent: () => {
+      _publishEvent(EVENTS.WEBSITE_MAKER_GETTY_VIDEO, {
+        action: 'add',
+      });
+    },
+    sendGettyVideoReplaceEvent: () => {
+      _publishEvent(EVENTS.WEBSITE_MAKER_GETTY_VIDEO, {
+        action: 'replace',
+      });
+    },
+    sendGettyVideoRemoveEvent: () => {
+      _publishEvent(EVENTS.WEBSITE_MAKER_GETTY_VIDEO, {
+        action: 'remove',
+      });
+    },
+  };
+
   return {
     sendExperimentStartedEvent: (abTestKey: string, abTestValue: string) => {
       _publishEvent(
@@ -324,6 +343,7 @@ const useEventTracker = () => {
         continuation,
       });
     },
+    ...gettyVideoEvents,
   };
 };
 

package/src/brand-page-maker/stores/brandpage-maker/brandpage-maker-store.test.ts

@@ -2,6 +2,7 @@ import { vi } from 'vitest';
 import {
   BRAND_PAGE,
   INITIALISE_PAYLOAD,
+  USER_FEATURES,
   userFeatures,
 } from '../../components/brand-page-maker/__fixtures__';
 import {
@@ -79,7 +80,7 @@ describe('brand page maker store module', () => {
     const store = useBrandPageMakerStore();
     const userStore = useBrandPageMakerUserStore();
 
-    userStore.setIsAdmin({ isAdmin: true });
+    userStore.setUserState({ isAdmin: true });
 
     await store.initialise(INITIALISE_PAYLOAD);
 
@@ -95,7 +96,7 @@ describe('brand page maker store module', () => {
     const store = useBrandPageMakerStore();
     const userStore = useBrandPageMakerUserStore();
 
-    userStore.setIsAdmin({ isAdmin: true });
+    userStore.setUserState({ isAdmin: true });
 
     await store.initialise(INITIALISE_PAYLOAD);
 
@@ -113,14 +114,18 @@ describe('brand page maker store module', () => {
     const userStore = useBrandPageMakerUserStore();
 
     // Act
-    await store.initialise({
-      ...INITIALISE_PAYLOAD,
+
+    userStore.setUserState({
       features: {
         ...userFeatures,
         showBrandCrowdLogo: false,
       },
     });
 
+    await store.initialise({
+      ...INITIALISE_PAYLOAD,
+    });
+
     // Assert
     expect(userStore.features.showBrandCrowdLogo).toBe(false);
   });
@@ -170,7 +175,7 @@ describe('brand page maker store module', () => {
     const store = useBrandPageMakerStore();
     const userStore = useBrandPageMakerUserStore();
 
-    userStore.setIsAdmin({ isAdmin: true });
+    userStore.setUserState({ isAdmin: true });
 
     const contactFormContent: ContactFormContent = {
       id: faker.datatype.uuid(),
@@ -497,7 +502,7 @@ describe('brand page maker store module', () => {
     // Arrange
     const userStore = useBrandPageMakerUserStore();
 
-    userStore.setIsAdmin({ isAdmin: true });
+    userStore.setUserState({ isAdmin: true });
 
     const templateId = faker.string.uuid();
 

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

@@ -114,8 +114,6 @@ export type SelectedCategoryPayload = InitialCategories;
 export interface InitialisePayload {
   brandPage: string | BrandPageData;
   brandPageType?: BrandPageType;
-  emailAddress: string;
-  features: UserFeatures;
   logoDraftDesignAttributes: LogoDesignAttributesModel;
   unsplashApplicationName: string;
   templateCategories: TemplateCategory[];
@@ -729,8 +727,6 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
     async initialise({
       brandPage,
       brandPageType,
-      emailAddress,
-      features,
       logoDraftDesignAttributes,
       unsplashApplicationName,
       templateCategories,
@@ -844,10 +840,6 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
           templateType: brandPageTypeTemplateTypeMap[_brandPageType],
         });
 
-        userStore.setEmailAddress(emailAddress);
-
-        userStore.setFeatures(features);
-
         uiStore.setLogoTheme({
           logoTheme: parseLogoThemeToCssStyles(
             logoDraftDesignAttributes.logoTheme,
@@ -887,7 +879,7 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
           pages: brandPageModel.pages,
         });
 
-        setContentSettingsAddContentOptions(features);
+        setContentSettingsAddContentOptions(userStore.features);
 
         if (logoImage) {
           const logoSettingsState: LogoSettingsState = {

package/src/brand-page-maker/stores/event-manager/event-manager-store.ts

@@ -82,12 +82,12 @@ const getBrandPageEventCategory = () => {
 
   if (
     process.env.NODE_ENV !== 'production' &&
-    typeof userStore.hasBrandPagePremiumSubscription !== 'boolean'
+    typeof userStore.hasPremiumSubscription !== 'boolean'
   ) {
-    console.error('hasBrandPagePremiumSubscription should be a boolean');
+    console.error('hasPremiumSubscription should be a boolean');
   }
 
-  return userStore.hasBrandPagePremiumSubscription
+  return userStore.hasPremiumSubscription
     ? BRAND_PAGE_ACTIVE
     : BRAND_PAGE_INACTIVE;
 };

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

@@ -12,7 +12,7 @@ describe('brand page user store module', () => {
     // Arrange
     const store = useBrandPageMakerUserStore();
 
-    store.setIsAdmin({ isAdmin: true });
+    store.setUserState({ isAdmin: true });
 
     // Act
 
@@ -24,7 +24,7 @@ describe('brand page user store module', () => {
     // Arrange
     const store = useBrandPageMakerUserStore();
 
-    store.setIsAdmin({ isAdmin: false });
+    store.setUserState({ isAdmin: false });
     // Act
 
     // Assert

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

@@ -7,7 +7,7 @@ export type UserFeatures = UIUserFeatures;
 export interface UserState extends UIUserState {
   features: UserFeatures;
   emailAddress: string;
-  hasBrandPagePremiumSubscription: boolean;
+  hasPremiumSubscription: boolean;
   brandPageCommissionPercentage: number | undefined;
   userToken?: string;
 }
@@ -35,29 +35,27 @@ export const useBrandPageMakerUserStore = defineStore('brandPageMakerUser', {
       googleAdsenseEnabled: false,
     },
     emailAddress: '',
-    hasBrandPagePremiumSubscription: false,
+    hasPremiumSubscription: false,
     brandPageCommissionPercentage: undefined,
     isAdmin: false, // this is currently used as way to identify admin maker mode
     userToken: undefined,
   }),
   actions: {
-    setEmailAddress(payload: string): void {
-      this.emailAddress = payload;
-    },
-    setFeatures(payload: Partial<UserFeatures>): void {
-      this.features = Object.assign({}, this.features, payload);
-    },
-    setHasBrandPagePremiumSubscription(payload: boolean): void {
-      this.hasBrandPagePremiumSubscription = payload;
-    },
-    setIsAdmin(payload: { isAdmin: boolean }): void {
-      this.isAdmin = payload.isAdmin;
-    },
-    setBrandPageCommissionPercentage(payload: number): void {
-      this.brandPageCommissionPercentage = payload;
-    },
-    setUserToken(payload: { userToken: string }): void {
-      this.userToken = payload.userToken;
+    setUserState(payload: {
+      emailAddress?: string;
+      userToken?: string;
+      isAdmin?: boolean;
+      hasPremiumSubscription?: boolean;
+      brandPageCommissionPercentage?: number;
+      features?: Partial<UserFeatures>;
+    }): void {
+      this.emailAddress = payload.emailAddress || '';
+      this.userToken = payload.userToken || '';
+      this.hasPremiumSubscription = payload.hasPremiumSubscription || false;
+      this.brandPageCommissionPercentage =
+        payload.brandPageCommissionPercentage || undefined;
+      this.isAdmin = payload.isAdmin || false;
+      this.features = Object.assign({}, this.features, payload.features);
     },
   },
 });

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

@@ -1,7 +1,14 @@
 import { defineStore } from 'pinia';
+import { useBrandPageMakerStore } from '../brandpage-maker';
+import cloneDeep from 'lodash.clonedeep';
+import { findValuesByKey } from '../../../helpers/ts.helper';
+import { useBrandPageMakerUserStore } from '../user';
+import { useBrandPageContainerStore } from '../brandpage-container';
 
 const CDN_GETTY_S3_URL_PREFIX = 'https://bc-getty-media.brandcrowd.com';
 
+export const GETTY_VIDEO_LIMIT_FOR_SITE = 5;
+
 export type VideoUrlData = {
   videoUrl: string;
   previewImageUrl: string;
@@ -54,5 +61,28 @@ export const useVideoStore = defineStore('video', {
         previewImageUrl: `${CDN_GETTY_S3_URL_PREFIX}/public/${state.gettyImagesKeyPrefix}/${token}/${token}_optimised_thumb`,
       };
     },
+    hasReachedLimitForVideo() {
+      // Looking through the bp maker store as the video-store isn't aware of removals
+      const brandPageMakerStore = useBrandPageMakerStore();
+      const brandPageData = cloneDeep(brandPageMakerStore.brandPageData);
+
+      const gettyAssetIds = findValuesByKey(brandPageData, 'gettyAssetId');
+
+      return gettyAssetIds.length >= GETTY_VIDEO_LIMIT_FOR_SITE;
+    },
+    canAddNewVideo() {
+      const userStore = useBrandPageMakerUserStore();
+      const brandPageContainerStore = useBrandPageContainerStore();
+
+      const canUseGettyVideos = userStore.features.canUseGettyVideos;
+      const isPrePurchase = brandPageContainerStore.isPrePurchase;
+
+      const hasPremiumSubscription = userStore.hasPremiumSubscription;
+
+      return (
+        canUseGettyVideos &&
+        (userStore.isAdmin || isPrePurchase || hasPremiumSubscription)
+      );
+    },
   },
 });

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

@@ -920,9 +920,22 @@
     "continueLabel": "Weiter"
   },
   "videoLibrary": {
+    "categories": {
+      "aerial": "Luftaufnahme",
+      "beach": "Strand",
+      "business": "Unternehmen",
+      "cities": "Städte",
+      "landscape": "Landschaft",
+      "nature": "Natur",
+      "people": "Menschen",
+      "plants": "Pflanzen",
+      "sky": "Himmel",
+      "sunrise": "Sonnenaufgang"
+    },
     "poweredBy": "Powered by",
     "emptyState": "Ihr Browser unterstützt keine eingebetteten Videos.",
     "loadMoreVideos": "Weitere Videos laden",
-    "supported": "Ihr Browser unterstützt keine eingebetteten Videos."
+    "supported": "Ihr Browser unterstützt keine eingebetteten Videos.",
+    "limitMessage": "Sie haben das Videolimit erreicht. Jede Seite unterstützt bis zu {{ videoLimit }} Videos. Entfernen Sie eines, um ein weiteres hinzuzufügen."
   }
 }

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

@@ -920,9 +920,22 @@
     "continueLabel": "Continuar"
   },
   "videoLibrary": {
+    "categories": {
+      "aerial": "Aéreo",
+      "beach": "Playa",
+      "business": "Negocio",
+      "cities": "Ciudades",
+      "landscape": "Paisaje",
+      "nature": "Naturaleza",
+      "people": "Personas",
+      "plants": "Plantas",
+      "sky": "Cielo",
+      "sunrise": "Amanecer"
+    },
     "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."
+    "supported": "Lo sentimos, tu navegador no admite vídeos incrustados.",
+    "limitMessage": "Has alcanzado el límite de vídeos. Cada sitio admite hasta {{ videoLimit }} vídeos; elimina uno para añadir otro."
   }
 }

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

@@ -920,9 +920,22 @@
     "continueLabel": "Continuer"
   },
   "videoLibrary": {
+    "categories": {
+      "aerial": "Aérien",
+      "beach": "Plage",
+      "business": "Activité",
+      "cities": "Villes",
+      "landscape": "Paysage",
+      "nature": "Nature",
+      "people": "Gens",
+      "plants": "Plantes",
+      "sky": "Ciel",
+      "sunrise": "Lever du soleil"
+    },
     "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."
+    "supported": "Désolé, votre navigateur ne prend pas en charge les vidéos intégrées.",
+    "limitMessage": "Vous avez atteint la limite de vidéos. Chaque site prend en charge jusqu'à {{ videoLimit }} vidéos. Supprimez-en une pour en ajouter une autre."
   }
 }

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

@@ -920,9 +920,22 @@
     "continueLabel": "Continuer"
   },
   "videoLibrary": {
+    "categories": {
+      "aerial": "Aérien",
+      "beach": "Plage",
+      "business": "Activité",
+      "cities": "Villes",
+      "landscape": "Paysage",
+      "nature": "Nature",
+      "people": "Gens",
+      "plants": "Plantes",
+      "sky": "Ciel",
+      "sunrise": "Lever du soleil"
+    },
     "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."
+    "supported": "Désolé, votre navigateur ne prend pas en charge les vidéos intégrées.",
+    "limitMessage": "Vous avez atteint la limite de vidéos. Chaque site prend en charge jusqu'à {{ videoLimit }} vidéos. Supprimez-en une pour en ajouter une autre."
   }
 }

package/src/bundles/bundled-translations.json

@@ -920,9 +920,22 @@
     "continueLabel": "Continue"
   },
   "videoLibrary": {
+    "categories": {
+      "aerial": "Aerial",
+      "beach": "Beach",
+      "business": "Business",
+      "cities": "Cities",
+      "landscape": "Landscape",
+      "nature": "Nature",
+      "people": "People",
+      "plants": "Plants",
+      "sky": "Sky",
+      "sunrise": "Sunrise"
+    },
     "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."
+    "supported": "Sorry, your browser doesn't support embedded videos.",
+    "limitMessage": "You’ve reached the video limit. Each site supports up to {{ videoLimit }} videos - remove one to add another."
   }
 }

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

@@ -920,9 +920,22 @@
     "continueLabel": "Continuar"
   },
   "videoLibrary": {
+    "categories": {
+      "aerial": "Aéreo",
+      "beach": "Praia",
+      "business": "Negócio",
+      "cities": "Cidades",
+      "landscape": "Paisagem",
+      "nature": "Natureza",
+      "people": "Pessoas",
+      "plants": "Plantas",
+      "sky": "Céu",
+      "sunrise": "Nascer do sol"
+    },
     "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."
+    "supported": "Seu navegador não aceita vídeos incorporados.",
+    "limitMessage": "Você atingiu o limite de vídeos. Cada site permite até {{ videoLimit }} vídeos – remova um para adicionar outro."
   }
 }