@capillarytech/creatives-library 7.5.4 → 7.5.5

package/v2Containers/CreativesContainer/SlideBoxContent.js

@@ -164,6 +164,8 @@ function SlideBoxContent(props) {
 
 
   const isCreateSms = slidBoxContent === 'createTemplate' && channel === constants.SMS;
+  const isCreateFacebook = slidBoxContent === 'createTemplate' && channel === constants.FACEBOOK;
+
   const isCreateMPush = slidBoxContent === 'createTemplate' && channel === constants.MOBILE_PUSH;
   const isCreateCallTask = slidBoxContent === 'createTemplate' && channel === constants.CALL_TASK;
   let isEditSms = false;
@@ -185,7 +187,7 @@ function SlideBoxContent(props) {
     isEditEmailWithId = slidBoxContent === 'editTemplate' && channel === constants.EMAIL && templateData._id;
     isEmailEditWithContent = slidBoxContent === 'editTemplate' && channel === constants.EMAIL && !templateData._id;
     isEditFacebook = slidBoxContent === 'editTemplate' && channel === constants.FACEBOOK;
-    isPreview = slidBoxContent === 'preview' && (channel === constants.SMS || channel === constants.LINE || channel === constants.VIBER);
+    isPreview = slidBoxContent === 'preview' && (channel === constants.SMS || channel === constants.LINE || channel === constants.VIBER || channel === constants.FACEBOOK);
     isEmailPreview = slidBoxContent === 'preview' && channel === constants.EMAIL;
     isMpushPreview = slidBoxContent === 'preview' && channel === constants.MOBILE_PUSH;
     isEditFTP = slidBoxContent === 'editTemplate' && [constants.NO_COMMUNICATION, constants.FTP].includes(channel);
@@ -263,6 +265,36 @@ function SlideBoxContent(props) {
         };
         return template.content;
       }
+      case constants.FACEBOOK: {
+        const template = cloneDeep(templateDataObject.versions.base);
+        const {
+          type: fbType = "",
+          primaryText = "",
+          callToAction = "",
+          displayLink = "",
+        } = template.content.FacebookAd[0] || {};
+        const previewData = Object.values(template.content.FacebookAd).map((obj) => ({
+          imageData: obj.imgSrc ? {imageSrc: obj.imgSrc} : {},
+          linkDesc: obj.linkDesc,
+          linkHeadLine: obj.linkHeadLine,
+          subType: obj.subType,
+          videoData: obj.video ? { videoSrc: obj.originalContentUrl,
+            videoName: obj.videoName,
+            videoHeight: obj.videoHeight,
+            videoWidth: obj.videoWidth,
+            previewUrl: obj.previewImageUrl,
+          } : {},
+          webSiteLink: obj.webSiteLink,
+        }));
+        const fbContent = {
+          selectedAd: fbType,
+          previewData,
+          primaryText,
+          callToAction,
+          displayLink,
+        };
+        return fbContent;
+      }
       default:
         return get(templateDataObject, `versions.base.content`);
     }
@@ -505,6 +537,22 @@ function SlideBoxContent(props) {
         onPreviewContentClicked={onPreviewContentClicked}
         onTestContentClicked={onTestContentClicked}/>
         }
