[MM-27142] In-Web-App purchase of Mattermost Cloud (#6583)

* [MM-26468][MM-26483] Progress Bar Common Component/Sidebar Next Steps Component (#5865) * [MM-26483] Progress bar common component and PoC in the sidebar * Styling for the sidebar element and some tests * Added translations * Snapshot update * Style changes * Use same border design as channels * [MM-26465] Background and general layout for cloud onboarding (#5823) * WIP * WIP * [MM-26465] Background and general layout for cloud onboarding * Mobile view, lint and type fixes, added a test file for later use * More test fixes * UX feedback * Replaced dumb comment with useful one * Turn off graphic at 1020px * Lint fix * Update copy * PR feedback Co-authored-by: Mattermod <mattermod@users.noreply.github.com> * [MM-26480] Card/Accordion Common Component (#5861) * WIP * WIP * [MM-26465] Background and general layout for cloud onboarding * Mobile view, lint and type fixes, added a test file for later use * More test fixes * UX feedback * Replaced dumb comment with useful one * Turn off graphic at 1020px * WIP * Initial card style * Collapse functionality (no animation) * WIP * Rest of accordion common component and some animation * Lint, type and test fixes * Updated snapshot * Reduce nesting * Merge'd * PR feedback * Fix box-shadow on collapsed state * [MM-26470] Base Next Step Wizard Controller and Styling (#5893) * WIP * WIP * [MM-26465] Background and general layout for cloud onboarding * Mobile view, lint and type fixes, added a test file for later use * More test fixes * UX feedback * Replaced dumb comment with useful one * Turn off graphic at 1020px * WIP * Initial card style * Collapse functionality (no animation) * WIP * Rest of accordion common component and some animation * Lint, type and test fixes * Updated snapshot * Reduce nesting * WIP - Wiring for step wizard * Skip getting started link, hook for final page * Moved steps into its own constants file, type and test fixes * Shifted around the screen changing and added final screen placeholder * Translations and wizard navigation button styling * Pick starting step based on which are finished, button styling fixes * Allow for getting out of next steps view by switching channels * PR feedback * PR feedback * blank * Change style of complete card header to be more like the regular one * Fixed background on complete step * Merge'd * PR feedback * PR feedback * Removed translation * Fixed box shadow transition on card * Removed duplicate logic * PR feedback * PR feedback * Fixed hover state on completed cards * re-add margin on complete state * [MM-26466] Close Next Steps Modal and functionality (#5995) * Hooked up the sidebar next steps bar and some fixes * Integration of state into app for next steps view, close next steps view modal preliminary * Styling and help arrow for modal * Missed a translation * PR feedback * Center the next steps modal * PR feedback * Translation fix * [MM-27164] Picture Selector Common Component (#5973) * WIP * WIP * [MM-26465] Background and general layout for cloud onboarding * Mobile view, lint and type fixes, added a test file for later use * More test fixes * UX feedback * Replaced dumb comment with useful one * Turn off graphic at 1020px * WIP * Initial card style * Collapse functionality (no animation) * WIP * Rest of accordion common component and some animation * Lint, type and test fixes * Updated snapshot * Reduce nesting * WIP - Wiring for step wizard * Skip getting started link, hook for final page * Moved steps into its own constants file, type and test fixes * Shifted around the screen changing and added final screen placeholder * Translations and wizard navigation button styling * Pick starting step based on which are finished, button styling fixes * Allow for getting out of next steps view by switching channels * PR feedback * PR feedback * blank * Change style of complete card header to be more like the regular one * Fixed background on complete step * Merge'd * PR feedback * PR feedback * Removed translation * Fixed box shadow transition on card * Removed duplicate logic * WIP * Functional component that works * Styling and a couple tweaks * A few tests * Snapshots * Type and i18n fixes * PR feedback and test fixes * Added button hover states * PR feedback * Blur select button on select image * Blur on click, not on select image * Update components/picture_selector.tsx Co-authored-by: Nev Angelova <nevyana.angelova@mattermost.com> Co-authored-by: Nev Angelova <nevyana.angelova@mattermost.com> * [MM-26482] Textbox Common Component for Cloud Onboarding (#5904) * WIP * WIP * [MM-26465] Background and general layout for cloud onboarding * Mobile view, lint and type fixes, added a test file for later use * More test fixes * UX feedback * Replaced dumb comment with useful one * Turn off graphic at 1020px * WIP * Initial card style * Collapse functionality (no animation) * WIP * Rest of accordion common component and some animation * Lint, type and test fixes * Updated snapshot * Reduce nesting * WIP - Wiring for step wizard * Skip getting started link, hook for final page * Moved steps into its own constants file, type and test fixes * Shifted around the screen changing and added final screen placeholder * Translations and wizard navigation button styling * Pick starting step based on which are finished, button styling fixes * Allow for getting out of next steps view by switching channels * PR feedback * WIP * [MM-26472] Textbox Common Component for Cloud Onboarding * Specific styling for the Cloud Onboarding components * Added info component and some other styling * Fixed the error styling * Fixed most of the shifting in the textbox * Lint fix * PR feedback * blank * PR feedback * Change style of complete card header to be more like the regular one * Fixed background on complete step * Merge'd * PR feedback * PR feedback * Removed translation * PR feedback * Use box shadow instead of border for changing text input * Improved CSS from Asaad * Removed inner border when focused/error state * Removed unnecessary commented code * Merge'd * Switch to proper BEM * [MM-26469] Complete Profile Step (#6077) * [MM-26469] Complete Profile Step * Lint fix * [MM-26473] Tips and Next Steps screen (#6020) * Screen transitions for loading screen and final screen * Transition screen * Fixed APNG issue * Style for desktop and mobile * Fixed styling * More fixes * Functionality and test fixes * Dev PR feedback * UX PR feedback * UX feedback * Merge'd Co-authored-by: Mattermod <mattermod@users.noreply.github.com> * [MM-26471] Team Profile Setup step (#6083) * [MM-26471] Team Profile Setup step * Translation fix * PR feedback * Fixed an issue with an older version of the styles * Removed commented code * WIP * WIP * Final screens WIP * WIP * Lot's of CSS fixes, some SVG's added, general cleanup * Adding translations all over * Have the user_limit_modal component open the PurchaseModal when upgrade button is clicked * merge master (banners), hook up announcement banner 'Upgrade Mattermost Cloud' button * Fix issue with optional subtitle prop in IconMessage * Fix linter * Fix i18n * Fix a bunch of types * Fix country sort definitions * fix most type issues * Fix flow * Fix lint * Fix isDevMode * Fix lint * Attempt at fixing error with payment processing * fix weird issue with padding * remove main menu item * Few changes for MR review * Theme changes * Appease the pipeline gods * some fixes * Fixing card input typescript issue * First batch of CSS fixes * Fix CSS on progress and success screens * Update redux, fix tsc * Fix pipeline * Fix placeholder text colour * fix credit card entry error state * Some changes * One more change * Fixed one issue * Some more fixes * Dropdown styling * Integrate state/province selector with Devin's common component * Fix pipeline * fix i18n * Add types/cloud/sku, remove the customer type in favour of mattermost-redux versiong * Delete customer.ts * Couple UX fixes * One more fix * Adding lower right blue dots * Remove comment * Update components/payment_form/card_input.css Co-authored-by: Devin Binnie <52460000+devinbinnie@users.noreply.github.com> * Update components/payment_form/payment_form.scss Co-authored-by: Devin Binnie <52460000+devinbinnie@users.noreply.github.com> * Bunch of changes for PR * More code changes * Remove debug logs * Changes for PR review * Fix i18n * Fixes for PR * Localize * Fixes for PR Co-authored-by: Devin Binnie <52460000+devinbinnie@users.noreply.github.com> Co-authored-by: Mattermod <mattermod@users.noreply.github.com> Co-authored-by: Devin Binnie <devin.binnie@mattermost.com> Co-authored-by: Nev Angelova <nevyana.angelova@mattermost.com> Co-authored-by: marianunez <maria.nunez@mattermost.com>
mattermost · Oct 23, 2020 · f0da698 · f0da698
1 parent 94b2634
commit f0da698
Show file tree

Hide file tree

Showing 51 changed files with 2,632 additions and 18 deletions.
diff --git a/actions/cloud.tsx b/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;
+    };
+}
diff --git a/components/announcement_bar/cloud_announcement_bar/index.ts b/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,
         ),

diff --git a/components/announcement_bar/cloud_announcement_bar/user_limit_announcement_bar.tsx b/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')}

diff --git a/components/dropdown_input.scss b/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 {

diff --git a/components/dropdown_input.tsx b/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}}

diff --git a/components/next_steps_view/next_steps_view.scss b/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;
     }

diff --git a/components/payment_form/card_image.css b/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;
+}
diff --git a/components/payment_form/card_image.tsx b/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 '';
+}
diff --git a/components/payment_form/card_input.css b/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);
+}