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

package/components/organisms/AlternateCurrencyList/constants.js

@@ -1,53 +0,0 @@
-/*
- *
- * Alternate Currency constants
- *
- */
-
-export const DEFAULT_ACTION = 'app/AlternateCurrencyList/DEFAULT_ACTION';
-
-export const GET_ALL_ALTERNATE_CURRENCY_REQUEST =
-  'app/AlternateCurrencyList/GET_ALL_ALTERNATE_CURRENCY_REQUEST';
-export const GET_ALL_ALTERNATE_CURRENCY_SUCCESS =
-  'app/AlternateCurrencyList/GET_ALL_ALTERNATE_CURRENCY_SUCCESS';
-export const GET_ALL_ALTERNATE_CURRENCY_FAILURE =
-  'app/AlternateCurrencyList/GET_ALL_ALTERNATE_CURRENCY_FAILURE';
-
-export const GET_CDN_TRANSFORMATION_CONFIG_REQUEST =
-  'app/AlternateCurrencyList/GET_CDN_TRANSFORMATION_CONFIG_REQUEST';
-
-export const ABSOLUTE = 'ABSOLUTE';
-export const COUPONS = 'COUPONS';
-export const COUPON = 'COUPON';
-export const LOYALTY_PROMOTION = 'LOYALTY_PROMOTION';
-export const LOYALTY_PROMOTIONS = 'LOYALTY_PROMOTIONS';
-export const POINTS = 'Points';
-export const PAUSE = 'PAUSE';
-export const ACTIVATE = 'ACTIVATE';
-
-export const COLUMN_WIDTH = {
-  alternateCurrencyImage: '10%',
-  alternateCurrency: '20%',
-  duration: '25%',
-  Redeemable: '15%',
-  lastUpdatedOn: '20%',
-  actionsMenu: '10%',
-};
-
-export const DEFAULT_POINT_ALTERNATE_CURRENCY = {
-  orgId: 4000110,
-  programId: 2822,
-  identifier: 'gwtT5d',
-  userId: 62,
-  name: 'Points',
-  metaData: {
-    description: 'Default reward currency Points',
-    image: 'no-image2',
-    isRedeemable: true,
-  },
-  startDate: 1705913611000,
-  endDate: 1705913611000,
-  isActive: true,
-  status: 1,
-  attributionInfo: {},
-};

package/components/organisms/AlternateCurrencyList/index.js

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

package/components/organisms/AlternateCurrencyList/messages.js

@@ -1,74 +0,0 @@
-/*
- * AlternateCurrencyList Messages
- *
- * This contains all the text for the AlternateCurrencyList component.
- */
-
-import { defineMessages } from 'react-intl';
-
-export const scope = 'loyalty.components.organisms.AlternateCurrencyList';
-
-export default defineMessages({
-  lastUpdatedOn: {
-    id: `${scope}.lastUpdatedOn`,
-    defaultMessage: 'Last updated on',
-  },
-  updatedBy: {
-    id: `${scope}.updatedBy`,
-    defaultMessage: 'Last updated by',
-  },
-  moreText: {
-    id: `${scope}.moreText`,
-    defaultMessage: '+{value} more',
-  },
-  redeemable: {
-    id: `${scope}.redeemable`,
-    defaultMessage: 'Redeemable',
-  },
-  returnable: {
-    id: `${scope}.returnable`,
-    defaultMessage: 'Returnable',
-  },
-  byCapillary: {
-    id: `${scope}.byCapillary`,
-    defaultMessage: 'By capillary',
-  },
-  inceptionDateNever: {
-    id: `${scope}.inceptionDateNever`,
-    defaultMessage: 'Inception date - Never',
-  },
-  defaultPointActionMenutooltip: {
-    id: `${scope}.defaultPointActionMenutooltip`,
-    defaultMessage: `This is disable as points is default reward currency which can't be editable`,
-  },
-  defaultPointsDurationTooltip: {
-    id: `${scope}.defaultPointsDurationTooltip`,
-    defaultMessage: `Duration from brands' onboarding until now.`,
-  },
-  alternateCurrencyByLine: {
-    id: `${scope}.alternateCurrencyByLine`,
-    defaultMessage:
-      `It function similarly to points, offering all the properties of points which can be used across loyalty.`,
-  },
-  newRewardCurrency: {
-    id: `${scope}.newRewardCurrency`,
-    defaultMessage: 'New reward currency',
-  },
-  premiumFeatureText: {
-    id: `${scope}.premiumFeatureText`,
-    defaultMessage: 'This is a premium feature.',
-  },
-  reachOutText: {
-    id: `${scope}.reachOutText`,
-    defaultMessage: 'Reach out to your customer success agent to get started!',
-  },
-  inceptionNeverExpires: {
-    id: `${scope}.inceptionNeverExpires`,
-    defaultMessage: 'Inception date - Never',
-  },
-  maxFiveAlternateCurrency: {
-    id: `${scope}.maxFiveAlternateCurrency`,
-    defaultMessage:
-      'This is disabled as of max allowed currencies can be 5 which is reached',
-  },
-});

