@capillarytech/creatives-library 7.7.24 → 7.7.26

package/app.js

@@ -102,7 +102,11 @@ export const BugsnagClient = Bugsnag;
 const rootRoute = {
   component: (props) => {
     // eslint-disable-next-line react/prop-types
-    if (props.location.pathname === 'v2' || props.location.pathname === 'v2/') {
+    if (
+      props.location.pathname === 'v2' ||
+      props.location.pathname === 'v2/' ||
+      props.location.pathname === 'v2/loyalty'
+    ) {
       return <CapV2 {...props} />;
     }
     return <Cap {...props} />;

package/package.json

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

package/translations/en.json

@@ -176,6 +176,7 @@
   "creatives.componentsV2.NavigationBar.logout": "Logout",
   "creatives.componentsV2.NavigationBar.loyaltyProgram": "Loyalty+",
   "creatives.componentsV2.NavigationBar.memberCare": "Member Care",
+  "creatives.componentsV2.NavigationBar.noProductSetting": "There are no product settings. Organisation settings are available under profile on the right.",
   "creatives.componentsV2.NavigationBar.orgSettings": "Organisation settings",
   "creatives.componentsV2.NavigationBar.selectedProductDefault": "Engage+",
   "creatives.componentsV2.NavigationBar.storeCare": "Store Care",
@@ -1698,6 +1699,8 @@
   "creatives.containersV2.orgChangeText": "Changing from <b>{oldOrgName}</b> to <b>{newOrgName}</b> will change the organisation for applications open in other tabs as well.<br/>Do you want to make the change to <b>{newOrgName}</b>?",
   "creatives.containersV2.orgChangedText": "Organization changed to",
   "creatives.containersV2.orgRefreshHeading": "Org refresh",
+  "creatives.containersV2.programs": "Programs",
+  "creatives.containersV2.promotions": "Promotions",
   "creatives.containersV2.refreshOrgText": "Refreshing this page & changing the Org from <b>{oldOrgName}</b> to <b>{newOrgName}</b>. At a time only one Org can be selected on the browser.",
   "creatives.containersV2.refreshText": "Refreshing in {time}...",
   "creatives.containersV2.richMedia.Create.Anyone": "Anyone",

package/translations/zh.json

@@ -176,6 +176,7 @@
   "creatives.componentsV2.NavigationBar.logout": "",
   "creatives.componentsV2.NavigationBar.loyaltyProgram": "",
   "creatives.componentsV2.NavigationBar.memberCare": "",
+  "creatives.componentsV2.NavigationBar.noProductSetting": "",
   "creatives.componentsV2.NavigationBar.orgSettings": "",
   "creatives.componentsV2.NavigationBar.selectedProductDefault": "",
   "creatives.componentsV2.NavigationBar.storeCare": "",
@@ -1698,6 +1699,8 @@
   "creatives.containersV2.orgChangeText": "",
   "creatives.containersV2.orgChangedText": "",
   "creatives.containersV2.orgRefreshHeading": "",
+  "creatives.containersV2.programs": "",
+  "creatives.containersV2.promotions": "",
   "creatives.containersV2.refreshOrgText": "",
   "creatives.containersV2.refreshText": "",
   "creatives.containersV2.richMedia.Create.Anyone": "",

package/v2Components/NavigationBar/index.js

@@ -10,11 +10,23 @@ import styled from 'styled-components';
 import { isEmpty, forEach } from 'lodash';
 import { loadItem } from 'services/localStorageApi';
 import { intlShape, injectIntl } from 'react-intl';
+import { FONT_COLOR_04 } from '@capillarytech/cap-ui-library/styled/variables';
 import TopBar from '../TopBar';
 import messages from './messages';
+import { LOYALTY } from '../../v2Containers/App/constants';
+import {
+  HELP_URL,
+  LOYALTY_HELP_URL,
+} from '../../v2Containers/Cap/constants';
 const PRODUCT_MASTERS = 'masters';
 const EMBEDDED = 'embedded';
 
+const AppWrapper = styled.div`
+  .navigation-setting-icon {
+    color: ${FONT_COLOR_04};
+  }
+`;
+
 const CapWrapper = styled.div`
   position: absolute;
   padding: 0;
@@ -34,9 +46,37 @@ const ComponentWrapper = styled.div`
 class NavigationBar extends React.Component {
   constructor(props) {
     super(props);
-    this.state = {
-      selectedProduct: '',
-    };
+    this.state = this.initializeSelectedProduct();
+  }
+
+  initializeSelectedProduct = () => {
+    const {location, intl: {formatMessage}} = this.props;
+    const { pathname } = location;
+    const parentModule = pathname.substring(pathname.lastIndexOf('/') + 1);
+    switch (parentModule) {
+      case LOYALTY:
+        return {
+          selectedProduct: formatMessage(messages.loyaltyProgram),
+          helpUrl: LOYALTY_HELP_URL,
+          settingsIcon: {
+            iconType: 'settings',
+            key: 'settings',
+            placement: 'bottomRight',
+            className: 'navigation-setting-icon',
+            toolTip: formatMessage(messages.noProductSetting),
+          },
+        };
+      default:
+        return {
+          selectedProduct: formatMessage(messages.selectedProductDefault),
+          helpUrl: HELP_URL,
+          settingsIcon: {
+            iconType: 'settings',
+            key: 'settings',
+            onClickHandler: this.onSettingsIconClick,
+          },
+        };
+    }
   }
 
   onOrgSettingsClick = () => {
@@ -57,7 +97,7 @@ class NavigationBar extends React.Component {
   };
 
   onHelpIconClick = () => {
-    const { helpUrl } = this.props;
+    const {helpUrl} = this.state;
     if (helpUrl) {
       window.open(helpUrl, '_blank');
     }
@@ -113,18 +153,17 @@ class NavigationBar extends React.Component {
     return productsList;
   };
 
-  getTopbarIcons = () => [
-    {
-      iconType: 'help',
-      key: 'help',
-      onClickHandler: this.onHelpIconClick,
-    },
-    {
-      iconType: 'settings',
-      key: 'settings',
-      onClickHandler: this.onSettingsIconClick,
-    },
-  ];
+  getTopbarIcons = () => {
+    const {settingsIcon} = this.state;
+    return [
+      {
+        iconType: 'help',
+        key: 'help',
+        onClickHandler: this.onHelpIconClick,
+      },
+      settingsIcon,
+    ];
+  }
 
   getDropdownMenu = () => {
     const { formatMessage } = this.props.intl;
@@ -168,7 +207,6 @@ class NavigationBar extends React.Component {
       topbarMenuData,
       loggedIn,
       type,
-      intl,
     } = this.props;
     const productsList = this.getProductsList();
     const proxyOrgList = this.getProxyOrgList();
@@ -178,14 +216,11 @@ class NavigationBar extends React.Component {
     const { selectedProduct } = this.state;
     const customTopBarProps = {};
     return (
-      <div>
+      <AppWrapper>
         {loggedIn && type !== EMBEDDED &&
           <TopBar
             productsList={productsList}
-            selectedProduct={
-              selectedProduct ||
-              intl.formatMessage(messages.selectedProductDefault)
-            }
+            selectedProduct={selectedProduct}
             handleProductChange={this.handleProductChange}
             proxyOrgList={proxyOrgList}
             selectedOrg={selectedOrg}
@@ -197,12 +232,12 @@ class NavigationBar extends React.Component {
             {...customTopBarProps}
           />
         }
-          <CapWrapper isEmbedded={type === EMBEDDED}>
-            <ComponentWrapper>
-              {React.Children.toArray(this.props.children)}
-            </ComponentWrapper>
-          </CapWrapper>
-      </div>
+        <CapWrapper isEmbedded={type === EMBEDDED}>
+          <ComponentWrapper>
+            {React.Children.toArray(this.props.children)}
+          </ComponentWrapper>
+        </CapWrapper>
+      </AppWrapper>
     );
   }
 }
@@ -214,7 +249,6 @@ NavigationBar.propTypes = {
   changeOrg: PropTypes.func,
   settingsUrl: PropTypes.string,
   children: PropTypes.node,
-  helpUrl: PropTypes.string,
   orgSettingsUrl: PropTypes.string,
   loggedIn: PropTypes.bool,
   intl: intlShape.isRequired,

package/v2Components/NavigationBar/messages.js

@@ -57,4 +57,9 @@ export default defineMessages({
     id: `${scope}.storeCare`,
     defaultMessage: 'Store Care',
   },
+  "noProductSetting": {
+    id: `${scope}.noProductSetting`,
+    defaultMessage:
+      'There are no product settings. Organisation settings are available under profile on the right.',
+  },
 });

package/v2Containers/App/constants.js

@@ -13,6 +13,25 @@ export const getTopbarMenuDataValue = () => ([
       { label: <FormattedMessage {...globalMessages.creatives} />, link: '/creatives/ui/v2', key: 'creatives' },
 ]);
 
+export const getLoyaltyTopbarMenuDataValue = () => [
+  {
+    label: <FormattedMessage {...globalMessages.programs} />,
+    link: 'loyalty/ui/',
+    key: 'programs',
+  },
+  //commented as promotions are not supported in loyalty v2 flow
+  // {
+  //   label: <FormattedMessage {...globalMessages.promotions} />,
+  //   link: 'loyalty/ui/promotions/',
+  //   key: 'promotions',
+  // },
+  {
+    label: <FormattedMessage {...globalMessages.creatives} />,
+    link: '/creatives/ui/v2/loyalty',
+    key: 'creatives',
+  },
+];
+
 export const TRACK_CREATE_SMS = 'createSms';
 export const TRACK_CREATE_EMAIL = 'createEmail';
 export const TRACK_CREATE_MPUSH = 'createMpush';
@@ -46,7 +65,7 @@ export const CHANNEL_CREATE_TRACK_MAPPING = {
   gallery: TRACK_CREATE_IMAGE,
   line: TRACK_CREATE_LINE,
   viber: TRACK_CREATE_VIBER,
-  facebook: TRACK_CREATE_FACEBOOK
+  facebook: TRACK_CREATE_FACEBOOK,
 };
 
 export const CHANNEL_EDIT_TRACK_MAPPING = {
@@ -57,7 +76,7 @@ export const CHANNEL_EDIT_TRACK_MAPPING = {
   gallery: TRACK_EDIT_IMAGE,
   line: TRACK_EDIT_LINE,
   viber: TRACK_EDIT_VIBER,
-  facebook: TRACK_EDIT_FACEBOOK
+  facebook: TRACK_EDIT_FACEBOOK,
 };
 export const GTM_TRACKING_ID = 'UA-110024621-2';
 export const BEE_PLUGIN = 'BEE_PLUGIN';
@@ -85,4 +104,5 @@ export const FB_AD_CALL_TO_ACTION = {
 };
 
 
-export const CREATIVES = 'creatives';
+export const CREATIVES = 'creatives';
+export const LOYALTY = 'loyalty';

package/v2Containers/Cap/actions.js

@@ -45,7 +45,6 @@ export function getUserData(callback) {
 }
 
 export function fetchSchemaForEntity(queryParams) {
-  
   return {
     type: types.GET_SCHEMA_FOR_ENTITY_REQUEST, queryParams,
   };
@@ -62,8 +61,9 @@ export function setInjectedTags(injectedTags) {
   };
 }
 
-export function getTopbarMenuData() {
+export function getTopbarMenuData(parentModule) {
   return {
+    parentModule,
     type: types.GET_TOPBAR_MENU_DATA_REQUEST,
   };
 }

package/v2Containers/Cap/constants.js

@@ -31,7 +31,8 @@ export const CLEAR_TOPBAR_MENU_DATA = 'creatives/cap/CLEAR_TOPBAR_MENU_DATA';
 export const CAMPAIGN_SETTINGS_URL = '/creatives/settings/message';
 export const ORG_SETTINGS_URL = '/org/index';
 export const HELP_URL = 'https://support.capillarytech.com/en/support/solutions/4000007853';
+export const LOYALTY_HELP_URL = 'https://support.capillarytech.com/en/support/solutions/97443';
 
-export const ORG_REFRESH_SEC = 10; 
-export const ORG_CHANGED = 'ORG_CHANGED'; 
+export const ORG_REFRESH_SEC = 10;
+export const ORG_CHANGED = 'ORG_CHANGED';
 

package/v2Containers/Cap/index.js

@@ -22,11 +22,10 @@ import { engagePlusPublicPath } from '../../config/path';
 import { GTM_TRACKING_ID, CREATIVES_UI_VIEW } from '../App/constants';
 import { makeSelectLocale } from '../../v2Containers/LanguageProvider/selectors';
 import {
-  HELP_URL,
   ORG_SETTINGS_URL,
   CAMPAIGN_SETTINGS_URL,
   ORG_REFRESH_SEC,
-  ORG_CHANGED
+  ORG_CHANGED,
 } from './constants';
 import './_cap.scss';
 
@@ -73,6 +72,8 @@ export class Cap extends React.Component { // eslint-disable-line react/prefer-s
   }
 
   componentWillMount() {
+    const { pathname } = this.props.location;
+    const parentModule = pathname.substring(pathname.lastIndexOf('/') + 1);
     this.props.actions.getUserData((userData) => {
       if (!userData.accessiblePermissions.includes(CREATIVES_UI_VIEW)) {
         this.setState({ isCreativesAccessible: false });
@@ -81,7 +82,7 @@ export class Cap extends React.Component { // eslint-disable-line react/prefer-s
       this.setDimensionData(userGtmData);
       gtm.push({...userGtmData, event: 'userAuthenticated'});
     });
-    this.props.actions.getTopbarMenuData();
+    this.props.actions.getTopbarMenuData(parentModule);
     if (this.props.Global.orgID !== undefined) {
       gtm.push({orgId: this.props.Global.orgID});
     }
@@ -101,7 +102,7 @@ export class Cap extends React.Component { // eslint-disable-line react/prefer-s
     }
     locale = this.getMappedLocale(locale);
     //locale = 'zh';
-    
+
     moment.locale(locale);
     window.addEventListener('storage', this.handleStorageChange, false);
     document.addEventListener(
@@ -167,7 +168,7 @@ export class Cap extends React.Component { // eslint-disable-line react/prefer-s
   tabOnloadEventHandler = () => {
     logNewTab();
   }
-  
+
   setDimensionData(userGtmData) {
     Object.values(userGtmData).forEach((value, index) => {
       GA.setCustomDimension({ [`dimension${index + 1}`]: value });
@@ -175,23 +176,23 @@ export class Cap extends React.Component { // eslint-disable-line react/prefer-s
   }
   getUserGtmData(props) {
     const selectedProps = props || this.props;
-    const { user: userData,  orgID} = selectedProps?.Global || {};
+    const { user: userData, orgID} = selectedProps?.Global || {};
     if (userData) {
       const {
         attributes: {
-          USERNAME : userName,
-          EMAIL : userEmail
+          USERNAME: userName,
+          EMAIL: userEmail,
         } = {},
-        proxyOrgList =[],
+        proxyOrgList = [],
         isCapUser,
         refID,
         orgName: userOrgName,
       } = userData;
-      const { orgName } = _.find(proxyOrgList, { orgID: orgID }) || {
+      const { orgName } = _.find(proxyOrgList, { orgID }) || {
         orgName: userOrgName,
       };
       const gtmData = {
-        isCapUser: isCapUser,
+        isCapUser,
         orgId: orgID,
         orgName,
         userId: refID,
@@ -272,7 +273,7 @@ export class Cap extends React.Component { // eslint-disable-line react/prefer-s
       refreshSeconds === ORG_REFRESH_SEC
     ) {
       const timer = setInterval(() => {
-        this.setState(prevState => ({
+        this.setState((prevState) => ({
           refreshSeconds: prevState.refreshSeconds - 1,
         }));
       }, 1000);
@@ -286,13 +287,13 @@ export class Cap extends React.Component { // eslint-disable-line react/prefer-s
 
   handleStorageChange = (e) => {
     const { oldValue, newValue } = e;
-     if (utilsHandleStorageChange(e, 'orgID')) {
+    if (utilsHandleStorageChange(e, 'orgID')) {
       const localStorageOrgInfo = { oldValue, newValue };
       this.setState({ showRefreshModal: true, localStorageOrgInfo });
     }
   };
 
-  getOrgNameFromId = orgId => {
+  getOrgNameFromId = (orgId) => {
     const {
       Global: {
         user: {
@@ -352,11 +353,11 @@ export class Cap extends React.Component { // eslint-disable-line react/prefer-s
   renderOrgChangeModal = () => {
     const { selectedOrgId, showOrgChangeModal } = this.state;
     const {
-      Global: { 
+      Global: {
       currentOrgDetails: { basic_details: { name: oldOrgName } = {} } = {},
       },
       intl: { formatMessage } = {},
-    } = this.props; 
+    } = this.props;
     const newOrgName = this.getOrgNameFromId(selectedOrgId);
     // some users do not have entry for their default org in proxyOrgList.
     // getOrgNameFromId returns back orgID if no matching entry is present in proxyOrgList
@@ -399,7 +400,7 @@ export class Cap extends React.Component { // eslint-disable-line react/prefer-s
     const type = this.props.location.query.type;
     const toastMessages = this.props.Global.messages;
     const { isCreativesAccessible, showOrgChangeModal, showRefreshModal } = this.state;
-    
+
     return (
       <CapWrapper>
         { this.props.loader.localeLoading || this.props.Global.fetching_userdata ?
@@ -425,7 +426,6 @@ export class Cap extends React.Component { // eslint-disable-line react/prefer-s
                   logout={this.logout}
                   settingsUrl={`${engagePlusPublicPath}${CAMPAIGN_SETTINGS_URL}`}
                   orgSettingsUrl={ORG_SETTINGS_URL}
-                  helpUrl={HELP_URL}
                   loggedIn={isLoggedIn}
                   topbarMenuData={topbarMenuDataOptions}
                   location={location}

package/v2Containers/Cap/messages.js

@@ -72,6 +72,14 @@ export default defineMessages({
     id: 'creatives.containersV2.incentive',
     defaultMessage: 'Incentive',
   },
+  "programs": {
+    id: `creatives.containersV2.programs`,
+    defaultMessage: 'Programs',
+  },
+  "promotions": {
+    id: `creatives.containersV2.promotions`,
+    defaultMessage: 'Promotions',
+  },
 
     //refresh due to org change messages
 

package/v2Containers/Cap/sagas.js

@@ -6,7 +6,11 @@ import * as LocalStorage from '../../services/localStorageApi';
 import * as types from './constants';
 import config from '../../config/app';
 //import pathConfig from '../../config/path';
-import { getTopbarMenuDataValue } from '../../v2Containers/App/constants';
+import {
+  getTopbarMenuDataValue,
+  getLoyaltyTopbarMenuDataValue,
+  LOYALTY,
+} from '../../v2Containers/App/constants';
 // import {makeSelectOrgId} from './selectors';
 
 function* authorize(user) {
@@ -106,9 +110,8 @@ export function* fetchUserInfo(option) {
 
 export function* fetchSchemaForEntity(queryParams) {
   try {
-    
     const result = yield call(Api.fetchSchemaForEntity, queryParams);
-    
+
     // const sidebar = result.response.sidebar;
     yield put({ type: types.GET_SCHEMA_FOR_ENTITY_SUCCESS, data: result.response, statusCode: result.status ? result.status.code : '', entityType: queryParams.queryParams.type });
   } catch (error) {
@@ -116,11 +119,21 @@ export function* fetchSchemaForEntity(queryParams) {
   }
 }
 
-function* getTopbarMenuData() {
+const getTopbarData = (parentModule) => {
+  switch (parentModule) {
+    case LOYALTY:
+      return getLoyaltyTopbarMenuDataValue();
+    default:
+      return getTopbarMenuDataValue();
+  }
+};
+
+function* getTopbarMenuData(params) {
+  const {parentModule} = params;
   try {
     yield put({
       type: types.GET_TOPBAR_MENU_DATA_SUCCESS,
-      data: getTopbarMenuDataValue(),
+      data: getTopbarData(parentModule),
     });
   } catch (error) {
     yield put({ type: types.GET_TOPBAR_MENU_DATA_FAILURE, error });
@@ -129,7 +142,6 @@ function* getTopbarMenuData() {
 
 
 function* watchFetchSchemaForEntity() {
-  
   const watcher = yield takeLatest(types.GET_SCHEMA_FOR_ENTITY_REQUEST, fetchSchemaForEntity);
   yield take(LOCATION_CHANGE);
   yield cancel(watcher);

package/v2Containers/CapFacebookPreview/constants.js

@@ -11,3 +11,7 @@ export const GENERATE_PREVIEW_FAILURE = 'app/CapFacebookPreview/GET_PREVIEW_FAIL
 
 export const CLEAR_PREVIEW = 'app/CapFacebookPreview/CLEAR_PREVIEW';
 
+export const PREVIEW_NOT_REQUESTED = "PreviewNotRequested";
+export const FETCH_PREVIEW_REQUESTED = "PreviewRequested";
+export const FETCH_PREVIEW_SUCCESS = "PreviewRequestSuccess";
+export const FETCH_PREVIEW_FAILURE = "PreviewRequestFailure";

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/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/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,9 +161,9 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
   );
 
   getFacebookComponent = () => {
-    const { messageDetails, cap, onFacebookSubmit, 
+    const { messageDetails, cap, onFacebookSubmit,
       messageStrategy,
-      showDisabledFBInfo, 
+      showDisabledFBInfo,
       orgUnitId,
       onSelectTemplate } = this.props;
     return (