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

package/v2Containers/Email/index.js

@@ -65,6 +65,8 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
         change: this.onChange,
       },
       isEdit: false,
+      // Full mode: last successfully saved template (create continues in place as an update; Export HTML source)
+      savedTemplate: null,
       schema: {},
       loading: false,
       isFormValid: true,
@@ -333,6 +335,13 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     //   this.showNext();
     // }
     const {isFullMode, isGetFormData} = nextProps;
+    // New Save click: allow one API call and re-arm startValidation (saves only on false → true)
+    if (isFullMode && isGetFormData && !this.props.isGetFormData) {
+      this.isSaveClickPending = true;
+      if (this.state.startValidation) {
+        this.setState({ startValidation: false });
+      }
+    }
     if (isFullMode && isGetFormData && !_.isEqual(isGetFormData, this.props.isGetFormData) && !this.state.isDragDrop) {
       // Only for CK editor: when Done is clicked in full mode, trigger the same chain as library
       // so that FormBuilder validation and saveFormData run reliably (getFormData -> saveValidationData -> startValidation).
@@ -986,7 +995,8 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     });
   }
   onUpdateTemplateComplete = (createResponse) => {
-    const {isEdit, formData = {} } = _.cloneDeep(this.state) || {};
+    const {isEdit: isEditMode, savedTemplate: previouslySavedTemplate, formData = {} } = _.cloneDeep(this.state) || {};
+    const isEdit = isEditMode || !!previouslySavedTemplate; // an update, also when continuing an in-session create
     const base = formData.base || {};
     const { activeTab } = base;
     const isDragDrop = _.get(base[base.activeTab], 'is_drag_drop');
@@ -1024,17 +1034,30 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
       const isLanguageSupport = this.props.location.query.isLanguageSupport || false;
       const isBEESupport = (this.props.location.query.isBEESupport !== "false") || false;
       if (this.props.isFullMode) {
-        const {versions, ...rest} = createResponse.templateId;
-        this.props.getFormSubscriptionData({ value: versions, ...rest, validity: true});
+        // Stay open: next save updates this template; Export HTML uses the saved content.
+        const savedResponse = createResponse.templateId;
+        const {versions, ...rest} = _.isPlainObject(savedResponse) ? savedResponse : {};
+        const savedTemplateId = rest._id || (_.isString(savedResponse) ? savedResponse : '')
+          || previouslySavedTemplate?._id || this.props.Email.templateDetails?._id;
+        const savedTemplate = { ...this.lastSavePayload, _id: savedTemplateId, name: rest.name || this.lastSavePayload?.name };
+        this.originalBaseTemplateContent = _.get(savedTemplate, ['versions', 'base', this.getBaseLanguage(), 'template-content']);
+        this.setState({ savedTemplate, exportHtmlContentLocked: false });
+        this.props.actions.clearCRUDResponse();
+        this.props.getFormSubscriptionData({ value: versions, ...rest, _id: savedTemplateId, validity: true, keepSlideBoxOpen: true });
       } else {
         this.props.router.push({
           pathname: `/email`,
           query: type === 'embedded' ? {type: 'embedded', module, isLanguageSupport, isBEESupport} : {module, isLanguageSupport, isBEESupport},
         });
       }
+    } else if (this.props.isFullMode && createResponse?.error && this.props.onValidationFail) {
+      // Save failed (saga shows the error): reset the host's Save trigger so the user can retry
+      this.props.onValidationFail();
     }
   }
 
