@capillarytech/creatives-library 7.7.0 → 7.7.3

package/v2Containers/EmailWrapper/index.js

@@ -27,6 +27,8 @@ import Email from '../Email';
 import CmsTemplatesComponent from '../../v2Components/CmsTemplatesComponent';
 import messages from './messages';
 import { CHANNEL_CREATE_TRACK_MAPPING } from '../App/constants';
+import { gtmPush } from '../../utils/gtmTrackers';
+import { EMAIL } from '../CreativesContainer/constants';
 
 const CapRadioCardWithLabel = ComponentWithLabelHOC(CapRadioCard);
 const { timeTracker } = GA;
@@ -116,13 +118,18 @@ export class EmailWrapper extends React.Component { // eslint-disable-line react
     };
     CapNotification.error(message);
   }
-  stopTimerGA=() => {
+  stopTimerGA = () => {
     // stop timer
-    timeTracker.stopTimer(CHANNEL_CREATE_TRACK_MAPPING.email, {
+    const timeTaken = timeTracker.stopTimer(CHANNEL_CREATE_TRACK_MAPPING.email, {
       category: 'Creatives',
       action: 'Create',
       label: 'uploadZip',
     });
+    gtmPush('creativeDetails', {
+      channel: EMAIL,
+      timeTaken,
+      mode: 'uploadZip'
+    });    
   }
   handleFileUpload = (file = {}) => {
     const { templatesActions, intl, showNextStep, isUploading } = this.props;
@@ -133,8 +140,8 @@ export class EmailWrapper extends React.Component { // eslint-disable-line react
 
       if (supportedZipFormats.indexOf(fileExtension.toLowerCase()) !== -1) {
         templatesActions.handleZipUpload(file.originFileObj, () => { //handle upload success
+          this.stopTimerGA();
           this.setState({ modeContent: { file } }, showNextStep);
-          stopTimerGA();
         }, this.handleZipUploadError);
       } else if (fileExtension === 'html' || fileExtension === 'htm') {
         const reader = new FileReader();

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,
+    orgUnitId,
   } = 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?.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);
@@ -217,6 +221,7 @@ export const Advertisement = (props) => {
     }
   }, [fbADData[`templateDetails`] || templateData]);
 
+
   const CustomToolTip = useCallback((msg) => <CapTooltipWithInfo
     infoIconProps={{svgProps: {width: 12, height: 12}, style: {marginLeft: 5}}}
     title={msg}
@@ -349,8 +354,7 @@ export const Advertisement = (props) => {
       }
       messageData.push(data);
     });
-
-    return {
+    let finalResponse = {
       versions: {
         base: {
           content: {
@@ -362,12 +366,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(
@@ -443,6 +452,7 @@ export const Advertisement = (props) => {
     updateMessageTitle(val);
   }, [messageTitle]);
 
+
   const isDisableDone = useCallback((isPreview) => {
     let flag = false;
     if (primaryText === "" ) {
@@ -492,8 +502,7 @@ export const Advertisement = (props) => {
     selectedAd,
   ]
 );
-
-  const isDisableContinue = () => messageTitle.trim() === "" || selectedAd === "";
+  const isDisableContinue = () => isFullMode ? (messageTitle.trim() === "" || selectedAd === "") : ( selectedAd === "");
 
   const onClickContinue = useCallback(() => { updateStep('createFacebookAd'); }, [step]);
 
@@ -802,8 +811,8 @@ export const Advertisement = (props) => {
     setPageId(value);
   }, [pageId]);
 
-  const selectedFacebookAccount = get(facebookTemplateData, 'selectedFacebookAccount', {});
-  const {orgUnitFacebookPageSettingsMap = {}, employeeAccessToken: accessToken = "", accountId = "" } = selectedFacebookAccount;
+  const selectedFacebookAccount = templateData?.edit ? templateData?.selectedFacebookAccount : facebookTemplateData?.selectedFacebookAccount;
+  const {orgUnitFacebookPageSettingsMap = {}, employeeAccessToken: accessToken = "", accountId = "" } = selectedFacebookAccount || {};
 
   const getPageAccessOrgs = useCallback(() => {
     const {status, data } = fbADData.orgOuData || {};
@@ -813,14 +822,32 @@ export const Advertisement = (props) => {
     const orgName = (
       proxyOrgList.find(({ orgID }) => orgID === Number(orgId)) || {}
     ).orgName;
-    if (status === 'SUCCESS') {
+    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) {
-          pageAccessOrgsOptions.push({label: data[obj] === -1 ? orgName : obj, value: data[obj]});
+          pageAccessOrgsOptions.push({label: obj, value: data[obj]});
         }
       });
-      if (!pageId) {
+      if (orgUnitFacebookPageSettingsMap[-1]) {
+        pageAccessOrgsOptions.push({label: orgName, value: -1});
+      }
+      if (!pageId && !isEmpty(data)) {
         setPageId((pageAccessOrgsOptions[0] || {} ).value);
+      } else if (orgUnitFacebookPageSettingsMap[-1] && !pageId) {
+        setPageId(-1);
       }
     }
     return pageAccessOrgsOptions;
@@ -829,7 +856,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 +865,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 +909,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 +935,7 @@ export const Advertisement = (props) => {
                  title={<FormattedMessage {...messages.creativesTemplatesEditName}/>}
                  onClick={onClickEditName}
                   />}
-             </div>
+             </div>}
              <CapColumn span={12}>
                {isFullMode && <><CapHeading
                  type="h4"
@@ -974,8 +1010,8 @@ Advertisement.propTypes = {
   facebookTemplateData: PropTypes.object,
   templateData: PropTypes.object,
   params: PropTypes.object,
+  selectedMarketingObjective: PropTypes.any,
 
 };
 
 export default injectIntl(Advertisement);
-

package/v2Containers/Facebook/Advertisement/index.scss

@@ -30,7 +30,7 @@ $classPrefix: add-facebook-ad-section;
 
     .cap-header-facebook-ad{
         position: fixed;
-        top: 27px;
+        top: 58px;
         z-index: 1000;
         .title-desc-container{
             padding-left: 10px;

package/v2Containers/Facebook/Facebook.style.js

@@ -50,7 +50,7 @@ export default css`
 
     .parameter-list-item {
       list-style: none;
-      margin-bottom: ${CAP_SPACE_28};
+      margin-bottom: 60px;
   
       .parameter-index {
         float: left;

package/v2Containers/Facebook/constants.js

@@ -47,3 +47,7 @@ export const VALUE_REACH = 'VALUE_REACH';
 export const VALUE_VIDEO_VIEWS = 'VALUE_VIDEO_VIEWS';
 export const VALUE_LINK_CLICKS = 'VALUE_LINK_CLICKS';
 export const VALUE_POST_ENGAGEMENT = 'VALUE_POST_ENGAGEMENT';
+
+
+export const AD_MANAGER = "AD_MANAGER";
+export const CREATIVE = "CREATIVE";