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

package/components/organisms/RedeemConditions/RedeemConditions.js

@@ -1,4 +1,4 @@
-import React, { useState, useMemo, useRef, useCallback, useEffect } from 'react';
+import React, { useState, useMemo, useRef, useCallback } from 'react';
 import { injectIntl, intlShape } from 'react-intl';
 import PropTypes from 'prop-types';
 import withStyles from 'utils/withStyles';
@@ -39,7 +39,6 @@ import globalMessages from '../../pages/Cap/messages';
 import * as programContext from '../../pages/ProgramSummary/context';
 import * as strategyContext from '../StrategyDashboard/context';
 import { gtmPush } from '../../../utils/gtmTrackers';
-import { makeSelectPointStrategyDetails } from '../../pages/Cap/selectors';
 
 const { REQUEST, SLAB_DEPENDENT, SLAB_INDEPENDENT } = appConstants;
 const { getProgramContext } = programContext;
@@ -84,7 +83,7 @@ const propertyDefaultValues = ({
   ),
 });
 
-export const RedeemConditions = props => {
+const RedeemConditions = props => {
   const {
     show,
     actions,
@@ -100,24 +99,18 @@ export const RedeemConditions = props => {
     intl: { formatMessage },
     capActions,
     refreshStrategyData,
-    strategyData: {
-      pointStrategy: { pointsRedemption },
-    },
   } = props;
 
   const { programId, currentProgram } = getProgramContext();
   const {
     strategyTypeId: { pointsRedemption: strategyTypeId } = {},
   } = getStratergyContext();
-
   const [tiers] = useState(currentProgram?.slabs || []);
   const [isSameTier, setIsSameTier] = useState(
     !(redeemPropValues?.redemption_threshold_type === SLAB_DEPENDENT),
   );
   const [name, setName] = useState(redeemName);
-  const [conditionNameExistsError, setConditionNameExistsError] = useState(false);
   const [description, setDescription] = useState(redeemDesc);
-  const [redeemError, setRedeemError] = useState(false);
   const initalPropertyValues = useRef(
     propertyDefaultValues({
       ...redeemPropValues,
@@ -127,22 +120,11 @@ export const RedeemConditions = props => {
   const [propertyValues, setPropertyValues] = useState(
     cloneDeep(initalPropertyValues.current),
   );
-  const [localRedeemValue, setLocalRedeemValue] = useState({});
   const showSpin = upsertRedeemStatus === REQUEST;
 
   const checkIsValueFound = value =>
     !isNil(value) && (value || `${value}` === '0');
 
- useEffect(
-   () => {
-     const anyTierExceedsMaxLimit = Object.values(localRedeemValue).some(
-       value => value?.exceedsMaxLimit === true,
-     );
-     setRedeemError(anyTierExceedsMaxLimit);
-   },
-   [localRedeemValue, isSameTier],
- );
-
   const isSaveDisabled = useMemo(
     () => {
       const isProperyValuesNotFilled = Object.keys(propertyValues || {}).find(
@@ -153,46 +135,10 @@ export const RedeemConditions = props => {
           return notNilValues.length !== tiers.length;
         },
       );
-      return (
-        showSpin || 
-        redeemError ||
-        !name ||
-        !description ||
-        !!isProperyValuesNotFilled ||
-        conditionNameExistsError
-      );
-    },
-    [showSpin, name, description, propertyValues, conditionNameExistsError, redeemError],
-  );
-
-  const pointsRedemptionNames = useMemo(
-    () => {
-      const pointsRedemptionNames = {};
-      pointsRedemption.forEach(
-        tracker =>
-          (pointsRedemptionNames[
-            tracker?.name?.trim()?.toLowerCase()
-          ] = tracker),
-      );
-      return pointsRedemptionNames;
+      return showSpin || !name || !description || !!isProperyValuesNotFilled;
     },
-    [pointsRedemption.length],
+    [showSpin, name, description, propertyValues],
   );
-  const onNameChange = event => {
-    setConditionNameExistsError(false);
-    setName(event.target.value);
-  };
-
-  const checkConditionNameExists = () => {
-    if (pointsRedemptionNames[name?.trim()?.toLowerCase()])
-      setConditionNameExistsError(true);
-    else setConditionNameExistsError(false);
-  };
-
-  const validateName = () => {
-    if (!strategyId || (strategyId && name?.trim() !== redeemName?.trim()))
-      checkConditionNameExists();
-  };
 
   const PrimayInfoProps = {
     inputs: [
@@ -200,12 +146,7 @@ export const RedeemConditions = props => {
         value: name,
         label: formatMessage(globalMessages.name),
         placeholder: formatMessage(messages.namePlaceholder),
-        onChange: onNameChange,
-        onBlur: validateName,
-        error: conditionNameExistsError,
-        errorMessage: conditionNameExistsError
-          ? formatMessage(messages.conditionNameExistsError)
-          : '',
+        onChange: event => setName(event.target.value),
       },
       {
         value: description,
@@ -225,7 +166,7 @@ export const RedeemConditions = props => {
   const TierSelection = (
     <FlexWithMargin>
       <CapCheckbox checked={isSameTier} onChange={onTierChange}>
-        {formatMessage(globalMessages.tierConditions)}
+        {formatMessage(messages.tierConditions)}
       </CapCheckbox>
     </FlexWithMargin>
   );
@@ -274,9 +215,6 @@ export const RedeemConditions = props => {
             tierIndex={0}
             initalValue={getInitalValue(0)}
             onChangeValues={onChangeValues}
-            isSameTier={isSameTier}
-            localRedeemValue={localRedeemValue}
-            setLocalRedeemValue={setLocalRedeemValue}
           />
         ) : (
           <CapRow>
@@ -291,9 +229,6 @@ export const RedeemConditions = props => {
                     tierIndex={tierIndex}
                     initalValue={getInitalValue(tierIndex)}
                     onChangeValues={onChangeValues}
-                    isSameTier={isSameTier}
-                    localRedeemValue={localRedeemValue}
-                    setLocalRedeemValue={setLocalRedeemValue}
                   />
                 </CapRow>
               )),
@@ -305,60 +240,56 @@ export const RedeemConditions = props => {
   );
 
   const onSaveClick = () => {
-    if (!conditionNameExistsError) {
-      const payload = {
-        name,
-        description: description || `${name}_description`,
-        strategyTypeId: strategyTypeId,
-        owner: 'LOYALTY',
-        propertyValues: {
-          min_points_redeem: joinArrayToString(propertyValues.minPointsRedeem),
-          max_points_redeem: joinArrayToString(propertyValues.maxPointsRedeem),
-          min_current_points: joinArrayToString(
-            propertyValues.minCurrentPoints,
-          ),
-          redeem_divisibility: joinArrayToString(
-            propertyValues.redeemDivisibility,
-          ),
-          min_cumulative_points: joinArrayToString(
-            propertyValues.minCumulativePoints,
-          ),
-          min_cumulative_purchase: joinArrayToString(
-            propertyValues.minCumulativePurchase,
-          ),
-          redemption_threshold_type: isSameTier
-            ? SLAB_INDEPENDENT
-            : SLAB_DEPENDENT,
-        },
-      };
-      strategyId && (payload.strategyId = `${strategyId}`);
-      actions.upsertRedeem(programId, payload, result => {
-        if (result?.success) {
-          if (strategyId) {
-            CapNotification.success({
-              message: formatMessage(globalMessages.editedSuccessfully),
-            });
-          } else {
-            CapNotification.success({
-              message: formatMessage(globalMessages.createdSuccessfully),
-            });
-          }
-          const mode = strategyId && strategyId !== -1 ? 'EDIT' : 'CREATE';
-          const redeemPointDetails = Object.assign(payload, {
-            programId: programId,
-            mode,
+    const payload = {
+      name,
+      description: description || `${name}_description`,
+      strategyTypeId: strategyTypeId,
+      owner: 'LOYALTY',
+      propertyValues: {
+        min_points_redeem: joinArrayToString(propertyValues.minPointsRedeem),
+        max_points_redeem: joinArrayToString(propertyValues.maxPointsRedeem),
+        min_current_points: joinArrayToString(propertyValues.minCurrentPoints),
+        redeem_divisibility: joinArrayToString(
+          propertyValues.redeemDivisibility,
+        ),
+        min_cumulative_points: joinArrayToString(
+          propertyValues.minCumulativePoints,
+        ),
+        min_cumulative_purchase: joinArrayToString(
+          propertyValues.minCumulativePurchase,
+        ),
+        redemption_threshold_type: isSameTier
+          ? SLAB_INDEPENDENT
+          : SLAB_DEPENDENT,
+      },
+    };
+    strategyId && (payload.strategyId = `${strategyId}`);
+    actions.upsertRedeem(programId, payload, result => {
+      if (result?.success) {
+        if (strategyId) {
+          CapNotification.success({
+            message: formatMessage(globalMessages.editedSuccessfully),
           });
-          gtmPush('redeemPointDetails', redeemPointDetails);
-          refreshStrategyData();
-          closeSlidebox();
-          capActions.checkReconfigureProgram(programId);
         } else {
-          CapNotification.error({
-            message: formatMessage(globalMessages.errorMessage),
+          CapNotification.success({
+            message: formatMessage(globalMessages.createdSuccessfully),
           });
         }
-      });
-    }
+        const mode = strategyId && strategyId !== -1 ? 'EDIT' : 'CREATE';
+        const redeemPointDetails = Object.assign(payload, {
+          programId: programId,
+          mode,
+        });
+        gtmPush('redeemPointDetails', redeemPointDetails);
+        refreshStrategyData();
+        closeSlidebox();
+        capActions.checkReconfigureProgram(programId);
+      } else {
+        CapNotification.error({
+          message: formatMessage(globalMessages.errorMessage),
+        });
+      }
+    });
   };
 
   const SlideBoxFooter = (
@@ -385,7 +316,7 @@ export const RedeemConditions = props => {
               `${!strategyId ? 'redeemCondition' : 'editRedeemCondition'}`
             ],
           )}
-          description={formatMessage(globalMessages.redeemConditionsDesc)}
+          description={formatMessage(messages.redeemConditionInductive)}
         />
       }
       size="slide-box-size-medium"
@@ -408,7 +339,6 @@ RedeemConditions.propTypes = {
 
 const mapStateToProps = createStructuredSelector({
   upsertRedeemData: makeSelectUpsertRedeem(),
-  strategyData: makeSelectPointStrategyDetails(),
 });
 
 function mapDispatchToProps(dispatch) {

package/components/organisms/RedeemConditions/constants.js

@@ -9,5 +9,3 @@ export const UPSERT_REDEEM_SUCCESS = 'RedeemConditions/UPSERT_REDEEM_SUCCESS';
 export const UPSERT_REDEEM_FAILURE = 'RedeemConditions/UPSERT_REDEEM_FAILURE';
 
 export const CLEAR_DATA = 'RedeemConditions/CLEAR_DATA';
-
-export const MAX_REDEEM_VALUE = 100000000;

package/components/organisms/RedeemConditions/messages.js

@@ -17,6 +17,10 @@ export default defineMessages({
     id: `${scope}.editRedeemCondition`,
     defaultMessage: 'Edit redeem condition',
   },
+  redeemConditionInductive: {
+    id: `${scope}.redeemConditionInductive`,
+    defaultMessage: 'Define how customers can redeem points',
+  },
   namePlaceholder: {
     id: `${scope}.namePlaceholder`,
     defaultMessage: 'Type Name',
@@ -25,8 +29,8 @@ export default defineMessages({
     id: `${scope}.descriptionPlaceholder`,
     defaultMessage: 'Add Description',
   },
-  conditionNameExistsError: {
-    id: `${scope}.conditionNameExistsError`,
-    defaultMessage: 'Condition Name already exists',
+  tierConditions: {
+    id: `${scope}.tierConditions`,
+    defaultMessage: 'Same for all Tiers',
   },
 });

package/components/organisms/RedemptionStrategy/RedemptionStrategy.js

@@ -26,11 +26,6 @@ import TableOption from '../../molecules/TableOption';
 import StrategiesTag from '../../molecules/StrategiesTag';
 import EllipsisText from '../../atoms/EllipsisText';
 import { sorterHandler } from '../LoyaltyDetail/utils';
-import CapReportLink from '../../molecules/CapReportLink';
-import { CAP_SPACE_80 } from '@capillarytech/cap-ui-library/styled/variables';
-import { formatMessageHandler } from '../../../utils/commonUtils';
-import { checkDefaultConfiguration } from '../PointStrategies/utils';
-import DisabledMoreIcon from '../../atoms/DisabledMoreIcon';
 
 const { FlexApart } = globalStyle;
 const { styles } = style;
@@ -43,10 +38,9 @@ const {
   EDIT,
   POSITIVE_DECIMALS,
   SORT_STR,
-  DISABLE_EI_STATS,
 } = appConstants;
 
-const { QUANTITATIVE_VALUE, QUANTITATIVE_VALUE_PTS, RANGE_DATA, REDEMPTION_STRATEGY_NAME_MAP } = constants;
+const { QUANTITATIVE_VALUE, QUANTITATIVE_VALUE_PTS, RANGE_DATA } = constants;
 
 export const RedemptionStrategy = ({
   intl: { formatMessage },
@@ -57,14 +51,10 @@ export const RedemptionStrategy = ({
   buttonAction,
   buttonDescription,
   onOptionClick,
-  currentOrgDetails: { basic_details: { base_currency_symbol = '', name : orgName = "" } = {}, accessibleFeatures = [] } = {},
+  currentOrgDetails: { basic_details: { base_currency_symbol = '' } = {} } = {},
   pointsCurrencyRatio = '',
-  handlePointCurrencyRatioChange = () => { },
+  handlePointCurrencyRatioChange = () => {},
 }) => {
-  const hasInsightsChartDisabled = accessibleFeatures.includes(
-    DISABLE_EI_STATS,
-  );
-
   const [currencyRatio, setCurrencyRatio] = useState(pointsCurrencyRatio);
   const [searchValue, setSearchValue] = useState('');
 
@@ -85,11 +75,11 @@ export const RedemptionStrategy = ({
 
   const minLifetimePurchaseMessage = base_currency_symbol
     ? `${formatMessage(messages.minLifetimePurchase)} ${formatMessage(
-      messages.inSymbol,
-      {
-        symbol: base_currency_symbol,
-      },
-    )}`
+        messages.inSymbol,
+        {
+          symbol: base_currency_symbol,
+        },
+      )}`
     : formatMessage(messages.minLifetimePurchase);
 
   const columns = [
@@ -203,57 +193,47 @@ export const RedemptionStrategy = ({
   const modifiedDatasource = useMemo(
     () =>
       Array.isArray(redemptionStrategyDetails) &&
-        redemptionStrategyDetails.length > 0
+      redemptionStrategyDetails.length > 0
         ? redemptionStrategyDetails
-          .filter(
-            redemptionDetail =>
-              !searchValue ||
-              redemptionDetail.name
-                .toUpperCase()
-                .indexOf(searchValue.toUpperCase()) !== -1,
-          )
-          .map(
-            ({
-              id,
-              name,
-              description,
-              propertyValues: {
-                min_points_redeem = '',
-                max_points_redeem = '',
-                min_cumulative_points = '',
-                min_cumulative_purchase = '',
-                min_current_points = '',
-                redemption_threshold_type = '',
-                redeem_divisibility = '',
-              },
-            }) => {
-              return {
-              id,
-              name: formatMessageHandler(
-                formatMessage,
-                messages[REDEMPTION_STRATEGY_NAME_MAP[name]],
+            .filter(
+              redemptionDetail =>
+                !searchValue ||
+                redemptionDetail.name
+                  .toUpperCase()
+                  .indexOf(searchValue.toUpperCase()) !== -1,
+            )
+            .map(
+              ({
+                id,
+                name,
+                description,
+                propertyValues: {
+                  min_points_redeem = '',
+                  max_points_redeem = '',
+                  min_cumulative_points = '',
+                  min_cumulative_purchase = '',
+                  min_current_points = '',
+                  redemption_threshold_type = '',
+                  redeem_divisibility = '',
+                },
+              }) => ({
+                id,
                 name,
-              ),
-              description : (messages[REDEMPTION_STRATEGY_NAME_MAP[name]] && orgName)
-              ? formatMessage(globalMessages.strategyDescription, {
-                strategyName: formatMessage(messages[REDEMPTION_STRATEGY_NAME_MAP[name]]),
-                orgName,
-              })
-              : description,
-              tier: redemption_threshold_type,
-              redemptionRange: {
-                min: min_points_redeem,
-                max: max_points_redeem,
-              },
-              minLifetimePoints: min_cumulative_points,
-              prefixSymbol: '>',
-              minLifetimePurchase: min_cumulative_purchase,
-              minPointsBalance: min_current_points,
-              redeemDivisibility: redeem_divisibility,
-              workflow: 'N/A',
-              slabs: currentProgram.slabs,
-            }},
-          )
+                description,
+                tier: redemption_threshold_type,
+                redemptionRange: {
+                  min: min_points_redeem,
+                  max: max_points_redeem,
+                },
+                minLifetimePoints: min_cumulative_points,
+                prefixSymbol: '>',
+                minLifetimePurchase: min_cumulative_purchase,
+                minPointsBalance: min_current_points,
+                redeemDivisibility: redeem_divisibility,
+                workflow: 'N/A',
+                slabs: currentProgram.slabs,
+              }),
+            )
         : [],
     [searchValue, redemptionStrategyDetails],
   );
@@ -289,10 +269,10 @@ export const RedemptionStrategy = ({
       getColumnByType(columnType, redemptionStrategyDetail, dataKey, dataValue),
     ...(sortColumnName
       ? {
-        sortDirections: [DESCEND, ASCEND],
-        sorter: (first, next) =>
-          sorterHandler(sortColumnType, sortColumnName, first, next),
-      }
+          sortDirections: [DESCEND, ASCEND],
+          sorter: (first, next) =>
+            sorterHandler(sortColumnType, sortColumnName, first, next),
+        }
       : {}),
   });
 
@@ -335,8 +315,9 @@ export const RedemptionStrategy = ({
     if (!from && from !== 0) {
       return '';
     }
-    return `${from} ${to || to === 0 ? `${formatMessage(globalMessages.to)} ${to}` : ''
-      }`;
+    return `${from} ${
+      to || to === 0 ? `${formatMessage(globalMessages.to)} ${to}` : ''
+    }`;
   };
 
   const getPointsRangeData = data => {
@@ -370,16 +351,7 @@ export const RedemptionStrategy = ({
     function handleEditClick() {
       onEditClick(rowData);
     }
-    const isDefaultStrategy = checkDefaultConfiguration(
-      rowData,
-      currentProgram.slabs.length,
-    );
-    return isDefaultStrategy ? (
-      <DisabledMoreIcon
-        title={formatMessage(globalMessages.defaultEditTooltip)}
-        disabled
-      />
-    ) : (
+    return (
       <TableOption
         onEditClick={handleEditClick}
         className="lp-menu-config-points"
@@ -476,8 +448,8 @@ export const RedemptionStrategy = ({
     !isEditable
       ? columns.map((columnData, index) => getColumnProps(columnData, index))
       : editableColumn.map((columnData, index) =>
-        getColumnProps(columnData, index),
-      );
+          getColumnProps(columnData, index),
+        );
 
   const tableProps = {
     className: 'redemption-table',
@@ -516,30 +488,14 @@ export const RedemptionStrategy = ({
           }
         />
         {isEditable ? (
-          <div style={{ display: "flex", alignItems: "center" }}>
-            {
-              !hasInsightsChartDisabled && 
-              <>
-                <CapReportLink 
-                  link={appConstants.POINTS_CONDITION_REPORT_PATH} 
-                  tooltip={formatMessage(globalMessages.pointsConditionPointsStandardReportToolTip)} 
-                  isIconOnly={true} 
-                />
-                <CapDivider data-testId="cap-report-link-divider" 
-                  type="vertical" 
-                  style={{height:"20px"}}
-                />
-              </>
-            }
-            <CapButton
-              onClick={buttonAction}
-              isAddBtn
-              type="flat"
-              className="lp-btn-config-add-points"
-            >
-              {buttonDescription}
-            </CapButton>
-          </div>
+          <CapButton
+            onClick={buttonAction}
+            isAddBtn
+            type="flat"
+            className="lp-btn-config-add-points"
+          >
+            {buttonDescription}
+          </CapButton>
         ) : null}
       </FlexApart>
       <CapRow>
@@ -575,7 +531,7 @@ export const RedemptionStrategy = ({
                   </CapHeading>
                 ) : (
                   <NumberInput
-                    inputWidth={CAP_SPACE_80}
+                    inputWidth="100px"
                     type={POSITIVE_DECIMALS}
                     value={currencyRatio}
                     prefix={base_currency_symbol}
@@ -601,9 +557,9 @@ RedemptionStrategy.defaultProps = {
   currentProgram: {},
   redemptionStrategyDetails: [],
   isEditable: false,
-  buttonAction: () => { },
+  buttonAction: () => {},
   buttonDescription: '',
-  onOptionClick: () => { },
+  onOptionClick: () => {},
 };
 
 RedemptionStrategy.propTypes = {
@@ -622,7 +578,6 @@ RedemptionStrategy.propTypes = {
     PropTypes.number,
     PropTypes.string,
   ]),
-  currentOrgDetails: PropTypes.object,
 };
 
 export default withErrorBoundary(

package/components/organisms/RedemptionStrategy/constants.js

@@ -7,7 +7,3 @@
 export const QUANTITATIVE_VALUE = 'QUANTITATIVE_VALUE';
 export const QUANTITATIVE_VALUE_PTS = 'QUANTITATIVE_VALUE_PTS';
 export const RANGE_DATA = 'RANGE_DATA';
-
-export const REDEMPTION_STRATEGY_NAME_MAP = {
-    RedemptionThreshold: 'redemS_RedemptionThreshold_name',
-}

package/components/organisms/RedemptionStrategy/messages.js

@@ -11,11 +11,11 @@ export const scope = 'loyaltyPlus.components.organisms.RedemptionStrategy';
 export default defineMessages({
   redemptionRange: {
     id: `${scope}.redemptionRange`,
-    defaultMessage: 'Redemption limit (for reward currencies)',
+    defaultMessage: 'Redemption limit (for points)',
   },
   minLifetimePts: {
     id: `${scope}.minLifetimePts`,
-    defaultMessage: 'Min. lifetime reward currencies needed',
+    defaultMessage: 'Min. lifetime points needed',
   },
   minLifetimePurchase: {
     id: `${scope}.minLifetimePurchase`,
@@ -27,11 +27,11 @@ export default defineMessages({
   },
   minPointsBalance: {
     id: `${scope}.minPointsBalance`,
-    defaultMessage: 'Min. current reward currencies needed',
+    defaultMessage: 'Min. current points needed',
   },
   inMultipleOf: {
     id: `${scope}.inMultipleOf`,
-    defaultMessage: 'Allow reward currencies in multiple of',
+    defaultMessage: 'Allow points in multiple of',
   },
   noRedemptionStrategy: {
     id: `${scope}.noRedemptionStrategy`,
@@ -43,7 +43,7 @@ export default defineMessages({
   },
   redeemDescription: {
     id: `${scope}.redeemDescription`,
-    defaultMessage: 'Define conditions around how reward currencies can be redeemed by customers',
+    defaultMessage: 'Define conditions around how points can be redeemed by customers',
   },
   worthDesctiption: {
     id: `${scope}.worthDesctiption`,
@@ -53,8 +53,4 @@ export default defineMessages({
     id: `${scope}.eachPointWorth`,
     defaultMessage: 'Each point is worth ',
   },
-  redemS_RedemptionThreshold_name: {
-    id: `${scope}.redemS_RedemptionThreshold_name`,
-    defaultMessage: 'RedemptionThreshold',
-  },
 });