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

package/components/organisms/PointsBudgetList/style.js

@@ -0,0 +1,265 @@
+import { css } from 'styled-components';
+import StyledVars from '@capillarytech/cap-ui-library/styled';
+import {
+  CAP_SPACE_08,
+  CAP_WHITE,
+  FONT_COLOR_02,
+} from '@capillarytech/cap-ui-library/styled/variables';
+
+const {
+  CAP_SPACE_04,
+  CAP_SPACE_12,
+  CAP_SPACE_16,
+  CAP_SPACE_20,
+  CAP_SPACE_24,
+  CAP_SPACE_32,
+  CAP_G05,
+  FONT_WEIGHT_MEDIUM,
+  FONT_WEIGHT_REGULAR,
+  FONT_SIZE_M,
+  FONT_SIZE_S,
+  CAP_G01,
+  CAP_G13
+} = StyledVars;
+
+export const styles = css`
+  &.list-currency-filter-popover{
+    .ant-popover-content {
+      width: 17.143rem;
+    }
+  }
+  .no-limit-image {
+    height: 12.5rem;
+    margin: auto;
+    display: flex;
+  }
+  .points-budget-header {
+    .cap-header-v2-description {
+      color: ${CAP_G05} !important;
+    }
+  }
+  .transaction-points-tooltip-info {
+    margin-left: 0.25rem;
+  }
+  .points-budget-tags {
+    border-radius: 0.875rem;
+    height: 1.563rem;
+    padding: ${CAP_SPACE_08};
+    &-tooltip {
+      margin-left: ${CAP_SPACE_04};
+    }
+  }
+  .text-color-grey {
+    color: ${CAP_G05} !important;
+  }
+  .limit-value {
+    font-weight: ${FONT_WEIGHT_MEDIUM} !important;
+  }
+  .status-text {
+    color: ${CAP_G05} !important;
+  }
+  .date-dash {
+    padding: 0 0.625rem;
+  }
+  .applicable-on-subtext {
+    justify-content: space-between;
+  }
+  .applicable-on-right-text {
+  }
+  .points-budget-limit-title {
+    margin-top: 0.75rem;
+    font-weight: ${FONT_WEIGHT_MEDIUM} !important;
+    font-size: ${FONT_SIZE_M} !important;
+  }
+  .points-budget-limit {
+    margin-top: 0.25rem;
+    font-weight: ${FONT_WEIGHT_REGULAR} !important;
+    font-size: ${FONT_SIZE_S} !important;
+  }
+  .disabled-more {
+    pointer-events: none;
+    cursor: not-allowed;
+    opacity: 0.7;
+  }
+  .download-text {
+    font-weight: ${FONT_WEIGHT_REGULAR} !important;
+    font-size: ${FONT_SIZE_S} !important;
+    margin-bottom: 0.75rem;
+  }
+  .applicable-on-tooltip-text {
+    margin: 0.25rem;
+    font-weight: ${FONT_WEIGHT_REGULAR} !important;
+    font-size: ${FONT_SIZE_M} !important;
+  }
+  .ellipsis-text {
+    max-width: 75%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .points-limits-tag {
+    height: ${CAP_SPACE_20};
+    color: ${CAP_WHITE};
+    margin-left: ${CAP_SPACE_04};
+    background-color: ${FONT_COLOR_02};
+  }
+  .points-limit-row {
+    /* flex-flow: nowrap !important; */
+    margin-top: 0.286rem;
+    max-width: 11.429rem;
+  }
+  .refresh-margin {
+    margin-top: 0.357rem;
+  }
+  .budget-table-search {
+    width: 14.286rem;
+  }
+  .budget-table-activity-select {
+    width: 14.929rem;
+    margin-left: 0.857rem;
+    .ant-select-selection {
+      border-radius: 2.143rem;
+    }
+  }
+  .budget-table-limit-select {
+    width: 12.929rem;
+    margin-left: 0.857rem;
+    .ant-select-selection {
+      border-radius: 2.143rem;
+    }
+  }
+  .no-limit-button {
+    background-color: #42b040 !important;
+    color: #ffffff !important;
+  }
+  .no-limit-button-container {
+    margin-top: 0.857rem;
+    margin-left: 33%;
+  }
+  .points-allocation-accordion .cap-divider-v2 {
+    margin: 0 0.857rem 0 0;
+  }
+  .active-limit-tooltip {
+    .ant-tooltip-content {
+      width: 18.786rem !important;
+    }
+    .ant-tooltip-arrow {
+      right: 0.286rem !important;
+    }
+  }
+  .highlight {
+    color: white;
+  }
+  .active-limit-count-label {
+    margin: 0 0.357rem 0 0.357rem;
+  }
+  .transaction-count {
+    margin-top: 0.857rem;
+    margin-left: 0.714rem;
+  }
+  .customer-count {
+    margin-top: 0.571rem;
+    margin-left: 0.714rem;
+  }
+  .transaction-points-tooltip-info svg {
+    margin-top: -0.214rem;
+    margin-left: 0.286rem;
+  }
+  .ant-table-thead > tr > th,
+  .ant-table-tbody > tr > td {
+    padding: 1.142rem 0.8rem !important;
+  }
+  .ant-table-fixed-header .ant-table-scroll .ant-table-header {
+    padding-bottom: 0.286rem !important;
+  }
+  .points-allocation-accordion .ant-row-flex-middle {
+    /* padding-top: 12px; */
+  }
+  .table-heading {
+    margin-bottom: 0.857rem;
+  }
+
+  .budget-table-activity-select .ant-select-lg .ant-select-selection__rendered,
+  .ant-select-selection--single {
+    line-height: 2.286rem !important;
+    height: 2.286rem !important;
+  }
+  .budget-table-limit-select .ant-select-lg .ant-select-selection__rendered,
+  .ant-select-selection--single {
+    line-height: 2.286rem !important;
+    height: 2.286rem !important;
+  }
+  .budget-table-search .ant-input-lg {
+    height: 2.286rem !important;
+  }
+  .list-filters {
+    width: fit-content;
+    margin-left: 0.857rem;
+  }
+  .list-filters .ant-dropdown-menu.cap-menu-v2 .ant-dropdown-menu-item {
+    padding: 0.571rem 1.142rem !important;
+    .ant-row-flex-middle {
+      padding-top: 0px !important;
+    }
+  }
+  .column-padding-left {
+    padding-left: 0.286rem;
+  }
+  .points-info {
+    svg {
+      width: 1.714rem;
+      height: 1.714rem;
+    }
+  }
+  .row-margin {
+    margin-bottom: 0.286rem;
+    word-break: break-all;
+  }
+  .list-currency-filter{
+    .cap-custom-select-selection {
+      width: fit-content !important;
+      margin-left: 0.857rem;
+      border: 1px solid ${CAP_G05};
+      border-radius: ${CAP_SPACE_16};
+      height: ${CAP_SPACE_32};
+      cursor: pointer;
+    }
+    .cap-custom-select-selected-value > div[type='h6'] {
+      color: ${CAP_G01};
+      font-size: ${FONT_SIZE_S};
+    }
+    .cap-custom-select-selected-value > div[type='h5'] {
+      color: ${CAP_G01};
+      font-size: ${FONT_SIZE_S};
+    }
+  }
+  .list-currency-filter-active-selection {
+    .cap-custom-select-selection {
+      background-color: ${CAP_G13};
+      border: none;
+    }
+  }
+  &.list-currency-filter-popover {
+    &.ant-popover-content {
+      width: 17.143rem;
+    }
+  }
+  .applied-filter-row{
+    margin: ${CAP_SPACE_08} 0 ${CAP_SPACE_04} 0;
+    row-gap: ${CAP_SPACE_04};
+    .applied-filter-label{
+      margin-right: ${CAP_SPACE_04};
+    }
+    .applied-filter-tag{
+      font-size: ${FONT_SIZE_S};
+      height: ${CAP_SPACE_24};;
+    }
+    .applied-filter-divider{
+      margin: 0 ${CAP_SPACE_12};
+    }
+    .clear-all-filters{
+      display: inline-block;
+      vertical-align: middle;
+    }
+  }
+`;

