@capillarytech/creatives-library 9.0.15 → 9.0.16-beta.0

package/AppRoot.js

@@ -0,0 +1,80 @@
+import React, { useMemo, useEffect, useRef } from 'react';
+import { Provider } from 'react-redux';
+import { configureStore } from '@capillarytech/vulcan-react-sdk/utils';
+import { createBrowserHistory } from 'history';
+import ConfigProvider from 'antd/lib/config-provider';
+import { getCapThemeConfig, loadCapUI } from '@capillarytech/cap-ui-library/utils';
+
+import LanguageProvider from 'v2Containers/LanguageProvider';
+import App from './containers/App';
+import './styles/main.scss';
+import { initialReducer } from './initialReducer';
+import { translationMessages } from './i18n';
+import initialState from './initialState';
+import pathConfig from './config/path';
+import { isMFEMode } from './utils/mfeDetect';
+import { MFEEventBus } from '@capillarytech/cap-ui-utils';
+import appConfig from '../app-config';
+
+// Module-scope SDK init — MUST run before configureStore.
+loadCapUI();
+
+const AppRoot = ({ basename: _basename = '/creatives/ui', history: hostHistory }) => {
+  const { store, history } = useMemo(() => {
+    const hist =
+      hostHistory ||
+      createBrowserHistory({ basename: pathConfig.publicPath });
+    const st = configureStore(initialState, initialReducer, hist);
+    return { store: st, history: hist };
+  }, [hostHistory]);
+
+  const fcpReported = useRef(false);
+  useEffect(() => {
+    if (isMFEMode() && !fcpReported.current) {
+      fcpReported.current = true;
+      requestAnimationFrame(() => {
+        MFEEventBus.emit('mfe:segment', {
+          action: 'stop',
+          appId: appConfig.appName,
+          type: 'fcp',
+          timestamp: performance.now(),
+        });
+      });
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!isMFEMode()) {
+      const { startStandalone } = require('locize');
+      startStandalone();
+    }
+  }, []);
+
+  useEffect(() => {
+    if (isMFEMode()) {
+      MFEEventBus.emit('gtm:init', {
+        appId: appConfig.appName,
+        containerId: appConfig.gtm.trackingId,
+      });
+    }
+  }, []);
+
+  useEffect(() => {
+    const unsub = MFEEventBus.on('creatives:navigate', ({ path }) => {
+      if (path) history.push(path);
+    });
+    return unsub;
+  }, [history]);
+
+  return (
+    <Provider store={store}>
+      <LanguageProvider messages={translationMessages}>
+        <ConfigProvider theme={getCapThemeConfig()}>
+          <App history={history} />
+        </ConfigProvider>
+      </LanguageProvider>
+    </Provider>
+  );
+};
+
+export default AppRoot;

package/app.js

@@ -33,9 +33,11 @@ import { getCapThemeConfig, loadCapUI } from '@capillarytech/cap-ui-library/util
 loadCapUI();
 
 try {
-  const { setupNewrelicWebVitals } = require('./newRelic/utils'); 
-  // Setup New Relic WebVitals tracking
-  setupNewrelicWebVitals();
+  if (!window.MFE_HOST) {
+    const { setupNewrelicWebVitals } = require('./newRelic/utils');
+    // Setup New Relic WebVitals tracking
+    setupNewrelicWebVitals();
+  }
 } catch (error) {
   Bugsnag.notify(error);
 }

package/entry.js

@@ -1,2 +1,68 @@
 import { publicPath } from './config/path';
