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

packages/twenty-front/src/pages/auth/VerifyEffect.tsx

@@ -1,43 +0,0 @@
-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 <></>;
-};

packages/twenty-front/src/pages/auth/__stories__/PaymentSuccess.stories.tsx

@@ -0,0 +1,48 @@
+import { getOperationName } from '@apollo/client/utilities';
+import { Meta, StoryObj } from '@storybook/react';
+import { within } from '@storybook/testing-library';
+import { graphql, HttpResponse } from 'msw';
+
+import { AppPath } from '@/types/AppPath';
+import { GET_CURRENT_USER } from '@/users/graphql/queries/getCurrentUser';
+import {
+  PageDecorator,
+  PageDecoratorArgs,
+} from '~/testing/decorators/PageDecorator';
+import { graphqlMocks } from '~/testing/graphqlMocks';
+import { mockedOnboardingUsersData } from '~/testing/mock-data/users';
+
+import { PaymentSuccess } from '../PaymentSuccess';
+
+const meta: Meta<PageDecoratorArgs> = {
+  title: 'Pages/Auth/PaymentSuccess',
+  component: PaymentSuccess,
+  decorators: [PageDecorator],
+  args: { routePath: AppPath.PlanRequiredSuccess },
+  parameters: {
+    msw: {
+      handlers: [
+        graphql.query(getOperationName(GET_CURRENT_USER) ?? '', () => {
+          return HttpResponse.json({
+            data: {
+              currentUser: mockedOnboardingUsersData[0],
+            },
+          });
+        }),
+        graphqlMocks.handlers,
+      ],
+    },
+  },
+};
+
+export default meta;
+
+export type Story = StoryObj<typeof PaymentSuccess>;
+
+export const Default: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    await canvas.findByText('Start');
+  },
+};