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

package/v2Components/CapActionButton/index.js

@@ -8,6 +8,7 @@ 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';
@@ -20,9 +21,16 @@ import globalMessages from '../../v2Containers/Cap/messages';import CapTagListWi
 
 import { isUrl, isValidText } from '../../v2Containers/Line/Container/Wrapper/utils';
 import messages from './messages';
-import { CTA_OPTIONS, BTN_MAX_LENGTH, URL_MAX_LENGTH, PHONE_NUMBER_MAX_LENGTH,invalidVarRegex, HANDLERS } from './constants';
+import {
+  BTN_MAX_LENGTH,
+  URL_MAX_LENGTH,
+  PHONE_NUMBER_MAX_LENGTH,
+  invalidVarRegex,
+  HANDLERS,
+  RCS_CTA_URL_TYPE,
+} from './constants';
 import './index.scss';
-import { INITIAL_SUGGESTIONS, RCS_BUTTON_TYPES} from '../../v2Containers/Rcs/constants';
+import { INITIAL_SUGGESTIONS, RCS_BUTTON_TYPES, HOST_ICS} from '../../v2Containers/Rcs/constants';
 
 const { TextArea } = CapInput;
 
@@ -41,9 +49,12 @@ 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) => {
@@ -66,6 +77,7 @@ export const CapActionButton = (props) => {
 
   const onCtaTypeChange = (value, index) => {
     let clonedCta = cloneDeep(suggestions[index]);
+    const isCta = value === RCS_BUTTON_TYPES.CTA;
     clonedCta = {
       ...clonedCta,
       type: value,
@@ -73,6 +85,7 @@ 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);
@@ -92,39 +105,61 @@ export const CapActionButton = (props) => {
     updateDisplayAndPostback(value, id);
   };
 
-  const renderLength = (len, max) => (
-    <CapHeading type="label1" className="rcs-render-btn-length">
-      {formatMessage(messages.templateMessageLength, {
-        currentLength: len,
-        maxLength: max,
-      })}
+  const renderInnerCharCount = (len, max) => (
+    <CapHeading type="h5" className="rcs-cta-inner-char-count">
+      {formatMessage(messages.ctaFieldCharCountInline, { current: len, max })}
     </CapHeading>
   );
 
-  const onUrlChange = ({ target }) => {
-    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);
+  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;
     }
-    setUrlError(errorMessage);
+    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));
     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 } = suggestions[index] || {};
+    const { type, text, phoneNumber, url, urlType } = suggestions[index] || {};
     if (text === '' || buttonError) {
       return true;
-    } if (type === RCS_BUTTON_TYPES.PHONE_NUMBER && phoneNumber.length < 5) {
-      return true;
-    } if (type === RCS_BUTTON_TYPES.CTA && (url === '' || urlError)) {
+    } if (type === RCS_BUTTON_TYPES.PHONE_NUMBER && (phoneNumber || '').length < 5) {
       return true;
+    } if (type === RCS_BUTTON_TYPES.CTA) {
+      const subtype = urlType || RCS_CTA_URL_TYPE.STATIC;
+      return !!validateCtaUrlValue(url, subtype);
     }
     return false;
   };
@@ -143,64 +178,59 @@ 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 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 urlTypeSelectOptions = [
+    { value: RCS_CTA_URL_TYPE.STATIC, label: formatMessage(messages.ctaWebsiteTypeStatic) },
+    { value: RCS_CTA_URL_TYPE.DYNAMIC, label: formatMessage(messages.ctaWebsiteTypeDynamic) },
+  ];
+
   const renderedContent = () => {
     const renderArray = [];
-    const addBtnDisabled = suggestions.length >= maxButtons || !suggestions[suggestions.length - 1]?.isSaved;
-
-    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,
-      };
-    });
+    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;
+    };
 
