feat: Open payment modal if a plan was preselected, add annual plans

frontend/web/components/ProjectsPage.tsx

@@ -2,6 +2,8 @@ import React, { FC } from 'react'
 import ProjectManageWidget from './ProjectManageWidget'
 import OrganisationProvider from 'common/providers/OrganisationProvider'
 import ConfigProvider from 'common/providers/ConfigProvider'
+import makeAsyncScriptLoader from 'react-async-script'
+import { onPaymentLoad } from './modals/Payment'
 
 type ProjectsPageType = {
   match: {
@@ -24,4 +26,13 @@ const ProjectsPage: FC<ProjectsPageType> = ({ match }) => {
   )
 }
 
-export default ConfigProvider(ProjectsPage)
+const InnerComponent = ConfigProvider(ProjectsPage)
+const WrappedPayment = makeAsyncScriptLoader(
+  'https://js.chargebee.com/v2/chargebee.js',
+  {
+    removeOnUnmount: true,
+  },
+)(InnerComponent)
+export default (props) => (
+  <WrappedPayment {...props} asyncScriptOnLoad={onPaymentLoad} />
+)

frontend/web/components/modals/Payment.js

@@ -6,6 +6,10 @@ import Constants from 'common/constants'
 import InfoMessage from 'components/InfoMessage'
 import Icon from 'components/Icon'
 import firstpromoter from 'project/firstPromoter'
+import Utils from 'common/utils/utils'
+import AccountProvider from 'common/providers/AccountProvider'
+import classNames from 'classnames'
+import Switch from 'components/Switch'
 
 const PaymentButton = (props) => {
   const activeSubscription = AccountStore.getOrganisationPlan(
@@ -58,7 +62,9 @@ const Payment = class extends Component {
 
   constructor(props, context) {
     super(props, context)
-    this.state = {}
+    this.state = {
+      yearly: true,
+    }
   }
 
   componentDidMount = () => {
@@ -98,7 +104,7 @@ const Payment = class extends Component {
               ''
             return (
               <div className='col-md-12'>
-                <Row space className='mb-4'>
+                <Row space className='mb-2'>
                   <h5>Manage Payment Plan</h5>
                   {this.props.isDisableAccountText && (
                     <Row>
@@ -115,6 +121,28 @@ const Payment = class extends Component {
                     </Row>
                   )}
                 </Row>
+                <div className='d-flex mb-4 font-weight-medium justify-content-center align-items-center gap-2'>
+                  <h5
+                    className={classNames('mb-0', {
+                      'text-muted': !this.state.yearly,
+                    })}
+                  >
+                    Pay Yearly (Save 10%)
+                  </h5>
+                  <Switch
+                    checked={!this.state.yearly}
+                    onChange={() => {
+                      this.setState({ yearly: !this.state.yearly })
+                    }}
+                  />
+                  <h5
+                    className={classNames('mb-0', {
+                      'text-muted': this.state.yearly,
+                    })}
+                  >
+                    Pay Monthly
+                  </h5>
+                </div>
                 <Row className='pricing-container align-start'>
                   <Flex className='pricing-panel p-2'>
                     <div className='panel panel-default'>
@@ -744,29 +772,44 @@ const Payment = class extends Component {
   }
 }
 
+Payment.propTypes = {}
+export const onPaymentLoad = () => {
+  const planId = API.getCookie('plan')
+  let link
+  if (planId && Utils.getFlagsmithHasFeature('payments_enabled')) {
+    ;(function () {
+      // Create a link element with data-cb-plan-id attribute
+      link = document.createElement('a')
+      link.setAttribute('data-cb-type', 'checkout')
+      link.setAttribute('data-cb-plan-id', planId)
+      link.setAttribute('href', 'javascript:void(0)')
+      // Append the link to the body
+      document.body.appendChild(link)
+    })()
+  }
+  Chargebee.init({
+    site: Project.chargebee.site,
+  })
+  Chargebee.registerAgain()
+  firstpromoter()
+  Chargebee.getInstance().setCheckoutCallbacks(() => ({
+    success: (hostedPageId) => {
+      AppActions.updateSubscription(hostedPageId)
+    },
+  }))
+  if (link) {
+    link.click()
+    document.body.removeChild(link)
+    API.setCookie('plan', null)
+  }
+}
+
 const WrappedPayment = makeAsyncScriptLoader(
   'https://js.chargebee.com/v2/chargebee.js',
   {
     removeOnUnmount: true,
   },
 )(ConfigProvider(Payment))
-
-Payment.propTypes = {}
-
-module.exports = (props) => (
-  <WrappedPayment
-    {...props}
-    asyncScriptOnLoad={() => {
-      Chargebee.init({
-        site: Project.chargebee.site,
-      })
-      Chargebee.registerAgain()
-      firstpromoter()
-      Chargebee.getInstance().setCheckoutCallbacks(() => ({
-        success: (hostedPageId) => {
-          AppActions.updateSubscription(hostedPageId)
-        },
-      }))
-    }}
-  />
+export default (props) => (
+  <WrappedPayment {...props} asyncScriptOnLoad={onPaymentLoad} />
 )

frontend/web/components/pages/HomePage.js

@@ -65,6 +65,10 @@ const HomePage = class extends React.Component {
   }
 
   componentDidMount() {
+    const plan = Utils.fromParam().plan
+    if (plan) {
+      API.setCookie('plan', plan)
+    }
     if (
       Project.albacross &&
       this.props.location.pathname.indexOf('signup') !== -1