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>

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;

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",

apps/web/pages/v2/settings/my-account/appearance.tsx

@@ -1,18 +1,26 @@
 import { GetServerSidePropsContext } from "next";
 import { Trans } from "next-i18next";
+import { useRouter } from "next/router";
+import { title } from "process";
+import { useMemo, useState } from "react";
 import { useForm, Controller } from "react-hook-form";
 
+import { WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import prisma from "@calcom/prisma";
 import { trpc } from "@calcom/trpc/react";
+import { Icon } from "@calcom/ui";
+import Avatar from "@calcom/ui/v2/core/Avatar";
 import Badge from "@calcom/ui/v2/core/Badge";
 import { Button } from "@calcom/ui/v2/core/Button";
+import Loader from "@calcom/ui/v2/core/Loader";
 import Switch from "@calcom/ui/v2/core/Switch";
+import TimezoneSelect from "@calcom/ui/v2/core/TimezoneSelect";
 import ColorPicker from "@calcom/ui/v2/core/colorpicker";
 import Select from "@calcom/ui/v2/core/form/Select";
-import { Form } from "@calcom/ui/v2/core/form/fields";
+import { TextField, Form, Label } from "@calcom/ui/v2/core/form/fields";
+import { getLayout } from "@calcom/ui/v2/core/layouts/AdminLayout";
 import showToast from "@calcom/ui/v2/core/notfications";
-import SettingsShell from "@calcom/ui/v2/modules/settings/SettingsShell";
 
 import { getSession } from "@lib/auth";
 import { inferSSRProps } from "@lib/types/inferSSRProps";
@@ -38,133 +46,129 @@ const AppearanceView = (props: inferSSRProps<typeof getServerSideProps>) => {
   const formMethods = useForm();
 
   return (
-    <SettingsShell heading={t("appearance")} subtitle={t("appearance_subtitle")}>
-      <Form
-        form={formMethods}
-        handleSubmit={(values) => {
-          mutation.mutate({
-            ...values,
-            theme: values.theme.value,
-          });
-        }}>
+    <Form
+      form={formMethods}
+      handleSubmit={(values) => {
+        mutation.mutate({
+          ...values,
+          theme: values.theme.value,
+        });
+      }}>
+      <Controller
+        name="theme"
+        control={formMethods.control}
+        defaultValue={user.theme}
+        render={({ field: { value } }) => (
+          <>
+            <div className="flex items-center">
+              <div>
+                <p className="font-semibold">{t("follow_system_preferences")}</p>
+                <p className="text-gray-600">
+                  <Trans i18nKey="system_preference_description">
+                    Automatically adjust theme based on invitee system preferences. Note: This only applies to
+                    the booking pages.
+                  </Trans>
+                </p>
+              </div>
+              <Switch
+                onCheckedChange={(checked) => formMethods.setValue("theme", checked ? null : themeOptions[0])}
+                checked={!value}
+              />
+            </div>
+            <div>
+              <Select
+                options={themeOptions}
+                onChange={(event) => {
+                  if (event) formMethods.setValue("theme", { ...event });
+                }}
+                isDisabled={!value}
+                defaultValue={value || themeOptions[0]}
+                value={value || themeOptions[0]}
+              />
+            </div>
+          </>
+        )}
+      />
+
+      <hr className="border-1 my-8 border-neutral-200" />
+      <div className="mb-6 flex items-center">
+        <div>
+          <p className="font-semibold">{t("custom_brand_colors")}</p>
+          <p className="text-gray-600">{t("customize_your_brand_colors")}</p>
+        </div>
+      </div>
+
+      <div className="flex justify-between">
         <Controller
-          name="theme"
+          name="brandColor"
           control={formMethods.control}
-          defaultValue={user.theme}
+          defaultValue={user.brandColor}
           render={({ field: { value } }) => (
-            <>
-              <div className="flex items-center">
-                <div>
-                  <p className="font-semibold">{t("follow_system_preferences")}</p>
-                  <p className="text-gray-600">
-                    <Trans i18nKey="system_preference_description">
-                      Automatically adjust theme based on invitee system preferences. Note: This only applies
-                      to the booking pages.
-                    </Trans>
-                  </p>
-                </div>
-                <Switch
-                  onCheckedChange={(checked) =>
-                    formMethods.setValue("theme", checked ? null : themeOptions[0])
-                  }
-                  checked={!value}
-                />
-              </div>
-              <div>
-                <Select
-                  options={themeOptions}
-                  onChange={(event) => {
-                    if (event) formMethods.setValue("theme", { ...event });
-                  }}
-                  isDisabled={!value}
-                  defaultValue={value || themeOptions[0]}
-                  value={value || themeOptions[0]}
-                />
-              </div>
-            </>
+            <div>
+              <p className="block text-sm font-medium text-gray-900">{t("light_brand_color")}</p>
+              <ColorPicker
+                defaultValue={user.brandColor}
+                onChange={(value) => formMethods.setValue("brandColor", value)}
+              />
+            </div>
           )}
         />
+        <Controller
+          name="darkBrandColor"
+          control={formMethods.control}
+          defaultValue={user.darkBrandColor}
+          render={({ field: { value } }) => (
+            <div>
+              <p className="block text-sm font-medium text-gray-900">{t("dark_brand_color")}</p>
+              <ColorPicker
+                defaultValue={user.darkBrandColor}
+                onChange={(value) => formMethods.setValue("darkBrandColor", value)}
+              />
+            </div>
+          )}
+        />
+      </div>
 
-        <hr className="border-1 my-8 border-neutral-200" />
-        <div className="mb-6 flex items-center">
-          <div>
-            <p className="font-semibold">{t("custom_brand_colors")}</p>
-            <p className="text-gray-600">{t("customize_your_brand_colors")}</p>
-          </div>
-        </div>
-
-        <div className="flex justify-between">
-          <Controller
-            name="brandColor"
-            control={formMethods.control}
-            defaultValue={user.brandColor}
-            render={({ field: { value } }) => (
-              <div>
-                <p className="block text-sm font-medium text-gray-900">{t("light_brand_color")}</p>
-                <ColorPicker
-                  defaultValue={user.brandColor}
-                  onChange={(value) => formMethods.setValue("brandColor", value)}
-                />
-              </div>
-            )}
-          />
-          <Controller
-            name="darkBrandColor"
-            control={formMethods.control}
-            defaultValue={user.darkBrandColor}
-            render={({ field: { value } }) => (
-              <div>
-                <p className="block text-sm font-medium text-gray-900">{t("dark_brand_color")}</p>
-                <ColorPicker
-                  defaultValue={user.darkBrandColor}
-                  onChange={(value) => formMethods.setValue("darkBrandColor", value)}
-                />
-              </div>
-            )}
-          />
-        </div>
-
-        {/* TODO future PR to preview brandColors */}
-        {/* <Button
+      {/* TODO future PR to preview brandColors */}
+      {/* <Button
         color="secondary"
         EndIcon={Icon.FiExternalLink}
         className="mt-6"
         onClick={() => window.open(`${WEBAPP_URL}/${user.username}/${user.eventTypes[0].title}`, "_blank")}>
         Preview
       </Button> */}
 
-        <hr className="border-1 my-8 border-neutral-200" />
-        <Controller
-          name="hideBranding"
-          control={formMethods.control}
-          defaultValue={user.hideBranding}
-          render={({ field: { value } }) => (
-            <>
-              <div className="flex items-center">
-                <div>
-                  <div className="flex items-center">
-                    <p className="mr-2 font-semibold">{t("disable_cal_branding")}</p>{" "}
-                    <Badge variant="gray">{t("pro")}</Badge>
-                  </div>
-                  <p className="text-gray-600">{t("removes_cal_branding")}</p>
+      <hr className="border-1 my-8 border-neutral-200" />
+      <Controller
+        name="hideBranding"
+        control={formMethods.control}
+        defaultValue={user.hideBranding}
+        render={({ field: { value } }) => (
+          <>
+            <div className="flex items-center">
+              <div>
+                <div className="flex items-center">
+                  <p className="mr-2 font-semibold">{t("disable_cal_branding")}</p>{" "}
+                  <Badge variant="gray">{t("pro")}</Badge>
                 </div>
-                <Switch
-                  onCheckedChange={(checked) => formMethods.setValue("hideBranding", checked)}
-                  checked={value}
-                />
+                <p className="text-gray-600">{t("removes_cal_branding")}</p>
               </div>
-            </>
-          )}
-        />
-        <Button color="primary" className="mt-8">
-          {t("update")}
-        </Button>
-      </Form>
-    </SettingsShell>
+              <Switch
+                onCheckedChange={(checked) => formMethods.setValue("hideBranding", checked)}
+                checked={value}
+              />
+            </div>
+          </>
+        )}
+      />
+      <Button color="primary" className="mt-8">
+        {t("update")}
+      </Button>
+    </Form>
   );
 };
 
-// AppearanceView.getLayout = getLayout;
+AppearanceView.getLayout = getLayout;
 
 export default AppearanceView;
 

apps/web/pages/v2/settings/my-account/profile.tsx

@@ -195,6 +195,7 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
       id: session.user.id,
     },
     select: {
+      id: true,
       username: true,
       email: true,
       name: true,

packages/ui/v2/core/Shell.tsx

@@ -135,7 +135,7 @@ const Layout = (props: LayoutProps) => {
       </div>
 
       <div className="flex h-screen overflow-hidden" data-testid="dashboard-shell">
-        <SideBarContainer />
+        {props.SidebarContainer || <SideBarContainer />}
         <div className="flex w-0 flex-1 flex-col overflow-hidden">
           <ImpersonatingBanner />
           <MainContainer {...props} />
@@ -153,6 +153,7 @@ type LayoutProps = {
   children: ReactNode;
   CTA?: ReactNode;
   large?: boolean;
+  SidebarContainer?: ReactNode;
   HeadingLeftIcon?: ReactNode;
   backPath?: string; // renders back button to specified path
   // use when content needs to expand with flex

packages/ui/v2/core/layouts/SettingsLayout.tsx

@@ -2,6 +2,7 @@ import React, { ComponentProps } from "react";
 
 import { Icon } from "../../../Icon";
 import Shell from "../Shell";
+import { VerticalTabItem } from "../navigation/tabs";
 import VerticalTabs from "../navigation/tabs/VerticalTabs";
 
 const tabs = [
@@ -10,12 +11,13 @@ const tabs = [
     href: "/settings/profile",
     icon: Icon.FiUser,
     children: [
-      { name: "profile", href: "/settings/profile" },
-      { name: "general", href: "/settings/profile" },
-      { name: "calendars", href: "/settings/profile" },
-      { name: "conferencing", href: "/settings/profile" },
-      { name: "appearance", href: "/settings/profile" },
-      { name: "referrals", href: "/settings/profile" },
+      { name: "profile", href: "/settings/my-account/profile" },
+      { name: "general", href: "/settings/my-account/general" },
+      { name: "calendars", href: "/settings/my-account/calendars" },
+      { name: "conferencing", href: "/settings/my-account/conferencing" },
+      { name: "appearance", href: "/settings/my-account/appearance" },
+      // TODO
+      { name: "referrals", href: "/settings/my-account/referrals" },
     ],
   },
   {
@@ -72,10 +74,20 @@ export default function SettingsLayout({
   ...rest
 }: { children: React.ReactNode } & ComponentProps<typeof Shell>) {
   return (
-    <Shell {...rest}>
-      <div className="flex-grow-0 bg-gray-50 p-2">
-        <VerticalTabs tabs={tabs} />
-      </div>
+    <Shell
+      flexChildrenContainer
+      {...rest}
+      SidebarContainer={
+        <VerticalTabs tabs={tabs} className="py-3 pl-3">
+          <VerticalTabItem
+            name="Settings"
+            href="/"
+            icon={Icon.FiArrowLeft}
+            textClassNames="text-md font-medium leading-none text-black"
+            className="mb-1"
+          />
+        </VerticalTabs>
+      }>
       <div className="flex-1 [&>*]:flex-1">{children}</div>
     </Shell>
   );