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

package/components/organisms/ConfigureStrategies/ConfigureStrategies.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { injectIntl, intlShape } from 'react-intl';
 import CapButton from '@capillarytech/cap-ui-library/CapButton';
@@ -6,95 +6,67 @@ import withStyles from 'utils/withStyles';
 import classnames from 'classnames';
 import CapTab from '@capillarytech/cap-ui-library/CapTab';
 import CapHeading from '@capillarytech/cap-ui-library/CapHeading';
-import CapColumn from '@capillarytech/cap-ui-library/CapColumn';
-import CapAlert from '@capillarytech/cap-ui-library/CapAlert';
 import CapIcon from '@capillarytech/cap-ui-library/CapIcon';
 import CapRow from '@capillarytech/cap-ui-library/CapRow';
-import CapTooltip from '@capillarytech/cap-ui-library/CapTooltip';
-import CapColoredTag from '@capillarytech/cap-ui-library/CapColoredTag';
-import { CAP_PINK } from '@capillarytech/cap-ui-library/styled/variables';
 import StyledVars from '@capillarytech/cap-ui-library/styled';
 import { compose, bindActionCreators } from 'redux';
 import { createStructuredSelector } from 'reselect';
 import { connect } from 'react-redux';
 import injectSaga from 'utils/injectSaga';
 import injectReducer from 'utils/injectReducer';
-import isEmpty from 'lodash/isEmpty';
+import { isEmpty } from 'lodash';
 import penguin from 'assets/penguin.svg';
 import pigeon from 'assets/pigeon.svg';
 import withErrorBoundary from 'utils/withErrorBoundary';
-import clearDataOnUnmount from 'utils/clearDataOnUnmount';
+import { hasUserGroup2Permission } from 'utils/commonUtils';
 
 import saga from './saga';
 import reducer from './reducer';
-import {
-  styles,
-  SpaceElement,
-  LineContainer,
-  Line,
-  TabNumberIcon,
-  Flex,
-} from './style';
+import * as style from './style';
 import messages from './messages';
-import {
-  STEP_TIER,
-  STEP_COMMUNICATION,
-  STEP_SUPPLEMENTARY,
-  STEP_EXTERNAL,
-  STEP_OFFER,
-  STEP_1,
-  STEP_2,
-  STEP_3,
-  STEP_4,
-  STEP_5,
-  STEP_6,
-  PRIMARY_OFFER_VIEW,
-  SECONDARY_OFFER_VIEW,
-  REWARD_CURRENCY,
-} from './constants';
+import * as constants from './constants';
 import * as actions from './actions';
 import * as capActions from '../../pages/Cap/actions';
 import {
   makeSelectPointCurrencyRatio,
   makeSelectCouponConfig,
 } from './selectors';
-import {
-  makeSelectGroupRedemptionStatus,
-  makeSelectEMFStatus,
-  makeSelectCustomLabels,
-  makeSelectCap,
-} from '../../pages/Cap/selectors';
+import { makeSelectUserGroupV2Status } from '../../pages/Cap/selectors';
 import Communication from '../Communication';
-import PartnerProgramDashboard from '../PartnerProgramDashboard';
 import globalMessages from '../../pages/Cap/messages';
 import StrategyDashboard from '../StrategyDashboard';
 import {
   STEP_POINTS,
   MODE_CONFIGURE,
   SECONDARY_CRITERIA_ELIGIBILITY_MODAL_TYPE,
-  CHANNEL_SMS,
-  CHANNEL_EMAIL,
-  CHANNEL_WECHAT,
-  CHANNEL_MPUSH,
-  REQUEST,
-  SUCCESS,
 } from '../../pages/App/constants';
 import CreateOfferInfo from '../../molecules/CreateOfferInfo';
 import Coupons from '../Coupons';
 import Tiers from '../Tiers';
 import AdvancedOption from '../AdvancedOption';
 import ReviewTierModal from '../../molecules/ReviewTierModal';
