@capillarytech/creatives-library 7.10.50 → 7.10.51

package/v2Components/TemplatePreview/index.js

@@ -32,7 +32,7 @@ const lineVideoPlaceholder = require('../../assets/rich-video-placeholder.svg');
 const androidPushMessagePhone = require('./assets/images/androidPushMessage.svg');
 const iPhonePushMessagePhone = require('./assets/images/iPhonePushMessage.svg');
 
-import { CAP_COLOR_03, CAP_WHITE, FONT_COLOR_01, CAP_G08, CAP_G06, CAP_G15, CAP_PURPLE01, CAP_G16, CAP_SPACE_08 } from '@capillarytech/cap-ui-library/styled/variables';
+import { CAP_COLOR_03, CAP_WHITE, FONT_COLOR_01, CAP_G08, CAP_G06, CAP_G15, CAP_PURPLE01, CAP_G16, CAP_SPACE_08, CAP_SPACE_16 } from '@capillarytech/cap-ui-library/styled/variables';
 import { TEMPLATE, IMAGE_CAROUSEL, IMAGE, STICKER, TEXT, IMAGE_MAP, VIDEO } from '../../v2Containers/Line/Container/constants';
 import CapFacebookPreview from '../../v2Containers/CapFacebookPreview';
 import { getWhatsappStatusContainer } from '../../v2Containers/Whatsapp/utils';
