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

package/components/organisms/ActivityRewardCurrencyCard/ActivityRewardCurrencyCard.js

@@ -1,414 +0,0 @@
-import React, { useEffect, useState, useMemo } from 'react';
-import PropTypes from 'prop-types';
-import classnames from 'classnames';
-import { FormattedMessage, injectIntl, intlShape } from 'react-intl';
-import { connect } from 'react-redux';
-import { bindActionCreators, compose } from 'redux';
-import { createStructuredSelector } from 'reselect';
-
-import CapCard from '@capillarytech/cap-ui-library/CapCard';
-import CapColumn from '@capillarytech/cap-ui-library/CapColumn';
-import CapHeading from '@capillarytech/cap-ui-library/CapHeading';
-import CapIcon from '@capillarytech/cap-ui-library/CapIcon';
-import CapImage from '@capillarytech/cap-ui-library/CapImage';
-import CapLabel from '@capillarytech/cap-ui-library/CapLabel';
-import CapRow from '@capillarytech/cap-ui-library/CapRow';
-import CapTooltip from '@capillarytech/cap-ui-library/CapTooltip';
-import CapSpin from '@capillarytech/cap-ui-library/CapSpin';
-
-import withStyles from '../../../utils/withStyles';
-import injectSaga from '../../../utils/injectSaga';
-
-import * as actions from './actions';
-import saga from './saga';
-import * as style from './style';
-import messages from './messages';
-import { makeSelectCappingInfo } from './selectors';
-import reducer from './reducer';
-
-import rewardCurrencyLimitIcon from '../../../assets/rewardCurrencyLimitIcon.svg';
-import globalMessages from '../../pages/Cap/messages';
-import ActivityRewardSlider from '../ActivityRewardSlider/activityRewardSlider';
-import ActivityRewardSliderV1 from '../ActivityRewardSliderV1/activityRewardSliderV1';
-import * as workflowActions from '../ConfigureWorkflows/actions';
-import {
-  ACROSS_EVENTS,
-  CURRENT_EVENT,
-} from '../ActivityRewardSlider/constants';
-import {
-  formatMultipleTargets,
-  formatTargetGroups,
-} from '../SelectTargetSlider/utils';
-import injectReducer from '../../../utils/injectReducer';
-import {
-  REQUEST,
-  SOURCE_PROMOTION,
-  POINTS_BUDGETING_UX_ENHANCEMENTS,
-  SUCCESS,
-} from '../../pages/App/constants';
-import { Provider } from '../ActivityRewardSliderV1/context';
-import { makeSelectCap } from '../../pages/Cap/selectors';
-import { makeSelectTargetData } from '../ConfigureWorkflows/selectors';
-
-const { styles } = style;
-
-export const ActivityRewardCurrencyLimit = ({
-  className,
-  intl: { formatMessage },
-  eventType,
-  programId,
-  isActive,
-  actions: { getRewardCurrencyLimit, getAllTills },
-  workflowActions: { getTargetsFromMultipleGroups, getTargetGroups },
-  tillsData: { tills, getCappingConfigStatus, cappingConfigData },
-  targetGroupData: {
-    getMultipleTargetsStatus,
-    getTargetGroupsStatus,
-    targetGroups: targetGroupsFromProp,
-    multipleTargets: multipleTargetsFromProp,
-  } = {},
-  currentProgram,
-  disabled,
-  mode,
-  source,
-  userData,
-}) => {
-  const { currentOrgDetails } = userData;
-  const { accessibleFeatures = [] } = currentOrgDetails;
-  const isPointBudgetingUxEnhacement = true;
-
-  const targetGroupDataConverted = useMemo(
-    () => {
-      const targetGroupsParsed = {};
-      if (getTargetGroupsStatus === SUCCESS) {
-        const targetGroupConverted = targetGroupsFromProp.toJS();
-        targetGroupConverted.forEach(targetGroup => {
-          targetGroupsParsed[targetGroup.id] = targetGroup;
-        });
-      }
-      return targetGroupsParsed;
-    },
-    [targetGroupsFromProp],
-  );
-  const multipleTargetsDataConverted = useMemo(
-    () => {
-      let targetsParsed = {};
-      if (getMultipleTargetsStatus === SUCCESS) {
-        const targetGroupConverted = multipleTargetsFromProp.toJS();
-        targetGroupConverted.forEach(targetGroup => {
-          targetGroup?.response?.TargetRules?.data?.forEach(
-            target => (targetsParsed[target.id] = target),
-          );
-        });
-      }
-      return targetsParsed;
-    },
-    [multipleTargetsFromProp],
-  );
-  const [showActivityRewardSlider, setShowActivityRewardSlider] = useState(
-    false,
-  );
-  const [targetGroupsData, setTargetGroupsData] = useState([]);
-  const [selectedTargetGroupsData, setSelectedTargetGroupsData] = useState([]);
-  const [selectedTargets, setSelectedTargets] = useState({});
-  const [cartLevelLimitData, setCartLevelLimitData] = useState({});
-
-  const setRewardLimitData = rewardlimitData => {
-    if (rewardlimitData?.propertyValuesJson) {
-      const propertyValuesJson = JSON.parse(rewardlimitData.propertyValuesJson);
-      const mappedTargetsWithGroups = {};
-      const cartLevelData = {};
-      propertyValuesJson.forEach(obj => {
-        if (obj.scope === CURRENT_EVENT) {
-          cartLevelData[obj.cappingOn] = obj.limit;
-        }
-        if (obj.scope === ACROSS_EVENTS) {
-          if (mappedTargetsWithGroups?.[obj.targetGroupId]?.length)
-            mappedTargetsWithGroups[obj.targetGroupId].push(obj.targetId);
-          else mappedTargetsWithGroups[obj.targetGroupId] = [obj.targetId];
-        }
-      });
-      getTargetGroupsAndMultipleTargets(mappedTargetsWithGroups);
-      setCartLevelLimitData(cartLevelData);
-    }
-  };
-
-  useEffect(() => {
-    getRewardCurrencyLimit(
-      programId,
-      eventType,
-      { isActive },
-      setRewardLimitData,
-    );
-    getAllTills();
-  }, []);
-
-  const getActiveAcxLimitData = (
-    isCurrentEvent = true,
-    isAcrossEvent = true,
-  ) => {
-    try {
-      let limits = JSON.parse(cappingConfigData.propertyValuesJson);
-      let acitveLimit = limits.filter(limit => {
-        if (limit.scope === 'CURRENT_EVENT') return isCurrentEvent;
-        if (limit.scope === 'ACROSS_EVENTS')
-          return (
-            multipleTargetsDataConverted[limit.targetId]?.active &&
-            targetGroupDataConverted[limit.targetGroupId]?.active &&
-            isAcrossEvent
-          );
-      });
-      return acitveLimit.length;
-    } catch (err) {
-      return 0;
-    }
-  };
-
-  const getLimitCount = () => {
-    if (isPointBudgetingUxEnhacement) {
-      return getActiveAcxLimitData();
-    }
-    let count = Object.keys(cartLevelLimitData).length || 0;
-    let targetCount = Object.keys(selectedTargets).reduce(
-      (sum, id) => (sum += selectedTargets[id].length),
-      0,
-    );
-    return count + targetCount;
-  };
-
-  const filterTargetGroups = (res, mappedTargetsWithGroups) => {
-    const allTargetGroups = res?.response?.targetGroups?.data || [];
-    let restructuredList = formatTargetGroups(allTargetGroups, formatMessage);
-    setSelectedTargets(mappedTargetsWithGroups);
-    setTargetGroupsData(restructuredList);
-    const ids = Object.keys(mappedTargetsWithGroups);
-    if (restructuredList.length && ids.length) {
-      // get targets for each target group
-      getTargetsFromMultipleGroups(ids, (res, targetGroupIds) => {
-        const { targetGroupsWithTargets } = formatMultipleTargets(
-          res,
-          targetGroupIds,
-          restructuredList,
-          formatMessage,
-        );
-        setSelectedTargetGroupsData(targetGroupsWithTargets);
-      });
-    } else {
-      setSelectedTargetGroupsData([]);
-    }
-  };
-
-  const getTargetGroupsAndMultipleTargets = data => {
-    getTargetGroups(res => filterTargetGroups(res, data));
-  };
-
-  const onCardClick = () => {
-    setShowActivityRewardSlider(true);
-  };
-
-  const onCardClose = () => {
-    setShowActivityRewardSlider(false);
-  };
-
-  const checkCustomerLevelLimitData = () => {
-    const len = isPointBudgetingUxEnhacement
-      ? getActiveAcxLimitData(false)
-      : Object.keys(selectedTargets).filter(key => selectedTargets[key].length)
-          .length || 0;
-    return len
-      ? formatMessage(globalMessages.yes)
-      : formatMessage(globalMessages.no);
-  };
-  return (
-    <CapRow className={className}>
-      <CapCard
-        className={classnames('reward-currency-limit-card', {
-          'bulk-config-reward-limit-card':
-            mode === '' && source !== SOURCE_PROMOTION,
-        })}
-      >
-        <CapSpin
-          spinning={
-            getCappingConfigStatus === REQUEST ||
-            getTargetGroupsStatus === REQUEST ||
-            getMultipleTargetsStatus === REQUEST
-          }
-        >
-          <CapRow type={classnames('flex', 'cursor')} onClick={onCardClick}>
-            <CapRow className="reward-icon-container">
-              <CapImage
-                className="reward-currency-limit-icon"
-                src={rewardCurrencyLimitIcon}
-                alt="default"
-              />
-            </CapRow>
-            <CapRow
-              className="reward-right-content"
-              type="flex"
-              justify="space-between"
-              align="middle"
-            >
-              <CapColumn span={20} className="flex">
-                <CapHeading type="h4">
-                  {isPointBudgetingUxEnhacement
-                    ? formatMessage(messages.addTxnTitle)
-                    : formatMessage(messages.activityRewardCurrencyLimit)}
-                </CapHeading>
-                <CapTooltip
-                  className="left-spacing"
-                  title={formatMessage(messages.rewardCurrencyLimitTooltip)}
-                >
-                  <CapIcon
-                    data-testid="reward-currency-tooltip"
-                    type="info"
-                    size="xs"
-                    className="event-info-icon"
-                  />
-                </CapTooltip>
-                <CapLabel className="left-spacing">
-                  {formatMessage(messages.optional)}
-                </CapLabel>
-                <CapLabel className="no-of-scopes">
-                  {formatMessage(messages.noOfLimits, {
-                    value: getLimitCount(),
-                  })}
-                </CapLabel>
-              </CapColumn>
-              <CapRow className={classnames('flex', 'reward-description-text')}>
-                {isPointBudgetingUxEnhacement ? (
-                  <FormattedMessage
-                    {...messages.individualTransactionLimits}
-                    values={{
-                      value: (
-                        <CapLabel type="label15" className="level-count">
-                          {Object.keys(cartLevelLimitData).length
-                            ? formatMessage(globalMessages.yes)
-                            : formatMessage(globalMessages.no)}
-                        </CapLabel>
-                      ),
-                    }}
-                  />
-                ) : (
-                  <FormattedMessage
-                    {...messages.cartLevel}
-                    values={{
-                      value: (
-                        <CapLabel type="label15" className="level-count">
-                          {Object.keys(cartLevelLimitData).length
-                            ? formatMessage(globalMessages.yes)
-                            : formatMessage(globalMessages.no)}
-                        </CapLabel>
-                      ),
-                    }}
-                  />
-                )}
-                <CapRow className="vertical-divider" />
-                {isPointBudgetingUxEnhacement ? (
-                  <FormattedMessage
-                    {...messages.individualCustomerLimits}
-                    values={{
-                      value: (
-                        <CapLabel type="label15" className="level-count">
-                          {checkCustomerLevelLimitData()}
-                        </CapLabel>
-                      ),
-                    }}
-                  />
-                ) : (
-                  <FormattedMessage
-                    {...messages.customerLevel}
-                    values={{
-                      value: (
-                        <CapLabel type="label15" className="level-count">
-                          {checkCustomerLevelLimitData()}
-                        </CapLabel>
-                      ),
-                    }}
-                  />
-                )}
-              </CapRow>
-            </CapRow>
-          </CapRow>
-        </CapSpin>
-      </CapCard>
-      <Provider
-        value={{
-          tillsData: { tills, getCappingConfigStatus, cappingConfigData },
-          selectedTargets,
-          setSelectedTargets,
-          setCartLevelLimitData,
-          points: cartLevelLimitData,
-          setTargetGroupsData,
-          targetGroupsData,
-          selectedTargetGroupsData,
-          setSelectedTargetGroupsData,
-          getLimitCount,
-          currentProgram,
-          parentDisabled: disabled,
-        }}
-      >
-        {showActivityRewardSlider && (
-          <>
-            {isPointBudgetingUxEnhacement ? (
-              <ActivityRewardSlider
-                isActive={isActive}
-                eventType={eventType}
-                onCardClose={onCardClose}
-                show={showActivityRewardSlider}
-                parentDisabled={disabled}
-              />
-            ) : (
-              <ActivityRewardSliderV1
-                isActive={isActive}
-                activityRewardLimitActions={{ getRewardCurrencyLimit }}
-                eventType={eventType}
-                onCardClose={onCardClose}
-                show={showActivityRewardSlider}
-                parentDisabled={disabled}
-              />
-            )}
-          </>
-        )}
-      </Provider>
-    </CapRow>
-  );
-};
-
-const mapStateToProps = createStructuredSelector({
-  tillsData: makeSelectCappingInfo(),
-  targetGroupData: makeSelectTargetData(),
-  userData: makeSelectCap(),
-});
-
-const mapDispatchToProps = dispatch => ({
-  actions: bindActionCreators(actions, dispatch),
-  workflowActions: bindActionCreators(workflowActions, dispatch),
-});
-
-const withSaga = [{ key: 'activityRewardCurrencyLimit', saga: saga }].map(
-  saga => injectSaga(saga),
-);
-
-const withReducer = [{ key: 'activityRewardCurrencyLimit', reducer }].map(
-  reducer => injectReducer(reducer),
-);
-
-const withConnect = connect(
-  mapStateToProps,
-  mapDispatchToProps,
-);
-
-ActivityRewardCurrencyLimit.propTypes = {
-  className: PropTypes.string,
-  intl: intlShape.isRequired,
-  eventType: PropTypes.string,
-  programId: PropTypes.number,
-  isActive: PropTypes.bool,
-  mode: PropTypes.string,
-};
-
-export default compose(
-  withConnect,
-  ...withSaga,
-  ...withReducer,
-)(injectIntl(withStyles(ActivityRewardCurrencyLimit, styles)));

