marginTop: spacing()

in public/src/components/channelManagement/headerTests/headerTestVariantEditor.tsx [38:143]

• 69 lines of code
• 8 McCabe index (conditional complexity)

      marginTop: spacing(3),
    },
  },
  contentContainer: {
    marginLeft: spacing(2),
  },
  buttonsContainer: {
    marginTop: spacing(2),
    marginLeft: spacing(2),
  },
}));

const HEADING_COPY_RECOMMENDED_LENGTH = 50;
const SUBHEADING_COPY_RECOMMENDED_LENGTH = 50;

type DeviceType = 'ALL' | 'MOBILE' | 'NOT_MOBILE';

const getLabelSuffix = (deviceType: DeviceType): string => {
  switch (deviceType) {
    case 'MOBILE':
      return ' (mobile only)';
    case 'NOT_MOBILE':
      return ' (tablet + desktop)';
    default:
      return ' (all devices)';
  }
};

interface HeaderTestVariantContentEditorProps {
  content: HeaderContent;
  onChange: (updatedContent: HeaderContent) => void;
  onValidationChange: (isValid: boolean) => void;
  editMode: boolean;
  deviceType: DeviceType;
}

const HeaderTestVariantContentEditor: React.FC<HeaderTestVariantContentEditorProps> = ({
  content,
  onChange,
  onValidationChange,
  editMode,
  deviceType,
}: HeaderTestVariantContentEditorProps) => {
  const classes = useStyles();

  const templateValidator = templateValidatorForPlatform('DOTCOM');

  const defaultValues: HeaderContent = {
    heading: content.heading || '',
    subheading: content.subheading || '',
  };

  const { register, handleSubmit, errors, trigger } = useForm<HeaderContent>({
    mode: 'onChange',
    defaultValues,
  });

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

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

  const onSubmit = ({ heading, subheading }: HeaderContent): void => {
    onChange({ ...content, heading, subheading });
  };

  const updatePrimaryCta = (updatedCta?: Cta): void => {
    onChange({ ...content, primaryCta: updatedCta });
  };
  const updateSecondaryCta = (updatedCta?: Cta): void => {
    onChange({ ...content, secondaryCta: updatedCta });
  };

  const labelSuffix = getLabelSuffix(deviceType);

  const headingCopyLength = content.heading?.length ?? 0;
  const subheadingCopyLength = content.subheading?.length ?? 0;

  return (
    <>
      {deviceType !== 'MOBILE' && (
        <>
          <Typography className={classes.sectionHeader} variant="h4">
            {`Content${labelSuffix}`}
          </Typography>

          <div className={classes.contentContainer}>
            <div>
              <TextField
                inputRef={register({ validate: templateValidator })}
                error={errors.heading !== undefined}
                helperText={errors.heading ? errors.heading.message : ''}
                onBlur={handleSubmit(onSubmit)}
                name="heading"
                label="Heading"
                margin="normal"
                variant="outlined"
                disabled={!editMode}
                fullWidth
              />

              {headingCopyLength > HEADING_COPY_RECOMMENDED_LENGTH && (