@capillarytech/creatives-library 7.17.211 → 7.17.212

package/containers/App/index.js

@@ -0,0 +1,52 @@
+/**
+ *
+ * App.js
+ *
+ * This component is the skeleton around the actual pages, and should only
+ * contain code that should be seen on all pages. (e.g. navigation bar)
+ *
+ */
+
+import React, { useEffect } from 'react'; // eslint-disable-line no-unused-vars
+import { Switch } from 'react-router';
+import { ConnectedRouter } from 'connected-react-router/immutable';
+import history from 'utils/history';
+
+import Cap from '../Cap';
+import CapV2 from '../../v2Containers/Cap';
+import Login from '../Login';
+import NotFoundPage from '../NotFoundPage';
+
+import GlobalStyle from '../../global-styles';
+import config from '../../config/app';
+import withReactRouterV3Compatibility from '../../hoc/withReactRouterV3Compatibility';
+import RenderRoute from '../../v2Components/RenderRoute';
+import { updateCharCount } from '../../utils/smsCharCountV2';
+
+const loginUrl =
+  process.env.NODE_ENV === 'production'
+    ? `${config.production.login_url}`
+    : `${config.development.login_url}`;
+
+// const Protected = userIsAuthenticatedRedir(Cap);
+const v3CompatibleCap = withReactRouterV3Compatibility(Cap);
+const v3CompatibleCapV2 = withReactRouterV3Compatibility(CapV2);
+
+export default function App() {
+  useEffect(() => {
+    updateCharCount("", false);
+  });
+  return (
+    <div>
+      <ConnectedRouter history={history}>
+        <Switch>
+          <RenderRoute exact path={loginUrl} component={Login} />
+          <RenderRoute path="/v2" component={v3CompatibleCapV2} key="/v2" />
+          <RenderRoute path="/" component={v3CompatibleCap} key="/" />
+          <RenderRoute component={NotFoundPage} />
+        </Switch>
+      </ConnectedRouter>
+      <GlobalStyle />
+    </div>
+  );
+}

package/entry.js

@@ -0,0 +1,2 @@
+import { publicPath } from './config/path';
+__webpack_public_path__ = ((new URL(((document || {}).currentScript || {}).src || window.location)).origin) + `${publicPath}/`;

package/hoc/withReactRouterV3Compatibility.js

@@ -0,0 +1,66 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { compose } from 'redux';
+import { withRouter } from 'react-router-dom';
+import componentRoutes from '../routes';
+
+function findRoute(routes, path) {
+  let match;
+  for (let i = 0; i < routes.length; i++) {
+    const route = routes[i];
+    if (route?.path === path) {
+      match = route;
+      break;
+    }
+    if (route?.routes) {
+      match = findRoute(route.routes, path);
+      if (match) {
+        break;
+      }
+    }
+  }
+  return match;
+}
+
+function getParamsObject(params = []) {
+  const paramsObject = {};
+  params.forEach((value, key) => {
+    if (paramsObject[key]) {
+      // If the key already exists, convert the value to an array (to handle multiple values for the same key)
+      paramsObject[key] = Array.isArray(paramsObject[key])
+        ? [...paramsObject[key], value]
+        : [paramsObject[key], value];
+    } else {
+      paramsObject[key] = value;
+    }
+  });
+  return paramsObject;
+}
+
+function withReactRouterV3Compatibility(Component) {
+  const EnhancedComponent = (props) => {
+    const { history = {}, location = {}, match = {} } = props;
+    const matchedRoute = findRoute(componentRoutes, match.path);
+    const newProps = {
+      ...props,
+      router: history,
+      params: match.params,
+      route: matchedRoute,
+      location: {
+        ...location,
+        query: getParamsObject(new URLSearchParams(location.search)),
+      },
+    };
+    return <Component {...newProps} />;
+  };
+  EnhancedComponent.propTypes = {
+    router: PropTypes.object,
+    params: PropTypes.object,
+    route: PropTypes.object,
+  };
+  return compose(
+    withRouter,
+  )(EnhancedComponent);
+};
+
+export default withReactRouterV3Compatibility;

package/initialReducer.js

