@designcrowd/library.brand-page 5.11.9 → 5.12.0-shape-1

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

@@ -9,7 +9,7 @@ import { BrandPageModel } from '../../../brand-page/models';
 import { migrateBrandPageModel } from '../../../brand-page/utils';
 import { getAiContentIndexByTemplateTokenAndNumberOfVariations } from '../../../brand-page-maker/utils/ai-content-selection.util';
 import { useUiLogoSettingsStore } from '../../logo-settings/store';
-import { templateSettingsTr } from '../../../composables/useTranslate';
+import { templateSettingsTr, getCurrentLocale, } from '../../../composables/useTranslate';
 export const DEFAULT_PAGE_SIZE = 6;
 const LOAD_PAGE_RETRY_DELAY = 250;
 export const useUiTemplateSettingsStore = defineStore('uiTemplateSettings', {
@@ -155,6 +155,7 @@ export const useUiTemplateSettingsStore = defineStore('uiTemplateSettings', {
             this._setIsBusy({ isBusy: true });
             try {
                 const designTemplateClient = DesignTemplateClient.getInstance();
+                const currentLocale = getCurrentLocale();
                 const result = await designTemplateClient.getTemplateItemsByTemplateType(this.templateType, {
                     page: pageNo,
                     pageSize: DEFAULT_PAGE_SIZE,
@@ -163,6 +164,7 @@ export const useUiTemplateSettingsStore = defineStore('uiTemplateSettings', {
                     logoDraftToken: logoSettingsStore.selectedLogoImage.logoDraftToken,
                     personalisable: this.selectedTab.key === TEMPLATE_TABS.AI,
                     selectedTemplateToken: designTemplateToken,
+                    locale: currentLocale,
                 });
                 if (!result) {
                     return;

package/package.json

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

package/src/brand-page/components/background-shape/BackgroundShape.mixin.ts

@@ -21,7 +21,7 @@ export default defineComponent({
     },
   },
   data() {
-    return { svgData: '', originalSvgData: '' };
+    return { svgData: '', svgDataObjectUrl: '', originalSvgData: '' };
   },
   computed: {
     useObjectElement(): boolean {
@@ -49,6 +49,14 @@ export default defineComponent({
 
       return attributes.join(' ');
     },
+
+    objectUrl(): string {
+      if (!this.useObjectElement) {
+        return this.svgDataObjectUrl;
+      }
+
+      return this.viewModel.name;
+    },
   },
   watch: {
     'viewModel.style.color': {
@@ -79,6 +87,11 @@ export default defineComponent({
         return;
       }
 
+      if (this.svgDataObjectUrl) {
+        // clean up previous Object URL
+        URL.revokeObjectURL(this.svgDataObjectUrl);
+      }
+
       if (isURL(this.viewModel.name)) {
         if (!this.isValidSvgUrl(this.viewModel.name)) {
           return;
@@ -102,6 +115,11 @@ export default defineComponent({
         '<svg ',
         `<svg ${this.svgAttributes} `,
       );
+
+      const blob = new Blob([this.svgData], { type: 'image/svg+xml' });
+
+      // Create an Object URL
+      this.svgDataObjectUrl = URL.createObjectURL(blob);
     },
   },
 });

package/src/brand-page/components/background-shape/BackgroundShape.vue

@@ -1,18 +1,8 @@
 <template>
   <div class="c-shape-background">
-    <div
-      v-if="useObjectElement"
-      :style="backgroundShapesStyle"
-      class="c-shape c-shape-object"
-    >
-      <object class="tw-w-full tw-h-full" :data="viewModel.name" />
+    <div :style="backgroundShapesStyle" class="c-shape c-shape-object">
+      <object class="tw-w-full tw-h-full" :data="objectUrl" />
     </div>
-    <div
-      v-else
-      :style="backgroundShapesStyle"
-      class="c-shape"
-      v-html="svgData"
-    />
   </div>
 </template>
 <script>

package/src/brand-page/components/media/Shape.mixin.ts

@@ -34,7 +34,7 @@ export default defineComponent({
     },
   },
   data() {
-    return { svgData: '', originalSvgData: '' };
+    return { svgData: '', svgDataObjectUrl: '', originalSvgData: '' };
   },
   computed: {
     useObjectElement(): boolean {
@@ -53,6 +53,10 @@ export default defineComponent({
     },
 
     objectUrl() {
+      if (!this.useObjectElement) {
+        return this.svgDataObjectUrl;
+      }
+
       let dimensionQuery = ``;
 
       if (this.size) {
@@ -68,7 +72,7 @@ export default defineComponent({
       const attributes: string[] = [];
 
       if (this.size) {
-        attributes.push(`height=${this.size} width=${this.size}`);
+        attributes.push(`height="${this.size}" width="${this.size}"`);
       }
 
       return attributes.join(' ');
@@ -125,6 +129,11 @@ export default defineComponent({
         return;
       }
 
+      if (this.svgDataObjectUrl) {
+        // clean up previous Object URL
+        URL.revokeObjectURL(this.svgDataObjectUrl);
+      }
+
       this.svgData = applyColorReplacementsToSvgString(
         this.originalSvgData,
         this.colorReplacements,
@@ -134,6 +143,11 @@ export default defineComponent({
         '<svg ',
         `<svg ${this.svgAttributes} `,
       );
+
+      const blob = new Blob([this.svgData], { type: 'image/svg+xml' });
+
+      // Create an Object URL
+      this.svgDataObjectUrl = URL.createObjectURL(blob);
     },
   },
 });

package/src/brand-page/components/media/Shape.vue

@@ -1,18 +1,11 @@
 <template>
   <div :class="imgClasses">
     <div
-      v-if="useObjectElement"
       class="c-shape c-shape-object"
       :class="{ 'tw-flex tw-justify-center tw-items-center': size }"
     >
       <object :style="objectStyle" :data="objectUrl" />
     </div>
-    <div
-      v-else
-      class="c-shape"
-      :class="{ 'tw-flex tw-justify-center tw-items-center': size }"
-      v-html="svgData"
-    />
   </div>
 </template>
 <script>

package/src/clients/design-template-client.ts

@@ -24,6 +24,7 @@ interface GetTemplatesAsyncOptions {
   pageSize?: number;
   personalisable?: boolean;
   selectedTemplateToken?: string | false;
+  locale?: string;
 }
 
 export const getTemplatesEndpoint = (templateTypeName: string) =>

package/src/clients/template-client.js

@@ -143,6 +143,7 @@ export default class TemplateClient {
     pageSize,
     selectedTemplateToken,
     aiSettings,
+    locale,
   ) {
     try {
       const contentKey = aiSettings?.contentKey || null;
@@ -160,6 +161,11 @@ export default class TemplateClient {
         personalisable: !!contentKey && !!userToken,
         pageName: this.getPageName(),
       };
+
+      if (locale) {
+        params.locale = locale;
+      }
+
       if (this.isTrackingEnabled()) {
         params['pageSection'] = this.getPageSection();
       }

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

@@ -27,7 +27,10 @@ import { BrandPageModel } from '../../../brand-page/models';
 import { migrateBrandPageModel } from '../../../brand-page/utils';
 import { getAiContentIndexByTemplateTokenAndNumberOfVariations } from '../../../brand-page-maker/utils/ai-content-selection.util';
 import { useUiLogoSettingsStore } from '../../logo-settings/store';
-import { templateSettingsTr } from '../../../composables/useTranslate';
+import {
+  templateSettingsTr,
+  getCurrentLocale,
+} from '../../../composables/useTranslate';
 
 export const DEFAULT_PAGE_SIZE = 6;
 const LOAD_PAGE_RETRY_DELAY = 250;
@@ -245,6 +248,8 @@ export const useUiTemplateSettingsStore = defineStore('uiTemplateSettings', {
       try {
         const designTemplateClient = DesignTemplateClient.getInstance();
 
+        const currentLocale = getCurrentLocale();
+
         const result =
           await designTemplateClient.getTemplateItemsByTemplateType(
             this.templateType,
@@ -257,6 +262,7 @@ export const useUiTemplateSettingsStore = defineStore('uiTemplateSettings', {
                 logoSettingsStore.selectedLogoImage.logoDraftToken,
               personalisable: this.selectedTab.key === TEMPLATE_TABS.AI,
               selectedTemplateToken: designTemplateToken,
+              locale: currentLocale,
             },
           );