lint.
Этот коммит содержится в:
@@ -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}
|
||||||
|
|||||||
Ссылка в новой задаче
Block a user