wrap ff around connect with linkedin (#17195)

* wrap ff around connect with linkedin

* Fallback to setting profile email w/ primary email

Author: selfcontained

components/dashboard/src/components/Button.tsx

@@ -8,7 +8,7 @@ import classNames from "classnames";
 import { FC, RefObject } from "react";
 import SpinnerWhite from "../icons/SpinnerWhite.svg";
 
-type Props = {
+export type ButtonProps = {
     // TODO: determine if we want danger.secondary
     type?: "primary" | "secondary" | "danger" | "danger.secondary";
     // TODO: determine how to handle small/medium (block does w-full atm)
@@ -25,7 +25,7 @@ type Props = {
 // Allow w/ or w/o handling event argument
 type ButtonOnClickHandler = React.DOMAttributes<HTMLButtonElement>["onClick"] | (() => void);
 
-export const Button: FC<Props> = ({
+export const Button: FC<ButtonProps> = ({
     type = "primary",
     className,
     htmlType,

components/dashboard/src/contexts/FeatureFlagContext.tsx

@@ -31,6 +31,7 @@ const defaultFeatureFlags = {
     userGitAuthProviders: false,
     switchToPAYG: false,
     newSignupFlow: false,
+    linkedinConnectionForOnboarding: false,
 };
 
 const FeatureFlagContext = createContext<FeatureFlagsType>(defaultFeatureFlags);
@@ -51,6 +52,7 @@ const FeatureFlagContextProvider: React.FC = ({ children }) => {
     const [userGitAuthProviders, setUserGitAuthProviders] = useState<boolean>(false);
     const [switchToPAYG, setSwitchToPAYG] = useState<boolean>(false);
     const [newSignupFlow, setNewSignupFlow] = useState<boolean>(false);
+    const [linkedinConnectionForOnboarding, setLinkedinConnectionForOnboarding] = useState<boolean>(false);
 
     useEffect(() => {
         if (!user) return;
@@ -71,6 +73,7 @@ const FeatureFlagContextProvider: React.FC = ({ children }) => {
                 userGitAuthProviders: { defaultValue: false, setter: setUserGitAuthProviders },
                 switchToPAYG: { defaultValue: false, setter: setSwitchToPAYG },
                 newSignupFlow: { defaultValue: false, setter: setNewSignupFlow },
+                linkedinConnectionForOnboarding: { defaultValue: false, setter: setLinkedinConnectionForOnboarding },
             };
 
             for (const [flagName, config] of Object.entries(featureFlags)) {
@@ -120,10 +123,12 @@ const FeatureFlagContextProvider: React.FC = ({ children }) => {
             userGitAuthProviders,
             newSignupFlow,
             switchToPAYG,
+            linkedinConnectionForOnboarding,
         };
     }, [
         enablePersonalAccessTokens,
         isUsageBasedBillingEnabled,
+        linkedinConnectionForOnboarding,
         newSignupFlow,
         oidcServiceEnabled,
         orgGitAuthProviders,

components/dashboard/src/onboarding/OnboardingStep.tsx

@@ -6,7 +6,7 @@
 
 import { FC, FormEvent, useCallback } from "react";
 import Alert from "../components/Alert";
-import { Button } from "../components/Button";
+import { Button, ButtonProps } from "../components/Button";
 import { Heading2, Subheading } from "../components/typography/headings";
 
 type Props = {
@@ -17,7 +17,7 @@ type Props = {
     error?: string;
     onSubmit(): void;
     submitButtonText?: string;
-    submitButtonType?: "primary" | "secondary" | "danger" | "danger.secondary";
+    submitButtonType?: ButtonProps["type"];
 };
 export const OnboardingStep: FC<Props> = ({
     title,

components/dashboard/src/onboarding/StepUserInfo.tsx

@@ -11,12 +11,14 @@ import { useUpdateCurrentUserMutation } from "../data/current-user/update-mutati
 import { useOnBlurError } from "../hooks/use-onblur-error";
 import { OnboardingStep } from "./OnboardingStep";
 import { LinkedInBanner } from "./LinkedInBanner";
+import { useFeatureFlags } from "../contexts/FeatureFlagContext";
 
 type Props = {
     user: User;
     onComplete(user: User): void;
 };
 export const StepUserInfo: FC<Props> = ({ user, onComplete }) => {
+    const { linkedinConnectionForOnboarding } = useFeatureFlags();
     const updateUser = useUpdateCurrentUserMutation();
     // attempt to split provided name for default input values
     const { first, last } = getInitialNameParts(user);
@@ -37,7 +39,8 @@ export const StepUserInfo: FC<Props> = ({ user, onComplete }) => {
                 ...additionalData,
                 profile: {
                     ...profile,
-                    emailAddress,
+                    // If still no email provided, default to "primary" email
+                    emailAddress: emailAddress || User.getPrimaryEmail(user),
                     lastUpdatedDetailsNudge: new Date().toISOString(),
                 },
             },
@@ -49,25 +52,32 @@ export const StepUserInfo: FC<Props> = ({ user, onComplete }) => {
         } catch (e) {
             console.error(e);
         }
-    }, [emailAddress, firstName, lastName, onComplete, updateUser, user.additionalData]);
-
-    const onLinkedInSuccess = async (profile: LinkedInProfile) => {
-        if (!firstName && profile.firstName) {
-            setFirstName(profile.firstName);
-        }
-        if (!lastName && profile.lastName) {
-            setLastName(profile.lastName);
-        }
-        if (!emailAddress && profile.emailAddress) {
-            setEmailAddress(profile.emailAddress);
-        }
-        handleSubmit();
-    };
+    }, [emailAddress, firstName, lastName, onComplete, updateUser, user]);
+
+    const onLinkedInSuccess = useCallback(
+        async (profile: LinkedInProfile) => {
+            if (!firstName && profile.firstName) {
+                setFirstName(profile.firstName);
+            }
+            if (!lastName && profile.lastName) {
+                setLastName(profile.lastName);
+            }
+            if (!emailAddress && profile.emailAddress) {
+                setEmailAddress(profile.emailAddress);
+            }
+            handleSubmit();
+        },
+        [emailAddress, firstName, handleSubmit, lastName],
+    );
 
     const firstNameError = useOnBlurError("Please enter a value", !!firstName);
     const lastNameError = useOnBlurError("Please enter a value", !!lastName);
+    const emailError = useOnBlurError("Please enter your email address", !!emailAddress);
 
-    const isValid = [firstNameError, lastNameError].every((e) => e.isValid);
+    const isValid =
+        [firstNameError, lastNameError].every((e) => e.isValid) &&
+        // If we're using LinkedIn, we don't need to validate the email input, otherwise we do
+        (linkedinConnectionForOnboarding || (!linkedinConnectionForOnboarding && emailError.isValid));
 
     return (
         <OnboardingStep
@@ -77,8 +87,8 @@ export const StepUserInfo: FC<Props> = ({ user, onComplete }) => {
             isValid={isValid}
             isSaving={updateUser.isLoading}
             onSubmit={handleSubmit}
-            submitButtonText="Continue with 100 credits per month"
-            submitButtonType="secondary"
+            submitButtonText={linkedinConnectionForOnboarding ? "Continue with 100 credits per month" : undefined}
+            submitButtonType={linkedinConnectionForOnboarding ? "secondary" : undefined}
         >
             {user.avatarUrl && (
                 <div className="my-4 flex justify-center">
@@ -108,7 +118,19 @@ export const StepUserInfo: FC<Props> = ({ user, onComplete }) => {
                 />
             </div>
 
-            <LinkedInBanner onSuccess={onLinkedInSuccess} />
+            {linkedinConnectionForOnboarding ? (
+                <LinkedInBanner onSuccess={onLinkedInSuccess} />
+            ) : (
+                <TextInputField
+                    value={emailAddress}
+                    label="Work Email"
+                    type="email"
+                    error={emailError.message}
+                    onBlur={emailError.onBlur}
+                    onChange={setEmailAddress}
+                    required
+                />
+            )}
         </OnboardingStep>
     );
 };

components/dashboard/src/onboarding/UserOnboarding.tsx

@@ -5,7 +5,7 @@
  */
 
 import { User } from "@gitpod/gitpod-protocol";
-import { FunctionComponent, useCallback, useContext, useEffect, useState } from "react";
+import { FunctionComponent, useCallback, useContext, useState } from "react";
 import gitpodIcon from "../icons/gitpod.svg";
 import { Separator } from "../components/Separator";
 import { useHistory, useLocation } from "react-router";