feat: allow passing initial data props to calendar connectors (#15760)

* feat: allow passing init data to AvailabilitySettings, OAuthConnect wrappers

* chore: gitignore idea

* chore: minor fixes

* chore: use yarn.lock from main branch

---------

Co-authored-by: supalarry <laurisskraucis@gmail.com>
Co-authored-by: Lauris Skraucis <lauris.skraucis@gmail.com>
Co-authored-by: Peer Richelsen <peeroke@gmail.com>

packages/platform/atoms/connect/OAuthConnect.tsx

@@ -3,7 +3,7 @@ import type { FC } from "react";
 import type { CALENDARS } from "@calcom/platform-constants";
 import { Button } from "@calcom/ui";
 
-import type { OnCheckErrorType } from "../hooks/connect/useCheck";
+import type { OnCheckErrorType, UseCheckProps } from "../hooks/connect/useCheck";
 import { useCheck } from "../hooks/connect/useCheck";
 import { useConnect } from "../hooks/connect/useConnect";
 import { AtomsWrapper } from "../src/components/atoms-wrapper";
@@ -16,9 +16,14 @@ export type OAuthConnectProps = {
   loadingLabel: string;
   onCheckError?: OnCheckErrorType;
   redir?: string;
+  initialData: UseCheckProps["initialData"];
 };
 
-export const OAuthConnect: FC<OAuthConnectProps & { calendar: (typeof CALENDARS)[number] }> = ({
+export const OAuthConnect: FC<
+  OAuthConnectProps & {
+    calendar: (typeof CALENDARS)[number];
+  }
+> = ({
   label,
   alreadyConnectedLabel,
   loadingLabel,
@@ -26,12 +31,14 @@ export const OAuthConnect: FC<OAuthConnectProps & { calendar: (typeof CALENDARS)
   onCheckError,
   calendar,
   redir,
+  initialData,
 }) => {
   const { connect } = useConnect(calendar, redir);
 
   const { allowConnect, checked } = useCheck({
     onCheckError,
     calendar: calendar,
+    initialData,
   });
 
   const isChecking = !checked;

packages/platform/atoms/connect/apple/AppleConnect.tsx

@@ -1,10 +1,10 @@
 import {
   Dialog,
-  DialogTrigger,
   DialogContent,
-  DialogTitle,
-  DialogHeader,
   DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
 } from "@/components/ui/dialog";
 import type { FC } from "react";
 import { useState } from "react";
@@ -25,6 +25,7 @@ export const AppleConnect: FC<Partial<Omit<OAuthConnectProps, "redir">>> = ({
   alreadyConnectedLabel = "Connected Apple Calendar",
   loadingLabel = "Checking Apple Calendar",
   className,
+  initialData,
 }) => {
   const form = useForm({
     defaultValues: {
@@ -35,6 +36,7 @@ export const AppleConnect: FC<Partial<Omit<OAuthConnectProps, "redir">>> = ({
   const { toast } = useToast();
   const { allowConnect, checked, refetch } = useCheck({
     calendar: "apple",
+    initialData,
   });
 
   const [isDialogOpen, setIsDialogOpen] = useState(false);

packages/platform/atoms/connect/google/GcalConnect.tsx

@@ -12,6 +12,7 @@ export const GcalConnect: FC<Partial<OAuthConnectProps>> = ({
   className,
   onCheckError,
   redir,
+  initialData,
 }) => {
   return (
     <OAuthConnect
@@ -22,6 +23,7 @@ export const GcalConnect: FC<Partial<OAuthConnectProps>> = ({
       className={className}
       onCheckError={onCheckError}
       redir={redir}
+      initialData={initialData}
     />
   );
 };

packages/platform/atoms/connect/outlook/OutlookConnect.tsx

@@ -12,6 +12,7 @@ export const OutlookConnect: FC<Partial<OAuthConnectProps>> = ({
   className,
   onCheckError,
   redir,
+  initialData,
 }) => {
   return (
     <OAuthConnect
@@ -22,6 +23,7 @@ export const OutlookConnect: FC<Partial<OAuthConnectProps>> = ({
       className={className}
       onCheckError={onCheckError}
       redir={redir}
+      initialData={initialData}
     />
   );
 };

packages/platform/atoms/hooks/connect/useCheck.ts

@@ -1,8 +1,8 @@
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 
 import type { CALENDARS } from "@calcom/platform-constants";
-import { SUCCESS_STATUS, ERROR_STATUS } from "@calcom/platform-constants";
-import type { ApiResponse, ApiErrorResponse } from "@calcom/platform-types";
+import { ERROR_STATUS, SUCCESS_STATUS } from "@calcom/platform-constants";
+import type { ApiErrorResponse, ApiResponse } from "@calcom/platform-types";
 
 import http from "../../lib/http";
 import { useAtomsContext } from "../useAtomsContext";
@@ -10,11 +10,19 @@ import { useAtomsContext } from "../useAtomsContext";
 export interface UseCheckProps {
   onCheckError?: OnCheckErrorType;
   calendar: (typeof CALENDARS)[number];
+  initialData?: {
+    status: typeof SUCCESS_STATUS | typeof ERROR_STATUS;
+    data: {
+      allowConnect: boolean;
+      checked: boolean;
+    };
+  };
 }
+
 export type OnCheckErrorType = (err: ApiErrorResponse) => void;
 export const getQueryKey = (calendar: (typeof CALENDARS)[number]) => [`get-${calendar}-check`];
 
-export const useCheck = ({ onCheckError, calendar }: UseCheckProps) => {
+export const useCheck = ({ onCheckError, calendar, initialData }: UseCheckProps) => {
   const { isInit, accessToken } = useAtomsContext();
   const queryClient = useQueryClient();
 
@@ -37,6 +45,7 @@ export const useCheck = ({ onCheckError, calendar }: UseCheckProps) => {
           return { status: ERROR_STATUS, data: { allowConnect: true, checked: true } };
         });
     },
+    initialData,
   });
   return {
     allowConnect: check?.data?.allowConnect ?? false,