@capillarytech/creatives-library 7.6.1 → 7.6.3

package/v2Containers/CreativesContainer/SlideBoxContent.js

@@ -136,6 +136,7 @@ function SlideBoxContent(props) {
       onShowTemplates,
       handleClose,
       onFTPSubmit,
+      campaignSettings,
     } = props;
   const type = (messageDetails.type || '').toLowerCase(); // type is context in get tags values : outbound | dvs | referral | loyalty | coupons
   const query = { type: !isFullMode && 'embedded', module: isFullMode ? 'default' : 'library', isEditFromCampaigns: (templateData || {}).isEditFromCampaigns};
@@ -164,6 +165,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 +188,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 +266,44 @@ function SlideBoxContent(props) {
         };
         return template.content;
       }
+      case constants.FACEBOOK: {
+        const template = cloneDeep(templateDataObject.versions.base) || {};
+        const {FacebookAd = [], pageOrgUnitId} = template.content || {};
+        const {
+          type: fbType = "",
+          primaryText = "",
+          callToAction = "",
+          displayLink = "",
+        } = 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.video.originalContentUrl,
+            videoName: obj.video.videoName,
+            previewUrl: obj.video.previewImageUrl,
+            videoId: obj.video.videoId,
+
+          } : {},
+          webSiteLink: obj.webSiteLink,
+        }));
+        const facebookAccountSettings = get(campaignSettings, 'accountSettings.socialAccountSettings.facebookAccountSettings', []);
+        const {accountId, employeeAccessToken: accessToken, orgUnitFacebookPageSettingsMap = {}} = facebookAccountSettings[0] || {};
+        const {pageAccessToken, pageId} = orgUnitFacebookPageSettingsMap[pageOrgUnitId];
+        const fbContent = {
+          selectedAd: fbType,
+          previewData,
+          primaryText,
+          callToAction,
+          displayLink,
+          pageAccessToken,
+          pageId,
+          accountId,
+          accessToken,
+        };
+        return fbContent;
+      }
       default:
         return get(templateDataObject, `versions.base.content`);
     }
@@ -505,6 +546,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 +569,12 @@ function SlideBoxContent(props) {
             messageDetails={messageDetails}
             cap={cap}
             onFacebookSubmit={onFacebookSubmit}
+            onCreateComplete={onCreateComplete}
             isFullMode={isFullMode}
+            params={{
+              id: templateData._id,
+            }}
+            getFormSubscriptionData={getFormData}
           />
         )
       }
