/booking v2 fixes (#4117)

* fixed wipe my cal button

* fixed booking buttons

* new buttons for request reschedule

* removed "yet" from empty screen in booking

apps/web/components/booking/BookingListItem.tsx

@@ -9,11 +9,11 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import showToast from "@calcom/lib/notification";
 import { getEveryFreqFor } from "@calcom/lib/recurringStrings";
 import { inferQueryInput, inferQueryOutput, trpc } from "@calcom/trpc/react";
-import Button from "@calcom/ui/Button";
 import { Dialog, DialogClose, DialogContent, DialogFooter, DialogHeader } from "@calcom/ui/Dialog";
 import { Icon } from "@calcom/ui/Icon";
 import { Tooltip } from "@calcom/ui/Tooltip";
 import { TextArea } from "@calcom/ui/form/fields";
+import Button from "@calcom/ui/v2/core/Button";
 
 import useMeQuery from "@lib/hooks/useMeQuery";
 import { extractRecurringDates } from "@lib/parseDate";
@@ -151,7 +151,7 @@ function BookingListItem(booking: BookingItemProps) {
 
   const RequestSentMessage = () => {
     return (
-      <div className="ml-1 mr-8 flex text-gray-500" data-testid="request_reschedule_sent">
+      <div className="flex ml-1 mr-8 text-gray-500" data-testid="request_reschedule_sent">
         <Icon.FiSend className="-mt-[1px] w-4 rotate-45" />
         <p className="ml-2 ">{t("reschedule_request_sent")}</p>
       </div>
@@ -261,7 +261,7 @@ function BookingListItem(booking: BookingItemProps) {
       </Dialog>
 
       <tr className="flex hover:bg-neutral-50">
-        <td className="hidden align-top ltr:pl-6 rtl:pr-6 sm:table-cell sm:w-64" onClick={onClick}>
+        <td className="hidden align-top ltr:pl-6 rtl:pr-6 sm:table-cell sm:w-44" onClick={onClick}>
           <div className="cursor-pointer py-4">
             <div className="text-sm leading-6 text-gray-900">{startTime}</div>
             <div className="text-sm text-gray-500">
@@ -302,7 +302,7 @@ function BookingListItem(booking: BookingItemProps) {
             </div>
           </div>
         </td>
-        <td className={"flex-1 ltr:pl-4 rtl:pr-4" + (isRejected ? " line-through" : "")} onClick={onClick}>
+        <td className={"flex-1 px-4" + (isRejected ? " line-through" : "")} onClick={onClick}>
           <div className="cursor-pointer py-4">
             <div className="sm:hidden">
               {isPending && <Tag className="mb-2 ltr:mr-2 rtl:ml-2">{t("unconfirmed")}</Tag>}

apps/web/components/booking/SkeletonLoader.tsx

@@ -4,7 +4,7 @@ import { SkeletonText } from "@calcom/ui";
 
 function SkeletonLoader() {
   return (
-    <ul className="mt-6 animate-pulse divide-y divide-neutral-200 border border-gray-200 bg-white sm:mx-0 sm:overflow-hidden">
+    <ul className="mx-6 mt-6 animate-pulse divide-y divide-neutral-200 border border-gray-200 bg-white sm:overflow-hidden">
       <SkeletonItem />
       <SkeletonItem />
       <SkeletonItem />
@@ -16,7 +16,7 @@ export default SkeletonLoader;
 
 function SkeletonItem() {
   return (
-    <li className="group flex w-full items-center justify-between px-2 py-4 sm:px-6">
+    <li className="flex group w-full items-center justify-between px-2 py-4 sm:px-6">
       <div className="flex-grow truncate text-sm">
         <div className="flex">
           <div className="flex flex-col space-y-2">

apps/web/components/dialog/RescheduleDialog.tsx

@@ -5,10 +5,10 @@ import { useMutation } from "react-query";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import showToast from "@calcom/lib/notification";
 import { trpc } from "@calcom/trpc/react";
-import Button from "@calcom/ui/Button";
 import { Dialog, DialogClose, DialogContent, DialogFooter, DialogHeader } from "@calcom/ui/Dialog";
 import { Icon } from "@calcom/ui/Icon";
 import { TextArea } from "@calcom/ui/form/fields";
+import Button from "@calcom/ui/v2/core/Button";
 
 import * as fetchWrapper from "@lib/core/http/fetch-wrapper";
 

apps/web/components/ui/TableActions.tsx

@@ -1,8 +1,8 @@
 import React, { FC } from "react";
 
-import Button from "@calcom/ui/Button";
 import Dropdown, { DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@calcom/ui/Dropdown";
 import { Icon } from "@calcom/ui/Icon";
+import Button from "@calcom/ui/v2/core/Button";
 
 import { SVGComponent } from "@lib/types/SVGComponent";
 
@@ -48,12 +48,10 @@ const DropdownActions = ({
           <DropdownMenuItem key={action.id} className="focus-visible:outline-none">
             <Button
               type="button"
-              size="sm"
               color="minimal"
               className="w-full rounded-none font-normal"
               href={action.href}
               StartIcon={action.icon}
-              startIconClassName={action.iconClassName}
               onClick={action.onClick || defaultAction}
               data-testid={action.id}>
               {action.label}
@@ -83,7 +81,6 @@ const TableActions: FC<Props> = ({ actions }) => {
               href={action.href}
               onClick={action.onClick || defaultAction}
               StartIcon={action.icon}
-              startIconClassName={action.iconClassName}
               {...(action?.actions ? { EndIcon: Icon.FiChevronDown } : null)}
               disabled={action.disabled}
               color={action.color || "secondary"}>

apps/web/pages/v2/bookings/[status].tsx

@@ -84,7 +84,6 @@ export default function Bookings() {
       heading={t("bookings")}
       subtitle={t("bookings_description")}
       customLoader={<SkeletonLoader />}>
-      <WipeMyCalActionButton bookingStatus={status} bookingsEmpty={isEmpty} />
       <div className="flex w-full flex-1 flex-col">
         {query.status === "error" && (
           <Alert severity="error" title={t("something_went_wrong")} message={query.error.message} />
@@ -92,7 +91,8 @@ export default function Bookings() {
         {(query.status === "loading" || query.status === "idle") && <SkeletonLoader />}
         {query.status === "success" && !isEmpty && (
           <div className="pt-2 xl:mx-6 xl:pt-0">
-            <p className="pb-3 text-xs font-medium leading-4 text-gray-500">Today</p>
+            <WipeMyCalActionButton bookingStatus={status} bookingsEmpty={isEmpty} />
+            <p className="pb-3 text-xs font-medium capitalize leading-4 text-gray-500">{t("today")}</p>
             <div className="overflow-hidden rounded-md border border-gray-200">
               <table className="w-full">
                 <tbody className="divide-y divide-gray-200 bg-white" data-testid="bookings">

apps/web/public/static/locales/en/common.json

@@ -299,7 +299,7 @@
   "no_availability": "Unavailable",
   "no_meeting_found": "No Meeting Found",
   "no_meeting_found_description": "This meeting does not exist. Contact the meeting owner for an updated link.",
-  "no_status_bookings_yet": "No {{status}} bookings, yet",
+  "no_status_bookings_yet": "No {{status}} bookings",
   "no_status_bookings_yet_description": "You have no {{status}} bookings. {{description}}",
   "event_between_users": "{{eventName}} between {{host}} and {{attendeeName}}",
   "bookings": "Bookings",
@@ -1097,5 +1097,6 @@
   "secure_password": "Your new super secure password",
   "error_updating_password": "Error updating password",
   "two_factor_auth": "Two factor authentication",
-  "recurring_event_tab_description": "Set up a repeating schedule"
+  "recurring_event_tab_description": "Set up a repeating schedule",
+  "today": "today"
 }

packages/app-store/wipemycalother/components/wipeMyCalActionButton.tsx

@@ -26,16 +26,16 @@ const WipeMyCalActionButton = (props: IWipeMyCalActionButtonProps) => {
   const [credentialId] = wipeMyCalCredentials?.credentialIds || [false];
 
   return (
-    <div>
+    <>
       {data && isSuccess && !isLoading && credentialId && (
-        <>
+        <div className="mb-4">
           <ConfirmDialog isOpenDialog={openDialog} setIsOpenDialog={setOpenDialog} />
           <Button onClick={() => setOpenDialog(true)} data-testid="wipe-today-button">
             Wipe Today
           </Button>
-        </>
+        </div>
       )}
-    </div>
+    </>
   );
 };