+  getBaseLanguage = () => this.props.currentOrgDetails?.basic_details?.base_language || DEFAULT_LOCALE;
+
   getSupportedLanguages = (props) => {
     const {currentOrgDetails} = props;
     let supportedLanguages = [];
@@ -2065,7 +2088,8 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
   }
 
   exportHtml = () => {
-    const templateDetails = this.props.Email.templateDetails;
+    // After a full-mode save the stored details are stale (or absent for a create): export what was just saved
+    const templateDetails = this.state.savedTemplate || this.props.Email.templateDetails;
     if (_.isEmpty(templateDetails) || this.state.exportHtmlContentLocked) {
       CapNotification.error({ message: this.props.intl.formatMessage(messages.exportHtmlError) });
       return;
@@ -2460,7 +2484,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
             }
           }
           if (containerInputFieldCol.id === "tab-options-popover") {
-            const canExportHtml = this.state.isEdit && !this.state.exportHtmlContentLocked;
+            const canExportHtml = (this.state.isEdit || !!this.state.savedTemplate) && !this.state.exportHtmlContentLocked;
             this.setExportHtmlLabelStyle(containerInputFieldCol, {
               opacity: canExportHtml ? 1 : 0.5,
               cursor: canExportHtml ? 'pointer' : 'not-allowed',
@@ -2849,6 +2873,13 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
       this.setState({gettingFormData: false, startValidation: false, loading: true});
       return;
     }
+    if (this.props.isFullMode) {
+      // Exactly one API call per Save click (create saga is takeLatest: a duplicate would swallow the real response)
+      if (!this.isSaveClickPending) {
+        return;
+      }
+      this.isSaveClickPending = false;
+    }
     const formData = _.cloneDeep(passedData);
     const { currentTab } = _.cloneDeep(this.state);
     delete formData[currentTab - 1][formData[currentTab - 1].activeTab][`BEEeditor${currentTab > 1 ? currentTab : ''}json`];
@@ -2860,6 +2891,8 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     };
     if (this.state.isEdit) {
       obj._id = this.props.Email.templateDetails?._id || '';
+    } else if (this.state.savedTemplate?._id) {
+      obj._id = this.state.savedTemplate._id; // created earlier in this session: update it
     }
     obj.type = 'EMAIL';
     const baseLanguage = this.props.currentOrgDetails.basic_details.base_language;
@@ -2905,6 +2938,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
 
     // if (saveCount === 0) {
     this.props.actions.transformEmailTemplate(obj, (newEmail) => {
+      this.lastSavePayload = newEmail;
       this.props.actions.createTemplate(newEmail, this.onUpdateTemplateComplete);
     });
     // } else {
@@ -3276,7 +3310,8 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
                   getBEEData={this.getBEEData}
                   onContentChange={this.handleBeeContentChange}
                   exportHtmlLocked={this.state.exportHtmlContentLocked}
-                  exportHtmlTooltip={getExportHtmlDisabledTooltip(this.state.isEdit, this.state.exportHtmlContentLocked, this.props.intl.formatMessage)}
+                  exportHtmlEnabled={!!this.state.savedTemplate && !this.state.exportHtmlContentLocked}
+                  exportHtmlTooltip={getExportHtmlDisabledTooltip(this.state.isEdit || !!this.state.savedTemplate, this.state.exportHtmlContentLocked, this.props.intl.formatMessage)}
                   isTestAndPreviewMode={this.state.isTestAndPreviewMode} // Add flag to prevent validation
                   isTransactional={this.props.isTransactional}
               /> : ''}

package/v2Containers/Email/messages.js

@@ -28,11 +28,11 @@ export default defineMessages({
   },
   "exportHtmlDisabledCreateTooltip": {
     id: 'creatives.containersV2.Email.exportHtmlDisabledCreateTooltip',
-    defaultMessage: "HTML export isn’t available while creating a template.",
+    defaultMessage: "Your template is empty. Add content, then save it to export as HTML.",
   },
   "exportHtmlDisabledEditedTooltip": {
     id: 'creatives.containersV2.Email.exportHtmlDisabledEditedTooltip',
-    defaultMessage: "HTML export is unavailable because the template has been edited in this session.",
+    defaultMessage: "You have unsaved edits. Save the template to export the latest HTML.",
   },
   "alphabeticallyOption": {
     id: 'creatives.containersV2.Email.alphabeticallyOption',

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

@@ -594,4 +594,127 @@ describe('Email container', () => {
       expect(switchLabel.style.display).toBe(DISPLAY_NONE);
     });
   });
