[MM-27142] In-Web-App purchase of Mattermost Cloud

actions/cloud.tsx

@@ -0,0 +1,71 @@
+
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+import {Stripe} from '@stripe/stripe-js';
+import {getCode} from 'country-list';
+
+import {Client4} from 'mattermost-redux/client';
+
+import {getConfirmCardSetup} from 'components/payment_form/stripe';
+
+import {StripeSetupIntent, BillingDetails} from 'types/cloud/sku';
+
+// Returns true for success, and false for any error
+export function completeStripeAddPaymentMethod(stripe: Stripe, billingDetails: BillingDetails, isDevMode: boolean) {
+    return async () => {
+        let paymentSetupIntent: StripeSetupIntent;
+        try {
+            paymentSetupIntent = await Client4.createPaymentMethod() as StripeSetupIntent;
+        } catch (error) {
+            return error;
+        }
+        const cardSetupFunction = getConfirmCardSetup(isDevMode);
+        const confirmCardSetup = cardSetupFunction(stripe.confirmCardSetup);
+
+        const result = await confirmCardSetup(
+            paymentSetupIntent.client_secret,
+            {
+                payment_method: {
+                    card: billingDetails.card,
+                    billing_details: {
+                        name: billingDetails.name,
+                        address: {
+                            line1: billingDetails.address,
+                            line2: billingDetails.address2,
+                            city: billingDetails.city,
+                            state: billingDetails.state,
+                            country: getCode(billingDetails.country),
+                            postal_code: billingDetails.postalCode,
+                        },
+                    },
+                },
+            },
+        );
+
+        if (!result) {
+            return false;
+        }
+
+        const {setupIntent, error: stripeError} = result;
+
+        if (stripeError) {
+            return false;
+        }
+
+        if (setupIntent == null) {
+            return false;
+        }
+
+        if (setupIntent.status !== 'succeeded') {
+            return false;
+        }
+
+        try {
+            await Client4.confirmPaymentMethod(setupIntent.id);
+        } catch (error) {
+            return false;
+        }
+
+        return true;
+    };
+}

components/announcement_bar/cloud_announcement_bar/index.ts

@@ -12,6 +12,8 @@ import {makeGetCategory} from 'mattermost-redux/selectors/entities/preferences';
 
 import {getCurrentUser, isCurrentUserSystemAdmin} from 'mattermost-redux/selectors/entities/users';
 
+import {openModal} from 'actions/views/modals';
+
 import {GlobalState} from 'types/store';
 
 import {Preferences} from 'utils/constants';
@@ -36,6 +38,7 @@ function mapDispatchToProps(dispatch: Dispatch<GenericAction>) {
             {
                 savePreferences,
                 getStandardAnalytics,
+                openModal,
             },
             dispatch,
         ),

components/announcement_bar/cloud_announcement_bar/user_limit_announcement_bar.tsx

@@ -10,8 +10,14 @@ import {AnalyticsRow} from 'mattermost-redux/types/admin';
 import {isEmpty} from 'lodash';
 
 import {t} from 'utils/i18n';
+import PurchaseModal from 'components/purchase_modal';
 
-import {Preferences, CloudBanners, AnnouncementBarTypes} from 'utils/constants';
+import {
+    Preferences,
+    CloudBanners,
+    AnnouncementBarTypes,
+    ModalIdentifiers,
+} from 'utils/constants';
 
 import AnnouncementBar from '../default_announcement_bar';
 
@@ -25,6 +31,7 @@ type Props = {
     actions: {
         savePreferences: (userId: string, preferences: PreferenceType[]) => void;
         getStandardAnalytics: () => void;
+        openModal: (modalData: {modalId: string; dialogType: any; dialogProps?: any}) => void;
     };
 };
 
@@ -95,7 +102,12 @@ export default class UserLimitAnnouncementBar extends React.PureComponent<Props>
                 type={dismissable ? AnnouncementBarTypes.ADVISOR : AnnouncementBarTypes.CRITICAL_LIGHT}
                 showCloseButton={dismissable}
                 handleClose={this.handleClose}
-                showModal={() => {}}
+                showModal={() =>
+                    this.props.actions.openModal({
+                        modalId: ModalIdentifiers.CLOUD_PURCHASE,
+                        dialogType: PurchaseModal,
+                    })
+                }
                 modalButtonText={t('admin.billing.subscription.upgradeMattermostCloud.upgradeButton')}
                 modalButtonDefaultText={'Upgrade Mattermost Cloud'}
                 message={dismissable ? t('upgrade.cloud_banner_reached') : t('upgrade.cloud_banner_over')}

components/dropdown_input.scss

