v2.0.4

* nit

* added timezoneChangeDialog

* prevent interactOutside

* nit

* fixed title prop clash

* nit

* remind in one day if clicked outside

* Use utcOffset instead of tz string for checking diff

Co-authored-by: Alex van Andel <me@alexvanandel.com>

apps/web/components/booking/TimeOptions.tsx

@@ -33,7 +33,7 @@ const TimeOptions: FC<Props> = ({ onToggle24hClock, onSelectTimeZone, timeFormat
   };
 
   return selectedTimeZone !== "" ? (
-    <div className="max-w-80 dark:border-darkgray-300 dark:bg-darkgray-200 absolute z-10 w-full rounded-sm border border-gray-200 bg-white px-4 pt-4 pb-3 shadow-sm">
+    <div className="dark:border-darkgray-300 dark:bg-darkgray-200 rounded-sm border border-gray-200 bg-white px-4 pt-4 pb-3 shadow-sm">
       <div className="mb-4 flex">
         <div className="text-sm font-medium text-gray-600 dark:text-white">{t("time_options")}</div>
         <div className="ml-auto flex items-center">

apps/web/components/booking/pages/AvailabilityPage.tsx

@@ -1,7 +1,7 @@
 // Get router variables
 import { EventType } from "@prisma/client";
 import { SchedulingType } from "@prisma/client";
-import * as Collapsible from "@radix-ui/react-collapsible";
+import * as Popover from "@radix-ui/react-popover";
 import { TFunction } from "next-i18next";
 import { useRouter } from "next/router";
 import { useReducer, useEffect, useMemo, useState } from "react";
@@ -240,8 +240,8 @@ function TimezoneDropdown({
   };
 
   return (
-    <Collapsible.Root open={isTimeOptionsOpen} onOpenChange={setIsTimeOptionsOpen} className="flex">
-      <Collapsible.Trigger className="min-w-32 dark:text-darkgray-600 mb-2 -ml-2 px-2 text-left text-gray-600">
+    <Popover.Root open={isTimeOptionsOpen} onOpenChange={setIsTimeOptionsOpen}>
+      <Popover.Trigger className="min-w-32 dark:text-darkgray-600 radix-state-open:bg-gray-200 dark:radix-state-open:bg-darkgray-200 group relative mb-2 -ml-2 inline-block rounded-md px-2 py-2 text-left text-gray-600">
         <p className="text-sm font-medium">
           <Icon.FiGlobe className="mr-[10px] ml-[2px] -mt-[2px] inline-block h-4 w-4" />
           {timeZone}
@@ -251,15 +251,20 @@ function TimezoneDropdown({
             <Icon.FiChevronDown className="ml-1 inline-block h-4 w-4" />
           )}
         </p>
-      </Collapsible.Trigger>
-      <Collapsible.Content>
-        <TimeOptions
-          onSelectTimeZone={handleSelectTimeZone}
-          onToggle24hClock={handleToggle24hClock}
-          timeFormat={timeFormat}
-        />
-      </Collapsible.Content>
-    </Collapsible.Root>
+      </Popover.Trigger>
+      <Popover.Portal>
+        <Popover.Content
+          hideWhenDetached
+          align="start"
+          className="animate-fade-in-up absolute left-0 top-2 w-80 max-w-[calc(100vw_-_1.5rem)]">
+          <TimeOptions
+            onSelectTimeZone={handleSelectTimeZone}
+            onToggle24hClock={handleToggle24hClock}
+            timeFormat={timeFormat}
+          />
+        </Popover.Content>
+      </Popover.Portal>
+    </Popover.Root>
   );
 }
 
@@ -416,7 +421,7 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
                     <h1 className="text-bookingdark dark:text-darkgray-900 mb-4 break-words text-xl font-semibold">
                       {eventType.title}
                     </h1>
-                    <div className="flex flex-col space-y-3">
+                    <div className="flex flex-col items-start space-y-3">
                       {eventType?.description && (
                         <div className="dark:text-darkgray-600 flex py-1 text-sm font-medium text-gray-600">
                           <div>
@@ -500,7 +505,7 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
             <div className="overflow-hidden sm:flex">
               <div
                 className={
-                  "sm:dark:border-darkgray-200 hidden overflow-hidden border-gray-200 p-5 sm:border-r md:flex md:flex-col " +
+                  "sm:dark:border-darkgray-200 hidden border-gray-200 p-5 sm:border-r md:flex md:flex-col " +
                   (isAvailableTimesVisible ? "sm:w-1/3" : recurringEventCount ? "sm:w-2/3" : "sm:w-1/2")
                 }>
                 <UserAvatars

apps/web/middleware.ts

@@ -7,6 +7,7 @@ import { extendEventData, nextCollectBasicSettings } from "@calcom/lib/telemetry
 
 const V2_WHITELIST = [
   "/settings/admin",
+  "/settings/billing",
   "/settings/developer/webhooks",
   "/settings/developer/api-keys",
   "/settings/my-account",

apps/web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@calcom/web",
-  "version": "2.0.3",
+  "version": "2.0.4",
   "private": true,
   "scripts": {
     "analyze": "ANALYZE=true next build",

apps/web/pages/event-types/index.tsx

@@ -542,6 +542,7 @@ const EventTypesPage = () => {
         <title>Home | Cal.com</title>
         <link rel="icon" href="/favicon.ico" />
       </Head>
+
       <Shell
         heading={t("event_types_page_title") as string}
         subtitle={t("event_types_page_subtitle") as string}

apps/web/pages/v2/event-types/index.tsx

@@ -52,7 +52,7 @@ const Item = ({ type, group, readOnly }: { type: EventType; group: EventTypeGrou
   const { t } = useLocale();
 
   return (
-    <Link href={`/event-types/${type.id}`}>
+    <Link href={`/event-types/${type.id}?tabName=setup`}>
       <a
         className="flex-grow truncate text-sm"
         title={`${type.title} ${type.description ? `– ${type.description}` : ""}`}>

apps/web/pages/v2/settings/billing/index.tsx

@@ -0,0 +1,86 @@
+import { useState } from "react";
+import { HelpScout, useChat } from "react-live-chat-loader";
+
+import { classNames } from "@calcom/lib";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { trpc } from "@calcom/trpc/react";
+import { Icon } from "@calcom/ui";
+import { Button } from "@calcom/ui/v2";
+import Meta from "@calcom/ui/v2/core/Meta";
+import { getLayout } from "@calcom/ui/v2/core/layouts/SettingsLayout";
+
+interface CtaRowProps {
+  title: string;
+  description: string;
+  children: React.ReactNode;
+  className?: string;
+}
+
+const CtaRow = ({ title, description, className, children }: CtaRowProps) => {
+  return (
+    <>
+      <section className={classNames("flex flex-col sm:flex-row", className)}>
+        <div>
+          <h2 className="font-medium">{title}</h2>
+          <p>{description}</p>
+        </div>
+        <div className="flex-shrink-0 pt-3 sm:ml-auto sm:pt-0 sm:pl-3">{children}</div>
+      </section>
+      <hr className="border-neutral-200" />
+    </>
+  );
+};
+
+const BillingView = () => {
+  const { t } = useLocale();
+  const { data: user } = trpc.useQuery(["viewer.me"]);
+  const isPro = user?.plan === "PRO";
+  const [, loadChat] = useChat();
+  const [showChat, setShowChat] = useState(false);
+
+  const onContactSupportClick = () => {
+    setShowChat(true);
+    loadChat({ open: true });
+  };
+
+  return (
+    <>
+      <Meta title={t("billing")} description={t("manage_billing_description")} />
+      <div className="space-y-6 text-sm sm:space-y-8">
+        {!isPro && (
+          <CtaRow title={t("billing_freeplan_title")} description={t("billing_freeplan_description")}>
+            <form target="_blank" method="POST" action="/api/upgrade">
+              <Button type="submit" EndIcon={Icon.FiExternalLink}>
+                {t("billing_freeplan_cta")}
+              </Button>
+            </form>
+          </CtaRow>
+        )}
+
+        <CtaRow
+          className={classNames(!isPro && "pointer-events-none opacity-30")}
+          title={t("billing_manage_details_title")}
+          description={t("billing_manage_details_description")}>
+          <Button
+            color={isPro ? "primary" : "secondary"}
+            href="/api/integrations/stripepayment/portal"
+            target="_blank"
+            EndIcon={Icon.FiExternalLink}>
+            {t("billing_portal")}
+          </Button>
+        </CtaRow>
+
+        <CtaRow title={t("billing_help_title")} description={t("billing_help_description")}>
+          <Button color="secondary" onClick={onContactSupportClick}>
+            {t("billing_help_cta")}
+          </Button>
+        </CtaRow>
+        {showChat && <HelpScout color="#292929" icon="message" horizontalPosition="right" zIndex="1" />}
+      </div>
+    </>
+  );
+};
+
+BillingView.getLayout = getLayout;
+
+export default BillingView;

apps/web/playwright/event-types.e2e.ts

@@ -1,5 +1,7 @@
 import { expect } from "@playwright/test";
 
+import { WEBAPP_URL } from "@calcom/lib/constants";
+
 import { randomString } from "../lib/random";
 import { test } from "./lib/fixtures";
 
@@ -87,7 +89,7 @@ test.describe("Event Types tests", () => {
       );
       const href = await firstElement.getAttribute("href");
       if (!href) throw new Error("No href found for event type");
-      const [eventTypeId] = href.split("/").reverse();
+      const [eventTypeId] = new URL(WEBAPP_URL + href).pathname.split("/").reverse();
       const firstTitle = await page.locator(`[data-testid=event-type-title-${eventTypeId}]`).innerText();
       const firstFullSlug = await page.locator(`[data-testid=event-type-slug-${eventTypeId}]`).innerText();
       const firstSlug = firstFullSlug.split("/")[2];

apps/web/playwright/fixtures/users.ts

@@ -3,6 +3,7 @@ import type Prisma from "@prisma/client";
 import { Prisma as PrismaType, UserPlan } from "@prisma/client";
 import { hash } from "bcryptjs";
 
+import dayjs from "@calcom/dayjs";
 import { DEFAULT_SCHEDULE, getAvailabilityFromSchedule } from "@calcom/lib/availability";
 import { prisma } from "@calcom/prisma";
 
@@ -257,7 +258,7 @@ const createUser = async (
     password: await hashPassword(uname),
     emailVerified: new Date(),
     completedOnboarding: opts?.completedOnboarding ?? true,
-    timeZone: opts?.timeZone ?? TimeZoneEnum.UK,
+    timeZone: opts?.timeZone ?? dayjs.tz.guess(),
     locale: opts?.locale ?? "en",
     schedules:
       opts?.completedOnboarding ?? true

apps/web/public/static/locales/en/common.json

@@ -1272,10 +1272,28 @@
   "format": "Format",
   "uppercase_for_letters": "Use uppercase for all letters",
   "replace_whitespaces_underscores": "Replace whitespaces with underscores",
+  "manage_billing": "Manage billing",
+  "manage_billing_description": "Manage all things billing",
+  "billing_freeplan_title": "You're currently on the FREE plan",
+  "billing_freeplan_description": "We work better in teams. Extend your workflows with round-robin and collective events and make advanced routing forms",
+  "billing_freeplan_cta": "Try now",
+  "billing_manage_details_title": "View and manage your billing details",
+  "billing_manage_details_description": "View and edit your billing details, as well as cancel your subscription.",
+  "billing_portal": "Billing portal",
+  "billing_help_title": "Need anything else?",
+  "billing_help_description": "If you need any further help with billing, our support team are here to help.",
+  "billing_help_cta": "Contact support",
   "ignore_special_characters": "Ignore special characters in your Additional Input label. Use only letters and numbers",
   "retry": "Retry",
   "fetching_calendars_error": "There was a problem fetching your calendars. Please <1>try again</1> or reach out to customer support.",
   "calendar_connection_fail": "Calendar connection failed",
   "booking_confirmation_success": "Booking confirmation succeeded",
-  "booking_confirmation_fail": "Booking confirmation failed"
+  "booking_confirmation_fail": "Booking confirmation failed",
+  "we_wont_show_again": "We won't show this again",
+  "couldnt_update_timezone": "We couldn't update the timezone",
+  "updated_timezone_to": "Updated timezone to {{formattedCurrentTz}}",
+  "update_timezone": "Update timezone",
+  "update_timezone_question": "Update Timezone?",
+  "update_timezone_description": "It seems like your local timezone has changed to {{formattedCurrentTz}}.  It's very important to have the correct timezone to prevent bookings at undesired times. Do you want to update it?",
+  "dont_update": "Don't update"
 }

packages/features/ee/teams/components/v2/AddNewTeamMembers.tsx

@@ -6,8 +6,10 @@ import { WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import { Icon } from "@calcom/ui";
-import { Button, Avatar, Badge } from "@calcom/ui/v2";
-import { SkeletonContainer, SkeletonText } from "@calcom/ui/v2";
+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 { SkeletonContainer, SkeletonText } from "@calcom/ui/v2/core/skeleton";
 
 const AddNewTeamMemberSkeleton = () => {
   return (
@@ -58,7 +60,7 @@ const AddNewTeamMembers = (props: { teamId: number }) => {
                   <Avatar
                     gravatarFallbackMd5="teamMember"
                     size="mdLg"
-                    imageSrc={member?.avatar}
+                    imageSrc={WEBAPP_URL + "/" + member.username + "/avatar.png"}
                     alt="owner-avatar"
                   />
                   <div>

packages/lib/server/queries/teams/index.ts

@@ -12,7 +12,6 @@ export async function getTeamWithMembers(id?: number, slug?: string) {
     id: true,
     plan: true,
     bio: true,
-    avatar: true,
   });
 
   const teamSelect = Prisma.validator<Prisma.TeamSelect>()({

packages/ui/TimezoneChangeDialog.tsx

@@ -0,0 +1,73 @@
+import { useState, useEffect } from "react";
+
+import dayjs from "@calcom/dayjs";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { trpc } from "@calcom/trpc/react";
+import { DialogContent, showToast } from "@calcom/ui/v2";
+import { Dialog } from "@calcom/ui/v2/core/Dialog";
+
+export default function TimezoneChangeDialog() {
+  const { t } = useLocale();
+  const { data: user, isLoading } = trpc.useQuery(["viewer.me"]);
+  const utils = trpc.useContext();
+  const userTz = user?.timeZone;
+  const currentTz = dayjs.tz.guess();
+  const formattedCurrentTz = currentTz?.replace("_", " ");
+
+  // update user settings
+  const onSuccessMutation = async () => {
+    showToast(t("updated_timezone_to", { formattedCurrentTz }), "success");
+    await utils.invalidateQueries(["viewer.me"]);
+  };
+
+  const onErrorMutation = () => {
+    showToast(t("couldnt_update_timezone"), "error");
+  };
+
+  // update timezone in db
+  const mutation = trpc.useMutation("viewer.updateProfile", {
+    onSuccess: onSuccessMutation,
+    onError: onErrorMutation,
+  });
+
+  function updateTimezone() {
+    setOpen(false);
+    mutation.mutate({
+      timeZone: currentTz,
+    });
+  }
+
+  // check for difference in user timezone and current browser timezone
+  const [open, setOpen] = useState(false);
+  useEffect(() => {
+    const tzDifferent =
+      !isLoading && dayjs.tz(undefined, currentTz).utcOffset() !== dayjs.tz(undefined, userTz).utcOffset();
+    const showDialog = tzDifferent && !document.cookie.includes("calcom-timezone-dialog=1");
+    setOpen(showDialog);
+  }, [currentTz, isLoading, userTz]);
+
+  // save cookie to not show again
+  function onCancel(maxAge: number, toast: boolean) {
+    setOpen(false);
+    document.cookie = `calcom-timezone-dialog=1;max-age=${maxAge}`;
+    toast && showToast(t("we_wont_show_again"), "success");
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogContent
+        title={t("update_timezone_question")}
+        description={t("update_timezone_description", { formattedCurrentTz })}
+        type="creation"
+        actionText={t("update_timezone")}
+        actionOnClick={() => updateTimezone()}
+        closeText={t("dont_update")}
+        onInteractOutside={() => onCancel(86400, false) /* 1 day expire */}
+        actionOnClose={() => onCancel(7776000, true) /* 3 months expire */}>
+        {/* todo: save this in db and auto-update when timezone changes (be able to disable??? if yes, /settings) 
+        <Checkbox description="Always update timezone" />
+        */}
+      </DialogContent>
+    </Dialog>
+  );
+}

packages/ui/v2/core/Dialog.tsx

@@ -4,6 +4,7 @@ import React, { ReactNode, useState } from "react";
 import { Icon } from "react-feather";
 
 import classNames from "@calcom/lib/classNames";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
 
 import Button from "./Button";
 
@@ -79,73 +80,77 @@ type DialogContentProps = React.ComponentProps<typeof DialogPrimitive["Content"]
 };
 
 export const DialogContent = React.forwardRef<HTMLDivElement, DialogContentProps>(
-  ({ children, Icon, actionProps, ...props }, forwardedRef) => (
-    <DialogPrimitive.Portal>
-      <DialogPrimitive.Overlay className="fadeIn fixed inset-0 z-40 bg-gray-500 bg-opacity-75 transition-opacity" />
-      {/*zIndex one less than Toast */}
-      <DialogPrimitive.Content
-        {...props}
-        className={classNames(
-          "fadeIn fixed left-1/2 top-1/2 z-[9998] min-w-[360px] -translate-x-1/2 -translate-y-1/2 rounded bg-white text-left shadow-xl focus-visible:outline-none sm:w-full sm:align-middle",
-          props.size == "xl"
-            ? "p-8 sm:max-w-[90rem]"
-            : props.size == "lg"
-            ? "p-8 sm:max-w-[70rem]"
-            : props.size == "md"
-            ? "p-8 sm:max-w-[40rem]"
-            : "p-8 sm:max-w-[35rem]",
-          "max-h-[560px] overflow-visible overscroll-auto md:h-auto md:max-h-[inherit]",
-          `${props.className || ""}`
-        )}
-        ref={forwardedRef}>
-        {props.type === "creation" && (
-          <div>
-            {props.title && <DialogHeader title={props.title} />}
-            {props.description && <p className="pb-5 text-sm text-gray-500">{props.description}</p>}
-            <div className="flex flex-col space-y-6">{children}</div>
-          </div>
-        )}
-        {props.type === "confirmation" && (
-          <div className="flex">
-            {Icon && (
-              <div className="mr-4 inline-flex h-10 w-10 items-center justify-center rounded-full bg-gray-300">
-                <Icon className="h-4 w-4 text-black" />
-              </div>
-            )}
+  ({ children, title, Icon, actionProps, ...props }, forwardedRef) => {
+    const { t } = useLocale();
+
+    return (
+      <DialogPrimitive.Portal>
+        <DialogPrimitive.Overlay className="fadeIn fixed inset-0 z-40 bg-gray-500 bg-opacity-75 transition-opacity" />
+        {/*zIndex one less than Toast */}
+        <DialogPrimitive.Content
+          {...props}
+          className={classNames(
+            "fadeIn fixed left-1/2 top-1/2 z-[9998] min-w-[360px] -translate-x-1/2 -translate-y-1/2 rounded bg-white text-left shadow-xl focus-visible:outline-none sm:w-full sm:align-middle",
+            props.size == "xl"
+              ? "p-8 sm:max-w-[90rem]"
+              : props.size == "lg"
+              ? "p-8 sm:max-w-[70rem]"
+              : props.size == "md"
+              ? "p-8 sm:max-w-[40rem]"
+              : "p-8 sm:max-w-[35rem]",
+            "max-h-[560px] overflow-visible overscroll-auto md:h-auto md:max-h-[inherit]",
+            `${props.className || ""}`
+          )}
+          ref={forwardedRef}>
+          {props.type === "creation" && (
             <div>
-              {props.title && <DialogHeader title={props.title} />}
-              {props.description && <p className="mb-6 text-sm text-gray-500">{props.description}</p>}
+              {title && <DialogHeader title={title} />}
+              {props.description && <p className="pb-5 text-sm text-gray-500">{props.description}</p>}
+              <div className="flex flex-col space-y-6">{children}</div>
             </div>
-          </div>
-        )}
-        {!props.useOwnActionButtons && (
-          <DialogFooter>
-            <div className="mt-2 flex space-x-2">
-              <DialogClose asChild>
-                {/* This will require the i18n string passed in */}
-                <Button color="minimal" onClick={props.actionOnClose}>
-                  {props.closeText ?? "Close"}
-                </Button>
-              </DialogClose>
-              {props.actionOnClick ? (
-                <Button
-                  color="primary"
-                  disabled={props.actionDisabled}
-                  onClick={props.actionOnClick}
-                  {...actionProps}>
-                  {props.actionText}
-                </Button>
-              ) : (
-                <Button color="primary" type="submit" disabled={props.actionDisabled} {...actionProps}>
-                  {props.actionText}
-                </Button>
+          )}
+          {props.type === "confirmation" && (
+            <div className="flex">
+              {Icon && (
+                <div className="mr-4 inline-flex h-10 w-10 items-center justify-center rounded-full bg-gray-300">
+                  <Icon className="h-4 w-4 text-black" />
+                </div>
               )}
+              <div>
+                {title && <DialogHeader title={title} />}
+                {props.description && <p className="mb-6 text-sm text-gray-500">{props.description}</p>}
+              </div>
             </div>
-          </DialogFooter>
-        )}
-      </DialogPrimitive.Content>
-    </DialogPrimitive.Portal>
-  )
+          )}
+          {!props.useOwnActionButtons && (
+            <DialogFooter>
+              <div className="mt-2 flex space-x-2">
+                <DialogClose asChild>
+                  {/* This will require the i18n string passed in */}
+                  <Button color="minimal" onClick={props.actionOnClose}>
+                    {props.closeText ?? t("close")}
+                  </Button>
+                </DialogClose>
+                {props.actionOnClick ? (
+                  <Button
+                    color="primary"
+                    disabled={props.actionDisabled}
+                    onClick={props.actionOnClick}
+                    {...actionProps}>
+                    {props.actionText}
+                  </Button>
+                ) : (
+                  <Button color="primary" type="submit" disabled={props.actionDisabled} {...actionProps}>
+                    {props.actionText}
+                  </Button>
+                )}
+              </div>
+            </DialogFooter>
+          )}
+        </DialogPrimitive.Content>
+      </DialogPrimitive.Portal>
+    );
+  }
 );
 
 type DialogHeaderProps = {

packages/ui/v2/core/Shell.tsx

@@ -10,7 +10,6 @@ import dayjs from "@calcom/dayjs";
 import { useIsEmbed } from "@calcom/embed-core/embed-iframe";
 import ImpersonatingBanner from "@calcom/features/ee/impersonation/components/ImpersonatingBanner";
 import HelpMenuItem from "@calcom/features/ee/support/components/HelpMenuItem";
-import UserV2OptInBanner from "@calcom/features/users/components/UserV2OptInBanner";
 import CustomBranding from "@calcom/lib/CustomBranding";
 import classNames from "@calcom/lib/classNames";
 import { JOIN_SLACK, ROADMAP, DESKTOP_APP_LINK, WEBAPP_URL } from "@calcom/lib/constants";
@@ -27,6 +26,7 @@ import Dropdown, {
   DropdownMenuPortal,
 } from "@calcom/ui/Dropdown";
 import { Icon } from "@calcom/ui/Icon";
+import TimezoneChangeDialog from "@calcom/ui/TimezoneChangeDialog";
 import Button from "@calcom/ui/v2/core/Button";
 
 /* TODO: Get this from endpoint */
@@ -136,6 +136,9 @@ const Layout = (props: LayoutProps) => {
         <Toaster position="bottom-right" />
       </div>
 
+      {/* todo: only run this if timezone is different */}
+      <TimezoneChangeDialog />
+
       <div className="flex h-screen overflow-hidden" data-testid="dashboard-shell">
         {props.SidebarContainer || <SideBarContainer />}
         <div className="flex w-0 flex-1 flex-col overflow-hidden">
@@ -783,7 +786,7 @@ export function ShellMain(props: LayoutProps) {
               <div
                 className={classNames(
                   props.backPath ? "relative" : "fixed right-4 bottom-[75px] z-40 ",
-                  "cta mb-4 flex-shrink-0 sm:relative sm:bottom-auto sm:right-auto sm:z-0"
+                  "cta mb-4 flex-shrink-0 sm:relative sm:bottom-auto sm:right-auto"
                 )}>
                 {props.CTA}
               </div>

packages/ui/v2/core/form/fields.tsx

@@ -164,6 +164,26 @@ type InputFieldProps = {
     labelClassName?: string;
   };
 
+type AddonProps = {
+  children: React.ReactNode;
+  isFilled?: boolean;
+  className?: string;
+  error?: boolean;
+};
+
+const Addon = ({ isFilled, children, className, error }: AddonProps) => (
+  <div
+    className={classNames(
+      "addon-wrapper h-9 border border-gray-300 px-3",
+      isFilled && "bg-gray-100",
+      className
+    )}>
+    <div className={classNames("flex h-full flex-col justify-center px-1 text-sm", error && "text-red-900")}>
+      <span className="whitespace-nowrap py-2.5">{children}</span>
+    </div>
+  </div>
+);
+
 const InputField = forwardRef<HTMLInputElement, InputFieldProps>(function InputField(props, ref) {
   const id = useId();
   const { t: _t, isLocaleReady, i18n } = useLocale();
@@ -200,26 +220,12 @@ const InputField = forwardRef<HTMLInputElement, InputFieldProps>(function InputF
         </Skeleton>
       )}
       {addOnLeading || addOnSuffix ? (
-        <div
-          className={classNames(
-            "relative mb-1 flex items-center rounded-md focus-within:outline-none focus-within:ring-2 focus-within:ring-neutral-800 focus-within:ring-offset-1",
-            addOnSuffix && "group flex-row-reverse"
-          )}>
-          <div
-            className={classNames(
-              "addon-wrapper h-9 border border-gray-300",
-              addOnFilled && "bg-gray-100",
-              addOnLeading && "rounded-l-md border-r-0 px-3",
-              addOnSuffix && "rounded-r-md border-l-0 px-3"
-            )}>
-            <div
-              className={classNames(
-                "flex h-full flex-col justify-center px-1 text-sm",
-                props.error && "text-red-900"
-              )}>
-              <span className="whitespace-nowrap py-2.5">{addOnLeading || addOnSuffix}</span>
-            </div>
-          </div>
+        <div className="relative mb-1 flex items-center rounded-md focus-within:outline-none focus-within:ring-2 focus-within:ring-neutral-800 focus-within:ring-offset-1">
+          {addOnLeading && (
+            <Addon isFilled={addOnFilled} className="rounded-l-md border-r-0">
+              {addOnLeading}
+            </Addon>
+          )}
           <Input
             id={id}
             placeholder={placeholder}
@@ -232,6 +238,11 @@ const InputField = forwardRef<HTMLInputElement, InputFieldProps>(function InputF
             {...passThrough}
             ref={ref}
           />
+          {addOnSuffix && (
+            <Addon isFilled={addOnFilled} className="rounded-r-md border-l-0">
+              {addOnSuffix}
+            </Addon>
+          )}
         </div>
       ) : (
         <Input id={id} placeholder={placeholder} className={className} {...passThrough} ref={ref} />

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

@@ -47,9 +47,7 @@ const tabs: VerticalTabItemProps[] = [
     name: "billing",
     href: "/settings/billing",
     icon: Icon.FiCreditCard,
-    children: [
-      { name: "Manage Billing", href: "/api/integrations/stripepayment/portal", isExternalLink: true },
-    ],
+    children: [{ name: "manage_billing", href: "/settings/billing" }],
   },
   {
     name: "developer",
@@ -329,7 +327,7 @@ export default function SettingsLayout({
         <MobileSettingsContainer onSideContainerOpen={() => setSideContainerOpen(!sideContainerOpen)} />
       }>
       <div className="flex flex-1 [&>*]:flex-1">
-        <div className="mx-auto max-w-3xl justify-center">
+        <div className="mx-auto max-w-full justify-center md:max-w-3xl">
           <ShellHeader />
           <ErrorBoundary>{children}</ErrorBoundary>
         </div>