remove duplicate datepicker, slight changes to success page (#3163)

* removed duplicate timezone dropdown

* minor fixes to success page and booking layout

* nit

apps/web/components/booking/pages/AvailabilityPage.tsx

@@ -197,8 +197,6 @@ const SlotPicker = ({
         // DayComponent={(props) => <DayContainer {...props} eventTypeId={eventType.id} />}
       />
 
-      <div className="mt-4 ml-1 block sm:hidden">{timezoneDropdown}</div>
-
       {selectedDate && (
         <AvailableTimes
           slots={slots[yyyymmdd(selectedDate)]}
@@ -530,7 +528,7 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
               </div>
             </div>
 
-            <div className="px-4 sm:flex sm:p-4 sm:py-5">
+            <div className="p-4 sm:flex sm:py-5">
               <div
                 className={
                   "hidden overflow-hidden pr-8 sm:border-r sm:dark:border-gray-700 md:flex md:flex-col " +

apps/web/components/booking/pages/BookingPage.tsx

@@ -571,7 +571,7 @@ const BookingPage = ({
                   </div>
                 )}
               </div>
-              <div className="mt-8 sm:w-1/2 sm:pl-8 sm:pr-4">
+              <div className="sm:w-1/2 sm:pl-8 sm:pr-4">
                 <Form form={bookingForm} handleSubmit={bookEvent}>
                   <div className="mb-4">
                     <label htmlFor="name" className="block text-sm font-medium text-gray-700 dark:text-white">

apps/web/components/ui/PoweredByCal.tsx

@@ -1,8 +1,7 @@
 import Link from "next/link";
 
 import { useIsEmbed } from "@calcom/embed-core/embed-iframe";
-
-import { useLocale } from "@lib/hooks/useLocale";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
 
 const PoweredByCal = () => {
   const { t } = useLocale();

apps/web/pages/success.tsx

@@ -1,5 +1,5 @@
 import { CheckIcon } from "@heroicons/react/outline";
-import { ArrowLeftIcon, ClockIcon, XIcon } from "@heroicons/react/solid";
+import { ChevronLeftIcon, ClockIcon, XIcon } from "@heroicons/react/solid";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@radix-ui/react-collapsible";
 import classNames from "classnames";
 import dayjs from "dayjs";
@@ -268,10 +268,10 @@ export default function Success(props: SuccessProps) {
         className={isEmbed ? "" : "h-screen bg-neutral-100 dark:bg-neutral-900"}
         data-testid="success-page">
         {userIsOwner && !isEmbed && (
-          <div className="-mb-7 ml-9 mt-7">
+          <div className="ml-4 mt-2 -mb-4">
             <Link href={eventType.recurringEvent?.count ? "/bookings/recurring" : "/bookings"}>
-              <a className="flex items-center text-black dark:text-white">
-                <ArrowLeftIcon className="mr-1 h-4 w-4" /> {t("back_to_bookings")}
+              <a className="mt-2 inline-flex px-1 py-2 text-sm text-gray-500 hover:bg-gray-100 hover:text-gray-800">
+                <ChevronLeftIcon className="h-5 w-5" /> {t("back_to_bookings")}
               </a>
             </Link>
           </div>
@@ -417,11 +417,11 @@ export default function Success(props: SuccessProps) {
                   {!needsConfirmation &&
                     !isCancelled &&
                     (!isCancellationMode ? (
-                      <div className="border-bookinglightest text-bookingdark mt-2 grid grid-cols-3 border-b py-4 text-left dark:border-gray-900">
-                        <span className="flex self-center font-medium text-gray-700 ltr:mr-2 rtl:ml-2 dark:text-gray-50">
+                      <div className="border-bookinglightest text-bookingdark mt-2 grid-cols-3 border-b py-4 text-left dark:border-gray-900 sm:grid">
+                        <span className="font-medium text-gray-700 ltr:mr-2 rtl:ml-2 dark:text-gray-50">
                           {t("need_to_make_a_change")}
                         </span>
-                        <div className="ml-7 flex items-center justify-center self-center ltr:mr-2 rtl:ml-2 dark:text-gray-50">
+                        <div className="flex items-center self-center ltr:mr-2 rtl:ml-2 dark:text-gray-50 sm:ml-7 sm:justify-center">
                           <button className="underline" onClick={() => setIsCancellationMode(true)}>
                             {t("cancel")}
                           </button>
@@ -471,7 +471,7 @@ export default function Success(props: SuccessProps) {
                           }>
                           <a className="mx-2 h-10 w-10 rounded-sm border border-neutral-200 px-3 py-2 dark:border-neutral-700 dark:text-white">
                             <svg
-                              className="-mt-1 inline-block h-4 w-4"
+                              className="-mt-1.5 inline-block h-4 w-4"
                               fill="currentColor"
                               xmlns="http://www.w3.org/2000/svg"
                               viewBox="0 0 24 24">
@@ -497,7 +497,7 @@ export default function Success(props: SuccessProps) {
                             className="mx-2 h-10 w-10 rounded-sm border border-neutral-200 px-3 py-2 dark:border-neutral-700 dark:text-white"
                             target="_blank">
                             <svg
-                              className="mr-1 -mt-1 inline-block h-4 w-4"
+                              className="mr-1 -mt-1.5 inline-block h-4 w-4"
                               fill="currentColor"
                               xmlns="http://www.w3.org/2000/svg"
                               viewBox="0 0 24 24">
@@ -523,7 +523,7 @@ export default function Success(props: SuccessProps) {
                             className="mx-2 h-10 w-10 rounded-sm border border-neutral-200 px-3 py-2 dark:border-neutral-700 dark:text-white"
                             target="_blank">
                             <svg
-                              className="mr-1 -mt-1 inline-block h-4 w-4"
+                              className="mr-1 -mt-1.5 inline-block h-4 w-4"
                               fill="currentColor"
                               xmlns="http://www.w3.org/2000/svg"
                               viewBox="0 0 24 24">
@@ -541,7 +541,7 @@ export default function Success(props: SuccessProps) {
                               fill="currentColor"
                               xmlns="http://www.w3.org/2000/svg"
                               viewBox="0 0 1000 1000"
-                              className="mr-1 -mt-1 inline-block h-4 w-4">
+                              className="mr-1 -mt-1.5 inline-block h-4 w-4">
                               <title>{t("other")}</title>
                               <path d="M971.3,154.9c0-34.7-28.2-62.9-62.9-62.9H611.7c-1.3,0-2.6,0.1-3.9,0.2V10L28.7,87.3v823.4L607.8,990v-84.6c1.3,0.1,2.6,0.2,3.9,0.2h296.7c34.7,0,62.9-28.2,62.9-62.9V154.9z M607.8,636.1h44.6v-50.6h-44.6v-21.9h44.6v-50.6h-44.6v-92h277.9v230.2c0,3.8-3.1,7-7,7H607.8V636.1z M117.9,644.7l-50.6-2.4V397.5l50.6-2.2V644.7z M288.6,607.3c17.6,0.6,37.3-2.8,49.1-7.2l9.1,48c-11,5.1-35.6,9.9-66.9,8.3c-85.4-4.3-127.5-60.7-127.5-132.6c0-86.2,57.8-136.7,133.2-140.1c30.3-1.3,53.7,4,64.3,9.2l-12.2,48.9c-12.1-4.9-28.8-9.2-49.5-8.6c-45.3,1.2-79.5,30.1-79.5,87.4C208.8,572.2,237.8,605.7,288.6,607.3z M455.5,665.2c-32.4-1.6-63.7-11.3-79.1-20.5l12.6-50.7c16.8,9.1,42.9,18.5,70.4,19.4c30.1,1,46.3-10.7,46.3-29.3c0-17.8-14-28.1-48.8-40.6c-46.9-16.4-76.8-41.7-76.8-81.5c0-46.6,39.3-84.1,106.8-87.1c33.3-1.5,58.3,4.2,76.5,11.2l-15.4,53.3c-12.1-5.3-33.5-12.8-62.3-12c-28.3,0.8-41.9,13.6-41.9,28.1c0,17.8,16.1,25.5,53.6,39c52.9,18.5,78.4,45.3,78.4,86.4C575.6,629.7,536.2,669.2,455.5,665.2z M935.3,842.7c0,14.9-12.1,27-27,27H611.7c-1.3,0-2.6-0.2-3.9-0.4V686.2h270.9c19.2,0,34.9-15.6,34.9-34.9V398.4c0-19.2-15.6-34.9-34.9-34.9h-47.1v-32.3H808v32.3h-44.8v-32.3h-22.7v32.3h-43.3v-32.3h-22.7v32.3H628v-32.3h-20.2v-203c1.31.2,2.6-0.4,3.9-0.4h296.7c14.9,0,27,12.1,27,27L935.3,842.7L935.3,842.7z" />
                             </svg>

packages/app-store/apps.browser.generated.tsx

@@ -4,6 +4,7 @@
 **/
 import dynamic from "next/dynamic"
 import { metadata as applecalendar_meta } from "./applecalendar/_metadata";
+import { metadata as around_meta } from "./around/_metadata";
 import { metadata as caldavcalendar_meta } from "./caldavcalendar/_metadata";
 import { metadata as dailyvideo_meta } from "./dailyvideo/_metadata";
 import { metadata as exchange2013calendar_meta } from "./exchange2013calendar/_metadata";
@@ -17,15 +18,18 @@ import { metadata as jitsivideo_meta } from "./jitsivideo/_metadata";
 import { metadata as metamask_meta } from "./metamask/_metadata";
 import { metadata as office365calendar_meta } from "./office365calendar/_metadata";
 import { metadata as office365video_meta } from "./office365video/_metadata";
+import { metadata as riverside_meta } from "./riverside/_metadata";
 import { metadata as slackmessaging_meta } from "./slackmessaging/_metadata";
 import { metadata as stripepayment_meta } from "./stripepayment/_metadata";
 import { metadata as tandemvideo_meta } from "./tandemvideo/_metadata";
 import { metadata as vital_meta } from "./vital/_metadata";
+import { metadata as whereby_meta } from "./whereby/_metadata";
 import { metadata as wipemycalother_meta } from "./wipemycalother/_metadata";
 import { metadata as zapier_meta } from "./zapier/_metadata";
 import { metadata as zoomvideo_meta } from "./zoomvideo/_metadata";
 export const appStoreMetadata = {
 applecalendar:applecalendar_meta,
+around:around_meta,
 caldavcalendar:caldavcalendar_meta,
 dailyvideo:dailyvideo_meta,
 exchange2013calendar:exchange2013calendar_meta,
@@ -39,15 +43,18 @@ jitsivideo:jitsivideo_meta,
 metamask:metamask_meta,
 office365calendar:office365calendar_meta,
 office365video:office365video_meta,
+riverside:riverside_meta,
 slackmessaging:slackmessaging_meta,
 stripepayment:stripepayment_meta,
 tandemvideo:tandemvideo_meta,
 vital:vital_meta,
+whereby:whereby_meta,
 wipemycalother:wipemycalother_meta,
 zapier:zapier_meta,
 zoomvideo:zoomvideo_meta,
 };
 const applecalendar_installAppButton = dynamic(() =>import("./applecalendar/components/InstallAppButton"));
+const around_installAppButton = dynamic(() =>import("./around/components/InstallAppButton"));
 const caldavcalendar_installAppButton = dynamic(() =>import("./caldavcalendar/components/InstallAppButton"));
 const exchange2013calendar_installAppButton = dynamic(() =>import("./exchange2013calendar/components/InstallAppButton"));
 const exchange2016calendar_installAppButton = dynamic(() =>import("./exchange2016calendar/components/InstallAppButton"));
@@ -59,15 +66,18 @@ const jitsivideo_installAppButton = dynamic(() =>import("./jitsivideo/components
 const metamask_installAppButton = dynamic(() =>import("./metamask/components/InstallAppButton"));
 const office365calendar_installAppButton = dynamic(() =>import("./office365calendar/components/InstallAppButton"));
 const office365video_installAppButton = dynamic(() =>import("./office365video/components/InstallAppButton"));
+const riverside_installAppButton = dynamic(() =>import("./riverside/components/InstallAppButton"));
 const slackmessaging_installAppButton = dynamic(() =>import("./slackmessaging/components/InstallAppButton"));
 const stripepayment_installAppButton = dynamic(() =>import("./stripepayment/components/InstallAppButton"));
 const tandemvideo_installAppButton = dynamic(() =>import("./tandemvideo/components/InstallAppButton"));
 const vital_installAppButton = dynamic(() =>import("./vital/components/InstallAppButton"));
+const whereby_installAppButton = dynamic(() =>import("./whereby/components/InstallAppButton"));
 const wipemycalother_installAppButton = dynamic(() =>import("./wipemycalother/components/InstallAppButton"));
 const zapier_installAppButton = dynamic(() =>import("./zapier/components/InstallAppButton"));
 const zoomvideo_installAppButton = dynamic(() =>import("./zoomvideo/components/InstallAppButton"));
 export const InstallAppButtonMap = {
 applecalendar:applecalendar_installAppButton,
+around:around_installAppButton,
 caldavcalendar:caldavcalendar_installAppButton,
 exchange2013calendar:exchange2013calendar_installAppButton,
 exchange2016calendar:exchange2016calendar_installAppButton,
@@ -79,10 +89,12 @@ jitsivideo:jitsivideo_installAppButton,
 metamask:metamask_installAppButton,
 office365calendar:office365calendar_installAppButton,
 office365video:office365video_installAppButton,
+riverside:riverside_installAppButton,
 slackmessaging:slackmessaging_installAppButton,
 stripepayment:stripepayment_installAppButton,
 tandemvideo:tandemvideo_installAppButton,
 vital:vital_installAppButton,
+whereby:whereby_installAppButton,
 wipemycalother:wipemycalother_installAppButton,
 zapier:zapier_installAppButton,
 zoomvideo:zoomvideo_installAppButton,

packages/app-store/apps.server.generated.ts

@@ -3,6 +3,7 @@
     Don't modify this file manually.
 **/
 const applecalendar_api = import("./applecalendar/api");
+const around_api = import("./around/api");
 const caldavcalendar_api = import("./caldavcalendar/api");
 const exchange2013calendar_api = import("./exchange2013calendar/api");
 const exchange2016calendar_api = import("./exchange2016calendar/api");
@@ -14,15 +15,18 @@ const jitsivideo_api = import("./jitsivideo/api");
 const metamask_api = import("./metamask/api");
 const office365calendar_api = import("./office365calendar/api");
 const office365video_api = import("./office365video/api");
+const riverside_api = import("./riverside/api");
 const slackmessaging_api = import("./slackmessaging/api");
 const stripepayment_api = import("./stripepayment/api");
 const tandemvideo_api = import("./tandemvideo/api");
 const vital_api = import("./vital/api");
+const whereby_api = import("./whereby/api");
 const wipemycalother_api = import("./wipemycalother/api");
 const zapier_api = import("./zapier/api");
 const zoomvideo_api = import("./zoomvideo/api");
 export const apiHandlers = {
 applecalendar:applecalendar_api,
+around:around_api,
 caldavcalendar:caldavcalendar_api,
 exchange2013calendar:exchange2013calendar_api,
 exchange2016calendar:exchange2016calendar_api,
@@ -34,10 +38,12 @@ jitsivideo:jitsivideo_api,
 metamask:metamask_api,
 office365calendar:office365calendar_api,
 office365video:office365video_api,
+riverside:riverside_api,
 slackmessaging:slackmessaging_api,
 stripepayment:stripepayment_api,
 tandemvideo:tandemvideo_api,
 vital:vital_api,
+whereby:whereby_api,
 wipemycalother:wipemycalother_api,
 zapier:zapier_api,
 zoomvideo:zoomvideo_api,

packages/ui/booker/DatePicker.tsx

@@ -177,7 +177,7 @@ const DatePicker = ({
           </button>
         </div>
       </div>
-      <div className="border-bookinglightest mb-2 grid grid-cols-7 gap-4 border-t border-b text-center dark:border-gray-800 sm:mb-0 sm:border-0">
+      <div className="border-bookinglightest mb-2 grid grid-cols-7 gap-4 border-t border-b text-center dark:border-gray-800 md:mb-0 md:border-0">
         {weekdayNames(locale, weekStart, "short").map((weekDay) => (
           <div key={weekDay} className="text-bookinglight my-4 text-xs uppercase tracking-widest">
             {weekDay}