-import { getProgramContext } from '../../pages/ProgramSummary/context';
-import filter from 'lodash/filter';
-import LabelCustomisation from '../../atoms/LabelCustomisation';
-import VersioningNote from '../../atoms/VersioningNote';
-import {
-  SUPPLEMENTARY_PROGRAM,
-  EXTERNAL_PROGRAM,
-} from '../../pages/ProgramSummary/constants';
-import { makeSelectPartnerProgramLinking } from '../../pages/ProgramSummary/selectors';
-const { CAP_BLUE01, CAP_SPACE_44, CAP_SPACE_52 } = StyledVars;
-let defaultRewardCurrencyLabel, defaultOffersLabel;
+
+const { CAP_BLUE01, CAP_SPACE_80, CAP_SPACE_44 } = StyledVars;
+
+const {
+  styles,
+  SpaceElement,
+  LineContainer,
+  Line,
+  TabNumberIcon,
+  Flex,
+} = style;
+const {
+  STEP_TIER,
+  STEP_COMMUNICATION,
+  STEP_OFFER,
+  STEP_1,
+  STEP_2,
+  STEP_3,
+  STEP_4,
+  PRIMARY_OFFER_VIEW,
+  SECONDARY_OFFER_VIEW,
+} = constants;
 
 export const ConfigureStrategies = ({
   className,
@@ -103,31 +75,16 @@ export const ConfigureStrategies = ({
   pointTypeIdData,
   pointStrategy = {},
   refreshStrategyData = () => {},
+  currentProgram = {},
   actions,
   capActions,
   couponData = {},
-  customLabelsData: {
-    customLabels = {},
-    getCustomLabelsStatus,
-    upsertCustomLabelStatus,
+  userGroupV2Data: {
+    userGroupV2Status: { value: userGroupV2StatusValue } = {},
   } = {},
-  groupRedemptionData: {
-    groupRedemptionStatus: { value: groupRedemptionValue } = {},
-  } = {},
-  EMFData: { EMFStatus: { value: EMFValue } = {} } = {},
-  userData: { currentOrgDetails },
-  hasLabelCustomisationEnabled = false,
-  isPartnerProgramEnabledData: {
-    getPartnerProgramEnabledStatus = '',
-    isPartnerProgramEnabled = [],
-  },
-  isFixedValueEmptyForUntilTierUpgradeValidity,
-  setIsFixedValueEmptyForUntilTierUpgradeValidity,
 }) => {
-  const { currentProgram, hasProgramVersioningEnabled } = getProgramContext();
-  const isGroupRedemptionActive = groupRedemptionValue === '1';
-  const isMlpActive = EMFValue === '1';
-
+  const hasFleetLoyalty =
+    userGroupV2StatusValue === '1' && hasUserGroup2Permission();
   const [currentStep, setCurrentStep] = useState(STEP_TIER);
   const [createOffer, setCreateOffer] = useState(false);
   const [offerView, setOfferView] = useState(PRIMARY_OFFER_VIEW);
@@ -135,70 +92,12 @@ export const ConfigureStrategies = ({
     currentProgram.pointsCurrencyRatio,
   );
   const [showAdvancedSetting, setShowAdvancedSetting] = useState(false);
-  //STATE for Redirecting from Edit tier to Advance Settings tier
-  const [redirectionFromEditTier, setRedirectionFromEditTier] = useState(false);
   const [reviewTierModal, setReviewTierModal] = useState({
     show: false,
     type: '',
   });
-  const [rewardCurrencyLabel, setRewardCurrencyLabel] = useState('');
-  const [offersCustomLabel, setOffersCustomLabel] = useState('');
-
-  useEffect(
-    () => {
-      if (
-        (getCustomLabelsStatus === 'SUCCESS' ||
-          upsertCustomLabelStatus === 'SUCCESS') &&
-        customLabels.length
-      ) {
-        const scopeOrgLabels = filter(
-          customLabels,
-          label => label.scope?.tag === 'ORG',
-        );
-        let tempRewardCurrency = defaultRewardCurrencyLabel;
-        let tempOffersLabel = defaultOffersLabel;
-        defaultRewardCurrencyLabel = customLabels[0]?.labels?.points;
-        defaultOffersLabel = customLabels[0]?.labels?.offers;
-        //check if the default value has changed before updating the state
-        //this is done to prevent old value from showing up in the input field while the new value is being saved
-        setRewardCurrencyLabel(
-          tempRewardCurrency !== defaultRewardCurrencyLabel ||
-          rewardCurrencyLabel === ''
-            ? defaultRewardCurrencyLabel
-            : rewardCurrencyLabel,
-        );
-        setOffersCustomLabel(
-          tempOffersLabel !== defaultOffersLabel || offersCustomLabel === ''
-            ? defaultOffersLabel
-            : offersCustomLabel,
-        );
-      }
-    },
-    [getCustomLabelsStatus, upsertCustomLabelStatus],
-  );
-
   const onChangeTab = tab => setCurrentStep(tab);
-  const hasPartnerProgramEnabled =
-    `${isPartnerProgramEnabled[0]?.value}` === '1';
 
-  const rewardCurrencyFeatureTooltip = () => (
-    <CapRow type="flex" className="reward-currency-tooltip-container">
-      <CapColoredTag className="tooltip-new-tag" tagColor={CAP_PINK}>
-        {formatMessage(globalMessages.new)}
-      </CapColoredTag>
-
-      <CapRow>
-        <CapHeading type="h9">
-          {formatMessage(messages.rewardCurrencyFeatureTooltip)}
-        </CapHeading>
-      </CapRow>
-    </CapRow>
-  );
-  const renderTabText = text => (
-    <CapHeading className="tab-text" type="h6">
-      {text}
-    </CapHeading>
-  );
   const getTabHeader = (text, count) => (
     <Flex>
       <TabNumberIcon>
@@ -206,21 +105,9 @@ export const ConfigureStrategies = ({
           {count}
         </CapHeading>
       </TabNumberIcon>
-      {text === REWARD_CURRENCY ? (
-        <CapTooltip
-          overlayClassName="reward-currency-tab"
-          title={rewardCurrencyFeatureTooltip}
-          placement="top"
-          getPopupContainer={trigger =>
-            document.querySelector('.configure-program') || trigger
-          }
-        >
-          {renderTabText(text)}
-        </CapTooltip>
-      ) : (
-        renderTabText(text)
-      )}
-      {text === REWARD_CURRENCY ? <span className="new-feature-icon" /> : ''}
+      <CapHeading className="tab-text" type="h6">
+        {text}
+      </CapHeading>
       <SpaceElement />
     </Flex>
   );
@@ -242,16 +129,10 @@ export const ConfigureStrategies = ({
         nextStep = STEP_POINTS;
         break;
       case STEP_POINTS:
-        nextStep = STEP_OFFER;
-        break;
-      case STEP_OFFER:
         nextStep = STEP_COMMUNICATION;
         break;
       case STEP_COMMUNICATION:
-        nextStep = STEP_SUPPLEMENTARY;
-        break;
-      case STEP_SUPPLEMENTARY:
-        nextStep = STEP_EXTERNAL;
+        nextStep = STEP_OFFER;
         break;
       default:
         break;
@@ -272,68 +153,12 @@ export const ConfigureStrategies = ({
         },
       );
     } else {
-      onChangeTab(STEP_OFFER);
-    }
-  };
-
-  const onChangeRewardCurrencyLabel = event =>
-    setRewardCurrencyLabel(event.target.value);
-
-  const upsertCustomLabelPayload = () => {
-    const scopeOrgLabels = filter(
-      customLabels,
-      label => label.scope?.tag === 'ORG',
-    );
-    const isUpdate = !!scopeOrgLabels.length;
-    const payloadObj = {
-      isUpdate,
-      payload: {
-        scopeTag: 'ORG',
-        isActive: true,
-        labels: { points: rewardCurrencyLabel, offers: offersCustomLabel },
-      },
-    };
-    if (isUpdate) {
-      payloadObj.payload.customLabelsId = scopeOrgLabels?.[0]?._id;
+      onChangeTab(STEP_COMMUNICATION);
     }
-    return payloadObj;
-  };
-
-  const upsertCustomLabel = event => {
-    if (isEmpty(rewardCurrencyLabel) || isEmpty(offersCustomLabel)) {
-      setRewardCurrencyLabel(defaultRewardCurrencyLabel);
-      setOffersCustomLabel(defaultOffersLabel);
-      return;
-    }
-    if (
-      rewardCurrencyLabel === defaultRewardCurrencyLabel &&
-      offersCustomLabel === defaultOffersLabel
-    )
-      return;
-    const { payload, isUpdate } = upsertCustomLabelPayload();
-    capActions.upsertCustomLabel(payload, isUpdate, res => {
-      capActions.getCustomLabels();
-    });
   };
 
   const pointContainer = (
     <CapRow>
-      {hasLabelCustomisationEnabled ? (
-        <LabelCustomisation
-          isProgramDefault={currentProgram.isDefault}
-          customisedLabel={formatMessage(
-            globalMessages.labelCustomizationInfo,
-            {
-              customLabelName: formatMessage(globalMessages.rewardCurrency),
-            },
-          )}
-          placeholder={defaultRewardCurrencyLabel}
-          customLabelValue={rewardCurrencyLabel}
-          onClickOutside={upsertCustomLabel}
-          onPressEnter={upsertCustomLabel}
-          onChange={onChangeRewardCurrencyLabel}
-        />
-      ) : null}
       <StrategyDashboard
         programId={currentProgram.id}
         mode={MODE_CONFIGURE}
@@ -349,53 +174,14 @@ export const ConfigureStrategies = ({
   );
 
   const communicationContent = (
-    <Communication
-      showNext={hasPartnerProgramEnabled ? showInternalNext : showNext}
-      currentProgram={currentProgram}
-      showErrorWrapperImage={false}
-    />
-  );
-
-  const supplementaryProgramContent = (
-    <PartnerProgramDashboard
-      showNext={showInternalNext}
-      mode="EDIT"
-      type={SUPPLEMENTARY_PROGRAM}
-    />
-  );
-
-  const externalProgramContent = (
-    <PartnerProgramDashboard
-      mode="EDIT"
-      showNext={showNext}
-      type={EXTERNAL_PROGRAM}
-    />
+    <Communication showNext={showInternalNext} showErrorWrapperImage={false} />
   );
 
   const onCreateNewOffer = () => setCreateOffer(true);
   const onSkipOffer = () => setOfferView(SECONDARY_OFFER_VIEW);
 
-  const onChangeOffersCustomLabel = event =>
-    setOffersCustomLabel(event.target.value);
-
   const offerContent = (
     <>
-      {hasLabelCustomisationEnabled ? (
-        <LabelCustomisation
-          isProgramDefault={currentProgram.isDefault}
-          customisedLabel={formatMessage(
-            globalMessages.labelCustomizationInfo,
-            {
-              customLabelName: formatMessage(globalMessages.offers),
-            },
-          )}
-          placeholder={defaultOffersLabel}
-          customLabelValue={offersCustomLabel}
-          onClickOutside={upsertCustomLabel}
-          onPressEnter={upsertCustomLabel}
-          onChange={onChangeOffersCustomLabel}
-        />
-      ) : null}
       {isEmpty(couponData) || couponData?.isLoading ? (
         <Coupons mode="EDIT" key="EDIT" showErrorWrapperImage={false} />
       ) : offerView === PRIMARY_OFFER_VIEW &&
@@ -413,21 +199,21 @@ export const ConfigureStrategies = ({
           'save-continue-button',
           'lp-btn-config-offers-save',
         )}
-        onClick={showInternalNext}
+        onClick={showNext}
       >
         {formatMessage(globalMessages.saveAndContinue)}
       </CapButton>
     </>
   );
 
-  const toggleAdvancedSetting = ({ modalType, fromEditTier = false } = {}) => {
+  const toggleAdvancedSetting = ({ modalType } = {}) => {
     if (modalType) {
       setReviewTierModal({
         show: true,
         type: modalType,
       });
     }
-    setRedirectionFromEditTier(fromEditTier);
+
     setShowAdvancedSetting(!showAdvancedSetting);
   };
 
@@ -439,9 +225,6 @@ export const ConfigureStrategies = ({
       showErrorWrapperImage={false}
       toggleAdvancedSetting={toggleAdvancedSetting}
       refreshStrategyData={refreshStrategyData}
-      showAdvancedSetting={showAdvancedSetting}
-      isFixedValueEmptyForUntilTierUpgradeValidity={isFixedValueEmptyForUntilTierUpgradeValidity}
-      setIsFixedValueEmptyForUntilTierUpgradeValidity={setIsFixedValueEmptyForUntilTierUpgradeValidity}
     />
   );
 
@@ -465,89 +248,55 @@ export const ConfigureStrategies = ({
     ),
     description: formatMessage(
       reviewTierModal?.type === SECONDARY_CRITERIA_ELIGIBILITY_MODAL_TYPE
-        ? globalMessages.addEligibilityValuesDesc
+        ? messages.addEligibilityValuesDesc
         : messages.reviewEligibilityCriteriaDesc,
     ),
     note:
       reviewTierModal?.type === SECONDARY_CRITERIA_ELIGIBILITY_MODAL_TYPE
-        ? formatMessage(globalMessages.addEligibilityValuesNote)
+        ? formatMessage(messages.addEligibilityValuesNote)
         : '',
     handleOkModal: handleReviewTierClick,
   };
 
   const onCloseCreateOffer = () => setCreateOffer(false);
-  const tabPanes = [
-    {
-      key: STEP_TIER,
-      tab: getTabHeader(formatMessage(globalMessages.tiers), STEP_1),
-      content: tierContainer,
-    },
-    getTabLine(STEP_POINTS),
-    {
-      key: STEP_POINTS,
-      tab: getTabHeader(
-        formatMessage(globalMessages.rewardCurrency),
 
-        STEP_2,
-      ),
-      content: pointContainer,
-    },
-    getTabLine(STEP_OFFER),
-    {
-      key: STEP_OFFER,
-      className: 'configure-strategy-offer',
-      tab: getTabHeader(formatMessage(globalMessages.offers), STEP_3),
-      content: offerContent,
-    },
-    getTabLine(STEP_COMMUNICATION),
-    {
-      key: STEP_COMMUNICATION,
-      tab: getTabHeader(formatMessage(globalMessages.communication), STEP_4),
-      content: communicationContent,
-    },
-  ];
-  if (hasPartnerProgramEnabled) {
-    tabPanes.push(
-      getTabLine(STEP_SUPPLEMENTARY),
-      {
-        key: STEP_SUPPLEMENTARY,
-        tab: getTabHeader(
-          formatMessage(globalMessages.supplementaryProgram),
-          STEP_5,
-        ),
-        content: supplementaryProgramContent,
-      },
-      getTabLine(STEP_EXTERNAL),
-      {
-        key: STEP_EXTERNAL,
-        tab: getTabHeader(
-          formatMessage(globalMessages.externalProgram),
-          STEP_6,
-        ),
-        content: externalProgramContent,
-      },
-    );
-  }
   return (
-    <CapRow className={className}>
-      {hasProgramVersioningEnabled && (
-        <CapRow>
-          <VersioningNote versioningNoteMessage={messages.strategyNote} />
-        </CapRow>
-      )}
-
+    <>
       <CapTab
-        className={hasPartnerProgramEnabled && 'configureStrategiesTab'}
+        className={className}
         activeKey={currentStep}
         onChange={onChangeTab}
-        tabPosition="top"
-        panes={tabPanes}
+        panes={[
+          {
+            key: STEP_TIER,
+            tab: getTabHeader(formatMessage(globalMessages.tiers), STEP_1),
+            content: tierContainer,
+          },
+          getTabLine(STEP_POINTS),
+          {
+            key: STEP_POINTS,
+            tab: getTabHeader(formatMessage(messages.points), STEP_2),
+            content: pointContainer,
+          },
+          getTabLine(STEP_COMMUNICATION),
+          {
+            key: STEP_COMMUNICATION,
+            tab: getTabHeader(formatMessage(messages.communication), STEP_3),
+            content: communicationContent,
+          },
+          getTabLine(STEP_OFFER),
+          {
+            key: STEP_OFFER,
+            className: 'configure-strategy-offer',
+            tab: getTabHeader(formatMessage(messages.offers), STEP_4),
+            content: offerContent,
+          },
+        ]}
       />
-     {/* commenting Strategies advanced option for future refrence  */}
-      {/* <CapButton
+      <CapButton
         style={{
           position: 'absolute',
-          top: hasProgramVersioningEnabled ? '62px' : '2px',
+          top: CAP_SPACE_80,
           right: 0,
           color: CAP_BLUE01,
         }}
@@ -556,20 +305,15 @@ export const ConfigureStrategies = ({
         prefix={<CapIcon type="settings" />}
       >
         {formatMessage(globalMessages.advancedSettings)}
-        <span className="new-feature-icon" />
       </CapButton>
-      */}
-
       {showAdvancedSetting && (
         <AdvancedOption
-          isGroupRedemptionEnabled={isGroupRedemptionActive}
+          fleetLoyaltyEnabled={hasFleetLoyalty}
           show
           handleClose={toggleAdvancedSetting}
           errorWrapperSlideBoxClose={toggleAdvancedSetting}
-          currentOrgDetails={currentOrgDetails}
-          fromEditTier={redirectionFromEditTier}
         />
-      )} 
+      )}
       {createOffer && (
         <Coupons
           setSlidebox={setCreateOffer}
@@ -578,7 +322,7 @@ export const ConfigureStrategies = ({
         />
       )}
       <ReviewTierModal {...reviewTierProps} />
-    </CapRow>
+    </>
   );
 };
 
@@ -589,12 +333,10 @@ ConfigureStrategies.propTypes = {
   pointStrategy: PropTypes.object,
   refreshStrategyData: PropTypes.func,
   pointTypeIdData: PropTypes.object,
+  currentProgram: PropTypes.object,
   actions: PropTypes.object,
   capActions: PropTypes.object,
   userGroupV2Data: PropTypes.object,
-  groupRedemptionData: PropTypes.object,
-  EMFData: PropTypes.object,
-  hasLabelCustomisationEnabled: PropTypes.bool,
 };
 
 function mapDispatchToProps(dispatch) {
@@ -607,11 +349,7 @@ function mapDispatchToProps(dispatch) {
 const mapStateToProps = createStructuredSelector({
   pointsCurrencyRatioData: makeSelectPointCurrencyRatio(),
   couponData: makeSelectCouponConfig(),
-  customLabelsData: makeSelectCustomLabels(),
-  groupRedemptionData: makeSelectGroupRedemptionStatus(),
-  EMFData: makeSelectEMFStatus(),
-  userData: makeSelectCap(),
-  isPartnerProgramEnabledData: makeSelectPartnerProgramLinking(),
+  userGroupV2Data: makeSelectUserGroupV2Status(),
 });
 
 const withConnect = connect(
@@ -627,6 +365,6 @@ export default withErrorBoundary(
     withSaga,
     withReducer,
     withConnect,
-  )(injectIntl(clearDataOnUnmount(withStyles(ConfigureStrategies, styles)))),
+  )(injectIntl(withStyles(ConfigureStrategies, styles))),
   { useStyle: true },
 );

package/components/organisms/ConfigureStrategies/actions.js

@@ -9,7 +9,3 @@ export const savePointCurrencyRatio = (
   programId,
   callback,
 });
-
-export const clearData = () => ({
-  type: types.CLEAR_DATA,
-});

package/components/organisms/ConfigureStrategies/constants.js

@@ -2,14 +2,10 @@ export const STEP_1 = '1';
 export const STEP_2 = '2';
 export const STEP_3 = '3';
 export const STEP_4 = '4';
-export const STEP_5 = '5';
-export const STEP_6 = '6';
 
 export const STEP_TIER = 'STEP_TIER';
 export const STEP_COMMUNICATION = 'STEP_COMMUNICATION';
 export const STEP_OFFER = 'STEP_OFFER';
-export const STEP_SUPPLEMENTARY = 'STEP_SUPPLEMENTARY';
-export const STEP_EXTERNAL = 'STEP_EXTERNAL';
 
 export const PRIMARY_OFFER_VIEW = 'primaryOfferView';
 export const SECONDARY_OFFER_VIEW = 'secondaryOfferView';
@@ -20,7 +16,3 @@ export const SAVE_POINTS_CURRENCY_RATIO_SUCCESS =
   'ConfigureStrategies/SAVE_POINTS_CURRENCY_RATIO_SUCCESS';
 export const SAVE_POINTS_CURRENCY_RATIO_FAILURE =
   'ConfigureStrategies/SAVE_POINTS_CURRENCY_RATIO_FAILURE';
-
-export const REWARD_CURRENCY = 'Reward currency';
-
-export const CLEAR_DATA = 'configureStrategies/CLEAR_DATA';