@capillarytech/creatives-library 8.0.136-alpha.4 → 8.0.136-beta.3

package/routes.js

@@ -1,146 +1,212 @@
 import withReactRouterV3Compatibility from './hoc/withReactRouterV3Compatibility';
-
+import Dashboard from './containers/Dashboard';
+import SmsCreate from './containers/Sms/Create';
+import SmsEdit from './containers/Sms/Edit';
+import Templates from './containers/Templates';
+import Gallary from './containers/Assets/Gallery';
+import WeChatMapTemplate from './containers/WeChat/MapTemplates';
+import WeChatRichmediaCreate from './containers/WeChat/RichmediaTemplates/Create';
+import WeChatRichmediaEdit from './containers/WeChat/RichmediaTemplates/Edit';
+import Email from './containers/Email';
+import Ebill from './containers/Ebill';
+import MobilePushCreate from './containers/MobilePush/Create';
+import MobilePushEdit from './containers/MobilePush/Edit';
+import LineCreate from './containers/Line/Create';
 import SomethingWentWrong from '@capillarytech/cap-ui-library/CapSomethingWentWrong';
-import NotFoundPage from './v2Containers/NotFoundPage';
+import NotFoundPage from './containers/NotFoundPage';
 import TemplatesV2 from './v2Containers/TemplatesV2';
+import { updateCharCount } from './utils/smsCharCountV2';
 
