@designcrowd/library.brand-page 5.10.30 → 5.10.31

package/lib/src/composables/useTranslate.d.ts

@@ -1,62 +1,64 @@
-type LocaleTypes = 'de-DE' | 'en-US' | 'fr-FR' | 'es-ES' | 'pt-PT';
-declare const setLocaleAsync: (locale: LocaleTypes) => Promise<void>;
-declare const tr: (key: string, valuesToInterpolate?: {}, nameSpace?: string) => string;
-declare const modelsTr: (key: any) => string;
-declare const commonTr: (key: any) => string;
-declare const actionBarTr: (key: any) => string;
-declare const brandPageSettingsTr: (key: any) => string;
-declare const colorPaletteTr: (key: any) => string;
-declare const navigationTr: (key: any) => string;
-declare const converterTr: (key: any) => string;
-declare const backgroundSettingsTr: (key: any) => string;
-declare const colorPickerTr: (key: any) => string;
-declare const colorReplacementFieldTr: (key: any) => string;
-declare const contentSettingsTr: (key: any) => string;
-declare const formFieldsTr: (key: any) => string;
-declare const genericTextInputTr: (key: any) => string;
-declare const imageFieldTr: (key: any) => string;
-declare const imagesFieldTr: (key: any) => string;
-declare const linksFieldTr: (key: any) => string;
-declare const logoSelectionSettingsTr: (key: any) => string;
-declare const paymentConfigTr: (key: any) => string;
-declare const replaceImageSettingTr: (key: any) => string;
-declare const shapeFieldTr: (key: any) => string;
-declare const testimonialItemsFieldTr: (key: any) => string;
-declare const textFieldTr: (key: any) => string;
-declare const textImageFieldTr: (key: any) => string;
-declare const textItemsFieldTr: (key: any) => string;
-declare const textStyleFieldTr: (key: any) => string;
-declare const textAreaFieldTr: (key: any) => string;
-declare const productConfigOptionTr: (key: any) => string;
-declare const editLogoSettingsTr: (key: any) => string;
-declare const myUploadSettingsTr: (key: any, valuesToInterpolate?: {}) => string;
-declare const pageSettingsTr: (key: any) => string;
-declare const pageSettingsSectionTr: (key: any) => string;
-declare const templateSettingsTr: (key: any) => string;
-declare const unsplashLibraryTr: (key: any) => string;
-declare const seoSettingsTr: (key: any) => string;
-declare const styleSettingsTr: (key: any) => string;
-declare const sensitiveSettingTr: (key: any) => string;
-declare const socialShareTr: (key: any) => string;
-declare const cookieSettingTr: (key: any) => string;
-declare const googleAnalyticsTr: (key: any) => string;
-declare const colorFieldTr: (key: any) => string;
-declare const validatorTr: (key: any) => string;
-declare const constantsTr: (key: any) => string;
-declare const layoutSwitcherTr: (key: any) => string;
-declare const brandpageBackgroundSettingsTr: (key: any) => string;
-declare const loginMessageTr: (key: any) => string;
-declare const cookieTr: (key: any) => string;
-declare const logoSelectionTr: (key: any) => string;
-declare const googleAddressFieldTr: (key: any) => string;
-declare const myDesignsTr: (key: any) => string;
-declare const pageSettingTr: (key: any) => string;
-declare const shapeLibraryTr: (key: any) => string;
-declare const errorTr: (key: any, valuesToInterpolate?: {}) => string;
-declare const dropzoneUploaderTr: (key: any) => string;
-declare const shopTr: (key: any) => string;
-declare const paymentTr: (key: any, valuesToInterpolate?: {}) => string;
-declare const publishBrandPageModalWithStateTr: (key: any, valuesToInterpolate?: {}) => string;
-declare const existingDomainModalTr: (key: any) => string;
-declare const quickLinkBarTr: (key: any) => string;
-export { setLocaleAsync, tr, modelsTr, commonTr, actionBarTr, brandPageSettingsTr, colorPaletteTr, navigationTr, converterTr, backgroundSettingsTr, colorPickerTr, colorReplacementFieldTr, contentSettingsTr, formFieldsTr, genericTextInputTr, imageFieldTr, imagesFieldTr, linksFieldTr, logoSelectionSettingsTr, paymentConfigTr, replaceImageSettingTr, shapeFieldTr, testimonialItemsFieldTr, textFieldTr, textImageFieldTr, textItemsFieldTr, textStyleFieldTr, textAreaFieldTr, productConfigOptionTr, editLogoSettingsTr, myUploadSettingsTr, pageSettingsTr, pageSettingsSectionTr, templateSettingsTr, unsplashLibraryTr, seoSettingsTr, styleSettingsTr, sensitiveSettingTr, socialShareTr, cookieSettingTr, googleAnalyticsTr, colorFieldTr, validatorTr, constantsTr, layoutSwitcherTr, brandpageBackgroundSettingsTr, loginMessageTr, cookieTr, logoSelectionTr, googleAddressFieldTr, myDesignsTr, pageSettingTr, shapeLibraryTr, errorTr, dropzoneUploaderTr, shopTr, paymentTr, publishBrandPageModalWithStateTr, existingDomainModalTr, quickLinkBarTr, };
+export type LocaleTypes = 'de-DE' | 'en-US' | 'fr-FR' | 'es-ES' | 'pt-PT';
+export declare const createNewI18nInstance: () => import("i18next").i18n;
+declare const setLocaleAsync: (locale?: LocaleTypes) => Promise<void>;
+declare const tr: (key: string, valuesToInterpolate?: {}, nameSpace?: string) => any;
+declare const modelsTr: (key: any) => any;
+declare const commonTr: (key: any) => any;
+declare const actionBarTr: (key: any) => any;
+declare const brandPageSettingsTr: (key: any) => any;
+declare const colorPaletteTr: (key: any) => any;
+declare const navigationTr: (key: any) => any;
+declare const converterTr: (key: any) => any;
+declare const backgroundSettingsTr: (key: any) => any;
+declare const colorPickerTr: (key: any) => any;
+declare const colorReplacementFieldTr: (key: any) => any;
+declare const contentSettingsTr: (key: any) => any;
+declare const formFieldsTr: (key: any) => any;
+declare const genericTextInputTr: (key: any) => any;
+declare const imageFieldTr: (key: any) => any;
+declare const imagesFieldTr: (key: any) => any;
+declare const linksFieldTr: (key: any) => any;
+declare const logoSelectionSettingsTr: (key: any) => any;
+declare const paymentConfigTr: (key: any) => any;
+declare const replaceImageSettingTr: (key: any) => any;
+declare const shapeFieldTr: (key: any) => any;
+declare const testimonialItemsFieldTr: (key: any) => any;
+declare const textFieldTr: (key: any) => any;
+declare const textImageFieldTr: (key: any) => any;
+declare const textItemsFieldTr: (key: any) => any;
+declare const textStyleFieldTr: (key: any) => any;
+declare const textAreaFieldTr: (key: any) => any;
+declare const productConfigOptionTr: (key: any) => any;
+declare const editLogoSettingsTr: (key: any) => any;
+declare const myUploadSettingsTr: (key: any, valuesToInterpolate?: {}) => any;
+declare const pageSettingsTr: (key: any) => any;
+declare const pageSettingsSectionTr: (key: any) => any;
+declare const templateSettingsTr: (key: any) => any;
+declare const unsplashLibraryTr: (key: any) => any;
+declare const seoSettingsTr: (key: any) => any;
+declare const styleSettingsTr: (key: any) => any;
+declare const sensitiveSettingTr: (key: any) => any;
+declare const socialShareTr: (key: any) => any;
+declare const cookieSettingTr: (key: any) => any;
+declare const googleAnalyticsTr: (key: any) => any;
+declare const colorFieldTr: (key: any) => any;
+declare const validatorTr: (key: any) => any;
+declare const constantsTr: (key: any) => any;
+declare const layoutSwitcherTr: (key: any) => any;
+declare const brandpageBackgroundSettingsTr: (key: any) => any;
+declare const loginMessageTr: (key: any) => any;
+declare const cookieTr: (key: any) => any;
+declare const logoSelectionTr: (key: any) => any;
+declare const googleAddressFieldTr: (key: any) => any;
+declare const myDesignsTr: (key: any) => any;
+declare const pageSettingTr: (key: any) => any;
+declare const shapeLibraryTr: (key: any) => any;
+declare const errorTr: (key: any, valuesToInterpolate?: {}) => any;
+declare const dropzoneUploaderTr: (key: any) => any;
+declare const shopTr: (key: any) => any;
+declare const paymentTr: (key: any, valuesToInterpolate?: {}) => any;
+declare const publishBrandPageModalWithStateTr: (key: any, valuesToInterpolate?: {}) => any;
+declare const existingDomainModalTr: (key: any) => any;
+declare const sensitiveContentModalTr: (key: any, valuesToInterpolate?: {}) => any;
+declare const quickLinkBarTr: (key: any) => any;
+export { setLocaleAsync, tr, modelsTr, commonTr, actionBarTr, brandPageSettingsTr, colorPaletteTr, navigationTr, converterTr, backgroundSettingsTr, colorPickerTr, colorReplacementFieldTr, contentSettingsTr, formFieldsTr, genericTextInputTr, imageFieldTr, imagesFieldTr, linksFieldTr, logoSelectionSettingsTr, paymentConfigTr, replaceImageSettingTr, shapeFieldTr, testimonialItemsFieldTr, textFieldTr, textImageFieldTr, textItemsFieldTr, textStyleFieldTr, textAreaFieldTr, productConfigOptionTr, editLogoSettingsTr, myUploadSettingsTr, pageSettingsTr, pageSettingsSectionTr, templateSettingsTr, unsplashLibraryTr, seoSettingsTr, styleSettingsTr, sensitiveSettingTr, socialShareTr, cookieSettingTr, googleAnalyticsTr, colorFieldTr, validatorTr, constantsTr, layoutSwitcherTr, brandpageBackgroundSettingsTr, loginMessageTr, cookieTr, logoSelectionTr, googleAddressFieldTr, myDesignsTr, pageSettingTr, shapeLibraryTr, errorTr, dropzoneUploaderTr, shopTr, paymentTr, publishBrandPageModalWithStateTr, existingDomainModalTr, sensitiveContentModalTr, quickLinkBarTr, };

