2022-04-29 14:53:28 +02:00
|
|
|
import React, { useRef, useState, useContext } from 'react';
|
2022-05-02 15:52:41 +02:00
|
|
|
import { Button } from '@mui/material';
|
|
|
|
import { Add } from '@mui/icons-material';
|
2022-05-02 12:52:33 +02:00
|
|
|
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
|
2022-03-29 09:30:57 +02:00
|
|
|
import PermissionButton from 'component/common/PermissionButton/PermissionButton';
|
|
|
|
import { SidebarModal } from 'component/common/SidebarModal/SidebarModal';
|
|
|
|
import { CreateUnleashContext } from 'component/context/CreateUnleashContext/CreateUnleashContext';
|
2022-04-29 14:53:28 +02:00
|
|
|
import {
|
|
|
|
CREATE_CONTEXT_FIELD,
|
|
|
|
CREATE_SEGMENT,
|
|
|
|
UPDATE_SEGMENT,
|
|
|
|
} from 'component/providers/AccessProvider/permissions';
|
2022-03-29 09:30:57 +02:00
|
|
|
import useUnleashContext from 'hooks/api/getters/useUnleashContext/useUnleashContext';
|
|
|
|
import { IConstraint } from 'interfaces/strategy';
|
2022-05-05 13:42:18 +02:00
|
|
|
import { useNavigate } from 'react-router-dom';
|
2022-03-29 09:30:57 +02:00
|
|
|
import { useStyles } from 'component/segments/SegmentFormStepTwo/SegmentFormStepTwo.styles';
|
|
|
|
import {
|
|
|
|
ConstraintAccordionList,
|
|
|
|
IConstraintAccordionListRef,
|
|
|
|
} from 'component/common/ConstraintAccordion/ConstraintAccordionList/ConstraintAccordionList';
|
2022-04-29 14:53:28 +02:00
|
|
|
import { SegmentFormStep, SegmentFormMode } from '../SegmentForm/SegmentForm';
|
2022-03-29 09:30:57 +02:00
|
|
|
import {
|
|
|
|
AutocompleteBox,
|
|
|
|
IAutocompleteBoxOption,
|
|
|
|
} from 'component/common/AutocompleteBox/AutocompleteBox';
|
2022-04-07 14:47:24 +02:00
|
|
|
import {
|
|
|
|
SegmentDocsValuesWarning,
|
|
|
|
SegmentDocsValuesError,
|
|
|
|
} from 'component/segments/SegmentDocs/SegmentDocs';
|
|
|
|
import { useSegmentValuesCount } from 'component/segments/hooks/useSegmentValuesCount';
|
2022-04-29 14:53:28 +02:00
|
|
|
import AccessContext from 'contexts/AccessContext';
|
2022-06-02 10:58:55 +02:00
|
|
|
import { useSegmentLimits } from 'hooks/api/getters/useSegmentLimits/useSegmentLimits';
|
2022-03-29 09:30:57 +02:00
|
|
|
|
|
|
|
interface ISegmentFormPartTwoProps {
|
|
|
|
constraints: IConstraint[];
|
|
|
|
setConstraints: React.Dispatch<React.SetStateAction<IConstraint[]>>;
|
|
|
|
setCurrentStep: React.Dispatch<React.SetStateAction<SegmentFormStep>>;
|
2022-04-29 14:53:28 +02:00
|
|
|
mode: SegmentFormMode;
|
2022-03-29 09:30:57 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
export const SegmentFormStepTwo: React.FC<ISegmentFormPartTwoProps> = ({
|
|
|
|
children,
|
|
|
|
constraints,
|
|
|
|
setConstraints,
|
|
|
|
setCurrentStep,
|
2022-04-29 14:53:28 +02:00
|
|
|
mode,
|
2022-03-29 09:30:57 +02:00
|
|
|
}) => {
|
|
|
|
const constraintsAccordionListRef = useRef<IConstraintAccordionListRef>();
|
2022-05-05 13:42:18 +02:00
|
|
|
const navigate = useNavigate();
|
2022-04-29 14:53:28 +02:00
|
|
|
const { hasAccess } = useContext(AccessContext);
|
2022-05-02 15:52:41 +02:00
|
|
|
const { classes: styles } = useStyles();
|
2022-03-29 09:30:57 +02:00
|
|
|
const { context = [] } = useUnleashContext();
|
|
|
|
const [open, setOpen] = useState(false);
|
2022-04-07 14:47:24 +02:00
|
|
|
const segmentValuesCount = useSegmentValuesCount(constraints);
|
2022-04-29 14:53:28 +02:00
|
|
|
const modePermission = mode === 'create' ? CREATE_SEGMENT : UPDATE_SEGMENT;
|
2022-06-02 10:58:55 +02:00
|
|
|
const { segmentValuesLimit } = useSegmentLimits();
|
|
|
|
|
|
|
|
const overSegmentValuesLimit: boolean = Boolean(
|
|
|
|
segmentValuesLimit && segmentValuesCount > segmentValuesLimit
|
|
|
|
);
|
2022-03-29 09:30:57 +02:00
|
|
|
|
|
|
|
const autocompleteOptions = context.map(c => ({
|
|
|
|
value: c.name,
|
|
|
|
label: c.name,
|
|
|
|
}));
|
|
|
|
|
|
|
|
const onChange = ([option]: IAutocompleteBoxOption[]) => {
|
|
|
|
constraintsAccordionListRef.current?.addConstraint?.(option.value);
|
|
|
|
};
|
|
|
|
|
|
|
|
return (
|
2022-04-07 14:47:24 +02:00
|
|
|
<>
|
|
|
|
<div className={styles.form}>
|
|
|
|
<div className={styles.warning}>
|
|
|
|
<SegmentDocsValuesWarning />
|
|
|
|
</div>
|
2022-03-29 09:30:57 +02:00
|
|
|
<div>
|
|
|
|
<p className={styles.inputDescription}>
|
|
|
|
Select the context fields you want to include in the
|
|
|
|
segment.
|
|
|
|
</p>
|
|
|
|
<p className={styles.inputDescription}>
|
|
|
|
Use a predefined context field:
|
|
|
|
</p>
|
|
|
|
<AutocompleteBox
|
|
|
|
label="Select a context"
|
|
|
|
options={autocompleteOptions}
|
|
|
|
onChange={onChange}
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
<div className={styles.addContextContainer}>
|
|
|
|
<p className={styles.inputDescription}>
|
|
|
|
...or add a new context field:
|
|
|
|
</p>
|
|
|
|
<SidebarModal
|
|
|
|
label="Create new context"
|
|
|
|
onClose={() => setOpen(false)}
|
|
|
|
open={open}
|
|
|
|
>
|
|
|
|
<CreateUnleashContext
|
|
|
|
onSubmit={() => setOpen(false)}
|
|
|
|
onCancel={() => setOpen(false)}
|
|
|
|
modal
|
|
|
|
/>
|
|
|
|
</SidebarModal>
|
|
|
|
<PermissionButton
|
|
|
|
permission={CREATE_CONTEXT_FIELD}
|
2022-05-12 15:34:04 +02:00
|
|
|
variant="outlined"
|
|
|
|
color="primary"
|
2022-03-29 09:30:57 +02:00
|
|
|
startIcon={<Add />}
|
|
|
|
onClick={() => setOpen(true)}
|
|
|
|
>
|
|
|
|
Add context field
|
|
|
|
</PermissionButton>
|
2022-04-07 14:47:24 +02:00
|
|
|
{overSegmentValuesLimit && (
|
|
|
|
<div className={styles.error}>
|
|
|
|
<SegmentDocsValuesError
|
|
|
|
values={segmentValuesCount}
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
)}
|
2022-03-29 09:30:57 +02:00
|
|
|
</div>
|
|
|
|
<ConditionallyRender
|
|
|
|
condition={constraints.length === 0}
|
|
|
|
show={
|
|
|
|
<div className={styles.noConstraintText}>
|
|
|
|
<p className={styles.subtitle}>
|
|
|
|
Start adding context fields by selecting an
|
|
|
|
option from above, or you can create a new
|
|
|
|
context field and use it right away
|
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
}
|
|
|
|
/>
|
|
|
|
<div className={styles.constraintContainer}>
|
|
|
|
<ConstraintAccordionList
|
|
|
|
ref={constraintsAccordionListRef}
|
|
|
|
constraints={constraints}
|
2022-04-29 14:53:28 +02:00
|
|
|
setConstraints={
|
|
|
|
hasAccess(modePermission)
|
|
|
|
? setConstraints
|
|
|
|
: undefined
|
|
|
|
}
|
2022-03-29 09:30:57 +02:00
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div className={styles.buttonContainer}>
|
|
|
|
<Button
|
|
|
|
type="button"
|
|
|
|
onClick={() => setCurrentStep(1)}
|
|
|
|
className={styles.backButton}
|
|
|
|
>
|
|
|
|
Back
|
|
|
|
</Button>
|
|
|
|
{children}
|
|
|
|
<Button
|
|
|
|
type="button"
|
|
|
|
className={styles.cancelButton}
|
|
|
|
onClick={() => {
|
2022-05-05 13:42:18 +02:00
|
|
|
navigate('/segments');
|
2022-03-29 09:30:57 +02:00
|
|
|
}}
|
|
|
|
>
|
|
|
|
Cancel
|
|
|
|
</Button>
|
|
|
|
</div>
|
2022-04-07 14:47:24 +02:00
|
|
|
</>
|
2022-03-29 09:30:57 +02:00
|
|
|
);
|
|
|
|
};
|