Update Billing Provider and Refactor Pricing UI

Updated the billing provider in the environment configuration to use 'stripe' instead of 'lemon-squeezy'. Multiple changes were also made to UI components related to pricing, including better data handling for different billing tiers and enhanced visualization of selected options. These revisions aim to both enhance the user experience and ensure compatibility with the new billing provider.

apps/web/.env.development

@@ -15,7 +15,7 @@ NEXT_PUBLIC_AUTH_PASSWORD=true
 NEXT_PUBLIC_AUTH_MAGIC_LINK=false
 
 # BILLING
-NEXT_PUBLIC_BILLING_PROVIDER=lemon-squeezy
+NEXT_PUBLIC_BILLING_PROVIDER=stripe
 
 # SUPABASE
 NEXT_PUBLIC_SUPABASE_URL=http://127.0.0.1:54321

apps/web/config/billing.sample.config.ts

@@ -16,28 +16,6 @@ export default createBillingSchema({
   provider,
   // products configuration
   products: [
-    {
-      id: 'lifetime',
-      name: 'Lifetime',
-      description: 'The perfect plan for a lifetime',
-      currency: 'USD',
-      features: ['Feature 1', 'Feature 2', 'Feature 3'],
-      plans: [
-        {
-          name: 'Lifetime',
-          id: 'lifetime',
-          paymentType: 'one-time',
-          lineItems: [
-            {
-              id: '324643',
-              name: 'Base',
-              cost: 999.99,
-              type: 'flat',
-            },
-          ],
-        },
-      ],
-    },
     {
       id: 'starter',
       name: 'Starter',
@@ -56,42 +34,7 @@ export default createBillingSchema({
               id: '324646',
               name: 'Addon 2',
               cost: 9.99,
-              type: 'metered',
+              type: 'flat',
-              unit: 'GBs',
-              tiers: [
-                {
-                  upTo: 5,
-                  cost: 0,
-                },
-                {
-                  upTo: 10,
-                  cost: 6.99,
-                },
-                {
-                  upTo: 'unlimited',
-                  cost: 0.49,
-                },
-              ],
-            },
-            {
-              id: '324645',
-              name: 'Addon 2',
-              cost: 9.99,
-              type: 'per-seat',
-              tiers: [
-                {
-                  upTo: 5,
-                  cost: 0,
-                },
-                {
-                  upTo: 10,
-                  cost: 6.99,
-                },
-                {
-                  upTo: 'unlimited',
-                  cost: 0.49,
-                },
-              ],
             },
           ],
         },

packages/billing/gateway/src/components/line-item-details.tsx

@@ -38,8 +38,31 @@ export function LineItemDetails(
           );
         }
 
-        const BaseFee = () => (
+        const SetupFee = () => (
-          <div key={item.id} className={className}>
+          <If condition={item.setupFee}>
+            <div className={className}>
+              <span className={'flex items-center space-x-1'}>
+                <PlusSquare className={'w-4'} />
+
+                <span>
+                  <Trans
+                    i18nKey={'billing:setupFee'}
+                    values={{
+                      setupFee: formatCurrency(
+                        props?.currency.toLowerCase(),
+                        item.setupFee as number,
+                      ),
+                    }}
+                  />
+                </span>
+              </span>
+            </div>
+          </If>
+        );
+
+        const FlatFee = () => (
+          <div key={item.id} className={'flex flex-col'}>
+            <div className={className}>
               <span className={'flex items-center space-x-1'}>
                 <span className={'flex items-center space-x-1.5'}>
                   <PlusSquare className={'w-4'} />
@@ -67,14 +90,31 @@ export function LineItemDetails(
                 {formatCurrency(props?.currency.toLowerCase(), item.cost)}
               </span>
             </div>
+
+            <SetupFee />
+
+            <If condition={item.tiers?.length}>
+              <span className={'flex items-center space-x-1.5'}>
+                <PlusSquare className={'w-4'} />
+
+                <span className={'flex space-x-1 text-sm'}>
+                  <span>
+                    <Trans
+                      i18nKey={'billing:perUnit'}
+                      values={{
+                        unit: item.unit,
+                      }}
+                    />
+                  </span>
+                </span>
+              </span>
+
+              <Tiers item={item} currency={props.currency} />
+            </If>
+          </div>
         );
 
-        switch (item.type) {
+        const PerSeat = () => (
-          case 'base':
-            return <BaseFee />;
-
-          case 'per-seat':
-            return (
           <div className={'flex flex-col'}>
             <div key={item.id} className={className}>
               <span className={'flex items-center space-x-1.5'}>
@@ -92,16 +132,17 @@ export function LineItemDetails(
               </If>
             </div>
 
+            <SetupFee />
+
             <If condition={item.tiers?.length}>
               <Tiers item={item} currency={props.currency} />
             </If>
           </div>
         );
 
-          case 'metered': {
+        const Metered = () => (
-            return (
+          <div key={item.id} className={'flex flex-col'}>
-              <div className={'flex flex-col'}>
+            <div className={className}>
-                <div key={item.id} className={className}>
               <span className={'flex items-center space-x-1'}>
                 <span className={'flex items-center space-x-1.5'}>
                   <PlusSquare className={'w-4'} />
@@ -115,19 +156,6 @@ export function LineItemDetails(
                         }}
                       />
                     </span>
-
-                        <If condition={item.setupFee}>
-                          {(fee) => (
-                            <span>
-                              <Trans
-                                i18nKey={'billing:setupFee'}
-                                values={{
-                                  setupFee: formatCurrency(props.currency, fee),
-                                }}
-                              />
-                            </span>
-                          )}
-                        </If>
                   </span>
                 </span>
               </span>
@@ -140,12 +168,24 @@ export function LineItemDetails(
               </If>
             </div>
 
+            <SetupFee />
+
             {/* If there are tiers, we render them as a list */}
             <If condition={item.tiers?.length}>
               <Tiers item={item} currency={props.currency} />
             </If>
           </div>
         );
+
+        switch (item.type) {
+          case 'flat':
+            return <FlatFee />;
+
+          case 'per-seat':
+            return <PerSeat />;
+
+          case 'metered': {
+            return <Metered />;
           }
         }
       })}
@@ -160,6 +200,8 @@ function Tiers({
   currency: string;
   item: z.infer<typeof LineItemSchema>;
 }) {
+  const unit = item.unit;
+
   const tiers = item.tiers?.map((tier, index) => {
     const previousTier = item.tiers?.[index - 1];
     const isNoLimit = tier.upTo === 'unlimited';
@@ -173,7 +215,6 @@ function Tiers({
 
     const upTo = tier.upTo;
     const isIncluded = tier.cost === 0;
-    const unit = item.unit;
 
     return (
       <span

packages/billing/gateway/src/components/plan-picker.tsx

@@ -214,12 +214,12 @@ export function PlanPicker(
                         return null;
                       }
 
-                      const baseLineItem = getPrimaryLineItem(
+                      const primaryLineItem = getPrimaryLineItem(
                         props.config,
                         plan.id,
                       );
 
-                      if (!baseLineItem) {
+                      if (!primaryLineItem) {
                         throw new Error(`Base line item was not found`);
                       }
 
@@ -295,7 +295,7 @@ export function PlanPicker(
                                   <span>
                                     {formatCurrency(
                                       product.currency.toLowerCase(),
-                                      baseLineItem.cost,
+                                      primaryLineItem.cost,
                                     )}
                                   </span>
                                 </Price>
@@ -420,6 +420,7 @@ function PlanDetails({
         </p>
       </div>
 
+      <If condition={selectedPlan.lineItems.length > 0}>
         <Separator />
 
         <div className={'flex flex-col space-y-2'}>
@@ -433,6 +434,7 @@ function PlanDetails({
             currency={selectedProduct.currency}
           />
         </div>
+      </If>
 
       <Separator />
 

packages/billing/gateway/src/components/pricing-table.tsx

@@ -386,13 +386,16 @@ function PlanIntervalSwitcher(
       {props.intervals.map((plan, index) => {
         const selected = plan === props.interval;
 
-        const className = cn('focus:!ring-0 !outline-none', {
+        const className = cn(
+          'focus:!ring-0 !outline-none animate-in transition-all fade-in',
+          {
             'rounded-r-none border-r-transparent': index === 0,
             'rounded-l-none': index === props.intervals.length - 1,
-          ['hover:bg-muted']: !selected,
+            ['hover:text-current hover:bg-muted']: !selected,
-          ['font-semibold cursor-default bg-muted hover:bg-muted hover:text-initial']:
+            ['font-semibold cursor-default hover:text-initial hover:bg-background border-primary']:
               selected,
-        });
+          },
+        );
 
         return (
           <Button
@@ -403,7 +406,7 @@ function PlanIntervalSwitcher(
           >
             <span className={'flex items-center space-x-1'}>
               <If condition={selected}>
-                <CheckCircle className={'animate-in fade-in h-4'} />
+                <CheckCircle className={'animate-in fade-in zoom-in-90 h-4'} />
               </If>
 
               <span className={'capitalize'}>