@capillarytech/creatives-library 9.0.28 → 9.0.29-alpha.1

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 {
@@ -10,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 {
@@ -37,20 +73,202 @@
         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;
+    }
+
+    // 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;
+        flex-shrink: 0;
+        cursor: pointer;
+    }
+
+    .rcs-cta-taglist {
+        flex-shrink: 0;
+    }
+}
+
+// Button text / URL: count via CapInput `suffix` (antd affix, right-aligned inside field).
+// Phone: react-phone-input-2 — overlay count + padding on .form-control
+// 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%;
+
+  &--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;
+    }
+  }
+
+  // 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 {
+    // 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;
+    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-button-cta-create-container {
-    border: solid 1px $CAP_G06;
-    padding: 10px;
+// 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;
+  // 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;
+  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;
+    align-items: stretch;
+    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 {
@@ -65,3 +283,16 @@
 .button-disabled-tooltip-wrapper {
     display: inline-block;
 }
+
+// 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/CapActionButton/messages.js

@@ -12,7 +12,7 @@ export default defineMessages({
   },
   ctaQr: {
     id: `${prefix}.ctaQr`,
-    defaultMessage: 'Quick Reply',
+    defaultMessage: 'Quick reply',
   },
   ctaPhoneNo: {
     id: `${prefix}.ctaPhoneNo`,
@@ -47,9 +47,17 @@ export default defineMessages({
     id: `${prefix}.templateMessageLength`,
     defaultMessage: 'Characters count: {currentLength}/{maxLength}',
   },
+  ctaFieldCharCountInline: {
+    id: `${prefix}.ctaFieldCharCountInline`,
+    defaultMessage: '{current}/{max}',
+  },
   ctaType: {
     id: `${prefix}.ctaType`,
-    defaultMessage: 'Type of action',
+    defaultMessage: 'Button type',
+  },
+  ctaUrlRadio: {
+    id: `${prefix}.ctaUrlRadio`,
+    defaultMessage: 'URL',
   },
   templateButtonTextPlaceholder: {
     id: `${prefix}.templateButtonTextPlaceholder`,
@@ -145,7 +153,15 @@ export default defineMessages({
   },
   ctaWebsiteType: {
     id: `${prefix}.ctaWebsiteType`,
-    defaultMessage: 'URL Type',
+    defaultMessage: 'URL type',
+  },
+  ctaUrlField: {
+    id: `${prefix}.ctaUrlField`,
+    defaultMessage: 'URL',
+  },
+  ctaEnterUrlPlaceholder: {
+    id: `${prefix}.ctaEnterUrlPlaceholder`,
+    defaultMessage: 'Enter URL',
   },
   ctaWebsiteTypeStatic: {
     id: `${prefix}.ctaWebsiteTypeStatic`,
@@ -183,4 +199,17 @@ export default defineMessages({
     id: `${prefix}.addLabels`,
     defaultMessage: 'Add Labels',
   },
+  ctaDynamicUrlTooltip: {
+    id: `${prefix}.ctaDynamicUrlTooltip`,
+    defaultMessage:
+      'Only one variable can be added to a URL. No need to add {one} to the end of the URL',
+  },
+  ctaTagListLabel: {
+    id: `${prefix}.ctaTagListLabel`,
+    defaultMessage: 'Add URL label',
+  },
+  ctaTagListRevert: {
+    id: `${prefix}.ctaTagListRevert`,
+    defaultMessage: 'Reset website URL label to default value',
+  },
 });

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

@@ -4,8 +4,10 @@ import '@testing-library/jest-dom';
 import { render, screen, fireEvent } from '../../../utils/test-utils';
 import { waitFor } from '@testing-library/react';
 import { CapActionButton } from '../index';
-import { BTN_MAX_LENGTH, PHONE_NUMBER_MAX_LENGTH, URL_MAX_LENGTH } from '../constants';
-import { RCS_BUTTON_TYPES } from '../../../v2Containers/Rcs/constants';
+import {
+  BTN_MAX_LENGTH, PHONE_NUMBER_MAX_LENGTH, URL_MAX_LENGTH, RCS_CTA_URL_TYPE, DYNAMIC_URL_SUFFIX,
+} from '../constants';
+import { RCS_BUTTON_TYPES, HOST_ICS } from '../../../v2Containers/Rcs/constants';
 
 const updateHandler = jest.fn();
 const deleteHandler = jest.fn();
@@ -13,6 +15,7 @@ const initializeComponent = (
   data,
   isEditFlow = false,
   maxButtons = 3,
+  host = '',
 ) => {
   // Normalize legacy test data shape to match component props
   const normalizeType = (legacyType) => {
@@ -26,6 +29,7 @@ const initializeComponent = (
     text: d.displayText ?? d.text ?? '',
     phoneNumber: d.phoneNumber ?? '',
     url: d.url ?? '',
+    urlType: d.urlType,
     postback: d.postback ?? '',
     isSaved: d.isSaved ?? false,
   }));
@@ -38,6 +42,7 @@ const initializeComponent = (
       isEditFlow={isEditFlow}
       maxButtons={maxButtons}
       isFullMode={true}
+      host={host}
     />,
   );
 };
@@ -60,7 +65,7 @@ describe('CapActionButton', () => {
         isSaved: false,
       },
     ]);
-    expect(screen.getByText('Type of action')).toBeInTheDocument();
+    expect(screen.getByText('Button type')).toBeInTheDocument();
     expect(screen.getByText('Button text')).toBeInTheDocument();
     expect(screen.getAllByText('Phone number')[1]).toBeInTheDocument();
     expect(screen.getByRole('button', { name: /save/i })).toBeDisabled();
@@ -123,7 +128,7 @@ describe('CapActionButton', () => {
         id: 1,
       },
     };
-    const urlInput = await screen.getByPlaceholderText('Enter website URL');
+    const urlInput = await screen.getByPlaceholderText('Enter URL');
     fireEvent.change(urlInput, urlEvent);
     expect(updateHandler).toHaveBeenCalledWith(
       {
@@ -163,6 +168,27 @@ describe('CapActionButton', () => {
     );
   });
 
+  it('should show delete for quick reply index 0 for non-ICS hosts but hide it for ICS (stop button)', () => {
+    const button = {
+      index: 0,
+      type: RCS_BUTTON_TYPES.QUICK_REPLY,
+      text: 'Reply',
+      phoneNumber: '',
+      url: '',
+      postback: 'Reply',
+      isSaved: false,
+    };
+
+    // Non-ICS (Infobip/others): delete should be available
+    const { unmount } = initializeComponent([button], false, 3, 'rcsinfobipbulk');
+    expect(screen.getByRole('button', { name: /delete/i })).toBeInTheDocument();
+    unmount();
+
+    // ICS: index 0 is reserved; delete should be hidden
+    initializeComponent([button], false, 3, HOST_ICS);
+    expect(screen.queryByRole('button', { name: /delete/i })).not.toBeInTheDocument();
+  });
+
   it('should respect character length limits', async () => {
     const initialData = {
       index: 0,
@@ -201,7 +227,7 @@ describe('CapActionButton', () => {
       isSaved: false,
     };
     initializeComponent([initialData]);
-    const urlInput = await screen.getByPlaceholderText('Enter website URL');
+    const urlInput = await screen.getByPlaceholderText('Enter URL');
     const longUrl = 'https://example.com/' + 'a'.repeat(URL_MAX_LENGTH + 1);
     fireEvent.change(urlInput, { target: { value: longUrl, id: 0 } });
     expect(urlInput.value.length).toBeLessThanOrEqual(URL_MAX_LENGTH);
@@ -248,7 +274,8 @@ describe('CapActionButton', () => {
       { index: 0, ctaType: RCS_BUTTON_TYPES.QUICK_REPLY, displayText: 'stop', phoneNumber: '', url: '', postback: 'stop', isSaved: true },
       { index: 1, ctaType: RCS_BUTTON_TYPES.QUICK_REPLY, displayText: 'Saved', phoneNumber: '', url: '', postback: 'Saved', isSaved: true },
     ];
-    const { container } = initializeComponent(suggestions);
+    // Use ICS host so index 0 (STOP) stays non-deletable and we only get delete icon for index 1
+    const { container } = initializeComponent(suggestions, false, 3, HOST_ICS);
     const deleteIcons = container.querySelectorAll('.rcs-saved-cta-delete-icon');
     expect(deleteIcons.length).toBeGreaterThan(0);
     fireEvent.click(deleteIcons[0]);
@@ -306,7 +333,8 @@ describe('CapActionButton', () => {
       postback: 'stop',
       isSaved: true,
     };
-    const { container } = initializeComponent([stopButton]);
+    // Only ICS treats index 0 as a mandatory STOP quick reply
+    const { container } = initializeComponent([stopButton], false, 3, HOST_ICS);
     expect(container.querySelector('.rcs-saved-cta-delete-icon')).not.toBeInTheDocument();
   });
 
@@ -427,7 +455,7 @@ describe('CapActionButton', () => {
       isSaved: false,
     };
     initializeComponent([button]);
-    expect(screen.getByPlaceholderText(/enter website url/i)).toBeInTheDocument();
+    expect(screen.getByPlaceholderText(/enter url/i)).toBeInTheDocument();
   });
 
   it('should update both displayText and postback when button text changes (updateDisplayAndPostback)', () => {
@@ -507,7 +535,7 @@ describe('CapActionButton', () => {
       isSaved: false,
     };
     initializeComponent([initial]);
-    const urlInput = screen.getByPlaceholderText('Enter website URL');
+    const urlInput = screen.getByPlaceholderText('Enter URL');
     fireEvent.change(urlInput, { target: { value: 'http://localhost:3030/creatives/ui/v2', id: 1 } });
     expect(screen.getByText(/url is not valid/i)).toBeInTheDocument();
   });
@@ -526,6 +554,34 @@ describe('CapActionButton', () => {
     expect(screen.getByRole('button', { name: /save/i })).toBeDisabled();
   });
 
+  it('should disable save for a dynamic-URL CTA still holding the unresolved {{1}} placeholder', () => {
+    const initial = {
+      index: 0,
+      type: RCS_BUTTON_TYPES.CTA,
+      text: 'Visit here',
+      url: `https://example.com${DYNAMIC_URL_SUFFIX}`,
+      urlType: RCS_CTA_URL_TYPE.DYNAMIC,
+      postback: 'Visit here',
+      isSaved: false,
+    };
+    initializeComponent([initial]);
+    expect(screen.getByRole('button', { name: /save/i })).toBeDisabled();
+  });
+
+  it('should enable save for a dynamic-URL CTA once the placeholder has been replaced with a real tag', () => {
+    const initial = {
+      index: 0,
+      type: RCS_BUTTON_TYPES.CTA,
+      text: 'Visit here',
+      url: 'https://example.com{{first_name}}',
+      urlType: RCS_CTA_URL_TYPE.DYNAMIC,
+      postback: 'Visit here',
+      isSaved: false,
+    };
+    initializeComponent([initial]);
+    expect(screen.getByRole('button', { name: /save/i })).not.toBeDisabled();
+  });
+
   it('should render edit and delete icons in edit mode (renderedContent)', () => {
     const button = {
       index: 1,
@@ -607,12 +663,12 @@ describe('CapActionButton', () => {
       );
     };
     render(<StatefulWrapper />);
-    let urlInput = screen.getByPlaceholderText('Enter website URL');
+    let urlInput = screen.getByPlaceholderText('Enter URL');
     // Enter invalid URL
     fireEvent.change(urlInput, { target: { value: 'badurl', id: 0 } });
     expect(await screen.findByText(/url is not valid/i)).toBeInTheDocument();
     // Re-grab input after re-render and enter valid URL
-    urlInput = screen.getByPlaceholderText('Enter website URL');
+    urlInput = screen.getByPlaceholderText('Enter URL');
     fireEvent.change(urlInput, { target: { value: 'https://good.com', id: 0 } });
     await waitFor(() => expect(screen.queryByText(/url is not valid/i)).not.toBeInTheDocument());
   });
@@ -867,15 +923,14 @@ describe('CapActionButton function logic', () => {
     expect(renderCtaOptions(label, tooltipLabel, false)).toBe('Test');
   });
 
-  it('renderLength returns correct CapHeading', () => {
-    const CapHeading = ({ type, className, children }) => <div className={className}>{children}</div>;
-    const formatMessage = (msg, values) => `${values.currentLength}/${values.maxLength}`;
-    const renderLength = (len, max) => (
-      <CapHeading type="label1" className="rcs-render-btn-length">
-        {formatMessage({}, { currentLength: len, maxLength: max })}
-      </CapHeading>
+  it('inner char count uses current/max format', () => {
+    const formatMessage = (msg, values) => `${values.current}/${values.max}`;
+    const renderInnerCharCount = (len, max) => (
+      <span className="rcs-cta-inner-char-count">
+        {formatMessage({}, { current: len, max })}
+      </span>
     );
-    const result = renderLength(5, 25);
+    const result = renderInnerCharCount(5, 25);
     expect(result.props.children).toBe('5/25');
   });
 });

package/v2Components/CapImageUpload/index.js

@@ -5,7 +5,7 @@
 *
 */
 
-import React, { useState, useEffect, useCallback } from 'react';
+import React, { useState, useEffect, useCallback, useMemo } from 'react';
 import PropTypes from "prop-types";
 
 import LabelHOC from '@capillarytech/cap-ui-library/assets/HOCs/ComponentWithLabelHOC';
@@ -92,7 +92,7 @@ function CapImageUpload(props) {
     [imageSrc],
   );
 
-  const WithLabel = LabelHOC(ImageComponent);
+  const WithLabel = useMemo(() => LabelHOC(ImageComponent), [ImageComponent]);
 
   const uploadImages = useCallback((e, { files }) => {
     if (e) {

package/v2Components/CapTagList/index.js

@@ -346,6 +346,8 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
   render() {
     const {
       hidePopover = false, intl = {}, moduleFilterEnabled, label, modalProps, channel, fetchingSchemaError = false, getPopupContainer,
+      overlayStyle,
+      overlayClassName,
     } = this.props;
     const {formatMessage} = intl;
     const {
@@ -440,6 +442,9 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
             classNames={{
               container: 'tag-list-popover-container'
             }}
+            overlayStyle={overlayStyle}
+            overlayClassName={overlayClassName}
+            getPopupContainer={getPopupContainer}
           >
             <CapTooltip
               title={
@@ -511,6 +516,10 @@ CapTagList.propTypes = {
   disableTooltipMsg: PropTypes.string,
   fetchingSchemaError: PropTypes.bool,
   popoverPlacement: PropTypes.string,
+  overlayStyle: PropTypes.object,
+  overlayClassName: PropTypes.string,
+  /** e.g. () => document.body — avoids overflow/stacking issues inside slideboxes */
+  getPopupContainer: PropTypes.func,
 };
 
 CapTagList.defaultValue = {