@capillarytech/creatives-library 7.18.0-beta.0 → 8.0.1

package/v2Components/CapWhatsappQuickReply/index.js

@@ -0,0 +1,255 @@
+import React from "react";
+import PropTypes from 'prop-types';
+import { injectIntl, intlShape } from "react-intl";
+import cloneDeep from "lodash/cloneDeep";
+import CapRow from "@capillarytech/cap-ui-library/CapRow";
+import CapHeader from "@capillarytech/cap-ui-library/CapHeader";
+import CapHeading from "@capillarytech/cap-ui-library/CapHeading";
+import CapTooltipWithInfo from "@capillarytech/cap-ui-library/CapTooltipWithInfo";
+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 CapButton from "@capillarytech/cap-ui-library/CapButton";
+import CapColumn from "@capillarytech/cap-ui-library/CapColumn";
+import CapIcon from "@capillarytech/cap-ui-library/CapIcon";
+import CapLabel from "@capillarytech/cap-ui-library/CapLabel";
+import CapInfoNote from "@capillarytech/cap-ui-library/CapInfoNote";
+import messages from "./messages";
+import "./index.scss";
+import globalMessages from "../../v2Containers/Cap/messages";
+import { BUTTON_TEXT, INITIAL_QUICK_REPLY_DATA } from "../../v2Containers/Whatsapp/constants";
+import ctaMessages from "../CapWhatsappCTA/messages";
+
+export const CapWhatsappQuickReply = (props) => {
+  const { quickReplyData = [], renderMessageLength, setQuickReplyData, isEditFlow, intl,authenticationFlow } = props;
+  const { TextArea } = CapInput;
+  const { formatMessage } = intl;
+  const quickReplyDataLength = quickReplyData?.length;
+  //this function is used for handle text field value change
+  const handleTextChange = ({target: {value = ''} = {}}, index) => {
+    let error = false;
+    if (value?.length > 20) {
+      error = formatMessage(messages.templateButtonTextLengthError);
+    }
+    //this check is for same repeated value is not allowed in another text field of quick reply
+    const checkIsValueAvailable = quickReplyData?.find((reply) => reply?.text === value);
+    if (checkIsValueAvailable) {
+      error = formatMessage(messages.templateButtonTextSameValue);
+    }
+    setQuickReplyData(
+      quickReplyData?.map((quickReply) => {
+        if (quickReply?.index === index) {
+          return {
+            ...quickReply,
+            text: value,
+            error,
+          };
+        }
+        return quickReply;
+      })
+    );
+  };
+
+  //this function is used for save the quick reply text field data and same edit the data
+  const handleSaveAndEditBtn = (index, value) => {
+    setQuickReplyData(
+      quickReplyData.map((quickReply) => {
+        if (quickReply?.index === index) {
+          return {
+            ...quickReply,
+            isSaved: value,
+          };
+        }
+        return quickReply;
+      })
+    );
+  };
+
+  //This function is used for delete the quick reply data for a row
+  const handleDelete = (index) => {
+    setQuickReplyData((prevState) => {
+      const clonedQuickReplyData = cloneDeep(prevState);
+      const filteredQuickReplyData = clonedQuickReplyData.filter(
+        (i) => i?.index !== index
+      );
+      return filteredQuickReplyData.map((quickReply, i) => ({
+        ...quickReply,
+        index: i,
+      }));
+    });
+  };
+  const quickReplyConfiguredBtn = ({ text, index, authenticationFlow = false }) => (
+    <CapRow className={`cap-whatsapp-quick-reply ${authenticationFlow && 'whatsapp-autofill-container'}`}>
+      <CapRow className="whatsapp-quick-reply-save-container">
+        {!authenticationFlow && <CapColumn>
+          <CapIcon type="six-dots" />
+        </CapColumn>}
+        <CapColumn className="text-container">{text}</CapColumn>
+        <CapColumn className={`quick-reply-icon ${authenticationFlow && 'whatsapp-quick-reply-disabled-icons'}`}>
+          <CapIcon
+            onClick={() => handleSaveAndEditBtn(index, false)}
+            type="edit"
+            aria-label="quick-reply-edit"
+          />
+          <CapIcon
+            onClick={() => handleDelete(index)}
+            type="delete"
+            aria-label="quick-reply-delete"
+          />
+        </CapColumn>
+      </CapRow>
+    </CapRow>
+  )
+  const addQuickReply = () => {
+    const cloneInitialQuickReplyData = cloneDeep(INITIAL_QUICK_REPLY_DATA);
+    cloneInitialQuickReplyData[0].index = quickReplyDataLength || 0;
+    const clonedQuickReplyData = [
+      ...quickReplyData,
+      ...cloneInitialQuickReplyData,
+    ];
+    setQuickReplyData(clonedQuickReplyData);
+  };
+
+  const isQuickReplyDisable =
+    quickReplyDataLength === 1 && !quickReplyData?.[0]?.isSaved;
+  return (
+    <>
+      {authenticationFlow ? 
+        <>
+          {quickReplyConfiguredBtn({ text: formatMessage(globalMessages.autofill), index: '0', authenticationFlow: true })}
+          <CapInfoNote className="margin-l-26" message={formatMessage(messages.autofillInfo)}/>
+        </> :
+        <>
+      {quickReplyDataLength > 0 && !isEditFlow && (
+        <CapRow>
+          {quickReplyData?.map(({ index, isSaved, text, error }) => {
+            if (!isSaved) {
+              //this section is render textfield when its not saved or in edit condition
+              return (
+                <CapRow className="cap-whatsapp-quick-reply">
+                  <CapRow
+                    className="whatsapp-button-text-container"
+                    key={index}
+                  >
+                    <CapHeader
+                      title={
+                        <CapHeading
+                          type="h4"
+                          className="whatsapp-button-text-heading"
+                        >
+                          {formatMessage(messages.buttonText)}
+                            <CapTooltipWithInfo
+                              placement="right"
+                              className="whatsapp-button-text-tooltip"
+                              autoAdjustOverflow
+                              title={formatMessage(messages.buttonTextTooltip)}
+                          />
+                        </CapHeading>
+                      }
+                    />
+                      <CapRow className="whatsapp-button-text-input">
+                        <TextArea
+                          autosize={{ minRows: 1, maxRows: 5 }}
+                          placeholder={formatMessage(
+                          messages.buttonTextPlaceholder
+                        )}
+                          onChange={(e) => handleTextChange(e, index)}
+                          errorMessage={
+                          error && (
+                            <CapError className="whatsapp-template-message-error">
+                              {error}
+                            </CapError>
+                          )
+                        }
+                          value={text || ""}
+                      />
+                      </CapRow>
+                    {renderMessageLength(BUTTON_TEXT, text?.length || 0)}
+                    {/* it render save and delete button */}
+                      <CapRow className="whatsapp-cta-save-delete-btn">
+                        <CapTooltip
+                          title={
+                          (text === "" || error)
+                            && formatMessage(ctaMessages.ctaSaveDisabled)
+                        }
+                          placement={"bottom"}
+                      >
+                        <div className="button-disabled-tooltip-wrapper">
+                          <CapButton
+                            onClick={() => {
+                              handleSaveAndEditBtn(index, true);
+                            }}
+                            disabled={text === "" || error}
+                            className="whatsapp-cta-save-btn"
+                          >
+                            {formatMessage(globalMessages.save)}
+                          </CapButton>
+                        </div>
+                        </CapTooltip>
+                          <CapButton
+                            onClick={() => {
+                              handleDelete(index);
+                            }}
+                            className="whatsapp-cta-delete-btn whatsapp-quick-reply-delete-button"
+                            type="secondary"
+                      >
+                            {formatMessage(globalMessages.delete)}
+                          </CapButton>
+                      </CapRow>
+                  </CapRow>
+                </CapRow>
+              );
+            }
+            return (
+                //this section render when data is saved and user can edit it
+                quickReplyConfiguredBtn({text,index})
+              );
+          })}
+        </CapRow>
+      )}
+      {/* this section render in edit mode from campaign side */}
+      {quickReplyDataLength > 0 && isEditFlow &&
+        quickReplyData.map(({text, index}) => (
+          <CapRow className="cap-whatsapp-quick-reply whatsapp-quick-reply-edit-container" key={index}>
+            <CapLabel type="label16">{text}</CapLabel>
+          </CapRow>
+        ))
+      }
+      {/* this section render add button section with condition */}
+      {quickReplyDataLength < 3 && !isEditFlow && (
+        <CapRow>
+          <CapTooltip
+            title={
+              isQuickReplyDisable ? formatMessage(ctaMessages.ctaAddDisabled) : ""
+            }
+            placement={"right"}
+          >
+            <div className="button-disabled-tooltip-wrapper">
+              <CapButton
+                type="flat"
+                id="whatsapp-quick-reply-add-button"
+                disabled={isQuickReplyDisable}
+                className="margin-t-12 margin-l-24"
+                isAddBtn
+                onClick={addQuickReply}
+              >
+                {formatMessage(ctaMessages.addButton)}
+              </CapButton>
+            </div>
+          </CapTooltip>
+        </CapRow>
+      )}</>}
+    </>
+  );
+};
+
+CapWhatsappQuickReply.propTypes = {
+  quickReplyData: PropTypes.array,
+  renderMessageLength: PropTypes.func,
+  setQuickReplyData: PropTypes.func,
+  isEditFlow: PropTypes.func,
+  intl: intlShape.isRequired,
+  authenticationFlow : PropTypes.bool,
+};
+
+export default injectIntl(CapWhatsappQuickReply);

