@capillarytech/creatives-library 9.0.70-alpha.sprint-cap-213712.13 → 9.0.70

package/v2Containers/Viber/index.js

@@ -6,6 +6,7 @@ import { createStructuredSelector } from 'reselect';
 import { injectIntl, FormattedMessage } from 'react-intl';
 import isEmpty from 'lodash/isEmpty';
 import get from 'lodash/get';
+import isPlainObject from 'lodash/isPlainObject';
 import CapHeader from '@capillarytech/cap-ui-library/CapHeader';
 import CapRow from '@capillarytech/cap-ui-library/CapRow';
 import CapColumn from '@capillarytech/cap-ui-library/CapColumn';
@@ -133,7 +134,6 @@ export const Viber = (props) => {
     metaEntities,
     globalActions: globalActionsProps,
     handleClose,
-    onCreateComplete,
     params,
     templateData = EMPTY_TEMPLATE_DATA,
     actions,
@@ -158,6 +158,8 @@ export const Viber = (props) => {
   const [errorMessageTextarea, updateErrorMessageTextArea] = useState(false);
   const [isEditLoading, updateEditLoading] = useState(false);
   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 [messageTitle, updateTextMessageTitle] = useState("");
   const [errorMessageTitle, updateErrorMessageTitle] = useState(false);
   const [buttonURLErrorMessage, updateButtonURLErrorMessage] = useState(false);
@@ -1432,13 +1434,19 @@ export const Viber = (props) => {
     }
   };
 
+  // Full mode stays open; a create continues in place as an edit.
   const onCreateViber = () => {
     actions.createTemplate(
       formatSubmitPayload(),
       (resp, errorMessage) => {
         createCallback({resp, errorMessage});
         if (!errorMessage) {
-          onCreateComplete();
+          const savedResponse = resp?.templateId;
+          const newTemplateId = (isPlainObject(savedResponse) ? savedResponse._id : savedResponse) || '';
+          setSavedTemplateId(newTemplateId);
+          getFormSubscriptionData({
+            _id: newTemplateId, validity: true, keepSlideBoxOpen: true, continuedAsEdit: true,
+          });
         }
       }
     );
@@ -1448,12 +1456,12 @@ export const Viber = (props) => {
     actions.editTemplate(
       {
         ...formatSubmitPayload(),
-        _id: params.id,
+        _id: params?.id || savedTemplateId,
       },
       (resp, errorMessage) => {
         createCallback({resp, errorMessage}, true);
         if (!errorMessage) {
-          onCreateComplete();
+          getFormSubscriptionData({ validity: true, keepSlideBoxOpen: true });
         }
       }
     );
@@ -1461,7 +1469,7 @@ export const Viber = (props) => {
 
   const onDoneCallback = () => {
     if (isFullMode) {
-      if (isEditFlow) {
+      if (isEditFlow || savedTemplateId) {
         return onEditViber;
       }
       return onCreateViber;
@@ -1574,7 +1582,8 @@ export const Viber = (props) => {
             disabled={isDisableDone()}
             className="create-msg viber-create-msg"
           >
-            <FormattedMessage {...messages.doneButtonLabel} />
+            {/* Full mode saves without closing, so the button reads "Save" for create and edit */}
+            <FormattedMessage {...(isFullMode ? messages.save : messages.doneButtonLabel)} />
           </CapButton>
           <CapButton
             onClick={handleTestAndPreview}

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

@@ -44,6 +44,21 @@ const renderComponent = (props) =>
     </Provider>,
   );
 
+// Full mode labels the main Viber button "Save" (same text as the CTA / carousel-button "Save"),
+// so tell them apart by the main button's class.
+const MAIN_BUTTON_CLASS = 'viber-create-msg';
+const isMainButton = (btn) => btn.classList.contains(MAIN_BUTTON_CLASS);
+const getMainButton = () => screen.getAllByRole('button', { name: /^(save|done)$/i }).find(isMainButton);
+const findMainButton = async () => {
+  await screen.findAllByRole('button', { name: /^(save|done)$/i });
+  return getMainButton();
+};
+const getOtherSaveButton = () => screen.getAllByRole('button', { name: /^save$/i }).find((btn) => !isMainButton(btn));
+const findOtherSaveButton = async () => {
+  await waitFor(() => expect(getOtherSaveButton()).toBeTruthy());
+  return getOtherSaveButton();
+};
+
 describe('Test Viber container', () => {
   it('test case for Viber template creation flow', async () => {
     renderComponent({
@@ -110,18 +125,14 @@ describe('Test Viber container', () => {
     fireEvent.change(ctaBtnUrl2, { target: { value: 'not url' } });
     ctaBtnUrl2 = screen.getByPlaceholderText('Enter button url');
     fireEvent.change(ctaBtnUrl2, { target: { value: 'https://www.test.com' } });
-    const saveBtn = await screen.findByRole('button', {
-      name: /save/i,
-    });
+    const saveBtn = await findOtherSaveButton();
     await waitFor(() => expect(saveBtn).toBeEnabled());
     fireEvent.click(saveBtn);
     const editCta = await screen.findByLabelText(/edit-cta-icon/i);
     fireEvent.click(editCta);
     const cancelBtn = screen.getAllByRole('button', {name: /cancel/i});
     fireEvent.click(cancelBtn[0]);
-    const doneBtn = await screen.findByRole('button', {
-      name: /done/i,
-    });
+    const doneBtn = await findMainButton();
     await waitFor(() => expect(doneBtn).toBeEnabled());
     fireEvent.click(doneBtn);
     expect(mockActions.createTemplate).toHaveBeenCalled();
@@ -148,9 +159,7 @@ describe('Test Viber container', () => {
       params: { id: 'test'},
       handleClose: jest.fn(),
     });
-    const doneBtn = screen.getByRole('button', {
-      name: /done/i,
-    });
+    const doneBtn = getMainButton();
     expect(doneBtn).toBeEnabled();
     fireEvent.click(doneBtn);
     expect(mockActions.editTemplate).toHaveBeenCalled();
@@ -181,9 +190,7 @@ describe('Test Viber container', () => {
       name: /reupload/i,
     });
     fireEvent.click(reupload);
-    const doneBtn = screen.getByRole('button', {
-      name: /done/i,
-    });
+    const doneBtn = getMainButton();
     expect(doneBtn).toBeDisabled();
   });
   it('test case for Viber template creation flow for video media type', async () => {
@@ -211,9 +218,7 @@ describe('Test Viber container', () => {
       getDefaultTags,
       injectedTags,
     });
-    const doneBtn = screen.getByRole('button', {
-      name: /done/i,
-    });
+    const doneBtn = getMainButton();
     expect(doneBtn).toBeEnabled();
     fireEvent.click(doneBtn);
     expect(mockActions.editTemplate).toHaveBeenCalled();
@@ -243,9 +248,7 @@ describe('Test Viber container', () => {
       getDefaultTags,
       injectedTags,
     });
-    const doneBtn = screen.getByRole('button', {
-      name: /done/i,
-    });
+    const doneBtn = getMainButton();
     expect(doneBtn).toBeEnabled();
     fireEvent.click(doneBtn);
     expect(mockActions.editTemplate).toHaveBeenCalled();
@@ -278,9 +281,7 @@ describe('Test Viber container', () => {
       name: /re upload/i,
     });
     fireEvent.click(reupload);
-    const doneBtn = screen.getByRole('button', {
-      name: /done/i,
-    });
+    const doneBtn = getMainButton();
     expect(doneBtn).toBeDisabled();
   });
   it('test case for Viber template for error cases', async () => {
@@ -304,9 +305,7 @@ describe('Test Viber container', () => {
       params: { id: 'test'},
       handleClose: jest.fn(),
     });
-    const doneBtn = screen.getByRole('button', {
-      name: /done/i,
-    });
+    const doneBtn = getMainButton();
     expect(doneBtn).toBeDisabled();
   });
 
@@ -334,7 +333,7 @@ describe('Test Viber container', () => {
       getDefaultTags,
       injectedTags,
     });
-    const doneBtn = screen.getByRole('button', { name: /done/i });
+    const doneBtn = getMainButton();
     expect(doneBtn).toBeDisabled();
   });
 
@@ -358,7 +357,7 @@ describe('Test Viber container', () => {
       params: { id: 'test' },
       handleClose: jest.fn(),
     });
-    const doneBtn = screen.getByRole('button', { name: /done/i });
+    const doneBtn = getMainButton();
     expect(doneBtn).toBeDisabled();
   });
 
@@ -386,7 +385,7 @@ describe('Test Viber container', () => {
       getDefaultTags,
       injectedTags,
     });
-    const doneBtn = screen.getByRole('button', { name: /done/i });
+    const doneBtn = getMainButton();
     expect(doneBtn).toBeEnabled();
   });
 
@@ -465,7 +464,7 @@ describe('Test Viber container', () => {
 
     fireEvent.click(screen.getByRole('radio', { name: /carousel/i }));
     await screen.findByPlaceholderText('https://example.com/action');
-    fireEvent.click(screen.getByRole('button', { name: /save/i }));
+    fireEvent.click(getOtherSaveButton());
 
     expect(await screen.findByText("URL can't be empty")).toBeInTheDocument();
   });
@@ -573,3 +572,73 @@ describe('Test Viber container', () => {
     });
   });
 });
+
+describe('Viber — full mode keeps the slidebox open after saving', () => {
+  const buildProps = (overrides = {}) => ({
+    actions: {
+      ...mockActions,
+      createTemplate: jest.fn(),
+      editTemplate: jest.fn(),
+      clearCreateResponse: jest.fn(),
+      clearEditResponse: jest.fn(),
+    },
+    globalActions: mockGlobalActions,
+    templateData: { mode: 'create' },
+    viber: { uploadedAssetData: {}, createTemplateInProgress: false },
+    location: { pathname: '/viber/create', query: { type: false, module: 'default' }, search: '' },
+    isFullMode: true,
+    handleClose: jest.fn(),
+    onCreateComplete: jest.fn(),
+    getFormSubscriptionData: jest.fn(),
+    metaEntities,
+    getDefaultTags,
+    injectedTags,
+    ...overrides,
+  });
+
+  it('labels the main button "Save" in full mode and "Done" in library mode', async () => {
+    const { unmount } = renderComponent(buildProps());
+    expect((await findMainButton()).textContent).toMatch(/^save$/i);
+    unmount();
+    renderComponent(buildProps({ isFullMode: false }));
+    expect((await findMainButton()).textContent).toMatch(/^done$/i);
+  });
+
+  it('create: stays open (header switches) and the next save updates the created template', async () => {
+    const props = buildProps();
+    renderComponent(props);
+    fireEvent.change((await screen.findAllByPlaceholderText('Enter template name'))[0], { target: { value: 'Promo' } });
+    fireEvent.change(screen.getAllByPlaceholderText(/Enter message/i)[0], { target: { value: 'Hello there' } });
+
+    fireEvent.click(getMainButton());
+    expect(props.actions.createTemplate).toHaveBeenCalledTimes(1);
+    props.actions.createTemplate.mock.calls[0][1]({ templateId: { _id: 'vb-1' } });
+
+    expect(props.getFormSubscriptionData).toHaveBeenCalledWith({
+      _id: 'vb-1', validity: true, keepSlideBoxOpen: true, continuedAsEdit: true,
+    });
+    expect(props.onCreateComplete).not.toHaveBeenCalled();
+    expect(props.handleClose).not.toHaveBeenCalled();
+
+    await waitFor(() => expect(getMainButton()).toBeEnabled());
+    fireEvent.click(getMainButton());
+    expect(props.actions.createTemplate).toHaveBeenCalledTimes(1);
+    expect(props.actions.editTemplate).toHaveBeenCalledTimes(1);
+    expect(props.actions.editTemplate.mock.calls[0][0]._id).toBe('vb-1');
+  });
+
+  it('edit: stays open after a successful update', async () => {
+    const props = buildProps({
+      params: { id: 'vb-9' },
+      viber: { uploadedAssetData: {}, createTemplateInProgress: false, templateDetails: templateDetailsText },
+    });
+    renderComponent(props);
+
+    fireEvent.click(await findMainButton());
+    expect(props.actions.editTemplate.mock.calls[0][0]._id).toBe('vb-9');
+    props.actions.editTemplate.mock.calls[0][1]({ templateId: { _id: 'vb-9' } });
+
+    expect(props.getFormSubscriptionData).toHaveBeenCalledWith({ validity: true, keepSlideBoxOpen: true });
+    expect(props.onCreateComplete).not.toHaveBeenCalled();
+  });
+});

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

@@ -18,7 +18,7 @@ export const FormActions = ({
   <>
     <CapRow useLegacy className="creatives-webpush-actions">
       <CapButton type="primary" onClick={onSave} disabled={isSaveDisabled}>
-        {formatMessage(messages.saveTemplate)}
+        {formatMessage(messages.saveButton)}
       </CapButton>
     </CapRow>
     {errorText && (

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

@@ -10,8 +10,8 @@ describe('FormActions', () => {
   const mockOnSave = jest.fn();
 
   const mockMessages = {
-    saveTemplate: {
-      defaultMessage: 'Save Template',
+    saveButton: {
+      defaultMessage: 'Save',
     },
   };
 
@@ -46,7 +46,7 @@ describe('FormActions', () => {
       const wrapper = mountWithIntl(<FormActions {...defaultProps} />);
       const saveButton = wrapper.find(CapButton);
       expect(saveButton.exists()).toBe(true);
-      expect(mockFormatMessage).toHaveBeenCalledWith(mockMessages.saveTemplate);
+      expect(mockFormatMessage).toHaveBeenCalledWith(mockMessages.saveButton);
     });
 
     it('should disable save button when isSaveDisabled is true', () => {

package/v2Containers/WebPush/Create/index.js

@@ -32,6 +32,7 @@ import { useImageUpload } from './hooks/useImageUpload';
 import { useTagManagement } from './hooks/useTagManagement';
 import isEmpty from 'lodash/isEmpty';
 import get from 'lodash/get';
+import isPlainObject from 'lodash/isPlainObject';
 import * as templateActions from '../../Templates/actions';
 import { makeSelectTemplates } from '../../Templates/selectors';
 
@@ -165,8 +166,13 @@ const WebPushCreate = ({
   Templates,
   restrictPersonalization = false,
   onContentValidityChange,
+  canStayOpenAfterCreate = false,
+  onCreateContinuedAsEdit,
 }) => {
   const { formatMessage } = intl;
+  // Full mode stays open after saving; creates only with edit permission.
+  const stayOpenAfterSave = !!isFullMode;
+  const stayOpenAfterCreate = !!isFullMode && !!canStayOpenAfterCreate;
   const aiContentBotDisabled = isAiContentBotDisabled();
 
   // Form state - kept in main component for now
@@ -189,6 +195,8 @@ const WebPushCreate = ({
   const [activeUploadField, setActiveUploadField] = useState(null);
   const [templateIdError, setTemplateIdError] = useState('');
   const [showTestAndPreviewSlidebox, setShowTestAndPreviewSlidebox] = 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('');
 
   // Refs
   const titleCountRef = useRef(null);
@@ -708,10 +716,10 @@ const WebPushCreate = ({
       return;
     }
 
-    // Full mode: proceed with API calls
-    if (isEditMode) {
-      // Get template ID from params or templateData
-      const templateId = params?.id || templateData?._id;
+    // Full mode: proceed with API calls. A template created earlier in this session is updated too.
+    if (isEditMode || savedTemplateId) {
+      // Get template ID from params or templateData (or the in-session created template)
+      const templateId = params?.id || templateData?._id || savedTemplateId;
       if (templateId) {
         // Clear any previous template ID error
         setTemplateIdError('');
@@ -725,6 +733,10 @@ const WebPushCreate = ({
               // Clear flag before calling callbacks to prevent double-invocation
               // from the editResponse useEffect
               saveInitiatedRef.current = false;
+              // Stays open (host shows the toast and refreshes its list from the edit response)
+              if (stayOpenAfterSave) {
+                return;
+              }
               if (onCreateComplete) {
                 onCreateComplete(true);
               }
@@ -769,6 +781,15 @@ const WebPushCreate = ({
     ) {
       // Reset flag after handling response
       saveInitiatedRef.current = false;
+      if (stayOpenAfterCreate) {
+        // Stay open: next save updates this template.
+        const savedResponse = response.templateId || response._id;
+        setSavedTemplateId((isPlainObject(savedResponse) ? savedResponse._id : savedResponse) || '');
+        if (onCreateContinuedAsEdit) {
+          onCreateContinuedAsEdit(); // host switches the header to the edit title
+        }
+        return;
+      }
       if (onCreateComplete) {
         onCreateComplete(true);
       }
@@ -776,7 +797,7 @@ const WebPushCreate = ({
         handleClose();
       }
     }
-  }, [webPush?.response, onCreateComplete, handleClose, isEditMode]);
+  }, [webPush?.response, onCreateComplete, handleClose, isEditMode, stayOpenAfterCreate, onCreateContinuedAsEdit]);
 
   // Handle edit response
   useEffect(() => {
@@ -789,6 +810,9 @@ const WebPushCreate = ({
     ) {
       // Reset flag after handling response
       saveInitiatedRef.current = false;
+      if (stayOpenAfterSave) {
+        return;
+      }
       if (onCreateComplete) {
         onCreateComplete(true);
       }
@@ -796,7 +820,7 @@ const WebPushCreate = ({
         handleClose();
       }
     }
-  }, [webPush?.editResponse, onCreateComplete, handleClose, isEditMode]);
+  }, [webPush?.editResponse, onCreateComplete, handleClose, isEditMode, stayOpenAfterSave]);
 
   // Handle getFormData request from parent (library mode)
   useEffect(() => {
@@ -1194,6 +1218,8 @@ WebPushCreate.propTypes = {
   templateActions: PropTypes.object,
   restrictPersonalization: PropTypes.bool,
   onContentValidityChange: PropTypes.func,
+  canStayOpenAfterCreate: PropTypes.bool,
+  onCreateContinuedAsEdit: PropTypes.func,
 };
 
 WebPushCreate.defaultProps = {

package/v2Containers/WebPush/Create/messages.js

@@ -43,10 +43,6 @@ export default defineMessages({
     id: `${scope}.messageRequired`,
     defaultMessage: 'Message is required',
   },
-  saveTemplate: {
-    id: `${scope}.saveTemplate`,
-    defaultMessage: 'Save Template',
-  },
   accountRequired: {
     id: `${scope}.accountRequired`,
     defaultMessage: 'Select an account to create a template',