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

package/components/molecules/AddPartnerProgramsBasicDetails/AddPartnerProgramsBasicDetails.js

@@ -1,156 +0,0 @@
-import React from 'react';
-import isEmpty from 'lodash/isEmpty';
-import { injectIntl } from 'react-intl';
-import CapRow from '@capillarytech/cap-ui-library/CapRow';
-import CapHeading from '@capillarytech/cap-ui-library/CapHeading';
-import CapInput from '@capillarytech/cap-ui-library/CapInput';
-import CapButton from '@capillarytech/cap-ui-library/CapButton';
-import CapColumn from '@capillarytech/cap-ui-library/CapColumn';
-import CapLabel from '@capillarytech/cap-ui-library/CapLabel';
-import globalMessages from '../../pages/Cap/messages';
-import withStyles from '../../../utils/withStyles';
-import messages from './messages';
-import styles, { SupplementaryDurationSelect } from './style';
-import {
-  getDurationFilterOptions,
-  getPreviewSupplementaryProgramsConfigPane,
-} from './utils';
-import { SUPPLEMENTARY_PROGRAM } from '../../pages/ProgramSummary/constants';
-import NumberInput from '../NumberInput';
-import { POSITIVE_INTEGER } from '../../pages/App/constants';
-
-export const AddPartnerProgramsBasicDetails = ({
-  className,
-  intl: { formatMessage },
-  supplementaryProgramName,
-  supplementaryProgramDuration,
-  supplementaryProgramDesc,
-  supplementaryProgramDurationType,
-  setSupplementaryProgramName,
-  setSupplementaryProgramDuration,
-  setSupplementaryProgramDesc,
-  setSupplementaryProgramDurationType,
-  onClickNext,
-  partnerProgramType,
-  successIconStates,
-}) => {
-  const onProgramNameChange = event =>
-    setSupplementaryProgramName(event.target.value);
-  const onProgramDescChange = event =>
-    setSupplementaryProgramDesc(event.target.value);
-  const onProgramDurationChange = event =>
-    setSupplementaryProgramDuration(event.target.value);
-  const onProgramDurationTypeChange = value =>
-    setSupplementaryProgramDurationType(value);
-
-  const isDisabled = () =>
-    !supplementaryProgramName ||
-    (partnerProgramType === SUPPLEMENTARY_PROGRAM
-      ? isEmpty(supplementaryProgramDuration)
-      : false) ||
-    !supplementaryProgramDesc;
-
-  return (
-    <CapRow className={className}>
-      <CapRow className="create-bulkConfig-content-row">
-        <CapRow>
-          <CapHeading type="h4">
-            {formatMessage(globalMessages.name)}
-          </CapHeading>
-          <CapInput
-            className="create-supplementary-input"
-            inductiveText={
-              partnerProgramType === SUPPLEMENTARY_PROGRAM
-                ? formatMessage(messages.createSupplementaryName)
-                : formatMessage(messages.createExternalName)
-            }
-            placeholder={formatMessage(
-              messages.createSupplementaryNamePlaceholder,
-            )}
-            onChange={onProgramNameChange}
-            value={supplementaryProgramName}
-            isRequired
-          />
-        </CapRow>
-        <CapRow className="create-supplementary-description">
-          <CapHeading type="h4">
-            {formatMessage(globalMessages.description)}
-          </CapHeading>
-          <CapInput
-            className="create-supplementary-input"
-            inductiveText={formatMessage(
-              messages.createSupplementaryDescription,
-            )}
-            placeholder={formatMessage(
-              messages.createSupplementaryDescriptionPlaceholder,
-            )}
-            onChange={onProgramDescChange}
-            value={supplementaryProgramDesc}
-            isRequired
-          />
-        </CapRow>
-        <CapRow className="create-supplementary-description">
-          {partnerProgramType === SUPPLEMENTARY_PROGRAM && (
-            <CapHeading type="h4">
-              {formatMessage(globalMessages.duration)}
-            </CapHeading>
-          )}
-          <CapRow>
-            {partnerProgramType === SUPPLEMENTARY_PROGRAM && (
-              <>
-                <CapRow>
-                  <CapLabel type="label3">
-                    {formatMessage(messages.createSupplementaryDuration)}
-                  </CapLabel>
-                </CapRow>
-                <CapRow className="supplementary-duration">
-                  <CapColumn span={5}>
-                    <NumberInput
-                      className="create-supplementary-duration-input"
-                      placeholder={formatMessage(
-                        messages.createSupplementaryDurationPlaceholder,
-                      )}
-                      type={POSITIVE_INTEGER}
-                      value={supplementaryProgramDuration}
-                      onChange={onProgramDurationChange}
-                      isRequired
-                    />
-                  </CapColumn>
-                  <CapColumn span={2}>
-                    <SupplementaryDurationSelect
-                      className="supplementary-duration-select"
-                      style={{ width: '100px' }}
-                      options={getDurationFilterOptions(formatMessage)}
-                      value={supplementaryProgramDurationType}
-                      onChange={onProgramDurationTypeChange}
-                      data-testid="duration-type-list"
-                    />
-                  </CapColumn>
-                </CapRow>
-              </>
-            )}
-          </CapRow>
-        </CapRow>
-        <CapRow>
-          <CapButton
-            type="primary"
-            className="create-bulkConfig-next-button lp-btn-step0-next"
-            disabled={isDisabled()}
-            onClick={onClickNext}
-          >
-            {formatMessage(globalMessages.next)}
-          </CapButton>
-        </CapRow>
-        <CapRow>
-          {getPreviewSupplementaryProgramsConfigPane(
-            formatMessage,
-            partnerProgramType,
-            successIconStates,
-          )}
-        </CapRow>
-      </CapRow>
-    </CapRow>
-  );
-};
-
-export default injectIntl(withStyles(AddPartnerProgramsBasicDetails, styles));

