Carousel Template

1"use client";
2 
3import * as React from "react";
4import { Button } from "@base-ui/react/button";
5import { ScrollArea } from "@base-ui/react/scroll-area";
6import { cn } from "@/lib/utils";
7import "@/components/ui/whatsapp/styles/whatsapp.css";
8import { TemplateButton } from "./template-bubble";
9 
10export interface CarouselCard {
11  imageUrl?: string;
12  body: string;
13  buttons?: TemplateButton[];
14}
15 
16export interface CarouselTemplateProps extends React.HTMLAttributes<HTMLDivElement> {
17  body?: string;
18  cards: CarouselCard[];
19  timestamp?: string;
20  /** Override the default `<a>` element for URL/phone buttons (e.g. Next.js Link) */
21  renderAction?: (props: { href: string; children: React.ReactNode; className: string; target?: string; rel?: string }) => React.ReactElement;
22}
23 
24function CardButton({ button, renderAction }: { button: TemplateButton; renderAction?: CarouselTemplateProps["renderAction"] }) {
25  const base = "flex w-full items-center justify-center gap-1.5 py-[9px] text-[13px] font-medium text-wa-emerald-500";
26  const label = button.type === "call_permission" ? `Call ${button.bizName}` : button.type === "copy_code" ? (button.label ?? "Copy offer code") : "label" in button ? button.label : "";
27 
28  const buttonContent = (
29    <>
30      {button.type === "url" && (
31        <img src="/wa-icon-url.png" width={14} height={14} alt="" style={{ filter: "var(--wa-btn-icon-filter)" }} />
32      )}
33      {button.type === "flow" && (
34        <img src="/wa-icon-flow.png" width={14} height={14} alt="" style={{ filter: "var(--wa-btn-icon-filter)" }} />
35      )}
36      {label}
37    </>
38  );
39 
40  const href = button.type === "url" && button.url ? button.url
41    : button.type === "phone_number" && button.phone_number ? `tel:${button.phone_number}`
42    : undefined;
43 
44  if (renderAction && href) {
45    return renderAction({
46      href,
47      children: buttonContent,
48      className: base,
49      ...(button.type === "url" ? { target: "_blank", rel: "noopener noreferrer" } : {}),
50    });
51  }
52 
53  const renderEl = button.type === "url" && button.url
54    ? <a href={button.url} target="_blank" rel="noopener noreferrer" />
55    : button.type === "phone_number" && button.phone_number
56    ? <a href={`tel:${button.phone_number}`} />
57    : undefined;
58 
59  return (
60    <Button render={renderEl} nativeButton={renderEl == null} className={base}>
61      {buttonContent}
62    </Button>
63  );
64}
65 
66const CarouselTemplate = React.forwardRef<HTMLDivElement, CarouselTemplateProps>(
67// … truncated