@capillarytech/creatives-library 9.0.15-alpha.1 → 9.0.15-alpha.3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "9.0.15-alpha.1",
+  "version": "9.0.15-alpha.3",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",

package/v2Components/CapActionButton/constants.js

@@ -39,6 +39,6 @@ export const RCS_CTA_URL_TYPE = {
   DYNAMIC: 'DYNAMIC',
 };
 
-export const BTN_MAX_LENGTH = 25;
+export const BTN_MAX_LENGTH = 20;
 export const PHONE_NUMBER_MAX_LENGTH = 15;
 export const URL_MAX_LENGTH = 2000;

package/v2Components/CapActionButton/index.js

@@ -97,7 +97,7 @@ export const CapActionButton = (props) => {
     const { value, id } = target;
     let errorMessage = '';
     if (value.length > BTN_MAX_LENGTH) {
-      errorMessage = formatMessage(messages.ctaButtonTextLengthError);
+      errorMessage = formatMessage(messages.ctaButtonTextLengthError, { maxLength: BTN_MAX_LENGTH });
     } if (!isValidText(value)) {
       errorMessage = formatMessage(messages.ctaButtonErrorMessage);
     }
@@ -406,12 +406,13 @@ export const CapActionButton = (props) => {
             className="cap-rcs-saved-cta margin-t-12"
             align="middle"
             type="flex"
+            gutter={9}
           >
             <CapColumn
               span={1}
               className={`${ctaIsPhone ? 'whatsapp-saved-cta-phone-icon' : ''}`}
             >
-              <CapIcon size="s" type={ctaIsPhone ? 'call' : 'launch'} />
+              <CapIcon size="s" type={ctaIsPhone ? 'call' : (ctaIsReply ? 'small-link' : 'launch')} />
             </CapColumn>
             <CapColumn span={6}>
               <CapLabel
@@ -421,45 +422,43 @@ export const CapActionButton = (props) => {
                 {text}
               </CapLabel>
             </CapColumn>
-            {ctaIsPhone && (
-              <CapColumn span={10} align="left">
-                <CapLabel className="phone">+{phoneNumber}</CapLabel>
-              </CapColumn>
-            )}
-            {!ctaIsPhone && !ctaIsReply && (
-              <>
-                <CapColumn span={3}>
-                  <CapLabel className="url-type" type="label2">
-                    {(cta.urlType || RCS_CTA_URL_TYPE.STATIC) === RCS_CTA_URL_TYPE.DYNAMIC
-                      ? formatMessage(messages.ctaWebsiteTypeDynamic)
-                      : formatMessage(messages.ctaWebsiteTypeStatic)}
-                  </CapLabel>
-                </CapColumn>
-                <CapRow type='flex' className="rcs-url-preview-wrapper">
-                  <CapTooltip title={url} placement="top">
-                    <CapColumn span={14} className="margin-r-0">
+            <CapColumn flex={1} className="rcs-saved-cta-value-column">
+              <div className="rcs-saved-cta-value-actions">
+                {ctaIsPhone && (
+                  <CapLabel className="phone">+{phoneNumber}</CapLabel>
+                )}
+                {!ctaIsPhone && !ctaIsReply && (
+                  <>
+                    <CapLabel className="url-type" type="label2">
+                      {(cta.urlType || RCS_CTA_URL_TYPE.STATIC) === RCS_CTA_URL_TYPE.DYNAMIC
+                        ? formatMessage(messages.ctaWebsiteTypeDynamic)
+                        : formatMessage(messages.ctaWebsiteTypeStatic)}
+                    </CapLabel>
+                    <CapTooltip title={url} placement="top">
                       <CapLabel className="url">{url}</CapLabel>
-                    </CapColumn>
-                  </CapTooltip>
-                </CapRow>
-              </>
-            )}
-            {(isFullMode && !isEditFlow) && (
-              <>
-                <CapColumn
-                  span={1}
-                  className="rcs-saved-cta-edit-icon"
-                  onClick={() => editCta(index)}
-                >
-                  <CapIcon size="s" type="edit" />
-                </CapColumn>
-                {!(isHostIcs && index === 0) && !hideDeleteForSuggestionIndex(index) && !cannotDeleteSavedMandatory(index) && (
-                  <CapColumn className="rcs-saved-cta-delete-icon" span={1} onClick={() => deleteButtonHandler(index)}>
-                    <CapIcon size="s" type="delete" />
-                  </CapColumn>
+                    </CapTooltip>
+                  </>
                 )}
-              </>
-            )}
+                {(isFullMode && !isEditFlow) && (
+                  <div className="rcs-saved-cta-action-icons">
+                    <CapIcon
+                      size="s"
+                      type="edit"
+                      className="rcs-saved-cta-edit-icon"
+                      onClick={() => editCta(index)}
+                    />
+                    {!(isHostIcs && index === 0) && !hideDeleteForSuggestionIndex(index) && !cannotDeleteSavedMandatory(index) && (
+                      <CapIcon
+                        size="s"
+                        type="delete"
+                        className="rcs-saved-cta-delete-icon"
+                        onClick={() => deleteButtonHandler(index)}
+                      />
+                    )}
+                  </div>
+                )}
+              </div>
+            </CapColumn>
           </CapRow>
         );
       }

package/v2Components/CapActionButton/index.scss

@@ -23,13 +23,36 @@
     padding: 0.625rem;
     border-radius: $CAP_SPACE_04;
     margin-bottom: $CAP_SPACE_12;
+    flex-wrap: nowrap;
 
-    div:not(:last-child) {
-        margin-right: 0.5625rem;
+    // Icon/text columns keep a fixed span; this column takes whatever space
+    // is left (flex: 1, set via CapColumn's `flex` prop) instead of a fixed
+    // span that has to add up to exactly 24 alongside its siblings — with a
+    // fixed span, the gutter/margin between columns had nowhere to come from
+    // and pushed this column's content past the card's right border.
+    .rcs-saved-cta-value-column {
+        min-width: 0;
     }
 
-    .rcs-url-preview-wrapper {
-        max-width: 5.714rem;
+    // Value text and edit/delete icons share one flex row, right-aligned as a
+    // unit — keeps the value flush against the icons regardless of its length,
+    // instead of the old fixed-span column + absolutely-positioned icon combo
+    // (which drifted out of alignment with variable-length URLs/numbers).
+    .rcs-saved-cta-value-actions {
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        gap: $CAP_SPACE_08;
+        width: 100%;
+        min-width: 0;
+
+        .url-type {
+            flex-shrink: 0;
+        }
+
+        .url, .phone {
+            min-width: 0;
+        }
     }
 
     .url {
@@ -50,26 +73,43 @@
         font-weight: 500;
     }
 
-    .rcs-saved-cta-edit-icon {
-        position: absolute;
-        right: 0.4375rem;
+    .rcs-saved-cta-action-icons {
+        display: flex;
+        align-items: center;
+        gap: $CAP_SPACE_08;
+        flex-shrink: 0;
     }
 
+    .rcs-saved-cta-edit-icon,
     .rcs-saved-cta-delete-icon {
-        position: absolute;
-        right: $CAP_SPACE_02;
+        cursor: pointer;
     }
 }
 
 // Button text / URL: count via CapInput `suffix` (antd affix, right-aligned inside field).
 // Phone: react-phone-input-2 — overlay count + padding on .form-control
-.rcs-cta-inner-char-count {
+// Selector needs `.cap-heading.h5` too — CapHeading's own `.cap-heading.h5` rule (2 classes)
+// otherwise beats a single-class `.rcs-cta-inner-char-count` selector and forces dark text,
+// regardless of source order (light-grey placeholder look per Figma).
+.cap-heading.h5.rcs-cta-inner-char-count {
   font-size: 0.75rem;
   line-height: 1.25rem;
   color: $FONT_COLOR_03;
   white-space: nowrap;
 }
 
+// Button text: match the phone field's full-width treatment (Figma reference).
+// `className` on CapInput lands on componentWithLabelHOC's OUTER wrapper div
+// (confirmed via rendered DOM), not on the `.ant-input-affix-wrapper` itself —
+// force the wrapper full-width directly rather than relying on descendant rules.
+.rcs-cta-button-text {
+  width: 100%;
+
+  .ant-input-affix-wrapper {
+    width: 100%;
+  }
+}
+
 .rcs-cta-input-with-inner-count {
   position: relative;
   width: 100%;
@@ -123,10 +163,26 @@
     }
   }
 
+  // The flag-dropdown sits on top of .form-control's left edge, so hovering the
+  // flag itself doesn't trigger `.form-control:hover` — bind the border-color
+  // change to the whole wrapper so the border reacts consistently everywhere.
+  .react-tel-input.rcs-cta-phone-input:hover .form-control {
+    border-color: $CAP_G11;
+  }
+
+  .react-tel-input.rcs-cta-phone-input:focus-within .form-control {
+    border-color: $CAP_G01;
+  }
+
   .rcs-cta-phone-input .flag-dropdown {
-    top: 0.0625rem;
-    bottom: 0.0625rem;
-    left: 0.0625rem;
+    // Raw px, not rem: must exactly match .form-control's 1px border width.
+    // At this app's 14px root font-size, 0.0625rem resolved to 0.875px — the
+    // sub-pixel gap left the outer border looking "cut off" right where the
+    // flag-dropdown's opaque background sat, most visible on hover when the
+    // border color changed and made the gap's anti-aliasing stand out.
+    top: 1px;
+    bottom: 1px;
+    left: 1px;
     padding: 0;
     background: $CAP_WHITE;
     border: none;
@@ -166,6 +222,11 @@
 .rcs-button-cta-create-container.cap-row-v2 {
   display: flex;
   flex-direction: column;
+  // Cross-axis (=width, since this is a column-flex row) defaults to `align-items: flex-start`
+  // via antd's `.ant-row-top`, which lets child Cols shrink to content instead of filling the
+  // row — same issue CapRow's own `.cap-row-vertical` guards against. Force stretch here too,
+  // otherwise fields with no explicit width of their own (e.g. Button text) render too narrow.
+  align-items: stretch;
   flex-wrap: nowrap;
   width: 100%;
   border: solid 1px $CAP_G06;
@@ -176,6 +237,7 @@
   .rcs-button-cta-create.cap-row-v2 {
     display: flex;
     flex-direction: column;
+    align-items: stretch;
     flex-wrap: nowrap;
     margin: 0;
   }
@@ -207,11 +269,16 @@
 
 .button-disabled-tooltip-wrapper {
     display: inline-block;
-    margin-top: 1.25rem;
 }
 
-// Space between Save and Delete on RCS / carousel CTA rows
+// Space above Save/Delete row: kept on this stable outer wrapper (not on
+// .button-disabled-tooltip-wrapper) since that inner CapRow's own display
+// (flex vs inline-block) flips depending on whether CapTooltip renders its
+// extra trigger span (title set vs empty), which made the gap disappear
+// whenever the Save button was enabled.
 .rcs-cta-save-delete-btn {
+    margin-top: 1.25rem;
+
     .rcs-cta-delete-btn {
         margin-left: 0.75rem;
     }

package/v2Components/CommonTestAndPreview/UnifiedPreview/RcsPreviewContent.js

@@ -55,9 +55,17 @@ const RcsPreviewContent = ({
   const renderRcsSuggestionsPreview = (suggestionsArg, options = {}) => {
     const { isCarousel = false } = options;
     const renderArray = [];
-    const suggestions = Array.isArray(suggestionsArg)
+    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;
@@ -83,25 +91,18 @@ const RcsPreviewContent = ({
       } else if (type === RCS_BUTTON_TYPES.CTA) {
         renderArray.push(
           <CapLabel key={suggestionKey} type="label21" className={ctaClass}>
-            <CapIcon type="launch" size="xs" />
+            {/* "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) {
-        // Carousel: label text then phone icon (matches device-style RCS preview)
         renderArray.push(
           <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}
-              </>
-            )}
+            <CapIcon type="call" size="xs" />
+            {text}
           </CapLabel>
         );
       }
@@ -143,68 +144,69 @@ const RcsPreviewContent = ({
           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)}
-                    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 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>
-                  </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}
+                  )}
+                  {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>
           );
         })}
@@ -425,7 +427,7 @@ const RcsPreviewContent = ({
       {hasCarousel && (
         <CapRow
           className={`rcs-carousel-panel rcs-carousel-panel-${device}`}
-          style={carouselPanelStyle}
+          // style={carouselPanelStyle}
         >
           {renderCarouselPreviewContent(carouselCardsNormalized)}
           <CapRow useLegacy className="sms-timestamp rcs-carousel-timestamp">