Fixup i18n, error/success/progress modals.

webapp/channels/src/components/self_hosted_expansion_modal/error_page.tsx

@@ -27,7 +27,7 @@ export default function SelfHostedExpansionErrorPage(props: Props) {
 
     let formattedButtonText = (
         <FormattedMessage
-            id='error_modal.try_again'
+            id='self_hosted_expansion.try_again'
             defaultMessage='Try again'
         />
     );
@@ -35,7 +35,7 @@ export default function SelfHostedExpansionErrorPage(props: Props) {
     if (!props.canRetry) {
         formattedButtonText = (
             <FormattedMessage
-                id='error_modal.close'
+                id='self_hosted_expansion.close'
                 defaultMessage='Close'
             />
         );

webapp/channels/src/components/self_hosted_expansion_modal/index.test.tsx

@@ -3,7 +3,7 @@
 
 import React from 'react';
 
-import {screen, fireEvent} from '@testing-library/react';
+import {screen, fireEvent, waitFor} from '@testing-library/react';
 
 import {GlobalState} from 'types/store';
 
@@ -252,15 +252,15 @@ function fillForm(form: PurchaseForm) {
     changeByPlaceholder('City', form.city);
     selectDropdownValue('selfHostedExpansionStateSelector', form.state);
     changeByPlaceholder('Zip/Postal Code', form.zip);
-    changeByTestId('seatsInput', form.seats);
     if (form.agree) {
         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();
 
-    // not changing the license seats number,
-    // because it is expected to be pre-filled with the correct number of seats.
 
     const completeButton = screen.getByText('Complete purchase');
 
@@ -307,26 +307,27 @@ describe('SelfHostedExpansionModal Open', () => {
         expect(screen.getByText('You must add a seat to continue')).toBeVisible();
     });
 
-    // it('happy path submit shows success screen', async () => {
-    //     renderWithIntlAndStore(<div id='root-portal'><SelfHostedExpansionModal/></div>, initialState);
-    //     expect(screen.getByText('Complete purchase')).toBeDisabled();
-    //     const upgradeButton = fillForm(defaultSuccessForm);
+    it('happy path submit shows success screen', async () => {
+        renderWithIntlAndStore(<div id='root-portal'><SelfHostedExpansionModal/></div>, initialState);
+        expect(screen.getByText('Complete purchase')).toBeDisabled();
+        const upgradeButton = fillForm(defaultSuccessForm);
 
-    //     upgradeButton.click();
-    //     await waitFor(() => expect(screen.getByText(`You're now subscribed to ${productName}`)).toBeTruthy(), {timeout: 1234});
-    // });
+        expect(upgradeButton).toBeEnabled();
+        upgradeButton.click();
+        await waitFor(() => expect(screen.getByText('You\'ve successfully updated your license seat count')).toBeTruthy(), {timeout: 1234});
+    });
 
-    // it('sad path submit shows error screen', async () => {
-    //     renderWithIntlAndStore(<div id='root-portal'><SelfHostedExpansionModal/></div>, initialState);
-    //     expect(screen.getByText('Complete purchase')).toBeDisabled();
-    //     fillForm(defaultSuccessForm);
-    //     changeByPlaceholder('Organization Name', failOrg);
+    it('sad path submit shows error screen', async () => {
+        renderWithIntlAndStore(<div id='root-portal'><SelfHostedExpansionModal/></div>, initialState);
+        expect(screen.getByText('Complete purchase')).toBeDisabled();
+        fillForm(defaultSuccessForm);
+        changeByPlaceholder('Organization Name', failOrg);
 
-    //     const upgradeButton = screen.getByText('Complete purchase');
-    //     expect(upgradeButton).toBeEnabled();
-    //     upgradeButton.click();
-    //     await waitFor(() => expect(screen.getByText('Sorry, the payment verification failed')).toBeTruthy(), {timeout: 1234});
-    // });
+        const upgradeButton = screen.getByText('Complete purchase');
+        expect(upgradeButton).toBeEnabled();
+        upgradeButton.click();
+        await waitFor(() => expect(screen.getByText('Sorry, the payment verification failed')).toBeTruthy(), {timeout: 1234});
+    });
 });
 
 describe('SelfHostedExpansionModal RHS Card', () => {

webapp/channels/src/components/self_hosted_expansion_modal/index.tsx

@@ -252,8 +252,6 @@ export default function SelfHostedExpansionModal() {
             const card = cardRef.current?.getCard();
             if (!card) {
                 const message = 'Failed to get card when it was expected';
-                // eslint-disable-next-line no-console
-                console.error(message);
                 setFormState({...formState, error: message});
                 return;
             }
@@ -302,8 +300,6 @@ export default function SelfHostedExpansionModal() {
             }
             setFormState({...formState, submitting: false});
         } catch (e) {
-            // eslint-disable-next-line no-console
-            console.error('could not complete setup', e);
             setFormState({...formState, error: 'unable to complete signup'});
         }
     };

webapp/channels/src/components/self_hosted_expansion_modal/success_page.tsx

@@ -25,7 +25,7 @@ export default function SelfHostedExpansionSuccessPage(props: Props) {
     const titleText = (
         <FormattedMessage
             id={'self_hosted_expansion.expand_success'}
-            defaultMessage={'You\'ve successfully updated your license seat count'}
+            defaultMessage={"You've successfully updated your license seat count"}
         />
     );
 

webapp/channels/src/i18n/en.json

@@ -4724,6 +4724,7 @@
   "self_hosted_expansion.expansion_modal.title": "Provide your payment details",
   "self_hosted_expansion.license_applied": "The license has been automatically applied to your Mattermost instance. Your updated invoice will be visible in the <billing>Billing section</billing> of the system console.",
   "self_hosted_expansion.paymentFailed": "Payment failed. Please try again or contact support.",
+  "self_hosted_expansion.try_again": "Try again",
   "self_hosted_signup.air_gapped_content": "It appears that your instance is air-gapped, or it may not be connected to the internet. To purchase a license, please visit",
   "self_hosted_signup.air_gapped_title": "Purchase through the customer portal",
   "self_hosted_signup.close": "Close",