Building an "Add Destination" connection form

{
  "recipient_id": "1abc234d-efg5-6h7i-j8k9-012345lm6nop",
  "destination": <destination_object>,
  "application_origin": "app.example.co"
}

{
  "scoped_token": "eyJhb..."
}

export type FetchAuthToken = () => Promise<string>;
export type FetchAuthTokenWithDestination = (d: PreparedDestination) => Promise<string>;

const fetchToken: (d: PreparedDestination) => Promise<string> = (destination) =>
  fetch(`https://api.example.co/generate-auth-token`, {
    method: "POST",
    headers: {
      "Content-Type": "application/json"
    },
    body: {},
  })
    .then((response: Response) => response.json())
    .then((body) => body.scoped_token)
    .catch((reason) => {
      console.error(reason);
  });

const fetchTokenWithDestination: (d: PreparedDestination) => Promise<string> = (destination) =>
  fetch(`https://api.example.co/generate-auth-token`, {
    method: "POST",
    headers: {
      "Content-Type": "application/json"
    },
    body: JSON.stringify(destination),
  })
    .then((response: Response) => response.json())
    .then((body) => body.scoped_token)
    .catch((reason) => {
      console.error(reason);
  });

npm install @prequel/react@latest

const DestinationForm = () => {
  const formRef = useRef<HTMLFormElement>(null);
  const [destination, setDestination] = useDestination({
    name: "Customer A Snowflake Destination", // Readable name for the destination
  });
  const destinationForm = useDestinationForm(
    destination,
    PREQUEL_ORG_ID,                 // the UUID for your organization in Prequel
    {
      includeInternalFields: true,  // Optional (default false): hide any non-user facing fields like "name"
      host: PREQUEL_HOST,           // Optional (default api.prequel.co): the host url of your Prequel API
      vendorQuery: "snowflake"      // Optional (default undefined): vendor to filter the form to
    }
  );
  const createDestination = useCreateDestination(
    fetchTokenWithDestination,  // the fetchToken function you created in step 2
    "app.example.co",           // the origin of your React app (used to allow CORS)
    PREQUEL_HOST                // Optional (default api.prequel.co): the host url of your Prequel API
  );

  // This is the PreparedDestination you can pass to testConnection and createDestination
  const preparedDestination = useMemo(
    () => prepareDestinationWithForm(destination, destinationForm),
    [destination, destinationForm]
  );

  if (!destinationForm) {
    return (
      <div className="d-flex justify-content-center">
        <Spinner animation="border" role="status">
          <span className="visually-hidden">Loading...</span>
        </Spinner>
      </div>
    );
  }

  return (
    <Form ref={formRef} className="d-flex flex-column" onSubmit={onSubmit}>
      {destinationForm.map((section) => (
        <Fragment key={section.id}>
          <Form.Group>
        		{/* Render the section title and subtitle... */}
            {section.fields.map((field) => {
              {/* Render the field... */}
            })}
          </Form.Group>
        </Fragment>
      ))}
      <Button type="submit">Submit form</Button>
    </Form>
  );
}

const TestConnectionComponent = ({ preparedDestination }) => {
	const [testRunning, setTestRunning] = useState(false);
  const [testResult, setTestResult] = useState<string | null>(null);
  const testConnection = useTestConnection(
    fetchTokenWithDestination,  // the fetchToken function you created in step 2
    "app.example.co",           // the origin of your React app (used to allow CORS)
    PREQUEL_HOST                // the host url of your Prequel API
  );

  async function testDestinationConnection() {
    setTestRunning(true);
    setTestResult("Testing new connection...");
    const { data, message } = await testConnection(preparedDestination);
    if (data?.status === "success") {
      setTestResult("Connection test successful.");
    } else {
      setTestResult(message);
    }
    setTestRunning(false);
  }

  return (
    <div>
    {/* Render connection information as desired... */}
    </div>
  )
}