@capillarytech/creatives-library 9.0.56-betaa.0 → 9.0.57-alpha.0

package/constants/unified.js

@@ -64,7 +64,6 @@ export const ENABLE_AI_SUGGESTIONS = 'ENABLE_AI_SUGGESTIONS';
 export const AI_CONTENT_BOT_DISABLED = 'AI_CONTENT_BOT_DISABLED';
 export const AI_DOCUMENTATION_BOT_ENABLED = 'AI_DOCUMENTATION_BOT_ENABLED';
 export const ENABLE_PRODUCT_SUPPORT_VIDEOS = 'ENABLE_PRODUCT_SUPPORT_VIDEOS';
-export const SUPPORT_ENGAGEMENT_MODULE = 'SUPPORT_ENGAGEMENT_MODULE';
 export const EMBEDDED = 'embedded';
 // --- Tag/Validation Constants ---
 export const CARD_RELATED_TAGS = [
@@ -230,3 +229,10 @@ export const RCS_API_SMS_FALLBACK_KEYS = Object.freeze({
   RCS_SMS_FALLBACK_VAR_MAPPED: 'rcsSmsFallbackVarMapped',
 });
 
+export const HTTP_METHODS = Object.freeze({
+  GET: 'GET',
+  POST: 'POST',
+  PUT: 'PUT',
+  PATCH: 'PATCH',
+  DELETE: 'DELETE',
+});

package/package.json

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

package/services/api.js

@@ -12,6 +12,7 @@ import getSchema from './getSchema';
 import * as API from '../utils/ApiCaller';
 import { addBaseToTemplate, transformCustomFieldsData } from '../utils/commonUtils';
 import { EMAIL, SMS, TRANSACTION } from '../v2Containers/CreativesContainer/constants';
+import { HTTP_METHODS } from '../constants/unified';
 let API_ENDPOINT = config.development.api_endpoint;
 let EXPORT_API_ENDPOINT = config.development.exports_api_endpoint;
 let CAMPAIGNS_API_ENDPOINT = config.development.campaigns_api_endpoint;
@@ -698,22 +699,42 @@ export const getLiquidTags = (content) => {
 
 export const createCentralCommsMetaId = (payload, metaType = TRANSACTION) => {
   const url = `${API_ENDPOINT}/common/central-comms/meta-id/${metaType}`;
-  return request(url, getAPICallObject('POST', payload, false, false, false, true));
+  return request(url, getAPICallObject(HTTP_METHODS.POST, payload, false, false, false, true));
+};
+
+// Use the CCS CommDefinition API for CommunicationFlow Save; keep legacy messageMeta APIs for CreativesContainer.
+const COMM_DEFINITIONS_PATH = `${API_ENDPOINT}/comm-definitions`;
+
+export const createCommDefinition = (payload) => {
+  const url = COMM_DEFINITIONS_PATH;
+  return request(url, getAPICallObject(HTTP_METHODS.POST, payload, false, false, false, true));
+};
+
+// Opens a new DRAFT version on an existing CommDefinition, preserving its id/referenceId.
+export const editCommDefinition = (commDefinitionId, payload) => {
+  const url = `${COMM_DEFINITIONS_PATH}/${commDefinitionId}/edit`;
+  return request(url, getAPICallObject(HTTP_METHODS.POST, payload, false, false, false, true));
+};
+
+// notify/ui's "Send test" uses this instead of the legacy createMessageMeta/sendTestMessage flow.
+export const sendTransactionalComm = (payload) => {
+  const url = `${COMM_DEFINITIONS_PATH}/send/transaction`;
+  return request(url, getAPICallObject(HTTP_METHODS.POST, payload, false, false, false, true));
 };
 
 export const getCentralCommsMetaIds = (metaIds, metaType = TRANSACTION) => {
   const url = `${API_ENDPOINT}/common/central-comms/meta-id/${metaType}?metaIds=${metaIds}`;
-  return request(url, getAPICallObject('GET', null, false, false, false, true));
+  return request(url, getAPICallObject(HTTP_METHODS.GET, null, false, false, false, true));
 };
 
 export const bulkClaimAndApprove = (payload, metaType = TRANSACTION) => {
   const url = `${API_ENDPOINT}/common/central-comms/bulk-claim-approve/${metaType}`;
-  return request(url, getAPICallObject('POST', payload, false, false, false, true));
+  return request(url, getAPICallObject(HTTP_METHODS.POST, payload, false, false, false, true));
 };
 
 export const updateMetaConfig = (payload, metaType = TRANSACTION, metaId) => {
   const url = `${API_ENDPOINT}/common/central-comms/meta-id/${metaType}/${metaId}`;
-  return request(url, getAPICallObject('PATCH', payload, false, false, false, true));
+  return request(url, getAPICallObject(HTTP_METHODS.PATCH, payload, false, false, false, true));
 };
 
 // Customer Search APIs for Email Test & Preview Feature

package/utils/common.js

@@ -100,10 +100,6 @@ export const hasSupportCKEditor = Auth.hasFeatureAccess.bind(
   null,
   SUPPORT_CK_EDITOR,
 );
-export const hasSupportEngagementModule = Auth.hasFeatureAccess.bind(
-  null,
-  SUPPORT_ENGAGEMENT_MODULE,
-);
 
 export const hasGiftVoucherFeature = Auth.hasFeatureAccess.bind(
   null,

package/utils/templateVarUtils.js

@@ -115,6 +115,22 @@ export const extractTemplateVariables = (templateStr = '', captureRegex) => {
   return variables;
 };
 
+// Reconcile slot-format (`${token}_${index}`) and CCS-format (`"0"`, `"1"`, ...) var maps into the editor's `${token}_${segmentIndex}` slot-key format.
+export const reconcileVarMapToSlotFormat = (rawVarMap = {}, segments = [], regex) => {
+  if (Object.keys(rawVarMap ?? {}).length === 0) return {};
+  const isSlotFormat = Object.keys(rawVarMap).some((key) => key.includes('_'));
+  if (isSlotFormat) return { ...rawVarMap };
+  const slotMap = {};
+  let occurrenceIndex = 0;
+  (segments ?? []).forEach((segment, segmentIndex) => {
+    if (typeof segment === 'string' && (segment.match(regex) || []).length > 0) {
+      slotMap[`${segment}_${segmentIndex}`] = rawVarMap[occurrenceIndex] ?? '';
+      occurrenceIndex += 1;
+    }
+  });
+  return slotMap;
+};
+
 /**
  * Looks up the inner name of a `{{name}}` or `{#name#}` token in a flat key→value map.
  * Handles both exact matches and dot-path suffixes (e.g. `tag.FORMAT_1` → name `FORMAT_1`).

package/utils/tests/templateVarUtils.test.js

@@ -6,8 +6,11 @@ import {
   getFallbackResolvedContentForCardDisplay,
   isDltHashVarToken,
   isAnyTemplateVarToken,
+  reconcileVarMapToSlotFormat,
 } from '../templateVarUtils';
 
+const MUSTACHE_VAR_REGEX = /\{\{\d+\}\}/g;
+
 describe('templateVarUtils', () => {
   describe('splitContentByOrderedVarTokens', () => {
     it('pushes remainder when next token is not found in string', () => {
@@ -201,4 +204,45 @@ describe('templateVarUtils', () => {
       expect(getFallbackResolvedContent('{#a#}', {}, { a: '' })).toBe('{#a#}');
     });
   });
+
+  describe('reconcileVarMapToSlotFormat', () => {
+    it('returns an empty object for an empty/absent rawVarMap', () => {
+      expect(reconcileVarMapToSlotFormat({}, ['{{1}}'], MUSTACHE_VAR_REGEX)).toEqual({});
+      expect(reconcileVarMapToSlotFormat(undefined, ['{{1}}'], MUSTACHE_VAR_REGEX)).toEqual({});
+    });
+
+    it('uses slot-format keys (containing an underscore) as-is', () => {
+      const rawVarMap = { '{{1}}_1': 'test', '{{2}}_3': 'test2' };
+      expect(
+        reconcileVarMapToSlotFormat(rawVarMap, ['x', '{{1}}', 'y', '{{2}}'], MUSTACHE_VAR_REGEX),
+      ).toEqual(rawVarMap);
+    });
+
+    it('remaps CCS-format sequential-occurrence-index keys ("0","1",...) onto this UI\'s own slot keys (regression: CCS sends plain occurrence indices, not this UI\'s `${token}_${arrayIndex}` format, which silently blanked WhatsApp edit fields and desynced the segment array)', () => {
+      // Mirrors the real CCS response: "Hi! Here is your latest tier progress summary with us.\n\nTo
+      // move up to the next tier, you still need to spend {{1}} more,\nearn {{2}} more points, ..."
+      // — varMapped keys "0".."10" map to {{1}}.."{{11}}" in template order.
+      const segments = [
+        'spend ',
+        '{{1}}',
+        ' more,\nearn ',
+        '{{2}}',
+        ' more points',
+      ];
+      const rawVarMap = { 0: 'dasda', 1: 'dasd' };
+      expect(reconcileVarMapToSlotFormat(rawVarMap, segments, MUSTACHE_VAR_REGEX)).toEqual({
+        '{{1}}_1': 'dasda',
+        '{{2}}_3': 'dasd',
+      });
+    });
+
+    it('defaults a missing occurrence-index entry to an empty string rather than dropping the slot', () => {
+      const segments = ['a ', '{{1}}', ' b ', '{{2}}'];
+      const rawVarMap = { 0: 'filled' }; // no entry for occurrence index 1
+      expect(reconcileVarMapToSlotFormat(rawVarMap, segments, MUSTACHE_VAR_REGEX)).toEqual({
+        '{{1}}_1': 'filled',
+        '{{2}}_3': '',
+      });
+    });
+  });
 });

package/v2Components/CapActionButton/index.js

@@ -101,10 +101,12 @@ export const CapActionButton = (props) => {
   const onButtonTextChange = ({target}) => {
     const { value, id } = target;
     let errorMessage = '';
-    if (value.length > BTN_MAX_LENGTH) {
+    if (!value.trim()) {
+      errorMessage = formatMessage(messages.ctaButtonTextEmptyMessage);
+    } else if (!isValidText(value)) {
+      errorMessage = formatMessage(messages.ctaButtonTextErrorMessage);
+    } else if (value.length > BTN_MAX_LENGTH) {
       errorMessage = formatMessage(messages.ctaButtonTextLengthError, { maxLength: BTN_MAX_LENGTH });
-    } if (!isValidText(value)) {
-      errorMessage = formatMessage(messages.ctaButtonErrorMessage);
     }
     setButtonError(errorMessage);
     updateDisplayAndPostback(value, id);
@@ -446,12 +448,11 @@ export const CapActionButton = (props) => {
             gutter={9}
           >
             <CapColumn
-              span={1}
-              className={`${ctaIsPhone ? 'whatsapp-saved-cta-phone-icon' : ''}`}
+              className={`rcs-saved-cta-cell ${ctaIsPhone ? 'whatsapp-saved-cta-phone-icon' : ''}`}
             >
               <CapIcon size="s" type={ctaIsPhone ? 'call' : (ctaIsReply ? 'small-link' : 'open-in-new')} />
             </CapColumn>
-            <CapColumn span={6}>
+            <CapColumn className="rcs-saved-cta-cell rcs-saved-cta-text-cell">
               <CapLabel
                 type="label2"
                 className="rcs-saved-cta-button-text"
@@ -459,64 +460,76 @@ export const CapActionButton = (props) => {
                 {text}
               </CapLabel>
             </CapColumn>
-            <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>
-                    </CapTooltip>
-                  </>
-                )}
-                {isDynamicUrlSubtype && (url || '').includes(DYNAMIC_URL_SUFFIX) && (
-                  <TagList
-                    className="rcs-cta-taglist"
-                    label={formatMessage(messages.ctaTagListLabel)}
-                    onTagSelect={(data) => onTagSelect(data, index, url)}
-                    location={location}
-                    tags={tags}
-                    injectedTags={injectedTags}
-                    selectedOfferDetails={selectedOfferDetails}
-                    onContextChange={onContextChange}
+            <CapColumn className="rcs-saved-cta-cell rcs-saved-cta-type-cell">
+              {!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>
+              )}
+            </CapColumn>
+            <CapColumn className="rcs-saved-cta-cell rcs-saved-cta-url-cell">
+              {ctaIsPhone && (
+                <CapLabel className="phone">+{phoneNumber}</CapLabel>
+              )}
+              {!ctaIsPhone && !ctaIsReply && (
+                <CapTooltip
+                  title={url}
+                  placement="top"
+                  wrapperClassName="rcs-cta-url-tooltip-wrapper"
+                  triggerClassName="rcs-cta-url-tooltip-trigger"
+                >
+                  <CapLabel className="url">{url}</CapLabel>
+                </CapTooltip>
+              )}
+            </CapColumn>
+            <CapColumn className="rcs-saved-cta-cell rcs-saved-cta-actions-cell">
+              {isDynamicUrlSubtype && (url || '').includes(DYNAMIC_URL_SUFFIX) && (
+                <TagList
+                  className="rcs-cta-taglist"
+                  label={formatMessage(messages.ctaTagListLabel)}
+                  onTagSelect={(data) => onTagSelect(data, index, url)}
+                  location={location}
+                  tags={tags}
+                  injectedTags={injectedTags}
+                  selectedOfferDetails={selectedOfferDetails}
+                  onContextChange={onContextChange}
+                />
+              )}
+              {isDynamicUrlSubtype && !(url || '').includes(DYNAMIC_URL_SUFFIX) && (
+                <CapTooltip title={formatMessage(messages.ctaTagListRevert)} placement="top">
+                  <CapIcon
+                    size="s"
+                    type="return"
+                    className="rcs-cta-tag-revert"
+                    onClick={() => revertTagSelect(index, url)}
                   />
-                )}
-                {isDynamicUrlSubtype && !(url || '').includes(DYNAMIC_URL_SUFFIX) && (
-                  <CapTooltip title={formatMessage(messages.ctaTagListRevert)} placement="top">
-                    <CapIcon
-                      size="s"
-                      type="return"
-                      className="rcs-cta-tag-revert"
-                      onClick={() => revertTagSelect(index, url)}
-                    />
-                  </CapTooltip>
-                )}
-                {(isFullMode && !isEditFlow) && (
-                  <div className="rcs-saved-cta-action-icons">
+                </CapTooltip>
+              )}
+              {(isFullMode && !isEditFlow) && (
+                <CapRow
+                  className="rcs-saved-cta-action-icons"
+                  type="flex"
+                  align="middle"
+                  noWrap
+                >
+                  <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="edit"
-                      className="rcs-saved-cta-edit-icon"
-                      onClick={() => editCta(index)}
+                      type="delete"
+                      className="rcs-saved-cta-delete-icon"
+                      onClick={() => deleteButtonHandler(index)}
                     />
-                    {!(isHostIcs && index === 0) && !hideDeleteForSuggestionIndex(index) && !cannotDeleteSavedMandatory(index) && (
-                      <CapIcon
-                        size="s"
-                        type="delete"
-                        className="rcs-saved-cta-delete-icon"
-                        onClick={() => deleteButtonHandler(index)}
-                      />
-                    )}
-                  </div>
-                )}
-              </div>
+                  )}
+                </CapRow>
+              )}
             </CapColumn>
           </CapRow>
         );

package/v2Components/CapActionButton/index.scss

@@ -25,37 +25,51 @@
     margin-bottom: $CAP_SPACE_12;
     flex-wrap: nowrap;
 
-    // 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 {
+    .rcs-saved-cta-cell {
+        display: flex;
+        align-items: center;
         min-width: 0;
+
+        // Cell children are flex items too — without this their own min-content
+        // (the full text/URL) makes the cell unshrinkable and pushes the row.
+        > * {
+            min-width: 0;
+        }
     }
 
-    // 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;
+    // Fixed basis for the 20-char button text cap.
+    .rcs-saved-cta-text-cell {
+        flex: 0 1 10rem;
+    }
+
+    // Fixed, not auto: "Static" is narrower than "Dynamic", which left the URL
+    // starting at a different x per row.
+    .rcs-saved-cta-type-cell {
+        flex: 0 1 4rem;
+    }
+
+    .rcs-saved-cta-url-cell {
+        flex: 1 1 0;
+    }
+
+    .rcs-saved-cta-actions-cell {
+        flex: 0 0 auto;
         justify-content: flex-end;
         gap: $CAP_SPACE_08;
-        width: 100%;
-        min-width: 0;
+    }
 
-        .url-type {
-            flex-shrink: 0;
-        }
+    // CapTooltip nests `.url` two levels down, so these — not `.url` — are the
+    // boxes that must be allowed to shrink for the ellipsis to apply.
+    .rcs-cta-url-tooltip-wrapper {
+        flex: 1 1 0;
+        min-width: 0;
+    }
 
-        .url, .phone {
-            min-width: 0;
-        }
+    .rcs-cta-url-tooltip-trigger {
+        min-width: 0;
     }
 
-    .url {
+    .url, .rcs-saved-cta-button-text, .url-type {
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
@@ -69,10 +83,6 @@
         word-break: break-word;
     }
 
-    .saved-button-text {
-        font-weight: 500;
-    }
-
     .rcs-saved-cta-action-icons {
         display: flex;
         align-items: center;
@@ -85,8 +95,6 @@
         cursor: pointer;
     }
 
-    // Dynamic-URL tag controls: keep them from stretching the flex row's
-    // height/width — same treatment as the edit/delete icons above.
     .rcs-cta-tag-revert {
         display: flex;
         align-items: center;
@@ -95,7 +103,15 @@
     }
 
     .rcs-cta-taglist {
+        display: flex;
+        align-items: center;
         flex-shrink: 0;
+
+        // CapTagList floats this trigger right, taking it out of flow, which
+        // let it paint over the edit icon instead of occupying real width.
+        .tooltip-add-label-container {
+            float: none;
+        }
     }
 }
 

package/v2Components/CapActionButton/messages.js

@@ -83,9 +83,13 @@ export default defineMessages({
     id: `${prefix}.comingSoonTooltip`,
     defaultMessage: 'Right now only one Call to action button is enabled, in future you would be able to add upto 3 buttons.',
   },
-  ctaButtonErrorMessage: {
-    id: `${prefix}.ctaButtonErrorMessage`,
-    defaultMessage: 'Button text cannot be empty',
+  ctaButtonTextEmptyMessage: {
+    id: `${prefix}.ctaButtonTextEmptyMessage`,
+    defaultMessage: 'Button text cannot be empty or contain only whitespace',
+  },
+  ctaButtonTextErrorMessage: {
+    id: `${prefix}.ctaButtonTextErrorMessage`,
+    defaultMessage: 'Newlines, Emojis, or Special characters are not allowed',
   },
   ctaButtonTextLengthError: {
     id: `${prefix}.ctaButtonTextLengthError`,

package/v2Components/CapActionButton/tests/index.test.js

@@ -521,7 +521,23 @@ describe('CapActionButton', () => {
     initializeComponent([initial]);
     const buttontextInput = screen.getByPlaceholderText('Enter button text');
     fireEvent.change(buttontextInput, { target: { value: '&*^', id: 0 } });
-    expect(screen.getByText(/button text cannot be empty/i)).toBeInTheDocument();
+    expect(screen.getByText(/special characters are not allowed/i)).toBeInTheDocument();
+  });
+
+  it('should show empty error for whitespace-only button text (onButtonTextChange)', () => {
+    const initial = {
+      index: 0,
+      type: RCS_BUTTON_TYPES.QUICK_REPLY,
+      text: 'Shop',
+      phoneNumber: '',
+      url: '',
+      postback: 'Shop',
+      isSaved: false,
+    };
+    initializeComponent([initial]);
+    const buttontextInput = screen.getByPlaceholderText('Enter button text');
+    fireEvent.change(buttontextInput, { target: { value: '   ', id: 0 } });
+    expect(screen.getByText(/cannot be empty or contain only whitespace/i)).toBeInTheDocument();
   });
 
   it('should show error for invalid url (onUrlChange)', () => {

package/v2Components/CapWhatsappCTA/messages.js

@@ -57,6 +57,10 @@ export default defineMessages({
     id: `${prefix}.ctaButtonErrorMessage`,
     defaultMessage: "Newlines, Emojis, or Special characters are not allowed",
   },
+  ctaButtonTextEmptyMessage: {
+    id: `${prefix}.ctaButtonTextEmptyMessage`,
+    defaultMessage: 'Button text cannot be empty or contain only whitespace',
+  },
   addButton: {
     id: `${prefix}.addButton`,
     defaultMessage: 'Add button',

package/v2Components/CapWhatsappCarouselButton/index.js

@@ -126,7 +126,9 @@ export const CapWhatsappCarouselButton = (props) => {
 
   const onButtonTextChange = (value, buttonIndex) => {
     let errorMessage = '';
-    if (!isValidWhatsappCtaText(value)) {
+    if (!value.trim()) {
+      errorMessage = formatMessage(capWhatsappCTAMsg.ctaButtonTextEmptyMessage);
+    } else if (!isValidWhatsappCtaText(value)) {
       errorMessage = formatMessage(capWhatsappCTAMsg.ctaButtonErrorMessage);
     }
     onValueChange(buttonIndex, [{fieldName: 'text', value}, {fieldName: 'textError', value: errorMessage}]);
@@ -333,12 +335,11 @@ export const CapWhatsappCarouselButton = (props) => {
               noWrap
             >
               <CapColumn
-                span={1}
-                className={`${isPhoneNumberType ? 'whatsapp-saved-cta-phone-icon' : ''}`}
+                className={`whatsapp-saved-cta-cell ${isPhoneNumberType ? 'whatsapp-saved-cta-phone-icon' : ''}`}
               >
                 <CapIcon size="s" type={isPhoneNumberType ? 'call' : isURLtype ? 'launch' : 'six-dots'} />
               </CapColumn>
-              <CapColumn span={6}>
+              <CapColumn className="whatsapp-saved-cta-cell whatsapp-saved-cta-text-cell">
                 <CapLabel
                   type="label2"
                   className="whatsapp-saved-cta-button-text"
@@ -346,39 +347,47 @@ export const CapWhatsappCarouselButton = (props) => {
                   {button?.text}
                 </CapLabel>
               </CapColumn>
-              {isPhoneNumberType && (
-                <CapColumn span={10} align="left">
+              <CapColumn className="whatsapp-saved-cta-cell whatsapp-saved-cta-type-cell">
+                {isURLtype && (
+                  <CapLabel className="url-type" type="label2">
+                    {button?.urlType === STATIC_URL
+                      ? formatMessage(capWhatsappCTAMsg.ctaWebsiteTypeStatic)
+                      : formatMessage(capWhatsappCTAMsg.ctaWebsiteTypeDynamic)}
+                  </CapLabel>
+                )}
+              </CapColumn>
+              <CapColumn className="whatsapp-saved-cta-cell whatsapp-saved-cta-url-cell whatsapp-url-preview-wrapper">
+                {isPhoneNumberType && (
                   <CapLabel className="phone">
                     {button?.phone_number}
                   </CapLabel>
-                </CapColumn>
-              )}
-              {isURLtype && (
-                <CapRow type="flex" align="middle">
-                  <CapRow type="flex" align="middle" justify="start">
-                    <CapLabel className="url-type" type="label2">
-                      {button?.urlType === STATIC_URL
-                        ? formatMessage(capWhatsappCTAMsg.ctaWebsiteTypeStatic)
-                        : formatMessage(capWhatsappCTAMsg.ctaWebsiteTypeDynamic)}
-                    </CapLabel>
-                  </CapRow>
-                  <CapRow type='flex' className="whatsapp-url-preview-wrapper">
-                    <CapTooltip title={button?.url} placement="top">
-                      <CapColumn span={16} className="margin-r-0">
-                        <CapLabel className="url">{button?.url}</CapLabel>
-                      </CapColumn>
-                    </CapTooltip>
+                )}
+                {isURLtype && (
+                  <CapTooltip
+                    title={button?.url}
+                    placement="top"
+                    wrapperClassName="whatsapp-cta-url-tooltip-wrapper"
+                    triggerClassName="whatsapp-cta-url-tooltip-trigger"
+                  >
+                    <CapLabel className="url">{button?.url}</CapLabel>
+                  </CapTooltip>
+                )}
+              </CapColumn>
+              <CapColumn className="whatsapp-saved-cta-cell whatsapp-saved-cta-actions-cell">
+                {!isEditFlow && (
+                  <CapRow
+                    className="whatsapp-saved-cta-action-icons"
+                    type="flex"
+                    align="middle"
+                    noWrap
+                  >
+                    <CapIcon size="s" type="edit" onClick={() => handleEditButton(index)}/>
+                    {parseInt(carouselIndex, 10) === 0 && (
+                      <CapIcon size="s" type="delete" onClick={() => handleDeleteButton(index)} disabled={buttonData?.length === 1}/>
+                    )}
                   </CapRow>
-                </CapRow>
-              )}
-              {!isEditFlow && (
-                <CapRow type='flex' align='middle' justify="end" gap={12} fillSpace>
-                  <CapIcon size="s" type="edit" onClick={() => handleEditButton(index)}/>
-                  {parseInt(carouselIndex, 10) === 0 && (
-                    <CapIcon size="s" type="delete" onClick={() => handleDeleteButton(index)} disabled={buttonData?.length === 1}/>
-                  )}
-                </CapRow>
-              )}
+                )}
+              </CapColumn>
               {isEditFlow && button?.urlType === DYNAMIC_URL && button?.url.includes('{{1}}') && (
                 <CapColumn>
                   <TagList