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

package/components/organisms/PartnerProgramDashboard/PartnerProgramDashboard.js

@@ -1,416 +0,0 @@
-import React, { useState, useMemo } from 'react';
-import useDeepCompareEffect from 'use-deep-compare-effect';
-import { injectIntl } from 'react-intl';
-import { withRouter } from 'react-router-dom';
-import { compose, bindActionCreators } from 'redux';
-import { connect } from 'react-redux';
-import { createStructuredSelector } from 'reselect';
-import moment from 'moment';
-import { withErrorBoundary } from 'react-error-boundary';
-import clearDataOnUnmount from 'utils/clearDataOnUnmount';
-
-import CapRow from '@capillarytech/cap-ui-library/CapRow';
-import CapTable from '@capillarytech/cap-ui-library/CapTable';
-import CapHeading from '@capillarytech/cap-ui-library/CapHeading';
-import CapHeader from '@capillarytech/cap-ui-library/CapHeader';
-import CapIcon from '@capillarytech/cap-ui-library/CapIcon';
-import CapDropdown from '@capillarytech/cap-ui-library/CapDropdown';
-import CapMenu from '@capillarytech/cap-ui-library/CapMenu';
-import CustomSkeleton from '../../atoms/CustomSkeleton';
-
-import EmptyStateIllustration from '../../molecules/EmptyStateIllustration';
-import emptyImage from '../../../assets/atoms-illustration.png';
-import EllipsisText from '../../atoms/EllipsisText';
-import AddPartnerPrograms from '../../molecules/AddPartnerPrograms';
-
-import injectSaga from '../../../utils/injectSaga';
-import injectReducer from '../../../utils/injectReducer';
-import withStyles from '../../../utils/withStyles';
-
-import {
-  makeSelectSupplementaryProgramsDetails,
-  makeSelectExternalProgramsDetails,
-  makeSelectPartnerProgramDetails,
-} from './selectors';
-import reducer from './reducer';
-import saga from './saga';
-import * as actions from './actions';
-
-import globalMessages from '../../pages/Cap/messages';
-import messages from './messages';
-import { EDIT } from './constants';
-import {
-  SUPPLEMENTARY_PROGRAM,
-  EXTERNAL_PROGRAM,
-} from '../../pages/ProgramSummary/constants';
-import {
-  LOCALE_DATE_FORMAT,
-  REQUEST,
-  FAILURE,
-} from '../../pages/App/constants';
-
-import { styles, StyledSearch, AddButton, SaveButton } from './style';
-import { partnerProgramDataModifier } from './utils';
-import { Provider } from './context';
-
-export const PartnerProgramDashboard = props => {
-  const {
-    mode,
-    supplementaryProgramDetails = [],
-    externalProgramDetails = [],
-    partnerProgramData = {
-      getAllPartnerProgramStatus: '',
-      partnerProgramDetails: [],
-    },
-    actions,
-    showNext,
-    type = SUPPLEMENTARY_PROGRAM,
-    match,
-    intl: { formatMessage },
-    className,
-  } = props;
-  const {
-    getAllPartnerProgramStatus,
-    partnerProgramDetails,
-  } = partnerProgramData;
-  let {
-    params: { programId },
-  } = match;
-  //usestate to get validation message for expiry reminder
-  const [isExpiryReminderError, setIsExpiryReminderError] = useState(false);
-  const handleSaveButtonClick = () => {
-    // dispatch action here to save the partner programs
-    showNext();
-  };
-
-  useDeepCompareEffect(
-    () => {
-      if (getAllPartnerProgramStatus === '') {
-        actions.getAllPartnerPrograms(programId);
-      }
-    },
-    [
-      partnerProgramDetails,
-      getAllPartnerProgramStatus,
-      actions,
-      programId,
-    ],
-  );
-
-  const [searchValue, setSearchValue] = useState('');
-  const [
-    showAddSupplementaryPrograms,
-    setShowAddSupplementaryPrograms,
-  ] = useState(false);
-  const [partnerProgramId, setPartnerProgramId] = useState(null);
-  const handleShowAddSupplementaryPrograms = () =>
-    setShowAddSupplementaryPrograms(true);
-
-  const handleCloseAddSupplementaryPrograms = () => {
-    setShowAddSupplementaryPrograms(false);
-    setPartnerProgramId(null);
-  };
-
-  const handleSearchValueChange = event => {
-    setSearchValue(event.target.value);
-  };
-
-  const getColumnTitle = (title, subTitle) => {
-    if (subTitle)
-      return <CapHeader size="small" title={title} description={subTitle} />;
-    return <CapHeader size="small" title={title} />;
-  };
-
-  const getTableContent = (mainContent, subContent) => (
-    <CapRow>
-      <CapHeader
-        size="regular"
-        title={
-          <CapHeading type="h4">
-            <EllipsisText title={mainContent} />
-          </CapHeading>
-        }
-        description={
-          <CapHeading type="label1">
-            <EllipsisText title={subContent} />
-          </CapHeading>
-        }
-      />
-    </CapRow>
-  );
-
-  const getDescription = text => (
-    <CapRow className="ellipsis-text-container">
-      <EllipsisText title={text} />
-    </CapRow>
-  );
-
-  // const getExpiryDate = text => (
-  //   <CapRow>
-  //     <EllipsisText title={text} />
-  //   </CapRow>
-  // );
-
-  const getEdit = partnerProgramId => {
-    const onClick = () => {
-      setPartnerProgramId(partnerProgramId);
-      handleShowAddSupplementaryPrograms();
-    };
-    const menu = (
-      <CapMenu onClick={onClick}>
-        <CapMenu.Item>{formatMessage(globalMessages.edit)}</CapMenu.Item>
-      </CapMenu>
-    );
-    return (
-      <CapDropdown overlay={menu}>
-        <CapIcon type="more" />
-      </CapDropdown>
-    );
-  };
-
-  let columns = [
-    {
-      title: getColumnTitle(
-        formatMessage(globalMessages.name),
-        formatMessage(messages.ID),
-      ),
-      width: '25%',
-      dataIndex: 'name',
-      key: 'name',
-      render: (text, record) => getTableContent(record.name, record.id),
-    },
-    {
-      title: getColumnTitle(formatMessage(globalMessages.description)),
-      width: '35%',
-      dataIndex: 'description',
-      key: 'description',
-      render: text => getDescription(text),
-    },
-    {
-      title: getColumnTitle(
-        formatMessage(messages.cyclePeriod),
-        formatMessage(messages.cycleType),
-      ),
-      width: '18%',
-      dataIndex: 'cyclePeriod',
-      key: 'cyclePeriod',
-      render: (text, record) =>
-        getTableContent(
-          record.cyclePeriod,
-          globalMessages[record.cycleType.toLowerCase()] ? formatMessage(globalMessages[record.cycleType.toLowerCase()]) :record.cycleType,
-        ),
-    },
-    {
-      title: getColumnTitle(formatMessage(messages.expiryDate)),
-      width: '15%',
-      dataIndex: 'lastUpdatedBy',
-      key: 'lastUpdatedBy',
-      render: (text, record) => {
-        return record.expiryDate
-          ? moment(record.expiryDate).format(LOCALE_DATE_FORMAT)
-          : '-';
-      },
-    },
-    // {
-    //   dataIndex: 'expiryDate',
-    //   key: 'expiryDate',
-    //   render: (text, record) =>
-    //     record.expiryDate
-    //       ? moment(record.expiryDate).format('DD MMM YYYY')
-    //       : '-',
-    // },
-  ];
-
-  if (mode === EDIT) {
-    columns.push({
-      key: 'more',
-      dataIndex: 'more',
-      width: '7%',
-      render: (text, record) => getEdit(record.id),
-    });
-    // columns = [
-    //   ...columns,
-    //   {
-    //     key: 'more',
-    //     dataIndex: 'more',
-    //     width: '7%',
-    //     render: (text, record) => getEdit(record.id),
-    //   },
-    // ];
-  }
-
-  let dataSource = useMemo(
-    () => {
-      switch (type) {
-        case SUPPLEMENTARY_PROGRAM:
-          return partnerProgramDataModifier(
-            supplementaryProgramDetails,
-            formatMessage,
-          );
-        case EXTERNAL_PROGRAM:
-          return partnerProgramDataModifier(
-            externalProgramDetails,
-            formatMessage,
-          );
-        default:
-          return [];
-      }
-    },
-    [type, supplementaryProgramDetails, externalProgramDetails, formatMessage],
-  );
-
-  const getPartnerProgramsDataSource = useMemo(
-    () =>
-      Array.isArray(dataSource) && dataSource?.length > 0
-        ? dataSource.filter(
-            data =>
-              !searchValue ||
-              data?.name.toUpperCase().indexOf(searchValue.toUpperCase()) !==
-                -1,
-          )
-        : [],
-    [searchValue, dataSource],
-  );
-
-  const onRowClick = id => {
-    if (mode !== EDIT) {
-      setPartnerProgramId(id);
-      handleShowAddSupplementaryPrograms();
-    }
-  };
-
-  const tableProps = {
-    key: 'partnerPartnerProgramTable',
-    dataSource: getPartnerProgramsDataSource,
-    columns: columns,
-    id: 'partnerPartnerProgramTable',
-    pagination: false,
-    onRow: record => ({
-      onClick: () => onRowClick(record.id),
-    }),
-    locale: {
-      emptyText: formatMessage(globalMessages.noData),
-    },
-    scroll: {
-      y: 300,
-    },
-  };
-
-  const showSpin =
-    !getAllPartnerProgramStatus || getAllPartnerProgramStatus === REQUEST;
-
-  if (showSpin === true) {
-    return (
-      <CapRow className={className}>
-        <CustomSkeleton
-          className="partner-program-skeleton"
-          isTitle
-          height="330px"
-          width="100%"
-        />
-      </CapRow>
-    );
-  }
-
-  return (
-    <CapRow className={className}>
-      <CapRow type="flex">
-        {(dataSource.length > 0 || mode === EDIT) && (
-          <StyledSearch
-            value={searchValue}
-            onChange={handleSearchValueChange}
-            placeholder={
-              type === SUPPLEMENTARY_PROGRAM
-                ? formatMessage(messages.supplementarySearchPlaceholder)
-                : formatMessage(messages.externalSearchPlaceholder)
-            }
-            allowClear={false}
-          />
-        )}
-
-        {mode === EDIT && (
-          <CapRow className="addButtonParent">
-            <AddButton
-              type="flat"
-              isAddBtn
-              onClick={handleShowAddSupplementaryPrograms}
-              // if the GET call failed, disable the add partner program button
-              disabled={getAllPartnerProgramStatus === FAILURE}
-            >
-              {type === SUPPLEMENTARY_PROGRAM
-                ? formatMessage(messages.addSupplementaryProgram)
-                : formatMessage(messages.addExternalProgram)}
-            </AddButton>
-          </CapRow>
-        )}
-      </CapRow>
-      <CapRow>
-        {Array.isArray(dataSource) &&
-        (dataSource.length > 0 || mode === EDIT) ? (
-          <CapTable {...tableProps} />
-        ) : (
-          <EmptyStateIllustration
-            title={
-              type === SUPPLEMENTARY_PROGRAM
-                ? formatMessage(messages.supplementaryEmptyMessage)
-                : formatMessage(messages.externalEmptyMessage)
-            }
-            description={formatMessage(messages.emptyMessageDescription)}
-            emptyStateImage={emptyImage}
-            descriptionPosition="bottom"
-          />
-        )}
-      </CapRow>
-
-      <CapRow>
-        {mode === EDIT && (
-          <SaveButton onClick={handleSaveButtonClick}>
-            {formatMessage(globalMessages.saveAndContinue)}
-          </SaveButton>
-        )}
-      </CapRow>
-      {showAddSupplementaryPrograms ? (
-        <Provider value={{ mode }}>
-          <AddPartnerPrograms
-            className="add-supplementary-container"
-            partnerProgramType={type}
-            show={showAddSupplementaryPrograms}
-            handleClose={handleCloseAddSupplementaryPrograms}
-            partnerProgramId={partnerProgramId}
-            setIsExpiryReminderError={setIsExpiryReminderError}
-            isExpiryReminderError={isExpiryReminderError}
-          />
-        </Provider>
-      ) : (
-        ''
-      )}
-    </CapRow>
-  );
-};
-
-const mapStateToProps = createStructuredSelector({
-  partnerProgramData: makeSelectPartnerProgramDetails(),
-  supplementaryProgramDetails: makeSelectSupplementaryProgramsDetails(),
-  externalProgramDetails: makeSelectExternalProgramsDetails(),
-});
-
-const mapDispatchToProps = dispatch => ({
-  actions: bindActionCreators(actions, dispatch),
-});
-
-const withConnect = connect(
-  mapStateToProps,
-  mapDispatchToProps,
-);
-
-const withSaga = injectSaga({ key: 'partnerProgram', saga });
-const withReducer = injectReducer({ key: 'partnerProgram', reducer });
-
-export default withErrorBoundary(
-  withRouter(
-    compose(
-      withSaga,
-      withReducer,
-      withConnect,
-    )(injectIntl(clearDataOnUnmount(withStyles(PartnerProgramDashboard, styles))))),
-);

