@capillarytech/creatives-library 1.0.2 → 2.0.0

package/components/organisms/ReturnConditions/reducer.js

@@ -1,35 +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({
-  upsertReturnStatus: '',
-  upsertReturnData: [],
-  upsertReturnError: null,
-});
-
-const upsertRedeemReducer = (state = initialState, action) => {
-  switch (action.type) {
-    case types.CREATE_RETURN_CONDITION_REQUEST:
-      return state
-        .set('upsertReturnStatus', REQUEST)
-        .set('upsertReturnData', fromJS([]))
-        .set('upsertReturnError', null);
-    case types.CREATE_RETURN_CONDITION_SUCCESS:
-      return state
-        .set('upsertReturnStatus', SUCCESS)
-        .set('upsertReturnData', action.result);
-    case types.CREATE_RETURN_CONDITION_FAILURE:
-      return state
-        .set('upsertReturnStatus', FAILURE)
-        .set('upsertReturnError', action.error);
-    case types.CLEAR_DATA:
-      return initialState;
-    default:
-      return state;
-  }
-};
-
-export default upsertRedeemReducer;

package/components/organisms/ReturnConditions/saga.js

@@ -1,34 +0,0 @@
-import { all, call, put, takeLatest } from 'redux-saga/effects';
-import { notifyHandledException } from 'utils/bugsnag';
-import * as Api from '../../../services/api';
-
-import * as types from './constants';
-
-export function* upsertReturnStrategy({ programId, payload, callback }) {
-  try {
-    const res = yield call(Api.upsertReturnStrategy, programId, payload);
-    if (res?.success) {
-      yield put({
-        type: types.CREATE_RETURN_CONDITION_SUCCESS,
-        result: res?.result || [],
-      });
-      if (callback) callback(res);
-    } else {
-      yield put({
-        type: types.CREATE_RETURN_CONDITION_FAILURE,
-        error: res?.status?.message,
-      });
-    }
-  } catch (error) {
-    notifyHandledException(error);
-    yield put({ type: types.CREATE_RETURN_CONDITION_FAILURE, error });
-  }
-}
-
-export function* watchForUpsertReturnStrategy() {
-  yield takeLatest(types.CREATE_RETURN_CONDITION_REQUEST, upsertReturnStrategy);
-}
-
-export default function*() {
-  yield all([watchForUpsertReturnStrategy()]);
-}

package/components/organisms/ReturnConditions/selectors.js

@@ -1,21 +0,0 @@
-import { fromJS } from 'immutable';
-import { createSelector } from 'reselect';
-import { initialState } from '../StrategyDashboard/reducer';
-
-/**
- * Direct selector to the Strategy state domain
- */
-
-const selectUpsertReturnDomain = (state = fromJS({})) =>
-  state.get('upsertReturn', initialState);
-
-/**
- * Default selector used by Strategy
- */
-
-const makeSelectUpsertReturn = () =>
-  createSelector(selectUpsertReturnDomain, (substate = fromJS({})) =>
-    substate.toJS(),
-  );
-
-export { selectUpsertReturnDomain, makeSelectUpsertReturn };

package/components/organisms/ReturnConditions/style.js

@@ -1,38 +0,0 @@
-import styled, { css } from 'styled-components';
-import StyledVars from '@capillarytech/cap-ui-library/styled';
-import CapSelect from '@capillarytech/cap-ui-library/CapSelect';
-import CapTable from '@capillarytech/cap-ui-library/CapTable';
-
-export const {
-  CAP_SPACE_24,
-  CAP_SPACE_04,
-  CAP_SPACE_08,
-  CAP_G18,
-  FONT_COLOR_01,
-} = StyledVars;
-
-export const FlexWithMargin = styled.div`
-  display: flex;
-  justify-content: flex-start;
-  margin-bottom: ${CAP_SPACE_24};
-`;
-
-export const AllocationSelect = styled(CapSelect)`
-  width: 50%;
-  margin-right: ${CAP_SPACE_24};
-`;
-
-export const CapTableWithMargin = styled(CapTable)`
-  margin: ${CAP_SPACE_24} 0;
-`;
-
-export const styles = css`
-  .return-strategy-condition-name-text-more-space {
-    padding: 2px 0;
-  }
-  .info-icon-return-expiry {
-    position: relative;
-    top: -4px;
-    left: -245px;
-  }
-`;

package/components/organisms/ReturnStrategy/ReturnStrategy.js

