@capillarytech/creatives-library 9.0.69 → 9.0.70-alpha.sprint-cap-modalintact.12

package/v2Containers/InappAdvance/index.js

@@ -1,6 +1,7 @@
 import React, { useState, useEffect, useRef } from "react";
 import isEmpty from 'lodash/isEmpty';
 import get from 'lodash/get';
+import isPlainObject from 'lodash/isPlainObject';
 import { bindActionCreators } from "redux";
 import { createStructuredSelector } from "reselect";
 import { injectIntl, FormattedMessage } from "react-intl";
@@ -62,7 +63,6 @@ export const InappAdvanced = (props) => {
     intl,
     actions,
     isFullMode,
-    onCreateComplete,
     params,
     templateData = {},
     editData = {},
@@ -102,6 +102,9 @@ export const InappAdvanced = (props) => {
   const [tags, updateTags] = useState([]);
   //for edit only
   const [isEditFlow, setEditFlow] = useState(false);
+  // Full mode: id of the template created in this session — the form stays as is and later saves update it
+  const [savedTemplateId, setSavedTemplateId] = useState('');
+  const isUpdate = isEditFlow || !!savedTemplateId;
   const [errorMessage, setErrorMessage] = useState({
     STANDARD_ERROR_MSG: {
       ANDROID: [],
@@ -545,7 +548,7 @@ export const InappAdvanced = (props) => {
   const actionCallback = ({ errorMessage: errorMsg }) => {
     if (!errorMsg) {
       CapNotification.success({
-        message: isEditFlow ? formatMessage(messages.inAppEditNotification, {
+        message: isUpdate ? formatMessage(messages.inAppEditNotification, {
           name: templateName,
         }) : formatMessage(messages.inAppCreateNotification, {
           name: templateName,
@@ -648,10 +651,15 @@ export const InappAdvanced = (props) => {
     const payload = createPayload(latestHtmlValues);
     actions.createInAppTemplate(payload, (resp, errorMsg) => {
       actionCallback({ resp, errorMessage: errorMsg });
+      setSpin(false);
       if (!errorMsg) {
-        onCreateComplete();
-      } else {
-        setSpin(false);
+        // Full mode stays open and continues in place as an edit.
+        const savedResponse = resp?.templateId;
+        const newTemplateId = (isPlainObject(savedResponse) ? savedResponse._id : savedResponse) || '';
+        setSavedTemplateId(newTemplateId);
+        getFormData({
+          _id: newTemplateId, validity: true, keepSlideBoxOpen: true, continuedAsEdit: true,
+        });
       }
     });
   };
@@ -664,14 +672,13 @@ export const InappAdvanced = (props) => {
     actions.editTemplate(
       {
         ...payload,
-        _id: params?.id,
+        _id: params?.id || savedTemplateId,
       },
       (resp, errorMsg) => {
         actionCallback({ resp, errorMessage: errorMsg });
+        setSpin(false);
         if (!errorMsg) {
-          onCreateComplete();
-        } else {
-          setSpin(false);
+          getFormData({ validity: true, keepSlideBoxOpen: true }); // stays open; host refreshes its list
         }
       },
     );
@@ -846,7 +853,7 @@ export const InappAdvanced = (props) => {
 
   const onDoneCallback = async () => {
     if (isFullMode) {
-      if (isEditFlow) {
+      if (isUpdate) {
         await onEditInApp();
         return;
       }
@@ -950,20 +957,8 @@ export const InappAdvanced = (props) => {
               disabled={isDisableDone()}
               className="inapp-create-btn"
             >
-              {(() => {
-                if (isEditFlow) {
-                  return isFullMode ? (
-                    <FormattedMessage {...messages.update} />
-                  ) : (
-                    <FormattedMessage {...globalMessages.done} />
-                  );
-                }
-                return isFullMode ? (
-                  <FormattedMessage {...messages.create} />
-                ) : (
-                  <FormattedMessage {...globalMessages.done} />
-                );
-              })()}
+              {/* Full mode saves without closing, so the button reads "Save" for create and edit */}
+              <FormattedMessage {...(isFullMode ? globalMessages.save : globalMessages.done)} />
             </CapButton>
           </>
         }

package/v2Containers/InappAdvance/tests/index.test.js

@@ -6,7 +6,7 @@ import { configureStore } from '@capillarytech/vulcan-react-sdk/utils';
 import history from '../../../utils/history';
 import { initialReducer } from '../../../initialReducer';
 import { InappAdvanced } from '../index';
-import { render, screen, fireEvent, waitFor } from '../../../utils/test-utils';
+import { render, screen, fireEvent, waitFor, act } from '../../../utils/test-utils';
 
 // Mock child components that are complex or not under test
 jest.mock('../../BeePopupEditor', () => ({
@@ -113,7 +113,7 @@ describe('InappAdvanced Component', () => {
     it('should render without crashing', () => {
       renderComponent(defaultProps);
 
-      expect(screen.getByText('Create')).toBeInTheDocument();
+      expect(screen.getByText('Save')).toBeInTheDocument();
     });
 
     it('should call getBeePopupBuilderToken on mount', () => {
@@ -129,7 +129,7 @@ describe('InappAdvanced Component', () => {
       });
 
       // The spinner should be present but we can't easily test for it without mocking
-      expect(screen.getByText('Create')).toBeInTheDocument();
+      expect(screen.getByText('Save')).toBeInTheDocument();
     });
   });
 
@@ -238,16 +238,16 @@ describe('InappAdvanced Component', () => {
   });
 
   describe('Action Buttons', () => {
-    it('should render Create button in full mode for new templates', () => {
+    it('should render Save button in full mode for new templates', () => {
       renderComponent({
         ...defaultProps,
         isFullMode: true,
       });
 
-      expect(screen.getByText('Create')).toBeInTheDocument();
+      expect(screen.getByText('Save')).toBeInTheDocument();
     });
 
-    it('should render Update button in edit mode', () => {
+    it('should render Save button in edit mode', () => {
       renderComponent({
         ...defaultProps,
         isFullMode: true,
@@ -265,7 +265,7 @@ describe('InappAdvanced Component', () => {
         },
       });
 
-      expect(screen.getByText('Update')).toBeInTheDocument();
+      expect(screen.getByText('Save')).toBeInTheDocument();
     });
 
     it('should render Done button in library mode', () => {
@@ -277,13 +277,13 @@ describe('InappAdvanced Component', () => {
       expect(screen.getByText('Done')).toBeInTheDocument();
     });
 
-    it('should call appropriate action when Create button is clicked', async () => {
+    it('should call appropriate action when Save button is clicked', async () => {
       renderComponent({
         ...defaultProps,
         isFullMode: true,
       });
 
-      const createButton = screen.getByText('Create');
+      const createButton = screen.getByText('Save');
       fireEvent.click(createButton);
 
       // Wait for async operations to complete
@@ -325,7 +325,7 @@ describe('InappAdvanced Component', () => {
       });
 
       // Template name should be used in the payload creation
-      expect(screen.getByText('Create')).toBeInTheDocument();
+      expect(screen.getByText('Save')).toBeInTheDocument();
     });
 
     it('should handle setTemplateName callback', () => {
@@ -348,7 +348,7 @@ describe('InappAdvanced Component', () => {
       });
 
       // Component should render without crashing
-      expect(screen.getByText('Create')).toBeInTheDocument();
+      expect(screen.getByText('Save')).toBeInTheDocument();
     });
 
     it('should use account data in payload creation', () => {
@@ -363,7 +363,7 @@ describe('InappAdvanced Component', () => {
       });
 
       // Account data should be used when creating the payload
-      expect(screen.getByText('Create')).toBeInTheDocument();
+      expect(screen.getByText('Save')).toBeInTheDocument();
     });
   });
 
@@ -396,7 +396,7 @@ describe('InappAdvanced Component', () => {
       });
 
       // Should show Update button in edit flow
-      expect(screen.getByText('Update')).toBeInTheDocument();
+      expect(screen.getByText('Save')).toBeInTheDocument();
     });
   });
 
@@ -427,7 +427,7 @@ describe('InappAdvanced Component', () => {
         beePopupBuilderToken: undefined,
       });
 
-      expect(screen.getByText('Create')).toBeInTheDocument();
+      expect(screen.getByText('Save')).toBeInTheDocument();
     });
   });
 
@@ -447,4 +447,28 @@ describe('InappAdvanced Component', () => {
       expect(container.querySelector('.inapp-footer-lib')).toBeInTheDocument();
     });
   });
-});
+  describe('Full mode keeps the slidebox open after saving', () => {
+    it('create: stays open (header switches) and the next save updates the created template', async () => {
+      renderComponent({ ...defaultProps, isFullMode: true, params: {} });
+
+      fireEvent.click(screen.getByText('Save'));
+      await waitFor(() => expect(mockActions.createInAppTemplate).toHaveBeenCalledTimes(1), { timeout: 3000 });
+      const onCreated = mockActions.createInAppTemplate.mock.calls[0][1];
+      act(() => onCreated({ templateId: { _id: 'ia-1' } }));
+
+      expect(defaultProps.getFormData).toHaveBeenCalledWith({
+        _id: 'ia-1', validity: true, keepSlideBoxOpen: true, continuedAsEdit: true,
+      });
+      expect(defaultProps.onCreateComplete).not.toHaveBeenCalled();
+
+      fireEvent.click(screen.getByText('Save'));
+      await waitFor(() => expect(mockActions.editTemplate).toHaveBeenCalledTimes(1), { timeout: 3000 });
+      expect(mockActions.createInAppTemplate).toHaveBeenCalledTimes(1);
+      expect(mockActions.editTemplate.mock.calls[0][0]._id).toBe('ia-1');
+
+      act(() => mockActions.editTemplate.mock.calls[0][1]({ templateId: { _id: 'ia-1' } }));
+      expect(defaultProps.getFormData).toHaveBeenLastCalledWith({ validity: true, keepSlideBoxOpen: true });
+      expect(defaultProps.onCreateComplete).not.toHaveBeenCalled();
+    });
+  });
+});

package/v2Containers/Line/Container/index.js

@@ -4,6 +4,7 @@ import { injectIntl, intlShape, FormattedMessage  } from 'react-intl';
 import { createStructuredSelector } from 'reselect';
 import get from 'lodash/get';
 import isEmpty from 'lodash/isEmpty';
+import isPlainObject from 'lodash/isPlainObject';
 import style from './style';
 import withStyles from '../../../hoc/withStyles';
 import './_lineCreate.scss';
@@ -22,6 +23,7 @@ import { CREATE, EDIT, TRACK_CREATE_LINE, TRACK_EDIT_LINE } from '../../App/cons
 
 import LineWrapper from './Wrapper';
 import messages from './messages';
+import globalMessages from '../../Cap/messages';
 import { TEXT, IMAGE, IMAGE_MAP, IMAGE_CAROUSEL, MAX_LINE_WRAPPER_LIMIT, MAX_LINE_WRAPPER_LIMIT_FULL_MODE, DEFAULT_VIDEO_URI, VIDEO, TEMPLATE  } from './constants';
 import { FONT_COLOR_05 } from '@capillarytech/cap-ui-library/styled/variables';
 
@@ -50,7 +52,6 @@ export const LineContainer = ({
     Line,
     className,
     params,
-    onCreateComplete,
     intl: { formatMessage },
     getFormSubscriptionData,
     templateData,
@@ -67,6 +68,8 @@ export const LineContainer = ({
     const initialWrapperContent = [{ type: TEXT, isError: true, isInit: true }];
     const [lineWrapperContents, updateLineWrapperContent] = useState(initialWrapperContent);
     const [isEditFlow, checkEditFlow] = useState(false);
+    // Full mode: id of the template created in this session — the form stays as is and later saves update it
+    const [savedTemplateId, setSavedTemplateId] = useState('');
     const [isEditLoading, updateEditLoading] = useState(false);
     const [accountSelectFlow, updateAccountSelectFlow] = useState(false);
     const [uploadedAssetList, updateUploadedAssetList] = useState({});
@@ -653,7 +656,13 @@ export const LineContainer = ({
                     mode: CREATE,
                     timeTaken,
                 }, formatFSPayload(lineWrapperContents)));
-                onCreateComplete();
+                // Full mode stays open and continues in place as an edit.
+                const savedResponse = resp?.templateId;
+                const newTemplateId = (isPlainObject(savedResponse) ? savedResponse._id : savedResponse) || '';
+                setSavedTemplateId(newTemplateId);
+                getFormSubscriptionData({
+                    _id: newTemplateId, validity: true, keepSlideBoxOpen: true, continuedAsEdit: true,
+                });
               }
             }
         );
@@ -701,7 +710,7 @@ export const LineContainer = ({
         actions.editTemplate(
             {
                 ...formatSubmitPayload(lineWrapperContents),
-                _id: params.id,
+                _id: params?.id || savedTemplateId,
             },
             (resp, errorMessage) => {
                 editCallback(errorMessage);
@@ -713,20 +722,20 @@ export const LineContainer = ({
                         label: getLineType(lineWrapperContents),
                     });
                     gtmPush('creativeDetails', Object.assign({
-                        id: resp.templateId._id,
+                        id: resp?.templateId?._id || resp?.templateId,
                         channel: LINE,
                         mode: EDIT,
                         timeTaken,
                     }, formatFSPayload(lineWrapperContents)));
-                   
-                    onCreateComplete();
+
+                    getFormSubscriptionData({ validity: true, keepSlideBoxOpen: true }); // stays open; host refreshes its list
                 }
           });
     }
 
     const onDoneCallback = () => {
         if (isFullMode) {
-            if (isEditFlow) {
+            if (isEditFlow || savedTemplateId) {
                 return onEditLine;
             }
             return onCreateLine;
@@ -845,7 +854,8 @@ export const LineContainer = ({
                         disabled={isDoneDisabled()}
                         className="create-msg"
                     >
-                        <FormattedMessage {...messages.doneButtonLabel} />
+                        {/* Full mode saves without closing, so the button reads "Save" for create and edit */}
+                        <FormattedMessage {...(isFullMode ? globalMessages.save : messages.doneButtonLabel)} />
                     </CapButton>
                     {
                         !isFullMode