package/components/organisms/ActivityRewardCurrencyCard/actions.js

@@ -1,21 +0,0 @@
-import { GET_CAPPING_CONFIG_REQUEST, GET_ALL_TILLS_REQUEST } from './constants';
-
-export const getRewardCurrencyLimit = (
-  programId,
-  eventType,
-  payload,
-  callback,
-) => ({
-  type: GET_CAPPING_CONFIG_REQUEST,
-  eventType,
-  programId,
-  payload,
-  callback,
-});
-
-export function getAllTills(callback) {
-  return {
-    type: GET_ALL_TILLS_REQUEST,
-    callback,
-  };
-}

package/components/organisms/ActivityRewardCurrencyCard/constants.js

@@ -1,7 +0,0 @@
-export const GET_CAPPING_CONFIG_REQUEST = 'GET_CAPPING_CONFIG_REQUEST';
-export const GET_CAPPING_CONFIG_SUCCESS = 'GET_CAPPING_CONFIG_SUCCESS';
-export const GET_CAPPING_CONFIG_FAILURE = 'GET_CAPPING_CONFIG_FAILURE';
-
-export const GET_ALL_TILLS_REQUEST = 'GET_ALL_TILLS_REQUEST';
-export const GET_ALL_TILLS_SUCCESS = 'GET_ALL_TILLS_SUCCESS';
-export const GET_ALL_TILLS_FAILURE = 'GET_ALL_TILLS_FAILURE';