package/components/organisms/PartnerProgramDashboard/actions.js

@@ -1,38 +0,0 @@
-import * as types from './constants';
-
-export const getAllPartnerPrograms = programId => ({
-  type: types.GET_ALL_PARTNER_PROGRAMS_REQUEST,
-  programId,
-});
-
-export const addPartnerProgram = (programId, payload, callback) => ({
-  type: types.ADD_PARTNER_PROGRAM_REQUEST,
-  programId,
-  payload,
-  callback,
-});
-
-export const getPartnerProgramById = (programId, partnerProgramId) => ({
-  type: types.GET_PARTNER_PROGRAM_BY_ID_REQUEST,
-  partnerProgramId,
-  programId,
-});
-
-export const getBackupPartnerPrograms = (
-  programId,
-  partnerProgramId,
-  partnerProgramExpiryDate,
-) => ({
-  type: types.GET_BACKUP_PARTNER_PROGRAM_REQUEST,
-  programId,
-  partnerProgramId,
-  partnerProgramExpiryDate,
-});
-
-export const clearPartnerProgramData = () => ({
-  type: types.CLEAR_PARTNER_PROGRAM_DATA,
-})
-
-export const clearData = () => ({
-  type: types.CLEAR_DATA,
-});

package/components/organisms/PartnerProgramDashboard/constants.js

