feat(plg): Add new Checkout flow that uses Stripe's createToken API

client/web/src/cody/management/api/client.ts

@@ -20,6 +20,12 @@ export module Client {
         return { method: 'PATCH', urlSuffix: '/team/current/subscription', requestBody }
     }
 
+    export function previewUpdateCurrentSubscription(
+        requestBody: types.PreviewUpdateSubscriptionRequest
+    ): Call<types.PreviewResult> {
+        return { method: 'PATCH', urlSuffix: '/team/current/subscription/preview', requestBody }
+    }
+
     export function getCurrentSubscriptionInvoices(): Call<types.GetSubscriptionInvoicesResponse> {
         return { method: 'GET', urlSuffix: '/team/current/subscription/invoices' }
     }
@@ -30,6 +36,16 @@ export module Client {
         return { method: 'POST', urlSuffix: '/team/current/subscription/reactivate', requestBody }
     }
 
+    // Teams
+
+    export function createTeam(requestBody: types.CreateTeamRequest): Call<string> {
+        return { method: 'POST', urlSuffix: '/team', requestBody }
+    }
+
+    export function previewCreateTeam(requestBody: types.PreviewCreateTeamRequest): Call<types.PreviewResult> {
+        return { method: 'POST', urlSuffix: '/team/preview', requestBody }
+    }
+
     // Stripe Checkout
 
     export function createStripeCheckoutSession(

client/web/src/cody/management/api/react-query/callCodyProApi.ts

@@ -47,8 +47,15 @@ export const callCodyProApi = async <Data>(call: Call<Data>): Promise<Data | und
 
         // Throw errors for unsuccessful HTTP calls so that `callCodyProApi` callers don't need to check whether the response is OK.
         // Motivation taken from here: https://tanstack.com/query/latest/docs/framework/react/guides/query-functions#usage-with-fetch-and-other-clients-that-do-not-throw-by-default
-        throw new Error(`Request to Cody Pro API failed with status ${response.status}`)
+        throw new Error(`Request to Cody Pro API failed with status ${response.status}: ${response.statusText}`)
     }
 
-    return (await response.json()) as Data
+    const responseText = await response.text()
+
+    // Handle both JSON and text responses.
+    try {
+        return JSON.parse(responseText) as Data
+    } catch {
+        return responseText as Data
+    }
 }

client/web/src/cody/management/api/react-query/subscriptions.ts

@@ -7,7 +7,13 @@ import {
 } from '@tanstack/react-query'
 
 import { Client } from '../client'
-import type { UpdateSubscriptionRequest, Subscription } from '../teamSubscriptions'
+import type {
+    UpdateSubscriptionRequest,
+    Subscription,
+    CreateTeamRequest,
+    PreviewResult,
+    PreviewCreateTeamRequest,
+} from '../types'
 
 import { callCodyProApi } from './callCodyProApi'
 
@@ -45,3 +51,16 @@ export const useUpdateCurrentSubscription = (): UseMutationResult<
         },
     })
 }
+
+export const useCreateTeam = (): UseMutationResult<string | undefined, Error, CreateTeamRequest> => {
+    const queryClient = useQueryClient()
+    return useMutation({
+        mutationFn: async requestBody => callCodyProApi(Client.createTeam(requestBody)),
+        onSuccess: () => queryClient.invalidateQueries({ queryKey: queryKeys.all }),
+    })
+}
+
+export const usePreviewCreateTeam = (): UseMutationResult<PreviewResult | undefined, Error, PreviewCreateTeamRequest> =>
+    useMutation({
+        mutationFn: async requestBody => callCodyProApi(Client.previewCreateTeam(requestBody)),
+    })

client/web/src/cody/management/api/teamSubscriptions.ts

@@ -112,7 +112,29 @@ export interface UpdateSubscriptionRequest {
     subscriptionUpdate?: SubscriptionUpdateOptions
 }
 
+export interface PreviewUpdateSubscriptionRequest {
+    newSeatCount?: number
+    newBillingInterval?: BillingInterval
+    newCancelAtPeriodEnd?: boolean
+}
+
 export interface GetSubscriptionInvoicesResponse {
     invoices: Invoice[]
     continuationToken?: string
 }
