@capillarytech/creatives-library 1.0.2 → 2.0.0

package/components/organisms/TransferGroupPoints/TransferGroupPoints.js

@@ -1,570 +0,0 @@
-import React, { useState, useEffect, useMemo } from 'react';
-import { injectIntl, intlShape } from 'react-intl';
-import PropTypes from 'prop-types';
-
-import { compose, bindActionCreators } from 'redux';
-import { createStructuredSelector } from 'reselect';
-import { connect } from 'react-redux';
-import {
-  getSmsCreativesData,
-  prorateOnListOptions,
-  getAllChannelPayload,
-  getEmailCreativesData,
-  handleCreativesChange,
-  getMPushCreativesData,
-  getWeChatCreativesData,
-  getMandatoryPriorityData,
-  pointsRoundingStrategyList,
-  getCommChannelsDisableStatus,
-  userGroupEntityListOptions,
-} from 'utils/workflow';
-import CapSpin from '@capillarytech/cap-ui-library/CapSpin';
-import CapButton from '@capillarytech/cap-ui-library/CapButton';
-import CapSlideBox from '@capillarytech/cap-ui-library/CapSlideBox';
-import CapColumn from '@capillarytech/cap-ui-library/CapColumn';
-import CapSelect from '@capillarytech/cap-ui-library/CapSelect';
-import CapRow from '@capillarytech/cap-ui-library/CapRow';
-import { CAP_SPACE_32 } from '@capillarytech/cap-ui-library/styled';
-
-import withErrorBoundary from 'utils/withErrorBoundary';
-import * as style from './style';
-import messages from './messages';
-import {
-  INTIAL_TRANSFER_GROUP_POINTS,
-  POINT_REDEMPTION_STRATEGY,
-} from './constants';
-import TriggerAction from '../../atoms/TriggerAction';
-import globalMessages from '../../pages/Cap/messages';
-import { Flex } from '../../pages/Cap/style';
-import SelectCollection from '../../molecules/SelectCollection';
-import MandatoryAndPriorityChannel from '../MandatoryAndPriorityChannel';
-import {
-  POINT_EXPIRY_CONDITION,
-  PRORATE_ON,
-  POINT_ROUNDING_STRATEGY,
-  POINT_ALLOCATION,
-} from '../../pages/Cap/constants';
-import {
-  REQUEST,
-  LOYALTY,
-  ALLOCATION_TYPE_MAP_CONFIGURE,
-  USER_GROUP_LIST_VALUE_MAP,
-} from '../../pages/App/constants';
-import * as globalActions from '../../pages/Cap/actions';
-import { makeSelectUpsertAction } from '../../pages/Cap/selectors';
-import ActionTitle from '../../molecules/ActionTitle';
-
-const { CapRowWithSpacing } = style;
-const TransferGroupPoints = ({
-  updateRuleSet,
-  actionData,
-  globalActions,
-  closeSlidebox,
-  pointsStrategies,
-  intl: { formatMessage },
-  actionDetailsData: { upsertActionStatus } = {},
-  allowedChannels = [],
-  eventType,
-  fleetLoyaltyEnabled = false,
-}) => {
-  const {
-    actionType,
-    addTrackerTags = false,
-    EvaluatedEntity = '',
-  } = actionData;
-  //Primary
-  const [priorityPrimary, setPriorityPrimary] = useState([]);
-  const [mandatoryPrimary, setMandatoryPrimary] = useState([]);
-  const [smsPrimary, setSmsPrimary] = useState({});
-  const [emailPrimary, setEmailPrimary] = useState({});
-  const [weChatPrimary, setWeChatPrimary] = useState({});
-  const [mPushPrimary, setMPushPrimary] = useState({});
-
-  const [userGroupEntity, setUserGroupEntity] = useState(
-    EvaluatedEntity || USER_GROUP_LIST_VALUE_MAP.INDIVIDUAL,
-  );
-
-  //Secondary
-  const [prioritySecondary, setPrioritySecondary] = useState([]);
-  const [mandatorySecondary, setMandatorySecondary] = useState([]);
-  const [smsSecondary, setSmsSecondary] = useState({});
-  const [emailSecondary, setEmailSecondary] = useState({});
-  const [weChatSecondary, setWeChatSecondary] = useState({});
-  const [mPushSecondary, setMPushSecondary] = useState({});
-
-  //Points
-  const [transferGroupPoints, setTransferGroupPoints] = useState(
-    INTIAL_TRANSFER_GROUP_POINTS,
-  );
-
-  //Points Options
-  const [redemptionOpts, setRedemptionOpts] = useState([]);
-  const [allocationOpts, setAllocationOpts] = useState([]);
-  const [expiryOpts, setExpiryOpts] = useState([]);
-
-  //Prorate & Rounding
-  const [prorateOpts, setProrateOpts] = useState([]);
-  const [roundingOpts, setRoundingOpts] = useState([]);
-
-  const showSpin = upsertActionStatus === REQUEST;
-
-  useEffect(() => {
-    setProrateAndRoundOptions();
-  }, []);
-
-  useEffect(
-    () => {
-      setPointsOptions();
-      setPointsData();
-    },
-    [JSON.stringify(pointsStrategies), JSON.stringify(actionData)],
-  );
-
-  useEffect(
-    () => {
-      setPrimaryData();
-      setSecondaryData();
-    },
-    [JSON.stringify(actionData)],
-  );
-
-  const handleUserGroupEntityChange = value => setUserGroupEntity(value);
-
-  let isSaveDisabled = useMemo(
-    () => {
-      const emptyList = Object.values(transferGroupPoints).filter(
-        value => !value,
-      );
-      return showSpin || emptyList.length > 0;
-    },
-    [transferGroupPoints, showSpin],
-  );
-
-  const isCommSaveDisabledPrimary = getCommChannelsDisableStatus({
-    mandatoryChannels: mandatoryPrimary,
-    priorityChannels: priorityPrimary,
-    smsDataSource: smsPrimary,
-    emailDataSource: emailPrimary,
-    weChatDataSource: weChatPrimary,
-    mPushDataSource: mPushPrimary,
-  });
-  const isCommSaveDisabledSecondary = getCommChannelsDisableStatus({
-    mandatoryChannels: mandatorySecondary,
-    priorityChannels: prioritySecondary,
-    smsDataSource: smsSecondary,
-    emailDataSource: emailSecondary,
-    weChatDataSource: weChatSecondary,
-    mPushDataSource: mPushSecondary,
-  });
-  const setProrateAndRoundOptions = () => {
-    const prorateList = prorateOnListOptions(formatMessage).filter(
-      ({ value }) => value === 'EVENT_DEFAULT_VALUE',
-    );
-    const roundingList = pointsRoundingStrategyList(formatMessage);
-    setProrateOpts(prorateList);
-    setRoundingOpts(roundingList);
-  };
-
-  const setPointsOptions = () => {
-    const { pointsRedemption = [], pointsAllocation = [], pointsExpiry = [] } =
-      pointsStrategies || {};
-    // Need to handle filter here
-    const pointsExpiryList = pointsExpiry.map(({ name, id }) => ({
-      label: name,
-      value: `${id}`,
-      key: `${id}_expiry`,
-    }));
-    // Need to handle filter here
-    const pointsAllocationList = pointsAllocation
-      .filter(
-        strategy =>
-          strategy.owner === LOYALTY &&
-          `${strategy?.propertyValues?.allocation_type}`.includes(
-            ALLOCATION_TYPE_MAP_CONFIGURE.PRORATED,
-          ),
-      )
-      .map(({ name, id }) => ({
-        label: name,
-        value: `${id}`,
-        key: `${id}_allocation`,
-      }));
-    const pointsRedemptionList = pointsRedemption.map(({ name, id }) => ({
-      label: name,
-      value: `${id}`,
-      key: `${id}_redemption`,
-    }));
-    setExpiryOpts(pointsExpiryList);
-    setAllocationOpts(pointsAllocationList);
-    setRedemptionOpts(pointsRedemptionList);
-  };
-
-  const setPrimaryData = () => {
-    //Primary
-    const smsPrimary = getSmsCreativesData(actionData);
-    const emailPrimary = getEmailCreativesData(actionData);
-    const wechatPrimary = getWeChatCreativesData(actionData);
-    const mPushPrimary = getMPushCreativesData(actionData);
-    const { priorityChannels, mandatoryChannels } = getMandatoryPriorityData(
-      actionData,
-    );
-    setSmsPrimary(smsPrimary);
-    setEmailPrimary(emailPrimary);
-    setWeChatPrimary(wechatPrimary);
-    setMPushPrimary(mPushPrimary);
-    setPriorityPrimary(priorityChannels);
-    setMandatoryPrimary(mandatoryChannels);
-  };
-
-  const setSecondaryData = () => {
-    //Secondary
-    const smsSecondary = getSmsCreativesData(actionData, true);
-    const emailSecondary = getEmailCreativesData(actionData, true);
-    const wechatSecondary = getWeChatCreativesData(actionData, true);
-    const mPushSecondary = getMPushCreativesData(actionData, true);
-    const {
-      priorityChannels: prioritySecChannels,
-      mandatoryChannels: mandatorySecChannels,
-    } = getMandatoryPriorityData(actionData, true);
-    setSmsSecondary(smsSecondary);
-    setEmailSecondary(emailSecondary);
-    setWeChatSecondary(wechatSecondary);
-    setMPushSecondary(mPushSecondary);
-    setPrioritySecondary(prioritySecChannels);
-    setMandatorySecondary(mandatorySecChannels);
-  };
-
-  const setPointsData = () => {
-    //Points
-    const {
-      RedeemStrategy = '',
-      AwardStrategy = '',
-      ExpiryStrategy = '',
-      ProRateOnSourceValue = '',
-      PointsRoundingStrategy = '',
-    } = actionData;
-    setTransferGroupPoints({
-      [POINT_REDEMPTION_STRATEGY]: RedeemStrategy,
-      [POINT_ALLOCATION]: AwardStrategy,
-      [POINT_EXPIRY_CONDITION]: ExpiryStrategy,
-      [PRORATE_ON]: ProRateOnSourceValue,
-      [POINT_ROUNDING_STRATEGY]: PointsRoundingStrategy,
-    });
-  };
-
-  const changeTransferGroupPoints = (param, value) =>
-    setTransferGroupPoints({ ...transferGroupPoints, [param]: value });
-
-  const changePointRedemptionStrategy = value =>
-    changeTransferGroupPoints(POINT_REDEMPTION_STRATEGY, value);
-
-  const changePointAllocation = value =>
-    changeTransferGroupPoints(POINT_ALLOCATION, value);
-
-  const changePointExpiryCondition = value =>
-    changeTransferGroupPoints(POINT_EXPIRY_CONDITION, value);
-
-  const changePorateOn = value => changeTransferGroupPoints(PRORATE_ON, value);
-
-  const changePointStrategy = value =>
-    changeTransferGroupPoints(POINT_ROUNDING_STRATEGY, value);
-
-  const transferGroupPointsProps = {
-    value: transferGroupPoints[POINT_REDEMPTION_STRATEGY],
-    label: formatMessage(messages.pointRedemptionStrategy),
-    onChange: changePointRedemptionStrategy,
-    inductiveText: formatMessage(globalMessages.returnConditionsDesc),
-    options: redemptionOpts,
-  };
-
-  const userGroupEntityProps = {
-    value: userGroupEntity,
-    label: formatMessage(globalMessages.userGroupEntity),
-    inductiveText: formatMessage(globalMessages.selectUserGroupEntity),
-    onChange: handleUserGroupEntityChange,
-    options: userGroupEntityListOptions(formatMessage),
-  };
-
-  const primary = [
-    {
-      value: transferGroupPoints[POINT_ALLOCATION],
-      label: formatMessage(messages.pointAllocation),
-      onChange: changePointAllocation,
-      inductiveText: formatMessage(globalMessages.returnConditionsDesc),
-      options: allocationOpts,
-      showSearch: false,
-      showArrow: true,
-      width: '402px',
-    },
-    {
-      value: transferGroupPoints[POINT_EXPIRY_CONDITION],
-      label: formatMessage(messages.pointExpiryCondition),
-      onChange: changePointExpiryCondition,
-      inductiveText: formatMessage(globalMessages.returnConditionsDesc),
-      options: expiryOpts,
-      showSearch: false,
-      showArrow: true,
-      width: '402px',
-    },
-  ];
-
-  const secondary = [
-    {
-      value: transferGroupPoints[PRORATE_ON],
-      label: formatMessage(messages.prorateOn),
-      onChange: changePorateOn,
-      inductiveText: formatMessage(globalMessages.returnConditionsDesc),
-      options: prorateOpts,
-      showSearch: false,
-      showArrow: true,
-      width: '402px',
-    },
-    {
-      value: transferGroupPoints[POINT_ROUNDING_STRATEGY],
-      label: formatMessage(messages.pointRoundingStrategy),
-      onChange: changePointStrategy,
-      inductiveText: formatMessage(globalMessages.returnConditionsDesc),
-      options: roundingOpts,
-      showSearch: false,
-      showArrow: true,
-      width: '402px',
-    },
-  ];
-
-  const mandatoryPrimaryProps = {
-    value: mandatoryPrimary,
-    onChange: setMandatoryPrimary,
-  };
-
-  const priorityPrimaryProps = {
-    value: priorityPrimary,
-    onChange: setPriorityPrimary,
-  };
-
-  const mandatorySecondaryProps = {
-    value: mandatorySecondary,
-    onChange: setMandatorySecondary,
-  };
-
-  const prioritySecondaryProps = {
-    value: prioritySecondary,
-    onChange: setPrioritySecondary,
-  };
-
-  //Primary
-  const onChangePrimaryCreatives = (channel, changedSource) =>
-    handleCreativesChange({
-      channel,
-      changedSource,
-      setSmsDataSource: setSmsPrimary,
-      setEmailDataSource: setEmailPrimary,
-      setWeChatDataSource: setWeChatPrimary,
-      setMPushDataSource: setMPushPrimary,
-    });
-
-  //Secondary
-  const onChangeSecondaryCreatives = (channel, changedSource) =>
-    handleCreativesChange({
-      channel,
-      changedSource,
-      setSmsDataSource: setSmsSecondary,
-      setEmailDataSource: setEmailSecondary,
-      setWeChatDataSource: setWeChatSecondary,
-      setMPushDataSource: setMPushSecondary,
-    });
-
-  //Primary
-  const getPrimarySavePayload = () =>
-    getAllChannelPayload({
-      actionData,
-      sms: smsPrimary,
-      email: emailPrimary,
-      weChat: weChatPrimary,
-      mPush: mPushPrimary,
-      priorityChannels: priorityPrimary,
-      mandatoryChannels: mandatoryPrimary,
-      allowedChannels,
-    });
-
-  //Secondary
-  const getSecondarySavePayload = () =>
-    getAllChannelPayload({
-      actionData,
-      sms: smsSecondary,
-      email: emailSecondary,
-      weChat: weChatSecondary,
-      mPush: mPushSecondary,
-      priorityChannels: prioritySecondary,
-      mandatoryChannels: mandatorySecondary,
-      isSecondaryChannel: true,
-      allowedChannels,
-    });
-
-  //Points
-  const getPointsSavePayload = () => {
-    const {
-      [POINT_REDEMPTION_STRATEGY]: redeemStrategy = '',
-      [POINT_ALLOCATION]: allocStrategy = '',
-      [POINT_EXPIRY_CONDITION]: expiryStrategy = '',
-      [PRORATE_ON]: prorateOn = '',
-      [POINT_ROUNDING_STRATEGY]: pointsRoundingStrategy = '',
-    } = transferGroupPoints;
-    return {
-      redemption_strategy: redeemStrategy,
-      allocation_strategy: allocStrategy,
-      expiry_strategy: expiryStrategy,
-      points_rounding_strategy: pointsRoundingStrategy,
-      prorate_on: prorateOn,
-    };
-  };
-
-  const saveSlidebox = () => {
-    const { programId, actionType } = actionData;
-    if (programId && actionType) {
-      const primaryPayload = getPrimarySavePayload();
-      const secondaryPayload = getSecondarySavePayload();
-      const pointsPayload = getPointsSavePayload();
-      const payload = {
-        ...primaryPayload,
-        ...secondaryPayload,
-        ...pointsPayload,
-        EvaluatedEntity: fleetLoyaltyEnabled
-          ? userGroupEntity
-          : USER_GROUP_LIST_VALUE_MAP.INDIVIDUAL,
-      };
-      globalActions.upsertAction(programId, actionType, payload, responseData =>
-        updateRuleSet(actionData, responseData),
-      );
-    }
-  };
-
-  // This will be enabled in upcoming phase
-  const selectorItem = false && (
-    <CapButton type="flat" isAddBtn>
-      {formatMessage(globalMessages.addCondtion)}
-    </CapButton>
-  );
-
-  const showUserGroup =
-    fleetLoyaltyEnabled && actionType === 'POINTS_TRANSFER_ACTION';
-
-  const sliderContent = (
-    <CapSpin spinning={showSpin}>
-      <CapRowWithSpacing margin={CAP_SPACE_32}>
-        <CapRow style={{ marginBottom: '24px' }}>
-          <CapColumn span={showUserGroup ? 11 : 0}>
-            <CapSelect style={{ width: '420px' }} {...userGroupEntityProps} />
-          </CapColumn>
-          <CapColumn span={11}>
-            <CapSelect
-              style={{ width: '420px' }}
-              {...transferGroupPointsProps}
-            />
-          </CapColumn>
-        </CapRow>
-        <MandatoryAndPriorityChannel
-          sms={smsPrimary}
-          email={emailPrimary}
-          weChat={weChatPrimary}
-          mPush={mPushPrimary}
-          priorityProps={priorityPrimaryProps}
-          mandatoryProps={mandatoryPrimaryProps}
-          onChangeCreatives={onChangePrimaryCreatives}
-          allowedChannels={allowedChannels}
-          mode={eventType}
-          actionType={actionType}
-          addTrackerTags={addTrackerTags}
-        />
-
-        <Flex className="points-select-container">
-          <SelectCollection
-            inputs={primary.map(item => ({
-              ...item,
-              childNode: selectorItem,
-            }))}
-          />
-        </Flex>
-        <Flex className="points-select-container">
-          <SelectCollection inputs={secondary} />
-        </Flex>
-        <MandatoryAndPriorityChannel
-          sms={smsSecondary}
-          email={emailSecondary}
-          weChat={weChatSecondary}
-          mPush={mPushSecondary}
-          priorityProps={prioritySecondaryProps}
-          mandatoryProps={mandatorySecondaryProps}
-          onChangeCreatives={onChangeSecondaryCreatives}
-          allowedChannels={allowedChannels}
-          mode={eventType}
-          actionType={actionType}
-          addTrackerTags={addTrackerTags}
-        />
-      </CapRowWithSpacing>
-    </CapSpin>
-  );
-
-  const slideBoxFooter = (
-    <TriggerAction
-      title={formatMessage(globalMessages.save)}
-      triggerAction={saveSlidebox}
-      isDisabled={
-        isSaveDisabled ||
-        isCommSaveDisabledPrimary ||
-        isCommSaveDisabledSecondary
-      }
-    />
-  );
-
-  return (
-    <CapSlideBox
-      showShadow
-      show
-      header={<ActionTitle actionData={actionData} />}
-      content={sliderContent}
-      footer={slideBoxFooter}
-      handleClose={closeSlidebox}
-      size="size-l"
-    />
-  );
-};
-
-TransferGroupPoints.propTypes = {
-  intl: intlShape.isRequired,
-  actionData: PropTypes.object,
-  closeSlidebox: PropTypes.func,
-  globalActions: PropTypes.object,
-  pointsStrategies: PropTypes.object,
-  actionDetailsData: PropTypes.object,
-  updateRuleSet: PropTypes.func,
-  allowedChannels: PropTypes.array,
-  fleetLoyaltyEnabled: PropTypes.bool,
-};
-
-TransferGroupPoints.defaultProps = {
-  actionData: {},
-  pointsStrategies: {},
-  closeSlidebox: () => {},
-  intl: { formatMessage: () => {} },
-  updateRuleSet: () => {},
-  allowedChannels: [],
-};
-
-const mapStateToProps = createStructuredSelector({
-  actionDetailsData: makeSelectUpsertAction(),
-});
-
-function mapDispatchToProps(dispatch) {
-  return {
-    globalActions: bindActionCreators(globalActions, dispatch),
-  };
-}
-
-const withConnect = connect(
-  mapStateToProps,
-  mapDispatchToProps,
-);
-
-export default compose(
-  withErrorBoundary,
-  withConnect,
-)(injectIntl(TransferGroupPoints));

