From f5a7eed20a24f5ef0c642e48030ed74b168dd41f Mon Sep 17 00:00:00 2001
From: Kyle Johnson <kyle@solidstategroup.com>
Date: Wed, 10 Jul 2024 14:56:51 +0100
Subject: [PATCH] fix: annual plan ids and refreshing (#4323)

---
 frontend/env/project_dev.js               |  4 +++
 frontend/env/project_prod.js              |  4 +++
 frontend/web/components/modals/Payment.js | 38 ++++++++++++++---------
 3 files changed, 32 insertions(+), 14 deletions(-)

diff --git a/frontend/env/project_dev.js b/frontend/env/project_dev.js
index 23f61a13ecb8..fee495078741 100644
--- a/frontend/env/project_dev.js
+++ b/frontend/env/project_dev.js
@@ -17,5 +17,9 @@ module.exports = global.Project = {
   // This is used for Sentry tracking
   maintenance: false,
   useSecureCookies: true,
+  plans: {
+    scaleUp: { annual: 'scale-up-annual-v2', monthly: 'scale-up-v2' },
+    startup: { annual: 'startup-annual-v2', monthly: 'startup-v2' },
+  },
   ...(globalThis.projectOverrides || {}),
 }
diff --git a/frontend/env/project_prod.js b/frontend/env/project_prod.js
index d6052afb3b23..d90a0c314444 100644
--- a/frontend/env/project_prod.js
+++ b/frontend/env/project_prod.js
@@ -23,5 +23,9 @@ module.exports = global.Project = {
   // This is used for Sentry tracking
   maintenance: false,
   useSecureCookies: true,
+  plans: {
+    scaleUp: { annual: 'scale-up-12-months-v2', monthly: 'scale-up-v2' },
+    startup: { annual: 'start-up-12-months-v2', monthly: 'startup-v2' },
+  },
   ...(globalThis.projectOverrides || {}),
 }
diff --git a/frontend/web/components/modals/Payment.js b/frontend/web/components/modals/Payment.js
index 6a9be59bef6c..3503c1c42959 100644
--- a/frontend/web/components/modals/Payment.js
+++ b/frontend/web/components/modals/Payment.js
@@ -161,23 +161,28 @@ const Payment = class extends Component {
                           Billed Monthly
                         </div>
                         {!viewOnly ? (
-                          this.state.yearly ? (
+                          <>
                             <PaymentButton
-                              data-cb-plan-id='startup-annual-v2'
-                              className='btn btn-primary full-width mt-3'
+                              data-cb-plan-id={Project.plans.startup.annual}
+                              className={classNames(
+                                'btn btn-primary full-width mt-3',
+                                { 'd-none': !this.state.yearly },
+                              )}
                               isDisableAccount={this.props.isDisableAccountText}
                             >
                               {plan.includes('startup') ? 'Purchased' : 'Buy'}
                             </PaymentButton>
-                          ) : (
                             <PaymentButton
-                              data-cb-plan-id='startup-v2'
-                              className='btn btn-primary full-width mt-3'
+                              data-cb-plan-id={Project.plans.startup.monthly}
+                              className={classNames(
+                                'btn btn-primary full-width mt-3',
+                                { 'd-none': this.state.yearly },
+                              )}
                               isDisableAccount={this.props.isDisableAccountText}
                             >
                               {plan.includes('startup') ? 'Purchased' : 'Buy'}
                             </PaymentButton>
-                          )
+                          </>
                         ) : null}
                       </div>
                       <div className='panel-footer mt-3'>
@@ -380,23 +385,28 @@ const Payment = class extends Component {
                           Billed Monthly
                         </div>
                         {!viewOnly ? (
-                          this.state.yearly ? (
+                          <>
                             <PaymentButton
-                              data-cb-plan-id='scale-up-annual-v2'
-                              className='btn btn-success full-width mt-3'
+                              data-cb-plan-id={Project.plans.scaleUp.annual}
+                              className={classNames(
+                                'btn btn-success full-width mt-3',
+                                { 'd-none': !this.state.yearly },
+                              )}
                               isDisableAccount={this.props.isDisableAccountText}
                             >
                               {plan.includes('scale-up') ? 'Purchased' : 'Buy'}
                             </PaymentButton>
-                          ) : (
                             <PaymentButton
-                              data-cb-plan-id='scale-up-v2'
-                              className='btn btn-success full-width mt-3'
+                              data-cb-plan-id={Project.plans.scaleUp.monthly}
+                              className={classNames(
+                                'btn btn-success full-width mt-3',
+                                { 'd-none': this.state.yearly },
+                              )}
                               isDisableAccount={this.props.isDisableAccountText}
                             >
                               {plan.includes('scale-up') ? 'Purchased' : 'Buy'}
                             </PaymentButton>
-                          )
+                          </>
                         ) : null}
                       </div>
                       <div className='panel-footer mt-3'>