-__webpack_public_path__ = ((new URL(((document || {}).currentScript || {}).src || window.location)).origin) + `${publicPath}/`;
+
+function normalizeTrailingSlash(url) {
+  if (!url) return url;
+  return url.endsWith('/') ? url : `${url}/`;
+}
+
+function getCreativesRemoteEntryScript() {
+  if (typeof document === 'undefined') return null;
+  const all = Array.from(
+    document.querySelectorAll('script[src*="remoteEntry"]'),
+  );
+  const match =
+    all.find(s => /cap-creatives-ui/i.test(s.src)) || all[all.length - 1];
+  return match;
+}
+
+function getRemoteEntryOrigin() {
+  const el = getCreativesRemoteEntryScript();
+  if (!el || !el.src) return '';
+  try {
+    return new URL(el.src, window.location.href).origin;
+  } catch (e) {
+    return '';
+  }
+}
+
+function getRemoteEntryBaseUrl() {
+  const el = getCreativesRemoteEntryScript();
+  if (!el || !el.src) return '';
+  try {
+    const u = new URL(el.src, window.location.href);
+    const dir = u.pathname.replace(/\/[^/]+\.js(\?.*)?$/, '/');
+    return normalizeTrailingSlash(`${u.origin}${dir}`);
+  } catch (e) {
+    return '';
+  }
+}
+
+function resolveWebpackPublicPath() {
+  const envPath = process.env.MFE_PUBLIC_PATH;
+
+  if (envPath && envPath.length > 0) {
+    if (/^https?:\/\//i.test(envPath)) {
+      return normalizeTrailingSlash(envPath);
+    }
+    const origin = getRemoteEntryOrigin();
+    if (origin) {
+      const p = envPath.startsWith('/') ? envPath : `/${envPath}`;
+      return normalizeTrailingSlash(new URL(p, origin).href);
+    }
+    return normalizeTrailingSlash(
+      `${window.location.origin}${envPath.startsWith('/') ? '' : '/'}${envPath}`,
+    );
+  }
+
+  const fromRemote = getRemoteEntryBaseUrl();
+  if (fromRemote) {
+    return fromRemote;
+  }
+
+  const origin = new URL(
+    ((document || {}).currentScript || {}).src || window.location,
+  ).origin;
+  return `${origin}${publicPath}/`;
+}
+
+__webpack_public_path__ = resolveWebpackPublicPath();

package/mfe-exposed-components.js

@@ -2,7 +2,5 @@
 // Contents of this file are used in webpack config's ModuleFederationPlugin.
 //
 module.exports = {
-    // which exposes
-    // ADD MFE COMPONENT YOU WANT TO EXPORT example:
-    // './Home': './app/components/pages/Home',
-  };
+  './AppRoot': './app/AppRoot',
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "9.0.15",
+  "version": "9.0.16-beta.0",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",
@@ -16,7 +16,7 @@
     "@babel/polyfill": "7.4.3",
     "@bugsnag/js": "^7.2.1",
     "@bugsnag/plugin-react": "7.2.1",
-    "@capillarytech/cap-ui-utils": "3.0.4",
+    "@capillarytech/cap-ui-utils": "3.0.20",
     "@capillarytech/vulcan-react-sdk": "3.0.1",
     "@codemirror/autocomplete": "^6.19.0",
     "@codemirror/lang-css": "^6.3.1",

package/services/api.js

@@ -679,7 +679,7 @@ export const getSupportVideosConfig = () => {
 };
 
 export const getNavigationConfigApi = async () => {
-  const url = `${ARYA_ENDPOINT}/navigations`;
+  const url = `${ARYA_ENDPOINT}/mfe_navigations`;
   return request(url, getAPICallObject('GET'));
 };
 

package/styles/containers/layout/_layoutPage.scss

@@ -79,7 +79,6 @@
     flex: 1;
     height: calc(100vh - 50px);
     overflow: auto;
-    padding: 8px 16px 0;
     color: #333333;
 }
 
@@ -154,16 +153,19 @@
 }
 
 .cap-loader-box {
-  position: fixed;
+  position: absolute;
   top: 0;
+  left: 0;
   width: 100%;
-  height: 100%;
-  background: rgb(255,255,255);
-  text-align: center;
+  min-height: calc(100vh - 48px);
+  background: #ffffff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 
   .loader-image {
     width: 80px;
-    margin-top: 20%;
+    height: auto;
   }
 }
 

package/utils/getDataLayer.js