-    suggestions.forEach((cta) => {
+    suggestions?.length > 0 && 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(
-          <div className="rcs-button-cta-create-container" key={`cta-edit-${index}`}>
-            <CapRow type='flex' justify='space-between' className="rcs-button-cta-create margin-t-16">
-              <CapColumn span={11}>
-                {/* Type of action */}
-                <CapHeading type="h4" className="cta-label">
+          <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">
                   {formatMessage(messages.ctaType)}
                 </CapHeading>
-                <CapSelect
-                  id="rcs-cta-type"
-                  options={ctaOptions || []}
-                  onChange={(value) => onCtaTypeChange(value, index)}
+                <CapRadioGroup
+                  id={`rcs-cta-type-radio-${index}`}
+                  className="cap-rcs-cta-type-radio"
+                  options={ctaTypeRadioOptions}
                   value={type}
-                  disabled={false}
+                  onChange={(e) => onCtaTypeChange(e.target.value, index)}
                 />
               </CapColumn>
-              <CapColumn span={12}>
+              <CapColumn span={24}>
                 <CapHeading type="h4" className="cta-label">
                   {formatMessage(messages.ctaButtonText)}
                   <CapTooltipWithInfo
@@ -221,28 +251,34 @@ 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={11}>
-                    {/* phone number */}
+                  <CapColumn span={24}>
                     <CapHeading type="h4" className="cta-label">
                       {formatMessage(messages.ctaPhoneNo)}
                     </CapHeading>
-                    <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)}
+                    <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>
                   </CapColumn>
                 </CapRow>
                 <CapRow useLegacy className="rcs-cta-save-delete-btn">
@@ -250,7 +286,7 @@ export const CapActionButton = (props) => {
                     title={ctaSaveDisabled(index) && formatMessage(messages.ctaSaveDisabled)}
                     placement="bottom"
                   >
-                    <div className="button-disabled-tooltip-wrapper">
+                    <CapRow className="button-disabled-tooltip-wrapper">
                       <CapButton
                         onClick={() => saveCta(index)}
                         disabled={ctaSaveDisabled(index)}
@@ -258,36 +294,49 @@ export const CapActionButton = (props) => {
                       >
                         {formatMessage(globalMessages.save)}
                       </CapButton>
-                    </div>
+                    </CapRow>
                   </CapTooltip>
-                  <CapButton
-                    onClick={() => deleteButtonHandler(index)}
-                    className="rcs-cta-delete-btn"
-                    type="secondary"
-                  >
-                    {formatMessage(globalMessages.delete)}
-                  </CapButton>
+                  {!hideDeleteForSuggestionIndex(index) && !cannotDeleteSavedMandatory(index) && (
+                    <CapButton
+                      onClick={() => deleteButtonHandler(index)}
+                      className="rcs-cta-delete-btn"
+                      type="secondary"
+                    >
+                      {formatMessage(globalMessages.delete)}
+                    </CapButton>
+                  )}
                 </CapRow>
               </>
             )}
             {type === RCS_BUTTON_TYPES.CTA && (
               <>
-                <CapRow>
-                  <CapColumn span={24}>
+                <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.ctaWebsite)}
+                      {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">
+                    <CapHeading type="h4" className="cta-label">
+                      {formatMessage(messages.ctaUrlField)}
                     </CapHeading>
                     <CapInput
                       id={index}
                       className="rcs-cta-url"
                       onChange={onUrlChange}
-                      placeholder={formatMessage(messages.ctaStaticPlaceholder)}
-                      value={url}
+                      placeholder={formatMessage(messages.ctaEnterUrlPlaceholder)}
+                      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 useLegacy className="rcs-cta-save-delete-btn">
@@ -297,7 +346,7 @@ export const CapActionButton = (props) => {
                     }
                     placement="bottom"
                   >
-                    <div className="button-disabled-tooltip-wrapper">
+                    <CapRow className="button-disabled-tooltip-wrapper">
                       <CapButton
                         onClick={() => saveCta(index)}
                         disabled={ctaSaveDisabled(index)}
@@ -305,15 +354,17 @@ export const CapActionButton = (props) => {
                       >
                         {formatMessage(globalMessages.save)}
                       </CapButton>
-                    </div>
+                    </CapRow>
                   </CapTooltip>
-                  <CapButton
-                    onClick={() => deleteButtonHandler(index)}
-                    className="rcs-cta-delete-btn"
-                    type="secondary"
-                  >
-                    {formatMessage(globalMessages.delete)}
-                  </CapButton>
+                  {!hideDeleteForSuggestionIndex(index) && !cannotDeleteSavedMandatory(index) && (
+                    <CapButton
+                      onClick={() => deleteButtonHandler(index)}
+                      className="rcs-cta-delete-btn"
+                      type="secondary"
+                    >
+                      {formatMessage(globalMessages.delete)}
+                    </CapButton>
+                  )}
                 </CapRow>
               </>
             )}
@@ -323,7 +374,7 @@ export const CapActionButton = (props) => {
                   title={ctaSaveDisabled(index) && formatMessage(messages.ctaSaveDisabled)}
                   placement="bottom"
                 >
-                  <div className="button-disabled-tooltip-wrapper">
+                  <CapRow className="button-disabled-tooltip-wrapper">
                     <CapButton
                       onClick={() => saveCta(index)}
                       disabled={ctaSaveDisabled(index)}
@@ -331,9 +382,9 @@ export const CapActionButton = (props) => {
                     >
                       {formatMessage(globalMessages.save)}
                     </CapButton>
-                  </div>
+                  </CapRow>
                 </CapTooltip>
-                {index !== 0 && (
+                {!(isHostIcs && index === 0) && !hideDeleteForSuggestionIndex(index) && !cannotDeleteSavedMandatory(index) && (
                   <CapButton
                     onClick={() => deleteButtonHandler(index)}
                     className="rcs-cta-delete-btn"
@@ -344,12 +395,12 @@ export const CapActionButton = (props) => {
                 )}
               </CapRow>
             )}
-          </div>
+          </CapRow>
         );
       } else {
         const ctaIsPhone = type === RCS_BUTTON_TYPES.PHONE_NUMBER;
         const ctaIsReply = type === RCS_BUTTON_TYPES.QUICK_REPLY;
-        renderArray.push(
+        suggestions?.length > 0 && renderArray?.push(
           <CapRow
             key={`cta-saved-${index}`}
             className="cap-rcs-saved-cta margin-t-12"
@@ -379,7 +430,9 @@ export const CapActionButton = (props) => {
               <>
                 <CapColumn span={3}>
                   <CapLabel className="url-type" type="label2">
-                    {formatMessage(messages.ctaWebsiteTypeStatic)}
+                    {(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">
@@ -400,7 +453,7 @@ export const CapActionButton = (props) => {
                 >
                   <CapIcon size="s" type="edit" />
                 </CapColumn>
-                {index !== 0 && (
+                {!(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>
@@ -412,7 +465,7 @@ export const CapActionButton = (props) => {
       }
     });
     {
-      suggestions.length < maxButtons &&
+      suggestions?.length < maxButtons &&
         (isFullMode && !isEditFlow)
         && renderArray.push(
           <CapRow useLegacy>
@@ -422,7 +475,7 @@ export const CapActionButton = (props) => {
               }
               placement={'right'}
             >
-              <div className="button-disabled-tooltip-wrapper">
+              <CapRow className="button-disabled-tooltip-wrapper">
                 <CapButton
                   type="flat"
                   id="rcs-cta-add-button"
@@ -433,7 +486,7 @@ export const CapActionButton = (props) => {
                 >
                   {formatMessage(messages.addButton)}
                 </CapButton>
-              </div>
+              </CapRow>
             </CapTooltip>
           </CapRow>,
         );
@@ -446,6 +499,8 @@ 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,
@@ -453,12 +508,15 @@ 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: {},
@@ -466,6 +524,7 @@ CapActionButton.defaultProps = {
   selectedOfferDetails: [],
   onTagSelect: () => {},
   onContextChange: () => {},
+  host: '',
 };
 
 export default injectIntl(CapActionButton);

package/v2Components/CapActionButton/index.scss

@@ -1,7 +1,20 @@
 @import '~@capillarytech/cap-ui-library/styles/_variables';
 
-#rcs-cta-type{
-    width: 90%;
+// Horizontal RCS button type radios (Phone number | URL | Quick reply)
+.cap-rcs-cta-type-radio.cap-radio-group-v2 {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  margin-top: 0.5rem;
+
+  .ant-radio-wrapper {
+    margin-right: $CAP_SPACE_24;
+    margin-bottom: 0;
+
+    &:last-child {
+      margin-right: 0;
+    }
+  }
 }
 
 .cap-rcs-saved-cta {
@@ -48,9 +61,139 @@
     }
 }
 
-.rcs-button-cta-create-container {
-    border: solid 1px $CAP_G06;
-    padding: 10px;
+// 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 {
+  font-size: 0.75rem;
+  line-height: 1.25rem;
+  color: $FONT_COLOR_03;
+  white-space: nowrap;
+}
+
+.rcs-cta-input-with-inner-count {
+  position: relative;
+  width: 100%;
+
+  &--phone .rcs-cta-inner-char-count {
+    position: absolute;
+    right: 0.6875rem;
+    top: 50%;
+    transform: translateY(-50%);
+    z-index: 2;
+    pointer-events: none;
+  }
+}
+
+// RCS phone field: Figma — one light border, 4px radius, ~antd Input large height, full width, count inside right
+.rcs-button-cta-create-container .rcs-cta-input-with-inner-count--phone {
+  .react-tel-input.rcs-cta-phone-input {
+    width: 100%;
+  }
+
+  .rcs-cta-phone-input .form-control {
+    width: 100% !important;
+    max-width: none;
+    height: 2.5rem;
+    min-height: 2.5rem;
+    padding-top: 0;
+    padding-bottom: 0;
+    padding-left: 3rem;
+    padding-right: 3.5rem;
+    margin: 0;
+    font-size: 0.875rem;
+    line-height: 2.5rem;
+    color: $CAP_G01;
+    background: $CAP_WHITE;
+    border: 1px solid $CAP_G06;
+    border-radius: 0.25rem;
+    box-shadow: none;
+
+    &::placeholder {
+      color: $CAP_G05;
+    }
+
+    &:hover {
+      border-color: $CAP_G11;
+    }
+
+    &:focus {
+      border-color: $CAP_G01;
+      box-shadow: none;
+      outline: none;
+    }
+  }
+
+  .rcs-cta-phone-input .flag-dropdown {
+    top: 0.0625rem;
+    bottom: 0.0625rem;
+    left: 0.0625rem;
+    padding: 0;
+    background: $CAP_WHITE;
+    border: none;
+    border-radius: 0.1875rem 0 0 0.1875rem; // inset from outer 4px radius
+  }
+
+  .rcs-cta-phone-input .flag-dropdown.open {
+    border-radius: 0.1875rem 0 0 0;
+  }
+
+  .rcs-cta-phone-input .selected-flag {
+    width: 2.75rem;
+    padding: 0 0 0 0.5rem;
+    background: transparent;
+    border-radius: 0.1875rem 0 0 0.1875rem;
+  }
+
+  .rcs-cta-phone-input .selected-flag:hover,
+  .rcs-cta-phone-input .selected-flag:focus {
+    background: $CAP_G09;
+  }
+
+  .rcs-cta-phone-input .selected-flag .arrow {
+    left: 1.375rem;
+    border-top-color: $CAP_G04;
+  }
+}
+
+// URL CTA: URL type (narrow) + URL field (~1:3) per Figma
+.rcs-cta-url-fields-row {
+  .rcs-cta-url-type-col .ant-select {
+    width: 100%;
+  }
+}
+
+// RCS “create CTA” card: 0.5rem padding + gaps (Figma-tight; fixes excess space above first label)
+.rcs-button-cta-create-container.cap-row-v2 {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  width: 100%;
+  border: solid 1px $CAP_G06;
+  padding: 1.25rem;
+  border-radius: 0.25rem; // 4px — match .cap-rcs-saved-cta
+
+  // Stack “Button type” (radios) above “Button text”
+  .rcs-button-cta-create.cap-row-v2 {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    margin: 0;
+  }
+
+  // Space after each field label (CapHeading margins are often zeroed by the library)
+  .cta-label {
+    margin-bottom: 0;
+    margin-top: 0.75rem;
+  }
+
+  .cta-label + * {
+    margin-top: 0.5rem;
+  }
+
+  // “Button type” heading has no .cta-label — keep same label→control gap as other fields
+  .rcs-button-cta-create > .ant-col:first-of-type .cap-rcs-cta-type-radio {
+    margin-top: 0.5rem;
+  }
 }   
 
 .disabled {
@@ -64,4 +207,12 @@
 
 .button-disabled-tooltip-wrapper {
     display: inline-block;
+    margin-top: 1.25rem;
+}
+
+// Space between Save and Delete on RCS / carousel CTA rows
+.rcs-cta-save-delete-btn {
+    .rcs-cta-delete-btn {
+        margin-left: 0.75rem;
+    }
 }