mythic-insight/calcom
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 5

Booking page improvements (#2260)

Browse source 
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
This commit is contained in:
Omar López 2022-03-23 19:27:35 -07:00 committed by GitHub
parent 87dcdec044
commit 1a27edd462
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 10 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
apps/web/components/booking/pages/BookingPage.tsx
View file

@ -6,13 +6,13 @@ import { useSession } from "next-auth/react";
import dynamic from "next/dynamic"; import dynamic from "next/dynamic";
import Head from "next/head"; import Head from "next/head";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import React, { useEffect, useMemo, useState } from "react"; import { useEffect, useMemo, useState } from "react";
import { Controller, useForm, useWatch } from "react-hook-form"; import { Controller, useForm, useWatch } from "react-hook-form";
import { FormattedNumber, IntlProvider } from "react-intl"; import { FormattedNumber, IntlProvider } from "react-intl";
import { ReactMultiEmail } from "react-multi-email"; import { ReactMultiEmail } from "react-multi-email";
import { useMutation } from "react-query"; import { useMutation } from "react-query";
import { v4 as uuidv4 } from "uuid";
import { HttpError } from "@calcom/lib/http-error";
import { createPaymentLink } from "@calcom/stripe/client"; import { createPaymentLink } from "@calcom/stripe/client";
import { Button } from "@calcom/ui/Button"; import { Button } from "@calcom/ui/Button";
import { EmailInput, Form } from "@calcom/ui/form/fields"; import { EmailInput, Form } from "@calcom/ui/form/fields";
@ -361,6 +361,7 @@ const BookingPage = ({ eventType, booking, profile }: BookingPageProps) => {
required required
className="focus:border-brand block w-full rounded-sm border-gray-300 shadow-sm focus:ring-black dark:border-gray-900 dark:bg-black dark:text-white dark:selection:bg-green-500 sm:text-sm" className="focus:border-brand block w-full rounded-sm border-gray-300 shadow-sm focus:ring-black dark:border-gray-900 dark:bg-black dark:text-white dark:selection:bg-green-500 sm:text-sm"
placeholder="you@example.com" placeholder="you@example.com"
type="search" // Disables annoying 1password intrusive popup (non-optimal, I know I know...)
/> />
</div> </div>
</div> </div>
@ -549,7 +550,8 @@ const BookingPage = ({ eventType, booking, profile }: BookingPageProps) => {
</div> </div>
<div className="ltr:ml-3 rtl:mr-3"> <div className="ltr:ml-3 rtl:mr-3">
<p className="text-sm text-yellow-700"> <p className="text-sm text-yellow-700">
{rescheduleUid ? t("reschedule_fail") : t("booking_fail")} {rescheduleUid ? t("reschedule_fail") : t("booking_fail")}{" "}
{(mutation.error as HttpError)?.message}
</p> </p>
</div> </div>
</div> </div>

6
apps/web/lib/core/http/fetch-wrapper.ts
View file

@ -5,7 +5,11 @@ async function http<T>(path: string, config: RequestInit): Promise<T> {
const response: Response = await fetch(request); const response: Response = await fetch(request);
if (!response.ok) { if (!response.ok) {
const err = HttpError.fromRequest(request, response); const errJson = await response.json();
const err = HttpError.fromRequest(request, {
...response,
statusText: errJson.message || response.statusText,
});
throw err; throw err;
} }
// may error if there is no body, return empty array // may error if there is no body, return empty array