@capillarytech/creatives-library 8.0.283 → 8.0.284

package/package.json

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

package/v2Components/CapWhatsappCarouselButton/index.js

@@ -55,19 +55,26 @@ export const CapWhatsappCarouselButton = (props) => {
   const invalidVarRegex = /{{(.*?)}}/g;
 
   const handleButtonType = ({ target: { value } }, buttonIndex) => {
-    const cloneCarouselData = cloneDeep(carouselData);
     const dataMap = {
       [PHONE_NUMBER]: INITIAL_CAROUSEL_PHONE_NUMBER_DATA,
       [URL]: INITIAL_CAROUSEL_URL_DATA,
       [QUICK_REPLY]: INITIAL_CAROUSEL_QUICK_REPLY_DATA,
     };
+    const initialData = dataMap[value];
+    const newButtonData = initialData ? cloneDeep(initialData) : {};
 
-    const updatedCarouselData = cloneCarouselData.map((carousel) => {
-      carousel.buttons[buttonIndex] = dataMap[value] || {};
-      return carousel;
-    });
-
-    setCarouselData(updatedCarouselData);
+    setCarouselData(
+      carouselData.map((item, index) =>
+        index === carouselIndex
+          ? {
+              ...item,
+              buttons: item.buttons.map((btn, i) =>
+                i === buttonIndex ? newButtonData : btn
+              ),
+            }
+          : item
+      )
+    );
   };
 
   const onValueChange = (buttonIndex, fields = []) => {
@@ -148,17 +155,28 @@ export const CapWhatsappCarouselButton = (props) => {
   };
 
   const handleDeleteButton = (buttonIndex) => {
-    setCarouselData((prevData) => prevData.map((carousel) => ({
-      ...carousel,
-      buttons: carousel.buttons.filter((_, index) => index !== buttonIndex),
-    })));
+    setCarouselData((prevData) =>
+      prevData.map((carousel, index) =>
+        index === carouselIndex
+          ? {
+              ...carousel,
+              buttons: carousel.buttons.filter((_, i) => i !== buttonIndex),
+            }
+          : carousel
+      )
+    );
   };
 
   const addCarouselButton = () => {
     setCarouselData(
-      carouselData.map((item, index) => index === carouselIndex
-        ? { ...item, buttons: [...buttonData, INITIAL_CAROUSEL_PHONE_NUMBER_DATA] }
-        : item)
+      carouselData.map((item, index) =>
+        index === carouselIndex
+          ? {
+              ...item,
+              buttons: [...buttonData, cloneDeep(INITIAL_CAROUSEL_PHONE_NUMBER_DATA)],
+            }
+          : item
+      )
     );
   };
 

package/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/v2Containers/Whatsapp/index.js

@@ -2055,11 +2055,11 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
     const buttonArray = firstCarouselButtonData.map((button) => {
       switch (button?.buttonType) {
         case PHONE_NUMBER:
-          return INITIAL_CAROUSEL_PHONE_NUMBER_DATA;
+          return cloneDeep(INITIAL_CAROUSEL_PHONE_NUMBER_DATA);
         case QUICK_REPLY:
-          return INITIAL_CAROUSEL_QUICK_REPLY_DATA;
+          return cloneDeep(INITIAL_CAROUSEL_QUICK_REPLY_DATA);
         default:
-          return INITIAL_CAROUSEL_URL_DATA;
+          return cloneDeep(INITIAL_CAROUSEL_URL_DATA);
       }
     });
     const newCard = cloneDeep(CAROUSEL_INITIAL_DATA[0]);