@@ -1,34 +0,0 @@
-export const EDIT = 'EDIT';
-export const VIEW = 'VIEW';
-
-export const GET_ALL_PARTNER_PROGRAMS_REQUEST =
-  'partnerProgramDashboard/GET_ALL_PARTNER_PROGRAMS';
-export const GET_ALL_PARTNER_PROGRAMS_SUCCESS =
-  'partnerProgramDashboard/GET_ALL_PARTNER_PROGRAMS_SUCCESS';
-export const GET_ALL_PARTNER_PROGRAMS_FAILURE =
-  'partnerProgramDashboard/GET_ALL_PARTNER_PROGRAMS_FAILURE';
-
-export const ADD_PARTNER_PROGRAM_REQUEST =
-  'partnerProgramDashboard/ADD_PARTNER_PROGRAM_REQUEST';
-export const ADD_PARTNER_PROGRAM_SUCCESS =
-  'partnerProgramDashboard/ADD_PARTNER_PROGRAM_SUCCESS';
-export const ADD_PARTNER_PROGRAM_FAILURE =
-  'partnerProgramDashboard/ADD_PARTNER_PROGRAM_FAILURE';
-
-export const GET_PARTNER_PROGRAM_BY_ID_REQUEST =
-  'partnerProgramDashboard/GET_PARTNER_PROGRAM_BY_ID_REQUEST';
-export const GET_PARTNER_PROGRAM_BY_ID_SUCCESS =
-  'partnerProgramDashboard/GET_PARTNER_PROGRAM_BY_ID_SUCCESS';
-export const GET_PARTNER_PROGRAM_BY_ID_FAILURE =
-  'partnerProgramDashboard/GET_PARTNER_PROGRAM_BY_ID_FAILURE';
-
-export const GET_BACKUP_PARTNER_PROGRAM_REQUEST =
-  'partnerProgramDashboard/GET_BACKUP_PARTNER_PROGRAM_REQUEST';
-export const GET_BACKUP_PARTNER_PROGRAM_SUCCESS =
-  'partnerProgramDashboard/GET_BACKUP_PARTNER_PROGRAM_SUCCESS';
-export const GET_BACKUP_PARTNER_PROGRAM_FAILURE =
-  'partnerProgramDashboard/GET_BACKUP_PARTNER_PROGRAM_FAILURE';
-
-export const CLEAR_DATA = 'partnerProgramDashboard/CLEAR_DATA';
-
-export const CLEAR_PARTNER_PROGRAM_DATA = 'partnerProgramDashboard/CLEAR_PARTNER_PROGRAM_DATA';

