litmus-fe/src/pages/CreateExperiment/AddVariantForm.tsx

import React from 'react';
import { useFormikContext } from 'formik';
import BorderedInput from '@navi/web-ui/lib/primitives/BorderedInput';
import Typography from '@navi/web-ui/lib/primitives/Typography';
import Button from '@navi/web-ui/lib/primitives/Button';
import DeleteIcon from '@navi/web-ui/lib/icons/DeleteIcon';
import { StickinessDropDownList } from '../../utils/constants';
import {
  AddVariantFormProps,
  ConfigRequirements,
  Variant,
} from '../../utils/interface';
import styles from './CreateExperiment.module.scss';
import commonStyles from '../Common.module.scss';
import DropDownSelect from '../../components/DropDownSelect';
import { StickinessType } from '../../utils/enums';

const AddVariantForm = (props: AddVariantFormProps) => {
  const { isUpdateFlow } = props;
  const { handleChange, values, setFieldValue } =
    useFormikContext<ConfigRequirements>() || {};

  const { variants } = values;

  const deleteVariant = (i: number) => {
    setFieldValue(
      'variants',
      variants.filter((item: Variant, index: number) => index !== i),
    );
  };

  const isCustomStickiness = (stickiness: string) => {
    return stickiness
      ? !StickinessDropDownList?.find((item) => item.value === stickiness)
      : false;
  };

  return (
    <div>
      <div
        className={
          styles[
            isUpdateFlow
              ? 'update-variant-form-wrapper'
              : 'variant-form-wrapper'
          ]
        }
      >
        {!isUpdateFlow && (
          <Typography
            variant="p3"
            style={{ padding: '0 24px 12px 24px', fontWeight: '500' }}
          >
            Variants
          </Typography>
        )}

        {variants?.map((variant: Variant, index: number) => (
          <>
            <div className={styles['variant-form']}>
              <div className={styles['experiment-form']}>
                <Typography
                  variant="p3"
                  className={`${commonStyles.label} ${commonStyles['segmentation-label']}`}
                >
                  Variant Details
                </Typography>
                <div className={styles['variant-detail']}>
                  <BorderedInput
                    inputSize="medium"
                    placeholder="Variant name"
                    name={`variants[${index}].name`}
                    onChange={handleChange}
                    value={variant?.name}
                    containerClassName={styles['width-100']}
                  />
                  <BorderedInput
                    inputSize="medium"
                    name={`variants[${index}].weight`}
                    onChange={handleChange}
                    value={variant?.weight}
                    type="number"
                    min={0}
                    max={100}
                    onBlur={() => {
                      const variantWeight = variant?.weight;
                      if (variantWeight < 0 || variantWeight > 100) {
                        const newValue = variantWeight < 0 ? 0 : 100;
                        setFieldValue(`variants[${index}].weight`, newValue);
                      }
                    }}
                    containerClassName={`${styles['percentage-input']} ${styles['width-80']}`}
                  />
                </div>
                <DropDownSelect
                  label="Stickiness"
                  name={`variants[${index}].stickiness`}
                  placeHolder="Select Stickiness"
                  className={commonStyles['custom-dropdown']}
                  itemList={StickinessDropDownList}
                  onChange={handleChange}
                  value={
                    isCustomStickiness(variant?.stickiness)
                      ? StickinessType.CUSTOM
                      : variant?.stickiness
                  }
                  width="100%"
                />
                {(variant?.stickiness === StickinessType.CUSTOM ||
                  (variant?.stickiness &&
                    isCustomStickiness(variant?.stickiness))) && (
                  <BorderedInput
                    inputLabel="Custom Stickiness name"
                    inputSize="medium"
                    placeholder="Stickiness name"
                    name={`variants[${index}].customStickinessName`}
                    onChange={handleChange}
                    value={
                      isCustomStickiness(variant?.stickiness)
                        ? variant?.stickiness
                        : variant?.customStickinessName
                    }
                    containerClassName={commonStyles['custom-borderd-input']}
                  />
                )}

                <div className={styles['payload-wrapper']}>
                  <BorderedInput
                    inputLabel="Payload Type"
                    inputSize="medium"
                    placeholder="Paylaod Type"
                    name={`variants[${index}].payload.type`}
                    onChange={handleChange}
                    value={variant?.payload?.type}
                    containerClassName={commonStyles['custom-borderd-input']}
                  />
                  <BorderedInput
                    inputLabel="Payload Value"
                    inputSize="medium"
                    placeholder="Paylaod Value"
                    name={`variants[${index}].payload.value`}
                    onChange={handleChange}
                    value={variant?.payload?.value}
                    containerClassName={commonStyles['custom-borderd-input']}
                  />
                </div>
                <div className={styles['payload-wrapper']}>
                  <BorderedInput
                    inputLabel="Overrides Name"
                    inputSize="medium"
                    placeholder="Overrides Name"
                    name={`variants[${index}].overrides[0].contextName`}
                    onChange={handleChange}
                    value={variant?.overrides[0]?.contextName}
                    containerClassName={commonStyles['custom-borderd-input']}
                  />
                  <BorderedInput
                    inputLabel="Overrides Value"
                    inputSize="medium"
                    placeholder="Overrides Value"
                    name={`variants[${index}].overrides[0].values`}
                    onChange={handleChange}
                    value={variant?.overrides[0]?.values}
                    containerClassName={commonStyles['custom-borderd-input']}
                    hintMsg="Please add values comma separated"
                  />
                </div>
              </div>
              <div
                className={styles['delete-btn']}
                onClick={() => deleteVariant(index)}
              >
                <span>
                  <DeleteIcon
                    color="#0276FE"
                    height={12}
                    width={12}
                    style={{ marginRight: '4px' }}
                  />
                  Delete
                </span>
              </div>
            </div>

            <hr className={styles['horizontal-line']} />
          </>
        ))}
        <div className={styles['variants-wrapper']}>
          <Button
            variant="text"
            onClick={() =>
              setFieldValue('variants', [
                ...(!variants ? [] : variants),
                {
                  name: '',
                  weight: 0,
                  stickiness: '',
                  payload: {},
                  overrides: [],
                },
              ])
            }
          >
            + Add Variant
          </Button>
        </div>
      </div>
    </div>
  );
};

export default AddVariantForm;