package/components/molecules/AddPartnerProgramsBasicDetails/index.js

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

package/components/molecules/AddPartnerProgramsBasicDetails/messages.js

@@ -1,53 +0,0 @@
-import { defineMessages } from 'react-intl';
-
-export const scope =
-  'loyaltyPlus.components.molecules.AddPartnerProgramsBasicDetails';
-
-export default defineMessages({
-  createSupplementaryName: {
-    id: `${scope}.createSupplementaryName`,
-    defaultMessage:
-      'Program name helps in uniquely identifying the subscription program',
-  },
-  createExternalName: {
-    id: `${scope}.createExternalName`,
-    defaultMessage:
-      'Program name helps in uniquely identifying the coalition program',
-  },
-  createSupplementaryNamePlaceholder: {
-    id: `${scope}.createSupplementaryNamePlaceholder`,
-    defaultMessage: 'Enter name',
-  },
-  createSupplementaryDescription: {
-    id: `${scope}.createSupplementaryDescription`,
-    defaultMessage: 'Write few words explaining what the program is about',
-  },
-  createSupplementaryDescriptionPlaceholder: {
-    id: `${scope}.createSupplementaryDescriptionPlaceholder`,
-    defaultMessage: 'Enter description',
-  },
-  createSupplementaryDuration: {
-    id: `${scope}.createSupplementaryDuration`,
-    defaultMessage: 'Select the duration of this program',
-  },
-  createSupplementaryDurationPlaceholder: {
-    id: `${scope}.createSupplementaryDurationPlaceholder`,
-    defaultMessage: 'Enter value',
-  },
-  benefitsAndLimitsDesc: {
-    id: `${scope}.benefitsAndLimitsDesc`,
-    defaultMessage: 'No promotion selected',
-  },
-  settingsDesc: {
-    id: `${scope}.settingsDesc`,
-    defaultMessage: 'Set subscription program expiry, Set loyalty tier..',
-  },
-  previewMessage: {
-    id: `${scope}.previewMessage`,
-    defaultMessage: 'This is a preview of upcoming steps',
-  },
-  supplementarySettings: {
-    id: `${scope}.supplementarySettings`,
-    defaultMessage: `Expiry and additional information`,
-  },
-});

package/components/molecules/AddPartnerProgramsBasicDetails/style.js

