Add success, error, loading modals, lint.

webapp/channels/src/components/common/hooks/useControlSelfHostedExpansionModal.ts

@@ -20,7 +20,7 @@ import useCanSelfHostedExpand from './useCanSelfHostedExpand';
 
 interface HookOptions{
     onClick?: () => void;
-    trackingLocation: string;
+    trackingLocation?: string;
 }
 
 export default function useControlSelfHostedExpansionModal(options: HookOptions): ControlModal {

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

@@ -11,7 +11,11 @@ import IconMessage from 'components/purchase_modal/icon_message';
 
 import './error_page.scss';
 
-export default function SelfHostedExpansionErrorPage() {
+interface Props {
+    canRetry: boolean;
+}
+
+export default function SelfHostedExpansionErrorPage(props: Props) {
     const [, contactSupportLink] = useOpenSelfHostedZendeskSupportForm('Purchase error');
 
     const formattedTitle = (
@@ -21,13 +25,22 @@ export default function SelfHostedExpansionErrorPage() {
         />
     );
 
-    const formattedButtonText = (
+    let formattedButtonText = (
         <FormattedMessage
             id='error_modal.try_again'
             defaultMessage='Try again'
         />
     );
 
+    if (!props.canRetry) {
+        formattedButtonText = (
+            <FormattedMessage
+                id='error_modal.close'
+                defaultMessage='Close'
+            />
+        );
+    }
+
     const formattedSubtitle = (
         <FormattedMessage
             id='self_hosted_expansion.paymentFailed'

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

@@ -250,14 +250,14 @@ export default function SelfHostedExpansionCard(props: Props) {
                         defaultMessage='Your credit card will be charged today.<see_how_billing_works>See how billing works.</see_how_billing_works>'
                         values={{
                             see_how_billing_works: (text: string) => (
-                                <Fragment>
+                                <>
                                     <br/>
                                     <ExternalLink
                                         href={DocLinks.SELF_HOSTED_BILLING}
                                     >
                                         {text}
                                     </ExternalLink>
-                                </Fragment>
+                                </>
                             ),
                         }}
                     />

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

@@ -132,7 +132,7 @@ jest.mock('utils/hosted_customer', () => {
 const productName = SelfHostedProducts.PROFESSIONAL;
 
 // Licensed expiry set as 3 months from the current date (rolls over to new years).
-let licenseExpiry = moment()
+let licenseExpiry = moment();
 const monthsUntilLicenseExpiry = 3;
 licenseExpiry = licenseExpiry.add(monthsUntilLicenseExpiry, 'months');
 

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

@@ -12,6 +12,9 @@ import {StripeCardElementChangeEvent} from '@stripe/stripe-js';
 import UpgradeSvg from 'components/common/svg_images_components/upgrade_svg';
 import RootPortal from 'components/root_portal';
 import ContactSalesLink from 'components/self_hosted_purchase_modal/contact_sales_link';
+import ErrorPage from 'components/self_hosted_expansion_modal/error_page';
+import SuccessPage from 'components/self_hosted_expansion_modal/success_page';
+import Submitting from 'components/self_hosted_purchase_modal/submitting';
 
 import useLoadStripe from 'components/common/hooks/useLoadStripe';
 import CardInput, {CardInputType} from 'components/payment_form/card_input';
@@ -47,6 +50,7 @@ import {STORAGE_KEY_EXPANSION_IN_PROGRESS} from './constants';
 import Address from 'components/self_hosted_purchase_modal/address';
 import ChooseDifferentShipping from 'components/choose_different_shipping';
 import Terms from 'components/self_hosted_purchase_modal/terms';
+import useControlSelfHostedExpansionModal from 'components/common/hooks/useControlSelfHostedExpansionModal';
 
 export interface FormState {
     cardName: string;
@@ -163,6 +167,7 @@ export function canSubmit(formState: FormState, progress: ValueOf<typeof SelfHos
 }
 
 export default function SelfHostedExpansionModal() {
+    const selfHostedExpansionModal = useControlSelfHostedExpansionModal({});
     const dispatch = useDispatch<DispatchFunc>();
     const intl = useIntl();
     const cardRef = useRef<CardInputType | null>(null);
@@ -173,6 +178,7 @@ export default function SelfHostedExpansionModal() {
 
     const license = useSelector(getLicense);
     const licensedSeats = parseInt(license.Users, 10);
+    const currentPlan = license.SkuName;
     const activeUsers = useSelector(getFilteredUsersStats)?.total_users_count || 0;
     const [additionalSeats, setAdditionalSeats] = useState(activeUsers <= licensedSeats ? 1 : activeUsers - licensedSeats);
 
@@ -182,6 +188,7 @@ export default function SelfHostedExpansionModal() {
     const initialState = makeInitialState(additionalSeats);
     const [formState, setFormState] = useState<FormState>(initialState);
     const [show] = useState(true);
+    const canRetry = formState.error !== '422';
 
     const title = intl.formatMessage({
         id: 'self_hosted_expansion.expansion_modal.title',
@@ -501,25 +508,22 @@ export default function SelfHostedExpansionModal() {
                                 />
                             </div>
                         </div>
-                        {/* {((formState.succeeded || progress === SelfHostedSignupProgress.CREATED_LICENSE) && hasLicense) && !formState.error && !formState.submitting && (
+                        {((formState.succeeded || progress === SelfHostedSignupProgress.CREATED_LICENSE)) && !formState.error && !formState.submitting && (
                             <SuccessPage
-                                onClose={controlModal.close}
-                                planName={desiredPlanName}
+                                onClose={selfHostedExpansionModal.close}
                             />
                         )}
-                        {formState.submitting && (
+                        {formState.submitting && !formState.error && (
                             <Submitting
-                                desiredPlanName={desiredPlanName}
+                                desiredPlanName={currentPlan}
                                 progressBar={formState.progressBar}
                             />
                         )}
                         {formState.error && (
                             <ErrorPage
-                                nextAction={errorAction}
                                 canRetry={canRetry}
-                                errorType={canRetry ? 'generic' : 'failed_export'}
                             />
-                        )} */}
+                        )}
                         <div className='background-svg'>
                             <BackgroundSvg/>
                         </div>

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

@@ -16,7 +16,11 @@ import {closeModal} from 'actions/views/modals';
 
 import './success_page.scss';
 
-export default function SelfHostedExpansionSuccessPage() {
+interface Props {
+    onClose: () => void;
+}
+
+export default function SelfHostedExpansionSuccessPage(props: Props) {
     const dispatch = useDispatch();
     const titleText = (
         <FormattedMessage
@@ -66,7 +70,10 @@ export default function SelfHostedExpansionSuccessPage() {
                 testId='selfHostedExpansionSuccess'
                 icon={icon}
                 formattedButtonText={formattedButtonText}
-                buttonHandler={() => dispatch(closeModal(ModalIdentifiers.SUCCESS_MODAL))}
+                buttonHandler={() => {
+                    props.onClose();
+                    dispatch(closeModal(ModalIdentifiers.SUCCESS_MODAL));
+                }}
             />
             <div className='background-svg'>
                 <BackgroundSvg/>