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

package/components/organisms/SelectTargetSlider/SelectTargetSlider.js

@@ -1,406 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import CapAlert from '@capillarytech/cap-ui-library/CapAlert';
-import CapButton from '@capillarytech/cap-ui-library/CapButton';
-import CapCheckbox from '@capillarytech/cap-ui-library/CapCheckbox';
-import CapColumn from '@capillarytech/cap-ui-library/CapColumn';
-import CapDivider from '@capillarytech/cap-ui-library/CapDivider';
-import CapHeading from '@capillarytech/cap-ui-library/CapHeading';
-import CapLabel from '@capillarytech/cap-ui-library/CapLabel';
-import CapRow from '@capillarytech/cap-ui-library/CapRow';
-import CapSlideBox from '@capillarytech/cap-ui-library/CapSlideBox';
-import CapSpin from '@capillarytech/cap-ui-library/CapSpin';
-import CapIcon from '@capillarytech/cap-ui-library/CapIcon';
-import CapTooltip from '@capillarytech/cap-ui-library/CapTooltip';
-import PropTypes from 'prop-types';
-import { FormattedMessage, injectIntl, intlShape } from 'react-intl';
-import withErrorBoundary from 'utils/withErrorBoundary';
-import withStyles from 'utils/withStyles';
-import { compose, bindActionCreators } from 'redux';
-import { createStructuredSelector } from 'reselect';
-import { connect } from 'react-redux';
-import penguinImage from 'assets/penguin.svg';
-import noTargetGroupIllustration from 'assets/draft-not-exist-Illustration.svg';
-import classnames from 'classnames';
-import messages from './messages';
-import globalMessages from '../../pages/Cap/messages';
-import { styles } from './style';
-import NoTargetView from '../../molecules/NoTargetView';
-import CollapsableContent from '../../molecules/CollapsableContent';
-import { makeSelectTargetGroups } from '../TargetPointAllocationWorkflowAction/selectors';
-import StatusColor from '../../atoms/StatusColor';
-import * as activityRewardLimitContext from '../ActivityRewardSliderV1/context';
-import * as targetPointAllocationActions from '../TargetPointAllocationWorkflowAction/actions';
-import { REQUEST } from '../../pages/App/constants';
-import { SALES_TARGETS } from '../../pages/Cap/constants';
-import {
-  formatMultipleTargets,
-  formatTargetGroups,
-  formatTargets,
-  getTargetsSelectedCount,
-  getTillCode,
-} from './utils';
-
-const { getActivityRewardLimitContext } = activityRewardLimitContext;
-
-export const SelectTargetSlider = ({
-  intl: { formatMessage },
-  show,
-  close,
-  className,
-  targetGroupData: {
-    getTargetGroupsStatus = '',
-    getTargetsStatus = '',
-    getMultipleTargetsStatus = '',
-  } = {},
-  targetPointAllocationActions: {
-    getTargetGroups,
-    getTargets,
-    getTargetsFromMultipleGroups,
-  },
-}) => {
-  const {
-    selectedTargets,
-    setSelectedTargets,
-    setTargetGroupsData,
-    targetGroupsData,
-    setSelectedTargetGroupsData,
-    tillsData,
-  } = getActivityRewardLimitContext();
-  const { tills } = tillsData;
-  const [openContent, setOpenContent] = useState(false);
-  const [selectedLocalTargets, setSelectedLocalTargets] = useState(
-    selectedTargets,
-  );
-  // restructure the targets
-  const formatAndRestructureTargets = (result, targetGroupId) => {
-    const data = formatTargets(result, targetGroupId, formatMessage, [
-      ...targetGroupsData,
-    ]);
-    setTargetGroupsData(data);
-  };
-
-  const onRefresh = () => {
-    setOpenContent(null);
-    getTargetGroupsInfo();
-  };
-
-  const getTargetGroupsInfo = () => {
-    getTargetGroups(res => {
-      const allTargetGroups = res?.response?.targetGroups?.data || [];
-      let restructuredGroups = formatTargetGroups(
-        [...allTargetGroups],
-        formatMessage,
-      );
-      setSelectedLocalTargets(selectedTargets);
-      const ids = Object.keys(selectedTargets);
-      if (
-        restructuredGroups?.length &&
-        ids?.length
-        //  && refresh
-      ) {
-        // get targets for each target group
-        getTargetsFromMultipleGroups(ids, (res, targetGroupIds) => {
-          const { allTargetGroups } = formatMultipleTargets(
-            res,
-            targetGroupIds,
-            restructuredGroups,
-            formatMessage,
-          );
-          setTargetGroupsData(allTargetGroups);
-        });
-      } else setTargetGroupsData(restructuredGroups);
-    });
-  };
-
-  useEffect(() => {
-    // // call target groups API only once
-    // if (!targetGroupsData?.length)
-
-    // call target groups API every time the select target screen opens
-    getTargetGroupsInfo();
-  }, []);
-
-  const handleCollapsibleContentClick = (e, targetGroup) => {
-    if (openContent === targetGroup.id) setOpenContent(null);
-    else {
-      setOpenContent(targetGroup.id);
-      // if no targets in a target group only then call targets api
-      if (!targetGroup?.targets)
-        getTargets(targetGroup.id, formatAndRestructureTargets);
-    }
-  };
-
-  const handleTargetChange = (targetValue, targetGroupId) => {
-    // make the selected target group id as the key and make the selected array of target ids as its value
-    let selectedValue = { ...selectedLocalTargets };
-    let targets = selectedValue?.[targetGroupId]
-      ? [...selectedValue[targetGroupId]]
-      : [];
-    // check if selectedValue has any group id added as key
-    if (Object.keys(selectedValue).includes(String(targetGroupId))) {
-      // if selectedValue has group id added as key then check if it has target id pushed in its value
-      if (selectedValue[targetGroupId].includes(targetValue.id)) {
-        // if it has target id pushed in its value, remove it to uncheck
-        targets = targets.filter(target => target !== targetValue.id);
-        if (targets?.length) selectedValue[targetGroupId] = [...targets];
-        else delete selectedValue[targetGroupId];
-      } else {
-        // if it does not have target id pushed in its value, then add it to mark it is chcked
-        targets.push(targetValue.id);
-        selectedValue[targetGroupId] = [...targets];
-      }
-    }
-    // if selectedValue does not have any group id added as key then add it
-    else selectedValue[targetGroupId] = [targetValue.id];
-    setSelectedLocalTargets(selectedValue);
-  };
-
-  const goToAddTarget = targetGroupId => {
-    window.open(`${SALES_TARGETS}?targetGroupId=${targetGroupId}`);
-  };
-
-  const goToTargetGroup = () => {
-    window.open(SALES_TARGETS);
-  };
-  const onSubmit = () => {
-    // filter out the target groups that do not have any selected targets to use it on actvity reward currency limit screen
-    setSelectedTargets(selectedLocalTargets);
-    // update the target group listing
-    const targetGroupsWithSelectedTargets = targetGroupsData.filter(
-      group =>
-        Object.keys(selectedLocalTargets).includes(String(group.id)) &&
-        selectedLocalTargets[group.id]?.length,
-    );
-    setSelectedTargetGroupsData(targetGroupsWithSelectedTargets);
-    close();
-  };
-
-  const getKeyValueContent = (label, value) => (
-    <CapRow className="flex" key={label}>
-      <CapLabel type="label3">{label}</CapLabel>
-      <CapLabel type="label2" className="left-spacing">
-        {label.toLowerCase() === 'allocated till'
-          ? getTillCode(tills, value)
-          : value}
-      </CapLabel>
-    </CapRow>
-  );
-
-  const TargetGroupContent = ({ values }) =>
-    values.map(({ key, value }) => (
-      <CapColumn span="12" className="column-margin">
-        {getKeyValueContent(key, value)}
-      </CapColumn>
-    ));
-
-  const getTitleContent = name => (
-    <>
-      <StatusColor colorType="green" />
-      <CapLabel type="label16" className="left-spacing">
-        {name}
-      </CapLabel>
-    </>
-  );
-
-  const getRightCollapsibleContent = targetGroupId => (
-    <FormattedMessage
-      {...messages.targetSelected}
-      values={{
-        value: (
-          <CapLabel type="label15" className="right-content">
-            {`${selectedLocalTargets?.[targetGroupId]?.length || 0}`}
-          </CapLabel>
-        ),
-      }}
-    />
-  );
-
-  const checkIfDisabled = () => {
-    const length = Object.keys(selectedLocalTargets).reduce((sum, id) => {
-      sum = Number(sum) + Number(selectedLocalTargets[id].length);
-      return sum;
-    }, 0);
-    if (length > 3) return true;
-    else return false;
-  };
-
-  const TargetListView = ({ targetGroup }) =>
-    targetGroup?.targets?.map((target, index) => (
-      <>
-        {index !== 0 && <CapDivider className="divider" />}
-        <CapRow key={target?.id} className="target-content">
-          <CapCheckbox
-            checked={selectedLocalTargets?.[targetGroup.id]?.includes(
-              target.id,
-            )}
-            className="target-checkbox"
-            id={target.id}
-            onChange={() => handleTargetChange(target, targetGroup.id)}
-          >
-            <CapHeading type="h5">{target.name}</CapHeading>
-          </CapCheckbox>
-          <CapRow className="margin-left-42">
-            <TargetGroupContent values={target?.values || []} />
-          </CapRow>
-        </CapRow>
-      </>
-    ));
-
-  const TargetGroupListView = () => (
-    <CapRow>
-      <CapSpin spinning={showSpin}>
-        <CapAlert
-          className="select-target-alert"
-          message={<FormattedMessage {...messages.selectTargetInfo} />}
-          type="info"
-        />
-        {targetGroupsData.map(targetGroup => {
-          return (
-            <CollapsableContent
-              inlineWithParent
-              dividerClassName="outer-divider"
-              key={targetGroup.id}
-              value={targetGroup.id}
-              title={getTitleContent(targetGroup.name || '')}
-              isOpen={openContent === targetGroup.id}
-              rightContent={getRightCollapsibleContent(targetGroup.id)}
-              changeOpen={e => handleCollapsibleContentClick(e, targetGroup)}
-            >
-              <CapRow key={targetGroup.id}>
-                <TargetGroupContent values={targetGroup?.values || []} />
-              </CapRow>
-
-              {!targetGroup?.targets?.length ? (
-                <CapRow className="target-content">
-                  <NoTargetView
-                    onClick={() => goToAddTarget(targetGroup.id)}
-                    goToText={formatMessage(messages.goToAddTarget)}
-                    image={penguinImage}
-                    hasButton={false}
-                    title={formatMessage(messages.noTargetsCreated)}
-                    description={formatMessage(messages.noTargetsDescription, {
-                      value: targetGroup.name,
-                    })}
-                  />
-                </CapRow>
-              ) : (
-                <TargetListView targetGroup={targetGroup} />
-              )}
-            </CollapsableContent>
-          );
-        })}
-      </CapSpin>
-    </CapRow>
-  );
-
-  const sliderHeader = (
-    <CapHeading type="h2" className="select-target-header">
-      {formatMessage(globalMessages.selectTarget)}
-      <CapIcon
-        size="s"
-        type="refreshCircle"
-        className="targets-groups-refresh-icon"
-        onClick={onRefresh}
-        aria-label="refresh-circle"
-      />
-    </CapHeading>
-  );
-
-  const showSpin =
-    getTargetGroupsStatus === REQUEST ||
-    getMultipleTargetsStatus === REQUEST ||
-    getTargetsStatus === REQUEST;
-
-  const errorClass = checkIfDisabled() ? 'error-color' : '';
-
-  const getSliderContent = () => (
-    <CapRow className="select-slider-content">
-      <CapSpin spinning={showSpin}>
-        {targetGroupsData?.length ? (
-          <TargetGroupListView />
-        ) : (
-          <NoTargetView
-            goToText={formatMessage(messages.goToTargetGroup)}
-            image={noTargetGroupIllustration}
-            hasButton={false}
-            title={formatMessage(messages.noTargetGroupsCreated)}
-            description={formatMessage(messages.noTargetGroupsDescription)}
-            onClick={goToTargetGroup}
-          />
-        )}
-      </CapSpin>
-    </CapRow>
-  );
-  return (
-    <CapRow className={className}>
-      <CapSlideBox
-        className="select-target-slidebox"
-        showShadow
-        show={show}
-        size="size-m"
-        header={sliderHeader}
-        content={getSliderContent()}
-        footer={
-          <CapTooltip title={formatMessage(messages.maxMilestoneLimit)}>
-            <CapRow type="flex" align="middle">
-              <CapButton
-                className="continue-btn"
-                onClick={onSubmit}
-                disabled={showSpin || checkIfDisabled()}
-              >
-                {formatMessage(globalMessages.done)}
-              </CapButton>
-              <CapLabel className={classnames('left-spacing', errorClass)}>
-                <FormattedMessage
-                  {...messages.targetSelected}
-                  values={{
-                    value: (
-                      <CapLabel
-                        type="label15"
-                        className={classnames('right-content', errorClass)}
-                      >
-                        {getTargetsSelectedCount(selectedLocalTargets)}
-                      </CapLabel>
-                    ),
-                  }}
-                />
-              </CapLabel>
-            </CapRow>
-          </CapTooltip>
-        }
-        handleClose={close}
-      />
-    </CapRow>
-  );
-};
-
-SelectTargetSlider.propTypes = {
-  intl: intlShape.isRequired,
-  show: PropTypes.bool,
-  close: PropTypes.func,
-  className: PropTypes.string,
-  targetGroupData: PropTypes.object,
-  targetsData: PropTypes.object,
-};
-
-const mapStateToProps = createStructuredSelector({
-  targetGroupData: makeSelectTargetGroups(),
-});
-
-function mapDispatchToProps(dispatch) {
-  return {
-    targetPointAllocationActions: bindActionCreators(
-      targetPointAllocationActions,
-      dispatch,
-    ),
-  };
-}
-const withConnect = connect(
-  mapStateToProps,
-  mapDispatchToProps,
-);
-
-export default compose(
-  withErrorBoundary,
-  withConnect,
-)(injectIntl(withStyles(SelectTargetSlider, styles)));