@@ -1,465 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { injectIntl, intlShape } from 'react-intl';
-import CapRow from '@capillarytech/cap-ui-library/CapRow';
-import CapTable from '@capillarytech/cap-ui-library/CapTable';
-import CapHeader from '@capillarytech/cap-ui-library/CapHeader';
-import CapHeading from '@capillarytech/cap-ui-library/CapHeading';
-import CapDivider from '@capillarytech/cap-ui-library/CapDivider';
-import CapButton from '@capillarytech/cap-ui-library/CapButton';
-import CapTooltip from '@capillarytech/cap-ui-library/CapTooltip';
-import CapIcon from '@capillarytech/cap-ui-library/CapIcon';
-import classnames from 'classnames';
-import withStyles from 'utils/withStyles';
-import { find } from 'lodash';
-import messages from './messages';
-import {
-  formatMessageHandler,
-  getPeriodExpiryValue,
-} from '../../../utils/commonUtils';
-import globalMessages from '../../pages/Cap/messages';
-import * as globalStyle from '../../pages/Cap/style';
-import * as style from './style';
-import * as constants from './constants';
-import * as appConstants from '../../pages/App/constants';
-import TableOption from '../../molecules/TableOption';
-import StrategiesTag from '../../molecules/StrategiesTag';
-import EllipsisText from '../../atoms/EllipsisText';
-import withErrorBoundary from 'utils/withErrorBoundary';
-
-const { Flex, FlexApart } = globalStyle;
-const { styles } = style;
-const { HIGHLIGHTED_WORKFLOW } = constants;
-const {
-  STRATEGY_NAME,
-  WORKFLOW,
-  TIER,
-  SLAB_INDEPENDENT,
-  POINTS_EXPIRY_PERIOD,
-  EDIT,
-  POINTS_RETURN_MODE_MAP,
-} = appConstants;
-
-export const ReturnStrategy = ({
-  intl: { formatMessage },
-  returnStrategyDetails,
-  expiryStrategyDetails,
-  className,
-  currentProgram,
-  isEditable,
-  buttonAction,
-  buttonDescription,
-  onOptionClick,
-}) => {
-  const columns = [
-    {
-      title: formatMessage(globalMessages.pointsReturnBasedOn),
-      width: '25%',
-      dataKey: 'pointsReissualMode',
-      columnType: HIGHLIGHTED_WORKFLOW,
-    },
-    {
-      title: formatMessage(globalMessages.conditionName),
-      description: formatMessage(globalMessages.description),
-      width: '20%',
-      dataKey: 'name',
-      dataValue: 'description',
-      columnType: STRATEGY_NAME,
-    },
-    {
-      title: formatMessage(globalMessages.tier),
-      width: '17%',
-      dataKey: 'expiryType',
-      columnType: TIER,
-    },
-    {
-      title: formatMessage(globalMessages.pointExpiryPeriod),
-      width: '38%',
-      dataKey: 'pointExpiryPeriod',
-      columnType: POINTS_EXPIRY_PERIOD,
-    },
-  ];
-
-  const editableColumn = [
-    {
-      title: formatMessage(globalMessages.pointsReturnBasedOn),
-      width: '20%',
-      dataKey: 'pointsReissualMode',
-      columnType: HIGHLIGHTED_WORKFLOW,
-    },
-    {
-      title: formatMessage(globalMessages.conditionName),
-      description: formatMessage(globalMessages.description),
-      width: '20%',
-      dataKey: 'name',
-      dataValue: 'description',
-      columnType: STRATEGY_NAME,
-    },
-    {
-      title: formatMessage(globalMessages.tier),
-      width: '17%',
-      dataKey: 'expiryType',
-      columnType: TIER,
-    },
-    {
-      title: formatMessage(globalMessages.pointExpiryPeriod),
-      width: '33%',
-      dataKey: 'pointExpiryPeriod',
-      columnType: POINTS_EXPIRY_PERIOD,
-    },
-    {
-      width: '10%',
-      key: 'more',
-      dataIndex: 'more',
-      render: () => <CapIcon type="more" />,
-    },
-  ];
-
-  const getOption = rowData => {
-    function handleEditClick() {
-      onEditClick(rowData);
-    }
-    return (
-      <TableOption
-        onEditClick={handleEditClick}
-        className="lp-menu-config-points"
-      />
-    );
-  };
-  const onEditClick = rowData => onOptionClick(EDIT, rowData);
-
-  const prepareReturnStrategyDetailDataSource = (
-    returnStrategyDetails = [],
-  ) => {
-    let returnIssualEnabled = true;
-    const returnStrategies = returnStrategyDetails.map(
-      ({
-        id,
-        propertyValues: {
-          expiry_strategy = '',
-          points_reissual_mode = '',
-          is_reissual_enabled = '',
-        },
-      }) => {
-        if (is_reissual_enabled === false || is_reissual_enabled === 'false') {
-          returnIssualEnabled = false;
-          return;
-        }
-        const { name, description, ...selectedExpiryStrategy } =
-          find(
-            expiryStrategyDetails,
-            strategy => strategy.id?.toString() === expiry_strategy?.toString(),
-          ) || {};
-        return {
-          id,
-          name,
-          description,
-          pointsReissualMode: formatMessageHandler(
-            formatMessage,
-            globalMessages[POINTS_RETURN_MODE_MAP[points_reissual_mode]],
-            points_reissual_mode,
-          ),
-          expiryStrategy: selectedExpiryStrategy,
-          workflow: 'N/A',
-          slabs: currentProgram.slabs,
-          expiryType: selectedExpiryStrategy?.propertyValues?.expiry_type,
-          pointExpiryPeriod: {
-            expiryTimeUnits:
-              selectedExpiryStrategy?.propertyValues?.expiry_time_units,
-            expiryTimeValues:
-              selectedExpiryStrategy?.propertyValues?.expiry_time_values,
-          },
-        };
-      },
-    );
-    return !returnIssualEnabled ? [] : returnStrategies;
-  };
-
-  //modifiedDataSource is used for passing it in tableProps for table rendering. There is no actual conversion of the structure.
-  const modifiedDatasource = prepareReturnStrategyDetailDataSource(
-    returnStrategyDetails,
-  );
-
-  const getColumnTitle = (title, description) => (
-    <CapRow className="return-strategy-table-header-row">
-      <CapHeader size="small" title={title} description={description} />
-    </CapRow>
-  );
-
-  const getColumnProps = (
-    { description, title, dataKey, dataValue, columnType, width },
-    index,
-  ) => ({
-    title: getColumnTitle(title, description),
-    dataIndex: dataKey,
-    dataValue,
-    key: dataKey + index,
-    width: width,
-    render: (text, returnStrategyDetail) =>
-      getColumnByType(columnType, returnStrategyDetail, dataKey, dataValue),
-  });
-
-  const getColumnByType = (
-    columnType,
-    returnStrategyDetail,
-    dataKey,
-    dataValue,
-  ) => {
-    switch (columnType) {
-      case STRATEGY_NAME:
-        return getStrategyName(
-          returnStrategyDetail[dataKey],
-          returnStrategyDetail[dataValue],
-        );
-      case WORKFLOW:
-        return getWorkFlow(returnStrategyDetail[dataKey]);
-      case HIGHLIGHTED_WORKFLOW:
-        return getHighlightedWorkFlow(returnStrategyDetail[dataKey]);
-      case TIER:
-        return getTiers(returnStrategyDetail);
-      case POINTS_EXPIRY_PERIOD:
-        return getPointsExpiryPeriod(returnStrategyDetail);
-      default:
-        return getOption(returnStrategyDetail);
-    }
-  };
-
-  const renderCellValue = (val = '', prefix = '') => {
-    if (!prefix && val) {
-      return (
-        <CapHeading type="label2" className="align-items-center">
-          <StrategiesTag text={val} padding={0} defaultColor="transparent" />
-        </CapHeading>
-      );
-    }
-    return (
-      <CapHeading type="label2" className={classnames('truncate-text')}>
-        {prefix && !val && <EllipsisText title={prefix} />}
-        {prefix &&
-          val && (
-            <Flex>
-              <CapHeading
-                type="label2"
-                className={classnames(
-                  'align-items-center',
-                  'half-max-width',
-                  'auto-width',
-                )}
-              >
-                <EllipsisText title={prefix} />
-              </CapHeading>
-              <StrategiesTag
-                width="auto"
-                showMarginLeft
-                text={val}
-                padding={0}
-                defaultColor="transparent"
-              />
-            </Flex>
-          )}
-      </CapHeading>
-    );
-  };
-
-  const getTiers = ({ slabs = [], expiryType }) =>
-    expiryType === SLAB_INDEPENDENT ? (
-      <CapHeading type="label2" className="align-items-center">
-        <StrategiesTag text={formatMessage(globalMessages.allTiers)} />
-      </CapHeading>
-    ) : (
-      <div className="strategy-flex-col-gap">
-        <StrategiesTag slabs={slabs} />
-      </div>
-    );
-
-  const getPointsExpiryPeriod = ({
-    slabs = [],
-    expiryType,
-    pointExpiryPeriod: { expiryTimeUnits = '', expiryTimeValues = '' },
-  }) => {
-    const expiryTimeUnitsArr = expiryTimeUnits.split(',');
-    const expiryTimeValuesArr = expiryTimeValues.split(',');
-    let pointsExpiryObj = [];
-    if (expiryType === SLAB_INDEPENDENT) {
-      pointsExpiryObj[0] = getPeriodExpiryValue({
-        unit: expiryTimeUnitsArr[0],
-        formatMessage,
-        expiryTimeValuesArr,
-        index: 0,
-      });
-    } else {
-      slabs.map((slab, index) => {
-        pointsExpiryObj[index] = getPeriodExpiryValue({
-          unit: expiryTimeUnitsArr[index],
-          formatMessage,
-          expiryTimeValuesArr,
-          index,
-        });
-      });
-    }
-    const value = expiryTimeValuesArr[0] || '';
-    const suffix = pointsExpiryObj[0]?.suffix;
-    return expiryType === SLAB_INDEPENDENT ? (
-      renderCellValue(
-        suffix ? `${value} ${suffix}` : value,
-        pointsExpiryObj[0]?.prefix,
-      )
-    ) : (
-      <div className="strategy-flex-col-gap">
-        {React.Children.toArray(
-          slabs.map((slab, index) => {
-            const slabValue = expiryTimeValuesArr[index];
-            const slabSuffix = pointsExpiryObj[index]?.suffix;
-            return renderCellValue(
-              slabSuffix ? `${slabValue} ${slabSuffix}` : slabValue,
-              pointsExpiryObj[index]?.prefix,
-            );
-          }),
-        )}
-      </div>
-    );
-  };
-
-  const getStrategyContent = (dataKey, dataValue) => (
-    <CapHeader
-      size="regular"
-      title={
-        <CapHeading type="h4" className={classnames('truncate-text')}>
-          <EllipsisText title={dataKey} />
-        </CapHeading>
-      }
-      description={
-        <CapHeading type="label1" className={classnames('truncate-text')}>
-          <EllipsisText title={dataValue} />
-        </CapHeading>
-      }
-    />
-  );
-
-  const getStrategyName = (dataKey, dataValue) => (
-    <CapRow>{getStrategyContent(dataKey, dataValue)}</CapRow>
-  );
-
-  const getWorkflowContent = dataKey => (
-    <CapHeader
-      size="regular"
-      titleClass="return-strategy-condition-name"
-      title={
-        <CapHeading
-          type="h5"
-          className={classnames(
-            'return-strategy-condition-name-text',
-            'truncate-text',
-          )}
-        >
-          <EllipsisText title={dataKey} />
-        </CapHeading>
-      }
-    />
-  );
-
-  const getWorkFlow = dataKey => (
-    <CapRow className="return-strategy-table-row">
-      {getWorkflowContent(dataKey)}
-    </CapRow>
-  );
-
-  const getColumns = isEditable =>
-    !isEditable
-      ? columns.map((columnData, index) => getColumnProps(columnData, index))
-      : editableColumn.map((columnData, index) =>
-          getColumnProps(columnData, index),
-        );
-
-  const getHighlightedWorkFlow = dataKey => (
-    <CapRow className="return-strategy-table-row">
-      <StrategiesTag text={dataKey} padding={0} defaultColor="transparent" />
-    </CapRow>
-  );
-
-  const tableProps = {
-    columns: getColumns(isEditable),
-    dataSource: modifiedDatasource,
-    rowClassName: 'view-message',
-    scroll: {
-      y: 350,
-    },
-    locale: {
-      emptyText: formatMessage(messages.noReturnStrategy),
-    },
-    pagination: false,
-    rowKey: 'id',
-    id: 'returnStrategyListTable',
-    showLoader: false,
-  };
-
-  return (
-    <CapRow className={classnames(className)}>
-      <FlexApart>
-        <CapHeader
-          size="regular"
-          titleClass="return-strategy-title-name"
-          title={
-            <CapHeading type="h3" className="truncate-text">
-              {formatMessage(messages.returnTitle)}
-            </CapHeading>
-          }
-          description={
-            <CapHeading
-              type="label3"
-              className={classnames('truncate-text', 'padding-bottom-24')}
-            >
-              {formatMessage(messages.returnDescription)}
-            </CapHeading>
-          }
-        />
-        {isEditable && !modifiedDatasource.length ? (
-          <CapButton
-            onClick={buttonAction}
-            isAddBtn
-            type="flat"
-            className="lp-btn-config-add-points"
-          >
-            {buttonDescription}
-          </CapButton>
-        ) : null}
-      </FlexApart>
-      {!returnStrategyDetails.length && isEditable ? <CapDivider /> : null}
-      {!!returnStrategyDetails.length || !isEditable ? (
-        <CapTable {...tableProps} />
-      ) : null}
-    </CapRow>
-  );
-};
-
-ReturnStrategy.defaultProps = {
-  currentProgram: {},
-  expiryStrategyDetails: [],
-  returnStrategyDetails: [],
-  isEditable: false,
-  buttonAction: () => {},
-  buttonDescription: '',
-  onOptionClick: () => {},
-};
-
-ReturnStrategy.propTypes = {
-  intl: intlShape.isRequired,
-  className: PropTypes.string,
-  returnStrategyDetails: PropTypes.array,
-  slabs: PropTypes.array,
-  expiryType: PropTypes.string,
-  currentProgram: PropTypes.object,
-  expiryStrategyDetails: PropTypes.array,
-  pointExpiryPeriod: PropTypes.object,
-  isEditable: PropTypes.bool,
-  buttonAction: PropTypes.func,
-  buttonDescription: PropTypes.string,
-  onOptionClick: PropTypes.func,
-};
-
-export default withErrorBoundary(
-  injectIntl(withStyles(ReturnStrategy, styles)),
-  {
-    useStyle: true,
-  },
-);

