@capillarytech/creatives-library 7.6.11 → 7.6.12

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "7.6.11",
+  "version": "7.6.12",
   "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

@@ -45,6 +45,7 @@ export const CapFacebookPreview = (props) => {
     orgUnitFacebookPageSettingsMap = {},
     accessToken,
     accountId,
+    defaultGeneratePreview,
   } = props;
   const {
     formatMessage,
@@ -294,11 +295,10 @@ export const CapFacebookPreview = (props) => {
       <iframe
         src={src}
         key={random}
-        scrolling="yes"
         style={{border: "none"}}
         width={width}
+        scrolling="yes"
         height={height}
-        loading="lazy"
       />
       </>);
   };
@@ -317,6 +317,9 @@ export const CapFacebookPreview = (props) => {
 
   useEffect(() => {
     facebookPreviewActions.clearPreview();
+    if (defaultGeneratePreview) {
+      generatePreview();
+    }
   }, []);
 
   useEffect(() => {
@@ -335,7 +338,6 @@ export const CapFacebookPreview = (props) => {
       setDisableAfterPreviewGenerate(false);
     }
   }, [previewIframeError]);
-
   return (
     <CapSpin spinning={isFetchingPreview}>
       <div style={{display: 'inline-block'}}>

package/v2Containers/CreativesContainer/SlideBoxContent.js

@@ -138,8 +138,8 @@ function SlideBoxContent(props) {
       onFTPSubmit,
       campaignSettings,
       messageStrategy,
-      fbAdManger,
-      showDisableInfoForFacebook,
+      fbAdManager,
+      showDisabledFBInfo,
       orgUnitId,
     } = props;
   const type = (messageDetails.type || '').toLowerCase(); // type is context in get tags values : outbound | dvs | referral | loyalty | coupons
@@ -339,7 +339,7 @@ function SlideBoxContent(props) {
         FTPMode="create"
         selectedOfferDetails={selectedOfferDetails}
         messageStrategy={messageStrategy}
-        showDisableInfoForFacebook={showDisableInfoForFacebook}
+        showDisabledFBInfo={showDisabledFBInfo}
         orgUnitId={orgUnitId}
         />
       )}
@@ -566,7 +566,7 @@ function SlideBoxContent(props) {
             createNew
             getFormSubscriptionData={getFormData}
             messageStrategy={messageStrategy}
-            fbAdManger={fbAdManger}
+            fbAdManager={fbAdManager}
             onSelectTemplate={onSelectTemplate}
             orgUnitId={orgUnitId}
           />
@@ -585,7 +585,7 @@ function SlideBoxContent(props) {
               id: templateData._id,
             }}
             getFormSubscriptionData={getFormData}
-            fbAdManger={fbAdManger}
+            fbAdManager={fbAdManager}
           />
         )
       }
@@ -699,8 +699,8 @@ SlideBoxContent.propTypes = {
   selectedAccount: PropTypes.object,
   onFTPSubmit: PropTypes.func,
   messageStrategy: PropTypes.string,
-  fbAdManger: PropTypes.string,
-  showDisableInfoForFacebook: PropTypes.boolean,
+  fbAdManager: PropTypes.string,
+  showDisabledFBInfo: PropTypes.boolean,
   orgUnitId: PropTypes.any,
 };
 export default SlideBoxContent;

package/v2Containers/CreativesContainer/index.js

@@ -76,10 +76,10 @@ class Creatives extends React.Component {
     this.setState({templateNameExists: false});
   }
 
