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

package/components/organisms/LiabilitySettings/LiabilitySettings.js

@@ -1,899 +0,0 @@
-/* eslint-disable no-fallthrough */
-import React, { useState, useMemo, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import { intlShape, injectIntl } from 'react-intl';
-import classNames from 'classnames';
-
-import { compose, bindActionCreators } from 'redux';
-import { createStructuredSelector } from 'reselect';
-import { connect } from 'react-redux';
-import injectSaga from 'utils/injectSaga';
-import injectReducer from 'utils/injectReducer';
-
-import withStyles from 'utils/withStyles';
-
-import CapRow from '@capillarytech/cap-ui-library/CapRow';
-import CapLink from '@capillarytech/cap-ui-library/CapLink';
-import CapIcon from '@capillarytech/cap-ui-library/CapIcon';
-import CapInput from '@capillarytech/cap-ui-library/CapInput';
-import CapTable from '@capillarytech/cap-ui-library/CapTable';
-import CapLabel from '@capillarytech/cap-ui-library/CapLabel';
-import CapHeader from '@capillarytech/cap-ui-library/CapHeader';
-import CapButton from '@capillarytech/cap-ui-library/CapButton';
-import CapTooltip from '@capillarytech/cap-ui-library/CapTooltip';
-import CapTreeSelect from '@capillarytech/cap-ui-library/CapTreeSelect';
-import StyledVars from '@capillarytech/cap-ui-library/styled';
-
-import withErrorBoundary from 'utils/withErrorBoundary';
-
-import styles from './style';
-import messages from './messages';
-import {
-  VIEW,
-  EDIT,
-  NON_ZERO_NUMERIC_PATTERN,
-  REQUEST,
-  SUCCESS,
-  FAILURE,
-  MODE_VIEW,
-} from '../../pages/App/constants';
-import globalMessages from '../../pages/Cap/messages';
-
-import ChangeLog from '../ChangeLog';
-import InfoBanner from '../../molecules/InfoBanner';
-import AdvanceSettingScrollContainer from '../../molecules/AdvanceSettingScrollContainer';
-
-import * as actions from './actions';
-import { makeSelectLiabilitySettings } from './selectors';
-import { makeSelectPrograms, makeSelectUser } from '../../pages/Cap/selectors';
-import saga from './saga';
-import reducer from './reducer';
-import { makeSelectPromotionsDetail } from '../PromotionsDetail/selectors';
-import CustomSkeleton from '../../atoms/CustomSkeleton';
-import ErrorBoundaryWrapper from '../../molecules/ErrorBoundaryWrapper';
-import { PROMOTION } from './constants';
-import { NonEditableContainer } from '../../../global-styles';
-
-const { FONT_SIZE_M } = StyledVars;
-const type = {
-  0: 'PARTNER',
-  1: 'PROGRAM',
-};
-
-export const LiabilitySettings = ({
-  className,
-  intl: { formatMessage },
-  embeddedMode = 'PROGRAM',
-  liabilitySettings: {
-    getLiabilityOwnersStatus,
-    liabilityOwners,
-    createLiabilityOwnerSplitStatus,
-    createLiabilityOwnerStatus,
-    getLiabilityOwnersForComponentStatus,
-    liabilityOwnersForComponents,
-    getChangeLogDetailsStatus,
-    changeLogDetails,
-  } = {},
-  actions,
-  programData: { getProgramsStatus, programDetails = [] } = {},
-  currentProgramId,
-  currentPromotionId,
-  user,
-  clickedDone,
-  setClickedDone,
-  liabilitySettingsData: { ownerInfos = [] } = {},
-  setLiabilitySettings,
-  isDoneButtonDisabled,
-  setIsDoneButtonDisabled = () => {},
-  currentUserMode = '',
-}) => {
-  const [mode, setMode] = useState(VIEW);
-  const [fields, setFields] = useState([]);
-  const [programs, setPrograms] = useState([]);
-  const [liabilityOwnersData, setLiabilityOwnersData] = useState([]);
-  const [showSlideBox, setShowSlideBox] = useState(false);
-  const componentId = useMemo(
-    () => (embeddedMode === PROMOTION ? currentPromotionId : currentProgramId),
-    [currentProgramId, currentPromotionId, embeddedMode],
-  );
-  const componentIdValidation = embeddedMode === PROMOTION && !componentId;
-  let showSkeleton =
-    getLiabilityOwnersStatus === REQUEST ||
-    getLiabilityOwnersForComponentStatus === REQUEST ||
-    getChangeLogDetailsStatus === REQUEST ||
-    createLiabilityOwnerSplitStatus === REQUEST ||
-    createLiabilityOwnerStatus === REQUEST ||
-    getProgramsStatus === REQUEST;
-
-  const prgValidation =
-    getProgramsStatus === SUCCESS &&
-    Array.isArray(programDetails) &&
-    programDetails.length;
-
-  const changeLogValidationForNoData =
-    getChangeLogDetailsStatus === SUCCESS &&
-    Array.isArray(changeLogDetails) &&
-    !changeLogDetails.length;
-
-  const liabilityOwnerValidation =
-    getLiabilityOwnersStatus === SUCCESS &&
-    Array.isArray(liabilityOwners) &&
-    liabilityOwners.length;
-
-  const liabilityOwnerValidationForNoData =
-    getLiabilityOwnersStatus === SUCCESS &&
-    Array.isArray(liabilityOwners) &&
-    !liabilityOwners.length;
-
-  const liabilityOwnersForComponentValidation =
-    getLiabilityOwnersForComponentStatus === SUCCESS &&
-    Array.isArray(liabilityOwnersForComponents) &&
-    !liabilityOwnersForComponents.length;
-
-  const liabilityOwnersForComponentValidationSuccess =
-    getLiabilityOwnersForComponentStatus === SUCCESS &&
-    Array.isArray(liabilityOwnersForComponents) &&
-    liabilityOwnersForComponents.length;
-
-  const onRefreshClick = () => {
-    if (getLiabilityOwnersForComponentStatus === FAILURE)
-      actions.getLiabilityOwnersForComponent({
-        componentId: parseInt(componentId, 10),
-        componentType: 'PROGRAM',
-      });
-    if (getChangeLogDetailsStatus === FAILURE)
-      actions.getChangeLogDetails({
-        componentId: parseInt(componentId, 10),
-        componentType: 'PROGRAM',
-      });
-    if (getLiabilityOwnersStatus === FAILURE) actions.getLiabilityOwners();
-  };
-
-  const isEditMode = mode === EDIT;
-
-  const disableSave = useMemo(
-    () =>
-      isEditMode &&
-      (fields.some(
-        ({ id, percentage }) => !percentage || `${id}`.includes('temp'),
-      ) ||
-        fields.reduce(
-          (acc, { percentage }) => acc + parseInt(percentage || 0, 10),
-          0,
-        ) !== 100),
-    [fields, isEditMode],
-  );
-
-  const handleEditClick = () => {
-    setMode(EDIT);
-    if (!fields.length) {
-      handleAddLiabilityOwner();
-    }
-  };
-
-  const handleAddLiabilityOwner = () => {
-    setFields(fieldsPrevData => [
-      ...fieldsPrevData,
-      { id: `temp_${Math.random()}` },
-    ]);
-  };
-
-  const handleDiscardClick = () => {
-    if (componentIdValidation) {
-      const { id, ownerName, ownerType } = liabilityOwners.filter(
-        ({ ownerId }) => currentProgramId == ownerId,
-      )[0];
-      setFields([
-        {
-          id: `${id}`,
-          ownerName: ownerName,
-          entity: type[ownerType],
-          percentage: `${Math.round(1 * 100)}`,
-        },
-      ]);
-    } else {
-      setFields(
-        liabilityOwnersForComponents.map(
-          ({
-            liabilityOwnerId,
-            liabilityOwnerName,
-            liabilityOwnerType,
-            ratio,
-          }) => ({
-            id: `${liabilityOwnerId}`,
-            ownerName: liabilityOwnerName,
-            entity: type[liabilityOwnerType],
-            percentage: `${Math.round(ratio * 100)}`,
-          }),
-        ),
-      );
-      setMode(VIEW);
-    }
-  };
-
-  const handleSaveClick = () => {
-    setMode(VIEW);
-  };
-
-  const submitAction = () => {
-    let fieldsLocal = fields;
-    if (mode === EDIT) {
-      if (componentIdValidation) {
-        const { id, ownerName, ownerType } = liabilityOwners.filter(
-          ({ ownerId }) => currentProgramId == ownerId,
-        )[0];
-        fieldsLocal = [
-          {
-            id: `${id}`,
-            ownerName: ownerName,
-            entity: type[ownerType],
-            percentage: `${Math.round(1 * 100)}`,
-          },
-        ];
-      } else {
-        fieldsLocal = liabilityOwnersForComponents.map(
-          ({
-            liabilityOwnerId,
-            liabilityOwnerName,
-            liabilityOwnerType,
-            ratio,
-          }) => ({
-            id: `${liabilityOwnerId}`,
-            ownerName: liabilityOwnerName,
-            entity: type[liabilityOwnerType],
-            percentage: `${Math.round(ratio * 100)}`,
-          }),
-        );
-      }
-    }
-    const updatedFields = fieldsLocal.map(field => ({
-      liabilityOwnerId: field.id,
-      componentId,
-      componentType: embeddedMode,
-      createdBy: user.refID,
-      ratio: field.percentage,
-    }));
-    if (embeddedMode !== 'PROMOTION') {
-      actions.createLiabilityOwnerSplit(
-        {
-          ownerInfos: updatedFields,
-        },
-        () => {
-          if (setClickedDone) setClickedDone(false);
-        },
-      );
-    } else {
-      setLiabilitySettings({
-        ownerInfos: updatedFields,
-      });
-      if (setClickedDone) setClickedDone(false);
-    }
-  };
-
-  const openLinkInNewTab = () => setShowSlideBox(true);
-
-  useEffect(() => {
-    // API call to get all liability owners for an org
-    if (getLiabilityOwnersStatus !== SUCCESS) {
-      actions.getLiabilityOwners();
-    }
-    if (componentId) {
-      if (getLiabilityOwnersForComponentStatus !== SUCCESS) {
-        actions.getLiabilityOwnersForComponent({
-          componentId: parseInt(componentId, 10),
-          componentType: embeddedMode,
-        });
-      }
-      if (getChangeLogDetailsStatus !== SUCCESS) {
-        actions.getChangeLogDetails({
-          componentId: parseInt(componentId, 10),
-          componentType: embeddedMode,
-        });
-      }
-    }
-    return () => {
-      actions.clearData();
-      setIsDoneButtonDisabled(true);
-    };
-  }, []);
-
-  useEffect(
-    () => {
-      if (liabilityOwnerValidationForNoData) {
-        const currentProgram = programDetails?.filter(
-          program => program.id == currentProgramId,
-        )?.[0];
-        actions.createLiabilityOwner([
-          {
-            ownerId: currentProgramId,
-            ownerName: currentProgram.name,
-            ownerType: 'PROGRAM',
-          },
-        ]);
-        return;
-      }
-
-      if (
-        liabilityOwnerValidation &&
-        prgValidation &&
-        createLiabilityOwnerStatus !== REQUEST
-      ) {
-        /** Checking current program is a liability owner or not */
-        const currentProgram = programDetails?.filter(
-          program => program.id == currentProgramId,
-        )?.[0];
-        const isCurrentProgramLiabilityOwner = liabilityOwners.filter(
-          ({ ownerId }) => currentProgram.id == ownerId,
-        )?.length;
-        /** If current program not a liability owner, adding it as a liability owner */
-        if (!isCurrentProgramLiabilityOwner) {
-          actions.createLiabilityOwner([
-            {
-              ownerId: currentProgramId,
-              ownerName: currentProgram.name,
-              ownerType: 'PROGRAM',
-            },
-          ]);
-          return;
-        }
-        /** END - Checking current program is a liability owner or not - END */
-
-        /** Creating Liability Split in Edit mode if not present =>
-         *  Commenting this flow: It'll automatically add as when we create a new promotion/Program,
-         *  If it failed, Making user to add liability split manually to avoid confusion
-         * */
-        if (
-          liabilityOwnersForComponentValidation &&
-          createLiabilityOwnerSplitStatus !== REQUEST &&
-          changeLogValidationForNoData &&
-          componentId &&
-          embeddedMode !== PROMOTION
-        ) {
-          const owner = liabilityOwners?.find(
-            owner => owner.ownerId == currentProgramId,
-          );
-          actions.createLiabilityOwnerSplit({
-            ownerInfos: [
-              {
-                liabilityOwnerId: owner?.id,
-                componentId,
-                componentType: embeddedMode,
-                createdBy: user.refID,
-                ratio: 100,
-              },
-            ],
-          });
-          return;
-        }
-        /** */
-      }
-    },
-    [
-      liabilityOwnerValidation,
-      prgValidation,
-      liabilityOwnersForComponentValidation,
-      changeLogValidationForNoData,
-      currentProgramId,
-      currentPromotionId,
-      embeddedMode,
-      componentId,
-      user.refID,
-      createLiabilityOwnerStatus,
-      createLiabilityOwnerSplitStatus,
-    ],
-  );
-  useEffect(
-    () => {
-      const liabilityOwnerLocal = liabilityOwners.filter(
-        ({ ownerId }) => currentProgramId == ownerId,
-      );
-      if (
-        componentIdValidation &&
-        liabilityOwnerValidation &&
-        liabilityOwnerLocal[0] &&
-        !ownerInfos.length
-      ) {
-        const { id, ownerName, ownerType } = liabilityOwnerLocal[0];
-        setFields([
-          {
-            id: `${id}`,
-            ownerName: ownerName,
-            entity: type[ownerType],
-            percentage: `${Math.round(1 * 100)}`,
-          },
-        ]);
-      }
-      if (liabilityOwnersForComponentValidationSuccess && !ownerInfos.length) {
-        setFields(
-          liabilityOwnersForComponents.map(
-            ({
-              liabilityOwnerId,
-              liabilityOwnerName,
-              liabilityOwnerType,
-              ratio,
-            }) => ({
-              id: `${liabilityOwnerId}`,
-              ownerName: liabilityOwnerName,
-              entity: type[liabilityOwnerType],
-              percentage: `${Math.round(ratio * 100)}`,
-            }),
-          ),
-        );
-      }
-      if (
-        liabilityOwnerValidation &&
-        ownerInfos.length &&
-        embeddedMode === PROMOTION
-      ) {
-        const liabilityOwnerObject = {};
-        liabilityOwners.forEach(owner => {
-          liabilityOwnerObject[owner.id] = owner;
-        });
-        setFields(
-          ownerInfos.map(({ liabilityOwnerId, ratio }) => ({
-            id: `${liabilityOwnerId}`,
-            ownerName: liabilityOwnerObject[liabilityOwnerId].ownerName,
-            entity: type[liabilityOwnerObject[liabilityOwnerId].ownerType],
-            percentage: ratio,
-          })),
-        );
-      }
-    },
-    [
-      liabilityOwnerValidation,
-      liabilityOwnersForComponents,
-      liabilityOwnersForComponentValidationSuccess,
-    ],
-  );
-
-  useEffect(
-    () => {
-      if (liabilityOwnerValidation && prgValidation && !showSkeleton) {
-        /** Liability Owner TreeData construction */
-        const selectedItems = fields.map(item => item.id);
-        const liabilityOwnersData = {
-          PARTNER: [],
-          PROGRAM: [],
-        };
-        liabilityOwners.forEach(({ id, ownerName, ownerType }) => {
-          liabilityOwnersData[type[ownerType]].push({
-            title: ownerName,
-            key: id,
-            value: `${id}`,
-          });
-        });
-        let treeData = [];
-        switch (true) {
-          case !!liabilityOwnersData.PROGRAM.length: {
-            treeData.push({
-              key: 'program',
-              selectable: false,
-              title: formatMessage(globalMessages.program),
-              children: liabilityOwnersData.PROGRAM.map(item => ({
-                ...item,
-                disabled: selectedItems.includes(item.value),
-              })),
-            });
-          }
-          case !!liabilityOwnersData.PARTNER.length: {
-            treeData.push({
-              key: 'partner',
-              selectable: false,
-              title: formatMessage(globalMessages.partner),
-              children: liabilityOwnersData.PARTNER.map(item => ({
-                ...item,
-                disabled: selectedItems.includes(`${item.value}`),
-              })),
-            });
-          }
-        }
-        setLiabilityOwnersData(treeData);
-        /** END - Liability Owner TreeData construction - END*/
-      }
-    },
-    [
-      liabilityOwnerValidation,
-      prgValidation,
-      showSkeleton,
-      liabilityOwners,
-      fields,
-      formatMessage,
-    ],
-  );
-
-  useEffect(
-    () => {
-      // programs datas are populated in programs state
-      if (prgValidation) {
-        const programsData = programDetails.map(({ id, name }) => ({
-          title: name,
-          key: id,
-          value: `${id}`,
-        }));
-        setPrograms(programsData);
-      }
-    },
-    [prgValidation],
-  );
-
-  useEffect(
-    () => {
-      if (clickedDone && !isDoneButtonDisabled) {
-        submitAction();
-      }
-    },
-    [clickedDone, isDoneButtonDisabled],
-  );
-
-  useEffect(
-    () => {
-      if (
-        !showSkeleton &&
-        fields.length &&
-        setIsDoneButtonDisabled &&
-        embeddedMode === PROMOTION
-      ) {
-        setIsDoneButtonDisabled(false);
-      }
-    },
-    [showSkeleton, setIsDoneButtonDisabled, embeddedMode, fields],
-  );
-
-  const getColumnAttribute = (keyName, widthPercentage) => ({
-    dataIndex: keyName,
-    key: keyName,
-    width: widthPercentage,
-    title:
-      keyName === 'percentage' ? (
-        <CapHeader size="small" title={formatMessage(messages.percentage)} />
-      ) : (
-        <CapHeader
-          size="small"
-          title={
-            <div className="table-owner-name-container">
-              {formatMessage(messages.liabiltyOwner)}
-              <CapLabel type="label3">
-                {` ${formatMessage(messages.liabiltyOwnerID)}`}
-              </CapLabel>
-            </div>
-          }
-          description={formatMessage(messages.liabiltyEntity)}
-        />
-      ),
-  });
-
-  const getColumns = () => {
-    const dataColumnWidth = isEditMode ? '45%' : '50%';
-    const columns = [];
-    columns.push(getColumnAttribute('name', dataColumnWidth));
-    columns.push(getColumnAttribute('percentage', dataColumnWidth));
-    isEditMode &&
-      columns.push({
-        dataIndex: 'actionsMenu',
-        key: 'actionsMenu',
-        width: '10%',
-      });
-    return columns;
-  };
-
-  const getCustomFieldsRow = () =>
-    fields.map(({ id, ownerName, entity, percentage, autofocus }) => {
-      const hanldeEditClick = () => {
-        setFields(fields.filter(item => id !== item.id));
-      };
-
-      const handlePrecentageChange = event => {
-        if (!isNaN(event.target.value) && !event.target.value.includes('.')) {
-          setFields(
-            fields.map(item => {
-              if (id !== item.id) {
-                return {
-                  ...item,
-                  autofocus: false,
-                };
-              }
-              return {
-                ...item,
-                percentage: event.target.value,
-                autofocus: true,
-              };
-            }),
-          );
-        }
-      };
-
-      const handleOwnerNameSelect = (_value, _label, extra) => {
-        setFields(
-          fields.map(item => {
-            if (id !== item.id) {
-              return item;
-            }
-            const { title, value } = extra?.triggerNode?.props || {};
-            return {
-              ...item,
-              id: value,
-              ownerName: title,
-              entity: programs.some(item => item.value === value)
-                ? 'PROGRAM'
-                : 'PARTNER',
-            };
-          }),
-        );
-      };
-
-      return {
-        key: id,
-        name: isEditMode ? (
-          <CapTreeSelect
-            showSearch
-            value={`${id}`.includes('temp') ? undefined : id}
-            size="large"
-            treeNodeLabelProp="title"
-            dropdownMatchSelectWidth
-            style={{ width: '100%' }}
-            treeData={liabilityOwnersData || []}
-            onChange={handleOwnerNameSelect}
-            searchPlaceholder={formatMessage(globalMessages.search)}
-            placeholder={formatMessage(messages.selectLiabiltyOwner)}
-            notFoundContent={formatMessage(globalMessages.noResultsFound)}
-          />
-        ) : (
-          <CapHeader
-            size="label1"
-            title={
-              <div className="table-owner-name-container">
-                {ownerName}
-                <CapLabel type="label3" style={{ fontSize: FONT_SIZE_M }}>
-                  {` (${id})`}
-                </CapLabel>
-              </div>
-            }
-            description={
-              <span style={{ fontSize: FONT_SIZE_M }}>
-                {formatMessage(
-                  entity === 'PROGRAM'
-                    ? globalMessages.program
-                    : globalMessages.partner,
-                )}
-              </span>
-            }
-          />
-        ),
-        percentage: isEditMode ? (
-          <CapInput
-            value={percentage}
-            style={{ width: '100%' }}
-            onChange={handlePrecentageChange}
-            pattern={NON_ZERO_NUMERIC_PATTERN}
-            placeholder={formatMessage(globalMessages.enterValue)}
-            autoFocus={autofocus}
-          />
-        ) : (
-          <CapHeader size="label1" title={percentage} />
-        ),
-        actionsMenu: (
-          <CapTooltip title={formatMessage(globalMessages.delete)}>
-            <CapIcon size="s" onClick={hanldeEditClick} type="delete" />
-          </CapTooltip>
-        ),
-      };
-    });
-
-  const tableProps = {
-    columns: getColumns(),
-    dataSource: getCustomFieldsRow(),
-    rowKey: 'id',
-    id: 'liability-settings-table',
-    style: { cursor: 'pointer' },
-    scroll: {
-      y: window.innerHeight - 400,
-    },
-    locale: {
-      emptyText: formatMessage(globalMessages.noData),
-    },
-    pagination: false,
-    infinteScroll: false,
-    showLoader: false,
-    className: 'pointer-cursor',
-  };
-
-  const LiabilitySettingsComponent = () => (
-    <CapRow className="liability-settings">
-      <CapRow type="flex" justify="space-between">
-        <NonEditableContainer
-          className={classNames({
-            'disable-cursor': currentUserMode === MODE_VIEW,
-          })}
-        >
-          {embeddedMode === 'PROGRAM' ? (
-            <CapHeader
-              size="label"
-              className="liability-settings-header"
-              title={formatMessage(messages.liabilitySettingsTitle)}
-              description={formatMessage(messages.liabilitySettingsDesc)}
-            />
-          ) : (
-            <CapHeader
-              size="regular"
-              className="liability-settings-header"
-              title={formatMessage(messages.liabilitySplitAllocatedPoints)}
-            />
-          )}
-        </NonEditableContainer>
-
-        <CapRow
-          type="flex"
-          align="middle"
-          justify="end"
-          className="action-button-container"
-        >
-          <CapLink
-            className="change-log-link"
-            title={
-              <div className="change-log-button-container">
-                {formatMessage(messages.viewChangeLog)}
-              </div>
-            }
-            onClick={openLinkInNewTab}
-          />
-          <NonEditableContainer
-            className={classNames({
-              'disable-cursor': currentUserMode === MODE_VIEW,
-            })}
-          >
-            {isEditMode ? (
-              <CapButton type="secondary" onClick={handleAddLiabilityOwner}>
-                {formatMessage(messages.addLiabilityOwner)}
-              </CapButton>
-            ) : (
-              <CapButton
-                className="liability-edit-button"
-                onClick={handleEditClick}
-              >
-                <div className="edit-button-container">
-                  <CapIcon
-                    size="s"
-                    type="edit"
-                    className="action-button-edit-icon"
-                  />
-                  {formatMessage(globalMessages.edit)}
-                </div>
-              </CapButton>
-            )}
-          </NonEditableContainer>
-        </CapRow>
-      </CapRow>
-      <NonEditableContainer
-        className={classNames({
-          'disable-cursor': currentUserMode === MODE_VIEW,
-        })}
-      >
-        {isEditMode && (
-          <InfoBanner
-            iconType="info"
-            className="liability-settings-info-note"
-            title={`${formatMessage(globalMessages.note)}: `}
-            description={formatMessage(messages.sumOfPercentNote)}
-          />
-        )}
-
-        <CapTable {...tableProps} />
-
-        {isEditMode && (
-          <CapRow
-            type="flex"
-            align="middle"
-            className="table-action-button-container"
-          >
-            <CapButton
-              type="secondary"
-              className="discard-button"
-              onClick={handleDiscardClick}
-            >
-              {formatMessage(globalMessages.discard)}
-            </CapButton>
-            <CapButton onClick={handleSaveClick} disabled={disableSave}>
-              {formatMessage(globalMessages.save)}
-            </CapButton>
-          </CapRow>
-        )}
-      </NonEditableContainer>
-    </CapRow>
-  );
-
-  return (
-    <ErrorBoundaryWrapper
-      isApiErrorBoundary
-      onRefreshClick={onRefreshClick}
-      isApiError={
-        getLiabilityOwnersForComponentStatus === FAILURE ||
-        getLiabilityOwnersStatus === FAILURE ||
-        createLiabilityOwnerStatus === FAILURE ||
-        getChangeLogDetailsStatus === FAILURE
-      }
-    >
-      <CapRow style={{ width: 'inherit' }}>
-        {showSkeleton || createLiabilityOwnerSplitStatus === REQUEST ? (
-          <CapRow
-            className={classNames(className, 'liability-settings-skeleton')}
-          >
-            <CustomSkeleton isTitle height="60vh" />
-          </CapRow>
-        ) : embeddedMode === 'PROGRAM' ? (
-          <AdvanceSettingScrollContainer
-            className={className}
-            onSaveClick={submitAction}
-            isSaveDisabled={disableSave || currentUserMode === MODE_VIEW}
-            buttonId="loyalty-advanced-liability-save-button"
-            buttonClassName="lp-btn-config-liability"
-          >
-            <LiabilitySettingsComponent />
-          </AdvanceSettingScrollContainer>
-        ) : (
-          <CapRow className={className}>
-            <LiabilitySettingsComponent />
-          </CapRow>
-        )}
-        {showSlideBox && (
-          <ChangeLog
-            showSlideBox={showSlideBox}
-            setShowSlideBox={setShowSlideBox}
-            changeLogDetails={changeLogDetails}
-            liabilityOwners={liabilityOwners}
-            getLiabilityOwnersStatus={getLiabilityOwnersStatus}
-          />
-        )}
-      </CapRow>
-    </ErrorBoundaryWrapper>
-  );
-};
-
-LiabilitySettings.propTypes = {
-  className: PropTypes.string,
-  intl: intlShape.isRequired,
-  liabilitySettings: PropTypes.object,
-  actions: PropTypes.object,
-  programData: PropTypes.object,
-  currentProgramId: PropTypes.string,
-  user: PropTypes.object,
-  embeddedMode: PropTypes.string,
-  currentPromotionId: PropTypes.string,
-  clickedDone: PropTypes.bool,
-  setClickedDone: PropTypes.func,
-  isDoneButtonDisabled: PropTypes.bool,
-  setIsDoneButtonDisabled: PropTypes.func,
-  currentUserMode: PropTypes.string,
-};
-
-const mapStateToProps = createStructuredSelector({
-  liabilitySettings: makeSelectLiabilitySettings(),
-  programData: makeSelectPrograms(),
-  user: makeSelectUser(),
-  promotionData: makeSelectPromotionsDetail(),
-});
-
-function mapDispatchToProps(dispatch) {
-  return {
-    actions: bindActionCreators(actions, dispatch),
-  };
-}
-
-const withConnect = connect(
-  mapStateToProps,
-  mapDispatchToProps,
-);
-
-const withSaga = injectSaga({ key: 'liabilitySettings', saga });
-const withReducer = injectReducer({ key: 'liabilitySettings', reducer });
-
-export default withErrorBoundary(
-  compose(
-    withSaga,
-    withReducer,
-    withConnect,
-  )(injectIntl(withStyles(LiabilitySettings, styles))),
-  {
-    showImage: true,
-    useStyle: true,
-  },
-);