feat: add variant ids to new subscription plans

packages/webapp/src/constants/subscriptionModels.tsx

@@ -14,6 +14,8 @@ interface SubscriptionPlan {
   monthlyPriceLabel: string;
   annuallyPrice: string;
   annuallyPriceLabel: string;
+  monthlyVariantId: string;
+  annuallyVariantId: string;
 }
 
 export const SubscriptionPlans = [
@@ -39,6 +41,8 @@ export const SubscriptionPlans = [
     monthlyPriceLabel: 'Per month',
     annuallyPrice: '$7.5',
     annuallyPriceLabel: 'Per month',
+    monthlyVariantId: '446152',
+    annuallyVariantId: '446153',
   },
   {
     name: 'Capital Essential',
@@ -57,6 +61,8 @@ export const SubscriptionPlans = [
     monthlyPriceLabel: 'Per month',
     annuallyPrice: '$15',
     annuallyPriceLabel: 'Per month',
+    monthlyVariantId: '446165',
+    annuallyVariantId: '446164',
   },
   {
     name: 'Capital Plus',
@@ -74,6 +80,8 @@ export const SubscriptionPlans = [
     annuallyPrice: '$18',
     annuallyPriceLabel: 'Per month',
     featured: true,
+    monthlyVariantId: '446165',
+    annuallyVariantId: '446164',
   },
   {
     name: 'Capital Big',
@@ -88,5 +96,7 @@ export const SubscriptionPlans = [
     monthlyPriceLabel: 'Per month',
     annuallyPrice: '$30',
     annuallyPriceLabel: 'Per month',
+    monthlyVariantId: '446167',
+    annuallyVariantId: '446168',
   },
 ] as SubscriptionPlan[];

packages/webapp/src/containers/Setup/SetupSubscription/SubscriptionPlan.tsx

@@ -27,6 +27,8 @@ interface SubscriptionPricingProps {
   monthlyPriceLabel: string;
   annuallyPrice: string;
   annuallyPriceLabel: string;
+  monthlyVariantId?: string;
+  annuallyVariantId?: string;
 }
 
 interface SubscriptionPricingCombinedProps
@@ -42,6 +44,8 @@ function SubscriptionPlanRoot({
   monthlyPriceLabel,
   annuallyPrice,
   annuallyPriceLabel,
+  monthlyVariantId,
+  annuallyVariantId,
 
   // #withPlans
   plansPeriod,
@@ -50,7 +54,12 @@ function SubscriptionPlanRoot({
     useGetLemonSqueezyCheckout();
 
   const handleClick = () => {
-    getLemonCheckout({ variantId: '338516' })
+    const variantId =
+      SubscriptionPlansPeriod.Monthly === plansPeriod
+        ? monthlyVariantId
+        : annuallyVariantId;
+
+    getLemonCheckout({ variantId })
       .then((res) => {
         const checkoutUrl = res.data.data.attributes.url;
         window.LemonSqueezy.Url.Open(checkoutUrl);

packages/webapp/src/containers/Setup/SetupSubscription/SubscriptionPlans.tsx

@@ -19,6 +19,8 @@ export function SubscriptionPlans() {
           monthlyPriceLabel={plan.monthlyPriceLabel}
           annuallyPrice={plan.annuallyPrice}
           annuallyPriceLabel={plan.annuallyPriceLabel}
+          monthlyVariantId={plan.monthlyVariantId}
+          annuallyVariantId={plan.annuallyVariantId}
         />
       ))}
     </Group>