#4851: Always take timeformat on booking page from profile if user is logged in. Also hides timeformat toggle on booking page for logged in users. For non loggedin users we still infer by looking at browser timezone, after that we set a localstorage which we will look at, and which will get updated when the user updates the toggle in the timezone dropdown. (#4865)
This commit is contained in:
parent
4282adac4b
commit
0ebce77a7b
|
@ -10,9 +10,10 @@ type Props = {
|
|||
onSelectTimeZone: (selectedTimeZone: string) => void;
|
||||
onToggle24hClock: (is24hClock: boolean) => void;
|
||||
timeFormat: string;
|
||||
hideTimeFormatToggle?: boolean;
|
||||
};
|
||||
|
||||
const TimeOptions: FC<Props> = ({ onToggle24hClock, onSelectTimeZone, timeFormat }) => {
|
||||
const TimeOptions: FC<Props> = ({ onToggle24hClock, onSelectTimeZone, timeFormat, hideTimeFormatToggle }) => {
|
||||
const [selectedTimeZone, setSelectedTimeZone] = useState("");
|
||||
const [is24hClock, setIs24hClock] = useState(timeFormat === "HH:mm" && true);
|
||||
const { t } = useLocale();
|
||||
|
@ -36,6 +37,7 @@ const TimeOptions: FC<Props> = ({ onToggle24hClock, onSelectTimeZone, timeFormat
|
|||
<div className="dark:border-darkgray-300 dark:bg-darkgray-200 rounded-sm border border-gray-200 bg-white px-4 pt-4 pb-3 shadow-sm">
|
||||
<div className="mb-4 flex">
|
||||
<div className="text-sm font-medium text-gray-600 dark:text-white">{t("time_options")}</div>
|
||||
{!hideTimeFormatToggle && (
|
||||
<div className="ml-auto flex items-center">
|
||||
<label className="ltl:mr-3 mr-2 align-text-top text-sm font-medium text-neutral-700 ltr:ml-3 rtl:mr-3 dark:text-white">
|
||||
{t("am_pm")}
|
||||
|
@ -47,6 +49,7 @@ const TimeOptions: FC<Props> = ({ onToggle24hClock, onSelectTimeZone, timeFormat
|
|||
onCheckedChange={handle24hClockToggle}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<TimezoneSelect
|
||||
id="timeZone"
|
||||
|
|
|
@ -215,11 +215,13 @@ function TimezoneDropdown({
|
|||
onChangeTimeZone,
|
||||
timeZone,
|
||||
timeFormat,
|
||||
hideTimeFormatToggle,
|
||||
}: {
|
||||
onChangeTimeFormat: (newTimeFormat: string) => void;
|
||||
onChangeTimeZone: (newTimeZone: string) => void;
|
||||
timeZone?: string;
|
||||
timeFormat: string;
|
||||
hideTimeFormatToggle?: boolean;
|
||||
}) {
|
||||
const [isTimeOptionsOpen, setIsTimeOptionsOpen] = useState(false);
|
||||
|
||||
|
@ -261,6 +263,7 @@ function TimezoneDropdown({
|
|||
onSelectTimeZone={handleSelectTimeZone}
|
||||
onToggle24hClock={handleToggle24hClock}
|
||||
timeFormat={timeFormat}
|
||||
hideTimeFormatToggle={hideTimeFormatToggle}
|
||||
/>
|
||||
</Popover.Content>
|
||||
</Popover.Portal>
|
||||
|
@ -293,7 +296,14 @@ const useRouterQuery = <T extends string>(name: T) => {
|
|||
|
||||
export type Props = AvailabilityTeamPageProps | AvailabilityPageProps | DynamicAvailabilityPageProps;
|
||||
|
||||
const timeFormatTotimeFormatString = (timeFormat?: number | null) => {
|
||||
if (!timeFormat) return null;
|
||||
return timeFormat === 24 ? "HH:mm" : "h:mma";
|
||||
};
|
||||
|
||||
const AvailabilityPage = ({ profile, eventType }: Props) => {
|
||||
const { data: user } = trpc.useQuery(["viewer.me"]);
|
||||
const timeFormatFromProfile = timeFormatTotimeFormatString(user?.timeFormat);
|
||||
const router = useRouter();
|
||||
const isEmbed = useIsEmbed();
|
||||
const query = dateQuerySchema.parse(router.query);
|
||||
|
@ -306,7 +316,7 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
|
|||
const isBackgroundTransparent = useIsBackgroundTransparent();
|
||||
|
||||
const [timeZone, setTimeZone] = useState<string>();
|
||||
const [timeFormat, setTimeFormat] = useState(detectBrowserTimeFormat);
|
||||
const [timeFormat, setTimeFormat] = useState(timeFormatFromProfile || detectBrowserTimeFormat);
|
||||
const [isAvailableTimesVisible, setIsAvailableTimesVisible] = useState<boolean>();
|
||||
const [gateState, gateDispatcher] = useReducer(
|
||||
(state: GateState, newState: Partial<GateState>) => ({
|
||||
|
@ -357,9 +367,12 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
|
|||
onChangeTimeFormat={setTimeFormat}
|
||||
timeZone={timeZone}
|
||||
onChangeTimeZone={setTimeZone}
|
||||
// Currently we don't allow the user to change the timeformat when they're logged in,
|
||||
// the only way to change it is if they go to their profile.
|
||||
hideTimeFormatToggle={!!timeFormatFromProfile}
|
||||
/>
|
||||
),
|
||||
[timeZone, timeFormat]
|
||||
[timeZone, timeFormat, timeFormatFromProfile]
|
||||
);
|
||||
const rawSlug = profile.slug ? profile.slug.split("/") : [];
|
||||
if (rawSlug.length > 1) rawSlug.pop(); //team events have team name as slug, but user events have [user]/[type] as slug.
|
||||
|
|
Loading…
Reference in New Issue
Block a user