@capillarytech/creatives-library 1.0.1-alpha.0 → 1.0.2

package/utils/authWrapper.js

@@ -74,65 +74,3 @@ export const getAuthenticationDetails = () => ({
   user: loadItem('user'),
   ouId: loadItem('ouId'),
 });
-
-export const RBAC_CONFIGURATION_PARAMETERS = {
-  OM: 'OM',
-  ENABLE_LOYALTY_NEW_UI_ACCESS_VERIFICATION:
-    'ENABLE_LOYALTY_NEW_UI_ACCESS_VERIFICATION',
-  ENABLE_PRODUCT_SUPPORT_VIDEOS: 'ENABLE_PRODUCT_SUPPORT_VIDEOS',
-  LOYALTY_UPDATE_PROGRAM: 'LOYALTY_UPDATE_PROGRAM',
-  LOYALTY_UPDATE_PROMOTION: 'LOYALTY_UPDATE_PROMOTION',
-};
-
-export const rbacUiAccessiblePermissionsData = {
-  rbacUiConfig: {
-    OM: [RBAC_CONFIGURATION_PARAMETERS.OM],
-    ENABLE_LOYALTY_NEW_UI_ACCESS_VERIFICATION: [
-      RBAC_CONFIGURATION_PARAMETERS.ENABLE_LOYALTY_NEW_UI_ACCESS_VERIFICATION,
-    ],
-  },
-};
-
-export const getUserData = userData => {
-  try {
-    return JSON.parse(userData)?.accessiblePermissions;
-  } catch (err) {
-    return [];
-  }
-};
-
-export const getRBACConfigurationData = () => {
-  const userData = localStorage.getItem('user');
-  const rbacConfig = rbacUiAccessiblePermissionsData?.rbacUiConfig;
-  if (!rbacConfig) return [];
-  /*
-    get Accessible permissions
-  */
-  const accessiblePermissions =
-    typeof userData === 'string' ? getUserData(userData) : [];
-  if (accessiblePermissions?.length === 0) return [];
-  let tempEnabledConfigurations = [];
-  accessiblePermissions?.forEach(accessiblePermission => {
-    if (
-      accessiblePermission &&
-      rbacConfig[accessiblePermission] &&
-      rbacConfig[accessiblePermission].length
-    ) {
-      rbacConfig[accessiblePermission]?.forEach(confId => {
-        tempEnabledConfigurations.push(confId);
-      });
-      tempEnabledConfigurations = tempEnabledConfigurations.concat(
-        rbacConfig[accessiblePermission],
-      );
-    }
-  });
-
-  const enabledConfigurations = [...new Set(tempEnabledConfigurations)];
-  return enabledConfigurations;
-};
-
-//Get the host of the running app
-export const getHost = () => {
-  const host = location.protocol.concat('//').concat(window.location.host);
-  return host;
-};

package/utils/clearDataOnUnmount.js

@@ -3,13 +3,10 @@ import React from 'react';
 function clearDataOnUnmount(Component) {
   return class extends React.Component {
     render() {
-      return (
-        <Component {...this.props} programId={`${this.props.programId}`} />
-      );
+      return <Component {...this.props} />;
     }
     componentWillUnmount() {
-      const clearData = this.props?.actions?.clearData;
-      if (typeof clearData === 'function') clearData();
+      this.props.actions.clearData();
     }
   };
 }

package/utils/commonUtils.js

@@ -2,7 +2,6 @@ import React from 'react';
 import reduce from 'lodash/reduce';
 import uniq from 'lodash/uniq';
 import isNil from 'lodash/isNil';
-import isEmpty from 'lodash/isEmpty';
 import CapRow from '@capillarytech/cap-ui-library/CapRow';
 import classnames from 'classnames';
 import CapHeading from '@capillarytech/cap-ui-library/CapHeading';
@@ -14,16 +13,20 @@ import pick from 'lodash/pick';
 import startCase from 'lodash/startCase';
 import cloneDeep from 'lodash/cloneDeep';
 import forEach from 'lodash/forEach';
-import {
-  CAP_WHITE,
-  CAP_ORANGE,
-} from '@capillarytech/cap-ui-library/styled/variables';
-import { FormattedMessage } from 'react-intl';
-import pako from 'pako';
-
+import { CAP_WHITE } from '@capillarytech/cap-ui-library/styled/variables';
 import messages from '../components/organisms/AllocationStrategy/messages';
 import globalMessage from '../components/pages/Cap/messages';