@@ -137,7 +137,7 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
 
   render() {
     let content = channel && channel.toLowerCase() === 'sms' ? [this.props.content] : this.props.content;
-    const { channel, showTestAndPreviewIcon, module, viberBrandName, viberAccountName, whatsappAccountName, intl, templateData } = this.props;
+    const { channel, showTestAndPreviewIcon, module, viberBrandName, viberAccountName, whatsappAccountName, whatsappContentLen = 0, intl, templateData } = this.props;
     const { formatMessage } = intl;
     const { buttonText, imageURL, messageContent: viberMessageContent } = content || {};
     let smsDetails = {};
@@ -663,35 +663,46 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
           ) : ''
         }
             {channel && channel?.toUpperCase() === WHATSAPP ? (
-              <div className="shell-v2 align-center" id="sms-preview">
-                <CapImage
-                  className="preview-image"
-                  src={whatsappMobileAndroid}
-                  alt={formatMessage(messages.previewGenerated)}
-                />
-                <div className='whatsapp-brand-name'>{whatsappAccountName || ""}</div>
-                <div
-                  className="msgContainer"
-                  style={{
-                    maxHeight: 292,
-                    marginLeft: 28,
-                  }}
-                >
+              <>
+                <div className="shell-v2 align-center" id="sms-preview">
+                  <CapImage
+                    className="preview-image"
+                    src={whatsappMobileAndroid}
+                    alt={formatMessage(messages.previewGenerated)}
+                  />
+                  <div className="whatsapp-brand-name">
+                    {whatsappAccountName || ''}
+                  </div>
                   <div
-                    className="message-pop align-left"
-                    style={whatsappSectionStyle}>
-                    <p
-                      style={{
-                        "color": CAP_G16,
-                        "margin": '1.5px 6px 1px 7px',
-                      }}>{content?.templateMsg || ''}
-                    </p>
-                    <div style={{ paddingBottom: CAP_SPACE_08 }}></div>
+                    className="msgContainer"
+                    style={{
+                      maxHeight: 292,
+                      marginLeft: 28,
+                    }}
+                  >
+                    <div
+                      className="message-pop align-left"
+                      style={whatsappSectionStyle}
+                    >
+                      <p
+                        style={{
+                          color: CAP_G16,
+                          margin: '1.5px 6px 1px 7px',
+                        }}
+                      >
+                        {content?.templateMsg || ''}
+                      </p>
+                      <div style={{ paddingBottom: CAP_SPACE_08 }}></div>
+                    </div>
                   </div>
                 </div>
-              </div>
-            ) : ('')
-            }
+                <CapHeading type="h3" style={{ textAlign: "center", marginTop: CAP_SPACE_16 }}>
+                  <FormattedMessage {...messages.whatsappMessageLength} values={{ length: 36 + whatsappContentLen }} />
+                </CapHeading>
+              </>
+            ) : (
+              ''
+            )}
             {channel && channel.toLowerCase() === FACEBOOK && (
               <div style={{position: 'absolute', left: '80%'}} id="facebook-preview">
                 <CapFacebookPreview

package/v2Components/TemplatePreview/messages.js

@@ -34,6 +34,10 @@ export default defineMessages({
     id: 'app.components.TemplatePreview.whatsappUnsubscribeLength',
     defaultMessage: "Includes 36 characters of (Click {{unsubscribe}} to unsubscribe)",
   },
+  whatsappMessageLength: {
+    id: 'app.components.TemplatePreview.whatsappMessageLength',
+    defaultMessage: "1 Message ({length} characters)",
+  },
   smsFormatType: {
     id: 'creatives.componentsV2.TemplatePreview.smsFormatType',
     defaultMessage: 'Message has unicode characters',

package/v2Containers/CreativesContainer/SlideBoxContent.js

@@ -145,6 +145,7 @@ function SlideBoxContent(props) {
       showDisabledFBInfo,
       orgUnitId,
       smsRegister,
+      enableNewChannels,
     } = 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};
@@ -364,6 +365,7 @@ function SlideBoxContent(props) {
         showDisabledFBInfo={showDisabledFBInfo}
         orgUnitId={orgUnitId}
         smsRegister={smsRegister}
+        enableNewChannels={enableNewChannels}
         />
       )}
       {isPreview && (
@@ -697,9 +699,6 @@ function SlideBoxContent(props) {
       {isEditWhatsapp && (<Whatsapp
         isFullMode={isFullMode}
         templateData={templateData}
-        getFormData={getFormData}
-        getDefaultTags={type}
-        forwardedTags={forwardedTags}
         params={{
           id: templateData._id,
         }}

package/v2Containers/CreativesContainer/index.js

@@ -364,28 +364,6 @@ class Creatives extends React.Component {
           };
           break;
         }
-        case constants.WHATSAPP: {
-          const { messageBody } = templateData;
-          const body = JSON.parse(messageBody || '{}');
-          console.log("getTemplateData body", body);
-          creativesTemplateData = {
-            type: constants.WHATSAPP,
-            edit: true,
-            name: "",
-            versions: {
-              base: {
-                content: {
-                  ...body,
-                  whatsapp: {
-                    ...body.whatsapp,
-                    status: 'approved'
-                  }
-                },
-              },
-            },
-          };
-          break;
-        }
         default:
           break;
       }
@@ -442,8 +420,8 @@ class Creatives extends React.Component {
         if (get(template, "value.versions.base")) {
           const mobilpushTemplate = template.value;
           templateData.accountId = get(mobilpushTemplate, 'definition.accountId');
-          const type = (get(this.props,"messageDetails.type") || '').toLowerCase();
-          if(type === LOYALTY){
+          const type = (get(this.props, "messageDetails.type") || '').toLowerCase();
+          if (type === LOYALTY) {
             templateData.licenseCode = get(mobilpushTemplate, 'definition.licenseCode');
           }
           const androidContent = get(mobilpushTemplate, 'versions.base.ANDROID');
@@ -517,26 +495,6 @@ class Creatives extends React.Component {
           };
         }
         break;
-      case constants.WHATSAPP:
-        if (template.value) {
-          const { Templates, templateData: templateDataProps } = this.props;
-          const { accountDetails: selectedAccountDetails, accountId: selectedAccountId } = templateDataProps || {};
-          const selectedWhatsappAccount = Templates?.selectedWhatsappAccount;
-          const accountDetails = (selectedWhatsappAccount ? selectedWhatsappAccount : selectedAccountDetails);
-          const accountId = selectedAccountId || (selectedWhatsappAccount?.id || '');
-          const { versions } = template.value;
-          const whatsappContent = cloneDeep(versions.base.content.whatsapp);
-          templateData = {
-            channel,
-            accountId,
-            accountName: accountDetails.name,
-            messageBody: whatsappContent.languages[0].content,
-            category: whatsappContent.category,
-            language: whatsappContent.languages[0].language,
-            mediaType: whatsappContent.mediaType,
-          };
-        }
-        break;
       case constants.FACEBOOK: {
         if (template.value) {
           const FacebookAd = template?.value?.versions?.base?.content?.FacebookAd;
@@ -702,11 +660,13 @@ class Creatives extends React.Component {
     });
   }
   handleCloseSlideBox = () => {
+    const { currentChannel = '', slidBoxContent = '' } = this.state;
+    const reloadTemplates = currentChannel === constants.WHATSAPP && slidBoxContent === 'editTemplate';
     this.setState((prevState) => ({
       ...prevState,
       templateData: undefined,
       showSlideBox: false,
-    }), this.props.handleCloseCreatives);
+    }), () => this.props.handleCloseCreatives(reloadTemplates));
   };
   saveMessage = () => {
     this.setState({ isGetFormData: true });
@@ -861,7 +821,7 @@ class Creatives extends React.Component {
   }
   render() {
     const {slidBoxContent, isGetFormData, showSlideBox, templateData, currentChannel, emailCreateMode, templateStep, isLoadingContent, mobilePushCreateMode, isDiscardMessage, weChatTemplateType, weChatMaptemplateStep} = this.state;
-    const {isFullMode, creativesMode, cap, isUploading, channelsToHide, selectedWeChatAccount, forwardedTags, channelsToDisable, selectedOfferDetails, onTestContentClicked, onPreviewContentClicked, getCreativesData, fetchingCmsData, editor, smsRegister} = this.props;
+    const {isFullMode, creativesMode, cap, isUploading, channelsToHide, selectedWeChatAccount, forwardedTags, channelsToDisable, selectedOfferDetails, onTestContentClicked, onPreviewContentClicked, getCreativesData, fetchingCmsData, editor, smsRegister, enableNewChannels} = this.props;
     const mapTemplateCreate = slidBoxContent === 'createTemplate' && weChatTemplateType === MAP_TEMPLATE && templateStep !== 'modeSelection';
     /* TODO: Instead of passing down same props separately to each component down, write common function to these props and pass it accordingly */
     return (
@@ -942,6 +902,7 @@ class Creatives extends React.Component {
               smsRegister={smsRegister}
               messageStrategy={this.props.strategy}
               orgUnitId={this.props.orgUnitId}
+              enableNewChannels={enableNewChannels}
           />
           }
           footer={this.shouldShowFooter() &&

package/v2Containers/Templates/_templates.scss

@@ -132,20 +132,6 @@
 
     }
   }
-
-  .create-new-link{
-    .ant-anchor-link {
-      display: flex;
-
-      .ant-anchor-link-title {
-        margin: 0;
-      }
-
-      .cap-link-v2-suffix {
-        margin-top: -2px;
-      }
-    }
-  }
 }
 
 .card-title {

package/v2Containers/Templates/index.js

@@ -32,7 +32,6 @@ import { makeSelectEdit } from '../Sms/Edit/selectors';
 import { makeSelectLine } from '../Line/Container/selectors';
 import { makeSelectViber } from '../Viber/selectors';
 import { UserIsAuthenticated } from '../../utils/authWrapper';
-import { getObjFromQueryParams } from '../../utils/v2common';
 import messages from './messages';
 import {checkUnicode} from '../../utils/smsCharCountV2';
 import * as actions from './actions';
@@ -78,7 +77,7 @@ import emailIllustration from '../Assets/images/emailIllustration.svg';
 import smsIllustration from '../Assets/images/smsIllustration.svg';
 import pushIllustration from '../Assets/images/pushIllustration.svg';
 import whatsappIllustration from '../Assets/images/whatsappIllustration.png';
-import { CAP_SPACE_16 } from '@capillarytech/cap-ui-library/styled/variables';
+import { CAP_SPACE_16, CAP_SPACE_44 } from '@capillarytech/cap-ui-library/styled/variables';
 import { GA } from '@capillarytech/cap-ui-utils';
 const { timeTracker } = GA;
 const {CapCustomCardList} = CapCustomCard;
@@ -241,13 +240,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     if (this.props.location.query.type === 'embedded' && this.isEnabledInLibraryModule("setLocale")) {
       this.setLocale();
     }
-
-    const queryItems = getObjFromQueryParams(location.search);
-
-    if(queryItems.channel === WHATSAPP_LOWERCASE && queryItems.mode === 'create') {
-      this.createTemplate();
-    }
-
     if (this.props.location.query.type === 'embedded') {
       this.props.actions.resetAccount();
     }
@@ -576,9 +568,8 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     this.getAllTemplates({getNextPage: true});
   }
   onCreateComplete = (isReloadTemplates) => {
-    const isWhatsappEdit = this.state.routeParams?.pathname?.includes(`${WHATSAPP_LOWERCASE}/edit`);
     this.setState({routeParams: null, previewOpen: false}, () => {
-      if (this.isFullMode() && (isReloadTemplates || isWhatsappEdit)) {
+      if (this.isFullMode() && isReloadTemplates) {
         this.getAllTemplates({params: {}}, true);
       }
     });
@@ -714,16 +705,10 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
   }
 
   isStatusMatching = (status, selectedWhatsappStatus) => {
-    if(this.props.isFullMode && selectedWhatsappStatus) {
-      if ( [WHATSAPP_STATUSES.unsubmitted, WHATSAPP_STATUSES.pending].includes(status) ) {
-        return selectedWhatsappStatus === WHATSAPP_STATUSES.awaitingApproval;
-      }
-        return selectedWhatsappStatus === status;
-    }
-    else if (!this.props.isFullMode){
-      return status === WHATSAPP_STATUSES.approved;
+    if ( [WHATSAPP_STATUSES.unsubmitted, WHATSAPP_STATUSES.pending].includes(status) ) {
+      return selectedWhatsappStatus === WHATSAPP_STATUSES.awaitingApproval;
     }
-    return true;
+      return selectedWhatsappStatus === status;
   }
 
   filterWhatsappTemplates = (templates) => {
@@ -733,7 +718,9 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
 
       // if status or category filter is applied, filter templates which match these filters
       return (
-        this.isStatusMatching(status, selectedWhatsappStatus)
+        selectedWhatsappStatus
+        ? this.isStatusMatching(status, selectedWhatsappStatus)
+        : true
       ) && (
         selectedWhatsappCategory
         ? category === selectedWhatsappCategory
@@ -763,7 +750,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     const channelLowerCase = stateChannel.toLowerCase();
     let filteredTemplates = templates;
     let isTraiDltFeature = false;
-    console.log("getTemplateDataForGrid", currentChannel);
     switch (currentChannel) {
       case WECHAT:
         filteredTemplates = this.filterWechatTemplates(templates);
@@ -1014,11 +1000,22 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
               </CapHeading>
             </div> : (
               [WHATSAPP_LOWERCASE].includes(this.state.channel.toLowerCase()) &&
-              isEmpty(filteredTemplates) &&
               isEmpty(this.state.searchText) &&
               !isLoading &&
-              <div style={this.isFullMode() ? { height: "calc(100vh - 325px)", overflow: 'auto'} : {}}>
-                <CapIllustration buttonClassName={`create-new-${channelLowerCase}`} {...this.getChannelTypeIllustrationInfo(currentChannel)} />
+              <div style={this.isFullMode() ? { height: "calc(100vh - 325px)", overflow: 'auto' } : {}}>
+                {isEmpty(templates) && <CapIllustration buttonClassName={`create-new-${channelLowerCase}`} {...this.getChannelTypeIllustrationInfo(currentChannel)} />}
+                {!isEmpty(templates) && isEmpty(filteredTemplates) && <CapHeader
+                  title={
+                    <CapHeading type="h3" style={{ textAlign: "center", marginTop: CAP_SPACE_44 }}>
+                      {this.props.intl.formatMessage(messages.noFilteredWhatsappTemplatesTitle)}
+                    </CapHeading>
+                  }
+                  description={
+                    <CapLabel style={{ textAlign: "center" }}>
+                      {this.props.intl.formatMessage(messages.noFilteredWhatsappTemplatesDesc)}
+                    </CapLabel>
+                  }
+                />}
               </div>
             )
           }
@@ -1328,7 +1325,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       } else {
         this.props.createNew();
       }
-    } else if (ev?.key && (ev.key.toLowerCase() === "text" || ev.key.toLowerCase() === "image")) {
+    } else if (ev.key && (ev.key.toLowerCase() === "text" || ev.key.toLowerCase() === "image")) {
       routeParams = {
         pathname: `/${channel === 'line' ? 'line' : 'mobilepush'}/create/${ev.key.toLowerCase()}`,
         query: type === 'embedded' ? {type: 'embedded', module} : {module},
@@ -2230,9 +2227,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
   setLineFilter = (e) => this.setState({lineFilter: e.target.value});
   setSMSFilter = (e) => this.setState({smsFilter: e.target.value});
 
-  openCreativesFullMode = () => {
-    window.open("/creatives/ui/v2?channel=WHATSAPP&&mode=create", "_blank");
-  }
 
   render() {
     const isFullMode = this.isFullMode();
@@ -2306,27 +2300,14 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     const channelLowerCase = (channel || '').toLowerCase();
     const isTraiDltFeature = this.checkDLTfeatureEnable();
 
-    const createButton = 
-      ( channelLowerCase === WHATSAPP_LOWERCASE && !this.props.isFullMode )
-      ? (
-        <CapLink 
-          onClick={this.openCreativesFullMode} 
-          title={formatMessage(messages.createNewTemplateLink)} 
-          suffix={<CapIcon type="open-in-new" size="s" />}
-          className="create-new-link"
-        />
-      )
-      : (
-        <CapButton
-          className={`create-new-${channelLowerCase}`}
-          type={"primary"}
-          disabled={this.isCreateDisabled()}
-          style={{marginLeft: '8px', marginBottom: '12px'}}
-          onClick={this.createTemplate}
-        >
-          { this.props.intl.formatMessage((isTraiDltFeature && channel.toUpperCase() === SMS ) ? messages.uploadTemplate : messages.createNewActionButton) }
-        </CapButton>
-      );
+    const createButton = (<CapButton
+      className={`create-new-${channelLowerCase}`}
+      type={"primary"}
+      disabled={this.isCreateDisabled()}
+      style={{marginLeft: '8px', marginBottom: '12px'}}
+      onClick={this.createTemplate} >
+      { this.props.intl.formatMessage((isTraiDltFeature && channel.toUpperCase() === SMS ) ? messages.uploadTemplate : messages.createNewActionButton) }
+    </CapButton>);
 
     const isWhatsappCountExeeded = templatesCount >= MAX_WHATSAPP_TEMPLATES;
     const whatsappCountExceedText = <FormattedMessage {...messages.whatsappMaxTemplates} values={{ maxCount: MAX_WHATSAPP_TEMPLATES }}/>;
@@ -2358,19 +2339,16 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       {
         channel.toUpperCase() === WHATSAPP && (
           <div className="whatsapp-filters">
-            {
-              this.props.isFullMode ? (
-                <CapSelectFilter
-                  placement="bottomLeft"
-                  data={STATUS_OPTIONS}
-                  onSelect={this.setWhatsappStatus}
-                  selectedValue={this.state.selectedWhatsappStatus}
-                  placeholder="Status"
-                  showBadge={true}
-                  width="90px"
-                />
-              ) : null
-            }
+            <CapSelectFilter
+              placement="bottomLeft"
+              data={STATUS_OPTIONS}
+              onSelect={this.setWhatsappStatus}
+              selectedValue={this.state.selectedWhatsappStatus}
+              placeholder="Status"
+              showBadge={true}
+              width="90px"
+              overlayStyle={{ overflowY: "hidden" }}
+            />
             <CapSelectFilter
               placement="bottomLeft"
               data={CATEGORY_OPTIONS}
@@ -2379,6 +2357,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
               placeholder="Category"
               showBadge={true}
               width="105px"
+              overlayStyle={{ overflowY: "hidden" }}
             />
           </div>
           
@@ -2502,21 +2481,10 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
 
           <CapRow>
             <Pagination onPageChange={templates.length ? this.onPaginationChange : () => {}} paginationSelector="pagination-container">
-
-          {
-            channel.toLowerCase() === WHATSAPP_LOWERCASE ? (
-              <CapAlert message={whatsappCountExceedText} type="info" />
-            ) : null
-          }
               {this.getTemplateDataForGrid({isLoading, loadingTip, channel: this.state.channel, templates: this.props.TemplatesList, filterContent, handlers: {handlePreviewClick: this.handlePreviewClick, handleEditClick: this.handleEditClick}})}
             </Pagination>
             {(((this.state.selectedAccount !== '' && !isEmpty(this.props.Templates.selectedWeChatAccount) && this.state.channel.toLowerCase() === 'wechat') || this.state.channel.toLowerCase() !== 'wechat') && isEmpty(this.props.TemplatesList)) && !this.props.Templates.getAllTemplatesInProgress && !isEmpty(this.state.searchText) &&
             <div style={{ height: '65vh', textAlign: 'center', lineHeight: '65vh'}}>
-                        {
-            channel.toLowerCase() === WHATSAPP_LOWERCASE ? (
-              <CapAlert message={whatsappCountExceedText} type="info" />
-            ) : null
-          }
               <CapHeading type="h6">{this.props.intl.formatMessage(messages.noTemplatesFound)}</CapHeading>
             </div>}
           </CapRow>

package/v2Containers/Templates/messages.js

@@ -274,10 +274,6 @@ export default defineMessages({
     id: `${scope}.createNewActionButton`,
     defaultMessage: `Create new`,
   },
-  "createNewTemplateLink": {
-    id: `${scope}.createNewTemplateLink`,
-    defaultMessage: `Create new template`,
-  },
   "creativeTemplates": {
     id: `${scope}.creativeTemplates`,
     defaultMessage: `Creative templates`,
@@ -346,6 +342,14 @@ export default defineMessages({
     id: `${scope}.whatsappDescIllustration`,
     defaultMessage: 'These templates can be reused when creating a\nnew message content.',
   },
+  "noFilteredWhatsappTemplatesTitle": {
+    id: `${scope}.noFilteredWhatsappTemplatesTitle`,
+    defaultMessage: 'Sorry, we couldn’t find any matches',
+  },
+  "noFilteredWhatsappTemplatesDesc": {
+    id: `${scope}.noFilteredWhatsappTemplatesDesc`,
+    defaultMessage: 'Please try searching with another term or apply different filter',
+  },
   "smsTitleIllustartion": {
     id: `${scope}.smsTitleIllustartion`,
     defaultMessage: 'Create an SMS {template}',

package/v2Containers/TemplatesV2/index.js

@@ -31,7 +31,6 @@ import withStyles from '../../hoc/withStyles';
 import styles, { CapTabStyle } from './TemplatesV2.style';
 import { CREATIVES_UI_VIEW, LOYALTY} from '../App/constants';
 import AccessForbidden from '../../v2Components/AccessForbidden';
-import { getObjFromQueryParams } from '../../utils/v2common';
 
 const {CapCustomCardList} = CapCustomCard;
 
@@ -51,6 +50,7 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
       isFullMode,
       onChannelChange,
       showDisabledFBInfo,
+      enableNewChannels,
     } = props;
 
     const defaultPanes = {
@@ -80,6 +80,9 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
         filteredPanes.push({content: <></>, tab: intl.formatMessage(messages.FTP), key: 'ftp'});
         defaultChannel = 'FTP';
       }
+      if (!enableNewChannels.includes('WHATSAPP')) {
+        filteredPanes.splice(7, 1);
+      }
     }
 
 
@@ -121,16 +124,6 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
       onChannelChange(defaultChannel);
     }
   }
-
-  componentDidMount() {
-    const queryItems = getObjFromQueryParams(location.search);
-
-    if(queryItems.channel === 'whatsapp') {
-      console.log("reached whatsapp content");
-      this.channelChange('whatsapp');
-    }
-  }
-
   componentWillReceiveProps(nextProps) {
     if (this.props.channel !== nextProps.channel) {
       const panes = this.setChannelContent(nextProps.channel, this.state.panes);