@qite/tide-booking-component 1.4.123 → 1.4.124

package/src/booking-wizard/use-offer-printer.ts

@@ -1,108 +1,108 @@
-import { useCallback, useContext, useState } from 'react';
-import SettingsContext from './settings-context';
-import { buildTideClientConfig } from '../shared/utils/tide-api-utils';
-import { book, print } from '@qite/tide-client';
-
-import type {
-  BookingPackage,
-  BookingPackageBookRequest,
-  BookingPackageDossier,
-  BookingPackageRequest,
-  AgentPrintActionRequest,
-  Pax,
-  BookingPackagePax
-} from '@qite/tide-client/build/types';
-
-export interface UseOfferPrinterArgs {
-  bookingPackage?: BookingPackage;
-  getPax: () => Pax[] | undefined;
-  tagIds?: number[];
-  printActionId?: number | null;
-  onPrinted?: (pdfUrl: string) => void;
-}
-
-export function useOfferPrinter({ bookingPackage, getPax, tagIds = [], printActionId = null, onPrinted }: UseOfferPrinterArgs) {
-  const settings = useContext(SettingsContext);
-  if (!settings) throw new Error('useOfferPrinter must be used inside <BookingWizard>');
-
-  const { language, officeId } = settings;
-  const agentId = (settings as any).agentAdressId;
-
-  if (typeof agentId !== 'number' || agentId <= 0) {
-    throw new Error('Missing agentAdressId in wizard settings');
-  }
-
-  const [stage, setStage] = useState<'idle' | 'creating' | 'printing'>('idle');
-  const loading = stage !== 'idle';
-
-  const createOffer = useCallback(async (): Promise<BookingPackageDossier> => {
-    const paxRaw = getPax();
-    if (!bookingPackage || !paxRaw?.length) {
-      throw new Error('Missing booking package or pax');
-    }
-
-    const pax = paxRaw as unknown as BookingPackagePax[];
-
-    const request: BookingPackageRequest<BookingPackageBookRequest> = {
-      officeId,
-      agentId,
-      payload: {
-        package: bookingPackage,
-        status: 0,
-        pax,
-        nonTravelPax: [],
-        notifications: [],
-        tagIds,
-        customerRequests: []
-      }
-    };
-
-    const cfg = buildTideClientConfig();
-    return book(cfg, request, undefined, language);
-  }, [agentId, bookingPackage, getPax, language, officeId, tagIds]);
-
-  const languageData = [
-    { code: 'nl-BE', tideId: 1 },
-    { code: 'fr-BE', tideId: 2 },
-    { code: 'en-GB', tideId: 3 }
-  ];
-
-  function getTideLanguageId(code: string) {
-    return languageData.find((l) => l.code === code)?.tideId || 1;
-  }
-
-  const printOffer = useCallback(
-    async (offer: BookingPackageDossier) => {
-      const cfg = buildTideClientConfig();
-
-      const req: AgentPrintActionRequest = {
-        id: printActionId ?? 0,
-        dossierNumber: (offer as any).dossierNumber ?? (offer as any).number,
-        languageId: getTideLanguageId(language)
-      };
-
-      const res = await print(cfg, req);
-      const buf = await res.arrayBuffer();
-      const url = URL.createObjectURL(new Blob([buf], { type: 'application/pdf' }));
-      onPrinted?.(url);
-      window.open(url);
-    },
-    [language, onPrinted]
-  );
-
-  const handlePrint = useCallback(async () => {
-    try {
-      setStage('creating');
-      const offer = await createOffer();
-      setStage('printing');
-      await printOffer(offer);
-    } catch (err) {
-      console.error('Offer print failed:', err);
-      throw err;
-    } finally {
-      setStage('idle');
-    }
-  }, [createOffer, printOffer]);
-
-  return { handlePrint, loading, stage };
-}
+import { useCallback, useContext, useState } from 'react';
+import SettingsContext from './settings-context';
+import { buildTideClientConfig } from '../shared/utils/tide-api-utils';
+import { book, print } from '@qite/tide-client';
+
+import type {
+  BookingPackage,
+  BookingPackageBookRequest,
+  BookingPackageDossier,
+  BookingPackageRequest,
+  AgentPrintActionRequest,
+  Pax,
+  BookingPackagePax
+} from '@qite/tide-client/build/types';
+
+export interface UseOfferPrinterArgs {
+  bookingPackage?: BookingPackage;
+  getPax: () => Pax[] | undefined;
+  tagIds?: number[];
+  printActionId?: number | null;
+  onPrinted?: (pdfUrl: string) => void;
+}
+
+export function useOfferPrinter({ bookingPackage, getPax, tagIds = [], printActionId = null, onPrinted }: UseOfferPrinterArgs) {
+  const settings = useContext(SettingsContext);
+  if (!settings) throw new Error('useOfferPrinter must be used inside <BookingWizard>');
+
+  const { language, officeId } = settings;
+  const agentId = (settings as any).agentAdressId;
+
+  if (typeof agentId !== 'number' || agentId <= 0) {
+    throw new Error('Missing agentAdressId in wizard settings');
+  }
+
+  const [stage, setStage] = useState<'idle' | 'creating' | 'printing'>('idle');
+  const loading = stage !== 'idle';
+
+  const createOffer = useCallback(async (): Promise<BookingPackageDossier> => {
+    const paxRaw = getPax();
+    if (!bookingPackage || !paxRaw?.length) {
+      throw new Error('Missing booking package or pax');
+    }
+
+    const pax = paxRaw as unknown as BookingPackagePax[];
+
+    const request: BookingPackageRequest<BookingPackageBookRequest> = {
+      officeId,
+      agentId,
+      payload: {
+        package: bookingPackage,
+        status: 0,
+        pax,
+        nonTravelPax: [],
+        notifications: [],
+        tagIds,
+        customerRequests: []
+      }
+    };
+
+    const cfg = buildTideClientConfig();
+    return book(cfg, request, undefined, language);
+  }, [agentId, bookingPackage, getPax, language, officeId, tagIds]);
+
+  const languageData = [
+    { code: 'nl-BE', tideId: 1 },
+    { code: 'fr-BE', tideId: 2 },
+    { code: 'en-GB', tideId: 3 }
+  ];
+
+  function getTideLanguageId(code: string) {
+    return languageData.find((l) => l.code === code)?.tideId || 1;
+  }
+
+  const printOffer = useCallback(
+    async (offer: BookingPackageDossier) => {
+      const cfg = buildTideClientConfig();
+
+      const req: AgentPrintActionRequest = {
+        id: printActionId ?? 0,
+        dossierNumber: (offer as any).dossierNumber ?? (offer as any).number,
+        languageId: getTideLanguageId(language)
+      };
+
+      const res = await print(cfg, req);
+      const buf = await res.arrayBuffer();
+      const url = URL.createObjectURL(new Blob([buf], { type: 'application/pdf' }));
+      onPrinted?.(url);
+      window.open(url);
+    },
+    [language, onPrinted]
+  );
+
+  const handlePrint = useCallback(async () => {
+    try {
+      setStage('creating');
+      const offer = await createOffer();
+      setStage('printing');
+      await printOffer(offer);
+    } catch (err) {
+      console.error('Offer print failed:', err);
+      throw err;
+    } finally {
+      setStage('idle');
+    }
+  }, [createOffer, printOffer]);
+
+  return { handlePrint, loading, stage };
+}