package/components/organisms/ActivityRewardCurrencyCard/index.js

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

package/components/organisms/ActivityRewardCurrencyCard/messages.js

@@ -1,48 +0,0 @@
-/*
- * ActivityRewardCurrencyCard Messages
- *
- * This contains all the text for the Activity reward currency card component.
- */
-
-import { defineMessages } from 'react-intl';
-
-export const scope = 'loyaltyPlus.components.molecules.ActivityRewardCurrencyCard';
-
-export default defineMessages({
-  activityRewardCurrencyLimit: {
-    id: `${scope}.activityRewardCurrencyLimit`,
-    defaultMessage: 'Activity reward currency limit',
-  },
-  optional: {
-    id: `${scope}.optional`,
-    defaultMessage: '(Optional)',
-  },
-  noOfLimits: {
-    id: `${scope}.noOfLimits`,
-    defaultMessage: `No. of Limits: {value}`,
-  },
-  cartLevel: {
-    id: `${scope}.cartLevel`,
-    defaultMessage: `Cart Level {value}`,
-  },
-  customerLevel: {
-    id: `${scope}.customerLevel`,
-    defaultMessage: `Customer Level {value}`,
-  },
-  rewardCurrencyLimitTooltip: {
-    id: `${scope}.rewardCurrencyLimitTooltip`,
-    defaultMessage: `It will be overall reward currency level limit for both cart and customer level`,
-  },
-  individualTransactionLimits: {
-    id: `${scope}.transactionLimits`,
-    defaultMessage: `Individual transaction limits {value}`,
-  },
-  individualCustomerLimits: {
-    id: `${scope}.acrossCustomerLimits`,
-    defaultMessage: `Individual customer limits {value}`,
-  },
-  addTxnTitle: {
-    id: `${scope}.addTxnTitle`,
-    defaultMessage: `Add transaction: points allocation limit`,
-  }
-});

