feat: add Active and Add integration card displays (#4591)

* feat: add Active and Add integration card displays Closes #4541 * docs: add PaymentSuccess page stories * refactor: move page components
2024-03-25 18:53:30 +01:00
parent 6ab43c608f
commit 8baa59b6f4
19 changed files with 242 additions and 117 deletions
--- a/packages/twenty-front/src/modules/auth/components/VerifyEffect.tsx
+++ b/packages/twenty-front/src/modules/auth/components/VerifyEffect.tsx
@ -0,0 +1,43 @@
+import { useEffect } from 'react';
+import { useNavigate, useSearchParams } from 'react-router-dom';
+import { useRecoilValue } from 'recoil';
+
+import { useAuth } from '@/auth/hooks/useAuth';
+import { useIsLogged } from '@/auth/hooks/useIsLogged';
+import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
+import { AppPath } from '@/types/AppPath';
+
+export const VerifyEffect = () => {
+  const [searchParams] = useSearchParams();
+  const loginToken = searchParams.get('loginToken');
+  const currentWorkspace = useRecoilValue(currentWorkspaceState);
+
+  const isLogged = useIsLogged();
+  const navigate = useNavigate();
+
+  const { verify } = useAuth();
+
+  useEffect(() => {
+    const getTokens = async () => {
+      if (!loginToken) {
+        navigate(AppPath.SignInUp);
+      } else {
+        await verify(loginToken);
+
+        if (currentWorkspace?.activationStatus === 'active') {
+          navigate(AppPath.Index);
+        } else {
+          navigate(AppPath.CreateWorkspace);
+        }
+      }
+    };
+
+    if (!isLogged) {
+      getTokens();
+    }
+    // Verify only needs to run once at mount
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return <></>;
+};
--- a/packages/twenty-front/src/modules/settings/integrations/components/SettingsIntegrationComponent.tsx
+++ b/packages/twenty-front/src/modules/settings/integrations/components/SettingsIntegrationComponent.tsx
@ -1,9 +1,13 @@
+import { useNavigate } from 'react-router-dom';
+import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import { Pill } from 'twenty-ui';

-import { IconArrowUpRight, IconBolt } from '@/ui/display/icon';
+import { SettingsIntegration } from '@/settings/integrations/types/SettingsIntegration';
+import { IconArrowUpRight, IconBolt, IconPlus } from '@/ui/display/icon';
+import { Status } from '@/ui/display/status/components/Status';
 import { Button } from '@/ui/input/button/components/Button';
-import { SettingsIntegration } from '~/pages/settings/integrations/types/SettingsIntegration';
+import { isDefined } from '~/utils/isDefined';

 interface SettingsIntegrationComponentProps {
  integration: SettingsIntegration;
@ -19,6 +23,12 @@ const StyledContainer = styled.div`
  flex-direction: row;
  justify-content: space-between;
  padding: ${({ theme }) => theme.spacing(3)};
+
+  ${({ onClick }) =>
+    isDefined(onClick) &&
+    css`
+      cursor: pointer;
+    `}
 `;

 const StyledSection = styled.div`
@ -48,33 +58,52 @@ const StyledLogo = styled.img`
 export const SettingsIntegrationComponent = ({
  integration,
 }: SettingsIntegrationComponentProps) => {
-  const openLinkInTab = (link: string) => {
-    window.open(link);
-  };
+  const navigate = useNavigate();
+
+  const navigateToIntegrationPage = () => navigate(integration.link);
+  const openExternalLink = () => window.open(integration.link);

  return (
-    <StyledContainer>
+    <StyledContainer
+      onClick={
+        integration.type === 'Active' ? navigateToIntegrationPage : undefined
+      }
+    >
      <StyledSection>
        <StyledIntegrationLogo>
          <StyledLogo src={integration.from.image} alt={integration.from.key} />
-          {integration.to ? (
+          {isDefined(integration.to) && (
            <>
              <div>→</div>
              <StyledLogo src={integration.to.image} alt={integration.to.key} />
            </>
-          ) : (
-            <></>
          )}
        </StyledIntegrationLogo>
        {integration.text}
      </StyledSection>
      {integration.type === 'Soon' ? (
        <StyledSoonPill label="Soon" />
+      ) : integration.type === 'Active' ? (
+        <Status color="green" text="Active" />
+      ) : integration.type === 'Add' ? (
+        <Button
+          onClick={navigateToIntegrationPage}
+          Icon={IconPlus}
+          title="Add"
+          size="small"
+        />
+      ) : integration.type === 'Use' ? (
+        <Button
+          onClick={openExternalLink}
+          Icon={IconBolt}
+          title="Use"
+          size="small"
+        />
      ) : (
        <Button
-          onClick={() => openLinkInTab(integration.link)}
-          Icon={integration.type === 'Goto' ? IconArrowUpRight : IconBolt}
-          title={integration.type === 'Goto' ? integration.linkText : 'Use'}
+          onClick={openExternalLink}
+          Icon={IconArrowUpRight}
+          title={integration.linkText}
          size="small"
        />
      )}
--- a/packages/twenty-front/src/modules/settings/integrations/components/SettingsIntegrationGroup.tsx
+++ b/packages/twenty-front/src/modules/settings/integrations/components/SettingsIntegrationGroup.tsx
@ -1,9 +1,9 @@
 import styled from '@emotion/styled';

 import { SettingsIntegrationComponent } from '@/settings/integrations/components/SettingsIntegrationComponent';
+import { SettingsIntegrationCategory } from '@/settings/integrations/types/SettingsIntegrationCategory';
 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;
@ -33,28 +33,30 @@ const StyledIntegrationsSection = styled.div`

 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>
-  );
-};
+}: SettingsIntegrationGroupProps) => (
+  <Section>
+    <StyledIntegrationGroupHeader>
+      <H2Title title={integrationGroup.title} />
+      {integrationGroup.hyperlink && (
+        <StyledGroupLink
+          onClick={() => window.open(integrationGroup.hyperlink ?? '')}
+        >
+          <div>{integrationGroup.hyperlinkText}</div>
+          <div>→</div>
+        </StyledGroupLink>
+      )}
+    </StyledIntegrationGroupHeader>
+    <StyledIntegrationsSection>
+      {integrationGroup.integrations.map((integration) => (
+        <SettingsIntegrationComponent
+          key={[
+            integrationGroup.key,
+            integration.from.key,
+            integration.to?.key,
+          ].join('-')}
+          integration={integration}
+        />
+      ))}
+    </StyledIntegrationsSection>
+  </Section>
+);
--- a/packages/twenty-front/src/modules/settings/integrations/constants/MockRemoteDatabases.ts
+++ b/packages/twenty-front/src/modules/settings/integrations/constants/MockRemoteDatabases.ts
@ -0,0 +1,10 @@
+export const MOCK_REMOTE_DATABASES = [
+  {
+    name: 'airtable',
+    isActive: false,
+  },
+  {
+    name: 'postgresql',
+    isActive: true,
+  },
+];
--- a/packages/twenty-front/src/modules/settings/integrations/constants/SettingsIntegrationRequest.ts
+++ b/packages/twenty-front/src/modules/settings/integrations/constants/SettingsIntegrationRequest.ts
@ -0,0 +1,18 @@
+import { SettingsIntegrationCategory } from '@/settings/integrations/types/SettingsIntegrationCategory';
+
+export const SETTINGS_INTEGRATION_REQUEST_CATEGORY: SettingsIntegrationCategory =
+  {
+    key: 'request',
+    title: 'Request an integration',
+    hyperlink: null,
+    integrations: [
+      {
+        from: { key: 'github', image: '/images/integrations/github-logo.png' },
+        to: null,
+        type: 'Goto',
+        text: 'Request an integration on Github conversations',
+        link: 'https://github.com/twentyhq/twenty/discussions/categories/ideas',
+        linkText: 'Go to GitHub',
+      },
+    ],
+  };
--- a/packages/twenty-front/src/modules/settings/integrations/constants/SettingsIntegrationWindmill.ts
+++ b/packages/twenty-front/src/modules/settings/integrations/constants/SettingsIntegrationWindmill.ts
@ -0,0 +1,21 @@
+import { SettingsIntegrationCategory } from '@/settings/integrations/types/SettingsIntegrationCategory';
+
+export const SETTINGS_INTEGRATION_WINDMILL_CATEGORY: SettingsIntegrationCategory =
+  {
+    key: 'windmill',
+    title: 'With Windmill',
+    hyperlink: null,
+    integrations: [
+      {
+        from: {
+          key: 'windmill',
+          image: '/images/integrations/windmill-logo.png',
+        },
+        to: null,
+        type: 'Goto',
+        text: 'Create a workflow with Windmill',
+        link: 'https://www.windmill.dev',
+        linkText: 'Go to Windmill',
+      },
+    ],
+  };
--- a/packages/twenty-front/src/modules/settings/integrations/constants/SettingsIntegrationZapier.ts
+++ b/packages/twenty-front/src/modules/settings/integrations/constants/SettingsIntegrationZapier.ts
@ -0,0 +1,42 @@
+import { SettingsIntegrationCategory } from '@/settings/integrations/types/SettingsIntegrationCategory';
+
+export const SETTINGS_INTEGRATION_ZAPIER_CATEGORY: SettingsIntegrationCategory =
+  {
+    key: 'zapier',
+    title: 'With Zapier',
+    hyperlinkText: 'See all zaps',
+    hyperlink: 'https://zapier.com/apps/twenty/integrations',
+    integrations: [
+      {
+        from: { key: 'twenty', image: '/images/integrations/twenty-logo.svg' },
+        to: { key: 'slack', image: '/images/integrations/slack-logo.png' },
+        type: 'Use',
+        text: 'Post to Slack when a company is updated',
+        link: 'https://zapier.com/apps/twenty/integrations/slack',
+      },
+      {
+        from: { key: 'cal', image: '/images/integrations/cal-logo.png' },
+        to: { key: 'twenty', image: '/images/integrations/twenty-logo.svg' },
+        type: 'Use',
+        text: 'Create a person when Cal.com event is created',
+        link: 'https://zapier.com/apps/twenty/integrations/calcom',
+      },
+      {
+        from: {
+          key: 'mailchimp',
+          image: '/images/integrations/mailchimp-logo.png',
+        },
+        to: { key: 'twenty', image: '/images/integrations/twenty-logo.svg' },
+        type: 'Use',
+        text: 'Create a person when a MailChimp sub is created',
+        link: 'https://zapier.com/apps/twenty/integrations/mailchimp',
+      },
+      {
+        from: { key: 'tally', image: '/images/integrations/tally-logo.png' },
+        to: { key: 'twenty', image: '/images/integrations/twenty-logo.svg' },
+        type: 'Use',
+        text: 'Create a company when a Tally form is sent',
+        link: 'https://zapier.com/apps/twenty/integrations/tally',
+      },
+    ],
+  };
--- a/packages/twenty-front/src/modules/settings/integrations/hooks/useSettingsIntegrationCategories.ts
+++ b/packages/twenty-front/src/modules/settings/integrations/hooks/useSettingsIntegrationCategories.ts
@ -0,0 +1,35 @@
+import { MOCK_REMOTE_DATABASES } from '@/settings/integrations/constants/MockRemoteDatabases';
+import { SETTINGS_INTEGRATION_REQUEST_CATEGORY } from '@/settings/integrations/constants/SettingsIntegrationRequest';
+import { SETTINGS_INTEGRATION_WINDMILL_CATEGORY } from '@/settings/integrations/constants/SettingsIntegrationWindmill';
+import { SETTINGS_INTEGRATION_ZAPIER_CATEGORY } from '@/settings/integrations/constants/SettingsIntegrationZapier';
+import { SettingsIntegrationCategory } from '@/settings/integrations/types/SettingsIntegrationCategory';
+import { getSettingsIntegrationAll } from '@/settings/integrations/utils/getSettingsIntegrationAll';
+import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
+
+export const useSettingsIntegrationCategories =
+  (): SettingsIntegrationCategory[] => {
+    const isAirtableIntegrationEnabled = useIsFeatureEnabled(
+      'IS_AIRTABLE_INTEGRATION_ENABLED',
+    );
+    const isAirtableIntegrationActive = !!MOCK_REMOTE_DATABASES.find(
+      ({ name }) => name === 'airtable',
+    )?.isActive;
+    const isPostgresqlIntegrationEnabled = useIsFeatureEnabled(
+      'IS_POSTGRESQL_INTEGRATION_ENABLED',
+    );
+    const isPostgresqlIntegrationActive = !!MOCK_REMOTE_DATABASES.find(
+      ({ name }) => name === 'postgresql',
+    )?.isActive;
+
+    return [
+      getSettingsIntegrationAll({
+        isAirtableIntegrationEnabled,
+        isAirtableIntegrationActive,
+        isPostgresqlIntegrationEnabled,
+        isPostgresqlIntegrationActive,
+      }),
+      SETTINGS_INTEGRATION_ZAPIER_CATEGORY,
+      SETTINGS_INTEGRATION_WINDMILL_CATEGORY,
+      SETTINGS_INTEGRATION_REQUEST_CATEGORY,
+    ];
+  };
--- a/packages/twenty-front/src/modules/settings/integrations/types/SettingsIntegration.ts
+++ b/packages/twenty-front/src/modules/settings/integrations/types/SettingsIntegration.ts
@ -0,0 +1,15 @@
+export type SettingsIntegrationType =
+  | 'Active'
+  | 'Add'
+  | 'Goto'
+  | 'Soon'
+  | 'Use';
+
+export type SettingsIntegration = {
+  from: { key: string; image: string };
+  to?: { key: string; image: string } | null;
+  type: SettingsIntegrationType;
+  linkText?: string;
+  link: string;
+  text: string;
+};
--- a/packages/twenty-front/src/modules/settings/integrations/types/SettingsIntegrationCategory.ts
+++ b/packages/twenty-front/src/modules/settings/integrations/types/SettingsIntegrationCategory.ts
@ -0,0 +1,9 @@
+import { SettingsIntegration } from '@/settings/integrations/types/SettingsIntegration';
+
+export type SettingsIntegrationCategory = {
+  key: string;
+  title: string;
+  hyperlinkText?: string;
+  hyperlink?: string | null;
+  integrations: SettingsIntegration[];
+};
--- a/packages/twenty-front/src/modules/settings/integrations/utils/getSettingsIntegrationAll.ts
+++ b/packages/twenty-front/src/modules/settings/integrations/utils/getSettingsIntegrationAll.ts
@ -0,0 +1,44 @@
+import { SettingsIntegrationCategory } from '@/settings/integrations/types/SettingsIntegrationCategory';
+
+export const getSettingsIntegrationAll = ({
+  isAirtableIntegrationEnabled,
+  isAirtableIntegrationActive,
+  isPostgresqlIntegrationEnabled,
+  isPostgresqlIntegrationActive,
+}: {
+  isAirtableIntegrationEnabled: boolean;
+  isAirtableIntegrationActive: boolean;
+  isPostgresqlIntegrationEnabled: boolean;
+  isPostgresqlIntegrationActive: boolean;
+}): SettingsIntegrationCategory => ({
+  key: 'all',
+  title: 'All',
+  integrations: [
+    {
+      from: {
+        key: 'airtable',
+        image: '/images/integrations/airtable-logo.png',
+      },
+      type: !isAirtableIntegrationEnabled
+        ? 'Soon'
+        : isAirtableIntegrationActive
+          ? 'Active'
+          : 'Add',
+      text: 'Airtable',
+      link: '/settings/integrations/airtable',
+    },
+    {
+      from: {
+        key: 'postgresql',
+        image: '/images/integrations/postgresql-logo.png',
+      },
+      type: !isPostgresqlIntegrationEnabled
+        ? 'Soon'
+        : isPostgresqlIntegrationActive
+          ? 'Active'
+          : 'Add',
+      text: 'PostgreSQL',
+      link: '/settings/integrations/postgresql',
+    },
+  ],
+});