diff --git a/apps/web/modules/videos/ai/ai-transcribe.tsx b/apps/web/modules/videos/ai/ai-transcribe.tsx index ce85280c74..30cb8fca46 100644 --- a/apps/web/modules/videos/ai/ai-transcribe.tsx +++ b/apps/web/modules/videos/ai/ai-transcribe.tsx @@ -1,10 +1,9 @@ import { useTranscription } from "@daily-co/daily-react"; import { useDaily, useDailyEvent } from "@daily-co/daily-react"; import React, { Fragment, useCallback, useRef, useState, useLayoutEffect, useEffect } from "react"; -import { Toaster } from "react-hot-toast"; +import { WEBAPP_URL } from "@calcom/lib/constants"; import { useLocale } from "@calcom/lib/hooks/useLocale"; -import { showToast } from "@calcom/ui"; export const CalAiTranscribe = () => { const daily = useDaily(); @@ -26,11 +25,25 @@ export const CalAiTranscribe = () => { ); useDailyEvent("transcription-started", (ev) => { - showToast(t("transcription_enabled"), "success"); + daily?.updateCustomTrayButtons({ + transcription: { + label: "Stop", + tooltip: "Stop transcription", + iconPath: `${WEBAPP_URL}/sparkles-red.svg`, + iconPathDarkMode: `${WEBAPP_URL}/sparkles-red.svg`, + }, + }); }); useDailyEvent("transcription-stopped", (ev) => { - showToast(t("transcription_stopped"), "success"); + daily?.updateCustomTrayButtons({ + transcription: { + label: "Cal.ai", + tooltip: "Transcription powered by AI", + iconPath: `${WEBAPP_URL}/sparkles`, + iconPathDarkMode: `${WEBAPP_URL}/sparkles`, + }, + }); }); useDailyEvent("custom-button-click", (ev) => { @@ -68,11 +81,13 @@ export const CalAiTranscribe = () => { return ( <> -
+ className="max-h-full overflow-x-hidden overflow-y-scroll p-8 text-center text-white"> {transcript ? transcript.split("\n").map((line, i) => ( diff --git a/apps/web/modules/videos/views/videos-single-view.tsx b/apps/web/modules/videos/views/videos-single-view.tsx index df8979ff8c..52c8be0363 100644 --- a/apps/web/modules/videos/views/videos-single-view.tsx +++ b/apps/web/modules/videos/views/videos-single-view.tsx @@ -51,7 +51,7 @@ export default function JoinCall(props: PageProps) { customTrayButtons: { transcription: { label: "Cal.ai", - tooltip: "Toggle real time transcription powered by AI", + tooltip: "Transcription powered by AI", iconPath: `${WEBAPP_URL}/sparkles.svg`, iconPathDarkMode: `${WEBAPP_URL}/sparkles.svg`, }, @@ -103,12 +103,12 @@ export default function JoinCall(props: PageProps) { /> ) : ( Logo )} diff --git a/apps/web/pages/signup.tsx b/apps/web/pages/signup.tsx index aa7f51a432..7bfa0a60bf 100644 --- a/apps/web/pages/signup.tsx +++ b/apps/web/pages/signup.tsx @@ -595,14 +595,9 @@ export default function Signup({
Trustpilot Rating of 4.7 Stars - Trustpilot Rating of 4.7 Stars
diff --git a/apps/web/public/product-cards/google-reviews.svg b/apps/web/public/product-cards/google-reviews.svg new file mode 100644 index 0000000000..286cdfe182 --- /dev/null +++ b/apps/web/public/product-cards/google-reviews.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/apps/web/public/sparkles-red.svg b/apps/web/public/sparkles-red.svg new file mode 100644 index 0000000000..49523439dd --- /dev/null +++ b/apps/web/public/sparkles-red.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/packages/features/bookings/Booker/Booker.tsx b/packages/features/bookings/Booker/Booker.tsx index 1fe2c16950..b08d88bc25 100644 --- a/packages/features/bookings/Booker/Booker.tsx +++ b/packages/features/bookings/Booker/Booker.tsx @@ -133,6 +133,14 @@ const BookerComponent = ({ onToggleCalendar, } = calendars; + const scrolledToTimeslotsOnce = useRef(false); + const scrollToTimeSlots = () => { + if (isMobile && !isEmbed && !scrolledToTimeslotsOnce.current) { + timeslotsRef.current?.scrollIntoView({ behavior: "smooth" }); + scrolledToTimeslotsOnce.current = true; + } + }; + useEffect(() => { if (event.isPending) return setBookerState("loading"); if (!selectedDate) return setBookerState("selecting_date"); @@ -327,7 +335,7 @@ const BookerComponent = ({ {!hideEventTypeDetails && orgBannerUrl && !isPlatform && ( org banner @@ -346,7 +354,7 @@ const BookerComponent = ({ {layout !== BookerLayouts.MONTH_VIEW && !(layout === "mobile" && bookerState === "booking") && (
- +
)} @@ -379,6 +387,7 @@ const BookerComponent = ({ }} event={event} schedule={schedule} + scrollToTimeSlots={scrollToTimeSlots} /> diff --git a/packages/features/bookings/Booker/components/DatePicker.tsx b/packages/features/bookings/Booker/components/DatePicker.tsx index abd6d319bf..b833b8cde0 100644 --- a/packages/features/bookings/Booker/components/DatePicker.tsx +++ b/packages/features/bookings/Booker/components/DatePicker.tsx @@ -14,6 +14,7 @@ export const DatePicker = ({ event, schedule, classNames, + scrollToTimeSlots, }: { event: useEventReturnType; schedule: useScheduleForEventReturnType; @@ -25,6 +26,7 @@ export const DatePicker = ({ datePickerDatesActive?: string; datePickerToggle?: string; }; + scrollToTimeSlots?: () => void; }) => { const { i18n } = useLocale(); const [month, selectedDate] = useBookerStore((state) => [state.month, state.selectedDate], shallow); @@ -59,6 +61,7 @@ export const DatePicker = ({ selected={dayjs(selectedDate)} weekStart={weekdayToWeekIndex(event?.data?.users?.[0]?.weekStart)} slots={schedule?.data?.slots} + scrollToTimeSlots={scrollToTimeSlots} /> ); }; diff --git a/packages/features/calendars/DatePicker.tsx b/packages/features/calendars/DatePicker.tsx index 837b9144d6..16f7b14d5c 100644 --- a/packages/features/calendars/DatePicker.tsx +++ b/packages/features/calendars/DatePicker.tsx @@ -152,6 +152,7 @@ const Days = ({ datePickerDate?: string; datePickerDateActive?: string; }; + scrollToTimeSlots?: () => void; }) => { // Create placeholder elements for empty days in first week const weekdayOfFirst = browsingDate.date(1).day(); @@ -267,6 +268,7 @@ const Days = ({ date={day} onClick={() => { props.onChange(day); + props?.scrollToTimeSlots?.(); }} disabled={disabled} active={isActive(day)} @@ -302,6 +304,7 @@ const DatePicker = ({ datePickerDatesActive?: string; datePickerToggle?: string; }; + scrollToTimeSlots?: () => void; }) => { const browsingDate = passThroughProps.browsingDate || dayjs().startOf("month"); const { i18n } = useLocale();