6ec95262af
- Updated .env.example to include configuration for OnlyOffice Document Server. - Modified the workspace configuration to remove the drive-suite path. - Adjusted TypeScript environment imports for consistency. - Enhanced Next.js configuration to disable canvas in Webpack. - Updated package.json to include new dependencies for OnlyOffice and PDF.js. - Added global styles for OnlyOffice theme integration in the CSS. - Created new layout and page components for the Drive feature, including public sharing and editing functionalities. - Updated metadata handling across various layouts to reflect the new app structure.
107 lines
3.7 KiB
TypeScript
107 lines
3.7 KiB
TypeScript
"use client"
|
|
|
|
import { useCallback, useState } from "react"
|
|
import { Check, Copy } from "lucide-react"
|
|
import { toast } from "sonner"
|
|
import {
|
|
WEBHOOK_TEMPLATE_VARIABLE_GROUPS,
|
|
type WebhookTemplateVariable,
|
|
} from "@/lib/mail-automation/webhook-template-variables"
|
|
import { cn } from "@/lib/utils"
|
|
|
|
function VariableChip({
|
|
variable,
|
|
copied,
|
|
onCopy,
|
|
}: {
|
|
variable: WebhookTemplateVariable
|
|
copied: boolean
|
|
onCopy: (token: string) => void
|
|
}) {
|
|
return (
|
|
<button
|
|
type="button"
|
|
title={`${variable.label} — ${variable.description}`}
|
|
aria-label={`Copier ${variable.token}`}
|
|
onClick={() => onCopy(variable.token)}
|
|
className={cn(
|
|
"inline-flex max-w-full items-center gap-1 rounded-md border px-2 py-0.5 font-mono text-[11px] leading-snug transition-colors",
|
|
"border-border bg-muted/40 text-foreground hover:bg-accent hover:text-accent-foreground",
|
|
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50",
|
|
copied && "border-primary/40 bg-primary/10 text-primary"
|
|
)}
|
|
>
|
|
{copied ? (
|
|
<Check className="size-3 shrink-0" aria-hidden />
|
|
) : (
|
|
<Copy className="size-3 shrink-0 opacity-60" aria-hidden />
|
|
)}
|
|
<span className="truncate">{variable.token}</span>
|
|
</button>
|
|
)
|
|
}
|
|
|
|
export function WebhookTemplateVariablesPanel() {
|
|
const [copiedToken, setCopiedToken] = useState<string | null>(null)
|
|
|
|
const copyToken = useCallback(async (token: string) => {
|
|
try {
|
|
await navigator.clipboard.writeText(token)
|
|
setCopiedToken(token)
|
|
toast.success(`${token} copié`)
|
|
window.setTimeout(() => {
|
|
setCopiedToken((current) => (current === token ? null : current))
|
|
}, 1500)
|
|
} catch {
|
|
toast.error("Impossible de copier la variable")
|
|
}
|
|
}, [])
|
|
|
|
return (
|
|
<div className="space-y-4 rounded-lg border border-border bg-muted/20 p-4">
|
|
<div className="space-y-1">
|
|
<p className="text-sm font-medium">Variables du template</p>
|
|
<p className="text-xs text-muted-foreground">
|
|
Insérez ces variables dans votre JSON{" "}
|
|
<code className="rounded bg-muted px-1 py-0.5 font-mono text-[11px]">body_template</code>.
|
|
Cliquez sur une puce pour la copier dans le presse-papiers.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="space-y-4">
|
|
{WEBHOOK_TEMPLATE_VARIABLE_GROUPS.map((group) => (
|
|
<section key={group.id} className="space-y-2">
|
|
<div>
|
|
<h3 className="text-xs font-medium">{group.label}</h3>
|
|
<p className="text-[11px] text-muted-foreground">{group.description}</p>
|
|
</div>
|
|
<ul className="space-y-2">
|
|
{group.variables.map((variable) => (
|
|
<li
|
|
key={variable.token}
|
|
className="flex flex-col gap-1.5 sm:flex-row sm:items-start sm:gap-3"
|
|
>
|
|
<VariableChip
|
|
variable={variable}
|
|
copied={copiedToken === variable.token}
|
|
onCopy={copyToken}
|
|
/>
|
|
<div className="min-w-0 flex-1 text-[11px] leading-snug">
|
|
<span className="font-medium text-foreground">{variable.label}</span>
|
|
<span className="text-muted-foreground"> — {variable.description}</span>
|
|
{variable.example ? (
|
|
<span className="mt-0.5 block font-mono text-[10px] text-muted-foreground/80">
|
|
Ex. {variable.example}
|
|
</span>
|
|
) : null}
|
|
</div>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</section>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|