+  describe('full mode: saves keep the slidebox open (create continues in place as an update)', () => {
+    const buildFormData = () => ({
+      0: { activeTab: 'en', en: { 'template-content': '<p>hi</p>' }, selectedLanguages: ['en'], base: true, tabKey: '7' },
+      base: { activeTab: 'en', en: { 'template-content': '<p>hi</p>' }, selectedLanguages: ['en'] },
+      'template-name': 'Welcome',
+      'template-subject': 'Hello',
+    });
+    const fullModeProps = (overrides = {}) => {
+      const props = buildProps({
+        isFullMode: true,
+        isGetFormData: false,
+        location: { query: { module: 'library', type: 'embedded' }, pathname: '/email/create' },
+        getFormSubscriptionData: jest.fn(),
+        onValidationFail: jest.fn(),
+        ...overrides,
+      });
+      props.actions.transformEmailTemplate = jest.fn((obj, cb) => cb(obj));
+      return props;
+    };
+    const clickSave = (wrapper) => {
+      wrapper.setProps({ isGetFormData: false });
+      wrapper.setProps({ isGetFormData: true });
+    };
+
+    it.each([
+      ['a template object', { _id: 'email-1', name: 'Welcome' }],
+      ['a plain id string', 'email-1'],
+    ])('create: remembers the new id (%s), stays open, and the next save updates it', (_label, templateId) => {
+      const props = fullModeProps();
+      const wrapper = shallowWithIntl(<Email {...props} />);
+      const instance = wrapper.instance();
+
+      clickSave(wrapper);
+      instance.saveFormData(buildFormData());
+      expect(props.actions.createTemplate.mock.calls[0][0]._id).toBeUndefined();
+      instance.onUpdateTemplateComplete({ templateId });
+
+      expect(wrapper.state('savedTemplate')).toEqual(expect.objectContaining({ _id: 'email-1', name: 'Welcome' }));
+      expect(props.actions.clearCRUDResponse).toHaveBeenCalled();
+      expect(props.getFormSubscriptionData).toHaveBeenCalledWith(
+        expect.objectContaining({ _id: 'email-1', validity: true, keepSlideBoxOpen: true }),
+      );
+
+      clickSave(wrapper);
+      instance.saveFormData(buildFormData());
+      expect(props.actions.createTemplate).toHaveBeenCalledTimes(2);
+      expect(props.actions.createTemplate.mock.calls[1][0]._id).toBe('email-1');
+    });
+
+    it('edit: sends the template _id and stays open', () => {
+      const templateDetails = { _id: 'email-9', name: 'Old' };
+      const props = fullModeProps({ Email: { templateDetails } });
+      const wrapper = shallowWithIntl(<Email {...props} />);
+      wrapper.setState({ isEdit: true });
+
+      clickSave(wrapper);
+      wrapper.instance().saveFormData(buildFormData());
+      expect(props.actions.createTemplate.mock.calls[0][0]._id).toBe('email-9');
+      wrapper.instance().onUpdateTemplateComplete({ templateId: templateDetails });
+      expect(props.getFormSubscriptionData).toHaveBeenCalledWith(expect.objectContaining({ keepSlideBoxOpen: true }));
+    });
+
+    it('sends exactly one API call per Save click even if the editor submits repeatedly (BEE)', () => {
+      const props = fullModeProps();
+      const wrapper = shallowWithIntl(<Email {...props} />);
+
+      clickSave(wrapper);
+      wrapper.instance().saveFormData(buildFormData());
+      wrapper.instance().saveFormData(buildFormData());
+      wrapper.instance().saveFormData(buildFormData());
+      expect(props.actions.createTemplate).toHaveBeenCalledTimes(1);
+
+      wrapper.instance().saveFormData(buildFormData()); // no click → ignored
+      expect(props.actions.createTemplate).toHaveBeenCalledTimes(1);
+    });
+
+    it('re-arms validation on each new Save click (reset before the save triggers run)', () => {
+      const wrapper = shallowWithIntl(<Email {...fullModeProps()} />);
+      wrapper.setState({ startValidation: true }); // left set by the previous save
+      const instance = wrapper.instance();
+      const events = [];
+      const originalSetState = instance.setState.bind(instance);
+      instance.setState = (update, callback) => {
+        if (update && typeof update === 'object' && 'startValidation' in update) events.push(`startValidation:${update.startValidation}`);
+        return originalSetState(update, callback);
+      };
+      const originalGetFormData = instance.getFormData;
+      instance.getFormData = (...args) => { events.push('trigger'); return originalGetFormData(...args); };
+
+      wrapper.setProps({ isGetFormData: true });
+
+      expect(events[0]).toBe('startValidation:false');
+      expect(events).toContain('trigger');
+    });
+
+    it('enables Export HTML after the save and exports the saved content', () => {
+      const props = fullModeProps();
+      const wrapper = shallowWithIntl(<Email {...props} />);
+      wrapper.setState({ exportHtmlContentLocked: true });
+      clickSave(wrapper);
+      wrapper.instance().saveFormData(buildFormData());
+      wrapper.instance().onUpdateTemplateComplete({ templateId: 'email-1' });
+
+      expect(wrapper.state('exportHtmlContentLocked')).toBe(false);
+      expect(wrapper.instance().originalBaseTemplateContent).toBe('<p>hi</p>');
+      exportEmailTemplateHtml.mockResolvedValue();
+      wrapper.instance().exportHtml();
+      expect(exportEmailTemplateHtml).toHaveBeenCalledWith(
+        expect.objectContaining({ _id: 'email-1', name: 'Welcome' }), 'Welcome.html', 'en',
+      );
+    });
+
+    it('resets the host Save trigger when the save fails so the user can retry', () => {
+      const props = fullModeProps();
+      const wrapper = shallowWithIntl(<Email {...props} />);
+
+      wrapper.instance().onUpdateTemplateComplete({ error: true, message: 'boom' });
+
+      expect(props.onValidationFail).toHaveBeenCalled();
+      expect(props.getFormSubscriptionData).not.toHaveBeenCalled();
+      expect(wrapper.state('savedTemplate')).toBeNull();
+    });
+  });
 });