package/components/organisms/TransferGroupPoints/constants.js

@@ -1,21 +0,0 @@
-import {
-  MANDATORY_CHANNELS,
-  PRIORITY_CHANNELS,
-  POINT_ALLOCATION,
-  POINT_EXPIRY_CONDITION,
-  PRORATE_ON,
-  POINT_ROUNDING_STRATEGY,
-} from '../../pages/Cap/constants';
-
-export const POINT_REDEMPTION_STRATEGY = 'pointRedemptionStrategy';
-
-export const REDEMPTION_COMMUNICATION = 'redemptionCommunication';
-export const ALLOCATION_COMMUNICATION = 'allocationCommunication';
-
-export const INTIAL_TRANSFER_GROUP_POINTS = {
-  [POINT_REDEMPTION_STRATEGY]: '',
-  [POINT_ALLOCATION]: '',
-  [POINT_EXPIRY_CONDITION]: '',
-  [PRORATE_ON]: '',
-  [POINT_ROUNDING_STRATEGY]: '',
-};

package/components/organisms/TransferGroupPoints/index.js

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

package/components/organisms/TransferGroupPoints/messages.js

@@ -1,32 +0,0 @@
-/*
- * TranserGroupPoints Messages
- *
- * This contains all the text for the TranserGroupPoints component.
- */
-
-import { defineMessages } from 'react-intl';
-
-export const scope = 'loyaltyPlus.components.organisms.TranserGroupPoints';
-
-export default defineMessages({
-  pointRedemptionStrategy: {
-    id: `${scope}.pointRedemptionStrategy`,
-    defaultMessage: 'Points redemption strategy',
-  },
-  pointExpiryCondition: {
-    id: `${scope}.pointExpiryCondition`,
-    defaultMessage: 'Point expiry condition',
-  },
-  prorateOn: {
-    id: `${scope}.prorateOn`,
-    defaultMessage: 'Prorate on',
-  },
-  pointRoundingStrategy: {
-    id: `${scope}.pointRoundingStrategy`,
-    defaultMessage: 'Points rounding strategy',
-  },
-  pointAllocation: {
-    id: `${scope}.pointAllocation`,
-    defaultMessage: 'Points allocation',
-  },
-});

package/components/organisms/TransferGroupPoints/style.js

@@ -1,21 +0,0 @@
-import styled from 'styled-components';
-import StyledVars from '@capillarytech/cap-ui-library/styled';
-import CapRow from '@capillarytech/cap-ui-library/CapRow';
-
-const { CAP_SPACE_44, CAP_SPACE_24, CAP_SPACE_16 } = StyledVars;
-
-export const CapRowWithSpacing = styled(CapRow)`
-  > * {
-    margin-bottom: ${CAP_SPACE_24};
-  }
-  .add-offer-issue-coupon {
-    margin-top: ${CAP_SPACE_44} !important;
-  }
-  .cap-custom-select-selection {
-    width: 556px !important;
-  }
-
-  .points-select-container {
-    gap: ${CAP_SPACE_16};
-  }
-`;