@capillarytech/creatives-library 8.0.353-alpha.6 → 8.0.353

package/constants/unified.js

@@ -160,24 +160,6 @@ export const TAG_CONTENT_REGEX = /{{([^}]+)}}/g;
 export const ENTRY_TRIGGER_TAG_REGEX = /\bentryTrigger\.\w+(?:\.\w+)?(?:\(\w+\))?/g;
 export const SKIP_TAGS_REGEX_GROUPS = ["dynamic_expiry_date_after_\\d+_days.FORMAT_\\d", "unsubscribe\\(#[a-zA-Z\\d]{6}\\)", "Link_to_[a-zA-Z]", "SURVEY.*.TOKEN", "^[A-Za-z].*\\([a-zA-Z\\d]*\\)", "referral_unique_(code|url).*userid"];
 
-// --- Template variable tokens (`{{var}}`, DLT `{#var#}`) ---
-/** Global: all `{{…}}` placeholders in a string. */
-export const DEFAULT_MUSTACHE_VAR_REGEX = /\{\{[^}]+\}\}/g;
-/** Global: `{{…}}` or DLT `{#…#}` tokens (SMS combined mode). */
-export const COMBINED_SMS_TEMPLATE_VAR_REGEX = /\{\{[^}]+\}\}|\{\#[^#]*\#\}/g;
-/** Full-string check: one mustache token. */
-export const MUSTACHE_VAR_TOKEN_FULL_STRING_REGEX = /^\{\{[^}]+\}\}$/;
-/** Full-string check: one DLT hash token. */
-export const DLT_HASH_VAR_TOKEN_FULL_STRING_REGEX = /^\{\#[^#]*\#\}$/;
-/** Full-string with capture group: inner name for `{{ name }}`-style tokens (whitespace-tolerant). */
-export const MUSTACHE_TOKEN_INNER_NAME_REGEX = /^\{\{\s*([^}]+?)\s*\}\}$/;
-/** Full-string with capture group: inner name/body for `{# name #}` DLT tokens (whitespace-tolerant). */
-export const DLT_HASH_TOKEN_INNER_NAME_REGEX = /^\{#\s*(.*?)\s*#\}$/;
-/** Global with capture group: inner name inside `{{name}}`. */
-export const MUSTACHE_VAR_NAME_CAPTURE_REGEX = /\{\{([^}]+)\}\}/g;
-/** Global with capture group: inner body inside `{#body#}`. */
-export const DLT_VAR_BODY_CAPTURE_REGEX = /\{\#([^#]*)\#\}/g;
-
 export const GET_TRANSLATION_MAPPED = {
   'en': 'en-US',
   'zh-cn': 'zh',
@@ -215,14 +197,3 @@ export const LOGOUT_FAILURE = 'cap/LOGOUT_FAILURE';
 export const JAPANESE_HELP_TEXT = 'ヘルプ :トークンの定義';
 
 export const TAG_TRANSLATION_DOC = 'https://docs.capillarytech.com/docs/tags-translation';
-
-// --- RCS SMS fallback API contract (shared across modules: campaigns, journey, etc.) ---
-
-/** Keys on `messageContent.*.smsFallBackContent` sent to the API: only `message` + `templateConfigs`.
- *  `rcsSmsFallbackVarMapped` is editor-only — merged into `message` at normalize, not sent on the wire. */
-export const RCS_API_SMS_FALLBACK_KEYS = Object.freeze({
-  MESSAGE: 'message',
-  TEMPLATE_CONFIGS: 'templateConfigs',
-  RCS_SMS_FALLBACK_VAR_MAPPED: 'rcsSmsFallbackVarMapped',
-});
-

package/package.json

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

package/services/tests/api.test.js

@@ -89,26 +89,21 @@ describe('uploadFile -- whatsapp image upload', () => {
 
   it('Uploads the file with the original filename when encodeURIComponent fails', async () => {
     // Mocking the encodeURIComponent function to throw an error
-    const originalEncodeURIComponent = global.encodeURIComponent;
     global.encodeURIComponent = jest.fn(() => { throw new Error('encodeURIComponent error'); });
     const blob = new Blob([''], { type: 'image/jpeg' });
     const file = new File([blob], '@%test.jpeg', { type: 'image/jpeg' });
-    try {
-      expect(
-          uploadFile({
-            file,
-            assetType: 'image',
-            fileParams: {
-              width: 275,
-              height: 183,
-              error: false,
-            },
-            whatsappParams: {},
-          }),
-        ).toEqual(Promise.resolve());
-    } finally {
-      global.encodeURIComponent = originalEncodeURIComponent;
-    }
+    expect(
+        uploadFile({
+          file,
+          assetType: 'image',
+          fileParams: {
+            width: 275,
+            height: 183,
+            error: false,
+          },
+          whatsappParams: {},
+        }),
+      ).toEqual(Promise.resolve());
   });
 });
 
@@ -1042,26 +1037,16 @@ describe('getMembersLookup', () => {
     expect(result).toBeInstanceOf(Promise);
   });
 
-  it('should call fetch with correct URL encoding and GET method', async () => {
+  it('should call fetch with correct URL encoding and GET method', () => {
     global.fetch.mockClear();
-    await getMembersLookup('email', 'user+test@example.com');
+    getMembersLookup('email', 'user+test@example.com');
     expect(global.fetch).toHaveBeenCalled();
-
-    // Find the first call that uses both the members endpoint and proper encoding
-    const call = global.fetch.mock.calls.find(
-      ([url]) =>
-        url &&
-        url.includes('members') &&
-        url.includes('identifierType=email') &&
-        url.includes('identifierValue=user%2Btest%40example.com')
-    );
-    expect(call).toBeDefined();
-
-    // Check URL structure
-    const [url, options] = call;
-    expect(url).toContain('identifierType=email');
-    expect(url).toContain('identifierValue=user%2Btest%40example.com');
-    expect((options && options.method) || 'GET').toBe('GET');
+    const calls = global.fetch.mock.calls;
+    const anyMembersCall = calls.find((c) => c[0] && String(c[0]).includes('members'));
+    expect(anyMembersCall).toBeDefined();
+    expect(anyMembersCall[0]).toContain('identifierType=');
+    expect(anyMembersCall[0]).toContain('identifierValue=');
+    expect(anyMembersCall[1]?.method || 'GET').toBe('GET');
   });
 });
 

package/utils/commonUtils.js

@@ -539,22 +539,4 @@ export const isValidMobile = (mobile) => PHONE_REGEX.test(mobile);
 export const formatPhoneNumber = (phone) => {
   if (!phone) return '';
   return String(phone).replace(/[^\d]/g, '');
-};
-
-/**
- * TRAI sender IDs on persisted RCS SMS fallback: may live on the merged object, under
- * `templateConfigs`, or (legacy) `templateConfigs.header`. Same resolution order as
- * `createPayload` in `Rcs/index.js`.
- */
-export function extractRegisteredSenderIdsFromSmsFallbackRecord(record) {
-  if (!record || typeof record !== 'object') return null;
-  const tc = record.templateConfigs && typeof record.templateConfigs === 'object'
-    ? record.templateConfigs
-    : {};
-  const candidates = [record.registeredSenderIds, tc.registeredSenderIds, tc.header];
-  for (let i = 0; i < candidates.length; i += 1) {
-    const a = candidates[i];
-    if (Array.isArray(a) && a.length > 0) return a;
-  }
-  return null;
-}
+};

package/v2Components/CapActionButton/constants.js

@@ -32,13 +32,6 @@ export const CTA_OPTIONS = [
 ];
 
 export const invalidVarRegex = /{{(.*?)}}/g;
-
-/** URL CTA subtype (Figma: URL type dropdown). */
-export const RCS_CTA_URL_TYPE = {
-  STATIC: 'STATIC',
-  DYNAMIC: 'DYNAMIC',
-};
-
 export const BTN_MAX_LENGTH = 25;
 export const PHONE_NUMBER_MAX_LENGTH = 15;
 export const URL_MAX_LENGTH = 2000;

package/v2Components/CapActionButton/index.js

@@ -8,7 +8,6 @@ import CapRow from '@capillarytech/cap-ui-library/CapRow';
 import CapColumn from '@capillarytech/cap-ui-library/CapColumn';
 import CapHeading from '@capillarytech/cap-ui-library/CapHeading';
 import CapHeader from "@capillarytech/cap-ui-library/CapHeader";
-import CapRadioGroup from '@capillarytech/cap-ui-library/CapRadioGroup';
 import CapSelect from '@capillarytech/cap-ui-library/CapSelect';
 import CapInput from '@capillarytech/cap-ui-library/CapInput';
 import CapIcon from '@capillarytech/cap-ui-library/CapIcon';
@@ -21,16 +20,9 @@ import globalMessages from '../../v2Containers/Cap/messages';import CapTagListWi
 
 import { isUrl, isValidText } from '../../v2Containers/Line/Container/Wrapper/utils';
 import messages from './messages';
-import {
-  BTN_MAX_LENGTH,
-  URL_MAX_LENGTH,
-  PHONE_NUMBER_MAX_LENGTH,
-  invalidVarRegex,
-  HANDLERS,
-  RCS_CTA_URL_TYPE,
-} from './constants';
+import { CTA_OPTIONS, BTN_MAX_LENGTH, URL_MAX_LENGTH, PHONE_NUMBER_MAX_LENGTH,invalidVarRegex, HANDLERS } from './constants';
 import './index.scss';
-import { INITIAL_SUGGESTIONS, RCS_BUTTON_TYPES, HOST_ICS} from '../../v2Containers/Rcs/constants';
+import { INITIAL_SUGGESTIONS, RCS_BUTTON_TYPES} from '../../v2Containers/Rcs/constants';
 
 const { TextArea } = CapInput;
 
@@ -49,12 +41,9 @@ export const CapActionButton = (props) => {
     injectedTags = {},
     location = {},
     selectedOfferDetails = [],
-    host = '',
+
     onContextChange,
-    minSavedSuggestions = 0,
-    hideDeleteSuggestionIndexes = [],
   } = props;
-  const isHostIcs = host === HOST_ICS;
   const [urlError, setUrlError] = useState(false);
   const [buttonError, setButtonError] = useState(false);
   const updateHandler = (type, value, index) => {
@@ -77,7 +66,6 @@ export const CapActionButton = (props) => {
 
   const onCtaTypeChange = (value, index) => {
     let clonedCta = cloneDeep(suggestions[index]);
-    const isCta = value === RCS_BUTTON_TYPES.CTA;
     clonedCta = {
       ...clonedCta,
       type: value,
@@ -85,7 +73,6 @@ export const CapActionButton = (props) => {
       phoneNumber: '',
       postback: '',
       url: value === RCS_BUTTON_TYPES.PHONE_NUMBER ? null : '',
-      urlType: isCta ? RCS_CTA_URL_TYPE.STATIC : undefined,
       isSaved: false,
     };
     setUrlError(false);
@@ -105,61 +92,39 @@ export const CapActionButton = (props) => {
     updateDisplayAndPostback(value, id);
   };
 
-  const renderInnerCharCount = (len, max) => (
-    <CapHeading type="h5" className="rcs-cta-inner-char-count">
-      {formatMessage(messages.ctaFieldCharCountInline, { current: len, max })}
+  const renderLength = (len, max) => (
+    <CapHeading type="label1" className="rcs-render-btn-length">
+      {formatMessage(messages.templateMessageLength, {
+        currentLength: len,
+        maxLength: max,
+      })}
     </CapHeading>
   );
 
-  const validateCtaUrlValue = (value, urlSubtype) => {
-    const v = String(value || '').trim();
-    if (!v) {
-      return formatMessage(messages.ctaWebsiteUrlErrorMessage);
-    }
-    if (v.length > URL_MAX_LENGTH) {
-      return formatMessage(messages.ctaWebsiteUrlErrorMessage);
-    }
-    if (urlSubtype === RCS_CTA_URL_TYPE.DYNAMIC) {
-      return false;
-    }
-    if (!isUrl(v)) {
-      return formatMessage(messages.ctaWebsiteUrlErrorMessage);
-    }
-    if (v.match(invalidVarRegex)?.length > 0) {
-      return formatMessage(messages.staticUrlWithVarErrorMessage);
-    }
-    return false;
-  };
-
   const onUrlChange = ({ target }) => {
-    const { value, id } = target;
-    const row = suggestions[id] || {};
-    const subtype = row.urlType || RCS_CTA_URL_TYPE.STATIC;
-    setUrlError(validateCtaUrlValue(value, subtype));
+    let { value, id } = target;
+    let errorMessage = false;
+    if (!isUrl(value)) {
+      errorMessage = formatMessage(messages.ctaWebsiteUrlErrorMessage);
+    } else if (value.match(invalidVarRegex)?.length > 0) {
+      errorMessage = formatMessage(messages.staticUrlWithVarErrorMessage);
+    }
+    setUrlError(errorMessage);
     updateHandler(HANDLERS.URL, value, id);
   };
 
-  const onUrlSubtypeChange = (nextSubtype, index) => {
-    const cloned = cloneDeep(suggestions[index]);
-    cloned.urlType = nextSubtype;
-    cloned.isSaved = false;
-    setUrlError(validateCtaUrlValue(cloned.url || '', nextSubtype));
-    updateButtonChange(cloned, index);
-  };
-
   const onPhoneNoChange = (value, index) => {
     updateHandler(HANDLERS.PHONE_NUMBER, value, index);
   };
 
   const ctaSaveDisabled = (index) => {
-    const { type, text, phoneNumber, url, urlType } = suggestions[index] || {};
+    const { type, text, phoneNumber, url } = suggestions[index] || {};
     if (text === '' || buttonError) {
       return true;
-    } if (type === RCS_BUTTON_TYPES.PHONE_NUMBER && (phoneNumber || '').length < 5) {
+    } if (type === RCS_BUTTON_TYPES.PHONE_NUMBER && phoneNumber.length < 5) {
+      return true;
+    } if (type === RCS_BUTTON_TYPES.CTA && (url === '' || urlError)) {
       return true;
-    } if (type === RCS_BUTTON_TYPES.CTA) {
-      const subtype = urlType || RCS_CTA_URL_TYPE.STATIC;
-      return !!validateCtaUrlValue(url, subtype);
     }
     return false;
   };
@@ -178,58 +143,64 @@ export const CapActionButton = (props) => {
     updateButtonChange(newSuggestion, suggestions?.length);
   };
 
+  const renderCtaOptions = (label, tooltipLabel, isDisabled) => {
+    if (isDisabled) {
+      return (
+        <CapRow>
+          <CapColumn span={23}>{label}</CapColumn>
+          <CapColumn span={1}>
+            <CapTooltipWithInfo
+              // autoAdjustOverflow
+              placement="right"
+              title={tooltipLabel}
+            />
+          </CapColumn>
+        </CapRow>
+      );
+    }
+    return label;
+  };
+
   const { formatMessage } = intl;
   const renderedContent = () => {
     const renderArray = [];
-    const addBtnDisabled = suggestions?.length > 0 && (suggestions.length >= maxButtons || !suggestions[suggestions.length - 1]?.isSaved);
-    const savedSuggestionsCount = (suggestions || []).filter((s) => s && s.isSaved).length;
-    const cannotDeleteSavedMandatory = (idx) => {
-      const row = suggestions[idx];
-      if (!row || !row.isSaved) return false;
-      return minSavedSuggestions > 0 && savedSuggestionsCount <= minSavedSuggestions;
-    };
-
-    const hideDeleteForSuggestionIndex = (idx) =>
-      Array.isArray(hideDeleteSuggestionIndexes) && hideDeleteSuggestionIndexes.includes(idx);
-
-    const ctaTypeRadioOptions = [
-      { label: formatMessage(messages.ctaPhoneNo), value: RCS_BUTTON_TYPES.PHONE_NUMBER },
-      { label: formatMessage(messages.ctaUrlRadio), value: RCS_BUTTON_TYPES.CTA },
-      { label: formatMessage(messages.ctaQr), value: RCS_BUTTON_TYPES.QUICK_REPLY },
-    ];
+    const addBtnDisabled = suggestions.length >= maxButtons || !suggestions[suggestions.length - 1]?.isSaved;
 
-    const urlTypeSelectOptions = [
-      { value: RCS_CTA_URL_TYPE.STATIC, label: formatMessage(messages.ctaWebsiteTypeStatic) },
-      { value: RCS_CTA_URL_TYPE.DYNAMIC, label: formatMessage(messages.ctaWebsiteTypeDynamic) },
-    ];
+    const ctaOptions = CTA_OPTIONS.map((option) => {
+      const { value, label } = option;
+      const isDisabled = suggestions.length >= maxButtons && !suggestions[suggestions.length - 1];
+      return {
+        value,
+        label: renderCtaOptions(label, formatMessage(messages.ctaButtonTypeDisabled), isDisabled),
+        disabled: isDisabled,
+      };
+    });
 
-    suggestions?.length > 0 && suggestions.forEach((cta) => {
+    suggestions.forEach((cta) => {
       const {
         index, type, text, isSaved,
       } = cta || {};
 
       const url = type !== RCS_BUTTON_TYPES.CTA ? null : cta.url;
-      const urlSubtype = type === RCS_BUTTON_TYPES.CTA
-        ? (cta.urlType || RCS_CTA_URL_TYPE.STATIC)
-        : RCS_CTA_URL_TYPE.STATIC;
       const phoneNumber = type !== RCS_BUTTON_TYPES.PHONE_NUMBER ? null : cta.phoneNumber;
       if (isFullMode && !isEditFlow && !isSaved) {
         renderArray.push(
-          <CapRow className="rcs-button-cta-create-container" key={`cta-edit-${index}`} gutter={0}>
-            <CapRow className="rcs-button-cta-create" gutter={0}>
-              <CapColumn span={24}>
-                <CapHeading type="h4">
+          <div className="rcs-button-cta-create-container" key={`cta-edit-${index}`}>
+            <CapRow className="rcs-button-cta-create margin-t-16">
+              <CapColumn span={12}>
+                {/* Type of action */}
+                <CapHeading type="h4" className="cta-label">
                   {formatMessage(messages.ctaType)}
                 </CapHeading>
-                <CapRadioGroup
-                  id={`rcs-cta-type-radio-${index}`}
-                  className="cap-rcs-cta-type-radio"
-                  options={ctaTypeRadioOptions}
+                <CapSelect
+                  id="rcs-cta-type"
+                  options={ctaOptions || []}
+                  onChange={(value) => onCtaTypeChange(value, index)}
                   value={type}
-                  onChange={(e) => onCtaTypeChange(e.target.value, index)}
+                  disabled={false}
                 />
               </CapColumn>
-              <CapColumn span={24}>
+              <CapColumn span={12}>
                 <CapHeading type="h4" className="cta-label">
                   {formatMessage(messages.ctaButtonText)}
                   <CapTooltipWithInfo
@@ -250,34 +221,28 @@ export const CapActionButton = (props) => {
                   size="large"
                   maxLength={BTN_MAX_LENGTH}
                   errorMessage={buttonError}
-                  suffix={renderInnerCharCount((text || '').length, BTN_MAX_LENGTH)}
                 />
+                {renderLength(text.length, BTN_MAX_LENGTH)}
               </CapColumn>
             </CapRow>
             {type === RCS_BUTTON_TYPES.PHONE_NUMBER && (
               <>
                 <CapRow>
-                  <CapColumn span={24}>
+                  <CapColumn span={11}>
+                    {/* phone number */}
                     <CapHeading type="h4" className="cta-label">
                       {formatMessage(messages.ctaPhoneNo)}
                     </CapHeading>
-                    <CapRow
-                      className="rcs-cta-input-with-inner-count rcs-cta-input-with-inner-count--phone"
-                      gutter={0}
-                    >
-                      <CapColumn span={24}>
-                        <PhoneInput
-                          placeholder={formatMessage(messages.ctaPhoneNoPlaceholder)}
-                          autoFormat={false}
-                          countryCodeEditable={false}
-                          value={phoneNumber}
-                          onChange={(value) => onPhoneNoChange(value, index)}
-                          country="in"
-                          className="cta-phone-number rcs-cta-phone-input"
-                        />
-                        {renderInnerCharCount((phoneNumber || '').length, PHONE_NUMBER_MAX_LENGTH)}
-                      </CapColumn>
-                    </CapRow>
+                    <PhoneInput
+                      placeholder={formatMessage(messages.ctaPhoneNoPlaceholder)}
+                      autoFormat={false}
+                      countryCodeEditable={false}
+                      value={phoneNumber}
+                      onChange={(value) => onPhoneNoChange(value, index)}
+                      country="in"
+                      className="cta-phone-number"
+                    />
+                    {renderLength(phoneNumber.length, PHONE_NUMBER_MAX_LENGTH)}
                   </CapColumn>
                 </CapRow>
                 <CapRow className="rcs-cta-save-delete-btn">
@@ -285,7 +250,7 @@ export const CapActionButton = (props) => {
                     title={ctaSaveDisabled(index) && formatMessage(messages.ctaSaveDisabled)}
                     placement="bottom"
                   >
-                    <CapRow className="button-disabled-tooltip-wrapper">
+                    <div className="button-disabled-tooltip-wrapper">
                       <CapButton
                         onClick={() => saveCta(index)}
                         disabled={ctaSaveDisabled(index)}
@@ -293,49 +258,36 @@ export const CapActionButton = (props) => {
                       >
                         {formatMessage(globalMessages.save)}
                       </CapButton>
-                    </CapRow>
+                    </div>
                   </CapTooltip>
-                  {!hideDeleteForSuggestionIndex(index) && !cannotDeleteSavedMandatory(index) && (
-                    <CapButton
-                      onClick={() => deleteButtonHandler(index)}
-                      className="rcs-cta-delete-btn"
-                      type="secondary"
-                    >
-                      {formatMessage(globalMessages.delete)}
-                    </CapButton>
-                  )}
+                  <CapButton
+                    onClick={() => deleteButtonHandler(index)}
+                    className="rcs-cta-delete-btn"
+                    type="secondary"
+                  >
+                    {formatMessage(globalMessages.delete)}
+                  </CapButton>
                 </CapRow>
               </>
             )}
             {type === RCS_BUTTON_TYPES.CTA && (
               <>
-                <CapRow className="rcs-cta-url-fields-row" gutter={8}>
-                  <CapColumn span={6} className="rcs-cta-url-type-col">
-                    <CapHeading type="h4" className="cta-label">
-                      {formatMessage(messages.ctaWebsiteType)}
-                    </CapHeading>
-                    <CapSelect
-                      id={`rcs-cta-url-type-${index}`}
-                      options={urlTypeSelectOptions}
-                      value={urlSubtype}
-                      onChange={(value) => onUrlSubtypeChange(value, index)}
-                    />
-                  </CapColumn>
-                  <CapColumn span={18} className="rcs-cta-url-value-col">
+                <CapRow>
+                  <CapColumn span={24}>
                     <CapHeading type="h4" className="cta-label">
-                      {formatMessage(messages.ctaUrlField)}
+                      {formatMessage(messages.ctaWebsite)}
                     </CapHeading>
                     <CapInput
                       id={index}
                       className="rcs-cta-url"
                       onChange={onUrlChange}
-                      placeholder={formatMessage(messages.ctaEnterUrlPlaceholder)}
-                      value={url || ''}
+                      placeholder={formatMessage(messages.ctaStaticPlaceholder)}
+                      value={url}
                       size="large"
                       maxLength={URL_MAX_LENGTH}
                       errorMessage={urlError}
-                      suffix={renderInnerCharCount((url || '').length, URL_MAX_LENGTH)}
                     />
+                    {renderLength(url.length, URL_MAX_LENGTH)}
                   </CapColumn>
                 </CapRow>
                 <CapRow className="rcs-cta-save-delete-btn">
@@ -345,7 +297,7 @@ export const CapActionButton = (props) => {
                     }
                     placement="bottom"
                   >
-                    <CapRow className="button-disabled-tooltip-wrapper">
+                    <div className="button-disabled-tooltip-wrapper">
                       <CapButton
                         onClick={() => saveCta(index)}
                         disabled={ctaSaveDisabled(index)}
@@ -353,17 +305,15 @@ export const CapActionButton = (props) => {
                       >
                         {formatMessage(globalMessages.save)}
                       </CapButton>
-                    </CapRow>
+                    </div>
                   </CapTooltip>
-                  {!hideDeleteForSuggestionIndex(index) && !cannotDeleteSavedMandatory(index) && (
-                    <CapButton
-                      onClick={() => deleteButtonHandler(index)}
-                      className="rcs-cta-delete-btn"
-                      type="secondary"
-                    >
-                      {formatMessage(globalMessages.delete)}
-                    </CapButton>
-                  )}
+                  <CapButton
+                    onClick={() => deleteButtonHandler(index)}
+                    className="rcs-cta-delete-btn"
+                    type="secondary"
+                  >
+                    {formatMessage(globalMessages.delete)}
+                  </CapButton>
                 </CapRow>
               </>
             )}
@@ -373,7 +323,7 @@ export const CapActionButton = (props) => {
                   title={ctaSaveDisabled(index) && formatMessage(messages.ctaSaveDisabled)}
                   placement="bottom"
                 >
-                  <CapRow className="button-disabled-tooltip-wrapper">
+                  <div className="button-disabled-tooltip-wrapper">
                     <CapButton
                       onClick={() => saveCta(index)}
                       disabled={ctaSaveDisabled(index)}
@@ -381,9 +331,9 @@ export const CapActionButton = (props) => {
                     >
                       {formatMessage(globalMessages.save)}
                     </CapButton>
-                  </CapRow>
+                  </div>
                 </CapTooltip>
-                {!(isHostIcs && index === 0) && !hideDeleteForSuggestionIndex(index) && !cannotDeleteSavedMandatory(index) && (
+                {index !== 0 && (
                   <CapButton
                     onClick={() => deleteButtonHandler(index)}
                     className="rcs-cta-delete-btn"
@@ -394,12 +344,12 @@ export const CapActionButton = (props) => {
                 )}
               </CapRow>
             )}
-          </CapRow>
+          </div>
         );
       } else {
         const ctaIsPhone = type === RCS_BUTTON_TYPES.PHONE_NUMBER;
         const ctaIsReply = type === RCS_BUTTON_TYPES.QUICK_REPLY;
-        suggestions?.length > 0 && renderArray?.push(
+        renderArray.push(
           <CapRow
             key={`cta-saved-${index}`}
             className="cap-rcs-saved-cta margin-t-12"
@@ -429,9 +379,7 @@ export const CapActionButton = (props) => {
               <>
                 <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)}
+                    {formatMessage(messages.ctaWebsiteTypeStatic)}
                   </CapLabel>
                 </CapColumn>
                 <CapTooltip title={url} placement={'top'}>
@@ -450,7 +398,7 @@ export const CapActionButton = (props) => {
                 >
                   <CapIcon size="s" type="edit" />
                 </CapColumn>
-                {!(isHostIcs && index === 0) && !hideDeleteForSuggestionIndex(index) && !cannotDeleteSavedMandatory(index) && (
+                {index !== 0 && (
                   <CapColumn className="rcs-saved-cta-delete-icon" span={1} onClick={() => deleteButtonHandler(index)}>
                     <CapIcon size="s" type="delete" />
                   </CapColumn>
@@ -462,7 +410,7 @@ export const CapActionButton = (props) => {
       }
     });
     {
-      suggestions?.length < maxButtons &&
+      suggestions.length < maxButtons &&
         (isFullMode && !isEditFlow)
         && renderArray.push(
           <CapRow>
@@ -472,7 +420,7 @@ export const CapActionButton = (props) => {
               }
               placement={'right'}
             >
-              <CapRow className="button-disabled-tooltip-wrapper">
+              <div className="button-disabled-tooltip-wrapper">
                 <CapButton
                   type="flat"
                   id="rcs-cta-add-button"
@@ -483,7 +431,7 @@ export const CapActionButton = (props) => {
                 >
                   {formatMessage(messages.addButton)}
                 </CapButton>
-              </CapRow>
+              </div>
             </CapTooltip>
           </CapRow>,
         );
@@ -496,8 +444,6 @@ export const CapActionButton = (props) => {
 CapActionButton.propTypes = {
   intl: intlShape.isRequired,
   updateButtonChange: PropTypes.func,
-  minSavedSuggestions: PropTypes.number,
-  hideDeleteSuggestionIndexes: PropTypes.arrayOf(PropTypes.number),
   suggestions: PropTypes.array,
   tags: PropTypes.array,
   injectedTags: PropTypes.object,
@@ -505,15 +451,12 @@ CapActionButton.propTypes = {
   selectedOfferDetails: PropTypes.array,
   onTagSelect: PropTypes.func,
   onContextChange: PropTypes.func,
-  host: PropTypes.string,
 };
 
 CapActionButton.defaultProps = {
   buttonTextlen: 20,
   type: '',
   updateButtonChange: () => {},
-  minSavedSuggestions: 0,
-  hideDeleteSuggestionIndexes: [],
   suggestions: [],
   tags: [],
   injectedTags: {},
@@ -521,7 +464,6 @@ CapActionButton.defaultProps = {
   selectedOfferDetails: [],
   onTagSelect: () => {},
   onContextChange: () => {},
-  host: '',
 };
 
 export default injectIntl(CapActionButton);