@capillarytech/creatives-library 8.0.329 → 8.0.330-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,41 +51,57 @@ 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 suggestions = Array.isArray(suggestionsArg)
+      ? suggestionsArg
+      : (content?.suggestions || []);
 
     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">
+          <CapLabel key={suggestionKey} type="label21" className={ctaClass}>
             <CapIcon type="launch" size="xs" />
             {text}
           </CapLabel>
         );
       } else if (type === RCS_BUTTON_TYPES.PHONE_NUMBER) {
+        // Carousel: label text then phone icon (matches device-style RCS preview)
         renderArray.push(
-          <CapLabel key={suggestionKey} type="label21" className="rcs-cta-preview">
-            <CapIcon type="call" size="xs" />
-            {text}
+          <CapLabel key={suggestionKey} type="label21" className={ctaClass}>
+            {isCarousel ? (
+              <>
+                {text}
+                <CapIcon type="call" size="xs" className="rcs-cta-preview-phone-icon-end" />
+              </>
+            ) : (
+              <>
+                <CapIcon type="call" size="xs" />
+                {text}
+              </>
+            )}
           </CapLabel>
         );
       }
@@ -93,6 +110,104 @@ 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 d = content?.carouselPreviewDimensions;
+    if (!d) return undefined;
+    if (isVideo) {
+      const { videoThumbWidth, videoThumbHeight } = d;
+      if (!videoThumbWidth || !videoThumbHeight) return undefined;
+      return { aspectRatio: `${videoThumbWidth} / ${videoThumbHeight}` };
+    }
+    const { imageWidth, imageHeight } = d;
+    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">
+        {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="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)}>
+                    <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>
+
+                {!!suggestionsNode && (
+                  <CapRow className="rcs-carousel-cta-stack" gutter={0}>
+                    {suggestionsNode}
+                  </CapRow>
+                )}
+              </CapRow>
+            </CapRow>
+          );
+        })}
+      </CapRow>
+    </CapRow>
+  );
+
   // Render text preview content
   const renderTextPreviewContent = () => {
     const {
@@ -127,6 +242,9 @@ const RcsPreviewContent = ({
             {description}
           </CapLabel>
         )}
+        {Array.isArray(content?.suggestions) && content.suggestions.length > 0 && (
+          <CapDivider className="whatsapp-divider" />
+        )}
         {renderRcsSuggestionsPreview()}
       </>
     );
@@ -226,11 +344,22 @@ 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 className="sms-device-container">
+    <CapRow
+      className={`sms-device-container rcs-device-container ${hasCarousel ? 'rcs-device-container-carousel' : ''}`}
+    >
       {/* Device Background Image */}
       <CapImage
         className="sms-device-image"
@@ -239,7 +368,9 @@ const RcsPreviewContent = ({
       />
 
       {/* Content Overlay */}
-      <CapRow className={`sms-content-overlay sms-content-overlay-${device} sms-preview sms-${device}`}>
+      <CapRow
+        className={`sms-content-overlay sms-content-overlay-${device} sms-preview sms-${device} rcs-content-overlay`}
+      >
         {/* Navigation Bar - Same as SMS */}
         <CapRow className={`sms-navigation-bar ${!showHeader ? 'sms-navigation-bar-no-header' : ''}`}>
           <CapIcon type="chevron-left" className="sms-back-arrow" />
@@ -255,8 +386,8 @@ const RcsPreviewContent = ({
         </CapRow>
 
         {/* Message Container - Same structure as SMS, only content inside is RCS-specific */}
-        <CapRow className="sms-message-container">
-          <CapRow className="sms-message-bubble">
+         <CapRow className={`sms-message-container ${hasCarousel ? 'rcs-message-container-carousel' : ''}`}>
+          <CapRow className={`sms-message-bubble ${hasCarousel ? 'rcs-message-bubble-carousel' : ''}`}>
             <CapRow className="sms-message-text">
               {/* RCS-specific content rendering */}
               <CapRow className="message-pop sms">
@@ -270,8 +401,10 @@ const RcsPreviewContent = ({
         </CapRow>
       </CapRow>
     </CapRow>
-  );
-};
+  )
+}
+
+
 
 RcsPreviewContent.propTypes = {
   content: PropTypes.shape({
@@ -282,6 +415,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,

package/v2Components/CommonTestAndPreview/UnifiedPreview/RcsPreviewContent.js.rej

@@ -0,0 +1,18 @@
+diff a/app/v2Components/CommonTestAndPreview/UnifiedPreview/RcsPreviewContent.js b/app/v2Components/CommonTestAndPreview/UnifiedPreview/RcsPreviewContent.js	(rejected hunks)
+@@ -226,11 +361,16 @@ const RcsPreviewContent = ({
+   const timestamp = `${displayHours}:${displayMinutes} ${ampm}`;
+ 
+   // Render normal RCS preview (same structure as SMS up to sms-message-container)
++  const hasCarousel = Array.isArray(content?.carouselData) && content.carouselData.length > 0;
+   const hasMedia = !!(content?.rcsImageSrc || content?.rcsVideoSrc);
++  const contentToRender = hasCarousel
++    ? renderCarouselPreviewContent()
++    : (hasMedia ? renderMediaPreviewContent() : renderTextPreviewContent());
+ 
+   return (
++    <CapRow
++      className={`sms-device-container rcs-device-container ${hasCarousel ? 'rcs-device-container-carousel' : ''}`}
++    >
+       {/* Device Background Image */}
+       <CapImage
+         className="sms-device-image"