package/components/organisms/ActivityRewardCurrencyCard/reducer.js

@@ -1,48 +0,0 @@
-import { fromJS } from 'immutable';
-import * as types from './constants';
-import * as constants from '../../pages/App/constants';
-
-const { REQUEST, SUCCESS, FAILURE } = constants;
-
-export const initialState = fromJS({
-  getCappingConfigStatus: '',
-  getCappingConfigError: '',
-  cappingConfigData: {},
-  tills: [],
-  getAllTillsStatus: '',
-  getAllTillsError: '',
-});
-
-const activityRewardLimitReducer = (state = initialState, action) => {
-  switch (action.type) {
-    case types.GET_CAPPING_CONFIG_REQUEST:
-      return state
-        .set('getCappingConfigStatus', REQUEST)
-        .set('getCappingConfigError', null);
-    case types.GET_CAPPING_CONFIG_SUCCESS:
-      return state
-        .set('getCappingConfigStatus', SUCCESS)
-        .set('cappingConfigData', action.result);
-    case types.GET_CAPPING_CONFIG_FAILURE:
-      return state
-        .set('getCappingConfigStatus', FAILURE)
-        .set('getCappingConfigError', action.error);
-    case types.GET_ALL_TILLS_REQUEST:
-      return state
-        .set('getAllTillsStatus', REQUEST)
-        .set('tills', fromJS([]))
-        .set('getAllTillsError', null);
-    case types.GET_ALL_TILLS_SUCCESS:
-      return state
-        .set('getAllTillsStatus', SUCCESS)
-        .set('tills', action.result);
-    case types.GET_ALL_TILLS_FAILURE:
-      return state
-        .set('getAllTillsStatus', FAILURE)
-        .set('getAllTillsError', action.error);
-    default:
-      return state;
-  }
-};
-
-export default activityRewardLimitReducer;

