@capillarytech/creatives-library 8.0.200 → 8.0.201

package/v2Containers/MobilePushNew/components/MediaUploaders.js

@@ -20,6 +20,7 @@ import CapLabel from "@capillarytech/cap-ui-library/CapLabel";
 import CapSelect from "@capillarytech/cap-ui-library/CapSelect";
 import CapInput from "@capillarytech/cap-ui-library/CapInput";
 import CapError from "@capillarytech/cap-ui-library/CapError";
+import CapTooltip from "@capillarytech/cap-ui-library/CapTooltip";
 import CapImageUpload from "../../../v2Components/CapImageUpload";
 import CapVideoUpload from "../../../v2Components/CapVideoUpload";
 import {
@@ -600,13 +601,19 @@ const MediaUploaders = ({
                 <FormattedMessage {...messages.optionalText} />
               </CapLabel>
             </CapRow>
-            <CapCheckbox
-              checked={button.actionOnClick}
-              onChange={(e) => handleCarouselActionOnClickChange(cardIndex, e.target.checked)}
-              className="action-on-click-checkbox"
+            <CapTooltip
+              title={<FormattedMessage {...messages.carouselActionDisabledMessage} />}
+              placement="topLeft"
             >
-              <FormattedMessage {...messages.actionOnClickBody} />
-            </CapCheckbox>
+              <CapCheckbox
+                checked={button.actionOnClick}
+                onChange={(e) => handleCarouselActionOnClickChange(cardIndex, e.target.checked)}
+                className="action-on-click-checkbox"
+                disabled={true}
+              >
+                <FormattedMessage {...messages.actionOnClickBody} />
+              </CapCheckbox>
+            </CapTooltip>
             <CapRow>
               <CapLabel className="action-description">
                 <FormattedMessage {...messages.actionDescription} />

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

@@ -1132,7 +1132,7 @@ describe('MediaUploaders', () => {
   });
 
   describe('Carousel action link handlers', () => {
-    it('should handle carousel action on click change', () => {
+    it('should render carousel action on click checkbox as disabled with tooltip', () => {
       const onCarouselDataChange = jest.fn();
       renderComponent({
         mediaType: 'CAROUSEL',
@@ -1151,22 +1151,10 @@ describe('MediaUploaders', () => {
         onCarouselDataChange,
       });
 
-      // Find checkbox by class name since it renders with cap-checkbox-v2
+      // Verify checkbox is disabled
       const checkbox = document.querySelector('.cap-checkbox-v2 input[type="checkbox"]');
       if (checkbox) {
-        fireEvent.click(checkbox);
-        expect(onCarouselDataChange).toHaveBeenCalledWith(
-          ANDROID,
-          expect.arrayContaining([
-            expect.objectContaining({
-              buttons: expect.arrayContaining([
-                expect.objectContaining({
-                  actionOnClick: true,
-                })
-              ])
-            })
-          ])
-        );
+        expect(checkbox).toBeDisabled();
       } else {
         // If checkbox not found, just verify component renders
         expect(screen.getByTestId('cap-image-upload')).toBeInTheDocument();

package/v2Containers/MobilePushNew/index.js

@@ -21,6 +21,7 @@ import { intlShape } from "react-intl";
 import "./index.scss";
 import { GA } from "@capillarytech/cap-ui-utils";
 import CapNotification from "@capillarytech/cap-ui-library/CapNotification";
+import { CapModal } from "@capillarytech/cap-react-ui-library";
 import { DAEMON } from "@capillarytech/vulcan-react-sdk/utils/sagaInjectorTypes";
 import globalMessages from "../Cap/messages";
 import * as actions from "./actions";
@@ -529,6 +530,9 @@ const MobilePushNew = ({
     STANDARD_ERROR_MSG: {},
     LIQUID_ERROR_MSG: {},
   });
+  // Modal state for single platform confirmation
+  const [showModal, setShowModal] = useState(false);
+  const [modalContent, setModalContent] = useState({});
   const [androidContent, setAndroidContent] = useState(INITIAL_CONTENT);
 
   const [iosContent, setIosContent] = useState(INITIAL_CONTENT);
@@ -2130,39 +2134,93 @@ const MobilePushNew = ({
     return panes;
   }, [isAndroidSupported, isIosSupported, renderContentFields, formatMessage]);
 
-  // Save button disabled logic: only check enabled platforms
+  // Save button disabled logic: require at least one platform to have data
+  const hasAndroidData = isAndroidSupported && androidContent?.title?.trim() && androidContent?.message?.trim();
+  const hasIosData = isIosSupported && iosContent?.title?.trim() && iosContent?.message?.trim();
+  const hasAnyPlatformData = hasAndroidData || hasIosData;
+
+  // Validation checks for save button
+  const carouselErrors = Object.values(carouselLinkErrors).some((error) => error !== null && error !== "");
+  const carouselValid = isCarouselDataValid();
+
   const isSaveDisabled = (
-    (isAndroidSupported && (!androidContent?.title?.trim() || !androidContent?.message?.trim()))
-    || (isIosSupported && (!iosContent?.title?.trim() || !iosContent?.message?.trim()))
-    || templateNameError
-    || Object.values(carouselLinkErrors).some((error) => error !== null && error !== "")
-    || !isCarouselDataValid()
+    !hasAnyPlatformData // At least one supported platform must have data
+    || (isFullMode && (!templateName || !templateName.trim())) // Template name required in full mode
+    || carouselErrors
+    || !carouselValid
   );
 
-  // Validation in handleSave: only show errors for enabled platforms
-  const handleSave = useCallback(() => {
-    if (isAndroidSupported && (!androidContent?.title?.trim() || !androidContent?.message?.trim())) {
-      CapNotification.error({
-        message: formatMessage(messages.androidValidationError),
-      });
-      if (onValidationFail) onValidationFail();
-      return;
+  // Modal handler functions
+  const setModalContentHandler = useCallback((type) => {
+    if (type === 'ios') {
+      const content = {
+        title: formatMessage(messages.alertMessage),
+        body: formatMessage(messages.iosTemplateNotConfigured),
+        type: 'confirm',
+        id: 'ios',
+      };
+      setModalContent(content);
+      setShowModal(true);
+    } else if (type === 'android') {
+      const content = {
+        title: formatMessage(messages.alertMessage),
+        body: formatMessage(messages.androidTemplateNotConfigured),
+        type: 'confirm',
+        id: 'android',
+      };
+      setModalContent(content);
+      setShowModal(true);
     }
-    if (isIosSupported && (!iosContent?.title?.trim() || !iosContent?.message?.trim())) {
-      CapNotification.error({
-        message: formatMessage(messages.iosValidationError),
-      });
-      if (onValidationFail) onValidationFail();
-      return;
+  }, [formatMessage]);
+
+  const handleCancelModal = useCallback(() => {
+    setShowModal(false);
+    setModalContent({});
+  }, []);
+
+  // Internal save function with optional modal validation skip
+  const handleSaveInternal = useCallback((skipModalValidation = false) => {
+    // Check for single platform data and show modal confirmation (unless skipped)
+    if (!skipModalValidation) {
+      const androidHasData = androidContent?.title?.trim() && androidContent?.message?.trim();
+      const iosHasData = iosContent?.title?.trim() && iosContent?.message?.trim();
+
+      // If both platforms are supported but only one has data, show confirmation modal
+      if (isAndroidSupported && isIosSupported) {
+        if (androidHasData && !iosHasData) {
+          setModalContentHandler('ios'); // Show iOS not configured modal
+          return;
+        }
+        if (iosHasData && !androidHasData) {
+          setModalContentHandler('android'); // Show Android not configured modal
+          return;
+        }
+      }
     }
-    if (templateNameError) {
-      CapNotification.error({
-        message: formatMessage(messages.emptyTemplateErrorMessage),
-      });
-      return;
+
+    // Only validate platforms that have data or are required
+    // If user confirmed via modal, we allow single platform data
+    if (!skipModalValidation) {
+      // In normal flow, require data for all supported platforms
+      if (isAndroidSupported && (!androidContent?.title?.trim() || !androidContent?.message?.trim())) {
+        CapNotification.error({
+          message: formatMessage(messages.androidValidationError),
+        });
+        if (onValidationFail) onValidationFail();
+        return;
+      }
+      if (isIosSupported && (!iosContent?.title?.trim() || !iosContent?.message?.trim())) {
+        CapNotification.error({
+          message: formatMessage(messages.iosValidationError),
+        });
+        if (onValidationFail) onValidationFail();
+        return;
+      }
     }
-    // Only require templateName in full mode
-    // Use ref to get the latest template name value for validation
+    // Note: In modal-confirmed flow (skipModalValidation = true), we skip platform validation
+    // since user has already confirmed they want to save with incomplete platform data
+
+    // Template name validation - only required in full mode
     const currentTemplateName = templateNameRef.current || templateName;
     if (isFullMode && !currentTemplateName?.trim()) {
       CapNotification.error({
@@ -2327,6 +2385,8 @@ const MobilePushNew = ({
       }
 
       // Create payload with enabled platform content and intl
+      // In modal-confirmed flow, we may have intentionally missing platform data
+      const allowSinglePlatform = skipModalValidation;
       const payload = createMobilePushPayloadWithIntl({
         templateName: finalTemplateName,
         androidContent: isAndroidSupported ? processedAndroidContent : undefined,
@@ -2337,6 +2397,7 @@ const MobilePushNew = ({
         sameContent,
         options: {
           mode: params?.mode,
+          allowSinglePlatform,
         },
         intl,
       });
@@ -2516,6 +2577,68 @@ const MobilePushNew = ({
     isCarouselDataValid,
     isFullMode,
     templateId,
+    activeTab,
+    setModalContentHandler,
+  ]);
+
+  // Public save function (with modal validation)
+  const handleSave = useCallback(() => {
+    handleSaveInternal(false);
+  }, [handleSaveInternal]);
+
+  // Save function that skips single platform modal validation
+  const handleSaveWithoutModal = useCallback(() => {
+    handleSaveInternal(true);
+  }, [handleSaveInternal]);
+
+  const handleConfirmModal = useCallback(() => {
+    setShowModal(false);
+    setModalContent({});
+    // Proceed with save after modal confirmation - skip single platform validation
+    handleSaveWithoutModal();
+  }, [handleSaveWithoutModal]);
+
+  const liquidMiddleWare = useCallback(() => {
+    const onError = ({ standardErrors, liquidErrors }) => {
+      setErrorMessage((prev) => ({
+        STANDARD_ERROR_MSG: { ...prev.STANDARD_ERROR_MSG, ...standardErrors },
+        LIQUID_ERROR_MSG: { ...prev.LIQUID_ERROR_MSG, ...liquidErrors },
+      }));
+    };
+    const onSuccess = () => handleSave();
+
+    validateMobilePushContent([androidContent, iosContent], {
+      currentTab: activeTab === ANDROID ? 1 : 2,
+      onError,
+      onSuccess,
+      getLiquidTags: globalActionsProps.getLiquidTags,
+      formatMessage,
+      messages: formBuilderMessages,
+      tagLookupMap: metaEntities?.tagLookupMap || {},
+      eventContextTags: metaEntities?.eventContextTags || [],
+      isLiquidFlow: hasLiquidSupportFeature(),
+      forwardedTags: {},
+      skipTags: (tag) => {
+        const skipRegexes = [
+          /dynamic_expiry_date_after_\d+_days\.FORMAT_\d/,
+          /unsubscribe\(#[a-zA-Z\d]{6}\)/,
+          /Link_to_[a-zA-z]/,
+          /SURVEY.*\.TOKEN/,
+          /^[A-Za-z].*\([a-zA-Z\d]*\)/,
+        ];
+        return skipRegexes.some((regex) => regex.test(tag));
+      },
+      singleTab: getSingleTab(accountData),
+    });
+  }, [
+    androidContent,
+    iosContent,
+    activeTab,
+    globalActionsProps,
+    formatMessage,
+    metaEntities,
+    accountData,
+    handleSave,
   ]);
 
   // Helper to sync content between platforms
@@ -2547,7 +2670,9 @@ const MobilePushNew = ({
       setTemplateName(value);
       // Update ref to always have the latest value
       templateNameRef.current = value;
-      const isInvalid = !value || value.trim() === "";
+      // Only set error if user has interacted and field is empty
+      // In full mode, template name is required only at save time, not during typing
+      const isInvalid = isFullMode && value.trim() === "";
       setTemplateNameError(isInvalid);
       if (value && onEnterTemplateName) {
         onEnterTemplateName();
@@ -2555,7 +2680,7 @@ const MobilePushNew = ({
         onRemoveTemplateName();
       }
     },
-    [onEnterTemplateName, onRemoveTemplateName]
+    [onEnterTemplateName, onRemoveTemplateName, isFullMode]
   );
 
   // --- Only show template name input in full mode (not library/consumer mode) ---
@@ -2584,47 +2709,6 @@ const MobilePushNew = ({
     [isFullMode, formatMessage, templateName, onTemplateNameChange, templateNameError, params?.id]
   );
 
-  const liquidMiddleWare = useCallback(() => {
-    const onError = ({ standardErrors, liquidErrors }) => {
-      setErrorMessage((prev) => ({
-        STANDARD_ERROR_MSG: { ...prev.STANDARD_ERROR_MSG, ...standardErrors },
-        LIQUID_ERROR_MSG: { ...prev.LIQUID_ERROR_MSG, ...liquidErrors },
-      }));
-    };
-    const onSuccess = () => handleSave();
-
-    validateMobilePushContent([androidContent, iosContent], {
-      currentTab: activeTab === ANDROID ? 1 : 2,
-      onError,
-      onSuccess,
-      getLiquidTags: globalActionsProps.getLiquidTags,
-      formatMessage,
-      messages: formBuilderMessages,
-      tagLookupMap: metaEntities?.tagLookupMap || {},
-      eventContextTags: metaEntities?.eventContextTags || [],
-      isLiquidFlow: hasLiquidSupportFeature(),
-      forwardedTags: {},
-      skipTags: (tag) => {
-        const skipRegexes = [
-          /dynamic_expiry_date_after_\d+_days\.FORMAT_\d/,
-          /unsubscribe\(#[a-zA-Z\d]{6}\)/,
-          /Link_to_[a-zA-z]/,
-          /SURVEY.*\.TOKEN/,
-          /^[A-Za-z].*\([a-zA-Z\d]*\)/,
-        ];
-        return skipRegexes.some((regex) => regex.test(tag));
-      },
-      singleTab: getSingleTab(accountData),
-    });
-  }, [
-    androidContent,
-    iosContent,
-    activeTab,
-    globalActionsProps,
-    formatMessage,
-    metaEntities,
-    accountData,
-  ]);
 
   const isLiquidFlow = hasLiquidSupportFeature();
 
@@ -2945,6 +3029,24 @@ const MobilePushNew = ({
           />
         </CapColumn>
       </CapRow>
+
+      {/* Modal for single platform confirmation */}
+      <CapModal
+        visible={showModal}
+        title={modalContent.title}
+        onOk={handleConfirmModal}
+        onCancel={handleCancelModal}
+        footer={[
+          <CapButton key="cancel" onClick={handleCancelModal}>
+            No
+          </CapButton>,
+          <CapButton key="confirm" type="primary" onClick={handleConfirmModal}>
+            Yes
+          </CapButton>,
+        ]}
+      >
+        {modalContent.body}
+      </CapModal>
     </CapSpin>
   );
 };

package/v2Containers/MobilePushNew/messages.js

@@ -91,6 +91,10 @@ export default defineMessages({
     id: `${scope}.actionOnClickBody`,
     defaultMessage: 'Action on click of notification body',
   },
+  carouselActionDisabledMessage: {
+    id: `${scope}.carouselActionDisabledMessage`,
+    defaultMessage: 'This section is being revamped. Till then it will remain disabled.',
+  },
   actionDescription: {
     id: `${scope}.actionDescription`,
     defaultMessage: 'Define where the users will redirect when they click on the body of the push notification',
@@ -252,6 +256,10 @@ export default defineMessages({
     id: `${scope}.contentValidationError`,
     defaultMessage: '{platform} content must have title and message',
   },
+  singlePlatformContentMissing: {
+    id: `${scope}.singlePlatformContentMissing`,
+    defaultMessage: 'At least one platform must have title and message',
+  },
   // File validation error messages for useUpload.js
   fileSizeError: {
     id: `${scope}.fileSizeError`,
@@ -269,4 +277,17 @@ export default defineMessages({
     id: `${scope}.gifFileTypeError`,
     defaultMessage: 'Only GIF files are allowed',
   },
+  // Modal confirmation messages for single platform data
+  alertMessage: {
+    id: `${scope}.alertMessage`,
+    defaultMessage: 'Alert',
+  },
+  androidTemplateNotConfigured: {
+    id: `${scope}.androidTemplateNotConfigured`,
+    defaultMessage: 'Android template is not configured. Continue save?',
+  },
+  iosTemplateNotConfigured: {
+    id: `${scope}.iosTemplateNotConfigured`,
+    defaultMessage: 'IOS template is not configured, Save without IOS template',
+  },
 });

package/v2Containers/MobilePushNew/sagas.js

@@ -24,7 +24,11 @@ export function* createTemplate({template, callback}) {
       errorMsg,
     });
   } catch (error) {
+    // Always dispatch failure action first, then call callback if provided
     yield put({ type: types.CREATE_TEMPLATE_FAILURE, error, errorMsg });
+    if (callback) {
+      yield call(callback, new Error(errorMsg || error.message || error.toString()));
+    }
   }
 }
 export function* uploadAsset(action) {
@@ -91,7 +95,11 @@ export function* editTemplate({ template, callback }) {
       yield call(callback, editResponseData);
     }
   } catch (error) {
+    // Always dispatch failure action first, then call callback if provided
     yield put({ type: types.EDIT_TEMPLATE_FAILURE, error, errorMsg });
+    if (callback) {
+      yield call(callback, new Error(errorMsg || error.message || error.toString()));
+    }
   }
 }
 

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

@@ -87,11 +87,7 @@ describe('MobilePushNew Sagas', () => {
           [matchers.call.fn(Api.createMobilePushTemplateV2), mockResponse],
         ])
         .call(Api.createMobilePushTemplateV2, template)
-        .put({
-          type: types.CREATE_TEMPLATE_FAILURE,
-          error: 'Bad Request',
-          errorMsg: 'Bad Request',
-        })
+        .call(callback, new Error('Bad Request'))
         .run();
     });
 
@@ -125,11 +121,8 @@ describe('MobilePushNew Sagas', () => {
           [matchers.call.fn(Api.createMobilePushTemplateV2), throwError(error)],
         ])
         .call(Api.createMobilePushTemplateV2, template)
-        .put({
-          type: types.CREATE_TEMPLATE_FAILURE,
-          error,
-          errorMsg: undefined,
-        })
+        .put({ type: types.CREATE_TEMPLATE_FAILURE, error, errorMsg: undefined })
+        .call(callback, new Error('Network error'))
         .run();
     });
 
@@ -372,11 +365,7 @@ describe('MobilePushNew Sagas', () => {
           [matchers.call.fn(Api.createMobilePushTemplateV2), mockResponse],
         ])
         .call(Api.createMobilePushTemplateV2, template)
-        .put({
-          type: types.EDIT_TEMPLATE_FAILURE,
-          error: 'Bad Request',
-          errorMsg: 'Bad Request',
-        })
+        .call(callback, new Error('Bad Request'))
         .run();
     });
 
@@ -392,11 +381,7 @@ describe('MobilePushNew Sagas', () => {
           [matchers.call.fn(Api.createMobilePushTemplateV2), mockResponse],
         ])
         .call(Api.createMobilePushTemplateV2, template)
-        .put({
-          type: types.EDIT_TEMPLATE_FAILURE,
-          error: 'Internal Server Error',
-          errorMsg: 'Internal Server Error',
-        })
+        .call(callback, new Error('Internal Server Error'))
         .run();
     });
 
@@ -408,11 +393,8 @@ describe('MobilePushNew Sagas', () => {
           [matchers.call.fn(Api.createMobilePushTemplateV2), throwError(error)],
         ])
         .call(Api.createMobilePushTemplateV2, template)
-        .put({
-          type: types.EDIT_TEMPLATE_FAILURE,
-          error,
-          errorMsg: undefined,
-        })
+        .put({ type: types.EDIT_TEMPLATE_FAILURE, error, errorMsg: undefined })
+        .call(callback, new Error('Network error'))
         .run();
     });
 
@@ -459,11 +441,7 @@ describe('MobilePushNew Sagas', () => {
           [matchers.call.fn(Api.createMobilePushTemplateV2), mockResponse],
         ])
         .call(Api.createMobilePushTemplateV2, template)
-        .put({
-          type: types.EDIT_TEMPLATE_FAILURE,
-          error: 'HTTP Error 400',
-          errorMsg: 'HTTP Error 400',
-        })
+        .call(callback, new Error('HTTP Error 400'))
         .run();
     });
 
@@ -479,11 +457,7 @@ describe('MobilePushNew Sagas', () => {
           [matchers.call.fn(Api.createMobilePushTemplateV2), mockResponse],
         ])
         .call(Api.createMobilePushTemplateV2, template)
-        .put({
-          type: types.EDIT_TEMPLATE_FAILURE,
-          error: 'HTTP Error 404',
-          errorMsg: 'HTTP Error 404',
-        })
+        .call(callback, new Error('HTTP Error 404'))
         .run();
     });
 
@@ -499,11 +473,7 @@ describe('MobilePushNew Sagas', () => {
           [matchers.call.fn(Api.createMobilePushTemplateV2), mockResponse],
         ])
         .call(Api.createMobilePushTemplateV2, template)
-        .put({
-          type: types.EDIT_TEMPLATE_FAILURE,
-          error: 'HTTP Error 422',
-          errorMsg: 'HTTP Error 422',
-        })
+        .call(callback, new Error('HTTP Error 422'))
         .run();
     });
 
@@ -519,11 +489,7 @@ describe('MobilePushNew Sagas', () => {
           [matchers.call.fn(Api.createMobilePushTemplateV2), mockResponse],
         ])
         .call(Api.createMobilePushTemplateV2, template)
-        .put({
-          type: types.EDIT_TEMPLATE_FAILURE,
-          error: 'HTTP Error 403',
-          errorMsg: 'HTTP Error 403',
-        })
+        .call(callback, new Error('HTTP Error 403'))
         .run();
     });
 

package/v2Containers/Templates/index.js

@@ -1357,19 +1357,16 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           break;
         }
         case MOBILE_PUSH:
-          if (!commonUtil.hasNewMobilePushFeatureEnabled()) {
-            templateData.content = template;
-          } else {
-            const mpushData = get(template, 'versions.base', template);
-            const androidData = get(mpushData, 'ANDROID') || get(mpushData, 'androidContent');
-            const iosData = get(mpushData, 'IOS') || get(mpushData, 'iosContent');
-            let mpushListingData = androidData;
-            if (isEmpty(androidData) || !androidData?.title) {
-              mpushListingData = iosData;
-            };
-            const { title, message, expandableDetails: { style = '', image, carouselData = [], ctas = [], media = [] } = {} } = mpushListingData || {};
-            const {url = ''} = media?.[0] || {};
-            templateData.content = (
+          const mpushData = get(template, 'versions.base', template);
+          const androidData = get(mpushData, 'ANDROID') || get(mpushData, 'androidContent');
+          const iosData = get(mpushData, 'IOS') || get(mpushData, 'iosContent');
+          let mpushListingData = androidData;
+          if (isEmpty(androidData) || !androidData?.title) {
+            mpushListingData = iosData;
+          };
+          const { title, message, expandableDetails: { style = '', image, carouselData = [], ctas = [], media = [] } = {} } = mpushListingData || {};
+          const {url = ''} = media?.[0] || {};
+          templateData.content = (
               <div className='mobilepush-container'>
                 <div className="app-header">
                   <div className="app-header-left">
@@ -1441,8 +1438,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
                 )}
               </div>
             );
-            templateData.isNewMobilePush = commonUtil.hasNewMobilePushFeatureEnabled();
-          }
+          templateData.isNewMobilePush = true;
           break;
         case INAPP:
           templateData.content = template;