fix(masterbots.ai): payment feedbacks (#240)

* fix: make the dialog content responsive * fix: free plan card adjusted * fix: update * fix: update receipt styles * fix: build error * fix: build error * fix: build error update * fix: update * fix: observation
bitcashorg · Jul 11, 2024 · dce0371 · dce0371
1 parent a38d894
commit dce0371
Show file tree

Hide file tree

Showing 9 changed files with 42 additions and 31 deletions.
diff --git a/apps/masterbots.ai/app/api/payment/subscription/route.tsx b/apps/masterbots.ai/app/api/payment/subscription/route.tsx
@@ -11,6 +11,8 @@ const stripe = new Stripe(stripeSecretKey|| '', {
   apiVersion: '2024-04-10'
 })
 
+export const runtime = "edge"
+
 // # Get Subscription Details by Payment Intent ID
 export async function GET(req: NextRequest) {
   try {
@@ -97,6 +99,8 @@ export async function GET(req: NextRequest) {
   }
 }
 
+
+
 // Use PUT to check if a customer has an active subscription or not by email address 
 export async function PUT(req: NextRequest) {
   try {

diff --git a/apps/masterbots.ai/components/checkout.tsx b/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>
                 {' '}

diff --git a/apps/masterbots.ai/components/plans.tsx b/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

diff --git a/apps/masterbots.ai/components/receipt.tsx b/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>

diff --git a/apps/masterbots.ai/components/subscription.tsx b/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')
   }
 

diff --git a/apps/masterbots.ai/components/ui/wizard/index.tsx b/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-iron dark:border-mirage overflow-y-auto">
+        <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>
     )

diff --git a/apps/masterbots.ai/package.json b/apps/masterbots.ai/package.json
@@ -44,8 +44,8 @@
     "mb-genql": "workspace:*",
     "mb-lib": "workspace:*",
     "mb-types": "workspace:*",
-    "nanoid": "^5.0.3",
-    "next": "14.2.3",
+    "nanoid": "latest",
+    "next": "latest",
     "next-auth": "5.0.0-beta.3",
     "next-themes": "^0.2.1",
     "nextjs-toploader": "^1.6.12",
@@ -81,7 +81,7 @@
     "eslint-config-next": "14.0.3",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-tailwindcss": "^3.13.0",
-    "postcss": "^8.4.31",
+    "postcss": "latest",
     "prettier": "^3.1.0",
     "tailwind-merge": "^2.0.0",
     "tailwindcss": "^3.3.5",

diff --git a/bun.lockb b/bun.lockb
diff --git a/package.json b/package.json
@@ -25,6 +25,5 @@
   "dependencies": {
     "axios": "^1.7.2",
     "nextjs-toploader": "^1.6.4"
-
   }
 }