@@ -0,0 +1,34 @@
+import languageProviderReducer from 'v2Containers/LanguageProvider/reducer';
+import beeEditorReducer from 'v2Containers/BeeEditor/reducer';
+import CapFacebookPreviewReducer from 'v2Containers/CapFacebookPreview/reducer';
+
+import capReducer from 'containers/Cap/reducer';
+import appReducer from 'containers/App/reducer';
+import createSmsReducer from 'containers/Sms/Create/reducer';
+import editSmsReducer from 'containers/Sms/Edit/reducer';
+import templateReducer from 'containers/Templates/reducer';
+import tagsReducer from 'containers/TagList/reducer';
+import emailReducer from 'containers/Email/reducer';
+import ebillReducer from 'containers/Ebill/reducer';
+import ftpReducer from 'v2Containers/FTP/reducer';
+import galleryReducer from './v2Containers/Assets/Gallery/reducer';
+import CapCollapsibleLeftNavigationReducer from '@capillarytech/cap-ui-library/CapCollapsibleLeftNavigation/reducer';
+import { AIRA_REDUCER_DOMAIN, askAiraReducer } from '@capillarytech/cap-ui-library/CapAskAira';
+
+export const initialReducer = {
+  language: languageProviderReducer,
+  cap: capReducer,
+  app: appReducer,
+  create: createSmsReducer,
+  edit: editSmsReducer,
+  templates: templateReducer,
+  tagList: tagsReducer,
+  email: emailReducer,
+  ebill: ebillReducer,
+  beeEditor: beeEditorReducer,
+  facebookPreview: CapFacebookPreviewReducer,
+  FTP: ftpReducer,
+  [AIRA_REDUCER_DOMAIN]: askAiraReducer,
+  gallery: galleryReducer,
+  navigationConfig: CapCollapsibleLeftNavigationReducer,
+};

package/mfe-exposed-components.js

@@ -0,0 +1,8 @@
+// This file is used to expose the components of the MFE to the host application
+// 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',
+  };

package/package.json

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

package/utils/checkStore.js

@@ -0,0 +1,21 @@
+import { conformsTo, isFunction, isObject } from 'lodash';
+import invariant from 'invariant';
+
+/**
+ * Validate the shape of redux store
+ */
+export default function checkStore(store) {
+  const shape = {
+    dispatch: isFunction,
+    subscribe: isFunction,
+    getState: isFunction,
+    replaceReducer: isFunction,
+    runSaga: isFunction,
+    injectedReducers: isObject,
+    injectedSagas: isObject,
+  };
+  invariant(
+    conformsTo(store, shape),
+    '(app/utils...) injectors: Expected a valid redux store',
+  );
+}

package/utils/customAuthWrapper.js

@@ -0,0 +1,62 @@
+/* eslint-disable no-unused-vars */
+/* eslint-disable react/no-multi-comp */
+/* eslint-disable react/prefer-stateless-function */
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import hoistStatics from 'hoist-non-react-statics';
+
+const AuthenticatingComponentWithRef = React.forwardRef((props, ref) => (
+  <div ref={ref} />
+));
+const FailureComponentWithRef = React.forwardRef((props, ref) => (
+  <div ref={ref} />
+));
+const defaults = {
+  AuthenticatingComponent: AuthenticatingComponentWithRef, // dont render anything while authenticating
+  FailureComponent: FailureComponentWithRef, // dont render anything on failure of the predicate
+  wrapperDisplayName: 'AuthWrapper',
+};
+
+export default args => {
+  const { AuthenticatingComponent, FailureComponent, wrapperDisplayName } = {
+    ...defaults,
+    ...args,
+  };
+
+  // Wraps the component that needs the auth enforcement
+  return function wrapComponent(DecoratedComponent) {
+    const displayName =
+      DecoratedComponent.displayName || DecoratedComponent.name || 'Component';
+
+    class UserAuthWrapper extends Component {
+      static displayName = `${wrapperDisplayName}(${displayName})`;
+
+      static propTypes = {
+        isAuthenticated: PropTypes.bool,
+        isAuthenticating: PropTypes.bool,
+      };
+
+      static defaultProps = {
+        isAuthenticating: false,
+      };
+
+      render() {
+        const { isAuthenticated, isAuthenticating, forwardedRef } = this.props;
+        if (isAuthenticated) {
+          return <DecoratedComponent {...this.props} ref={forwardedRef} />;
+        }
+        if (isAuthenticating) {
+          return <AuthenticatingComponent {...this.props} ref={forwardedRef} />;
+        }
+        return <FailureComponent {...this.props} ref={forwardedRef} />;
+      }
+    }
+
+    /** forwardRef from HOC to the Wrapped Component */
+    const UserAuthWrapperWithRef = React.forwardRef((props, ref) => (
+      <UserAuthWrapper {...props} forwardedRef={ref} />
+    ));
+
+    return hoistStatics(UserAuthWrapperWithRef, DecoratedComponent);
+  };
+};