+import * as constants from '../components/pages/App/constants';
+import { Flex } from '../components/pages/Cap/style';
+
 import {
+  ROUND_UP,
+  CUSTOM_FIELD,
+} from '../components/organisms/AllocationStrategy/constants';
+import StrategiesTag from '../components/molecules/StrategiesTag';
+import { loadItem } from '../services/localStorageApi';
+
+const {
   MOBILEPUSH,
   ANDROID,
   IOS,
@@ -47,16 +50,8 @@ import {
   DEFAULT_CHANNELS,
   UI_COMAPATIABLE_CHANNEL_MAP,
   API_COMAPATIABLE_CHANNEL_MAP,
-} from '../components/pages/App/constants';
-import { Flex } from '../components/pages/Cap/style';
-import debounce from 'lodash/debounce';
-
-import {
-  ROUND_UP,
-  CUSTOM_FIELD,
-} from '../components/organisms/AllocationStrategy/constants';
-import StrategiesTag from '../components/molecules/StrategiesTag';
-import { loadItem } from '../services/localStorageApi';
+  FLEET_LOYALTY_ENABLED,
+} = constants;
 
 export const parseQueryParams = (url = '') => {
   const queryString = url.split('?')[1] || '';
@@ -71,7 +66,12 @@ export const parseQueryParams = (url = '') => {
 
   return queryParamsObject;
 };
-export const isEmptyOrNil = value => isEmpty(value) || isNil(value);
+
+export const hasUserGroup2Permission = Auth.hasFeatureAccess.bind(
+  null,
+  FLEET_LOYALTY_ENABLED,
+);
+
 export const getContentChannels = (messageContents, mpushSubType = false) =>
   reduce(
     messageContents,
@@ -199,12 +199,9 @@ export const sorter = (a, b, key) => {
   return 0;
 };
 
-export const validateValueBetweenRange = (value, min, max) => {
-  return (
-    ((min && parseFloat(value) > parseFloat(min)) || !min) &&
-    ((max && parseFloat(value) < parseFloat(max)) || !max)
-  );
-};
+export const validateValueBetweenRange = (value, min, max) =>
+  ((min && parseFloat(value) > parseFloat(min)) || !min) &&
+  ((max && parseFloat(value) < parseFloat(max)) || !max);
 
 export const getMinMaxRangeString = (
   formatMessage,
@@ -312,13 +309,14 @@ const getRoundupSlabWithPercent = (
   allocationValuesArr,
   minAllocationValuesArr,
   maxAllocationValuesArr,
-) =>
-  slabs.map((slab, idx) => ({
+) => {
+  return slabs.map((slab, idx) => ({
     ...slab,
     name: `${slab?.name} ${minAllocationValuesArr[idx]} - ${
       maxAllocationValuesArr[idx]
     } => ${allocationValuesArr[idx]}`,
   }));
+};
 
 const getRoundupConfig = (
   {
@@ -458,7 +456,7 @@ const getRoundupConfigGrammerSlabDependent = (
 ) => (
   <Flex>
     {getHeadingComponent(
-      `${formatMessage(globalMessage.round)}`,
+      `${formatMessage(messages.roundPointsBalance)}`,
       showWhiteText,
       'quarter-max-width auto-width',
     )}
@@ -468,7 +466,7 @@ const getRoundupConfigGrammerSlabDependent = (
       showMarginLeft
       text={`${minAllocationValue ||
         formatMessage(globalMessage.na)}  ${formatMessage(
-        globalMessage.to,
+        messages.to,
       )} ${maxAllocationValue || formatMessage(globalMessage.na)}`}
       padding={0}
       defaultColor="transparent"
@@ -600,11 +598,6 @@ export const getSlabType = allocation_type => {
     : SLAB_INDEPENDENT;
 };
 
-export const getStepFunctionSlabType = allocationValues =>
-  uniq(allocationValues.split(',')).length === 1
-    ? SLAB_INDEPENDENT
-    : SLAB_DEPENDENT;
-
 export const getAllocationOn = allocation_type => {
   const customFieldRegex = new RegExp(CUSTOM_FIELD_REGEX);
   return (allocation_type.match(customFieldRegex) || []).length
@@ -844,116 +837,3 @@ export const snakeToCamelCaseConvertion = snakeCasedData => {
   });
   return camelCasedObject;
 };
-
-export const eventTypesMap = {
-  TRANSACTIONADD: 'TransactionAdd',
-  NEWBILL: 'NewBill',
-  POINTSREDEMPTION: 'PointsRedemption',
-  RETURNBILL: 'ReturnBill',
-  GROUPRETURNBILL: 'GroupReturnBill',
-  SOCIALCONNECT: 'SocialConnect',
-  TRANSACTIONUPDATE: 'TransactionUpdate',
-  GROUPTRANSACTIONUPDATE: 'GroupTransactionUpdate',
-  CUSTOMERREGISTRATION: 'CustomerRegistration',
-  GROUPTRANSACTIONADD: 'GroupTransactionAdd',
-  DELAYEDACCRUAL: 'DelayedAccrual',
-  POINTSTRANSFER: 'PointsTransfer',
-  TARGETCOMPLETED: 'TargetCompleted',
-  POINTSREDEMPTIONREVERSAL: 'PointsRedemptionReversal',
-  PARTNERPROGRAMLINKING: 'PartnerProgramLinking',
-  PARTNERPROGRAMTIERUPDATE: 'PartnerProgramTierUpdate',
-  PARTNERPROGRAMDELINKING: 'PartnerProgramDeLinking',
-  POINTSCONTRIBUTIONTOGROUP: 'PointsContributionToGroup',
-  CUSTOMERUPDATE: 'CustomerUpdate',
-  VOUCHERREDEMPTION: 'VoucherRedemption',
-  GENERICEVENT: 'GENERICEVENT',
-};
-
-export const billExtendedFieldSupportedEvents = [
-  'TransactionAdd',
-  'TransactionUpdate',
-  'ReturnBill',
-];
-
-export const debounceUtil = (fn, timeout) => debounce(fn, timeout);
-
-export const getHighlightedText = ({
-  searchValue,
-  originalStr,
-  counterObj,
-  searchIndex = 1,
-  isCondition = false,
-  setsCount = 0,
-}) => {
-  const lwrTitle = cloneDeep(originalStr);
-  const lwrSearchValue = cloneDeep(searchValue);
-
-  const index = (lwrTitle || '')
-    .toLowerCase()
-    .indexOf((lwrSearchValue || '').toLowerCase());
-  if (index > -1) counterObj.counter += 1;
-  const highlight =
-    counterObj.counter + (isCondition ? setsCount : 0) === searchIndex;
-  const beforeStr = originalStr?.substring(0, index);
-  const afterStr = originalStr?.slice(index + searchValue?.length);
-  const highlightedStr = originalStr?.substring(
-    beforeStr?.length,
-    beforeStr?.length + searchValue?.length,
-  );
-  const highlightedText =
-    index > -1 ? (
-      <span>
-        {beforeStr}
-        <span
-          style={{
-            backgroundColor: '#ffef89',
-            border: highlight ? '1px solid #E4B03A' : 'none',
-          }}
-          className={highlight && 'highlighted-set'}
-        >
-          {highlightedStr}
-        </span>
-        {afterStr}
-      </span>
-    ) : (
-      <span>{originalStr}</span>
-    );
-  return highlightedText;
-};
-export const downloadFile = ({
-  fileName,
-  type = 'application/json',
-  jsonObj,
-  successCallback,
-  errorCallback,
-}) => {
-  try {
-    const json = JSON.stringify(jsonObj, null, 2);
-    const blob = new Blob([json], { type });
-    const href = URL.createObjectURL(blob);
-    const link = document.createElement('a');
-    link.href = href;
-    link.download = `${fileName}.json`;
-    document.body.appendChild(link);
-    link.click();
-    // cleaning up "a" element & removing ObjectURL
-    document.body.removeChild(link);
-    URL.revokeObjectURL(href);
-    if (successCallback) successCallback();
-  } catch (error) {
-    if (errorCallback) errorCallback();
-  }
-};
-
-export const apiMessageFormatHandler = (id, fallback) => (
-  <FormattedMessage id={id} defaultMessage={fallback} />
-);
-
-export const compressData = data => pako.gzip(data, { to: 'string' });
-
-export const handleStopPropagation = event => {
-  event.stopPropagation();
-};
-export function trimString(string) {
-  return typeof string === 'string' ? string.trim() : string;
-}

package/utils/constants.js

@@ -1,2 +1,6 @@
+export const RESTART_ON_REMOUNT = '@@saga-injector/restart-on-remount';
+export const DAEMON = '@@saga-injector/daemon';
+export const ONCE_TILL_UNMOUNT = '@@saga-injector/once-till-unmount';
+
 export const ROLE_ADMIN = 'ADMIN';
 export const ROLE_USER = 'USER';

package/utils/injectReducer.js

@@ -1,2 +1,40 @@
-import { injectReducer } from '@capillarytech/vulcan-react-sdk/utils';
-export default injectReducer;
+import React from 'react';
+import PropTypes from 'prop-types';
+import hoistNonReactStatics from 'hoist-non-react-statics';
+
+import getInjectors from './reducerInjectors';
+
+/**
+ * Dynamically injects a reducer
+ *
+ * @param {string} key A key of the reducer
+ * @param {function} reducer A reducer that will be injected
+ *
+ */
+export default ({ key, reducer }) => WrappedComponent => {
+  class ReducerInjector extends React.Component {
+    static WrappedComponent = WrappedComponent;
+
+    static contextTypes = {
+      store: PropTypes.object.isRequired,
+    };
+
+    static displayName = `withReducer(${WrappedComponent.displayName ||
+      WrappedComponent.name ||
+      'Component'})`;
+
+    componentWillMount() {
+      const { injectReducer } = this.injectors;
+
+      injectReducer(key, reducer);
+    }
+
+    injectors = getInjectors(this.context.store);
+
+    render() {
+      return <WrappedComponent {...this.props} />;
+    }
+  }
+
+  return hoistNonReactStatics(ReducerInjector, WrappedComponent);
+};

package/utils/injectSaga.js

@@ -1,3 +1,58 @@
-import { injectSaga } from '@capillarytech/vulcan-react-sdk/utils';
-import { DAEMON } from '@capillarytech/vulcan-react-sdk/utils/sagaInjectorTypes';
-export default (props) => injectSaga({...props, mode: DAEMON});
+import React from 'react';
+import PropTypes from 'prop-types';
+import hoistNonReactStatics from 'hoist-non-react-statics';
+
+import getInjectors from './sagaInjectors';
+import { RESTART_ON_REMOUNT } from './constants';
+
+/**
+ * Dynamically injects a saga, passes component's props as saga arguments
+ *
+ * @param {string} key A key of the saga
+ * @param {function} saga A root saga that will be injected
+ * @param {string} [mode] By default (constants.RESTART_ON_REMOUNT) the saga will be started on component mount and
+ * cancelled with `task.cancel()` on component un-mount for improved performance. Another two options:
+ *   - constants.DAEMON—starts the saga on component mount and never cancels it or starts again,
+ *   - constants.ONCE_TILL_UNMOUNT—behaves like 'RESTART_ON_REMOUNT' but never runs it again.
+ *
+ */
+export default ({
+  key,
+  saga,
+  mode = RESTART_ON_REMOUNT,
+}) => WrappedComponent => {
+  class InjectSaga extends React.Component {
+    static WrappedComponent = WrappedComponent;
+
+    static contextTypes = {
+      store: PropTypes.object.isRequired,
+    };
+
+    static displayName = `withSaga(${WrappedComponent.displayName ||
+      WrappedComponent.name ||
+      'Component'})`;
+
+    constructor(props, context) {
+      super(props, context);
+
+      this.injectors = getInjectors(context.store);
+      this.injectors.injectSaga(
+        `${InjectSaga.displayName}:${key}`,
+        { saga, mode },
+        props,
+      );
+    }
+
+    componentWillUnmount() {
+      const { ejectSaga } = this.injectors;
+
+      ejectSaga(`${InjectSaga.displayName}:${key}`);
+    }
+
+    render() {
+      return <WrappedComponent {...this.props} />;
+    }
+  }
+
+  return hoistNonReactStatics(InjectSaga, WrappedComponent);
+};

package/utils/intlWrapper.js

@@ -8,7 +8,7 @@
 import React from 'react';
 import { IntlProvider, intlShape } from 'react-intl';
 import { mount, shallow, configure } from 'enzyme';
-import Adapter from '@cfaester/enzyme-adapter-react-18';
+import Adapter from 'enzyme-adapter-react-16';
 
 configure({ adapter: new Adapter() });
 // You can pass your messages to the IntlProvider. Optional: remove if unneeded.

package/utils/reducerInjectors.js

@@ -0,0 +1,34 @@
+import invariant from 'invariant';
+import { isEmpty, isFunction, isString } from 'lodash';
+
+import checkStore from './checkStore';
+import createReducer from '../reducers';
+
+export function injectReducerFactory(store, isValid) {
+  return function injectReducer(key, reducer) {
+    if (!isValid) checkStore(store);
+
+    invariant(
+      isString(key) && !isEmpty(key) && isFunction(reducer),
+      '(app/utils...) injectReducer: Expected `reducer` to be a reducer function',
+    );
+
+    // Check `store.injectedReducers[key] === reducer` for hot reloading when a key is the same but a reducer is different
+    if (
+      Reflect.has(store.injectedReducers, key) &&
+      store.injectedReducers[key] === reducer
+    )
+      return;
+
+    store.injectedReducers[key] = reducer; // eslint-disable-line no-param-reassign
+    store.replaceReducer(createReducer(store.injectedReducers));
+  };
+}
+
+export default function getInjectors(store) {
+  checkStore(store);
+
+  return {
+    injectReducer: injectReducerFactory(store, true),
+  };
+}

package/utils/sagaInjectors.js

@@ -0,0 +1,92 @@
+import invariant from 'invariant';
+import { isEmpty, isFunction, isString, conformsTo } from 'lodash';
+
+import checkStore from './checkStore';
+import { DAEMON, ONCE_TILL_UNMOUNT, RESTART_ON_REMOUNT } from './constants';
+
+const allowedModes = [RESTART_ON_REMOUNT, DAEMON, ONCE_TILL_UNMOUNT];
+
+const checkKey = key =>
+  invariant(
+    isString(key) && !isEmpty(key),
+    '(app/utils...) injectSaga: Expected `key` to be a non empty string',
+  );
+
+const checkDescriptor = descriptor => {
+  const shape = {
+    saga: isFunction,
+    mode: mode => isString(mode) && allowedModes.includes(mode),
+  };
+  invariant(
+    conformsTo(descriptor, shape),
+    '(app/utils...) injectSaga: Expected a valid saga descriptor',
+  );
+};
+
+export function injectSagaFactory(store, isValid) {
+  return function injectSaga(key, descriptor = {}, args) {
+    if (!isValid) checkStore(store);
+
+    const newDescriptor = {
+      ...descriptor,
+      mode: descriptor.mode || DAEMON,
+    };
+    const { saga, mode } = newDescriptor;
+
+    checkKey(key);
+    checkDescriptor(newDescriptor);
+
+    let hasSaga = Reflect.has(store.injectedSagas, key);
+
+    if (process.env.NODE_ENV !== 'production') {
+      const oldDescriptor = store.injectedSagas[key];
+      // enable hot reloading of daemon and once-till-unmount sagas
+      if (hasSaga && oldDescriptor.saga !== saga) {
+        oldDescriptor.task.cancel();
+        hasSaga = false;
+      }
+    }
+
+    if (
+      !hasSaga ||
+      (hasSaga && mode !== DAEMON && mode !== ONCE_TILL_UNMOUNT)
+    ) {
+      /* eslint-disable no-param-reassign */
+      store.injectedSagas[key] = {
+        ...newDescriptor,
+        task: store.runSaga(saga, args),
+      };
+      /* eslint-enable no-param-reassign */
+    }
+  };
+}
+
+export function ejectSagaFactory(store, isValid) {
+  return function ejectSaga(key) {
+    if (!isValid) checkStore(store);
+
+    checkKey(key);
+
+    if (Reflect.has(store.injectedSagas, key)) {
+      const descriptor = store.injectedSagas[key];
+      const { mode, task } = descriptor;
+      if (mode && mode !== DAEMON && task) {
+        task.cancel();
+        // Clean up in production; in development we need `descriptor.saga` for hot reloading
+        if (process.env.NODE_ENV === 'production') {
+          // Need some value to be able to detect `ONCE_TILL_UNMOUNT` sagas in `injectSaga`
+          store.injectedSagas[key] = 'done'; // eslint-disable-line no-param-reassign
+        }
+      }
+    }
+  };
+}
+
+export default function getInjectors(store) {
+  checkStore(store);
+
+  return {
+    injectSaga: injectSagaFactory(store, true),
+    ejectSaga: ejectSagaFactory(store, true),
+  };
+}