-// Utility function to detect if we're in embedded mode
-const isEmbeddedMode = () => {
-  // Check if we're in embedded mode by looking for embedded mode indicators
-  // This could be from URL params, environment variables, or build configuration
-  if (typeof window !== 'undefined') {
-    const urlParams = new URLSearchParams(window.location.search);
-    return urlParams.get('type') === 'embedded';
-  }
-  // Fallback: check if containers folder exists (indicating non-embedded mode)
-  try {
-    // This will throw an error in embedded mode since containers are excluded
-    require('./containers/Dashboard');
-    return false;
-  } catch (error) {
-    return true;
-  }
-};
-
-// Check if we're in embedded mode at module load time
-const isEmbedded = isEmbeddedMode();
-
-// Clean all-or-nothing approach for static imports
-const getStaticImports = () => {
-  if (isEmbedded) return {}; // Only v2 uses static imports
-
-  try {
-    return {
-      Dashboard: require('./containers/Dashboard').default,
-      SmsCreate: require('./containers/Sms/Create').default,
-      SmsEdit: require('./containers/Sms/Edit').default,
-      Templates: require('./containers/Templates').default,
-      WeChatMapTemplate: require('./containers/WeChat/MapTemplates').default,
-      Gallary: require('./containers/Assets/Gallery').default,
-      WeChatRichmediaCreate: require('./containers/WeChat/RichmediaTemplates/Create').default,
-      WeChatRichmediaEdit: require('./containers/WeChat/RichmediaTemplates/Edit').default,
-      Email: require('./containers/Email').default,
-      Ebill: require('./containers/Ebill').default,
-      MobilePushCreate: require('./containers/MobilePush/Create').default,
-      MobilePushEdit: require('./containers/MobilePush/Edit').default,
-      LineCreate: require('./containers/Line/Create').default,
-    };
-  } catch (error) {
-    console.log('Error importing v1 components:', error.message);
-    return {}; // Fallback to v2 only
-  }
-};
-
-// Declarative route configuration
-const ROUTES = [
-  // ✅ V2 Routes (always included)
-  { path: '/v2/somethingwentwrong', name: 'somethingwentwrong', component: SomethingWentWrong },
-  { path: '/v2', name: 'templatesV2', component: TemplatesV2 },
-  { path: '/v2/loyalty', name: 'loyalty', component: TemplatesV2 },
-
-  // ✅ V1 Routes (conditional based on `!isEmbedded`)
-  { path: '/', componentKey: 'Dashboard' },
-  
-  // SMS routes v1
-  { path: '/sms/create', name: 'create', componentKey: 'SmsCreate' },
-  { path: '/sms/view', name: 'view', componentKey: 'SmsCreate' },
-  { path: '/sms/edit/:id', name: 'edit', componentKey: 'SmsEdit' },
-  { path: '/sms', name: 'sms', componentKey: 'Templates' },
-  
-  // WeChat routes v1
-  { path: '/wechat', name: 'wechat', componentKey: 'Templates' },
-  { path: '/wechat/create', name: 'create weChat', componentKey: 'WeChatMapTemplate' },
-  { path: '/wechat/edit/:id', name: 'edit weChat', componentKey: 'WeChatMapTemplate' },
-  { path: '/wechat/richmedia/create', name: 'wechat_richmedia_create', componentKey: 'WeChatRichmediaCreate' },
-  { path: '/wechat/richmedia/edit/:id', name: 'wechat_richmedia_edit', componentKey: 'WeChatRichmediaEdit' },
-  
-  // Email routes v1
-  { path: '/email', name: 'email', componentKey: 'Templates' },
-  { path: '/email/create', name: 'EmailCreate', componentKey: 'Email' },
-  { path: '/email/view', name: 'EmailView', componentKey: 'Email' },
-  { path: '/email/edit/:id', name: 'EmailEdit', componentKey: 'Email' },
-  
-  // Ebill routes v1
-  { path: '/ebill', name: 'Ebill', componentKey: 'Templates' },
-  { path: '/ebill/create', name: 'Ebill', componentKey: 'Ebill' },
-  { path: '/ebill/edit/:id', name: 'Ebill', componentKey: 'Ebill' },
-  
-  // MobilePush routes v1
-  { path: '/mobilepush', name: 'mobilepush', componentKey: 'Templates' },
-  { path: '/mobilepush/create/:mode', name: 'create', componentKey: 'MobilePushCreate' },
-  { path: '/mobilepush/edit/:id', name: 'edit', componentKey: 'MobilePushEdit' },
-  
-  // Assets routes v1
-  { path: '/assets', name: 'GALLERY', componentKey: 'Gallary' },
-  
-  // Line routes v1
-  { path: '/line', name: 'line', componentKey: 'Templates' },
-  { path: '/line/create/:mode', name: 'create line', componentKey: 'LineCreate' },
-  { path: '/line/view/:mode', name: 'view', componentKey: 'LineCreate' },
-  { path: '/line/edit/text/:id', name: 'edit_text', componentKey: 'LineCreate' },
-  { path: '/line/edit/image/:id', name: 'edit_image', componentKey: 'LineCreate' },
-];
-
-// Simplified route creation
-const createRoutes = (components = {}) => {
-  const routes = ROUTES.flatMap(({ path, component, componentKey, name }) => {
-    // V2 component is statically imported
-    if (component) {
-      return [{
-        exact: true,
-        path,
-        name,
-        component: withReactRouterV3Compatibility(component),
-      }];
-    }
-
-    // V1 component: only include if available
-    const resolved = components[componentKey];
-    if (resolved) {
-      return [{
-        exact: true,
-        path,
-        name,
-        component: withReactRouterV3Compatibility(resolved),
-      }];
-    }
-
-    return []; // Skip if not in embedded or missing
-  });
-
-  // Catch-all fallback
-  routes.push({
+const routes = [
+  {
+    exact: true,
+    path: '/',
+    component: withReactRouterV3Compatibility(Dashboard),
+  },
+  //sms routes v1
+  {
+    exact: true,
+    path: '/sms/create',
+    name: 'create',
+    component: withReactRouterV3Compatibility(SmsCreate),
+  },
+  {
+    exact: true,
+    path: '/sms/view',
+    name: 'view',
+    component: withReactRouterV3Compatibility(SmsCreate),
+  },
+  {
+    exact: true,
+    path: '/sms/edit/:id',
+    name: 'edit',
+    component: withReactRouterV3Compatibility(SmsEdit),
+  },
+  {
+    exact: true,
+    path: '/sms',
+    name: 'sms',
+    component: withReactRouterV3Compatibility(Templates),
+  },
+  //wechat routes v1
+  {
+    exact: true,
+    path: '/wechat',
+    name: 'wechat',
+    component: withReactRouterV3Compatibility(Templates),
+  },
+  {
+    exact: true,
+    path: '/wechat/create',
+    name: 'create weChat',
+    component: withReactRouterV3Compatibility(WeChatMapTemplate),
+  },
+  {
+    exact: true,
+    path: '/wechat/edit/:id',
+    name: 'edit weChat',
+    component: withReactRouterV3Compatibility(WeChatMapTemplate),
+  },
+  {
+    exact: true,
+    path: '/wechat/richmedia/create',
+    name: 'wechat_richmedia_create',
+    component: withReactRouterV3Compatibility(WeChatRichmediaCreate),
+  },
+  {
+    exact: true,
+    path: '/wechat/richmedia/edit/:id',
+    name: 'wechat_richmedia_edit',
+    component: withReactRouterV3Compatibility(WeChatRichmediaEdit),
+  },
+  //email routes v1
+  {
+    exact: true,
+    path: '/email',
+    name: 'email',
+    component: withReactRouterV3Compatibility(Templates),
+  },
+  {
+    exact: true,
+    path: '/email/create',
+    name: 'EmailCreate',
+    component: withReactRouterV3Compatibility(Email),
+  },
+  {
+    exact: true,
+    path: '/email/view',
+    name: 'EmailView',
+    component: withReactRouterV3Compatibility(Email),
+  },
+  {
+    exact: true,
+    path: '/email/edit/:id',
+    name: 'EmailEdit',
+    component: withReactRouterV3Compatibility(Email),
+  },
+  //ebill routes v1
+  {
+    exact: true,
+    path: '/ebill',
+    name: 'Ebill',
+    component: withReactRouterV3Compatibility(Templates),
+  },
+  {
+    exact: true,
+    path: '/ebill/create',
+    name: 'Ebill',
+    component: withReactRouterV3Compatibility(Ebill),
+  },
+  {
+    exact: true,
+    path: '/ebill/edit/:id',
+    name: 'Ebill',
+    component: withReactRouterV3Compatibility(Ebill),
+  },
+  //mobilepush routes v1
+  {
+    exact: true,
+    path: '/mobilepush',
+    name: 'mobilepush',
+    component: withReactRouterV3Compatibility(Templates),
+  },
+  {
+    exact: true,
+    path: '/mobilepush/create/:mode',
+    name: 'create',
+    component: withReactRouterV3Compatibility(MobilePushCreate),
+  },
+  {
+    exact: true,
+    path: '/mobilepush/edit/:id',
+    name: 'edit',
+    component: withReactRouterV3Compatibility(MobilePushEdit),
+  },
+  // assets routes v1
+  {
+    exact: true,
+    path: '/assets',
+    name: 'GALLERY',
+    component: withReactRouterV3Compatibility(Gallary),
+  },
+  // line routes v1
+  {
+    exact: true,
+    path: '/line',
+    name: 'line',
+    component: withReactRouterV3Compatibility(Templates),
+  },
+  {
+    exact: true,
+    path: '/line/create/:mode',
+    name: 'create line',
+    component: withReactRouterV3Compatibility(LineCreate),
+  },
+  {
+    exact: true,
+    path: '/line/view/:mode',
+    name: 'view',
+    component: withReactRouterV3Compatibility(LineCreate),
+  },
+  {
+    exact: true,
+    path: '/line/edit/text/:id',
+    name: 'edit_text',
+    component: withReactRouterV3Compatibility(LineCreate),
+  },
+  {
+    exact: true,
+    path: '/line/edit/image/:id',
+    name: 'edit_image',
+    component: withReactRouterV3Compatibility(LineCreate),
+  },
+  {
+    exact: true,
+    path: '/v2/somethingwentwrong',
+    name: 'somethingwentwrong',
+    component: withReactRouterV3Compatibility(SomethingWentWrong),
+  },
+  {
+    exact: true,
+    path: '/v2',
+    name: 'templatesV2',
+    component: withReactRouterV3Compatibility(TemplatesV2),
+  },
+  {
+    exact: true,
+    path: '/v2/loyalty',
+    name: 'loyalty',
+    component: withReactRouterV3Compatibility(TemplatesV2),
+  },
+  {
     path: '*',
     name: 'notfound',
     component: withReactRouterV3Compatibility(NotFoundPage),
-  });
-
-  return routes;
-};
+  },
+];
 