package/src/content/components/LanguageSwitcher.tsx

@@ -1,158 +1,158 @@
-import React, { useEffect, useRef, useState } from 'react';
-
-type Lang = { code: string; label: string };
-
-interface LanguageSwitcherProps {
-  value?: string;
-  languages?: Lang[];
-  onChange?: (code: string) => void;
-}
-
-const DEFAULT_LANGUAGES: Lang[] = [
-  { code: 'EN', label: 'English' },
-  { code: 'NL', label: 'Nederlands' },
-  { code: 'FR', label: 'Français' },
-  { code: 'DE', label: 'Deutsch' }
-];
-
-const LanguageSwitcher: React.FC<LanguageSwitcherProps> = ({ value = 'EN', languages = DEFAULT_LANGUAGES, onChange }) => {
-  const [open, setOpen] = useState(false);
-  const [current, setCurrent] = useState(value);
-  const rootRef = useRef<HTMLDivElement | null>(null);
-  const buttonRef = useRef<HTMLButtonElement | null>(null);
-  const menuId = 'language-switcher-menu';
-
-  // Keep in sync if parent controls value
-  useEffect(() => setCurrent(value), [value]);
-
-  // Close on outside click
-  useEffect(() => {
-    const onPointerDown = (e: PointerEvent) => {
-      if (!open) return;
-      const target = e.target as Node;
-      if (rootRef.current && !rootRef.current.contains(target)) setOpen(false);
-    };
-    window.addEventListener('pointerdown', onPointerDown);
-    return () => window.removeEventListener('pointerdown', onPointerDown);
-  }, [open]);
-
-  // Close on ESC
-  useEffect(() => {
-    const onKeyDown = (e: KeyboardEvent) => {
-      if (!open) return;
-      if (e.key === 'Escape') {
-        setOpen(false);
-        buttonRef.current?.focus();
-      }
-    };
-    window.addEventListener('keydown', onKeyDown);
-    return () => window.removeEventListener('keydown', onKeyDown);
-  }, [open]);
-
-  const selectLang = (code: string) => {
-    setCurrent(code);
-    onChange?.(code);
-    setOpen(false);
-    buttonRef.current?.focus();
-  };
-
-  const onButtonKeyDown: React.KeyboardEventHandler<HTMLButtonElement> = (e) => {
-    if (e.key === 'Enter' || e.key === ' ') {
-      e.preventDefault();
-      setOpen((v) => !v);
-    }
-    if (e.key === 'ArrowDown') {
-      e.preventDefault();
-      setOpen(true);
-      // focus first option next tick
-      requestAnimationFrame(() => {
-        rootRef.current?.querySelector<HTMLButtonElement>('[role="menuitemradio"]')?.focus();
-      });
-    }
-  };
-
-  const onMenuKeyDown: React.KeyboardEventHandler<HTMLDivElement> = (e) => {
-    const items = Array.from(rootRef.current?.querySelectorAll<HTMLButtonElement>('[role="menuitemradio"]') ?? []);
-    if (!items.length) return;
-
-    const idx = items.indexOf(document.activeElement as HTMLButtonElement);
-
-    if (e.key === 'ArrowDown') {
-      e.preventDefault();
-      items[(idx + 1 + items.length) % items.length].focus();
-    } else if (e.key === 'ArrowUp') {
-      e.preventDefault();
-      items[(idx - 1 + items.length) % items.length].focus();
-    } else if (e.key === 'Home') {
-      e.preventDefault();
-      items[0].focus();
-    } else if (e.key === 'End') {
-      e.preventDefault();
-      items[items.length - 1].focus();
-    }
-  };
-
-  return (
-    <div className="nav__subnav__languages" ref={rootRef}>
-      {/* <svg
-        className="nav__subnav__languages__icon"
-        xmlns="http://www.w3.org/2000/svg"
-        width="16"
-        height="16"
-        fill="currentColor"
-        viewBox="0 0 16 16"
-        aria-hidden="true"
-      >
-        <path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-6.468 4.146h12.936A7 7 0 0 0 8 1zm-6.218 5.5a13.334 13.334 0 0 1 .664-1.75H13.55c.24.56.42 1.17.528 1.75H1.782zm-.57 1.5h13.576a13.334 13.334 0 0 1-.664 1.75H2.208a13.334 13.334 0 0 1-.664-1.75zm.57 3.5c.796 2.07 2.39 3.5 4.22 3.5s3.424-1.43 4.22-3.5H1.782zM8 15a7 7 0 0 0 6.468-4.146H1.532A7 7 0 0 0 8 15z" />
-      </svg> */}
-
-      <button
-        ref={buttonRef}
-        type="button"
-        className="nav__subnav__languages__button"
-        aria-haspopup="menu"
-        aria-expanded={open}
-        aria-controls={menuId}
-        onClick={() => setOpen((v) => !v)}
-        onKeyDown={onButtonKeyDown}>
-        <span className="nav__subnav__languages__value">{current}</span>
-        <svg
-          className="nav__subnav__languages__chevron"
-          xmlns="http://www.w3.org/2000/svg"
-          width="14"
-          height="14"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          strokeWidth="2"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          aria-hidden="true">
-          <path d="m6 9 6 6 6-6" />
-        </svg>
-      </button>
-
-      <div
-        id={menuId}
-        className={`nav__subnav__languages__dropdown ${open ? 'is-open' : ''}`}
-        role="menu"
-        aria-label="Select language"
-        onKeyDown={onMenuKeyDown}>
-        {languages.map((l) => (
-          <button
-            key={l.code}
-            type="button"
-            className={`nav__subnav__languages__option ${l.code === current ? 'is-active' : ''}`}
-            role="menuitemradio"
-            aria-checked={l.code === current}
-            onClick={() => selectLang(l.code)}>
-            <span className="nav__subnav__languages__option__code">{l.code}</span>
-            <span className="nav__subnav__languages__option__label">{l.label}</span>
-          </button>
-        ))}
-      </div>
-    </div>
-  );
-};
-
-export default LanguageSwitcher;
+import React, { useEffect, useRef, useState } from 'react';
+
+type Lang = { code: string; label: string };
+
+interface LanguageSwitcherProps {
+  value?: string;
+  languages?: Lang[];
+  onChange?: (code: string) => void;
+}
+
+const DEFAULT_LANGUAGES: Lang[] = [
+  { code: 'EN', label: 'English' },
+  { code: 'NL', label: 'Nederlands' },
+  { code: 'FR', label: 'Français' },
+  { code: 'DE', label: 'Deutsch' }
+];
+
+const LanguageSwitcher: React.FC<LanguageSwitcherProps> = ({ value = 'EN', languages = DEFAULT_LANGUAGES, onChange }) => {
+  const [open, setOpen] = useState(false);
+  const [current, setCurrent] = useState(value);
+  const rootRef = useRef<HTMLDivElement | null>(null);
+  const buttonRef = useRef<HTMLButtonElement | null>(null);
+  const menuId = 'language-switcher-menu';
+
+  // Keep in sync if parent controls value
+  useEffect(() => setCurrent(value), [value]);
+
+  // Close on outside click
+  useEffect(() => {
+    const onPointerDown = (e: PointerEvent) => {
+      if (!open) return;
+      const target = e.target as Node;
+      if (rootRef.current && !rootRef.current.contains(target)) setOpen(false);
+    };
+    window.addEventListener('pointerdown', onPointerDown);
+    return () => window.removeEventListener('pointerdown', onPointerDown);
+  }, [open]);
+
+  // Close on ESC
+  useEffect(() => {
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (!open) return;
+      if (e.key === 'Escape') {
+        setOpen(false);
+        buttonRef.current?.focus();
+      }
+    };
+    window.addEventListener('keydown', onKeyDown);
+    return () => window.removeEventListener('keydown', onKeyDown);
+  }, [open]);
+
+  const selectLang = (code: string) => {
+    setCurrent(code);
+    onChange?.(code);
+    setOpen(false);
+    buttonRef.current?.focus();
+  };
+
+  const onButtonKeyDown: React.KeyboardEventHandler<HTMLButtonElement> = (e) => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      setOpen((v) => !v);
+    }
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      setOpen(true);
+      // focus first option next tick
+      requestAnimationFrame(() => {
+        rootRef.current?.querySelector<HTMLButtonElement>('[role="menuitemradio"]')?.focus();
+      });
+    }
+  };
+
+  const onMenuKeyDown: React.KeyboardEventHandler<HTMLDivElement> = (e) => {
+    const items = Array.from(rootRef.current?.querySelectorAll<HTMLButtonElement>('[role="menuitemradio"]') ?? []);
+    if (!items.length) return;
+
+    const idx = items.indexOf(document.activeElement as HTMLButtonElement);
+
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      items[(idx + 1 + items.length) % items.length].focus();
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      items[(idx - 1 + items.length) % items.length].focus();
+    } else if (e.key === 'Home') {
+      e.preventDefault();
+      items[0].focus();
+    } else if (e.key === 'End') {
+      e.preventDefault();
+      items[items.length - 1].focus();
+    }
+  };
+
+  return (
+    <div className="nav__subnav__languages" ref={rootRef}>
+      {/* <svg
+        className="nav__subnav__languages__icon"
+        xmlns="http://www.w3.org/2000/svg"
+        width="16"
+        height="16"
+        fill="currentColor"
+        viewBox="0 0 16 16"
+        aria-hidden="true"
+      >
+        <path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-6.468 4.146h12.936A7 7 0 0 0 8 1zm-6.218 5.5a13.334 13.334 0 0 1 .664-1.75H13.55c.24.56.42 1.17.528 1.75H1.782zm-.57 1.5h13.576a13.334 13.334 0 0 1-.664 1.75H2.208a13.334 13.334 0 0 1-.664-1.75zm.57 3.5c.796 2.07 2.39 3.5 4.22 3.5s3.424-1.43 4.22-3.5H1.782zM8 15a7 7 0 0 0 6.468-4.146H1.532A7 7 0 0 0 8 15z" />
+      </svg> */}
+
+      <button
+        ref={buttonRef}
+        type="button"
+        className="nav__subnav__languages__button"
+        aria-haspopup="menu"
+        aria-expanded={open}
+        aria-controls={menuId}
+        onClick={() => setOpen((v) => !v)}
+        onKeyDown={onButtonKeyDown}>
+        <span className="nav__subnav__languages__value">{current}</span>
+        <svg
+          className="nav__subnav__languages__chevron"
+          xmlns="http://www.w3.org/2000/svg"
+          width="14"
+          height="14"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          aria-hidden="true">
+          <path d="m6 9 6 6 6-6" />
+        </svg>
+      </button>
+
+      <div
+        id={menuId}
+        className={`nav__subnav__languages__dropdown ${open ? 'is-open' : ''}`}
+        role="menu"
+        aria-label="Select language"
+        onKeyDown={onMenuKeyDown}>
+        {languages.map((l) => (
+          <button
+            key={l.code}
+            type="button"
+            className={`nav__subnav__languages__option ${l.code === current ? 'is-active' : ''}`}
+            role="menuitemradio"
+            aria-checked={l.code === current}
+            onClick={() => selectLang(l.code)}>
+            <span className="nav__subnav__languages__option__code">{l.code}</span>
+            <span className="nav__subnav__languages__option__label">{l.label}</span>
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default LanguageSwitcher;

package/src/content/components/accordion.tsx

@@ -1,30 +1,30 @@
-import React from 'react';
-import Icon from '../../shared/components/icon';
-
-interface AccordionProps {
-  summary: React.ReactNode;
-  children: React.ReactNode;
-  defaultOpen?: boolean;
-  className?: string;
-}
-
-export default function Accordion({ summary, children, defaultOpen = false, className = '' }: AccordionProps) {
-  const [open, setOpen] = React.useState(defaultOpen);
-
-  return (
-    <div className={['accordion', open && 'accordion--open', className].filter(Boolean).join(' ')}>
-      <button className="accordion__trigger" type="button" aria-expanded={open} onClick={() => setOpen((v) => !v)}>
-        <span>{summary}</span>
-        <span className="accordion__icon" aria-hidden>
-          <Icon name="ui-chevron" width={20} height={20} />
-        </span>
-      </button>
-
-      <div className="accordion__panel">
-        <div className="accordion__panelInner">
-          <div className="accordion__content">{children}</div>
-        </div>
-      </div>
-    </div>
-  );
-}
+import React from 'react';
+import Icon from '../../shared/components/icon';
+
+interface AccordionProps {
+  summary: React.ReactNode;
+  children: React.ReactNode;
+  defaultOpen?: boolean;
+  className?: string;
+}
+
+export default function Accordion({ summary, children, defaultOpen = false, className = '' }: AccordionProps) {
+  const [open, setOpen] = React.useState(defaultOpen);
+
+  return (
+    <div className={['accordion', open && 'accordion--open', className].filter(Boolean).join(' ')}>
+      <button className="accordion__trigger" type="button" aria-expanded={open} onClick={() => setOpen((v) => !v)}>
+        <span>{summary}</span>
+        <span className="accordion__icon" aria-hidden>
+          <Icon name="ui-chevron" width={20} height={20} />
+        </span>
+      </button>
+
+      <div className="accordion__panel">
+        <div className="accordion__panelInner">
+          <div className="accordion__content">{children}</div>
+        </div>
+      </div>
+    </div>
+  );
+}