import React, { useEffect, useCallback } from 'react' import { mdiMinusThick, mdiPlusThick, mdiChevronUp, mdiChevronDown } from '@mdi/js' import { AddressElement, useStripe, useElements, CardNumberElement } from '@stripe/react-stripe-js' import type { Stripe, StripeCardNumberElement } from '@stripe/stripe-js' import type { StripeAddressElementChangeEvent } from '@stripe/stripe-js/dist/stripe-js/elements/address' import classNames from 'classnames' import { useNavigate, useSearchParams } from 'react-router-dom' import { pluralize } from '@sourcegraph/common' import { Form, Link, Button, Grid, H2, Text, Container, Icon, H3, LoadingSpinner, Collapse, H4, CollapseHeader, CollapsePanel, } from '@sourcegraph/wildcard' import { CodyProRoutes } from '../../../codyProRoutes' import { CodyAlert } from '../../../components/CodyAlert' import { useCreateTeam, usePreviewUpdateCurrentSubscription, useUpdateCurrentSubscription, } from '../../api/react-query/subscriptions' import type { Subscription } from '../../api/types' import { BillingAddressPreview } from '../BillingAddressPreview' import { PaymentMethodPreview } from '../PaymentMethodPreview' import { StripeAddressElement } from '../StripeAddressElement' import { StripeCardDetails } from '../StripeCardDetails' import styles from './NewCodyProSubscriptionPage.module.scss' // Hard limits const MIN_SEAT_COUNT = 1 const MAX_SEAT_COUNT = 50 // Monthly seat price in USD const SEAT_PRICE = 9 interface CodyProCheckoutFormProps { subscription?: Subscription customerEmail: string | undefined } async function createStripeToken( stripe: Stripe, cardNumberElement: StripeCardNumberElement, suppliedAddress: StripeAddressElementChangeEvent['value']['address'] ): Promise { let response try { // Note that Stripe may have returned an error response. response = await stripe.createToken(cardNumberElement, { // We send the address data along with the card info to let Stripe do more validation such as // confirming the zip code matches the card's. Later, we'll also store this as the Customer's address. address_line1: suppliedAddress.line1, address_line2: suppliedAddress.line2 || '', address_city: suppliedAddress.city, address_state: suppliedAddress.state, address_zip: suppliedAddress.postal_code, address_country: suppliedAddress.country, currency: 'usd', }) } catch (error) { throw new Error(`We couldn't create the team. This is what happened: ${error}`) } if (response.error) { throw new Error(response.error.message ?? 'We got an unknown error from Stripe.') } const tokenId = response.token?.id if (!tokenId) { throw new Error('Stripe token not found.') } return tokenId } interface TeamSizeChange { seatCountDiff: number priceDueNow: number monthlyPriceDiff: number newMonthlyPrice: number dueDate?: string } export const CodyProCheckoutForm: React.FunctionComponent = ({ subscription, customerEmail, }) => { const stripe = useStripe() const elements = useElements() const navigate = useNavigate() const [urlSearchParams] = useSearchParams() const addSeats = !!urlSearchParams.get('addSeats') const initialSeatCount = addSeats && subscription ? subscription.maxSeats : 0 const maxNewSeatCount = MAX_SEAT_COUNT - initialSeatCount const initialNewSeats = Math.max( Math.min(maxNewSeatCount, parseInt(urlSearchParams.get('seats') || '', 10) || 1), MIN_SEAT_COUNT ) const isTeam = addSeats || initialNewSeats > 1 const [errorMessage, setErrorMessage] = React.useState(null) // In the case of new subscriptions we have 0 initial seats, so "addedSeatCount" is actually just "seatCount". const [submitting, setSubmitting] = React.useState(false) const [isCardAndAddressSectionExpanded, setIsCardAndAddressSectionExpanded] = React.useState(false) const createTeamMutation = useCreateTeam() const previewUpdateCurrentSubscriptionMutation = usePreviewUpdateCurrentSubscription() const updateCurrentSubscriptionMutation = useUpdateCurrentSubscription() const [planChange, setPlanChange] = React.useState({ seatCountDiff: initialNewSeats, monthlyPriceDiff: initialNewSeats * SEAT_PRICE, newMonthlyPrice: (initialSeatCount + initialNewSeats) * SEAT_PRICE, priceDueNow: initialNewSeats * SEAT_PRICE, dueDate: undefined, }) const onSeatCountDiffChange = useCallback( (newSeatCountDiff: number): void => { // In the case of a new subscription, we can recalculate prices locally. Otherwise, use the back end. if (!addSeats) { setPlanChange({ seatCountDiff: newSeatCountDiff, monthlyPriceDiff: newSeatCountDiff * SEAT_PRICE, newMonthlyPrice: (initialSeatCount + newSeatCountDiff) * SEAT_PRICE, priceDueNow: newSeatCountDiff * SEAT_PRICE, dueDate: undefined, }) } else { // The `.call` call is a workaround because `previewUpdateCurrentSubscriptionMutation` is not referentially stable, // and adding `previewUpdateCurrentSubscriptionMutation` to the list of dependencies causes an infinite loop. // `previewUpdateCurrentSubscriptionMutation.mutate` IS referentially stable, and it doesn't internally reference `this`, // so calling `.call` is safe. See https://github.com/TanStack/query/issues/1858#issuecomment-1255678830 previewUpdateCurrentSubscriptionMutation.mutate.call( undefined, { newSeatCount: initialSeatCount + newSeatCountDiff }, { onSuccess: result => { if (result) { setPlanChange({ seatCountDiff: newSeatCountDiff, monthlyPriceDiff: result.newPrice / 100 - initialSeatCount * SEAT_PRICE, newMonthlyPrice: result.newPrice / 100, priceDueNow: result.dueNow / 100, dueDate: result.dueDate, }) } }, } ) } }, [addSeats, initialSeatCount, previewUpdateCurrentSubscriptionMutation.mutate] ) // Load the initial prices if needed. useEffect(() => { if (addSeats) { onSeatCountDiffChange(initialNewSeats) } }, [addSeats, initialNewSeats, onSeatCountDiffChange]) const handleSubscribeSubmit = useCallback( async (event: React.FormEvent): Promise => { event.preventDefault() if (!stripe || !elements) { setErrorMessage('Stripe or Stripe Elements libraries not available.') return } const cardNumberElement = elements.getElement(CardNumberElement) if (!cardNumberElement) { setErrorMessage('CardNumberElement not found.') return } const addressElement = elements.getElement(AddressElement) if (!addressElement) { setErrorMessage('AddressElement not found.') return } const addressElementValue = await addressElement.getValue() if (!addressElementValue.complete) { setErrorMessage('Please fill out your billing address.') return } const suppliedAddress = addressElementValue.value.address setSubmitting(true) let token try { token = await createStripeToken(stripe, cardNumberElement, suppliedAddress) } catch (error) { setErrorMessage(error) setSubmitting(false) return } // This is where we send the token to the backend to create a subscription. try { // Even though .mutate is recommended (https://tkdodo.eu/blog/mastering-mutations-in-react-query#mutate-or-mutateasync), // this use makes it very convenient to just have a linear flow with error handling and a redirect at the end. // And `.call` is a workaround to https://github.com/TanStack/query/issues/1858#issuecomment-1255678830 await createTeamMutation.mutateAsync.call(undefined, { name: '(no name yet)', slug: '(no slug yet)', seats: planChange.seatCountDiff, address: { line1: suppliedAddress.line1, line2: suppliedAddress.line2 || '', city: suppliedAddress.city, state: suppliedAddress.state, postalCode: suppliedAddress.postal_code, country: suppliedAddress.country, }, billingInterval: 'monthly', couponCode: '', creditCardToken: token, }) navigate(`${CodyProRoutes.Manage}?welcome=1`) setSubmitting(false) } catch (error) { setErrorMessage(`We couldn't create the Stripe token. This is what happened: ${error}`) setSubmitting(false) } }, [stripe, elements, createTeamMutation.mutateAsync, planChange, navigate] ) const handlePlanChangeSubmit = useCallback( async (event: React.FormEvent): Promise => { event.preventDefault() if (!stripe || !elements) { setErrorMessage('Stripe or Stripe Elements libraries not available.') return } setSubmitting(true) try { await updateCurrentSubscriptionMutation.mutateAsync.call(undefined, { subscriptionUpdate: { newSeatCount: initialSeatCount + planChange.seatCountDiff, }, }) } catch (error) { setErrorMessage(`We couldn't update your subscription. This is what happened: ${error}`) setSubmitting(false) return } navigate(CodyProRoutes.ManageTeam) setSubmitting(false) }, [ elements, initialSeatCount, navigate, planChange.seatCountDiff, stripe, updateCurrentSubscriptionMutation.mutateAsync, ] ) return ( <> {initialSeatCount + planChange.seatCountDiff >= 30 && (