package/lib/src/composables/useTranslate.js

@@ -1,5 +1,6 @@
 import i18next from 'i18next';
 import { setSharedLibLocaleAsync } from '@designcrowd/fe-shared-lib';
+import { getCurrentInstance } from 'vue';
 const fallbackLocale = 'en-US';
 const supportedLocales = [
     'en-US',
@@ -16,9 +17,14 @@ const relativePathsToTranslationFiles = {
     'es-ES': () => import('../bundles/bundled-translations.es-ES.json'),
     'pt-PT': () => import('../bundles/bundled-translations.pt-PT.json'),
 };
+export const createNewI18nInstance = () => i18next.createInstance();
+const getI18NextInstance = () => {
+    const vueInstance = getCurrentInstance();
+    return vueInstance?.appContext.app?.i18next || i18next;
+};
 const setLocaleAsync = async (locale) => {
-    let localeToUse = locale;
-    if (!supportedLocales.includes(locale)) {
+    let localeToUse = locale || fallbackLocale;
+    if (!supportedLocales.includes(localeToUse)) {
         localeToUse = fallbackLocale;
     }
     let languageFile = (await relativePathsToTranslationFiles[localeToUse]())
@@ -28,18 +34,22 @@ const setLocaleAsync = async (locale) => {
         console.log(`Falling back to ${fallbackLocale}`);
         languageFile = (await relativePathsToTranslationFiles['en-US']()).default;
     }
-    if (!i18next.isInitialized) {
-        await i18next.init({
+    const i18 = getI18NextInstance();
+    if (!i18.isInitialized) {
+        await i18.init({
             debug: false,
             fallbackLng: fallbackLocale,
             lng: localeToUse,
         });
     }
-    await i18next.addResourceBundle(localeToUse, 'bp', { ...languageFile });
+    await i18.addResourceBundle(localeToUse, 'bp', { ...languageFile });
     await setSharedLibLocaleAsync(localeToUse);
 };
 const tr = (key, valuesToInterpolate = {}, nameSpace = 'bp') => {
-    const translated = i18next.t(key, { ns: nameSpace, ...valuesToInterpolate });
+    const translated = getI18NextInstance().t(key, {
+        ns: nameSpace,
+        ...valuesToInterpolate,
+    });
     // console.log('tr', i18next);
     // console.log('translated', key, translated);
     return translated;
@@ -101,5 +111,6 @@ const shopTr = (key) => tr(`shop.${key}`);
 const paymentTr = (key, valuesToInterpolate = {}) => tr(`payment.${key}`, valuesToInterpolate);
 const publishBrandPageModalWithStateTr = (key, valuesToInterpolate = {}) => tr(`publishBrandPageModalWithState.${key}`, valuesToInterpolate);
 const existingDomainModalTr = (key) => tr(`existingDomainModal.${key}`);
+const sensitiveContentModalTr = (key, valuesToInterpolate = {}) => tr(`sensitiveContentModal.${key}`, valuesToInterpolate);
 const quickLinkBarTr = (key) => tr(`quickLinkBar.${key}`);
-export { setLocaleAsync, tr, modelsTr, commonTr, actionBarTr, brandPageSettingsTr, colorPaletteTr, navigationTr, converterTr, backgroundSettingsTr, colorPickerTr, colorReplacementFieldTr, contentSettingsTr, formFieldsTr, genericTextInputTr, imageFieldTr, imagesFieldTr, linksFieldTr, logoSelectionSettingsTr, paymentConfigTr, replaceImageSettingTr, shapeFieldTr, testimonialItemsFieldTr, textFieldTr, textImageFieldTr, textItemsFieldTr, textStyleFieldTr, textAreaFieldTr, productConfigOptionTr, editLogoSettingsTr, myUploadSettingsTr, pageSettingsTr, pageSettingsSectionTr, templateSettingsTr, unsplashLibraryTr, seoSettingsTr, styleSettingsTr, sensitiveSettingTr, socialShareTr, cookieSettingTr, googleAnalyticsTr, colorFieldTr, validatorTr, constantsTr, layoutSwitcherTr, brandpageBackgroundSettingsTr, loginMessageTr, cookieTr, logoSelectionTr, googleAddressFieldTr, myDesignsTr, pageSettingTr, shapeLibraryTr, errorTr, dropzoneUploaderTr, shopTr, paymentTr, publishBrandPageModalWithStateTr, existingDomainModalTr, quickLinkBarTr, };
+export { setLocaleAsync, tr, modelsTr, commonTr, actionBarTr, brandPageSettingsTr, colorPaletteTr, navigationTr, converterTr, backgroundSettingsTr, colorPickerTr, colorReplacementFieldTr, contentSettingsTr, formFieldsTr, genericTextInputTr, imageFieldTr, imagesFieldTr, linksFieldTr, logoSelectionSettingsTr, paymentConfigTr, replaceImageSettingTr, shapeFieldTr, testimonialItemsFieldTr, textFieldTr, textImageFieldTr, textItemsFieldTr, textStyleFieldTr, textAreaFieldTr, productConfigOptionTr, editLogoSettingsTr, myUploadSettingsTr, pageSettingsTr, pageSettingsSectionTr, templateSettingsTr, unsplashLibraryTr, seoSettingsTr, styleSettingsTr, sensitiveSettingTr, socialShareTr, cookieSettingTr, googleAnalyticsTr, colorFieldTr, validatorTr, constantsTr, layoutSwitcherTr, brandpageBackgroundSettingsTr, loginMessageTr, cookieTr, logoSelectionTr, googleAddressFieldTr, myDesignsTr, pageSettingTr, shapeLibraryTr, errorTr, dropzoneUploaderTr, shopTr, paymentTr, publishBrandPageModalWithStateTr, existingDomainModalTr, sensitiveContentModalTr, quickLinkBarTr, };

package/lib/src/css/library.brand-page-brandCrowd.min.css

@@ -8637,7 +8637,7 @@ input[type='number'][data-v-28a532b4] {
 }
 }
 
-.modal-content-container[data-v-d079fbaa] {
+.modal-content-container[data-v-d980574d] {
   height: 100%;
   min-height: 100vh;
   width: 100%;
@@ -8657,7 +8657,7 @@ input[type='number'][data-v-28a532b4] {
   padding-top: 15vh;
   background-color: rgba(0, 0, 0, 1);
 }
-.button-container[data-v-d079fbaa] {
+.button-container[data-v-d980574d] {
   margin-bottom: 0.5rem;
   display: -webkit-box;
   display: -ms-flexbox;
@@ -8669,7 +8669,7 @@ input[type='number'][data-v-28a532b4] {
           flex-direction: column;
   gap: 0.5rem;
 }
-.primary-button[data-v-d079fbaa] {
+.primary-button[data-v-d980574d] {
   width: 100%;
   cursor: pointer;
   border-radius: 0.375rem;
@@ -8683,7 +8683,7 @@ input[type='number'][data-v-28a532b4] {
   -webkit-transition: background-color 0.2s;
   transition: background-color 0.2s;
 }
-.secondary-button[data-v-d079fbaa] {
+.secondary-button[data-v-d980574d] {
   width: 100%;
   cursor: pointer;
   padding: 0.75rem;
@@ -8692,6 +8692,6 @@ input[type='number'][data-v-28a532b4] {
   -webkit-transition: background-color 0.2s;
   transition: background-color 0.2s;
 }
-.primary-button[data-v-d079fbaa]:hover {
+.primary-button[data-v-d980574d]:hover {
   background-color: rgba(255, 255, 255, 0.1);
 }

package/lib/src/css/library.brand-page-brandPage.min.css

@@ -8965,7 +8965,7 @@ input[type='number'][data-v-28a532b4] {
 }
 }
 
-.modal-content-container[data-v-d079fbaa] {
+.modal-content-container[data-v-d980574d] {
   height: 100%;
   min-height: 100vh;
   width: 100%;
@@ -8985,7 +8985,7 @@ input[type='number'][data-v-28a532b4] {
   padding-top: 15vh;
   background-color: rgba(0, 0, 0, 1);
 }
-.button-container[data-v-d079fbaa] {
+.button-container[data-v-d980574d] {
   margin-bottom: 0.5rem;
   display: -webkit-box;
   display: -ms-flexbox;
@@ -8997,7 +8997,7 @@ input[type='number'][data-v-28a532b4] {
           flex-direction: column;
   gap: 0.5rem;
 }
-.primary-button[data-v-d079fbaa] {
+.primary-button[data-v-d980574d] {
   width: 100%;
   cursor: pointer;
   border-radius: 0.375rem;
@@ -9011,7 +9011,7 @@ input[type='number'][data-v-28a532b4] {
   -webkit-transition: background-color 0.2s;
   transition: background-color 0.2s;
 }
-.secondary-button[data-v-d079fbaa] {
+.secondary-button[data-v-d980574d] {
   width: 100%;
   cursor: pointer;
   padding: 0.75rem;
@@ -9020,6 +9020,6 @@ input[type='number'][data-v-28a532b4] {
   -webkit-transition: background-color 0.2s;
   transition: background-color 0.2s;
 }
-.primary-button[data-v-d079fbaa]:hover {
+.primary-button[data-v-d980574d]:hover {
   background-color: rgba(255, 255, 255, 0.1);
 }

package/lib/src/css/library.brand-page-designCom.min.css

@@ -8655,7 +8655,7 @@ input[type='number'][data-v-28a532b4] {
 }
 }
 
-.modal-content-container[data-v-d079fbaa] {
+.modal-content-container[data-v-d980574d] {
   height: 100%;
   min-height: 100vh;
   width: 100%;
@@ -8675,7 +8675,7 @@ input[type='number'][data-v-28a532b4] {
   padding-top: 15vh;
   background-color: rgba(0, 0, 0, 1);
 }
-.button-container[data-v-d079fbaa] {
+.button-container[data-v-d980574d] {
   margin-bottom: 0.5rem;
   display: -webkit-box;
   display: -ms-flexbox;
@@ -8687,7 +8687,7 @@ input[type='number'][data-v-28a532b4] {
           flex-direction: column;
   gap: 0.5rem;
 }
-.primary-button[data-v-d079fbaa] {
+.primary-button[data-v-d980574d] {
   width: 100%;
   cursor: pointer;
   border-radius: 0.375rem;
@@ -8701,7 +8701,7 @@ input[type='number'][data-v-28a532b4] {
   -webkit-transition: background-color 0.2s;
   transition: background-color 0.2s;
 }
-.secondary-button[data-v-d079fbaa] {
+.secondary-button[data-v-d980574d] {
   width: 100%;
   cursor: pointer;
   padding: 0.75rem;
@@ -8710,6 +8710,6 @@ input[type='number'][data-v-28a532b4] {
   -webkit-transition: background-color 0.2s;
   transition: background-color 0.2s;
 }
-.primary-button[data-v-d079fbaa]:hover {
+.primary-button[data-v-d980574d]:hover {
   background-color: rgba(255, 255, 255, 0.1);
 }

package/lib/src/css/library.brand-page-preview.min.css

@@ -8397,7 +8397,7 @@ input[type='number'][data-v-28a532b4] {
 }
 }
 
-.bp .modal-content-container[data-v-d079fbaa] {
+.bp .modal-content-container[data-v-d980574d] {
   height: 100%;
   min-height: 100vh;
   width: 100%;
@@ -8417,7 +8417,7 @@ input[type='number'][data-v-28a532b4] {
   padding-top: 15vh;
   background-color: rgba(0, 0, 0, 1);
 }
-.bp .button-container[data-v-d079fbaa] {
+.bp .button-container[data-v-d980574d] {
   margin-bottom: 0.5rem;
   display: -webkit-box;
   display: -ms-flexbox;
@@ -8429,7 +8429,7 @@ input[type='number'][data-v-28a532b4] {
           flex-direction: column;
   gap: 0.5rem;
 }
-.bp .primary-button[data-v-d079fbaa] {
+.bp .primary-button[data-v-d980574d] {
   width: 100%;
   cursor: pointer;
   border-radius: 0.375rem;
@@ -8443,7 +8443,7 @@ input[type='number'][data-v-28a532b4] {
   -webkit-transition: background-color 0.2s;
   transition: background-color 0.2s;
 }
-.bp .secondary-button[data-v-d079fbaa] {
+.bp .secondary-button[data-v-d980574d] {
   width: 100%;
   cursor: pointer;
   padding: 0.75rem;
@@ -8452,6 +8452,6 @@ input[type='number'][data-v-28a532b4] {
   -webkit-transition: background-color 0.2s;
   transition: background-color 0.2s;
 }
-.bp .primary-button[data-v-d079fbaa]:hover {
+.bp .primary-button[data-v-d980574d]:hover {
   background-color: rgba(255, 255, 255, 0.1);
 }

package/lib/src/index.d.ts

@@ -34,4 +34,5 @@ export { default as GoogleMapsPlugin } from './plugins/google-maps-plugin';
 export { createBrandPageMakerRouter, setRouterInstance, attachRouterHooks, } from './brand-page-maker/routing';
 export { useEventTracker } from './brand-page-maker/composables/useEventTracker';
 export { useConsent, type ConsentType, } from './brand-page/composables/consent.composable';
-export { setLocaleAsync, tr } from './composables/useTranslate';
+export { setLocaleAsync, tr, createNewI18nInstance, } from './composables/useTranslate';
+export type { LocaleTypes } from './composables/useTranslate';