@capillarytech/creatives-library 7.7.1 → 7.7.3

package/index.js

@@ -76,8 +76,8 @@ import viberSaga from './v2Containers/Viber/sagas';
 import TemplatesV2 from './v2Containers/TemplatesV2/index';
 
 import FacebookPreview from './v2Containers/CapFacebookPreview';
-import FacebookPreviewReducer from './v2Containers/CapFacebookPreview/reducer';
-import FacebookPreviewSaga from './v2Containers/CapFacebookPreview/sagas';
+import facebookPreviewReducer from './v2Containers/CapFacebookPreview/reducer';
+import facebookPreviewSaga from './v2Containers/CapFacebookPreview/sagas';
 
 import CreativesContainer from './v2Containers/CreativesContainer';
 import CreativesContainerReducer from './v2Containers/CreativesContainer/reducer';
@@ -105,7 +105,7 @@ const LineCreateContainer = {LineCreate, lineCreateReducer, lineCreateSaga};
 const TemplatesV2Container = {TemplatesV2, templateReducer, templateSaga};
 const FacebookContainer = {Facebook, facebookReducer, facebookSaga};
 const ViberContainer = {Viber, viberReducer, viberSaga};
-const FacebookPreviewContainer = { FacebookPreview, FacebookPreviewReducer, FacebookPreviewSaga };
+const FacebookPreviewContainer = { FacebookPreview, facebookPreviewReducer, facebookPreviewSaga };
 
 const GalleryContainer = {Gallery, galleryReducer, gallerySagas};
 const FTPContainer = {FTP, FTPReducer, FTPSagas};

package/package.json

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

package/v2Components/TemplatePreview/index.js

@@ -651,6 +651,7 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
                     pageId: content.pageId}}
                   accountId={content.accountId}
                   accessToken={content.accessToken}
+                  defaultGeneratePreview
               />
               </div>
         )}

package/v2Containers/CapFacebookPreview/index.js

@@ -30,7 +30,7 @@ import {
   CAROUSEL,
   NO_CALL_TO_ACTION,
 } from '../../v2Containers/Facebook/Advertisement/constant';