-  onSelectTemplate = (template, fbAdManger) => {
+  onSelectTemplate = (template, fbAdManager) => {
     const data = {slidBoxContent: 'editTemplate', templateData: template};
-    if (fbAdManger) {
-      data.fbAdManger = fbAdManger;
+    if (fbAdManager) {
+      data.fbAdManager = fbAdManager;
     }
     this.setState(data);
   };
@@ -93,10 +93,10 @@ class Creatives extends React.Component {
   onEditTemplate = () => {
     this.setState({ slidBoxContent: 'editTemplate', showSlideBox: true });
   };
-  onCreateNew = (fbAdManger) => {
+  onCreateNew = (fbAdManager) => {
     const data = { slidBoxContent: 'createTemplate', showSlideBox: true };
-    if (fbAdManger) {
-      data.fbAdManger = fbAdManger;
+    if (fbAdManager) {
+      data.fbAdManager = fbAdManager;
     }
     this.setState(data);
   };
@@ -438,7 +438,7 @@ class Creatives extends React.Component {
         break;
       case constants.FACEBOOK: {
         if (template.value) {
-          const FacebookAd = template.value.versions.base.content.FacebookAd;
+          const FacebookAd = template?.value?.versions?.base?.content?.FacebookAd;
           const type = FacebookAd[0].type;
           const {accountId} = this.props.Templates.selectedFacebookAccount || template.value || {};
           const facebookCreativeList = [];
@@ -726,7 +726,7 @@ class Creatives extends React.Component {
               campaignSettings={this.props.Templates.campaignSettings}
               location={this.props.location}
               messageDetails={this.props.messageDetails}
-              showDisableInfoForFacebook={this.props.showDisableInfoForFacebook}
+              showDisabledFBInfo={this.props.showDisabledFBInfo}
               getFormData={this.getFormData}
               onCallTaskSubmit={this.onCallTaskSubmit}
               onCreateNew={this.onCreateNew}
@@ -742,7 +742,7 @@ class Creatives extends React.Component {
               onEnterTemplateName={this.onEnterTemplateName}
               onRemoveTemplateName={this.onRemoveTemplateName}
               onResetStep={this.resetStep}
-              fbAdManger={this.state.fbAdManger}
+              fbAdManager={this.state.fbAdManager}
               cap={cap}
               setIsLoadingContent={this.setIsLoadingContent}
               onMobilepushModeChange={this.onMobilepushModeChange}

package/v2Containers/Facebook/Advertisement/index.js

@@ -89,7 +89,6 @@ export const Advertisement = (props) => {
     getFormSubscriptionData,
     facebookTemplateData,
     selectedMarketingObjective,
-    fbAdManger,
     orgUnitId,
   } = props;
   const {
@@ -163,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);
@@ -222,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}
@@ -452,6 +452,7 @@ export const Advertisement = (props) => {
     updateMessageTitle(val);
   }, [messageTitle]);
 
+
   const isDisableDone = useCallback((isPreview) => {
     let flag = false;
     if (primaryText === "" ) {
@@ -501,7 +502,6 @@ export const Advertisement = (props) => {
     selectedAd,
   ]
 );
-
   const isDisableContinue = () => isFullMode ? (messageTitle.trim() === "" || selectedAd === "") : ( selectedAd === "");
 
   const onClickContinue = useCallback(() => { updateStep('createFacebookAd'); }, [step]);
@@ -812,7 +812,7 @@ export const Advertisement = (props) => {
   }, [pageId]);
 
   const selectedFacebookAccount = templateData?.edit ? templateData?.selectedFacebookAccount : facebookTemplateData?.selectedFacebookAccount;
-  const {orgUnitFacebookPageSettingsMap = {}, employeeAccessToken: accessToken = "", accountId = "" } = selectedFacebookAccount;
+  const {orgUnitFacebookPageSettingsMap = {}, employeeAccessToken: accessToken = "", accountId = "" } = selectedFacebookAccount || {};
 
   const getPageAccessOrgs = useCallback(() => {
     const {status, data } = fbADData.orgOuData || {};

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/index.js

@@ -194,9 +194,9 @@ const Facebook = (props) => {
     renderNewCardGrid,
     onSelectTemplate,
     createNew,
-    fbAdManger,
+    fbAdManager,
     getFormSubscriptionData,
-    showDisableInfoForFacebook,
+    showDisabledFBInfo,
     orgUnitId,
   } = props;
   const {
@@ -244,7 +244,7 @@ const Facebook = (props) => {
   const onMarketingObjectiveSelect = (value) => setMarketingObjective(value);
 
   const radioOptions = [{
-    label: showDisableInfoForFacebook ? <CapTooltip title={intl.formatMessage(messages.facebookDisableinfo)}>{intl.formatMessage(messages.capFbAdManager)}</CapTooltip> : intl.formatMessage(messages.capFbAdManager), value: CREATIVE, disabled: showDisableInfoForFacebook,
+    label: showDisabledFBInfo ? <CapTooltip title={intl.formatMessage(messages.facebookDisableinfo)}>{intl.formatMessage(messages.capFbAdManager)}</CapTooltip> : intl.formatMessage(messages.capFbAdManager), value: CREATIVE, disabled: showDisabledFBInfo,
   }, {
     label: intl.formatMessage(messages.fbAdManager), value: AD_MANAGER,
   }];
@@ -280,10 +280,10 @@ const Facebook = (props) => {
       onSelectTemplate={onSelectTemplate}
       renderNewCardGrid={renderNewCardGrid}
       handlePeviewTemplate={handlePeviewTemplate}
-      fbAdManger={CREATIVE}
+      fbAdManager={CREATIVE}
     />
   ) :
-    (!isFullMode && fbAdManger !== CREATIVE && messageStrategy === "DEFAULT" ) ?
+    (!isFullMode && fbAdManager !== CREATIVE && messageStrategy === "DEFAULT" ) ?
       (<div className={className}>
 
         <div className="is-scrollable-section" >
@@ -421,7 +421,7 @@ const Facebook = (props) => {
           messageStrategy={messageStrategy}
           getFormSubscriptionData={getFormSubscriptionData}
           selectedMarketingObjective={selectedMarketingObjective}
-          fbAdManger={fbAdManger}
+          fbAdManager={fbAdManager}
           orgUnitId={orgUnitId}
         />
       </div>

package/v2Containers/Templates/index.js

@@ -62,6 +62,8 @@ import {
 } from '../App/constants';
 import { MOBILE_PUSH, WECHAT, SMS, EMAIL, EBILL, LINE, VIBER, FACEBOOK } from '../CreativesContainer/constants';
 
+import {CREATIVE} from '../Facebook/constants'
+
 import emailIllustration from '../Assets/images/emailIllustration.svg';
 import smsIllustration from '../Assets/images/smsIllustration.svg';
 import pushIllustration from '../Assets/images/pushIllustration.svg';
@@ -321,7 +323,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       }
       const fbSetting = get(nextProps.Templates, 'campaignSettings.accountSettings.socialAccountSettings.facebookAccountSettings', []);
       const { accountName = "",
-         orgUnitFacebookPageSettingsMap = {},
+          orgUnitFacebookPageSettingsMap = {},
         } = fbSetting[0] || {};
       let pageAccessToken = false;
       if (!isEmpty(orgUnitFacebookPageSettingsMap)) {
@@ -454,7 +456,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       this.setState({previewTemplate: nextProps.Templates.templateDetails});
     }
 
-    if (nextProps.Templates.weCrmAccounts !== undefined && nextProps.Templates.weCrmAccounts.length === 1 && this.state.defaultAccount && (['wechat', 'mobilepush'].indexOf(this.state.channel.toLowerCase()) > -1)) {
+    if (nextProps.Templates.weCrmAccounts !== undefined && nextProps.Templates.weCrmAccounts.length === 1 && this.state.defaultAccount && (['wechat'].indexOf(this.state.channel.toLowerCase()) > -1)) {
       const paramsDefault = {
         name: this.state.searchText,
         sortBy: this.state.sortBy,
@@ -464,9 +466,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         paramsDefault.wecrmToken = nextProps.Templates.weCrmAccounts[0].configs.wecrm_token;
         paramsDefault.originalId = nextProps.Templates.weCrmAccounts[0].sourceAccountIdentifier;
         nextProps.actions.setWeChatAccount(nextProps.Templates.weCrmAccounts[0]);
-      } else if (this.state.channel.toLowerCase() === 'mobilepush') {
-        nextProps.actions.setWeChatAccount(nextProps.Templates.weCrmAccounts[0]);
-        paramsDefault.accountId = nextProps.Templates.weCrmAccounts[0].id;
       }
       this.setState({defaultAccount: false, activeMode: TEMPLATES_MODE, selectedAccount: nextProps.Templates.weCrmAccounts[0].name });
       this.getAllTemplates({params: paramsDefault}, true);
@@ -1139,11 +1138,11 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     const channel = this.state.channel.toLowerCase();
     //const keyType = ev.key && ev.key.toLowerCase() !== undefined ? ev.state.toLowerCase() : '';
     let routeParams = {};
-    const {fbAdManger} = this.props;
+    const {fbAdManager} = this.props;
     timeTracker.startTimer(CHANNEL_CREATE_TRACK_MAPPING[channel]);
     if (this.isEnabledInLibraryModule("callCreateFromProps")) {
-      if (this.props.fbAdManger === "CREATIVE") {
-        this.props.createNew(fbAdManger);
+      if (this.props.fbAdManager === CREATIVE) {
+        this.props.createNew(fbAdManager);
       } else {
         this.props.createNew();
       }
@@ -1417,7 +1416,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       }
     }
     if (this.isEnabledInLibraryModule("callSelectFromProps")) {
-      this.props.onSelectTemplate(this.selectTemplate(id), this.props.fbAdManger);
+      this.props.onSelectTemplate(this.selectTemplate(id), this.props.fbAdManager);
     } else {
       if (this.state.channel.toLowerCase() === 'ebill') {
         pathName = `/ebill/edit/${id}`;
@@ -1952,11 +1951,11 @@ 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 = false;
+    let showFbAds = false;
     if (channel.toLowerCase() === FACEBOOK_CHANNEL) {
       const campaignSettings = this.props.Templates.campaignSettings;
       if (campaignSettings && isEmpty(campaignSettings?.accountSettings)) {
-        showForFacebook = true;
+        showFbAds = true;
       } else if (!isEmpty(campaignSettings?.accountSettings)) {
         const fbSetting = get(this.props.Templates, 'campaignSettings.accountSettings.socialAccountSettings.facebookAccountSettings', []);
         const { orgUnitFacebookPageSettingsMap = {} } = fbSetting[0] || {};
@@ -1968,17 +1967,17 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
             }
           });
           if (!pageAccessToken) {
-            showForFacebook = true;
+            showFbAds = true;
           }
         } else {
-          showForFacebook = true;
+          showFbAds = 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)
+      (channel.toLowerCase() === FACEBOOK_CHANNEL && showFbAds)
     );
 
 

package/v2Containers/TemplatesV2/index.js

@@ -45,7 +45,7 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
       channelsToDisable = [],
       isFullMode,
       onChannelChange,
-      showDisableInfoForFacebook,
+      showDisabledFBInfo,
     } = props;
 
     const defaultPanes = {
@@ -81,7 +81,7 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
       if (channelsToDisable.includes(pane.key)) {
         // eslint-disable-next-line no-param-reassign
         pane.disabled = true;
-        if (pane.key === 'facebook' && showDisableInfoForFacebook) {
+        if (pane.key === 'facebook' && showDisabledFBInfo) {
           pane.tab = (<CapTooltip
             title={
             intl.formatMessage(messages.facebookDisableinfo)
@@ -158,7 +158,7 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
   );
 
   getFacebookComponent = () => {
-    const { messageDetails, cap, onFacebookSubmit, messageStrategy, showDisableInfoForFacebook, orgUnitId } = this.props;
+    const { messageDetails, cap, onFacebookSubmit, messageStrategy, showDisabledFBInfo, orgUnitId } = this.props;
     return (
       <Facebook
         {...this.props}
@@ -166,7 +166,7 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
         cap={cap}
         onFacebookSubmit={onFacebookSubmit}
         messageStrategy={messageStrategy}
-        showDisableInfoForFacebook={showDisableInfoForFacebook}
+        showDisabledFBInfo={showDisabledFBInfo}
         orgUnitId={orgUnitId}
       />
     );