@agent-native/scheduling 0.1.10 → 0.1.12

package/src/react/components/booking-links/AvailabilityEditor.tsx

@@ -11,6 +11,8 @@
  */
 import { Input } from "@/components/ui/input";
 import { Switch } from "@/components/ui/switch";
+import { schedulingMessage, useSchedulingT } from "../../i18n.js";
+import type { LocaleCode } from "@agent-native/core/client";
 
 export type DayKey =
   | "monday"
@@ -33,14 +35,18 @@ export interface DaySchedule {
 
 export type WeeklySchedule = Record<DayKey, DaySchedule>;
 
-const DAYS: { key: DayKey; label: string; short: string }[] = [
-  { key: "monday", label: "Monday", short: "Mon" },
-  { key: "tuesday", label: "Tuesday", short: "Tue" },
-  { key: "wednesday", label: "Wednesday", short: "Wed" },
-  { key: "thursday", label: "Thursday", short: "Thu" },
-  { key: "friday", label: "Friday", short: "Fri" },
-  { key: "saturday", label: "Saturday", short: "Sat" },
-  { key: "sunday", label: "Sunday", short: "Sun" },
+const DAYS: {
+  key: DayKey;
+  labelKey: Parameters<ReturnType<typeof useSchedulingT>>[0];
+  shortKey: Parameters<ReturnType<typeof useSchedulingT>>[0];
+}[] = [
+  { key: "monday", labelKey: "monday", shortKey: "mon" },
+  { key: "tuesday", labelKey: "tuesday", shortKey: "tue" },
+  { key: "wednesday", labelKey: "wednesday", shortKey: "wed" },
+  { key: "thursday", labelKey: "thursday", shortKey: "thu" },
+  { key: "friday", labelKey: "friday", shortKey: "fri" },
+  { key: "saturday", labelKey: "saturday", shortKey: "sat" },
+  { key: "sunday", labelKey: "sunday", shortKey: "sun" },
 ];
 
 export interface AvailabilityEditorProps {
@@ -52,6 +58,7 @@ export function AvailabilityEditor({
   value,
   onChange,
 }: AvailabilityEditorProps) {
+  const t = useSchedulingT();
   const setDay = (day: DayKey, patch: Partial<DaySchedule>) => {
     onChange({
       ...value,
@@ -74,7 +81,9 @@ export function AvailabilityEditor({
 
   return (
     <div className="space-y-2.5">
-      {DAYS.map(({ key, label, short }) => {
+      {DAYS.map(({ key, labelKey, shortKey }) => {
+        const label = t(labelKey);
+        const short = t(shortKey);
         const day = value[key] ?? { enabled: false, slots: [] };
         const slot = day.slots[0] ?? { start: "09:00", end: "17:00" };
         return (
@@ -86,7 +95,7 @@ export function AvailabilityEditor({
               <Switch
                 checked={day.enabled}
                 onCheckedChange={(checked) => setDay(key, { enabled: checked })}
-                aria-label={`Toggle ${label}`}
+                aria-label={t("toggleDay", { day: label })}
               />
               <span className="text-sm font-medium">
                 <span className="hidden sm:inline">{label}</span>
@@ -102,7 +111,7 @@ export function AvailabilityEditor({
                   onChange={(e) => setSlot(key, "start", e.target.value)}
                   className="w-28 sm:w-32"
                 />
-                <span className="text-muted-foreground">to</span>
+                <span className="text-muted-foreground">{t("to")}</span>
                 <Input
                   type="time"
                   value={slot.end}
@@ -111,7 +120,9 @@ export function AvailabilityEditor({
                 />
               </div>
             ) : (
-              <span className="text-sm text-muted-foreground">Unavailable</span>
+              <span className="text-sm text-muted-foreground">
+                {t("unavailable")}
+              </span>
             )}
           </div>
         );
@@ -124,7 +135,10 @@ export function AvailabilityEditor({
  * Summarize a `WeeklySchedule` in a short phrase, e.g. "Weekdays, 9 am - 5 pm".
  * Useful for list-row subtitles.
  */
-export function summarizeAvailability(ws: WeeklySchedule): string {
+export function summarizeAvailability(
+  ws: WeeklySchedule,
+  locale: LocaleCode = "en-US",
+): string {
   const weekdayKeys: DayKey[] = [
     "monday",
     "tuesday",
@@ -136,7 +150,8 @@ export function summarizeAvailability(ws: WeeklySchedule): string {
   const allDays: DayKey[] = [...weekdayKeys, ...weekendKeys];
 
   const enabled = allDays.filter((d) => ws[d]?.enabled);
-  if (enabled.length === 0) return "No availability set";
+  if (enabled.length === 0)
+    return schedulingMessage(locale, "noAvailabilitySet");
 
   const weekdaysOn = weekdayKeys.every((d) => ws[d]?.enabled);
   const weekendsOn = weekendKeys.every((d) => ws[d]?.enabled);
@@ -144,20 +159,26 @@ export function summarizeAvailability(ws: WeeklySchedule): string {
   const weekendsOff = weekendKeys.every((d) => !ws[d]?.enabled);
 
   let dayLabel: string;
-  if (weekdaysOn && weekendsOn) dayLabel = "Every day";
-  else if (weekdaysOn && weekendsOff) dayLabel = "Weekdays";
-  else if (weekdaysOff && weekendsOn) dayLabel = "Weekends";
+  if (weekdaysOn && weekendsOn)
+    dayLabel = schedulingMessage(locale, "everyDay");
+  else if (weekdaysOn && weekendsOff)
+    dayLabel = schedulingMessage(locale, "weekdays");
+  else if (weekdaysOff && weekendsOn)
+    dayLabel = schedulingMessage(locale, "weekends");
   else {
-    const shortNames: Record<DayKey, string> = {
-      monday: "Mon",
-      tuesday: "Tue",
-      wednesday: "Wed",
-      thursday: "Thu",
-      friday: "Fri",
-      saturday: "Sat",
-      sunday: "Sun",
-    };
-    dayLabel = enabled.map((d) => shortNames[d]).join(", ");
+    const shortNames: Record<DayKey, Parameters<typeof schedulingMessage>[1]> =
+      {
+        monday: "mon",
+        tuesday: "tue",
+        wednesday: "wed",
+        thursday: "thu",
+        friday: "fri",
+        saturday: "sat",
+        sunday: "sun",
+      };
+    dayLabel = enabled
+      .map((d) => schedulingMessage(locale, shortNames[d]))
+      .join(", ");
   }
 
   const slot = ws[enabled[0]].slots[0];

package/src/react/components/booking-links/BookingLinkCreateDialog.tsx

@@ -22,6 +22,7 @@ import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
+import { useSchedulingT } from "../../i18n.js";
 
 export interface BookingLinkCreateDraft {
   title: string;
@@ -54,13 +55,14 @@ function slugify(value: string) {
 }
 
 export function BookingLinkCreateDialog(props: BookingLinkCreateDialogProps) {
+  const t = useSchedulingT();
   const {
     open,
     onOpenChange,
     slugPrefix,
     defaultLength = 30,
     onSubmit,
-    submitLabel = "Continue",
+    submitLabel = t("continue"),
   } = props;
 
   const [form, setForm] = useState<BookingLinkCreateDraft>({
@@ -100,14 +102,12 @@ export function BookingLinkCreateDialog(props: BookingLinkCreateDialogProps) {
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent>
         <DialogHeader>
-          <DialogTitle>Add a new event type</DialogTitle>
-          <DialogDescription>
-            Create a new event type for people to book.
-          </DialogDescription>
+          <DialogTitle>{t("addEventTypeTitle")}</DialogTitle>
+          <DialogDescription>{t("addEventTypeDescription")}</DialogDescription>
         </DialogHeader>
         <div className="space-y-4">
           <div className="space-y-1.5">
-            <Label htmlFor="blc-title">Title</Label>
+            <Label htmlFor="blc-title">{t("title")}</Label>
             <Input
               id="blc-title"
               placeholder="Quick chat"
@@ -124,7 +124,7 @@ export function BookingLinkCreateDialog(props: BookingLinkCreateDialogProps) {
             />
           </div>
           <div className="space-y-1.5">
-            <Label htmlFor="blc-slug">URL</Label>
+            <Label htmlFor="blc-slug">{t("url")}</Label>
             <div className="flex rounded-md border border-input focus-within:ring-2 focus-within:ring-ring">
               <span className="flex items-center rounded-l-md bg-muted px-3 text-xs text-muted-foreground">
                 {slugPrefix}
@@ -150,10 +150,10 @@ export function BookingLinkCreateDialog(props: BookingLinkCreateDialogProps) {
             </div>
           </div>
           <div className="space-y-1.5">
-            <Label htmlFor="blc-desc">Description</Label>
+            <Label htmlFor="blc-desc">{t("description")}</Label>
             <Textarea
               id="blc-desc"
-              placeholder="A short description people will see."
+              placeholder={t("shortDescriptionPlaceholder")}
               rows={2}
               value={form.description}
               onChange={(e) =>
@@ -162,7 +162,7 @@ export function BookingLinkCreateDialog(props: BookingLinkCreateDialogProps) {
             />
           </div>
           <div className="space-y-1.5">
-            <Label htmlFor="blc-len">Duration</Label>
+            <Label htmlFor="blc-len">{t("duration")}</Label>
             <div className="flex items-center gap-2">
               <Input
                 id="blc-len"
@@ -173,19 +173,21 @@ export function BookingLinkCreateDialog(props: BookingLinkCreateDialogProps) {
                   setForm({ ...form, length: Number(e.currentTarget.value) })
                 }
               />
-              <span className="text-sm text-muted-foreground">minutes</span>
+              <span className="text-sm text-muted-foreground">
+                {t("minutes")}
+              </span>
             </div>
           </div>
         </div>
         <DialogFooter>
           <Button variant="outline" onClick={() => onOpenChange(false)}>
-            Cancel
+            {t("cancel")}
           </Button>
           <Button
             onClick={submit}
             disabled={!form.title || !form.slug || submitting}
           >
-            {submitting ? "Saving…" : submitLabel}
+            {submitting ? t("saving") : submitLabel}
           </Button>
         </DialogFooter>
       </DialogContent>

package/src/react/components/booking-links/ConferencingSelector.tsx

@@ -41,6 +41,7 @@ import {
   SelectItem,
   SelectTrigger,
 } from "@/components/ui/select";
+import { useSchedulingT } from "../../i18n.js";
 
 export type ConferencingType = "none" | "google_meet" | "zoom" | "custom";
 
@@ -65,37 +66,38 @@ export interface ConferencingSelectorProps {
 
 const OPTIONS: {
   type: ConferencingType;
-  label: string;
-  description: string;
+  labelKey: Parameters<ReturnType<typeof useSchedulingT>>[0];
+  descriptionKey: Parameters<ReturnType<typeof useSchedulingT>>[0];
   Icon: ComponentType<{ className?: string }>;
 }[] = [
   {
     type: "none",
-    label: "No conferencing",
-    description: "In-person or other",
+    labelKey: "noConferencing",
+    descriptionKey: "inPersonOrOther",
     Icon: IconVideoOff,
   },
   {
     type: "google_meet",
-    label: "Google Meet",
-    description: "Auto-generate a Meet link",
+    labelKey: "googleMeet",
+    descriptionKey: "googleMeetDescription",
     Icon: IconBrandGoogle,
   },
   {
     type: "zoom",
-    label: "Zoom",
-    description: "Auto-create a meeting per booking",
+    labelKey: "zoom",
+    descriptionKey: "zoomDescription",
     Icon: IconBrandZoom,
   },
   {
     type: "custom",
-    label: "Custom link",
-    description: "Paste any meeting URL",
+    labelKey: "customLink",
+    descriptionKey: "customLinkDescription",
     Icon: IconLink,
   },
 ];
 
 export function ConferencingSelector(props: ConferencingSelectorProps) {
+  const t = useSchedulingT();
   const id = useId();
   const {
     value,
@@ -122,7 +124,7 @@ export function ConferencingSelector(props: ConferencingSelectorProps) {
       {!hideLabel && (
         <Label className="flex items-center gap-1.5">
           <IconVideo className="h-4 w-4" />
-          Conferencing
+          {t("conferencing")}
         </Label>
       )}
 
@@ -141,7 +143,7 @@ export function ConferencingSelector(props: ConferencingSelectorProps) {
             <div className="min-w-0">
               <div className="flex items-center gap-2">
                 <span className="truncate font-medium">
-                  {selectedOption.label}
+                  {t(selectedOption.labelKey)}
                 </span>
                 {selectedStatus === "connected" &&
                   selectedOption.type !== "none" &&
@@ -151,14 +153,16 @@ export function ConferencingSelector(props: ConferencingSelectorProps) {
                       className="h-5 gap-1 text-[10px] font-normal"
                     >
                       <IconCheck className="h-3 w-3" />
-                      Connected
+                      {t("connected")}
                     </Badge>
                   )}
               </div>
               <p className="truncate text-xs text-muted-foreground">
                 {selectedStatus === "not-configured"
-                  ? `${selectedOption.label} is not configured on this server.`
-                  : selectedOption.description}
+                  ? t("providerNotConfigured", {
+                      provider: t(selectedOption.labelKey),
+                    })
+                  : t(selectedOption.descriptionKey)}
               </p>
             </div>
           </div>
@@ -178,19 +182,21 @@ export function ConferencingSelector(props: ConferencingSelectorProps) {
                   <opt.Icon className="mt-0.5 h-4 w-4 shrink-0" />
                   <div className="min-w-0">
                     <div className="flex items-center gap-2">
-                      <span className="font-medium">{opt.label}</span>
+                      <span className="font-medium">{t(opt.labelKey)}</span>
                       {status === "connected" &&
                         opt.type !== "none" &&
                         opt.type !== "custom" && (
                           <span className="text-[10px] text-muted-foreground">
-                            Connected
+                            {t("connected")}
                           </span>
                         )}
                     </div>
                     <p className="text-xs text-muted-foreground">
                       {isUnavailable
-                        ? `${opt.label} needs server OAuth credentials before it can be used.`
-                        : opt.description}
+                        ? t("providerNeedsCredentials", {
+                            provider: t(opt.labelKey),
+                          })
+                        : t(opt.descriptionKey)}
                     </p>
                   </div>
                 </div>
@@ -205,10 +211,9 @@ export function ConferencingSelector(props: ConferencingSelectorProps) {
         <div className="rounded-md border border-border/60 bg-muted/30 p-3">
           <div className="flex flex-wrap items-center justify-between gap-2">
             <div className="min-w-0 flex-1">
-              <p className="text-sm font-medium">Connect your Zoom account</p>
+              <p className="text-sm font-medium">{t("connectZoomAccount")}</p>
               <p className="text-xs text-muted-foreground">
-                We'll create a real Zoom meeting for every booking — no need to
-                paste a personal link.
+                {t("connectZoomAccountDescription")}
               </p>
             </div>
             <Button
@@ -218,13 +223,12 @@ export function ConferencingSelector(props: ConferencingSelectorProps) {
               disabled={zoomStatus === "not-configured"}
             >
               <IconBrandZoom className="mr-1.5 h-4 w-4" />
-              Connect Zoom
+              {t("connectZoom")}
             </Button>
           </div>
           {zoomStatus === "not-configured" && (
             <p className="mt-2 text-[11px] text-muted-foreground">
-              Ask your admin to set <code>ZOOM_CLIENT_ID</code> and{" "}
-              <code>ZOOM_CLIENT_SECRET</code> to enable Zoom OAuth.
+              {t("zoomNotConfigured")}
             </p>
           )}
         </div>
@@ -237,10 +241,11 @@ export function ConferencingSelector(props: ConferencingSelectorProps) {
           <div className="rounded-md border border-border/60 bg-muted/30 p-3">
             <div className="flex flex-wrap items-center justify-between gap-2">
               <div className="min-w-0 flex-1">
-                <p className="text-sm font-medium">Connect Google Calendar</p>
+                <p className="text-sm font-medium">
+                  {t("connectGoogleCalendar")}
+                </p>
                 <p className="text-xs text-muted-foreground">
-                  Meet links are auto-generated when the calendar event is
-                  created.
+                  {t("connectGoogleCalendarDescription")}
                 </p>
               </div>
               <Button
@@ -251,7 +256,7 @@ export function ConferencingSelector(props: ConferencingSelectorProps) {
                 disabled={googleStatus === "not-configured"}
               >
                 <IconBrandGoogle className="mr-1.5 h-4 w-4" />
-                Connect Google
+                {t("connectGoogle")}
               </Button>
             </div>
           </div>
@@ -261,7 +266,7 @@ export function ConferencingSelector(props: ConferencingSelectorProps) {
       {value.type === "custom" && (
         <div className="space-y-1.5">
           <Label htmlFor={`${id}-url`} className="text-xs">
-            Meeting URL
+            {t("meetingUrl")}
           </Label>
           <Input
             id={`${id}-url`}