forked from mattermost/mattermost-webapp
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[MM-28222][MM-28215] Payment Warnings (mattermost#6908)
* [MM-28222][MM-28215] Payment Warnings * PR feedback and a small bit of refactoring Co-authored-by: Mattermod <[email protected]>
- Loading branch information
1 parent
9fba9a9
commit 986ec23
Showing
9 changed files
with
301 additions
and
7 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| .PaymentInfo .AlertBanner { | ||
| margin-bottom: 20px; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
45 changes: 45 additions & 0 deletions
45
components/announcement_bar/payment_announcement_bar/index.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
| // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. | ||
| // See LICENSE.txt for license information. | ||
|
|
||
| import {connect} from 'react-redux'; | ||
| import {bindActionCreators, Dispatch} from 'redux'; | ||
|
|
||
| import {savePreferences} from 'mattermost-redux/actions/preferences'; | ||
| import {getLicense} from 'mattermost-redux/selectors/entities/general'; | ||
| import {GenericAction} from 'mattermost-redux/types/actions'; | ||
| import {getStandardAnalytics} from 'mattermost-redux/actions/admin'; | ||
| import {getCloudSubscription, getCloudCustomer} from 'mattermost-redux/actions/cloud'; | ||
|
|
||
| import {isCurrentUserSystemAdmin} from 'mattermost-redux/selectors/entities/users'; | ||
|
|
||
| import {openModal} from 'actions/views/modals'; | ||
|
|
||
| import {GlobalState} from 'types/store'; | ||
|
|
||
| import PaymentAnnouncementBar from './payment_announcement_bar'; | ||
|
|
||
| function mapStateToProps(state: GlobalState) { | ||
| return { | ||
| userIsAdmin: isCurrentUserSystemAdmin(state), | ||
| isCloud: getLicense(state).Cloud === 'true', | ||
| subscription: state.entities.cloud.subscription, | ||
| customer: state.entities.cloud.customer, | ||
| }; | ||
| } | ||
|
|
||
| function mapDispatchToProps(dispatch: Dispatch<GenericAction>) { | ||
| return { | ||
| actions: bindActionCreators( | ||
| { | ||
| savePreferences, | ||
| getStandardAnalytics, | ||
| openModal, | ||
| getCloudSubscription, | ||
| getCloudCustomer, | ||
| }, | ||
| dispatch, | ||
| ), | ||
| }; | ||
| } | ||
|
|
||
| export default connect(mapStateToProps, mapDispatchToProps)(PaymentAnnouncementBar); |
96 changes: 96 additions & 0 deletions
96
components/announcement_bar/payment_announcement_bar/payment_announcement_bar.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,96 @@ | ||
| // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. | ||
| // See LICENSE.txt for license information. | ||
|
|
||
| import React from 'react'; | ||
|
|
||
| import {CloudCustomer, Subscription} from 'mattermost-redux/types/cloud'; | ||
| import {isEmpty} from 'lodash'; | ||
|
|
||
| import {browserHistory} from 'utils/browser_history'; | ||
| import {isCustomerCardExpired} from 'utils/cloud_utils'; | ||
| import {AnnouncementBarTypes} from 'utils/constants'; | ||
| import {t} from 'utils/i18n'; | ||
|
|
||
| import AnnouncementBar from '../default_announcement_bar'; | ||
|
|
||
| type Props = { | ||
| userIsAdmin: boolean; | ||
| isCloud: boolean; | ||
| subscription?: Subscription; | ||
| customer?: CloudCustomer; | ||
| actions: { | ||
| getCloudSubscription: () => void; | ||
| getCloudCustomer: () => void; | ||
| }; | ||
| }; | ||
|
|
||
| export default class PaymentAnnouncementBar extends React.PureComponent<Props> { | ||
| async componentDidMount() { | ||
| if (isEmpty(this.props.subscription)) { | ||
| await this.props.actions.getCloudSubscription(); | ||
| } | ||
|
|
||
| if (isEmpty(this.props.customer)) { | ||
| await this.props.actions.getCloudCustomer(); | ||
| } | ||
| } | ||
|
|
||
| isMostRecentPaymentFailed = () => { | ||
| return this.props.subscription?.last_invoice?.status === 'failed'; | ||
| } | ||
|
|
||
| shouldShowBanner = () => { | ||
| const {userIsAdmin, isCloud, subscription} = this.props; | ||
|
|
||
| // Prevents banner flashes if the subscription hasn't been loaded yet | ||
| if (subscription === null) { | ||
| return false; | ||
| } | ||
|
|
||
| if (subscription?.is_paid_tier !== 'true') { | ||
| return false; | ||
| } | ||
|
|
||
| if (!isCloud) { | ||
| return false; | ||
| } | ||
|
|
||
| if (!userIsAdmin) { | ||
| return false; | ||
| } | ||
|
|
||
| if (!isCustomerCardExpired(this.props.customer) && !this.isMostRecentPaymentFailed()) { | ||
| return false; | ||
| } | ||
|
|
||
| return true; | ||
| } | ||
|
|
||
| updatePaymentInfo = () => { | ||
| browserHistory.push('/admin_console/billing/payment_info'); | ||
| } | ||
|
|
||
| render() { | ||
| if (isEmpty(this.props.customer) || isEmpty(this.props.subscription)) { | ||
| return null; | ||
| } | ||
|
|
||
| if (!this.shouldShowBanner()) { | ||
| return null; | ||
| } | ||
|
|
||
| return ( | ||
| <AnnouncementBar | ||
| type={AnnouncementBarTypes.CRITICAL_LIGHT} | ||
| showCloseButton={false} | ||
| showModal={this.updatePaymentInfo} | ||
| modalButtonText={t('admin.billing.subscription.updatePaymentInfo')} | ||
| modalButtonDefaultText={'Update payment info'} | ||
| message={this.isMostRecentPaymentFailed() ? t('admin.billing.subscription.mostRecentPaymentFailed') : t('admin.billing.subscription.creditCardExpired')} | ||
| showLinkAsButton={true} | ||
| isTallBanner={true} | ||
| /> | ||
|
|
||
| ); | ||
| } | ||
| } |
Oops, something went wrong.