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

package/components/pages/Cap/Cap.js

@@ -1,22 +1,17 @@
-import React, { useEffect, useState, useMemo } from 'react';
+import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { injectIntl, intlShape } from 'react-intl';
 import { connect } from 'react-redux';
 import { createStructuredSelector } from 'reselect';
 import { compose, bindActionCreators } from 'redux';
 import injectSaga from 'utils/injectSaga';
+import withStyles from 'utils/withStyles';
 import { withRouter } from 'react-router';
 import { matchPath } from 'react-router-dom';
+import CapSpin from '@capillarytech/cap-ui-library/CapSpin';
 import CapSomethingWentWrong from '@capillarytech/cap-ui-library/CapSomethingWentWrong';
 import multipleOrgSwitch from '@capillarytech/cap-ui-utils/utils/multipleOrgSwitch';
-import CapSupportVideosWrapper from '@capillarytech/cap-ui-library/CapSupportVideosWrapper';
-import { replaceDynamicAndCompare } from '@capillarytech/cap-ui-library/CapSupportVideosWrapper/utils';
-import {
-  FORCE_REFRESH_NOTIFIER,
-  FORCE_REFRESH_SECONDS,
-} from '@capillarytech/cap-ui-utils';
-import { makeSelectLanguage } from '@capillarytech/cap-ui-library/CapLanguageProvider/selector';
-import Toaster from '../../atoms/Toaster/index';
+
 import sagas from './saga';
 import * as actions from './actions';
 import * as style from './style';
@@ -25,42 +20,18 @@ import OrgChange from '../../organisms/OrgChange';
 import componentRoutes from './routes';
 import * as path from '../../../config/path';
 import * as constants from './constants';
-import {
-  REQUEST,
-  SUCCESS,
-  FAILURE,
-  IDLE,
-  EMAIL,
-  SMS,
-  // LOYALTY_PROMOTION_ENABLED,
-} from '../App/constants';
+import { REQUEST, SUCCESS, FAILURE, EMAIL, SMS } from '../App/constants';
 import * as selectors from './selectors';
 import config from '../../../config/app';
 import messages from './messages';
-import { RBAC_CONFIGURATION_PARAMETERS } from '../../../utils/authWrapper';
-import PermissionDeniedPage from '../PermissionDeniedPage';
-import { RBACConfigProvider } from './context';
-import {
-  isPromotionCreateUrl,
-  isProgramConfigureUrl,
-  isPromotionEditUrl,
-} from '../../../utils/validationHelper';
-import CenteredSkeleton from '../../atoms/CenteredSkeleton';
 
 const { publicPath } = path;
