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

package/components/molecules/CreateTracker/constants.js

@@ -10,5 +10,3 @@ export const UPSERT_TRACKER_STRATEGY_SUCCESS =
   'createTracker/UPSERT_TRACKER_STRATEGY_SUCCESS';
 export const UPSERT_TRACKER_STRATEGY_FAILURE =
   'createTracker/UPSERT_TRACKER_STRATEGY_FAILURE';
-
-export const ALTERNATE_CURRENCIES = 'ALTERNATE_CURRENCIES';

package/components/molecules/CreateTracker/messages.js

@@ -9,6 +9,10 @@ import { defineMessages } from 'react-intl';
 export const scope = 'loyaltyPlus.components.molecules.CreateTracker';
 
 export default defineMessages({
+  addTracker: {
+    id: `${scope}.addTracker`,
+    defaultMessage: 'Add tracker',
+  },
   editTracker: {
     id: `${scope}.editTracker`,
     defaultMessage: 'Edit tracker',
@@ -17,6 +21,18 @@ export default defineMessages({
     id: `${scope}.addTrackerDesc`,
     defaultMessage: 'Set trackers for transaction events',
   },
+  saveAndContinue: {
+    id: `${scope}.saveAndContinue`,
+    defaultMessage: 'Save',
+  },
+  name: {
+    id: `${scope}.name`,
+    defaultMessage: 'Name',
+  },
+  caseName: {
+    id: `${scope}.caseName`,
+    defaultMessage: 'Case name',
+  },
   trackFor: {
     id: `${scope}.trackFor`,
     defaultMessage: 'Track for',
@@ -37,13 +53,9 @@ export default defineMessages({
     id: `${scope}.pointTypesDesc`,
     defaultMessage: 'Select type of points',
   },
-  alternateCurrencyPointTypes: {
-    id: `${scope}.alternateCurrencyPointTypes`,
-    defaultMessage: 'Type of reward currency: {name}',
-  },
-  alternateCurrencyPointsTypesDesc: {
-    id: `${scope}.alternateCurrencyPointsTypesDesc`,
-    defaultMessage: 'Select type of reward currency: {name}',
+  pointTypesPlaceholder: {
+    id: `${scope}.pointTypesPlaceholder`,
+    defaultMessage: 'Select type of points',
   },
   extendedField: {
     id: `${scope}.extendedField`,
@@ -57,6 +69,10 @@ export default defineMessages({
     id: `${scope}.extendedFieldPlaceholder`,
     defaultMessage: 'Select extended field',
   },
+  preview: {
+    id: `${scope}.preview`,
+    defaultMessage: 'Preview',
+  },
   addCondition: {
     id: `${scope}.addCondition`,
     defaultMessage: 'Add tracker case',
@@ -65,6 +81,10 @@ export default defineMessages({
     id: `${scope}.limitForwards`,
     defaultMessage: 'Limit no. of forwards per customer',
   },
+  value: {
+    id: `${scope}.value`,
+    defaultMessage: 'Value',
+  },
   days: {
     id: `${scope}.days`,
     defaultMessage: 'days',
@@ -73,6 +93,14 @@ export default defineMessages({
     id: `${scope}.conditionMet`,
     defaultMessage: "What are the tracker's milestones",
   },
+  trackDesc: {
+    id: `${scope}.trackDesc`,
+    defaultMessage: 'Enter period',
+  },
+  period: {
+    id: `${scope}.period`,
+    defaultMessage: 'Period',
+  },
   threasholdValue1: {
     id: `${scope}.threasholdValue1`,
     defaultMessage: 'T1',
@@ -138,7 +166,7 @@ export default defineMessages({
   modeCalendarBasedCyclicWindowTooltipStartDate: {
     id: `${scope}.modeCalendarBasedCyclicWindowTooltipStartDate`,
     defaultMessage:
-      "Start date: Calendar date as specified in the 'Start date' field",
+      'Start date: Calendar date as specified in the ‘Start date’ field',
   },
   modeCalendarBasedCyclicWindowTooltipEndDate: {
     id: `${scope}.modeCalendarBasedCyclicWindowTooltipEndDate`,
@@ -166,7 +194,7 @@ export default defineMessages({
   modeTierChangeWindowTooltipNote: {
     id: `${scope}.modeTierChangeWindowTooltipNote`,
     defaultMessage:
-      "Note: The tracking period doesn't matter here, and can be variable based on how long the customer has been in their current tier",
+      'Note: The tracking period doesn’t matter here, and can be variable based on how long the customer has been in their current tier',
   },
   trackingMethodTooltip: {
     id: `${scope}.trackingMethodTooltip`,
@@ -176,7 +204,7 @@ export default defineMessages({
   trackersNote: {
     id: `${scope}.trackersNote`,
     defaultMessage:
-      'Trackers start tracking from their addition day to the loyalty workflow, except for rewards currency trackers, which track independently based on duration.',
+      'Trackers need to be incorporated in Workflows to define when they need to be evaluated and what happens when the milestone conditions are met. Please refer to support documentation for details',
   },
   window: {
     id: `${scope}.window`,
@@ -186,6 +214,10 @@ export default defineMessages({
     id: `${scope}.trackingMethodDesc`,
     defaultMessage: 'Select method of tracking the item',
   },
+  case: {
+    id: `${scope}.case`,
+    defaultMessage: 'Case',
+  },
   activationText: {
     id: `${scope}.activationText`,
     defaultMessage:
@@ -212,78 +244,4 @@ export default defineMessages({
     id: `${scope}.trackingMethodPlaceholder`,
     defaultMessage: 'Select tracking method',
   },
-  trackerNameExistsError: {
-    id: `${scope}.trackerNameExistsError`,
-    defaultMessage: 'Tracker Name already exists',
-  },
-  decimalErrorMessage: {
-    id: `${scope}.decimalErrorMessage`,
-    defaultMessage: 'Value must be a whole integer',
-  },
-  requiredTootipText: {
-    id: `${scope}.requiredTootipText`,
-    defaultMessage: 'To Proceed, fill all the required information',
-  },
-  billAmountInfo: {
-    id: `${scope}.billAmountInfo`,
-    defaultMessage:
-      'Transaction amount tracks bill_amount field in AddTransaction API & is the total net transaction amount after discounts.',
-  },
-  billDiscountInfo: {
-    id: `${scope}.billDiscountInfo`,
-    defaultMessage:
-      'Discounts tracks discount & is the total discount subtracted/applied in the transactions.',
-  },
-  billGrossAmountInfo: {
-    id: `${scope}.billGrossAmountInfo`,
-    defaultMessage:
-      'Transaction gross amount tracks gross_amount & is the total transaction amount before discounts.',
-  },
-  billTotalQuantityInfo: {
-    id: `${scope}.billTotalQuantityInfo`,
-    defaultMessage:
-      'Transaction total quantity tracks the sum of quantities of all lineitems in a transaction. Eg. In a bill, the qunatity of L1 is 2 and L2 is 4, so the tracked value would be 6.',
-  },
-  lineitemAmountInfo: {
-    id: `${scope}.lineitemAmountInfo`,
-    defaultMessage:
-      'Lineitem amount tracks amount & is the total amount of a lineitem in a transaction. Eg. In a bill, the quantity of L1 is 2 and L1 costs 10$ so, the amount will be 20$.',
-  },
-  lineitemCountInfo: {
-    id: `${scope}.lineitemCountInfo`,
-    defaultMessage:
-      'The count of total number of lineitems in a transaction. Eg. In a bill, there are L1 & L2, irrespectve of their quanity, so the tracked value will be 2.',
-  },
-  lineitemQuantityInfo: {
-    id: `${scope}.lineitemQuantityInfo`,
-    defaultMessage:
-      'Lineitem quantity tracks qty & is the quantity of a lineitem in a transaction.',
-  },
-  customerVisitsInfo: {
-    id: `${scope}.customerVisitsInfo`,
-    defaultMessage:
-      'Customer visits tracks the number of unique transaction days.',
-  },
-  pointsInfo: {
-    id: `${scope}.pointsInfo`,
-    defaultMessage:
-      'The total number of points earned by the customer. This includes both regular and promotional points which are redeemable.',
-  },
-  billExtendedFieldInfo: {
-    id: `${scope}.billExtendedFieldInfo`,
-    defaultMessage: 'Transaction extended field',
-  },
-  lineitemExtendedFieldInfo: {
-    id: `${scope}.lineitemExtendedFieldInfo`,
-    defaultMessage: 'Lineitem extended field',
-  },
-  trackerNameWarning: {
-    id: `${scope}.trackerNameWarning`,
-    defaultMessage: 'Update the {name} wherever it is used, including in tracker actions and rules, to avoid event failure.',
-  },
-  sumSupportedPointsAndACTracker: {
-    id: `${scope}.sumSupportedPointsAndACTracker`,
-    defaultMessage:
-      'Only sum is supported for Points and Reward Currency tracked entities.',
-  },
 });

package/components/molecules/CreateTracker/reducer.js

@@ -13,7 +13,7 @@ export const initialState = fromJS({
   upsertTrackerError: null,
 });
 
-const CreateTrackerReducer = (state = initialState, action = {}) => {
+const CreateTrackerReducer = (state = initialState, action) => {
   switch (action.type) {
     case types.GET_EXTENDED_FIELDS_REQUEST:
       return state

package/components/molecules/CreateTracker/style.js

@@ -11,10 +11,6 @@ export const {
   CAP_SPACE_04,
   CAP_G09,
   CAP_G06,
-  CAP_RED,
-  FONT_WEIGHT_REGULAR,
-  CAP_COLOR_04,
-  CAP_COLOR_05,
 } = styledVars;
 
 export default css`
@@ -58,58 +54,4 @@ export default css`
   .window-type-tooltip-subtitle {
     margin-top: ${CAP_SPACE_12};
   }
-  .input-error {
-    .ant-input {
-      border: solid 1px ${CAP_RED} !important;
-      &:focus,
-      &:hover {
-        border: solid 1px ${CAP_RED} !important;
-      }
-    }
-  }
-  .tracker-currency-header-details {
-    margin: ${CAP_SPACE_04} !important;
-  }
-  .alternate-status-label {
-    margin-right: ${CAP_SPACE_08};
-  }
-  .alternate-duration-label {
-    margin-top: ${CAP_SPACE_08};
-    margin-right: ${CAP_SPACE_08};
-  }
-  .active-tag-value {
-    height: unset !important;
-    margin-bottom: ${CAP_SPACE_08};
-    margin-top: ${CAP_SPACE_08};
-    font-weight: ${FONT_WEIGHT_REGULAR};
-  }
-  .trackers-note {
-    margin-bottom: ${CAP_SPACE_16};
-  }
-  .trackers-note-desc {
-    background-color: ${CAP_COLOR_04} !important;
-  }
-  .enrolment-description {
-    margin-top: ${CAP_SPACE_08};
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    max-width: 65%;
-  }
-  .tracker-warning-container {
-    margin-top: ${CAP_SPACE_04};
-    background: ${CAP_COLOR_05} !important;
-    .tracker-flex {
-      flex-wrap: nowrap !important
-    }
-    .tracker-warning-text-container {
-      margin-left: ${CAP_SPACE_04} !important ;
-    }
-  }
-  .sum-supported-info-note {
-    margin-right: ${CAP_SPACE_08};
-    .note-message-container {
-      align-items: center;
-    }
-  }
 `;

package/components/molecules/CustomTree/CustomTree.js

@@ -1,296 +1,44 @@
-import React, { useMemo, Suspense, useState, useEffect } from 'react';
-import { compose } from 'redux';
-import { createStructuredSelector } from 'reselect';
+import React, { useMemo, Suspense } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import withStyles from 'utils/withStyles';
-import { injectIntl, intlShape } from 'react-intl';
-import { connect } from 'react-redux';
 
 import CapSpin from '@capillarytech/cap-ui-library/CapSpin';
-import CapInput from '@capillarytech/cap-ui-library/CapInput';
-import CapRow from '@capillarytech/cap-ui-library/CapRow';
-import CapColumn from '@capillarytech/cap-ui-library/CapColumn';
-import CapIcon from '@capillarytech/cap-ui-library/CapIcon';
-import CapLabel from '@capillarytech/cap-ui-library/CapLabel';
-import CapTree from '@capillarytech/cap-ui-library/CapTree';
-import CapDivider from '@capillarytech/cap-ui-library/CapDivider';
-import { getHighlightedText } from 'utils/commonUtils';
 
-import GroupItemLabel from '../../organisms/GroupItemLabel';
-import globalMessages from '../../pages/Cap/messages';
-import messages from './messages';
 import styles from './style';
-import {
-  highlightSelectedRulesetContainer,
-  expandInitialSelectedRulesetContainer,
-  getHighlightedSet,
-} from './utils';
-import { makeSelectCap } from '../../pages/Cap/selectors';
-import CustomTreeHelper from '../CustomTreeHelper';
-import {
-  ENABLE_RULESETS_UX_ENHANCEMENTS,
-  SOURCE_LOYALTY,
-} from '../../pages/App/constants';
 
-export const CustomTree = ({
-  intl: { formatMessage },
+const CustomTree = ({
   className,
   treeData,
   defaultExpandAll,
   showSwither,
-  setSetsConditionsSearch,
-  setsConditionsSearch,
-  setSearchCounter,
-  setSearchConditionCounter,
-  showSearch,
-  totalSearchResult,
-  searchIndex,
-  setSearchIndex,
-  processWorflowData,
-  rulesets,
-  selectedKeys,
-  eventType,
-  userData = {},
-  source = SOURCE_LOYALTY,
   ...rest
 }) => {
-  const { currentOrgDetails = {} } = userData;
-  const { accessibleFeatures = [] } = currentOrgDetails;
-
-  /* Commented code to serve as a reference for implementing feature control for Rulesets enhancements in the future.
-  const hasLoyaltyUXEnhancementsEnabled = accessibleFeatures.includes(
-    ENABLE_RULESETS_UX_ENHANCEMENTS,
+  const CapTree = useMemo(
+    () => React.lazy(() => import('@capillarytech/cap-ui-library/CapTree')),
+    [JSON.stringify(treeData)],
   );
-   */
-  const hasLoyaltyUXEnhancementsEnabled = true;
-
-  const [highlightedTreeData, setHighlightedTreeData] = useState(treeData);
-  const [key, setKey] = useState(0);
-
-  useEffect(
-    () => {
-      const getRecursivelyHighlightedTreeData = (treeData, counterObj) =>
-        treeData.map(item => {
-          const highlightedText = getHighlightedText({
-            searchValue: setsConditionsSearch,
-            originalStr: item?.title?.props?.label || '',
-            counterObj,
-            searchIndex,
-          });
-          item.searchIndex = counterObj.counter;
-          if (item?.children) {
-            return {
-              ...item,
-              title: (
-                <GroupItemLabel
-                  label={highlightedText}
-                  processWorflowData={processWorflowData}
-                  rulesets={rulesets}
-                  source={source}
-                />
-              ),
-              children: getRecursivelyHighlightedTreeData(
-                item.children,
-                counterObj,
-              ),
-            };
-          }
-          return {
-            ...item,
-            title: (
-              <GroupItemLabel
-                label={highlightedText}
-                processWorflowData={processWorflowData}
-                rulesets={rulesets}
-                source={source}
-              />
-            ),
-          };
-        });
-      if (setsConditionsSearch?.length >= 3) {
-        let counterObj = { counter: 0 }; //Using object because we cannot pass value by ref in javascript.
-        const highlightedTreeData = getRecursivelyHighlightedTreeData(
-          treeData,
-          counterObj,
-        );
-        setSearchCounter(counterObj.counter);
-        setHighlightedTreeData(highlightedTreeData);
-        setKey(key => key + 1);
-      } else {
-        setSearchCounter(0);
-        setHighlightedTreeData(treeData);
-        setKey(key => key + 1);
-      }
-    },
-    [
-      setsConditionsSearch,
-      searchIndex,
-      treeData,
-      processWorflowData,
-      rulesets,
-      setSearchCounter,
-    ],
-  );
-
-  const uxEnhancementCondition =
-    (eventType === 'TransactionAdd' || hasLoyaltyUXEnhancementsEnabled) &&
-    source === SOURCE_LOYALTY;
-
-  const handleSearchValueChange = event => {
-    setSetsConditionsSearch(event?.target?.value);
-    setSearchConditionCounter(0);
-    setSearchIndex(1);
-  };
-
-  const scrollHighlightedSetIntoView = () => {
-    const selectedElement = document.querySelector('.highlighted-set');
-    if (selectedElement) {
-      selectedElement.scrollIntoView({
-        behavior: 'smooth',
-        block: 'center',
-      });
-    }
-  };
-
-  const handleNextSearch = () => {
-    setSearchIndex(searchIndex < totalSearchResult ? searchIndex + 1 : 1);
-    scrollHighlightedSetIntoView();
-  };
-  const handlePrevSearch = () => {
-    setSearchIndex(searchIndex === 1 ? totalSearchResult : searchIndex - 1);
-    scrollHighlightedSetIntoView();
-  };
 
   return (
     <Suspense fallback={<CapSpin />}>
-      <CapRow className={className}>
-        <CapRow
-          className={classnames('sets-condition-container', {
-            'sets-ux-enhancements': uxEnhancementCondition,
-          })}
-        >
-          <CapInput.Search
-            className="sets-condition-search"
-            onChange={handleSearchValueChange}
-            value={setsConditionsSearch}
-            onClear={handleSearchValueChange}
-            data-testid="set-search-input"
-            placeholder={formatMessage(globalMessages.search)}
-          />
-          <CapRow>
-            {totalSearchResult <= 0 ? (
-              <CapRow className="sets-condition-search-inductive">
-                <CapLabel
-                  type="label1"
-                  className="sets-condition-search-inductive-label"
-                >
-                  {formatMessage(messages.minCharsRequiresMsg)}
-                </CapLabel>
-              </CapRow>
-            ) : (
-              <CapRow className="result-search-counter">
-                <CapColumn span={18}>
-                  <CapLabel
-                    type="label1"
-                    className="sets-condition-search-inductive-label"
-                  >
-                    {`${searchIndex} ${formatMessage(
-                      messages.of,
-                    )} ${totalSearchResult}`}
-                  </CapLabel>
-                </CapColumn>
-                <CapColumn span={6}>
-                  <CapColumn span={8} offset={8}>
-                    <CapIcon
-                      type="chevron-up"
-                      onClick={handlePrevSearch}
-                      aria-label="search-prev"
-                      className='up-down-icon'
-                    />
-                  </CapColumn>
-                  <CapColumn span={8}>
-                    <CapIcon
-                      type="chevron-down"
-                      onClick={handleNextSearch}
-                      aria-label="search-next"
-                      className='up-down-icon'
-                    />
-                  </CapColumn>
-                </CapColumn>
-              </CapRow>
-            )}
-          </CapRow>
-          {uxEnhancementCondition && <CapDivider className="search-divider" />}
-        </CapRow>
-        {uxEnhancementCondition ? (
-          highlightedTreeData.map(data => {
-            const customTreeProps = {
-              key,
-              showSwither,
-              defaultExpandAll,
-              data,
-              selectedKeys,
-              rest: { ...rest },
-            };
-            const isRulesetContainerHighlighted = highlightSelectedRulesetContainer(
-              [data],
-              selectedKeys,
-            );
-            const isInitialRulesetContainerExpanded = expandInitialSelectedRulesetContainer(
-              [data],
-              setsConditionsSearch,
-            );
-            const isSetHighlighted = getHighlightedSet(
-              [data],
-              searchIndex,
-              setsConditionsSearch,
-            );
-            return (
-              <CustomTreeHelper
-                customTreeProps={customTreeProps}
-                isRulesetContainerHighlighted={isRulesetContainerHighlighted}
-                isInitialRulesetContainerExpanded={
-                  isInitialRulesetContainerExpanded
-                }
-                isSetHighlighted={isSetHighlighted}
-                setsConditionsSearch={setsConditionsSearch}
-                searchIndex={searchIndex}
-                eventType={eventType}
-              />
-            );
-          })
-        ) : (
-          <CapTree
-            key={key}
-            className={classnames(className, 'groups-tree', {
-              'groups-tree-with-switcher': showSwither,
-            })}
-            blockNode
-            defaultExpandAll={defaultExpandAll}
-            treeData={highlightedTreeData}
-            selectedKeys={[selectedKeys]}
-            {...rest}
-          />
-        )}
-      </CapRow>
+      <CapTree
+        className={classnames(className, 'groups-tree', {
+          'groups-tree-with-switcher': showSwither,
+        })}
+        blockNode
+        defaultExpandAll={defaultExpandAll}
+        treeData={treeData}
+        {...rest}
+      />
     </Suspense>
   );
 };
 
 CustomTree.propTypes = {
-  intl: intlShape.isRequired,
   className: PropTypes.string,
   treeData: PropTypes.array,
   defaultExpandAll: PropTypes.bool,
   showSwither: PropTypes.bool,
-  setsConditionsSearch: PropTypes.string,
-  setSetsConditionsSearch: PropTypes.func,
-  setSearchCounter: PropTypes.func,
-  setSearchConditionCounter: PropTypes.func,
-  totalSearchResult: PropTypes.number,
-  searchIndex: PropTypes.number,
-  setSearchIndex: PropTypes.func,
 };
 
 CustomTree.defaultProps = {
@@ -298,18 +46,6 @@ CustomTree.defaultProps = {
   treeData: [],
   defaultExpandAll: true,
   showSwither: true,
-  setsConditionsSearch: null,
-  showSearch: 'none',
-  totalSearchResult: 0,
-  searchIndex: 0,
 };
 
-const mapStateToProps = createStructuredSelector({
-  userData: makeSelectCap(),
-});
-
-const withConnect = connect(mapStateToProps);
-
-export default compose(withConnect)(
-  injectIntl(withStyles(React.memo(CustomTree), styles)),
-);
+export default withStyles(CustomTree, styles);

package/components/molecules/CustomTree/style.js

@@ -2,24 +2,17 @@ import { css } from 'styled-components';
 import StyledVars from '@capillarytech/cap-ui-library/styled';
 
 const {
-  CAP_SPACE_04,
-  CAP_SPACE_08,
-  CAP_SPACE_16,
-  CAP_SPACE_20,
-  CAP_SPACE_32,
   CAP_SPACE_40,
   FONT_COLOR_05,
-  CAP_G01,
-  CAP_G05,
   CAP_PALE_GREY,
   FONT_WEIGHT_MEDIUM,
-  FONT_SIZE_VS,
 } = StyledVars;
 
 export default css`
   &.ant-tree.cap-tree-v2.groups-tree {
     max-height: 100%;
-    width: inherit;
+    width: fit-content;
+    min-width: 100%;
     overflow: initial;
 
     li {
@@ -63,60 +56,4 @@ export default css`
       }
     }
   }
-
-  .sets-condition-container {
-    margin: ${CAP_SPACE_08};
-    margin-top: ${CAP_SPACE_16};
-    .sets-condition-search {
-      .ant-input {
-        height: ${CAP_SPACE_32};
-      }
-      .ant-input-suffix {
-        svg {
-          color: ${CAP_G01};
-        }
-      }
-    }
-    .sets-condition-search-inductive {
-      margin-top: ${CAP_SPACE_08};
-    }
-    .sets-condition-search-inductive-label {
-      color: ${CAP_G05};
-      font-size: ${FONT_SIZE_VS};
-    }
-    .result-search-counter {
-      display: flex;
-      align-items: center;
-      margin-top: ${CAP_SPACE_04};
-
-      .up-down-icon {
-        svg {
-          width: ${CAP_SPACE_20};
-          height: ${CAP_SPACE_20};
-        }
-      }
-    }
-  }
-
-  .search-divider {
-    width: 100%;
-    margin: ${CAP_SPACE_08} 0 2px 0;
-    min-width: 233px;
-  }
-
-  .sets-ux-enhancements {
-    padding: ${CAP_SPACE_16} ${CAP_SPACE_08} 0 ${CAP_SPACE_08};
-    margin: unset !important;
-    position: sticky;
-    top: 0;
-    z-index: 2;
-    background-color: rgb(250, 251, 252);
-    min-width: 242px;
-    .sets-condition-search {
-      width: 234px;
-    }
-    .result-search-counter {
-      width: 234px;
-    }
-  }
 `;