From d1a53544c1889fd7453ce8e950ee152a7e9a1602 Mon Sep 17 00:00:00 2001
From: David Nguyen <davidngu28@gmail.com>
Date: Thu, 27 Jun 2024 15:36:33 +1000
Subject: [PATCH] fix: enable yearly team pricing (#1199)

## Description

**Pending testing on preview**

Enable yearly team pricing during checkout.

## Changes Made

- Enable selecting yearly team pricing during checkout
- Update pricing on marketing to $480 for yearly team plan

## Testing Performed

- Stripe simulations

Pending manual testing


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

- **New Features**
- Updated the savings message in the pricing table to reflect new
savings amounts.
  - Adjusted yearly pricing from $500 to $480.
  - Modified user addition costs based on subscription periods.

- **Improvements**
- Simplified button text in the Create Team Checkout Dialog to
consistently display "Checkout".

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../src/components/(marketing)/pricing-table.tsx          | 8 +++++---
 .../(teams)/dialogs/create-team-checkout-dialog.tsx       | 3 +--
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/apps/marketing/src/components/(marketing)/pricing-table.tsx b/apps/marketing/src/components/(marketing)/pricing-table.tsx
index b36c4d7bf..892e031e6 100644
--- a/apps/marketing/src/components/(marketing)/pricing-table.tsx
+++ b/apps/marketing/src/components/(marketing)/pricing-table.tsx
@@ -58,7 +58,7 @@ export const PricingTable = ({ className, ...props }: PricingTableProps) => {
           >
             Yearly
             <div className="bg-muted text-foreground block rounded-full px-2 py-0.5 text-xs">
-              Save $60 or $100
+              Save $60 or $120
             </div>
             {period === 'YEARLY' && (
               <motion.div
@@ -143,7 +143,7 @@ export const PricingTable = ({ className, ...props }: PricingTableProps) => {
           <div className="text-primary mt-2.5 text-xl font-medium">
             <AnimatePresence mode="wait">
               {period === 'MONTHLY' && <motion.div layoutId="pricingTeams">$50</motion.div>}
-              {period === 'YEARLY' && <motion.div layoutId="pricingTeams">$500</motion.div>}
+              {period === 'YEARLY' && <motion.div layoutId="pricingTeams">$480</motion.div>}
             </AnimatePresence>
           </div>
 
@@ -166,7 +166,9 @@ export const PricingTable = ({ className, ...props }: PricingTableProps) => {
             <p className="text-foreground py-4">Email and Discord Support</p>
             <p className="text-foreground py-4 font-medium">Team Inbox</p>
             <p className="text-foreground py-4">5 Users Included</p>
-            <p className="text-foreground py-4">Add More Users for $10/ mo.</p>
+            <p className="text-foreground py-4">
+              Add More Users for {period === 'MONTHLY' ? '$10/ mo.' : '$96/ yr.'}
+            </p>
           </div>
         </div>
       </div>
diff --git a/apps/web/src/components/(teams)/dialogs/create-team-checkout-dialog.tsx b/apps/web/src/components/(teams)/dialogs/create-team-checkout-dialog.tsx
index f6ca99bbd..f7ee8ca51 100644
--- a/apps/web/src/components/(teams)/dialogs/create-team-checkout-dialog.tsx
+++ b/apps/web/src/components/(teams)/dialogs/create-team-checkout-dialog.tsx
@@ -158,7 +158,6 @@ export const CreateTeamCheckoutDialog = ({
 
               <Button
                 type="submit"
-                disabled={selectedPrice.interval === 'yearly'}
                 loading={isCreatingCheckout}
                 onClick={async () =>
                   createCheckout({
@@ -167,7 +166,7 @@ export const CreateTeamCheckoutDialog = ({
                   })
                 }
               >
-                {selectedPrice.interval === 'monthly' ? 'Checkout' : 'Coming soon'}
+                Checkout
               </Button>
             </DialogFooter>
           </div>