+const { spinnerStyle } = style;
 const {
   makeSelectOrg,
   makeSelectCap,
   makeSelectSidebarMenuData,
   makeSelectTopbarMenuData,
-  makeSelectBulkConfigStatus,
-  makeSelectMessage,
-  makeSelectDemoVideoAndLink,
-  makeSelectEMFStatus,
-  makeSelectUserGroupV2Status,
-  makeSelectCustomLabels,
-  makeSelectAlternateCurrencyFlagStatus,
-  makeSelectCDNConfigStatus,
 } = selectors;
 const {
   HELP_URL,
@@ -74,6 +45,7 @@ const {
 
 const { isMultipleTabsOpen } = multipleOrgSwitch;
 
+const StyledCapSpin = withStyles(CapSpin, spinnerStyle);
 const gtm = window.dataLayer || [];
 
 export const Cap = ({
@@ -85,55 +57,25 @@ export const Cap = ({
   userData,
   orgData,
   intl: { formatMessage },
-  bulkConfigStatusData: { bulkConfigStatus,getBulkConfigStatus } = {},
-  demoVideoAndLinkJSONData: {
-    demoVideoAndLinkJSON = {},
-    demoVideoAndLinkJSONStatus,
-  } = {},
-  cdnConfigData: { getCDNConfigStatus } = {},
-  ACConfigData: {getAlternateCurrencyStatus} = {},
-  emfData: { getEMFStatus },
-  messagesData = [],
-  localeDetails,
 }) => {
   const { pathname } = location;
-  const { orgID, fetchingUserdata, fetchUserStatusCode } = orgData;
+  const { orgID, fetchingUserdata } = orgData;
   const { user, currentOrgDetails } = userData;
-  const { refID, lang: userLocale = '' } = user;
+  const { refID } = user;
   const matchedPath = matchPath(pathname, {
     path: `${match.path}${MODULE_NAME_URL}`,
   });
 
-  const bulkConfigStatusObj = useMemo(() => bulkConfigStatus.toJS(), [
-    bulkConfigStatus,
-  ]);
-
   // need to handle for modules
   // const { params: { moduleName } = {} } = matchedPath || {};
   const onSettingsPage = matchedPath ? true : false;
 
   const [selectedOrgId, setSelectedOrgId] = useState(null);
-  const [isForceRefreshed, setIsForceRefreshed] = useState(false);
-  const [accessForbidden, setAccesForbidden] = useState(null);
-  const [rbacPermissions, setRBACPermissions] = useState(null);
 
-  useEffect(
-    () => {
-      if (fetchingUserdata === SUCCESS) {
-        if (demoVideoAndLinkJSONStatus !== REQUEST && demoVideoAndLinkJSONStatus !== SUCCESS) actions.getSupportVideosConfig();
-        if (getEMFStatus !== REQUEST && getEMFStatus !== SUCCESS) actions.getEMFStatus();
-        if (getBulkConfigStatus !== REQUEST && getBulkConfigStatus !== SUCCESS) actions.getBulkConfigStatus();
-        if (getCDNConfigStatus !== REQUEST && getCDNConfigStatus !== SUCCESS) actions.getCdnTransformationConfig();
-        if (getAlternateCurrencyStatus !== REQUEST && getAlternateCurrencyStatus !== SUCCESS) actions.getAlternateCurrencyFlag();
-        
-      }
-      window.addEventListener('message', handleForceRefreshMessage);
-      return () => {
-        window.removeEventListener('message', handleForceRefreshMessage);
-      };
-    },
-    [fetchingUserdata],
-  );
+  useEffect(() => {
+    actions.getEMFStatus();
+    actions.getUserGroupV2Status();
+  }, []);
 
   useEffect(
     () => {
@@ -176,57 +118,7 @@ export const Cap = ({
 
   useEffect(
     () => {
-      if (fetchingUserdata === SUCCESS) {
-        const { accessibleFeatures = [] } = currentOrgDetails || {};
-        const {
-          user: { accessiblePermissions = [] },
-        } = userData;
-        setRBACPermissions({ accessiblePermissions, accessibleFeatures });
-        const newUIVerificationEnabled = accessibleFeatures.includes(
-          RBAC_CONFIGURATION_PARAMETERS.ENABLE_LOYALTY_NEW_UI_ACCESS_VERIFICATION,
-        );
-        if (!newUIVerificationEnabled) {
-          setAccesForbidden(false);
-          return;
-        }
-        if (!accessiblePermissions.includes(RBAC_CONFIGURATION_PARAMETERS.OM)) {
-          setAccesForbidden(true);
-        } else {
-          setAccesForbidden(false);
-        }
-
-        /** Checking if user have UPDATE permissions for programs */
-        const isProgramEditable =
-          !accessiblePermissions.includes(
-            RBAC_CONFIGURATION_PARAMETERS.LOYALTY_UPDATE_PROGRAM,
-          ) && isProgramConfigureUrl(pathname);
-
-        /** Checking if user have UPDATE permissions for promotions */
-        const isPromotionsEditable =
-          !accessiblePermissions.includes(
-            RBAC_CONFIGURATION_PARAMETERS.LOYALTY_UPDATE_PROMOTION,
-          ) &&
-          (isPromotionCreateUrl(pathname) || isPromotionEditUrl(pathname));
-
-        if (isProgramEditable || isPromotionsEditable) {
-          setAccesForbidden(true);
-          return;
-        }
-      }
-    },
-    [fetchingUserdata],
-  );
-
-  useEffect(
-    () => {
-      const { accessibleFeatures = [] } = currentOrgDetails || {};
-      /* Commented code to serve as a reference for implementing feature control for promotions in the future. */
-      // const hasNewUIPromotionEnabled = accessibleFeatures.includes(
-      //   LOYALTY_PROMOTION_ENABLED,
-      // );
-      const hasNewUIPromotionEnabled = true;
-      const hasBulkConfigEnabled = bulkConfigStatusObj?.value === '1';
-      actions.getTopbarMenuData(hasNewUIPromotionEnabled, hasBulkConfigEnabled);
+      actions.getTopbarMenuData();
       if (!fetchingUserdata) {
         actions.getUserData(() => {
           actions.getPrograms();
@@ -235,40 +127,19 @@ export const Cap = ({
           actions.getProgramFilterType(filterType => {
             actions.getMappedEntities(filterType);
           });
+          actions.getSenderDetails({
+            channels: [SMS, EMAIL],
+          });
+          actions.getAllSenderDetails();
         });
       }
       return () => {
         actions.clearTopbarMenuData();
       };
     },
-    [
-      actions,
-      JSON.stringify(currentOrgDetails),
-      JSON.stringify(bulkConfigStatusObj),
-    ],
+    [actions],
   );
 
-  const startReloadTimer = () => {
-    let counter = FORCE_REFRESH_SECONDS;
-    const interval = setInterval(() => {
-      actions.removeMessageFromQueue(0);
-      actions.addMessageToQueue({
-        type: 'warning',
-        id: `${Date.now()}`,
-        text: formatMessage(messages.forceRefreshMessage, { counter: counter }),
-      });
-      counter -= 1;
-    }, 900);
-    setTimeout(() => clearInterval(interval), counter * 1000);
-  };
-
-  const handleForceRefreshMessage = event => {
-    if (event.data === FORCE_REFRESH_NOTIFIER) {
-      setIsForceRefreshed(true);
-      startReloadTimer();
-    }
-  };
-
   const changeOrg = orgId => {
     if (isMultipleTabsOpen()) {
       setSelectedOrgId(orgId);
@@ -304,96 +175,45 @@ export const Cap = ({
     window.location.reload();
   };
 
-  const isLoadingLocale = localeDetails?.localeLoading === REQUEST;
-
-  const renderNavigationComponent = component => {
-    let wrapperComponent = <>{component}</>;
-    const {
-      basicDetails: { base_language: orgLocale = '' } = {},
-      accessibleFeatures = [],
-    } = currentOrgDetails || {};
-    if (
-      accessibleFeatures.includes(
-        RBAC_CONFIGURATION_PARAMETERS.ENABLE_PRODUCT_SUPPORT_VIDEOS,
-      ) &&
-      demoVideoAndLinkJSON?.is_active &&
-      demoVideoAndLinkJSONStatus !== REQUEST
-    ) {
-      const demoLocale = userLocale || orgLocale || 'default';
-      const JSONInContext = demoVideoAndLinkJSON?.json_config;
-      const currentPathJSON = JSONInContext?.find(routeEle =>
-        replaceDynamicAndCompare(location.pathname, routeEle.route),
-      );
-      const targetElements = currentPathJSON?.target_elements || {};
-      wrapperComponent = (
-        <CapSupportVideosWrapper
-          targetElements={targetElements}
-          locale={demoLocale}
-        >
-          {component}
-        </CapSupportVideosWrapper>
-      );
-    }
-    return wrapperComponent;
-  };
   return (
-    <RBACConfigProvider value={{ rbacPermissions }}>
-      {fetchingUserdata === REQUEST ||
-      // getBulkConfigStatus === REQUEST || // Has impact only in topbar menu data
-      isLoadingLocale ? (
-        <CenteredSkeleton width="90vw" height="90vh" borderRadius="5px" />
-      ) : (
-        renderNavigationComponent(
-          <div data-testid="cap-wrapper">
-            {fetchingUserdata === SUCCESS &&
-              accessForbidden === false &&
-              !isLoadingLocale && (
-                <NavigationBar
-                  userData={userData}
-                  componentRoutes={componentRoutes}
-                  topbarMenuData={topbarMenuData}
-                  showSecondaryTopBar={onSettingsPage}
-                  sidebarMenuItemsPosition={SIDEBAR_MENU_ITEM_POSITION}
-                  settingsUrl={`${publicPath}${LOYALTY_SETTINGS_URL}`}
-                  notificationUrl={`${publicPath}${LOYALTY_NOTIFICATION_URL}`}
-                  orgSettingsUrl={ORG_SETTINGS_URL}
-                  helpUrl={HELP_URL}
-                  changeOrg={changeOrg}
-                  history={history}
-                  sidebarMenuData={sidebarMenuData}
-                  logout={logout}
-                  pathname={pathname}
-                  secondaryTopBarActionHandler={onSecNavActionsClick}
-                />
-              )}
-            {accessForbidden && <PermissionDeniedPage />}
-            {fetchingUserdata === FAILURE && (
-              <CapSomethingWentWrong
-                title={formatMessage(messages.somethingWentWrongTitle)}
-                description={formatMessage(messages.somethingWentWrongDesc)}
-                reloadText={formatMessage(messages.tryRefreshing)}
-                onClickReload={onClickReload}
-              />
-            )}
-            <OrgChange
-              userData={userData}
-              selectedOrgId={selectedOrgId}
-              changeOrgAction={changeOrgAction}
-              navigateToDashboard={navigateToDashboard}
-            />
-            {messagesData && messagesData.length > 0 ? (
-              <Toaster
-                timeout={4000}
-                messagesList={messagesData}
-                position="top-right"
-              />
-            ) : (
-              ''
-            )}
-          </div>,
-        )
+    <StyledCapSpin
+      className="cap-container spinner"
+      spinning={fetchingUserdata === REQUEST}
+    >
+      {fetchingUserdata === SUCCESS && (
+        <NavigationBar
+          userData={userData}
+          componentRoutes={componentRoutes}
+          topbarMenuData={topbarMenuData}
+          showSecondaryTopBar={onSettingsPage}
+          sidebarMenuItemsPosition={SIDEBAR_MENU_ITEM_POSITION}
+          settingsUrl={`${publicPath}${LOYALTY_SETTINGS_URL}`}
+          notificationUrl={`${publicPath}${LOYALTY_NOTIFICATION_URL}`}
+          orgSettingsUrl={ORG_SETTINGS_URL}
+          helpUrl={HELP_URL}
+          changeOrg={changeOrg}
+          history={history}
+          sidebarMenuData={sidebarMenuData}
+          logout={logout}
+          pathname={pathname}
+          secondaryTopBarActionHandler={onSecNavActionsClick}
+        />
+      )}
+      {fetchingUserdata === FAILURE && (
+        <CapSomethingWentWrong
+          title={formatMessage(messages.somethingWentWrongTitle)}
+          description={formatMessage(messages.somethingWentWrongDesc)}
+          reloadText={formatMessage(messages.tryRefreshing)}
+          onClickReload={onClickReload}
+        />
       )}
-    </RBACConfigProvider>
+      <OrgChange
+        userData={userData}
+        selectedOrgId={selectedOrgId}
+        changeOrgAction={changeOrgAction}
+        navigateToDashboard={navigateToDashboard}
+      />
+    </StyledCapSpin>
   );
 };
 
@@ -402,12 +222,10 @@ Cap.propTypes = {
   history: PropTypes.object,
   orgData: PropTypes.object,
   userData: PropTypes.object,
-  bulkConfigStatusData: PropTypes.object,
   topbarMenuData: PropTypes.array,
   sidebarMenuData: PropTypes.array,
   actions: PropTypes.object.isRequired,
   intl: intlShape.isRequired,
-  demoVideoAndLinkJSONData: PropTypes.object,
 };
 
 Cap.defaultProps = {};
@@ -417,13 +235,6 @@ const mapStateToProps = createStructuredSelector({
   userData: makeSelectCap(),
   sidebarMenuData: makeSelectSidebarMenuData(),
   topbarMenuData: makeSelectTopbarMenuData(),
-  bulkConfigStatusData: makeSelectBulkConfigStatus(),
-  messagesData: makeSelectMessage(),
-  localeDetails: makeSelectLanguage(),
-  demoVideoAndLinkJSONData: makeSelectDemoVideoAndLink(),
-  emfData: makeSelectEMFStatus(),
-  cdnConfigData: makeSelectCDNConfigStatus(),
-  ACConfigData: makeSelectAlternateCurrencyFlagStatus(),
 });
 
 const mapDispatchToProps = dispatch => ({

package/components/pages/Cap/Loadable.js

@@ -1,14 +1,10 @@
-import React, { Suspense } from 'react';
-import { loadable } from '@capillarytech/cap-ui-utils';
-import CenteredSkeleton from '../../atoms/CenteredSkeleton';
-const LoadableComponent = loadable(() => import('./Cap'));
+import React, { lazy, Suspense } from 'react';
+import CapSpin from '@capillarytech/cap-ui-library/CapSpin';
+
+const LoadableComponent = lazy(() => import('./Cap'));
 
 export default () => (
-  <Suspense
-    fallback={
-      <CenteredSkeleton width="90vw" height="90vh" borderRadius="5px" />
-    }
-  >
+  <Suspense fallback={<CapSpin />}>
     <LoadableComponent />
   </Suspense>
 );

package/components/pages/Cap/actions.js

@@ -37,13 +37,8 @@ export const clearSidebarMenuData = () => ({
   type: types.CLEAR_SIDEBAR_MENU_DATA,
 });
 
-export const getTopbarMenuData = (
-  hasNewUIPromotionEnabled,
-  hasBulkConfigEnabled,
-) => ({
+export const getTopbarMenuData = () => ({
   type: types.GET_TOPBAR_MENU_DATA_REQUEST,
-  hasNewUIPromotionEnabled,
-  hasBulkConfigEnabled,
 });
 
 export const getTopbarMenuDataSuccess = data => ({
@@ -156,16 +151,6 @@ export const getUserGroupV2Status = callback => ({
   callback,
 });
 
-export const getBulkConfigStatus = callback => ({
-  type: types.GET_BULK_CONFIG_STATUS_REQUEST,
-  callback,
-});
-
-export const getGroupRedemptionStatus = callback => ({
-  type: types.GET_GROUP_REDEMPTION_STATUS_REQUEST,
-  callback,
-});
-
 export const setTierSecondaryCriteria = (data = {}) => ({
   type: types.SET_TIER_SECONDARY_CRITERIA,
   result: data,
@@ -185,116 +170,3 @@ export const syncStrategyData = (result, callback) => ({
 export const getAllSenderDetails = () => ({
   type: types.GET_ALL_SENDER_DETAILS_REQUEST,
 });
-
-export const getCustomerActivity = (programId, source) => ({
-  type: types.GET_CUSTOMER_ACTIVITY_REQUEST,
-  programId,
-  source,
-});
-
-export const getUsersByIds = userIds => ({
-  type: types.GET_USER_LIST_REQUEST,
-  userIds,
-});
-
-export function getTier(programId) {
-  return {
-    type: types.GET_TIER_REQUEST,
-    programId,
-  };
-}
-
-export const getCustomLabels = () => ({
-  type: types.GET_CUSTOM_LABELS_REQUEST,
-});
-
-export const upsertCustomLabel = (payload, isUpdate, callback) => ({
-  type: types.UPSERT_CUSTOM_LABELS_REQUEST,
-  payload,
-  isUpdate,
-  callback,
-});
-
-export const getTimeZone = () => ({
-  type: types.GET_TIME_ZONE_REQUEST,
-});
-
-export function addMessageToQueue(message) {
-  return {
-    type: types.ADD_TOASTER,
-    message,
-  };
-}
-
-export function removeMessageFromQueue(messageIndex) {
-  return {
-    type: types.REMOVE_TOASTER,
-    messageIndex,
-  };
-}
-
-export const getSupportedLocales = () => ({
-  type: types.GET_SUPPORTED_LOCALES_REQUEST,
-});
-
-export function getSupportVideosConfig() {
-  return {
-    type: types.GET_SUPPORT_VIDEOS_CONFIG_REQUEST,
-  };
-}
-
-export const getAlternateCurrencyFlag = callback => ({
-  type: types.ALTERNATE_CURRENCY_FLAG_REQUEST,
-  callback,
-});
-
-export const getSegregatePromotionsFlag = () => ({
-  type: types.SEGREGATE_PROMOTIONS_FLAG_REQUEST,
-});
-
-export const getProgramConfig = (orgId, programIds, queryParams) => ({
-  type: types.GET_PROGRAM_CONFIG_REQUEST,
-  orgId,
-  programIds,
-  queryParams,
-});
-
-export const saveProgramConfig = (
-  orgId,
-  programId,
-  userId,
-  payload,
-  callback,
-) => ({
-  type: types.SAVE_PROGRAM_CONFIG_REQUEST,
-  orgId,
-  programId,
-  userId,
-  payload,
-  callback,
-});
-
-export function getCdnTransformationConfig() {
-  return {
-    type: types.GET_CDN_TRANSFORMATION_CONFIG_REQUEST,
-  };
-}
-
-export const getMultipleExtendedFields = (
-  extendedFields,
-  programId,
-  allowedFieldTypes,
-  callback,
-) => ({
-  type: types.GET_MULTIPLE_EXTENDED_FIELDS_REQUEST,
-  extendedFields,
-  programId,
-  allowedFieldTypes,
-  callback,
-});
-
-export function getAdditionalSlabUpgradeAndRenewal() {
-  return {
-    type: types.GET_ADDITIONAL_SLAB_UPGRADE_RENEWAL_REQUEST,
-  };
-}