package/components/organisms/PartnerProgramDashboard/context.js

@@ -1,7 +0,0 @@
-import { createContext, useContext } from 'react';
-
-const store = createContext();
-
-export const Provider = store.Provider;
-
-export const getPartnerProgramsContext = () => useContext(store);

package/components/organisms/PartnerProgramDashboard/index.js

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

package/components/organisms/PartnerProgramDashboard/messages.js

@@ -1,62 +0,0 @@
-import { defineMessages } from 'react-intl';
-
-export const scope = 'loyaltyPlus.components.organisms.PartnerProgramDashboard';
-
-export default defineMessages({
-  addSupplementaryProgram: {
-    id: `${scope}.addSupplementaryProgram`,
-    defaultMessage: 'Add subscription program',
-  },
-  addExternalProgram: {
-    id: `${scope}.addExternalProgram`,
-    defaultMessage: 'Add coalition program',
-  },
-  supplementarySearchPlaceholder: {
-    id: `${scope}.supplementarySearchPlaceholder`,
-    defaultMessage: 'Search subscription programs',
-  },
-  externalSearchPlaceholder: {
-    id: `${scope}.externalSearchPlaceholder`,
-    defaultMessage: 'Search coalition programs',
-  },
-  cyclePeriod: {
-    id: `${scope}.cyclePeriod`,
-    defaultMessage: 'Cycle Period',
-  },
-  lastUpdatedBy: {
-    id: `${scope}.lastUpdatedBy`,
-    defaultMessage: 'Last Updated By',
-  },
-  ID: {
-    id: `${scope}.ID`,
-    defaultMessage: 'ID',
-  },
-  cycleType: {
-    id: `${scope}.cycleType`,
-    defaultMessage: 'Cycle Type',
-  },
-  supplementaryEmptyMessage: {
-    id: `${scope}.supplementaryEmptyMessage`,
-    defaultMessage: 'No subscription program created',
-  },
-  externalEmptyMessage: {
-    id: `${scope}.externalEmptyMessage`,
-    defaultMessage: 'No coalition program created',
-  },
-  emptyMessageDescription: {
-    id: `${scope}.emptyMessageDescription`,
-    defaultMessage: 'Create new by editing program',
-  },
-  days: {
-    id: `${scope}.days`,
-    defaultMessage: 'Day{value, plural, one{} other{s}}',
-  },
-  months: {
-    id: `${scope}.months`,
-    defaultMessage: 'Month{value, plural, one{} other{s}}',
-  },
-  expiryDate: {
-    id: `${scope}.expiryDate`,
-    defaultMessage: 'Expiry date',
-  },
-});

