@capillarytech/creatives-library 7.6.4 → 7.6.6

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "7.6.4",
+  "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;
@@ -379,6 +383,49 @@ class Creatives extends React.Component {
           };
         }
         break;
+      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;
     }
@@ -581,8 +628,8 @@ class Creatives extends React.Component {
     return false;
   }
   shouldShowHeader = () => {
-    const {currentChannel} = this.state;
-    if (currentChannel === constants.FACEBOOK) {
+    const {currentChannel, slidBoxContent} = this.state;
+    if (currentChannel.toUpperCase() === constants.FACEBOOK && slidBoxContent === 'createTemplate') {
       return false;
     }
     return true;

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

@@ -194,6 +194,7 @@ const Facebook = (props) => {
     onSelectTemplate,
     createNew,
     fbAdManger,
+    getFormSubscriptionData,
   } = props;
   const {
     selectedMarketingObjective: fbMarketingObjectiveValue = VALUE_REACH,
@@ -347,7 +348,7 @@ const Facebook = (props) => {
           <div className="ad-section">
             <CapHeading type="h4" style={{marginBottom: 17}}>
               <FormattedMessage
-              {...messages.adManagerHeading}
+                {...messages.adManagerHeading}
             />
             </CapHeading>
             <CapRadioGroup
@@ -359,14 +360,14 @@ const Facebook = (props) => {
           />
             {adManager === AD_MANAGER ? <>
               <div className="account-section-container">
-              <CapLabel type="label1">
-                <FormattedMessage {...messages.fbAdsDescription} />
-              </CapLabel>
-            </div>
+                <CapLabel type="label1">
+                  <FormattedMessage {...messages.fbAdsDescription} />
+                </CapLabel>
+              </div>
 
 
               <CapRow span={12} type="flex">
-              <CapColumn span={6}>
+                <CapColumn span={6}>
                   <CapCustomCard
                     type="Facebook"
                     FBDynamicComponent={() => (
@@ -378,7 +379,7 @@ const Facebook = (props) => {
                     )}
                   />
                 </CapColumn>
-              <CapColumn span={16}>
+                <CapColumn span={16}>
                   <ul className="parameter-list">
                     {adSetParameters.map((parameter, index) => (
                       <li key={parameter} className="parameter-list-item">
@@ -392,7 +393,7 @@ const Facebook = (props) => {
                     ))}
                   </ul>
                 </CapColumn>
-            </CapRow></> : <CapLabel type="label1"><FormattedMessage {...messages.capAdManagerHeading}/></CapLabel>}
+              </CapRow></> : <CapLabel type="label1"><FormattedMessage {...messages.capAdManagerHeading}/></CapLabel>}
 
           </div>
         </div>
@@ -406,7 +407,7 @@ const Facebook = (props) => {
       </div>
       ) :
       <div style={{height: '1200px'}}>
-          <Advertisement
+        <Advertisement
           isFullMode={isFullMode}
           actions={facebookActions}
           fbADData={fbADData}
@@ -415,8 +416,10 @@ const Facebook = (props) => {
           params={params}
           facebookTemplateData={facebookTemplateData}
           messageStrategy={messageStrategy}
+          getFormSubscriptionData={getFormSubscriptionData}
+          selectedMarketingObjective={selectedMarketingObjective}
         />
-        </div>
+      </div>
   );
 };
 
@@ -435,11 +438,11 @@ Facebook.propTypes = {
   onCreateComplete: PropTypes.func,
   facebookTemplateData: PropTypes.object,
   messageStrategy: PropTypes.string,
+  getFormSubscriptionData: PropTypes.func,
 };
 
 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}