2.0 Settings / My Account {View} (#3874)

* Fix breadcrumb colors * HorizontalTabs * Team List Item WIP * Horizontal Tabs * Cards * Remove team list item WIP * Login Page * Add welcome back i118n * EventType page work * Update EventType Icons * WIP Availability * Horizontal Tab Work * Add build command for in root * Update build DIr/command * Add Edit Button + change buttons to v2 * Availablitiy page * Fix IPAD * Make mobile look a little nicer * WIP bookingshell * Remove list items from breaking build * Mian bulk of Booking Page. * Few updates to components * Fix chormatic feedback * Fix banner * Fix Empty Screen * Text area + embded window fixes * Semi fix avatar * Troubleshoot container + Active on count * Improve mobile * NITS * Fix padding on input * Fix icons * Starting to move event types settings to tabs * Begin migration to single page form * Single page tabs * Limits Page * Advanced tab * Add RHF to dependancies * Most of advanced tab * Solved RHF mismtach * Build fixes * RHF conditionals fixes * Improved legibility * Major refactor/organisation into optional V2 UI * Portal EditLocationModal * Fix dialoug form * Update imports * Auto Animate + custom inputs WIP * Custom Inputs * WIP Apps * Fixing stories imports * Stripe app * Remove duplicate dialog * Remove duplicate dialog * Fix embed URL * Fix app toggles + number of active apps * Fix container padding on disabledBorder prop * Removes strict * EventType Team page WIP * Fix embed * NIT * Add Darkmode gray color * V2 Shell WIP * Create my account folder * Add profile section * Fix headings on shell V2 * Fix mobile layout with V2 shell * V2 create event type button * Checked Team Select * Hidden to happen on save - not on toggle * Team Attendee Select animation * WIP * Fix scheduling type and remove multi select label * Fix overflow on teams url * Finish profile fields * Show toast on success * General tab WIP * Even Type move order handles * Add switching of destination calendar * List calendar and delete * Render empty screenwhen no calendars * Fix Embed TS errors * Fix TS errors * Fix Eslint errors * Fix TS errors for UI * Fix ESLINT error * added SidebarCard for promo to v2 and storybook (#3906) Co-authored-by: Julian Benegas <julianbenegas99@gmail.com> Co-authored-by: Alan <alannnc@gmail.com> Co-authored-by: sean-brydon <55134778+sean-brydon@users.noreply.github.com> * Tooltip Provider - Wrapper due to dep upgrade * public event type list darkmode * V2 Color changes to public booking * Remove unused component * Fix typecheck * Transfer to SSR * Appearance screen made * V2 image uploader * WIP appearance page * Remove unnecessary data from viewer.me * Add profile translations * Add translations to general page * Add calendar switch * Add calendar switch * Add translations to appearance page * Clean up conferencing page * Settings sidebar fixes * Updates middleware * Update SettingsLayout.tsx * Settings layout improvements * Type fix Co-authored-by: sean-brydon <55134778+sean-brydon@users.noreply.github.com> Co-authored-by: Peer Richelsen <peeroke@gmail.com> Co-authored-by: zomars <zomars@me.com> Co-authored-by: Hariom Balhara <hariombalhara@gmail.com> Co-authored-by: Julian Benegas <julianbenegas99@gmail.com> Co-authored-by: Alan <alannnc@gmail.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
calcom · Aug 26, 2022 · 87cce8e · 87cce8e
1 parent 11dc9c6
commit 87cce8e
Show file tree

Hide file tree

Showing 16 changed files with 1,322 additions and 29 deletions.
diff --git a/apps/web/components/v2/settings/CalendarSwitch.tsx b/apps/web/components/v2/settings/CalendarSwitch.tsx
@@ -0,0 +1,84 @@
+import { useMutation } from "react-query";
+
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { trpc } from "@calcom/trpc/react";
+import { Icon } from "@calcom/ui";
+import Badge from "@calcom/ui/v2/core/Badge";
+import Switch from "@calcom/ui/v2/core/Switch";
+import showToast from "@calcom/ui/v2/core/notfications";
+
+export function CalendarSwitch(props: {
+ type: string;
+ externalId: string;
+ title: string;
+ defaultSelected: boolean;
+}) {
+ const { t } = useLocale();
+
+ const utils = trpc.useContext();
+
+ const mutation = useMutation<
+ unknown,
+ unknown,
+ {
+ isOn: boolean;
+ }
+ >(
+ async ({ isOn }) => {
+ const body = {
+ integration: props.type,
+ externalId: props.externalId,
+ };
+ if (isOn) {
+ const res = await fetch("/api/availability/calendar", {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ body: JSON.stringify(body),
+ });
+ if (!res.ok) {
+ throw new Error("Something went wrong");
+ }
+ } else {
+ const res = await fetch("/api/availability/calendar", {
+ method: "DELETE",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ body: JSON.stringify(body),
+ });
+
+ if (!res.ok) {
+ throw new Error("Something went wrong");
+ }
+ }
+ },
+ {
+ async onSettled() {
+ await utils.invalidateQueries(["viewer.integrations"]);
+ },
+ onError() {
+ showToast(`Something went wrong when toggling "${props.title}""`, "error");
+ },
+ }
+ );
+ return (
+ <div className="flex space-x-2 py-1">
+ <Switch
+ key={props.externalId}
+ name="enabled"
+ label={props.title}
+ defaultChecked={props.defaultSelected}
+ onCheckedChange={(isOn: boolean) => {
+ mutation.mutate({ isOn });
+ }}
+ />
+ {props.defaultSelected && (
+ <Badge variant="gray">
+ <Icon.FiArrowLeft /> {t("adding_events_to")}
+ </Badge>
+ )}
+ </div>
+ );
+}
diff --git a/apps/web/components/v2/settings/ImageUploader.tsx b/apps/web/components/v2/settings/ImageUploader.tsx
@@ -0,0 +1,169 @@
+import { FormEvent, useCallback, useEffect, useState } from "react";
+import Cropper from "react-easy-crop";
+
+import { Dialog, DialogClose, DialogContent, DialogTrigger } from "@calcom/ui/Dialog";
+import Button from "@calcom/ui/v2/core/Button";
+
+import { Area, getCroppedImg } from "@lib/cropImage";
+import { useFileReader } from "@lib/hooks/useFileReader";
+import { useLocale } from "@lib/hooks/useLocale";
+
+import Slider from "@components/Slider";
+
+type ImageUploaderProps = {
+ id: string;
+ buttonMsg: string;
+ handleAvatarChange: (imageSrc: string) => void;
+ imageSrc?: string;
+ target: string;
+};
+
+interface FileEvent<T = Element> extends FormEvent<T> {
+ target: EventTarget & T;
+}
+
+// This is separate to prevent loading the component until file upload
+function CropContainer({
+ onCropComplete,
+ imageSrc,
+}: {
+ imageSrc: string;
+ onCropComplete: (croppedAreaPixels: Area) => void;
+}) {
+ const { t } = useLocale();
+ const [crop, setCrop] = useState({ x: 0, y: 0 });
+ const [zoom, setZoom] = useState(1);
+
+ const handleZoomSliderChange = (value: number) => {
+ value < 1 ? setZoom(1) : setZoom(value);
+ };
+
+ return (
+ <div className="crop-container h-40 max-h-40 w-40 rounded-full">
+ <div className="relative h-40 w-40 rounded-full">
+ <Cropper
+ image={imageSrc}
+ crop={crop}
+ zoom={zoom}
+ aspect={1}
+ onCropChange={setCrop}
+ onCropComplete={(croppedArea, croppedAreaPixels) => onCropComplete(croppedAreaPixels)}
+ onZoomChange={setZoom}
+ />
+ </div>
+ <Slider
+ value={zoom}
+ min={1}
+ max={3}
+ step={0.1}
+ label={t("slide_zoom_drag_instructions")}
+ changeHandler={handleZoomSliderChange}
+ />
+ </div>
+ );
+}
+
+export default function ImageUploader({
+ target,
+ id,
+ buttonMsg,
+ handleAvatarChange,
+ ...props
+}: ImageUploaderProps) {
+ const { t } = useLocale();
+ const [imageSrc, setImageSrc] = useState<string | null>(null);
+ const [croppedAreaPixels, setCroppedAreaPixels] = useState<Area | null>(null);
+
+ const [{ result }, setFile] = useFileReader({
+ method: "readAsDataURL",
+ });
+
+ useEffect(() => {
+ if (props.imageSrc) setImageSrc(props.imageSrc);
+ }, [props.imageSrc]);
+
+ const onInputFile = (e: FileEvent<HTMLInputElement>) => {
+ if (!e.target.files?.length) {
+ return;
+ }
+ setFile(e.target.files[0]);
+ };
+
+ const showCroppedImage = useCallback(
+ async (croppedAreaPixels: Area | null) => {
+ try {
+ if (!croppedAreaPixels) return;
+ const croppedImage = await getCroppedImg(
+ result as string /* result is always string when using readAsDataUrl */,
+ croppedAreaPixels
+ );
+ setImageSrc(croppedImage);
+ handleAvatarChange(croppedImage);
+ } catch (e) {
+ console.error(e);
+ }
+ },
+ [result, handleAvatarChange]
+ );
+
+ return (
+ <Dialog
+ onOpenChange={
+ (opened) => !opened && setFile(null) // unset file on close
+ }>
+ <DialogTrigger asChild>
+ <div className="flex items-center">
+ <Button color="secondary" type="button" className="py-1 text-xs">
+ {buttonMsg}
+ </Button>
+ </div>
+ </DialogTrigger>
+ <DialogContent>
+ <div className="mb-4 sm:flex sm:items-start">
+ <div className="mt-3 text-center sm:mt-0 sm:text-left">
+ <h3 className="font-cal text-lg leading-6 text-gray-900" id="modal-title">
+ {t("upload_target", { target })}
+ </h3>
+ </div>
+ </div>
+ <div className="mb-4">
+ <div className="cropper mt-6 flex flex-col items-center justify-center p-8">
+ {!result && (
+ <div className="flex h-20 max-h-20 w-20 items-center justify-start rounded-full bg-gray-50">
+ {!imageSrc && (
+ <p className="w-full text-center text-sm text-white sm:text-xs">
+ {t("no_target", { target })}
+ </p>
+ )}
+ {imageSrc && (
+ // eslint-disable-next-line @next/next/no-img-element
+ <img className="h-20 w-20 rounded-full" src={imageSrc} alt={target} />
+ )}
+ </div>
+ )}
+ {result && <CropContainer imageSrc={result as string} onCropComplete={setCroppedAreaPixels} />}
+ <label className="mt-8 rounded-sm border border-gray-300 bg-white px-3 py-1 text-xs font-medium leading-4 text-gray-700 hover:bg-gray-50 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-neutral-900 focus:ring-offset-1 dark:border-gray-800 dark:bg-transparent dark:text-white dark:hover:bg-gray-900">
+ <input
+ onInput={onInputFile}
+ type="file"
+ name={id}
+ placeholder={t("upload_image")}
+ className="pointer-events-none absolute mt-4 opacity-0"
+ accept="image/*"
+ />
+ {t("choose_a_file")}
+ </label>
+ </div>
+ </div>
+ <div className="mt-5 gap-x-2 sm:mt-4 sm:flex sm:flex-row-reverse">
+ <DialogClose asChild>
+ <Button onClick={() => showCroppedImage(croppedAreaPixels)}>{t("save")}</Button>
+ </DialogClose>
+ <DialogClose asChild>
+ <Button color="secondary">{t("cancel")}</Button>
+ </DialogClose>
+ </div>
+ </DialogContent>
+ </Dialog>
+ );
+}
diff --git a/apps/web/middleware.ts b/apps/web/middleware.ts
@@ -5,7 +5,13 @@ import { CONSOLE_URL, WEBAPP_URL, WEBSITE_URL } from "@calcom/lib/constants";
 import { isIpInBanlist } from "@calcom/lib/getIP";
 import { extendEventData, nextCollectBasicSettings } from "@calcom/lib/telemetry";
 
-const V2_WHITELIST = ["/settings/admin", "/availability", "/bookings", "/event-types"];
+const V2_WHITELIST = [
+ "/settings/admin",
+ "/settings/my-account",
+ "/availability",
+ "/bookings",
+ "/event-types",
+];
 
 const middleware: NextMiddleware = async (req) => {
  const url = req.nextUrl;

diff --git a/apps/web/next.config.js b/apps/web/next.config.js
@@ -126,6 +126,13 @@ const nextConfig = {
  destination: "/settings/profile",
  permanent: true,
  },
+ /* V2 testers get redirected to the new settings */
+ {
+ source: "/settings/profile",
+ has: [{ type: "cookie", key: "calcom-v2-early-access" }],
+ destination: "/settings/my-account/profile",
+ permanent: false,
+ },
  {
  source: "/bookings",
  destination: "/bookings/upcoming",