package/components/organisms/AlternateCurrencyList/style.js

@@ -1,292 +0,0 @@
-import styled, { css } from 'styled-components';
-import * as styledVars from '@capillarytech/cap-ui-library/styled/variables';
-import BadgeMask from '../../../assets/badgeMask.svg';
-const {
-  CAP_SPACE_04,
-  CAP_SPACE_06,
-  CAP_SPACE_08,
-  CAP_SPACE_12,
-  CAP_SPACE_16,
-  CAP_SPACE_20,
-  CAP_SPACE_28,
-  CAP_SPACE_36,
-  CAP_SPACE_48,
-  CAP_G01,
-  CAP_G04,
-  CAP_G09,
-  CAP_G06,
-  CAP_G05,
-  CAP_G08,
-  CAP_G07,
-  FONT_SIZE_S,
-  FONT_SIZE_M,
-  FONT_WEIGHT_MEDIUM,
-  FONT_WEIGHT_REGULAR,
-  CAP_WHITE,
-} = styledVars;
-
-export const Flex = styled.div`
-  display: flex;
-  align-items: center;
-`;
-
-export default css`
-  .status-filter {
-    padding: ${CAP_SPACE_08} ${CAP_SPACE_16};
-    min-width: 6.143rem;
-    max-width: 7.643rem;
-
-    .status-drop-down {
-      overflow-y: unset !important;
-    }
-
-    .ant-dropdown-menu.cap-menu-v2 .ant-dropdown-menu-item {
-      padding: ${CAP_SPACE_08} ${CAP_SPACE_16};
-    }
-  }
-  .alternate-currency-table-container {
-    margin-top: ${CAP_SPACE_20};
-    width: 56.857rem;
-    margin: ${CAP_SPACE_20} ${CAP_SPACE_48} 0px ${CAP_SPACE_20};
-    .tooltip-container {
-      display: flex;
-      align-items: flex-start;
-      gap: ${CAP_SPACE_04};
-      .name-tooltip-desc-title {
-        font-weight: ${FONT_WEIGHT_REGULAR};
-        font-size: ${CAP_SPACE_12};
-        color: ${CAP_G05};
-      }
-      .name-tooltip-descritpion {
-        font-size: ${CAP_SPACE_12};
-        font-weight: ${FONT_WEIGHT_REGULAR};
-        word-break: break-word;
-      }
-    }
-
-    .disable-tooltip-content {
-      .ant-tooltip-content {
-        margin-left: -11rem;
-      }
-      .ant-tooltip-inner {
-        position: relative;
-        width: max-content;
-      }
-    }
-  }
-  .alternate-currency-detail-table-header-row {
-    min-height: ${CAP_SPACE_28};
-  }
-  .alternate-currency-name {
-    font-size: ${FONT_SIZE_M};
-    font-weight: ${FONT_WEIGHT_MEDIUM};
-    color: ${CAP_G01};
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    display: flex;
-  }
-  .last-modified-on {
-    font-size: ${FONT_SIZE_M};
-    color: ${CAP_G01};
-  }
-  .last-modified-by {
-    white-space: nowrap;
-    font-size: ${FONT_SIZE_S};
-    color: ${CAP_G05};
-    margin-top: ${CAP_SPACE_08};
-  }
-  .enrolment-duration {
-    font-size: ${FONT_SIZE_M};
-    color: ${CAP_G01};
-  }
-
-  .hovered-row {
-    .actions-menu-container {
-      display: flex;
-      align-items: center;
-      justify-content: space-around;
-    }
-    .last-modified-on {
-      max-width: 50%;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-    }
-    .last-modified-by {
-      max-width: 30%;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-  }
-  .status-container {
-    margin-top: ${CAP_SPACE_08};
-    flex-flow: nowrap;
-
-    .status-color-margin-right {
-      margin-right: ${CAP_SPACE_04};
-    }
-
-    .status-stopped-margin-left {
-      margin-left: ${CAP_SPACE_04};
-    }
-  }
-
-  .applicable-on-subtext {
-    justify-content: space-between;
-    margin-bottom: ${CAP_SPACE_20};
-  }
-  .applicable-on-left-text .applicable-on-right-text {
-    font-size: ${CAP_SPACE_12};
-    align-items: center;
-  }
-  .text-color-grey {
-    color: ${CAP_G05} !important;
-  }
-  .ellipsis-text {
-    max-width: 50%;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-  .alternate-currency-list-table {
-    .ant-table .ant-table-tbody > tr > td {
-      padding: 1rem ${CAP_SPACE_12} !important;
-    }
-    .ant-table .ant-table-tbody > tr > td:nth-child(3) {
-      padding: 1rem 0.5rem !important;
-    }
-    .ant-table .ant-table-tbody > tr > td:nth-child(4) {
-      padding: 1rem 0.3rem !important;
-    }
-    .ant-table .ant-table-tbody > tr > td:nth-child(5) {
-      padding: 1rem 0rem !important;
-    }
-    .ant-table .ant-table-tbody > tr > td:has(.alternate-currency-image) {
-      padding: ${CAP_SPACE_12} !important;
-    }
-    .ant-table .ant-table-thead > tr > th {
-      padding: ${CAP_SPACE_12} !important;
-      vertical-align: baseline;
-      .cap-header-v2-title,
-      .cap-header-v2-description {
-        line-height: ${CAP_SPACE_16};
-      }
-    }
-    .ant-table-header {
-      margin-bottom: -${CAP_SPACE_36} !important;
-    }
-    .alternate-currency-detail-table-header-row {
-      .cap-header-v2-description {
-        margin-top: ${CAP_SPACE_06};
-        padding: 0;
-      }
-    }
-  }
-  .alternate-currency-image {
-    width: ${CAP_SPACE_48} !important;
-    height: ${CAP_SPACE_48} !important;
-    -webkit-mask-image: url(${BadgeMask});
-    mask-image: url(${BadgeMask});
-    -webkit-mask-repeat: no-repeat;
-    mask-repeat: no-repeat;
-    background: ${CAP_G09};
-  }
-  .active-tag-value {
-    border-radius: ${CAP_SPACE_04};
-    padding: 0.143rem ${CAP_SPACE_04};
-    height: ${CAP_SPACE_20} !important;
-    margin-left: ${CAP_SPACE_12};
-  }
-
-  .tooltip-gap {
-    margin-left: ${CAP_SPACE_04};
-    font-size: ${CAP_SPACE_12};
-  }
-
-  .sort-table-header {
-    align-items: flex-start;
-    .sort-icon {
-      position: absolute;
-      top: -${CAP_SPACE_04};
-      flex-direction: column;
-    }
-
-    .caret-up {
-      color: ${CAP_G06};
-      margin-bottom: -0.214rem;
-      margin-left: ${CAP_SPACE_04};
-    }
-
-    .caret-down {
-      color: ${CAP_G06};
-      margin-top: -0.143rem;
-      margin-left: ${CAP_SPACE_04};
-    }
-
-    .sort-active {
-      color: ${CAP_G01};
-    }
-  }
-
-  .name-truncate-text {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-  .points-default {
-    background-color: ${CAP_G08};
-    border-radius: ${CAP_SPACE_04};
-    padding: 0.143rem ${CAP_SPACE_04};
-    margin-left: ${CAP_SPACE_04};
-    font-size: ${CAP_SPACE_12};
-    font-weight: ${FONT_WEIGHT_REGULAR};
-  }
-  .default-point-duration-info {
-    font-size: ${CAP_SPACE_12};
-    align-self: center;
-    padding-left: ${CAP_SPACE_04};
-    color: ${CAP_G04};
-  }
-  .reward-currency-title {
-    font-weight: ${FONT_WEIGHT_MEDIUM};
-    font-size: ${CAP_SPACE_20};
-    margin-left: ${CAP_SPACE_16};
-  }
-  .reward-currency-desc {
-    font-weight: ${FONT_WEIGHT_REGULAR};
-    font-size: ${CAP_SPACE_12};
-    margin-left: ${CAP_SPACE_16};
-    color: ${CAP_G05};
-    max-width: 43.786rem;
-  }
-  .reward-currency {
-    margin-right: ${CAP_SPACE_48};
-  }
-
-  .premium-container {
-    margin-bottom: ${CAP_SPACE_04};
-    border-radius: ${CAP_SPACE_04};
-    background-color: #ffc600;
-    color: ${CAP_WHITE};
-    width: 6.42rem;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    path {
-      fill: ${CAP_WHITE};
-    }
-  }
-  .filters-vertical-divider {
-    margin-left: ${CAP_SPACE_08};
-    border-left: 1px solid ${CAP_G08};
-    height: ${CAP_SPACE_12};
-  }
-  .more-icon-disabled {
-    color: ${CAP_G07} !important;
-    background-color: ${CAP_WHITE} !important;
-  }
-  .currency-margin {
-    margin-top: 0.214rem;
-  }
-`;

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

