marginTop: spacing()

in public/src/components/channelManagement/supportLandingPage/productsEditor.tsx [29:138]
98 lines of code
2 McCabe index (conditional complexity)

      marginTop: spacing(3),
    },
  },
  benefitsHeading: {
    fontWeight: 700,
  },
  deleteButton: {
    height: '100%',
  },
}));

const buildBenefitsHeading = (product: keyof Products) => {
  if (product === 'TierThree') {
    return 'Benefits (in addition to Supporter Plus benefits):';
  } else {
    return 'Benefits:';
  }
};

interface ProductEditorProps {
  editMode: boolean;
  productKey: keyof Products;
  product: LandingPageProductDescription;
  onProductChange: (updatedProduct: LandingPageProductDescription) => void;
  onValidationChange: (isValid: boolean) => void;
}

export const ProductEditor: React.FC<ProductEditorProps> = ({
  editMode,
  productKey,
  product,
  onProductChange,
  onValidationChange,
}: ProductEditorProps) => {
  const classes = useStyles();

  // Validation for this product as a whole
  const { control, handleSubmit, errors, register, reset } = useForm<LandingPageProductDescription>(
    {
      mode: 'onChange',
      defaultValues: product,
    },
  );

  // Validation specifically for the benefits array
  const { fields: benefits, append, remove } = useFieldArray({
    control,
    name: 'benefits',
  });

  useEffect(() => {
    const isValid = Object.keys(errors).length === 0;
    onValidationChange(isValid);
  }, [errors.title, errors.cta, errors.label, errors.benefits]);

  useEffect(() => {
    reset(product);
  }, [product, reset]);

  return (
    <Accordion key={productKey}>
      <AccordionSummary expandIcon={<ExpandMoreIcon />}>
        <Typography variant="h6">{productKey}</Typography>
      </AccordionSummary>
      <AccordionDetails className={classes.accordionDetails}>
        <TextField
          inputRef={register({ required: EMPTY_ERROR_HELPER_TEXT })}
          error={!!errors.title}
          helperText={errors?.title?.message}
          label="Title"
          name="title"
          required={true}
          onBlur={handleSubmit(onProductChange)}
          disabled={!editMode}
          fullWidth
        />
        <TextField
          inputRef={register({ required: EMPTY_ERROR_HELPER_TEXT })}
          error={!!errors.cta?.copy}
          helperText={errors?.cta?.copy?.message}
          label="CTA Copy"
          name="cta.copy"
          required={true}
          onBlur={handleSubmit(onProductChange)}
          disabled={!editMode}
          fullWidth
        />
        <TextField
          inputRef={register({
            validate: copyLengthValidator(30),
          })}
          error={!!errors.label?.copy}
          helperText={errors?.label?.copy?.message}
          label="Pill (optional)"
          name="label.copy"
          onBlur={handleSubmit(onProductChange)}
          disabled={!editMode}
          fullWidth
        />

        <div className={classes.benefitsHeading}>{buildBenefitsHeading(productKey)}</div>

        {benefits.map((benefit, index) => (
          <Grid container columns={9} spacing={1} key={benefit.id}>
            <Grid item xs={3}>
              <TextField
                label="Benefit Copy"
                required={true}
                name={`benefits[${index}].copy`}
                inputRef={register({