@@ -596,6 +658,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"
@@ -609,6 +619,7 @@ class Creatives extends React.Component {
               onPreviewTemplate={this.onPreviewTemplate}
               slidBoxContent={slidBoxContent}
               templateData={templateData}
+              campaignSettings={this.props.Templates.campaignSettings}
               location={this.props.location}
               messageDetails={this.props.messageDetails}
               getFormData={this.getFormData}

package/v2Containers/Facebook/Advertisement/index.js

@@ -54,7 +54,7 @@ import {
   IMAGE_VIDEO,
   NO_CALL_TO_ACTION,
 } from './constant';
-
+import cloneDeep from 'lodash/cloneDeep';
 export const Advertisement = (props) => {
   const CarouselContainer = styled.div`
     width: ${(styledProps) => styledProps.width || '22px'};
@@ -122,11 +122,28 @@ export const Advertisement = (props) => {
     type,
     fileParams,
     indexFile) => {
+    let videoData = {};
+    if (type === 'video') {
+      const {
+        orgUnitFacebookPageSettingsMap = {},
+        employeeAccessToken: accessToken = "",
+        accountId = "",
+       } = selectedFacebookAccount;
+      const { pageAccessToken, pageId: pId } = orgUnitFacebookPageSettingsMap[pageId] || {};
+      videoData = {
+        accessToken,
+        actId: accountId,
+        pageAccessToken,
+        pageId: pId,
+      };
+    }
     actions.uploadFbAdAsset(file,
         type,
         fileParams,
-        indexFile);
-  }, []);
+        indexFile,
+        videoData,
+        );
+  }, [pageId]);
 
   const paramObj = params || {};
 
@@ -142,7 +159,7 @@ export const Advertisement = (props) => {
 
   useEffect(() => {
     if ((params && params.id) || (templateData || {}).edit) {
-      const { FacebookAd = [], pageId: editPageId} = get(templateData, `versions.base.content`) || get(fbADData, `templateDetails.versions.base.content`) || {};
+      const { FacebookAd = [], pageOrgUnitId: editPageId} = get(templateData, `versions.base.content`) || get(fbADData, `templateDetails.versions.base.content`) || {};
       const editMessageTitle = (templateData || {}).name || get(fbADData, 'templateDetails.name');
       const editFBContent = Object.values(FacebookAd);
       if (editPageId) {
@@ -182,6 +199,7 @@ export const Advertisement = (props) => {
               videoName,
               videoHeight,
               videoWidth,
+              videoId,
             } = obj.video;
             data.videoData = {
               videoSrc,
@@ -189,6 +207,7 @@ export const Advertisement = (props) => {
               videoHeight,
               videoWidth,
               previewUrl,
+              videoId,
             };
           }
           newCarouselData[index] = {...defaultCarouselContent, ...data};
@@ -248,14 +267,16 @@ export const Advertisement = (props) => {
   }, [selectedAd]);
 
   const updateOnImageReUpload = useCallback(() => {
-    const newCarouselData = [...carouselData];
+    const newCarouselData = cloneDeep(carouselData);
     newCarouselData[activeIndex].imageData.imageSrc = '';
     updateCarouselData(newCarouselData);
   }, [carouselData, activeIndex]);
 
   const setUpdateImageSrc = useCallback((val) => {
-    const newCarouselData = [...carouselData];
-    newCarouselData[activeIndex].imageData.imageSrc = val;
+    const newCarouselData = cloneDeep(carouselData);
+    newCarouselData[activeIndex].imageData = {
+      imageSrc: val,
+    };
     updateCarouselData(newCarouselData);
     actions.clearFbAdAsset(activeIndex);
   }, [carouselData, activeIndex]);
@@ -314,6 +335,7 @@ export const Advertisement = (props) => {
           videoHeight,
           videoWidth,
           previewUrl,
+          videoId,
         } = obj.videoData;
         data.video = {
           previewImageUrl: previewUrl,
@@ -322,6 +344,7 @@ export const Advertisement = (props) => {
           baseUrl: previewUrl.replace('/1040', ''),
           videoHeight,
           videoWidth,
+          videoId,
         };
       }
       messageData.push(data);
@@ -332,7 +355,7 @@ export const Advertisement = (props) => {
         base: {
           content: {
             FacebookAd: {...messageData},
-            pageId,
+            pageOrgUnitId: pageId,
           },
         },
       },
@@ -780,7 +803,7 @@ export const Advertisement = (props) => {
   }, [pageId]);
 
   const selectedFacebookAccount = get(facebookTemplateData, 'selectedFacebookAccount', {});
-  const {orgUnitFacebookPageSettingsMap = {}, accessToken = "", accountId = "" } = selectedFacebookAccount;
+  const {orgUnitFacebookPageSettingsMap = {}, employeeAccessToken: accessToken = "", accountId = "" } = selectedFacebookAccount;
 
   const getPageAccessOrgs = useCallback(() => {
     const {status, data } = fbADData.orgOuData || {};
@@ -865,17 +888,17 @@ export const Advertisement = (props) => {
                 >
                  {editNameState ? <CapInput
                    type="input"
-                   style={{display: 'inline-block'}}
+                   className="cap-input-edit-name"
                    onBlur={onEditFocusOut}
                    defaultValue={messageTitle || ''}
                    /> : messageTitle
                   }
-                 {!editNameState && <CapLink
-                   style={{display: "inline-flex"}}
-                   title={<FormattedMessage {...messages.creativesTemplatesEditName}/>}
-                   onClick={onClickEditName}
-                  />}
                </CapHeading>
+               {!editNameState && <CapLink
+                 className="cap-link-edit-name"
+                 title={<FormattedMessage {...messages.creativesTemplatesEditName}/>}
+                 onClick={onClickEditName}
+                  />}
              </div>
              <CapColumn span={12}>
                {isFullMode && <><CapHeading

package/v2Containers/Facebook/Advertisement/index.scss

@@ -18,7 +18,16 @@ $classPrefix: add-facebook-ad-section;
         white-space: nowrap;
         min-width: 112px;
         max-width: 920px;
+        display: inline-block;
     }
+    .cap-input-edit-name{
+        width: 500px;
+    }
+    .cap-link-edit-name{
+        display: inline-block;
+        margin-bottom: 4px;
+    }
+
     .cap-header-facebook-ad{
         position: fixed;
         top: 27px;

package/v2Containers/Facebook/Advertisement/messages.js

@@ -17,7 +17,7 @@ export default defineMessages({
   },
   imageVideoDesc: {
     id: `${messagePrefix}.imageVideoDesc`,
-    defaultMessage: 'Create an Ad with one image or video, or a slideshow with multiple images',
+    defaultMessage: 'Create an Ad with one image or video',
   },
   carouselTitle: {
     id: `${messagePrefix}.carouselTitle`,
@@ -93,7 +93,7 @@ export default defineMessages({
   },
   video_slideshow: {
     id: `${messagePrefix}.video_slideshow`,
-    defaultMessage: 'Video/Slideshow',
+    defaultMessage: 'Video',
   },
   doneButtonLabel: {
     id: `${messagePrefix}.doneButtonLabel`,

package/v2Containers/Facebook/actions.js

@@ -6,8 +6,71 @@
 
 import {
   GET_MARKETING_OBJECTIVES,
+  UPLOAD_FB_AD_ASSET_REQUEST,
+  CREATE_FACEBOOK_AD_TEMPLATE_REQUEST,
+  EDIT_FACEBOOK_AD_TEMPLATE_REQUEST,
+  GET_FACEBOOK_AD_TEMPLATE_DETAILS_REQUEST,
+  CLEAR_FACEBOOK_AD_ASSET,
+  CLEAR_FACEBOOK_AD_CREATE_RESPONSE_REQUEST,
+  CLEAR_FACEBOOK_AD_DATA,
+  CLEAR_FACEBOOK_AD_EDIT_RESPONSE_REQUEST,
+  GET_ORG_OU_LIST_REQUEST,
 } from './constants';
 
 export const getMarketingObjectives = () => ({
   type: GET_MARKETING_OBJECTIVES,
 });
+
+export const uploadFbAdAsset = (file, assetType, fileParams, templateType, videoData) => ({
+  type: UPLOAD_FB_AD_ASSET_REQUEST,
+  file,
+  assetType,
+  fileParams,
+  templateType,
+  videoData,
+});
+
+export const createTemplate = (template, callback) => ({
+  type: CREATE_FACEBOOK_AD_TEMPLATE_REQUEST,
+  template,
+  callback,
+});
+
+export const getOrgOUs = (orgID) => ({
+  type: GET_ORG_OU_LIST_REQUEST,
+  orgID,
+});
+
+// FOR EDIT
+
+export const editTemplate = (template, callback) => ({
+  type: EDIT_FACEBOOK_AD_TEMPLATE_REQUEST,
+  template,
+  callback,
+});
+
+export const getTemplateDetails = (id, callback) => ({
+  type: GET_FACEBOOK_AD_TEMPLATE_DETAILS_REQUEST,
+  id,
+  channel: 'FACEBOOK',
+  callback,
+});
+
+export const clearData = () => ({
+  type: CLEAR_FACEBOOK_AD_DATA,
+});
+
+export const clearEditResponse = () => ({
+  type: CLEAR_FACEBOOK_AD_EDIT_RESPONSE_REQUEST,
+});
+
+
+export const clearCreateResponse = () => ({
+  type: CLEAR_FACEBOOK_AD_CREATE_RESPONSE_REQUEST,
+});
+
+export const clearFbAdAsset = (templateType) => ({
+  type: CLEAR_FACEBOOK_AD_ASSET,
+  templateType,
+});
+

package/v2Containers/Facebook/constants.js

@@ -4,12 +4,36 @@
  *
  */
 
-const prefix = 'app/Facebook';
+const prefix = 'app/v2Containers/Facebook';
 
 export const GET_MARKETING_OBJECTIVES = `${prefix}/GET_MARKETING_OBJECTIVES`;
 export const SET_MARKETING_OBJECTIVES_SUCCESS = `${prefix}/SET_MARKETING_OBJECTIVES_SUCCESS`;
 export const SET_MARKETING_OBJECTIVES_FAILURE = `${prefix}/SET_MARKETING_OBJECTIVES_FAILURE`;
+export const UPLOAD_FB_AD_ASSET_REQUEST = `${prefix}/UPLOAD_ASSET_REQUEST`;
+export const UPLOAD_FB_AD_ASSET_SUCCESS = `${prefix}/UPLOAD_ASSET_SUCCESS`;
+export const UPLOAD_FB_AD_ASSET_FAILURE = `${prefix}/UPLOAD_ASSET_FAILURE`;
+export const CREATE_FACEBOOK_AD_TEMPLATE_REQUEST = `${prefix}/CREATE_FACEBOOK_AD_TEMPLATE_REQUEST`;
+export const CREATE_FACEBOOK_AD_TEMPLATE_SUCCESS = `${prefix}/CREATE_FACEBOOK_AD_TEMPLATE_SUCCESS`;
+export const CREATE_FACEBOOK_AD_TEMPLATE_FAILURE = `${prefix}/CREATE_FACEBOOK_AD_TEMPLATE_FAILURE`;
 
+
+export const GET_FACEBOOK_AD_TEMPLATE_DETAILS_REQUEST = `${prefix}/EDIT/CREATE_FACEBOOK_AD_TEMPLATE_DETAILS_REQUEST`;
+export const GET_FACEBOOK_AD_TEMPLATE_DETAILS_SUCCESS = `${prefix}/EDIT/CREATE_FACEBOOK_AD_TEMPLATE_DETAILS_SUCCESS`;
+export const GET_FACEBOOK_AD_TEMPLATE_DETAILS_FAILURE = `${prefix}/EDIT/CREATE_FACEBOOK_AD_TEMPLATE_DETAILS_FAILURE`;
+
+export const EDIT_FACEBOOK_AD_TEMPLATE_REQUEST = `${prefix}/Edit/EDIT_FACEBOOK_AD_TEMPLATE_REQUEST`;
+export const EDIT_FACEBOOK_AD_TEMPLATE_SUCCESS = `${prefix}/Edit/EDIT_FACEBOOK_AD_TEMPLATE_SUCCESS`;
+export const EDIT_FACEBOOK_AD_TEMPLATE_FAILURE = `${prefix}/Edit/EDIT_FACEBOOK_AD_TEMPLATE_FAILURE`;
+
+export const CLEAR_FACEBOOK_AD_EDIT_RESPONSE_REQUEST = `${prefix}/Edit/CLEAR_EDIT_RESPONSE_REQUEST`;
+export const CLEAR_FACEBOOK_AD_DATA = `${prefix}/Edit/CLEAR_DATA`;
+export const CLEAR_FACEBOOK_AD_CREATE_RESPONSE_REQUEST = `${prefix}/Create/CLEAR_EDIT_RESPONSE_REQUEST`;
+export const CLEAR_FACEBOOK_AD_ASSET = `${prefix}/CLEAR_ASSET`;
+
+
+export const GET_ORG_OU_LIST_REQUEST = `${prefix}/GET_ORG_OU_LIST_REQUEST`;
+export const GET_ORG_OU_LIST_SUCCESS = `${prefix}/GET_ORG_OU_LIST_SUCCESS`;
+export const GET_ORG_OU_LIST_FAILURE = `${prefix}/GET_ORG_OU_LIST_FAILURE`;
 // marketing objectives constants
 
 export const VALUE_APP_INSTALLS = 'VALUE_APP_INSTALLS';