feat: Add dunning banner (#3114)

Co-authored-by: Kyle Johnson <[email protected]> Co-authored-by: Zach Aysan <[email protected]>
Flagsmith · Dec 8, 2023 · ad26100 · ad26100
1 parent 3794e80
commit ad26100
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 3 deletions.
diff --git a/frontend/web/components/App.js b/frontend/web/components/App.js
@@ -475,7 +475,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 />

diff --git a/frontend/web/components/ButterBar.js b/frontend/web/components/ButterBar.js
@@ -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 = {
@@ -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) {
@@ -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>
@@ -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>
+          )}
       </>
     )
   }

diff --git a/frontend/web/components/Icon.tsx b/frontend/web/components/Icon.tsx
@@ -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>
       )

diff --git a/frontend/web/styles/styles.scss b/frontend/web/styles/styles.scss
@@ -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;
 }