@capillarytech/creatives-library 7.6.9 → 7.6.10

package/package.json

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

package/v2Containers/CreativesContainer/SlideBoxContent.js

@@ -139,6 +139,8 @@ function SlideBoxContent(props) {
       campaignSettings,
       messageStrategy,
       fbAdManger,
+      showDisableInfoForFacebook,
+      orgUnitId,
     } = 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};
@@ -337,6 +339,8 @@ function SlideBoxContent(props) {
         FTPMode="create"
         selectedOfferDetails={selectedOfferDetails}
         messageStrategy={messageStrategy}
+        showDisableInfoForFacebook={showDisableInfoForFacebook}
+        orgUnitId={orgUnitId}
         />
       )}
       {isPreview && (
@@ -564,6 +568,7 @@ function SlideBoxContent(props) {
             messageStrategy={messageStrategy}
             fbAdManger={fbAdManger}
             onSelectTemplate={onSelectTemplate}
+            orgUnitId={orgUnitId}
           />
         )
       }
@@ -694,6 +699,8 @@ SlideBoxContent.propTypes = {
   selectedAccount: PropTypes.object,
   onFTPSubmit: PropTypes.func,
   messageStrategy: PropTypes.string,
-
+  fbAdManger: PropTypes.string,
+  showDisableInfoForFacebook: PropTypes.boolean,
+  orgUnitId: PropTypes.any,
 };
 export default SlideBoxContent;

package/v2Containers/CreativesContainer/index.js

@@ -25,6 +25,9 @@ import {isLoading as isLoadingSelector} from './selectors';
 import messages from './messages';
 import { MAP_TEMPLATE } from '../WeChat/Wrapper/constants';
 import { makeSelectFetchingCmsData } from '../Email/selectors';
+import {IMAGE, VIDEO } from '../Facebook/Advertisement/constant';
+import { CREATIVE } from '../Facebook/constant';
+
 
 const classPrefix = 'add-creatives-section';
 
@@ -74,11 +77,11 @@ class Creatives extends React.Component {
   }
 
   onSelectTemplate = (template, fbAdManger) => {
+    const data = {slidBoxContent: 'editTemplate', templateData: template};
     if (fbAdManger) {
-      this.setState({ slidBoxContent: 'editTemplate', templateData: template, fbAdManger});
-    } else {
-      this.setState({ slidBoxContent: 'editTemplate', templateData: template });
+      data.fbAdManger = fbAdManger;
     }
+    this.setState(data);
   };
   onPreviewTemplate = (template) => {
     const templateData = template;
@@ -91,11 +94,11 @@ class Creatives extends React.Component {
     this.setState({ slidBoxContent: 'editTemplate', showSlideBox: true });
   };
   onCreateNew = (fbAdManger) => {
+    const data = { slidBoxContent: 'createTemplate', showSlideBox: true };
     if (fbAdManger) {
-      this.setState({ slidBoxContent: 'createTemplate', showSlideBox: true, fbAdManger });
-    } else {
-      this.setState({ slidBoxContent: 'createTemplate', showSlideBox: true });
+      data.fbAdManger = fbAdManger;
     }
+    this.setState(data);
   };
 
   onShowTemplates = () => {
@@ -227,29 +230,33 @@ class Creatives extends React.Component {
           break;
         }
         case constants.FACEBOOK: {
-          if (templateData.fbContentType === "CREATIVE") {
-            const { creativeType, selectedFacebookAccount } = templateData || {};
-            const fBContent = templateData.facebookCreativeList;
+          if (templateData.fbContentType === CREATIVE) {
+            const {
+              creativeType = "",
+              selectedFacebookAccount = {},
+              facebookCreativeList: fbCreativeList = [],
+            } = templateData || {};
+            const fBContent = fbCreativeList;
             const facebookCreativeList = [];
             fBContent.forEach((obj) => {
               const data = cloneDeep(obj);
-              const {subType, linkDescription, imageLink, websiteLink, videoId} = obj;
+              const {subType, linkDescription, imageLink, websiteLink, videoId, videoName, videoUrl} = obj || {};
               delete data.linkDescription;
               delete data.websiteLink;
               data.linkDesc = linkDescription;
               data.webSiteLink = websiteLink;
               data.type = creativeType;
               switch (subType) {
-                case "IMAGE":
+                case IMAGE:
                   data.imgSrc = imageLink;
                   delete data.imageLink;
                   break;
-                case "VIDEO":
+                case VIDEO:
                   data.video = {
                     previewImageUrl: imageLink,
                     videoId,
-                    videoSrc: "",
-                    videoName: "",
+                    videoSrc: videoUrl,
+                    videoName,
                   };
                   delete data.imageLink;
                   break;
@@ -267,7 +274,7 @@ class Creatives extends React.Component {
                   },
                 },
               },
-              type: "FACEBOOK",
+              type: constants.FACEBOOK,
               edit: true,
               selectedFacebookAccount,
             };
@@ -446,27 +453,27 @@ class Creatives extends React.Component {
             data.websiteLink = webSiteLink;
 
             switch (subType) {
-              case "IMAGE":
+              case IMAGE:
                 data.imageLink = imgSrc;
                 delete data.imgSrc;
                 break;
-              case "VIDEO":
+              case VIDEO:
                 data.imageLink = video.previewImageUrl;
                 data.videoId = video.videoId;
+                data.videoUrl = video.videoSrc;
+                data.videoName = video.videoName;
                 delete data.video;
                 break;
-              case "CAROUSEL":
-                break;
               default:
                 break;
             }
             facebookCreativeList.push(data);
           });
           templateData = {
-            fbContentType: "CREATIVE",
+            fbContentType: CREATIVE,
             creativeType: type,
             facebookCreativeList,
-            channel: "FACEBOOK",
+            channel: constants.FACEBOOK,
             accountId,
             selectedMarketingObjective: template.value.selectedMarketingObjective,
           };
@@ -719,6 +726,7 @@ class Creatives extends React.Component {
               campaignSettings={this.props.Templates.campaignSettings}
               location={this.props.location}
               messageDetails={this.props.messageDetails}
+              showDisableInfoForFacebook={this.props.showDisableInfoForFacebook}
               getFormData={this.getFormData}
               onCallTaskSubmit={this.onCallTaskSubmit}
               onCreateNew={this.onCreateNew}
@@ -760,6 +768,7 @@ class Creatives extends React.Component {
               onFTPSubmit={getCreativesData}
               editor={editor}
               messageStrategy={this.props.strategy}
+              orgUnitId={this.props.orgUnitId}
           />
           }
           footer={this.shouldShowFooter() &&
@@ -813,7 +822,7 @@ Creatives.propTypes = {
   Templates: PropTypes.object,
   selectedAccount: PropTypes.object,
   strategy: PropTypes.string,
-
+  orgUnitId: PropTypes.number,
 };
 const mapStatesToProps = () => createStructuredSelector({
   isLoading: isLoadingSelector(),

package/v2Containers/Facebook/Advertisement/index.js

@@ -90,6 +90,7 @@ export const Advertisement = (props) => {
     facebookTemplateData,
     selectedMarketingObjective,
     fbAdManger,
+    orgUnitId,
   } = props;
   const {
     formatMessage,
@@ -822,12 +823,18 @@ export const Advertisement = (props) => {
       proxyOrgList.find(({ orgID }) => orgID === Number(orgId)) || {}
     ).orgName;
     if (!status) {
+      // !status is the case of library
+      //if org id is the parent org
       if (orgUnitFacebookPageSettingsMap[-1] && !pageId) {
         setPageId(-1);
       }
       if (orgUnitFacebookPageSettingsMap[-1]) {
         pageAccessOrgsOptions.push({label: orgName, value: -1});
       }
+      // if we are coming from default startegy and calling templates from facebook/index.js
+      if (!pageId && orgUnitId && orgUnitFacebookPageSettingsMap[orgUnitId]) {
+        setPageId(orgUnitId);
+      }
     } else if (status === 'SUCCESS') {
       Object.keys(data).forEach((obj) => {
         if ((orgUnitFacebookPageSettingsMap[data[obj]] || {}).pageAccessToken) {

package/v2Containers/Facebook/index.js

@@ -16,6 +16,7 @@ import {
   CapCustomCard,
   CapIcon,
   CapRadioGroup,
+  CapTooltip,
 } from '@capillarytech/cap-ui-library';
 import Templates from '../Templates';
 import { createStructuredSelector } from 'reselect';
@@ -195,6 +196,8 @@ const Facebook = (props) => {
     createNew,
     fbAdManger,
     getFormSubscriptionData,
+    showDisableInfoForFacebook,
+    orgUnitId,
   } = props;
   const {
     selectedMarketingObjective: fbMarketingObjectiveValue = VALUE_REACH,
@@ -241,7 +244,7 @@ const Facebook = (props) => {
   const onMarketingObjectiveSelect = (value) => setMarketingObjective(value);
 
   const radioOptions = [{
-    label: intl.formatMessage(messages.capFbAdManager), value: CREATIVE,
+    label: showDisableInfoForFacebook ? <CapTooltip title={intl.formatMessage(messages.facebookDisableinfo)}>{intl.formatMessage(messages.capFbAdManager)}</CapTooltip> : intl.formatMessage(messages.capFbAdManager), value: CREATIVE, disabled: showDisableInfoForFacebook,
   }, {
     label: intl.formatMessage(messages.fbAdManager), value: AD_MANAGER,
   }];
@@ -419,6 +422,7 @@ const Facebook = (props) => {
           getFormSubscriptionData={getFormSubscriptionData}
           selectedMarketingObjective={selectedMarketingObjective}
           fbAdManger={fbAdManger}
+          orgUnitId={orgUnitId}
         />
       </div>
   );

package/v2Containers/Facebook/messages.js

@@ -172,12 +172,16 @@ export default defineMessages({
     id: `${messagePrefix}.fbAdManager`,
     defaultMessage: 'Facebook ad manager',
   },
-  adManagerHeading:{
+  adManagerHeading: {
     id: `${messagePrefix}.adManagerHeading`,
-    defaultMessage: "Where do you want to create your Facebook ad creative?"
+    defaultMessage: "Where do you want to create your Facebook ad creative?",
   },
-  capAdManagerHeading:{
+  capAdManagerHeading: {
     id: `${messagePrefix}.capAdManagerHeading`,
-    defaultMessage: "You can create Facebook ads creative in Engage+ Facebook ad Manager."
-  }
+    defaultMessage: "You can create Facebook ads creative in Engage+ Facebook ad Manager.",
+  },
+  facebookDisableinfo: {
+    id: `${messagePrefix}.facebookDisableinfo`,
+    defaultMessage: 'Please integrate Facebook Ad page ID & username to enable this option.',
+  },
 });

package/v2Containers/Templates/index.js

@@ -511,7 +511,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       }
 
       this.setState({activeMode: TEMPLATES_MODE});
-      
+
       this.getAllTemplates({params, resetPage: true});
     });
   }
@@ -1139,10 +1139,11 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     const channel = this.state.channel.toLowerCase();
     //const keyType = ev.key && ev.key.toLowerCase() !== undefined ? ev.state.toLowerCase() : '';
     let routeParams = {};
+    const {fbAdManger} = this.props;
     timeTracker.startTimer(CHANNEL_CREATE_TRACK_MAPPING[channel]);
     if (this.isEnabledInLibraryModule("callCreateFromProps")) {
       if (this.props.fbAdManger === "CREATIVE") {
-        this.props.createNew(this.props.fbAdManger);
+        this.props.createNew(fbAdManger);
       } else {
         this.props.createNew();
       }
@@ -1953,10 +1954,10 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     const { activeMode, channel, wechatFilter, lineFilter } = this.state;
     let showForFacebook = false;
     if (channel.toLowerCase() === FACEBOOK_CHANNEL) {
-      const campaignSettings = this.props.Templates.campaignSettings 
+      const campaignSettings = this.props.Templates.campaignSettings;
       if (campaignSettings && isEmpty(campaignSettings?.accountSettings)) {
         showForFacebook = true;
-      } else if(!isEmpty(campaignSettings?.accountSettings)) {
+      } else if (!isEmpty(campaignSettings?.accountSettings)) {
         const fbSetting = get(this.props.Templates, 'campaignSettings.accountSettings.socialAccountSettings.facebookAccountSettings', []);
         const { orgUnitFacebookPageSettingsMap = {} } = fbSetting[0] || {};
         let pageAccessToken = false;

package/v2Containers/TemplatesV2/index.js

@@ -10,7 +10,7 @@ import { connect } from 'react-redux';
 import { injectIntl, intlShape, FormattedMessage } from 'react-intl';
 import { createStructuredSelector } from 'reselect';
 import { bindActionCreators } from 'redux';
-import { CapTab, CapCustomCard, CapButton, CapHeader, CapSpin, CapIcon } from '@capillarytech/cap-ui-library';
+import { CapTab, CapCustomCard, CapButton, CapHeader, CapSpin, CapIcon, CapTooltip } from '@capillarytech/cap-ui-library';
 import { find, get } from 'lodash';
 import isEmpty from 'lodash/isEmpty';
 import Helmet from 'react-helmet';
@@ -45,6 +45,7 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
       channelsToDisable = [],
       isFullMode,
       onChannelChange,
+      showDisableInfoForFacebook,
     } = props;
 
     const defaultPanes = {
@@ -80,6 +81,15 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
       if (channelsToDisable.includes(pane.key)) {
         // eslint-disable-next-line no-param-reassign
         pane.disabled = true;
+        if (pane.key === 'facebook' && showDisableInfoForFacebook) {
+          pane.tab = (<CapTooltip
+            title={
+            intl.formatMessage(messages.facebookDisableinfo)
+          }
+        >
+            {intl.formatMessage(messages.facebook)}
+          </CapTooltip>);
+        }
       }
       return pane;
     });
@@ -148,7 +158,7 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
   );
 
   getFacebookComponent = () => {
-    const { messageDetails, cap, onFacebookSubmit, messageStrategy } = this.props;
+    const { messageDetails, cap, onFacebookSubmit, messageStrategy, showDisableInfoForFacebook, orgUnitId } = this.props;
     return (
       <Facebook
         {...this.props}
@@ -156,6 +166,8 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
         cap={cap}
         onFacebookSubmit={onFacebookSubmit}
         messageStrategy={messageStrategy}
+        showDisableInfoForFacebook={showDisableInfoForFacebook}
+        orgUnitId={orgUnitId}
       />
     );
   }

package/v2Containers/TemplatesV2/messages.js

@@ -66,4 +66,8 @@ export default defineMessages({
     id: 'creatives.containersV2.TemplatesV2.line',
     defaultMessage: 'Line',
   },
+  facebookDisableinfo: {
+    id: `creatives.containersV2.TemplatesV2.facebookDisableinfo`,
+    defaultMessage: 'Please integrate Facebook Ad page ID & username to enable this option.',
+  },
 });