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

package/components/molecules/DateTimeMetaDataAttribute/DateTimeMetaDataAttribute.js

@@ -0,0 +1,143 @@
+/**
+ *
+ * DateTimeMetaDataAttribute
+ *
+ */
+
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import CapRow from '@capillarytech/cap-ui-library/CapRow';
+import CapColumn from '@capillarytech/cap-ui-library/CapColumn';
+import CapLabel from '@capillarytech/cap-ui-library/CapLabel';
+import CapTooltip from '@capillarytech/cap-ui-library/CapTooltip';
+import CapIcon from '@capillarytech/cap-ui-library/CapIcon';
+import CapLink from '@capillarytech/cap-ui-library/CapLink';
+import CapDatePicker from '@capillarytech/cap-ui-library/CapDatePicker';
+import CapTimePicker from '@capillarytech/cap-ui-library/CapTimePicker';
+import moment from 'moment';
+import cloneDeep from 'lodash/cloneDeep';
+import withStyles from '../../../utils/withStyles';
+import styles from './style';
+import {
+  TIME_FORMAT,
+  DATE_FORMAT,
+  TIME_DISPLAY_FORMAT,
+  LOCALE_DATE_FORMAT,
+} from '../../pages/App/constants';
+
+const DateTimeMetaDataAttribute = ({
+  className,
+  valueType,
+  fieldName,
+  id,
+  preLoadedValue = '',
+  fieldIndex,
+  promotionMetadata = {},
+  setPromotionMetadata,
+  value,
+  placement,
+}) => {
+  const [date, setDate] = useState(
+    preLoadedValue ? moment(preLoadedValue) : value ? moment(value) : null,
+  );
+  const [time, setTime] = useState(
+    preLoadedValue
+      ? moment(preLoadedValue).format(TIME_FORMAT)
+      : value
+        ? moment(value).format(TIME_FORMAT)
+        : null,
+  );
+  const [isTimePickerOpen, onChangeTimePickerVisible] = useState(false);
+  const defaultTime = moment(Date.now()).format(TIME_FORMAT);
+  const defaultDate = moment(Date.now()).format(DATE_FORMAT);
+
+  const saveDataInPromotionMainObject = value => {
+    const clonnedPromoMeta = cloneDeep(promotionMetadata);
+    clonnedPromoMeta[fieldIndex] = {
+      key: fieldName,
+      value,
+      isBrandDefined: true,
+    };
+    setPromotionMetadata(clonnedPromoMeta);
+  };
+
+  const handleSaveData = () => {
+    saveDataInPromotionMainObject(
+      moment(`${date || defaultDate} ${time || defaultTime}`).toISOString(true),
+    );
+  };
+
+  const handleDateChange = (date, dateString) => {
+    setDate(moment(date).format(DATE_FORMAT));
+    onChangeTimePickerVisible(true);
+  };
+
+  const handleTimeChange = (time, timeString) => {
+    setTime(timeString);
+  };
+
+  const handleOpenChange = isTimePickerOpen => {
+    if (!isTimePickerOpen) {
+      handleSaveData();
+    }
+    onChangeTimePickerVisible(isTimePickerOpen);
+  };
+
+  const timePickerProps = {
+    className: 'promotion-attributes-time-picker',
+    style: { width: '150px' },
+    onChange: handleTimeChange,
+    value: time && moment(time, TIME_FORMAT).isValid() ? moment(time, TIME_FORMAT) : null,
+    format: TIME_DISPLAY_FORMAT,
+    allowClear: false,
+    minuteStep: 5,
+    onOpenChange: handleOpenChange,
+    inputReadOnly: true,
+    open: isTimePickerOpen,
+    addon: () => <CapLink onClick={() => handleOpenChange(false)} title="OK" />,
+    placement,
+  };
+
+  return (
+    <CapRow className={className}>
+      <CapRow key={id} className="promotion-attributes-content-row">
+        <CapColumn span={10}>
+          <CapLabel type="label9">{fieldName}</CapLabel>
+          <CapTooltip title={valueType}>
+            <CapIcon
+              size="s"
+              type="info"
+              className="promotion-attributes-icon"
+            />
+          </CapTooltip>
+        </CapColumn>
+        <CapColumn span={8}>
+          <CapDatePicker
+            style={{ width: '150px' }}
+            value={date && moment(date).isValid() ? moment(date) : null}
+            onChange={handleDateChange}
+            className="promotion-attributes-date-picker"
+            placement={placement}
+            format={LOCALE_DATE_FORMAT}
+          />
+          <CapTimePicker {...timePickerProps} />
+        </CapColumn>
+      </CapRow>
+    </CapRow>
+  );
+};
+
+DateTimeMetaDataAttribute.propTypes = {
+  className: PropTypes.string,
+  valueType: PropTypes.string,
+  fieldName: PropTypes.string,
+  id: PropTypes.number,
+  preLoadedValue: PropTypes.string,
+  fieldIndex: PropTypes.number,
+  promotionMetadata: PropTypes.object,
+  setPromotionMetadata: PropTypes.func,
+  value: PropTypes.string,
+  placement: PropTypes.bool,
+};
+
+export default withStyles(DateTimeMetaDataAttribute, styles);

