first commit

common/resources/client/admin/settings/pages/mail-settings/connect-gmail-panel.tsx

@@ -0,0 +1,63 @@
+import {useFormContext} from 'react-hook-form';
+import {AdminSettings} from '../../admin-settings';
+import {useSocialLogin} from '../../../../auth/requests/use-social-login';
+import {toast} from '../../../../ui/toast/toast';
+import {message} from '../../../../i18n/message';
+import {Button} from '../../../../ui/buttons/button';
+import {GmailIcon} from './gmail-icon';
+import {Trans} from '../../../../i18n/trans';
+import {Fragment} from 'react';
+
+export function ConnectGmailPanel() {
+  const {watch, setValue} = useFormContext<AdminSettings>();
+  const {connectSocial} = useSocialLogin();
+  const connectedEmail = watch('server.connectedGmailAccount');
+
+  const handleGmailConnect = async () => {
+    const e = await connectSocial('secure/settings/mail/gmail/connect');
+    if (e?.status === 'SUCCESS') {
+      const email = (e.callbackData as any).profile.email;
+      setValue('server.connectedGmailAccount', email);
+      toast(message('Connected gmail account: :email', {values: {email}}));
+    }
+  };
+
+  const connectButton = (
+    <Button
+      variant="outline"
+      color="primary"
+      startIcon={<GmailIcon />}
+      onClick={() => {
+        handleGmailConnect();
+      }}
+    >
+      <Trans message="Connect gmail account" />
+    </Button>
+  );
+
+  const reconnectPanel = (
+    <div className="flex items-center gap-14 rounded border bg-alt px-14 py-6 text-sm">
+      <GmailIcon size="lg" />
+      {connectedEmail}
+      <Button
+        variant="text"
+        color="primary"
+        className="ml-auto"
+        onClick={() => {
+          handleGmailConnect();
+        }}
+      >
+        <Trans message="Reconnect" />
+      </Button>
+    </div>
+  );
+
+  return (
+    <Fragment>
+      <div className="mb-6 text-sm">
+        <Trans message="Gmail account" />
+      </div>
+      {connectedEmail ? reconnectPanel : connectButton}
+    </Fragment>
+  );
+}