package/components/organisms/ActivityRewardCurrencyCard/saga.js

@@ -1,65 +0,0 @@
-import { all, call, put, takeLatest } from 'redux-saga/effects';
-import * as Api from '../../../services/api';
-
-import * as types from './constants';
-
-export function* getRewardCurrencyLimit({
-  programId,
-  eventType,
-  payload,
-  callback,
-}) {
-  try {
-    const res = yield call(Api.getRewardLimit, {
-      programId,
-      eventType,
-      payload,
-    });
-    if (res?.success) {
-      yield put({
-        type: types.GET_CAPPING_CONFIG_SUCCESS,
-        result: res?.result || [],
-      });
-      if (callback) callback(res?.result || []);
-    } else {
-      yield put({
-        type: types.GET_CAPPING_CONFIG_FAILURE,
-        error: res?.status?.message,
-      });
-    }
-  } catch (error) {
-    yield put({ type: types.GET_CAPPING_CONFIG_FAILURE, error });
-  }
-}
-
-export function* watchForGetRewardCurrencyLimit() {
-  yield takeLatest(types.GET_CAPPING_CONFIG_REQUEST, getRewardCurrencyLimit);
-}
-
-export function* getAllTills(callback) {
-  try {
-    const res = yield call(Api.getAllTills);
-    if (res?.success) {
-      yield put({
-        type: types.GET_ALL_TILLS_SUCCESS,
-        result: res?.result || [],
-      });
-    } else {
-      yield put({
-        type: types.GET_ALL_TILLS_FAILURE,
-        error: res?.status?.message,
-      });
-    }
-    if (callback) callback(res);
-  } catch (error) {
-    yield put({ type: types.GET_ALL_TILLS_FAILURE, error });
-  }
-}
-
-export function* watchForTills() {
-  yield takeLatest(types.GET_ALL_TILLS_REQUEST, getAllTills);
-}
-
-export default function*() {
-  yield all([watchForGetRewardCurrencyLimit(), watchForTills()]);
-}

package/components/organisms/ActivityRewardCurrencyCard/selectors.js

@@ -1,12 +0,0 @@
-import { fromJS } from 'immutable';
-import { createSelector } from 'reselect';
-import { initialState } from './reducer';
-
-const selectRewardCurrencyLimitDomain = (state = fromJS({})) =>
-  state.get('activityRewardCurrencyLimit', initialState);
-
-const makeSelectCappingInfo = () =>
-  createSelector(selectRewardCurrencyLimitDomain, (substate = fromJS({})) => {
-    return substate.toJS();
-  });
-export { selectRewardCurrencyLimitDomain, makeSelectCappingInfo };