@capillarytech/creatives-library 8.0.201 → 8.0.204

package/v2Containers/Email/index.js

@@ -2516,9 +2516,6 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
         });
         obj.versions.history.push(newdata);
       }
-      if (index === "template-subject") {
-        obj.versions.history[0].subject = newdata;
-      }
     });
     //const data = formData[`${this.state.currentTab - 1}`];
     obj.name = formData['template-name'];

package/v2Containers/MobilePushNew/components/MediaUploaders.js

@@ -20,7 +20,6 @@ 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 {
@@ -601,19 +600,13 @@ const MediaUploaders = ({
                 <FormattedMessage {...messages.optionalText} />
               </CapLabel>
             </CapRow>
-            <CapTooltip
-              title={<FormattedMessage {...messages.carouselActionDisabledMessage} />}
-              placement="topLeft"
+            <CapCheckbox
+              checked={button.actionOnClick}
+              onChange={(e) => handleCarouselActionOnClickChange(cardIndex, e.target.checked)}
+              className="action-on-click-checkbox"
             >
-              <CapCheckbox
-                checked={button.actionOnClick}
-                onChange={(e) => handleCarouselActionOnClickChange(cardIndex, e.target.checked)}
-                className="action-on-click-checkbox"
-                disabled={true}
-              >
-                <FormattedMessage {...messages.actionOnClickBody} />
-              </CapCheckbox>
-            </CapTooltip>
+              <FormattedMessage {...messages.actionOnClickBody} />
+            </CapCheckbox>
             <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 render carousel action on click checkbox as disabled with tooltip', () => {
+    it('should handle carousel action on click change', () => {
       const onCarouselDataChange = jest.fn();
       renderComponent({
         mediaType: 'CAROUSEL',
@@ -1151,10 +1151,22 @@ describe('MediaUploaders', () => {
         onCarouselDataChange,
       });
 
-      // Verify checkbox is disabled
+      // Find checkbox by class name since it renders with cap-checkbox-v2
       const checkbox = document.querySelector('.cap-checkbox-v2 input[type="checkbox"]');
       if (checkbox) {
-        expect(checkbox).toBeDisabled();
+        fireEvent.click(checkbox);
+        expect(onCarouselDataChange).toHaveBeenCalledWith(
+          ANDROID,
+          expect.arrayContaining([
+            expect.objectContaining({
+              buttons: expect.arrayContaining([
+                expect.objectContaining({
+                  actionOnClick: true,
+                })
+              ])
+            })
+          ])
+        );
       } else {
         // If checkbox not found, just verify component renders
         expect(screen.getByTestId('cap-image-upload')).toBeInTheDocument();

package/v2Containers/MobilePushNew/index.js

@@ -21,7 +21,6 @@ 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";
@@ -530,9 +529,6 @@ 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);
@@ -2134,93 +2130,39 @@ const MobilePushNew = ({
     return panes;
   }, [isAndroidSupported, isIosSupported, renderContentFields, formatMessage]);
 
-  // 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();
-
+  // Save button disabled logic: only check enabled platforms
   const isSaveDisabled = (
-    !hasAnyPlatformData // At least one supported platform must have data
-    || (isFullMode && (!templateName || !templateName.trim())) // Template name required in full mode
-    || carouselErrors
-    || !carouselValid
+    (isAndroidSupported && (!androidContent?.title?.trim() || !androidContent?.message?.trim()))
+    || (isIosSupported && (!iosContent?.title?.trim() || !iosContent?.message?.trim()))
+    || templateNameError
+    || Object.values(carouselLinkErrors).some((error) => error !== null && error !== "")
+    || !isCarouselDataValid()
   );
 
-  // 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);
+  // 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;
     }
-  }, [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 (isIosSupported && (!iosContent?.title?.trim() || !iosContent?.message?.trim())) {
+      CapNotification.error({
+        message: formatMessage(messages.iosValidationError),
+      });
+      if (onValidationFail) onValidationFail();
+      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;
-      }
+    if (templateNameError) {
+      CapNotification.error({
+        message: formatMessage(messages.emptyTemplateErrorMessage),
+      });
+      return;
     }
-    // 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
+    // Only require templateName in full mode
+    // Use ref to get the latest template name value for validation
     const currentTemplateName = templateNameRef.current || templateName;
     if (isFullMode && !currentTemplateName?.trim()) {
       CapNotification.error({
@@ -2385,8 +2327,6 @@ 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,
@@ -2397,7 +2337,6 @@ const MobilePushNew = ({
         sameContent,
         options: {
           mode: params?.mode,
-          allowSinglePlatform,
         },
         intl,
       });
@@ -2577,68 +2516,6 @@ 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
@@ -2670,9 +2547,7 @@ const MobilePushNew = ({
       setTemplateName(value);
       // Update ref to always have the latest value
       templateNameRef.current = value;
-      // 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() === "";
+      const isInvalid = !value || value.trim() === "";
       setTemplateNameError(isInvalid);
       if (value && onEnterTemplateName) {
         onEnterTemplateName();
@@ -2680,7 +2555,7 @@ const MobilePushNew = ({
         onRemoveTemplateName();
       }
     },
-    [onEnterTemplateName, onRemoveTemplateName, isFullMode]
+    [onEnterTemplateName, onRemoveTemplateName]
   );
 
   // --- Only show template name input in full mode (not library/consumer mode) ---
@@ -2709,6 +2584,47 @@ 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();
 
@@ -3029,24 +2945,6 @@ 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,10 +91,6 @@ 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',
@@ -256,10 +252,6 @@ 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`,
@@ -277,17 +269,4 @@ 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,11 +24,7 @@ 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) {
@@ -95,11 +91,7 @@ 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,7 +87,11 @@ describe('MobilePushNew Sagas', () => {
           [matchers.call.fn(Api.createMobilePushTemplateV2), mockResponse],
         ])
         .call(Api.createMobilePushTemplateV2, template)
-        .call(callback, new Error('Bad Request'))
+        .put({
+          type: types.CREATE_TEMPLATE_FAILURE,
+          error: 'Bad Request',
+          errorMsg: 'Bad Request',
+        })
         .run();
     });
 
@@ -121,8 +125,11 @@ describe('MobilePushNew Sagas', () => {
           [matchers.call.fn(Api.createMobilePushTemplateV2), throwError(error)],
         ])
         .call(Api.createMobilePushTemplateV2, template)
-        .put({ type: types.CREATE_TEMPLATE_FAILURE, error, errorMsg: undefined })
-        .call(callback, new Error('Network error'))
+        .put({
+          type: types.CREATE_TEMPLATE_FAILURE,
+          error,
+          errorMsg: undefined,
+        })
         .run();
     });
 
@@ -365,7 +372,11 @@ describe('MobilePushNew Sagas', () => {
           [matchers.call.fn(Api.createMobilePushTemplateV2), mockResponse],
         ])
         .call(Api.createMobilePushTemplateV2, template)
-        .call(callback, new Error('Bad Request'))
+        .put({
+          type: types.EDIT_TEMPLATE_FAILURE,
+          error: 'Bad Request',
+          errorMsg: 'Bad Request',
+        })
         .run();
     });
 
@@ -381,7 +392,11 @@ describe('MobilePushNew Sagas', () => {
           [matchers.call.fn(Api.createMobilePushTemplateV2), mockResponse],
         ])
         .call(Api.createMobilePushTemplateV2, template)
-        .call(callback, new Error('Internal Server Error'))
+        .put({
+          type: types.EDIT_TEMPLATE_FAILURE,
+          error: 'Internal Server Error',
+          errorMsg: 'Internal Server Error',
+        })
         .run();
     });
 
@@ -393,8 +408,11 @@ describe('MobilePushNew Sagas', () => {
           [matchers.call.fn(Api.createMobilePushTemplateV2), throwError(error)],
         ])
         .call(Api.createMobilePushTemplateV2, template)
-        .put({ type: types.EDIT_TEMPLATE_FAILURE, error, errorMsg: undefined })
-        .call(callback, new Error('Network error'))
+        .put({
+          type: types.EDIT_TEMPLATE_FAILURE,
+          error,
+          errorMsg: undefined,
+        })
         .run();
     });
 
@@ -441,7 +459,11 @@ describe('MobilePushNew Sagas', () => {
           [matchers.call.fn(Api.createMobilePushTemplateV2), mockResponse],
         ])
         .call(Api.createMobilePushTemplateV2, template)
-        .call(callback, new Error('HTTP Error 400'))
+        .put({
+          type: types.EDIT_TEMPLATE_FAILURE,
+          error: 'HTTP Error 400',
+          errorMsg: 'HTTP Error 400',
+        })
         .run();
     });
 
@@ -457,7 +479,11 @@ describe('MobilePushNew Sagas', () => {
           [matchers.call.fn(Api.createMobilePushTemplateV2), mockResponse],
         ])
         .call(Api.createMobilePushTemplateV2, template)
-        .call(callback, new Error('HTTP Error 404'))
+        .put({
+          type: types.EDIT_TEMPLATE_FAILURE,
+          error: 'HTTP Error 404',
+          errorMsg: 'HTTP Error 404',
+        })
         .run();
     });
 
@@ -473,7 +499,11 @@ describe('MobilePushNew Sagas', () => {
           [matchers.call.fn(Api.createMobilePushTemplateV2), mockResponse],
         ])
         .call(Api.createMobilePushTemplateV2, template)
-        .call(callback, new Error('HTTP Error 422'))
+        .put({
+          type: types.EDIT_TEMPLATE_FAILURE,
+          error: 'HTTP Error 422',
+          errorMsg: 'HTTP Error 422',
+        })
         .run();
     });
 
@@ -489,7 +519,11 @@ describe('MobilePushNew Sagas', () => {
           [matchers.call.fn(Api.createMobilePushTemplateV2), mockResponse],
         ])
         .call(Api.createMobilePushTemplateV2, template)
-        .call(callback, new Error('HTTP Error 403'))
+        .put({
+          type: types.EDIT_TEMPLATE_FAILURE,
+          error: 'HTTP Error 403',
+          errorMsg: 'HTTP Error 403',
+        })
         .run();
     });
 

package/v2Containers/Templates/index.js

@@ -1357,16 +1357,19 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           break;
         }
         case MOBILE_PUSH:
-          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 = (
+          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 = (
               <div className='mobilepush-container'>
                 <div className="app-header">
                   <div className="app-header-left">
@@ -1438,7 +1441,8 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
                 )}
               </div>
             );
-          templateData.isNewMobilePush = true;
+            templateData.isNewMobilePush = commonUtil.hasNewMobilePushFeatureEnabled();
+          }
           break;
         case INAPP:
           templateData.content = template;