@@ -1,99 +0,0 @@
-import '@testing-library/jest-dom';
-import userEvent from '@testing-library/user-event';
-import { injectIntl } from 'react-intl';
-
-import { render, screen, fireEvent } from '../../../../tests/test-utils';
-
-import { mockAlternateCurrencyListData } from './mockData';
-import { AlternateCurrencyList } from '../AlternateCurrencyList';
-import viewRewardCurrencymessages from '../../CreateAlternateCurrency/messages';
-
-const getAllAlternateCurrency = jest.fn();
-const getUsersByIds = jest.fn();
-const getCdnTransformationConfig = jest.fn();
-
-const initializeComponent = props => {
-  const Component = injectIntl(AlternateCurrencyList);
-
-  const propsObj = {
-    alternateCurrencyList: {
-      alternateCurrencyListData: mockAlternateCurrencyListData.result,
-      alternateCurrencyListStatus: 'SUCCESS',
-    },
-    actions: { getCdnTransformationConfig },
-    programSummaryActions: { getAllAlternateCurrency },
-    capActions: { getUsersByIds },
-    ...props,
-  };
-  return render(Component, undefined, propsObj);
-};
-
-describe('<AlternateCurrencyList /> organisms', () => {
-  it('Should render skeleton while fetching users data', () => {
-    initializeComponent({
-      usersData: { getUsersByIdsStatus: 'REQUEST' },
-    });
-    const skeleton = document.querySelector('.ant-skeleton-content');
-    expect(skeleton).toBeInTheDocument();
-  });
-
-  it('Should render alternate currency table with correct API response', () => {
-    initializeComponent({
-      alternateCurrencyFlag: {
-        alternateCurrencyStatus: { value: true },
-      },
-    });
-
-    // Expect alternate currency data & user ids to be fetched
-    expect(getUsersByIds).toBeCalledWith(['4', '31', '62', '65']);
-    expect(getAllAlternateCurrency).toBeCalledWith(
-      {
-        pageNumber: 0,
-        programId: undefined,
-      },
-      false,
-      { pageSize: 50, pageNum: 0, sortOrder: 'DESC' },
-    );
-  });
-
-  it('AlternateCurrencyList - should render view reward currency on clicking a row', () => {
-    initializeComponent({
-      alternateCurrencyFlag: {
-        alternateCurrencyStatus: { value: true },
-      },
-    });
-    const rowText = screen.getByText(/Test Anuroop 2/i);
-    fireEvent.mouseEnter(rowText);
-    fireEvent.mouseLeave(rowText);
-    fireEvent.click(rowText);
-    const slideBoxheader = screen.getByText(
-      viewRewardCurrencymessages.viewRewardCurrency.defaultMessage,
-    );
-    expect(slideBoxheader).toBeInTheDocument();
-  });
-  it('Should handle fallback incase of alternate currency api failure', () => {
-    initializeComponent({
-      alternateCurrencyList: {
-        alternateCurrencyListData: mockAlternateCurrencyListData.result,
-        alternateCurrencyListStatus: 'FAILURE',
-      },
-    });
-
-    expect(
-      screen.getByText(/There was an issue loading this section/i),
-    ).toBeInTheDocument();
-
-    const refreshLink = screen.getByText(/Refresh/i);
-    userEvent.click(refreshLink);
-
-    expect(getAllAlternateCurrency).toBeCalled();
-  });
-
-  it('Should handle fallback incase of alternate currency api failure', () => {
-    initializeComponent({
-      alternateCurrencyList: undefined,
-    });
-
-    expect(screen.getByText(/Reward currencies/i)).toBeInTheDocument();
-  });
-});