@capillarytech/creatives-library 8.0.242-alpha.12 → 8.0.242-alpha.14

package/package.json

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

package/v2Components/CapImageUrlUpload/index.js

@@ -142,7 +142,7 @@ function CapImageUrlUpload(props) {
         
         img.src = objectUrl;
       });
-    } catch (error) {
+    } catch (err) {
       setIsValidating(false);
       return {
         isValid: false,

package/v2Components/CapImageUrlUpload/messages.js

@@ -37,7 +37,7 @@ export default defineMessages({
   },
   sizeLimit: {
     id: `${scope}.sizeLimit`,
-    defaultMessage: 'Size upto: {size}',
+    defaultMessage: 'Size up to: {size}',
   },
   formatTypes: {
     id: `${scope}.formatTypes`,

package/v2Containers/Templates/messages.js

@@ -348,7 +348,7 @@ export default defineMessages({
   },
   "newWebPushTemplate": {
     id: `${scope}.newWebPushTemplate`,
-    defaultMessage: 'Add new Web push {template}',
+    defaultMessage: 'Add new Web Push {template}',
   },
   "newInAppMessageTemplate": {
     id: `${scope}.newInAppMessageTemplate`,
@@ -388,7 +388,7 @@ export default defineMessages({
   },
   "webPushTitleIllustration": {
     id: `${scope}.webPushTitleIllustration`,
-    defaultMessage: 'Add a new Web push creative {template}',
+    defaultMessage: 'Add a new Web Push creative {template}',
   },
   "webPushDescIllustration": {
     id: `${scope}.webPushDescIllustration`,
@@ -480,7 +480,7 @@ export default defineMessages({
   },
   "webpushAccount": {
     id: `${scope}.webpushAccount`,
-    defaultMessage: 'Web push account',
+    defaultMessage: 'Web Push account',
   },
   "rcsAccount": {
     id: `${scope}.rcsAccount`,
@@ -520,7 +520,7 @@ export default defineMessages({
   },
   "noAccountsPresentWebpush": {
     id: `${scope}.noAccountsPresentWebpush`,
-    defaultMessage: "Web push accounts are not setup for your brand",
+    defaultMessage: "Web Push accounts are not setup for your brand",
   },
   "noAccountsPresentRcs": {
     id: `${scope}.noAccountsPresentRcs`,

package/v2Containers/Templates/reducer.js

@@ -125,7 +125,9 @@ function templatesReducer(state = initialState, action) {
         .set('selectedFacebookAccount', fromJS(action.faceBookAccount))
         .set('templates', []);
     case types.SET_WEBPUSH_ACCOUNT:
-      return state.set('selectedWebPushAccount', fromJS(action.account));
+      return state
+        .set('selectedWebPushAccount', fromJS(action.account))
+        .set('templates', []);
     case types.RESET_ACCOUNT:
       return state
         .remove('selectedWeChatAccount')

package/v2Containers/WebPush/Create/components/ButtonItem.js

@@ -18,7 +18,7 @@ const ButtonItem = ({
   const handleDragStart = (e) => {
     if (disabled) return;
     e.dataTransfer.effectAllowed = 'move';
-    e.dataTransfer.setData('text/html', e.currentTarget);
+    e.dataTransfer.setData('text/plain', String(index));
     onDragStart(index);
   };
 

package/v2Containers/WebPush/Create/components/ButtonList.js

@@ -1,20 +1,12 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { FormattedMessage } from 'react-intl';
-import CapRow from '@capillarytech/cap-ui-library/CapRow';
-import CapButton from '@capillarytech/cap-ui-library/CapButton';
 import ButtonItem from './ButtonItem';
-import messages from '../messages';
 
 const ButtonList = ({
   buttons,
   onEdit,
   onDelete,
   onReorder,
-  onAddPrimary,
-  onAddSecondary,
-  showAddPrimary,
-  showAddSecondary,
   disabled,
   disableSecondaryButton,
   isInlineFormVisible,
@@ -82,32 +74,6 @@ const ButtonList = ({
           />
         );
       })}
-      {showAddPrimary && (
-        <CapRow className="button-list-add-button">
-          <CapButton
-            type="flat"
-            onClick={onAddPrimary}
-            className="add-primary-button button-add-trigger"
-            icon="plus"
-            disabled={disabled}
-          >
-            <FormattedMessage {...messages.addPrimaryButton} />
-          </CapButton>
-        </CapRow>
-      )}
-      {showAddSecondary && (
-        <CapRow className="button-list-add-button">
-          <CapButton
-            type="flat"
-            onClick={onAddSecondary}
-            className="add-secondary-button button-add-trigger"
-            icon="plus"
-            disabled={disableSecondaryButton || disabled}
-          >
-            <FormattedMessage {...messages.addSecondaryButton} />
-          </CapButton>
-        </CapRow>
-      )}
     </div>
   );
 };
@@ -122,10 +88,6 @@ ButtonList.propTypes = {
   onEdit: PropTypes.func.isRequired,
   onDelete: PropTypes.func.isRequired,
   onReorder: PropTypes.func.isRequired,
-  onAddPrimary: PropTypes.func.isRequired,
-  onAddSecondary: PropTypes.func.isRequired,
-  showAddPrimary: PropTypes.bool.isRequired,
-  showAddSecondary: PropTypes.bool.isRequired,
   disabled: PropTypes.bool,
   disableSecondaryButton: PropTypes.bool,
   isInlineFormVisible: PropTypes.bool,

package/v2Containers/WebPush/Create/components/ButtonsLinksSection.js

@@ -94,10 +94,6 @@ export const ButtonsLinksSection = ({
           onEdit={handleButtonEdit}
           onDelete={handleButtonDelete}
           onReorder={handleButtonReorder}
-          onAddPrimary={handleAddPrimaryButton}
-          onAddSecondary={handleAddSecondaryButton}
-          showAddPrimary={false}
-          showAddSecondary={false}
           disabled={isAddFlow}
           disableSecondaryButton={disableSecondaryAddButton}
           isInlineFormVisible={isEditFlow}

package/v2Containers/WebPush/Create/components/ButtonsLinksSection.test.js

@@ -355,14 +355,27 @@ describe('ButtonsLinksSection', () => {
     });
 
     it('should render disabled secondary button when showDisabledSecondaryDuringPrimary is true', () => {
+      const handleAddPrimaryButton = jest.fn();
+      const handleAddSecondaryButton = jest.fn();
       const buttonState = createMockButtonState({
         showDisabledSecondaryDuringPrimary: true,
+        handleAddPrimaryButton,
+        handleAddSecondaryButton,
       });
       const wrapper = mountWithIntl(
         <ButtonsLinksSection {...defaultProps} buttonState={buttonState} />
       );
-      const addButton = wrapper.find(CapButton).find('.add-secondary-button');
+      const addButton = wrapper.find(CapButton).filterWhere(btn => btn.hasClass('add-secondary-button')).first();
       expect(addButton.exists()).toBe(true);
+      expect(addButton.prop('disabled')).toBe(true);
+      
+      // Simulate click on the disabled button
+      addButton.simulate('click');
+      wrapper.update();
+      
+      // Verify the callbacks are not called when disabled
+      expect(handleAddPrimaryButton).not.toHaveBeenCalled();
+      expect(handleAddSecondaryButton).not.toHaveBeenCalled();
     });
 
     it('should call handleAddPrimaryButton when add primary button is clicked', () => {

package/v2Containers/WebPush/Create/components/MediaSection.js

@@ -59,7 +59,7 @@ export const MediaSection = ({
           options={WEBPUSH_MEDIA_TYPES_OPTIONS}
           value={mediaType}
           onChange={onMediaTypeChange}
-          disabled={isAnyUploadActive}
+          disabled={isAnyUploadActive || isLocked}
         />
       </CapRow>
       {mediaType === WEBPUSH_MEDIA_TYPES.IMAGE && (
@@ -85,6 +85,7 @@ export const MediaSection = ({
                 channel={WEBPUSH}
                 showReUploadButton
                 recommendedDimensions={WEBPUSH_RECOMMENDED_DIMENSIONS}
+                disabled={isLocked}
               />
             </CapRow>
           )}

package/v2Containers/WebPush/Create/components/__snapshots__/ButtonsLinksSection.test.js.snap

@@ -72,14 +72,10 @@ exports[`ButtonsLinksSection Rendering should render correctly with default prop
       disabled={false}
       inlineFormIndex={null}
       isInlineFormVisible={false}
-      onAddPrimary={[MockFunction]}
-      onAddSecondary={[MockFunction]}
       onDelete={[MockFunction]}
       onEdit={[MockFunction]}
       onReorder={[MockFunction]}
       renderInlineForm={null}
-      showAddPrimary={false}
-      showAddSecondary={false}
     />
   </CapRow>
 </Fragment>

package/v2Containers/WebPush/Create/components/tests/ButtonItem.test.js

@@ -213,7 +213,7 @@ describe('ButtonItem', () => {
       
       container.simulate('dragStart', mockEvent);
       
-      expect(mockEvent.dataTransfer.setData).toHaveBeenCalledWith('text/html', mockEvent.currentTarget);
+      expect(mockEvent.dataTransfer.setData).toHaveBeenCalledWith('text/plain', '0');
     });
 
     it('should not call onDragStart when disabled is true', () => {

package/v2Containers/WebPush/Create/components/tests/ButtonList.test.js

@@ -1,9 +1,8 @@
-import React, { act } from 'react';
+import React from 'react';
+import { act } from 'react-dom/test-utils';
 import { mountWithIntl, shallowWithIntl } from '../../../../../helpers/intl-enzym-test-helpers';
-import CapButton from '@capillarytech/cap-ui-library/CapButton';
 import ButtonList from '../ButtonList';
 import ButtonItem from '../ButtonItem';
-import messages from '../../messages';
 
 // Mock ButtonItem component
 jest.mock('../ButtonItem', () => {
@@ -75,13 +74,11 @@ describe('ButtonList', () => {
   const mockOnEdit = jest.fn();
   const mockOnDelete = jest.fn();
   const mockOnReorder = jest.fn();
-  const mockOnAddPrimary = jest.fn();
-  const mockOnAddSecondary = jest.fn();
   const mockRenderInlineForm = jest.fn(() => <div className="inline-form">Inline Form</div>);
 
   const mockButtons = [
-    { text: 'Primary Button', url: 'https://example.com', type: 'primary' },
-    { text: 'Secondary Button', url: 'https://example2.com', type: 'secondary' },
+    { id: 'btn-1', text: 'Primary Button', url: 'https://example.com', type: 'primary' },
+    { id: 'btn-2', text: 'Secondary Button', url: 'https://example2.com', type: 'secondary' },
   ];
 
   const defaultProps = {
@@ -89,10 +86,6 @@ describe('ButtonList', () => {
     onEdit: mockOnEdit,
     onDelete: mockOnDelete,
     onReorder: mockOnReorder,
-    onAddPrimary: mockOnAddPrimary,
-    onAddSecondary: mockOnAddSecondary,
-    showAddPrimary: true,
-    showAddSecondary: true,
     disabled: false,
     disableSecondaryButton: false,
     isInlineFormVisible: false,
@@ -135,133 +128,6 @@ describe('ButtonList', () => {
     });
   });
 
-  describe('Add Primary Button', () => {
-    it('should render add primary button when showAddPrimary is true', () => {
-      const wrapper = mountWithIntl(<ButtonList {...defaultProps} showAddPrimary={true} />);
-      const addPrimaryButton = wrapper.find(CapButton).findWhere(
-        (node) => node.prop('className') === 'add-primary-button button-add-trigger'
-      );
-      
-      expect(addPrimaryButton.exists()).toBe(true);
-    });
-
-    it('should not render add primary button when showAddPrimary is false', () => {
-      const wrapper = mountWithIntl(<ButtonList {...defaultProps} showAddPrimary={false} />);
-      const addPrimaryButton = wrapper.find(CapButton).findWhere(
-        (node) => node.prop('className') === 'add-primary-button button-add-trigger'
-      );
-      
-      expect(addPrimaryButton.exists()).toBe(false);
-    });
-
-    it('should call onAddPrimary when add primary button is clicked', () => {
-      const wrapper = mountWithIntl(<ButtonList {...defaultProps} showAddPrimary={true} />);
-      const addPrimaryButton = wrapper.find(CapButton).findWhere(
-        (node) => node.prop('className') === 'add-primary-button button-add-trigger'
-      ).first();
-      
-      addPrimaryButton.prop('onClick')();
-      
-      expect(mockOnAddPrimary).toHaveBeenCalledTimes(1);
-    });
-
-    it('should disable add primary button when disabled prop is true', () => {
-      const wrapper = mountWithIntl(
-        <ButtonList {...defaultProps} showAddPrimary={true} disabled={true} />
-      );
-      const addPrimaryButton = wrapper.find(CapButton).findWhere(
-        (node) => node.prop('className') === 'add-primary-button button-add-trigger'
-      ).first();
-      
-      expect(addPrimaryButton.prop('disabled')).toBe(true);
-    });
-
-    it('should not call onAddPrimary when button is disabled and clicked', () => {
-      const wrapper = mountWithIntl(
-        <ButtonList {...defaultProps} showAddPrimary={true} disabled={true} />
-      );
-      const addPrimaryButton = wrapper.find(CapButton).findWhere(
-        (node) => node.prop('className') === 'add-primary-button button-add-trigger'
-      ).first();
-      
-      // Even if we try to call onClick, it should be disabled
-      expect(addPrimaryButton.prop('disabled')).toBe(true);
-    });
-  });
-
-  describe('Add Secondary Button', () => {
-    it('should render add secondary button when showAddSecondary is true', () => {
-      const wrapper = mountWithIntl(<ButtonList {...defaultProps} showAddSecondary={true} />);
-      const addSecondaryButton = wrapper.find(CapButton).findWhere(
-        (node) => node.prop('className') === 'add-secondary-button button-add-trigger'
-      );
-      
-      expect(addSecondaryButton.exists()).toBe(true);
-    });
-
-    it('should not render add secondary button when showAddSecondary is false', () => {
-      const wrapper = mountWithIntl(<ButtonList {...defaultProps} showAddSecondary={false} />);
-      const addSecondaryButton = wrapper.find(CapButton).findWhere(
-        (node) => node.prop('className') === 'add-secondary-button button-add-trigger'
-      );
-      
-      expect(addSecondaryButton.exists()).toBe(false);
-    });
-
-    it('should call onAddSecondary when add secondary button is clicked', () => {
-      const wrapper = mountWithIntl(<ButtonList {...defaultProps} showAddSecondary={true} />);
-      const addSecondaryButton = wrapper.find(CapButton).findWhere(
-        (node) => node.prop('className') === 'add-secondary-button button-add-trigger'
-      ).first();
-      
-      addSecondaryButton.prop('onClick')();
-      
-      expect(mockOnAddSecondary).toHaveBeenCalledTimes(1);
-    });
-
-    it('should disable add secondary button when disabled prop is true', () => {
-      const wrapper = mountWithIntl(
-        <ButtonList {...defaultProps} showAddSecondary={true} disabled={true} />
-      );
-      const addSecondaryButton = wrapper.find(CapButton).findWhere(
-        (node) => node.prop('className') === 'add-secondary-button button-add-trigger'
-      ).first();
-      
-      expect(addSecondaryButton.prop('disabled')).toBe(true);
-    });
-
-    it('should disable add secondary button when disableSecondaryButton prop is true', () => {
-      const wrapper = mountWithIntl(
-        <ButtonList
-          {...defaultProps}
-          showAddSecondary={true}
-          disableSecondaryButton={true}
-        />
-      );
-      const addSecondaryButton = wrapper.find(CapButton).findWhere(
-        (node) => node.prop('className') === 'add-secondary-button button-add-trigger'
-      ).first();
-      
-      expect(addSecondaryButton.prop('disabled')).toBe(true);
-    });
-
-    it('should disable add secondary button when both disabled and disableSecondaryButton are true', () => {
-      const wrapper = mountWithIntl(
-        <ButtonList
-          {...defaultProps}
-          showAddSecondary={true}
-          disabled={true}
-          disableSecondaryButton={true}
-        />
-      );
-      const addSecondaryButton = wrapper.find(CapButton).findWhere(
-        (node) => node.prop('className') === 'add-secondary-button button-add-trigger'
-      ).first();
-      
-      expect(addSecondaryButton.prop('disabled')).toBe(true);
-    });
-  });
-
   describe('Edit Button', () => {
     it('should call onEdit with correct index when edit is clicked on primary button', () => {
       const wrapper = mountWithIntl(<ButtonList {...defaultProps} />);
@@ -291,6 +157,14 @@ describe('ButtonList', () => {
       
       // ButtonItem should be disabled, so onEdit should not be called
       expect(firstButtonItem.prop('disabled')).toBe(true);
+      
+      // Simulate click on the edit button - the onClick handler checks disabled state
+      const editButton = wrapper.find('.edit-button').first();
+      editButton.simulate('click');
+      wrapper.update();
+      
+      // Verify the callback is not called when disabled
+      expect(mockOnEdit).not.toHaveBeenCalled();
     });
   });
 
@@ -313,6 +187,14 @@ describe('ButtonList', () => {
       
       // ButtonItem should be disabled, so onDelete should not be called
       expect(firstButtonItem.prop('disabled')).toBe(true);
+      
+      // Simulate click on the delete button - the onClick handler checks disabled state
+      const deleteButton = wrapper.find('.delete-button').first();
+      deleteButton.simulate('click');
+      wrapper.update();
+      
+      // Verify the callback is not called when disabled
+      expect(mockOnDelete).not.toHaveBeenCalled();
     });
   });
 
@@ -606,8 +488,8 @@ describe('ButtonList', () => {
   describe('Button Item Props', () => {
     it('should pass correct button data to ButtonItem', () => {
       const customButtons = [
-        { text: 'Custom Primary', url: 'https://custom1.com', type: 'primary' },
-        { text: 'Custom Secondary', url: 'https://custom2.com', type: 'secondary' },
+        { id: 'btn-3', text: 'Custom Primary', url: 'https://custom1.com', type: 'primary' },
+        { id: 'btn-4', text: 'Custom Secondary', url: 'https://custom2.com', type: 'secondary' },
       ];
       const wrapper = mountWithIntl(
         <ButtonList {...defaultProps} buttons={customButtons} />

package/v2Containers/WebPush/Create/components/tests/__snapshots__/ButtonList.test.js.snap

@@ -7,6 +7,7 @@ exports[`ButtonList Rendering should render correctly with default props 1`] = `
   <MockButtonItem
     button={
       Object {
+        "id": "btn-1",
         "text": "Primary Button",
         "type": "primary",
         "url": "https://example.com",
@@ -14,6 +15,7 @@ exports[`ButtonList Rendering should render correctly with default props 1`] = `
     }
     disabled={false}
     index={0}
+    key="btn-1"
     onDelete={[MockFunction]}
     onDragEnd={[Function]}
     onDragOver={[Function]}
@@ -24,6 +26,7 @@ exports[`ButtonList Rendering should render correctly with default props 1`] = `
   <MockButtonItem
     button={
       Object {
+        "id": "btn-2",
         "text": "Secondary Button",
         "type": "secondary",
         "url": "https://example2.com",
@@ -31,6 +34,7 @@ exports[`ButtonList Rendering should render correctly with default props 1`] = `
     }
     disabled={false}
     index={1}
+    key="btn-2"
     onDelete={[MockFunction]}
     onDragEnd={[Function]}
     onDragOver={[Function]}
@@ -38,41 +42,5 @@ exports[`ButtonList Rendering should render correctly with default props 1`] = `
     onDrop={[Function]}
     onEdit={[MockFunction]}
   />
-  <CapRow
-    className="button-list-add-button"
-  >
-    <CapButton
-      className="add-primary-button button-add-trigger"
-      disabled={false}
-      icon="plus"
-      isAddBtn={false}
-      onClick={[MockFunction]}
-      type="flat"
-    >
-      <FormattedMessage
-        defaultMessage="Add primary button"
-        id="creatives.containersV2.WebPush.addPrimaryButton"
-        values={Object {}}
-      />
-    </CapButton>
-  </CapRow>
-  <CapRow
-    className="button-list-add-button"
-  >
-    <CapButton
-      className="add-secondary-button button-add-trigger"
-      disabled={false}
-      icon="plus"
-      isAddBtn={false}
-      onClick={[MockFunction]}
-      type="flat"
-    >
-      <FormattedMessage
-        defaultMessage="Add secondary button"
-        id="creatives.containersV2.WebPush.addSecondaryButton"
-        values={Object {}}
-      />
-    </CapButton>
-  </CapRow>
 </div>
 `;

package/v2Containers/WebPush/Create/hooks/useButtonManagement.js

@@ -58,6 +58,18 @@ export const useButtonManagement = (initialButtons = []) => {
 
   const handleButtonEdit = useCallback(
     (index) => {
+      if (
+        typeof index !== 'number' ||
+        !Number.isInteger(index) ||
+        index < 0 ||
+        index >= buttons.length
+      ) {
+        console.warn(
+          'handleButtonEdit: Invalid index provided',
+          { index, buttonsLength: buttons.length, indexType: typeof index },
+        );
+        return;
+      }
       setIsAddingButton(true);
       setButtonBeingAdded(buttons[index].type);
       setEditingButtonIndex(index);

package/v2Containers/WebPush/Create/preview/components/AndroidMobileChromeHeader.js

@@ -22,7 +22,7 @@ const AndroidMobileChromeHeader = ({
       <div className="notification-body">{notificationBody}</div>
     </div>
     <div className="notification-right-rail">
-      {shouldShowBrandIcon && (
+      {shouldShowBrandIcon && brandIcon && (
         <div className="notification-brand-icon-container android-mobile-chrome-brand-icon">
           <img src={brandIcon} alt="Brand icon" className="notification-brand-icon" />
         </div>