fix: subscription mobile responsive tweaks (#245)

* update

* fix: update

* fix: responsiveness

* fix: update

* fix: few clean up

* fix: rm unused image

* fix: rm unused image

Author: sheriffjimoh

apps/masterbots.ai/components/checkout.tsx

@@ -17,6 +17,7 @@ export function InnerCheckout({ prev, next }: WizardStepProps) {
     secret,
     handlePaymentIntent
   } = usePayment()
+  
   const [mounted, setMounted] = useState(false)
 
   useEffect(() => {
@@ -45,7 +46,7 @@ export function InnerCheckout({ prev, next }: WizardStepProps) {
       })
 
       if (error) {
-        console.error('Error creating payment intent:', error)
+        console.error('Error confirm payment intent:', error)
         handleSetLoading(false)
         handleSetError(error.message)
         return
@@ -56,7 +57,7 @@ export function InnerCheckout({ prev, next }: WizardStepProps) {
       window.history.pushState({}, '', `/u/s/subs/${paymentIntent.id}`)
       next()
     } catch (error: any) {
-      console.error('Error creating payment intent:', error)
+      console.error('Error confirm payment intent:', error)
       handleSetLoading(false)
       handleSetError(error?.message)
     }
@@ -70,7 +71,7 @@ export function InnerCheckout({ prev, next }: WizardStepProps) {
             Subscribe using <span className="text-[#837de6]">Stripe</span>{' '}
           </span>
         </div>
-        <div className="text-left mt-5">
+        <div className="text-left mt-5  md:pr-0 pr-10">
           <div className="w-40 leading-[14.88px]">
             <span className="text-[12px] font-bold text-[#71717A] w-10">
               Pay The{' '}
@@ -91,7 +92,7 @@ export function InnerCheckout({ prev, next }: WizardStepProps) {
             </div>
           )}
         </div>
-        <div className="w-full mt-5">
+        <div className="w-full mt-5 md:pr-0 pr-10">
           <div className="flex justify-between">
             <div className="flex flex-col">
               <span>

apps/masterbots.ai/components/payment-information.tsx

@@ -66,7 +66,7 @@ export function PaymentInformation({ prev, next }: WizardStepProps) {
             Subscribe using <span className="text-[#837de6]">Stripe</span>{' '}
           </span>
         </div>
-        <div className="min-h-[480px] w-full flex items-center justify-center [&_div]:w-full">
+        <div className="min-h-[480px] w-full max-w-[360px] flex items-center justify-center [&_div]:w-full mb-5">
           <PaymentElement />
         </div>
       </div>

apps/masterbots.ai/components/plan-card.tsx

@@ -15,7 +15,7 @@ export default function PlanCard({
   return (
     <div
       className={cn(
-        'border-gradient w-full h-[275px] dark:[&>_div]:hover:bg-tertiary ',
+        'border-gradient md:w-full w-[340px] h-[275px] dark:[&>_div]:hover:bg-tertiary ',
         {
           'selected': selectedPlan === duration
         },

apps/masterbots.ai/components/plans.tsx

@@ -92,16 +92,16 @@ export function Plans({ next, goTo }: PlansPros) {
 
   return (
     <form className="flex flex-col w-full min-h-[480px]" onSubmit={submitSubscription}>
-      <div className="text-center pt-2">
+      <div className="text-center pt-2   mb-3">
         <span className="font-bold text-[16px]">
           Subscribe using{' '}
           <span className="dark:text-[#635BFF]  text-[#625af5]">Stripe</span>{' '}
         </span>
       </div>
-      <div className="flex flex-col size-full space-y-3 p-5">
+      <div className="flex flex-col size-full justify-center space-y-3 px-4">
         <div
           className={cn(
-            'border-gradient w-full md:h-[135px] z-0 dark:[&>_div]:hover:bg-tertiary',
+            'border-gradient w-[340px] md:w-full md:h-[135px] z-0 dark:[&>_div]:hover:bg-tertiary',
             {
               'selected': selectedPlan === 'free'
             }
@@ -176,10 +176,10 @@ export function Plans({ next, goTo }: PlansPros) {
             <div>No plans available</div>
           )}
         </div>
-        <div>
+        <div >
           <a
             href="#referral"
-            className="text-[16px] flex items-center space-x-2"
+            className="text-[16px] flex items-center space-x-2 mb-5"
           >
             <span>
               I have a&nbsp;<strong> Referral Code</strong>{' '}

apps/masterbots.ai/components/subscription.tsx

@@ -21,19 +21,18 @@ const steps: WizardStep[] = [
 
 export default function Subscription({ user }: { user: { email: string; name: string } }) {
   const router = useRouter()
-  const { handleSetUser, handleDeleteCustomer, handleSetLoading, handleSetError } = usePayment()
+  const { handleSetUser, handleDeleteCustomer, handleSetLoading, handleSetError, paymentIntent } = usePayment()
 
   const { value: openDialog } = useAsync(async () =>
     await checkIfCustomerHasActiveSub(user.email)
   )
   handleSetUser(user)
 
   const handleCloseWizard = async () => {
-
+    if ( typeof paymentIntent === 'object' && paymentIntent !== "") return router.push('/c/p')
     const del = await handleDeleteCustomer(user?.email)
     handleSetLoading(false)
     handleSetError('')
-    if (!openDialog) return router.push('/c/p')
     if (del) return router.push('/c')
   }
 

apps/masterbots.ai/components/ui/dialog.tsx

@@ -57,15 +57,15 @@ const DialogHeader = ({
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
     className={cn(
-      'flex flex-col space-y-1.5 text-center sm:text-left',
+      'flex flex-col space-y-1.5 md:text-center sm:text-left',
       className
     )}
     {...props}
 
-    
+  
   >
    {children}
-     <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+     <DialogPrimitive.Close className="absolute right-[3.5rem] md:right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
         <IconClose className="h-4 w-4" />
         <span className="sr-only">Close</span>
       </DialogPrimitive.Close>

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

@@ -48,11 +48,11 @@ const DialogWizard: React.FC<DialogWizardProps> = ({
 }) => {
   return (
     <Dialog open={dialogOpen} onOpenChange={handleCloseWizard}>
-      <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">
+      <DialogContent className="flex flex-col  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 md:px-10 z-50 md:max-h-auto max-h-20 md:justify-between mb-0   dark:bg-[#1E293B] bg-gray-200 dark:text-white text-black p-5 pb-10">
           <DialogTitle>{headerTitle}</DialogTitle>
         </DialogHeader>
-        <div className="">
+        <div className="flex-grow md:mb-0 mb-20">
           <Content
             errorComponent={errorComponent}
             steps={steps}

apps/masterbots.ai/lib/hooks/use-payment.tsx

@@ -39,6 +39,7 @@ interface PaymentContextProps {
 }
 
 const PaymentContext = createContext<PaymentContextProps | undefined>(undefined)
+
 interface PaymentProviderProps {
   children: React.ReactNode
 }