[React App]: Add email subscription page UI

client/web/BUILD.bazel

@@ -1210,6 +1210,7 @@ ts_project(
         "src/own/OwnConfigProps.ts",
         "src/person/PersonLink.tsx",
         "src/platform/context.ts",
+        "src/post-sign-in-subscription/PistSignInSubscription.tsx",
         "src/productSubscription/helpers.ts",
         "src/repo/DirectImportRepoAlert.tsx",
         "src/repo/FilePathBreadcrumbs.tsx",

client/web/src/post-sign-in-subscription/PistSignInSubscription.tsx

@@ -0,0 +1,115 @@
+import type { FC, ChangeEvent, FocusEventHandler } from 'react'
+
+import { SourcegraphLogo } from '@sourcegraph/branded/src/components/SourcegraphLogo'
+import { H1, H2, Label, Form, useForm, useCheckboxes } from '@sourcegraph/wildcard'
+
+import { LoaderButton } from '../components/LoaderButton'
+
+import styles from './PostSignInSubscription.module.scss'
+
+export const PostSignInSubscription: FC = props => {
+    const { formAPI, ref, handleSubmit } = useForm({
+        initialValues: { subscriptions: [] },
+        // eslint-disable-next-line no-console
+        onSubmit: values => console.log(values),
+    })
+
+    const {
+        input: { isChecked, onBlur, onChange },
+    } = useCheckboxes('subscriptions', formAPI)
+
+    return (
+        <div className={styles.root}>
+            <header className={styles.header}>
+                <SourcegraphLogo className={styles.logo} />
+            </header>
+
+            <section className={styles.content}>
+                <H1>Set your communication preferences</H1>
+
+                <Form ref={ref} className={styles.form} onSubmit={handleSubmit}>
+                    <SubscriptionOption
+                        value="product-updates"
+                        title="Product updates"
+                        message="Stay in the know on the latest awesome features"
+                        isChecked={isChecked}
+                        onBlur={onBlur}
+                        onChange={onChange}
+                    />
+
+                    <SubscriptionOption
+                        value="tutorials"
+                        title="Getting started tutorials"
+                        message="Learn the nuts and bolts to become proficient in Sourcegraph tools"
+                        isChecked={isChecked}
+                        onBlur={onBlur}
+                        onChange={onChange}
+                    />
+
+                    <SubscriptionOption
+                        value="security-updates"
+                        title="Security updates"
+                        message="Stay informed and help keep your environment secure"
+                        isChecked={isChecked}
+                        onBlur={onBlur}
+                        onChange={onChange}
+                    />
+
+                    <H2 className={styles.subHeading}>Help improve Sourcegraph</H2>
+
+                    <SubscriptionOption
+                        value="research-program"
+                        title="Join our user research program"
+                        message="Help us improve Sourcegraph for you and everyone!"
+                        isChecked={isChecked}
+                        onBlur={onBlur}
+                        onChange={onChange}
+                    />
+
+                    <footer className={styles.footer}>
+                        <LoaderButton
+                            type="submit"
+                            alwaysShowLabel={true}
+                            data-testid="insight-save-button"
+                            loading={formAPI.submitting}
+                            label={formAPI.submitting ? 'Submitting' : 'Next'}
+                            disabled={formAPI.submitting}
+                            variant="primary"
+                            className={styles.submit}
+                        />
+                    </footer>
+                </Form>
+            </section>
+        </div>
+    )
+}
+
+interface SubscriptionOptionProps {
+    value: string
+    title: string
+    message: string
+    isChecked: (value: string) => boolean
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => void
+    onBlur?: FocusEventHandler<HTMLInputElement>
+}
+
+const SubscriptionOption: FC<SubscriptionOptionProps> = props => {
+    const { value, title, message, isChecked, onChange, onBlur } = props
+
+    return (
+        <Label className={styles.option}>
+            {/* eslint-disable-next-line react/forbid-elements */}
+            <input
+                type="checkbox"
+                value={value}
+                checked={isChecked(value)}
+                className={styles.optionCheckbox}
+                onBlur={onBlur}
+                onChange={onChange}
+            />
+
+            <span className={styles.optionTitle}>{title}</span>
+            <span className={styles.optionMessage}>{message}</span>
+        </Label>
+    )
+}

client/web/src/post-sign-in-subscription/PostSignInSubscription.module.scss

@@ -0,0 +1,92 @@
+.root {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    padding: 1.5rem;
+    overflow: auto;
+}
+
+.header {
+    display: flex;
+    justify-content: center;
+    padding: 1.5rem;
+}
+
+.logo {
+    max-width: 20rem;
+}
+
+.content {
+    margin: 3rem auto;
+    background-color: var(--color-bg-1);
+    border: 1px solid var(--border-color);
+    border-radius: var(--border-radius);
+    box-shadow: var(--dropdown-shadow);
+    padding: 2rem;
+    max-width: 50rem;
+    width: 100%;
+}
+
+.form {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    margin-top: 2rem;
+}
+
+.option {
+    width: 100%;
+    display: grid;
+    row-gap: 0.25rem;
+    column-gap: 0.75rem;
+    padding: 1rem;
+    cursor: pointer;
+    border-radius: 0.25rem;
+    background-color: var(--color-bg-2);
+    border: 1px solid var(--border-color);
+    grid-template-rows: auto;
+    grid-template-columns: min-content auto;
+    grid-template-areas:
+        'checkbox title'
+        'filler message';
+
+    &:hover {
+        background: var(--primary-4);
+        border-color: var(--primary);
+    }
+
+    &:has(:checked) {
+        background: var(--primary-4);
+        border-color: var(--primary);
+        box-shadow: var(--focus-box-shadow);
+    }
+
+    &:has(:focus) {
+        box-shadow: var(--focus-box-shadow);
+    }
+
+    &-checkbox {
+        grid-area: checkbox;
+    }
+
+    &-title {
+        grid-area: title;
+        font-weight: bold;
+    }
+
+    &-message {
+        grid-area: message;
+        color: var(--text-muted);
+    }
+}
+
+.sub-heading {
+    margin-top: 1rem;
+}
+
+.footer {
+    margin-top: 1.5rem;
+    display: flex;
+    justify-content: flex-end;
+}

client/web/src/routes.constants.ts

@@ -5,6 +5,7 @@ export enum PageRoutes {
     SignIn = '/sign-in',
     SignUp = '/sign-up',
     PostSignUp = '/post-sign-up',
+    PostSignUpEmailSubscription = '/post-sign-up-subscription',
     UnlockAccount = '/unlock-account/:token',
     Welcome = '/welcome',
     Settings = '/settings',

client/web/src/routes.tsx

@@ -7,6 +7,7 @@ import { lazyComponent } from '@sourcegraph/shared/src/util/lazyComponent'
 
 import { communitySearchContextsRoutes } from './communitySearchContexts/routes'
 import { type LegacyLayoutRouteContext, LegacyRoute } from './LegacyRouteContext'
+import { PostSignInSubscription } from './post-sign-in-subscription/PistSignInSubscription'
 import { PageRoutes } from './routes.constants'
 import { isSearchJobsEnabled } from './search-jobs/utility'
 
@@ -93,6 +94,11 @@ export const routes: RouteObject[] = [
         path: PageRoutes.GetCody,
         element: <LegacyRoute render={props => <GetCodyPage {...props} context={window.context} />} />,
     },
+    {
+        path: PageRoutes.PostSignUpEmailSubscription,
+        element: <LegacyRoute render={() => <PostSignInSubscription />} />,
+        handle: { isFullPage: true },
+    },
     {
         path: PageRoutes.PostSignUp,
         element: <LegacyRoute render={() => <PostSignUpPage />} />,

cmd/frontend/internal/app/ui/router.go

@@ -155,6 +155,7 @@ func InitRouter(db database.DB) {
 		{path: "/cody/{chatID}", name: "cody-chat", title: "Cody", index: false},
 		{path: "/get-cody", name: "get-cody", title: "Cody", index: false},
 		{path: "/post-sign-up", name: "post-sign-up", title: "Cody", index: false},
+		{path: "/post-sign-up-subscription", name: "post-sign-up-subscription", title: "Subscription", index: false},
 		{path: "/unlock-account/{token}", name: uirouter.RouteUnlockAccount, title: "Unlock Your Account", index: false},
 		{path: "/password-reset", name: uirouter.RoutePasswordReset, title: "Reset password", index: false},
 		{path: "/survey", name: "survey", title: "Survey", index: false},