feat: create Integrations/IntegrationDetail page (#4574)

* feat: create Integrations/IntegrationDetail page

Closes #4546

* docs: add Settings/Integrations/Integration Detail page stories

* docs: add Settings/Billing page stories

* refactor: move some Settings components to @/settings

* refactor: move some Settings integrations components to @/settings/integrations

packages/twenty-front/src/modules/settings/integrations/components/SettingsIntegrationComponent.tsx

@@ -0,0 +1,83 @@
+import styled from '@emotion/styled';
+import { Pill } from 'twenty-ui';
+
+import { IconArrowUpRight, IconBolt } from '@/ui/display/icon';
+import { Button } from '@/ui/input/button/components/Button';
+import { SettingsIntegration } from '~/pages/settings/integrations/types/SettingsIntegration';
+
+interface SettingsIntegrationComponentProps {
+  integration: SettingsIntegration;
+}
+
+const StyledContainer = styled.div`
+  align-items: center;
+  background: ${({ theme }) => theme.background.secondary};
+  border: 1px solid ${({ theme }) => theme.border.color.medium};
+  border-radius: ${({ theme }) => theme.border.radius.md};
+  font-size: ${({ theme }) => theme.font.size.md};
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  padding: ${({ theme }) => theme.spacing(3)};
+`;
+
+const StyledSection = styled.div`
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  gap: ${({ theme }) => theme.spacing(3)};
+`;
+
+const StyledIntegrationLogo = styled.div`
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  gap: ${({ theme }) => theme.spacing(2)};
+  color: ${({ theme }) => theme.border.color.strong};
+`;
+
+const StyledSoonPill = styled(Pill)`
+  padding: ${({ theme }) => theme.spacing(1)} ${({ theme }) => theme.spacing(2)};
+`;
+
+const StyledLogo = styled.img`
+  height: 24px;
+  width: 24px;
+`;
+
+export const SettingsIntegrationComponent = ({
+  integration,
+}: SettingsIntegrationComponentProps) => {
+  const openLinkInTab = (link: string) => {
+    window.open(link);
+  };
+
+  return (
+    <StyledContainer>
+      <StyledSection>
+        <StyledIntegrationLogo>
+          <StyledLogo src={integration.from.image} alt={integration.from.key} />
+          {integration.to ? (
+            <>
+              <div>→</div>
+              <StyledLogo src={integration.to.image} alt={integration.to.key} />
+            </>
+          ) : (
+            <></>
+          )}
+        </StyledIntegrationLogo>
+        {integration.text}
+      </StyledSection>
+      {integration.type === 'Soon' ? (
+        <StyledSoonPill label="Soon" />
+      ) : (
+        <Button
+          onClick={() => openLinkInTab(integration.link)}
+          Icon={integration.type === 'Goto' ? IconArrowUpRight : IconBolt}
+          title={integration.type === 'Goto' ? integration.linkText : 'Use'}
+          size="small"
+        />
+      )}
+    </StyledContainer>
+  );
+};

packages/twenty-front/src/modules/settings/integrations/components/SettingsIntegrationGroup.tsx

@@ -0,0 +1,60 @@
+import styled from '@emotion/styled';
+
+import { SettingsIntegrationComponent } from '@/settings/integrations/components/SettingsIntegrationComponent';
+import { H2Title } from '@/ui/display/typography/components/H2Title';
+import { Section } from '@/ui/layout/section/components/Section';
+import { SettingsIntegrationCategory } from '~/pages/settings/integrations/types/SettingsIntegrationCategory';
+
+interface SettingsIntegrationGroupProps {
+  integrationGroup: SettingsIntegrationCategory;
+}
+
+const StyledIntegrationGroupHeader = styled.div`
+  align-items: start;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+`;
+
+const StyledGroupLink = styled.div`
+  align-items: start;
+  display: flex;
+  flex-direction: row;
+  font-size: ${({ theme }) => theme.font.size.md};
+  gap: ${({ theme }) => theme.spacing(1)};
+  cursor: pointer;
+`;
+
+const StyledIntegrationsSection = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing(4)};
+`;
+
+export const SettingsIntegrationGroup = ({
+  integrationGroup,
+}: SettingsIntegrationGroupProps) => {
+  const openLinkInTab = (link: string) => {
+    window.open(link);
+  };
+  return (
+    <Section>
+      <StyledIntegrationGroupHeader>
+        <H2Title title={integrationGroup.title} />
+        {integrationGroup.hyperlink && (
+          <StyledGroupLink
+            onClick={() => openLinkInTab(integrationGroup.hyperlink ?? '')}
+          >
+            <div>{integrationGroup.hyperlinkText}</div>
+            <div>→</div>
+          </StyledGroupLink>
+        )}
+      </StyledIntegrationGroupHeader>
+      <StyledIntegrationsSection>
+        {integrationGroup.integrations.map((integration) => {
+          return <SettingsIntegrationComponent integration={integration} />;
+        })}
+      </StyledIntegrationsSection>
+    </Section>
+  );
+};