Этот коммит содержится в:
Conor Macpherson
2023-04-04 09:23:42 -04:00
родитель 0ce1b6c12c
Коммит 2f010f9f6a
5 изменённых файлов: 128 добавлений и 126 удалений

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

@@ -68,11 +68,11 @@ const EnterpriseEditionLeftPanel = ({
useEffect(() => { useEffect(() => {
console.log(actionQueryParam); console.log(actionQueryParam);
if (actionQueryParam === 'show_expansion_modal' && canExpand && isSelfHostedExpansionEnabled) { if (actionQueryParam === 'show_expansion_modal' && canExpand && isSelfHostedExpansionEnabled) {
console.log("Open modal!"); console.log('Open modal!');
selfHostedExpansionModal.open(); selfHostedExpansionModal.open();
query.set('action', ''); query.set('action', '');
} }
}, []) }, []);
useEffect(() => { useEffect(() => {
async function fetchUnSanitizedLicense() { async function fetchUnSanitizedLicense() {

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

@@ -103,7 +103,7 @@ const OverageUsersBannerNotice = () => {
const handleClick = () => { const handleClick = () => {
trackEventFn(isExpandable ? 'Self Serve' : 'Contact Sales'); trackEventFn(isExpandable ? 'Self Serve' : 'Contact Sales');
if (isExpandable) { if (isExpandable) {
selfHostedExpansionModal.open() selfHostedExpansionModal.open();
} }
}; };
@@ -120,7 +120,7 @@ const OverageUsersBannerNotice = () => {
> >
{cta} {cta}
</NavLink> </NavLink>
) );
} }
return ( return (

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

@@ -2,4 +2,4 @@
// See LICENSE.txt for license information. // See LICENSE.txt for license information.
export const STORAGE_KEY_PURCHASE_IN_PROGRESS = 'PURCHASE_IN_PROGRESS'; export const STORAGE_KEY_PURCHASE_IN_PROGRESS = 'PURCHASE_IN_PROGRESS';
export const STORAGE_KEY_EXPANSION_IN_PROGRESS = 'EXPANSION_IN_PROGRESS'; export const STORAGE_KEY_EXPANSION_IN_PROGRESS = 'EXPANSION_IN_PROGRESS';

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

@@ -348,163 +348,163 @@ 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})}> <div className='lhs'>
<h2 className='title'>{title}</h2> <h2 className='title'>{title}</h2>
<UpgradeSvg <UpgradeSvg
width={267} width={267}
height={227} height={227}
/> />
<div className='footer-text'>{'Questions?'}</div> <div className='footer-text'>{'Questions?'}</div>
<ContactSalesLink/> <ContactSalesLink/>
</div> </div>
<div className='center'> <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}
changeAddress={(e) => {
setFormState({...formState, address: e.target.value});
}}
address2={formState.address2}
changeAddress2={(e) => {
setFormState({...formState, address2: e.target.value});
}}
city={formState.city}
changeCity={(e) => {
setFormState({...formState, city: e.target.value});
}}
state={formState.state}
changeState={(state: string) => {
setFormState({...formState, state});
}}
postalCode={formState.postalCode}
changePostalCode={(e) => {
setFormState({...formState, postalCode: e.target.value});
}}
/>
<ChooseDifferentShipping
shippingIsSame={formState.shippingSame}
setShippingIsSame={(val: boolean) => {
setFormState({...formState, shippingSame: val});
}}
/>
{!formState.shippingSame && (
<>
<div className='section-title'>
<FormattedMessage
id='payment_form.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});
}}
/>
</>
)}
<Terms
agreed={formState.agreedTerms}
setAgreed={(data: boolean) => {
setFormState({...formState, agreedTerms: data});
}}
/>
</div>
</div>
<div className='rhs'>
<SelfHostedExpansionCard
updateSeats={(seats: number) => {
setFormState({...formState, seats});
setAdditionalSeats(seats);
}} }}
address={formState.address}
changeAddress={(e) => {
setFormState({...formState, address: e.target.value});
}}
address2={formState.address2}
changeAddress2={(e) => {
setFormState({...formState, address2: e.target.value});
}}
city={formState.city}
changeCity={(e) => {
setFormState({...formState, city: e.target.value});
}}
state={formState.state}
changeState={(state: string) => {
setFormState({...formState, state});
}}
postalCode={formState.postalCode}
changePostalCode={(e) => {
setFormState({...formState, postalCode: e.target.value});
}}
/>
<ChooseDifferentShipping
shippingIsSame={formState.shippingSame}
setShippingIsSame={(val: boolean) => {
setFormState({...formState, shippingSame: val});
}}
/>
{!formState.shippingSame && (
<>
<div className='section-title'>
<FormattedMessage
id='payment_form.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});
}}
/>
</>
)}
<Terms
agreed={formState.agreedTerms}
setAgreed={(data: boolean) => {
setFormState({...formState, agreedTerms: data});
}}
/>
</div>
</div>
<div className='rhs'>
<SelfHostedExpansionCard
updateSeats={(seats: number) => {
setFormState({...formState, 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
@@ -519,7 +519,9 @@ export default function SelfHostedExpansionModal() {
{formState.error && ( {formState.error && (
<ErrorPage <ErrorPage
canRetry={canRetry} canRetry={canRetry}
tryAgain={() => {setFormState({...formState, submitting: false, error: ''})}} tryAgain={() => {
setFormState({...formState, submitting: false, error: ''});
}}
/> />
)} )}
<div className='background-svg'> <div className='background-svg'>

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

@@ -93,7 +93,7 @@ export default function Submitting(props: Props) {
setBarProgress(Math.min(maxProgressForCurrentSignupProgress, barProgress + maxFakeProgressIncrement)); setBarProgress(Math.min(maxProgressForCurrentSignupProgress, barProgress + maxFakeProgressIncrement));
} }
}, fakeProgressInterval); }, fakeProgressInterval);
return () => clearInterval(interval); return () => clearInterval(interval);
}, [barProgress]); }, [barProgress]);