Open payment modal if a plan was preselected

Flagsmith · Jun 5, 2024 · 802c713 · 802c713
1 parent dad3041
commit 802c713
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 20 deletions.
diff --git a/frontend/web/components/modals/Payment.js b/frontend/web/components/modals/Payment.js
@@ -6,6 +6,7 @@ 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'
 
 const PaymentButton = (props) => {
   const activeSubscription = AccountStore.getOrganisationPlan(
@@ -744,29 +745,45 @@ 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)
+    })()
+    // API.setCookie('plan', null)
+  }
+  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} />
 )
diff --git a/frontend/web/components/pages/FeaturesPage.js b/frontend/web/components/pages/FeaturesPage.js
@@ -23,6 +23,9 @@ import EnvironmentDocumentCodeHelp from 'components/EnvironmentDocumentCodeHelp'
 import TableOwnerFilter from 'components/tables/TableOwnerFilter'
 import TableGroupsFilter from 'components/tables/TableGroupsFilter'
 import TableValueFilter from 'components/tables/TableValueFilter'
+import Utils from 'common/utils/utils'
+import makeAsyncScriptLoader from 'react-async-script'
+import { onPaymentLoad } from 'components/modals/Payment'
 
 const FeaturesPage = class extends Component {
   static displayName = 'FeaturesPage'
@@ -711,5 +714,14 @@ const FeaturesPage = class extends Component {
 }
 
 FeaturesPage.propTypes = {}
+const InnerComponent = ConfigProvider(FeaturesPage)
 
-module.exports = ConfigProvider(FeaturesPage)
+const WrappedPayment = makeAsyncScriptLoader(
+  'https://js.chargebee.com/v2/chargebee.js',
+  {
+    removeOnUnmount: true,
+  },
+)(InnerComponent)
+export default (props) => (
+  <WrappedPayment {...props} asyncScriptOnLoad={onPaymentLoad} />
+)
diff --git a/frontend/web/components/pages/HomePage.js b/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