+
+export interface CreateTeamRequest {
+    name: string
+    slug: string
+    seats: number
+    address: Address
+    billingInterval: BillingInterval
+    couponCode?: string
+    creditCardToken: string
+}
+
+export interface PreviewCreateTeamRequest {
+    seats: number
+    billingInterval: BillingInterval
+    couponCode?: string
+}

client/web/src/cody/management/api/types.ts

@@ -1,4 +1,4 @@
-// Export all of the API types, so consumers we can organize the type definitions
+// Export all API types, so consumers we can organize the type definitions
 // into smaller files, without consumers needing to care about that organization.
 export * from './teamInvites'
 export * from './teamMembers'

client/web/src/cody/management/subscription/StripeAddressElement.tsx

@@ -0,0 +1,35 @@
+import React, { useMemo } from 'react'
+
+import { AddressElement } from '@stripe/react-stripe-js'
+import type { StripeAddressElementOptions } from '@stripe/stripe-js'
+
+import { Subscription } from '../api/teamSubscriptions'
+
+interface StripeAddressElementProps {
+    subscription?: Subscription
+    onFocus?: () => void
+}
+
+export const StripeAddressElement: React.FC<StripeAddressElementProps> = ({ subscription, onFocus }) => {
+    const options = useMemo(
+        (): StripeAddressElementOptions => ({
+            mode: 'billing',
+            display: { name: 'full' },
+            ...(subscription
+                ? {
+                      defaultValues: {
+                          name: subscription.name,
+                          address: {
+                              ...subscription.address,
+                              postal_code: subscription.address.postalCode,
+                          },
+                      },
+                  }
+                : {}),
+            autocomplete: { mode: 'automatic' },
+        }),
+        [subscription]
+    )
+
+    return <AddressElement options={options} onFocus={onFocus} />
+}

client/web/src/cody/management/subscription/StripeCardDetails.tsx

@@ -0,0 +1,62 @@
+import React, { useCallback } from 'react'
+
+import { CardNumberElement, CardExpiryElement, CardCvcElement } from '@stripe/react-stripe-js'
+import type { StripeCardElementOptions } from '@stripe/stripe-js'
+
+import { useTheme, Theme } from '@sourcegraph/shared/src/theme'
+import { Label, Text, Grid } from '@sourcegraph/wildcard'
+
+const useCardElementOptions = (): ((type: 'number' | 'expiry' | 'cvc') => StripeCardElementOptions) => {
+    const { theme } = useTheme()
+
+    return useCallback(
+        (type: 'number' | 'expiry' | 'cvc') => ({
+            ...(type === 'number' ? { disableLink: true } : {}),
+
+            classes: {
+                base: 'form-control py-2',
+                focus: 'focus-visible',
+                invalid: 'is-invalid',
+            },
+
+            style: {
+                base: {
+                    color: theme === Theme.Light ? '#262b38' : '#dbe2f0',
+                },
+            },
+        }),
+        [theme]
+    )
+}
+
+interface StripeCardDetailsProps {
+    onFocus?: () => void
+    className?: string
+}
+
+export const StripeCardDetails: React.FC<StripeCardDetailsProps> = ({ onFocus, className }) => {
+    const getOptions = useCardElementOptions()
+
+    return (
+        <div className={className}>
+            <div>
+                <Label className="d-block">
+                    <Text className="mb-2">Card number</Text>
+                    <CardNumberElement options={getOptions('number')} onFocus={onFocus} />
+                </Label>
+            </div>
+
+            <Grid columnCount={2} className="mt-3 mb-0 pb-3">
+                <Label className="d-block">
+                    <Text className="mb-2">Expiry date</Text>
+                    <CardExpiryElement options={getOptions('expiry')} onFocus={onFocus} />
+                </Label>
+
+                <Label className="d-block">
+                    <Text className="mb-2">CVC</Text>
+                    <CardCvcElement options={getOptions('cvc')} onFocus={onFocus} />
+                </Label>
+            </Grid>
+        </div>
+    )
+}