Этот коммит содержится в:
Conor Macpherson
2023-04-10 16:17:36 -04:00
родитель d8544a1db7
Коммит 214bd6dd07

Просмотреть файл

@@ -347,165 +347,166 @@ export default function SelfHostedExpansionModal() {
}} }}
> >
<div className='SelfHostedExpansionModal'> <div className='SelfHostedExpansionModal'>
{<div className={classNames('form-view', {'form-view--hide': !showForm})}> <div className='lhs'> <div className={classNames('form-view', {'form-view--hide': !showForm})}>
<h2 className='title'>{title}</h2> <div className='lhs'>
<UpgradeSvg <h2 className='title'>{title}</h2>
width={267} <UpgradeSvg
height={227} width={267}
/> height={227}
<div className='footer-text'>{'Questions?'}</div> />
<ContactSalesLink/> <div className='footer-text'>{'Questions?'}</div>
</div> <ContactSalesLink/>
<div className='center'> </div>
<div className='center'>
<div <div
className='form' className='form'
data-testid='shpm-form' data-testid='shpm-form'
> >
<span className='section-title'> <span className='section-title'>
{intl.formatMessage({ {intl.formatMessage({
id: 'payment_form.credit_card', id: 'payment_form.credit_card',
defaultMessage: 'Credit Card', defaultMessage: 'Credit Card',
})} })}
</span> </span>
<div className='form-row'> <div className='form-row'>
<CardInput <CardInput
forwardedRef={cardRef} forwardedRef={cardRef}
required={true} required={true}
onCardInputChange={(event: StripeCardElementChangeEvent) => { onCardInputChange={(event: StripeCardElementChangeEvent) => {
setFormState({...formState, cardFilled: event.complete}); setFormState({...formState, cardFilled: event.complete});
}} }}
theme={theme} theme={theme}
/> />
</div> </div>
<div className='form-row'> <div className='form-row'>
<Input <Input
name='organization' name='organization'
type='text' type='text'
value={formState.organization} value={formState.organization}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => { onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
setFormState({...formState, organization: e.target.value}); setFormState({...formState, organization: e.target.value});
}} }}
placeholder={intl.formatMessage({ placeholder={intl.formatMessage({
id: 'self_hosted_signup.organization', id: 'self_hosted_signup.organization',
defaultMessage: 'Organization Name', defaultMessage: 'Organization Name',
})} })}
required={true} required={true}
/> />
</div> </div>
<div className='form-row'> <div className='form-row'>
<Input <Input
name='name' name='name'
type='text' type='text'
value={formState.cardName} value={formState.cardName}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => { onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
setFormState({...formState, cardName: e.target.value}); setFormState({...formState, cardName: e.target.value});
}} }}
placeholder={intl.formatMessage({ placeholder={intl.formatMessage({
id: 'payment_form.name_on_card', id: 'payment_form.name_on_card',
defaultMessage: 'Name on Card', defaultMessage: 'Name on Card',
})} })}
required={true} required={true}
/> />
</div> </div>
<span className='section-title'> <span className='section-title'>
<FormattedMessage <FormattedMessage
id='payment_form.billing_address' id='payment_form.billing_address'
defaultMessage='Billing address' defaultMessage='Billing address'
/> />
</span> </span>
<Address <Address
testPrefix='selfHostedExpansion' testPrefix='selfHostedExpansion'
type='billing' type='billing'
country={formState.country} country={formState.country}
changeCountry={(option) => { changeCountry={(option) => {
setFormState({...formState, country: option.value}); setFormState({...formState, country: option.value});
}} }}
address={formState.address} address={formState.address}
changeAddress={(e) => { changeAddress={(e) => {
setFormState({...formState, address: e.target.value}); setFormState({...formState, address: e.target.value});
}} }}
address2={formState.address2} address2={formState.address2}
changeAddress2={(e) => { changeAddress2={(e) => {
setFormState({...formState, address2: e.target.value}); setFormState({...formState, address2: e.target.value});
}} }}
city={formState.city} city={formState.city}
changeCity={(e) => { changeCity={(e) => {
setFormState({...formState, city: e.target.value}); setFormState({...formState, city: e.target.value});
}} }}
state={formState.state} state={formState.state}
changeState={(state: string) => { changeState={(state: string) => {
setFormState({...formState, state}); setFormState({...formState, state});
}} }}
postalCode={formState.postalCode} postalCode={formState.postalCode}
changePostalCode={(e) => { changePostalCode={(e) => {
setFormState({...formState, postalCode: e.target.value}); setFormState({...formState, postalCode: e.target.value});
}} }}
/> />
<ChooseDifferentShipping <ChooseDifferentShipping
shippingIsSame={formState.shippingSame} shippingIsSame={formState.shippingSame}
setShippingIsSame={(val: boolean) => { setShippingIsSame={(val: boolean) => {
setFormState({...formState, shippingSame: val}); setFormState({...formState, shippingSame: val});
}} }}
/> />
{!formState.shippingSame && ( {!formState.shippingSame && (
<> <>
<div className='section-title'> <div className='section-title'>
<FormattedMessage <FormattedMessage
id='payment_form.shipping_address' id='payment_form.shipping_address'
defaultMessage='Shipping Address' defaultMessage='Shipping Address'
/>
</div>
<Address
testPrefix='selfHostedExpansion'
type='shipping'
country={formState.shippingCountry}
changeCountry={(option) => {
setFormState({...formState, shippingCountry: option.value});
}}
address={formState.shippingAddress}
changeAddress={(e) => {
setFormState({...formState, shippingAddress: e.target.value});
}}
address2={formState.shippingAddress2}
changeAddress2={(e) => {
setFormState({...formState, shippingAddress2: e.target.value});
}}
city={formState.shippingCity}
changeCity={(e) => {
setFormState({...formState, shippingCity: e.target.value});
}}
state={formState.shippingState}
changeState={(state: string) => {
setFormState({...formState, shippingState: state});
}}
postalCode={formState.shippingPostalCode}
changePostalCode={(e) => {
setFormState({...formState, shippingPostalCode: e.target.value});
}}
/> />
</div> </>
<Address )}
testPrefix='selfHostedExpansion' <Terms
type='shipping'
country={formState.shippingCountry}
changeCountry={(option) => {
setFormState({...formState, shippingCountry: option.value});
}}
address={formState.shippingAddress}
changeAddress={(e) => {
setFormState({...formState, shippingAddress: e.target.value});
}}
address2={formState.shippingAddress2}
changeAddress2={(e) => {
setFormState({...formState, shippingAddress2: e.target.value});
}}
city={formState.shippingCity}
changeCity={(e) => {
setFormState({...formState, shippingCity: e.target.value});
}}
state={formState.shippingState}
changeState={(state: string) => {
setFormState({...formState, shippingState: state});
}}
postalCode={formState.shippingPostalCode}
changePostalCode={(e) => {
setFormState({...formState, shippingPostalCode: e.target.value});
}}
/>
</>
)}
<Terms
agreed={formState.agreedTerms} agreed={formState.agreedTerms}
setAgreed={(data: boolean) => { setAgreed={(data: boolean) => {
setFormState({...formState, agreedTerms: data}); setFormState({...formState, agreedTerms: data});
}} }}
/> />
</div> </div>
</div> </div>
<div className='rhs'> <div className='rhs'>
<SelfHostedExpansionCard <SelfHostedExpansionCard
updateSeats={(seats: number) => { updateSeats={(seats: number) => {
setFormState({...formState, seats}); setFormState({...formState, seats});
setAdditionalSeats(seats); setAdditionalSeats(seats);
}} }}
canSubmit={canSubmitForm} canSubmit={canSubmitForm}
submit={submit} submit={submit}
licensedSeats={licensedSeats} licensedSeats={licensedSeats}
initialSeats={additionalSeats} initialSeats={additionalSeats}
/> />
</div>
</div> </div>
</div>}
{((formState.succeeded || progress === SelfHostedSignupProgress.CREATED_LICENSE)) && !formState.error && !formState.submitting && ( {((formState.succeeded || progress === SelfHostedSignupProgress.CREATED_LICENSE)) && !formState.error && !formState.submitting && (
<SuccessPage <SuccessPage
onClose={selfHostedExpansionModal.close} onClose={selfHostedExpansionModal.close}