cap-creatives-ui 8.0.280 → 8.0.321

package/app/v2Components/CapWhatsappCarouselButton/tests/index.test.js

@@ -3,9 +3,10 @@ import { injectIntl } from 'react-intl';
 import '@testing-library/jest-dom';
 import { render, screen, fireEvent } from '../../../utils/test-utils';
 import { CapWhatsappCarouselButton } from '../index';
-import { 
+import {
   INITIAL_CAROUSEL_PHONE_NUMBER_DATA,
-  INITIAL_CAROUSEL_URL_DATA 
+  INITIAL_CAROUSEL_URL_DATA,
+  URL,
 } from '../constant';
 import { HOST_TWILIO } from "../../../v2Containers/Whatsapp/constants";
 
@@ -234,4 +235,121 @@ describe('CapWhatsappCarouselButton', () => {
       })
     ]));
   });
+
+  describe('carousel-scoped updates (only current card is updated)', () => {
+    it('handleButtonType only updates the carousel at carouselIndex', () => {
+      const card0 = {
+        bodyText: '',
+        buttons: [{ ...INITIAL_CAROUSEL_PHONE_NUMBER_DATA, text: 'Card 0' }],
+      };
+      const card1 = {
+        bodyText: '',
+        buttons: [{ ...INITIAL_CAROUSEL_PHONE_NUMBER_DATA, text: 'Card 1' }],
+      };
+      const carouselData = [card0, card1];
+
+      initializeComponent(carouselData, false, HOST_TWILIO, 0);
+
+      const radios = screen.getAllByRole('radio');
+      const urlRadio = radios.find((r) => r.value === URL) || radios[1];
+      if (urlRadio) fireEvent.click(urlRadio);
+
+      expect(setCarouselData).toHaveBeenCalledWith(expect.any(Array));
+      const updated = setCarouselData.mock.calls[0][0];
+      expect(updated).toHaveLength(2);
+      expect(updated[0].buttons[0]).toMatchObject(INITIAL_CAROUSEL_URL_DATA);
+      expect(updated[1]).toEqual(card1);
+    });
+
+    it('handleDeleteButton only removes button from the carousel at carouselIndex', () => {
+      const card0 = {
+        bodyText: '',
+        buttons: [
+          { ...INITIAL_CAROUSEL_PHONE_NUMBER_DATA, text: 'A', isSaved: true },
+          { ...INITIAL_CAROUSEL_URL_DATA, text: 'B', isSaved: true },
+        ],
+      };
+      const card1 = {
+        bodyText: '',
+        buttons: [
+          { ...INITIAL_CAROUSEL_PHONE_NUMBER_DATA, text: 'C', isSaved: true },
+          { ...INITIAL_CAROUSEL_URL_DATA, text: 'D', isSaved: true },
+        ],
+      };
+      const carouselData = [card0, card1];
+
+      const { container } = initializeComponent(carouselData, false, HOST_TWILIO, 0);
+
+      const deleteIconBtns = container.querySelectorAll('.whatsapp-carousel-delete-icon-btn');
+      expect(deleteIconBtns.length).toBeGreaterThanOrEqual(2);
+      fireEvent.click(deleteIconBtns[1]);
+
+      expect(setCarouselData).toHaveBeenCalledTimes(1);
+      const setter = setCarouselData.mock.calls[0][0];
+      expect(typeof setter).toBe('function');
+      const result = setter(carouselData);
+      expect(result[0].buttons).toHaveLength(1);
+      expect(result[0].buttons[0].text).toBe('A');
+      expect(result[1].buttons).toHaveLength(2);
+      expect(result[1].buttons[0].text).toBe('C');
+      expect(result[1].buttons[1].text).toBe('D');
+    });
+
+    it('addCarouselButton only adds button to the carousel at carouselIndex', () => {
+      const card0 = {
+        bodyText: '',
+        buttons: [{
+          ...INITIAL_CAROUSEL_PHONE_NUMBER_DATA,
+          text: 'Call us',
+          phone_number: '9112345678',
+          isSaved: true,
+        }],
+      };
+      const card1 = {
+        bodyText: '',
+        buttons: [{ ...INITIAL_CAROUSEL_PHONE_NUMBER_DATA, text: 'Other' }],
+      };
+      const carouselData = [card0, card1];
+
+      initializeComponent(carouselData, false, HOST_TWILIO, 0);
+
+      const addButton = screen.getByRole('button', { name: /add button/i });
+      fireEvent.click(addButton);
+
+      expect(setCarouselData).toHaveBeenCalledWith(expect.any(Array));
+      const updated = setCarouselData.mock.calls[0][0];
+      expect(updated).toHaveLength(2);
+      expect(updated[0].buttons).toHaveLength(2);
+      expect(updated[0].buttons[0].text).toBe('Call us');
+      expect(updated[0].buttons[1]).toMatchObject(INITIAL_CAROUSEL_PHONE_NUMBER_DATA);
+      expect(updated[0].buttons[1]).not.toBe(INITIAL_CAROUSEL_PHONE_NUMBER_DATA);
+      expect(updated[1]).toEqual(card1);
+    });
+
+    it('addCarouselButton adds a new button object (clone) so state is not shared', () => {
+      const carouselData = [{
+        bodyText: '',
+        buttons: [{
+          ...INITIAL_CAROUSEL_PHONE_NUMBER_DATA,
+          text: 'Saved',
+          isSaved: true,
+        }],
+      }];
+
+      initializeComponent(carouselData, false, HOST_TWILIO, 0);
+
+      const addButton = screen.getByRole('button', { name: /add button/i });
+      fireEvent.click(addButton);
+
+      const updated = setCarouselData.mock.calls[0][0];
+      const addedButton = updated[0].buttons[1];
+      expect(addedButton).toMatchObject({
+        buttonType: 'PHONE_NUMBER',
+        text: '',
+        phone_number: '',
+        isSaved: false,
+      });
+      expect(addedButton).not.toBe(INITIAL_CAROUSEL_PHONE_NUMBER_DATA);
+    });
+  });
 });