package/components/organisms/PartnerProgramDashboard/reducer.js

@@ -1,82 +0,0 @@
-import { fromJS } from 'immutable';
-import { FAILURE, REQUEST, SUCCESS } from '../../pages/App/constants';
-import * as types from './constants';
-
-export const initialState = fromJS({
-  partnerProgramDetails: [],
-  getAllPartnerProgramStatus: '',
-  getAllPartnerProgramError: null,
-  getPartnerProgramByIdStatus: '',
-  getPartnerProgramByIdData: {},
-  getPartnerProgramByIdError: '',
-  getBackupPartnerPrograms: [],
-  getBackupPartnerProgramsStatus: '',
-  getBackupPartnerProgramsError: '',
-  addPartnerProgramStatus: '',
-  addPartnerProgramError: '',
-  addPartnerProgramResponse: [],
-});
-
-const partnerProgramReducer = (state = initialState, action) => {
-  switch (action.type) {
-    case types.GET_ALL_PARTNER_PROGRAMS_REQUEST:
-      return state
-        .set('getAllPartnerProgramStatus', REQUEST)
-        .set('getAllPartnerProgramError', null);
-    case types.GET_ALL_PARTNER_PROGRAMS_SUCCESS:
-      return state
-        .set('getAllPartnerProgramStatus', SUCCESS)
-        .set('partnerProgramDetails', action?.result);
-    case types.GET_ALL_PARTNER_PROGRAMS_FAILURE:
-      return state
-        .set('getAllPartnerProgramStatus', FAILURE)
-        .set('getAllPartnerProgramError', action?.error);
-    case types.GET_PARTNER_PROGRAM_BY_ID_REQUEST:
-      return state
-        .set('getPartnerProgramByIdStatus', REQUEST)
-        .set('getAllPartnerProgramError', null);
-    case types.GET_PARTNER_PROGRAM_BY_ID_SUCCESS:
-      return state
-        .set('getPartnerProgramByIdStatus', SUCCESS)
-        .set('getPartnerProgramByIdData', fromJS(action?.result));
-    case types.GET_PARTNER_PROGRAM_BY_ID_FAILURE:
-      return state
-        .set('getPartnerProgramByIdStatus', FAILURE)
-        .set('getPartnerProgramByIdError', action?.error);
-    case types.GET_BACKUP_PARTNER_PROGRAM_REQUEST:
-      return state
-        .set('getBackupPartnerProgramsStatus', REQUEST)
-        .set('getBackupPartnerProgramsError', null);
-    case types.GET_BACKUP_PARTNER_PROGRAM_SUCCESS:
-      return state
-        .set('getBackupPartnerProgramsStatus', SUCCESS)
-        .set('getBackupPartnerPrograms', fromJS(action?.result));
-    case types.GET_BACKUP_PARTNER_PROGRAM_FAILURE:
-      return state
-        .set('getBackupPartnerProgramsStatus', FAILURE)
-        .set('getBackupPartnerProgramsError', action?.error);
-    case types.ADD_PARTNER_PROGRAM_REQUEST:
-      return state
-        .set('addPartnerProgramStatus', REQUEST)
-        .set('addPartnerProgramError', null);
-    case types.ADD_PARTNER_PROGRAM_SUCCESS:
-      return state
-        .set('addPartnerProgramStatus', SUCCESS)
-        .set('addPartnerProgramResponse', fromJS(action?.result));
-    case types.ADD_PARTNER_PROGRAM_FAILURE:
-      return state
-        .set('addPartnerProgramStatus', FAILURE)
-        .set('addPartnerProgramError', action?.error);
-    case types.CLEAR_PARTNER_PROGRAM_DATA:
-      return state
-        .set('getPartnerProgramByIdStatus', '')
-        .set('getPartnerProgramByIdData', fromJS({}))
-        .set('getPartnerProgramByIdError', '');
-    case types.CLEAR_DATA:
-      return initialState;
-    default:
-      return state;
-  }
-};
-
-export default partnerProgramReducer;