package/v2Components/CapWhatsappQuickReply/index.scss

@@ -0,0 +1,54 @@
+@import "~@capillarytech/cap-ui-library/styles/_variables";
+
+.cap-whatsapp-quick-reply {
+    border: solid 0.063rem $CAP_G06;
+    margin-left: $CAP_SPACE_24;
+    margin-top: 0.75rem;
+    border-radius: 0.285rem;
+    margin-right: 0.5rem;
+    .whatsapp-button-text-container {
+        padding: $CAP_SPACE_16 $CAP_SPACE_24;
+    }
+    .whatsapp-button-text-heading {
+        display: flex;
+        text-align: center;
+    }
+    .whatsapp-quick-reply-delete-button {
+        margin-left: $CAP_SPACE_12;
+    }
+    .whatsapp-button-text-input {
+        margin-top: $CAP_SPACE_08;
+        margin-bottom: $CAP_SPACE_12;
+    }
+    .whatsapp-quick-reply-save-container {
+        display: flex;
+        align-items: center;
+        padding: $CAP_SPACE_08 $CAP_SPACE_12;
+        .text-container {
+            padding-left: $CAP_SPACE_12;
+        }
+        .quick-reply-icon {
+            position: absolute;
+            right: $CAP_SPACE_12;
+        }
+    }
+    .whatsapp-button-text-tooltip {
+        margin-left: $CAP_SPACE_04;
+    }
+    .whatsapp-quick-reply-disabled-icons{
+        color: $FONT_COLOR_04;
+        cursor: not-allowed;
+        pointer-events: none;
+    }
+}
+
+.whatsapp-quick-reply-edit-container {
+    padding: $CAP_SPACE_12;
+    margin-left: 0;
+    margin-top: 0.75rem;
+}
+
+.whatsapp-autofill-container {
+    margin-left: 0;
+    cursor: not-allowed;
+}

