@ticketboothapp/booking 0.1.3 → 0.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ticketboothapp/booking",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "private": false,
   "sideEffects": false,
   "publishConfig": {

package/src/components/BookingWidget.tsx

@@ -0,0 +1,63 @@
+'use client';
+
+import { useMemo, type CSSProperties } from 'react';
+import type { BookingFlowUiOptions } from './booking/booking-flow-ui';
+import type { BookingSourceMetadata } from '../lib/booking/source-metadata';
+import type { BookingAppMode, BookingAppPermissions, ManageParams } from '../contexts/BookingAppContext';
+
+export interface BookingWidgetProps {
+  initialProductId?: string;
+  authToken?: string | null;
+  onBookingSuccess?: (data: { reservationReference: string; sessionId?: string }) => void;
+  onBack?: () => void;
+  className?: string;
+  mode?: BookingAppMode;
+  permissions?: Partial<BookingAppPermissions>;
+  googleMapsApiKey?: string;
+  onShowManage?: (params: ManageParams) => void;
+  getSuccessUrl?: (params: { reservationRef: string; lastName: string; focusDate?: string }) => string;
+  showLanguageSelector?: boolean;
+  flowUi?: BookingFlowUiOptions;
+  bookingSourceAttribution?: Partial<BookingSourceMetadata>;
+}
+
+const getBookingHost = (): string => process.env.NEXT_PUBLIC_BOOKING_WIDGET_URL || 'https://booking.viaviamorainelake.com';
+
+export function BookingWidget({
+  initialProductId,
+  className = '',
+  mode = 'standalone',
+  showLanguageSelector = true,
+  googleMapsApiKey,
+  flowUi,
+  bookingSourceAttribution,
+}: BookingWidgetProps) {
+  const src = useMemo(() => {
+    const url = new URL('/', getBookingHost());
+    if (initialProductId) url.searchParams.set('productId', initialProductId);
+    if (!showLanguageSelector) url.searchParams.set('showLanguageSelector', '0');
+    if (googleMapsApiKey) url.searchParams.set('gmapsKey', googleMapsApiKey);
+    if (mode) url.searchParams.set('embedMode', mode);
+    if (flowUi?.partnerDeferredInvoice) url.searchParams.set('partnerDeferredInvoice', '1');
+    if (bookingSourceAttribution?.utmSource) url.searchParams.set('utm_source', bookingSourceAttribution.utmSource);
+    if (bookingSourceAttribution?.utmCampaign) url.searchParams.set('utm_campaign', bookingSourceAttribution.utmCampaign);
+    if (bookingSourceAttribution?.utmMedium) url.searchParams.set('utm_medium', bookingSourceAttribution.utmMedium);
+    if (bookingSourceAttribution?.partnerId) url.searchParams.set('partnerId', bookingSourceAttribution.partnerId);
+    if (bookingSourceAttribution?.agentId) url.searchParams.set('agentId', bookingSourceAttribution.agentId);
+    return url.toString();
+  }, [bookingSourceAttribution, flowUi?.partnerDeferredInvoice, googleMapsApiKey, initialProductId, mode, showLanguageSelector]);
+
+  const frameStyle: CSSProperties = {
+    width: '100%',
+    minHeight: '900px',
+    border: 0,
+    display: 'block',
+    backgroundColor: 'transparent',
+  };
+
+  return (
+    <div className={className}>
+      <iframe title="Customer booking" src={src} style={frameStyle} loading="lazy" />
+    </div>
+  );
+}

package/src/components/ManageBookingView.tsx

@@ -0,0 +1,73 @@
+'use client';
+
+import { useMemo, type CSSProperties } from 'react';
+
+export interface StaffBookingAttribution {
+  reportingSource: string;
+  partnerBookingPortal: boolean;
+  partnerId?: string | null;
+  partnerName?: string | null;
+  agentId?: string | null;
+  agentDisplay?: string | null;
+  commissionRate?: number | null;
+  commissionBaseAmount?: number | null;
+  commissionAmount?: number | null;
+  bookingCurrency: string;
+  commissionUsesPartnerRate?: boolean;
+}
+
+export interface ManageBookingViewProps {
+  initialRef?: string;
+  initialLastName?: string;
+  initialReservationRef?: string;
+  initialPaymentSuccess?: boolean;
+  replaceUrl?: (url: string) => void;
+  onClose?: () => void;
+  showCloseButton?: boolean;
+  fetchStaffAttribution?: (bookingReference: string) => Promise<StaffBookingAttribution | null>;
+}
+
+const getBookingHost = (): string => process.env.NEXT_PUBLIC_BOOKING_WIDGET_URL || 'https://booking.viaviamorainelake.com';
+
+export function ManageBookingView({
+  initialRef = '',
+  initialLastName = '',
+  initialReservationRef = '',
+  initialPaymentSuccess = false,
+  onClose,
+  showCloseButton = true,
+}: ManageBookingViewProps) {
+  const src = useMemo(() => {
+    const url = new URL('/manage-booking', getBookingHost());
+    if (initialRef) url.searchParams.set('ref', initialRef);
+    if (initialLastName) url.searchParams.set('lastName', initialLastName);
+    if (initialReservationRef) url.searchParams.set('reservationRef', initialReservationRef);
+    if (initialPaymentSuccess) url.searchParams.set('payment', 'balance_success');
+    return url.toString();
+  }, [initialLastName, initialPaymentSuccess, initialRef, initialReservationRef]);
+
+  const frameStyle: CSSProperties = {
+    width: '100%',
+    minHeight: '700px',
+    border: 0,
+    display: 'block',
+    backgroundColor: 'transparent',
+  };
+
+  return (
+    <div className="w-full">
+      {onClose && showCloseButton ? (
+        <div className="mb-2 flex justify-end">
+          <button
+            type="button"
+            onClick={onClose}
+            className="rounded border border-stone-300 px-3 py-1 text-sm hover:bg-stone-100"
+          >
+            Close
+          </button>
+        </div>
+      ) : null}
+      <iframe title="Manage booking" src={src} style={frameStyle} loading="lazy" />
+    </div>
+  );
+}

package/src/index.ts

@@ -78,3 +78,14 @@ export {
   type PartnerBookingPageWithBrowserMetadataProps,
   type PartnerBookingPageRenderProps,
 } from './components/partner/PartnerBookingPageWithBrowserMetadata';
+
+export {
+  BookingWidget,
+  type BookingWidgetProps,
+} from './components/BookingWidget';
+
+export {
+  ManageBookingView,
+  type ManageBookingViewProps,
+  type StaffBookingAttribution,
+} from './components/ManageBookingView';