Refactors useLocale (#908)
* Removes unused component * Refactors useLocale We don't need to pass the locale prop everywhere * Fixes syntax error * Adds warning for missing localeProps * Simplify i18n utils * Update components/I18nLanguageHandler.tsx Co-authored-by: Mihai C <34626017+mihaic195@users.noreply.github.com> * Type fixes Co-authored-by: Mihai C <34626017+mihaic195@users.noreply.github.com>
This commit is contained in:
parent
7dd6fdde7a
commit
cfd70172f0
35 changed files with 366 additions and 440 deletions
|
@ -1,22 +0,0 @@
|
|||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
import React, { Children } from "react";
|
||||
|
||||
const ActiveLink = ({ children, activeClassName, ...props }) => {
|
||||
const { asPath } = useRouter();
|
||||
const child = Children.only(children);
|
||||
const childClassName = child.props.className || "";
|
||||
|
||||
const className =
|
||||
asPath === props.href || asPath === props.as
|
||||
? `${childClassName} ${activeClassName}`.trim()
|
||||
: childClassName;
|
||||
|
||||
return <Link {...props}>{React.cloneElement(child, { className })}</Link>;
|
||||
};
|
||||
|
||||
ActiveLink.defaultProps = {
|
||||
activeClassName: "active",
|
||||
} as Partial<Props>;
|
||||
|
||||
export default ActiveLink;
|
22
components/I18nLanguageHandler.tsx
Normal file
22
components/I18nLanguageHandler.tsx
Normal file
|
@ -0,0 +1,22 @@
|
|||
import { useTranslation } from "next-i18next";
|
||||
import { useRouter } from "next/router";
|
||||
|
||||
interface Props {
|
||||
localeProp: string;
|
||||
}
|
||||
|
||||
const I18nLanguageHandler = ({ localeProp }: Props): null => {
|
||||
const { i18n } = useTranslation("common");
|
||||
const router = useRouter();
|
||||
const { pathname } = router;
|
||||
if (!localeProp)
|
||||
console.warn(
|
||||
`You may forgot to return 'localeProp' from 'getServerSideProps' or 'getStaticProps' in ${pathname}`
|
||||
);
|
||||
if (i18n.language !== localeProp) {
|
||||
i18n.changeLanguage(localeProp);
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
export default I18nLanguageHandler;
|
|
@ -11,7 +11,6 @@ import { useSlots } from "@lib/hooks/useSlots";
|
|||
import Loader from "@components/Loader";
|
||||
|
||||
type AvailableTimesProps = {
|
||||
localeProp: string;
|
||||
workingHours: {
|
||||
days: number[];
|
||||
startTime: number;
|
||||
|
@ -29,7 +28,6 @@ type AvailableTimesProps = {
|
|||
};
|
||||
|
||||
const AvailableTimes: FC<AvailableTimesProps> = ({
|
||||
localeProp,
|
||||
date,
|
||||
eventLength,
|
||||
eventTypeId,
|
||||
|
@ -39,7 +37,7 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
|
|||
users,
|
||||
schedulingType,
|
||||
}) => {
|
||||
const { t } = useLocale({ localeProp: localeProp });
|
||||
const { t } = useLocale();
|
||||
const router = useRouter();
|
||||
const { rescheduleUid } = router.query;
|
||||
|
||||
|
@ -68,7 +66,11 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
|
|||
{!loading &&
|
||||
slots?.length > 0 &&
|
||||
slots.map((slot) => {
|
||||
const bookingUrl = {
|
||||
type BookingURL = {
|
||||
pathname: string;
|
||||
query: Record<string, string | number | string[] | undefined>;
|
||||
};
|
||||
const bookingUrl: BookingURL = {
|
||||
pathname: "book",
|
||||
query: {
|
||||
...router.query,
|
||||
|
@ -78,7 +80,7 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
|
|||
};
|
||||
|
||||
if (rescheduleUid) {
|
||||
bookingUrl.query.rescheduleUid = rescheduleUid;
|
||||
bookingUrl.query.rescheduleUid = rescheduleUid as string;
|
||||
}
|
||||
|
||||
if (schedulingType === SchedulingType.ROUND_ROBIN) {
|
||||
|
|
|
@ -6,7 +6,7 @@ import { useMutation } from "react-query";
|
|||
import { HttpError } from "@lib/core/http/error";
|
||||
import { inferQueryOutput, trpc } from "@lib/trpc";
|
||||
|
||||
import TableActions from "@components/ui/TableActions";
|
||||
import TableActions, { ActionType } from "@components/ui/TableActions";
|
||||
|
||||
type BookingItem = inferQueryOutput<"viewer.bookings">[number];
|
||||
|
||||
|
@ -34,7 +34,7 @@ function BookingListItem(booking: BookingItem) {
|
|||
const isUpcoming = new Date(booking.endTime) >= new Date();
|
||||
const isCancelled = booking.status === BookingStatus.CANCELLED;
|
||||
|
||||
const pendingActions = [
|
||||
const pendingActions: ActionType[] = [
|
||||
{
|
||||
id: "reject",
|
||||
label: "Reject",
|
||||
|
@ -52,7 +52,7 @@ function BookingListItem(booking: BookingItem) {
|
|||
},
|
||||
];
|
||||
|
||||
const bookedActions = [
|
||||
const bookedActions: ActionType[] = [
|
||||
{
|
||||
id: "cancel",
|
||||
label: "Cancel",
|
||||
|
|
|
@ -14,7 +14,6 @@ dayjs.extend(utc);
|
|||
dayjs.extend(timezone);
|
||||
|
||||
const DatePicker = ({
|
||||
localeProp,
|
||||
weekStart,
|
||||
onDatePicked,
|
||||
workingHours,
|
||||
|
@ -28,7 +27,7 @@ const DatePicker = ({
|
|||
periodCountCalendarDays,
|
||||
minimumBookingNotice,
|
||||
}) => {
|
||||
const { t } = useLocale({ localeProp: localeProp });
|
||||
const { t } = useLocale();
|
||||
const [days, setDays] = useState<({ disabled: boolean; date: number } | null)[]>([]);
|
||||
|
||||
const [selectedMonth, setSelectedMonth] = useState<number | null>(
|
||||
|
|
|
@ -9,7 +9,6 @@ import { useLocale } from "@lib/hooks/useLocale";
|
|||
import { is24h, timeZone } from "../../lib/clock";
|
||||
|
||||
type Props = {
|
||||
localeProp: string;
|
||||
onSelectTimeZone: (selectedTimeZone: string) => void;
|
||||
onToggle24hClock: (is24hClock: boolean) => void;
|
||||
};
|
||||
|
@ -17,7 +16,7 @@ type Props = {
|
|||
const TimeOptions: FC<Props> = (props) => {
|
||||
const [selectedTimeZone, setSelectedTimeZone] = useState("");
|
||||
const [is24hClock, setIs24hClock] = useState(false);
|
||||
const { t } = useLocale({ localeProp: props.localeProp });
|
||||
const { t } = useLocale();
|
||||
|
||||
useEffect(() => {
|
||||
setIs24hClock(is24h());
|
||||
|
|
|
@ -30,11 +30,11 @@ dayjs.extend(customParseFormat);
|
|||
|
||||
type Props = AvailabilityTeamPageProps | AvailabilityPageProps;
|
||||
|
||||
const AvailabilityPage = ({ profile, eventType, workingHours, localeProp }: Props) => {
|
||||
const AvailabilityPage = ({ profile, eventType, workingHours }: Props) => {
|
||||
const router = useRouter();
|
||||
const { rescheduleUid } = router.query;
|
||||
const { isReady } = useTheme(profile.theme);
|
||||
const { t, locale } = useLocale({ localeProp });
|
||||
const { t } = useLocale();
|
||||
|
||||
const selectedDate = useMemo(() => {
|
||||
const dateString = asStringOrNull(router.query.date);
|
||||
|
@ -188,7 +188,6 @@ const AvailabilityPage = ({ profile, eventType, workingHours, localeProp }: Prop
|
|||
<p className="mt-3 mb-8 text-gray-600 dark:text-gray-200">{eventType.description}</p>
|
||||
</div>
|
||||
<DatePicker
|
||||
localeProp={locale}
|
||||
date={selectedDate}
|
||||
periodType={eventType?.periodType}
|
||||
periodStartDate={eventType?.periodStartDate}
|
||||
|
@ -208,7 +207,6 @@ const AvailabilityPage = ({ profile, eventType, workingHours, localeProp }: Prop
|
|||
|
||||
{selectedDate && (
|
||||
<AvailableTimes
|
||||
localeProp={locale}
|
||||
workingHours={workingHours}
|
||||
timeFormat={timeFormat}
|
||||
minimumBookingNotice={eventType.minimumBookingNotice}
|
||||
|
@ -241,11 +239,7 @@ const AvailabilityPage = ({ profile, eventType, workingHours, localeProp }: Prop
|
|||
)}
|
||||
</Collapsible.Trigger>
|
||||
<Collapsible.Content>
|
||||
<TimeOptions
|
||||
localeProp={locale}
|
||||
onSelectTimeZone={handleSelectTimeZone}
|
||||
onToggle24hClock={handleToggle24hClock}
|
||||
/>
|
||||
<TimeOptions onSelectTimeZone={handleSelectTimeZone} onToggle24hClock={handleToggle24hClock} />
|
||||
</Collapsible.Content>
|
||||
</Collapsible.Root>
|
||||
);
|
||||
|
|
|
@ -13,8 +13,6 @@ import { stringify } from "querystring";
|
|||
import { useCallback, useEffect, useState } from "react";
|
||||
import { FormattedNumber, IntlProvider } from "react-intl";
|
||||
import { ReactMultiEmail } from "react-multi-email";
|
||||
import PhoneInput from "react-phone-number-input";
|
||||
import "react-phone-number-input/style.css";
|
||||
|
||||
import { createPaymentLink } from "@ee/lib/stripe/client";
|
||||
|
||||
|
@ -30,6 +28,7 @@ import { BookingCreateBody } from "@lib/types/booking";
|
|||
|
||||
import AvatarGroup from "@components/ui/AvatarGroup";
|
||||
import { Button } from "@components/ui/Button";
|
||||
import PhoneInput from "@components/ui/form/PhoneInput";
|
||||
|
||||
import { BookPageProps } from "../../../pages/[user]/book";
|
||||
import { TeamBookingPageProps } from "../../../pages/team/[slug]/book";
|
||||
|
@ -37,7 +36,7 @@ import { TeamBookingPageProps } from "../../../pages/team/[slug]/book";
|
|||
type BookingPageProps = BookPageProps | TeamBookingPageProps;
|
||||
|
||||
const BookingPage = (props: BookingPageProps) => {
|
||||
const { t } = useLocale({ localeProp: props.localeProp });
|
||||
const { t } = useLocale();
|
||||
const router = useRouter();
|
||||
const { rescheduleUid } = router.query;
|
||||
const { isReady } = useTheme(props.profile.theme);
|
||||
|
@ -319,16 +318,7 @@ const BookingPage = (props: BookingPageProps) => {
|
|||
{t("phone_number")}
|
||||
</label>
|
||||
<div className="mt-1">
|
||||
<PhoneInput
|
||||
name="phone"
|
||||
placeholder={t("enter_phone_number")}
|
||||
id="phone"
|
||||
required
|
||||
className="block w-full border-gray-300 rounded-md shadow-sm dark:bg-black dark:text-white dark:border-gray-900 focus:ring-black focus:border-black sm:text-sm"
|
||||
onChange={() => {
|
||||
/* DO NOT REMOVE: Callback required by PhoneInput, comment added to satisfy eslint:no-empty-function */
|
||||
}}
|
||||
/>
|
||||
<PhoneInput name="phone" placeholder={t("enter_phone_number")} id="phone" required />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
|
|
@ -9,7 +9,6 @@ import { DialogClose, DialogContent } from "@components/Dialog";
|
|||
import { Button } from "@components/ui/Button";
|
||||
|
||||
export type ConfirmationDialogContentProps = {
|
||||
localeProp: string;
|
||||
confirmBtnText?: string;
|
||||
cancelBtnText?: string;
|
||||
onConfirm?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
|
||||
|
@ -18,7 +17,7 @@ export type ConfirmationDialogContentProps = {
|
|||
};
|
||||
|
||||
export default function ConfirmationDialogContent(props: PropsWithChildren<ConfirmationDialogContentProps>) {
|
||||
const { t } = useLocale({ localeProp: props.localeProp });
|
||||
const { t } = useLocale();
|
||||
const {
|
||||
title,
|
||||
variety,
|
||||
|
|
|
@ -21,13 +21,12 @@ const eventTypeData = Prisma.validator<Prisma.EventTypeArgs>()({
|
|||
type EventType = Prisma.EventTypeGetPayload<typeof eventTypeData>;
|
||||
|
||||
export type EventTypeDescriptionProps = {
|
||||
localeProp: string;
|
||||
eventType: EventType;
|
||||
className?: string;
|
||||
};
|
||||
|
||||
export const EventTypeDescription = ({ localeProp, eventType, className }: EventTypeDescriptionProps) => {
|
||||
const { t } = useLocale({ localeProp });
|
||||
export const EventTypeDescription = ({ eventType, className }: EventTypeDescriptionProps) => {
|
||||
const { t } = useLocale();
|
||||
|
||||
return (
|
||||
<>
|
||||
|
|
183
components/eventtype/EventTypeList.tsx
Normal file
183
components/eventtype/EventTypeList.tsx
Normal file
|
@ -0,0 +1,183 @@
|
|||
// TODO: replace headlessui with radix-ui
|
||||
import { Menu, Transition } from "@headlessui/react";
|
||||
import { DotsHorizontalIcon, ExternalLinkIcon, LinkIcon } from "@heroicons/react/solid";
|
||||
import Link from "next/link";
|
||||
import React, { Fragment } from "react";
|
||||
|
||||
import classNames from "@lib/classNames";
|
||||
import { useLocale } from "@lib/hooks/useLocale";
|
||||
import showToast from "@lib/notification";
|
||||
|
||||
import { Tooltip } from "@components/Tooltip";
|
||||
import EventTypeDescription from "@components/eventtype/EventTypeDescription";
|
||||
import AvatarGroup from "@components/ui/AvatarGroup";
|
||||
|
||||
interface Props {
|
||||
profile: { slug: string };
|
||||
readOnly: boolean;
|
||||
types: {
|
||||
$disabled: boolean;
|
||||
hidden: boolean;
|
||||
id: number;
|
||||
slug: string;
|
||||
title: string;
|
||||
users: {
|
||||
name: string;
|
||||
avatar: string;
|
||||
}[];
|
||||
};
|
||||
}
|
||||
|
||||
const EventTypeList = ({ readOnly, types, profile }: Props): JSX.Element => {
|
||||
const { t } = useLocale();
|
||||
return (
|
||||
<div className="mb-16 -mx-4 overflow-hidden bg-white border border-gray-200 rounded-sm sm:mx-0">
|
||||
<ul className="divide-y divide-neutral-200" data-testid="event-types">
|
||||
{types.map((type) => (
|
||||
<li
|
||||
key={type.id}
|
||||
className={classNames(
|
||||
type.$disabled && "opacity-30 cursor-not-allowed pointer-events-none select-none"
|
||||
)}
|
||||
data-disabled={type.$disabled ? 1 : 0}>
|
||||
<div
|
||||
className={classNames(
|
||||
"hover:bg-neutral-50 flex justify-between items-center ",
|
||||
type.$disabled && "pointer-events-none"
|
||||
)}>
|
||||
<div className="flex items-center justify-between w-full px-4 py-4 sm:px-6 hover:bg-neutral-50">
|
||||
<Link href={"/event-types/" + type.id}>
|
||||
<a className="flex-grow text-sm truncate">
|
||||
<div>
|
||||
<span className="font-medium truncate text-neutral-900">{type.title}</span>
|
||||
{type.hidden && (
|
||||
<span className="ml-2 inline items-center px-1.5 py-0.5 rounded-sm text-xs font-medium bg-yellow-100 text-yellow-800">
|
||||
{t("hidden")}
|
||||
</span>
|
||||
)}
|
||||
{readOnly && (
|
||||
<span className="ml-2 inline items-center px-1.5 py-0.5 rounded-sm text-xs font-medium bg-gray-100 text-gray-800">
|
||||
{t("readonly")}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<EventTypeDescription eventType={type} />
|
||||
</a>
|
||||
</Link>
|
||||
|
||||
<div className="flex-shrink-0 hidden mt-4 sm:flex sm:mt-0 sm:ml-5">
|
||||
<div className="flex items-center space-x-2 overflow-hidden">
|
||||
{type.users?.length > 1 && (
|
||||
<AvatarGroup
|
||||
size={8}
|
||||
truncateAfter={4}
|
||||
items={type.users.map((organizer) => ({
|
||||
alt: organizer.name || "",
|
||||
image: organizer.avatar || "",
|
||||
}))}
|
||||
/>
|
||||
)}
|
||||
<Tooltip content="Preview">
|
||||
<a
|
||||
href={`${process.env.NEXT_PUBLIC_APP_URL}/${profile.slug}/${type.slug}`}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="btn-icon">
|
||||
<ExternalLinkIcon className="w-5 h-5 group-hover:text-black" />
|
||||
</a>
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip content="Copy link">
|
||||
<button
|
||||
onClick={() => {
|
||||
showToast("Link copied!", "success");
|
||||
navigator.clipboard.writeText(
|
||||
`${process.env.NEXT_PUBLIC_APP_URL}/${profile.slug}/${type.slug}`
|
||||
);
|
||||
}}
|
||||
className="btn-icon">
|
||||
<LinkIcon className="w-5 h-5 group-hover:text-black" />
|
||||
</button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-shrink-0 mr-5 sm:hidden">
|
||||
<Menu as="div" className="inline-block text-left">
|
||||
{({ open }) => (
|
||||
<>
|
||||
<div>
|
||||
<Menu.Button className="p-2 mt-1 border border-transparent text-neutral-400 hover:border-gray-200">
|
||||
<span className="sr-only">{t("open_options")}</span>
|
||||
<DotsHorizontalIcon className="w-5 h-5" aria-hidden="true" />
|
||||
</Menu.Button>
|
||||
</div>
|
||||
|
||||
<Transition
|
||||
show={open}
|
||||
as={Fragment}
|
||||
enter="transition ease-out duration-100"
|
||||
enterFrom="transform opacity-0 scale-95"
|
||||
enterTo="transform opacity-100 scale-100"
|
||||
leave="transition ease-in duration-75"
|
||||
leaveFrom="transform opacity-100 scale-100"
|
||||
leaveTo="transform opacity-0 scale-95">
|
||||
<Menu.Items
|
||||
static
|
||||
className="absolute right-0 z-10 w-56 mt-2 origin-top-right bg-white divide-y rounded-sm shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none divide-neutral-100">
|
||||
<div className="py-1">
|
||||
<Menu.Item>
|
||||
{({ active }) => (
|
||||
<a
|
||||
href={`${process.env.NEXT_PUBLIC_APP_URL}/${profile.slug}/${type.slug}`}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className={classNames(
|
||||
active ? "bg-neutral-100 text-neutral-900" : "text-neutral-700",
|
||||
"group flex items-center px-4 py-2 text-sm font-medium"
|
||||
)}>
|
||||
<ExternalLinkIcon
|
||||
className="w-4 h-4 mr-3 text-neutral-400 group-hover:text-neutral-500"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
{t("preview")}
|
||||
</a>
|
||||
)}
|
||||
</Menu.Item>
|
||||
<Menu.Item>
|
||||
{({ active }) => (
|
||||
<button
|
||||
onClick={() => {
|
||||
showToast("Link copied!", "success");
|
||||
navigator.clipboard.writeText(
|
||||
`${process.env.NEXT_PUBLIC_APP_URL}/${profile.slug}/${type.slug}`
|
||||
);
|
||||
}}
|
||||
className={classNames(
|
||||
active ? "bg-neutral-100 text-neutral-900" : "text-neutral-700",
|
||||
"group flex items-center px-4 py-2 text-sm w-full font-medium"
|
||||
)}>
|
||||
<LinkIcon
|
||||
className="w-4 h-4 mr-3 text-neutral-400 group-hover:text-neutral-500"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
{t("copy_link")}
|
||||
</button>
|
||||
)}
|
||||
</Menu.Item>
|
||||
</div>
|
||||
</Menu.Items>
|
||||
</Transition>
|
||||
</>
|
||||
)}
|
||||
</Menu>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default EventTypeList;
|
58
components/eventtype/EventTypeListHeading.tsx
Normal file
58
components/eventtype/EventTypeListHeading.tsx
Normal file
|
@ -0,0 +1,58 @@
|
|||
// TODO: replace headlessui with radix-ui
|
||||
import { UsersIcon } from "@heroicons/react/solid";
|
||||
import Link from "next/link";
|
||||
import React from "react";
|
||||
|
||||
import Avatar from "@components/ui/Avatar";
|
||||
import Badge from "@components/ui/Badge";
|
||||
|
||||
interface Props {
|
||||
profile: {
|
||||
slug?: string | null;
|
||||
name?: string | null;
|
||||
image?: string | null;
|
||||
};
|
||||
membershipCount: number;
|
||||
}
|
||||
|
||||
const EventTypeListHeading = ({ profile, membershipCount }: Props): JSX.Element => (
|
||||
<div className="flex mb-4">
|
||||
<Link href="/settings/teams">
|
||||
<a>
|
||||
<Avatar
|
||||
alt={profile?.name || ""}
|
||||
imageSrc={profile?.image || undefined}
|
||||
size={8}
|
||||
className="inline mt-1 mr-2"
|
||||
/>
|
||||
</a>
|
||||
</Link>
|
||||
<div>
|
||||
<Link href="/settings/teams">
|
||||
<a className="font-bold">{profile?.name || ""}</a>
|
||||
</Link>
|
||||
{membershipCount && (
|
||||
<span className="relative ml-2 text-xs text-neutral-500 -top-px">
|
||||
<Link href="/settings/teams">
|
||||
<a>
|
||||
<Badge variant="gray">
|
||||
<UsersIcon className="inline w-3 h-3 mr-1 -mt-px" />
|
||||
{membershipCount}
|
||||
</Badge>
|
||||
</a>
|
||||
</Link>
|
||||
</span>
|
||||
)}
|
||||
{profile?.slug && (
|
||||
<Link href={`${process.env.NEXT_PUBLIC_APP_URL}/${profile.slug}`}>
|
||||
<a className="block text-xs text-neutral-500">{`${process.env.NEXT_PUBLIC_APP_URL?.replace(
|
||||
"https://",
|
||||
""
|
||||
)}/${profile.slug}`}</a>
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
export default EventTypeListHeading;
|
|
@ -5,13 +5,13 @@ import { useLocale } from "@lib/hooks/useLocale";
|
|||
|
||||
import Modal from "@components/Modal";
|
||||
|
||||
const ChangePasswordSection = ({ localeProp }: { localeProp: string }) => {
|
||||
const ChangePasswordSection = () => {
|
||||
const [oldPassword, setOldPassword] = useState("");
|
||||
const [newPassword, setNewPassword] = useState("");
|
||||
const [successModalOpen, setSuccessModalOpen] = useState(false);
|
||||
const [errorMessage, setErrorMessage] = useState<string | null>(null);
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const { t } = useLocale({ localeProp });
|
||||
const { t } = useLocale();
|
||||
|
||||
const errorMessages: { [key: string]: string } = {
|
||||
[ErrorCode.IncorrectPassword]: t("current_incorrect_password"),
|
||||
|
|
|
@ -10,23 +10,17 @@ import TwoFactorAuthAPI from "./TwoFactorAuthAPI";
|
|||
import TwoFactorModalHeader from "./TwoFactorModalHeader";
|
||||
|
||||
interface DisableTwoFactorAuthModalProps {
|
||||
/**
|
||||
* Called when the user closes the modal without disabling two-factor auth
|
||||
*/
|
||||
/** Called when the user closes the modal without disabling two-factor auth */
|
||||
onCancel: () => void;
|
||||
|
||||
/**
|
||||
* Called when the user disables two-factor auth
|
||||
*/
|
||||
/** Called when the user disables two-factor auth */
|
||||
onDisable: () => void;
|
||||
localeProp: string;
|
||||
}
|
||||
|
||||
const DisableTwoFactorAuthModal = ({ onDisable, onCancel, localeProp }: DisableTwoFactorAuthModalProps) => {
|
||||
const DisableTwoFactorAuthModal = ({ onDisable, onCancel }: DisableTwoFactorAuthModalProps) => {
|
||||
const [password, setPassword] = useState("");
|
||||
const [isDisabling, setIsDisabling] = useState(false);
|
||||
const [errorMessage, setErrorMessage] = useState<string | null>(null);
|
||||
const { t } = useLocale({ localeProp });
|
||||
const { t } = useLocale();
|
||||
|
||||
async function handleDisable(e: SyntheticEvent) {
|
||||
e.preventDefault();
|
||||
|
|
|
@ -19,7 +19,6 @@ interface EnableTwoFactorModalProps {
|
|||
* Called when the user enables two-factor auth
|
||||
*/
|
||||
onEnable: () => void;
|
||||
localeProp: string;
|
||||
}
|
||||
|
||||
enum SetupStep {
|
||||
|
@ -47,7 +46,7 @@ const WithStep = ({
|
|||
return step === current ? children : null;
|
||||
};
|
||||
|
||||
const EnableTwoFactorModal = ({ onEnable, onCancel, localeProp }: EnableTwoFactorModalProps) => {
|
||||
const EnableTwoFactorModal = ({ onEnable, onCancel }: EnableTwoFactorModalProps) => {
|
||||
const [step, setStep] = useState(SetupStep.ConfirmPassword);
|
||||
const [password, setPassword] = useState("");
|
||||
const [totpCode, setTotpCode] = useState("");
|
||||
|
@ -55,7 +54,7 @@ const EnableTwoFactorModal = ({ onEnable, onCancel, localeProp }: EnableTwoFacto
|
|||
const [secret, setSecret] = useState("");
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [errorMessage, setErrorMessage] = useState<string | null>(null);
|
||||
const { t } = useLocale({ localeProp });
|
||||
const { t } = useLocale();
|
||||
|
||||
async function handleSetup(e: SyntheticEvent) {
|
||||
e.preventDefault();
|
||||
|
|
|
@ -8,17 +8,11 @@ import Button from "@components/ui/Button";
|
|||
import DisableTwoFactorModal from "./DisableTwoFactorModal";
|
||||
import EnableTwoFactorModal from "./EnableTwoFactorModal";
|
||||
|
||||
const TwoFactorAuthSection = ({
|
||||
twoFactorEnabled,
|
||||
localeProp,
|
||||
}: {
|
||||
twoFactorEnabled: boolean;
|
||||
localeProp: string;
|
||||
}) => {
|
||||
const TwoFactorAuthSection = ({ twoFactorEnabled }: { twoFactorEnabled: boolean }) => {
|
||||
const [enabled, setEnabled] = useState(twoFactorEnabled);
|
||||
const [enableModalOpen, setEnableModalOpen] = useState(false);
|
||||
const [disableModalOpen, setDisableModalOpen] = useState(false);
|
||||
const { t, locale } = useLocale({ localeProp });
|
||||
const { t } = useLocale();
|
||||
|
||||
return (
|
||||
<>
|
||||
|
@ -39,7 +33,6 @@ const TwoFactorAuthSection = ({
|
|||
|
||||
{enableModalOpen && (
|
||||
<EnableTwoFactorModal
|
||||
localeProp={locale}
|
||||
onEnable={() => {
|
||||
setEnabled(true);
|
||||
setEnableModalOpen(false);
|
||||
|
@ -50,7 +43,6 @@ const TwoFactorAuthSection = ({
|
|||
|
||||
{disableModalOpen && (
|
||||
<DisableTwoFactorModal
|
||||
localeProp={locale}
|
||||
onDisable={() => {
|
||||
setEnabled(false);
|
||||
setDisableModalOpen(false);
|
||||
|
|
|
@ -17,11 +17,7 @@ import ErrorAlert from "@components/ui/alerts/Error";
|
|||
|
||||
import MemberList from "./MemberList";
|
||||
|
||||
export default function EditTeam(props: {
|
||||
localeProp: string;
|
||||
team: Team | undefined | null;
|
||||
onCloseEdit: () => void;
|
||||
}) {
|
||||
export default function EditTeam(props: { team: Team | undefined | null; onCloseEdit: () => void }) {
|
||||
const [members, setMembers] = useState([]);
|
||||
|
||||
const nameRef = useRef<HTMLInputElement>() as React.MutableRefObject<HTMLInputElement>;
|
||||
|
@ -35,7 +31,7 @@ export default function EditTeam(props: {
|
|||
const [inviteModalTeam, setInviteModalTeam] = useState<Team | null | undefined>();
|
||||
const [errorMessage, setErrorMessage] = useState("");
|
||||
const [imageSrc, setImageSrc] = useState<string>("");
|
||||
const { t, locale } = useLocale({ localeProp: props.localeProp });
|
||||
const { t } = useLocale();
|
||||
|
||||
const loadMembers = () =>
|
||||
fetch("/api/teams/" + props.team?.id + "/membership")
|
||||
|
@ -235,12 +231,7 @@ export default function EditTeam(props: {
|
|||
</div>
|
||||
<div>
|
||||
{!!members.length && (
|
||||
<MemberList
|
||||
localeProp={locale}
|
||||
members={members}
|
||||
onRemoveMember={onRemoveMember}
|
||||
onChange={loadMembers}
|
||||
/>
|
||||
<MemberList members={members} onRemoveMember={onRemoveMember} onChange={loadMembers} />
|
||||
)}
|
||||
<hr className="mt-6" />
|
||||
</div>
|
||||
|
@ -278,7 +269,6 @@ export default function EditTeam(props: {
|
|||
{t("disband_team")}
|
||||
</DialogTrigger>
|
||||
<ConfirmationDialogContent
|
||||
localeProp={locale}
|
||||
variety="danger"
|
||||
title={t("disband_team")}
|
||||
confirmBtnText={t("confirm_disband_team")}
|
||||
|
@ -305,11 +295,7 @@ export default function EditTeam(props: {
|
|||
handleClose={closeSuccessModal}
|
||||
/>
|
||||
{showMemberInvitationModal && (
|
||||
<MemberInvitationModal
|
||||
localeProp={locale}
|
||||
team={inviteModalTeam}
|
||||
onExit={onMemberInvitationModalExit}
|
||||
/>
|
||||
<MemberInvitationModal team={inviteModalTeam} onExit={onMemberInvitationModalExit} />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -6,13 +6,9 @@ import { Team } from "@lib/team";
|
|||
|
||||
import Button from "@components/ui/Button";
|
||||
|
||||
export default function MemberInvitationModal(props: {
|
||||
localeProp: string;
|
||||
team: Team | undefined | null;
|
||||
onExit: () => void;
|
||||
}) {
|
||||
export default function MemberInvitationModal(props: { team: Team | undefined | null; onExit: () => void }) {
|
||||
const [errorMessage, setErrorMessage] = useState("");
|
||||
const { t } = useLocale({ localeProp: props.localeProp });
|
||||
const { t } = useLocale();
|
||||
|
||||
const handleError = async (res: Response) => {
|
||||
const responseData = await res.json();
|
||||
|
|
|
@ -1,16 +1,12 @@
|
|||
import { useLocale } from "@lib/hooks/useLocale";
|
||||
import { Member } from "@lib/member";
|
||||
|
||||
import MemberListItem from "./MemberListItem";
|
||||
|
||||
export default function MemberList(props: {
|
||||
localeProp: string;
|
||||
members: Member[];
|
||||
onRemoveMember: (text: Member) => void;
|
||||
onChange: (text: string) => void;
|
||||
}) {
|
||||
const { locale } = useLocale({ localeProp: props.localeProp });
|
||||
|
||||
const selectAction = (action: string, member: Member) => {
|
||||
switch (action) {
|
||||
case "remove":
|
||||
|
@ -24,7 +20,6 @@ export default function MemberList(props: {
|
|||
<ul className="px-4 mb-2 bg-white border divide-y divide-gray-200 rounded">
|
||||
{props.members.map((member) => (
|
||||
<MemberListItem
|
||||
localeProp={locale}
|
||||
onChange={props.onChange}
|
||||
key={member.id}
|
||||
member={member}
|
||||
|
|
|
@ -12,13 +12,12 @@ import Button from "@components/ui/Button";
|
|||
import Dropdown, { DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../ui/Dropdown";
|
||||
|
||||
export default function MemberListItem(props: {
|
||||
localeProp: string;
|
||||
member: Member;
|
||||
onActionSelect: (text: string) => void;
|
||||
onChange: (text: string) => void;
|
||||
}) {
|
||||
const [member] = useState(props.member);
|
||||
const { t, locale } = useLocale({ localeProp: props.localeProp });
|
||||
const { t } = useLocale();
|
||||
|
||||
return (
|
||||
member && (
|
||||
|
@ -80,7 +79,6 @@ export default function MemberListItem(props: {
|
|||
</Button>
|
||||
</DialogTrigger>
|
||||
<ConfirmationDialogContent
|
||||
localeProp={locale}
|
||||
variety="danger"
|
||||
title={t("remove_member")}
|
||||
confirmBtnText={t("confirm_remove_member")}
|
||||
|
|
|
@ -1,16 +1,12 @@
|
|||
import { useLocale } from "@lib/hooks/useLocale";
|
||||
import { Team } from "@lib/team";
|
||||
|
||||
import TeamListItem from "./TeamListItem";
|
||||
|
||||
export default function TeamList(props: {
|
||||
localeProp: string;
|
||||
teams: Team[];
|
||||
onChange: () => void;
|
||||
onEditTeam: (text: Team) => void;
|
||||
}) {
|
||||
const { locale } = useLocale({ localeProp: props.localeProp });
|
||||
|
||||
const selectAction = (action: string, team: Team) => {
|
||||
switch (action) {
|
||||
case "edit":
|
||||
|
@ -34,7 +30,6 @@ export default function TeamList(props: {
|
|||
<ul className="px-4 mb-2 bg-white border divide-y divide-gray-200 rounded">
|
||||
{props.teams.map((team: Team) => (
|
||||
<TeamListItem
|
||||
localeProp={locale}
|
||||
onChange={props.onChange}
|
||||
key={team.id}
|
||||
team={team}
|
||||
|
|
|
@ -31,14 +31,13 @@ interface Team {
|
|||
}
|
||||
|
||||
export default function TeamListItem(props: {
|
||||
localeProp: string;
|
||||
onChange: () => void;
|
||||
key: number;
|
||||
team: Team;
|
||||
onActionSelect: (text: string) => void;
|
||||
}) {
|
||||
const [team, setTeam] = useState<Team | null>(props.team);
|
||||
const { t, locale } = useLocale({ localeProp: props.localeProp });
|
||||
const { t } = useLocale();
|
||||
|
||||
const acceptInvite = () => invitationResponse(true);
|
||||
const declineInvite = () => invitationResponse(false);
|
||||
|
@ -155,7 +154,6 @@ export default function TeamListItem(props: {
|
|||
</Button>
|
||||
</DialogTrigger>
|
||||
<ConfirmationDialogContent
|
||||
localeProp={locale}
|
||||
variety="danger"
|
||||
title="Disband Team"
|
||||
confirmBtnText={t("confirm_disband_team")}
|
||||
|
|
|
@ -10,8 +10,8 @@ import Avatar from "@components/ui/Avatar";
|
|||
import Button from "@components/ui/Button";
|
||||
import Text from "@components/ui/Text";
|
||||
|
||||
const Team = ({ team, localeProp }) => {
|
||||
const { t } = useLocale({ localeProp: localeProp });
|
||||
const Team = ({ team }) => {
|
||||
const { t } = useLocale();
|
||||
|
||||
const Member = ({ member }) => {
|
||||
const classes = classnames(
|
||||
|
|
|
@ -7,7 +7,7 @@ import { SVGComponent } from "@lib/types/SVGComponent";
|
|||
|
||||
import Button from "./Button";
|
||||
|
||||
type ActionType = {
|
||||
export type ActionType = {
|
||||
id: string;
|
||||
icon: SVGComponent;
|
||||
label: string;
|
||||
|
|
|
@ -4,7 +4,7 @@ import "react-phone-number-input/style.css";
|
|||
|
||||
import classNames from "@lib/classNames";
|
||||
|
||||
export const PhoneInput = (props) => (
|
||||
export const PhoneInput = (props: any /* FIXME */) => (
|
||||
<BasePhoneInput
|
||||
{...props}
|
||||
className={classNames(
|
||||
|
|
|
@ -15,7 +15,7 @@ export function getLocaleFromHeaders(req: IncomingMessage): string {
|
|||
|
||||
export const getOrSetUserLocaleFromHeaders = async (req: IncomingMessage): Promise<string> => {
|
||||
const session = await getSession({ req });
|
||||
const preferredLocale = parser.pick(i18n.locales, req.headers["accept-language"]) as Maybe<string>;
|
||||
const preferredLocale = getLocaleFromHeaders(req);
|
||||
|
||||
if (session?.user?.id) {
|
||||
const user = await prisma.user.findUnique({
|
||||
|
@ -31,32 +31,17 @@ export const getOrSetUserLocaleFromHeaders = async (req: IncomingMessage): Promi
|
|||
return user.locale;
|
||||
}
|
||||
|
||||
if (preferredLocale) {
|
||||
await prisma.user.update({
|
||||
where: {
|
||||
id: session.user.id,
|
||||
},
|
||||
data: {
|
||||
locale: preferredLocale,
|
||||
},
|
||||
});
|
||||
} else {
|
||||
await prisma.user.update({
|
||||
where: {
|
||||
id: session.user.id,
|
||||
},
|
||||
data: {
|
||||
locale: i18n.defaultLocale,
|
||||
},
|
||||
});
|
||||
}
|
||||
await prisma.user.update({
|
||||
where: {
|
||||
id: session.user.id,
|
||||
},
|
||||
data: {
|
||||
locale: preferredLocale,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
if (preferredLocale) {
|
||||
return preferredLocale;
|
||||
}
|
||||
|
||||
return i18n.defaultLocale;
|
||||
return preferredLocale;
|
||||
};
|
||||
|
||||
interface localeType {
|
||||
|
|
|
@ -1,19 +1,10 @@
|
|||
import { useTranslation } from "next-i18next";
|
||||
|
||||
type LocaleProp = {
|
||||
localeProp: string;
|
||||
};
|
||||
|
||||
export const useLocale = (props: LocaleProp) => {
|
||||
export const useLocale = () => {
|
||||
const { i18n, t } = useTranslation("common");
|
||||
|
||||
if (i18n.language !== props.localeProp) {
|
||||
i18n.changeLanguage(props.localeProp);
|
||||
}
|
||||
|
||||
return {
|
||||
i18n,
|
||||
locale: props.localeProp,
|
||||
t,
|
||||
};
|
||||
};
|
||||
|
|
|
@ -16,8 +16,8 @@ import Avatar from "@components/ui/Avatar";
|
|||
|
||||
export default function User(props: inferSSRProps<typeof getServerSideProps>) {
|
||||
const { isReady } = useTheme(props.user.theme);
|
||||
const { user, localeProp, eventTypes } = props;
|
||||
const { t, locale } = useLocale({ localeProp });
|
||||
const { user, eventTypes } = props;
|
||||
const { t } = useLocale();
|
||||
|
||||
return (
|
||||
<>
|
||||
|
@ -50,7 +50,7 @@ export default function User(props: inferSSRProps<typeof getServerSideProps>) {
|
|||
<Link href={`/${user.username}/${type.slug}`}>
|
||||
<a className="block px-6 py-4">
|
||||
<h2 className="font-semibold text-neutral-900 dark:text-white">{type.title}</h2>
|
||||
<EventTypeDescription localeProp={locale} eventType={type} />
|
||||
<EventTypeDescription eventType={type} />
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
|
|
|
@ -11,6 +11,8 @@ import superjson from "superjson";
|
|||
import AppProviders from "@lib/app-providers";
|
||||
import { seoConfig } from "@lib/config/next-seo.config";
|
||||
|
||||
import I18nLanguageHandler from "@components/I18nLanguageHandler";
|
||||
|
||||
import type { AppRouter } from "@server/routers/_app";
|
||||
|
||||
import "../styles/globals.css";
|
||||
|
@ -26,6 +28,7 @@ function MyApp(props: AppProps) {
|
|||
return (
|
||||
<AppProviders {...props}>
|
||||
<DefaultSeo {...seoConfig.defaultNextSeo} />
|
||||
<I18nLanguageHandler localeProp={pageProps.localeProp} />
|
||||
<Component {...pageProps} err={err} />
|
||||
</AppProviders>
|
||||
);
|
||||
|
|
|
@ -85,7 +85,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
|
|||
const { eventType, locationOptions, availability, team, teamMembers, hasPaymentIntegration, currency } =
|
||||
props;
|
||||
|
||||
const { t, locale } = useLocale({ localeProp: props.localeProp });
|
||||
const { t } = useLocale();
|
||||
const router = useRouter();
|
||||
const [successModalOpen, setSuccessModalOpen] = useState(false);
|
||||
|
||||
|
@ -992,7 +992,6 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
|
|||
{t("delete")}
|
||||
</DialogTrigger>
|
||||
<ConfirmationDialogContent
|
||||
localeProp={locale}
|
||||
variety="danger"
|
||||
title={t("delete_event_type")}
|
||||
confirmBtnText={t("confirm_delete_event_type")}
|
||||
|
|
|
@ -1,28 +1,18 @@
|
|||
// TODO: replace headlessui with radix-ui
|
||||
import { Menu, Transition } from "@headlessui/react";
|
||||
import {
|
||||
ChevronDownIcon,
|
||||
DotsHorizontalIcon,
|
||||
ExternalLinkIcon,
|
||||
LinkIcon,
|
||||
PlusIcon,
|
||||
UsersIcon,
|
||||
} from "@heroicons/react/solid";
|
||||
import { SchedulingType, Prisma } from "@prisma/client";
|
||||
import { ChevronDownIcon, PlusIcon } from "@heroicons/react/solid";
|
||||
import { Prisma, SchedulingType } from "@prisma/client";
|
||||
import { GetServerSidePropsContext } from "next";
|
||||
import { serverSideTranslations } from "next-i18next/serverSideTranslations";
|
||||
import Head from "next/head";
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
import React, { Fragment, useRef } from "react";
|
||||
import { useMutation } from "react-query";
|
||||
|
||||
import { asStringOrNull } from "@lib/asStringOrNull";
|
||||
import { getSession } from "@lib/auth";
|
||||
import classNames from "@lib/classNames";
|
||||
import { HttpError } from "@lib/core/http/error";
|
||||
import { getOrSetUserLocaleFromHeaders } from "@lib/core/i18n/i18n.utils";
|
||||
import { shouldShowOnboarding, ONBOARDING_NEXT_REDIRECT } from "@lib/getting-started";
|
||||
import { ONBOARDING_NEXT_REDIRECT, shouldShowOnboarding } from "@lib/getting-started";
|
||||
import { useLocale } from "@lib/hooks/useLocale";
|
||||
import { useToggleQuery } from "@lib/hooks/useToggleQuery";
|
||||
import createEventType from "@lib/mutations/event-types/create-event-type";
|
||||
|
@ -32,12 +22,10 @@ import { inferSSRProps } from "@lib/types/inferSSRProps";
|
|||
|
||||
import { Dialog, DialogClose, DialogContent } from "@components/Dialog";
|
||||
import Shell from "@components/Shell";
|
||||
import { Tooltip } from "@components/Tooltip";
|
||||
import EventTypeDescription from "@components/eventtype/EventTypeDescription";
|
||||
import EventTypeList from "@components/eventtype/EventTypeList";
|
||||
import EventTypeListHeading from "@components/eventtype/EventTypeListHeading";
|
||||
import { Alert } from "@components/ui/Alert";
|
||||
import Avatar from "@components/ui/Avatar";
|
||||
import AvatarGroup from "@components/ui/AvatarGroup";
|
||||
import Badge from "@components/ui/Badge";
|
||||
import { Button } from "@components/ui/Button";
|
||||
import Dropdown, {
|
||||
DropdownMenuContent,
|
||||
|
@ -50,12 +38,10 @@ import * as RadioArea from "@components/ui/form/radio-area";
|
|||
import UserCalendarIllustration from "@components/ui/svg/UserCalendarIllustration";
|
||||
|
||||
type PageProps = inferSSRProps<typeof getServerSideProps>;
|
||||
type EventType = PageProps["eventTypes"][number];
|
||||
type Profile = PageProps["profiles"][number];
|
||||
type MembershipCount = EventType["metadata"]["membershipCount"];
|
||||
|
||||
const EventTypesPage = (props: PageProps) => {
|
||||
const { t, locale } = useLocale({ localeProp: props.localeProp });
|
||||
const { t } = useLocale();
|
||||
|
||||
const CreateFirstEventTypeView = () => (
|
||||
<div className="md:py-20">
|
||||
|
@ -63,218 +49,11 @@ const EventTypesPage = (props: PageProps) => {
|
|||
<div className="block mx-auto text-center md:max-w-screen-sm">
|
||||
<h3 className="mt-2 text-xl font-bold text-neutral-900">{t("new_event_type_heading")}</h3>
|
||||
<p className="mt-1 mb-2 text-md text-neutral-600">{t("new_event_type_description")}</p>
|
||||
<CreateNewEventDialog
|
||||
localeProp={locale}
|
||||
canAddEvents={props.canAddEvents}
|
||||
profiles={props.profiles}
|
||||
/>
|
||||
<CreateNewEventDialog canAddEvents={props.canAddEvents} profiles={props.profiles} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const EventTypeListHeading = ({
|
||||
profile,
|
||||
membershipCount,
|
||||
}: {
|
||||
profile?: Profile;
|
||||
membershipCount: MembershipCount;
|
||||
}) => (
|
||||
<div className="flex mb-4">
|
||||
<Link href="/settings/teams">
|
||||
<a>
|
||||
<Avatar
|
||||
displayName={profile?.name || ""}
|
||||
imageSrc={profile?.image || undefined}
|
||||
size={8}
|
||||
className="inline mt-1 mr-2"
|
||||
/>
|
||||
</a>
|
||||
</Link>
|
||||
<div>
|
||||
<Link href="/settings/teams">
|
||||
<a className="font-bold">{profile?.name || ""}</a>
|
||||
</Link>
|
||||
{membershipCount && (
|
||||
<span className="relative ml-2 text-xs text-neutral-500 -top-px">
|
||||
<Link href="/settings/teams">
|
||||
<a>
|
||||
<Badge variant="gray">
|
||||
<UsersIcon className="inline w-3 h-3 mr-1 -mt-px" />
|
||||
{membershipCount}
|
||||
</Badge>
|
||||
</a>
|
||||
</Link>
|
||||
</span>
|
||||
)}
|
||||
{profile?.slug && (
|
||||
<Link href={`${process.env.NEXT_PUBLIC_APP_URL}/${profile.slug}`}>
|
||||
<a className="block text-xs text-neutral-500">{`${process.env.NEXT_PUBLIC_APP_URL?.replace(
|
||||
"https://",
|
||||
""
|
||||
)}/${profile.slug}`}</a>
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const EventTypeList = ({
|
||||
readOnly,
|
||||
types,
|
||||
profile,
|
||||
}: {
|
||||
profile: PageProps["profiles"][number];
|
||||
readOnly: boolean;
|
||||
types: EventType["eventTypes"];
|
||||
}) => (
|
||||
<div className="mb-16 -mx-4 overflow-hidden bg-white border border-gray-200 rounded-sm sm:mx-0">
|
||||
<ul className="divide-y divide-neutral-200" data-testid="event-types">
|
||||
{types.map((type) => (
|
||||
<li
|
||||
key={type.id}
|
||||
className={classNames(
|
||||
type.$disabled && "opacity-30 cursor-not-allowed pointer-events-none select-none"
|
||||
)}
|
||||
data-disabled={type.$disabled ? 1 : 0}>
|
||||
<div
|
||||
className={classNames(
|
||||
"hover:bg-neutral-50 flex justify-between items-center ",
|
||||
type.$disabled && "pointer-events-none"
|
||||
)}>
|
||||
<div className="flex items-center justify-between w-full px-4 py-4 sm:px-6 hover:bg-neutral-50">
|
||||
<Link href={"/event-types/" + type.id}>
|
||||
<a className="flex-grow text-sm truncate">
|
||||
<div>
|
||||
<span className="font-medium truncate text-neutral-900">{type.title}</span>
|
||||
{type.hidden && (
|
||||
<span className="ml-2 inline items-center px-1.5 py-0.5 rounded-sm text-xs font-medium bg-yellow-100 text-yellow-800">
|
||||
{t("hidden")}
|
||||
</span>
|
||||
)}
|
||||
{readOnly && (
|
||||
<span className="ml-2 inline items-center px-1.5 py-0.5 rounded-sm text-xs font-medium bg-gray-100 text-gray-800">
|
||||
{t("readonly")}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<EventTypeDescription localeProp={locale} eventType={type} />
|
||||
</a>
|
||||
</Link>
|
||||
|
||||
<div className="flex-shrink-0 hidden mt-4 sm:flex sm:mt-0 sm:ml-5">
|
||||
<div className="flex items-center space-x-2 overflow-hidden">
|
||||
{type.users?.length > 1 && (
|
||||
<AvatarGroup
|
||||
size={8}
|
||||
truncateAfter={4}
|
||||
items={type.users.map((organizer) => ({
|
||||
alt: organizer.name || "",
|
||||
image: organizer.avatar || "",
|
||||
}))}
|
||||
/>
|
||||
)}
|
||||
<Tooltip content="Preview">
|
||||
<a
|
||||
href={`${process.env.NEXT_PUBLIC_APP_URL}/${profile.slug}/${type.slug}`}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="btn-icon">
|
||||
<ExternalLinkIcon className="w-5 h-5 group-hover:text-black" />
|
||||
</a>
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip content="Copy link">
|
||||
<button
|
||||
onClick={() => {
|
||||
showToast("Link copied!", "success");
|
||||
navigator.clipboard.writeText(
|
||||
`${process.env.NEXT_PUBLIC_APP_URL}/${profile.slug}/${type.slug}`
|
||||
);
|
||||
}}
|
||||
className="btn-icon">
|
||||
<LinkIcon className="w-5 h-5 group-hover:text-black" />
|
||||
</button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-shrink-0 mr-5 sm:hidden">
|
||||
<Menu as="div" className="inline-block text-left">
|
||||
{({ open }) => (
|
||||
<>
|
||||
<div>
|
||||
<Menu.Button className="p-2 mt-1 border border-transparent text-neutral-400 hover:border-gray-200">
|
||||
<span className="sr-only">{t("open_options")}</span>
|
||||
<DotsHorizontalIcon className="w-5 h-5" aria-hidden="true" />
|
||||
</Menu.Button>
|
||||
</div>
|
||||
|
||||
<Transition
|
||||
show={open}
|
||||
as={Fragment}
|
||||
enter="transition ease-out duration-100"
|
||||
enterFrom="transform opacity-0 scale-95"
|
||||
enterTo="transform opacity-100 scale-100"
|
||||
leave="transition ease-in duration-75"
|
||||
leaveFrom="transform opacity-100 scale-100"
|
||||
leaveTo="transform opacity-0 scale-95">
|
||||
<Menu.Items
|
||||
static
|
||||
className="absolute right-0 z-10 w-56 mt-2 origin-top-right bg-white divide-y rounded-sm shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none divide-neutral-100">
|
||||
<div className="py-1">
|
||||
<Menu.Item>
|
||||
{({ active }) => (
|
||||
<a
|
||||
href={`${process.env.NEXT_PUBLIC_APP_URL}/${profile.slug}/${type.slug}`}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className={classNames(
|
||||
active ? "bg-neutral-100 text-neutral-900" : "text-neutral-700",
|
||||
"group flex items-center px-4 py-2 text-sm font-medium"
|
||||
)}>
|
||||
<ExternalLinkIcon
|
||||
className="w-4 h-4 mr-3 text-neutral-400 group-hover:text-neutral-500"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
{t("preview")}
|
||||
</a>
|
||||
)}
|
||||
</Menu.Item>
|
||||
<Menu.Item>
|
||||
{({ active }) => (
|
||||
<button
|
||||
onClick={() => {
|
||||
showToast("Link copied!", "success");
|
||||
navigator.clipboard.writeText(
|
||||
`${process.env.NEXT_PUBLIC_APP_URL}/${profile.slug}/${type.slug}`
|
||||
);
|
||||
}}
|
||||
className={classNames(
|
||||
active ? "bg-neutral-100 text-neutral-900" : "text-neutral-700",
|
||||
"group flex items-center px-4 py-2 text-sm w-full font-medium"
|
||||
)}>
|
||||
<LinkIcon
|
||||
className="w-4 h-4 mr-3 text-neutral-400 group-hover:text-neutral-500"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
{t("copy_link")}
|
||||
</button>
|
||||
)}
|
||||
</Menu.Item>
|
||||
</div>
|
||||
</Menu.Items>
|
||||
</Transition>
|
||||
</>
|
||||
)}
|
||||
</Menu>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Head>
|
||||
|
@ -328,19 +107,11 @@ const EventTypesPage = (props: PageProps) => {
|
|||
);
|
||||
};
|
||||
|
||||
const CreateNewEventDialog = ({
|
||||
profiles,
|
||||
canAddEvents,
|
||||
localeProp,
|
||||
}: {
|
||||
profiles: Profile[];
|
||||
canAddEvents: boolean;
|
||||
localeProp: string;
|
||||
}) => {
|
||||
const CreateNewEventDialog = ({ profiles, canAddEvents }: { profiles: Profile[]; canAddEvents: boolean }) => {
|
||||
const router = useRouter();
|
||||
const teamId: number | null = Number(router.query.teamId) || null;
|
||||
const modalOpen = useToggleQuery("new");
|
||||
const { t } = useLocale({ localeProp });
|
||||
const { t } = useLocale();
|
||||
|
||||
const createMutation = useMutation(createEventType, {
|
||||
onSuccess: async ({ eventType }) => {
|
||||
|
|
|
@ -13,7 +13,6 @@ import {
|
|||
localeOptions,
|
||||
OptionType,
|
||||
} from "@lib/core/i18n/i18n.utils";
|
||||
import { useLocale } from "@lib/hooks/useLocale";
|
||||
import { isBrandingHidden } from "@lib/isBrandingHidden";
|
||||
import prisma from "@lib/prisma";
|
||||
import { trpc } from "@lib/trpc";
|
||||
|
@ -92,7 +91,6 @@ function HideBrandingInput(props: {
|
|||
}
|
||||
|
||||
export default function Settings(props: Props) {
|
||||
const { locale } = useLocale({ localeProp: props.localeProp });
|
||||
const mutation = trpc.useMutation("viewer.updateProfile");
|
||||
|
||||
const [successModalOpen, setSuccessModalOpen] = useState(false);
|
||||
|
@ -101,14 +99,19 @@ export default function Settings(props: Props) {
|
|||
const descriptionRef = useRef<HTMLTextAreaElement>();
|
||||
const avatarRef = useRef<HTMLInputElement>(null);
|
||||
const hideBrandingRef = useRef<HTMLInputElement>(null);
|
||||
const [selectedTheme, setSelectedTheme] = useState({ value: props.user.theme });
|
||||
const [selectedTimeZone, setSelectedTimeZone] = useState({ value: props.user.timeZone });
|
||||
const [selectedWeekStartDay, setSelectedWeekStartDay] = useState({ value: props.user.weekStart });
|
||||
const [selectedLanguage, setSelectedLanguage] = useState<OptionType>({
|
||||
value: locale,
|
||||
label: props.localeLabels[locale],
|
||||
const [selectedTheme, setSelectedTheme] = useState<null | { value: string | null }>({
|
||||
value: props.user.theme,
|
||||
});
|
||||
const [imageSrc, setImageSrc] = useState<string>(props.user.avatar);
|
||||
const [selectedTimeZone, setSelectedTimeZone] = useState({ value: props.user.timeZone });
|
||||
const [selectedWeekStartDay, setSelectedWeekStartDay] = useState({
|
||||
value: props.user.weekStart,
|
||||
label: "",
|
||||
});
|
||||
const [selectedLanguage, setSelectedLanguage] = useState<OptionType>({
|
||||
value: props.localeProp,
|
||||
label: props.localeLabels[props.localeProp],
|
||||
});
|
||||
const [imageSrc, setImageSrc] = useState<string>(props.user.avatar || "");
|
||||
const [hasErrors, setHasErrors] = useState(false);
|
||||
const [errorMessage, setErrorMessage] = useState("");
|
||||
|
||||
|
@ -117,7 +120,7 @@ export default function Settings(props: Props) {
|
|||
props.user.theme ? themeOptions.find((theme) => theme.value === props.user.theme) : null
|
||||
);
|
||||
setSelectedWeekStartDay({ value: props.user.weekStart, label: props.user.weekStart });
|
||||
setSelectedLanguage({ value: locale, label: props.localeLabels[locale] });
|
||||
setSelectedLanguage({ value: props.localeProp, label: props.localeLabels[props.localeProp] });
|
||||
}, []);
|
||||
|
||||
const closeSuccessModal = () => {
|
||||
|
@ -276,7 +279,7 @@ export default function Settings(props: Props) {
|
|||
<div className="mt-1">
|
||||
<Select
|
||||
id="languageSelect"
|
||||
value={selectedLanguage || locale}
|
||||
value={selectedLanguage || props.localeProp}
|
||||
onChange={setSelectedLanguage}
|
||||
classNamePrefix="react-select"
|
||||
className="react-select-container border border-gray-300 rounded-sm shadow-sm focus:ring-neutral-500 focus:border-neutral-500 mt-1 block w-full sm:text-sm"
|
||||
|
@ -327,7 +330,7 @@ export default function Settings(props: Props) {
|
|||
defaultValue={selectedTheme || themeOptions[0]}
|
||||
value={selectedTheme || themeOptions[0]}
|
||||
onChange={setSelectedTheme}
|
||||
className="shadow-sm focus:ring-neutral-500 focus:border-neutral-500 mt-1 block w-full sm:text-sm border-gray-300 rounded-sm"
|
||||
className="shadow-sm | { value: string } focus:ring-neutral-500 focus:border-neutral-500 mt-1 block w-full sm:text-sm border-gray-300 rounded-sm"
|
||||
options={themeOptions}
|
||||
/>
|
||||
</div>
|
||||
|
|
|
@ -1,3 +1,4 @@
|
|||
import { GetServerSidePropsContext } from "next";
|
||||
import { serverSideTranslations } from "next-i18next/serverSideTranslations";
|
||||
import React from "react";
|
||||
|
||||
|
@ -5,26 +6,26 @@ import { getSession } from "@lib/auth";
|
|||
import { getOrSetUserLocaleFromHeaders } from "@lib/core/i18n/i18n.utils";
|
||||
import { useLocale } from "@lib/hooks/useLocale";
|
||||
import prisma from "@lib/prisma";
|
||||
import { inferSSRProps } from "@lib/types/inferSSRProps";
|
||||
|
||||
import SettingsShell from "@components/SettingsShell";
|
||||
import Shell from "@components/Shell";
|
||||
import ChangePasswordSection from "@components/security/ChangePasswordSection";
|
||||
import TwoFactorAuthSection from "@components/security/TwoFactorAuthSection";
|
||||
|
||||
export default function Security({ user, localeProp }) {
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
const { locale, t } = useLocale({ localeProp });
|
||||
export default function Security({ user }: inferSSRProps<typeof getServerSideProps>) {
|
||||
const { t } = useLocale();
|
||||
return (
|
||||
<Shell heading={t("security")} subtitle={t("manage_account_security")}>
|
||||
<SettingsShell>
|
||||
<ChangePasswordSection localeProp={locale} />
|
||||
<TwoFactorAuthSection localeProp={locale} twoFactorEnabled={user.twoFactorEnabled} />
|
||||
<ChangePasswordSection />
|
||||
<TwoFactorAuthSection twoFactorEnabled={user.twoFactorEnabled} />
|
||||
</SettingsShell>
|
||||
</Shell>
|
||||
);
|
||||
}
|
||||
|
||||
export async function getServerSideProps(context) {
|
||||
export async function getServerSideProps(context: GetServerSidePropsContext) {
|
||||
const session = await getSession(context);
|
||||
const locale = await getOrSetUserLocaleFromHeaders(context.req);
|
||||
|
||||
|
@ -44,6 +45,10 @@ export async function getServerSideProps(context) {
|
|||
},
|
||||
});
|
||||
|
||||
if (!user) {
|
||||
return { redirect: { permanent: false, destination: "/auth/login" } };
|
||||
}
|
||||
|
||||
return {
|
||||
props: {
|
||||
localeProp: locale,
|
||||
|
|
|
@ -8,7 +8,6 @@ import { useEffect, useRef, useState } from "react";
|
|||
|
||||
import { getSession } from "@lib/auth";
|
||||
import { getOrSetUserLocaleFromHeaders } from "@lib/core/i18n/i18n.utils";
|
||||
import { useLocale } from "@lib/hooks/useLocale";
|
||||
import { Member } from "@lib/member";
|
||||
import { Team } from "@lib/team";
|
||||
|
||||
|
@ -20,7 +19,7 @@ import TeamList from "@components/team/TeamList";
|
|||
import TeamListItem from "@components/team/TeamListItem";
|
||||
import Button from "@components/ui/Button";
|
||||
|
||||
export default function Teams(props: { localeProp: string }) {
|
||||
export default function Teams() {
|
||||
const noop = () => undefined;
|
||||
const [, loading] = useSession();
|
||||
const [teams, setTeams] = useState([]);
|
||||
|
@ -29,7 +28,6 @@ export default function Teams(props: { localeProp: string }) {
|
|||
const [editTeamEnabled, setEditTeamEnabled] = useState(false);
|
||||
const [teamToEdit, setTeamToEdit] = useState<Team | null>();
|
||||
const nameRef = useRef<HTMLInputElement>() as React.MutableRefObject<HTMLInputElement>;
|
||||
const { locale } = useLocale({ localeProp: props.localeProp });
|
||||
|
||||
const handleErrors = async (resp: Response) => {
|
||||
if (!resp.ok) {
|
||||
|
@ -114,11 +112,7 @@ export default function Teams(props: { localeProp: string }) {
|
|||
</div>
|
||||
<div>
|
||||
{!!teams.length && (
|
||||
<TeamList
|
||||
localeProp={locale}
|
||||
teams={teams}
|
||||
onChange={loadData}
|
||||
onEditTeam={editTeam}></TeamList>
|
||||
<TeamList teams={teams} onChange={loadData} onEditTeam={editTeam}></TeamList>
|
||||
)}
|
||||
|
||||
{!!invites.length && (
|
||||
|
@ -127,7 +121,6 @@ export default function Teams(props: { localeProp: string }) {
|
|||
<ul className="px-4 mt-4 mb-2 bg-white border divide-y divide-gray-200 rounded">
|
||||
{invites.map((team: Team) => (
|
||||
<TeamListItem
|
||||
localeProp={locale}
|
||||
onChange={loadData}
|
||||
key={team.id}
|
||||
team={team}
|
||||
|
@ -140,7 +133,7 @@ export default function Teams(props: { localeProp: string }) {
|
|||
</div>
|
||||
</div>
|
||||
)}
|
||||
{!!editTeamEnabled && <EditTeam localeProp={locale} team={teamToEdit} onCloseEdit={onCloseEdit} />}
|
||||
{!!editTeamEnabled && <EditTeam team={teamToEdit} onCloseEdit={onCloseEdit} />}
|
||||
{showCreateTeamModal && (
|
||||
<div
|
||||
className="fixed inset-0 z-50 overflow-y-auto"
|
||||
|
|
|
@ -21,10 +21,10 @@ import AvatarGroup from "@components/ui/AvatarGroup";
|
|||
import Button from "@components/ui/Button";
|
||||
import Text from "@components/ui/Text";
|
||||
|
||||
function TeamPage({ team, localeProp }: inferSSRProps<typeof getServerSideProps>) {
|
||||
function TeamPage({ team }: inferSSRProps<typeof getServerSideProps>) {
|
||||
const { isReady } = useTheme();
|
||||
const showMembers = useToggleQuery("members");
|
||||
const { t, locale } = useLocale({ localeProp: localeProp });
|
||||
const { t } = useLocale();
|
||||
|
||||
const eventTypes = (
|
||||
<ul className="space-y-3">
|
||||
|
@ -37,7 +37,7 @@ function TeamPage({ team, localeProp }: inferSSRProps<typeof getServerSideProps>
|
|||
<a className="px-6 py-4 flex justify-between">
|
||||
<div className="flex-shrink">
|
||||
<h2 className="font-cal font-semibold text-neutral-900 dark:text-white">{type.title}</h2>
|
||||
<EventTypeDescription localeProp={locale} className="text-sm" eventType={type} />
|
||||
<EventTypeDescription className="text-sm" eventType={type} />
|
||||
</div>
|
||||
<div className="mt-1">
|
||||
<AvatarGroup
|
||||
|
@ -68,7 +68,7 @@ function TeamPage({ team, localeProp }: inferSSRProps<typeof getServerSideProps>
|
|||
<Avatar alt={teamName} imageSrc={team.logo} className="mx-auto w-20 h-20 rounded-full mb-4" />
|
||||
<Text variant="headline">{teamName}</Text>
|
||||
</div>
|
||||
{(showMembers.isOn || !team.eventTypes.length) && <Team localeProp={locale} team={team} />}
|
||||
{(showMembers.isOn || !team.eventTypes.length) && <Team team={team} />}
|
||||
{!showMembers.isOn && team.eventTypes.length > 0 && (
|
||||
<div className="mx-auto max-w-3xl">
|
||||
{eventTypes}
|
||||
|
|
Loading…
Reference in a new issue