@@ -1,60 +0,0 @@
-import styled, { css } from 'styled-components';
-import * as styledVars from '@capillarytech/cap-ui-library/styled/variables';
-import CapSelect from '@capillarytech/cap-ui-library/CapSelect';
-
-const {
-  CAP_SPACE_04,
-  CAP_SPACE_08,
-  CAP_SPACE_16,
-  CAP_SPACE_24,
-  CAP_SPACE_36,
-  CAP_SPACE_40,
-  CAP_SPACE_48,
-} = styledVars;
-
-export const SupplementaryDurationSelect = styled(CapSelect)`
-  margin-left: ${CAP_SPACE_24};
-  margin-top: 22px;
-`;
-
-export default css`
-  .create-bulkConfig-content-row {
-    padding: 0 0 ${CAP_SPACE_16} ${CAP_SPACE_40};
-  }
-
-  .create-bulkConfig-next-button {
-    margin-top: ${CAP_SPACE_24};
-  }
-
-  .create-supplementary-input {
-    width: 440px;
-  }
-  .create-supplementary-duration-input {
-    width: 200px;
-  }
-  .supplementary-duration {
-    margin-top: ${CAP_SPACE_08};
-  }
-  .supplementary-duration-select {
-    margin-top: 0px;
-    margin-left: 0px;
-  }
-  .create-supplementary-description {
-    margin-top: ${CAP_SPACE_24};
-  }
-
-  .optional-label {
-    margin-left: ${CAP_SPACE_04};
-  }
-  .supplementary-program-config-wrapper {
-    margin-top: ${CAP_SPACE_36};
-    margin-left: -${CAP_SPACE_48};
-    width: 390px;
-  }
-  .supplementary-program-preview-config {
-    cursor: not-allowed;
-    .ant-row-flex-space-between {
-      width: 100%;
-    }
-  }
-`;

package/components/molecules/AddPartnerProgramsBasicDetails/tests/AddSupplementaryBasicDetails.test.js

@@ -1,77 +0,0 @@
-import '@testing-library/jest-dom';
-import userEvent from '@testing-library/user-event';
-import { injectIntl } from 'react-intl';
-import { render, screen } from '../../../../tests/test-utils';
-import AddPartnerProgramsBasicDetails from '../AddPartnerProgramsBasicDetails';
-import globalMessages from '../../../pages/Cap/messages';
-import messages from '../messages';
-import {
-  EXTERNAL_PROGRAM,
-  SUPPLEMENTARY_PROGRAM,
-} from '../../../pages/ProgramSummary/constants';
-
-const initializeAddSupplementaryBasicDetails = props => {
-  const Component = injectIntl(AddPartnerProgramsBasicDetails);
-
-  const finalProps = {
-    supplementaryProgramName: '',
-    supplementaryProgramDuration: '',
-    supplementaryProgramDesc: '',
-    supplementaryProgramDurationType: 'DAYS',
-    setSupplementaryProgramName: jest.fn(() => {}),
-    setSupplementaryProgramDuration: jest.fn(() => {}),
-    setSupplementaryProgramDesc: jest.fn(() => {}),
-    setSupplementaryProgramDurationType: jest.fn(() => {}),
-    onClickNext: jest.fn(() => {}),
-    partnerProgramType: SUPPLEMENTARY_PROGRAM,
-    exchangeRate: '',
-    setExchangeRate: jest.fn(() => {}),
-    successIconStates: {},
-    ...props,
-  };
-
-  render(Component, undefined, finalProps);
-};
-
-describe('<AddPartnerProgramsBasicDetails /> page', () => {
-  it('should render the basic component details', () => {
-    initializeAddSupplementaryBasicDetails();
-    const suppProgramNameInput = screen.getByPlaceholderText(
-      messages.createSupplementaryNamePlaceholder.defaultMessage,
-    );
-    userEvent.type(suppProgramNameInput, 'supp_program_01');
-    expect(suppProgramNameInput).toBeInTheDocument();
-    const suppProgramDescInput = screen.getByPlaceholderText(
-      messages.createSupplementaryDescriptionPlaceholder.defaultMessage,
-    );
-    userEvent.type(suppProgramDescInput, 'supp_program desc');
-    expect(suppProgramDescInput).toBeInTheDocument();
-    const suppProgramDurationInput = screen.getByPlaceholderText(
-      messages.createSupplementaryDurationPlaceholder.defaultMessage,
-    );
-    userEvent.type(suppProgramDurationInput, '5');
-    expect(suppProgramDurationInput).toBeInTheDocument();
-    const suppProgramDuration = screen.getByTestId('duration-type-list');
-    userEvent.click(suppProgramDuration);
-    const durationTypeOption = screen.getByRole('option', {
-      name: globalMessages.months.defaultMessage,
-    });
-    userEvent.click(durationTypeOption);
-    expect(suppProgramDuration).toBeInTheDocument();
-  });
-  it('should render the basic component details', () => {
-    initializeAddSupplementaryBasicDetails({
-      partnerProgramType: EXTERNAL_PROGRAM,
-    });
-    const suppProgramNameInput = screen.getByPlaceholderText(
-      messages.createSupplementaryNamePlaceholder.defaultMessage,
-    );
-    userEvent.type(suppProgramNameInput, 'supp_program_01');
-    expect(suppProgramNameInput).toBeInTheDocument();
-    const suppProgramDescInput = screen.getByPlaceholderText(
-      messages.createSupplementaryDescriptionPlaceholder.defaultMessage,
-    );
-    userEvent.type(suppProgramDescInput, 'supp_program desc');
-    expect(suppProgramDescInput).toBeInTheDocument();
-  });
-});

