@capillarytech/creatives-library 9.0.11-beta.1 → 9.0.12

package/package.json

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

package/v2Containers/CreativesContainer/SlideBoxHeader.js

@@ -16,6 +16,7 @@ import { isTraiDLTEnable } from '../../utils/common';
 import { formatString } from '../../utils/Formatter';
 import {
   CAP_SPACE_12,
+  ICON_SIZE_M,
 } from '@capillarytech/cap-ui-library/styled/variables';
 import { WHATSAPP_HELP_DOC_LINK, JOURNEY } from './constants';
 
@@ -23,8 +24,14 @@ const { CapLabelInline } = CapLabel;
 const StyledLabel = styled(CapLabelInline)`
   margin-right: ${CAP_SPACE_12};
 `;
+// CapIcons.BackIcon renders an <svg width="1em" height="1em">, so its size follows
+// the inherited font-size. Pin it to the medium icon size (24px) and center it so
+// the back arrow matches the header title instead of collapsing to a tiny glyph.
 const PrefixWrapper = styled.div`
   margin-right: 16px;
+  display: inline-flex;
+  align-items: center;
+  font-size: ${ICON_SIZE_M};
 `;
 const renderData = (type, value, channel) => (
   <StyledLabel className={channel?.toLowerCase() === ZALO ? 'zalo-template-name-spacing' : ''} type={type}>

package/v2Containers/Ebill/index.js

@@ -39,6 +39,7 @@ export class Ebill extends React.Component { // eslint-disable-line react/prefer
       currentTab: 1,
       isEdit: false,
       loading: false,
+      isSaving: false,
       isFormValid: true,
       injectedTags: {},
       checkValidation: false,
@@ -570,26 +571,33 @@ export class Ebill extends React.Component { // eslint-disable-line react/prefer
       },
     };
     this.isTagLoaded = false;
+    this.isSubmitting = false;
   }
 
   componentWillMount() {
+    // NOTE: API dispatches must NOT live here. componentWillMount runs in React's
+    // render phase, which React 18 (createRoot/concurrent) may execute more than
+    // once per commit — causing every dispatched request to fire twice. All
+    // side-effects are in componentDidMount (commit phase, runs exactly once).
     if (this.props.params.id) {
-      this.props.actions.getTemplateDetails(this.props.params.id, 'ebill');
       this.setState({isEdit: true});
     }
+  }
+
+  componentDidMount() {
+    if (this.props.params.id) {
+      this.props.actions.getTemplateDetails(this.props.params.id, 'ebill');
+    }
 
     if (!_.isEmpty(this.props.Templates.edmTemplate) && this.props.Templates.edmTemplate.versions.base.is_drag_drop) {
       this.props.actions.getCmsData('edm', this.props.Templates.edmTemplate.versions.base.drag_drop_id);
     }
-  }
 
