feat: connect/disconnect to/from google

web-marketplace/src/components/organisms/UserAccountSettings/UserAccountSettings.stories.tsx

@@ -17,12 +17,16 @@ const meta: Meta<typeof UserAccountSettings> = {
       },
       {
         name: 'LinkedIn',
-        disconnect: action('disconnect linkedin'),
+        disconnect: async () => {
+          action('disconnect linkedin')();
+        },
       },
     ],
     walletProvider: {
       address: 'regenfoobar3792723djghsdg',
-      disconnect: action('disconnect wallet'),
+      disconnect: async () => {
+        action('disconnect wallet')();
+      },
     },
   },
 };

web-marketplace/src/components/organisms/UserAccountSettings/UserAccountSettings.types.ts

@@ -31,7 +31,7 @@ type ConnectedState = {
    * A callback for disconnecting from the provider if the provider is already
    * connected.
    */
-  disconnect?: () => void;
+  disconnect?: () => Promise<void>;
   /**
    * The email of the connected social provider account. This can be different
    * from the active account email.

web-marketplace/src/lib/queries/react-query/registry-server/getAccounts/getAccountsQuery.types.ts

@@ -6,6 +6,7 @@ export type PrivateAccount = {
   id: string;
   email: string | null;
   google: string | null;
+  google_email: string | null;
 };
 
 type Accounts = {

web-marketplace/src/pages/ProfileEdit/ProfileEdit.Settings.tsx

@@ -13,7 +13,7 @@ import { UserAccountSettings } from 'components/organisms/UserAccountSettings/Us
 import { WalletProviderInfo } from 'components/organisms/UserAccountSettings/UserAccountSettings.types';
 
 import { useConnectWalletToAccount } from './hooks/useConnectWalletToAccount';
-import { socialProviders } from './ProfileEdit.constants';
+import { useSocialProviders } from './hooks/useSocialProviders';
 
 export const ProfileEditSettings = () => {
   const [error, setError] = useState<unknown>(undefined);
@@ -38,10 +38,10 @@ export const ProfileEditSettings = () => {
   } = useLoginData();
 
   // Social providers
+  const socialProviders = useSocialProviders();
   const _socialProviders = socialProviders.map(p => ({
     name: p.name,
-    // TODO: we'll need to replace this with the email from the provider account #2211
-    email: privActiveAccount?.email,
+    email: privActiveAccount?.[`${p.id}_email`],
     connect: privActiveAccount?.[p.id] ? undefined : p.connect,
     disconnect: privActiveAccount?.[p.id] ? p.disconnect : undefined,
   }));

web-marketplace/src/pages/ProfileEdit/ProfileEdit.constants.ts

@@ -1,6 +1,9 @@
+import { postData } from 'utils/fetch/postData';
+
 import { ProfileVariant } from 'web-components/lib/components/organisms/ProfileHeader/ProfileHeader.types';
 
 import { AccountType } from 'generated/graphql';
+import { apiUri } from 'lib/apiUri';
 
 import { SocialProvider } from './ProfileEdit.types';
 
@@ -26,13 +29,3 @@ export const profileVariantMapping: Record<AccountType, ProfileVariant> = {
   ORGANIZATION: 'organization',
   USER: 'individual',
 };
-
-export const socialProviders: SocialProvider[] = [
-  {
-    id: 'google',
-    name: 'Google',
-    // TODO: #2211
-    connect: () => {},
-    disconnect: async () => {},
-  },
-];

web-marketplace/src/pages/ProfileEdit/hooks/useSocialProviders.tsx

@@ -0,0 +1,48 @@
+import { useCallback } from 'react';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { useSetAtom } from 'jotai';
+import { postData } from 'utils/fetch/postData';
+
+import { apiUri } from 'lib/apiUri';
+import { errorBannerTextAtom } from 'lib/atoms/error.atoms';
+import { GET_ACCOUNTS_QUERY_KEY } from 'lib/queries/react-query/registry-server/getAccounts/getAccountsQuery.constants';
+import { getCsrfTokenQuery } from 'lib/queries/react-query/registry-server/getCsrfTokenQuery/getCsrfTokenQuery';
+
+import { SocialProvider } from '../ProfileEdit.types';
+
+export const useSocialProviders = () => {
+  const setErrorBannerTextAtom = useSetAtom(errorBannerTextAtom);
+  const { data: token } = useQuery(getCsrfTokenQuery({}));
+  const reactQueryClient = useQueryClient();
+
+  const disconnect = useCallback(
+    async (path: string) => {
+      if (token)
+        try {
+          await postData({
+            url: `${apiUri}${path}`,
+            token,
+          });
+          await reactQueryClient.invalidateQueries({
+            queryKey: [GET_ACCOUNTS_QUERY_KEY],
+          });
+        } catch (e) {
+          setErrorBannerTextAtom(String(e));
+        }
+    },
+    [reactQueryClient, setErrorBannerTextAtom, token],
+  );
+
+  const socialProviders: SocialProvider[] = [
+    {
+      id: 'google',
+      name: 'Google',
+      connect: () => {
+        window.location.href = `${apiUri}/marketplace/v1/auth/google/connect`;
+      },
+      disconnect: () => disconnect('/marketplace/v1/auth/google/disconnect'),
+    },
+  ];
+
+  return socialProviders;
+};

web-marketplace/src/utils/fetch/postData.ts

@@ -1,6 +1,6 @@
 export type PostParams = {
   url: string;
-  data: any;
+  data?: any;
   token: string;
   method?: 'POST' | 'PUT';
 };