Explore an enterprise plan

Team plans are limited to 50 users.{' '} Contact sales to learn more. )}

Purchase {planChange.seatCountDiff} {pluralize('seat', planChange.seatCountDiff)}

{addSeats ? (

{!!subscription && (

Show credit card and billing info

)} {errorMessage && (

{errorMessage}

)}

By clicking the button, you agree to the{' '} Terms of Service and acknowledge that the{' '} Privacy Statement applies. Your subscription will renew automatically by charging your payment method on file until you{' '} cancel . You may cancel at any time prior to the next billing cycle.

) : (

setErrorMessage('')} /> Email {customerEmail || ''} setErrorMessage('')} /> {errorMessage && (

{errorMessage}

)}

) } const SeatCountSelector: React.FunctionComponent<{ header: string current: number min: number max: number setCount: (count: number) => void }> = ({ header, current, min, max, setCount }) => ( <>

{header}

${SEAT_PRICE} per seat / month

{current}

) const Summary: React.FunctionComponent<{ addSeats: boolean isLoading: boolean initialSeatCount: number change: TeamSizeChange }> = ({ addSeats, isLoading, initialSeatCount, change }) => ( <>

Summary

{addSeats && ( Pro-rated cost for this month )} {addSeats ? 'Adding ' : ''} {change.seatCountDiff} {pluralize('seat', change.seatCountDiff)} {addSeats && ( New total for {initialSeatCount + change.seatCountDiff}{' '} {pluralize('seat', initialSeatCount + change.seatCountDiff)} )} {addSeats && ( New seats are pro-rated this month, and will be charged at the full rate{' '} {change.dueDate ? `on ${new Date(change.dueDate).toLocaleDateString()}` : 'next month'}. )} ) interface PriceOrSpinnerProps { price: number isLoading: boolean children: React.ReactNode } const PriceOrSpinner: React.FunctionComponent = ({ price, isLoading, children }) => (

{children}

{isLoading ? ( ) : ( ${price} / month )}

)