@capillarytech/creatives-library 7.6.5 → 7.6.7

package/package.json

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

package/v2Containers/CapFacebookPreview/index.js

@@ -212,6 +212,7 @@ export const CapFacebookPreview = (props) => {
           ...data.params.creative.object_story_spec,
           link_data: {
             description: linkDesc,
+            message: primaryText,
             link: webSiteLink,
             name: linkHeadLine,
             picture: imageData.imageSrc,

package/v2Containers/CreativesContainer/SlideBoxContent.js

@@ -563,6 +563,7 @@ function SlideBoxContent(props) {
             getFormSubscriptionData={getFormData}
             messageStrategy={messageStrategy}
             fbAdManger={fbAdManger}
+            onSelectTemplate={onSelectTemplate}
           />
         )
       }
@@ -579,6 +580,7 @@ function SlideBoxContent(props) {
               id: templateData._id,
             }}
             getFormSubscriptionData={getFormData}
+            fbAdManger={fbAdManger}
           />
         )
       }

package/v2Containers/CreativesContainer/index.js

@@ -73,8 +73,12 @@ class Creatives extends React.Component {
     this.setState({templateNameExists: false});
   }
 
-  onSelectTemplate = (template) => {
-    this.setState({ slidBoxContent: 'editTemplate', templateData: template });
+  onSelectTemplate = (template, fbAdManger) => {
+    if (fbAdManger) {
+      this.setState({ slidBoxContent: 'editTemplate', templateData: template, fbAdManger});
+    } else {
+      this.setState({ slidBoxContent: 'editTemplate', templateData: template });
+    }
   };
   onPreviewTemplate = (template) => {
     const templateData = template;
@@ -223,11 +227,59 @@ class Creatives extends React.Component {
           break;
         }
         case constants.FACEBOOK: {
-          creativesTemplateData = {
-            selectedMarketingObjective: templateData.selectedMarketingObjective,
-            edit: true,
-            type: channel,
-          };
+          if (templateData.fbContentType === "CREATIVE") {
+            const { accountId, creativeType } = templateData || {};
+            const fBContent = templateData.facebookCreativeList;
+            const facebookCreativeList = [];
+            fBContent.forEach((obj) => {
+            const data = cloneDeep(obj);
+            const {subType, linkDescription, imageLink, websiteLink, videoId} = obj;
+            delete data.linkDescription;
+            delete data.websiteLink;
+            data.linkDesc = linkDescription;
+            data.webSiteLink = websiteLink;
+            data.type = creativeType;
+            switch (subType) {
+              case "IMAGE":
+                data.imgSrc = imageLink;
+                delete data.imageLink;
+                break;
+              case "VIDEO":
+                data.video = {
+                  previewImageUrl: imageLink,
+                  videoId,
+                  videoSrc: "",
+                  videoName: "",
+                };
+                delete data.imageLink;
+                break;
+              default:
+                break;
+            }
+            facebookCreativeList.push(data);
+          });
+            creativesTemplateData = {
+              versions: {
+                base: {
+                  content: {
+                    FacebookAd: {...facebookCreativeList},
+                    pageOrgUnitId: this.props.orgUnitId,
+                  },
+                },
+              },
+              type: "FACEBOOK",
+              edit: true,
+              selectedFacebookAccount: {
+                accountId,
+              },
+            };
+          }else {
+            creativesTemplateData = {
+              selectedMarketingObjective: templateData.selectedMarketingObjective,
+              edit: true,
+              type: channel,
+            };
+          }
           break;
         }
         case constants.LINE: {
@@ -276,25 +328,6 @@ class Creatives extends React.Component {
           };
           break;
         }
-        case constants.FACEBOOK: {
-          return {
-            fbContentType: "CREATIVE",
-            creativeType: "IMAGE",
-            facebookCreativeList: [{
-              subType: "IMAGE",
-              displayLink: "www.google.com",
-              callToAction: "callToAction",
-              primaryText: "primaryText",
-              linkDescription: "linkDescription",
-              linkHeadLine: "linkHeadLine",
-              websiteLink: "websiteLink",
-              imageLink: "www.kuch_bhi_link.com",
-              pageId: "1234",
-            }],
-            channel: "FACEBOOK",
-            accountId: "1310132286042455",
-          };
-        }
         default:
           break;
       }
@@ -398,7 +431,49 @@ class Creatives extends React.Component {
           };
         }
         break;