-// Initialize routes synchronously with available components
-const staticImports = getStaticImports();
-const routes = createRoutes(staticImports);
+// export function createRoutes(store) {
+//   updateCharCount("", false); // TODO:: React18, need to see why this call was made from here and can we remove this?
+// }
 
-// Export the routes array
 export default routes;

package/services/getSchema.js

@@ -1,4 +1,4 @@
-import { SMS, EMAIL, MOBILE_PUSH, WECHAT } from '../v2Containers/CreativesContainer/constants';
+import {SMS, EMAIL, MOBILE_PUSH, WECHAT, LINE} from '../v2Containers/CreativesContainer/constants';
 export default function getSchema(channel) {
   let schemaPath = '../containers/';
   switch (channel.toUpperCase()) {

package/services/localStorageApi.js

@@ -2,7 +2,6 @@
  * Created by vivek on 17/2/17.
  */
 
-//This is being used in the v2 containers and legacy flow aswell, please make sure to validate the DVS flow.
 export const loadItem = (key) => {
   try {
     const serializedState = localStorage.getItem(key);

package/tests/i18n.test.js

@@ -1,4 +1,4 @@
-import { DEFAULT_LOCALE } from '../constants/unified';
+import { DEFAULT_LOCALE } from '../containers/App/constants';
 import { formatTranslationMessages } from '../i18n';
 
 jest.mock('../translations/en.json', () => (

package/utils/asyncInjectors.js

@@ -0,0 +1,78 @@
+import conformsTo from 'lodash/conformsTo';
+import isEmpty from 'lodash/isEmpty';
+import isFunction from 'lodash/isFunction';
+import isObject from 'lodash/isObject';
+import isString from 'lodash/isString';
+import invariant from 'invariant';
+import warning from 'warning';
+import createReducer from 'reducers';
+
+/**
+ * Validate the shape of redux store
+ */
+export function checkStore(store) {
+  const shape = {
+    dispatch: isFunction,
+    subscribe: isFunction,
+    getState: isFunction,
+    replaceReducer: isFunction,
+    runSaga: isFunction,
+    asyncReducers: isObject,
+  };
+  invariant(
+    conformsTo(store, shape),
+    '(app/utils...) asyncInjectors: Expected a valid redux store'
+  );
+}
+
+/**
+ * Inject an asynchronously loaded reducer
+ */
+export function injectAsyncReducer(store, isValid) {
+  return function injectReducer(name, asyncReducer) {
+    if (!isValid) checkStore(store);
+
+    invariant(
+      isString(name) && !isEmpty(name) && isFunction(asyncReducer),
+      '(app/utils...) injectAsyncReducer: Expected `asyncReducer` to be a reducer function'
+    );
+
+    if (Reflect.has(store.asyncReducers, name)) return;
+
+    store.asyncReducers[name] = asyncReducer; // eslint-disable-line no-param-reassign
+    store.replaceReducer(createReducer(store.asyncReducers));
+  };
+}
+
+/**
+ * Inject an asynchronously loaded saga
+ */
+export function injectAsyncSagas(store, isValid) {
+  return function injectSagas(sagas) {
+    if (!isValid) checkStore(store);
+
+    invariant(
+      Array.isArray(sagas),
+      '(app/utils...) injectAsyncSagas: Expected `sagas` to be an array of generator functions'
+    );
+
+    warning(
+      !isEmpty(sagas),
+      '(app/utils...) injectAsyncSagas: Received an empty `sagas` array'
+    );
+
+    sagas.map(store.runSaga);
+  };
+}
+
+/**
+ * Helper for creating injectors
+ */
+export function getAsyncInjectors(store) {
+  checkStore(store);
+
+  return {
+    injectReducer: injectAsyncReducer(store, true),
+    injectSagas: injectAsyncSagas(store, true),
+  };
+}

package/utils/authWrapper.js

@@ -8,7 +8,7 @@ import { routerActions } from 'connected-react-router';
 // import { routerActions } from 'react-router-redux';
 // import { UserAuthWrapper } from 'redux-auth-wrapper';
 import { createSelector } from 'reselect';
-import { makeSelectAuthenticated } from '../v2Containers/Cap/selectors';
+import { makeSelectAuthenticated } from '../containers/Cap/selectors';
 // import config from '../config/app';
 const orginUrl = window.location.origin;
 // const loginUrl = '/auth/login';

package/utils/callNativeEvent.js

@@ -0,0 +1,16 @@
+//https://github.com/facebook/react/issues/11488#issuecomment-470623779
+export default function callNativeEvent({field, value, event}) {
+  //cuz in react 16 native events does not work
+  const ev = event;
+  const input = field;
+  const lastValue = input.value;
+  input.value = value;
+// hack React15
+  ev.simulated = true;
+// hack React16 内部定义了descriptor拦截value，此处重置状态
+  const tracker = input._valueTracker;
+  if (tracker) {
+    tracker.setValue(lastValue);
+  }
+  input.dispatchEvent(ev);
+}

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/common.js

@@ -22,8 +22,8 @@ import {
   BADGES_ISSUE,
   ENABLE_WECHAT,
   LIQUID_SUPPORT,
-  ENABLE_NEW_MPUSH
-} from '../constants/unified';
+  ENABLE_NEW_MPUSH,
+} from '../containers/App/constants';
 import { apiMessageFormatHandler } from './commonUtils';
 
 export function getUserNameById(userId, allUserList) {

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/tagValidations.js

@@ -8,7 +8,7 @@
 
 import lodashForEach from 'lodash/forEach';
 import lodashCloneDeep from 'lodash/cloneDeep';
-import { ENTRY_TRIGGER_TAG_REGEX } from '../constants/unified';
+import { ENTRY_TRIGGER_TAG_REGEX } from '../containers/App/constants';
 
 const DEFAULT = 'default';
 const SUBTAGS = 'subtags';

package/utils/tests/checkStore.test.js

@@ -1,4 +1,4 @@
-import checkStore from '../../legacy/checkStore'; 
+import checkStore from '../checkStore'; 
 
 describe('checkStore', () => {
   it('should not throw if the store is valid', () => {

package/utils/tests/customAuth.test.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import UserAuthWrapper from '../../legacy/customAuthWrapper';
+import UserAuthWrapper from '../customAuthWrapper';
 
 const MockComponent = React.forwardRef((props, ref) => <div ref={ref} {...props}>Mock Component</div>);