package/v2Components/CapWhatsappQuickReply/messages.js

@@ -0,0 +1,32 @@
+import { defineMessages } from 'react-intl';
+const prefix = `creatives.componentsV2.CapWhatsappQuickReply`;
+export default defineMessages({
+  buttonText: {
+    id: `${prefix}.buttonText`,
+    defaultMessage: 'Button text',
+  },
+  buttonTextPlaceholder: {
+    id: `${prefix}.buttonTextPlaceholder`,
+    defaultMessage: 'Enter button text',
+  },
+  templateButtonTextError: {
+    id: `${prefix}.templateButtonTextError`,
+    defaultMessage: 'Template footer length cannot exceed 20',
+  },
+  templateButtonTextLengthError: {
+    id: `${prefix}.templateButtonTextLengthError`,
+    defaultMessage: 'Text field length cannot exceed 20',
+  },
+  templateButtonTextSameValue: {
+    id: `${prefix}.templateButtonTextSameValue`,
+    defaultMessage: 'Text field value cannot be same with other text fields',
+  },
+  buttonTextTooltip: {
+    id: `${prefix}.buttonTextTooltip`,
+    defaultMessage: 'Use this to name the button. We would recommend not to use special characters for the button text.'
+  },
+  autofillInfo:{
+    id: `${prefix}.autofillInfo`,
+    defaultMessage: 'One-tap autofill buttons are only supported on Android. If you send an authentication template to a WhatsApp user who is using a non-Android device, the WhatsApp client will display a copy code button instead.'
+  }
+});

