@capillarytech/creatives-library 9.0.26 → 9.0.29-alpha.1

package/v2Components/CommonTestAndPreview/UnifiedPreview/RcsPreviewContent.js

@@ -25,6 +25,7 @@ import {
   TIME_FORMAT_MINUTE_PADDING_THRESHOLD,
   TIME_FORMAT_AM,
   TIME_FORMAT_PM,
+  MEDIA_TYPE_VIDEO,
 } from '../constants';
 import messages from '../messages';
 import { RCS_BUTTON_TYPES } from '../../../v2Containers/Rcs/constants';
@@ -50,39 +51,56 @@ const RcsPreviewContent = ({
   const deviceName = device === ANDROID ? ANDROID_DEVICE_NAME : IOS_DEVICE_NAME;
 
   // Render RCS suggestions (Quick Reply, CTA, Phone Number)
-  const renderRcsSuggestionsPreview = () => {
+  // options.isCarousel: stacked bars below card body with gap (Figma), no dividers between CTAs
+  const renderRcsSuggestionsPreview = (suggestionsArg, options = {}) => {
+    const { isCarousel = false } = options;
     const renderArray = [];
-    const { suggestions = [] } = content || {};
+    const rawSuggestions = Array.isArray(suggestionsArg)
+      ? suggestionsArg
+      : (content?.suggestions || []);
+    // Skip unsaved/empty draft suggestions (e.g. the pre-seeded default phone-number slot
+    // on carousel card 1, or a suggestion mid-edit via the pencil icon — both explicitly set
+    // `isSaved: false`) — but suggestions hydrated from an already-persisted template never
+    // carry `isSaved` at all (it's a client-only "saved this session" flag), so `undefined`
+    // must still render; only an explicit `false` means "hide this".
+    const suggestions = rawSuggestions.filter(
+      (suggestion) => suggestion?.isSaved !== false && String(suggestion?.text || '').trim(),
+    );
 
     if (suggestions.length === 0) {
       return null;
     }
 
+    const ctaClass = isCarousel ? 'rcs-cta-preview rcs-cta-preview--carousel-bar' : 'rcs-cta-preview';
+
     suggestions.forEach((suggestion) => {
       const { type, text } = suggestion || {};
       const suggestionKey = `${type}-${text || Math.random()}`;
 
-      if (renderArray.length > 0) {
+      if (renderArray.length > 0 && !isCarousel) {
         renderArray.push(<CapDivider key={`divider-${suggestionKey}`} className="whatsapp-divider" />);
       }
 
       if (type === RCS_BUTTON_TYPES.QUICK_REPLY) {
         renderArray.push(
-          <CapLabel key={suggestionKey} type="label21" className="rcs-cta-preview">
+          <CapLabel key={suggestionKey} type="label21" className={ctaClass}>
             <CapIcon type="small-link" size="xs" />
             {text}
           </CapLabel>
         );
       } else if (type === RCS_BUTTON_TYPES.CTA) {
         renderArray.push(
-          <CapLabel key={suggestionKey} type="label21" className="rcs-cta-preview">
-            <CapIcon type="launch" size="xs" />
+          <CapLabel key={suggestionKey} type="label21" className={ctaClass}>
+            {/* "launch" icon's SVG has hardcoded <defs>/<mask> ids, which collide
+                and render as a solid square when 2+ CTA buttons appear together —
+                "open-in-new" is a single flat path with no ids, so it can't collide. */}
+            <CapIcon type="open-in-new" size="xs" />
             {text}
           </CapLabel>
         );
       } else if (type === RCS_BUTTON_TYPES.PHONE_NUMBER) {
         renderArray.push(
-          <CapLabel key={suggestionKey} type="label21" className="rcs-cta-preview">
+          <CapLabel key={suggestionKey} type="label21" className={ctaClass}>
             <CapIcon type="call" size="xs" />
             {text}
           </CapLabel>
@@ -93,6 +111,109 @@ const RcsPreviewContent = ({
     return renderArray?.length > 0 ? renderArray : null;
   };
 
+  // Carousel media box: aspect matches RCS editor card size (SHORT/MEDIUM × SMALL/MEDIUM).
+  const getCarouselMediaAspectStyle = (isVideo) => {
+    const carouselPreviewDimensions = content?.carouselPreviewDimensions;
+    if (!carouselPreviewDimensions) return undefined;
+    if (isVideo) {
+      const { videoThumbWidth, videoThumbHeight } = carouselPreviewDimensions;
+      if (!videoThumbWidth || !videoThumbHeight) return undefined;
+      return { aspectRatio: `${videoThumbWidth} / ${videoThumbHeight}` };
+    }
+    const { imageWidth, imageHeight } = carouselPreviewDimensions;
+    if (!imageWidth || !imageHeight) return undefined;
+    return { aspectRatio: `${imageWidth} / ${imageHeight}` };
+  };
+
+  // Carousel preview (WhatsApp-style static horizontal scroll).
+  // Caller passes a non-empty array only (see hasCarousel); avoids duplicate guards that Sonar
+  // flagged as partially covered because inner checks were unreachable when hasCarousel was true.
+  const renderCarouselPreviewContent = (carouselCards) => (
+    <CapRow className="msg-container-carousel">
+      <CapRow className="scroll-container" type="flex" noWrap>
+        {carouselCards.map((card, idx) => {
+          const key = `rcs-carousel-${idx}-${card?.bodyText || card?.imageSrc || card?.videoPreviewImg || ''}`;
+          const isVideo =
+            (card?.mediaType || '').toLowerCase() === String(MEDIA_TYPE_VIDEO).toLowerCase();
+          const cardSuggestions = Array.isArray(card?.suggestions) ? card.suggestions : [];
+          const suggestionsNode = cardSuggestions.length > 0
+            ? renderRcsSuggestionsPreview(cardSuggestions, { isCarousel: true })
+            : null;
+          const titleTrimmed = String(card?.title ?? '').trim();
+          const bodyTrimmed = String(card?.bodyText ?? '').trim();
+          const titleShown = titleTrimmed || formatMessage(messages.rcsCarouselPreviewTitlePlaceholder);
+          const bodyShown = bodyTrimmed || formatMessage(messages.rcsCarouselPreviewBodyPlaceholder);
+          return (
+            <CapRow key={key} className="rcs-carousel-item">
+              <CapRow className="message-pop align-left message-pop-carousel">
+                <CapRow className="whatsapp-content">
+                  {!isVideo && (
+                    <CapRow
+                      className="whatsapp-image rcs-carousel-media-wrap"
+                      style={getCarouselMediaAspectStyle(false)}
+                    >
+                      <CapImage
+                        src={card?.imageSrc ? card.imageSrc : rcsImageEmptyPreview}
+                        className="rcs-carousel-img"
+                        alt={formatMessage(messages.previewGenerated)}
+                      />
+                    </CapRow>
+                  )}
+                  {isVideo && (
+                    <CapTooltip
+                      title={formatMessage(messages.videoPreviewTooltip)}
+                      wrapperClassName="rcs-carousel-video-tooltip-wrapper"
+                      triggerClassName="rcs-carousel-video-tooltip-trigger"
+                    >
+                      <CapRow className="video-preview">
+                        <CapRow
+                          className="whatsapp-image rcs-carousel-media-wrap"
+                          style={getCarouselMediaAspectStyle(true)}
+                        >
+                          <CapImage
+                            src={card?.videoPreviewImg ? card.videoPreviewImg : rcsVideoEmptyPreview}
+                            className="rcs-carousel-img"
+                            alt={formatMessage(messages.previewGenerated)}
+                          />
+                        </CapRow>
+                        <CapRow className="icon-position">
+                          <CapImage className="video-icon" src={videoPlay} alt="Play" />
+                        </CapRow>
+                      </CapRow>
+                    </CapTooltip>
+                  )}
+
+                  <CapRow className="carousel-content">
+                    <CapLabel
+                      type={card.titleLabelType || 'label1'}
+                      className={`carousel-title${titleTrimmed ? '' : ' rcs-carousel-field-placeholder'}`}
+                    >
+                      {titleShown}
+                    </CapLabel>
+                    <CapLabel
+                      type={card.bodyLabelType || 'label2'}
+                      className={`carousel-message${bodyTrimmed ? '' : ' rcs-carousel-field-placeholder'}`}
+                    >
+                      {bodyShown}
+                    </CapLabel>
+                  </CapRow>
+                </CapRow>
+              </CapRow>
+
+              {/* Deliberately OUTSIDE .message-pop-carousel — the CTA bar is its own
+                  floating element below the card, not clipped/rounded as part of it. */}
+              {!!suggestionsNode && (
+                <CapRow className="rcs-carousel-cta-stack" gutter={0}>
+                  {suggestionsNode}
+                </CapRow>
+              )}
+            </CapRow>
+          );
+        })}
+      </CapRow>
+    </CapRow>
+  );
+
   // Render text preview content
   const renderTextPreviewContent = () => {
     const {
@@ -226,11 +347,24 @@ const RcsPreviewContent = ({
   const timestamp = `${displayHours}:${displayMinutes} ${ampm}`;
 
   // Render normal RCS preview (same structure as SMS up to sms-message-container)
+  const carouselCardsNormalized = Array.isArray(content?.carouselData) ? content?.carouselData : [];
+  const hasCarousel = carouselCardsNormalized?.length > 0;
   const hasMedia = !!(content?.rcsImageSrc || content?.rcsVideoSrc);
-  const contentToRender = hasMedia ? renderMediaPreviewContent() : renderTextPreviewContent();
+  let contentToRender;
+  if (hasCarousel) {
+    contentToRender = renderCarouselPreviewContent(carouselCardsNormalized);
+  } else if (hasMedia) {
+    contentToRender = renderMediaPreviewContent();
+  } else {
+    contentToRender = renderTextPreviewContent();
+  }
 
   return (
-    <CapRow type='flex' align='middle' justify='center' className="sms-device-container">
+    <CapRow
+      type='flex' align='middle' justify='center'
+      className={`sms-device-container rcs-device-container ${hasCarousel ? 'rcs-device-container-carousel' : ''}`}
+      style={{ position: 'relative' }}
+    >
       {/* Device Background Image */}
       <CapImage
         className="sms-device-image"
@@ -238,8 +372,10 @@ const RcsPreviewContent = ({
         alt={`${deviceName} Device`}
       />
 
-      {/* Content Overlay */}
-      <CapRow className={`sms-content-overlay sms-content-overlay-${device} sms-preview sms-${device}`}>
+      {/* Content Overlay - nav bar + date separator always; message content only for non-carousel */}
+      <CapRow
+        className={`sms-content-overlay sms-content-overlay-${device} sms-preview sms-${device} rcs-content-overlay`}
+      >
         {/* Navigation Bar - Same as SMS */}
         <CapRow type='flex' className={`sms-navigation-bar ${!showHeader ? 'sms-navigation-bar-no-header' : ''}`}>
           <CapIcon type="chevron-left" className="sms-back-arrow" />
@@ -254,24 +390,40 @@ const RcsPreviewContent = ({
           <FormattedMessage {...messages.timeAgo} defaultMessage="Today" />
         </CapRow>
 
-        {/* Message Container - Same structure as SMS, only content inside is RCS-specific */}
-        <CapRow className="sms-message-container">
-          <CapRow useLegacy className="sms-message-bubble">
-            <CapRow useLegacy className="sms-message-text">
-              {/* RCS-specific content rendering */}
-              <CapRow useLegacy className="message-pop sms">
-                {contentToRender}
+        {/* Message Container - non-carousel only; carousel is rendered outside this overflow-x:hidden ancestor */}
+        {!hasCarousel && (
+          <CapRow className="sms-message-container">
+            <CapRow useLegacy className="sms-message-bubble">
+              <CapRow useLegacy className="sms-message-text">
+                <CapRow useLegacy className="message-pop sms">
+                  {contentToRender}
+                </CapRow>
               </CapRow>
             </CapRow>
+            <CapRow useLegacy className="sms-timestamp">
+              {timestamp}
+            </CapRow>
           </CapRow>
-          <CapRow useLegacy className="sms-timestamp">
+        )}
+      </CapRow>
+
+      {/* Carousel panel: sibling of overlay, no overflow-x:hidden ancestor → scroll-container
+          can receive horizontal scroll events. Positioned absolutely over the device image. */}
+      {hasCarousel && (
+        <CapRow
+          className={`rcs-carousel-panel rcs-carousel-panel-${device}`}
+        >
+          {renderCarouselPreviewContent(carouselCardsNormalized)}
+          <CapRow useLegacy className="sms-timestamp rcs-carousel-timestamp">
             {timestamp}
           </CapRow>
         </CapRow>
-      </CapRow>
+      )}
     </CapRow>
-  );
-};
+  )
+}
+
+
 
 RcsPreviewContent.propTypes = {
   content: PropTypes.shape({
@@ -282,6 +434,18 @@ RcsPreviewContent.propTypes = {
     rcsImageSrc: PropTypes.string,
     rcsVideoSrc: PropTypes.string,
     rcsThumbnailSrc: PropTypes.string,
+    carouselData: PropTypes.arrayOf(
+      PropTypes.shape({
+        titleLabelType: PropTypes.string,
+        bodyLabelType: PropTypes.string,
+      })
+    ),
+    carouselPreviewDimensions: PropTypes.shape({
+      imageWidth: PropTypes.number,
+      imageHeight: PropTypes.number,
+      videoThumbWidth: PropTypes.number,
+      videoThumbHeight: PropTypes.number,
+    }),
     suggestions: PropTypes.arrayOf(
       PropTypes.shape({
         type: PropTypes.string,