package/v2Containers/EmailWrapper/components/EmailHTMLEditor.js

@@ -107,6 +107,8 @@ const EmailHTMLEditor = (props) => {
   const [loadedHtmlContent, setLoadedHtmlContent] = useState(''); // Stable content for HTMLEditor initialization
   const [hasContentChanged, setHasContentChanged] = useState(false);
   const baselineContentRef = useRef(null);
+  // Full mode: last successfully saved template { _id, name, tabKey, html } — a create continues in place as an update
+  const [savedTemplate, setSavedTemplate] = useState(null);
   const [subject, setSubject] = useState('');
   const [subjectError, setSubjectError] = useState('');
   // State for template name (extracted from template data in Edit mode)
@@ -503,7 +505,7 @@ const EmailHTMLEditor = (props) => {
   const handleContentChange = useCallback((content) => {
     setHtmlContent(content);
 
-    if (isEditMode && !hasContentChanged && baselineContentRef.current !== null && content !== baselineContentRef.current) {
+    if ((isEditMode || savedTemplate) && !hasContentChanged && baselineContentRef.current !== null && content !== baselineContentRef.current) {
       setHasContentChanged(true);
     }
 
@@ -535,7 +537,7 @@ const EmailHTMLEditor = (props) => {
         setTagValidationError(null);
       }
     }
-  }, [tags, injectedTags, location, getDefaultTags, eventContextTags, waitEventContextTags, showLiquidErrorInFooter, isEditMode, hasContentChanged]);
+  }, [tags, injectedTags, location, getDefaultTags, eventContextTags, waitEventContextTags, showLiquidErrorInFooter, isEditMode, hasContentChanged, savedTemplate]);
 
   // Store the last validation state received from HTMLEditor
   const lastValidationStateRef = useRef(null);
