@capillarytech/creatives-library 9.0.32 → 9.0.34-alpha.2

package/styles/containers/layout/_layoutPage.scss

@@ -79,7 +79,6 @@
     flex: 1;
     height: calc(100vh - 50px);
     overflow: auto;
-    padding: 8px 16px 0;
     color: #333333;
 }
 
@@ -154,16 +153,19 @@
 }
 
 .cap-loader-box {
-  position: fixed;
+  position: absolute;
   top: 0;
+  left: 0;
   width: 100%;
-  height: 100%;
-  background: rgb(255,255,255);
-  text-align: center;
+  min-height: calc(100vh - 48px);
+  background: #ffffff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 
   .loader-image {
     width: 80px;
-    margin-top: 20%;
+    height: auto;
   }
 }
 

package/utils/getDataLayer.js

@@ -0,0 +1,15 @@
+import { isMFEMode } from './mfeDetect';
+import appConfig from '../app-config';
+
+const getDataLayerName = () => {
+  if (isMFEMode()) {
+    return `dataLayer_${appConfig.appName.replace(/-/g, '_')}`;
+  }
+  return 'dataLayer';
+};
+
+export const getDataLayer = () => {
+  const name = getDataLayerName();
+  window[name] = window[name] || [];
+  return window[name];
+};

package/utils/gtmTrackers/gtmEvents/creativeDetails.js

@@ -1,4 +1,5 @@
 import { CREATIVES } from "../../../v2Containers/App/constants";