package/app/v2Components/CommonTestAndPreview/CustomValuesEditor.js

@@ -8,6 +8,7 @@ import CapButton from '@capillarytech/cap-ui-library/CapButton';
 import CapInput from '@capillarytech/cap-ui-library/CapInput';
 import CapLabel from '@capillarytech/cap-ui-library/CapLabel';
 import messages from './messages';
+import { CUSTOM_VALUES_EDITOR_SECTION_FALLBACK_KEY } from './constants';
 
 const CustomValuesEditor = ({
   isExtractingTags,
@@ -16,15 +17,16 @@ const CustomValuesEditor = ({
   setShowJSON,
   customValues,
   handleJSONTextChange,
-  extractedTags,
-  requiredTags,
-  optionalTags,
+  sections,
   handleCustomValueChange,
   handleDiscardCustomValues,
   handleUpdatePreview,
   isUpdatingPreview,
   formatMessage,
 }) => {
+  /** Same as SMS Test & Preview: show token path from extract-tags (fullPath or name). */
+  const getPersonalizationTagColumnLabel = (tagNode) => tagNode?.fullPath ?? tagNode?.name ?? '';
+
   if (isExtractingTags) {
     return (
       <CapRow className="loading-container">
@@ -77,52 +79,68 @@ const CustomValuesEditor = ({
         </CapRow>
       ) : (
         <>
-          {extractedTags?.length > 0 && (
-            <CapRow className="values-table">
-              <CapRow className="table-header">
-                <CapLabel type="label31" className="header-cell">
-                  <FormattedMessage {...messages.personalizationTags} />
-                </CapLabel>
-                <CapLabel type="label31" className="header-cell">
-                  <FormattedMessage {...messages.customValues} />
+          {(sections || []).filter((tagsSection) =>
+            (tagsSection?.requiredTags?.length || 0) + (tagsSection?.optionalTags?.length || 0) > 0).map((section) => (
+            <React.Fragment key={section.key || section.title?.id || section.title || CUSTOM_VALUES_EDITOR_SECTION_FALLBACK_KEY}>
+              {section.title ? (
+                <CapLabel type="label2" className="tags-section-title">
+                  {typeof section.title === 'string' ? section.title : <FormattedMessage {...section.title} />}
                 </CapLabel>
-              </CapRow>
-              {requiredTags.map((tag) => (
-                <CapRow key={tag.fullPath} className="value-row">
-                  <CapRow className="tag-name">
-                    {tag.fullPath}
-                    <span className="required-tag-indicator">*</span>
-                  </CapRow>
-                  <CapRow className="tag-input">
-                    <CapInput
-                      type="text"
-                      isRequired
-                      className="tag-input-field"
-                      value={customValues[tag.fullPath] || ''}
-                      onChange={(e) => handleCustomValueChange(tag.fullPath, e.target.value)}
-                      placeholder={formatMessage(messages.enterValue)}
-                      size="small"
-                    />
-                  </CapRow>
+              ) : null}
+              <CapRow className="values-table">
+                <CapRow className="table-header">
+                  <CapLabel type="label31" className="header-cell">
+                    <FormattedMessage {...messages.personalizationTags} />
+                  </CapLabel>
+                  <CapLabel type="label31" className="header-cell">
+                    <FormattedMessage {...messages.customValues} />
+                  </CapLabel>
                 </CapRow>
-              ))}
-              {optionalTags?.map((tag) => (
-                <CapRow key={tag.fullPath} className="value-row">
-                  <CapRow className="tag-name">{tag.fullPath}</CapRow>
-                  <CapRow className="tag-input">
-                    <CapInput
-                      type="text"
-                      className="tag-input-field"
-                      value={customValues[tag.fullPath] || ''}
-                      onChange={(e) => handleCustomValueChange(tag.fullPath, e.target.value)}
-                      placeholder={formatMessage(messages.enterValue)}
-                      size="small"
-                    />
+                {(section?.requiredTags || []).map((tag, tagIndex) => {
+                  const personalizationTagColumnText = getPersonalizationTagColumnLabel(tag);
+                  return (
+                  <CapRow key={tag?.fullPath ?? `required-${tagIndex}`} className="value-row">
+                    <CapRow className="tag-name">
+                      {personalizationTagColumnText}
+                      <span className="required-tag-indicator">*</span>
+                    </CapRow>
+                    <CapRow className="tag-input">
+                      <CapInput
+                        type="text"
+                        isRequired
+                        className="tag-input-field"
+                        value={customValues?.[tag?.fullPath] ?? ''}
+                        onChange={(e) => handleCustomValueChange(tag?.fullPath, e.target.value)}
+                        placeholder={formatMessage(messages.enterValue)}
+                        size="small"
+                      />
+                    </CapRow>
                   </CapRow>
-                </CapRow>
-              ))}
-            </CapRow>
-          )}
+                  );
+                })}
+                {(section?.optionalTags || []).map((tag, tagIndex) => {
+                  const personalizationTagColumnText = getPersonalizationTagColumnLabel(tag);
+                  return (
+                  <CapRow key={tag?.fullPath ?? `optional-${tagIndex}`} className="value-row">
+                    <CapRow className="tag-name">
+                      {personalizationTagColumnText}
+                    </CapRow>
+                    <CapRow className="tag-input">
+                      <CapInput
+                        type="text"
+                        className="tag-input-field"
+                        value={customValues?.[tag?.fullPath] ?? ''}
+                        onChange={(e) => handleCustomValueChange(tag?.fullPath, e.target.value)}
+                        placeholder={formatMessage(messages.enterValue)}
+                        size="small"
+                      />
+                    </CapRow>
+                  </CapRow>
+                  );
+                })}
+              </CapRow>
+            </React.Fragment>
+          ))}
         </>
       )}
       <CapRow className="editor-actions">
@@ -156,9 +174,12 @@ CustomValuesEditor.propTypes = {
   setShowJSON: PropTypes.func.isRequired,
   customValues: PropTypes.object.isRequired,
   handleJSONTextChange: PropTypes.func.isRequired,
-  extractedTags: PropTypes.array.isRequired,
-  requiredTags: PropTypes.array.isRequired,
-  optionalTags: PropTypes.array.isRequired,
+  sections: PropTypes.arrayOf(PropTypes.shape({
+    key: PropTypes.string,
+    title: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+    requiredTags: PropTypes.array,
+    optionalTags: PropTypes.array,
+  })).isRequired,
   handleCustomValueChange: PropTypes.func.isRequired,
   handleDiscardCustomValues: PropTypes.func.isRequired,
   handleUpdatePreview: PropTypes.func.isRequired,

package/app/v2Components/CommonTestAndPreview/DeliverySettings/DeliverySettings.scss

@@ -0,0 +1,39 @@
+/**
+ * DeliverySettings — summary row + edit icon for Test and Preview (SMS, Email, WhatsApp).
+ */
+@import '~@capillarytech/cap-ui-library/styles/_variables.scss';
+
+.delivery-settings {
+  &__heading-row {
+    margin-bottom: $CAP_SPACE_08;
+  }
+
+  &__summary-row {
+    margin-bottom: $CAP_SPACE_04;
+  }
+
+  &__summary-inner {
+    align-items: center;
+    margin-bottom: $CAP_SPACE_08;
+  }
+
+  &__summary-entry {
+    display: flex;
+    align-items: baseline;
+    gap: 0;
+    margin-right: $CAP_SPACE_18;
+  }
+
+  &__summary-key,
+  &__summary-value {
+    line-height: 1.4;
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+
+  &__edit-icon {
+    cursor: pointer;
+    position: absolute;
+    right: 0;
+  }
+}