@designcrowd/library.brand-page 6.1.6-use-isadminmaker-2 → 6.1.6

package/src/shared/content-settings/components/testimonial-items-field/TestimonialItemsField.mixin.ts

@@ -43,7 +43,7 @@ export default defineComponent({
       type: Object as PropType<LogoTheme>,
       required: true,
     },
-    isAdmin: {
+    isAdminMaker: {
       type: Boolean,
       required: true,
     },

package/src/shared/content-settings/components/testimonial-items-field/TestimonialItemsField.vue

@@ -51,7 +51,7 @@
           {{ testimonialMaxLengthErrorMessage }}
         </p>
         <PersonalisationOverrideField
-          v-if="isAdmin && content.personalisationRole"
+          v-if="isAdminMaker && content.personalisationRole"
           :id="id"
           name="testimonialsOverride"
           :content="content"
@@ -72,7 +72,7 @@
           @update:model-value="onRemoveImage(option.index)"
         />
         <PersonalisationOverrideField
-          v-if="isAdmin && content.personalisationRole"
+          v-if="isAdminMaker && content.personalisationRole"
           :id="id"
           name="imageUrlOverride"
           :content="content"
@@ -108,7 +108,7 @@
                 : ''
             "
             :value="option.item.colorReplacements"
-            :is-admin="isAdmin"
+            :is-admin-maker="isAdminMaker"
             :logo-theme="logoTheme"
             :toggle-unique-id="option.index.toString()"
             @update:model-value="
@@ -136,7 +136,7 @@
           {{ testimonialMaxLengthErrorMessage }}
         </p>
         <PersonalisationOverrideField
-          v-if="isAdmin && content.personalisationRole"
+          v-if="isAdminMaker && content.personalisationRole"
           :id="id"
           name="nameOverride"
           :content="content"
@@ -167,7 +167,7 @@
           {{ testimonialMaxLengthErrorMessage }}
         </p>
         <PersonalisationOverrideField
-          v-if="isAdmin && content.personalisationRole"
+          v-if="isAdminMaker && content.personalisationRole"
           :id="id"
           name="positionOverride"
           :content="content"

package/src/shared/content-settings/components/text-image-field/TextImageField.vue

@@ -51,7 +51,7 @@
         />
 
         <PersonalisationOverrideField
-          v-if="isAdmin && content.personalisationRole"
+          v-if="isAdminMaker && content.personalisationRole"
           :id="id"
           name="imageUrlOverride"
           :content="content"
@@ -80,7 +80,7 @@
               : ''
           "
           :value="option.item.colorReplacements"
-          :is-admin="isAdmin"
+          :is-admin-maker="isAdminMaker"
           :logo-theme="logoTheme"
           :toggle-unique-id="option.index.toString()"
           @update:model-value="onColorReplacementsChange($event, option.index)"
@@ -106,7 +106,7 @@
           {{ maxLengthError }}
         </p>
         <PersonalisationOverrideField
-          v-if="isAdmin && content.personalisationRole"
+          v-if="isAdminMaker && content.personalisationRole"
           :id="id"
           name="titleOverride"
           :content="content"
@@ -140,7 +140,7 @@
           @update:model-value="onTextAreaTextChange($event, option.index)"
         />
         <PersonalisationOverrideField
-          v-if="isAdmin && content.personalisationRole"
+          v-if="isAdminMaker && content.personalisationRole"
           :id="id"
           name="paragraphOverride"
           :content="content"
@@ -179,7 +179,7 @@
               {{ maxLengthError }}
             </p>
             <PersonalisationOverrideField
-              v-if="isAdmin && content.personalisationRole"
+              v-if="isAdminMaker && content.personalisationRole"
               :id="id"
               name="imageTitleOverride"
               :content="content"
@@ -193,7 +193,7 @@
           <ButtonConfigurationField
             :id="id"
             :index="option.index"
-            :is-admin="isAdmin"
+            :is-admin-maker="isAdminMaker"
             :button-config="{
               buttonText: options[option.index].buttonText ?? false,
               buttonLinkType: options[option.index].buttonLinkType || 'url',
@@ -325,7 +325,7 @@ interface Props {
   maxLength?: number;
   logoTheme: LogoTheme;
   settings: any;
-  isAdmin: boolean;
+  isAdminMaker: boolean;
   brandPageType?: string;
 }
 

package/src/shared/content-settings/components/text-items-field/TextItemsField.mixin.test.ts

@@ -41,7 +41,7 @@ const mountHost = () =>
       name: 'textItems',
       content: { id: 'item-1', type: 'text' } as Content,
       value: [makeTextItem('<p>one</p>'), makeTextItem('<p>two</p>')],
-      isAdmin: false,
+      isAdminMaker: false,
       logoTheme: {
         logoTextColor: '#000000',
         logoBackgroundColor: '#ffffff',

package/src/shared/content-settings/components/text-items-field/TextItemsField.mixin.ts

@@ -43,7 +43,7 @@ export default defineComponent({
       type: Array as PropType<TextItem[]>,
       required: true,
     },
-    isAdmin: {
+    isAdminMaker: {
       type: Boolean,
       required: true,
     },

package/src/shared/content-settings/components/text-items-field/TextItemsField.vue

@@ -43,7 +43,7 @@
           @update:model-value="onTextAreaTextChange($event, option.index)"
         />
         <PersonalisationOverrideField
-          v-if="isAdmin && content.personalisationRole"
+          v-if="isAdminMaker && content.personalisationRole"
           :id="id"
           name="textOverride"
           :content="content"
@@ -57,7 +57,7 @@
           v-if="!showRichTextEditor"
           :id="`text-style-field-${option.index}`"
           :key="`text-style-field-${option.index}`"
-          :is-admin="isAdmin"
+          :is-admin-maker="isAdminMaker"
           :value="options[option.index].textStyle"
           :logo-theme="logoTheme"
           :show-font-style-only="true"

package/src/shared/content-settings/components/text-style-field/TextStyleField.mixin.ts

@@ -83,7 +83,7 @@ export default defineComponent({
       type: Object as PropType<TextStyleDeclaration>,
       required: true,
     },
-    isAdmin: {
+    isAdminMaker: {
       type: Boolean,
       required: true,
     },

package/src/shared/content-settings/components/text-style-field/TextStyleField.vue

@@ -134,7 +134,7 @@
         :name="name"
         :value="textColorValue"
         :options="textColorOptions"
-        :is-admin="isAdmin"
+        :is-admin-maker="isAdminMaker"
         :logo-theme="logoTheme"
         :is-toggled="false"
         :disable-transparent="true"
@@ -153,7 +153,7 @@
         :name="name"
         :value="textBackgroundColorValue"
         :options="textBackgroundColorOptions"
-        :is-admin="isAdmin"
+        :is-admin-maker="isAdminMaker"
         :logo-theme="logoTheme"
         :is-toggled="false"
         @update:model-value="onSelectBackgroundColor"

package/src/shared/logo-settings/store/editable-logo-store.test.ts

@@ -0,0 +1,90 @@
+import { createPinia, setActivePinia } from 'pinia';
+import { useLogoStore } from '@brand-page-maker/stores';
+import { useUiEditableLogoStore } from './editable-logo-store';
+import { FabricRenderClient } from '../../../clients/fabric-render-client';
+
+const LOGO_TEMPLATE_TOKEN = '46059687-5bed-4fc0-b933-7563d236d66f';
+const BRAND_KIT_DRAFT_TOKEN = '6bfd97ca-1359-4ad7-aa99-4ee70f334d7c';
+const CLIENT_MINTED_TOKEN = '11111111-2222-3333-4444-555555555555';
+
+describe('editable logo store — postEditableLogoRequestAsync body', () => {
+  let getModifiedLogoAsyncMock: ReturnType<typeof vi.fn>;
+
+  beforeEach(() => {
+    setActivePinia(createPinia());
+
+    const logoStore = useLogoStore();
+
+    logoStore.setLogoTemplateAsset({
+      token: LOGO_TEMPLATE_TOKEN,
+      version: 1,
+    } as any);
+
+    getModifiedLogoAsyncMock = vi.fn().mockResolvedValue({
+      base64: null,
+      metadata: '{"objects":[]}',
+      width: 0,
+      height: 0,
+    });
+    vi.spyOn(FabricRenderClient, 'getInstance').mockReturnValue({
+      getModifiedLogoAsync: getModifiedLogoAsyncMock,
+    } as unknown as FabricRenderClient);
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  async function requestBodyForState(state: {
+    logoDraftToken: string;
+    prePurchaseBrandKitLogoDraftToken: string;
+  }) {
+    const store = useUiEditableLogoStore();
+
+    store.logoDraftToken = state.logoDraftToken;
+    store.prePurchaseBrandKitLogoDraftToken =
+      state.prePurchaseBrandKitLogoDraftToken;
+
+    await store.postEditableLogoRequestAsync({
+      returnJson: true,
+      dimensionType: 'preview_image_transparent_no_buffer',
+      variationType: '',
+    });
+
+    expect(getModifiedLogoAsyncMock).toHaveBeenCalledTimes(1);
+
+    return getModifiedLogoAsyncMock.mock.calls[0][0];
+  }
+
+  it('sends the seeded draft AND disableAutoLayout on a Brand Kit render', async () => {
+    const body = await requestBodyForState({
+      logoDraftToken: BRAND_KIT_DRAFT_TOKEN,
+      prePurchaseBrandKitLogoDraftToken: BRAND_KIT_DRAFT_TOKEN,
+    });
+
+    // BP-6010: the draft's authored arrangement must survive the render, so
+    // the opt-out from fabric-render's default re-stack rides with the draft.
+    expect(body.logo.draft).toEqual({ token: BRAND_KIT_DRAFT_TOKEN });
+    expect(body.disableAutoLayout).toBe(true);
+  });
+
+  it('sends neither on a template-seeded render (no Brand Kit seed)', async () => {
+    const body = await requestBodyForState({
+      logoDraftToken: CLIENT_MINTED_TOKEN,
+      prePurchaseBrandKitLogoDraftToken: '',
+    });
+
+    expect(body.logo.draft).toBeNull();
+    expect(body.disableAutoLayout).toBeUndefined();
+  });
+
+  it('sends neither after a logo swap replaces the seeded draft', async () => {
+    const body = await requestBodyForState({
+      logoDraftToken: CLIENT_MINTED_TOKEN,
+      prePurchaseBrandKitLogoDraftToken: BRAND_KIT_DRAFT_TOKEN,
+    });
+
+    expect(body.logo.draft).toBeNull();
+    expect(body.disableAutoLayout).toBeUndefined();
+  });
+});

package/src/shared/logo-settings/store/editable-logo-store.ts

@@ -110,6 +110,12 @@ export interface EditableLogoVariation {
 export interface EditableLogoState {
   enableEditMode: boolean;
   logoDraftToken: string;
+  // BP-5962: the REAL server draft this editor was seeded with (the Brand Kit
+  // Edit flow - a frozen copy of the user's logo), or '' for template-seeded
+  // flows. Distinct from logoDraftToken, which is often a client-minted uuid
+  // that does not exist on the server (the initialise fallback, in-editor
+  // logo swaps, BYO uploads) and must never be sent to fabric-render.
+  prePurchaseBrandKitLogoDraftToken: string;
   logoEdits: LogoEdits;
   makerFonts: MakerFontObject[];
   editableLogoVariations: EditableLogoVariation[];
@@ -133,6 +139,7 @@ export const useUiEditableLogoStore = defineStore('uiEditableLogo', {
     isTextOnlyLogo: false,
     enableEditMode: false,
     logoDraftToken: '',
+    prePurchaseBrandKitLogoDraftToken: '',
     editableLogoVariations: [
       {
         variationId: LOGO_VARIATION.LOGO_WITH_TRANSPARENT_BACKGROUND,
@@ -206,6 +213,8 @@ export const useUiEditableLogoStore = defineStore('uiEditableLogo', {
     }) {
       this.resetLogoEdits();
       this.setLogoDraftToken(payload.newState.logoDraftToken);
+      this.prePurchaseBrandKitLogoDraftToken =
+        payload.newState.prePurchaseBrandKitLogoDraftToken || '';
       this.makerFonts = payload.newState.makerFonts;
 
       const templateMetaResult = await this.postEditableLogoRequestAsync({
@@ -625,17 +634,35 @@ export const useUiEditableLogoStore = defineStore('uiEditableLogo', {
 
       const hasLayout = !!payload?.layout;
 
+      // BP-5962: render from the Brand Kit seeded draft (a frozen copy of the
+      // user's logo) so canvas-level edits - curved text, moved objects and
+      // anything else updateLogoEdit's whitelist can't express - survive into
+      // the editor; the changeRequest still layers the editor's own edits on
+      // top. Only while the current logo IS that draft: a logo swap or a BYO
+      // upload replaces logoDraftToken with a client-minted uuid that does not
+      // exist on the server, and template-seeded flows never seed one - both
+      // keep the template-only request exactly as before.
+      const isBrandKitSeededRender =
+        !!this.prePurchaseBrandKitLogoDraftToken &&
+        this.logoDraftToken === this.prePurchaseBrandKitLogoDraftToken;
+
       const body: ModifyLogoDataRequest = {
         returnJson: payload?.returnJson || false,
         generateS3Url: true,
         dimensionsType: payload?.dimensionType,
         variation: payload?.variationType,
+        // BP-6010: a draft-based render must keep the draft's authored
+        // arrangement - opt out of fabric-render's default re-stack. Rides the
+        // same condition as the draft so the two can never drift apart.
+        disableAutoLayout: isBrandKitSeededRender ? true : undefined,
         logo: {
           template: {
             token: logoStore.logoTemplateAsset!.token,
             version: logoStore.logoTemplateAsset!.version,
           },
-          draft: null,
+          draft: isBrandKitSeededRender
+            ? { token: this.prePurchaseBrandKitLogoDraftToken }
+            : null,
         },
         changeRequest: {
           objects: {

package/src/shared/my-uploads/MyUploads.mixin.ts

@@ -69,7 +69,7 @@ export default defineComponent({
       dropzoneImageUploaderRef,
       endpoints: computed(() => uiStore.endpoints),
       uiStore,
-      isAdmin: computed(() => !!containerStore.isAdminMaker),
+      isAdminMaker: computed(() => !!containerStore.isAdminMaker),
       isLoggedIn: computed(() => !!userStore.emailAddress),
     };
   },

package/src/shared/my-uploads/MyUploads.vue

@@ -1,6 +1,6 @@
 <!-- eslint-disable vue/no-deprecated-slot-attribute -->
 <template>
-  <LoginRequiredMessage v-if="!isLoggedIn && !isAdmin" />
+  <LoginRequiredMessage v-if="!isLoggedIn && !isAdminMaker" />
   <div v-else>
     <DropzoneImageUploader
       ref="dropzoneImageUploaderRef"

package/src/shared/navigation-style-settings/components/navigation-style-settings/NavigationStyleSettings.mixin.ts

@@ -25,7 +25,7 @@ export default defineComponent({
       type: Array as PropType<NavigationStyleConfig[]>,
       required: true,
     },
-    isAdmin: {
+    isAdminMaker: {
       type: Boolean,
       required: true,
     },

package/src/shared/navigation-style-settings/components/navigation-style-settings/NavigationStyleSettings.vue

@@ -13,7 +13,7 @@
         id="navigation-hamburger-default-button-style"
         key="navigation-hamburger-default-button-style"
         name="Default text style"
-        :is-admin="isAdmin"
+        :is-admin-maker="isAdminMaker"
         :label="commonTr('defaultTextStyle')"
         :logo-theme="logoTheme"
         :value="value.hamburgerMenuStyle.defaultButtonStyle"
@@ -24,7 +24,7 @@
         id="navigation-default-button-style"
         key="navigation-default-button-style"
         name="Default text style"
-        :is-admin="isAdmin"
+        :is-admin-maker="isAdminMaker"
         :label="commonTr('defaultTextStyle')"
         :logo-theme="logoTheme"
         :value="value.defaultButtonStyle"
@@ -41,8 +41,8 @@
       :key="index"
       class="tw-flex tw-justify-between tw-w-full"
       :class="{
-        'tw-items-start': isAdmin,
-        'tw-items-center': !isAdmin,
+        'tw-items-start': isAdminMaker,
+        'tw-items-center': !isAdminMaker,
         'tw-mb-4': index < navigationStyleOptions.length - 1,
       }"
     >
@@ -50,12 +50,12 @@
         <p
           class="tw-font-sans tw-font-bold tw-text-secondary-800 tw-text-sm tw-break-words"
           :class="{
-            'tw-mb-2': isAdmin,
+            'tw-mb-2': isAdminMaker,
           }"
         >
           {{ navigationStyleConfigOptionTitles[option] }}
         </p>
-        <div v-if="isAdmin">
+        <div v-if="isAdminMaker">
           <Toggle
             :id="`${option}-color-matched`"
             :model-value="isOptionColorMatched(option)"
@@ -69,14 +69,14 @@
 
       <!-- Start style option color picker -->
       <div
-        v-if="(isAdmin && !isOptionColorMatched(option)) || !isAdmin"
+        v-if="(isAdminMaker && !isOptionColorMatched(option)) || !isAdminMaker"
         class="tw-flex-none"
       >
         <ColorField
           id="navigationStyle"
           name="navigationStyle"
           :value="colorPickerValue(option)"
-          :is-admin="isAdmin"
+          :is-admin-maker="isAdminMaker"
           :is-toggled="false"
           :logo-theme="logoTheme"
           :disable-transparent="
@@ -89,7 +89,10 @@
       <!-- End style option color picker -->
 
       <!-- Start Admin Style Theme Key Select -->
-      <div v-if="isAdmin && isOptionColorMatched(option)" class="tw-flex-none">
+      <div
+        v-if="isAdminMaker && isOptionColorMatched(option)"
+        class="tw-flex-none"
+      >
         <select
           class="c-select c-button-style tw-border tw-appearance-none tw-border-none tw-h-10 tw-pl-2 tw-pr-8 tw-rounded tw-cursor-pointer tw-transition-all tw-duration-300 tw-bg-white"
           @change.stop="onColorPickerInput(option, $event.target.value)"

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

@@ -231,7 +231,7 @@ export default defineComponent({
       ),
       sections: computed(() => pageSettingsStore.sections),
       features: computed(() => userStore.features),
-      isAdmin: computed(() => brandPageContainerStore.isAdminMaker),
+      isAdminMaker: computed(() => brandPageContainerStore.isAdminMaker),
       isBrandSite: computed(() => brandPageMakerStore.isBrandSite),
       navigationStyleTypeConfigs: computed(
         () => navigationSettingsStore.navigationStyleTypeConfigs,

package/src/shared/page-settings/components/page-settings/PageSettings.vue

@@ -49,7 +49,7 @@
       >
         <PageSettingsSectionStyles
           section-name="header"
-          :is-admin="isAdmin"
+          :is-admin-maker="isAdminMaker"
           :is-brand-site="isBrandSite"
           :logo-theme="logoTheme"
           :style-options="headerPageSectionStyleOptions"
@@ -66,14 +66,14 @@
         <PageSettingsSectionStyles
           section-name="footer"
           :font-settings-options="footerFontSettingsOptions"
-          :is-admin="isAdmin"
+          :is-admin-maker="isAdminMaker"
           :is-brand-site="isBrandSite"
           :logo-theme="logoTheme"
           :style-options="footerPageSectionStyleOptions"
         />
 
         <div
-          v-if="!isAdmin && !isPrePurchase && showBrandCrowdLogo"
+          v-if="!isAdminMaker && !isPrePurchase && showBrandCrowdLogo"
           class="tw-flex tw-items-center tw-justify-between tw-cursor-pointer"
           @click="onHideBrandPageLogoClickFromFooter"
         >

package/src/shared/page-settings/components/page-settings-section-styles/PageSettingsSectionStyles.mixin.ts

@@ -75,7 +75,7 @@ export default defineComponent({
       required: false,
       default: () => [],
     },
-    isAdmin: {
+    isAdminMaker: {
       type: Boolean,
       required: true,
     },

package/src/shared/page-settings/components/page-settings-section-styles/PageSettingsSectionStyles.vue

@@ -85,7 +85,7 @@
 
       <NavigationStyleSettings
         :available-navigation-style-configs="availableNavigationStyleConfigs"
-        :is-admin="isAdmin"
+        :is-admin-maker="isAdminMaker"
         :logo-theme="logoTheme"
         :value="navigation"
         @option-value-change="handleHeaderNavigationStyleOptionValueChange"
@@ -155,7 +155,7 @@
         :font-family-options="availableTextFontFamilyOptions"
         :value="fontStyle(option.propName)"
         :show-text-alignment-options="false"
-        :is-admin="isAdmin"
+        :is-admin-maker="isAdminMaker"
         :logo-theme="logoTheme"
         @update:model-value="setTextStyleOption(option.propName, $event)"
       />
@@ -173,7 +173,7 @@
         name="fill"
         :label="commonTr('iconColor')"
         :value="iconColor"
-        :is-admin="isAdmin"
+        :is-admin-maker="isAdminMaker"
         :logo-theme="logoTheme"
         :toggle-unique-id="sectionName"
         :disable-transparent="true"
@@ -194,7 +194,7 @@
         name="backgroundColor"
         :label="commonTr('backgroundColor')"
         :value="backgroundColor"
-        :is-admin="isAdmin"
+        :is-admin-maker="isAdminMaker"
         :logo-theme="logoTheme"
         :toggle-unique-id="sectionName"
         @update:model-value="onSelectColor"

package/src/shared/shape-library/ShapeLibrary.vue

@@ -75,7 +75,7 @@
               <img :src="shape.url" alt="" />
             </figure>
             <div
-              v-if="isAdmin && !shape.isEnabledToAdmin"
+              v-if="isAdminMaker && !shape.isEnabledToAdmin"
               class="tw-absolute tw-text-sm tw-w-full tw-h-full tw-top-0 tw-flex tw-items-end tw-justify-center"
             >
               <span class="tw-text-error-500 tw-mb-1">{{
@@ -94,7 +94,7 @@
           @click="handleShapeOrShapeCollectionSelection(shape)"
         >
           <div
-            v-if="shape.numberOfVariants > 1 && !isAdmin"
+            v-if="shape.numberOfVariants > 1 && !isAdminMaker"
             class="tw-absolute tw-top-2 tw-right-2 tw-bg-grayscale-600 tw-rounded-full tw-flex tw-items-center tw-justify-center tw-h-5 tw-w-5 tw-z-5"
           >
             <span class="tw-text-xs tw-text-white">{{
@@ -105,7 +105,7 @@
             <img :src="shape.url" alt="" />
           </figure>
           <div
-            v-if="isAdmin && !shape.isEnabledToAdmin"
+            v-if="isAdminMaker && !shape.isEnabledToAdmin"
             class="tw-absolute tw-text-sm tw-w-full tw-h-full tw-top-0 tw-flex tw-items-end tw-justify-center"
           >
             <span class="tw-text-error-500 tw-mb-1">{{
@@ -192,7 +192,7 @@ const containerStore = useBrandPageContainerStore();
 const makerStore = useBrandPageMakerStore();
 const sidebarStore = useUiSideBarStore();
 
-const isAdmin = computed(() => containerStore.isAdminMaker);
+const isAdminMaker = computed(() => containerStore.isAdminMaker);
 const isBackgroundTab = computed(
   () => sidebarStore.selectedTabName === 'BackgroundSettings',
 );
@@ -257,7 +257,7 @@ async function getShapesCategories() {
       locale,
     )) as ShapeCategoryModel[];
     shapeLibraryCategories.value = categories.filter(
-      (shape) => isAdmin.value || shape.isEnabled,
+      (shape) => isAdminMaker.value || shape.isEnabled,
     );
   } catch (e) {
     if (process.env.NODE_ENV !== 'production') console.error(e);
@@ -279,7 +279,7 @@ async function getShapes() {
         currentPageSize.value,
         locale,
         makerMode.value,
-        isAdmin.value,
+        isAdminMaker.value,
       )) as ShapeSearchResponseModel;
     totalPageSize.value += newShapes.items.length;
     if (!shapeLibrary.value || !shapeLibrary.value.items) {
@@ -325,7 +325,7 @@ async function onCategoryClicked(shapeCategory: ShapeCategoryModel) {
         currentPageSize.value,
         locale,
         makerMode.value,
-        isAdmin.value,
+        isAdminMaker.value,
       )) as ShapeSearchResponseModel;
     totalPageSize.value += res.items.length;
     if (!shapeLibrary.value || !shapeLibrary.value.items) {
@@ -370,7 +370,7 @@ async function handleShapeOrShapeCollectionSelection(shape: any) {
   if (
     shape.numberOfVariants > 1 &&
     shape.shapeCollectionToken &&
-    !isAdmin.value
+    !isAdminMaker.value
   ) {
     try {
       const shapeCollection =
@@ -401,7 +401,7 @@ async function searchShapes() {
           currentPageSize.value,
           locale,
           makerMode.value,
-          isAdmin.value,
+          isAdminMaker.value,
         )) as ShapeSearchResponseModel;
       totalPageSize.value += res.items.length;
       if (!shapeLibrary.value || !shapeLibrary.value.items) {

package/src/shared/side-bar/components/SideBar.mixin.ts

@@ -38,7 +38,7 @@ export default defineComponent({
       brandPageContainerStore,
       tabs: computed(() => sideBarStore.tabs),
       selectedTabName: computed(() => sideBarStore.selectedTabName),
-      isAdmin: computed(() => brandPageContainerStore.isAdminMaker),
+      isAdminMaker: computed(() => brandPageContainerStore.isAdminMaker),
       contentSettingsMode: computed(() => contentSettingsStore.mode),
       contentSettingsSelectedItemId: computed(
         () => contentSettingsStore.selectedItemId,
@@ -91,11 +91,11 @@ export default defineComponent({
         return false;
       }
 
-      if (this.isAdmin && tab.isDisabledForAdmin) {
+      if (this.isAdminMaker && tab.isDisabledForAdmin) {
         return false;
       }
 
-      if (!this.isAdmin && tab.isEnabledForAdminOnly === true) {
+      if (!this.isAdminMaker && tab.isEnabledForAdminOnly === true) {
         return false;
       }
 

package/src/shared/style-settings/components/StyleSettings.mixin.ts

@@ -69,7 +69,7 @@ export default defineComponent({
       isDefaultTextColorRequired: computed(
         () => uiStore.isDefaultTextColorRequired,
       ),
-      isAdmin: computed(() => brandPageContainerStore.isAdminMaker),
+      isAdminMaker: computed(() => brandPageContainerStore.isAdminMaker),
       brandPageType: computed(() => brandPageMakerStore.brandPageType),
       showBrandCrowdLogo: computed(
         () => brandPageMakerStore.showBrandCrowdLogo,
@@ -143,7 +143,7 @@ export default defineComponent({
     },
   },
   created() {
-    if (this.isAdmin) {
+    if (this.isAdminMaker) {
       // check if the buttons styles are color matched
       Object.keys(this.isColorMatch).forEach((k) => {
         this.isColorMatch[k] =