updating connect with linked-in banner

Author: selfcontained

components/dashboard/src/onboarding/LinkedInBanner.tsx

@@ -0,0 +1,75 @@
+/**
+ * Copyright (c) 2023 Gitpod GmbH. All rights reserved.
+ * Licensed under the GNU Affero General Public License (AGPL).
+ * See License.AGPL.txt in the project root for license information.
+ */
+
+import { useQuery } from "@tanstack/react-query";
+import classNames from "classnames";
+import { FC, useEffect, useState } from "react";
+import { useLinkedIn } from "react-linkedin-login-oauth2";
+import Alert from "../components/Alert";
+import { Button } from "../components/Button";
+import SignInWithLinkedIn from "../images/sign-in-with-linkedin.svg";
+import { getGitpodService } from "../service/service";
+
+type Props = {};
+export const LinkedInBanner: FC<Props> = () => {
+    const {
+        data: clientID,
+        isLoading,
+        isError,
+    } = useQuery(
+        ["linkedin-clientid"],
+        async () => {
+            return (await getGitpodService().server.getLinkedInClientId()) || "";
+        },
+        { enabled: false },
+    );
+
+    const { linkedInLogin } = useLinkedIn({
+        clientId: clientID || "",
+        redirectUri: `${window.location.origin}/linkedin`,
+        onSuccess: (code) => {
+            console.log("success", code);
+        },
+        onError: (error) => {
+            console.log("error", error);
+        },
+    });
+
+    return (
+        <>
+            <div
+                className={classNames(
+                    "mt-6 p-6",
+                    "border-2 border-dashed rounded-md space-y-4",
+                    "bg-gray-50 dark:bg-gray-800",
+                )}
+            >
+                <div className="flex items-center justify-center space-x-6">
+                    <span className="text-4xl">🎁</span>
+                    {/* TODO: Shouldn't need a fixed width here, but was hard to center otherwise  */}
+                    <p className="w-64 text-base text-gray-500 dark:text-gray-100">
+                        Receive <strong>500 credits</strong> per month by connecting your <strong>LinkedIn</strong>{" "}
+                        account.
+                    </p>
+                </div>
+                <Button
+                    className="w-full flex items-center justify-center space-x-2"
+                    onClick={linkedInLogin}
+                    disabled={isLoading || !clientID}
+                >
+                    <img src={SignInWithLinkedIn} width={20} height={20} alt="Sign in with Linked In" />
+                    <span>Connect with LinkedIn</span>
+                </Button>
+            </div>
+            {/* TODO: Figure out if there's a different way we want to handle an error getting the clientID */}
+            {isError && (
+                <Alert className="mt-4" type="error">
+                    We're sorry, there was a problem with the LinkedIn connection.
+                </Alert>
+            )}
+        </>
+    );
+};

components/dashboard/src/onboarding/StepUserInfo.tsx

@@ -13,13 +13,14 @@ import { useUpdateCurrentUserMutation } from "../data/current-user/update-mutati
 import { useOnBlurError } from "../hooks/use-onblur-error";
 import { OnboardingStep } from "./OnboardingStep";
 import SignInWithLinkedIn from "../images/sign-in-with-linkedin.svg";
+import { Button } from "../components/Button";
+import { LinkedInBanner } from "./LinkedInBanner";
 
 type Props = {
     user: User;
-    linkedInClientId: string;
     onComplete(user: User): void;
 };
-export const StepUserInfo: FC<Props> = ({ user, linkedInClientId, onComplete }) => {
+export const StepUserInfo: FC<Props> = ({ user, onComplete }) => {
     const updateUser = useUpdateCurrentUserMutation();
     // attempt to split provided name for default input values
     const { first, last } = getInitialNameParts(user);
@@ -29,17 +30,6 @@ export const StepUserInfo: FC<Props> = ({ user, linkedInClientId, onComplete })
     // Email purposefully not pre-filled
     const [emailAddress, setEmailAddress] = useState("");
 
-    const { linkedInLogin } = useLinkedIn({
-        clientId: linkedInClientId,
-        redirectUri: `${window.location.origin}/linkedin`,
-        onSuccess: (code) => {
-            console.log("success", code);
-        },
-        onError: (error) => {
-            console.log("error", error);
-        },
-    });
-
     const handleSubmit = useCallback(async () => {
         const additionalData = user.additionalData || {};
         const profile = additionalData.profile || {};
@@ -124,19 +114,7 @@ export const StepUserInfo: FC<Props> = ({ user, linkedInClientId, onComplete })
                 required
             />
 
-            <div>
-                <p className="text-gray-500 text-sm mt-4">
-                    Verify your account by connecting with LinkedIn and receive 500 credits per month. 🎁
-                </p>
-                <button className="primary" onClick={linkedInLogin}>
-                    <img
-                        src={SignInWithLinkedIn}
-                        alt="Sign in with Linked In"
-                        style={{ maxWidth: "180px", cursor: "pointer" }}
-                    />
-                    Connect with LinkedIn
-                </button>
-            </div>
+            <LinkedInBanner />
         </OnboardingStep>
     );
 };

components/dashboard/src/onboarding/UserOnboarding.tsx

@@ -40,14 +40,6 @@ const UserOnboarding: FunctionComponent<Props> = ({ user }) => {
 
     const [step, setStep] = useState(STEPS.ONE);
     const [completingError, setCompletingError] = useState("");
-    const [linkedInClientId, setLinkedInClientId] = useState("");
-
-    useEffect(() => {
-        (async () => {
-            const clientId = await getGitpodService().server.getLinkedInClientId();
-            setLinkedInClientId(clientId);
-        })();
-    }, []);
 
     // We track this state here so we can persist it at the end of the flow instead of when it's selected
     // This is because setting the ide is how we indicate a user has onboarded, and want to defer that until the end
@@ -142,7 +134,6 @@ const UserOnboarding: FunctionComponent<Props> = ({ user }) => {
                     {step === STEPS.ONE && (
                         <StepUserInfo
                             user={user}
-                            linkedInClientId={linkedInClientId}
                             onComplete={(updatedUser) => {
                                 setUser(updatedUser);
                                 setStep(STEPS.TWO);