Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Add dunning banner #3114

Merged
merged 3 commits into from
Dec 8, 2023
Merged

feat: Add dunning banner #3114

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ebce10d
feat: Add dunning banner
novakzaballa Dec 7, 2023
bd0695a
Rename flag
novakzaballa Dec 7, 2023
3ccc4d7
Update frontend/web/components/ButterBar.js
kyle-ssg Dec 8, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 6 additions & 1 deletion frontend/web/components/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -478,7 +478,12 @@ const App = class extends Component {
)}
{isMobile && pageHasAside && asideIsVisible ? null : (
<div>
<ButterBar />
<ButterBar
billingStatus={
AccountStore.getOrganisation()?.subscription
.billing_status
}
/>
{projectNotLoaded ? (
<div className='text-center'>
<Loader />
Expand Down
15 changes: 14 additions & 1 deletion frontend/web/components/ButterBar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import React, { Component } from 'react'
import ConfigProvider from 'common/providers/ConfigProvider'
import ProjectStore from 'common/stores/project-store'
import ReactMarkdown from 'react-markdown'
import Icon from './Icon'

class ButterBar extends Component {
static contextTypes = {
Expand All @@ -14,6 +15,7 @@ class ButterBar extends Component {
}

render() {
const { billingStatus } = this.props
const matches = document.location.href.match(/\/environment\/([^/]*)/)
const environment = matches && matches[1]
if (environment) {
Expand All @@ -35,7 +37,8 @@ class ButterBar extends Component {
return (
<>
{Utils.getFlagsmithValue('butter_bar') &&
!Utils.getFlagsmithHasFeature('read_only_mode') && (
!Utils.getFlagsmithHasFeature('read_only_mode') &&
(!billingStatus || billingStatus === 'ACTIVE') && (
<ReactMarkdown className='butter-bar'>
{Utils.getFlagsmithValue('butter_bar')}
</ReactMarkdown>
Expand All @@ -46,6 +49,16 @@ class ButterBar extends Component {
<Link to='/organisation-settings'>upgrade your plan</Link>.
</div>
)}
{Utils.getFlagsmithHasFeature('show_dunning_banner') &&
billingStatus === 'DUNNING' && (
<div className='alert-butter-bar'>
<span className='icon-alert mr-2'>
<Icon name='warning' fill='#fff' />
</span>
There was a problem with your paid subscription. Please check your payment
method to keep your subscription active.
</div>
)}
</>
)
}
Expand Down
2 changes: 1 addition & 1 deletion frontend/web/components/Icon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -646,7 +646,7 @@ const Icon: FC<IconType> = ({ fill, fill2, height, name, width, ...rest }) => {
fillRule='evenodd'
clipRule='evenodd'
d='M14.1667 13.1667C14.1667 13.8107 13.644 14.3333 13 14.3333C12.356 14.3333 11.8334 13.8107 11.8334 13.1667V8.50001C11.8334 7.85601 12.356 7.33334 13 7.33334C13.644 7.33334 14.1667 7.85601 14.1667 8.50001V13.1667ZM13 17.8333C12.356 17.8333 11.8334 17.3107 11.8334 16.6667C11.8334 16.0227 12.356 15.5 13 15.5C13.644 15.5 14.1667 16.0227 14.1667 16.6667C14.1667 17.3107 13.644 17.8333 13 17.8333ZM25.3212 17.0202L16.3705 2.18134C15.6717 1.02401 14.4117 0.333344 13 0.333344C11.5884 0.333344 10.3284 1.02401 9.62953 2.18134L0.67886 17.0202C0.0161932 18.1203 -0.00364009 19.4433 0.62636 20.5587C1.30186 21.7568 2.61436 22.5 4.04936 22.5H21.9507C23.3857 22.5 24.6982 21.7568 25.3737 20.5587C26.0037 19.4433 25.9839 18.1203 25.3212 17.0202Z'
fill='#FF9F43'
fill={fill || '#FF9F43'}
/>
</svg>
)
Expand Down
15 changes: 15 additions & 0 deletions frontend/web/styles/styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,21 @@
background-color: $butter-bar-bg-dark;
color: $header-color-dark;
}

.alert-butter-bar{
background-color: $bt-brand-red;
color: $header-color-dark;
text-align: center;
line-height: 44px;
position: sticky;
top: 0;
z-index: 1;
>* { // since the markdown can be <p we need to reset any styling
display: inline-block;
margin: 0;
}
}

bold, strong {
font-weight: bold;
}
Expand Down