diff --git a/webapp/channels/src/components/common/hooks/useControlSelfHostedExpansionModal.ts b/webapp/channels/src/components/common/hooks/useControlSelfHostedExpansionModal.ts index dd581f23d5..df2d59eaf7 100644 --- a/webapp/channels/src/components/common/hooks/useControlSelfHostedExpansionModal.ts +++ b/webapp/channels/src/components/common/hooks/useControlSelfHostedExpansionModal.ts @@ -19,7 +19,6 @@ import {useControlModal, ControlModal} from './useControlModal'; import useCanSelfHostedExpand from './useCanSelfHostedExpand'; interface HookOptions{ - onClick?: () => void; trackingLocation?: string; } diff --git a/webapp/channels/src/components/self_hosted_purchases/self_hosted_expansion_modal/index.test.tsx b/webapp/channels/src/components/self_hosted_purchases/self_hosted_expansion_modal/index.test.tsx index 882953af5f..2d2931483e 100644 --- a/webapp/channels/src/components/self_hosted_purchases/self_hosted_expansion_modal/index.test.tsx +++ b/webapp/channels/src/components/self_hosted_purchases/self_hosted_expansion_modal/index.test.tsx @@ -98,13 +98,10 @@ jest.mock('mattermost-redux/client', () => { progress: mockCreatedIntent, }); }, - confirmSelfHostedSignup: () => Promise.resolve({ + confirmSelfHostedExpansion: () => Promise.resolve({ progress: mockCreatedLicense, license: {Users: existingUsers * 2}, }), - getClientLicenseOld: () => Promise.resolve({ - data: {Sku: 'Enterprise'}, - }), }, }; }); @@ -163,6 +160,7 @@ const initialState: DeepPartial = { EnableDeveloper: 'false', }, license: { + SkuName: productName, Sku: productName, SkuName: productName, Users: '50', @@ -240,7 +238,7 @@ const defaultSuccessForm: PurchaseForm = { city: 'Minneapolis', state: 'MN', zip: '55423', - seats: '10', + seats: '50', agree: true, }; @@ -257,11 +255,6 @@ function fillForm(form: PurchaseForm) { fireEvent.click(screen.getByText('I have read and agree', {exact: false})); } - // not changing the license seats number, because it is expected to be pre-filled, - // with the correct number of seats (current active users - current licensed seats, or 1 if the difference is 0). - - expect(document.getElementsByClassName('SelfHostedExpansionRHSCard__AddSeatsWarning')[0] as HTMLElement).toBeEnabled(); - const completeButton = screen.getByText('Complete purchase'); if (form === defaultSuccessForm) { @@ -307,14 +300,24 @@ describe('SelfHostedExpansionModal Open', () => { expect(screen.getByText('You must add a seat to continue')).toBeVisible(); }); - it('happy path submit shows success screen', async () => { + it('happy path submit shows success screen when confirmation succeeds', async () => { renderWithIntlAndStore(
, initialState); expect(screen.getByText('Complete purchase')).toBeDisabled(); - const upgradeButton = fillForm(defaultSuccessForm); - expect(upgradeButton).toBeEnabled(); + const upgradeButton = fillForm(defaultSuccessForm); upgradeButton.click(); - await waitFor(() => expect(screen.getByText('You\'ve successfully updated your license seat count')).toBeTruthy(), {timeout: 1234}); + + expect(screen.findByText('The license has been automatically applied')).toBeTruthy(); + }); + + it('happy path submit shows submitting screen while requesting confirmation', async () => { + renderWithIntlAndStore(
, initialState); + expect(screen.getByText('Complete purchase')).toBeDisabled(); + + const upgradeButton = fillForm(defaultSuccessForm); + upgradeButton.click(); + + await waitFor(() => expect(document.getElementsByClassName('submitting')[0]).toBeTruthy(), {timeout: 1234}); }); it('sad path submit shows error screen', async () => { 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 7eeedb5460..5fbd4d6ebc 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 @@ -50,7 +50,6 @@ import {STORAGE_KEY_EXPANSION_IN_PROGRESS} from '../constants'; import Address from 'components/self_hosted_purchases/address'; import ChooseDifferentShipping from 'components/choose_different_shipping'; import Terms from 'components/self_hosted_purchases/self_hosted_purchase_modal/terms'; -import useControlSelfHostedExpansionModal from 'components/common/hooks/useControlSelfHostedExpansionModal'; import classNames from 'classnames'; export interface FormState { @@ -168,7 +167,6 @@ export function canSubmit(formState: FormState, progress: ValueOf(); const intl = useIntl(); const cardRef = useRef(null); @@ -457,7 +455,7 @@ export default function SelfHostedExpansionModal() { />
{ @@ -509,7 +507,10 @@ export default function SelfHostedExpansionModal() { {((formState.succeeded || progress === SelfHostedSignupProgress.CREATED_LICENSE)) && !formState.error && !formState.submitting && ( { + setFormState({...formState, submitting: false, error: '', succeeded: false}); + closeModal(ModalIdentifiers.SELF_HOSTED_EXPANSION); + }} /> )} {formState.submitting && ( diff --git a/webapp/channels/src/components/self_hosted_purchases/self_hosted_expansion_modal/success_page.tsx b/webapp/channels/src/components/self_hosted_purchases/self_hosted_expansion_modal/success_page.tsx index 77916c9de7..b87592dd74 100644 --- a/webapp/channels/src/components/self_hosted_purchases/self_hosted_expansion_modal/success_page.tsx +++ b/webapp/channels/src/components/self_hosted_purchases/self_hosted_expansion_modal/success_page.tsx @@ -4,15 +4,12 @@ import React from 'react'; import {FormattedMessage} from 'react-intl'; -import {NavLink} from 'react-router-dom'; - -import {useDispatch} from 'react-redux'; +import {useHistory} from 'react-router-dom'; import IconMessage from 'components/purchase_modal/icon_message'; import PaymentSuccessStandardSvg from 'components/common/svg_images_components/payment_success_standard_svg'; -import {ConsolePages, ModalIdentifiers} from 'utils/constants'; +import {ConsolePages} from 'utils/constants'; import BackgroundSvg from 'components/common/svg_images_components/background_svg'; -import {closeModal} from 'actions/views/modals'; import './success_page.scss'; @@ -21,7 +18,7 @@ interface Props { } export default function SelfHostedExpansionSuccessPage(props: Props) { - const dispatch = useDispatch(); + const history = useHistory(); const titleText = ( Billing section of the system console.'} values={{ billing: (billingText: React.ReactNode) => ( - { + history.push(ConsolePages.BILLING_HISTORY); + props.onClose(); + }} > {billingText} - + ), }} /> @@ -72,7 +71,6 @@ export default function SelfHostedExpansionSuccessPage(props: Props) { formattedButtonText={formattedButtonText} buttonHandler={() => { props.onClose(); - dispatch(closeModal(ModalIdentifiers.SUCCESS_MODAL)); }} />
diff --git a/webapp/channels/src/utils/constants.tsx b/webapp/channels/src/utils/constants.tsx index 9c59ab386d..e07e5c70af 100644 --- a/webapp/channels/src/utils/constants.tsx +++ b/webapp/channels/src/utils/constants.tsx @@ -2007,7 +2007,7 @@ export const ConsolePages = { WEB_SERVER: '/admin_console/environment/web_server', PUSH_NOTIFICATION_CENTER: '/admin_console/environment/push_notification_server', SMTP: '/admin_console/environment/smtp', - BILLING_HISTORY: 'admin_console/billing/billing_history', + BILLING_HISTORY: '/admin_console/billing/billing_history', }; export const WindowSizes = {