fix: annual plan ids and refreshing (#4323)

Flagsmith · Jul 10, 2024 · f5a7eed · f5a7eed
1 parent 103a94f
commit f5a7eed
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 14 deletions.
diff --git 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
@@ -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
@@ -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'>