Call Permission

1"use client";
2 
3import * as React from "react";
4import { Drawer } from "@base-ui/react/drawer";
5import { RadioGroup } from "@base-ui/react/radio-group";
6import { Radio } from "@base-ui/react/radio";
7import { cn } from "@/lib/utils";
8import "@/components/ui/whatsapp/styles/whatsapp.css";
9 
10export interface CallPermissionBubbleProps
11  extends React.HTMLAttributes<HTMLDivElement> {
12  bizName?: string;
13  timestamp?: string;
14}
15 
16// ─── Bubble ───────────────────────────────────────────────────────────────────
17 
18const CallPermissionBubble = React.forwardRef<
19  HTMLDivElement,
20  CallPermissionBubbleProps
21>(({ className, bizName = "{BIZ_NAME}", timestamp, ...props }, ref) => {
22  const [open, setOpen] = React.useState(false);
23 
24  return (
25    <>
26      <div
27        ref={ref}
28        className={cn("font-wa w-full max-w-[320px]", className)}
29        {...props}
30      >
31        <div className="overflow-hidden rounded-lg bg-wa-bubble-incoming shadow-sm">
32          {/* Card */}
33          <div className="flex items-start gap-3 border-b border-wa-border px-3 py-3">
34            {/* Phone icon */}
35            <div className="mt-0.5 shrink-0">
36              <svg viewBox="0 0 24 24" width="22" height="22" className="text-wa-text-primary">
37                <path
38                  d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z"
39                  fill="currentColor"
40                />
41              </svg>
42            </div>
43            {/* Text */}
44            <div className="flex-1">
45              <p className="text-[14.2px] font-semibold leading-[19px] text-wa-text-primary">
46                Can {bizName} call you?
47              </p>
48              <p className="mt-0.5 text-[13px] leading-[18px] text-wa-text-secondary">
49                You can update your preference anytime in the business profile.
50              </p>
51              {timestamp && (
52                <div className="mt-1 flex justify-end">
53                  <span className="text-[11px] text-wa-bubble-meta">{timestamp}</span>
54                </div>
55              )}
56            </div>
57          </div>
58 
59          {/* Choose preference button */}
60// … truncated