marginTop: spacing()

in public/src/components/channelManagement/epicTests/variantEditor.tsx [67:175]
87 lines of code
3 McCabe index (conditional complexity)

        marginTop: spacing(3),
      },
    },
  }));
  return useStyles;
};

const PARAGRAPHS_MAX_LENGTH = 2000;

const BODY_DEFAULT_HELPER_TEXT = `Maximum ${PARAGRAPHS_MAX_LENGTH} characters.`;
const HIGHTLIGHTED_TEXT_DEFAULT_HELPER_TEXT = `Final sentence of body copy.`;

interface FormData {
  heading?: string;
  paragraphs: string[];
  highlightedText?: string;
  image?: Image;
  bylineWithImage?: BylineWithImage;
}

interface EpicTestVariantEditorProps {
  variant: EpicVariant;
  epicEditorConfig: EpicEditorConfig;
  onVariantChange: (updatedVariant: EpicVariant) => void;
  editMode: boolean;
  onDelete: () => void;
  onValidationChange: (isValid: boolean) => void;
}

const VariantEditor: React.FC<EpicTestVariantEditorProps> = ({
  variant,
  onVariantChange,
  editMode,
  epicEditorConfig,
  onValidationChange,
}: EpicTestVariantEditorProps) => {
  const {
    allowMultipleVariants,
    allowVariantHeader,
    allowVariantHighlightedText,
    allowVariantImageUrl,
    allowVariantCustomPrimaryCta,
    allowVariantSecondaryCta,
    allowVariantCustomSecondaryCta,
    allowVariantSeparateArticleCount,
    allowVariantTicker,
    allowVariantChoiceCards,
    allowVariantSignInLink,
    allowBylineWithImage,
    platform,
    requireVariantHeader,
    allowNewsletterSignup,
  } = epicEditorConfig;

  const classes = getUseStyles(allowMultipleVariants)();

  const templateValidator = templateValidatorForPlatform(platform);
  const lineValidator = (text: string) => templateValidator(text) ?? htmlValidator(text);

  const defaultValues: FormData = {
    heading: variant.heading,
    paragraphs: variant.paragraphs,
    highlightedText: variant.highlightedText,
    image: variant.image,
    bylineWithImage: variant.bylineWithImage,
  };

  /**
   * Only some fields are validated by the useForm here.
   * Ideally we'd combine the validated fields with the rest of the variant fields in a callback (inside the RTE Controllers below).
   * But the callback closes over the old state of `variant`, causing it to overwrite changes to non-validated fields.
   * So instead we write updates to the validated fields to the `validatedFields` state, and merge with the rest of
   * `variant` in a useEffect.
   */
  const [validatedFields, setValidatedFields] = useState<FormData>(defaultValues);
  const { handleSubmit, control, errors, trigger } = useForm<FormData>({
    mode: 'onChange',
    defaultValues,
  });

  useEffect(() => {
    trigger();
  }, []);

  useEffect(() => {
    onVariantChange({
      ...variant,
      ...validatedFields,
    });
  }, [validatedFields]);

  useEffect(() => {
    const isValid = Object.keys(errors).length === 0;
    onValidationChange(isValid);
  }, [errors.heading, errors.paragraphs, errors.highlightedText, errors.image]);

  const noHtml = platform !== 'DOTCOM';
  const htmlValidator = noHtml ? noHtmlValidator : () => undefined;

  const noCurrencyTemplate = !VALID_TEMPLATES[platform].includes(CURRENCY_TEMPLATE);
  const noCountryNameTemplate = !VALID_TEMPLATES[platform].includes(COUNTRY_NAME_TEMPLATE);
  const noArticleCountTemplate = !VALID_TEMPLATES[platform].includes(ARTICLE_COUNT_TEMPLATE);
  const noDateTemplate = !VALID_TEMPLATES[platform].includes(DATE);
  const noDayTemplate = !VALID_TEMPLATES[platform].includes(DAY_OF_THE_WEEK);

  const onCtasToggleChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
    const value = event.target.value;
    if (value === 'newsletterSignup') {
      onVariantChange({