-  componentDidMount() {
     const query = {
       layout: 'EBILL',
       type: 'LAYOUT',
     };
     this.props.globalActions.fetchSchemaForEntity(query);
-    
   }
 
   componentWillReceiveProps(nextProps) {
@@ -609,7 +617,7 @@ export class Ebill extends React.Component { // eslint-disable-line react/prefer
       this.setEditState(nextProps.Ebill.templateDetails);
     }
 
-    if (nextProps.Ebill.createResponse && nextProps.Ebill.createResponse.templateId) {
+    if (nextProps.Ebill.createResponse && nextProps.Ebill.createResponse.templateId && !_.isEqual(nextProps.Ebill.createResponse, this.props.Ebill.createResponse)) {
       let message;
       if (this.state.isEdit) {
         message = getMessageObject('success', this.props.intl.formatMessage(messages.ebillEditSuccess), true);
@@ -618,6 +626,8 @@ export class Ebill extends React.Component { // eslint-disable-line react/prefer
       }
       this.props.globalActions.addMessageToQueue(message);
       this.props.actions.clearCRUDResponse();
+      this.isSubmitting = false;
+      this.setState({ isSaving: false });
       const module = this.props.location.query.module ? this.props.location.query.module : 'default';
       const type = this.props.location.query.type;
       this.props.router.push({
@@ -629,6 +639,8 @@ export class Ebill extends React.Component { // eslint-disable-line react/prefer
     if (nextProps.Ebill.createTemplateError && !_.isEqual(nextProps.Ebill.createTemplateError, this.props.Ebill.createTemplateError)) {
       const message = getMessageObject('error', (nextProps.Ebill.createTemplateErrorMessage && nextProps.Ebill.createTemplateErrorMessage !== '') ? nextProps.Ebill.createTemplateErrorMessage : this.props.intl.formatMessage(messages.somethingWentWrong), true);
       this.props.globalActions.addMessageToQueue(message);
+      this.isSubmitting = false;
+      this.setState({ isSaving: false });
     }
 
     
@@ -773,11 +785,23 @@ export class Ebill extends React.Component { // eslint-disable-line react/prefer
   saveFormData = (formData) => {
     //Logic to save in db etc
     // const isValidated = this.validateFormData(formData);
-    // 
+    //
     // if (!isValidated) {
     //   return;
     // }
-    
+
+    // Guard against duplicate submissions. Uses a synchronous instance flag
+    // (NOT React state) because setState is async — two onSubmit invocations in
+    // the same tick would both read a stale `false` and each dispatch a
+    // createTemplate, firing POST /templates/EBILL twice. The instance flag
+    // flips synchronously, so the second call is dropped immediately.
+    // Reset once the create/update response or error is received in componentWillReceiveProps.
+    if (this.isSubmitting) {
+      return;
+    }
+    this.isSubmitting = true;
+    this.setState({ isSaving: true });
+
     const obj = {};
     obj.versions = {
       base: {},

package/v2Containers/MobilePushNew/components/MediaUploaders.js

@@ -378,8 +378,8 @@ const MediaUploaders = ({
       })));
     };
 
-    const onTabChange = (index) => {
-      setCarouselActiveTabIndex(index);
+    const onTabChange = (key) => {
+      setCarouselActiveTabIndex(Number(key));
     };
 
     const addCarouselCard = () => {
@@ -765,7 +765,7 @@ const MediaUploaders = ({
     const getTabPanes = () => {
       const currentData = getCurrentCarouselData();
       return currentData?.map((data, index) => ({
-        key: index,
+        key: String(index),
         tab: index + 1,
         content: (
           <CapCard

package/v2Containers/MobilePushNew/components/tests/MediaUploaders.test.js

@@ -2146,8 +2146,7 @@ describe('MediaUploaders', () => {
       const secondTabButton = screen.getByText('Tab 2');
       fireEvent.click(secondTabButton);
 
-      // Should call setCarouselActiveTabIndex with correct index
-      expect(setCarouselActiveTabIndex).toHaveBeenCalledWith('1');
+      expect(setCarouselActiveTabIndex).toHaveBeenCalledWith(1);
     });
 
     it('should handle carousel card add operation', () => {

package/v2Containers/Templates/index.js

@@ -646,7 +646,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     }
 
 
-    if (selectedChannel === "ebill" && nextProps.CreateEbill && nextProps.CreateEbill.createResponse && nextProps.CreateEbill.createResponse.templateId && nextProps.CreateEbill.createResponse.templateId !== '') {
+    if (selectedChannel === "ebill" && nextProps.CreateEbill && nextProps.CreateEbill.createResponse && nextProps.CreateEbill.createResponse.templateId && nextProps.CreateEbill.createResponse.templateId !== '' && !isEqual(nextProps.CreateEbill.createResponse, this.props.CreateEbill && this.props.CreateEbill.createResponse)) {
       const message = `${this.state.channel} ${this.props.intl.formatMessage(messages.templateDuplicateSuccess)}`;
       CapNotification.success({key: 'duplicateSucess', message});
       this.getAllTemplates({params, resetPage: true});