Payment update

apps/masterbots.ai/components/checkout.tsx

@@ -102,9 +102,9 @@ export function InnerCheckout({ prev, next }: WizardStepProps) {
                 *charged once every {getCurrentOrTargetDate()}
               </span>
             </div>
-            <span>${4.49 * 12}</span>
+            <span>${ plan?.product?.name?.toLowerCase().includes('year') ? (4.49 * 12) : price }</span>
           </div>
-          {plan?.product.name.toLowerCase().includes('year') && (
+          {plan?.product?.name?.toLowerCase().includes('year') && (
             <div className="flex justify-between text-gray-400 mt-3">
               <span>
                 {' '}

apps/masterbots.ai/components/plans.tsx

@@ -101,7 +101,7 @@ export function Plans({ next, goTo }: PlansPros) {
       <div className="flex flex-col size-full space-y-3 p-5">
         <div
           className={cn(
-            'border-gradient w-full h-[135px] dark:[&>_div]:hover:bg-tertiary',
+            'border-gradient w-full md:h-[135px] z-0 dark:[&>_div]:hover:bg-tertiary',
             {
               'selected': selectedPlan === 'free'
             }
@@ -155,7 +155,7 @@ export function Plans({ next, goTo }: PlansPros) {
             </div>
           </label>
         </div>
-        <div className="flex space-x-3">
+        <div className="flex md:space-x-3   md:flex-row  flex-col space-y-3 md:space-y-0">
           {plans && plans.length && (
             plans?.filter(plan => plan.active).sort((a, b) => a.created - b.created).map(plan => (
               <PlanCard

apps/masterbots.ai/components/receipt.tsx

@@ -105,15 +105,17 @@ export const Receipt: React.FC<ReceiptProps> = ({ intentid }) => {
                   <strong> {getDate(subscription.current_period_start)}</strong>
                 </span>
               </div>
-              <span>${price}</span>
+              <span>$ { plan.interval === 'year' ? (4.49 * 12) : price }</span>
             </div>
+            {plan.interval === 'year' && (
             <div className="flex justify-between text-gray-400 mt-3">
               <span>
                 {' '}
                 <strong>Year Plan</strong> subscription discount
               </span>
-              <span>-$0.00</span>
+              <span>-${((4.49 * 12) - Number(price)).toFixed(2)}</span>
             </div>
+          )}
             <div className="flex justify-between mt-5 pb-4 border-b">
               <span className="font-bold"> Subtotal</span>
               <span>${price}</span>

apps/masterbots.ai/components/subscription.tsx

@@ -29,9 +29,11 @@ export default function Subscription({ user }: { user: { email: string; name: st
   handleSetUser(user)
 
   const handleCloseWizard = async () => {
+
     const del = await handleDeleteCustomer(user?.email)
     handleSetLoading(false)
     handleSetError('')
+    if (!openDialog) return router.push('/c/p')
     if (del) return router.push('/chat')
   }
 

apps/masterbots.ai/components/ui/wizard/index.tsx

@@ -1,6 +1,6 @@
 import { LoadingState } from '@/components/loading-state'
 import { usePayment } from '@/lib/hooks/use-payment'
-import {  motion } from 'framer-motion'
+import { motion } from 'framer-motion'
 import React from 'react'
 import { useWizard } from './hook/useWizard'
 import {
@@ -46,40 +46,44 @@ const DialogWizard: React.FC<DialogWizardProps> = ({
   handleCloseWizard,
   errorComponent
 }) => {
-
   return (
     <Dialog open={dialogOpen} onOpenChange={handleCloseWizard}>
-      <DialogContent
-        className="rounded-sm min-h-[540px] w-11/12 p-0 max-w-2xl z-50 bg-gray-100 dark:bg-[#27272A]  border border-black"
-      >
-        <DialogHeader className="flex justify-between mb-0 items-center dark:bg-[#1E293B] bg-gray-200 dark:text-white text-black p-5 pb-10">
-           <DialogTitle>{headerTitle}</DialogTitle>
+      <DialogContent className="rounded-sm max-h-screen md:min-h-[540px]   w-full md:w-11/12 p-0 md:max-w-2xl z-50 bg-gray-100 dark:bg-[#27272A] border border-black overflow-y-scroll">
+        <DialogHeader className="sticky top-0 flex z-50 md:max-h-auto max-h-20 justify-between mb-0 items-center dark:bg-[#1E293B] bg-gray-200 dark:text-white text-black p-5 pb-10">
+          <DialogTitle>{headerTitle}</DialogTitle>
         </DialogHeader>
-        <Content
-          errorComponent={errorComponent}
-          steps={steps}
-          dialogOpen={dialogOpen}
-
-        />
+        <div className="">
+          <Content
+            errorComponent={errorComponent}
+            steps={steps}
+            dialogOpen={dialogOpen}
+          />
+        </div>
       </DialogContent>
     </Dialog>
   )
 }
 
-function Content({ errorComponent, steps, dialogOpen }: { errorComponent?: JSX.Element, steps: WizardStep[], dialogOpen: boolean }) {
+function Content({
+  errorComponent,
+  steps,
+  dialogOpen
+}: {
+  errorComponent?: JSX.Element
+  steps: WizardStep[]
+  dialogOpen: boolean
+}) {
   const { error, loading } = usePayment()
-  const { close, Next, Prev, goTo, lastStep, currentStep } = useWizard(steps, dialogOpen)
-  const defaultErrorComponent = () => (
-    <div>{error}</div>
+  const { close, Next, Prev, goTo, lastStep, currentStep } = useWizard(
+    steps,
+    dialogOpen
   )
+  const defaultErrorComponent = () => <div>{error}</div>
   const ErrorComponent = (() => errorComponent) || defaultErrorComponent
 
   if (error && error !== '') {
     return (
-      <motion.div
-        key="wizard-error-container"
-        {...animationStepProps}
-      >
+      <motion.div key="wizard-error-container" {...animationStepProps}>
         <ErrorComponent />
       </motion.div>
     )

package.json

@@ -24,7 +24,9 @@
   "packageManager": "bun@1.0.14",
   "dependencies": {
     "axios": "^1.7.2",
-    "nextjs-toploader": "^1.6.4"
-
+    "nanoid": "latest",
+    "next": "latest",
+    "nextjs-toploader": "^1.6.4",
+    "postcss": "latest"
   }
 }