package/components/molecules/AddPartnerProgramsBasicDetails/utils.js

@@ -1,116 +0,0 @@
-import React from 'react';
-import messages from './messages';
-import globalMessages from '../../pages/Cap/messages';
-import CapRow from '@capillarytech/cap-ui-library/CapRow';
-import CapTooltip from '@capillarytech/cap-ui-library/CapTooltip';
-import { DAYS, MONTHS } from '../../pages/App/constants';
-import ConfigPaneTab from '@capillarytech/cap-coupons/components/ConfigPaneTab';
-
-import partnerProgramTierSettingMessages from '../../organisms/PartnerProgramTierSettings/messages';
-import { SUPPLEMENTARY_PROGRAM } from '../../pages/ProgramSummary/constants';
-
-export const getDurationFilterOptions = formatMessage => {
-  const durationFilterOptions = [
-    {
-      key: DAYS,
-      value: DAYS,
-      label: (
-        <CapRow
-          type="flex"
-          align="middle"
-          className="bulk-config-status-filter-option-row"
-        >
-          <span className="span-custom-left-margin">
-            {formatMessage(globalMessages.days)}
-          </span>
-        </CapRow>
-      ),
-    },
-    {
-      key: MONTHS,
-      value: MONTHS,
-      label: (
-        <CapRow
-          type="flex"
-          align="middle"
-          className="bulk-config-status-filter-option-row"
-        >
-          <span className="span-custom-left-margin">
-            {formatMessage(globalMessages.months)}
-          </span>
-        </CapRow>
-      ),
-    },
-  ];
-
-  return durationFilterOptions;
-};
-
-export const getPreviewTooltipSupplementaryProgramsConfigPane = (
-  formatMessage,
-  title,
-  desc,
-  paneState = {},
-) => (
-  <CapTooltip
-    placement="right"
-    title={formatMessage(messages.previewMessage)}
-    overlayStyle={{ width: '250px' }}
-  >
-    <ConfigPaneTab
-      className="supplementary-program-preview-config"
-      title={formatMessage(title)}
-      description={paneState?.description}
-      showSuccessIcon={paneState?.successState}
-      showPrefixIcon
-      isError={false}
-      {...!!paneState?.reminderData && { iconProps: paneState?.reminderData }}
-    />
-  </CapTooltip>
-);
-
-export const getPreviewSupplementaryProgramsConfigPane = (
-  formatMessage,
-  partnerProgramType,
-  successStates,
-) => {
-  const {
-    benefitsState,
-    settingsState,
-    tierSettingsState,
-    reminderState,
-  } = successStates;
-  return (
-    <CapRow>
-      <CapRow className="supplementary-program-config-wrapper">
-        {partnerProgramType === SUPPLEMENTARY_PROGRAM
-          ? getPreviewTooltipSupplementaryProgramsConfigPane(
-              formatMessage,
-              messages.supplementarySettings,
-              messages.settingsDesc,
-              settingsState,
-            )
-          : getPreviewTooltipSupplementaryProgramsConfigPane(
-              formatMessage,
-              partnerProgramTierSettingMessages.tierSettings,
-              partnerProgramTierSettingMessages.tierSettingsDesc,
-              tierSettingsState,
-            )}
-        {getPreviewTooltipSupplementaryProgramsConfigPane(
-          formatMessage,
-          globalMessages.benefits,
-          messages.benefitsAndLimitsDesc,
-          benefitsState,
-        )}
-
-        {partnerProgramType === SUPPLEMENTARY_PROGRAM &&
-          getPreviewTooltipSupplementaryProgramsConfigPane(
-            formatMessage,
-            globalMessages.reminder,
-            globalMessages.optional,
-            reminderState,
-          )}
-      </CapRow>
-    </CapRow>
-  );
-};

