b860a79d59
* fix: adds new isBrowserLocal24h timeFormat util, uses in BookingPage * fix: adds new time format locale detector in available times * fix: removes 24h clock from availabletimes * chore: move timeFormat to lib util, add to payment page * chore: remove commented out is24h * fix: adds timeFormat to success page * fix: adds timeFormat to cancel page * fix: adds timeFormat to video meeting ended/not started pages * fix: removes added typo in success page * fix: reverts back to use of is24h Switch in available times / time options, renames timeFormat to detectBrowserTimeFormat to avoid collisions * fix: moves use uf isBrowserLocal24h() to clock util initClock() itself, by calling it only if no localStorage settings are set * chore: move back timeFormat props to line it was so no change * chore: remove empty line in timeOptions * chore: move back timeFormat where it was in TimeOptions props * chore: add back empty line before selectedTimeZone return * fix: reverts back to use of is24h in payments page * feat: adds browser locale as default in payment page in case there's no settings set by the customer * feat: adds browser locale as default in success page * fix: deconstruct props so eslint passes * fix: lint issue for extra empty line in meeting-ended uid page Co-authored-by: Agusti Fernandez <git@agusti.me> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
77 lines
3.1 KiB
TypeScript
77 lines
3.1 KiB
TypeScript
// TODO: replace headlessui with radix-ui
|
|
import { Switch } from "@headlessui/react";
|
|
import { FC, useEffect, useState } from "react";
|
|
import TimezoneSelect, { ITimezoneOption } from "react-timezone-select";
|
|
|
|
import classNames from "@lib/classNames";
|
|
import { useLocale } from "@lib/hooks/useLocale";
|
|
|
|
import { is24h, timeZone } from "../../lib/clock";
|
|
|
|
type Props = {
|
|
onSelectTimeZone: (selectedTimeZone: string) => void;
|
|
onToggle24hClock: (is24hClock: boolean) => void;
|
|
};
|
|
|
|
const TimeOptions: FC<Props> = ({ onToggle24hClock, onSelectTimeZone }) => {
|
|
const [selectedTimeZone, setSelectedTimeZone] = useState("");
|
|
const [is24hClock, setIs24hClock] = useState(false);
|
|
const { t } = useLocale();
|
|
|
|
useEffect(() => {
|
|
setIs24hClock(is24h());
|
|
setSelectedTimeZone(timeZone());
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (selectedTimeZone && timeZone() && selectedTimeZone !== timeZone()) {
|
|
onSelectTimeZone(timeZone(selectedTimeZone));
|
|
}
|
|
}, [selectedTimeZone, onSelectTimeZone]);
|
|
const handle24hClockToggle = (is24hClock: boolean) => {
|
|
setIs24hClock(is24hClock);
|
|
onToggle24hClock(is24h(is24hClock));
|
|
};
|
|
|
|
return selectedTimeZone !== "" ? (
|
|
<div className="max-w-80 absolute z-10 w-full rounded-sm border border-gray-200 bg-white px-4 py-2 dark:border-0 dark:bg-gray-700">
|
|
<div className="mb-4 flex">
|
|
<div className="w-1/2 font-medium text-gray-600 dark:text-white">{t("time_options")}</div>
|
|
<div className="w-1/2">
|
|
<Switch.Group as="div" className="flex items-center justify-end">
|
|
<Switch.Label as="span" className="ltr:mr-3">
|
|
<span className="text-sm text-gray-500 dark:text-white">{t("am_pm")}</span>
|
|
</Switch.Label>
|
|
<Switch
|
|
checked={is24hClock}
|
|
onChange={handle24hClockToggle}
|
|
className={classNames(
|
|
is24hClock ? "bg-brand text-brandcontrast" : "bg-gray-200 dark:bg-gray-600",
|
|
"relative inline-flex h-5 w-8 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-black focus:ring-offset-2"
|
|
)}>
|
|
<span className="sr-only">{t("use_setting")}</span>
|
|
<span
|
|
aria-hidden="true"
|
|
className={classNames(
|
|
is24hClock ? "translate-x-3" : "translate-x-0",
|
|
"pointer-events-none inline-block h-4 w-4 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"
|
|
)}
|
|
/>
|
|
</Switch>
|
|
<Switch.Label as="span" className="ltr:ml-3 rtl:mr-3">
|
|
<span className="text-sm text-gray-500 dark:text-white">{t("24_h")}</span>
|
|
</Switch.Label>
|
|
</Switch.Group>
|
|
</div>
|
|
</div>
|
|
<TimezoneSelect
|
|
id="timeZone"
|
|
value={selectedTimeZone}
|
|
onChange={(tz: ITimezoneOption) => setSelectedTimeZone(tz.value)}
|
|
className="focus:border-brand mt-1 mb-2 block w-full rounded-md border-gray-300 shadow-sm focus:ring-black sm:text-sm"
|
|
/>
|
|
</div>
|
|
) : null;
|
|
};
|
|
|
|
export default TimeOptions;
|