Fix onboarding calendar connection (#3036)

apps/web/components/integrations/CalendarListContainer.tsx

@@ -1,6 +1,7 @@
 import { Fragment } from "react";
 import { useMutation } from "react-query";
 
+import { InstallAppButton } from "@calcom/app-store/components";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import showToast from "@calcom/lib/notification";
 import { Alert } from "@calcom/ui/Alert";
@@ -22,6 +23,7 @@ import SubHeadingTitleWithConnections from "./SubHeadingTitleWithConnections";
 
 type Props = {
   onChanged: () => unknown | Promise<unknown>;
+  fromOnboarding?: boolean;
 };
 
 function CalendarSwitch(props: {
@@ -93,10 +95,44 @@ function CalendarSwitch(props: {
   );
 }
 
+function CalendarList(props: Props) {
+  const { t } = useLocale();
+  const query = trpc.useQuery(["viewer.integrations", { variant: "calendar", onlyInstalled: false }]);
+
+  return (
+    <QueryCell
+      query={query}
+      success={({ data }) => (
+        <List>
+          {data.items.map((item) => (
+            <IntegrationListItem
+              key={item.title}
+              title={item.title}
+              imageSrc={item.imageSrc}
+              description={item.description}
+              actions={
+                <InstallAppButton
+                  type={item.type}
+                  render={(buttonProps) => (
+                    <Button color="secondary" {...buttonProps}>
+                      {t("connect")}
+                    </Button>
+                  )}
+                  onChanged={() => props.onChanged()}
+                />
+              }
+            />
+          ))}
+        </List>
+      )}
+    />
+  );
+}
+
 function ConnectedCalendarsList(props: Props) {
   const { t } = useLocale();
   const query = trpc.useQuery(["viewer.connectedCalendars"], { suspense: true });
-
+  const { fromOnboarding } = props;
   return (
     <QueryCell
       query={query}
@@ -125,20 +161,24 @@ function ConnectedCalendarsList(props: Props) {
                         onOpenChange={props.onChanged}
                       />
                     }>
-                    <p className="px-4 pt-4 text-sm text-neutral-500">
+                    {!fromOnboarding && (
-                      Toggle the calendar(s) you want to check for conflicts to prevent double bookings.
+                      <>
-                    </p>
+                        <p className="px-4 pt-4 text-sm text-neutral-500">
-                    <ul className="space-y-2 p-4">
+                          Toggle the calendar(s) you want to check for conflicts to prevent double bookings.
-                      {item.calendars.map((cal) => (
+                        </p>
-                        <CalendarSwitch
+                        <ul className="space-y-2 p-4">
-                          key={cal.externalId}
+                          {item.calendars.map((cal) => (
-                          externalId={cal.externalId}
+                            <CalendarSwitch
-                          title={cal.name || "Nameless calendar"}
+                              key={cal.externalId}
-                          type={item.integration.type}
+                              externalId={cal.externalId}
-                          defaultSelected={cal.isSelected}
+                              title={cal.name || "Nameless calendar"}
-                        />
+                              type={item.integration.type}
-                      ))}
+                              defaultSelected={cal.isSelected}
-                    </ul>
+                            />
+                          ))}
+                        </ul>
+                      </>
+                    )}
                   </IntegrationListItem>
                 ) : (
                   <Alert
@@ -167,9 +207,9 @@ function ConnectedCalendarsList(props: Props) {
   );
 }
 
-export function CalendarListContainer(props: { heading?: false }) {
+export function CalendarListContainer(props: { heading?: boolean; fromOnboarding?: boolean }) {
   const { t } = useLocale();
-  const { heading = true } = props;
+  const { heading = true, fromOnboarding } = props;
   const utils = trpc.useContext();
   const onChanged = () =>
     Promise.allSettled([
@@ -210,6 +250,7 @@ export function CalendarListContainer(props: { heading?: false }) {
                             value={data.destinationCalendar?.externalId}
                           />
                         </div>
+
                         {!!data.connectedCalendars.length && (
                           <div className="sm:min-w-80 inline max-w-full">
                             <AdditionalCalendarSelector isLoading={mutation.isLoading} />
@@ -219,7 +260,18 @@ export function CalendarListContainer(props: { heading?: false }) {
                     }
                   />
                 )}
-                <ConnectedCalendarsList onChanged={onChanged} />
+                <ConnectedCalendarsList onChanged={onChanged} fromOnboarding />
+              </>
+            )}
+            {fromOnboarding && (
+              <>
+                {!!query.data?.connectedCalendars.length && (
+                  <ShellSubHeading
+                    className="mt-4"
+                    title={<SubHeadingTitleWithConnections title={t("connect_additional_calendar")} />}
+                  />
+                )}
+                <CalendarList onChanged={onChanged} />
               </>
             )}
           </>

apps/web/pages/getting-started.tsx

@@ -429,7 +429,7 @@ export default function Onboarding(props: inferSSRProps<typeof getServerSideProp
       description: t("connect_your_calendar_instructions"),
       Component: (
         <ClientSuspense fallback={<Loader />}>
-          <CalendarListContainer heading={false} />
+          <CalendarListContainer heading={false} fromOnboarding={true} />
         </ClientSuspense>
       ),
       hideConfirm: true,