+      {
+        isCreateFacebook && (
+          <Facebook
+            templateData={templateData}
+            messageDetails={messageDetails}
+            cap={cap}
+            onFacebookSubmit={onFacebookSubmit}
+            onCreateComplete={onCreateComplete}
+            setIsLoadingContent={setIsLoadingContent}
+            isFullMode={isFullMode}
+            createNew
+            getFormSubscriptionData={getFormData}
+
+          />
+        )
+      }
       {
         isEditFacebook && (
           <Facebook
@@ -512,7 +560,12 @@ function SlideBoxContent(props) {
             messageDetails={messageDetails}
             cap={cap}
             onFacebookSubmit={onFacebookSubmit}
+            onCreateComplete={onCreateComplete}
             isFullMode={isFullMode}
+            params={{
+              id: templateData._id,
+            }}
+            getFormSubscriptionData={getFormData}
           />
         )
       }
@@ -596,6 +649,7 @@ SlideBoxContent.propTypes = {
   onChannelChange: PropTypes.func,
   currentChannel: PropTypes.string,
   onEmailModeChange: PropTypes.func,
+  onFacebookAdModeChange: PropTypes.func,
   emailCreateMode: PropTypes.string,
   templateStep: PropTypes.string,
   onCreateNextStep: PropTypes.func,

package/v2Containers/CreativesContainer/index.js

@@ -51,6 +51,7 @@ class Creatives extends React.Component {
       currentChannel: this.props.channel || 'sms',
       weChatTemplateType: '',
       weChatMaptemplateStep: 0,
+
     };
     this.creativesTemplateSteps = {
       1: 'modeSelection',
@@ -104,7 +105,6 @@ class Creatives extends React.Component {
       if ((currentChannel.toUpperCase() === constants.EMAIL && emailCreateMode === "upload") || currentChannel.toUpperCase() === constants.MOBILE_PUSH || currentChannel.toUpperCase() === constants.WECHAT) {
         templateStep = prevState.templateStep + 2;
       }
-
       return {
         templateStep,
       };
@@ -114,6 +114,8 @@ class Creatives extends React.Component {
   onEmailModeChange = (mode) => {
     this.setState({ emailCreateMode: mode});
   }
+
+
   onMobilepushModeChange = (mode) => {
     this.setState({ mobilePushCreateMode: mode});
   }
@@ -479,17 +481,19 @@ class Creatives extends React.Component {
       showFooter = true;
     }
 
-
     if (showFooter) {
-      if (slidBoxContent === "createTemplate" && ((channel === constants.EMAIL && currentStep === 'createTemplateContent') || (channel === constants.SMS && currentStep === 'modeSelection') || (channel === constants.WECHAT && currentStep === 'modeSelection'))) {
+      if (slidBoxContent === "createTemplate" && ((channel === constants.EMAIL && currentStep === 'createTemplateContent') ||
+       ([constants.SMS, constants.WECHAT].includes(channel) && currentStep === 'modeSelection'))) {
         showFooter = showFooter && !this.state.isLoadingContent;
-      } else if (slidBoxContent === "editTemplate" && ((channel === constants.EMAIL && currentStep === 'modeSelection') || (channel === constants.SMS && currentStep === 'modeSelection') || (channel === constants.WECHAT && currentStep === 'modeSelection'))) {
+      } else if (slidBoxContent === "editTemplate" &&
+      ([constants.SMS, constants.WECHAT, constants.EMAIL].includes(channel) &&
+      currentStep === 'modeSelection')) {
         showFooter = showFooter && !this.state.isLoadingContent;
       }
     }
 
     const isLineViberChannel = templateData && [constants.LINE, constants.VIBER].includes(templateData);
-    if ([constants.LINE, constants.VIBER].includes(channel) || isLineViberChannel) {
+    if ([constants.LINE, constants.VIBER, constants.FACEBOOK].includes(channel) || isLineViberChannel) {
       showFooter = false;
     }
 
@@ -573,6 +577,13 @@ class Creatives extends React.Component {
     }
     return false;
   }
+  shouldShowHeader = () => {
+    const {currentChannel} = this.state;
+    if (currentChannel === constants.FACEBOOK) {
+      return false;
+    }
+    return true;
+  }
   render() {
     const {slidBoxContent, isGetFormData, showSlideBox, templateData, currentChannel, emailCreateMode, templateStep, isLoadingContent, mobilePushCreateMode, isDiscardMessage, weChatTemplateType, weChatMaptemplateStep} = this.state;
     const {isFullMode, creativesMode, cap, isUploading, channelsToHide, selectedWeChatAccount, forwardedTags, channelsToDisable, selectedOfferDetails, onTestContentClicked, onPreviewContentClicked, getCreativesData, fetchingCmsData, editor} = this.props;
@@ -582,7 +593,7 @@ class Creatives extends React.Component {
       <SlideBoxWrapper className={classnames(`${classPrefix} ${isFullMode ? 'creatives-full-mode' : 'creatives-library-mode'} ${mapTemplateCreate ? 'map-template-create' : ''}`)}>
         <CapSlideBox
           header={
-            <SlideBoxHeader
+            this.shouldShowHeader() && <SlideBoxHeader
               key="creatives-container-slidebox-header"
               channel={currentChannel}
               messages={this.props.messages}
@@ -599,8 +610,7 @@ class Creatives extends React.Component {
               weChatTemplateType={weChatTemplateType}
               showPrefix={!isUploading} // not show back button when email template is being uploaded
               templateStep={this.creativesTemplateSteps[templateStep]}
-            />
-          }
+            />}
           content={
             <SlideBoxContent
               key="creatives-container-slidebox-content"
@@ -718,4 +728,4 @@ function mapDispatchToProps(dispatch) {
     actions: bindActionCreators(actions, dispatch),
   };
 }
-export default connect(mapStatesToProps, mapDispatchToProps)(injectIntl(Creatives));
+export default connect(mapStatesToProps, mapDispatchToProps)(injectIntl(Creatives));

package/v2Containers/Facebook/Advertisement/constant.js

@@ -0,0 +1,12 @@
+export const ALLOWED_EXTENSIONS_REGEX = (/\.(jpe?g|png)$/i);
+export const FB_AD_IMG_HEIGHT = 1080;
+export const FB_AD_IMG_WIDTH = 1080;
+export const FB_AD_IMG_SIZE = 10000000; // 10 mb
+export const ALLOWED_EXTENSIONS_VIDEO_REGEX = (/\.(mp4)$/i);
+export const FB_AD_VIDEO_SIZE = 4000000000; // 4gb
+export const MAX_CAROUSEL_ALLOWED = 10;
+
+export const IMAGE = 'IMAGE';
+export const VIDEO = 'VIDEO';
+export const CAROUSEL = 'CAROUSEL';
+export const IMAGE_VIDEO = 'imageVideo';