-      case constants.FACEBOOK:
+      case constants.FACEBOOK: {
+        if (template.value) {
+          const FacebookAd = template.value.versions.base.content.FacebookAd;
+          const type = FacebookAd[0].type;
+          const {accountId} = this.props.Templates.selectedFacebookAccount || template.value || {};
+          const facebookCreativeList = [];
+          const fBContent = Object.values(FacebookAd);
+          fBContent.forEach((obj) => {
+            const data = cloneDeep(obj);
+            const {subType, linkDesc, imgSrc, webSiteLink, video} = obj;
+            delete data.type;
+            delete data.linkDesc;
+            delete data.webSiteLink;
+            data.linkDescription = linkDesc;
+            data.websiteLink = webSiteLink;
+
+            switch (subType) {
+              case "IMAGE":
+                data.imageLink = imgSrc;
+                delete data.imgSrc;
+                break;
+              case "VIDEO":
+                data.imageLink = video.previewImageUrl;
+                data.videoId = video.videoId;
+                delete data.video;
+                break;
+              case "CAROUSEL":
+                break;
+              default:
+                break;
+            }
+            facebookCreativeList.push(data);
+          });
+          templateData = {
+            fbContentType: "CREATIVE",
+            creativeType: type,
+            facebookCreativeList,
+            channel: "FACEBOOK",
+            accountId,
+            selectedMarketingObjective: template.value.selectedMarketingObjective,
+          };
+        }
+      }
         break;
       default:
         break;

package/v2Containers/Facebook/Advertisement/index.js

@@ -3,6 +3,8 @@ import React, { useState, useEffect, useCallback} from "react";
 import { injectIntl, FormattedMessage, intlShape } from 'react-intl';
 import { isUrl } from '../../Line/Container/Wrapper/utils';
 import get from 'lodash/get';
