Function RelocationPauseModal

static/gsAdmin/components/relocationPauseModal.tsx:24–105

({
  Body,
  Header,
  Footer,
  relocation,
  onSuccess,
  closeModal,
}: Props)

});

export function RelocationPauseModal({
  Body,
  Header,
  Footer,
  relocation,
  onSuccess,
  closeModal,
}: Props) {
  const currentStep = RelocationSteps[relocation.step];
  const options = Object.keys(RelocationSteps)
    .filter(
      step =>
        RelocationSteps[step as keyof typeof RelocationSteps] > currentStep &&
        step !== 'COMPLETED'
    )
    .map(step => ({value: step, label: titleCase(step)}));
  options.unshift({value: 'ASAP', label: 'As soon as possible'});

  const mutation = useMutation({
    mutationFn: (data: {atStep?: string}) =>
      fetchMutation<Relocation>({
        method: 'PUT',
        url: `/relocations/${relocation.uuid}/pause/`,
        data,
        options: {host: relocation.region.url},
      }),
    onSuccess: rawRelocation => {
      addSuccessMessage('An autopause has been scheduled for this relocation.');
      onSuccess?.(rawRelocation);
      closeModal();
    },
    onError: (error: unknown) => {
      const fallback = 'Failed to schedule pause.';
      if (!(error instanceof RequestError)) {
        addErrorMessage(fallback);
        return;
      }
      const detail = error.responseJSON?.detail;
      const message = typeof detail === 'string' ? detail : detail?.message;
      addErrorMessage(message ?? fallback);
    },
  });

  const form = useScrapsForm({
    ...defaultFormOptions,
    defaultValues: {atStep: ''},
    validators: {onDynamic: schema},
    onSubmit: ({value}) => {
      const payload: {atStep?: string} = {};
      if (value.atStep !== 'ASAP') {
        payload.atStep = value.atStep;
      }
      return mutation.mutateAsync(payload).catch(() => {});
    },
  });

  return (
    <form.AppForm form={form}>