package/v2Components/Ckeditor/index.js

@@ -11,16 +11,22 @@ import React from 'react';
 
 // import { FormattedMessage } from 'react-intl';
 import _ from 'lodash';
+import CapSpin from '@capillarytech/cap-ui-library/CapSpin';
+import './style.scss';
 // import messages from './messages';
 const loadScript = require('load-script');
-const defaultScriptUrl = "https://storage.crm.n.content-cdn.io/ckeditor_test/ckeditor4/ckeditor.js";
+
+const defaultScriptUrl = `${window.location.origin}/arya/ui/library/ckeditor/ckeditor.js`;
+/*const defaultScriptUrl = 'https://nightly.intouch.capillarytech.com/arya/ui/library/ckeditor/ckeditor.js';
+**Uncomment the above line to use CKEDITOR in local
+*/
 const user = localStorage.getItem('user');
 let locale = 'en';
 if (user && JSON.parse(user).lang) {
   locale = JSON.parse(user).lang;
 }
 const CKEditorConfig = {
-  skin: 'moono',
+  skin: 'moono-lisa',
   toolbar: [
     { name: 'document', items: ['Source', '-'] },
     { name: 'clipboard', items: ['Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo'] },
@@ -134,6 +140,8 @@ class Ckeditor extends React.Component { // eslint-disable-line react/prefer-sta
       content: "",
       editorInstance: undefined,
       setInitData: false,
+      isLoading: true,
+      scriptLoaded: false,
     };
 
     this.delayTimer = 0;
@@ -166,7 +174,7 @@ class Ckeditor extends React.Component { // eslint-disable-line react/prefer-sta
       // setTimeout(() => {
       //   this.editorInstance.name = this.id;
       // }, 5000);
-      
+
     }
   }
 
@@ -180,10 +188,35 @@ class Ckeditor extends React.Component { // eslint-disable-line react/prefer-sta
     }
   }
 