+import isEmpty from 'lodash/isEmpty';
+
 import {
   CapInput,
   CapRadioCard,
@@ -82,10 +84,12 @@ export const Advertisement = (props) => {
     actions,
     fbADData = {},
     onCreateComplete,
-    templateData,
+    templateData = {},
     params,
     getFormSubscriptionData,
     facebookTemplateData,
+    selectedMarketingObjective,
+    fbAdManger,
   } = props;
   const {
     formatMessage,
@@ -128,7 +132,7 @@ export const Advertisement = (props) => {
         orgUnitFacebookPageSettingsMap = {},
         employeeAccessToken: accessToken = "",
         accountId = "",
-       } = selectedFacebookAccount;
+       } = selectedFacebookAccount || {};
       const { pageAccessToken, pageId: pId } = orgUnitFacebookPageSettingsMap[pageId] || {};
       videoData = {
         accessToken,
@@ -158,7 +162,7 @@ export const Advertisement = (props) => {
   }, [paramObj.id]);
 
   useEffect(() => {
-    if ((params && params.id) || (templateData || {}).edit) {
+    if ((params && params.id) || templateData?.edit) {
       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);
@@ -349,8 +353,7 @@ export const Advertisement = (props) => {
       }
       messageData.push(data);
     });
-
-    return {
+    let finalResponse = {
       versions: {
         base: {
           content: {
@@ -362,12 +365,17 @@ export const Advertisement = (props) => {
       type: "FACEBOOK",
       name: messageTitle,
     };
+    if (!isFullMode) {
+      finalResponse = {...finalResponse, selectedMarketingObjective, accountId};
+    }
+    return finalResponse;
   }, [carouselData,
     pageId,
     messageTitle,
     primaryText,
     callToAction,
-    displayLink]);
+    displayLink,
+    selectedMarketingObjective]);
 
   const onCreateFacebookAd = useCallback( () => {
     actions.createTemplate(
@@ -493,7 +501,7 @@ export const Advertisement = (props) => {
   ]
 );
 
-  const isDisableContinue = () => messageTitle.trim() === "" || selectedAd === "";
+  const isDisableContinue = () => isFullMode ? (messageTitle.trim() === "" || selectedAd === "") : ( selectedAd === "");
 
   const onClickContinue = useCallback(() => { updateStep('createFacebookAd'); }, [step]);
 
@@ -802,7 +810,7 @@ export const Advertisement = (props) => {
     setPageId(value);
   }, [pageId]);
 
-  const selectedFacebookAccount = get(facebookTemplateData, 'selectedFacebookAccount', {});
+  const selectedFacebookAccount = templateData?.edit ? templateData?.selectedFacebookAccount : facebookTemplateData?.selectedFacebookAccount;
   const {orgUnitFacebookPageSettingsMap = {}, employeeAccessToken: accessToken = "", accountId = "" } = selectedFacebookAccount;
 
   const getPageAccessOrgs = useCallback(() => {
@@ -829,7 +837,7 @@ export const Advertisement = (props) => {
   const options = getPageAccessOrgs() || [];
   const { data = {} } = fbADData.orgOuData || {};
   const selectedPageName = Object.keys(data).find((key) => data[key] === pageId);
-  return ( (step === 'modeSelection') ?
+  return ( (step === 'modeSelection' && (isEmpty(templateData) || templateData?.mode === "create")) ?
        ( <CapSpin spinning={adSpinLoader} className="add-facebook-ad-section">
          <div style={{ position: 'fixed', top: '25px', zIndex: 1}}>
            <CapHeader
@@ -838,25 +846,27 @@ export const Advertisement = (props) => {
              className={"cap-header-facebook-ad"}
             />
          </div>
-         <CapInput
-           id={`fbAd_input`}
-           onChange={onTextTitleChange}
-           className="text-template-title"
-           defaultValue={messageTitle || ''}
-           value={messageTitle || ''}
-           style={{marginBottom: 27, width: '762px'}}
-           size="default"
-           label={formatMessage(messages.creativeName)}
-            />
-         {isFullMode && <CapSelect
-           label={formatMessage(messages.facebookPage)}
-           key={"select-facebook-page"}
-           onChange={onChangeFacebookPage}
-           options={options}
-           defaultValue={(options[0] || {} ).value}
-           value={pageId || (options[0] || {} ).value}
-           style={{marginBottom: 27, width: '372px'}}
-        ></CapSelect>}
+         {isFullMode && <>
+           <CapInput
+             id={`fbAd_input`}
+             onChange={onTextTitleChange}
+             className="text-template-title"
+             defaultValue={messageTitle || ''}
+             value={messageTitle || ''}
+             style={{marginBottom: 27, width: '762px'}}
+             size="default"
+             label={formatMessage(messages.creativeName)}
+              />
+           <CapSelect
+             label={formatMessage(messages.facebookPage)}
+             key={"select-facebook-page"}
+             onChange={onChangeFacebookPage}
+             options={options}
+             defaultValue={(options[0] || {} ).value}
+             value={pageId || (options[0] || {} ).value}
+             style={{marginBottom: 27, width: '372px'}}
+          ></CapSelect>
+        </>}
          <CapHeading
            type="h4"
            style={{marginBottom: 11}}
@@ -880,8 +890,15 @@ export const Advertisement = (props) => {
          </FbAdFooter>
        </CapSpin> ) : (
          <CapSpin spinning={spinLoader}>
+           {!isFullMode && isEmpty(templateData) && <div style={{ position: 'fixed', top: '25px', zIndex: 1}}>
+             <CapHeader
+               inline
+               title={formatMessage(messages.newFacebookCreatives)}
+               className={"cap-header-facebook-ad"}
+            />
+           </div>}
            <CapRow className="add-facebook-ad-section" >
-             <div className="cap-header-facebook-ad">
+             {isFullMode && <div className="cap-header-facebook-ad">
                <CapHeading
                  type="h2"
                  className="truncate-text"
@@ -899,7 +916,7 @@ export const Advertisement = (props) => {
                  title={<FormattedMessage {...messages.creativesTemplatesEditName}/>}
                  onClick={onClickEditName}
                   />}
-             </div>
+             </div>}
              <CapColumn span={12}>
                {isFullMode && <><CapHeading
                  type="h4"
@@ -974,6 +991,7 @@ Advertisement.propTypes = {
   facebookTemplateData: PropTypes.object,
   templateData: PropTypes.object,
   params: PropTypes.object,
+  selectedMarketingObjective: PropTypes.any,
 
 };
 

package/v2Containers/Facebook/index.js

@@ -280,7 +280,7 @@ const Facebook = (props) => {
       fbAdManger={CREATIVE}
     />
   ) :
-    (!isFullMode && messageStrategy !== "X_ENGAGE" && fbAdManger !== CREATIVE) ?
+    (!isFullMode && fbAdManger !== CREATIVE && messageStrategy === "DEFAULT" ) ?
       (<div className={className}>
 
         <div className="is-scrollable-section" >
@@ -371,7 +371,7 @@ const Facebook = (props) => {
                   <CapCustomCard
                     type="Facebook"
                     FBDynamicComponent={() => (
-                    <CapIcon
+                      <CapIcon
                         size="l"
                         type="scenery"
                         className="facebook-dynamic-content"
@@ -382,7 +382,7 @@ const Facebook = (props) => {
                 <CapColumn span={16}>
                   <ul className="parameter-list">
                     {adSetParameters.map((parameter, index) => (
-                    <li key={parameter} className="parameter-list-item">
+                      <li key={parameter} className="parameter-list-item">
                         <CapLabel type="label2" className="parameter-index">
                           {index + 1}
                         </CapLabel>
@@ -417,6 +417,8 @@ const Facebook = (props) => {
           facebookTemplateData={facebookTemplateData}
           messageStrategy={messageStrategy}
           getFormSubscriptionData={getFormSubscriptionData}
+          selectedMarketingObjective={selectedMarketingObjective}
+          fbAdManger={fbAdManger}
         />
       </div>
   );
@@ -442,7 +444,6 @@ Facebook.propTypes = {
 
 Facebook.defaultProps = {
   marketingObjectiveList: [""],
-
 };
 
 const mapStateToProps = createStructuredSelector({

package/v2Containers/Templates/index.js

@@ -1143,7 +1143,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     if (this.isEnabledInLibraryModule("callCreateFromProps")) {
       if (this.props.fbAdManger === "CREATIVE") {
         this.props.createNew(this.props.fbAdManger);
-      } else{
+      } else {
         this.props.createNew();
       }
     } else if (ev.key && (ev.key.toLowerCase() === "text" || ev.key.toLowerCase() === "image")) {
@@ -1416,7 +1416,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       }
     }
     if (this.isEnabledInLibraryModule("callSelectFromProps")) {
-      this.props.onSelectTemplate(id);
+      this.props.onSelectTemplate(this.selectTemplate(id), this.props.fbAdManger);
     } else {
       if (this.state.channel.toLowerCase() === 'ebill') {
         pathName = `/ebill/edit/${id}`;
@@ -1428,6 +1428,9 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     }
   }
 
+  selectTemplate = (id) => find(this.props.TemplatesList, {_id: id})
+
+
   handlePreviewClick(template, modeType) {
     this.togglePreview();
     const templateInfo = cloneDeep(template);
@@ -1805,9 +1808,10 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     const isWechatChannel = channel === WECHAT;
     const isMobilePushChannel = channel === MOBILE_PUSH;
     const isLineChannel = channel === LINE;
+    const isFacebookChannel = channel === FACEBOOK;
 
 
-    if ((isWechatChannel || isMobilePushChannel || isLineChannel) && !isEmpty(weCrmAccounts)) {
+    if ((isWechatChannel || isMobilePushChannel || isLineChannel) && !isEmpty(weCrmAccounts) && !isFacebookChannel ) {
       forEach(weCrmAccounts, (account) => {
         if ((isWechatChannel && account.configs && account.configs.is_wecrm_enabled) || isMobilePushChannel || isLineChannel) {
           if (query.type === 'embedded' && (!query.module || (query.module && query.module !== 'library'))) {
@@ -1947,25 +1951,30 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
   render() {
     const isFullMode = this.isFullMode();
     const { activeMode, channel, wechatFilter, lineFilter } = this.state;
-    let showForFacebook = true;
+    let showForFacebook = false;
     if (channel.toLowerCase() === FACEBOOK_CHANNEL) {
-      if (isEmpty(this.props.Templates.campaignSettings)) {
-        showForFacebook = false;
-      }
-      const fbSetting = get(this.props.Templates, 'campaignSettings.accountSettings.socialAccountSettings.facebookAccountSettings', []);
-      const { orgUnitFacebookPageSettingsMap = {} } = fbSetting[0] || {};
-      let pageAccessToken = false;
-      if (!isEmpty(orgUnitFacebookPageSettingsMap)) {
-        Object.values(orgUnitFacebookPageSettingsMap).forEach((obj) => {
-          if (obj.pageAccessToken) {
-            pageAccessToken = true;
+      const campaignSettings = this.props.Templates.campaignSettings 
+      if (campaignSettings && isEmpty(campaignSettings?.accountSettings)) {
+        showForFacebook = true;
+      } else if(!isEmpty(campaignSettings?.accountSettings)) {
+        const fbSetting = get(this.props.Templates, 'campaignSettings.accountSettings.socialAccountSettings.facebookAccountSettings', []);
+        const { orgUnitFacebookPageSettingsMap = {} } = fbSetting[0] || {};
+        let pageAccessToken = false;
+        if (!isEmpty(orgUnitFacebookPageSettingsMap)) {
+          Object.values(orgUnitFacebookPageSettingsMap).forEach((obj) => {
+            if (obj.pageAccessToken) {
+              pageAccessToken = true;
+            }
+          });
+          if (!pageAccessToken) {
+            showForFacebook = true;
           }
-        });
-        if (!pageAccessToken) {
-          showForFacebook = false;
+        } else {
+          showForFacebook = true;
         }
       }
     }
+
     const showForViber = (![VIBER_CHANNEL, FACEBOOK_CHANNEL].includes(channel.toLowerCase()) ||
       (channel.toLowerCase() === VIBER_CHANNEL && !this.props.isFullMode && isEmpty(get(this.props, 'Templates.selectedViberAccount', {}))) ||
       (channel.toLowerCase() === FACEBOOK_CHANNEL && showForFacebook)

package/v2Containers/Templates/reducer.js

@@ -9,7 +9,7 @@ import * as types from './constants';
 
 const initialState = fromJS({
   getAllTemplatesInProgress: false,
-  fetchingOrgLevelCampaignSettings: true,
+  fetchingOrgLevelCampaignSettings: false,
   templates: [],
   deleteResponse: {},
   deleteTemplateInProgress: false,

package/v2Containers/TemplatesV2/index.js

@@ -208,7 +208,7 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
           router={this.props.router}
           isFullMode={this.props.isFullMode}
           createNew={this.props.createNew}
-          onSelectTemplate={(id) => this.props.onSelectTemplate(this.selectTemplate(id))}
+          onSelectTemplate={this.props.onSelectTemplate}
           renderNewCardGrid={this.getTemplateDataForGrid}
           handlePeviewTemplate={this.props.handlePeviewTemplate}
           messageStrategy={this.props.messageStrategy}