@capillarytech/creatives-library 8.0.139 → 8.0.140

package/containers/Cap/tests/__snapshots__/index.test.js.snap

@@ -281,6 +281,7 @@ exports[`<Cap /> should render its children 1`] = `
         "creatives.componentsV2.FTP.message": "Message",
         "creatives.componentsV2.FTP.search": "Search",
         "creatives.componentsV2.Footer.header": "This is the Footer component !",
+        "creatives.componentsV2.FormBuilder.base64ImageError": "Base64 images are not allowed. Please upload your image to a gallery and use it, or add the image URL instead.",
         "creatives.componentsV2.FormBuilder.cancel": "Cancel",
         "creatives.componentsV2.FormBuilder.contentNotValidLanguage": "Content is not valid for language:",
         "creatives.componentsV2.FormBuilder.dragAndDrop": "Drag and drop image here",

package/initialReducer.js

@@ -15,6 +15,7 @@ import galleryReducer from './v2Containers/Assets/Gallery/reducer';
 import CapCollapsibleLeftNavigationReducer from '@capillarytech/cap-ui-library/CapCollapsibleLeftNavigation/reducer';
 import { AIRA_REDUCER_DOMAIN, askAiraReducer } from '@capillarytech/cap-ui-library/CapAskAira';
 import previewAndTestReducer from './v2Components/TestAndPreviewSlidebox/reducer';
+import inAppReducer from './v2Containers/InApp/reducer';
 
 export const initialReducer = {
   language: languageProviderReducer,
@@ -33,4 +34,5 @@ export const initialReducer = {
   gallery: galleryReducer,
   navigationConfig: CapCollapsibleLeftNavigationReducer,
   previewAndTest: previewAndTestReducer,
+  inapp: inAppReducer,
 };

package/package.json

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

package/services/api.js

@@ -684,4 +684,9 @@ export const updateTestMessageMeta = (payload) => {
   return request(url, getAPICallObject('POST', payload?.data, false, true));
 };
 
+export const getBeePopupBuilderToken = () => {
+  const url = `${API_ENDPOINT}/common/getInappTokenData`;
+  return request(url, getAPICallObject('GET'));
+};
+
 export {request, getAPICallObject};

package/translations/en.json

@@ -256,6 +256,7 @@
   "creatives.componentsV2.FormBuilder.uploadComputer": "Your computer",
   "creatives.componentsV2.FormBuilder.uploadGallery": "Gallery",
   "creatives.componentsV2.FormBuilder.yes": "Yes",
+  "creatives.componentsV2.FormBuilder.base64ImageError": "Base64 images are not allowed. Please upload your image to a gallery and use it, or add the image URL instead.",
   "creatives.componentsV2.Header.cancel": "Cancel",
   "creatives.componentsV2.Header.header": "This is the Header component !",
   "creatives.componentsV2.Header.preview": "Preview",

package/utils/content.js

@@ -0,0 +1,15 @@
+import { BASE64_IMAGE_REGEX, BASE64_IMAGE_ERROR_MESSAGE } from '../v2Containers/Cap/constants';
+
+export const containsBase64Images = ({content, CapNotification, callback}) => {
+    if (!content || typeof content !== 'string') {
+      return false;
+    }
+    // Create a new regex instance to avoid global flag state issues
+    const regex = new RegExp(BASE64_IMAGE_REGEX.source, BASE64_IMAGE_REGEX.flags);
+    if (regex.test(content)) { 
+      CapNotification && CapNotification.error(BASE64_IMAGE_ERROR_MESSAGE);
+      callback && callback();
+      return true;
+    }
+    return false;
+  };

package/utils/tests/tagValidations.test.js

@@ -10,6 +10,7 @@ import {
   skipTags,
   isInsideLiquidBlock,
 } from '../tagValidations';
+import { containsBase64Images } from '../content';
 import { eventContextTags } from '../../v2Containers/TagList/tests/mockdata';
 
 describe("check if curly brackets are balanced", () => {
@@ -933,3 +934,114 @@ describe('isInsideLiquidBlock', () => {
     expect(isInsideLiquidBlock(content, blockEnd - 1)).toBe(true);
   });
 });
+
+describe('containsBase64Images', () => {
+  let mockCapNotification;
+  let mockCallback;
+
+  beforeEach(() => {
+    mockCapNotification = {
+      error: jest.fn()
+    };
+    mockCallback = jest.fn();
+  });
+
+  it('should return false for empty or null content', () => {
+    expect(containsBase64Images({content: null})).toBe(false);
+    expect(containsBase64Images({content: undefined})).toBe(false);
+    expect(containsBase64Images({content: ''})).toBe(false);
+    expect(containsBase64Images({content: '   '})).toBe(false);
+  });
+
+  it('should return false for content without images', () => {
+    const content = '<div><p>Hello world</p></div>';
+    expect(containsBase64Images({content})).toBe(false);
+    expect(mockCapNotification.error).not.toHaveBeenCalled();
+  });
+
+  it('should return false for content with regular image URLs', () => {
+    const content = '<img src="https://example.com/image.jpg" alt="test" />';
+    expect(containsBase64Images({content, CapNotification: mockCapNotification})).toBe(false);
+    expect(mockCapNotification.error).not.toHaveBeenCalled();
+  });
+
+  it('should return true for content with base64 images and trigger notification', () => {
+    const content = '<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg==" alt="test" />';
+    expect(containsBase64Images({content, CapNotification: mockCapNotification, callback: mockCallback})).toBe(true);
+    
+    expect(mockCapNotification.error).toHaveBeenCalledWith({
+      key: 'base64Error',
+      message: 'Base64 images are not allowed. Please upload your image to a gallery and use it, or add the image URL instead.',
+      description: 'Base64 images are not allowed. Please upload your image to a gallery and use it, or add the image URL instead.',
+    });
+    expect(mockCallback).toHaveBeenCalled();
+  });
+
+  it('should return true for content with multiple base64 images', () => {
+    const content = `
+      <div>
+        <img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD..." alt="image1" />
+        <p>Some text</p>
+        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP//..." alt="image2" />
+      </div>
+    `;
+    expect(containsBase64Images({content, CapNotification: mockCapNotification})).toBe(true);
+    expect(mockCapNotification.error).toHaveBeenCalled();
+  });
+
+  it('should return false for content with data URLs that are not images', () => {
+    const content = '<a href="data:text/plain;base64,SGVsbG8gV29ybGQ=">Download</a>';
+    expect(containsBase64Images({content, CapNotification: mockCapNotification})).toBe(false);
+    expect(mockCapNotification.error).not.toHaveBeenCalled();
+  });
+
+  it('should handle various image formats', () => {
+    const pngContent = '<img src="data:image/png;base64,iVBORw0..." />';
+    const jpegContent = '<img src="data:image/jpeg;base64,/9j/4AAQ..." />';
+    const gifContent = '<img src="data:image/gif;base64,R0lGODlh..." />';
+    const webpContent = '<img src="data:image/webp;base64,UklGRi..." />';
+    
+    expect(containsBase64Images({content: pngContent, CapNotification: mockCapNotification})).toBe(true);
+    expect(containsBase64Images({content: jpegContent, CapNotification: mockCapNotification})).toBe(true);
+    expect(containsBase64Images({content: gifContent, CapNotification: mockCapNotification})).toBe(true);
+    expect(containsBase64Images({content: webpContent, CapNotification: mockCapNotification})).toBe(true);
+    
+    expect(mockCapNotification.error).toHaveBeenCalledTimes(4);
+  });
+
+  it('should handle mixed content', () => {
+    const content = `
+      <div>
+        <img src="https://example.com/regular-image.jpg" alt="regular" />
+        <img src="data:image/png;base64,iVBORw0..." alt="base64" />
+        <img src="/local/path/image.gif" alt="local" />
+      </div>
+    `;
+    expect(containsBase64Images({content, CapNotification: mockCapNotification})).toBe(true);
+    expect(mockCapNotification.error).toHaveBeenCalled();
+  });
+
+  it('should work without CapNotification parameter', () => {
+    const content = '<img src="data:image/png;base64,iVBORw0..." alt="test" />';
+    expect(containsBase64Images({content})).toBe(true);
+    // Should not throw error when CapNotification is undefined
+  });
+
+  it('should work without callback parameter', () => {
+    const content = '<img src="data:image/png;base64,iVBORw0..." alt="test" />';
+    expect(containsBase64Images({content, CapNotification: mockCapNotification})).toBe(true);
+    expect(mockCapNotification.error).toHaveBeenCalled();
+    // Should not throw error when callback is undefined
+  });
+
+  it('should execute callback only when base64 images are found', () => {
+    const contentWithBase64 = '<img src="data:image/png;base64,iVBORw0..." alt="test" />';
+    const contentWithoutBase64 = '<img src="https://example.com/image.jpg" alt="test" />';
+    
+    containsBase64Images({content: contentWithBase64, callback: mockCallback});
+    expect(mockCallback).toHaveBeenCalledTimes(1);
+    
+    containsBase64Images({content: contentWithoutBase64, callback: mockCallback});
+    expect(mockCallback).toHaveBeenCalledTimes(1); // Should still be 1, not called again
+  });
+});

package/v2Components/FormBuilder/index.js

@@ -48,7 +48,8 @@ import { makeSelectMetaEntities, selectCurrentOrgDetails, selectLiquidStateDetai
 import * as actions from "../../v2Containers/Cap/actions";
 import './_formBuilder.scss';
 import {updateCharCount, checkUnicode} from "../../utils/smsCharCountV2";
-import { checkSupport, extractNames, preprocessHtml, validateIfTagClosed } from '../../utils/tagValidations';
+import { checkSupport, extractNames, preprocessHtml, validateIfTagClosed} from '../../utils/tagValidations';
+import { containsBase64Images } from '../../utils/content';
 import { SMS, MOBILE_PUSH, LINE, ENABLE_AI_SUGGESTIONS,AI_CONTENT_BOT_DISABLED, EMAIL, LIQUID_SUPPORTED_CHANNELS, INAPP } from '../../v2Containers/CreativesContainer/constants';
 import globalMessages from '../../v2Containers/Cap/messages';
 import { convert } from 'html-to-text';
@@ -982,6 +983,13 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
               return false;
             }
             const tagValidationResponse = this.validateTags(content, tags, injectedTags, isEmail);
+            
+            // Check for base64 images in email content
+            isEmail && containsBase64Images({content, callback:()=>{
+              tagValidationResponse.valid = false;
+              tagValidationResponse.hasBase64Images = true;
+            }})
+            
             if (errorData[index][currentLang] === undefined) {
               errorData[index][currentLang] = {};
             }
@@ -1012,6 +1020,9 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                     isLiquidValid = true;
                   }
                 }
+                if (tagValidationResponse?.hasBase64Images) {
+                  errorString += this.props.intl.formatMessage(messages.base64ImageError);
+                }
               }
             }
           }
@@ -3564,6 +3575,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
               }
             }
             const { currentTab, formData } = this.state;
+            console.log('3363 currentTab', currentTab, formData);
             const supportedLanguages = (formData[currentTab - 1] || {}).selectedLanguages || {};
             const currentLang = supportedLanguages[langTab - 1];
 

package/v2Components/FormBuilder/messages.js

@@ -98,4 +98,8 @@ export default defineMessages({
     id: 'creatives.componentsV2.FormBuilder.liquidSpinText',
     defaultMessage: 'Validating the template, it might take a few seconds',
   },
+  base64ImageError: {
+    id: 'creatives.componentsV2.FormBuilder.base64ImageError',
+    defaultMessage: 'Base64 images are not allowed. Please upload your image to a gallery and use it, or add the image URL instead.',
+  },
 });

package/v2Components/MobilePushPreviewV2/index.js

@@ -45,6 +45,14 @@ class MobilePushPreviewV2 extends React.Component { // eslint-disable-line react
     if (channel === INAPP.toUpperCase()) {
       const androidContent = get(templateData, 'versions.base.content.ANDROID') || get(templateData, 'androidContent');
       const iosContent = get(templateData, 'versions.base.content.IOS') || get(templateData, 'iosContent');
+      const isBeeFreeTemplate = get(androidContent, 'isBEEeditor') || get(iosContent, 'isBEEeditor');
+      if (isBeeFreeTemplate) {
+        content = {
+          inAppPreviewContent: device === ANDROID.toLowerCase() ? androidContent?.beeHtml : iosContent?.beeHtml,
+          isBeeFreeTemplate: true,
+        };
+        return content;
+      }
       const androidPreviewContent = {
         templateTitle: androidContent?.title,
         templateMsg: androidContent?.message,

package/v2Components/TemplatePreview/assets/images/empty_android.svg

@@ -0,0 +1,8 @@
+<svg width="220" height="472" viewBox="0 0 220 472" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="220" height="472" rx="26" fill="#101211"/>
+<rect x="9" y="36" width="202" height="404" rx="9" fill="#343434"/>
+<rect x="84" y="14" width="52" height="5" rx="2.5" fill="#2E2E2E"/>
+<rect x="84" y="455" width="52" height="5" rx="2.5" fill="#2E2E2E"/>
+<circle cx="45.5" cy="19.5" r="5.5" fill="#2E2E2E"/>
+<circle cx="65.5" cy="19.5" r="3.5" fill="#2E2E2E"/>
+</svg>

package/v2Components/TemplatePreview/assets/images/empty_ios.svg

@@ -0,0 +1,5 @@
+<svg width="228" height="472" viewBox="0 0 228 472" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="228" height="472" rx="32" fill="#101211"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M58 11H33C20.2975 11 10 21.2975 10 34V439C10 451.703 20.2975 462 33 462H195C207.703 462 218 451.703 218 439V34C218 21.2975 207.703 11 195 11H170V14C170 21.1797 164.18 27 157 27H71C63.8203 27 58 21.1797 58 14V11Z" fill="#343434"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M58 11H33C20.2975 11 10 21.2975 10 34V439C10 451.703 20.2975 462 33 462H195C207.703 462 218 451.703 218 439V34C218 21.2975 207.703 11 195 11H170V14C170 21.1797 164.18 27 157 27H71C63.8203 27 58 21.1797 58 14V11Z" fill="#343434"/>
+</svg>

package/v2Components/TemplatePreview/index.js

@@ -236,7 +236,7 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
     } = this.props;
     let content = channel && channel.toLowerCase() === 'sms' ? [this.props.content] : this.props.content;
     const { formatMessage } = intl;
-    const { rcsPreviewContent, inAppPreviewContent, viberPreviewContent } = content || {};
+    const { rcsPreviewContent, inAppPreviewContent, viberPreviewContent, isBeeFreeTemplate } = content || {};
     const { rcsImageSrc, rcsTitle, rcsDesc, buttonText: rcsButtonText } = rcsPreviewContent || {};
     const {
       videoParams,
@@ -1326,6 +1326,31 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
               </div>
             )}
             {channel?.toUpperCase() === INAPP && (
+              isBeeFreeTemplate ? (
+                <div className="shell-v2 align-center">
+                  <div style={{ position: 'relative', display: 'inline-block', width: '100%', height: '100%' }}>
+                    <CapImage
+                      className="preview-image"
+                      src={this.props.device === ANDROID ? inAppMobileAndroidFull : inAppMobileIOSFull}
+                      alt={formatMessage(messages.previewGenerated)}
+                    />
+                    <iframe 
+                      srcDoc={inAppPreviewContent?.value} 
+                      title="Inapp Preview" 
+                      style={{
+                        position: 'absolute',
+                        top: '3rem',
+                        left: '5rem',
+                        width: '60%',
+                        height: '100%',
+                        zIndex: 1,
+                        pointerEvents: 'none'
+                      }}
+                      frameBorder="0" 
+                    />
+                  </div>
+                </div>
+              ) : (
               <div className="shell-v2 align-center">
                 <CapImage
                   className="preview-image"
@@ -1402,8 +1427,9 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
                       )}
                     </div>
                   </div>
+                  </div>
                 </div>
-              </div>
+              )
             )}
           </CapRow>
         </CapColumn>

package/v2Containers/BeeEditor/index.js

@@ -56,6 +56,7 @@ function BeeEditor(props) {
     currentOrgDetails,
     eventContextTags,
   } = props;
+  console.log('BEE editor props', props);
   const { saveRowRequest } = BEESelect;
   const {formatMessage} = intl;
   const UNSUBSCRIBE = 'unsubscribe';

package/v2Containers/BeePopupEditor/constants.js

@@ -0,0 +1,10 @@
+export const BEE_LAYOUT_OPTIONS = {
+  POPUP: "classic-center",
+  HEADER: "bar-top",
+  FOOTER: "bar-bottom",
+  FULLSCREEN: "classic-center",
+};
+export const MOBILE = "mobile";
+export const UNSUBSCRIBE = 'unsubscribe';
+export const ANDROID = 'ANDROID';
+export const IOS = 'IOS';

package/v2Containers/BeePopupEditor/index.js

@@ -0,0 +1,169 @@
+import React, { useEffect, useRef, useState } from 'react';
+import PropTypes from 'prop-types';
+import { injectIntl } from 'react-intl';
+import { connect } from 'react-redux';
+// import { bindActionCreators } from 'redux';
+import { createStructuredSelector } from 'reselect';
+import { UserIsAuthenticated } from '../../utils/authWrapper';
+import TagList from '../TagList';
+import { ANDROID, BEE_LAYOUT_OPTIONS, MOBILE, UNSUBSCRIBE } from './constants';
+import emptyAndroidSvg from '../../v2Components/TemplatePreview/assets/images/empty_android.svg';
+import emptyIosSvg from '../../v2Components/TemplatePreview/assets/images/empty_ios.svg';
+function BeePopupEditor(props) {
+  const {
+    uid,
+    id,
+    tokenData,
+    saveBeeInstance,
+    saveBeeData,
+    beeJson,
+    templateLayoutType,
+    moduleFilterEnabled,
+    label,
+    location,
+    injectedTags,
+    className,
+    userLocale,
+    selectedOfferDetails,
+    tags,
+    onContextChange,
+    device,
+  } = props;
+
+  let beePluginInstance = null;
+  let intervalTimer;
+  const savedCallback = useRef();
+
+  const [visibleTaglist, setVisibleTaglist] = useState(false);
+  const [selectedTag, setSelectedTag] = useState({});
+  const filteredTags = (tags || []).filter((obj) => obj.definition.value !== UNSUBSCRIBE);
+
+  useEffect(() => {
+    const beeConfig = {
+      uid,
+      trackChanges: true,
+      container: 'bee-plugin-container',
+      workspace: {
+        popup: {
+          backgroundImageMobile: device === ANDROID ? emptyAndroidSvg : emptyIosSvg,
+          layout: BEE_LAYOUT_OPTIONS[templateLayoutType],
+          customStyles: {
+            container: {
+              width: "90%",
+              margin: "1.5rem",
+            },
+          },
+        },
+        stage: MOBILE,
+        hideStageToggle: true,
+      },
+      contentDialog: {
+        mergeTags: {
+          label: 'Add Label',
+          handler: async (resolve, reject) => {
+            // this will open tag modal
+            await setVisibleTaglist(true);
+            // until tag modal will not open promise will not execute
+            // once tag modal is opened it will start 2 sec interval to wait use has selected any tag or cancel the tag selection
+            const promise = new Promise((resolveP) => {
+              intervalTimer = setInterval(() => {
+                // this will execute, if user cancel the tag selection
+                if ((savedCallback.current || {}).close === true) {
+                  reject();
+                  clearInterval(intervalTimer);
+                  return;
+                }
+                // this block is checking use has selected any tag or not
+                if (Object.keys(savedCallback.current || {}).length > 0) {
+                  resolveP(savedCallback.current);
+                  setSelectedTag({});
+                  clearInterval(intervalTimer);
+                }
+              }, 2000);
+            });
+            // once prmise will resolve , pass the resolve data to handler to show tags in bee edior
+            const result = await promise;
+            resolve(result);
+          },
+        },
+      },
+      onChange: (jsonFile, htmlFile) => {
+        saveBeeData(jsonFile, htmlFile, device);
+      },
+    };
+    window.BeePlugin.create(tokenData, beeConfig, (instance) => {
+      beePluginInstance = instance;
+      const parseJson = JSON.parse(beeJson);
+      beePluginInstance.start(parseJson);
+      saveBeeInstance(beePluginInstance);
+    });
+    return () => clearInterval(intervalTimer);
+  }, [templateLayoutType]);
+
+  useEffect(() => {
+    savedCallback.current = Object.keys(selectedTag).length > 0 && selectedTag;
+  }, [selectedTag]);
+
+  const onTagSelect = (result) => {
+    const msg = {
+      name: result,
+      value: `{{${result}}}`,
+    };
+    setSelectedTag(msg);
+    setVisibleTaglist(false);
+  };
+
+  const onCancelTagList = () => {
+    setVisibleTaglist(false);
+    setSelectedTag({close: true});
+  };
+
+  return (
+    <>
+      <div id="bee-plugin-container" style={{ height: "650px" }}></div>
+      <TagList
+        moduleFilterEnabled={moduleFilterEnabled}
+        label={label}
+        onTagSelect={onTagSelect}
+        location={location}
+        tags={filteredTags}
+        injectedTags={injectedTags}
+        className={className}
+        id={id}
+        userLocale={userLocale}
+        selectedOfferDetails={selectedOfferDetails}
+        visibleTaglist={visibleTaglist}
+        hidePopover
+        modalProps={{
+          onCancel: onCancelTagList,
+          style: { left: 135, top: 250 },
+          className: "bee-editor-tag-list",
+        }}
+        onContextChange={onContextChange}
+      />
+    </>
+  );
+}
+BeePopupEditor.propTypes = {
+  saveBeeData: PropTypes.func.isRequired,
+  saveBeeInstance: PropTypes.func.isRequired,
+  beeJson: PropTypes.object.isRequired,
+  tokenData: PropTypes.object.isRequired,
+  uid: PropTypes.string.isRequired,
+  templateLayoutType: PropTypes.string.isRequired,
+  id: PropTypes.string.isRequired,
+  moduleFilterEnabled: PropTypes.bool.isRequired,
+  label: PropTypes.string.isRequired,
+  location: PropTypes.object.isRequired,
+  injectedTags: PropTypes.array.isRequired,
+  className: PropTypes.string.isRequired,
+  userLocale: PropTypes.string.isRequired,
+  selectedOfferDetails: PropTypes.object.isRequired,
+  tags: PropTypes.array.isRequired,
+  onContextChange: PropTypes.func.isRequired,
+  device: PropTypes.string.isRequired,
+};
+const mapStateToProps = () => createStructuredSelector({});
+
+function mapDispatchToProps() {}
+export default UserIsAuthenticated(connect(mapStateToProps, mapDispatchToProps)(injectIntl(BeePopupEditor)));

package/v2Containers/Cap/constants.js

@@ -67,3 +67,10 @@ export const GET_LIQUID_TAGS_SUCCESS = 'cap/GET_LIQUID_TAGS_SUCCESS_V2';
 export const CREATE_CENTRAL_COMMS_META_ID_FAILURE = 'cap/CREATE_CENTRAL_COMMS_META_ID_FAILURE_V2';
 export const CREATE_CENTRAL_COMMS_META_ID_REQUEST = 'cap/CREATE_CENTRAL_COMMS_META_ID_REQUEST_V2';
 export const CREATE_CENTRAL_COMMS_META_ID_SUCCESS = 'cap/CREATE_CENTRAL_COMMS_META_ID_SUCCESS_V2';
+
+export const BASE64_IMAGE_REGEX = /<img[^>]*\bsrc\s*=\s*["']data:image\/[^"']*["'][^>]*>/gi;
+export const BASE64_IMAGE_ERROR_MESSAGE = {
+  key: 'base64Error',
+  message: 'Base64 images are not allowed. Please upload your image to a gallery and use it, or add the image URL instead.',
+  description: 'Base64 images are not allowed. Please upload your image to a gallery and use it, or add the image URL instead.',
+};

package/v2Containers/Cap/tests/__snapshots__/index.test.js.snap

@@ -317,6 +317,7 @@ exports[`<Cap /> should render correct component 1`] = `
         "creatives.componentsV2.FTP.message": "Message",
         "creatives.componentsV2.FTP.search": "Search",
         "creatives.componentsV2.Footer.header": "This is the Footer component !",
