@capillarytech/creatives-library 7.6.5 → 7.6.6

package/package.json

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

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;
@@ -276,25 +280,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 +383,48 @@ 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, orgUnitFacebookPageSettingsMap = {}} = this.props.Templates.selectedFacebookAccount;
+          const facebookCreativeList = [];
+          const fBContent = Object.values(FacebookAd);
+          fBContent.forEach((obj) => {
+            const data = cloneDeep(obj);
+            const {subType, linkDesc, imgSrc, webSiteLink} = 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 = "www.kuch_bhi_link.com";
+                data.videoId = "123";
+                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,
@@ -86,6 +88,7 @@ export const Advertisement = (props) => {
     params,
     getFormSubscriptionData,
     facebookTemplateData,
+    selectedMarketingObjective,
   } = props;
   const {
     formatMessage,
@@ -349,8 +352,7 @@ export const Advertisement = (props) => {
       }
       messageData.push(data);
     });
-
-    return {
+    let finalResponse = {
       versions: {
         base: {
           content: {
@@ -362,12 +364,17 @@ export const Advertisement = (props) => {
       type: "FACEBOOK",
       name: messageTitle,
     };
+    if (!isFullMode) {
+      finalResponse = {...finalResponse, selectedMarketingObjective};
+    }
+    return finalResponse;
   }, [carouselData,
     pageId,
     messageTitle,
     primaryText,
     callToAction,
-    displayLink]);
+    displayLink,
+    selectedMarketingObjective]);
 
   const onCreateFacebookAd = useCallback( () => {
     actions.createTemplate(
@@ -829,7 +836,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)) ?
        ( <CapSpin spinning={adSpinLoader} className="add-facebook-ad-section">
          <div style={{ position: 'fixed', top: '25px', zIndex: 1}}>
            <CapHeader
@@ -974,6 +981,7 @@ Advertisement.propTypes = {
   facebookTemplateData: PropTypes.object,
   templateData: PropTypes.object,
   params: PropTypes.object,
+  selectedMarketingObjective: PropTypes.any,
 
 };
 

package/v2Containers/Facebook/index.js

@@ -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,7 @@ const Facebook = (props) => {
           facebookTemplateData={facebookTemplateData}
           messageStrategy={messageStrategy}
           getFormSubscriptionData={getFormSubscriptionData}
+          selectedMarketingObjective={selectedMarketingObjective}
         />
       </div>
   );
@@ -442,7 +443,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);

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}