From 1a27edd4627adc593c5e32e96f6ce22bf6d0411a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Omar=20L=C3=B3pez?= <zomars@me.com>
Date: Wed, 23 Mar 2022 19:27:35 -0700
Subject: [PATCH] Booking page improvements (#2260)

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
---
 apps/web/components/booking/pages/BookingPage.tsx | 8 +++++---
 apps/web/lib/core/http/fetch-wrapper.ts           | 6 +++++-
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/apps/web/components/booking/pages/BookingPage.tsx b/apps/web/components/booking/pages/BookingPage.tsx
index ae160556..b34fc91a 100644
--- a/apps/web/components/booking/pages/BookingPage.tsx
+++ b/apps/web/components/booking/pages/BookingPage.tsx
@@ -6,13 +6,13 @@ import { useSession } from "next-auth/react";
 import dynamic from "next/dynamic";
 import Head from "next/head";
 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 { FormattedNumber, IntlProvider } from "react-intl";
 import { ReactMultiEmail } from "react-multi-email";
 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 { Button } from "@calcom/ui/Button";
 import { EmailInput, Form } from "@calcom/ui/form/fields";
@@ -361,6 +361,7 @@ const BookingPage = ({ eventType, booking, profile }: BookingPageProps) => {
                         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"
                         placeholder="you@example.com"
+                        type="search" // Disables annoying 1password intrusive popup (non-optimal, I know I know...)
                       />
                     </div>
                   </div>
@@ -549,7 +550,8 @@ const BookingPage = ({ eventType, booking, profile }: BookingPageProps) => {
                       </div>
                       <div className="ltr:ml-3 rtl:mr-3">
                         <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>
                       </div>
                     </div>
diff --git a/apps/web/lib/core/http/fetch-wrapper.ts b/apps/web/lib/core/http/fetch-wrapper.ts
index 191d973a..4d5d6365 100644
--- a/apps/web/lib/core/http/fetch-wrapper.ts
+++ b/apps/web/lib/core/http/fetch-wrapper.ts
@@ -5,7 +5,11 @@ async function http<T>(path: string, config: RequestInit): Promise<T> {
   const response: Response = await fetch(request);
 
   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;
   }
   // may error if there is no body, return empty array