@capillarytech/creatives-library 7.8.1 → 7.9.1

package/v2Containers/CapFacebookPreview/index.js

@@ -30,6 +30,11 @@ 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) => {
@@ -55,7 +60,10 @@ export const CapFacebookPreview = (props) => {
   const [disableAfterPreviewGenerate, setDisableAfterPreviewGenerate] = useState(false);
   const [random, setRandom] = useState(0);
   const {pageAccessToken, pageId} = orgUnitFacebookPageSettingsMap;
-  const {previewIframe = "", isFetchingPreview = false, previewIframeError = ""} = facebookPreviewData;
+  const {previewIframe = "", fetchPreviewStatus = PREVIEW_NOT_REQUESTED, previewIframeError = ""} = facebookPreviewData;
+  const [previewLoaded, setPreviewLoaded] = useState(false);
+  const [isRefreshing, setIsRefreshing] = useState(false);
+  let isSpinning = false;
   const facebookAdOptions = [
     {
       value: "DESKTOP_FEED_STANDARD",
@@ -284,9 +292,17 @@ 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;
@@ -295,13 +311,16 @@ 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 = () => {
@@ -340,74 +359,80 @@ export const CapFacebookPreview = (props) => {
     }
   }, [previewIframeError]);
   return (
-    <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}
+    <>
+      {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 }}
         >
-        </CapSelect>
-      </div>
-      {!hideInfoText && <CapLabel
-        type="label1"
-        style={{paddingBottom: 16, textAlign: 'left', width: 392}}
+          {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
                 >
-        {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
+                  <FormattedMessage {...messages.generatePreview} />
+                </CapButton>
+              </div>
+            </CapTooltip> :
+            <CapButton
+              type="secondary"
+              onClick={generatePreview}
+            >
+              <FormattedMessage {...messages.generatePreview} />
+            </CapButton>}
+          {isRefreshButton && (<CapButton
+            onClick={resetIframe}
             type="secondary"
-            onClick={generatePreview}
+            style={{ marginLeft: 16 }}
           >
-            <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>
+            {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,29 +6,38 @@
 
 import { fromJS } from 'immutable';
 import get from 'lodash/get';
-import * as types from './constants';
+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';
 
 const initialState = fromJS({
-  isFetchingPreview: false,
+  fetchPreviewStatus: PREVIEW_NOT_REQUESTED,
   previewIframe: "",
   previewIframeError: "",
 });
 
 function capFacebookPreviewReducer(state = initialState, action) {
   switch (action.type) {
-    case types.GENERATE_PREVIEW_REQUEST:
-      return state.set('isFetchingPreview', true)
+    case GENERATE_PREVIEW_REQUEST:
+      return state.set('fetchPreviewStatus', FETCH_PREVIEW_REQUESTED)
       .set('previewIframe', "")
       .set("previewIframeError", "");
-    case types.GENERATE_PREVIEW_SUCCESS:
-      return state.set('isFetchingPreview', false)
+    case GENERATE_PREVIEW_SUCCESS:
+      return state.set('fetchPreviewStatus', FETCH_PREVIEW_SUCCESS)
       .set('previewIframe', get(action, 'payload.fbPreview[0].body', ""));
-    case types.GENERATE_PREVIEW_FAILURE:
-      return state.set('isFetchingPreview', false)
+    case GENERATE_PREVIEW_FAILURE:
+      return state.set('fetchPreviewStatus', FETCH_PREVIEW_FAILURE)
       .set('previewIframe', "")
       .set("previewIframeError", get(action, 'payload.message', ""));
-    case types.CLEAR_PREVIEW:
-      return state.set('isFetchingPreview', false)
+    case CLEAR_PREVIEW:
+      return state.set('fetchPreviewStatus', PREVIEW_NOT_REQUESTED)
       .set('previewIframe', "")
       .set("previewIframeError", "");
     default:

package/v2Containers/CreativesContainer/SlideBoxContent.js

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

package/v2Containers/CreativesContainer/index.js

@@ -10,6 +10,7 @@ import { connect } from 'react-redux';
 import { createStructuredSelector } from 'reselect';
 import { bindActionCreators } from 'redux';
 import styled from 'styled-components';
+import { GA } from '@capillarytech/cap-ui-utils';
 
 import * as actions from './actions';
 import { selectEmailLayout, uploadSelector, templateUserList, makeSelectTemplates } from '../Templates/selectors';
@@ -18,6 +19,7 @@ import SlideBoxHeader from './SlideBoxHeader';
 import SlideBoxFooter from './SlideBoxFooter';
 import * as constants from './constants';
 import * as commonUtil from '../../utils/common';
+import { gtmPush } from '../../utils/gtmTrackers';
 import './index.scss';
 import * as templateActions from '../Templates/actions';
 import * as globalActions from '../Cap/actions';
@@ -25,11 +27,13 @@ import {isLoading as isLoadingSelector} from './selectors';
 import messages from './messages';
 import { MAP_TEMPLATE } from '../WeChat/Wrapper/constants';
 import { makeSelectFetchingCmsData } from '../Email/selectors';
+import { IMAGE as LINE_IMAGE, IMAGE_MAP, IMAGE_CAROUSEL, VIDEO as LINE_VIDEO, TEMPLATE, STICKER } from '../Line/Container/constants';
 import {IMAGE, VIDEO } from '../Facebook/Advertisement/constant';
 import { CREATIVE } from '../Facebook/constants';
 
 
 const classPrefix = 'add-creatives-section';
+const CREATIVES_CONTAINER = 'creativesContainer';
 
 const SlideBoxWrapper = styled.div`
   .cap-slide-box-v2-container{
@@ -68,6 +72,10 @@ class Creatives extends React.Component {
     this.props.globalActions.clearMetaEntities();
   }
 
+  componentDidMount() {
+    GA.timeTracker.startTimer(CREATIVES_CONTAINER);
+  }
+
   onEnterTemplateName = () => {
     this.setState({templateNameExists: true});
   };
@@ -91,7 +99,7 @@ class Creatives extends React.Component {
     this.setState({ slidBoxContent: 'preview', templateData });
   };
   onEditTemplate = () => {
-    this.setState({ slidBoxContent: 'editTemplate', showSlideBox: true });
+    this.setState({ slidBoxContent: 'editTemplate', showSlideBox: true, templateNameExists: true });
   };
   onCreateNew = (fbAdManager) => {
     const data = { slidBoxContent: 'createTemplate', showSlideBox: true };
@@ -345,7 +353,7 @@ class Creatives extends React.Component {
   }
 
   getCreativesData = (channel, template, templateRecords) => { //from creatives to consumers
-    let templateData = {channel };
+    let templateData = { channel };
     switch (channel) {
       case constants.SMS:
         if (template.value.base) {
@@ -502,6 +510,75 @@ class Creatives extends React.Component {
     return creativesMode;
   }
 
+  logGTMEvent(channel, creativesData) {
+    const LIBRARY = 'library';
+    const timeTaken = GA.timeTracker.stopTimer(CREATIVES_CONTAINER, {
+      category: 'Campaigns',
+      action: 'Creatives',
+      label: 'Indirect',
+    });
+    const {
+      androidContent: {
+        title: androidTitle,
+        message: androidMessage,
+        type: androidType,
+      } = {},
+      iosContent: {
+        title: iosTitle,
+        message: iosMessage,
+        type: iosType,
+      } = {},
+      messageBody = '',
+      emailBody = '',
+    } = creativesData;
+    let gtmDetails = {
+      channel,
+      timeTaken,
+      mode: LIBRARY,
+      content: messageBody,
+    };
+    switch (channel) {
+      case constants.SMS:
+      case constants.WECHAT:
+      case constants.VIBER:
+        break;
+      case constants.EMAIL:
+        gtmDetails = {
+          ...gtmDetails,
+          content: emailBody,
+        };
+        break;
+      case constants.MOBILE_PUSH:
+        gtmDetails = {
+          ...gtmDetails,
+
+          content: `${androidTitle} ${androidMessage} ${iosTitle} ${iosMessage}`,
+          imageAdded: androidType === 'IMAGE' || iosType === 'IMAGE',
+        };
+        break;
+      case constants.LINE:
+        gtmDetails = Object.assign({
+          ...gtmDetails,
+        }, this.getLineMessageTypes(messageBody));
+        break;
+      default:
+        return false;
+    }
+    gtmPush('creativeDetails', gtmDetails);
+  }
+
+  getLineMessageTypes(messageBody) {
+    const {
+      messages: lineMessages = [],
+    } = JSON.parse(messageBody);
+    const typeOfMessages = lineMessages.map((message) => message.type);
+    return {
+      imageAdded: typeOfMessages.some((type) => [LINE_IMAGE, IMAGE_MAP, IMAGE_CAROUSEL, TEMPLATE].includes(type)),
+      videoAdded: typeOfMessages.includes(LINE_VIDEO),
+      stickerAdded: typeOfMessages.includes(STICKER),
+    };
+  }
+
   getFormData = (template) => {
     if (template.validity) {
       this.setState(
@@ -512,6 +589,7 @@ class Creatives extends React.Component {
           const templateData = this.state.templateData ? this.state.templateData : template; //select existing or create new content
           const channel = templateData.type;
           const creativesData = this.getCreativesData(channel, template, templateData );// convers data to consumer understandable format
+          this.logGTMEvent(channel, creativesData);
           this.props.getCreativesData(creativesData);// send data to consumer
         },
       );

package/v2Containers/Facebook/Advertisement/index.js

@@ -474,9 +474,9 @@ export const Advertisement = (props) => {
       if (webSiteLink === "" || errorMsg.websiteLinkErrorMsg ) {
         flag = true;
       }
-      if (Object.keys(imageData).length === 0 && subType === IMAGE) {
+      if (!imageData?.imageSrc && subType === IMAGE) {
         flag = true;
-      } else if (Object.keys(videoData).length === 0 && subType === VIDEO) {
+      } else if (!videoData?.videoSrc && 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: 500px;
+        width: 319px;
     }
     .cap-link-edit-name{
         display: inline-block;

package/v2Containers/Facebook/index.js

@@ -269,7 +269,11 @@ const Facebook = (props) => {
   ]);
   const query = {type: 'embedded', module: 'library'};
   const location = {pathname: `/FACEBOOK`, search: '', query};
-  return (showTemplateList ? (
+   
+  // 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) ? (
     <Templates
       key={"FACEBOOK"}
       location={location}
@@ -280,11 +284,18 @@ const Facebook = (props) => {
       onSelectTemplate={onSelectTemplate}
       renderNewCardGrid={renderNewCardGrid}
       handlePeviewTemplate={handlePeviewTemplate}
-      fbAdManager={CREATIVE}
+      fbAdManager={CREATIVE} // it means we are selecting capillary ad manager from campaign
     />
   ) :
-    (!isFullMode && (fbAdManager !== CREATIVE && messageStrategy === "DEFAULT" || (templateData?.edit && templateData?.fbContentType !==CREATIVE)) ) ?
-      (<div className={className}>
+    (!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}>
 
         <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'] = accounts[0].id;
+      formData['mobilepush-accounts'] = selectedAccount?.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="124px" width={"224px"}/>,
+        content: <WithNoImage height="216px" width={"224px"}/>,
         value: 'text',
         // onClick: () => {
         //   this.emailUploader.current.click();

package/v2Containers/Templates/_templates.scss

@@ -32,8 +32,7 @@
         padding: $CAP_SPACE_16 $CAP_SPACE_12;
     
         .ant-card-meta-description {
-          height: 250px;
-          word-wrap: break-word;
+          height: 222px;
         }
       }
 
@@ -41,6 +40,9 @@
         .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,7 +1418,11 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       }
     }
     if (this.isEnabledInLibraryModule("callSelectFromProps")) {
-      this.props.onSelectTemplate(this.selectTemplate(id), this.props.fbAdManager);
+      let data =id;
+      if(this.props.fbAdManager){
+        data = this.selectTemplate(id) 
+      }
+      this.props.onSelectTemplate(data, this.props.fbAdManager);
     } else {
       timeTracker.startTimer(CHANNEL_EDIT_TRACK_MAPPING[this.state.channel.toLowerCase()]);
       if (this.state.channel.toLowerCase() === 'ebill') {
@@ -1433,7 +1437,6 @@ 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);
@@ -2025,6 +2028,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         onChange={(e) => this.searchTemplate(e.target.value)}
         disabled={this.checkSearchDisabled()}
         onClear={() => this.searchTemplate('')}
+        onScroll={(e) => e.stopPropagation()}
         />}
       {
         channel.toUpperCase() === WECHAT && <CapRadio.CapRadioGroup className="wechat-filters" defaultValue={wechatFilter} onChange={this.setWechatFilter}>

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 } from '../App/constants';
+import { CREATIVES_UI_VIEW, LOYALTY} from '../App/constants';
 import AccessForbidden from '../../v2Components/AccessForbidden';
 
 const {CapCustomCardList} = CapCustomCard;
@@ -39,6 +39,9 @@ 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 = [],
@@ -158,7 +161,11 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
   );
 
   getFacebookComponent = () => {
-    const { messageDetails, cap, onFacebookSubmit, messageStrategy, showDisabledFBInfo, orgUnitId } = this.props;
+    const { messageDetails, cap, onFacebookSubmit,
+      messageStrategy,
+      showDisabledFBInfo,
+      orgUnitId,
+      onSelectTemplate } = this.props;
     return (
       <Facebook
         {...this.props}
@@ -168,6 +175,7 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
         messageStrategy={messageStrategy}
         showDisabledFBInfo={showDisabledFBInfo}
         orgUnitId={orgUnitId}
+        onSelectTemplate={onSelectTemplate}
       />
     );
   }
@@ -220,7 +228,7 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
           router={this.props.router}
           isFullMode={this.props.isFullMode}
           createNew={this.props.createNew}
-          onSelectTemplate={this.props.onSelectTemplate}
+          onSelectTemplate={(id) => this.props.onSelectTemplate(this.selectTemplate(id))}
           renderNewCardGrid={this.getTemplateDataForGrid}
           handlePeviewTemplate={this.props.handlePeviewTemplate}
           messageStrategy={this.props.messageStrategy}

package/v2Containers/WeChat/MapTemplates/index.js

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