@capillarytech/creatives-library 7.7.26 → 7.8.1

package/v2Containers/CapFacebookPreview/index.js

@@ -30,11 +30,6 @@ import {
   CAROUSEL,
   NO_CALL_TO_ACTION,
 } from '../../v2Containers/Facebook/Advertisement/constant';
-import {
-  FETCH_PREVIEW_REQUESTED,
-  FETCH_PREVIEW_SUCCESS,
-  PREVIEW_NOT_REQUESTED,
-} from './constants';
 import './index.scss';
 
 export const CapFacebookPreview = (props) => {
@@ -60,10 +55,7 @@ export const CapFacebookPreview = (props) => {
   const [disableAfterPreviewGenerate, setDisableAfterPreviewGenerate] = useState(false);
   const [random, setRandom] = useState(0);
   const {pageAccessToken, pageId} = orgUnitFacebookPageSettingsMap;
-  const {previewIframe = "", fetchPreviewStatus = PREVIEW_NOT_REQUESTED, previewIframeError = ""} = facebookPreviewData;
-  const [previewLoaded, setPreviewLoaded] = useState(false);
-  const [isRefreshing, setIsRefreshing] = useState(false);
-  let isSpinning = false;
+  const {previewIframe = "", isFetchingPreview = false, previewIframeError = ""} = facebookPreviewData;
   const facebookAdOptions = [
     {
       value: "DESKTOP_FEED_STANDARD",
@@ -292,17 +284,9 @@ export const CapFacebookPreview = (props) => {
   };
 
   const resetIframe = () => {
-    previewLoaded && setPreviewLoaded(false);
-    !isRefreshing && setIsRefreshing(true);
     const r = random + 1;
     setRandom(r);
   };
-  const unsetLoader = () => {
-    setTimeout(function() { 
-      !previewLoaded && setPreviewLoaded(true);
-      isRefreshing && setIsRefreshing(false);
-    }.bind(this), 5000);
-  }
   const getIframe = (iframe) => {
     const divTag = document.createElement('div');
     divTag.innerHTML = iframe;
@@ -311,16 +295,13 @@ export const CapFacebookPreview = (props) => {
       <iframe
         src={src}
         key={random}
-        style={{ border: "none" }}
+        style={{border: "none"}}
         width={"600px"}
         scrolling="no"
         height={"1000px"}
         className="cap-facebook-ad-iframe"
-        onLoad={
-          unsetLoader()
-        }
       />
-    </>);
+      </>);
   };
 
   const showRefreshButton = () => {
@@ -359,80 +340,74 @@ export const CapFacebookPreview = (props) => {
     }
   }, [previewIframeError]);
   return (
-    <>
-      {isSpinning = (fetchPreviewStatus === FETCH_PREVIEW_REQUESTED) ||
-        ((fetchPreviewStatus === FETCH_PREVIEW_SUCCESS) && !previewLoaded) ||
-        isRefreshing}
-      <CapSpin
-        spinning={isSpinning}>
-        <div style={{ display: 'inline-block' }}>
-          <CapSelect
-            label={formatMessage(messages.previewBasedonAdPlacement)}
-            key={"select-previewBasedonAdPlacement"}
-            onChange={onChangeAdPreviewFormat}
-            style={{ width: '328px', paddingBottom: 16 }}
-            options={adOptions}
-            value={adPreviewFormat}
-          >
-          </CapSelect>
-        </div>
-        {!hideInfoText && <CapLabel
-          type="label1"
-          style={{ paddingBottom: 16, textAlign: 'left', width: 392 }}
+    <CapSpin spinning={isFetchingPreview}>
+      <div style={{display: 'inline-block'}}>
+        <CapSelect
+          label={formatMessage(messages.previewBasedonAdPlacement)}
+          key={"select-previewBasedonAdPlacement"}
+          onChange={onChangeAdPreviewFormat}
+          style={{width: '328px', paddingBottom: 16 }}
+          options={adOptions}
+          value={adPreviewFormat}
         >
-          {formatMessage(messages.previewAdDesc)}
-        </CapLabel>}
-        <div style={{ marginBottom: 16 }}>
-          {(disablePreviewButton || disableAfterPreviewGenerate) ?
-            <CapTooltip title={formatMessage(messages.generatePreviewDisableToolTip)}>
-              <div className="button-disabled-tooltip-wrapper">
-                <CapButton
-                  type="secondary"
-                  disabled
+        </CapSelect>
+      </div>
+      {!hideInfoText && <CapLabel
+        type="label1"
+        style={{paddingBottom: 16, textAlign: 'left', width: 392}}
                 >
-                  <FormattedMessage {...messages.generatePreview} />
-                </CapButton>
-              </div>
-            </CapTooltip> :
-            <CapButton
-              type="secondary"
-              onClick={generatePreview}
-            >
-              <FormattedMessage {...messages.generatePreview} />
-            </CapButton>}
-          {isRefreshButton && (<CapButton
-            onClick={resetIframe}
+        {formatMessage(messages.previewAdDesc)}
+      </CapLabel>}
+      <div style={{marginBottom: 16}}>
+        {(disablePreviewButton || disableAfterPreviewGenerate) ?
+          <CapTooltip title={formatMessage(messages.generatePreviewDisableToolTip)}>
+            <div className="button-disabled-tooltip-wrapper">
+              <CapButton
+                type="secondary"
+                disabled
+              >
+                <FormattedMessage {...messages.generatePreview} />
+              </CapButton>
+            </div>
+          </CapTooltip> :
+          <CapButton
             type="secondary"
-            style={{ marginLeft: 16 }}
-          >
-            {formatMessage(messages.refreshPreview)}
-          </CapButton>)}
-        </div>
-        {isRefreshButton && <div style={{ marginBottom: 16 }}>
-          <CapIcon
-            type="info"
-            svgProps={{
-              width: 16,
-              height: 16,
-            }}
+            onClick={generatePreview}
           >
-          </CapIcon>
-          <CapLabel.CapLabelInline
-            type="label1"
-            size="s"
-            style={{ marginBottom: 16, width: 392 }}
-          >
-            {formatMessage(messages.videoNotePreview)}
-          </CapLabel.CapLabelInline>
-        </div>}
-        {previewIframe === "" ? <CapImage
-          src={facebookEmptyPlaceholder}
-          alt="default"
-          width="316px"
-          height="392px"
-        /> : getIframe(previewIframe)}
-      </CapSpin>
-    </>
+            <FormattedMessage {...messages.generatePreview} />
+          </CapButton>}
+        {isRefreshButton && (<CapButton
+          onClick={resetIframe}
+          type="secondary"
+          style={{marginLeft: 16}}
+        >
+          {formatMessage(messages.refreshPreview)}
+        </CapButton>)}
+      </div>
+      {isRefreshButton && <div style={{marginBottom: 16}}>
+        <CapIcon
+          type="info"
+          svgProps={{
+            width: 16,
+            height: 16,
+          }}
+            >
+        </CapIcon>
+        <CapLabel.CapLabelInline
+          type="label1"
+          size="s"
+          style={{marginBottom: 16, width: 392}}
+                >
+          {formatMessage(messages.videoNotePreview)}
+        </CapLabel.CapLabelInline>
+      </div>}
+      {previewIframe === "" ? <CapImage
+        src={facebookEmptyPlaceholder}
+        alt="default"
+        width="316px"
+        height="392px"
+            /> : getIframe(previewIframe)}
+    </CapSpin>
   );
 };
 

package/v2Containers/CapFacebookPreview/reducer.js

@@ -6,38 +6,29 @@
 
 import { fromJS } from 'immutable';
 import get from 'lodash/get';
-import {
-  GENERATE_PREVIEW_REQUEST,
-  GENERATE_PREVIEW_SUCCESS,
-  GENERATE_PREVIEW_FAILURE,
-  CLEAR_PREVIEW,
-  FETCH_PREVIEW_REQUESTED,
-  FETCH_PREVIEW_SUCCESS,
-  FETCH_PREVIEW_FAILURE,
-  PREVIEW_NOT_REQUESTED,
-} from './constants';
+import * as types from './constants';
 
 const initialState = fromJS({
-  fetchPreviewStatus: PREVIEW_NOT_REQUESTED,
+  isFetchingPreview: false,
   previewIframe: "",
   previewIframeError: "",
 });
 
 function capFacebookPreviewReducer(state = initialState, action) {
   switch (action.type) {
-    case GENERATE_PREVIEW_REQUEST:
-      return state.set('fetchPreviewStatus', FETCH_PREVIEW_REQUESTED)
+    case types.GENERATE_PREVIEW_REQUEST:
+      return state.set('isFetchingPreview', true)
       .set('previewIframe', "")
       .set("previewIframeError", "");
-    case GENERATE_PREVIEW_SUCCESS:
-      return state.set('fetchPreviewStatus', FETCH_PREVIEW_SUCCESS)
+    case types.GENERATE_PREVIEW_SUCCESS:
+      return state.set('isFetchingPreview', false)
       .set('previewIframe', get(action, 'payload.fbPreview[0].body', ""));
-    case GENERATE_PREVIEW_FAILURE:
-      return state.set('fetchPreviewStatus', FETCH_PREVIEW_FAILURE)
+    case types.GENERATE_PREVIEW_FAILURE:
+      return state.set('isFetchingPreview', false)
       .set('previewIframe', "")
       .set("previewIframeError", get(action, 'payload.message', ""));
-    case CLEAR_PREVIEW:
-      return state.set('fetchPreviewStatus', PREVIEW_NOT_REQUESTED)
+    case types.CLEAR_PREVIEW:
+      return state.set('isFetchingPreview', false)
       .set('previewIframe', "")
       .set("previewIframeError", "");
     default:

package/v2Containers/CreativesContainer/SlideBoxContent.js

@@ -578,7 +578,6 @@ function SlideBoxContent(props) {
             templateData={templateData}
             messageDetails={messageDetails}
             cap={cap}
-            createNew={onCreateNew}
             onFacebookSubmit={onFacebookSubmit}
             onCreateComplete={onCreateComplete}
             isFullMode={isFullMode}
@@ -587,7 +586,6 @@ function SlideBoxContent(props) {
             }}
             getFormSubscriptionData={getFormData}
             fbAdManager={fbAdManager}
-            onSelectTemplate={onSelectTemplate}
           />
         )
       }

package/v2Containers/CreativesContainer/index.js

@@ -91,7 +91,7 @@ class Creatives extends React.Component {
     this.setState({ slidBoxContent: 'preview', templateData });
   };
   onEditTemplate = () => {
-    this.setState({ slidBoxContent: 'editTemplate', showSlideBox: true, templateNameExists: true });
+    this.setState({ slidBoxContent: 'editTemplate', showSlideBox: true });
   };
   onCreateNew = (fbAdManager) => {
     const data = { slidBoxContent: 'createTemplate', showSlideBox: true };

package/v2Containers/Facebook/Advertisement/index.js

@@ -474,9 +474,9 @@ export const Advertisement = (props) => {
       if (webSiteLink === "" || errorMsg.websiteLinkErrorMsg ) {
         flag = true;
       }
-      if (!imageData?.imageSrc && subType === IMAGE) {
+      if (Object.keys(imageData).length === 0 && subType === IMAGE) {
         flag = true;
-      } else if (!videoData?.videoSrc && subType === VIDEO) {
+      } else if (Object.keys(videoData).length === 0 && subType === VIDEO) {
         flag = true;
       }
       subTypes.push(subType);

package/v2Containers/Facebook/Advertisement/index.scss

@@ -21,7 +21,7 @@ $classPrefix: add-facebook-ad-section;
         display: inline-block;
     }
     .cap-input-edit-name{
-        width: 319px;
+        width: 500px;
     }
     .cap-link-edit-name{
         display: inline-block;

package/v2Containers/Facebook/index.js

@@ -269,11 +269,7 @@ const Facebook = (props) => {
   ]);
   const query = {type: 'embedded', module: 'library'};
   const location = {pathname: `/FACEBOOK`, search: '', query};
-   
-  // fbAdManager ==cretaives only the case for default startegy and user selected "capillary ad manager"
-  // below condition (fbAdManager !==CREATIVE) is for edit fb ad manager from campaign
-  //-> select capillary ad manager-> select template
-  return ((showTemplateList && fbAdManager !==CREATIVE) ? (
+  return (showTemplateList ? (
     <Templates
       key={"FACEBOOK"}
       location={location}
@@ -284,18 +280,11 @@ const Facebook = (props) => {
       onSelectTemplate={onSelectTemplate}
       renderNewCardGrid={renderNewCardGrid}
       handlePeviewTemplate={handlePeviewTemplate}
-      fbAdManager={CREATIVE} // it means we are selecting capillary ad manager from campaign
+      fbAdManager={CREATIVE}
     />
   ) :
-    (!isFullMode && ((fbAdManager !== CREATIVE && messageStrategy === "DEFAULT") 
-    || (templateData?.edit && templateData?.fbContentType !==CREATIVE && fbAdManager !== CREATIVE )) ) ?
-
-    // not fullmode + 
-    // default strtaegy and not selected "capillary ad manager" from campaign message + 
-    //edit template && not coming from campaign message where user selected "capillary ad manager" (means  edit "fb ad manager" from campaign) &&
-    // & also we are not selecting capillary ad manager from campaign
-
-    (<div className={className}>
+    (!isFullMode && (fbAdManager !== CREATIVE && messageStrategy === "DEFAULT" || (templateData?.edit && templateData?.fbContentType !==CREATIVE)) ) ?
+      (<div className={className}>
 
         <div className="is-scrollable-section" >
           <div className="account-details-wrapper">

package/v2Containers/Line/Container/Drawer/index.js

@@ -59,7 +59,7 @@ export const LineDrawer = ({
         queryParams.page = page;
         queryParams.perPage = 25;
 
-        if (params?.name) {
+        if (params.name !== "") {
             queryParams.name = params.name;
             queryParams.page = 1;
         }

package/v2Containers/MobilePush/Edit/index.js

@@ -346,7 +346,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
       });
     } else {
       selectedAccount = accounts[0];
-      formData['mobilepush-accounts'] = selectedAccount?.id;
+      formData['mobilepush-accounts'] = accounts[0].id;
     }
     this.props.actions.setWeChatAccount(selectedAccount);
     this.setState({formData, accountsOptions: accounts.map((acc) => ({key: acc.id, label: acc.name, value: acc.id}))});
@@ -361,7 +361,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     obj.type = 'MOBILEPUSH';
     obj.name = formData['template-name'];
     obj.definition = {
-      accountId: selectedWeChatAccount?.id,
+      accountId: selectedWeChatAccount.id,
       licenseCode: selectedWeChatAccount.sourceAccountIdentifier,
     };
     if (this.props.location.query && this.props.location.query.module !== 'dvs') {

package/v2Containers/MobilepushWrapper/index.js

@@ -45,7 +45,7 @@ export class MobilepushWrapper extends React.Component { // eslint-disable-line
       },
       {
         title: <FormattedMessage {...messages.text}/>,
-        content: <WithNoImage height="216px" width={"224px"}/>,
+        content: <WithNoImage height="124px" width={"224px"}/>,
         value: 'text',
         // onClick: () => {
         //   this.emailUploader.current.click();

package/v2Containers/Templates/_templates.scss

@@ -32,7 +32,8 @@
         padding: $CAP_SPACE_16 $CAP_SPACE_12;
     
         .ant-card-meta-description {
-          height: 222px;
+          height: 250px;
+          word-wrap: break-word;
         }
       }
 
@@ -40,9 +41,6 @@
         .ant-card-body {
           padding: $CAP_SPACE_24 0;
         }
-        .ant-card-meta-description {
-          height: 250px;
-        }
         .ant-card-meta {
           padding: 0;
         }

package/v2Containers/Templates/index.js

@@ -1418,11 +1418,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       }
     }
     if (this.isEnabledInLibraryModule("callSelectFromProps")) {
-      let data =id;
-      if(this.props.fbAdManager){
-        data = this.selectTemplate(id) 
-      }
-      this.props.onSelectTemplate(data, this.props.fbAdManager);
+      this.props.onSelectTemplate(this.selectTemplate(id), this.props.fbAdManager);
     } else {
       timeTracker.startTimer(CHANNEL_EDIT_TRACK_MAPPING[this.state.channel.toLowerCase()]);
       if (this.state.channel.toLowerCase() === 'ebill') {
@@ -1437,6 +1433,7 @@ 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

@@ -28,7 +28,7 @@ import FTP from '../FTP';
 import Gallery from '../Assets/Gallery';
 import withStyles from '../../hoc/withStyles';
 import styles, { CapTabStyle } from './TemplatesV2.style';
-import { CREATIVES_UI_VIEW, LOYALTY} from '../App/constants';
+import { CREATIVES_UI_VIEW } from '../App/constants';
 import AccessForbidden from '../../v2Components/AccessForbidden';
 
 const {CapCustomCardList} = CapCustomCard;
@@ -39,9 +39,6 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
   constructor(props) {
     super(props);
     let defaultChannel = get(this, 'props.channel') || get(this, 'props.params.channel') || 'sms';
-    if (defaultChannel === LOYALTY) {
-      defaultChannel = 'sms';
-    }
     const {
       intl,
       channelsToHide = [],
@@ -161,11 +158,7 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
   );
 
   getFacebookComponent = () => {
-    const { messageDetails, cap, onFacebookSubmit,
-      messageStrategy,
-      showDisabledFBInfo,
-      orgUnitId,
-      onSelectTemplate } = this.props;
+    const { messageDetails, cap, onFacebookSubmit, messageStrategy, showDisabledFBInfo, orgUnitId } = this.props;
     return (
       <Facebook
         {...this.props}
@@ -175,7 +168,6 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
         messageStrategy={messageStrategy}
         showDisabledFBInfo={showDisabledFBInfo}
         orgUnitId={orgUnitId}
-        onSelectTemplate={onSelectTemplate}
       />
     );
   }
@@ -228,7 +220,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}

package/v2Containers/WeChat/MapTemplates/index.js

@@ -666,16 +666,7 @@ export class MapTemplates extends React.Component { // eslint-disable-line react
               type: "radioGroup",
               metaType: "text",
               datatype: "string",
-              options: [
-                {
-                  value: URL,
-                  label: intl.formatMessage(messages.redirectOptionURL)
-                }, 
-                {
-                  value: MINI_PROGRAM,
-                  label: intl.formatMessage(messages.redirectOptionMiniProgram)
-                }
-              ],
+              options: [intl.formatMessage(messages.redirectOptionURL), intl.formatMessage(messages.redirectOptionMiniProgram)],
               errorMessage: intl.formatMessage(messages.redirectionOptionError),
               required: true,
               fluid: true,
@@ -773,8 +764,7 @@ export class MapTemplates extends React.Component { // eslint-disable-line react
       if (!isEmpty(weCrmAccounts)) {
         forEach(weCrmAccounts, (account) => {
           if (account.configs && account.configs.is_wecrm_enabled) {
-            const options = schema?.standalone?.sections[0]?.childSections[1]?.childSections[0]?.childSections[0]?.inputFields[0]?.options;
-            options && options.push({
+            schema.standalone.sections[0].childSections[1].childSections[0].childSections[0].inputFields[0].options.push({
               key: account.uuid,
               label: account.name,
               value: account.name,