-  onLoad() {
+  componentDidUpdate(prevProps) {
+    if (this.props.content !== prevProps.content) {
+      let content = '';
+      this.id = this.props.id;
+      if (this.props.content !== '') {
+        content = this.props.content;
+        content = content.replace(/&amp;/g, "&").replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/\\&quot;/g, "\"");
+      }
+      this.setState({ content }, () => {
+        if (this.editorInstance) {
+          //Check if the current editor content is different from the new content
+          const currentEditorData = this.editorInstance?.getData();
+          if (!_.isEqual(currentEditorData, content)) {
+            this.editorInstance?.setData(content);
+          }
+        }
+      });
+    }
+  }
+
+  onLoad = () => {
+    this.setState({ scriptLoaded: true }, () => {
+      this.initializeEditor();
+    });
+  };
+
+  initializeEditor = () => {
     if (this.unmounting) return;
 
-    
     if (!window.CKEDITOR) {
       console.error("CKEditor not found");
       return;
@@ -191,13 +224,13 @@ class Ckeditor extends React.Component { // eslint-disable-line react/prefer-sta
 
     let html = this.props.content;
     html = html.replace(/&amp;/g, "&").replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&quot;/g, "\"");
-    
+
     this.editorInstance = window.CKEDITOR.appendTo(
       this.node,
       this.state.config,
       html
     );
-    
+
 
     if (this.props.getEditorInstanse) {
       this.props.getEditorInstanse(this.editorInstance, this.props.id);
@@ -208,23 +241,22 @@ class Ckeditor extends React.Component { // eslint-disable-line react/prefer-sta
     // this.editorInstance.on('change', this.handleContentChange);
 
     // mode event is fired whenever mode is toggled from normal to source mode or vice versa
-    // change event works only in wysiwyg(non-source) mode, key event works in both source & wysiwyg(non-source) mode but, 
+    // change event works only in wysiwyg(non-source) mode, key event works in both source & wysiwyg(non-source) mode but,
     // key event doesn't get fired up while setting text to bold,italic etc..
-    this.editorInstance.on('mode',()=>{
-      if(this.editorInstance.mode==="source"){
-        this.editorInstance.on('key',this.handleContentChange)
-      }
-      else{
-        if(this.editorInstance.hasListeners("key")){
+    this.editorInstance.on('mode', () => {
+      if (this.editorInstance.mode === "source") {
+        this.editorInstance.on('key', this.handleContentChange);
+      } else {
+        if (this.editorInstance.hasListeners("key")) {
           /*Removing the 'key' listener is necessary. If not removed and the mode is switched in the following manner :
           source mode -> Non-source mode -> source mode,
-          then under this scenario both 'key' and 'change' listener will get fired on entering text. Except that 'key' listener will not get fired when setting text to 'bold', 'italic' etc.  
+          then under this scenario both 'key' and 'change' listener will get fired on entering text. Except that 'key' listener will not get fired when setting text to 'bold', 'italic' etc.
           */
-          this.editorInstance.removeListener("key",this.handleContentChange)
+          this.editorInstance.removeListener("key", this.handleContentChange);
         }
-        this.editorInstance.on('change',this.handleContentChange)
+        this.editorInstance.on('change', this.handleContentChange);
       }
-    })
+    });
 
     _.forEach(this.props.events, (event, index) => {
       this.editorInstance.on(index, event);
@@ -240,6 +272,7 @@ class Ckeditor extends React.Component { // eslint-disable-line react/prefer-sta
         this.editorInstance.on(index, event);
       });
     }
+    this.setState({ isLoading: false });
   }
 
   onFocusOut = () => {
@@ -268,11 +301,12 @@ class Ckeditor extends React.Component { // eslint-disable-line react/prefer-sta
   };
 
   render() {
-    
     return (
-      <div id={this.props.id} style={{borderRight: "1px solid #000 !important"}}>
-        <div className={this.props.activeClass} ref={(node) => (this.node = node)}/>
-      </div>
+      <CapSpin spinning={this.state.isLoading}>
+        <div id={this.props.id} style={{borderRight: "1px solid #000 !important"}}>
+          <div className={this.props.activeClass} ref={(node) => (this.node = node)}/>
+        </div>
+      </CapSpin>
     );
   }
 }

package/v2Components/Ckeditor/style.scss

@@ -0,0 +1,3 @@
+.cke_notification_warning {
+    display: none;
+}

package/v2Components/Ckeditor/tests/index.test.js

@@ -0,0 +1,44 @@
+import React, { Component } from "react";
+import { injectIntl } from "react-intl";
+import "@testing-library/jest-dom";
+import { render, getByText, screen } from "../../../utils/test-utils";
+import Ckeditor from "../index";
+
+const initializeComponent = () => {
+  const Component = injectIntl(Ckeditor);
+
+  //const originalComponentDidMount = Ckeditor.prototype.componentDidMount;
+  Ckeditor.prototype.componentDidMount = jest.fn();
+  Ckeditor.prototype.handleContentChange = jest.fn();
+
+  //Render with default props.
+  return render(<Component />);
+};
+
+describe("Load Ckeditor", () => {
+  it("Test if Ckeditor Mounts", () => {
+    initializeComponent();
+
+    expect(Ckeditor.prototype.componentDidMount).toHaveBeenCalled();
+  });
+
+  it("Test if Ckeditor un-Mounts", () => {
+    // Spy on the componentWillUnmount method
+    const componentWillUnmountSpy = jest.spyOn(
+      Ckeditor.prototype,
+      "componentWillUnmount"
+    );
+
+    // Render the component
+    const { unmount } = initializeComponent();
+
+    // Manually unmount the component (simulate unmounting)
+    unmount();
+
+    // Assert that componentWillUnmount has been called
+    expect(componentWillUnmountSpy).toHaveBeenCalled();
+
+    // Clean up the spy
+    componentWillUnmountSpy.mockRestore();
+  });
+});

package/v2Components/CmsTemplatesComponent/index.js

@@ -28,6 +28,7 @@ function CmsTemplatesComponent(props) {
     // Determine if default email templates should be hidden based on feature control
     if (hideDefaultEmailTemplates) {
       if (name === START_FROM_SCRATCH) {
+        commonProperties.title = <FormattedMessage {...messages.startFromScratch}/>; // Show the START_FROM_SCRATCH template name text as per the locale
         result.push(commonProperties);
       }
     } else {

package/v2Components/CmsTemplatesComponent/messages.js

@@ -14,4 +14,8 @@ export default defineMessages({
     id: 'creatives.componentsV2.CmsTemplatesComponent.select',
     defaultMessage: 'Select',
   },
+  startFromScratch: {
+    id: 'creatives.componentsV2.CmsTemplatesComponent.startFromScratch',
+    defaultMessage: 'Start from Scratch',
+  },
 });

package/v2Components/EmailMobilePreview/index.js

@@ -18,7 +18,7 @@ import EmailPreviewV2 from '../EmailPreviewV2';
 import messages from '../EmailPreviewV2/messages';
 import './index.scss';
 import mobileBody from '../../assets/DeviceForEmail.png';
-import { removeLinksFromHtmlContent } from './../../utils/common';
+import { iframePreviewAdjustWidth, removeLinksFromHtmlContent } from './../../utils/common';
 import {selectTemplateContent} from '../../containers/Templates/selectors';
 import * as templateActions from '../../containers/Templates/actions';
 
@@ -68,6 +68,8 @@ class EmailMobilePreview extends React.Component {
       templateSubject,
     } = this.props;
     const copyContent = templateContent && removeLinksFromHtmlContent(templateContent);
+    const updateCopyContent = templateContent && iframePreviewAdjustWidth(copyContent);
+
     const { showAllDevices } = this.state;
 
     const emailSubjectLabel = templateSubject && (
@@ -98,7 +100,7 @@ class EmailMobilePreview extends React.Component {
                       <img src={mobileBody} alt="capillary" width="386" />
                       <div className={`${messageContainerName} ${emailSubjectLabel ? 'with-subject' : ''}`}>
                         {emailSubjectLabel}
-                        <iframe srcDoc={copyContent} {...deviceAspectRatio.mobile} >
+                        <iframe srcDoc={updateCopyContent} {...deviceAspectRatio.mobile} >
                           <p><FormattedMessage {...messages.noIframeSupport}/></p>
                         </iframe>
                       </div>

package/v2Components/EmailPreviewV2/index.js

@@ -19,10 +19,11 @@ import messages from './messages';
 import './_emailPreviewV2.scss';
 import tabletBody from '../../assets/iPad.svg';
 import mobileBody from '../../assets/DeviceForEmail.png';
-import { removeLinksFromHtmlContent } from './../../utils/common';
+import { iframePreviewAdjustWidth, removeLinksFromHtmlContent } from './../../utils/common';
 
 import {selectTemplateContent} from '../../v2Containers/Templates/selectors';
 import * as templateActions from '../../v2Containers/Templates/actions';
+import { EMAIL } from '../../v2Containers/CreativesContainer/constants';
 
 const deviceAspectRatio = {
   desktop: () => ({
@@ -59,7 +60,7 @@ export class EmailPreviewV2 extends React.Component {
   componentWillMount() {
     const {templateData, templateContent} = this.props;
     if (isEmpty(templateContent) && !isEmpty(templateData) && templateData._id) { // templateData: comes from templates list email preview
-      this.props.templateActions.getTemplateDetails(templateData._id); // templateContent: html data to be shown in iframe
+      this.props.templateActions.getTemplateDetails(templateData._id, EMAIL); // templateContent: html data to be shown in iframe
     }
   }
   componentWillUnmount() {
@@ -72,7 +73,8 @@ export class EmailPreviewV2 extends React.Component {
     let messageContainerName = '';
     const {currentDevice} = this.state;
     const { templateContent, templateData = {}, templateSubject } = this.props;
-    const copyContent = removeLinksFromHtmlContent(templateContent);
+    const copyContent = templateContent && removeLinksFromHtmlContent(templateContent);
+    const updateCopyContent = templateContent && iframePreviewAdjustWidth(copyContent);
     let subjectClassName = 'email-subject-desktop';
     if (currentDevice === devices.tablet) {
       messageContainerName = 'tablet-message-container';
@@ -88,7 +90,7 @@ export class EmailPreviewV2 extends React.Component {
     );
     const iframeDiv = (<div className={`${messageContainerName}`}>
       {emailSubjectLabel}
-      <iframe srcDoc={copyContent} {...deviceAspectRatio[currentDevice](emailSubject)} >
+      <iframe srcDoc={updateCopyContent} {...deviceAspectRatio[currentDevice](emailSubject)} >
         <p><FormattedMessage {...messages.browserDoesntSupportIframe} /></p>
       </iframe>
     </div>);

package/v2Components/EmailPreviewV2/tests/__snapshots__/index.test.js.snap

@@ -31,7 +31,6 @@ exports[`<EmailPreviewV2 /> <EmailPreviewV2 /> without the templateData 1`] = `
                     >
                       <iframe
                         height="500"
-                        srcDoc="<html><head></head><body>undefined</body></html>"
                         width="1024"
                       >
                         <p>
@@ -67,7 +66,6 @@ exports[`<EmailPreviewV2 /> <EmailPreviewV2 /> without the templateData 1`] = `
                       >
                         <iframe
                           height="500"
-                          srcDoc="<html><head></head><body>undefined</body></html>"
                           width="1024"
                         >
                           <p>
@@ -104,7 +102,6 @@ exports[`<EmailPreviewV2 /> <EmailPreviewV2 /> without the templateData 1`] = `
                       >
                         <iframe
                           height="500"
-                          srcDoc="<html><head></head><body>undefined</body></html>"
                           width="1024"
                         >
                           <p>

package/v2Components/FormBuilder/_formBuilder.scss

@@ -77,6 +77,7 @@
   }
 }
 
+
 .form-builder-dragger  {
   .ant-upload-drag {
     background-color: white;

package/v2Components/FormBuilder/constants.js

@@ -1 +1 @@
-export const AI_SUGGESTION_API_URL = "wss://ai-suggestions.chinmayjain.live/";
+export const OUTBOUND = 'OUTBOUND';