package/components/organisms/SelectTargetSlider/index.js

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

package/components/organisms/SelectTargetSlider/messages.js

@@ -1,126 +0,0 @@
-/*
- * SelectTargetSlider Messages
- *
- * This contains all the texts for the SelectTargetSlider component.
- */
-
-import { defineMessages } from 'react-intl';
-
-export const scope = 'loyaltyPlus.components.organisms.SelectTargetSlider';
-
-export default defineMessages({
-  activityRewardCurrencyLimit: {
-    id: `${scope}.activityRewardCurrencyLimit`,
-    defaultMessage: 'Activity reward currency limit',
-  },
-  optional: {
-    id: `${scope}.optional`,
-    defaultMessage: '(Optional)',
-  },
-  noOfScopes: {
-    id: `${scope}.noOfScopes`,
-    defaultMessage: `No. of scopes: {value}`,
-  },
-  cartLevel: {
-    id: `${scope}.cartLevel`,
-    defaultMessage: `Cart Level {value}`,
-  },
-  customerLevel: {
-    id: `${scope}.customerLevel`,
-    defaultMessage: `Customer Level {value}`,
-  },
-  countdownText: {
-    id: `${scope}.countdownText`,
-    defaultMessage: `The draft will be discarded in`,
-  },
-  rewardLimitSelected: {
-    id: `${scope}.rewardLimitSelected`,
-    defaultMessage: `Rewards limit selected {value}`,
-  },
-  targetSelected: {
-    id: `${scope}.targetSelected`,
-    defaultMessage: `Milestone selected {value}`,
-  },
-  cartLevelLimits: {
-    id: `${scope}.cartLevelLimits`,
-    defaultMessage: 'Cart level limits',
-  },
-  maximumPointsInSinglePurchase: {
-    id: `${scope}.maximumPointsInSinglePurchase`,
-    defaultMessage: 'Maximum points a customer can earn in a single purchase',
-  },
-  example10: {
-    id: `${scope}.example10`,
-    defaultMessage: 'Eg: 10',
-  },
-  example20: {
-    id: `${scope}.example20`,
-    defaultMessage: 'Eg: 20',
-  },
-  maximumPointsInSingleActivity: {
-    id: `${scope}.maximumPointsInSingleActivity`,
-    defaultMessage: 'Max rewards a customer can earn in a single activity',
-  },
-  addTransaction: {
-    id: `${scope}.addTransaction`,
-    defaultMessage: 'Add transaction',
-  },
-  noTargetGroupsCreated: {
-    id: `${scope}.noTargetGroupsCreated`,
-    defaultMessage: 'No milestones created',
-  },
-  noTargetGroupsDescription: {
-    id: `${scope}.noTargetGroupsDescription`,
-    defaultMessage:
-      'Your org does not have any existing milestone to link. Please create a new milestone group first',
-  },
-  noTargetsDescription: {
-    id: `${scope}.noTargetsDescription`,
-    defaultMessage: '{value} does not have any milestones added',
-  },
-  noTargetsCreated: {
-    id: `${scope}.noTargetsCreated`,
-    defaultMessage: 'No milestones defined',
-  },
-  selectTargetInfo: {
-    id: `${scope}.selectTargetInfo`,
-    defaultMessage:
-      'One Milestone will be considered as one criteria. User can select multiple Milestones, where each Milestone will act as independent criteria',
-  },
-  totalPointsError: {
-    id: `${scope}.totalLimitError`,
-    defaultMessage:
-      'Total points value should be more than or equal to regular and promotional points',
-  },
-  regularPointsError: {
-    id: `${scope}.regularPointsError`,
-    defaultMessage:
-      'Regular points value should be less than or equal to total points',
-  },
-  promotionalPointsError: {
-    id: `${scope}.promotionalPointsError`,
-    defaultMessage:
-      'Promotional points value should be less than or equal to total points',
-  },
-  storesTooltip: {
-    id: `${scope}.storesTooltip`,
-    defaultMessage:
-      'current transaction value > {value} AND current transaction date is in between {startDate} - {endDate} OR current transaction product category is {category}',
-  },
-  goToAddTarget: {
-    id: `${scope}.goToAddTarget`,
-    defaultMessage: 'Go to add milestone',
-  },
-  goToTargetGroup: {
-    id: `${scope}.goToTargetGroup`,
-    defaultMessage: 'Go to milestone group',
-  },
-  activityRewardCurrencyLimitAdded: {
-    id: `${scope}.activityRewardCurrencyLimitAdded`,
-    defaultMessage: 'Activity reward currency limit added',
-  },
-  maxMilestoneLimit: {
-    id: `${scope}.maxMilestoneLimit`,
-    defaultMessage: 'Maximum milestone limit: 3',
-  },
-});