@@ -798,7 +800,7 @@ const EmailHTMLEditor = (props) => {
         const templateDataFromRedux = Email?.templateDetails || Email?.BEETemplate;
         // IMPORTANT: Only use currentTemplateId from URL/params - don't fallback to Redux data
         // which might be stale from previous template in create mode
-        const templateId = currentTemplateId;
+        const templateId = currentTemplateId || savedTemplate?._id; // created earlier in this session: update it
         const isEditModeForSave = !!templateId;
 
         const langId = get(currentOrgDetails, `basic_details.languages.${baseLanguage}.lang_id`, '');
@@ -812,6 +814,8 @@ const EmailHTMLEditor = (props) => {
           if (existingTabKey) {
             tabKey = existingTabKey;
           }
+        } else if (savedTemplate?.tabKey) {
+          tabKey = savedTemplate.tabKey;
         }
 
         const languageData = {
@@ -842,7 +846,8 @@ const EmailHTMLEditor = (props) => {
           subject: subject || '',
         };
 
-        const finalTemplateName = isEditModeForSave ? (extractedTemplateName || '') : (templateName || '');
+        // Opened in edit mode: name from the loaded template; created in this session: the name entered for it
+        const finalTemplateName = isEditMode ? (extractedTemplateName || '') : (templateName || '');
 
         const obj = {
           type: EMAIL,
@@ -889,8 +894,18 @@ const EmailHTMLEditor = (props) => {
                 const isBEESupport = (location?.query?.isBEESupport !== "false") || false;
 
                 if (getFormdata) {
-                  const { versions, ...rest } = createResponse.templateId;
-                  getFormdata({ value: versions, ...rest, validity: true });
+                  // Stay open: next save updates this template; saved content is the Export HTML source.
+                  const savedResponse = createResponse.templateId;
+                  const { versions, ...rest } = _.isPlainObject(savedResponse) ? savedResponse : {};
+                  const savedTemplateId = rest._id || (_.isString(savedResponse) ? savedResponse : '') || templateId;
+                  setSavedTemplate({
+                    _id: savedTemplateId, name: finalTemplateName, tabKey, html: htmlContent || '',
+                  });
+                  baselineContentRef.current = htmlContent || '';
+                  setHasContentChanged(false);
+                  getFormdata({
+                    value: versions, ...rest, _id: savedTemplateId, validity: true, keepSlideBoxOpen: true,
+                  });
                 } else {
                   const queryParams = type === 'embedded'
                     ? {
@@ -1002,6 +1017,8 @@ const EmailHTMLEditor = (props) => {
     currentOrgDetails,
     Email,
     currentTemplateId,
+    savedTemplate,
+    isEditMode,
     templateDataProp,
     templateName,
     emailActions,
@@ -1103,19 +1120,22 @@ const EmailHTMLEditor = (props) => {
     }
   }, [showTemplateName, isFullMode, templateName, extractedTemplateName, isEditMode, handleFormDataChange]);
 
+  // Export HTML: edit mode, or after a full-mode save in this session (the saved content is then the source)
+  const canExportHtml = (isEditMode || !!savedTemplate) && !hasContentChanged;
   const exportHtmlTooltip = useMemo(
-    () => getExportHtmlDisabledTooltip(isEditMode, hasContentChanged, formatMessage),
-    [isEditMode, hasContentChanged, formatMessage]
+    () => getExportHtmlDisabledTooltip(isEditMode || !!savedTemplate, hasContentChanged, formatMessage),
+    [isEditMode, savedTemplate, hasContentChanged, formatMessage]
   );
 
   // No backend call: this non-Bee editor's loaded content is already the full rendered HTML.
   const handleExportHtml = useCallback(() => {
-    if (!isEditMode || hasContentChanged || !loadedHtmlContent) {
+    const exportContent = savedTemplate ? savedTemplate.html : loadedHtmlContent;
+    if (!canExportHtml || !exportContent) {
       CapNotification.error({ message: formatMessage(emailMessages.exportHtmlError) });
       return;
     }
-    downloadHtmlFile(loadedHtmlContent, `${sanitizeFileName(extractedTemplateName)}.html`);
-  }, [isEditMode, hasContentChanged, loadedHtmlContent, extractedTemplateName, formatMessage]);
+    downloadHtmlFile(exportContent, `${sanitizeFileName(savedTemplate?.name || extractedTemplateName)}.html`);
+  }, [canExportHtml, savedTemplate, loadedHtmlContent, extractedTemplateName, formatMessage]);
 
   return (
     <CapSpin spinning={isLoading} tip={spinTip}>
@@ -1159,7 +1179,7 @@ const EmailHTMLEditor = (props) => {
                 <CapMenu className="html-editor-options-menu">
                   <CapTooltip title={exportHtmlTooltip} placement="topLeft">
                     <span>
-                      <CapMenu.Item className="export-html-inhouse" disabled={!isEditMode || hasContentChanged} onClick={handleExportHtml}>
+                      <CapMenu.Item className="export-html-inhouse" disabled={!canExportHtml} onClick={handleExportHtml}>
                         <FormattedMessage {...emailMessages.exportHtmlButton} />
                       </CapMenu.Item>
                     </span>

package/v2Containers/EmailWrapper/components/__tests__/EmailHTMLEditor.test.js

@@ -1462,6 +1462,40 @@ describe('EmailHTMLEditor', () => {
       }, { timeout: 3000 });
     });
 
+    it('full mode create: stays open and the next save updates the just-created template', async () => {
+      const emailActions = {
+        ...defaultProps.emailActions,
+        transformEmailTemplate: jest.fn((obj, callback) => callback(obj)),
+        createTemplate: jest.fn((obj, callback) => callback({ templateId: '123' })),
+      };
+      const getFormdata = jest.fn();
+      const renderEditor = (isGetFormData) => (
+        <IntlProvider locale="en" messages={{}}>
+          <EmailHTMLEditor {...defaultProps} isGetFormData={isGetFormData} isEditEmail={false} templateName="New Template" emailActions={emailActions} getFormdata={getFormdata} getLiquidTags={null} />
+        </IntlProvider>
+      );
+      const { rerender } = renderWithIntl({
+        isGetFormData: false, isEditEmail: false, templateName: 'New Template', emailActions, getFormdata, getLiquidTags: null,
+      });
+      fireEvent.change(screen.getByTestId('subject-input'), { target: { value: 'Valid Subject' } });
+      fireEvent.click(screen.getByTestId('trigger-content-change'));
+
+      rerender(renderEditor(true));
+      await waitFor(() => expect(emailActions.createTemplate).toHaveBeenCalledTimes(1), { timeout: 3000 });
+      const firstPayload = emailActions.createTemplate.mock.calls[0][0];
+      expect(firstPayload._id).toBeUndefined();
+      expect(getFormdata).toHaveBeenCalledWith(expect.objectContaining({ _id: '123', validity: true, keepSlideBoxOpen: true }));
+
+      // Host resets the trigger after the save; the next Save click updates the same template
+      rerender(renderEditor(false));
+      rerender(renderEditor(true));
+      await waitFor(() => expect(emailActions.createTemplate).toHaveBeenCalledTimes(2), { timeout: 3000 });
+      const secondPayload = emailActions.createTemplate.mock.calls[1][0];
+      expect(secondPayload._id).toBe('123');
+      expect(secondPayload.name).toBe('New Template');
+      expect(secondPayload.versions.base.tabKey).toBe(firstPayload.versions.base.tabKey);
+    });
+
     it('handles create template success without getFormdata', async () => {
       const emailActions = {
         ...defaultProps.emailActions,

package/v2Containers/InApp/index.js

@@ -3,6 +3,7 @@ import React, {
 } 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";
@@ -163,6 +164,9 @@ export const InApp = (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 [templateDate, setTemplateDate] = useState("");
 
   //buttons
@@ -965,7 +969,7 @@ export const InApp = (props) => {
   const actionCallback = ({ errorMsg }) => {
     if (!errorMsg) {
       CapNotification.success({
-        message: isEditFlow
+        message: isUpdate
           ? formatMessage(messages.inAppEditNotification)
           : formatMessage(messages.inAppCreateNotification),
       });
@@ -977,14 +981,19 @@ export const InApp = (props) => {
     }
   };
 
+  // Full mode stays open; a create continues in place as an edit.
   const onCreateInApp = () => {
     setSpin(true);
     actions.createInAppTemplate(createPayload(), (resp, errorMsg) => {
       actionCallback({ resp, errorMsg });
+      setSpin(false);
       if (!errorMsg) {
-        onCreateComplete();
-      } else {
-        setSpin(false);
+        const savedResponse = resp?.templateId;
+        const newTemplateId = (isPlainObject(savedResponse) ? savedResponse._id : savedResponse) || '';
+        setSavedTemplateId(newTemplateId);
+        getFormData({
+          _id: newTemplateId, validity: true, keepSlideBoxOpen: true, continuedAsEdit: true,
+        });
       }
     });
   };
@@ -994,14 +1003,13 @@ export const InApp = (props) => {
     actions.editTemplate(
       {
         ...createPayload(),
-        _id: params.id,
+        _id: params?.id || savedTemplateId,
       },
       (resp, errorMsg) => {
         actionCallback({ resp, errorMsg });
+        setSpin(false);
         if (!errorMsg) {
-          onCreateComplete();
-        } else {
-          setSpin(false);
+          getFormData({ validity: true, keepSlideBoxOpen: true });
         }
       },
     );
@@ -1070,7 +1078,7 @@ export const InApp = (props) => {
 
   const onDoneCallback = () => {
     if (isFullMode) {
-      if (isEditFlow) {
+      if (isUpdate) {
         return onEditInApp();
       }
       return onCreateInApp();
@@ -1557,20 +1565,8 @@ export const InApp = (props) => {
                 disabled={shouldUseHTMLEditor ? isDisableDone(null) : isDisableDone(panes)}
                 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>
               {/* {!isFullMode && ( */}
               <CapButton

package/v2Containers/InApp/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 { InApp } from '../index';
-import { render, screen, fireEvent, within, waitFor } from '../../../utils/test-utils';
+import { render, screen, fireEvent, within, waitFor, act } from '../../../utils/test-utils';
 import {
   editData,
   accountData,
@@ -95,8 +95,8 @@ describe('Test activity inApp container', () => {
       // Wait for any element to appear (component should render after spinner stops)
       const hasBeeEditor = screen.queryByTestId('bee-popup-editor-ANDROID');
       const hasTabs = screen.queryByRole('tab', { name: /ios/i });
-      const hasCreateButton = screen.queryByText(/create/i);
-      const hasUpdateButton = screen.queryByText(/update/i);
+      const hasCreateButton = screen.queryByText(/^save$/i);
+      const hasUpdateButton = screen.queryByText(/^save$/i);
       const hasCapDeviceContent = screen.queryByTestId('cap-device-content');
       const hasLayoutOption = screen.queryByText(/creative layout/i);
       expect(hasBeeEditor || hasTabs || hasCreateButton || hasUpdateButton || hasCapDeviceContent || hasLayoutOption).toBeTruthy();
@@ -125,7 +125,7 @@ describe('Test activity inApp container', () => {
     
     // Find update button - might be in BEE editor or old UI
     const updateBtn = screen.queryByRole('button', {
-      name: /update/i,
+      name: /^save$/i,
     });
     
     if (updateBtn) {
@@ -165,7 +165,7 @@ describe('Test activity inApp container', () => {
       const hasTabs = screen.queryByRole('tab', { name: /ios/i });
       const hasBeeEditor = screen.queryByTestId('bee-popup-editor-ANDROID');
       const hasDoneButton = screen.queryByText(/done/i);
-      const hasCreateButton = screen.queryByText(/create/i);
+      const hasCreateButton = screen.queryByText(/^save$/i);
       const hasLayoutOption = screen.queryByText(/creative layout/i);
       expect(hasTabs || hasBeeEditor || hasDoneButton || hasCreateButton || hasLayoutOption).toBeTruthy();
     }, { timeout: 5000 });
@@ -188,7 +188,7 @@ describe('Test activity inApp container', () => {
     const doneBtn = screen.queryByRole('button', {
       name: /done/i,
     }) || screen.queryByRole('button', {
-      name: /update/i,
+      name: /^save$/i,
     });
     expect(doneBtn).toBeEnabled();
   });
@@ -220,8 +220,8 @@ describe('Test activity inApp container', () => {
       const hasTabs = screen.queryByRole('tab', { name: /ios/i });
       const hasBeeEditor = screen.queryByTestId('bee-popup-editor-ANDROID');
       const hasLayoutOption = screen.queryByText(/top banner/i);
-      const hasUpdateButton = screen.queryByText(/update/i);
-      const hasCreateButton = screen.queryByText(/create/i);
+      const hasUpdateButton = screen.queryByText(/^save$/i);
+      const hasCreateButton = screen.queryByText(/^save$/i);
       const hasLayoutHeading = screen.queryByText(/creative layout/i);
       expect(hasTabs || hasBeeEditor || hasLayoutOption || hasUpdateButton || hasCreateButton || hasLayoutHeading).toBeTruthy();
     }, { timeout: 5000 });
@@ -259,7 +259,7 @@ describe('Test activity inApp container', () => {
       const htmlEditor = screen.queryByTestId('inapp-html-editor');
       const tabs = screen.queryByRole('tab');
       const hasAnyButton = screen.queryByRole('button');
-      const hasAnyText = screen.queryByText(/done/i) || screen.queryByText(/update/i) || screen.queryByText(/creative layout/i);
+      const hasAnyText = screen.queryByText(/done/i) || screen.queryByText(/^save$/i) || screen.queryByText(/creative layout/i);
       expect(beeEditor || htmlEditor || tabs || hasAnyButton || hasAnyText).toBeTruthy();
     }
   });
@@ -284,3 +284,46 @@ describe('test for getCtaObject function', () => {
     }]);
   });
 });
+
+describe('InApp — full mode keeps the slidebox open after saving', () => {
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  it('edit: updates and asks the host to stay open instead of closing', async () => {
+    jest
+      .spyOn(commonUtils, 'validateInAppContent')
+      .mockImplementation((payload, options) => {
+        options.onSuccess();
+        return Promise.resolve(true);
+      });
+    const getFormData = jest.fn();
+    const onCreateComplete = jest.fn();
+    const actions = { ...mockActions, editTemplate: jest.fn() };
+    renderComponent({
+      actions,
+      globalActions: mockGlobalActions,
+      location,
+      editData,
+      accountData,
+      isFullMode: true,
+      params: { id: 'test' },
+      defaultData: {},
+      getFormData,
+      onCreateComplete,
+      metaEntities,
+      getDefaultTags,
+      injectedTags,
+    });
+
+    const saveBtn = await screen.findByRole('button', { name: /^save$/i }, { timeout: 5000 });
+    fireEvent.click(saveBtn);
+    await waitFor(() => expect(actions.editTemplate).toHaveBeenCalled(), { timeout: 3000 });
+    expect(actions.editTemplate.mock.calls[0][0]._id).toBe('test');
+
+    act(() => actions.editTemplate.mock.calls[0][1]({ templateId: { _id: 'test' } }));
+
+    expect(getFormData).toHaveBeenCalledWith({ validity: true, keepSlideBoxOpen: true });
+    expect(onCreateComplete).not.toHaveBeenCalled();
+  });
+});