poc - cal.com integration in onboarding flow (#12530)

packages/twenty-front/src/modules/auth/components/AuthModal.tsx

@@ -1,9 +1,11 @@
 import { AuthModalMountEffect } from '@/auth/components/AuthModalMountEffect';
 import { AUTH_MODAL_ID } from '@/auth/constants/AuthModalId';
+import { getAuthModalConfig } from '@/auth/utils/getAuthModalConfig';
 import { Modal } from '@/ui/layout/modal/components/Modal';
 import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
 import styled from '@emotion/styled';
 import React from 'react';
+import { useLocation } from 'react-router-dom';
 
 const StyledContent = styled.div`
   align-items: center;
@@ -14,13 +16,27 @@ type AuthModalProps = {
   children: React.ReactNode;
 };
 
-export const AuthModal = ({ children }: AuthModalProps) => (
-  <>
-    <AuthModalMountEffect />
-    <Modal modalId={AUTH_MODAL_ID} padding={'none'} modalVariant="primary">
-      <ScrollWrapper componentInstanceId="scroll-wrapper-modal-content">
-        <StyledContent>{children}</StyledContent>
-      </ScrollWrapper>
-    </Modal>
-  </>
-);
+export const AuthModal = ({ children }: AuthModalProps) => {
+  const location = useLocation();
+  const config = getAuthModalConfig(location);
+
+  return (
+    <>
+      <AuthModalMountEffect />
+      <Modal
+        modalId={AUTH_MODAL_ID}
+        padding={'none'}
+        size={config.size}
+        modalVariant={config.variant}
+      >
+        {config.showScrollWrapper ? (
+          <ScrollWrapper componentInstanceId="scroll-wrapper-modal-content">
+            <StyledContent>{children}</StyledContent>
+          </ScrollWrapper>
+        ) : (
+          <>{children}</>
+        )}
+      </Modal>
+    </>
+  );
+};

packages/twenty-front/src/modules/auth/constants/AuthModalConfig.ts

@@ -0,0 +1,24 @@
+import { AppPath } from '@/types/AppPath';
+import { ModalSize, ModalVariants } from '@/ui/layout/modal/components/Modal';
+
+type AuthModalConfigType = {
+  size: ModalSize;
+  variant: ModalVariants;
+  showScrollWrapper: boolean;
+};
+
+export const AUTH_MODAL_CONFIG: {
+  default: AuthModalConfigType;
+  [key: string]: AuthModalConfigType;
+} = {
+  default: {
+    size: 'medium',
+    variant: 'primary',
+    showScrollWrapper: true,
+  },
+  [AppPath.BookCall]: {
+    size: 'extraLarge',
+    variant: 'transparent',
+    showScrollWrapper: false,
+  },
+};

packages/twenty-front/src/modules/auth/utils/getAuthModalConfig.ts

@@ -0,0 +1,18 @@
+import { AUTH_MODAL_CONFIG } from '@/auth/constants/AuthModalConfig';
+import { AppPath } from '@/types/AppPath';
+import { Location } from 'react-router-dom';
+import { isDefined } from 'twenty-shared/utils';
+import { isMatchingLocation } from '~/utils/isMatchingLocation';
+
+export const getAuthModalConfig = (location: Location) => {
+  for (const path of Object.values(AppPath)) {
+    if (
+      isMatchingLocation(location, path) &&
+      isDefined(AUTH_MODAL_CONFIG[path])
+    ) {
+      return AUTH_MODAL_CONFIG[path];
+    }
+  }
+
+  return AUTH_MODAL_CONFIG.default;
+};