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

package/components/organisms/CouponSlidebox/CouponSlidebox.js

@@ -16,11 +16,13 @@ import {
   CAP_SPACE_16,
 } from '@capillarytech/cap-ui-library/styled/variables';
 
+import injectSaga from 'utils/injectSaga';
 import injectReducer from 'utils/injectReducer';
 
 import makeSelectCoupons from './selectors';
 import reducer from './reducer';
 import * as actions from './actions';
+import saga from './saga';
 
 import {
   EDIT_COUPON_SERIES,
@@ -31,7 +33,6 @@ import {
 } from './constants';
 import { makeSelectGlobal } from '../../pages/Cap/selectors';
 import messages from './messages';
-import globalMessages from '../../pages/Cap/messages';
 import './_coupons.scss';
 import withErrorBoundary from 'utils/withErrorBoundary';
 
@@ -203,14 +204,14 @@ export class Coupons extends React.Component {
             onClick={this.hideAdvanceView}
           />
         }
-        title={formatMessage(globalMessages.advancedSettings)}
+        title={formatMessage(messages.advancedSetting)}
       />
     ) : (
       <CapHeader
         title={
           action === EDIT_COUPON_SERIES
             ? formatMessage(messages.editOffer)
-            : formatMessage(globalMessages.createOffer)
+            : formatMessage(messages.createOffer)
         }
         description={
           action === EDIT_COUPON_SERIES
@@ -241,7 +242,7 @@ export class Coupons extends React.Component {
                 onClick={this.props.closeSlidebox}
               />
             }
-            title={formatMessage(globalMessages.viewOffer)}
+            title={formatMessage(messages.viewOffer)}
           />
         );
       default: {
@@ -284,7 +285,6 @@ export class Coupons extends React.Component {
       offersTableScrollHeight: window.innerHeight - 260,
       showOnlyGenericCoupons: showOnlyGenericCoupons,
       clientHandlingType: clientHandlingType,
-      embeddedIn: LOYALTY,
     };
   };
 
@@ -318,6 +318,7 @@ const withConnect = connect(
   mapDispatchToProps,
 );
 const withReducer = reducer.map(reducer => injectReducer(reducer));
+// const withSaga = saga.map(saga => injectSaga(saga));
 
 export default compose.apply(null, [
   withErrorBoundary,

package/components/organisms/CouponSlidebox/_coupons.scss

@@ -119,9 +119,3 @@
     min-width: 270px;
     align-items: center;
   }
-
-.coupon-reminder-container .reminders-container .reminder .component-with-label{
-  .cap-select-v2 {
-    width: 110px;
-  }
-}

package/components/organisms/CouponSlidebox/messages.js

@@ -9,21 +9,105 @@ import { defineMessages } from 'react-intl';
 export const scope = 'loyaltyPlus.components.organisms.Coupons';
 
 export default defineMessages({
+  createOffer: {
+    id: `${scope}.createOffer`,
+    defaultMessage: 'Create offer',
+  },
   editOffer: {
     id: `${scope}.editOffer`,
     defaultMessage: 'Edit offer',
   },
+  viewOffer: {
+    id: `${scope}.viewOffer`,
+    defaultMessage: 'View offer',
+  },
   createOfferInfoText: {
     id: `${scope}.createOfferInfoText`,
     defaultMessage:
       'An offer contains Coupons, which can be redeemed by customers.',
   },
+  offer: {
+    id: `${scope}.offer`,
+    defaultMessage: 'Offers',
+  },
+  more: {
+    id: `${scope}.more`,
+    defaultMessage: 'more',
+  },
+  addIncentives: {
+    id: `${scope}.addIncentives`,
+    defaultMessage: 'Add incentives',
+  },
+  addPromotions: {
+    id: `${scope}.addPromotions`,
+    defaultMessage: 'Add promotions',
+  },
   incentives: {
     id: `${scope}.incentives`,
     defaultMessage: 'Incentives',
   },
+  points: {
+    id: `${scope}.points`,
+    defaultMessage: 'Points',
+  },
+  promotions: {
+    id: `${scope}.promotions`,
+    defaultMessage: 'Promotions',
+  },
+  offersSelected: {
+    id: `${scope}.offersSelected`,
+    defaultMessage: '{noOfOffers} offers selected',
+  },
+  optional: {
+    id: `${scope}.optional`,
+    defaultMessage: 'Optional',
+  },
+  changeIncentive: {
+    id: `${scope}.changeIncentive`,
+    defaultMessage: 'Change incentive',
+  },
+  remove: {
+    id: `${scope}.remove`,
+    defaultMessage: 'Remove',
+  },
+  incentiveInfoText: {
+    id: `${scope}.incentiveInfoText`,
+    defaultMessage: 'Select only one kind of incentive',
+  },
   previewOffer: {
     id: `${scope}.previewOffer`,
     defaultMessage: 'Preview offer',
   },
+  advancedSetting: {
+    id: `${scope}.advancedSetting`,
+    defaultMessage: 'Advanced settings',
+  },
+  pointsStratergy: {
+    id: `${scope}.pointsStratergy`,
+    defaultMessage: 'Points Strategy',
+  },
+  removeAll: {
+    id: `${scope}.removeAll`,
+    defaultMessage: 'Remove all',
+  },
+  addOffers: {
+    id: `${scope}.addOffers`,
+    defaultMessage: 'Add offers',
+  },
+  addPoints: {
+    id: `${scope}.addPoints`,
+    defaultMessage: 'Add points',
+  },
+  changePoints: {
+    id: `${scope}.changePoints`,
+    defaultMessage: 'Change points',
+  },
+  changePromotions: {
+    id: `${scope}.changePromotions`,
+    defaultMessage: 'Change promotions',
+  },
+  changeOffers: {
+    id: `${scope}.changeOffers`,
+    defaultMessage: 'Change offers',
+  },
 });

package/components/organisms/CouponSlidebox/saga.js

@@ -0,0 +1,18 @@
+// import { take, call, put, select } from 'redux-saga/effects';
+
+import { CouponsCapContainer } from '@capillarytech/cap-coupons';
+// Individual exports for testing
+export function* couponsSaga() {
+  // See example in containers/HomePage/saga.js
+}
+
+export default [
+  {
+    key: 'coupons',
+    saga: couponsSaga,
+  },
+  {
+    key: 'couponsCapSaga',
+    saga: CouponsCapContainer.couponsCapSaga,
+  },
+];

package/components/organisms/Coupons/Coupons.js

@@ -8,7 +8,7 @@ import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { injectIntl, intlShape } from 'react-intl';
-import { useLocation, withRouter } from 'react-router-dom';
+import { withRouter } from 'react-router-dom';
 import { createStructuredSelector } from 'reselect';
 import { compose, bindActionCreators } from 'redux';
 import { fromJS } from 'immutable';
@@ -22,7 +22,6 @@ import withErrorBoundary from 'utils/withErrorBoundary';
 import withStyles from 'utils/withStyles';
 import injectSaga from 'utils/injectSaga';
 import injectReducer from 'utils/injectReducer';
-import { publicPath } from '../../../config/path';
 
 import makeSelectCoupons from './selectors';
 import reducer from './reducer';
@@ -41,25 +40,18 @@ import {
   TOGGLE_PREVIEW,
   EDIT,
   COUPONS,
-  MODE_VIEW,
 } from './constants';
 
 import * as globalSelector from '../../pages/Cap/selectors';
 import CouponSlidebox from '../CouponSlidebox';
-import * as appConstants from '../../pages/App/constants.js';
-import {
-  parseQueryParams,
-  snakeToCamelCaseConvertion,
-} from '../../../utils/commonUtils';
+import { snakeToCamelCaseConvertion } from '../../../utils/commonUtils';
+
 import styles, { StyledRow } from './style';
 import messages from './messages';
-import globalMessage from '../../pages/Cap/messages';
-import CapReportLink from '../../molecules/CapReportLink';
-import { PROGRAM_PERFIX_PATH } from '../../pages/Cap/constants';
 
-const { makeSelectGlobal, makeSelectCap } = globalSelector;
+const { makeSelectGlobal } = globalSelector;
 
-export function Coupons(props) {
+function Coupons(props) {
   const {
     intl: { formatMessage },
     capGlobal,
@@ -72,18 +64,7 @@ export function Coupons(props) {
     setSlidebox = () => {},
     mode: modeProps,
     className,
-    history,
-    currentStep,
-    currentDetails = {},
   } = props;
-  const { currentOrgDetails = {} } = currentDetails;
-  const { accessibleFeatures = [] } = currentOrgDetails;
-
-  const hasInsightsChartDisabled = accessibleFeatures.includes(
-    appConstants.DISABLE_EI_STATS,
-  );
-
-  const location = useLocation();
   const { couponConfigs = [] } = coupons;
   const [showSlideBox, setShowSlideBox] = useState(isSlidebox);
   const [couponId, updateCouponId] = useState('');
@@ -105,21 +86,6 @@ export function Coupons(props) {
     },
     [key],
   );
-  useEffect(
-    () => {
-      if (location && mode === appConstants.VIEW) {
-        let offerId = parseQueryParams(location?.search || '')?.offerId;
-        if (offerId) {
-          onCouponAction({
-            action: 'viewCouponSeries',
-            mode: 'view',
-            value: offerId,
-          });
-        }
-      }
-    },
-    [location, mode, currentStep],
-  );
 
   const viewCoupon = value => {
     updateCouponId(value);
@@ -163,11 +129,6 @@ export function Coupons(props) {
         });
       }
     }
-    if(mode === 'VIEW'){
-      history.push(
-        `${publicPath}${PROGRAM_PERFIX_PATH}${programId}/${MODE_VIEW}`,
-      );
-    }
     setSlidebox && setSlidebox(false);
   };
 
@@ -189,9 +150,7 @@ export function Coupons(props) {
     setShowSlideBox(true);
   };
 
-  // Claimed couponsData can be used if required for future update
-  // eslint-disable-next-line no-unused-vars
-  const onClaimCoupon = couponsData => {
+  const onClaimCoupon = () => {
     setKey(true);
   };
 
@@ -265,7 +224,6 @@ export function Coupons(props) {
         offersTableScrollHeight: window.innerHeight - 260,
         showEmptyTable: true,
         forbidEditAccess: false,
-        embeddedIn: LOYALTY,
       };
     }
     return {
@@ -293,21 +251,11 @@ export function Coupons(props) {
       forbidEditAccess: true,
       onCouponAction,
       offersTableScrollHeight: window.innerHeight - 260,
-      embeddedIn: LOYALTY,
     };
   };
 
   return (
-    <CapRow  className={className}>
-      {
-        !hasInsightsChartDisabled &&
-        <div className='coupons-link'>
-            <CapReportLink link={appConstants.COUPONS_REPORT_PATH} 
-              tooltip={formatMessage(globalMessage.offersCouponReportToolTip)} 
-              title={formatMessage(globalMessage.viewReports)} 
-            />
-        </div>
-      }
+    <>
       {key ? (
         <CapRow
           style={{
@@ -329,7 +277,6 @@ export function Coupons(props) {
           mode={mode}
           key={key}
           setKey={setKey}
-          embeddedIn={LOYALTY}
         />
       ) : (
         <StyledRow
@@ -340,7 +287,7 @@ export function Coupons(props) {
           <CouponsViewContainer.CouponsView {...getViewCouponsProps()} />
         </StyledRow>
       )}
-    </CapRow>
+    </>
   );
 }
 
@@ -351,13 +298,11 @@ Coupons.propTypes = {
   isSlidebox: PropTypes.bool,
   setSlidebox: PropTypes.func,
   intl: intlShape.isRequired,
-  history: PropTypes.object,
 };
 
 const mapStateToProps = createStructuredSelector({
   coupons: makeSelectCoupons(),
   capGlobal: makeSelectGlobal(),
-  currentDetails: makeSelectCap(),
 });
 
 const mapDispatchToProps = dispatch => ({
@@ -373,7 +318,7 @@ const withSaga = saga.map(saga => injectSaga(saga));
 
 export default withErrorBoundary(
   compose.apply(null, [...withReducer, ...withSaga, withConnect, withRouter])(
-    injectIntl(withRouter(withStyles(Coupons, styles))),
+    injectIntl(withStyles(Coupons, styles)),
   ),
   { showImage: true, useStyle: true },
 );

package/components/organisms/Coupons/index.js

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

package/components/organisms/Coupons/messages.js

@@ -9,12 +9,113 @@ import { defineMessages } from 'react-intl';
 export const scope = 'loyaltyPlus.components.organisms.Coupons';
 
 export default defineMessages({
+  createOffer: {
+    id: `${scope}.createOffer`,
+    defaultMessage: 'Create offer',
+  },
+  editOffer: {
+    id: `${scope}.editOffer`,
+    defaultMessage: 'Edit offer',
+  },
+  viewOffer: {
+    id: `${scope}.viewOffer`,
+    defaultMessage: 'View offer',
+  },
+  createOfferInfoText: {
+    id: `${scope}.createOfferInfoText`,
+    defaultMessage:
+      'An offer contains Coupons, which can be redeemed by customers.',
+  },
+  offer: {
+    id: `${scope}.offer`,
+    defaultMessage: 'Offers',
+  },
+  more: {
+    id: `${scope}.more`,
+    defaultMessage: 'more',
+  },
+  addIncentives: {
+    id: `${scope}.addIncentives`,
+    defaultMessage: 'Add incentives',
+  },
+  addPromotions: {
+    id: `${scope}.addPromotions`,
+    defaultMessage: 'Add promotions',
+  },
+  incentives: {
+    id: `${scope}.incentives`,
+    defaultMessage: 'Incentives',
+  },
+  points: {
+    id: `${scope}.points`,
+    defaultMessage: 'Points',
+  },
+  promotions: {
+    id: `${scope}.promotions`,
+    defaultMessage: 'Promotions',
+  },
+  offersSelected: {
+    id: `${scope}.offersSelected`,
+    defaultMessage: '{noOfOffers} offers selected',
+  },
+  optional: {
+    id: `${scope}.optional`,
+    defaultMessage: 'Optional',
+  },
+  changeIncentive: {
+    id: `${scope}.changeIncentive`,
+    defaultMessage: 'Change Incentive',
+  },
+  remove: {
+    id: `${scope}.remove`,
+    defaultMessage: 'Remove',
+  },
+  incentiveInfoText: {
+    id: `${scope}.incentiveInfoText`,
+    defaultMessage: 'Select only one kind of incentive',
+  },
+  previewOffer: {
+    id: `${scope}.previewOffer`,
+    defaultMessage: 'Preview offer',
+  },
+  advancedSetting: {
+    id: `${scope}.advancedSetting`,
+    defaultMessage: 'Advanced settings',
+  },
+  pointsStratergy: {
+    id: `${scope}.pointsStratergy`,
+    defaultMessage: 'Points Strategy',
+  },
+  removeAll: {
+    id: `${scope}.removeAll`,
+    defaultMessage: 'Remove all',
+  },
+  addOffers: {
+    id: `${scope}.addOffers`,
+    defaultMessage: 'Add offers',
+  },
+  addPoints: {
+    id: `${scope}.addPoints`,
+    defaultMessage: 'Add points',
+  },
+  changePoints: {
+    id: `${scope}.changePoints`,
+    defaultMessage: 'Change points',
+  },
+  changePromotions: {
+    id: `${scope}.changePromotions`,
+    defaultMessage: 'Change promotions',
+  },
+  changeOffers: {
+    id: `${scope}.changeOffers`,
+    defaultMessage: 'Change offers',
+  },
   uploadSuccess: {
     id: `${scope}.uploadSuccess`,
-    defaultMessage: 'Files are uploaded successfully',
+    defaultMessage: 'Customers are uploaded successfully',
   },
   uploadFailure: {
     id: `${scope}.uploadFailure`,
-    defaultMessage: 'Unable to upload files. Please try again',
+    defaultMessage: 'Unable to upload customers. Please try again',
   },
 });

package/components/organisms/Coupons/saga.js

@@ -1,8 +1,18 @@
+// import { take, call, put, select } from 'redux-saga/effects';
+
 import { CouponsCapContainer } from '@capillarytech/cap-coupons';
+// Individual exports for testing
+export function* couponsSaga() {
+  // See example in containers/HomePage/saga.js
+}
 
 export default [
   {
-    key: 'CouponsCapContainer',
+    key: 'coupons',
+    saga: couponsSaga,
+  },
+  {
+    key: 'couponsCapSaga',
     saga: CouponsCapContainer.couponsCapSaga,
   },
 ];

package/components/organisms/Coupons/stories/Coupons.stories.js

@@ -0,0 +1,5 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import Coupons from '../Coupons';
+
+storiesOf('Coupons', module).add('default', () => <Coupons />);

package/components/organisms/Coupons/style.js

@@ -1,8 +1,5 @@
 import styled, { css } from 'styled-components';
 import CapRow from '@capillarytech/cap-ui-library/CapRow';
-import * as styledVars from '@capillarytech/cap-ui-library/styled/variables';
-
-const { CAP_SPACE_16, CAP_SPACE_44, CAP_SPACE_08 } = styledVars;
 
 export const StyledRow = styled(CapRow)`
   height: ${props =>
@@ -24,34 +21,4 @@ export default css`
   .truncate-text-coupons {
     max-width: 160px !important;
   }
-  .coupons-link {
-    display: flex;
-    justify-content: flex-end;
-  }
-
-  .common-codes-radio-group {
-    padding-left: ${CAP_SPACE_44} !important;
-    padding-top: ${CAP_SPACE_08} !important;
-    label {
-      display: block;
-      span {
-        font-size: 1rem;
-      }
-    }
-    label:nth-child(2) {
-      margin: ${CAP_SPACE_16} 0 ${CAP_SPACE_08} 0;
-    }
-    .ant-radio-wrapper {
-      display: flex;
-    }
-  }
-  .non-generic-option-info {
-    margin-left: ${CAP_SPACE_44} !important;
-  }
-  .non-generic-note-label {
-    white-space: normal;
-    margin-left: ${CAP_SPACE_08};
-    line-height: 1.3rem;
-    margin-top: 0.2rem;
-  }
 `;

package/components/organisms/Coupons/tests/index.test.js

@@ -1,54 +1,5 @@
-import { render } from '../../../../tests/test-utils';
-import { Coupons } from '../Coupons';
-import { screen, waitFor } from '@testing-library/dom';
-import '@testing-library/jest-dom';
-import userEvent from '@testing-library/user-event';
-import { injectIntl } from 'react-intl';
-import { capGlobal, coupons } from './mockdata';
-import globalMessages from '../../../pages/Cap/messages.js';
-import { VIEW } from '../../../pages/App/constants';
-
-jest.mock('react-router-dom', () => ({
-  ...jest.requireActual('react-router-dom'),
-  useLocation: () => {},
-}));
-
-const initializeCoupons = () => {
-  const Component = injectIntl(Coupons);
-  const propsObj = {
-    //TODO add props from Coupon ,
-    capGlobal: capGlobal,
-    coupons: coupons,
-    match: {
-      params: 1074,
-    },
-    isCouponView: true,
-    isSlidebox: true,
-    setSlidebox: jest.fn(() => {}),
-    mode: VIEW,
-  };
-
-  render(Component, undefined, propsObj);
-};
 describe('<Coupons />', () => {
-  const spyWindowOpen = jest.spyOn(window, 'open');
-  spyWindowOpen.mockImplementation(jest.fn());
-
   it('Expect to have unit tests specified', () => {
-    initializeCoupons();
     expect(true).toEqual(true);
   });
-  it('Expect Coupons have Link and toolTip', async () => {
-    initializeCoupons();
-    const linkvar = screen.getByText(globalMessages.viewReports.defaultMessage);
-    expect(linkvar).toBeInTheDocument();
-    userEvent.hover(linkvar);
-    expect(
-      await screen.findByText(
-        globalMessages.offersCouponReportToolTip.defaultMessage,
-      ),
-    ).toBeInTheDocument();
-    await waitFor(() => userEvent.click(linkvar));
-    expect(spyWindowOpen).toHaveBeenCalledTimes(1);
-  });
 });