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

package/src/shared/style-settings/components/StyleSettings.vue

@@ -2,17 +2,17 @@
   <div data-component="style-settings">
     <SideBarSettingsHeader :title="styleSettingsTr(`styleTitle`)" />
     <!-- Start Logo background color -->
-    <StyleSettingsSection v-if="isAdmin">
+    <StyleSettingsSection v-if="isAdminMaker">
       <div class="tw-flex-none">
         <p
           class="tw-font-sans tw-font-bold tw-text-secondary-800 tw-text-sm"
           :class="{
-            'tw-mb-2': isAdmin,
+            'tw-mb-2': isAdminMaker,
           }"
         >
           {{ styleSettingsTr('logoBackgroundColor') }}
         </p>
-        <div v-if="isAdmin">
+        <div v-if="isAdminMaker">
           <Toggle
             id="logo-background-color-matched"
             :model-value="isColorMatch['logoBackgroundColor']"
@@ -27,7 +27,7 @@
       </div>
 
       <!-- Start Admin Style Theme Key Select -->
-      <div v-if="isAdmin && isColorMatch['logoBackgroundColor']">
+      <div v-if="isAdminMaker && isColorMatch['logoBackgroundColor']">
         <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('logoBackgroundColor', $event)"
@@ -50,14 +50,14 @@
 
       <!-- Start style option logo background color picker -->
       <div
-        v-if="isAdmin && !isColorMatch['logoBackgroundColor']"
+        v-if="isAdminMaker && !isColorMatch['logoBackgroundColor']"
         class="tw-flex tw-flex-col tw-items-end"
       >
         <ColorField
           id="iconStyle"
           name="fill"
           :value="colorPickerValue('logoBackgroundColor')"
-          :is-admin="isAdmin"
+          :is-admin-maker="isAdminMaker"
           :logo-theme="logoTheme"
           :toggle-unique-id="sectionName"
           :disable-transparent="true"
@@ -71,30 +71,30 @@
     <!-- End Logo background color -->
 
     <!-- Start logo style settings -->
-    <StyleSettingsSection v-if="isAdmin">
+    <StyleSettingsSection v-if="isAdminMaker">
       <LogoStyleSettingsWithState />
     </StyleSettingsSection>
     <!-- End logo style settings -->
 
     <!-- Start Default text color -->
-    <StyleSettingsSection v-if="isAdmin && isDefaultTextColorRequired">
+    <StyleSettingsSection v-if="isAdminMaker && isDefaultTextColorRequired">
       <div
         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,
         }"
       >
         <div class="tw-flex-none">
           <p
             class="tw-font-sans tw-font-bold tw-text-secondary-800 tw-text-sm"
             :class="{
-              'tw-mb-2': isAdmin,
+              'tw-mb-2': isAdminMaker,
             }"
           >
             {{ styleSettingsTr('defaultTextColor') }}
           </p>
-          <div v-if="isAdmin">
+          <div v-if="isAdminMaker">
             <Toggle
               id="default-text-color-matched"
               :model-value="isColorMatch['defaultTextColor']"
@@ -109,12 +109,16 @@
         </div>
 
         <!-- Start style option color picker -->
-        <div v-if="(isAdmin && !isColorMatch['defaultTextColor']) || !isAdmin">
+        <div
+          v-if="
+            (isAdminMaker && !isColorMatch['defaultTextColor']) || !isAdminMaker
+          "
+        >
           <ColorField
             id="iconStyle"
             name="fill"
             :value="colorPickerValue('defaultTextColor')"
-            :is-admin="isAdmin"
+            :is-admin-maker="isAdminMaker"
             :logo-theme="logoTheme"
             :toggle-unique-id="sectionName"
             :disable-transparent="true"
@@ -124,7 +128,7 @@
         <!-- End style option color picker -->
 
         <!-- Start Admin Style Theme Key Select -->
-        <div v-if="isAdmin && isColorMatch['defaultTextColor']">
+        <div v-if="isAdminMaker && isColorMatch['defaultTextColor']">
           <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('defaultTextColor', $event)"
@@ -200,20 +204,20 @@
             :key="optionIndex"
             class="tw-mb-4 tw-flex tw-justify-between"
             :class="{
-              'tw-items-start': isAdmin,
-              'tw-items-center': !isAdmin,
+              'tw-items-start': isAdminMaker,
+              'tw-items-center': !isAdminMaker,
             }"
           >
             <div class="tw-flex-none">
               <p
                 class="tw-font-sans tw-font-bold tw-text-secondary-800 tw-text-sm"
                 :class="{
-                  'tw-mb-2': isAdmin,
+                  'tw-mb-2': isAdminMaker,
                 }"
               >
                 {{ getButtonStyleConfigOptionTitle(option) }}
               </p>
-              <div v-if="isAdmin">
+              <div v-if="isAdminMaker">
                 <Toggle
                   :id="`picker-colour-matched-${option}`"
                   :model-value="isColorMatch[option]"
@@ -226,12 +230,14 @@
             </div>
 
             <!-- Start style option color picker -->
-            <div v-if="(isAdmin && !isColorMatch[option]) || !isAdmin">
+            <div
+              v-if="(isAdminMaker && !isColorMatch[option]) || !isAdminMaker"
+            >
               <ColorField
                 id="iconStyle"
                 name="fill"
                 :value="colorPickerValue(option)"
-                :is-admin="isAdmin"
+                :is-admin-maker="isAdminMaker"
                 :logo-theme="logoTheme"
                 :toggle-unique-id="sectionName"
                 :disable-transparent="true"
