@capillarytech/creatives-library 9.0.57-alpha.6 → 9.0.58

package/package.json

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

package/v2Containers/CommunicationFlow/CommunicationFlow.js

@@ -16,7 +16,7 @@ import { createStructuredSelector } from 'reselect';
 import CapRow from '@capillarytech/cap-ui-library/CapRow';
 import CapDivider from '@capillarytech/cap-ui-library/CapDivider';
 import CapButton from '@capillarytech/cap-ui-library/CapButton';
-import CapLabel from '@capillarytech/cap-ui-library/CapLabel';
+import CapNotification from '@capillarytech/cap-ui-library/CapNotification';
 import injectReducer from '../../utils/injectReducer';
 import { makeSelectAuthenticated } from '../Cap/selectors';
 import capReducer from '../Cap/reducer';
@@ -91,7 +91,6 @@ const CommunicationFlow = ({
     };
   });
   const [validationErrors, setValidationErrors] = useState({});
-  const [saveError, setSaveError] = useState(null);
 
   // Memoize enabled steps
   const enabledSteps = useMemo(() => getEnabledSteps(config), [config]);
@@ -151,7 +150,6 @@ const CommunicationFlow = ({
   }, []);
 
   const handleSave = useCallback(async () => {
-    setSaveError(null);
     const aggregatedData = getAggregatedData();
     const shouldUseCCS = config?.useCCS !== false;
     let ccsCommDefinition = null;
@@ -222,11 +220,11 @@ const CommunicationFlow = ({
             })
             : await createCommDefinition(payload);
           if (res?.isError) {
-            setSaveError(formatMessage(messages.genericSaveError));
+            CapNotification.error({ message: formatMessage(messages.genericSaveError) });
             return;
           }
           if (isDuplicateReferenceIdError(res)) {
-            setSaveError(formatMessage(messages.duplicateReferenceIdError));
+            CapNotification.error({ message: formatMessage(messages.duplicateReferenceIdError) });
             return;
           }
           const data = res?.response?.data;
@@ -239,7 +237,7 @@ const CommunicationFlow = ({
                 status: data.status,
               };
             } else {
-              setSaveError(formatMessage(messages.genericSaveError));
+              CapNotification.error({ message: formatMessage(messages.genericSaveError) });
               return;
             }
           } else if (data?.id) {
@@ -250,12 +248,12 @@ const CommunicationFlow = ({
               status: data.status,
             };
           } else {
-            setSaveError(formatMessage(messages.genericSaveError));
+            CapNotification.error({ message: formatMessage(messages.genericSaveError) });
             return;
           }
         } catch (error) {
           console.error('[CommunicationFlow] CCS createCommDefinition error:', error);
-          setSaveError(formatMessage(messages.genericSaveError));
+          CapNotification.error({ message: formatMessage(messages.genericSaveError) });
           return;
         }
       } else if (!name) {
@@ -377,11 +375,6 @@ const CommunicationFlow = ({
       {renderSteps()}
       {onSave && (
         <CapRow useLegacy className="communication-flow-container__footer">
-          {saveError && (
-            <CapLabel type="label2" className="communication-flow-container__save-error">
-              {saveError}
-            </CapLabel>
-          )}
           <CapButton type="primary" onClick={handleSave} disabled={isSaveDisabled}>
             {formatMessage(messages.save)}
           </CapButton>

package/v2Containers/CommunicationFlow/Tests/CommunicationFlow.test.js

@@ -5,6 +5,13 @@ jest.mock('../../../services/api', () => ({
   editCommDefinition: jest.fn(),
 }));
 
+jest.mock('@capillarytech/cap-ui-library/CapNotification', () => ({
+  error: jest.fn(),
+  success: jest.fn(),
+  warning: jest.fn(),
+  info: jest.fn(),
+}));
+
 jest.mock('../../CreativesContainer', () => function MockCreativesContainer({
   getCreativesData,
   handleCloseCreatives,
@@ -38,6 +45,7 @@ import { IntlProvider } from 'react-intl';
 import history from '../../../utils/history';
 import { initialReducer } from '../../../initialReducer';
 import CommunicationFlow from '../CommunicationFlow';
+import CapNotification from '@capillarytech/cap-ui-library/CapNotification';
 import { createCommDefinition, editCommDefinition } from '../../../services/api';
 import { getEnabledSteps } from '../utils/getEnabledSteps';
 import {
@@ -705,7 +713,7 @@ describe('handleSave — CCS flow', () => {
 
     await userEvent.click(screen.getByRole('button', { name: /^save$/i }));
 
-    await waitFor(() => expect(screen.getByText('Something went wrong while saving your content. Please try again.')).toBeInTheDocument());
+    await waitFor(() => expect(CapNotification.error).toHaveBeenCalledWith({ message: 'Something went wrong while saving your content. Please try again.' }));
     expect(onSave).not.toHaveBeenCalled();
   });
 
@@ -721,7 +729,7 @@ describe('handleSave — CCS flow', () => {
 
     await userEvent.click(screen.getByRole('button', { name: /^save$/i }));
 
-    await waitFor(() => expect(screen.getByText('Something went wrong while saving your content. Please try again.')).toBeInTheDocument());
+    await waitFor(() => expect(CapNotification.error).toHaveBeenCalledWith({ message: 'Something went wrong while saving your content. Please try again.' }));
     expect(onSave).not.toHaveBeenCalled();
   });
 
@@ -737,7 +745,7 @@ describe('handleSave — CCS flow', () => {
 
     await userEvent.click(screen.getByRole('button', { name: /^save$/i }));
 
-    await waitFor(() => expect(screen.getByText('Something went wrong while saving your content. Please try again.')).toBeInTheDocument());
+    await waitFor(() => expect(CapNotification.error).toHaveBeenCalledWith({ message: 'Something went wrong while saving your content. Please try again.' }));
     expect(onSave).not.toHaveBeenCalled();
   });
 
@@ -758,7 +766,9 @@ describe('handleSave — CCS flow', () => {
     await userEvent.click(screen.getByRole('button', { name: /^save$/i }));
 
     await waitFor(() => expect(createCommDefinition).toHaveBeenCalledTimes(1));
-    expect(await screen.findByText(/already in use in your organization/i)).toBeInTheDocument();
+    await waitFor(() => expect(CapNotification.error).toHaveBeenCalledWith({
+      message: 'This reference ID is already in use in your organization. Please use a different reference ID.',
+    }));
     expect(onSave).not.toHaveBeenCalled();
   });
 
@@ -904,7 +914,9 @@ describe('handleSave — CCS flow', () => {
     await userEvent.click(screen.getByRole('button', { name: /^save$/i }));
 
     await waitFor(() => expect(editCommDefinition).toHaveBeenCalledTimes(1));
-    expect(await screen.findByText(/already in use in your organization/i)).toBeInTheDocument();
+    await waitFor(() => expect(CapNotification.error).toHaveBeenCalledWith({
+      message: 'This reference ID is already in use in your organization. Please use a different reference ID.',
+    }));
     expect(onSave).not.toHaveBeenCalled();
   });
 });

package/v2Containers/MobilePush/Edit/test/contentValidity.test.js

@@ -79,7 +79,7 @@ describe('MobilePush/Edit — onContentValidityChange reporting', () => {
     );
   });
 
-  it('treats content as empty when the iOS tab (tabCount 2) is cleared even if Android has content', () => {
+  it('treats content as present when the iOS tab (tabCount 2) is cleared but Android has content (single-device template allowed)', () => {
     const onContentValidityChange = jest.fn();
     const wrapper = shallow(<Edit {...baseProps()} onContentValidityChange={onContentValidityChange} />);
     wrapper.setState({
@@ -90,6 +90,22 @@ describe('MobilePush/Edit — onContentValidityChange reporting', () => {
       tabCount: 2,
     });
 
+    expect(onContentValidityChange).toHaveBeenCalledWith(
+      expect.objectContaining({ isContentEmpty: false }),
+    );
+  });
+
+  it('treats content as empty when both Android and iOS tabs (tabCount 2) are cleared', () => {
+    const onContentValidityChange = jest.fn();
+    const wrapper = shallow(<Edit {...baseProps()} onContentValidityChange={onContentValidityChange} />);
+    wrapper.setState({
+      formData: {
+        0: { 'message-title': '', 'message-editor': '' },
+        1: { 'message-title2': '', 'message-editor2': '' },
+      },
+      tabCount: 2,
+    });
+
     expect(onContentValidityChange).toHaveBeenCalledWith(
       expect.objectContaining({ isContentEmpty: true }),
     );

package/v2Containers/MobilePush/commonMethods.js

@@ -309,24 +309,23 @@ function getMobilePushTabContent(tabIndex, tabData) {
  * Live "is content empty" check for the legacy Mobile Push Edit/Create forms — the
  * Mobile Push analogue of Sms's `getSmsEmbeddedFooterValidity` (see
  * app/v2Containers/Sms/smsFormDataHelpers.js). Checks every active tab (Android, and
- * iOS when tabCount > 1); if any active tab's title+message are both empty, the
- * overall content is considered empty so Done/Preview-and-test can be disabled.
+ * iOS when tabCount > 1); Mobile Push allows saving with just one active platform
+ * filled in, so the overall content is empty only when EVERY active tab's
+ * title+message are both empty.
  * @param {object} formData FormBuilder state (same shape as this.state.formData)
  * @param {number} [tabCount] Total number of active tabs (1 = Android only, 2 = Android + iOS)
  * @returns {{ isContentEmpty: boolean }}
  */
 function getMobilePushEmbeddedContentValidity(formData, tabCount) {
   const count = tabCount != null && tabCount > 1 ? tabCount : 1;
-  let isContentEmpty = false;
   for (let i = 0; i < count; i++) {
     const content = getMobilePushTabContent(i, formData?.[i]);
     const trimmed = content != null && content !== '' ? String(content).trim() : '';
-    if (!trimmed) {
-      isContentEmpty = true;
-      break;
+    if (trimmed) {
+      return { isContentEmpty: false };
     }
   }
-  return { isContentEmpty };
+  return { isContentEmpty: true };
 }
 
 export {

package/v2Containers/MobilePushNew/index.js

@@ -1758,9 +1758,14 @@ export const MobilePushNew = ({
     onPersonalizationTokensChange,
   ]);
 
-  // Validation logic for template creation/update
+  // Validation logic for template creation/update.
   const isAndroidFieldsMissing = isPlatformFieldsMissing(isAndroidSupported, androidContent);
   const isIosFieldsMissing = isPlatformFieldsMissing(isIosSupported, iosContent);
+  const isMobilePushContentMissing = (
+    (isAndroidSupported || isIosSupported)
+    && (!isAndroidSupported || isAndroidFieldsMissing)
+    && (!isIosSupported || isIosFieldsMissing)
+  );
 
   // Ref to dedupe reporting of content emptiness to the parent, so we only
   // call onContentValidityChange when the computed value actually changes.
@@ -1770,19 +1775,10 @@ export const MobilePushNew = ({
   // supported platforms) changes, mirroring the Save-button gating logic.
   useEffect(() => {
     if (typeof onContentValidityChange !== 'function') return;
-    const isContentEmpty = isAndroidFieldsMissing || isIosFieldsMissing;
-    if (lastReportedIsContentEmptyRef.current === isContentEmpty) return;
-    lastReportedIsContentEmptyRef.current = isContentEmpty;
-    onContentValidityChange({ isContentEmpty });
-  }, [
-    androidContent,
-    iosContent,
-    isAndroidSupported,
-    isIosSupported,
-    isAndroidFieldsMissing,
-    isIosFieldsMissing,
-    onContentValidityChange,
-  ]);
+    if (lastReportedIsContentEmptyRef.current === isMobilePushContentMissing) return;
+    lastReportedIsContentEmptyRef.current = isMobilePushContentMissing;
+    onContentValidityChange({ isContentEmpty: isMobilePushContentMissing });
+  }, [isMobilePushContentMissing, onContentValidityChange]);
 
   // Add changeSourceRef for debounced sync
   const changeSourceRef = useRef(null);
@@ -2201,28 +2197,24 @@ export const MobilePushNew = ({
   const errorInTitle = activeTab === ANDROID ? androidTitleError : iosTitleError;
   const errorInMessage = activeTab === ANDROID ? androidMessageError : iosMessageError;
 
-  // Save button disabled logic: only check enabled platforms
+  // Save button disabled logic: only check enabled platforms, and allow
+  // saving with just one supported platform filled in (see isMobilePushContentMissing).
   const isSaveDisabled = (
-    (isAndroidSupported && (!androidContent?.title?.trim() || !androidContent?.message?.trim()))
-    || (isIosSupported && (!iosContent?.title?.trim() || !iosContent?.message?.trim()))
+    isMobilePushContentMissing
     || templateNameError
     || Object.values(carouselLinkErrors).some((error) => error !== null && error !== "")
     || !isCarouselDataValid()
     || errorInTitle || errorInMessage
   );
 
-  // Validation in handleSave: only show errors for enabled platforms
+  // Validation in handleSave: only enforce content on enabled platforms, and
+  // allow saving with just one supported platform filled in.
   const handleSave = useCallback(() => {
-    if (isAndroidSupported && (!androidContent?.title?.trim() || !androidContent?.message?.trim())) {
+    if (isMobilePushContentMissing) {
       CapNotification.error({
-        message: formatMessage(messages.androidValidationError),
-      });
-      if (onValidationFail) onValidationFail();
-      return;
-    }
-    if (isIosSupported && (!iosContent?.title?.trim() || !iosContent?.message?.trim())) {
-      CapNotification.error({
-        message: formatMessage(messages.iosValidationError),
+        message: formatMessage(
+          isAndroidSupported ? messages.androidValidationError : messages.iosValidationError,
+        ),
       });
       if (onValidationFail) onValidationFail();
       return;
@@ -2583,8 +2575,7 @@ export const MobilePushNew = ({
     createTimeoutRef,
     isAndroidSupported,
     isIosSupported,
-    isAndroidFieldsMissing,
-    isIosFieldsMissing,
+    isMobilePushContentMissing,
     isCarouselDataValid,
     isFullMode,
     templateId,

package/v2Containers/MobilePushNew/tests/utils.test.js

@@ -459,12 +459,21 @@ describe("utils.js", () => {
       })).toBe(true);
     });
 
-    it("returns true when both platforms are supported and one is missing fields", () => {
+    it("returns false when both platforms are supported and only one has valid fields (single-device template allowed)", () => {
       expect(computeIsContentEmpty({
         isAndroidSupported: true,
         isIosSupported: true,
         androidContent: { title: "t", message: "m" },
         iosContent: { title: "", message: "" },
+      })).toBe(false);
+    });
+
+    it("returns true when both platforms are supported and both are missing fields", () => {
+      expect(computeIsContentEmpty({
+        isAndroidSupported: true,
+        isIosSupported: true,
+        androidContent: { title: "", message: "" },
+        iosContent: { title: "", message: "" },
       })).toBe(true);
     });
 

package/v2Containers/MobilePushNew/utils.js

@@ -97,8 +97,10 @@ export const isPlatformFieldsMissing = (isSupported, content) => (
 
 /**
  * Compute whether the Mobile Push content is empty/invalid for reporting to
- * a parent component (e.g. via onContentValidityChange). Content is
- * considered empty when any supported platform is missing required fields.
+ * a parent component (e.g. via onContentValidityChange). Mobile Push allows
+ * saving a template with just one supported platform filled in, so content
+ * is only considered empty when EVERY supported platform is missing its
+ * required fields.
  * @param {Object} params
  * @param {boolean} params.isAndroidSupported
  * @param {boolean} params.isIosSupported
@@ -111,7 +113,9 @@ export const computeIsContentEmpty = ({
   isIosSupported,
   androidContent,
   iosContent,
-}) => (
-  isPlatformFieldsMissing(isAndroidSupported, androidContent)
-  || isPlatformFieldsMissing(isIosSupported, iosContent)
-);
+}) => {
+  if (!isAndroidSupported && !isIosSupported) return false;
+  const isAndroidMissing = isPlatformFieldsMissing(isAndroidSupported, androidContent);
+  const isIosMissing = isPlatformFieldsMissing(isIosSupported, iosContent);
+  return (!isAndroidSupported || isAndroidMissing) && (!isIosSupported || isIosMissing);
+};