-
+import './index.scss';
 
 export const CapFacebookPreview = (props) => {
   const {
@@ -45,6 +45,7 @@ export const CapFacebookPreview = (props) => {
     orgUnitFacebookPageSettingsMap = {},
     accessToken,
     accountId,
+    defaultGeneratePreview,
   } = props;
   const {
     formatMessage,
@@ -283,22 +284,19 @@ export const CapFacebookPreview = (props) => {
     const r = random + 1;
     setRandom(r);
   };
-
   const getIframe = (iframe) => {
     const divTag = document.createElement('div');
     divTag.innerHTML = iframe;
     const src = divTag.getElementsByTagName('iframe')[0].getAttribute('src');
-    const width = divTag.getElementsByTagName('iframe')[0].getAttribute('width');
-    const height = divTag.getElementsByTagName('iframe')[0].getAttribute('height');
     return (<>
       <iframe
         src={src}
         key={random}
-        scrolling="yes"
         style={{border: "none"}}
-        width={width}
-        height={height}
-        loading="lazy"
+        width={"800px"}
+        scrolling="yes"
+        height={"1000px"}
+        className="cap-facebook-ad-iframe"
       />
       </>);
   };
@@ -317,6 +315,9 @@ export const CapFacebookPreview = (props) => {
 
   useEffect(() => {
     facebookPreviewActions.clearPreview();
+    if (defaultGeneratePreview) {
+      generatePreview();
+    }
   }, []);
 
   useEffect(() => {
@@ -335,7 +336,6 @@ export const CapFacebookPreview = (props) => {
       setDisableAfterPreviewGenerate(false);
     }
   }, [previewIframeError]);
-
   return (
     <CapSpin spinning={isFetchingPreview}>
       <div style={{display: 'inline-block'}}>

package/v2Containers/CapFacebookPreview/index.scss

@@ -0,0 +1,15 @@
+.cap-facebook-ad-iframe{
+    -moz-transform: scale(0.75, 0.75); 
+    -webkit-transform: scale(0.75, 0.75); 
+    -o-transform: scale(0.75, 0.75);
+    -ms-transform: scale(0.75, 0.75);
+    transform: scale(0.75, 0.75); 
+    -moz-transform-origin: top left;
+    -webkit-transform-origin: top left;
+    -o-transform-origin: top left;
+    -ms-transform-origin: top left;
+    transform-origin: top left;
+    #facebook{
+        position: absolute;
+    }
+}

package/v2Containers/CreativesContainer/SlideBoxContent.js

@@ -137,6 +137,10 @@ function SlideBoxContent(props) {
       handleClose,
       onFTPSubmit,
       campaignSettings,
+      messageStrategy,
+      fbAdManager,
+      showDisabledFBInfo,
+      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};
@@ -334,6 +338,9 @@ function SlideBoxContent(props) {
         slidBoxContent={slidBoxContent}
         FTPMode="create"
         selectedOfferDetails={selectedOfferDetails}
+        messageStrategy={messageStrategy}
+        showDisabledFBInfo={showDisabledFBInfo}
+        orgUnitId={orgUnitId}
         />
       )}
       {isPreview && (
@@ -558,7 +565,10 @@ function SlideBoxContent(props) {
             isFullMode={isFullMode}
             createNew
             getFormSubscriptionData={getFormData}
-
+            messageStrategy={messageStrategy}
+            fbAdManager={fbAdManager}
+            onSelectTemplate={onSelectTemplate}
+            orgUnitId={orgUnitId}
           />
         )
       }
@@ -575,6 +585,7 @@ function SlideBoxContent(props) {
               id: templateData._id,
             }}
             getFormSubscriptionData={getFormData}
+            fbAdManager={fbAdManager}
           />
         )
       }
@@ -687,5 +698,9 @@ SlideBoxContent.propTypes = {
   saveMessage: PropTypes.func,
   selectedAccount: PropTypes.object,
   onFTPSubmit: PropTypes.func,
+  messageStrategy: PropTypes.string,
+  fbAdManager: PropTypes.string,
+  showDisabledFBInfo: 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/constants';
+
 
 const classPrefix = 'add-creatives-section';
 
@@ -51,7 +54,6 @@ class Creatives extends React.Component {
       currentChannel: this.props.channel || 'sms',
       weChatTemplateType: '',
       weChatMaptemplateStep: 0,
-
     };
     this.creativesTemplateSteps = {
       1: 'modeSelection',
@@ -74,8 +76,12 @@ class Creatives extends React.Component {
     this.setState({templateNameExists: false});
   }
 
-  onSelectTemplate = (template) => {
-    this.setState({ slidBoxContent: 'editTemplate', templateData: template });
+  onSelectTemplate = (template, fbAdManager) => {
+    const data = {slidBoxContent: 'editTemplate', templateData: template};
+    if (fbAdManager) {
+      data.fbAdManager = fbAdManager;
+    }
+    this.setState(data);
   };
   onPreviewTemplate = (template) => {
     const templateData = template;
@@ -87,8 +93,12 @@ class Creatives extends React.Component {
   onEditTemplate = () => {
     this.setState({ slidBoxContent: 'editTemplate', showSlideBox: true });
   };
-  onCreateNew = () => {
-    this.setState({ slidBoxContent: 'createTemplate', showSlideBox: true });
+  onCreateNew = (fbAdManager) => {
+    const data = { slidBoxContent: 'createTemplate', showSlideBox: true };
+    if (fbAdManager) {
+      data.fbAdManager = fbAdManager;
+    }
+    this.setState(data);
   };
 
   onShowTemplates = () => {
@@ -220,11 +230,61 @@ class Creatives extends React.Component {
           break;
         }
         case constants.FACEBOOK: {
-          creativesTemplateData = {
-            selectedMarketingObjective: templateData.selectedMarketingObjective,
-            edit: true,
-            type: channel,
-          };
+          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, videoName, videoUrl} = 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: videoUrl,
+                    videoName,
+                  };
+                  delete data.imageLink;
+                  break;
+                default:
+                  break;
+              }
+              facebookCreativeList.push(data);
+            });
+            creativesTemplateData = {
+              versions: {
+                base: {
+                  content: {
+                    FacebookAd: {...facebookCreativeList},
+                    pageOrgUnitId: this.props.orgUnitId,
+                  },
+                },
+              },
+              type: constants.FACEBOOK,
+              edit: true,
+              selectedFacebookAccount,
+            };
+          } else {
+            creativesTemplateData = {
+              selectedMarketingObjective: templateData.selectedMarketingObjective,
+              edit: true,
+              type: channel,
+            };
+          }
           break;
         }
         case constants.LINE: {
@@ -376,6 +436,50 @@ 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} = 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;
+                data.videoUrl = video.videoSrc;
+                data.videoName = video.videoName;
+                delete data.video;
+                break;
+              default:
+                break;
+            }
+            facebookCreativeList.push(data);
+          });
+          templateData = {
+            fbContentType: CREATIVE,
+            creativeType: type,
+            facebookCreativeList,
+            channel: constants.FACEBOOK,
+            accountId,
+            selectedMarketingObjective: template.value.selectedMarketingObjective,
+          };
+        }
+      }
+        break;
       default:
         break;
     }