package/utils/customConnectedAuthWrapper.js

@@ -0,0 +1,26 @@
+import { connect } from 'react-redux';
+
+import authWrapper from './customAuthWrapper';
+
+const connectedDefaults = {
+  authenticatingSelector: () => false,
+};
+
+export default args => {
+  const { authenticatedSelector, authenticatingSelector } = {
+    ...connectedDefaults,
+    ...args,
+  };
+
+  /** Passed withRef option set to true for forwarding Ref to Wrapped Component */
+  return DecoratedComponent =>
+    connect(
+      (state, ownProps) => ({
+        isAuthenticated: authenticatedSelector(state, ownProps),
+        isAuthenticating: authenticatingSelector(state, ownProps),
+      }),
+      null,
+      null,
+      { withRef: true },
+    )(authWrapper(args)(DecoratedComponent));
+};

package/utils/history.js

@@ -0,0 +1,8 @@
+import { createBrowserHistory } from 'history';
+import pathConfig from '../config/path';
+
+const history = createBrowserHistory({
+  basename: pathConfig.publicPath,
+});
+
+export default history;

package/utils/injectReducer.js

@@ -0,0 +1,2 @@
+import { injectReducer } from "@capillarytech/vulcan-react-sdk/utils";
+export default injectReducer;

package/utils/injectSaga.js

@@ -0,0 +1,2 @@
+import { injectSaga } from "@capillarytech/vulcan-react-sdk/utils";
+export default injectSaga;

package/v2Components/FormBuilder/index.js

@@ -134,7 +134,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
     this.handleSetRadioValue = this.handleSetRadioValue.bind(this);
     this.formElements = [];
     // Check if the liquid flow feature is supported and the channel is in the supported list.
-    this.liquidFlow = hasLiquidSupportFeature() && LIQUID_SUPPORTED_CHANNELS.includes(props?.schema?.channel?.toUpperCase());
+    this.liquidFlow = LIQUID_SUPPORTED_CHANNELS.includes(props?.schema?.channel?.toUpperCase()) && hasLiquidSupportFeature();
   }
 
   componentWillMount() {

package/v2Components/NavigationBar/saga.js

@@ -0,0 +1,18 @@
+import { all } from 'redux-saga/effects';
+import CapCollapsibleLeftNavigationSagas from '@capillarytech/cap-ui-library/CapCollapsibleLeftNavigation/saga';
+import { analyticsBotSaga } from '@capillarytech/cap-ui-library/CapAskAira';
+
+export default [
+  {
+    key: 'navigation',
+    saga: function* navigationConfigSaga() {
+      yield all(CapCollapsibleLeftNavigationSagas.map(saga => saga.call()));
+    },
+  },
+  {
+    key: 'analyticsBotSaga',
+    saga: function* analyticsBotSagaFn() {
+      yield all(analyticsBotSaga.map(saga => saga.call()));
+    },
+  },
+];

package/v2Components/RenderRoute/RenderRoute.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Route } from 'react-router-dom';
+
+const RenderRoute = ({ Component: ComponentToRender, ...rest }) => (
+  <Route
+    {...rest}
+    render={props => <ComponentToRender {...props} />}
+  />
+);
+
+export default RenderRoute;

package/v2Components/RenderRoute/index.js

@@ -0,0 +1 @@
+export { default } from './RenderRoute';