Migrate to a monorepo structure (#2909)

packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsConnectedAccountsSection.tsx

@@ -0,0 +1,14 @@
+import { H2Title } from '@/ui/display/typography/components/H2Title';
+import { Section } from '@/ui/layout/section/components/Section';
+
+import { SettingsAccountsEmptyStateCard } from './SettingsAccountsEmptyStateCard';
+
+export const SettingsAccountsConnectedAccountsSection = () => (
+  <Section>
+    <H2Title
+      title="Connected accounts"
+      description="Manage your internet accounts."
+    />
+    <SettingsAccountsEmptyStateCard />
+  </Section>
+);

packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsEmptyStateCard.tsx

@@ -0,0 +1,59 @@
+import { useCallback } from 'react';
+import styled from '@emotion/styled';
+
+import { IconGoogle } from '@/ui/display/icon/components/IconGoogle';
+import { Button } from '@/ui/input/button/components/Button';
+import { Card } from '@/ui/layout/card/components/Card';
+import { REACT_APP_SERVER_AUTH_URL } from '~/config';
+import { useGenerateTransientTokenMutation } from '~/generated/graphql';
+
+const StyledCard = styled(Card)`
+  border-radius: ${({ theme }) => theme.border.radius.md};
+  overflow: hidden;
+  padding: 0;
+`;
+
+const StyledHeader = styled.div`
+  align-items: center;
+  background-color: ${({ theme }) => theme.background.primary};
+  border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
+  display: flex;
+  font-size: ${({ theme }) => theme.font.size.sm};
+  font-weight: ${({ theme }) => theme.font.weight.medium};
+  height: ${({ theme }) => theme.spacing(6)};
+  padding: ${({ theme }) => theme.spacing(2, 4)};
+`;
+
+const StyledBody = styled.div`
+  display: flex;
+  justify-content: center;
+  padding: ${({ theme }) => theme.spacing(4)};
+`;
+
+export const SettingsAccountsEmptyStateCard = () => {
+  const [generateTransientToken] = useGenerateTransientTokenMutation();
+
+  const handleGmailLogin = useCallback(async () => {
+    const authServerUrl = REACT_APP_SERVER_AUTH_URL;
+
+    const transientToken = await generateTransientToken();
+
+    const token =
+      transientToken.data?.generateTransientToken.transientToken.token;
+
+    window.location.href = `${authServerUrl}/google-gmail?transientToken=${token}`;
+  }, [generateTransientToken]);
+  return (
+    <StyledCard>
+      <StyledHeader>No connected account</StyledHeader>
+      <StyledBody>
+        <Button
+          Icon={IconGoogle}
+          title="Connect with Google"
+          variant="secondary"
+          onClick={handleGmailLogin}
+        />
+      </StyledBody>
+    </StyledCard>
+  );
+};

packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsSettingsSection.tsx

@@ -0,0 +1,43 @@
+import { useNavigate } from 'react-router-dom';
+import styled from '@emotion/styled';
+
+import { SettingsNavigationCard } from '@/settings/components/SettingsNavigationCard';
+import { IconCalendarEvent, IconMailCog } from '@/ui/display/icon';
+import { H2Title } from '@/ui/display/typography/components/H2Title';
+import { Section } from '@/ui/layout/section/components/Section';
+
+const StyledCardsContainer = styled.div`
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(4)};
+  margin-top: ${({ theme }) => theme.spacing(6)};
+`;
+
+export const SettingsAccountsSettingsSection = () => {
+  const navigate = useNavigate();
+
+  return (
+    <Section>
+      <H2Title
+        title="Settings"
+        description="Configure your emails and calendar settings."
+      />
+      <StyledCardsContainer>
+        <SettingsNavigationCard
+          Icon={IconMailCog}
+          title="Emails"
+          onClick={() => navigate('/settings/accounts/emails')}
+        >
+          Set email visibility, manage your blocklist and more.
+        </SettingsNavigationCard>
+        <SettingsNavigationCard
+          Icon={IconCalendarEvent}
+          title="Calendar"
+          disabled
+          hasSoonPill
+        >
+          Configure and customize your calendar preferences.
+        </SettingsNavigationCard>
+      </StyledCardsContainer>
+    </Section>
+  );
+};