@capillarytech/creatives-library 1.0.2 → 2.0.1

package/components/pages/Cap/selectors.js

@@ -1,196 +0,0 @@
-import { createSelector } from 'reselect';
-import isEmpty from 'lodash/isEmpty';
-import { fromJS } from 'immutable';
-import * as appConstants from '../App/constants';
-import * as constants from './constants';
-
-const { STANDARD } = constants;
-const { SUCCESS } = appConstants;
-/**
- * Direct selector to the cap state domain
- */
-
-const selectCapDomain = (state = fromJS({})) => state.get('loyaltyCap');
-
-/**
- * Other specific selectors
- */
-
-/**
- * Default selector used by Cap
- */
-
-const makeSelectGlobal = () =>
-  createSelector(selectCapDomain, (substate = fromJS({})) => substate.toJS());
-
-const makeSelectOrg = () =>
-  createSelector(selectCapDomain, (substate = fromJS({})) => ({
-    fetchingUserdata: substate.get('fetchingUserdata'),
-    orgID: substate.get('orgID'),
-  }));
-
-const makeSelectCap = () =>
-  createSelector(selectCapDomain, (substate = fromJS({})) => {
-    const user = substate.get('user')?.toJS();
-    return {
-      user: !isEmpty(user) && user,
-      currentOrgDetails: substate.get('currentOrgDetails')?.toJS(),
-    };
-  });
-
-const makeSelectUser = () =>
-  createSelector(selectCapDomain, (substate = fromJS({})) =>
-    substate.get('user')?.toJS(),
-  );
-
-const makeSelectSidebarMenuData = () =>
-  createSelector(selectCapDomain, (substate = fromJS({})) => {
-    const sidebarMenuData = substate.get('sidebarMenuData')?.toJS();
-    let parsedMenuData = [];
-    if (sidebarMenuData?.status === SUCCESS && sidebarMenuData?.data) {
-      parsedMenuData = sidebarMenuData.data;
-    }
-    return parsedMenuData;
-  });
-
-const makeSelectTopbarMenuData = () =>
-  createSelector(selectCapDomain, (substate = fromJS({})) => {
-    const topbarMenuData = substate.get('topbarMenuData')?.toJS();
-    let parsedMenuData = [];
-    if (topbarMenuData?.status === SUCCESS && topbarMenuData?.data) {
-      parsedMenuData = topbarMenuData.data;
-    }
-    return parsedMenuData;
-  });
-
-const makeSelectLastSyncData = () =>
-  createSelector(selectCapDomain, (substate = fromJS({})) => ({
-    getLastSyncTimeStatus: substate.get('getLastSyncTimeStatus'),
-    lastSyncTime: substate.get('lastSyncTime'),
-    lastSyncTimeError: substate.get('lastSyncTimeError'),
-  }));
-
-const makeSelectUpsertId = () =>
-  createSelector(selectCapDomain, (substate = fromJS({})) => {
-    const orgKpiConfig = substate.get('orgKpiConfig')?.toJS();
-    const tagName = orgKpiConfig?.[0]?.scope?.tag;
-    return (tagName && tagName !== STANDARD && orgKpiConfig[0]?._id) || '';
-  });
-
-const makeSelectOrgKpiConfig = () =>
-  createSelector(selectCapDomain, (substate = fromJS({})) => ({
-    orgKpiConfig: substate.get('orgKpiConfig')?.toJS(),
-    getOrgKpiConfigStatus: substate.get('getOrgKpiConfigStatus'),
-    kpis: substate.get('orgKpiConfig')?.toJS()?.[0]?.kpis,
-    kpiData: substate.get('orgKpiConfig')?.toJS()?.[0],
-    orgKpiConfigError: substate.get('orgKpiConfigError'),
-  }));
-
-const makeSelectProgramFilterType = () =>
-  createSelector(selectCapDomain, (substate = fromJS({})) => ({
-    getProgramFilterTypeStatus: substate.get('getProgramFilterTypeStatus'),
-    programFilterType: substate.get('programFilterType')?.toJS(),
-    programFilterTypeError: substate.get('programFilterTypeError'),
-  }));
-
-const makeSelectFieldData = () =>
-  createSelector(selectCapDomain, (substate = fromJS({})) => ({
-    getFieldDataStatus: substate.get('getFieldDataStatus'),
-    allContributors: substate.get('allContributors')?.toJS(),
-    entities: substate.get('entities')?.toJS(),
-    getFieldDataError: substate.get('getFieldDataError'),
-  }));
-
-const makeSelectMappedEntities = () =>
-  createSelector(selectCapDomain, (substate = fromJS({})) => ({
-    getMappedEntitiesStatus: substate.get('getMappedEntitiesStatus'),
-    mappedEntities: substate.get('mappedEntities')?.toJS(),
-    pocUsers: substate.get('pocUsers')?.toJS(),
-    mappedEntitiesError: substate.get('mappedEntitiesError'),
-  }));
-
-const makeSelectCheckReconfigureProgram = () =>
-  createSelector(selectCapDomain, (substate = fromJS({})) => ({
-    checkReconfigureProgramStatus: substate.get('checkReconfigureStatus'),
-    checkReconfigureProgramDetails: substate.get('checkReconfigureDetails'),
-    checkReconfigureProgramError: substate.get('checkReconfigureError'),
-  }));
-
-const makeSelectSenderDetails = () =>
-  createSelector(selectCapDomain, (substate = fromJS({})) => ({
-    senderDetailsStatus: substate.get('senderDetailsStatus'),
-    senderDetails: substate.get('senderDetails')?.toJS(),
-    senderDetailsError: substate.get('senderDetailsError'),
-  }));
-
-const makeSelectPointStrategyDetails = () =>
-  createSelector(selectCapDomain, (substate = fromJS({})) => ({
-    getPointStrategyStatus: substate.get('getPointStrategyStatus'),
-    pointStrategy: substate.get('pointStrategy')?.toJS(),
-    pointTypeIdData: substate.get('pointTypeIdData')?.toJS(),
-    getPointStrategyError: substate.get('getPointStrategyError'),
-  }));
-
-const makeSelectUpsertAction = () =>
-  createSelector(selectCapDomain, (substate = fromJS({})) => ({
-    upsertActionStatus: substate.get('upsertActionStatus'),
-    upsertActionError: substate.get('upsertActionError'),
-  }));
-
-const makeSelectEMFStatus = () =>
-  createSelector(selectCapDomain, (substate = fromJS({})) => ({
-    getEMFStatus: substate.get('getEMFStatus'),
-    EMFStatus: substate.get('EMFStatus')?.toJS(),
-    EMFStatusError: substate.get('EMFStatusError'),
-  }));
-
-const makeSelectUserGroupV2Status = () =>
-  createSelector(selectCapDomain, (substate = fromJS({})) => ({
-    getUserGroupV2Status: substate.get('getUserGroupV2Status'),
-    userGroupV2Status: substate.get('userGroupV2Status')?.toJS(),
-    getUserGroupV2Error: substate.get('getUserGroupV2Error'),
-  }));
-
-const makeSelectTierSecondaryCriteria = () =>
-  createSelector(selectCapDomain, (substate = fromJS({})) => ({
-    tierSecondaryCriteria: substate.get('tierSecondaryCriteria')?.toJS(),
-  }));
-
-const makeSelectPrograms = () =>
-  createSelector(selectCapDomain, (substate = fromJS({})) => ({
-    getProgramsStatus: substate.get('getProgramsStatus'),
-    programDetails: substate.get('programDetails')?.toJS(),
-    programDetailsError: substate.get('programDetailsError'),
-  }));
-
-const makeSelectAllSenderDetails = () =>
-  createSelector(selectCapDomain, (substate = fromJS({})) => ({
-    getAllSenderDetailsStatus: substate.get('getAllSenderDetailsStatus'),
-    smsSenderDetails: substate.get('smsSenderDetails')?.toJS(),
-    emailSenderDetails: substate.get('emailSenderDetails')?.toJS(),
-    getAllSenderDetailsError: substate.get('getAllSenderDetailsError'),
-  }));
-export {
-  selectCapDomain,
-  makeSelectOrg,
-  makeSelectCap,
-  makeSelectUser,
-  makeSelectSidebarMenuData,
-  makeSelectTopbarMenuData,
-  makeSelectLastSyncData,
-  makeSelectUpsertId,
-  makeSelectOrgKpiConfig,
-  makeSelectProgramFilterType,
-  makeSelectGlobal,
-  makeSelectFieldData,
-  makeSelectMappedEntities,
-  makeSelectCheckReconfigureProgram,
-  makeSelectSenderDetails,
-  makeSelectPointStrategyDetails,
-  makeSelectUpsertAction,
-  makeSelectEMFStatus,
-  makeSelectTierSecondaryCriteria,
-  makeSelectPrograms,
-  makeSelectAllSenderDetails,
-  makeSelectUserGroupV2Status,
-};

