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

package/components/organisms/AddPointsFilterTransaction/AddPointsFilterTransaction.js

@@ -1,577 +0,0 @@
-import React, { useEffect, useState, useMemo } from 'react';
-import { injectIntl, intlShape } from 'react-intl';
-import PropTypes from 'prop-types';
-import { compose } from 'redux';
-import withErrorBoundary from 'utils/withErrorBoundary';
-import withStyles from 'utils/withStyles';
-import useDeepCompareEffect from 'use-deep-compare-effect';
-
-import CapRow from '@capillarytech/cap-ui-library/CapRow';
-import CapMultiSelect from '@capillarytech/cap-ui-library/CapMultiSelect';
-import CapSelect from '@capillarytech/cap-ui-library/CapSelect';
-import CapSpin from '@capillarytech/cap-ui-library/CapSpin';
-import ConditionSKUUploader from '@capillarytech/cap-ui-library/CapCondition/ConditionSKUUploader';
-import CapMultiSelectWithTree from '@capillarytech/cap-ui-library/CapMultiSelectWithTree';
-import CapTooltip from '@capillarytech/cap-ui-library/CapTooltip';
-
-import isEmpty from 'lodash/isEmpty';
-import globalMessages from '../../pages/Cap/messages';
-import messages from './messages';
-import { styles } from './style';
-import {
-  BRANDS,
-  CATEGORIES,
-  CUSTOM_ATTRIBUTES,
-  SKU,
-  STORES,
-  ZONES,
-  filterAttributeMapping,
-} from './constants';
-import { REQUEST, ROOT, SUCCESS } from '../../pages/App/constants';
-import { FILTER_TRANSACTIONS } from '../ActivityRewardSlider/constants';
-import { validateSkuIds } from '../../../services/api';
-import ConfirmEditModal from '../ActivityRewardSlider/ConfirmEditModal';
-import RootConfirmModal from '../../molecules/RootConfirmModal';
-import OptionWithTooltip from '../../atoms/OptionWithTooltip';
-
-export const AddPointsFilterTransaction = ({
-  intl: { formatMessage },
-  className,
-  pointsAllocationLimitCategory,
-  pointsAllocationTransactionType,
-  dashboard,
-  promoActions: getAllEntitiesActions,
-  productDetails,
-  additionalFilterTransactions = {},
-  setAdditionalFilterTransactions,
-  isEditable,
-  isEditMode,
-}) => {
-  const {
-    stores,
-    fetchingStores,
-    entityZones,
-    fetchingEntityZones,
-  } = dashboard;
-  const {
-    brandDetails,
-    fetchingBrandDetails,
-    categoryDetails,
-    fetchingCategoryDetails,
-    customAttributeDetails,
-    fetchingCustomAttributeDetails,
-  } = productDetails;
-
-  const [filterAttribute, setFilterAttribute] = useState();
-  const [filteredValue, setFilterValue] = useState([]);
-  const [conditionExpression, setConditionExpression] = useState({});
-  const [brands, setBrands] = useState([]);
-  const [categories, setCategories] = useState([]);
-  const [storesData, setStoreData] = useState([]);
-  const [zoneData, setZoneData] = useState([]);
-  const [sku, setSku] = useState({});
-  const [showEditModal, setShowEditModal] = useState(false);
-  const [filterChangeData, setFilterChangeData] = useState();
-
-  const [customAttributeData, setCustomAttributeData] = useState({});
-  const [selectedProducts, setSelectedProducts] = useState([]);
-
-  const [rootZoneModalData, setRootZoneModalData] = useState(false);
-
-  const handleSelectAttribute = value => {
-    setFilterAttribute(value);
-    setFilterValue([]);
-    setBrands([]);
-    setCategories([]);
-    setStoreData([]);
-    setZoneData([]);
-    setSku({});
-    setCustomAttributeData({});
-    setConditionExpression({});
-    setSelectedProducts([]);
-  };
-
-  const handleSelectAttributeChange = value => {
-    if (isEditMode) {
-      setFilterChangeData(value);
-      setShowEditModal(true);
-    } else {
-      handleSelectAttribute(value);
-    }
-  };
-
-  const handleSelectAttributeOk = () => {
-    handleSelectAttribute(filterChangeData);
-    setShowEditModal(false);
-  };
-
-  const closeFilterChangeModal = () => {
-    setShowEditModal(false);
-    setFilterChangeData();
-  };
-
-  const getCustomAttributeDataInFormat = (value = []) => {
-    const transformedData = {};
-    const attributesValue = value || [];
-    if (Array.isArray(attributesValue)) {
-      attributesValue?.forEach(item => {
-        const indexOfDelimiter = item.indexOf('___');
-        if (indexOfDelimiter !== -1) {
-          const key = item.slice(0, indexOfDelimiter).trim();
-          const value = item.slice(indexOfDelimiter + 3);
-
-          if (!transformedData[key]) {
-            transformedData[key] = [];
-          }
-
-          transformedData[key].push(value);
-        } else {
-          transformedData[item] = [];
-        }
-      });
-    } else {
-      return attributesValue; // to confirm -> first time we get array, which we update but this function is again called, which sends our updated object, due to which our logic to check array fails
-    }
-
-    return transformedData;
-  };
-
-  const generatePayload = (filterAttributeParam = filterAttribute, value) => {
-    let skuPayload = conditionExpression?.operand?.valid?.length
-      ? conditionExpression?.operand?.valid
-      : value;
-    const payload = {
-      additionalFilters: {
-        pointsFilters: {
-          excludedPromotions: [],
-        },
-        lineItemFilters: {
-          includedSkus: filterAttributeParam === SKU ? skuPayload : [],
-          includedBrands: filterAttributeParam === BRANDS ? value : [],
-          includedCategories: filterAttributeParam === CATEGORIES ? value : [],
-          includedAttributes:
-            filterAttributeParam === CUSTOM_ATTRIBUTES
-              ? getCustomAttributeDataInFormat(value)
-              : {},
-        },
-        includedStoreIds: filterAttributeParam === STORES ? value : [],
-        includedZoneIds: filterAttributeParam === ZONES ? value : [],
-      },
-    };
-    return payload;
-  };
-
-  const getProductAttributeData = useMemo(
-    () =>
-      customAttributeDetails.map(row => {
-        if (row.possible_values.value.length > 0) {
-          let attributesObject = {
-            key: row.name,
-            title: row.label ? row.label : row.name,
-            isCategory: true,
-          };
-
-          attributesObject.children = row.possible_values.value.map(value => ({
-            key: `${row.name}___${value.name}`,
-            title: value.label ? value.label : value.name,
-          }));
-
-          return attributesObject;
-        } else {
-          return {
-            key: row.name,
-            title: row.name,
-            id: row.id,
-          };
-        }
-      }),
-    [customAttributeDetails],
-  );
-
-  const handleZoneUpdate = value => {
-    setFilterValue(value);
-    setZoneData(value);
-  };
-
-  const handleFilterValueChange = (
-    value,
-    filterAttributeParam = filterAttribute,
-  ) => {
-    setFilterValue(value);
-    if (filterAttributeParam === STORES) {
-      setStoreData(value);
-    } else if (filterAttributeParam === ZONES) {
-      const editModeContainsRoot = additionalFilterTransactions?.additionalFilters?.includedZoneIds?.includes(
-        rootValue?.toString(),
-      );
-      const modalShouldOpen =
-        value.includes(rootValue?.toString()) &&
-        !zoneData?.includes(rootValue?.toString());
-
-      if (modalShouldOpen && !editModeContainsRoot) {
-        setRootZoneModalData(value);
-      }
-      setZoneData(value);
-    } else if (filterAttributeParam === BRANDS) {
-      setBrands(value);
-    } else if (filterAttributeParam === CATEGORIES) {
-      setCategories(value);
-    } else if (filterAttributeParam === CUSTOM_ATTRIBUTES) {
-      setCustomAttributeData(value);
-      if (Array.isArray(value)) {
-        setSelectedProducts(value);
-      }
-    } else if (filterAttributeParam === SKU) {
-      setSku(value);
-    }
-    const payload = generatePayload(filterAttributeParam, value);
-    setAdditionalFilterTransactions(JSON.parse(JSON.stringify(payload)));
-  };
-
-  const handleEditAttribute = (attribute, value) => {
-    setFilterAttribute(attribute);
-    handleFilterValueChange(value, attribute);
-  };
-
-  function transformObjectToArray(inputObj) {
-    const resultArray = [];
-
-    for (const key in inputObj) {
-      if (inputObj.hasOwnProperty(key)) {
-        if (Array.isArray(inputObj[key]) && inputObj[key].length > 0) {
-          for (const value of inputObj[key]) {
-            resultArray.push(`${key}___${value}`);
-          }
-        } else {
-          resultArray.push(key);
-        }
-      }
-    }
-
-    return resultArray;
-  }
-
-  useDeepCompareEffect(
-    () => {
-      let category = '';
-      let values = [];
-      const getAppliedFilterOn = filters => {
-        if (!filters && typeof value !== 'object') return;
-        Object.entries(filters).forEach(([key, value]) => {
-          if (key === 'includedAttributes' && Object.keys(value).length) {
-            category = key;
-            values = transformObjectToArray(value);
-            return;
-          }
-          if (Array.isArray(value) && value.length) {
-            category = key;
-            values = value;
-            return;
-          }
-          if (
-            value !== null &&
-            typeof value === 'object' &&
-            Object.keys(value)
-          ) {
-            getAppliedFilterOn(value);
-            return;
-          }
-        });
-      };
-      getAppliedFilterOn(additionalFilterTransactions);
-      handleEditAttribute(filterAttributeMapping[category], values);
-
-      if (filterAttributeMapping[category] === SKU) {
-        const obj = {
-          operand: {
-            valid:
-              additionalFilterTransactions?.additionalFilters?.lineItemFilters
-                ?.includedSkus,
-          },
-        };
-        setConditionExpression(obj);
-      }
-    },
-    [additionalFilterTransactions],
-  );
-
-  useEffect(
-    () => {
-      if (filterAttribute === SKU) {
-        if (conditionExpression?.operand?.valid) {
-          setSku(conditionExpression?.operand?.valid);
-        } else {
-          setSku([]);
-        }
-        const payload = generatePayload(SKU, []);
-        setAdditionalFilterTransactions(JSON.parse(JSON.stringify(payload)));
-        setFilterAttribute(SKU);
-      }
-    },
-    [conditionExpression],
-  );
-  useEffect(
-    () => {
-      switch (filterAttribute) {
-        case BRANDS:
-          getBrandData('brands');
-          break;
-        case CATEGORIES:
-          getCategoryData('categories');
-          break;
-        case CUSTOM_ATTRIBUTES:
-          getCustomAttributeData('attributes');
-          break;
-        case STORES:
-          getStoresData('STORE');
-          break;
-        case ZONES:
-          getZonesData('ZONE');
-          break;
-      }
-    },
-    [filterAttribute],
-  );
-
-  let filterTypeOptions;
-  if (pointsAllocationLimitCategory === 'TRANSACTION') {
-    filterTypeOptions = [
-      {
-        key: STORES,
-        value: STORES,
-        label: formatMessage(messages.stores),
-      },
-      {
-        key: ZONES,
-        value: ZONES,
-        label: formatMessage(messages.zones),
-      },
-    ];
-  } else {
-    filterTypeOptions = [
-      {
-        key: BRANDS,
-        value: BRANDS,
-        label: formatMessage(globalMessages.brands),
-      },
-      {
-        key: CATEGORIES,
-        value: CATEGORIES,
-        label: formatMessage(globalMessages.categories),
-      },
-      {
-        key: CUSTOM_ATTRIBUTES,
-        value: CUSTOM_ATTRIBUTES,
-        label: formatMessage(globalMessages.customAttributes),
-      },
-      {
-        key: SKU,
-        value: SKU,
-        label: formatMessage(globalMessages.sku),
-      },
-      {
-        key: STORES,
-        value: STORES,
-        label: formatMessage(messages.stores),
-      },
-      {
-        key: ZONES,
-        value: ZONES,
-        label: formatMessage(messages.zones),
-      },
-    ];
-  }
-
-  const getBrandData = product => {
-    if ([''].includes(fetchingBrandDetails)) {
-      getAllEntitiesActions.getBrand(product);
-    }
-  };
-  const getCategoryData = product => {
-    if ([''].includes(fetchingCategoryDetails)) {
-      getAllEntitiesActions.getCategory(product);
-    }
-  };
-  const getCustomAttributeData = product => {
-    if ([''].includes(fetchingCustomAttributeDetails)) {
-      getAllEntitiesActions.getCustomAttribute(product);
-    }
-  };
-  const getStoresData = product => {
-    if ([''].includes(fetchingStores)) {
-      getAllEntitiesActions.getAllEntityStores(product);
-    }
-  };
-  const getZonesData = product => {
-    if ([''].includes(fetchingEntityZones)) {
-      getAllEntitiesActions.getAllEntityZones(product);
-    }
-  };
-
-  const treeDataModifier = treeData => {
-    const arr = treeData?.map(item => ({
-      id: item.id,
-      value: item.name,
-      title: (
-        <OptionWithTooltip
-          optionLabel={item.name}
-          infoVisible={item.name === ROOT}
-          infoProps={{
-            title: formatMessage(globalMessages.rootSelectModalDescription),
-            placement: 'left',
-            className: 'margin-l-4',
-          }}
-        />
-      ),
-      key: item.id,
-    }));
-
-    return arr;
-  };
-  const getValuesBasedOnAttribute = () => {
-    let treeData = [];
-    switch (filterAttribute) {
-      case STORES:
-        treeData = treeDataModifier(stores);
-        break;
-      case ZONES:
-        treeData = treeDataModifier(entityZones);
-        break;
-      case BRANDS:
-        treeData = treeDataModifier(brandDetails);
-        break;
-      case CATEGORIES:
-        treeData = treeDataModifier(categoryDetails);
-        break;
-    }
-    return treeData;
-  };
-
-  const rootValue = useMemo(
-    () => entityZones?.find(({ name }) => name === ROOT)?.id,
-    [entityZones],
-  );
-
-  const isLoadingSpinner =
-    fetchingBrandDetails === REQUEST ||
-    fetchingCategoryDetails === REQUEST ||
-    fetchingCustomAttributeDetails === REQUEST ||
-    fetchingStores === REQUEST ||
-    fetchingEntityZones === REQUEST;
-
-  return (
-    <CapRow className={className}>
-      <CapRow className="filter-transaction-main">
-        {pointsAllocationTransactionType === FILTER_TRANSACTIONS && (
-          <CapRow>
-            <CapRow className="filter-transaction-container">
-              <CapSelect
-                placeholder={formatMessage(messages.selectAttribute)}
-                options={filterTypeOptions}
-                value={filterAttribute}
-                style={{ width: '100%' }}
-                onChange={handleSelectAttributeChange}
-                disabled={!isEditable}
-              />
-            </CapRow>
-            {filterAttribute ? (
-              <>
-                {filterAttribute === CUSTOM_ATTRIBUTES ? (
-                  <CapRow className="multiselect">
-                    <CapSpin spinning={isLoadingSpinner}>
-                      <CapMultiSelectWithTree
-                        className="multi-select-margin"
-                        placeholder={formatMessage(messages.selectValue)}
-                        treeData={getProductAttributeData}
-                        appliedKeys={selectedProducts}
-                        onSelect={handleFilterValueChange}
-                        disabled={isEmpty(filterAttribute)}
-                      />
-                    </CapSpin>
-                  </CapRow>
-                ) : filterAttribute != SKU ? (
-                  <CapRow className="multiselect">
-                    <CapSpin spinning={isLoadingSpinner}>
-                      <CapMultiSelect
-                        className="multi-select-margin"
-                        treeData={getValuesBasedOnAttribute()}
-                        placeholder={formatMessage(messages.selectValue)}
-                        disabled={isEmpty(filterAttribute)}
-                        onSelect={handleFilterValueChange}
-                        appliedKeys={filteredValue}
-                        triggerClassName="triggerClassName"
-                        searchKey="value"
-                      />
-                    </CapSpin>
-                  </CapRow>
-                ) : (
-                  <CapRow className="sku-uploader">
-                    <ConditionSKUUploader
-                      className="sample-csv-text"
-                      fact="SKU"
-                      validateSkuIds={validateSkuIds}
-                      conditionExpression={conditionExpression}
-                      setConditionExpression={setConditionExpression}
-                    />
-                  </CapRow>
-                )}
-              </>
-            ) : (
-              <CapTooltip
-                placement="bottom"
-                title={formatMessage(messages.attribueDisableMessage)}
-              >
-                <CapRow className="multiselect multiselect-disabled">
-                  <CapMultiSelect
-                    popoverClassName="display-none"
-                    treeData={getValuesBasedOnAttribute()}
-                    placeholder={formatMessage(messages.selectValue)}
-                    onSelect={handleFilterValueChange}
-                    appliedKeys={filteredValue}
-                  />
-                </CapRow>
-              </CapTooltip>
-            )}
-          </CapRow>
-        )}
-      </CapRow>
-      <ConfirmEditModal
-        className={className}
-        showEditModal={showEditModal}
-        closeEditModal={closeFilterChangeModal}
-        title={formatMessage(messages.editFilterTitle)}
-        description1={formatMessage(messages.editFilterDescription)}
-        description2={formatMessage(messages.editFilterDescription2)}
-        okButtonText={formatMessage(globalMessages.yesSure)}
-        cancelButtonText={formatMessage(globalMessages.cancel)}
-        isModalVisible={showEditModal}
-        handleCancel={closeFilterChangeModal}
-        handleOk={handleSelectAttributeOk}
-      />
-      <RootConfirmModal
-        rootModalData={rootZoneModalData}
-        setModalData={setRootZoneModalData}
-        setDropdownData={handleZoneUpdate}
-        rootOptionValue={rootValue?.toString()}
-        triggerRef={document.querySelector('.triggerClassName')}
-        //triggerClassName is the uneditable name of the multiselect dropdown trigger
-      />
-    </CapRow>
-  );
-};
-
-AddPointsFilterTransaction.propTypes = {
-  intl: intlShape.isRequired,
-  className: PropTypes.string,
-  pointsAllocationLimitCategory: PropTypes.string,
-  pointsAllocationTransactionType: PropTypes.string,
-  promoActions: PropTypes.object,
-  dashboard: PropTypes.object,
-  productDetails: PropTypes.object,
-  setAdditionalFilterTransactions: PropTypes.func,
-  isEditable: PropTypes.bool,
-};
-
-export default compose(withErrorBoundary)(
-  injectIntl(withStyles(AddPointsFilterTransaction, styles)),
-);