+        "creatives.componentsV2.FormBuilder.base64ImageError": "Base64 images are not allowed. Please upload your image to a gallery and use it, or add the image URL instead.",
         "creatives.componentsV2.FormBuilder.cancel": "Cancel",
         "creatives.componentsV2.FormBuilder.contentNotValidLanguage": "Content is not valid for language:",
         "creatives.componentsV2.FormBuilder.dragAndDrop": "Drag and drop image here",

package/v2Containers/CreativesContainer/SlideBoxContent.js

@@ -27,6 +27,7 @@ import Rcs from '../Rcs';
 import { getWhatsappContent } from '../Whatsapp/utils';
 import * as commonUtil from '../../utils/common';
 import Zalo from '../Zalo';
+import InappWrapper from '../InappWrapper';
 import MobilePushNew from '../MobilePushNew';
 const CreativesWrapper = styled.div`
   .ant-popover,
@@ -115,6 +116,8 @@ export function SlideBoxContent(props) {
       emailCreateMode,
       onMobilepushModeChange,
       mobilePushCreateMode,
+      inAppCreateMode,
+      onInAppModeChange,
       templateStep,
       onEnterTemplateName,
       onRemoveTemplateName,
@@ -935,25 +938,32 @@ export function SlideBoxContent(props) {
         />
       )}
 
-      {isCreateInApp && (<InApp
+      {isCreateInApp && (<InappWrapper
+        key="creatives-email-wrapper"
+        date={new Date().getMilliseconds()}
         isFullMode={isFullMode}
         onCreateComplete={onCreateComplete}
         handleClose={handleClose}
-        location={{
-          pathname: `/inapp/create`,
-          query,
-          search: '',
-        }}
         getFormData={getFormData}
         isGetFormData={isGetFormData}
         templateData={templateData}
         getDefaultTags={type}
-        eventContextTags={eventContextTags}
-        showLiquidErrorInFooter={showLiquidErrorInFooter}
+        step={templateStep}
+        onResetStep={onResetStep}
+        onInAppModeChange={onInAppModeChange}
+        onEnterTemplateName={onEnterTemplateName}
+        onRemoveTemplateName={onRemoveTemplateName}
+        inAppCreateMode={inAppCreateMode}
+        forwardedTags={forwardedTags}
+        type={type}
+        query={query}
+        selectedOfferDetails={selectedOfferDetails}
+        onValidationFail={onValidationFail}
       />
       )}
 
       {isEditInApp && (<InApp
+        isEditInApp={true}
         isFullMode={isFullMode}
         templateData={templateData}
         getFormData={getFormData}
@@ -971,6 +981,14 @@ export function SlideBoxContent(props) {
           search: '',
         }}
         showLiquidErrorInFooter={showLiquidErrorInFooter}
+        setIsLoadingContent={setIsLoadingContent}
+        onInAppModeChange={onInAppModeChange}
+        inAppCreateMode={inAppCreateMode}
+        isGetFormData={isGetFormData}
+        showTemplateName={showTemplateName}
+        onValidationFail={onValidationFail}
+        type={type}
+        query={query}
         />
       )}
 

package/v2Containers/CreativesContainer/index.js

@@ -1267,7 +1267,7 @@ export class Creatives extends React.Component {
   shouldShowFooter = () => {
     const { isFullMode } = this.props;
     const {
-      slidBoxContent, currentChannel, emailCreateMode, templateNameExists, templateStep, mobilePushCreateMode, weChatTemplateType, templateData,
+      slidBoxContent, currentChannel, emailCreateMode, templateNameExists, templateStep, mobilePushCreateMode, weChatTemplateType, templateData, inAppCreateMode,
     } = this.state;
     const channel = currentChannel.toUpperCase();
     const currentStep = this.creativesTemplateSteps[templateStep];
@@ -1310,6 +1310,13 @@ export class Creatives extends React.Component {
       showFooter = true;
     }
 
+    if (channel === constants.INAPP &&
+      ((slidBoxContent === 'createTemplate' && !isEmpty(inAppCreateMode))
+      || (slidBoxContent === 'editTemplate' && currentStep === 'modeSelection')) &&
+      templateNameExists) {
+      showFooter = true;
+    }
+
     if (showFooter) {
       if (slidBoxContent === "createTemplate" && ((channel === constants.EMAIL && currentStep === 'createTemplateContent') ||
         ([constants.SMS, constants.WECHAT].includes(channel) && currentStep === 'modeSelection'))) {
@@ -1430,7 +1437,7 @@ export class Creatives extends React.Component {
     } else if (currentChannel.toUpperCase() === constants.WECHAT) {
       isShowContinueFooter = !isEmpty(weChatTemplateType) && currentStep === "modeSelection";
     } else if (currentChannel.toUpperCase() === constants.INAPP) {
-      isShowContinueFooter = !isEmpty(inAppCreateMode) && currentChannel === "modeSelection";
+      isShowContinueFooter = !isEmpty(inAppCreateMode) && currentStep === "modeSelection";
     }
 
     return isShowContinueFooter;
@@ -1467,6 +1474,7 @@ export class Creatives extends React.Component {
       templateStep,
       isLoadingContent,
       mobilePushCreateMode,
+      inAppCreateMode,
       isDiscardMessage,
       weChatTemplateType,
       weChatMaptemplateStep,
@@ -1569,6 +1577,8 @@ export class Creatives extends React.Component {
               setIsLoadingContent={this.setIsLoadingContent}
               onMobilepushModeChange={this.onMobilepushModeChange}
               mobilePushCreateMode={mobilePushCreateMode}
+              inAppCreateMode={inAppCreateMode}
+              onInAppModeChange={this.onInAppModeChange}
               showTemplateName={this.showTemplateName}
               onValidationFail={this.onValidationFail}
               channelsToHide={channelsToHide}