package/components/pages/Cap/style.js

@@ -1,71 +0,0 @@
-import styled, { css } from 'styled-components';
-import StyledVars from '@capillarytech/cap-ui-library/styled';
-import CapColumn from '@capillarytech/cap-ui-library/CapColumn';
-import CapRow from '@capillarytech/cap-ui-library/CapRow';
-import CapLabel from '@capillarytech/cap-ui-library/CapLabel';
-
-const { CAP_SPACE_16, CAP_SPACE_24, CAP_SPACE_32, CAP_RED } = StyledVars;
-
-export const CreativesDelayErrorLabel = styled(CapLabel)`
-  margin-top: ${CAP_SPACE_16};
-  color: ${CAP_RED};
-`;
-
-export const ColumnWithPadding = styled(CapColumn)`
-  padding-left: ${CAP_SPACE_32};
-`;
-
-export const CapRowWithSpacing = styled(CapRow)`
-  > * {
-    margin-bottom: ${props => (props.margin ? props.margin : CAP_SPACE_24)};
-  }
-`;
-
-export const FlexColumnApart = styled.div`
-  height: 100%;
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  align-items: flex-start;
-`;
-
-export const RowWithPadding = styled(CapColumn)`
-  padding-top: ${CAP_SPACE_16};
-`;
-
-export const spinnerStyle = css`
-  &.ant-spin.ant-spin-spinning.cap-container.spinner {
-    height: 100vh;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-`;
-
-export const FlexRowApart = styled.div`
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-`;
-
-export const FlexApart = styled.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  width: 100%;
-`;
-
-export const FlexSpace = styled.div`
-  display: flex;
-  justify-content: space-around;
-  align-items: center;
-  background-color: white;
-  width: 100%;
-`;
-
-export const Flex = styled.div`
-  display: flex;
-  align-items: ${props => (props.align ? 'flex-start' : 'center')};
-`;
-export const GRAY = '#dcdddf';

package/components/pages/ConfigureProgram/ConfigureProgram.js

@@ -1,66 +0,0 @@
-import React, { useEffect } from 'react';
-import PropTypes from 'prop-types';
-import { injectIntl, intlShape } from 'react-intl';
-import CapRow from '@capillarytech/cap-ui-library/CapRow';
-import { Auth } from '@capillarytech/cap-ui-utils';
-import injectSaga from 'utils/injectSaga';
-import { createStructuredSelector } from 'reselect';
-import { compose } from 'redux';
-import { connect } from 'react-redux';
-import withErrorBoundary from 'utils/withErrorBoundary';
-import creativesSagas from '../../organisms/Creatives/saga';
-import ConfigureProgramSteps from '../../organisms/ConfigureProgramSteps';
-import { makeSelectCap } from '../Cap/selectors';
-
-export const ConfigureProgram = ({
-  className,
-  userData,
-  currentProgram = {},
-  pointStrategy = {},
-  refreshStrategyData = () => {},
-  pointTypeIdData = {},
-}) => {
-  const { currentOrgDetails: { accessibleFeatures = [] } = {} } = userData;
-  useEffect(
-    () => {
-      Auth.initialize({
-        permissions: userData?.user?.accessiblePermissions,
-        accessibleFeatures,
-      });
-    },
-    [userData],
-  );
-
-  return (
-    <CapRow className={className}>
-      <ConfigureProgramSteps
-        currentProgram={currentProgram}
-        refreshStrategyData={refreshStrategyData}
-        pointStrategy={pointStrategy}
-        pointTypeIdData={pointTypeIdData}
-      />
-    </CapRow>
-  );
-};
-
-ConfigureProgram.propTypes = {
-  intl: intlShape.isRequired,
-  className: PropTypes.string,
-  userData: PropTypes.object,
-  currentProgram: PropTypes.object,
-  pointStrategy: PropTypes.object,
-  refreshStrategyData: PropTypes.func,
-  pointTypeIdData: PropTypes.object,
-};
-
-const mapStateToProps = createStructuredSelector({
-  userData: makeSelectCap(),
-});
-
-const withConnect = connect(mapStateToProps);
-const withSaga = creativesSagas.map(saga => injectSaga(saga));
-
-export default withErrorBoundary(
-  compose.apply(null, [...withSaga, withConnect])(injectIntl(ConfigureProgram)),
-  { showImage: true, useStyle: true },
-);

package/components/pages/ConfigureProgram/data.js

@@ -1,17 +0,0 @@
-export const labels = [
-  {
-    labelMessageKey: 'description',
-    value: 'Points Program for North',
-    key: 'key1',
-  },
-  {
-    labelMessageKey: 'contributors',
-    value: 'Ruchita R , Vivek Vilasini',
-    key: 'key2',
-  },
-  {
-    labelMessageKey: 'zones',
-    value: 'North, South, East',
-    key: 'key3',
-  },
-];

package/components/pages/ConfigureProgram/index.js

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

package/components/pages/ConfigureProgram/messages.js

@@ -1,33 +0,0 @@
-/*
- * ConfigureProgram Messages
- *
- * This contains all the text for the ConfigureProgram component.
- */
-
-import { defineMessages } from 'react-intl';
-
-export const scope = 'loyaltyPlus.components.pages.ConfigureProgram';
-
-export default defineMessages({
-  bulkFirst: {
-    id: `${scope}.bulkFirst`,
-    defaultMessage: 'Bukl first',
-  },
-  contributors: {
-    id: `${scope}.contributors`,
-    defaultMessage: 'Contributors',
-  },
-  zones: {
-    id: `${scope}.zones`,
-    defaultMessage: 'Zones',
-  },
-  unsavedChanges: {
-    id: `${scope}.unsavedChanges`,
-    defaultMessage: 'Unsaved Changes',
-  },
-  unsavedChangesDesc: {
-    id: `${scope}.unsavedChangesDesc`,
-    defaultMessage:
-      'There are unsaved changes pending to be published. Please publish the changes before proceeding.',
-  },
-});

package/components/pages/Dashboard/Dashboard.js

@@ -1,171 +0,0 @@
-import React, { useLayoutEffect, useMemo, useState } from 'react';
-import PropTypes from 'prop-types';
-import sample from 'lodash/sample';
-import withStyles from 'utils/withStyles';
-import { withRouter } from 'react-router-dom';
-import { compose, bindActionCreators } from 'redux';
-import { createStructuredSelector } from 'reselect';
-import { connect } from 'react-redux';
-import { isTrue } from 'utils/commonUtils';
-import CapSpin from '@capillarytech/cap-ui-library/CapSpin';
-import withErrorBoundary from 'utils/withErrorBoundary';
-
-import LoyaltyDetail from '../../organisms/LoyaltyDetail';
-import PerformanceStats from '../../organisms/PerformanceStats';
-import Nudges from '../../organisms/Nudges';
-import PageTemplate from '../../templates/PageTemplate';
-import CreateProgramIllustration from '../../organisms/CreateProgramIllustration';
-import { publicPath } from '../../../config/path';
-import { makeSelectPrograms, makeSelectEMFStatus } from '../Cap/selectors';
-import * as globalConstants from '../Cap/constants';
-import * as appConstants from '../App/constants';
-import * as constants from './constants';
-import styles from './style';
-import * as globalActions from '../Cap/actions';
-import ErrorBoundaryWrapper from '../../molecules/ErrorBoundaryWrapper';
-
-const { PROGRAM_PERFIX_PATH } = globalConstants;
-
-const {
-  REQUEST,
-  UPDATE,
-  SUCCESS,
-  MODE_VIEW,
-  FAILURE,
-  DASHBOARD_LEVEL,
-} = appConstants;
-const { AVATAR_ICON_COLORS } = constants;
-
-export const Dashboard = ({
-  globalActions,
-  history,
-  className,
-  programData: { getProgramsStatus, programDetails = [] } = {},
-  EMFData: { getEMFStatus, EMFStatus: { value: isEMFActive } = {} } = {},
-}) => {
-  const [defaultProgramId, setDefaultProgramId] = useState();
-  useLayoutEffect(
-    () => {
-      const defaultProgram = programDetails.find(({ isDefault }) =>
-        isTrue(isDefault),
-      );
-      setDefaultProgramId(defaultProgram?.id);
-      if (
-        getEMFStatus === SUCCESS &&
-        !isTrue(isEMFActive) &&
-        programDetails.length
-      ) {
-        if (defaultProgram) {
-          history.push(
-            `${publicPath}${PROGRAM_PERFIX_PATH}${
-              defaultProgram?.id
-            }/${MODE_VIEW}`,
-          );
-        }
-      }
-    },
-    [getEMFStatus, getProgramsStatus],
-  );
-
-  const getProgramDetails = useMemo(
-    () =>
-      programDetails.map(programData => ({
-        ...programData,
-        avatarColor: sample(AVATAR_ICON_COLORS),
-        // need to replace once kpi api is done
-      })),
-    [programDetails],
-  );
-
-  const isNoProgramFound =
-    getProgramsStatus === SUCCESS &&
-    programDetails.length === 0 &&
-    getEMFStatus === SUCCESS;
-
-  const isUpdating = getProgramsStatus === UPDATE;
-  const isLoading =
-    !isUpdating &&
-    (!getProgramsStatus ||
-      getProgramsStatus === REQUEST ||
-      getEMFStatus === REQUEST ||
-      !getEMFStatus);
-
-  const isApiError = getProgramsStatus === FAILURE || getEMFStatus === FAILURE;
-  const isEMFActiveValue = isTrue(isEMFActive);
-
-  const onRefreshClick = () => {
-    if (getProgramsStatus === FAILURE) {
-      globalActions.getPrograms();
-    }
-    if (getEMFStatus === FAILURE) {
-      globalActions.getEMFStatus();
-    }
-  };
-
-  return (
-    <CapSpin spinning={isLoading}>
-      <ErrorBoundaryWrapper
-        showImage
-        useStyle
-        isApiErrorBoundary
-        isApiError={isApiError}
-        onRefreshClick={onRefreshClick}
-      >
-        {!isLoading && (
-          <>
-            {!isNoProgramFound ? (
-              <PageTemplate className={className}>
-                <PerformanceStats isLoading={isLoading} />
-                {defaultProgramId && (
-                  <Nudges mode={DASHBOARD_LEVEL} programId={defaultProgramId} />
-                )}
-                <LoyaltyDetail
-                  isLoading={isLoading}
-                  isUpdating={isUpdating}
-                  isApiError={isApiError}
-                  programDetails={getProgramDetails}
-                  isEMFActive={isEMFActiveValue}
-                  onRefreshClick={onRefreshClick}
-                />
-              </PageTemplate>
-            ) : (
-              <CreateProgramIllustration isEMFActive={isEMFActiveValue} />
-            )}
-          </>
-        )}
-      </ErrorBoundaryWrapper>
-    </CapSpin>
-  );
-};
-
-Dashboard.propTypes = {
-  className: PropTypes.string,
-  programData: PropTypes.object.isRequired,
-  EMFData: PropTypes.object,
-  history: PropTypes.object,
-  globalActions: PropTypes.object,
-};
-
-const mapStateToProps = createStructuredSelector({
-  programData: makeSelectPrograms(),
-  EMFData: makeSelectEMFStatus(),
-});
-
-function mapDispatchToProps(dispatch) {
-  return {
-    globalActions: bindActionCreators(globalActions, dispatch),
-  };
-}
-
-const withConnect = connect(
-  mapStateToProps,
-  mapDispatchToProps,
-);
-
-export default withErrorBoundary(
-  compose(withConnect)(withRouter(withStyles(Dashboard, styles))),
-  {
-    showImage: true,
-    useStyle: true,
-  },
-);

package/components/pages/Dashboard/Loadable.js

@@ -1,10 +0,0 @@
-import React, { Suspense } from 'react';
-import CapSpin from '@capillarytech/cap-ui-library/CapSpin';
-
-const LoadableComponent = React.lazy(() => import('./Dashboard'));
-
-export default () => (
-  <Suspense fallback={<CapSpin />}>
-    <LoadableComponent />
-  </Suspense>
-);

package/components/pages/Dashboard/constants.js

@@ -1,9 +0,0 @@
-export const AVATAR_ICON_COLORS = [
-  { text: '#E51FA3', background: '#FAD2ED' },
-  { text: '#8517E5', background: '#E7D1FA' },
-  { text: '#2466EA', background: '#D7E0FF' },
-  { text: '#23CCCC', background: '#D3F5F5' },
-  { text: '#46AF45', background: '#D9EFDA' },
-  { text: '#F87D22', background: '#FEE5D3' },
-  { text: '#EA223A', background: '#FBD3D8' },
-];