@@ -240,7 +246,7 @@
             </div>
             <!-- End style option color picker -->
             <!-- Start Admin Style Theme Key Select -->
-            <div v-if="isAdmin && isColorMatch[option]">
+            <div v-if="isAdminMaker && isColorMatch[option]">
               <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="
@@ -286,7 +292,7 @@
 
     <!-- Start Hide BrandPage logo -->
     <div
-      v-if="!isAdmin && !isPrePurchase && showBrandCrowdLogo"
+      v-if="!isAdminMaker && !isPrePurchase && showBrandCrowdLogo"
       class="tw-flex tw-items-center tw-justify-between tw-cursor-pointer"
       @click="onHideBrandPageLogoClick"
     >

package/src/shared/style-settings/components/text-style-options-settings-with-state/TextStyleOptionsSettingsWithState.vue

@@ -10,7 +10,7 @@
       :value="textStyleOption.style"
       :show-text-alignment-options="false"
       :white-background="true"
-      :is-admin="isAdmin"
+      :is-admin-maker="isAdminMaker"
       :logo-theme="logoTheme"
       :show-text-style-type-options="false"
       title-text-size="base"
@@ -26,6 +26,7 @@ import TextStyleField from '../../../content-settings/components/text-style-fiel
 import { useUiStyleSettingsStore } from '../../store';
 import {
   useBrandPageMakerUserStore,
+  useBrandPageContainerStore,
   useUiStore,
 } from '@brand-page-maker/stores';
 import { useUiPageSettingsStore } from '@shared/page-settings/store';
@@ -37,6 +38,7 @@ import { transformToRTE } from '@brand-page-maker/utils';
 
 const styleSettingsStore = useUiStyleSettingsStore();
 const userStore = useBrandPageMakerUserStore();
+const containerStore = useBrandPageContainerStore();
 const uiStore = useUiStore();
 const uiPageSettingStore = useUiPageSettingsStore();
 
@@ -48,7 +50,7 @@ const textStyleOptions = computed(
   () => styleSettingsStore.textStyles.textStyleOptions,
 );
 
-const isAdmin = computed(() => userStore.isAdminMaker);
+const isAdminMaker = computed(() => containerStore.isAdminMaker);
 const canUseRichTextEditor = computed(
   () => userStore.features.canUseRichTextEditor,
 );

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

@@ -21,7 +21,6 @@ import { defineStore, storeToRefs } from 'pinia';
 import {
   useBrandPageContainerStore,
   useBrandPageMakerStore,
-  useBrandPageMakerUserStore,
   useLogoStore,
   useUiStore,
 } from '@brand-page-maker/stores';
@@ -129,10 +128,10 @@ export const useUiTemplateSettingsStore = defineStore('uiTemplateSettings', {
   },
   getters: {
     renderAsImage(): boolean {
-      const brandPageMakerUserStore = useBrandPageMakerUserStore();
+      const brandPageContainerStore = useBrandPageContainerStore();
 
       // Admin users get live previews, non-admin users get images
-      return !brandPageMakerUserStore.isAdminMaker;
+      return !brandPageContainerStore.isAdminMaker;
     },
   },
   actions: {
@@ -262,7 +261,6 @@ export const useUiTemplateSettingsStore = defineStore('uiTemplateSettings', {
     async loadPageNo({ pageNo }: { pageNo: number }) {
       const brandPageMakerStore = useBrandPageMakerStore();
       const brandPageContainerStore = useBrandPageContainerStore();
-      const brandPageMakerUserStore = useBrandPageMakerUserStore();
       const logoSettingsStore = useUiLogoSettingsStore();
       const logoStore = useLogoStore();
       const editableLogoStore = useUiEditableLogoStore();
@@ -431,7 +429,7 @@ export const useUiTemplateSettingsStore = defineStore('uiTemplateSettings', {
         const templates = await Promise.all(
           result.paginatedItems.map(async (item) => {
             try {
-              if (brandPageMakerUserStore.isAdminMaker) {
+              if (brandPageContainerStore.isAdminMaker) {
                 const template =
                   await designTemplateClient.getTemplateByTemplateToken(
                     item.designTemplateToken,
@@ -652,7 +650,7 @@ export const useUiTemplateSettingsStore = defineStore('uiTemplateSettings', {
     setupLogoChangeWatcher() {
       const logoSettingsStore = useUiLogoSettingsStore();
       const editableLogoStore = useUiEditableLogoStore();
-      const brandPageMakerUserStore = useBrandPageMakerUserStore();
+      const brandPageContainerStore = useBrandPageContainerStore();
       const { selectedLogoImage } = storeToRefs(logoSettingsStore);
       const { editableLogoVariations } = storeToRefs(editableLogoStore);
 
@@ -674,12 +672,12 @@ export const useUiTemplateSettingsStore = defineStore('uiTemplateSettings', {
             newLogoImage.logoVariation !== oldLogoImage.logoVariation;
 
           if (
-            !brandPageMakerUserStore.isAdminMaker &&
+            !brandPageContainerStore.isAdminMaker &&
             newLogoImage.logoDraftToken &&
             hasLogoChanged
           ) {
             const uiStore = useUiStore();
-            const isPrePurchase = useBrandPageContainerStore().isPrePurchase;
+            const isPrePurchase = brandPageContainerStore.isPrePurchase;
 
             uiStore.setUserPersonalisationData({
               personalisationData: undefined,
@@ -723,7 +721,7 @@ export const useUiTemplateSettingsStore = defineStore('uiTemplateSettings', {
             return;
           }
 
-          if (brandPageMakerUserStore.isAdminMaker) {
+          if (brandPageContainerStore.isAdminMaker) {
             return;
           }