@designcrowd/library.brand-page 5.10.20 → 5.10.30

package/src/brand-page/utils/style.util.ts

@@ -27,6 +27,7 @@ import {
   getNewColorBasedOnTargetColorTheme,
 } from './color.util';
 import chroma from 'chroma-js';
+import { hasRTEContent } from '../../brand-page-maker/utils';
 
 const MIN_LUM_RATIO = 0.3;
 
@@ -56,7 +57,7 @@ const parseFabricColorToCssStyle = (fabricColor: any): ThemeColor => {
  * @param colorData { rgb: 'rgb(0,255,0)', gradient: 'linear-gradient(180deg, rgb(0,0,0), rgb(255,0,0), 100%)'}
  * @returns string - rgb() or linear-gradient()
  */
-const getColorValueForCorrectCssProperty = (
+export const getColorValueForCorrectCssProperty = (
   k: string,
   colorData: ThemeColor,
 ): string => {
@@ -100,8 +101,9 @@ export const colorMatchCssKeyValue = (
   }
 
   if (
-    cssValue.match(new RegExp(STYLE_THEME_KEYS.LogoTextColor, 'g')) ||
-    cssValue.match(new RegExp(STYLE_THEME_KEYS.LogoTextMultiColor, 'g'))
+    (cssValue.match(new RegExp(STYLE_THEME_KEYS.LogoTextColor, 'g')) ||
+      cssValue.match(new RegExp(STYLE_THEME_KEYS.LogoTextMultiColor, 'g'))) &&
+    !hasRTEContent(cssValue)
   ) {
     cssValue = getColorValueForCorrectCssProperty(
       cssKey,
@@ -110,8 +112,11 @@ export const colorMatchCssKeyValue = (
 
     return { cssValue, isModified: true };
   } else if (
-    cssValue.match(new RegExp(STYLE_THEME_KEYS.LogoBackgroundColor, 'g')) ||
-    cssValue.match(new RegExp(STYLE_THEME_KEYS.LogoBackgroundMultiColor, 'g'))
+    (cssValue.match(new RegExp(STYLE_THEME_KEYS.LogoBackgroundColor, 'g')) ||
+      cssValue.match(
+        new RegExp(STYLE_THEME_KEYS.LogoBackgroundMultiColor, 'g'),
+      )) &&
+    !hasRTEContent(cssValue)
   ) {
     cssValue = getColorValueForCorrectCssProperty(
       cssKey,
@@ -367,6 +372,9 @@ const CONTENT_STYLE_PROP_NAME_SUFFIX = [
   'Replacements',
 ];
 
+const RTE_ALLOWED_SECTION_TYPES = ['text', 'banner-section'];
+const RTE_ALLOWED_FIELDS = ['title', 'description', 'text', 'textItems'];
+
 export const applyLogoThemeToContents = (
   logoTheme: LogoTheme,
   pages: PageModel[],
@@ -397,6 +405,22 @@ export const applyLogoThemeToContents = (
         isModified = isModified || isApplied;
       }
 
+      const rteContentKeys = RTE_ALLOWED_SECTION_TYPES.includes(content.type)
+        ? Object.keys(content).filter((k) => RTE_ALLOWED_FIELDS.includes(k))
+        : [];
+
+      for (const key of rteContentKeys) {
+        const { newRTEContent, isApplied } =
+          applyLogoThemeToBrandPageRTEContentColorsRecursive(
+            newContent[key],
+            logoTheme,
+            isModified,
+          );
+
+        newContent[key] = newRTEContent;
+        isModified = isModified || isApplied;
+      }
+
       return newContent;
     });
 
@@ -406,6 +430,82 @@ export const applyLogoThemeToContents = (
   return { pages: newPages, isModified };
 };
 
+type RteContent = Record<string, string | any>;
+
+const applyLogoThemeToBrandPageRTEContentColorsRecursive = (
+  content: string | RteContent | RteContent[],
+  logoTheme: LogoTheme,
+  isModified: boolean,
+): {
+  isApplied: boolean;
+  newRTEContent: RteContent | RteContent[] | string;
+} => {
+  let isApplied = false;
+  let newRTEContent: RteContent | RteContent[] | string = {};
+
+  if (typeof content === 'string' && hasRTEContent(content)) {
+    newRTEContent = replaceRTEContentColors(content, logoTheme);
+    isApplied = true;
+  } else if (Array.isArray(content)) {
+    newRTEContent = content.map((item) => {
+      const { newRTEContent: recursiveContent, isApplied: recursiveIsApplied } =
+        applyLogoThemeToBrandPageRTEContentColorsRecursive(
+          item,
+          logoTheme,
+          isModified,
+        );
+
+      isApplied = recursiveIsApplied;
+
+      return recursiveContent;
+    });
+  } else if (typeof content === 'object') {
+    for (const [key, value] of Object.entries(content)) {
+      if (
+        RTE_ALLOWED_FIELDS.includes(key) &&
+        typeof value === 'string' &&
+        hasRTEContent(value)
+      ) {
+        newRTEContent[key] = replaceRTEContentColors(value, logoTheme);
+        isApplied = true;
+      } else {
+        newRTEContent[key] = value;
+      }
+    }
+  } else {
+    newRTEContent = content;
+    isApplied = false;
+  }
+
+  return { isApplied, newRTEContent };
+};
+
+const replaceRTEContentColors = (
+  content: string,
+  logoTheme: LogoTheme,
+): string => {
+  return content
+    .replace(
+      new RegExp(`var\\(--${STYLE_THEME_KEYS.LogoTextColor}\\)`, 'g'),
+      logoTheme.logoTextColor.rgb,
+    )
+    .replace(
+      new RegExp(`var\\(--${STYLE_THEME_KEYS.LogoBackgroundColor}\\)`, 'g'),
+      logoTheme.logoBackgroundColor.rgb,
+    )
+    .replace(
+      new RegExp(`var\\(--${STYLE_THEME_KEYS.LogoTextMultiColor}\\)`, 'g'),
+      logoTheme.logoTextColor.rgb,
+    )
+    .replace(
+      new RegExp(
+        `var\\(--${STYLE_THEME_KEYS.LogoBackgroundMultiColor}\\)`,
+        'g',
+      ),
+      logoTheme.logoBackgroundColor.rgb,
+    );
+};
+
 export const applyLogoThemeToBrandPageStyles = (
   logoTheme: LogoTheme,
   pageStyles: PageStyles,

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

@@ -210,7 +210,7 @@ export const BRAND_SITE: BrandPageData = {
             color: 'logo-text-color',
             fontSize: '1.5rem',
             textAlign: 'center',
-            fontFamily: 'Nunito',
+            fontFamily: 'Exo 2',
             lineHeight: '2rem',
           },
           colorReplacements: [

package/src/brand-page-maker/components/brand-page-maker/__fixtures__/content-settings-items.fixture.ts

@@ -64,6 +64,7 @@ export const textContent: TextContent = {
   textSize: {},
   textStyle: {
     textAlign: DEFAULT_TEXT_ALIGN,
+    fontSize: '2em',
   },
   textAlignment: {},
   textColor: {},

package/src/brand-page-maker/components/brand-page-maker/__fixtures__/page-content-items.ts

@@ -13,11 +13,13 @@ import {
   pinterestLink,
   twitchLink,
   tiktokLink,
+  textContent,
 } from './content-settings-items.fixture';
 
 export const brandPageContentsSampleData = [
   logoContent,
   profileContent,
+  textContent,
   generalLink,
   websiteLink,
   emailLink,

package/src/brand-page-maker/components/brandpage-maker-page/BrandPageMakerPage.mixin.ts

@@ -32,6 +32,7 @@ import type { DebounceHandle } from 'lodash.debounce';
 import { transformToRTE } from '../../../brand-page-maker/utils';
 import { useExternalRichTextEditor } from '../../../brand-page-maker/composables/rich-text-editor/useRichTextEditor';
 import { useUiStyleSettingsStore } from '../../../shared/style-settings/store';
+import { STYLE_THEME_KEYS } from '../../../brand-page/constants';
 
 export default defineComponent({
   mixins: [PageMixin],
@@ -70,6 +71,7 @@ export default defineComponent({
         () => brandPageMakerUserStore.features.canUseRichTextEditor,
       ),
       isAdmin: computed(() => brandPageMakerUserStore.isAdmin),
+      logoTheme: computed(() => uiStore.logoTheme),
       contentSettingsStore,
       brandPageMakerStore,
       brandPageContainerStore,
@@ -141,6 +143,35 @@ export default defineComponent({
         return this.isContentSelected ? item.id === this.selectedItemId : false;
       };
     },
+    styleHtml(): string {
+      if (!this.logoTheme) {
+        return '';
+      }
+
+      // Generate CSS variables for logo theme colors
+      const cssVariables = Object.entries(STYLE_THEME_KEYS)
+        .map(([key, value]) => {
+          const themeColor = key.includes('Background')
+            ? this.logoTheme.logoBackgroundColor
+            : this.logoTheme.logoTextColor;
+
+          if (themeColor?.rgb) {
+            return `--${value}: ${themeColor.rgb};`;
+          }
+
+          return '';
+        })
+        .filter(Boolean)
+        .join('\n    ');
+
+      return cssVariables
+        ? `<style>
+  :root {
+    ${cssVariables}
+  }
+</style>`
+        : '';
+    },
   },
   mounted() {
     this.dispatchViewPortChangeEvent();
@@ -255,11 +286,23 @@ export default defineComponent({
         (item.type === 'banner-section' || item.type === 'text') &&
         this.canUseRichTextEditor
       ) {
+        let selectedItem = item;
+
+        if (this.isAdmin) {
+          const currentItem = this.items.find(
+            (i: { id: string }) => i.id === item.id,
+          );
+
+          if (currentItem) {
+            selectedItem = currentItem.settings.content;
+          }
+        }
+
         transformToRTE(
           this.pageSettingsStore,
           this.externalEditor,
           this.styleSettingsStore,
-          item as Content,
+          selectedItem as Content,
         );
       }
 

package/src/brand-page-maker/components/brandpage-maker-page/BrandPageMakerPage.vue

@@ -128,6 +128,7 @@
     :is-enabled="viewModel.cookieOptions.isCookiePreviewEnabled"
     :on-accept="() => {}"
   />
+  <div v-html="styleHtml" />
 </template>
 <script>
 import BrandPageMakerPageMixin from './BrandPageMakerPage.mixin';

package/src/brand-page-maker/components/brandpage-settings/i18n/brand-page-settings.fr-FR.json

@@ -6,7 +6,7 @@
     "cookieCollection" : "Collection de cookies",
     "faviconDescription" : "Un favicon est une petite icône placée à côté du titre de votre site dans l'onglet du navigateur.",
     "socialShareTitle" : "Partage sur les réseaux sociaux",
-    "paymentProvidersTitle" : "Fournisseurs de paiement",
+    "paymentProvidersTitle" : "Prestataires de paiement",
     "paymentProvidersDescription" : "Activez ou inscrivez-vous auprès d'un fournisseur pris en charge. Commencez à collecter des dons et des paiements, ou vendez des produits, des services et bien plus encore !",
     "paymentProvidersAddProviderLabel" : "Ajouter des prestataires de paiement"
   }

package/src/brand-page-maker/components/google-analytics/i18n/google-analytics.fr-FR.json

@@ -1,6 +1,6 @@
 {
   "googleAnalytics" : {
-    "analyticsIntegrations" : "Intégrations analytiques",
+    "analyticsIntegrations" : "Intégrations aux outils d'analyse",
     "googleAnalyticsLabel" : "Google Analytics : GA4",
     "googleAnalyticsInfo" : "Ajoutez votre identifiant de mesure Google Analytics : GA4 pour suivre vos visiteurs avec GA4, utilisez le format G-XXXXXXXXX ou AW-XXXXXXXXX"
   }