package/components/molecules/AddTierBanner/tests/AddTierBanner.test.js

@@ -1,27 +0,0 @@
-import React from 'react'; // eslint-disable-line no-unused-vars
-import * as intlWrapper from '../../../../utils/intlWrapper';
-import { AddTierBanner } from '../AddTierBanner';
-
-const { shallowWithIntl } = intlWrapper;
-
-describe('<AddTierBanner />', () => {
-  let renderedComponent;
-  const renderFuncDefault = () => {
-    renderedComponent = shallowWithIntl(<AddTierBanner />);
-  };
-  it('should render the default component no props', () => {
-    renderFuncDefault();
-    expect(renderedComponent).toMatchSnapshot();
-  });
-  it('should render the default component with click event', () => {
-    const mockCallBack = jest.fn(x => x + 10);
-    renderedComponent = shallowWithIntl(
-      <AddTierBanner
-        title="hello"
-        description="dummy description"
-        actions={mockCallBack}
-      />,
-    );
-    expect(renderedComponent).toMatchSnapshot();
-  });
-});

package/components/molecules/AddTierBanner/tests/__snapshots__/AddTierBanner.test.js.snap

@@ -1,25 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<AddTierBanner /> should render the default component no props 1`] = `
-<InfoBanner
-  actionDescription=""
-  actions={[Function]}
-  className="tier-info"
-  description=""
-  iconType="info"
-  showAction={false}
-  title=""
-/>
-`;
-
-exports[`<AddTierBanner /> should render the default component with click event 1`] = `
-<InfoBanner
-  actionDescription=""
-  actions={[MockFunction]}
-  className="tier-info"
-  description="dummy description"
-  iconType="info"
-  showAction={false}
-  title="hello"
-/>
-`;

package/components/molecules/AddTierPrimaryInfo/tests/AddTierPrimaryInfo.test.js

@@ -1,49 +0,0 @@
-import React from 'react'; // eslint-disable-line no-unused-vars
-import * as intlWrapper from '../../../../utils/intlWrapper';
-import { AddTierPrimaryInfo } from '../AddTierPrimaryInfo';
-
-const { shallowWithIntl } = intlWrapper;
-
-describe('<AddTierPrimaryInfo />', () => {
-  let renderedComponent;
-  const renderFuncDefault = () => {
-    renderedComponent = shallowWithIntl(<AddTierPrimaryInfo />);
-  };
-  it('should render the default component no props', () => {
-    renderFuncDefault();
-    expect(renderedComponent).toMatchSnapshot();
-  });
-
-  it('should render the default component with click event', () => {
-    const mockCallBack = jest.fn(x => x + 10);
-    renderedComponent = shallowWithIntl(
-      <AddTierPrimaryInfo
-        color="red"
-        setColor={() => {}}
-        primaryInfo={{ name: 'GOLD', description: 'premium' }}
-        allTiersName={{}}
-        setPrimaryInfo={() => mockCallBack(50)}
-        setIsDuplicateName={() => true}
-        isNameDuplicateError
-      />,
-    );
-    expect(renderedComponent).toMatchSnapshot();
-  });
-
-  it('should render the default component with isCreateTier ', () => {
-    const mockCallBack = jest.fn(x => x + 10);
-    renderedComponent = shallowWithIntl(
-      <AddTierPrimaryInfo
-        color="red"
-        setColor={() => {}}
-        primaryInfo={{ name: 'GOLD', description: 'premium' }}
-        allTiersName={{}}
-        isCreateTier
-        setPrimaryInfo={() => mockCallBack(50)}
-        setIsDuplicateName={() => true}
-        isNameDuplicateError
-      />,
-    );
-    expect(renderedComponent).toMatchSnapshot();
-  });
-});