diff --git a/webapp/channels/src/components/admin_console/license_settings/enterprise_edition/enterprise_edition_left_panel.tsx b/webapp/channels/src/components/admin_console/license_settings/enterprise_edition/enterprise_edition_left_panel.tsx index aea8e93cb5..ab7feb5107 100644 --- a/webapp/channels/src/components/admin_console/license_settings/enterprise_edition/enterprise_edition_left_panel.tsx +++ b/webapp/channels/src/components/admin_console/license_settings/enterprise_edition/enterprise_edition_left_panel.tsx @@ -68,11 +68,11 @@ const EnterpriseEditionLeftPanel = ({ useEffect(() => { console.log(actionQueryParam); if (actionQueryParam === 'show_expansion_modal' && canExpand && isSelfHostedExpansionEnabled) { - console.log("Open modal!"); + console.log('Open modal!'); selfHostedExpansionModal.open(); query.set('action', ''); } - }, []) + }, []); useEffect(() => { async function fetchUnSanitizedLicense() { diff --git a/webapp/channels/src/components/invitation_modal/overage_users_banner_notice/index.tsx b/webapp/channels/src/components/invitation_modal/overage_users_banner_notice/index.tsx index d76f81c4ec..f72ec26388 100644 --- a/webapp/channels/src/components/invitation_modal/overage_users_banner_notice/index.tsx +++ b/webapp/channels/src/components/invitation_modal/overage_users_banner_notice/index.tsx @@ -103,7 +103,7 @@ const OverageUsersBannerNotice = () => { const handleClick = () => { trackEventFn(isExpandable ? 'Self Serve' : 'Contact Sales'); if (isExpandable) { - selfHostedExpansionModal.open() + selfHostedExpansionModal.open(); } }; @@ -120,7 +120,7 @@ const OverageUsersBannerNotice = () => { > {cta} - ) + ); } return ( diff --git a/webapp/channels/src/components/self_hosted_purchases/constants.ts b/webapp/channels/src/components/self_hosted_purchases/constants.ts index 58ddf362f8..72b16f750a 100644 --- a/webapp/channels/src/components/self_hosted_purchases/constants.ts +++ b/webapp/channels/src/components/self_hosted_purchases/constants.ts @@ -2,4 +2,4 @@ // See LICENSE.txt for license information. export const STORAGE_KEY_PURCHASE_IN_PROGRESS = 'PURCHASE_IN_PROGRESS'; -export const STORAGE_KEY_EXPANSION_IN_PROGRESS = 'EXPANSION_IN_PROGRESS'; \ No newline at end of file +export const STORAGE_KEY_EXPANSION_IN_PROGRESS = 'EXPANSION_IN_PROGRESS'; diff --git a/webapp/channels/src/components/self_hosted_purchases/self_hosted_expansion_modal/index.tsx b/webapp/channels/src/components/self_hosted_purchases/self_hosted_expansion_modal/index.tsx index 7801ef7d6a..0661ad0637 100644 --- a/webapp/channels/src/components/self_hosted_purchases/self_hosted_expansion_modal/index.tsx +++ b/webapp/channels/src/components/self_hosted_purchases/self_hosted_expansion_modal/index.tsx @@ -348,163 +348,163 @@ export default function SelfHostedExpansionModal() { >
{
-

{title}

- -
{'Questions?'}
- -
+

{title}

+ +
{'Questions?'}
+ +
-
- {intl.formatMessage({ - id: 'payment_form.credit_card', - defaultMessage: 'Credit Card', - })} - + {intl.formatMessage({ + id: 'payment_form.credit_card', + defaultMessage: 'Credit Card', + })} +
- { - setFormState({...formState, cardFilled: event.complete}); - }} + setFormState({...formState, cardFilled: event.complete}); + }} theme={theme} /> -
+
- ) => { - setFormState({...formState, organization: e.target.value}); - }} + setFormState({...formState, organization: e.target.value}); + }} placeholder={intl.formatMessage({ - id: 'self_hosted_signup.organization', - defaultMessage: 'Organization Name', - })} + id: 'self_hosted_signup.organization', + defaultMessage: 'Organization Name', + })} required={true} /> -
+
- ) => { - setFormState({...formState, cardName: e.target.value}); - }} + setFormState({...formState, cardName: e.target.value}); + }} placeholder={intl.formatMessage({ - id: 'payment_form.name_on_card', - defaultMessage: 'Name on Card', - })} + id: 'payment_form.name_on_card', + defaultMessage: 'Name on Card', + })} required={true} /> -
+
- - +
{ - 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}); - }} - /> - { - setFormState({...formState, shippingSame: val}); - }} - /> - {!formState.shippingSame && ( - <> -
- -
-
{ - 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}); - }} - /> - - )} - { - setFormState({...formState, agreedTerms: data}); - }} - /> - - -
- { - setFormState({...formState, seats}); - setAdditionalSeats(seats); + testPrefix='selfHostedExpansion' + type='billing' + country={formState.country} + changeCountry={(option) => { + 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}); + }} + /> + { + setFormState({...formState, shippingSame: val}); + }} + /> + {!formState.shippingSame && ( + <> +
+ +
+
{ + 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}); + }} + /> + + )} + { + setFormState({...formState, agreedTerms: data}); + }} + /> +
+ +
+ { + setFormState({...formState, seats}); + setAdditionalSeats(seats); + }} canSubmit={canSubmitForm} submit={submit} licensedSeats={licensedSeats} initialSeats={additionalSeats} /> -
+ } {((formState.succeeded || progress === SelfHostedSignupProgress.CREATED_LICENSE)) && !formState.error && !formState.submitting && ( {setFormState({...formState, submitting: false, error: ''})}} + tryAgain={() => { + setFormState({...formState, submitting: false, error: ''}); + }} /> )}
diff --git a/webapp/channels/src/components/self_hosted_purchases/self_hosted_expansion_modal/submitting.tsx b/webapp/channels/src/components/self_hosted_purchases/self_hosted_expansion_modal/submitting.tsx index 72cd5b6810..f734d5b82a 100644 --- a/webapp/channels/src/components/self_hosted_purchases/self_hosted_expansion_modal/submitting.tsx +++ b/webapp/channels/src/components/self_hosted_purchases/self_hosted_expansion_modal/submitting.tsx @@ -93,7 +93,7 @@ export default function Submitting(props: Props) { setBarProgress(Math.min(maxProgressForCurrentSignupProgress, barProgress + maxFakeProgressIncrement)); } }, fakeProgressInterval); - + return () => clearInterval(interval); }, [barProgress]);