package/components/organisms/AddPointsFilterTransaction/constants.js

@@ -1,15 +0,0 @@
-export const BRANDS = 'Brands';
-export const CATEGORIES = 'Categories';
-export const CUSTOM_ATTRIBUTES = 'Custom attributes';
-export const SKU = 'SKUs';
-export const STORES = 'Stores';
-export const ZONES = 'Zones';
-
-export const filterAttributeMapping = {
-  includedBrands: BRANDS,
-  includedCategories: CATEGORIES,
-  includedAttributes: CUSTOM_ATTRIBUTES,
-  includedStoreIds: STORES,
-  includedZoneIds: ZONES,
-  includedSkus: SKU,
-};

package/components/organisms/AddPointsFilterTransaction/index.js

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

package/components/organisms/AddPointsFilterTransaction/messages.js

@@ -1,45 +0,0 @@
-/*
- * AddPointsFilterTransaction Messages
- *
- */
-
-import { defineMessages } from 'react-intl';
-
-export const scope =
-  'loyaltyPlus.components.organisms.AddPointsFilterTransaction';
-
-export default defineMessages({
-  zones: {
-    id: `${scope}.zones`,
-    defaultMessage: 'Zones',
-  },
-  stores: {
-    id: `${scope}.stores`,
-    defaultMessage: 'Stores',
-  },
-  selectAttribute: {
-    id: `${scope}.selectAttribute`,
-    defaultMessage: 'Select attribute',
-  },
-  selectValue: {
-    id: `${scope}.selectValue`,
-    defaultMessage: 'Select value',
-  },
-  attribueDisableMessage: {
-    id: `${scope}.attribueDisableMessage`,
-    defaultMessage: 'To enable, please select attribute first',
-  },
-  editFilterTitle: {
-    id: `${scope}.editFilterTitle`,
-    defaultMessage: 'Edit filter transactions?',
-  },
-  editFilterDescription: {
-    id: `${scope}.editFilterDescription`,
-    defaultMessage:
-      'Change in "filter transactions" affect brands liability and customer benefits',
-  },
-  editFilterDescription2: {
-    id: `${scope}.editFilterDescription2`,
-    defaultMessage: 'Are you sure about the edit?',
-  },
-});