@@ -1,4 +1,5 @@
 .DropdownInput {
+    z-index: 999999;
     &.Input_container {
         margin-top: 20px;
     }
@@ -38,6 +39,7 @@
     padding: 10px 24px;
     line-height: 16px;
     cursor: pointer;
+    z-index: 999999;
 }
 
 .DropdownInput__option.selected > div {

components/dropdown_input.tsx

@@ -49,6 +49,14 @@ const IndicatorsContainer = (props: any) => {
     );
 };
 
+const Control = (props: any) => {
+    return (
+        <div className='DropdownInput__controlContainer'>
+            <components.Control {...props}/>
+        </div>
+    );
+};
+
 const Option = (props: any) => {
     return (
         <div
@@ -126,8 +134,10 @@ const DropdownInput = <T extends ValueType>(props: Props<T>) => {
                         components={{
                             IndicatorsContainer,
                             Option,
+                            Control,
                         }}
                         className={classNames('Input', className, {Input__focus: showLegend})}
+                        classNamePrefix={'DropDown'}
                         value={value}
                         onChange={onChange as any} // types are not working correctly for multiselect
                         styles={{...baseStyles, ...styles}}

components/next_steps_view/next_steps_view.scss

@@ -137,18 +137,15 @@
             background-color: var(--sidebar-text-active-border);
         }
     }
-
     .Card.complete {
         border-color: transparent;
         box-shadow: none;
         transition-property: box-shadow, border-color;
         background-color: transparent;
-
         &:hover {
             border-color: transparent;
             box-shadow: none;
         }
-
         & + .Card {
             margin-top: 12px;
             transition-property: box-shadow, border-color, margin;
@@ -175,7 +172,6 @@
                 line-height: 26px;
                 color: var(--online-indicator);
                 transition: all 0.3s ease-in-out;
-
                 &::before {
                     margin: 0;
                 }
@@ -591,7 +587,6 @@
         flex: 1 1 100%;
         padding: 0 12px;
     }
-
     .NextStepsView__nextStepsCards, .NextStepsView__download, .NextStepsView__tipsMobileMessage {
         padding: 0 12px;
     }

components/payment_form/card_image.css

@@ -0,0 +1,8 @@
+.CardImage {
+    height: auto;
+    width: auto;
+    max-height: 30px;
+    max-width: 30px;
+    margin-right: 9px;
+    margin-top: -1px;
+}

components/payment_form/card_image.tsx

@@ -0,0 +1,54 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react';
+
+import amex from 'images/cloud/cards/amex.png';
+
+import dinersclub from 'images/cloud/cards/dinersclub.png';
+import discover from 'images/cloud/cards/discover.jpg';
+import jcb from 'images/cloud/cards/jcb.png';
+import mastercard from 'images/cloud/cards/mastercard.png';
+import visa from 'images/cloud/cards/visa.jpg';
+
+import './card_image.css';
+
+type Props = {
+    brand: string;
+}
+
+export default function CardImage(props: Props) {
+    const {brand} = props;
+
+    const cardImageSrc = getCardImage(brand);
+    if (cardImageSrc) {
+        return (
+            <img
+                className='CardImage'
+                src={cardImageSrc}
+                alt={brand}
+            />
+        );
+    }
+
+    return null;
+}
+
+function getCardImage(brand: string): string {
+    switch (brand) {
+    case 'amex':
+        return amex;
+    case 'diners':
+        return dinersclub;
+    case 'discover':
+        return discover;
+    case 'jcb':
+        return jcb;
+    case 'mastercard':
+        return mastercard;
+    case 'visa':
+        return visa;
+    }
+
+    return '';
+}

components/payment_form/card_input.css

@@ -0,0 +1,38 @@
+.StripeElement {
+    font-family: 'Open Sans';
+    font-size: 14px;
+    position: relative;
+    padding-top: 8px;
+    padding-left: 12px;
+    padding-bottom: 2px !important;
+    width: 100%;
+    height: 100%;
+    font-size: 14px;
+    line-height: 23px;
+    color: var(--center-channel-color);
+    background-color: var(--center-channel-bg);
+    background-image: none;
+    border-radius: 4px;
+    outline: none;
+    box-shadow: none;
+}
+
+.StripeElement--invalid {
+    color: var(--error-text);
+    icon-color: var(--error-text);
+}
+
+.StripeElement::placeholder {
+    color: rgba(var(--center-channel-color-rgb), 0.72);
+    opacity: 0.5;
+    font-size: 14px;
+}
+
+.StripeElement:focus::placeholder {
+    color: 'transparent';
+}
+
+.StripeElement:focus {
+    border-color: transparent;
+    box-shadow: 0 0 0 2px var(--button-bg);
+}