diff --git a/client/web/BUILD.bazel b/client/web/BUILD.bazel index 8e7cf4cac74b..e05bdc75c4fb 100644 --- a/client/web/BUILD.bazel +++ b/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", diff --git a/client/web/src/post-sign-in-subscription/PistSignInSubscription.tsx b/client/web/src/post-sign-in-subscription/PistSignInSubscription.tsx new file mode 100644 index 000000000000..ee10cd3b6d84 --- /dev/null +++ b/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 ( +
+
+ +
+ +
+

Set your communication preferences

+ +
+ + + + + + +

Help improve Sourcegraph

+ + + + + +
+
+ ) +} + +interface SubscriptionOptionProps { + value: string + title: string + message: string + isChecked: (value: string) => boolean + onChange?: (event: ChangeEvent) => void + onBlur?: FocusEventHandler +} + +const SubscriptionOption: FC = props => { + const { value, title, message, isChecked, onChange, onBlur } = props + + return ( + + ) +} diff --git a/client/web/src/post-sign-in-subscription/PostSignInSubscription.module.scss b/client/web/src/post-sign-in-subscription/PostSignInSubscription.module.scss new file mode 100644 index 000000000000..25df4ee5a5c1 --- /dev/null +++ b/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; +} diff --git a/client/web/src/routes.constants.ts b/client/web/src/routes.constants.ts index d098da70a5c4..54266abdcff2 100644 --- a/client/web/src/routes.constants.ts +++ b/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', diff --git a/client/web/src/routes.tsx b/client/web/src/routes.tsx index 17a04cf67a81..8a17cb883243 100644 --- a/client/web/src/routes.tsx +++ b/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: } />, }, + { + path: PageRoutes.PostSignUpEmailSubscription, + element: } />, + handle: { isFullPage: true }, + }, { path: PageRoutes.PostSignUp, element: } />, diff --git a/cmd/frontend/internal/app/ui/router.go b/cmd/frontend/internal/app/ui/router.go index 0a2149ecd459..9ba8de4305f3 100644 --- a/cmd/frontend/internal/app/ui/router.go +++ b/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},