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

package/components/organisms/CreatePromotionForm/CreatePromotionForm.js

@@ -1,879 +0,0 @@
-import React, { useState, useEffect, useMemo } from 'react';
-import PropTypes from 'prop-types';
-import classnames from 'classnames';
-import { withRouter } from 'react-router-dom';
-import moment from 'moment';
-import { injectIntl, intlShape } from 'react-intl';
-import isEmpty from 'lodash/isEmpty';
-import { isTrue, eventTypesMap } from 'utils/commonUtils';
-import {
-  CapRow,
-  CapColumn,
-  CapButton,
-  CapHeading,
-  CapRadioGroup,
-  CapSelect,
-  CapInput,
-  CapDateRangePicker,
-  CapTooltip,
-  CapIcon,
-  CapRadioCard,
-  CapTooltipWithInfo,
-  CapAlert,
-  CapMultiSelect,
-  CapLabel,
-  CapLink,
-} from '@capillarytech/cap-ui-library';
-import { compose, bindActionCreators } from 'redux';
-import { connect } from 'react-redux';
-import { createStructuredSelector } from 'reselect';
-
-import injectSaga from 'utils/injectSaga';
-import injectReducer from 'utils/injectReducer';
-import messages from './messages';
-import styles from './style';
-
-import globalMessages from '../../pages/Cap/messages';
-import CustomerActivity from '../CustomerActivity';
-import SelectApiWrapper from '../../molecules/SelectApiWrapper';
-import SwitchWithDivider from '../../molecules/SwitchWithDivider';
-import {
-  makeSelectPrograms,
-  makeSelectCustomerActivity,
-  makeSelectEMFStatus,
-  makeSelectTimeZone,
-  makeSelectCap,
-} from '../../pages/Cap/selectors';
-import * as capActions from '../../pages/Cap/actions';
-import {
-  FAILURE,
-  REQUEST,
-  DATE_FORMAT,
-  SOURCE_PROMOTION,
-  SUCCESS,
-  CREATE,
-  EDIT,
-  LOCALE_DATE_FORMAT,
-} from '../../pages/App/constants';
-import {
-  type as promotionType_constants,
-  components as components_constants,
-} from '../../pages/Cap/constants';
-import withErrorBoundary from '../../../utils/withErrorBoundary';
-import withStyles from '../../../utils/withStyles';
-import { gtmPush } from '../../../utils/gtmTrackers';
-import {
-  GENERIC,
-  LOYALTY,
-  LOYALTY_EARNING,
-} from '../../pages/Promotions/constants';
-import promotionMessages from '../../pages/Promotions/messages';
-import { COMPLETED, LIVE, UPCOMING } from '../PromotionsDetail/constants';
-import {
-  isOutsideRangeUtil,
-  truncateWord,
-  redirectToMilestone,
-  haveArraysDifferentValues,
-} from './utils';
-import saga from '../TargetPointAllocationWorkflowAction/saga';
-import reducer from '../TargetPointAllocationWorkflowAction/reducer';
-import { makeSelectTargetGroups } from '../TargetPointAllocationWorkflowAction/selectors';
-import {
-  DEFAULT,
-  UNIFIED,
-} from '../TargetPointAllocationWorkflowAction/constants';
-import * as actions from '../TargetPointAllocationWorkflowAction/actions';
-import { TARGET_COMPLETED } from '../../organisms/ConfigureWorkflows/constants';
-
-export const CreatePromotionForm = ({
-  className,
-  intl: { formatMessage },
-  programData: { programDetails = [], getProgramsStatus } = {},
-  capActions,
-  capWorkflowData: { getCustomerActivityStatus },
-  onClickNext,
-  updateFormDataValue,
-  formData = {},
-  getProgramById,
-  currentProgram = {},
-  getPointsStrategies,
-  setEventCategory,
-  loadActivities = true,
-  EMFData: { getEMFStatus, EMFStatus: { value: isEMFActive } = {} } = {},
-  mode = CREATE,
-  setCurrentProgram = () => {},
-  freezeFields = false,
-  setFreezeFields = () => {},
-  timeZoneData: { timezone = '' } = {},
-  userData,
-  targetGroupData: {
-    getCompressedTargetGroupsStatus = '',
-    targetGroupsWithTargets = {},
-    targetGroupKeysPayload = {},
-    targetGroupsActionsMapped = [],
-    targetGroupObjectPayload = [],
-    isMultiselectTargetGroup = false,
-  } = {},
-  actions,
-}) => {
-  const { currentOrgDetails } = userData;
-  const { accessibleFeatures = [] } = currentOrgDetails;
-  const isPromotionTypeEnabled = accessibleFeatures.includes(
-    'ENABLE_ADVANCE_LOYALTY_PROMOTIONS',
-  );
-  const programsList = programDetails.map(({ name, id }) => ({
-    label: name,
-    value: id,
-    key: id,
-  }));
-  const [name, setName] = useState(formData?.name);
-  const [description, setDescription] = useState(formData?.description);
-  const [programId, setProgramId] = useState(formData?.programId);
-  const [programName, setProgramName] = useState(formData?.programName);
-  const [isActive, setIsActive] = useState(formData?.isActive);
-  const [useProportions, setUseProportions] = useState(
-    formData?.useProportions,
-  );
-  const [type, setType] = useState(formData?.type || null);
-  const [startDate, setStartDate] = useState(formData?.startDate);
-  const [endDate, setEndDate] = useState(formData?.endDate);
-  const [eventName, setEventName] = useState(formData?.eventName);
-  const [promotionType, setPromotionType] = useState(
-    formData?.promotionType || 'GENERIC',
-  );
-  const [newSelectedTargetGroup, setNewSelectedTargetGroup] = useState([]);
-
-  useEffect(
-    () => {
-      if (programId && loadActivities && mode !== EDIT) {
-        capActions.getCustomerActivity(programId, SOURCE_PROMOTION);
-      }
-    },
-    [programId],
-  );
-
-  useEffect(
-    () => {
-      const defaultProgram = programDetails.find(({ isDefault }) =>
-        isTrue(isDefault),
-      );
-      if (
-        getEMFStatus === SUCCESS &&
-        !isTrue(isEMFActive) &&
-        programDetails.length &&
-        defaultProgram
-      ) {
-        const { id, name = '' } = defaultProgram || {};
-        setCurrentProgram(defaultProgram);
-        setProgramName(name);
-        setProgramId(id);
-        getPointsStrategies(id);
-      }
-    },
-    [getEMFStatus, getProgramsStatus],
-  );
-
-  useEffect(
-    () => {
-      if (!getProgramsStatus) {
-        capActions.getPrograms();
-      }
-    },
-    [getProgramsStatus],
-  );
-
-  useEffect(
-    () => {
-      if (
-        eventName === TARGET_COMPLETED &&
-        getCompressedTargetGroupsStatus !== SUCCESS
-      ) {
-        actions.getTargetGroupsWithTargets();
-      }
-    },
-    [eventName],
-  );
-  const onNameChange = event => setName(event.target.value);
-  const onDescriptionChange = event => setDescription(event.target.value);
-  const onTypeChange = event => setType(event.target.value);
-
-  const onProgramIdChange = value => {
-    const program = programDetails.find(program => program.id === value) || {};
-    const programName = program?.name || '';
-    setProgramName(programName);
-    setProgramId(value);
-    getProgramById(value);
-    getPointsStrategies(value);
-    setCurrentProgram(program);
-  };
-
-  const onDateChange = date => {
-    const tz = timezone === 'GMT' ? 'utc' : timezone;
-    moment.tz.setDefault(tz);
-    setStartDate(date[0] ? moment(date[0]).format(DATE_FORMAT) : null);
-    setEndDate(date[1] ? moment(date[1]).format(DATE_FORMAT) : null);
-  };
-
-  const onIsActiveChange = () => setIsActive(!isActive);
-
-  const onUseProportionsChange = () => setUseProportions(!useProportions);
-
-  const handleSetEventNameChange = (eventName, category) => {
-    setEventName(eventName);
-    setEventCategory(category);
-    if (eventName === eventTypesMap.TRANSACTIONADD) {
-      setType(promotionType_constants?.TRANSACTION);
-    } else {
-      setType(promotionType_constants?.CUSTOMER);
-    }
-  };
-
-  const onRefreshClick = () => {
-    capActions.getCustomerActivity(programId, SOURCE_PROMOTION);
-  };
-  const onRefreshClickTargetMultiSelect = () => {
-    actions.getTargetGroupsWithTargets();
-  };
-
-  const validate = () =>
-    name &&
-    type &&
-    eventName &&
-    startDate &&
-    endDate &&
-    promotionType &&
-    !isEmpty(currentProgram);
-
-  const showNext = () => {
-    if (validate()) {
-      const createPromotionFormObj = {
-        id: formData?.id,
-        name,
-        description,
-        type,
-        startDate,
-        endDate,
-        programId,
-        programName,
-        eventName,
-        isActive,
-        useProportions,
-        promotionType,
-      };
-      updateFormDataValue(
-        components_constants.createPromotionForm,
-        createPromotionFormObj,
-      );
-      onClickNext(false);
-      setFreezeFields(true);
-      const promotionDetails = Object.assign(createPromotionFormObj, {
-        mode,
-        eventKey: 'COMPLETED_STEP_0',
-      });
-      gtmPush('promotionDetails', promotionDetails);
-    }
-  };
-
-  const panes = [
-    {
-      title: formatMessage(promotionMessages.typeTitleAvailableForAll),
-      content: formatMessage(promotionMessages.typeContentAvailableForAll),
-      value: GENERIC,
-      className: 'promotion-type-card',
-      'data-testid': GENERIC,
-    },
-    {
-      title: formatMessage(promotionMessages.typeTitleDirectIssue),
-      content: formatMessage(promotionMessages.typeContentDirectIssue),
-      value: LOYALTY,
-      className: 'promotion-type-card',
-      'data-testid': LOYALTY,
-    },
-    {
-      title: formatMessage(promotionMessages.typeTitleEnrollAndIssue),
-      content: formatMessage(promotionMessages.typeContentEnrollAndIssue),
-      value: LOYALTY_EARNING,
-      className: 'promotion-type-card',
-      'data-testid': LOYALTY_EARNING,
-    },
-  ];
-
-  const onRadioChange = e => {
-    setPromotionType(e.target.value);
-  };
-
-  const isOutsideRange = day => {
-    return isOutsideRangeUtil(day, mode, formData?.promotionStatus);
-  };
-
-  const isDateDisabled = () => {
-    if (mode == EDIT && formData?.promotionStatus != UPCOMING)
-      return 'startDate';
-    return false;
-  };
-  const handleTargetMultiSelect = value => {
-    let valueArray = [...value];
-    let payloadKeys = {};
-    let payloadObject = {};
-    valueArray?.forEach(val => {
-      let targetIds = targetGroupsWithTargets[val]?.targets?.map(
-        target => target?.id,
-      );
-      payloadKeys[val] = targetIds;
-      payloadObject[val] = targetGroupsWithTargets[val];
-    });
-    const targetGroupObjectPayload = Object.values(payloadObject);
-    const isMultiselectTargetGroup =
-      targetGroupObjectPayload?.length > 0 &&
-      haveArraysDifferentValues(
-        targetGroupsActionsMapped,
-        targetGroupObjectPayload,
-      );
-    setNewSelectedTargetGroup([...value]);
-    actions.setTargetsPayload(
-      payloadKeys,
-      targetGroupObjectPayload,
-      isMultiselectTargetGroup,
-    );
-  };
-
-  const appliedKeys = useMemo(
-    () => {
-      const targetGroupKeys = Object.keys(targetGroupKeysPayload);
-      return targetGroupKeys?.length > 0
-        ? targetGroupKeys
-        : targetGroupsActionsMapped;
-    },
-    [targetGroupsActionsMapped, targetGroupKeysPayload],
-  );
-
-  const milistoneOptinTooltipTitle = targetGroup => {
-    return (
-      <CapRow className={className}>
-        <CapRow className="multiselect-tooltip-container">
-          <CapLabel type="label32" className="multiselect-tooltip-header">
-            {targetGroup?.name}
-          </CapLabel>
-          <CapLabel type="label6" className="multiselect-tooltip-margin">
-            {formatMessage(globalMessages.description)}
-            <span className="multiselect-tooltip-color">
-              {targetGroup?.description}
-            </span>
-          </CapLabel>
-          <CapLabel type="label6" className="multiselect-tooltip-margin">
-            {formatMessage(globalMessages.status)}
-            <span className="multiselect-tooltip-color">
-              {targetGroup?.active
-                ? formatMessage(globalMessages.active)
-                : formatMessage(globalMessages.inactive)}
-            </span>
-          </CapLabel>
-          <CapLabel type="label6" className="multiselect-tooltip-margin">
-            {formatMessage(globalMessages.type)}
-            <span className="multiselect-tooltip-color">
-              {[DEFAULT, UNIFIED].includes(targetGroup?.trackingType)
-                ? formatMessage(globalMessages.milestoneCapital)
-                : formatMessage(globalMessages.streakCapital)}
-            </span>
-          </CapLabel>
-        </CapRow>
-      </CapRow>
-    );
-  };
-  const isMilestoneDisabled = value =>
-    targetGroupsActionsMapped?.includes(String(value));
-  const isInactiveMilestone = () => {
-    if (isMultiselectTargetGroup) {
-      return (
-        targetGroupObjectPayload?.length > 0 &&
-        targetGroupObjectPayload?.some(
-          targetGroup => targetGroup?.active === false,
-        )
-      );
-    }
-    return (
-      targetGroupsActionsMapped?.length > 0 &&
-      targetGroupsActionsMapped?.some(
-        targetGroupId =>
-          targetGroupsWithTargets[targetGroupId]?.active === false,
-      )
-    );
-  };
-  const milestoneTreeOption = (newTargetGroup, isDisabled) => {
-    return (
-      <CapTooltip
-        title={isDisabled ? formatMessage(messages.usedTargetGroups) : ''}
-        // commenting now will uncomment when required
-        // getPopupContainer={trigger => trigger.parentElement}
-        overlayClassName="multiselect-tooltip-overlay"
-      >
-        <CapRow type="flex" justify="space-between" key={newTargetGroup?.id}>
-          <CapLabel type="label15">
-            <CapTooltip
-              title={
-                newTargetGroup?.name.length >= 25 && !isDisabled
-                  ? newTargetGroup?.name
-                  : ''
-              }
-            >
-            {truncateWord(newTargetGroup?.name, 25)}
-            </CapTooltip>
-            <CapLabel type="label3" className="multiselect-sub-option">
-              {[DEFAULT, UNIFIED].includes(newTargetGroup?.trackingType)
-                ? formatMessage(globalMessages.milestoneCapital)
-                : formatMessage(globalMessages.streakCapital)}
-            </CapLabel>
-          </CapLabel>
-
-          <CapTooltipWithInfo
-            title={milistoneOptinTooltipTitle(newTargetGroup)}
-            className="promotion-milestone-info"
-            placement="right"
-          />
-        </CapRow>
-      </CapTooltip>
-    );
-  };
-  const milestoneOption = useMemo(
-    () =>
-      Object.values(targetGroupsWithTargets)?.map(newTargetGroup => ({
-        key: newTargetGroup?.id,
-        title: milestoneTreeOption(
-          newTargetGroup,
-          isMilestoneDisabled(newTargetGroup?.id),
-        ),
-        value: newTargetGroup?.name,
-        disabled: isMilestoneDisabled(newTargetGroup?.id),
-      })),
-    [targetGroupsWithTargets],
-  );
-  const moreTooltipOptionObject = useMemo(
-    () => {
-      if (isMultiselectTargetGroup && targetGroupObjectPayload?.length > 0) {
-        return targetGroupObjectPayload;
-      } else if (targetGroupsActionsMapped?.length > 0) {
-        return targetGroupsActionsMapped.map(
-          targetGroupId => targetGroupsWithTargets[targetGroupId],
-        );
-      }
-    },
-    [
-      targetGroupObjectPayload,
-      targetGroupsActionsMapped,
-      isMultiselectTargetGroup,
-    ],
-  );
-  const renderMoreTooltipOption = () =>
-    moreTooltipOptionObject?.map(targetGroup => {
-      return (
-        <CapRow key={targetGroup?.id} className="multiselect-tooltip-margin">
-          {targetGroup?.name}
-        </CapRow>
-      );
-    });
-  return (
-    <CapRow className={className}>
-      <CapRow
-        className={classnames('create-promotion-content-row', 'promotion-info')}
-      >
-        <CapHeading type="h3" aria-label="promotion">
-          {formatMessage(globalMessages.promotionName)}
-        </CapHeading>
-        <CapInput
-          inductiveText={formatMessage(messages.promotionNameDesc)}
-          placeholder={formatMessage(messages.promotionNamePlaceholder)}
-          onChange={onNameChange}
-          value={name}
-          maxLength={100}
-          isRequired
-        />
-      </CapRow>
-      <CapRow
-        className={classnames('create-promotion-content-row', 'promotion-info')}
-      >
-        <CapHeading type="h3">
-          {formatMessage(globalMessages.description)}
-        </CapHeading>
-        <CapInput.TextArea
-          inductiveText={formatMessage(messages.promotionDescriptionDesc)}
-          placeholder={formatMessage(messages.promotionDescriptionPlaceholder)}
-          onChange={onDescriptionChange}
-          value={description}
-          maxLength={250}
-        />
-      </CapRow>
-      {isTrue(isEMFActive) && (
-        <CapRow className="create-promotion-content-row">
-          <CapHeading type="h3">
-            {formatMessage(globalMessages.program)}
-          </CapHeading>
-          <CapSelect
-            options={programsList}
-            placeholder={formatMessage(messages.promotionProgramPlaceholder)}
-            value={programId}
-            onChange={onProgramIdChange}
-            className="program-select"
-            disabled={mode === EDIT || freezeFields}
-          />
-        </CapRow>
-      )}
-      <CapRow className="create-promotion-content-row">
-        <CapHeading type="h3">
-          {formatMessage(globalMessages.customerActivity)}
-        </CapHeading>
-        <CapColumn className="customer-activity-column">
-          <SelectApiWrapper
-            className="customer-activity-api-wrapper"
-            isApiError={getCustomerActivityStatus === FAILURE}
-            isLoading={getCustomerActivityStatus === REQUEST}
-            onRefreshClick={onRefreshClick}
-            selectProps={{
-              className: 'customer-activity-api-wrapper-select',
-            }}
-          >
-            <CustomerActivity
-              eventType={eventName}
-              setEventType={handleSetEventNameChange}
-              isDisabled={!programId || mode === EDIT || freezeFields}
-              className="create-promotion-customer-activity"
-            />
-          </SelectApiWrapper>
-        </CapColumn>
-      </CapRow>
-      {eventName === TARGET_COMPLETED && (
-        <CapRow className="create-promotion-content-row">
-          <CapHeading type="h3">
-            {formatMessage(globalMessages.milestoneOrStreak)}
-            <span className="promotion-optional">
-              {formatMessage(globalMessages.milsetoneOptional)}
-            </span>
-          </CapHeading>
-          <CapLabel type="label3" className="milestone-dropdown-info">
-            {formatMessage(messages.milestoneDropdownInfo)}
-            </CapLabel>
-          <CapColumn
-            className={classnames('milestone-streak-column', {
-              'remove-search': milestoneOption.length === 0,
-              'more-tooltip-single': !moreTooltipOptionObject?.length,
-              'more-tooltip-multiple': moreTooltipOptionObject?.length > 1,
-            })}
-          >
-            <SelectApiWrapper
-              className="target-multiselect-api-wrapper"
-              isApiError={getCompressedTargetGroupsStatus === FAILURE}
-              isLoading={getCompressedTargetGroupsStatus === REQUEST}
-              onRefreshClick={onRefreshClickTargetMultiSelect}
-              selectProps={{
-                className: 'target-multiselect-api-wrapper-select',
-              }}
-            >
-              <CapRow>
-                <CapMultiSelect
-                  getPopupContainer={trigger => trigger.parentElement}
-                  className="create-promotion-customer-activity"
-                  treeData={milestoneOption}
-                  placeholder={formatMessage(messages.selectMilestoneStreak)}
-                  onSelect={handleTargetMultiSelect}
-                  appliedKeys={appliedKeys}
-                  searchKey="value"
-                  searchPlaceholder={formatMessage(globalMessages.search)}
-                  data-testid="milestone-streak-multiselect"
-                  {...milestoneOption?.length === 0 && {
-                    noResultsFoundText: (
-                      <CapRow>
-                        <CapHeading type="h4">
-                          {formatMessage(messages.noMilestoneStrteaks)}
-                        </CapHeading>
-                        <CapLabel
-                          type="label6"
-                          className="multiselect-no-result"
-                        >
-                          {formatMessage(messages.toCreateMilestone)}
-                          <CapLink
-                            id="milestone-link"
-                            className="lp-link-config-workflows-open-promo"
-                            title={
-                              <CapLabel
-                                type="label27"
-                                className="multiselect-link-margin"
-                              >
-                                {formatMessage(messages.milestonesLink)}
-                              </CapLabel>
-                            }
-                            onClick={redirectToMilestone}
-                            fontWeight="m"
-                          />
-                        </CapLabel>
-                      </CapRow>
-                    ),
-                  }}
-                  // enableVirtualizedRendering
-                />
-              </CapRow>
-            </SelectApiWrapper>
-            <CapRow>
-              {isInactiveMilestone() && (
-                <CapAlert
-                  message={
-                    <CapRow>{formatMessage(messages.inActiveMilestone)}</CapRow>
-                  }
-                  className="margin-t-8 in-active-milestone-streak"
-                />
-              )}
-            </CapRow>
-
-            {moreTooltipOptionObject?.length > 1 && (
-              <CapTooltip
-                title={
-                  moreTooltipOptionObject?.length > 1 && (
-                    <CapRow className="more-tooltip-container">
-                      {renderMoreTooltipOption()}
-                    </CapRow>
-                  )
-                }
-                getPopupContainer={trigger => trigger.parentElement}
-              >
-                <CapRow className="milestone-streak-more-tolltip" />
-              </CapTooltip>
-            )}
-          </CapColumn>
-        </CapRow>
-      )}
-
-      <CapRow
-        className={classnames(
-          'create-promotion-content-row',
-          'activate-promotion-row',
-        )}
-      >
-        <SwitchWithDivider
-          label={formatMessage(messages.activatePromotion)}
-          inductiveText={formatMessage(messages.activatePromotionDesc)}
-          isSwitchChecked={isActive}
-          onSwitchChange={onIsActiveChange}
-          switchStyle={{ alignItems: 'baseline' }}
-          isDivider={false}
-          className="activate-promotion-switch lp-switch-promo-activate"
-          aria-label="activatePromotion"
-        />
-      </CapRow>
-      {!!eventName && eventName === eventTypesMap.TRANSACTIONADD ? (
-        <CapRow className="create-promotion-content-row">
-          <CapHeading type="h3">
-            {formatMessage(promotionMessages.promotionAppliedOn)}
-          </CapHeading>
-          <CapRadioGroup
-            defaultValue={type}
-            onChange={onTypeChange}
-            options={[
-              {
-                label: (
-                  <CapHeading.CapHeadingSpan
-                    className="create-promotion-appliedOn"
-                    type="h4"
-                  >
-                    {formatMessage(messages.promotionTypeTransactionLevel)}
-                    <CapTooltipWithInfo
-                      title={formatMessage(
-                        promotionMessages.transactionTooltip,
-                      )}
-                    />
-                  </CapHeading.CapHeadingSpan>
-                ),
-                value: promotionType_constants?.TRANSACTION,
-              },
-              {
-                label: (
-                  <CapHeading.CapHeadingSpan
-                    className="create-promotion-appliedOn"
-                    type="h4"
-                  >
-                    {formatMessage(messages.promotionTypeLineItemLevel)}
-                    <CapTooltipWithInfo
-                      title={formatMessage(promotionMessages.lineitemTooltip)}
-                    />
-                  </CapHeading.CapHeadingSpan>
-                ),
-                value: promotionType_constants?.LINE_ITEM,
-              },
-            ]}
-          />
-        </CapRow>
-      ) : (
-        ''
-      )}
-      {type === promotionType_constants?.LINE_ITEM && (
-        <CapRow
-          className={classnames(
-            'create-promotion-content-row',
-            'activate-promotion-row',
-          )}
-        >
-          <SwitchWithDivider
-            label={
-              <>
-                {formatMessage(messages.useProportions)}
-                <CapTooltip
-                  title={formatMessage(
-                    globalMessages.useProportionsTooltipText,
-                  )}
-                >
-                  <CapIcon
-                    size="s"
-                    type="info"
-                    className="use-proportions-icon"
-                  />
-                </CapTooltip>
-              </>
-            }
-            inductiveText={formatMessage(globalMessages.useProportionsDesc)}
-            isSwitchChecked={useProportions}
-            onSwitchChange={onUseProportionsChange}
-            switchStyle={{ alignItems: 'baseline' }}
-            isDivider={false}
-            className="activate-promotion-switch"
-          />
-        </CapRow>
-      )}
-      <CapRow className="create-promotion-content-row">
-        <CapHeading type="h3">
-          {formatMessage(messages.promotionDuration)}
-        </CapHeading>
-        <CapRow type="flex" align="middle">
-          <CapDateRangePicker
-            startDateId="promotion_start_date"
-            endDateId="promotion_end_date"
-            startDatePlaceholderText={formatMessage(globalMessages.startDate)}
-            endDatePlaceholderText={formatMessage(globalMessages.endDate)}
-            displayFormat={LOCALE_DATE_FORMAT}
-            onChange={onDateChange}
-            startDate={startDate ? moment(startDate) : null}
-            endDate={endDate ? moment(endDate) : null}
-            minimumNights={0}
-            isOutsideRange={isOutsideRange}
-            disabled={isDateDisabled()}
-            className="promotion-date-picker"
-          />
-          {(mode === CREATE ||
-            (mode === EDIT && formData?.promotionStatus == UPCOMING)) && (
-            <CapTooltipWithInfo
-              title={formatMessage(messages.pastDateTooltip)}
-              className="margin-l-8"
-            />
-          )}
-        </CapRow>
-        {startDate &&
-          !(
-            formData?.promotionStatus == LIVE ||
-            formData?.promotionStatus == COMPLETED
-          ) &&
-          moment(startDate).isBefore(moment(), 'day') &&
-          (!endDate || moment(endDate).isAfter(moment(), 'day')) && (
-            <CapAlert
-              message={
-                <CapRow>{formatMessage(messages.startDateInPast)}</CapRow>
-              }
-              className="margin-t-8 past-date-alert"
-            />
-          )}
-        {startDate &&
-          moment(startDate).isBefore(moment(), 'day') &&
-          (endDate && moment(endDate).isBefore(moment(), 'day')) &&
-          !(
-            formData?.promotionStatus == LIVE ||
-            formData?.promotionStatus == COMPLETED
-          ) && (
-            <CapAlert
-              message={
-                <CapRow>{formatMessage(messages.startAndEndDateInPast)}</CapRow>
-              }
-              className="margin-t-8 past-date-alert"
-            />
-          )}
-      </CapRow>
-      <CapRow className="create-promotion-content-row">
-        {isPromotionTypeEnabled && (
-          <>
-            <CapHeading type="h3">
-              {formatMessage(messages.promotionType)}
-            </CapHeading>
-            <CapRadioCard
-              disabled={mode === EDIT}
-              className="promotion-type-card-container"
-              panes={panes}
-              onChange={onRadioChange}
-              selected={promotionType}
-              value={promotionType}
-            />
-          </>
-        )}
-      </CapRow>
-      <CapButton
-        type="primary"
-        className="create-promotion-next-button lp-btn-step0-next"
-        onClick={showNext}
-        disabled={!validate()}
-        aria-label="promotion-next"
-      >
-        {formatMessage(globalMessages.next)}
-      </CapButton>
-    </CapRow>
-  );
-};
-
-CreatePromotionForm.propTypes = {
-  programData: PropTypes.object,
-  capActions: PropTypes.object,
-  className: PropTypes.string,
-  intl: intlShape.isRequired,
-  capWorkflowData: PropTypes.object,
-  onClickNext: PropTypes.func,
-  updateFormDataValue: PropTypes.func,
-  getProgramById: PropTypes.func,
-  getPointsStrategies: PropTypes.func,
-  setEventCategory: PropTypes.func,
-  formData: PropTypes.object,
-  currentProgram: PropTypes.object,
-  EMFData: PropTypes.object,
-  mode: PropTypes.string,
-  loadActivities: PropTypes.bool,
-  freezeFields: PropTypes.bool,
-  setFreezeFields: PropTypes.func,
-  timeZoneData: PropTypes.object,
-};
-
-const mapStateToProps = createStructuredSelector({
-  programData: makeSelectPrograms(),
-  capWorkflowData: makeSelectCustomerActivity(),
-  EMFData: makeSelectEMFStatus(),
-  timeZoneData: makeSelectTimeZone(),
-  userData: makeSelectCap(),
-  targetGroupData: makeSelectTargetGroups(),
-});
-
-function mapDispatchToProps(dispatch) {
-  return {
-    capActions: bindActionCreators(capActions, dispatch),
-    actions: bindActionCreators(actions, dispatch),
-  };
-}
-
-const withConnect = connect(
-  mapStateToProps,
-  mapDispatchToProps,
-);
-
-const withSaga = injectSaga({ key: 'targetPointAllocation', saga });
-const withReducer = injectReducer({ key: 'targetPointAllocation', reducer });
-
-export default withErrorBoundary(
-  compose(
-    withConnect,
-    withSaga,
-    withReducer,
-  )(withRouter(injectIntl(withStyles(CreatePromotionForm, styles)))),
-  {
-    showImage: true,
-    useStyle: true,
-  },
-);