@@ -578,8 +682,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;
@@ -622,6 +726,7 @@ class Creatives extends React.Component {
               campaignSettings={this.props.Templates.campaignSettings}
               location={this.props.location}
               messageDetails={this.props.messageDetails}
+              showDisabledFBInfo={this.props.showDisabledFBInfo}
               getFormData={this.getFormData}
               onCallTaskSubmit={this.onCallTaskSubmit}
               onCreateNew={this.onCreateNew}
@@ -637,6 +742,7 @@ class Creatives extends React.Component {
               onEnterTemplateName={this.onEnterTemplateName}
               onRemoveTemplateName={this.onRemoveTemplateName}
               onResetStep={this.resetStep}
+              fbAdManager={this.state.fbAdManager}
               cap={cap}
               setIsLoadingContent={this.setIsLoadingContent}
               onMobilepushModeChange={this.onMobilepushModeChange}
@@ -661,6 +767,8 @@ class Creatives extends React.Component {
               handleClose={this.handleCloseSlideBox}
               onFTPSubmit={getCreativesData}
               editor={editor}
+              messageStrategy={this.props.strategy}
+              orgUnitId={this.props.orgUnitId}
           />
           }
           footer={this.shouldShowFooter() &&
@@ -713,6 +821,8 @@ Creatives.propTypes = {
   selectedWeChatAccount: PropTypes.object,
   Templates: PropTypes.object,
   selectedAccount: PropTypes.object,
+  strategy: PropTypes.string,
+  orgUnitId: PropTypes.number,
 };
 const mapStatesToProps = () => createStructuredSelector({
   isLoading: isLoadingSelector(),

package/v2Containers/Facebook/Advertisement/index.js

@@ -84,10 +84,12 @@ export const Advertisement = (props) => {
     actions,
     fbADData = {},
     onCreateComplete,
-    templateData,
+    templateData = {},
     params,
     getFormSubscriptionData,
     facebookTemplateData,
+    selectedMarketingObjective,
+    orgUnitId,
   } = props;
   const {
     formatMessage,
@@ -130,7 +132,7 @@ export const Advertisement = (props) => {
         orgUnitFacebookPageSettingsMap = {},
         employeeAccessToken: accessToken = "",
         accountId = "",
-       } = selectedFacebookAccount;
+       } = selectedFacebookAccount || {};
       const { pageAccessToken, pageId: pId } = orgUnitFacebookPageSettingsMap[pageId] || {};
       videoData = {
         accessToken,
@@ -160,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);
@@ -219,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}
@@ -351,8 +354,7 @@ export const Advertisement = (props) => {
       }
       messageData.push(data);
     });
-
-    return {
+    let finalResponse = {
       versions: {
         base: {
           content: {
@@ -364,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(
@@ -445,6 +452,7 @@ export const Advertisement = (props) => {
     updateMessageTitle(val);
   }, [messageTitle]);
 
+
   const isDisableDone = useCallback((isPreview) => {
     let flag = false;
     if (primaryText === "" ) {
@@ -494,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]);
 
@@ -804,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 || {};
@@ -815,7 +822,20 @@ 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: obj, value: data[obj]});
@@ -836,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
@@ -845,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}}
@@ -887,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"
@@ -906,7 +935,7 @@ export const Advertisement = (props) => {
                  title={<FormattedMessage {...messages.creativesTemplatesEditName}/>}
                  onClick={onClickEditName}
                   />}
-             </div>
+             </div>}
              <CapColumn span={12}>
                {isFullMode && <><CapHeading
                  type="h4"
@@ -981,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";