+import { getDataLayer } from '../../getDataLayer';
 
 const creativeDetails = ({
   name,
@@ -23,7 +24,7 @@ const creativeDetails = ({
     videoAdded,
     stickersAdded
   };
-  window.dataLayer.push({
+  getDataLayer().push({
     creativeDetails: parsedObj,
     event: 'creativeDetails',
   });

package/utils/mfeDetect.js

@@ -0,0 +1 @@
+export const isMFEMode = () => Boolean(window.MFE_HOST);

package/utils/mfeFirstPaintReady.js

@@ -0,0 +1,29 @@
+import { MFEEventBus } from '@capillarytech/cap-ui-utils';
+import appConfig from '../app-config';
+import { isMFEMode } from './mfeDetect';
+
+// Routes whose containers emit the data-settled 'lcp' themselves —
+// the first-paint emit must NOT fire for these.
+// TemplatesV2 renders at relative '/v2' and '/v2/loyalty' (routes.js); in MFE mode
+// the shared history is rebased on publicPath, so the real browser pathname carries
+// the '/creatives/ui' prefix. Match the prefixed paths — this util reads
+// window.location.pathname, not the rebased router location. (v1 standalone is
+// non-MFE and irrelevant here.)
+const DATA_LANDING_MATCHERS = ['/creatives/ui/v2', '/creatives/ui/v2/loyalty'];
+
+export const isDataLandingPath = (pathname) => {
+  const p = (pathname || '').replace(/\/+$/, '') || '/';
+  return DATA_LANDING_MATCHERS.some((m) => (m instanceof RegExp ? m.test(p) : m === p));
+};
+
+export const emitFirstPaintReadyIfNotDataLanding = () => {
+  if (!isMFEMode() || isDataLandingPath(window.location.pathname)) return;
+  requestAnimationFrame(() => {
+    MFEEventBus.emit('mfe:segment', {
+      action: 'stop',
+      appId: appConfig.appName,
+      type: 'lcp',
+      timestamp: performance.now(),
+    });
+  });
+};

package/utils/mfeHistory.js

@@ -0,0 +1,62 @@
+/**
+ * Re-base the host's shared root history for this MFE remote.
+ *
+ * The MFE host owns ONE root history instance and hands it to every remote, so host + all
+ * remotes stay perfectly in sync: a push on the shared instance notifies every mounted
+ * router directly (no popstate hack, no drift on fast remote switching).
+ *
+ * This remote's routes / <Link>s / history.push calls are written RELATIVE to its serving
+ * prefix. This adapter presents a basename'd VIEW of the shared history — stripping the
+ * prefix when the router reads the location, and prepending it when the router navigates —
+ * while delegating all actual navigation to the shared instance. Net effect: relative
+ * routing keeps working unchanged, and navigation still flows through the single shared
+ * history. Standalone (no host history) is unaffected; the remote keeps creating its own.
+ */
+const addBase = (base, to) => {
+  if (typeof to === 'string') {
+    if (!to.startsWith('/')) return to; // already relative to current location
+    return to === '/' ? base : `${base}${to}`;
+  }
+  if (to && typeof to === 'object') {
+    return { ...to, pathname: addBase(base, to.pathname || '/') };
+  }
+  return to;
+};
+
+const stripBase = (base, pathname) => {
+  if (!pathname) return pathname;
+  if (pathname === base) return '/';
+  if (pathname.startsWith(`${base}/`)) return pathname.slice(base.length);
+  return pathname;
+};
+
+export default function rebaseHistory(history, rawBase) {
+  const base = String(rawBase || '').replace(/\/+$/, ''); // normalise: no trailing slash
+  if (!base) return history;
+  const view = loc => ({ ...loc, pathname: stripBase(base, loc.pathname) });
+  return {
+    get length() {
+      return history.length;
+    },
+    get action() {
+      return history.action;
+    },
+    get location() {
+      return view(history.location);
+    },
+    push: (to, state) => history.push(addBase(base, to), state),
+    replace: (to, state) => history.replace(addBase(base, to), state),
+    go: n => history.go(n),
+    goBack: () => history.goBack(),
+    goForward: () => history.goForward(),
+    block: (...args) => history.block(...args),
+    listen: listener =>
+      history.listen((loc, action) => listener(view(loc), action)),
+    createHref: to =>
+      history.createHref(
+        typeof to === 'string'
+          ? addBase(base, to)
+          : { ...to, pathname: addBase(base, (to && to.pathname) || '/') },
+      ),
+  };
+}

package/v2Components/CommonTestAndPreview/UnifiedPreview/ViberCarouselPreviewCards.js

@@ -0,0 +1,132 @@
+import React, { useLayoutEffect, useMemo, useRef, useState } from 'react';
+import PropTypes from 'prop-types';
+import CapRow from '@capillarytech/cap-ui-library/CapRow';
+import CapLabel from '@capillarytech/cap-ui-library/CapLabel';
+import CapImage from '@capillarytech/cap-ui-library/CapImage';
+
+const getTrimmedText = (value = '') => (value ?? '').trim();
+const hasTrimmedText = (value = '') => Boolean(getTrimmedText(value));
+
+const getCarouselButtonsWithTitles = (card) => (
+  (card?.buttons ?? []).filter((button) => hasTrimmedText(button?.title)).slice(0, 2)
+);
+
+const getCarouselButtonSlotCount = (cards = []) => {
+  const buttonCounts = cards.map((card) => getCarouselButtonsWithTitles(card).length);
+  return Math.min(2, Math.max(0, ...buttonCounts, 0));
+};
+
+const ViberCarouselPreviewCards = ({ cards = [] }) => {
+  const previewCards = Array.isArray(cards) && cards.length ? cards : [{}];
+  const carouselButtonSlotCount = useMemo(
+    () => getCarouselButtonSlotCount(previewCards),
+    [previewCards],
+  );
+  const carouselTitleRefs = useRef([]);
+  const [carouselTitleLineCount, setCarouselTitleLineCount] = useState(1);
+
+  carouselTitleRefs.current = previewCards.map(() => null);
+
+  useLayoutEffect(() => {
+    let maxLines = 1;
+    carouselTitleRefs.current.forEach((node) => {
+      if (!node) {
+        return;
+      }
+      const { lineHeight } = window.getComputedStyle(node);
+      const parsedLineHeight = parseFloat(lineHeight) || 18;
+      const lines = Math.min(2, Math.max(1, Math.round(node.scrollHeight / parsedLineHeight)));
+      if (lines > maxLines) {
+        maxLines = lines;
+      }
+    });
+    setCarouselTitleLineCount((prev) => (prev === maxLines ? prev : maxLines));
+  }, [previewCards]);
+
+  return (
+    <CapRow type="flex" noWrap className="viber-carousel-preview-scroll">
+      {previewCards.map((card, index) => {
+        const cardButtons = getCarouselButtonsWithTitles(card);
+        const titleLineClass = `viber-carousel-preview-text-wrap--${carouselTitleLineCount}-line`;
+
+        return (
+          <CapRow type="flex-column" className="viber-carousel-preview-card" key={`viber-carousel-preview-card-${index}`}>
+            {hasTrimmedText(card?.mediaUrl) ? (
+              <CapImage
+                src={card?.mediaUrl}
+                className="viber-carousel-preview-image"
+                alt="Viber carousel card"
+              />
+            ) : (
+              <CapRow className="viber-carousel-preview-image-placeholder" />
+            )}
+            <CapRow className="viber-carousel-preview-card-body">
+              <CapRow className={`viber-carousel-preview-text-wrap ${titleLineClass}`}>
+                {hasTrimmedText(card?.text) ? (
+                  <CapRow
+                    className="viber-carousel-preview-text-inner"
+                    ref={(node) => {
+                      carouselTitleRefs.current[index] = node;
+                    }}
+                  >
+                    <CapLabel type="label15" className="viber-carousel-preview-text">
+                      {card?.text}
+                    </CapLabel>
+                  </CapRow>
+                ) : (
+                  <CapLabel type="label15" className="viber-carousel-preview-text-placeholder" />
+                )}
+              </CapRow>
+              {carouselButtonSlotCount > 0 && (
+                <CapRow className="viber-carousel-preview-buttons">
+                  {Array.from({ length: carouselButtonSlotCount }).map((_, btnIndex) => {
+                    const cardButton = cardButtons[btnIndex];
+                    const trimmedCardButtonTitle = cardButton
+                      ? getTrimmedText(cardButton?.title)
+                      : '';
+
+                    if (!trimmedCardButtonTitle) {
+                      return (
+                        <CapRow
+                          className="viber-carousel-preview-button viber-carousel-preview-button-placeholder"
+                          key={`viber-carousel-preview-btn-placeholder-${index}-${btnIndex}`}
+                          aria-hidden="true"
+                        />
+                      );
+                    }
+
+                    return (
+                      <CapLabel
+                        className={`viber-carousel-preview-button ${btnIndex === 1 ? 'viber-carousel-preview-button-secondary' : ''}`}
+                        key={`viber-carousel-preview-btn-${index}-${btnIndex}-${trimmedCardButtonTitle}`}
+                      >
+                        {trimmedCardButtonTitle}
+                      </CapLabel>
+                    );
+                  })}
+                </CapRow>
+              )}
+            </CapRow>
+          </CapRow>
+        );
+      })}
+    </CapRow>
+  );
+};
+
+ViberCarouselPreviewCards.propTypes = {
+  cards: PropTypes.arrayOf(PropTypes.shape({
+    text: PropTypes.string,
+    mediaUrl: PropTypes.string,
+    buttons: PropTypes.arrayOf(PropTypes.shape({
+      title: PropTypes.string,
+      action: PropTypes.string,
+    })),
+  })),
+};
+
+ViberCarouselPreviewCards.defaultProps = {
+  cards: [],
+};
+
+export default ViberCarouselPreviewCards;

package/v2Components/CommonTestAndPreview/UnifiedPreview/ViberPreviewContent.js

@@ -14,14 +14,25 @@ import CapSpin from '@capillarytech/cap-ui-library/CapSpin';
 import CapImage from '@capillarytech/cap-ui-library/CapImage';
 import CapTooltip from '@capillarytech/cap-ui-library/CapTooltip';
 import CapRow from '@capillarytech/cap-ui-library/CapRow';
-import { ANDROID, IOS, ANDROID_DEVICE_NAME, IOS_DEVICE_NAME, VIBER_ACCOUNT_NAME } from '../constants';
+import {
+  ANDROID,
+  IOS,
+  ANDROID_DEVICE_NAME,
+  IOS_DEVICE_NAME,
+  VIBER_ACCOUNT_NAME,
+  MEDIA_TYPE_CAROUSEL,
+} from '../constants';
 import messages from '../messages';
 import videoPlay from '../../../assets/videoPlay.svg';
+import ViberCarouselPreviewCards from './ViberCarouselPreviewCards';
 
 // Import device mockup images (same as SMS)
 const smsMobileAndroid = require('../../../assets/Android.png');
 const smsMobileIos = require('../../../assets/iOS.png');
 
+const getTrimmedText = (value = '') => (value ?? '').trim();
+const hasTrimmedText = (value = '') => Boolean(getTrimmedText(value));
+
 const ViberPreviewContent = ({
   content,
   device,
@@ -43,7 +54,35 @@ const ViberPreviewContent = ({
     imageURL = '',
     videoParams = {},
     buttonText = '',
+    type = '',
+    cards = [],
+    showCarouselEditorPreview = false,
   } = viberContent;
+  const hasCarouselContent = type === MEDIA_TYPE_CAROUSEL;
+
+  const cardHasMeaningfulContent = (card) => {
+    if (!card || typeof card !== 'object') return false;
+    return (
+      hasTrimmedText(card?.text) ||
+      hasTrimmedText(card?.mediaUrl) ||
+      (card.buttons ?? []).some(button => hasTrimmedText(button?.title))
+    );
+  };
+
+  const hasMeaningfulCarousel =
+    hasCarouselContent &&
+    Array.isArray(cards) &&
+    cards.length > 0 &&
+    cards.some(cardHasMeaningfulContent);
+
+  const showCarouselInPreview =
+    hasCarouselContent && (Boolean(showCarouselEditorPreview) || hasMeaningfulCarousel);
+
+  const previewCarouselCards =
+    hasCarouselContent && Array.isArray(cards) && cards.length ? cards : hasCarouselContent ? [{}] : [];
+
+  const trimmedMessageContent = getTrimmedText(messageContent);
+  const trimmedButtonText = getTrimmedText(buttonText);
 
   // Get account name (first letter for icon)
   const accountIcon = (accountName || brandName || 'V')[0]?.toUpperCase();
@@ -99,8 +138,15 @@ const ViberPreviewContent = ({
     );
   }
 
-  // Check if there's any content to display
-  const hasContent = messageContent || imageURL || videoParams?.viberVideoSrc || buttonText;
+  // Check if there's any content to display (whitespace-only strings do not count)
+  const hasContent = Boolean(
+    trimmedMessageContent
+    || hasTrimmedText(imageURL)
+    || videoParams?.viberVideoSrc
+    || trimmedButtonText
+    || hasMeaningfulCarousel
+    || (hasCarouselContent && showCarouselEditorPreview)
+  );
 
   // Render normal Viber preview
   return (
@@ -125,23 +171,34 @@ const ViberPreviewContent = ({
 
         {/* Viber Message Container */}
         {hasContent && (
-          <CapRow className={`viber-message-container ${device !== ANDROID ? 'viber-message-container-ios' : ''}`}>
+          <CapRow className={`viber-message-container ${showCarouselInPreview ? 'viber-message-container-carousel' : ''} ${device !== ANDROID ? 'viber-message-container-ios' : ''}`}>
             {/* Brand Name Display (from TemplatePreview line 1136) */}
-            <CapRow type="flex" align="middle" className="msg-container viber-preview">
+            <CapRow
+              type="flex"
+              align="middle"
+              fullWidth={showCarouselInPreview}
+              className={`msg-container viber-preview ${showCarouselInPreview ? 'viber-preview-carousel' : ''}`}
+            >
               {/* Account Icon (from TemplatePreview line 1146-1160) */}
-              <CapRow type='flex' className="viber-account-icon">
-                {accountIcon}
-              </CapRow>
+              {!hasCarouselContent && (
+                <CapRow type="flex" className="viber-account-icon">
+                  {accountIcon}
+                </CapRow>
+              )}
 
               {/* Message Bubble (from TemplatePreview line 1161-1223) */}
-              <CapRow useLegacy className="message-pop align-left viber-message-pop">
+              <CapRow
+                useLegacy
+                fullWidth={showCarouselInPreview}
+                className={`message-pop align-left viber-message-pop ${showCarouselInPreview ? 'viber-message-pop-carousel' : ''}`}
+              >
                 {/* Text Viber preview */}
-                {messageContent && (
+                {trimmedMessageContent && !hasCarouselContent && (
                   <CapLabel type="label15" className="viber-message-text">{messageContent}</CapLabel>
                 )}
 
                 {/* Image Viber preview */}
-                {imageURL && (
+                {hasTrimmedText(imageURL) && (
                   <CapImage
                     src={imageURL}
                     className="viber-image-preview"
@@ -171,16 +228,42 @@ const ViberPreviewContent = ({
                 )}
 
                 {/* Button Viber preview */}
-                {buttonText && (
+                {trimmedButtonText && (
                   <CapLabel className="viber-button-base">
                     <p className="viber-button-card-text">
                       {buttonText}
                     </p>
                   </CapLabel>
                 )}
-                <CapLabel type="label1" className="viber-timestamp">
-                  {timestamp}
-                </CapLabel>
+                {/* Carousel Viber preview */}
+                {showCarouselInPreview && (
+                  <CapRow type="flex-column" fullWidth className="viber-carousel-preview">
+                    <CapRow type="flex-column" className="viber-carousel-message-pop">
+                      {trimmedMessageContent ? (
+                        <CapLabel
+                          type="label15"
+                          className="message-pop-item align-left viber-message-text viber-carousel-message-box-text"
+                        >
+                          {messageContent}
+                        </CapLabel>
+                      ) : (
+                        <CapRow className="viber-carousel-message-box-placeholder" />
+                      )}
+                      <CapLabel type="label1" className="viber-carousel-message-timestamp">
+                        {timestamp}
+                      </CapLabel>
+                    </CapRow>
+
+                    <CapRow type="flex-column" fullWidth className="viber-carousel-cards-pop">
+                      <ViberCarouselPreviewCards cards={previewCarouselCards} />
+                    </CapRow>
+                  </CapRow>
+                )}
+                {!showCarouselInPreview && (
+                  <CapLabel type="label1" className="viber-timestamp">
+                    {timestamp}
+                  </CapLabel>
+                )}
                 <CapRow useLegacy className="empty-placeholder" />
               </CapRow>
 
@@ -214,6 +297,16 @@ ViberPreviewContent.propTypes = {
         viberVideoPreviewImg: PropTypes.string,
       }),
       buttonText: PropTypes.string,
+      type: PropTypes.string,
+      cards: PropTypes.arrayOf(PropTypes.shape({
+        text: PropTypes.string,
+        mediaUrl: PropTypes.string,
+        buttons: PropTypes.arrayOf(PropTypes.shape({
+          title: PropTypes.string,
+          action: PropTypes.string,
+        })),
+      })),
+      showCarouselEditorPreview: PropTypes.bool,
     }),
   }),
   device: PropTypes.oneOf([ANDROID, IOS]),

package/v2Components/CommonTestAndPreview/UnifiedPreview/_unifiedPreview.scss

@@ -1,4 +1,5 @@
 @import '~@capillarytech/cap-ui-library/styles/_variables';
+@import './_viberCarouselPreviewCards.scss';
 
 /**
  * UnifiedPreview Styles
@@ -782,9 +783,13 @@
 
     .viber-content-overlay {
       top: 3.2rem;
-      .viber-navigation-bar {
+      overflow: hidden;
+
+      .sms-navigation-bar.viber-navigation-bar {
+        width: calc(100% - #{$CAP_SPACE_06} - #{$CAP_SPACE_08});
         margin-left: $CAP_SPACE_06;
         margin-right: $CAP_SPACE_08;
+        box-sizing: border-box;
       }
     }
 
@@ -2407,12 +2412,21 @@
   // Body content follows TemplatePreview Viber structure
   .sms-content-overlay {
     &.viber-preview {
+      overflow: hidden;
+
       // Viber message container
       .viber-message-container {
         position: relative;
         flex: 1;
         display: flex;
         flex-direction: column;
+        overflow-x: hidden;
+        overflow-y: auto;
+        -webkit-overflow-scrolling: touch;
+        min-width: 0;
+        max-width: 100%;
+        box-sizing: border-box;
+        width: calc(100% - #{$CAP_SPACE_06} - #{$CAP_SPACE_08});
         padding: 0 $CAP_SPACE_16;
         background-color: #ffffff;
         margin-left: $CAP_SPACE_06;
@@ -2420,6 +2434,20 @@
         border-bottom-left-radius: 2.6rem;
         border-bottom-right-radius: 2.6rem;
 
+        &.viber-message-container-carousel {
+          padding-left: $CAP_SPACE_08;
+          padding-right: $CAP_SPACE_08;
+          width: calc(100% - #{$CAP_SPACE_04} - #{$CAP_SPACE_04});
+          margin-left: $CAP_SPACE_04;
+          margin-right: $CAP_SPACE_04;
+
+          > .ant-row,
+          .ant-row.msg-container.viber-preview-carousel {
+            margin-left: 0;
+            margin-right: 0;
+          }
+        }
+
         // Brand name display (from TemplatePreview line 1136)
         .viber-brand-name {
           position: absolute;
@@ -2441,6 +2469,16 @@
           flex-direction: row;
           align-items: start;
 
+          &.viber-preview-carousel {
+            width: 100%;
+            max-width: 100%;
+            margin-left: 0;
+            margin-right: 0;
+            max-height: 100%;
+            min-width: 0;
+            box-sizing: border-box;
+          }
+
           // Account icon (from TemplatePreview line 1146-1160)
           .viber-account-icon {
             width: $CAP_SPACE_20;
@@ -2465,6 +2503,22 @@
             border-radius: $CAP_SPACE_04;
             padding: $CAP_SPACE_04;
 
+            &.viber-message-pop-carousel {
+              width: 100%;
+              max-width: 100%;
+              min-width: 0;
+              left: 0;
+              margin-top: 0;
+              padding: 0;
+              background: transparent;
+              display: flex;
+              flex-direction: column;
+              align-items: flex-start;
+              gap: $CAP_SPACE_06;
+              overflow: hidden;
+              box-sizing: border-box;
+            }
+
             // Text Viber preview (from TemplatePreview line 1166-1174)
             .viber-message-text {
               margin: 0.107rem $CAP_SPACE_06 $CAP_SPACE_01 0.5rem;
@@ -2536,6 +2590,85 @@
               }
             }
 
+            .viber-carousel-preview {
+              width: 100%;
+              max-width: 100%;
+              min-width: 0;
+              display: flex;
+              flex-direction: column;
+              align-items: flex-start;
+              gap: $CAP_SPACE_06;
+              overflow: hidden;
+              box-sizing: border-box;
+            }
+
+            .viber-carousel-message-pop,
+            .viber-carousel-cards-pop {
+              width: 100%;
+              max-width: 100%;
+              min-width: 0;
+              background: $CAP_G08;
+              border-radius: $CAP_SPACE_06;
+              padding: $CAP_SPACE_08;
+              box-sizing: border-box;
+            }
+
+            .viber-carousel-message-pop {
+              margin-top: 0;
+              width: 85%;
+              border-radius: 0 $CAP_SPACE_06 $CAP_SPACE_06 $CAP_SPACE_06;
+              display: flex;
+              flex-direction: column;
+              overflow: hidden;
+            }
+
+            .viber-carousel-cards-pop {
+              margin-top: 0;
+              width: 100%;
+              background: transparent;
+              border: none;
+              border-radius: 0;
+              padding: 0;
+              overflow: hidden;
+            }
+
+            .viber-carousel-message-box {
+              width: 100%;
+              min-height: 2.25rem;
+              height: auto;
+              border-radius: $CAP_SPACE_04;
+              background: transparent;
+              padding: 0 $CAP_SPACE_08;
+              display: flex;
+              align-items: center;
+            }
+
+            .viber-carousel-message-box-text {
+              color: $CAP_G01;
+              margin: 0.107rem $CAP_SPACE_06 $CAP_SPACE_01 0.5rem;
+              white-space: normal;
+              word-break: break-word;
+              overflow-wrap: break-word;
+              overflow: hidden;
+              max-width: 100%;
+              box-sizing: border-box;
+            }
+
+            .viber-carousel-message-box-placeholder {
+              width: 100%;
+              height: 0.875rem;
+              border-radius: $CAP_SPACE_04;
+              background: $CAP_G07;
+            }
+
+            .viber-carousel-message-timestamp,
+            .viber-carousel-cards-timestamp {
+              display: block;
+              text-align: right;
+              margin-top: $CAP_SPACE_06;
+              color: $CAP_G04;
+            }
+
             .empty-placeholder {
               height: $CAP_SPACE_08;
             }
@@ -2549,6 +2682,11 @@
       .viber-message-container-ios {
         margin-left: 1rem;
         margin-right: 1rem;
+
+        &.viber-message-container-carousel {
+          margin-left: $CAP_SPACE_04;
+          margin-right: $CAP_SPACE_04;
+        }
       }
     }
   }