package/components/organisms/PointsBudgetList/tests/PointsBudgetList.test.js

@@ -0,0 +1,271 @@
+import '@testing-library/jest-dom';
+import userEvent from '@testing-library/user-event';
+import { injectIntl } from 'react-intl';
+import {
+  render,
+  screen,
+  fireEvent,
+  waitFor,
+} from '../../../../tests/test-utils';
+
+import { PointsBudgetList } from '../PointsBudgetList';
+import messages from '../../../pages/Cap/messages';
+import globalMessages from '../../../pages/Cap/messages';
+import {
+  ACROSS_EVENTS,
+  CURRENT_EVENT,
+} from '../../ActivityRewardSlider/constants';
+import { REQUEST, SUCCESS } from '../../../pages/App/constants';
+import {
+  acxDataWithFilters,
+  acxDataWithFiltersStore,
+  acxDataWithFiltersZone,
+  acxDataWithoutFilters,
+  txnData,
+  txnDataForPoints,
+  txnDataWithFilters,
+  txnDataWithoutFiltersWithObject,
+  customAttributeMock,
+  additionalFilterTransactionsMock,
+  acxDataWithFiltersCustomeAttribute,
+  customeAttributeEmptyGroupSizeKey,
+  acxDataWithoutFilters1,
+  filtersData,
+  txnData2,
+  acxDataWithFilters1,
+  transactionLimitData,
+  acrossCustomerLimitData,
+  loyaltyPromotionsDetailsSuccess,
+  loyaltyPromotionsDetailsRequest,
+  transactionLimitDataMock,
+  acrossCustomerLimitDataMock,
+  allRewardCurrencyMockData,
+} from './mockData';
+import pointsBudgetListMessages from '../messages';
+import { template } from 'lodash';
+
+jest.setTimeout(80000);
+
+const delay = ms => new Promise(res => setTimeout(res, ms));
+const userData = {
+  currentOrgDetails: {
+    basic_details: { base_currency: 'INR' },
+  },
+};
+
+const setExistingTransactionKPIsMockFn = jest.fn();
+
+const commonProps = {
+  promoActions: {
+    getAllEntityStores: jest.fn(),
+    getAllEntityZones: jest.fn(),
+    getBrand: jest.fn(),
+    getCustomAttribute: jest.fn(),
+    getCategory: jest.fn(),
+  },
+  storeData: {
+    stores: [],
+    fetchingStores: SUCCESS,
+    entityZones: [],
+    fetchingEntityZones: SUCCESS,
+  },
+  productData: {
+    brandDetails: [],
+    fetchingBrandDetails: SUCCESS,
+    categoryDetails: [],
+    fetchingCategoryDetails: SUCCESS,
+    customAttributeDetails: [],
+    fetchingCustomAttributeDetails: SUCCESS,
+  },
+  loyaltyPromotionsDetails: {
+    getPromotionsStatus: SUCCESS,
+    promotionDetails: [],
+  },
+  onEditClick: jest.fn(),
+  onStopClick: jest.fn(),
+  match: {
+    params: { mode: 'configure' },
+  },
+  isRewardCurrencyEnabled: true,
+  rewardCurrencyOptions: allRewardCurrencyMockData,
+  existingTransactionKPIs: {},
+  setExistingTransactionKPIs: setExistingTransactionKPIsMockFn,
+};
+
+const initializeComponent = props => {
+  const Component = injectIntl(PointsBudgetList);
+  const propsObj = {
+    // type: CURRENT_EVENT,
+    ...commonProps,
+    transactionLimitData,
+    acrossCustomerLimitData,
+    handleAddLimitSlidebox: jest.fn(),
+    onEditClick: jest.fn(),
+    onStopClick: jest.fn(),
+    loyaltyPromotionsDetails: loyaltyPromotionsDetailsSuccess,
+    ...props,
+  };
+  return render(Component, undefined, propsObj);
+};
+
+
+describe('<PointsBudgetList /> organisms', () => {
+  it('Initial component render without any data', () => {
+    initializeComponent({
+      transactionLimitData: [],
+      acrossCustomerLimitData: [],
+    });
+    expect(
+      screen.getByText('No limits have been set for the allocation of points'),
+    ).toBeInTheDocument();
+  });
+  it('render table when both transaction and customer limit data and table search filter', () => {
+    initializeComponent();
+    const searchLimit = screen.getByPlaceholderText('Search Limit');
+    expect(searchLimit).toBeInTheDocument();
+    fireEvent.change(searchLimit, { target: { value: 'test' } });
+    expect(screen.getByText('test')).toBeInTheDocument();
+    expect(
+      screen.getAllByText('Individual Transaction limit')[0],
+    ).toBeInTheDocument();
+  });
+  it('render table when only customer limit data', () => {
+    initializeComponent({ transactionLimitData: [] });
+    expect(
+      screen.queryByText('Individual Transaction limit'),
+    ).not.toBeInTheDocument();
+  });
+  it('render table when both transaction and customer limit data and table activity select filter and button and edit stop menu click ', async () => {
+    initializeComponent();
+    
+    //activity filter is working as expected
+    const customerActivityFilter = screen.getByText(pointsBudgetListMessages.customerActivity.defaultMessage);
+    expect(customerActivityFilter).toBeInTheDocument();
+    userEvent.click(customerActivityFilter);
+
+    const customerActivityOption = screen.getByRole('menuitem', {
+      name: pointsBudgetListMessages.allActivity.defaultMessage
+    });
+    expect(customerActivityOption).toBeInTheDocument();
+    userEvent.click(customerActivityOption);
+    expect(screen.getAllByText(pointsBudgetListMessages.allActivity.defaultMessage)[0]).toBeInTheDocument();
+
+    //limits on filter is working as expected
+    const limitsFilter = screen.getByText(pointsBudgetListMessages.limitsOn.defaultMessage);
+    expect(limitsFilter).toBeInTheDocument();
+    userEvent.click(limitsFilter);
+
+    const limitsFilterOption = screen.getByRole('menuitem', {
+      name: pointsBudgetListMessages.individualTransaction.defaultMessage
+    });
+    expect(limitsFilterOption).toBeInTheDocument();
+    userEvent.click(limitsFilterOption);
+    expect(screen.getAllByText(pointsBudgetListMessages.individualTransaction.defaultMessage)[0]).toBeInTheDocument();
+
+    //status filter is working as expected
+    const statusFilter = screen.getAllByText(pointsBudgetListMessages.status.defaultMessage)[0];
+    expect(statusFilter).toBeInTheDocument();
+    userEvent.click(statusFilter);
+
+    const statusFilterOption = screen.getByRole('menuitem', {
+      name: pointsBudgetListMessages.stopped.defaultMessage
+    });
+    expect(statusFilterOption).toBeInTheDocument();
+    userEvent.click(statusFilterOption);
+    expect(screen.getAllByText(pointsBudgetListMessages.stopped.defaultMessage)[0]).toBeInTheDocument();
+
+    //currency filter is working as expected
+    const currencyRewardFilter = screen.getByText(pointsBudgetListMessages.currency.defaultMessage);
+    expect(currencyRewardFilter).toBeInTheDocument();
+    userEvent.click(currencyRewardFilter);
+
+    const currencyRewardFilterOption = screen.getByText('CURRENCY_1'); //dynamic label
+    expect(currencyRewardFilterOption).toBeInTheDocument();
+    userEvent.click(currencyRewardFilterOption);
+    expect(screen.getAllByText('CURRENCY_1')[0]).toBeInTheDocument(); //dynamic label
+
+    //remove filters functionality is working as expected
+    const removeFilterIcons = document.querySelectorAll('.anticon-close');
+    expect(removeFilterIcons).toHaveLength(4); //4 filters are applied
+    const removeActivityFilterIcon = removeFilterIcons[0];
+    userEvent.click(removeActivityFilterIcon);
+    expect(document.querySelectorAll('.anticon-close')).toHaveLength(3); //3 filters are applied
+
+    //clear all filters functionality is working as expected
+    const clearAllFilters = screen.getByText(globalMessages.clearAll.defaultMessage);
+    expect(clearAllFilters).toBeInTheDocument();
+    userEvent.click(clearAllFilters);
+    expect(document.querySelectorAll('.anticon-close')).toHaveLength(0); //No filters are applied
+
+    //quick actions menu and options are working as expected
+    const quickActionsMenu = screen.getAllByTestId('edit-stop-menu')[0];
+    expect(quickActionsMenu).toBeInTheDocument();
+    userEvent.hover(quickActionsMenu);
+    await waitFor(
+      () => {
+        const menuItems = screen.getAllByRole('menuitem');
+        userEvent.click(menuItems[0]); //edit option
+        userEvent.click(menuItems[1]); //stop option
+      },
+      {
+        timeout: 3000,
+        interval: 200,
+      },
+    );
+  });
+  it('should render Add limit button in disbaled state with tooltip when transaction limit is 10 and customer limit is 50 = total 60', async () => {
+    const cappingLimitTooltipMessageSpy = jest.spyOn(require("../../ActivityRewardSlider/utils"), 'cappingLimitTooltipMessage');
+
+    initializeComponent({
+      userData,
+      promoActions: jest.fn(),
+      activeLimitsCount: 60,
+      handleAddLimitSlidebox: jest.fn(),
+      transactionLimitData: transactionLimitDataMock,
+      acrossCustomerLimitData: acrossCustomerLimitDataMock,
+      transactionActiveLimit: 2,
+      isEMFActive :'0',
+
+
+      data: customeAttributeEmptyGroupSizeKey,
+      productData: {
+        customAttributeDetails: customAttributeMock,
+        fetchingCustomAttributeDetails: SUCCESS,
+      },
+      additionalFilterTransactions: additionalFilterTransactionsMock,
+    });
+    
+    const addLimitButton = screen.getByRole('button', {  name: /add limit/i});
+    expect(addLimitButton).toBeInTheDocument();
+    expect(addLimitButton).toBeDisabled();
+    userEvent.hover(addLimitButton);
+
+    expect(cappingLimitTooltipMessageSpy).toHaveBeenCalled();
+    expect(cappingLimitTooltipMessageSpy).toHaveBeenCalledWith(
+      pointsBudgetListMessages.addLimitDisabledTooltip.defaultMessage,
+      globalMessages.pleaseRemoveOrDeactivateTooltip.defaultMessage
+    )
+  });
+
+  it('render table when both transaction and customer limit data and table activity select filter and button click', async () => {
+    initializeComponent({
+      loyaltyPromotionsDetails: loyaltyPromotionsDetailsRequest,
+      isEMFActive: '1',
+    });
+
+    // button click
+    const addButton = screen.getByRole('button', { name: /add limit/i });
+    userEvent.click(addButton);
+    expect(addButton).toBeInTheDocument();
+  });
+
+  it('Should render reward currency name in rows', async () => {
+    initializeComponent();
+
+    const definedRewardCurrencyName = screen.getAllByText('CURRENCY_2'); //dynamic label
+    expect(definedRewardCurrencyName).toHaveLength(2);
+
+    const undefinedRewardCurrencyName = screen.getAllByText(pointsBudgetListMessages.notDefined.defaultMessage);
+    expect(undefinedRewardCurrencyName).toHaveLength(3);
+  });
+});