package/components/molecules/DateTimeMetaDataAttribute/index.js

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

package/components/molecules/DateTimeMetaDataAttribute/style.js

@@ -0,0 +1,17 @@
+import { css } from 'styled-components';
+import { CAP_SPACE_24 } from '@capillarytech/cap-ui-library/styled/variables';
+
+export default css`
+  .promotion-attributes-time-picker {
+    margin-left: ${CAP_SPACE_24};
+    input {
+      width: 150px;
+    }
+  }
+
+  .promotion-attributes-date-picker {
+    span {
+      cursor: ${props => !!props.preLoadedValue && 'not-allowed'};
+    }
+  }
+`;

package/components/molecules/DelayCreatives/DelayCreatives.js

@@ -0,0 +1,262 @@
+import React, { useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { intlShape, injectIntl } from 'react-intl';
+import withStyles from 'utils/withStyles';
+import isEmpty from 'lodash/isEmpty';
+
+import CapLabel from '@capillarytech/cap-ui-library/CapLabel';
+import CapCardBox from '@capillarytech/cap-ui-library/CapCardBox';
+import CapRow from '@capillarytech/cap-ui-library/CapRow';
+import CapSelect from '@capillarytech/cap-ui-library/CapSelect';
+import CapButton from '@capillarytech/cap-ui-library/CapButton';
+import CapImage from '@capillarytech/cap-ui-library/CapImage';
+import StyledVars from '@capillarytech/cap-ui-library/styled';
+
+import { getActualEventName } from 'utils/commonUtils';
+
+import messages from './messages';
+import styles from './style';
+
+import NumberInput from '../NumberInput';
+import { FlexApart } from '../../pages/Cap/style';
+import delayIcon from '../../../assets/delay.svg';
+import Creatives from '../../organisms/Creatives';
+import globalMessages from '../../pages/Cap/messages';
+import {
+  DAYS,
+  HOURS,
+  MINS,
+  SEC,
+  DELAY_SEC,
+  DELAY_MIN,
+} from '../../pages/App/constants';
+import {
+  SMS,
+  EMAIL,
+  WECHAT,
+  MOBILEPUSH,
+  MPUSH,
+} from '../CardsCommunication/constants';
+import SenderInformation from '../SenderInformation';
+
+import { getWorkflowMode } from '../../organisms/ConfigureWorkflows/context';
+
+const {
+  CAP_BLUE01,
+  CAP_SPACE_28,
+  CAP_SPACE_80,
+  CAP_SPACE_40,
+  CAP_G07,
+} = StyledVars;
+
+const DelayCreatives = ({
+  className,
+  intl: { formatMessage },
+  dataSource,
+  currentChannel,
+  onChangeCreatives,
+  mode = '',
+  actionType = '',
+  rulesetId,
+  setShowSenderInformation,
+  noParentTransition,
+  currentProgram = {},
+  ...rest
+}) => {
+  const { isPreviewMode } = getWorkflowMode() ?? { isPreviewMode: false };
+
+  mode = getActualEventName(mode)?.toUpperCase();
+
+  switch (mode) {
+    case 'RETURNBILL':
+      mode = 'RETURNTRANSACTION';
+      break;
+  }
+
+  switch (actionType) {
+    case 'UPGRADE_SLAB_ACTION_SLAB':
+      actionType = 'UPGRADE_SLAB_ACTION';
+      break;
+  }
+  const { delay = '', delayType } = dataSource;
+
+  const timeParamOptions = useMemo(
+    () =>
+      [SEC, MINS, HOURS, DAYS].map(time => ({
+        label: formatMessage(globalMessages[time]),
+        value: time,
+        key: time,
+      })),
+    [formatMessage],
+  );
+
+  const onShowTimer = () =>
+    onChangeCreatives({
+      ...dataSource,
+      delay: '',
+      delayType: SEC,
+      delayError: false,
+    });
+
+  const onTimerChange = (event, value) => {
+    let delayError = false;
+    if (
+      value &&
+      ((delayType === SEC && Number(value) <= DELAY_SEC) ||
+        (delayType === MINS && Number(value) <= DELAY_MIN))
+    ) {
+      delayError = true;
+    } else {
+      delayError = false;
+    }
+    onChangeCreatives({
+      ...dataSource,
+      delay: value,
+      delayError,
+    });
+  };
+
+  const onTimeParamChange = value => {
+    let delayError = false;
+    if (
+      value &&
+      ((value === SEC && Number(delay) <= DELAY_SEC) ||
+        (value === MINS && Number(delay) <= DELAY_MIN))
+    ) {
+      delayError = true;
+    } else {
+      delayError = false;
+    }
+    onChangeCreatives({
+      ...dataSource,
+      delayType: value,
+      delayError,
+    });
+  };
+
+  const getModifiedDataSource = (channel, changedSource) => {
+    let modifiedDataObj = {};
+    if (!isEmpty(changedSource)) {
+      modifiedDataObj = { ...dataSource, ...changedSource };
+    }
+    return onChangeCreatives(modifiedDataObj);
+  };
+
+  const getType = () => {
+    const type = currentChannel.toUpperCase();
+    const typeArray = [];
+    if (type === SMS || type === MOBILEPUSH || type === EMAIL || type === MPUSH)
+      typeArray.push(`GENERIC_${type}`);
+    if (type === WECHAT) typeArray.push(`ALL_TAGS_WECHAT`);
+    if (mode) {
+      if (type === EMAIL) typeArray.push(mode);
+      if (type === SMS || type === MOBILEPUSH)
+        typeArray.push(`${mode}_${type}`);
+    }
+    return typeArray;
+  };
+  const type = currentChannel.toUpperCase();
+  const isSenderRequired = type === SMS || type === EMAIL;
+  const getSenderComponent = () =>
+    isSenderRequired ? (
+      <SenderInformation
+        type={getType()}
+        dataSource={dataSource}
+        setShowSenderInformation={setShowSenderInformation}
+        noParentTransition={noParentTransition}
+        onChangeCreatives={getModifiedDataSource}
+      />
+    ) : null;
+  const containerContent = delayType ? (
+    <>
+      {getSenderComponent()}
+      <FlexApart className="option-creatives-container">
+        <CapLabel type="label15" className="delay-label">
+          {formatMessage(messages.delayBy)}
+        </CapLabel>
+        <NumberInput
+          inputWidth="50px"
+          value={delay}
+          onChange={onTimerChange}
+          labelPosition="left"
+          disabled={isPreviewMode}
+        />
+        <CapSelect
+          options={timeParamOptions}
+          value={delayType}
+          style={{ width: '97px' }}
+          onChange={onTimeParamChange}
+          disabled={isPreviewMode}
+        />
+      </FlexApart>
+    </>
+  ) : (
+    <>
+      {getSenderComponent()}
+      <CapButton
+        style={{
+          color: CAP_BLUE01,
+          height: '38px',
+          width: '100%',
+          paddingLeft: CAP_SPACE_28,
+        }}
+        className="delay-button"
+        type="flat"
+        size="small"
+        prefix={
+          <CapImage
+            className="delay-container"
+            src={delayIcon}
+          />
+        }
+        onClick={onShowTimer}
+        disabled={isPreviewMode}
+      >
+        {formatMessage(messages.addDelayWhileSending)}
+      </CapButton>
+    </>
+  );
+
+  const getActionType = () => actionType.toUpperCase();
+
+  return (
+    <CapRow style={{ width: '276px', height: '231px' }} className={className}>
+      <Creatives
+        dataSource={dataSource}
+        currentChannel={currentChannel}
+        onChangeCreatives={getModifiedDataSource}
+        type={getType()}
+        actionType={getActionType()}
+        rulesetId={rulesetId}
+        {...rest}
+        currentProgram={currentProgram}
+      />
+      <CapCardBox
+        height={isSenderRequired ? CAP_SPACE_80 : CAP_SPACE_40}
+        content={containerContent}
+        style={{
+          marginTop: `-${isSenderRequired ? CAP_SPACE_40 : 0}`,
+          border: `solid 1px ${CAP_G07}`,
+        }}
+      />
+    </CapRow>
+  );
+};
+
+DelayCreatives.defaultProps = {
+  intl: { formatMessage: () => {} },
+  dataSource: {},
+  currentChannel: '',
+  onChangeCreatives: () => {},
+};
+
+DelayCreatives.propTypes = {
+  intl: intlShape.isRequired,
+  className: PropTypes.string,
+  dataSource: PropTypes.object,
+  currentChannel: PropTypes.string,
+  onChangeCreatives: PropTypes.func,
+  currentProgram: PropTypes.object,
+};
+
+export default injectIntl(withStyles(DelayCreatives, styles));

package/components/molecules/DelayCreatives/index.js

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

package/components/molecules/DelayCreatives/messages.js

@@ -0,0 +1,20 @@
+/*
+ * DelayCreatives Messages
+ *
+ * This contains all the text for the DelayCreatives component.
+ */
+
+import { defineMessages } from 'react-intl';
+
+export const scope = 'loyaltyPlus.components.molecules.DelayCreatives';
+
+export default defineMessages({
+  delayBy: {
+    id: `${scope}.delayBy`,
+    defaultMessage: 'Delay by',
+  },
+  addDelayWhileSending: {
+    id: `${scope}.addDelayWhileSending`,
+    defaultMessage: 'Add delay while sending',
+  },
+});

package/components/molecules/DelayCreatives/style.js

@@ -0,0 +1,64 @@
+import { css } from 'styled-components';
+import StyledVars from '@capillarytech/cap-ui-library/styled';
+import { CAP_SPACE_16 } from '@capillarytech/cap-ui-library/styled/variables';
+
+const {
+  CAP_SPACE_04,
+  FONT_COLOR_02,
+  CAP_SPACE_12,
+  CAP_SPACE_28,
+  CAP_G07,
+} = StyledVars;
+export default css`
+  div.ant-card.cap-card-box-v2.ant-card-bordered {
+    background-color: white !important;
+    border-color: ${CAP_G07};
+    border-top: 0;
+  }
+  .ant-card {
+    border-radius: 0 0 ${CAP_SPACE_04} ${CAP_SPACE_04};
+  }
+
+  .delay-label {
+    margin-right: ${CAP_SPACE_12};
+    padding-top: ${CAP_SPACE_04};
+  }
+  .ant-input-affix-wrapper .ant-input:not(:last-child),
+  .ant-select-lg .ant-select-selection--single {
+    height: ${CAP_SPACE_28};
+    padding: ${CAP_SPACE_04};
+    color: ${FONT_COLOR_02};
+  }
+  .option-creatives-container {
+    padding: 5px ${CAP_SPACE_16} 0 ${CAP_SPACE_16};
+    align-items: flex-start;
+    width: 276px;
+  }
+  .ant-select-selection-selected-value {
+    position: relative;
+    bottom: 9px;
+    color: ${FONT_COLOR_02};
+  }
+  .cap-custom-card-list.ant-card.cap-custom-card {
+    max-width: 276px !important;
+    min-width: 276px !important;
+  }
+  &.preview-card-item,
+  &.message-content-list {
+    border-radius: ${CAP_SPACE_04} ${CAP_SPACE_04} 0 0 !important;
+    .ant-card-body {
+      max-width: 274px !important;
+      height: 87px !important;
+    }
+  }
+  .cap-custom-card-list-col {
+    max-width: 276px !important;
+    min-width: 276px !important;
+    .ant-card.cap-custom-card {
+      border-radius: ${CAP_SPACE_04} ${CAP_SPACE_04} 0 0 !important;
+    }
+  }
+  .ant-input-affix-wrapper {
+    margin-top: 0 !important;
+  }
+`;

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

@@ -0,0 +1,28 @@
+import { injectIntl } from 'react-intl';
+import { screen } from '@testing-library/dom';
+
+import { render } from '../../../../tests/test-utils';
+import DelayCreatives from '../DelayCreatives';
+import '@testing-library/jest-dom';
+
+jest.mock('../../../organisms/ConfigureWorkflows/context', () => ({
+  getWorkflowMode: () => ({
+    isPreviewMode: false,
+  }),
+}));
+
+const initializeComponent = props => {
+  const Component = injectIntl(DelayCreatives);
+  const propsObj = {
+    ...props,
+  };
+
+  render(Component, undefined, propsObj);
+};
+
+describe('<DelayCreatives />', () => {
+  it('Should render component with default values ', () => {
+    initializeComponent();
+    expect(screen.getByText(/Add delay while sending/i)).toBeInTheDocument();
+  });
+});