@@ -0,0 +1,15 @@
+import { isMFEMode } from './mfeDetect';
+import appConfig from '../../app-config';
+
+const getDataLayerName = () => {
+  if (isMFEMode()) {
+    return `dataLayer_${appConfig.appName.replace(/-/g, '_')}`;
+  }
+  return 'dataLayer';
+};
+
+export const getDataLayer = () => {
+  const name = getDataLayerName();
+  window[name] = window[name] || [];
+  return window[name];
+};

package/utils/gtmTrackers/gtmEvents/creativeDetails.js

@@ -1,4 +1,5 @@
 import { CREATIVES } from "../../../v2Containers/App/constants";
+import { getDataLayer } from '../../getDataLayer';
 
 const creativeDetails = ({
   name,
@@ -23,7 +24,7 @@ const creativeDetails = ({
     videoAdded,
     stickersAdded
   };
-  window.dataLayer.push({
+  getDataLayer().push({
     creativeDetails: parsedObj,
     event: 'creativeDetails',
   });

package/utils/mfeDetect.js

@@ -0,0 +1 @@
+export const isMFEMode = () => Boolean(window.MFE_HOST);

package/v2Components/NavigationBar/index.js

@@ -12,8 +12,10 @@ import { loadItem } from 'services/localStorageApi';
 import { intlShape, injectIntl } from 'react-intl';
 import { withRouter } from 'react-router-dom';
 import { get } from 'lodash';
-import CapNavigation from '@capillarytech/cap-ui-library/CapNavigation';
+import CapNavigation from '@capillarytech/cap-ui-library/CapNavigationSPA';
 import { CAP_WHITE } from '@capillarytech/cap-ui-library/styled/variables';
+import { MFEModuleHeader } from '@capillarytech/cap-ui-utils';
+import { MFE_MODULE_HEADER } from './mfeModuleHeader.config';
 import injectSaga from '../../utils/injectSaga';
 import sagas from './saga';
 import messages from './messages';
@@ -30,12 +32,11 @@ import { CapLeftNavigatioOpenCss, CapLeftNavigationCss } from './style';
 import { EMBEDDED } from './constants';
 
 const CapWrapper = styled.div`
-  position: absolute;
   padding: 0;
   background-color: ${CAP_WHITE};
   width: 100%;
   display: flex;
-  margin-top: ${(props) => props.isEmbedded ? '0px' : '64px'};
+
 
   .sidebar-container {
     margin-right: 10px;
@@ -46,10 +47,8 @@ const CapWrapper = styled.div`
 `;
 
 const ComponentWrapper = styled.div`
-  max-width: 1140px;
-  margin: 0 auto;
   width: 100%;
-  padding: 24px 0;
+  padding: 0;
 `;
 
 export class NavigationBar extends React.Component {
@@ -58,6 +57,7 @@ export class NavigationBar extends React.Component {
     this.state = this.initializeSelectedProduct();
   }
 
+
   initializeSelectedProduct = () => {
     const { location, intl: { formatMessage } } = this.props;
     const { pathname } = location;
@@ -179,6 +179,7 @@ export class NavigationBar extends React.Component {
     const topbarIcons = this.getTopbarIcons(showDocumentationBot);
     const headerOverideCss = leftNavbarExpandedProp ? CapLeftNavigatioOpenCss : CapLeftNavigationCss;
     return (
+      <>
       <CapNavigation
         className="creatives-main-container"
         showContent
@@ -212,7 +213,8 @@ export class NavigationBar extends React.Component {
           </CapWrapper>
         </div>
       </CapNavigation>
-
+        <MFEModuleHeader history={this.props.history} {...MFE_MODULE_HEADER} />
+      </>
     );
   }
 }

package/v2Components/NavigationBar/mfeModuleHeader.config.js

@@ -0,0 +1,16 @@
+// Static, module-specific config for the shared MFE module-header wrapper
+// (MFEModuleHeader). Runtime values (history) are supplied in NavigationBar.
+export const MFE_MODULE_HEADER = {
+  header: {
+    name: 'Creatives',
+    description: 'Store your creative templates for all your channels',
+    showBorder: false,
+    showSettings: false,
+  },
+  landingRoutes: [
+    '/creatives/ui/v2/',
+    '/creatives/ui/v2',
+    '/v2/',
+    '/v2'
+  ],
+};

package/v2Components/Pagination/_pagination.scss

@@ -2,6 +2,8 @@
   height: calc(100vh - 20rem);
   overflow-y: auto;
   overflow-x: hidden;
+  margin-right: -24px;
+  padding-right: 24px;
 }
 
 .v2-pagination-container.full-height {

package/v2Containers/Cap/constants.js

@@ -56,6 +56,7 @@ export const SUCCESS = 'SUCCESS';
 export const FAILURE = 'FAILURE';
 
 export const ENABLE_PRODUCT_SUPPORT_VIDEOS = 'ENABLE_PRODUCT_SUPPORT_VIDEOS';
+export const ENABLE_NEW_LEFT_NAVIGATION = 'ENABLE_NEW_LEFT_NAVIGATION';
 export const DEFAULT = 'default';
 export const DEFAULT_MODULE = 'creatives';
 

package/v2Containers/Cap/index.js

@@ -30,6 +30,7 @@ import {
   REQUEST,
   DEFAULT,
   ENABLE_PRODUCT_SUPPORT_VIDEOS,
+  ENABLE_NEW_LEFT_NAVIGATION,
   CAMPAIGN_SETTINGS_URL,
 } from './constants';
 import './_cap.scss';
@@ -53,7 +54,8 @@ import { v2ViberSagas } from '../Viber/sagas';
 import { v2FacebookSagas } from '../Facebook/sagas';
 import createReducer from '../Line/Container/reducer';
 import { DAEMON } from '@capillarytech/vulcan-react-sdk/utils/sagaInjectorTypes';
-const gtm = window.dataLayer || [];
+import { getDataLayer } from '../../utils/getDataLayer';
+const gtm = getDataLayer();
 const {
   logNewTab,
   utilsGetOrgNameFromId,
@@ -72,18 +74,19 @@ const CapWrapper = styled.div`
   min-height: 100%;
   padding: 0;
   flex-direction: column;
+  position: relative;
 `;
 GA.initialize({ accessKey: GTM_TRACKING_ID, trackUIError: true, trackLoadPerformance: 'creatives' });
 
 const MainWrapper = styled.div`
   position: relative;
-  min-height: calc(100vh - 5.29rem);
-  top: 4.72rem;
+  min-height: 100%;
+  top: 0;
 `;
 
 const ContentWrapper = styled.div`
   && {
-    margin-left: ${(props) => (props.leftNavbarExpanded ? '17rem' : '4.475rem')};
+    margin-left: 0;
   }
 `;
 
@@ -500,6 +503,8 @@ 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;
+    const { accessibleFeatures = [] } = currentOrgDetails;
+    const isLatestLeftNavigationEnabled = accessibleFeatures.includes(ENABLE_NEW_LEFT_NAVIGATION);
     return (
       <CapWrapper>
         { this.props.loader.localeLoading || this.props.Global.fetching_userdata ?
@@ -537,26 +542,47 @@ export class Cap extends React.Component { // eslint-disable-line react/prefer-s
                   campaignOrgV2Status={currentOrgDetails.org_campaign_v2_status}
                   handleLeftNavBarExpanded={this.handleLeftNavBarExpanded}
                   leftNavbarExpandedProp={this.state.leftNavbarExpanded}
-                />) : ''}
-              <MainWrapper className="main">
 
-                <ContentWrapper
-                  className={`main-content ${this.state.leftNavbarExpanded ? "contet-width-collapse" : "content-width-expanded"}`}
-                  leftNavbarExpanded={this.state.leftNavbarExpanded}
                 >
-                  <Switch>
-                    {componentRoutes.map(routeProps => {
-                      return (
-                        <RenderRoute
-                          {...routeProps}
-                          key={routeProps.path}
-                          isLoggedIn={isLoggedIn}
-                        />
+                  <MainWrapper isLatestLeftNavigationEnabled={isLatestLeftNavigationEnabled} className="main">
+                    <ContentWrapper
+                      className={`main-content ${this.state.leftNavbarExpanded ? "contet-width-collapse" : "content-width-expanded"}`}
+                      isLatestLeftNavigationEnabled={isLatestLeftNavigationEnabled}
+                      leftNavbarExpanded={this.state.leftNavbarExpanded}
+                    >
+                      <Switch>
+                        {componentRoutes.map(routeProps => {
+                          return (
+                            <RenderRoute
+                              {...routeProps}
+                              key={routeProps.path}
+                              isLoggedIn={isLoggedIn}
+                            />
+                          )}
+                        )}
+                      </Switch>
+                    </ContentWrapper>
+                  </MainWrapper>
+                </NavigationBar>) : (
+                <MainWrapper isLatestLeftNavigationEnabled={isLatestLeftNavigationEnabled} className="main">
+                  <ContentWrapper
+                    className={`main-content ${this.state.leftNavbarExpanded ? "contet-width-collapse" : "content-width-expanded"}`}
+                    isLatestLeftNavigationEnabled={isLatestLeftNavigationEnabled}
+                    leftNavbarExpanded={this.state.leftNavbarExpanded}
+                  >
+                    <Switch>
+                      {componentRoutes.map(routeProps => {
+                        return (
+                          <RenderRoute
+                            {...routeProps}
+                            key={routeProps.path}
+                            isLoggedIn={isLoggedIn}
+                          />
+                        )}
                       )}
-                    )}
-                  </Switch>
-                </ContentWrapper>
-              </MainWrapper>
+                    </Switch>
+                  </ContentWrapper>
+                </MainWrapper>)}
             </div>
             {(toastMessages && toastMessages.length > 0) &&
           toastMessages.map((message) => {

package/v2Containers/Cap/sagas.js

@@ -7,6 +7,7 @@ import {
 // import { normalize } from 'normalizr';
 import * as Api from '../../services/api';
 import * as LocalStorage from '../../services/localStorageApi';
+import { isMFEMode } from '../../utils/mfeDetect';
 import * as types from './constants';
 import config from '../../config/app';
 //import pathConfig from '../../config/path';
@@ -82,6 +83,24 @@ export function* logoutFlow() {
 
 export function* fetchUserInfo(option) {
   try {
+    if (isMFEMode()) {
+      const userData = LocalStorage.loadItem('user');
+      const currentOrgId = LocalStorage.loadItem('orgID');
+      const storedOrgDetails = LocalStorage.loadItem('currentOrgDetails');
+      const currentOrgDetails = {
+        ...(storedOrgDetails || {}),
+        accessibleFeatures: window.capAuth?.accessibleFeatures || [],
+      };
+      yield put({
+        type: types.GET_USER_DATA_SUCCESS,
+        userData: userData || {},
+        currentOrgId,
+        currentOrgDetails,
+      });
+      if (option.callback) option.callback(userData, currentOrgDetails);
+      return;
+    }
+
     const result = yield call(Api.getUserData);
     if (result?.isError || result?.status === 401) {
       yield call(LocalStorage.clearItem, 'user');

package/v2Containers/Templates/_templates.scss

@@ -1,7 +1,7 @@
 @import '~@capillarytech/cap-ui-library/styles/_variables.scss';
 
 .ant-tabs-content{
-    margin-top: $CAP_SPACE_16;
+    margin-top: $CAP_SPACE_08;
     .ant-tabs-tabpane-active{
       padding: unset;
     }
@@ -1174,7 +1174,7 @@
   display: flex;
   align-items: baseline;
   justify-content: space-between;
-  width: 102%;
+  width: 100%;
 }
 
 .filter-row-content {
@@ -1243,7 +1243,6 @@
   justify-content: space-between;
   align-items: center;
   gap: $CAP_SPACE_08;
-  margin-right: $CAP_SPACE_32;
 }
 
 .template-listing-more-btn {

package/v2Containers/Templates/index.js

@@ -4561,6 +4561,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         <CapButton
           className={`create-new-${channelLowerCase} margin-l-8 margin-b-12`}
           type={"primary"}
+          isAddBtn
           disabled={this.isCreateDisabled()}
           onClick={this.createTemplate}
         >

package/v2Containers/TemplatesV2/TemplatesV2.style.js

@@ -10,10 +10,10 @@ export default css`
 
   .component-wrapper {
     ${(props) => props.isFullMode ? `
-      max-width: 1140px;
-      margin: 0 auto;
+      max-width: 100%;
+      margin: 0;
       width: 100%;
-      padding: 0.714rem 0;
+      padding: 0;
       /* Only main channel tabs content, not HTML Editor validation panel tabs */
       > .cap-tab-v2 > .ant-tabs-content-holder > .ant-tabs-content,
       > .cap-tab-v2 > .ant-tabs-content {
@@ -26,6 +26,12 @@ export default css`
 `;
 
 export const CapTabStyle = css`
-  ${(props) => props.isFullMode ? `margin-top: ${CAP_SPACE_24}` : ``
+  ${(props) => props.isFullMode ? `margin-top: ${CAP_SPACE_24};` : ``
+  }
+  .ant-tabs-nav-list {
+    gap: 2rem;
+  }
+  .ant-tabs-tab + .ant-tabs-tab {
+    margin: 0 !important;
   }
 `;

package/v2Containers/TemplatesV2/index.js

@@ -46,6 +46,9 @@ import {
   NORMALIZED_CHANNEL_ALIASES,
   SMS,
 } from "../CreativesContainer/constants";
+import { MFEEventBus } from '@capillarytech/cap-ui-utils';
+import { isMFEMode } from '../../utils/mfeDetect';
+import appConfig from '../../../app-config';
 
 const {CapCustomCardList} = CapCustomCard;
 
@@ -53,6 +56,7 @@ const StyledCapTab = withStyles(CapTab, CapTabStyle);
 export class TemplatesV2 extends React.Component { // eslint-disable-line react/prefer-stateless-function
   constructor(props) {
     super(props);
+    this.lcpReported = false;
     let defaultChannel = get(this, 'props.channel') || get(this, 'props.params.channel') || 'sms';
     if (defaultChannel === LOYALTY) {
       defaultChannel = 'sms';
@@ -221,6 +225,23 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
     }
   }
 
+  componentDidUpdate(prevProps) {
+    if (
+      isMFEMode() &&
+      !this.lcpReported &&
+      !this.props.Templates.getAllTemplatesInProgress &&
+      prevProps.Templates.getAllTemplatesInProgress
+    ) {
+      this.lcpReported = true;
+      MFEEventBus.emit('mfe:segment', {
+        action: 'stop',
+        appId: appConfig.appName,
+        type: 'lcp',
+        timestamp: performance.now(),
+      });
+    }
+  }
+
   componentWillReceiveProps(nextProps) {
     if (this.props.channel !== nextProps.channel) {
       const panes = this.setChannelContent(nextProps.channel, this.state.panes);
@@ -381,7 +402,6 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
             ]}
           />}
           <div className="component-wrapper">
-            {isFullMode && <CapHeader title={<FormattedMessage {...messages.creatives}/>} description={<FormattedMessage {...messages.creativesDesc}/>}/>}
             <StyledCapTab
               panes={this.state.panes}
               onChange={this.channelChange}

package/v2Containers/Whatsapp/index.js

@@ -744,7 +744,11 @@ export const Whatsapp = (props) => {
       carouselIndex,
     } = tagSelectData;
     if (mapData && updatedData) {
-      const numId = Number(areaId?.slice(areaId?.indexOf("_") + 1));
+      const underscoreIdx = areaId ? areaId.indexOf("_") : -1;
+      if (underscoreIdx < 0) {
+        return;
+      }
+      const numId = Number(areaId.slice(underscoreIdx + 1));
       if (!isNaN(numId)) {
         const arr = [...updatedData];
         //when trying to insert tag in empty textarea,{#var#} is replaced with "" and then tag is added