import { Form, useActionData, useCatch, useFetcher, useLoaderData, useTransition } from "@remix-run/react"; import { IoReloadOutline } from "react-icons/io5"; import Button from "../button"; import SettingsSection from "../settings-section"; import Alert from "~/features/core/components/alert"; import useSession from "~/features/core/hooks/use-session"; import type loader from "~/features/settings/loaders/phone"; import type { SetPhoneNumberActionData } from "~/features/settings/actions/phone"; import clsx from "clsx"; export default function PhoneNumberForm() { const { twilio } = useSession(); const fetcher = useFetcher(); const transition = useTransition(); const actionData = useActionData()?.setPhoneNumber; const availablePhoneNumbers = useLoaderData().phoneNumbers; const actionSubmitted = transition.submission?.formData.get("_action"); const isCurrentFormTransition = !!actionSubmitted && ["setPhoneNumber", "refreshPhoneNumbers"].includes(actionSubmitted.toString()); const isSubmitting = isCurrentFormTransition && transition.state === "submitting"; const isSuccess = actionData?.submitted === true; const errors = actionData?.errors; const topErrorMessage = errors?.general ?? errors?.phoneNumberSid; const isError = typeof topErrorMessage !== "undefined"; const currentPhoneNumber = availablePhoneNumbers.find((phoneNumber) => phoneNumber.isCurrent === true); const hasFilledTwilioCredentials = twilio != null; if (!hasFilledTwilioCredentials) { return null; } return (
} > {isError ? (
) : null} {isSuccess ? (
) : null}
); } export function CatchBoundary() { const caught = useCatch(); return (

We failed to fetch your Twilio phone numbers. Make sure both your SID and your auth token are valid and that your Twilio account isn't suspended. {caught.data ? Related Twilio docs : null}

} /> ); }