Merge pull request #1032 from trycompai/claudio/comp-225-clean-up-animated-flow-ai-loader-edited-convert-to-banner

[dev] [claudfuen] claudio/comp-225-clean-up-animated-flow-ai-loader-edited-convert-to-banner

Author: claudfuen

apps/app/src/app/(app)/upgrade/[orgId]/components/BookingDialog.tsx

@@ -0,0 +1,42 @@
+'use client';
+
+import CalendarEmbed from '@/components/calendar-embed';
+import { Button } from '@comp/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@comp/ui/dialog';
+import { Phone } from 'lucide-react';
+
+export function BookingDialog() {
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant="outline" size="sm" className="w-full">
+          <Phone className="h-4 w-4" />
+          Book a Call with Our Team
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-4xl md:max-w-5xl lg:max-w-6xl w-[95vw] h-[70vh] p-0 overflow-y-auto">
+        <div className="flex flex-col h-full">
+          <DialogHeader className="px-8 py-6 border-b">
+            <DialogTitle className="text-xl font-semibold">
+              Schedule a Call with Our Compliance Experts
+            </DialogTitle>
+            <DialogDescription className="mt-2">
+              Have questions about our plans? Want to learn how we can help you achieve compliance
+              in 14 days? Book a call with our team.
+            </DialogDescription>
+          </DialogHeader>
+          <div className="flex-1 mx-auto w-full">
+            <CalendarEmbed />
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

apps/app/src/app/(app)/upgrade/[orgId]/pricing-cards.tsx

@@ -19,6 +19,7 @@ import { useAction } from 'next-safe-action/hooks';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
 import { toast } from 'sonner';
+import { BookingDialog } from './components/BookingDialog';
 
 interface PricingCardsProps {
   organizationId: string;
@@ -196,6 +197,7 @@ const paidFeatures = [
   'Dedicated Success Team',
   '24x7x365 Support & SLA',
   'Slack Channel with Comp AI',
+  '12-month minimum term',
 ];
 
 export function PricingCards({ organizationId, priceDetails }: PricingCardsProps) {
@@ -446,6 +448,16 @@ export function PricingCards({ organizationId, priceDetails }: PricingCardsProps
               <ReviewSection rating={4.7} reviewCount={100} />
             </div>
           </Card>
+
+          {/* Help Section */}
+          <Card className="bg-muted/30 border-dashed">
+            <CardContent className="p-4">
+              <p className="text-xs text-muted-foreground text-center mb-3">
+                Have questions? We're here to help
+              </p>
+              <BookingDialog />
+            </CardContent>
+          </Card>
         </div>
       </div>
     </div>

apps/app/src/components/calendar-embed.tsx

@@ -12,11 +12,6 @@ export default function CalendarEmbed() {
   }, []);
 
   return (
-    <Cal
-      namespace="meet-us"
-      calLink="team/compai/meet-us"
-      style={{ width: '100%', height: '100%', overflow: 'scroll' }}
-      config={{ layout: 'month_view' }}
-    />
+    <Cal namespace="meet-us" calLink="team/compai/meet-us" config={{ layout: 'month_view' }} />
   );
 }