cal.pub0.org/apps/web/pages/settings/profile.tsx

545 lines
21 KiB
TypeScript
Raw Normal View History

import { TrashIcon } from "@heroicons/react/solid";
import crypto from "crypto";
import { GetServerSidePropsContext } from "next";
import { signOut } from "next-auth/react";
import { useRouter } from "next/router";
Improvement/teams (#1285) * [WIP] checkpoint before pull & merge - Added teams to sidebar - Refactored team settings - Improved team list UI This code will be partly reverted next commit. * [WIP] - Moved team code back to components - Removed team link from sidebar - Built new team manager screen based on Event Type designs - Component-ized frequently reused code (SettingInputContainer, FlatIconButton) * [WIP] - Created LinkIconButton as standalone component - Added functionality to sidebar of team settings - Fixed type bug on public team page induced by my normalization of members array in team query - Removed teams-old which was kept as refrence - Cleaned up loose ends * [WIP] - added create team model - fixed profile missing label due to my removal of default label from component * [WIP] - Fixed TeamCreateModal trigger - removed TeamShell, it didn't make the cut - added getPlaceHolderAvatar - renamed TeamCreate to TeamCreateModal - removed deprecated UsernameInput and replaced uses with suggested TextField * fix save button * [WIP] - Fixed drop down actions on team list - Cleaned up state updates * [WIP] converting teams to tRPC * [WIP] Finished refactor to tRPC * [WIP] Finishing touches * [WIP] Team availability beginning * team availability mvp * - added validation to change role - modified layout of team availability - corrected types * fix ui issue on team availability screen * - added virtualization to team availability - added flexChildrenContainer boolean to Shell to allow for flex on children * availability style fix * removed hard coded team type as teams now use inferred type from tRPC * Removed unneeded vscode settings * Reverted prisma schema * Fixed migrations * Removes unused dayjs plugins * Reverts type regression * Type fix * Type fixes * Type fixes * Moves team availability code to ee Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: zomars <zomars@me.com>
2021-12-09 23:51:30 +00:00
import { ComponentProps, FormEvent, RefObject, useEffect, useMemo, useRef, useState } from "react";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import showToast from "@calcom/lib/notification";
import { Alert } from "@calcom/ui/Alert";
import Button from "@calcom/ui/Button";
import { Dialog, DialogTrigger } from "@calcom/ui/Dialog";
import { TextField } from "@calcom/ui/form/fields";
import { withQuery } from "@lib/QueryCell";
import { asStringOrNull, asStringOrUndefined } from "@lib/asStringOrNull";
import { getSession } from "@lib/auth";
import { nameOfDay } from "@lib/core/i18n/weekday";
import { isBrandingHidden } from "@lib/isBrandingHidden";
import prisma from "@lib/prisma";
import { trpc } from "@lib/trpc";
import { inferSSRProps } from "@lib/types/inferSSRProps";
import ImageUploader from "@components/ImageUploader";
import SettingsShell from "@components/SettingsShell";
import ConfirmationDialogContent from "@components/dialog/ConfirmationDialogContent";
Feature/round robin (#613) * Heavy WIP * More WIP * Playing with backwards compat * Moar wip * wip * Email changes for group feature * Committing in redundant migrations for reference * Combine all WIP migrations into a single feature migration * Make backup of current version of radio area pending refactor * Improved accessibility through keyboard * Cleanup in seperate commit so I can cherrypick later * Added RadioArea component * wip * Ignore .yarn file * Kinda stable * Getting closer... * Hide header when there are only personal events * Added uid to event create, updated EventTypeDescription * Delete redundant migration * Committing new team related migrations * Optimising & implemented backwards compatibility * Removed now redundant pages * Undid prototyping to calendarClient I did not end up using * Properly typed Select & fixed lint throughout * How'd that get here, removed. * TODO: investigate why userData is not compatible with passed type * This likely matches the event type that is created for a user * Few bugfixes * Adding datepicker optimisations * Fixed new event type spacing, initial profile should always be there * Gave NEXT_PUBLIC_BASE_URL a try but I think it's not the right solution * Updated EventTypeDescription to account for long titles, added logo to team page. * Added logo to team query * Added cancel Cypress test because an upcoming merge contains changes * Fix for when the event type description is long * Turned Theme into the useTheme hook, and made it fully compatible with teams pages * Built AvatarGroup ui component + moved Avatar to ui * Give the avatar some space fom the description * Fixed timeZone selector * Disabled tooltip +1-... Co-authored-by: Bailey Pumfleet <pumfleet@hey.com>
2021-09-14 08:45:28 +00:00
import Avatar from "@components/ui/Avatar";
import Badge from "@components/ui/Badge";
dynamic group links (#2239) * --init * added default event types * updated lib path * updated group link design * fixed collective description * added default minimum booking notice * Accept multi user query for a default event type * check types * check types --WIP * check types still --WIP * --WIP * --WIP * fixed single user type not working * check fix * --import path fix * functional collective eventtype page * fixed check type * minor fixes and --WIP * typefix * custominput in defaultevent fix * added booking page compatibility for dynamic group links * added /book compatibility for dynamic group links * checktype fix --WIP * checktype fix * Success page compatibility added * added migrations * added dynamic group booking slug to booking creation * reschedule and database fix * daily integration * daily integration --locationtype fetch * fixed reschedule * added index to key parameter in eventtype list * fix + added after last group slug * added user setting option for dynamic booking * changed defaultEvents location based on recent changes * updated default event name in updated import * disallow booking when one in group disallows it * fixed setting checkbox association * cleanup * udded better error handling for disabled dynamic group bookings * cleanup * added tooltip to allow dynamic setting and enable by default * Update yarn.lock * Fix: Embed Fixes, UI configuration PRO Only, Tests (#2341) * #2325 Followup (#2369) * Adds initial MDX implementation for App Store pages * Adds endpoint to serve app store static files * Replaces zoom icon with dynamic-served one * Fixes zoom icon * Makes Slider reusable * Adds gray-matter for MDX * Adds zoom screenshots * Update yarn.lock * Slider improvements * WIP * Update TrendingAppsSlider.tsx * WIP * Adds MS teams screenshots * Adds stripe screenshots * Cleanup * Update index.ts * WIP * Cleanup * Cleanup * Adds jitsi screenshot * Adds Google meet screenshots * Adds office 365 calendar screenshots * Adds google calendar screenshots * Follow #2325 Co-authored-by: Peer Richelsen <peeroke@gmail.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * requested changes * further requested changes * more changes * type fix * fixed prisma/client import path * added e2e test * test-fix * E2E fixes * Fixes circular dependency * Fixed paid bookings seeder * Added missing imports * requested changes * added username slugs as part of event description * updated event description Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: zomars <zomars@me.com> Co-authored-by: Peer Richelsen <peeroke@gmail.com>
2022-04-06 17:20:30 +00:00
import InfoBadge from "@components/ui/InfoBadge";
import ColorPicker from "@components/ui/colorpicker";
import Select from "@components/ui/form/Select";
import TimezoneSelect, { ITimezone } from "@components/ui/form/TimezoneSelect";
2021-04-07 15:03:02 +00:00
import { UpgradeToProDialog } from "../../components/UpgradeToProDialog";
type Props = inferSSRProps<typeof getServerSideProps>;
2021-10-13 09:34:55 +00:00
function HideBrandingInput(props: { hideBrandingRef: RefObject<HTMLInputElement>; user: Props["user"] }) {
const { t } = useLocale();
const [modalOpen, setModalOpen] = useState(false);
return (
<>
<input
id="hide-branding"
name="hide-branding"
type="checkbox"
ref={props.hideBrandingRef}
defaultChecked={isBrandingHidden(props.user)}
className={
"h-4 w-4 rounded-sm border-gray-300 text-neutral-900 focus:ring-neutral-800 disabled:opacity-50"
}
onClick={(e) => {
if (!e.currentTarget.checked || props.user.plan !== "FREE") {
return;
}
// prevent checking the input
e.preventDefault();
setModalOpen(true);
}}
/>
<UpgradeToProDialog modalOpen={modalOpen} setModalOpen={setModalOpen}>
{t("remove_cal_branding_description")}
</UpgradeToProDialog>
</>
);
}
function SettingsView(props: ComponentProps<typeof Settings> & { localeProp: string }) {
const utils = trpc.useContext();
2021-10-13 09:34:55 +00:00
const { t } = useLocale();
const router = useRouter();
const mutation = trpc.useMutation("viewer.updateProfile", {
onSuccess: async () => {
showToast(t("your_user_profile_updated_successfully"), "success");
setHasErrors(false); // dismiss any open errors
await utils.invalidateQueries(["viewer.me"]);
},
onError: (err) => {
setHasErrors(true);
setErrorMessage(err.message);
document?.getElementsByTagName("main")[0]?.scrollTo({ top: 0, behavior: "smooth" });
},
async onSettled() {
await utils.invalidateQueries(["viewer.public.i18n"]);
},
});
const deleteAccount = async () => {
await fetch("/api/user/me", {
method: "DELETE",
headers: {
"Content-Type": "application/json",
},
}).catch((e) => {
console.error(`Error Removing user: ${props.user.id}, email: ${props.user.email} :`, e);
});
if (process.env.NEXT_PUBLIC_WEBAPP_URL === "https://app.cal.com") {
signOut({ callbackUrl: "/auth/logout?survey=true" });
} else {
signOut({ callbackUrl: "/auth/logout" });
}
};
const localeOptions = useMemo(() => {
return (router.locales || []).map((locale) => ({
value: locale,
2022-03-16 19:55:18 +00:00
label: new Intl.DisplayNames(props.localeProp, { type: "language" }).of(locale) || "",
}));
}, [props.localeProp, router.locales]);
2021-10-13 09:34:55 +00:00
const themeOptions = [
{ value: "light", label: t("light") },
{ value: "dark", label: t("dark") },
];
const timeFormatOptions = [
{ value: 12, label: t("12_hour") },
{ value: 24, label: t("24_hour") },
];
const usernameRef = useRef<HTMLInputElement>(null!);
const nameRef = useRef<HTMLInputElement>(null!);
2022-01-12 21:54:48 +00:00
const emailRef = useRef<HTMLInputElement>(null!);
const descriptionRef = useRef<HTMLTextAreaElement>(null!);
const avatarRef = useRef<HTMLInputElement>(null!);
const hideBrandingRef = useRef<HTMLInputElement>(null!);
dynamic group links (#2239) * --init * added default event types * updated lib path * updated group link design * fixed collective description * added default minimum booking notice * Accept multi user query for a default event type * check types * check types --WIP * check types still --WIP * --WIP * --WIP * fixed single user type not working * check fix * --import path fix * functional collective eventtype page * fixed check type * minor fixes and --WIP * typefix * custominput in defaultevent fix * added booking page compatibility for dynamic group links * added /book compatibility for dynamic group links * checktype fix --WIP * checktype fix * Success page compatibility added * added migrations * added dynamic group booking slug to booking creation * reschedule and database fix * daily integration * daily integration --locationtype fetch * fixed reschedule * added index to key parameter in eventtype list * fix + added after last group slug * added user setting option for dynamic booking * changed defaultEvents location based on recent changes * updated default event name in updated import * disallow booking when one in group disallows it * fixed setting checkbox association * cleanup * udded better error handling for disabled dynamic group bookings * cleanup * added tooltip to allow dynamic setting and enable by default * Update yarn.lock * Fix: Embed Fixes, UI configuration PRO Only, Tests (#2341) * #2325 Followup (#2369) * Adds initial MDX implementation for App Store pages * Adds endpoint to serve app store static files * Replaces zoom icon with dynamic-served one * Fixes zoom icon * Makes Slider reusable * Adds gray-matter for MDX * Adds zoom screenshots * Update yarn.lock * Slider improvements * WIP * Update TrendingAppsSlider.tsx * WIP * Adds MS teams screenshots * Adds stripe screenshots * Cleanup * Update index.ts * WIP * Cleanup * Cleanup * Adds jitsi screenshot * Adds Google meet screenshots * Adds office 365 calendar screenshots * Adds google calendar screenshots * Follow #2325 Co-authored-by: Peer Richelsen <peeroke@gmail.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * requested changes * further requested changes * more changes * type fix * fixed prisma/client import path * added e2e test * test-fix * E2E fixes * Fixes circular dependency * Fixed paid bookings seeder * Added missing imports * requested changes * added username slugs as part of event description * updated event description Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: zomars <zomars@me.com> Co-authored-by: Peer Richelsen <peeroke@gmail.com>
2022-04-06 17:20:30 +00:00
const allowDynamicGroupBookingRef = useRef<HTMLInputElement>(null!);
Improvement/teams (#1285) * [WIP] checkpoint before pull & merge - Added teams to sidebar - Refactored team settings - Improved team list UI This code will be partly reverted next commit. * [WIP] - Moved team code back to components - Removed team link from sidebar - Built new team manager screen based on Event Type designs - Component-ized frequently reused code (SettingInputContainer, FlatIconButton) * [WIP] - Created LinkIconButton as standalone component - Added functionality to sidebar of team settings - Fixed type bug on public team page induced by my normalization of members array in team query - Removed teams-old which was kept as refrence - Cleaned up loose ends * [WIP] - added create team model - fixed profile missing label due to my removal of default label from component * [WIP] - Fixed TeamCreateModal trigger - removed TeamShell, it didn't make the cut - added getPlaceHolderAvatar - renamed TeamCreate to TeamCreateModal - removed deprecated UsernameInput and replaced uses with suggested TextField * fix save button * [WIP] - Fixed drop down actions on team list - Cleaned up state updates * [WIP] converting teams to tRPC * [WIP] Finished refactor to tRPC * [WIP] Finishing touches * [WIP] Team availability beginning * team availability mvp * - added validation to change role - modified layout of team availability - corrected types * fix ui issue on team availability screen * - added virtualization to team availability - added flexChildrenContainer boolean to Shell to allow for flex on children * availability style fix * removed hard coded team type as teams now use inferred type from tRPC * Removed unneeded vscode settings * Reverted prisma schema * Fixed migrations * Removes unused dayjs plugins * Reverts type regression * Type fix * Type fixes * Type fixes * Moves team availability code to ee Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: zomars <zomars@me.com>
2021-12-09 23:51:30 +00:00
const [selectedTheme, setSelectedTheme] = useState<typeof themeOptions[number] | undefined>();
const [selectedTimeFormat, setSelectedTimeFormat] = useState({
value: props.user.timeFormat || 12,
label: timeFormatOptions.find((option) => option.value === props.user.timeFormat)?.label || 12,
});
const [selectedTimeZone, setSelectedTimeZone] = useState<ITimezone>(props.user.timeZone);
Improvement/teams (#1285) * [WIP] checkpoint before pull & merge - Added teams to sidebar - Refactored team settings - Improved team list UI This code will be partly reverted next commit. * [WIP] - Moved team code back to components - Removed team link from sidebar - Built new team manager screen based on Event Type designs - Component-ized frequently reused code (SettingInputContainer, FlatIconButton) * [WIP] - Created LinkIconButton as standalone component - Added functionality to sidebar of team settings - Fixed type bug on public team page induced by my normalization of members array in team query - Removed teams-old which was kept as refrence - Cleaned up loose ends * [WIP] - added create team model - fixed profile missing label due to my removal of default label from component * [WIP] - Fixed TeamCreateModal trigger - removed TeamShell, it didn't make the cut - added getPlaceHolderAvatar - renamed TeamCreate to TeamCreateModal - removed deprecated UsernameInput and replaced uses with suggested TextField * fix save button * [WIP] - Fixed drop down actions on team list - Cleaned up state updates * [WIP] converting teams to tRPC * [WIP] Finished refactor to tRPC * [WIP] Finishing touches * [WIP] Team availability beginning * team availability mvp * - added validation to change role - modified layout of team availability - corrected types * fix ui issue on team availability screen * - added virtualization to team availability - added flexChildrenContainer boolean to Shell to allow for flex on children * availability style fix * removed hard coded team type as teams now use inferred type from tRPC * Removed unneeded vscode settings * Reverted prisma schema * Fixed migrations * Removes unused dayjs plugins * Reverts type regression * Type fix * Type fixes * Type fixes * Moves team availability code to ee Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: zomars <zomars@me.com>
2021-12-09 23:51:30 +00:00
const [selectedWeekStartDay, setSelectedWeekStartDay] = useState({
value: props.user.weekStart,
label: nameOfDay(props.localeProp, props.user.weekStart === "Sunday" ? 0 : 1),
});
Improvement/teams (#1285) * [WIP] checkpoint before pull & merge - Added teams to sidebar - Refactored team settings - Improved team list UI This code will be partly reverted next commit. * [WIP] - Moved team code back to components - Removed team link from sidebar - Built new team manager screen based on Event Type designs - Component-ized frequently reused code (SettingInputContainer, FlatIconButton) * [WIP] - Created LinkIconButton as standalone component - Added functionality to sidebar of team settings - Fixed type bug on public team page induced by my normalization of members array in team query - Removed teams-old which was kept as refrence - Cleaned up loose ends * [WIP] - added create team model - fixed profile missing label due to my removal of default label from component * [WIP] - Fixed TeamCreateModal trigger - removed TeamShell, it didn't make the cut - added getPlaceHolderAvatar - renamed TeamCreate to TeamCreateModal - removed deprecated UsernameInput and replaced uses with suggested TextField * fix save button * [WIP] - Fixed drop down actions on team list - Cleaned up state updates * [WIP] converting teams to tRPC * [WIP] Finished refactor to tRPC * [WIP] Finishing touches * [WIP] Team availability beginning * team availability mvp * - added validation to change role - modified layout of team availability - corrected types * fix ui issue on team availability screen * - added virtualization to team availability - added flexChildrenContainer boolean to Shell to allow for flex on children * availability style fix * removed hard coded team type as teams now use inferred type from tRPC * Removed unneeded vscode settings * Reverted prisma schema * Fixed migrations * Removes unused dayjs plugins * Reverts type regression * Type fix * Type fixes * Type fixes * Moves team availability code to ee Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: zomars <zomars@me.com>
2021-12-09 23:51:30 +00:00
const [selectedLanguage, setSelectedLanguage] = useState({
value: props.localeProp || "",
label: localeOptions.find((option) => option.value === props.localeProp)?.label || "",
});
const [imageSrc, setImageSrc] = useState<string>(props.user.avatar || "");
const [hasErrors, setHasErrors] = useState(false);
const [errorMessage, setErrorMessage] = useState("");
const [brandColor, setBrandColor] = useState(props.user.brandColor);
const [darkBrandColor, setDarkBrandColor] = useState(props.user.darkBrandColor);
2021-04-20 12:56:50 +00:00
2021-07-11 19:35:56 +00:00
useEffect(() => {
Improvement/teams (#1285) * [WIP] checkpoint before pull & merge - Added teams to sidebar - Refactored team settings - Improved team list UI This code will be partly reverted next commit. * [WIP] - Moved team code back to components - Removed team link from sidebar - Built new team manager screen based on Event Type designs - Component-ized frequently reused code (SettingInputContainer, FlatIconButton) * [WIP] - Created LinkIconButton as standalone component - Added functionality to sidebar of team settings - Fixed type bug on public team page induced by my normalization of members array in team query - Removed teams-old which was kept as refrence - Cleaned up loose ends * [WIP] - added create team model - fixed profile missing label due to my removal of default label from component * [WIP] - Fixed TeamCreateModal trigger - removed TeamShell, it didn't make the cut - added getPlaceHolderAvatar - renamed TeamCreate to TeamCreateModal - removed deprecated UsernameInput and replaced uses with suggested TextField * fix save button * [WIP] - Fixed drop down actions on team list - Cleaned up state updates * [WIP] converting teams to tRPC * [WIP] Finished refactor to tRPC * [WIP] Finishing touches * [WIP] Team availability beginning * team availability mvp * - added validation to change role - modified layout of team availability - corrected types * fix ui issue on team availability screen * - added virtualization to team availability - added flexChildrenContainer boolean to Shell to allow for flex on children * availability style fix * removed hard coded team type as teams now use inferred type from tRPC * Removed unneeded vscode settings * Reverted prisma schema * Fixed migrations * Removes unused dayjs plugins * Reverts type regression * Type fix * Type fixes * Type fixes * Moves team availability code to ee Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: zomars <zomars@me.com>
2021-12-09 23:51:30 +00:00
if (!props.user.theme) return;
const userTheme = themeOptions.find((theme) => theme.value === props.user.theme);
if (!userTheme) return;
setSelectedTheme(userTheme);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
async function updateProfileHandler(event: FormEvent<HTMLFormElement>) {
event.preventDefault();
const enteredUsername = usernameRef.current.value.toLowerCase();
const enteredName = nameRef.current.value;
2022-01-12 21:54:48 +00:00
const enteredEmail = emailRef.current.value;
const enteredDescription = descriptionRef.current.value;
const enteredAvatar = avatarRef.current.value;
const enteredBrandColor = brandColor;
const enteredDarkBrandColor = darkBrandColor;
const enteredTimeZone = typeof selectedTimeZone === "string" ? selectedTimeZone : selectedTimeZone.value;
const enteredWeekStartDay = selectedWeekStartDay.value;
2021-06-29 16:08:55 +00:00
const enteredHideBranding = hideBrandingRef.current.checked;
dynamic group links (#2239) * --init * added default event types * updated lib path * updated group link design * fixed collective description * added default minimum booking notice * Accept multi user query for a default event type * check types * check types --WIP * check types still --WIP * --WIP * --WIP * fixed single user type not working * check fix * --import path fix * functional collective eventtype page * fixed check type * minor fixes and --WIP * typefix * custominput in defaultevent fix * added booking page compatibility for dynamic group links * added /book compatibility for dynamic group links * checktype fix --WIP * checktype fix * Success page compatibility added * added migrations * added dynamic group booking slug to booking creation * reschedule and database fix * daily integration * daily integration --locationtype fetch * fixed reschedule * added index to key parameter in eventtype list * fix + added after last group slug * added user setting option for dynamic booking * changed defaultEvents location based on recent changes * updated default event name in updated import * disallow booking when one in group disallows it * fixed setting checkbox association * cleanup * udded better error handling for disabled dynamic group bookings * cleanup * added tooltip to allow dynamic setting and enable by default * Update yarn.lock * Fix: Embed Fixes, UI configuration PRO Only, Tests (#2341) * #2325 Followup (#2369) * Adds initial MDX implementation for App Store pages * Adds endpoint to serve app store static files * Replaces zoom icon with dynamic-served one * Fixes zoom icon * Makes Slider reusable * Adds gray-matter for MDX * Adds zoom screenshots * Update yarn.lock * Slider improvements * WIP * Update TrendingAppsSlider.tsx * WIP * Adds MS teams screenshots * Adds stripe screenshots * Cleanup * Update index.ts * WIP * Cleanup * Cleanup * Adds jitsi screenshot * Adds Google meet screenshots * Adds office 365 calendar screenshots * Adds google calendar screenshots * Follow #2325 Co-authored-by: Peer Richelsen <peeroke@gmail.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * requested changes * further requested changes * more changes * type fix * fixed prisma/client import path * added e2e test * test-fix * E2E fixes * Fixes circular dependency * Fixed paid bookings seeder * Added missing imports * requested changes * added username slugs as part of event description * updated event description Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: zomars <zomars@me.com> Co-authored-by: Peer Richelsen <peeroke@gmail.com>
2022-04-06 17:20:30 +00:00
const enteredAllowDynamicGroupBooking = allowDynamicGroupBookingRef.current.checked;
const enteredLanguage = selectedLanguage.value;
const enteredTimeFormat = selectedTimeFormat.value;
// TODO: Add validation
mutation.mutate({
username: enteredUsername,
name: enteredName,
2022-01-12 21:54:48 +00:00
email: enteredEmail,
bio: enteredDescription,
avatar: enteredAvatar,
timeZone: enteredTimeZone,
weekStart: asStringOrUndefined(enteredWeekStartDay),
hideBranding: enteredHideBranding,
dynamic group links (#2239) * --init * added default event types * updated lib path * updated group link design * fixed collective description * added default minimum booking notice * Accept multi user query for a default event type * check types * check types --WIP * check types still --WIP * --WIP * --WIP * fixed single user type not working * check fix * --import path fix * functional collective eventtype page * fixed check type * minor fixes and --WIP * typefix * custominput in defaultevent fix * added booking page compatibility for dynamic group links * added /book compatibility for dynamic group links * checktype fix --WIP * checktype fix * Success page compatibility added * added migrations * added dynamic group booking slug to booking creation * reschedule and database fix * daily integration * daily integration --locationtype fetch * fixed reschedule * added index to key parameter in eventtype list * fix + added after last group slug * added user setting option for dynamic booking * changed defaultEvents location based on recent changes * updated default event name in updated import * disallow booking when one in group disallows it * fixed setting checkbox association * cleanup * udded better error handling for disabled dynamic group bookings * cleanup * added tooltip to allow dynamic setting and enable by default * Update yarn.lock * Fix: Embed Fixes, UI configuration PRO Only, Tests (#2341) * #2325 Followup (#2369) * Adds initial MDX implementation for App Store pages * Adds endpoint to serve app store static files * Replaces zoom icon with dynamic-served one * Fixes zoom icon * Makes Slider reusable * Adds gray-matter for MDX * Adds zoom screenshots * Update yarn.lock * Slider improvements * WIP * Update TrendingAppsSlider.tsx * WIP * Adds MS teams screenshots * Adds stripe screenshots * Cleanup * Update index.ts * WIP * Cleanup * Cleanup * Adds jitsi screenshot * Adds Google meet screenshots * Adds office 365 calendar screenshots * Adds google calendar screenshots * Follow #2325 Co-authored-by: Peer Richelsen <peeroke@gmail.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * requested changes * further requested changes * more changes * type fix * fixed prisma/client import path * added e2e test * test-fix * E2E fixes * Fixes circular dependency * Fixed paid bookings seeder * Added missing imports * requested changes * added username slugs as part of event description * updated event description Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: zomars <zomars@me.com> Co-authored-by: Peer Richelsen <peeroke@gmail.com>
2022-04-06 17:20:30 +00:00
allowDynamicBooking: enteredAllowDynamicGroupBooking,
theme: asStringOrNull(selectedTheme?.value),
brandColor: enteredBrandColor,
darkBrandColor: enteredDarkBrandColor,
locale: enteredLanguage,
timeFormat: enteredTimeFormat,
});
}
return (
<form className="divide-y divide-gray-200 lg:col-span-9" onSubmit={updateProfileHandler}>
{hasErrors && <Alert severity="error" title={errorMessage} />}
<div className="py-6 lg:pb-8">
<div className="flex flex-col lg:flex-row">
<div className="flex-grow space-y-6">
<div className="block rtl:space-x-reverse sm:flex sm:space-x-2">
<div className="mb-6 w-full sm:w-1/2">
Improvement/teams (#1285) * [WIP] checkpoint before pull & merge - Added teams to sidebar - Refactored team settings - Improved team list UI This code will be partly reverted next commit. * [WIP] - Moved team code back to components - Removed team link from sidebar - Built new team manager screen based on Event Type designs - Component-ized frequently reused code (SettingInputContainer, FlatIconButton) * [WIP] - Created LinkIconButton as standalone component - Added functionality to sidebar of team settings - Fixed type bug on public team page induced by my normalization of members array in team query - Removed teams-old which was kept as refrence - Cleaned up loose ends * [WIP] - added create team model - fixed profile missing label due to my removal of default label from component * [WIP] - Fixed TeamCreateModal trigger - removed TeamShell, it didn't make the cut - added getPlaceHolderAvatar - renamed TeamCreate to TeamCreateModal - removed deprecated UsernameInput and replaced uses with suggested TextField * fix save button * [WIP] - Fixed drop down actions on team list - Cleaned up state updates * [WIP] converting teams to tRPC * [WIP] Finished refactor to tRPC * [WIP] Finishing touches * [WIP] Team availability beginning * team availability mvp * - added validation to change role - modified layout of team availability - corrected types * fix ui issue on team availability screen * - added virtualization to team availability - added flexChildrenContainer boolean to Shell to allow for flex on children * availability style fix * removed hard coded team type as teams now use inferred type from tRPC * Removed unneeded vscode settings * Reverted prisma schema * Fixed migrations * Removes unused dayjs plugins * Reverts type regression * Type fix * Type fixes * Type fixes * Moves team availability code to ee Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: zomars <zomars@me.com>
2021-12-09 23:51:30 +00:00
<TextField
name="username"
addOnLeading={
<span className="inline-flex items-center rounded-l-sm border border-r-0 border-gray-300 bg-gray-50 px-3 text-sm text-gray-500">
{process.env.NEXT_PUBLIC_WEBSITE_URL}/
Improvement/teams (#1285) * [WIP] checkpoint before pull & merge - Added teams to sidebar - Refactored team settings - Improved team list UI This code will be partly reverted next commit. * [WIP] - Moved team code back to components - Removed team link from sidebar - Built new team manager screen based on Event Type designs - Component-ized frequently reused code (SettingInputContainer, FlatIconButton) * [WIP] - Created LinkIconButton as standalone component - Added functionality to sidebar of team settings - Fixed type bug on public team page induced by my normalization of members array in team query - Removed teams-old which was kept as refrence - Cleaned up loose ends * [WIP] - added create team model - fixed profile missing label due to my removal of default label from component * [WIP] - Fixed TeamCreateModal trigger - removed TeamShell, it didn't make the cut - added getPlaceHolderAvatar - renamed TeamCreate to TeamCreateModal - removed deprecated UsernameInput and replaced uses with suggested TextField * fix save button * [WIP] - Fixed drop down actions on team list - Cleaned up state updates * [WIP] converting teams to tRPC * [WIP] Finished refactor to tRPC * [WIP] Finishing touches * [WIP] Team availability beginning * team availability mvp * - added validation to change role - modified layout of team availability - corrected types * fix ui issue on team availability screen * - added virtualization to team availability - added flexChildrenContainer boolean to Shell to allow for flex on children * availability style fix * removed hard coded team type as teams now use inferred type from tRPC * Removed unneeded vscode settings * Reverted prisma schema * Fixed migrations * Removes unused dayjs plugins * Reverts type regression * Type fix * Type fixes * Type fixes * Moves team availability code to ee Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: zomars <zomars@me.com>
2021-12-09 23:51:30 +00:00
</span>
}
ref={usernameRef}
defaultValue={props.user.username || undefined}
/>
</div>
<div className="w-full sm:w-1/2">
<label htmlFor="name" className="block text-sm font-medium text-gray-700">
{t("full_name")}
</label>
<input
ref={nameRef}
type="text"
name="name"
id="name"
autoComplete="given-name"
placeholder={t("your_name")}
required
className="mt-1 block w-full rounded-sm border border-gray-300 px-3 py-2 shadow-sm sm:text-sm"
defaultValue={props.user.name || undefined}
/>
</div>
</div>
<div className="block sm:flex">
<div className="mb-6 w-full sm:w-1/2">
<label htmlFor="email" className="block text-sm font-medium text-gray-700">
{t("email")}
</label>
<input
2022-01-12 21:54:48 +00:00
ref={emailRef}
type="email"
name="email"
id="email"
placeholder={t("your_email")}
className="mt-1 block w-full rounded-sm border-gray-300 shadow-sm sm:text-sm"
defaultValue={props.user.email}
/>
<p className="mt-2 text-sm text-gray-500" id="email-description">
2022-01-12 21:54:48 +00:00
{t("change_email_tip")}
</p>
</div>
</div>
<div>
<label htmlFor="about" className="block text-sm font-medium text-gray-700">
{t("about")}
</label>
<div className="mt-1">
<textarea
ref={descriptionRef}
id="about"
name="about"
placeholder={t("little_something_about")}
rows={3}
defaultValue={props.user.bio || undefined}
className="mt-1 block w-full rounded-sm border-gray-300 shadow-sm sm:text-sm"></textarea>
</div>
</div>
<div>
<div className="mt-1 flex">
<Avatar
alt={props.user.name || ""}
className="relative h-10 w-10 rounded-full"
gravatarFallbackMd5={props.user.emailMd5}
imageSrc={imageSrc}
/>
<input
ref={avatarRef}
type="hidden"
name="avatar"
id="avatar"
placeholder="URL"
className="mt-1 block w-full rounded-sm border border-gray-300 px-3 py-2 shadow-sm focus:border-neutral-800 focus:outline-none focus:ring-neutral-800 sm:text-sm"
defaultValue={imageSrc}
/>
Improvement/teams (#1285) * [WIP] checkpoint before pull & merge - Added teams to sidebar - Refactored team settings - Improved team list UI This code will be partly reverted next commit. * [WIP] - Moved team code back to components - Removed team link from sidebar - Built new team manager screen based on Event Type designs - Component-ized frequently reused code (SettingInputContainer, FlatIconButton) * [WIP] - Created LinkIconButton as standalone component - Added functionality to sidebar of team settings - Fixed type bug on public team page induced by my normalization of members array in team query - Removed teams-old which was kept as refrence - Cleaned up loose ends * [WIP] - added create team model - fixed profile missing label due to my removal of default label from component * [WIP] - Fixed TeamCreateModal trigger - removed TeamShell, it didn't make the cut - added getPlaceHolderAvatar - renamed TeamCreate to TeamCreateModal - removed deprecated UsernameInput and replaced uses with suggested TextField * fix save button * [WIP] - Fixed drop down actions on team list - Cleaned up state updates * [WIP] converting teams to tRPC * [WIP] Finished refactor to tRPC * [WIP] Finishing touches * [WIP] Team availability beginning * team availability mvp * - added validation to change role - modified layout of team availability - corrected types * fix ui issue on team availability screen * - added virtualization to team availability - added flexChildrenContainer boolean to Shell to allow for flex on children * availability style fix * removed hard coded team type as teams now use inferred type from tRPC * Removed unneeded vscode settings * Reverted prisma schema * Fixed migrations * Removes unused dayjs plugins * Reverts type regression * Type fix * Type fixes * Type fixes * Moves team availability code to ee Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: zomars <zomars@me.com>
2021-12-09 23:51:30 +00:00
<div className="flex items-center px-5">
<ImageUploader
target="avatar"
id="avatar-upload"
buttonMsg={t("change_avatar")}
handleAvatarChange={(newAvatar) => {
avatarRef.current.value = newAvatar;
const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
window.HTMLInputElement.prototype,
"value"
)?.set;
nativeInputValueSetter?.call(avatarRef.current, newAvatar);
const ev2 = new Event("input", { bubbles: true });
avatarRef.current.dispatchEvent(ev2);
updateProfileHandler(ev2 as unknown as FormEvent<HTMLFormElement>);
setImageSrc(newAvatar);
}}
imageSrc={imageSrc}
/>
</div>
</div>
<hr className="mt-6" />
</div>
<div>
<label htmlFor="language" className="block text-sm font-medium text-gray-700">
{t("language")}
</label>
<div className="mt-1">
<Select
id="languageSelect"
value={selectedLanguage || props.localeProp}
Improvement/teams (#1285) * [WIP] checkpoint before pull & merge - Added teams to sidebar - Refactored team settings - Improved team list UI This code will be partly reverted next commit. * [WIP] - Moved team code back to components - Removed team link from sidebar - Built new team manager screen based on Event Type designs - Component-ized frequently reused code (SettingInputContainer, FlatIconButton) * [WIP] - Created LinkIconButton as standalone component - Added functionality to sidebar of team settings - Fixed type bug on public team page induced by my normalization of members array in team query - Removed teams-old which was kept as refrence - Cleaned up loose ends * [WIP] - added create team model - fixed profile missing label due to my removal of default label from component * [WIP] - Fixed TeamCreateModal trigger - removed TeamShell, it didn't make the cut - added getPlaceHolderAvatar - renamed TeamCreate to TeamCreateModal - removed deprecated UsernameInput and replaced uses with suggested TextField * fix save button * [WIP] - Fixed drop down actions on team list - Cleaned up state updates * [WIP] converting teams to tRPC * [WIP] Finished refactor to tRPC * [WIP] Finishing touches * [WIP] Team availability beginning * team availability mvp * - added validation to change role - modified layout of team availability - corrected types * fix ui issue on team availability screen * - added virtualization to team availability - added flexChildrenContainer boolean to Shell to allow for flex on children * availability style fix * removed hard coded team type as teams now use inferred type from tRPC * Removed unneeded vscode settings * Reverted prisma schema * Fixed migrations * Removes unused dayjs plugins * Reverts type regression * Type fix * Type fixes * Type fixes * Moves team availability code to ee Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: zomars <zomars@me.com>
2021-12-09 23:51:30 +00:00
onChange={(v) => v && setSelectedLanguage(v)}
className="mt-1 block w-full rounded-sm capitalize shadow-sm sm:text-sm"
options={localeOptions}
/>
</div>
</div>
<div>
<label htmlFor="timeZone" className="block text-sm font-medium text-gray-700">
{t("timezone")}
</label>
<div className="mt-1">
<TimezoneSelect
id="timeZone"
value={selectedTimeZone}
Improvement/teams (#1285) * [WIP] checkpoint before pull & merge - Added teams to sidebar - Refactored team settings - Improved team list UI This code will be partly reverted next commit. * [WIP] - Moved team code back to components - Removed team link from sidebar - Built new team manager screen based on Event Type designs - Component-ized frequently reused code (SettingInputContainer, FlatIconButton) * [WIP] - Created LinkIconButton as standalone component - Added functionality to sidebar of team settings - Fixed type bug on public team page induced by my normalization of members array in team query - Removed teams-old which was kept as refrence - Cleaned up loose ends * [WIP] - added create team model - fixed profile missing label due to my removal of default label from component * [WIP] - Fixed TeamCreateModal trigger - removed TeamShell, it didn't make the cut - added getPlaceHolderAvatar - renamed TeamCreate to TeamCreateModal - removed deprecated UsernameInput and replaced uses with suggested TextField * fix save button * [WIP] - Fixed drop down actions on team list - Cleaned up state updates * [WIP] converting teams to tRPC * [WIP] Finished refactor to tRPC * [WIP] Finishing touches * [WIP] Team availability beginning * team availability mvp * - added validation to change role - modified layout of team availability - corrected types * fix ui issue on team availability screen * - added virtualization to team availability - added flexChildrenContainer boolean to Shell to allow for flex on children * availability style fix * removed hard coded team type as teams now use inferred type from tRPC * Removed unneeded vscode settings * Reverted prisma schema * Fixed migrations * Removes unused dayjs plugins * Reverts type regression * Type fix * Type fixes * Type fixes * Moves team availability code to ee Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: zomars <zomars@me.com>
2021-12-09 23:51:30 +00:00
onChange={(v) => v && setSelectedTimeZone(v)}
className="mt-1 block w-full rounded-sm shadow-sm sm:text-sm"
/>
</div>
</div>
<div>
<label htmlFor="timeFormat" className="block text-sm font-medium text-gray-700">
{t("time_format")}
</label>
<div className="mt-1">
<Select
id="timeFormatSelect"
value={selectedTimeFormat || props.user.timeFormat}
onChange={(v) => v && setSelectedTimeFormat(v)}
className="mt-1 block w-full rounded-sm capitalize shadow-sm sm:text-sm"
options={timeFormatOptions}
/>
</div>
</div>
<div>
<label htmlFor="weekStart" className="block text-sm font-medium text-gray-700">
{t("first_day_of_week")}
</label>
<div className="mt-1">
<Select
id="weekStart"
value={selectedWeekStartDay}
Improvement/teams (#1285) * [WIP] checkpoint before pull & merge - Added teams to sidebar - Refactored team settings - Improved team list UI This code will be partly reverted next commit. * [WIP] - Moved team code back to components - Removed team link from sidebar - Built new team manager screen based on Event Type designs - Component-ized frequently reused code (SettingInputContainer, FlatIconButton) * [WIP] - Created LinkIconButton as standalone component - Added functionality to sidebar of team settings - Fixed type bug on public team page induced by my normalization of members array in team query - Removed teams-old which was kept as refrence - Cleaned up loose ends * [WIP] - added create team model - fixed profile missing label due to my removal of default label from component * [WIP] - Fixed TeamCreateModal trigger - removed TeamShell, it didn't make the cut - added getPlaceHolderAvatar - renamed TeamCreate to TeamCreateModal - removed deprecated UsernameInput and replaced uses with suggested TextField * fix save button * [WIP] - Fixed drop down actions on team list - Cleaned up state updates * [WIP] converting teams to tRPC * [WIP] Finished refactor to tRPC * [WIP] Finishing touches * [WIP] Team availability beginning * team availability mvp * - added validation to change role - modified layout of team availability - corrected types * fix ui issue on team availability screen * - added virtualization to team availability - added flexChildrenContainer boolean to Shell to allow for flex on children * availability style fix * removed hard coded team type as teams now use inferred type from tRPC * Removed unneeded vscode settings * Reverted prisma schema * Fixed migrations * Removes unused dayjs plugins * Reverts type regression * Type fix * Type fixes * Type fixes * Moves team availability code to ee Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: zomars <zomars@me.com>
2021-12-09 23:51:30 +00:00
onChange={(v) => v && setSelectedWeekStartDay(v)}
className="mt-1 block w-full rounded-sm capitalize shadow-sm sm:text-sm"
options={[
{ value: "Sunday", label: nameOfDay(props.localeProp, 0) },
{ value: "Monday", label: nameOfDay(props.localeProp, 1) },
{ value: "Tuesday", label: nameOfDay(props.localeProp, 2) },
{ value: "Wednesday", label: nameOfDay(props.localeProp, 3) },
{ value: "Thursday", label: nameOfDay(props.localeProp, 4) },
{ value: "Friday", label: nameOfDay(props.localeProp, 5) },
{ value: "Saturday", label: nameOfDay(props.localeProp, 6) },
]}
/>
</div>
</div>
dynamic group links (#2239) * --init * added default event types * updated lib path * updated group link design * fixed collective description * added default minimum booking notice * Accept multi user query for a default event type * check types * check types --WIP * check types still --WIP * --WIP * --WIP * fixed single user type not working * check fix * --import path fix * functional collective eventtype page * fixed check type * minor fixes and --WIP * typefix * custominput in defaultevent fix * added booking page compatibility for dynamic group links * added /book compatibility for dynamic group links * checktype fix --WIP * checktype fix * Success page compatibility added * added migrations * added dynamic group booking slug to booking creation * reschedule and database fix * daily integration * daily integration --locationtype fetch * fixed reschedule * added index to key parameter in eventtype list * fix + added after last group slug * added user setting option for dynamic booking * changed defaultEvents location based on recent changes * updated default event name in updated import * disallow booking when one in group disallows it * fixed setting checkbox association * cleanup * udded better error handling for disabled dynamic group bookings * cleanup * added tooltip to allow dynamic setting and enable by default * Update yarn.lock * Fix: Embed Fixes, UI configuration PRO Only, Tests (#2341) * #2325 Followup (#2369) * Adds initial MDX implementation for App Store pages * Adds endpoint to serve app store static files * Replaces zoom icon with dynamic-served one * Fixes zoom icon * Makes Slider reusable * Adds gray-matter for MDX * Adds zoom screenshots * Update yarn.lock * Slider improvements * WIP * Update TrendingAppsSlider.tsx * WIP * Adds MS teams screenshots * Adds stripe screenshots * Cleanup * Update index.ts * WIP * Cleanup * Cleanup * Adds jitsi screenshot * Adds Google meet screenshots * Adds office 365 calendar screenshots * Adds google calendar screenshots * Follow #2325 Co-authored-by: Peer Richelsen <peeroke@gmail.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * requested changes * further requested changes * more changes * type fix * fixed prisma/client import path * added e2e test * test-fix * E2E fixes * Fixes circular dependency * Fixed paid bookings seeder * Added missing imports * requested changes * added username slugs as part of event description * updated event description Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: zomars <zomars@me.com> Co-authored-by: Peer Richelsen <peeroke@gmail.com>
2022-04-06 17:20:30 +00:00
<div className="relative mt-8 flex items-start">
<div className="flex h-5 items-center">
<input
id="dynamic-group-booking"
name="dynamic-group-booking"
type="checkbox"
ref={allowDynamicGroupBookingRef}
defaultChecked={props.user.allowDynamicBooking || false}
className="h-4 w-4 rounded-sm border-gray-300 text-neutral-900 "
dynamic group links (#2239) * --init * added default event types * updated lib path * updated group link design * fixed collective description * added default minimum booking notice * Accept multi user query for a default event type * check types * check types --WIP * check types still --WIP * --WIP * --WIP * fixed single user type not working * check fix * --import path fix * functional collective eventtype page * fixed check type * minor fixes and --WIP * typefix * custominput in defaultevent fix * added booking page compatibility for dynamic group links * added /book compatibility for dynamic group links * checktype fix --WIP * checktype fix * Success page compatibility added * added migrations * added dynamic group booking slug to booking creation * reschedule and database fix * daily integration * daily integration --locationtype fetch * fixed reschedule * added index to key parameter in eventtype list * fix + added after last group slug * added user setting option for dynamic booking * changed defaultEvents location based on recent changes * updated default event name in updated import * disallow booking when one in group disallows it * fixed setting checkbox association * cleanup * udded better error handling for disabled dynamic group bookings * cleanup * added tooltip to allow dynamic setting and enable by default * Update yarn.lock * Fix: Embed Fixes, UI configuration PRO Only, Tests (#2341) * #2325 Followup (#2369) * Adds initial MDX implementation for App Store pages * Adds endpoint to serve app store static files * Replaces zoom icon with dynamic-served one * Fixes zoom icon * Makes Slider reusable * Adds gray-matter for MDX * Adds zoom screenshots * Update yarn.lock * Slider improvements * WIP * Update TrendingAppsSlider.tsx * WIP * Adds MS teams screenshots * Adds stripe screenshots * Cleanup * Update index.ts * WIP * Cleanup * Cleanup * Adds jitsi screenshot * Adds Google meet screenshots * Adds office 365 calendar screenshots * Adds google calendar screenshots * Follow #2325 Co-authored-by: Peer Richelsen <peeroke@gmail.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * requested changes * further requested changes * more changes * type fix * fixed prisma/client import path * added e2e test * test-fix * E2E fixes * Fixes circular dependency * Fixed paid bookings seeder * Added missing imports * requested changes * added username slugs as part of event description * updated event description Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: zomars <zomars@me.com> Co-authored-by: Peer Richelsen <peeroke@gmail.com>
2022-04-06 17:20:30 +00:00
/>
</div>
<div className="text-sm ltr:ml-3 rtl:mr-3">
<label
htmlFor="dynamic-group-booking"
className="flex items-center font-medium text-gray-700">
{t("allow_dynamic_booking")} <InfoBadge content={t("allow_dynamic_booking_tooltip")} />
</label>
</div>
</div>
<div>
<label htmlFor="theme" className="block text-sm font-medium text-gray-700">
{t("single_theme")}
</label>
<div className="my-1">
<Select
id="theme"
isDisabled={!selectedTheme}
defaultValue={selectedTheme || themeOptions[0]}
value={selectedTheme || themeOptions[0]}
Improvement/teams (#1285) * [WIP] checkpoint before pull & merge - Added teams to sidebar - Refactored team settings - Improved team list UI This code will be partly reverted next commit. * [WIP] - Moved team code back to components - Removed team link from sidebar - Built new team manager screen based on Event Type designs - Component-ized frequently reused code (SettingInputContainer, FlatIconButton) * [WIP] - Created LinkIconButton as standalone component - Added functionality to sidebar of team settings - Fixed type bug on public team page induced by my normalization of members array in team query - Removed teams-old which was kept as refrence - Cleaned up loose ends * [WIP] - added create team model - fixed profile missing label due to my removal of default label from component * [WIP] - Fixed TeamCreateModal trigger - removed TeamShell, it didn't make the cut - added getPlaceHolderAvatar - renamed TeamCreate to TeamCreateModal - removed deprecated UsernameInput and replaced uses with suggested TextField * fix save button * [WIP] - Fixed drop down actions on team list - Cleaned up state updates * [WIP] converting teams to tRPC * [WIP] Finished refactor to tRPC * [WIP] Finishing touches * [WIP] Team availability beginning * team availability mvp * - added validation to change role - modified layout of team availability - corrected types * fix ui issue on team availability screen * - added virtualization to team availability - added flexChildrenContainer boolean to Shell to allow for flex on children * availability style fix * removed hard coded team type as teams now use inferred type from tRPC * Removed unneeded vscode settings * Reverted prisma schema * Fixed migrations * Removes unused dayjs plugins * Reverts type regression * Type fix * Type fixes * Type fixes * Moves team availability code to ee Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: zomars <zomars@me.com>
2021-12-09 23:51:30 +00:00
onChange={(v) => v && setSelectedTheme(v)}
className="mt-1 block w-full rounded-sm shadow-sm sm:text-sm"
options={themeOptions}
/>
</div>
<div className="relative mt-8 flex items-start">
<div className="flex h-5 items-center">
<input
id="theme-adjust-os"
name="theme-adjust-os"
type="checkbox"
onChange={(e) => setSelectedTheme(e.target.checked ? undefined : themeOptions[0])}
checked={!selectedTheme}
className="h-4 w-4 rounded-sm border-gray-300 text-neutral-900 "
/>
</div>
<div className="text-sm ltr:ml-3 rtl:mr-3">
<label htmlFor="theme-adjust-os" className="font-medium text-gray-700">
{t("automatically_adjust_theme")}
</label>
</div>
</div>
</div>
<div className="block rtl:space-x-reverse sm:flex sm:space-x-2">
<div className="mb-2 sm:w-1/2">
<label htmlFor="brandColor" className="block text-sm font-medium text-gray-700">
{t("light_brand_color")}
</label>
<ColorPicker defaultValue={props.user.brandColor} onChange={setBrandColor} />
</div>
<div className="mb-2 sm:w-1/2">
<label htmlFor="darkBrandColor" className="block text-sm font-medium text-gray-700">
{t("dark_brand_color")}
</label>
<ColorPicker defaultValue={props.user.darkBrandColor} onChange={setDarkBrandColor} />
</div>
</div>
<div>
<div className="relative flex items-start">
<div className="flex h-5 items-center">
<HideBrandingInput user={props.user} hideBrandingRef={hideBrandingRef} />
</div>
<div className="text-sm ltr:ml-3 rtl:mr-3">
<label htmlFor="hide-branding" className="font-medium text-gray-700">
{t("disable_cal_branding")}{" "}
{props.user.plan !== "PRO" && <Badge variant="default">PRO</Badge>}
</label>
<p className="text-gray-500">{t("disable_cal_branding_description")}</p>
</div>
</div>
</div>
<h3 className="text-md mt-7 font-bold leading-6 text-red-700">{t("danger_zone")}</h3>
<div>
<div className="relative flex items-start">
<Dialog>
<DialogTrigger asChild>
<Button
type="button"
color="warn"
StartIcon={TrashIcon}
className="border-2 border-red-700 text-red-700"
data-testid="delete-account">
{t("delete_account")}
</Button>
</DialogTrigger>
<ConfirmationDialogContent
variety="danger"
title={t("delete_account")}
confirmBtn={
<Button color="warn" data-testid="delete-account-confirm">
{t("confirm_delete_account")}
</Button>
}
onConfirm={() => deleteAccount()}>
{t("delete_account_confirmation_message")}
</ConfirmationDialogContent>
</Dialog>
</div>
</div>
</div>
</div>
<hr className="mt-8" />
<div className="flex justify-end py-4">
<Button type="submit">{t("save")}</Button>
</div>
</div>
</form>
);
}
const WithQuery = withQuery(["viewer.public.i18n"]);
export default function Settings(props: Props) {
const { t } = useLocale();
return (
<SettingsShell heading={t("profile")} subtitle={t("edit_profile_info_description")}>
<WithQuery success={({ data }) => <SettingsView {...props} localeProp={data.locale} />} />
</SettingsShell>
);
2021-04-07 15:03:02 +00:00
}
export const getServerSideProps = async (context: GetServerSidePropsContext) => {
const session = await getSession(context);
if (!session?.user?.id) {
return { redirect: { permanent: false, destination: "/auth/login" } };
}
2021-04-07 15:03:02 +00:00
const user = await prisma.user.findUnique({
where: {
id: session.user.id,
2021-07-11 19:35:56 +00:00
},
select: {
id: true,
username: true,
name: true,
email: true,
bio: true,
avatar: true,
timeZone: true,
weekStart: true,
hideBranding: true,
theme: true,
plan: true,
brandColor: true,
darkBrandColor: true,
metadata: true,
timeFormat: true,
dynamic group links (#2239) * --init * added default event types * updated lib path * updated group link design * fixed collective description * added default minimum booking notice * Accept multi user query for a default event type * check types * check types --WIP * check types still --WIP * --WIP * --WIP * fixed single user type not working * check fix * --import path fix * functional collective eventtype page * fixed check type * minor fixes and --WIP * typefix * custominput in defaultevent fix * added booking page compatibility for dynamic group links * added /book compatibility for dynamic group links * checktype fix --WIP * checktype fix * Success page compatibility added * added migrations * added dynamic group booking slug to booking creation * reschedule and database fix * daily integration * daily integration --locationtype fetch * fixed reschedule * added index to key parameter in eventtype list * fix + added after last group slug * added user setting option for dynamic booking * changed defaultEvents location based on recent changes * updated default event name in updated import * disallow booking when one in group disallows it * fixed setting checkbox association * cleanup * udded better error handling for disabled dynamic group bookings * cleanup * added tooltip to allow dynamic setting and enable by default * Update yarn.lock * Fix: Embed Fixes, UI configuration PRO Only, Tests (#2341) * #2325 Followup (#2369) * Adds initial MDX implementation for App Store pages * Adds endpoint to serve app store static files * Replaces zoom icon with dynamic-served one * Fixes zoom icon * Makes Slider reusable * Adds gray-matter for MDX * Adds zoom screenshots * Update yarn.lock * Slider improvements * WIP * Update TrendingAppsSlider.tsx * WIP * Adds MS teams screenshots * Adds stripe screenshots * Cleanup * Update index.ts * WIP * Cleanup * Cleanup * Adds jitsi screenshot * Adds Google meet screenshots * Adds office 365 calendar screenshots * Adds google calendar screenshots * Follow #2325 Co-authored-by: Peer Richelsen <peeroke@gmail.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * requested changes * further requested changes * more changes * type fix * fixed prisma/client import path * added e2e test * test-fix * E2E fixes * Fixes circular dependency * Fixed paid bookings seeder * Added missing imports * requested changes * added username slugs as part of event description * updated event description Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: zomars <zomars@me.com> Co-authored-by: Peer Richelsen <peeroke@gmail.com>
2022-04-06 17:20:30 +00:00
allowDynamicBooking: true,
},
});
if (!user) {
throw new Error("User seems logged in but cannot be found in the db");
}
return {
props: {
user: {
...user,
emailMd5: crypto.createHash("md5").update(user.email).digest("hex"),
},
},
};
};