package/components/organisms/ReturnStrategy/constants.js

@@ -1,7 +0,0 @@
-/*
- *
- * ReturnStrategy constants
- *
- */
-
-export const HIGHLIGHTED_WORKFLOW = 'HIGHLIGHTED_WORKFLOW';

package/components/organisms/ReturnStrategy/index.js

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

package/components/organisms/ReturnStrategy/messages.js

@@ -1,36 +0,0 @@
-/*
- * ReturnStrategy Messages
- *
- * This contains all the text for the ReturnStrategy component.
- */
-
-import { defineMessages } from 'react-intl';
-
-export const scope = 'loyaltyPlus.components.organisms.ReturnStrategy';
-
-export default defineMessages({
-  noReturnStrategy: {
-    id: `${scope}.noReturnStrategy`,
-    defaultMessage: 'No return strategy found.',
-  },
-  returnTitle: {
-    id: `${scope}.returnTitle`,
-    defaultMessage: 'Return Conditions',
-  },
-  returnDescription: {
-    id: `${scope}.returnDescription`,
-    defaultMessage: 'Define how redeemed points will get reinstated if the transaction where the redemption happened is returned',
-  },
-  eventDate: {
-    id: `${scope}.eventDate`,
-    defaultMessage: 'Event date',
-  },
-  rollingFromEventDate: {
-    id: `${scope}.rollingFromEventDate`,
-    defaultMessage: 'Rolling expiry from event date',
-  },
-  membershipExpiryDate: {
-    id: `${scope}.membershipExpiryDate`,
-    defaultMessage: 'Membership event date',
-  },
-});

package/components/organisms/ReturnStrategy/style.js

@@ -1,14 +0,0 @@
-import { css } from 'styled-components';
-import * as styledVars from '@capillarytech/cap-ui-library/styled/variables';
-
-const { CAP_SPACE_28, CAP_SPACE_32 } = styledVars;
-
-export const styles = css`
-  .return-strategy-table-header-row {
-    min-height: ${CAP_SPACE_28};
-  }
-
-  .return-strategy-title-name {
-    margin-top: ${CAP_SPACE_32};
-  }
-`;

package/components/organisms/ReturnStrategy/tests/ReturnStrategy.test.js

@@ -1,5 +0,0 @@
-describe('<UpgradeCommunication />', () => {
-  it('Expect to have unit tests specified', () => {
-    expect(true).toEqual(true);
-  });
-});