@fanfare-io/fanfare-sdk-react 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +202 -0
- package/README.md +58 -0
- package/dist/components/auth/access-code-input.d.ts +24 -0
- package/dist/components/auth/auth-form.d.ts +39 -0
- package/dist/components/auth/auth-input.d.ts +28 -0
- package/dist/components/auth/email-input.d.ts +21 -0
- package/dist/components/auth/index.d.ts +19 -0
- package/dist/components/auth/otp-input.d.ts +32 -0
- package/dist/components/auth/phone-input.d.ts +22 -0
- package/dist/components/compositions/access-code-form.d.ts +29 -0
- package/dist/components/compositions/challenge-gate.d.ts +23 -0
- package/dist/components/compositions/ended-module.d.ts +26 -0
- package/dist/components/compositions/error-view.d.ts +58 -0
- package/dist/components/compositions/granted-panel.d.ts +35 -0
- package/dist/components/compositions/index.d.ts +15 -0
- package/dist/components/compositions/journey-gate.d.ts +48 -0
- package/dist/components/compositions/outcome-panel.d.ts +11 -0
- package/dist/components/index.d.ts +15 -0
- package/dist/components/journey/experience-journey-controller.d.ts +14 -0
- package/dist/components/journey/experience-journey-skeleton.d.ts +21 -0
- package/dist/components/module/alert-panel.d.ts +13 -0
- package/dist/components/module/index.d.ts +19 -0
- package/dist/components/module/info-panel.d.ts +9 -0
- package/dist/components/module/outcome-reason.d.ts +27 -0
- package/dist/components/module/panel-heading.d.ts +34 -0
- package/dist/components/module/panel-layout.d.ts +28 -0
- package/dist/components/primitives/badge.d.ts +18 -0
- package/dist/components/primitives/button.d.ts +23 -0
- package/dist/components/primitives/card.d.ts +20 -0
- package/dist/components/primitives/countdown.d.ts +42 -0
- package/dist/components/primitives/fade-presence.d.ts +28 -0
- package/dist/components/primitives/fanfare-logo.d.ts +12 -0
- package/dist/components/primitives/index.d.ts +30 -0
- package/dist/components/primitives/input.d.ts +46 -0
- package/dist/components/primitives/progress.d.ts +16 -0
- package/dist/components/primitives/skeleton.d.ts +9 -0
- package/dist/components/primitives/spinner.d.ts +10 -0
- package/dist/components/primitives/transition.d.ts +34 -0
- package/dist/components/shadow-dom-preview.d.ts +43 -0
- package/dist/components/widgets/appointment/appointment-booking-details.d.ts +18 -0
- package/dist/components/widgets/appointment/appointment-checked-in-view.d.ts +12 -0
- package/dist/components/widgets/appointment/appointment-day-tabs.d.ts +21 -0
- package/dist/components/widgets/appointment/appointment-slot-grid.d.ts +12 -0
- package/dist/components/widgets/appointment/appointment-slot-item.d.ts +12 -0
- package/dist/components/widgets/appointment/appointment-slot-picker.d.ts +16 -0
- package/dist/components/widgets/auction/auction-actions.d.ts +38 -0
- package/dist/components/widgets/auction/auction-bid-display.d.ts +35 -0
- package/dist/components/widgets/auction/index.d.ts +7 -0
- package/dist/components/widgets/draw/draw-actions.d.ts +40 -0
- package/dist/components/widgets/draw/index.d.ts +6 -0
- package/dist/components/widgets/experience-widget.d.ts +141 -0
- package/dist/components/widgets/index.d.ts +11 -0
- package/dist/components/widgets/internal/appointment-module.d.ts +28 -0
- package/dist/components/widgets/internal/auction-module.d.ts +33 -0
- package/dist/components/widgets/internal/draw-module.d.ts +43 -0
- package/dist/components/widgets/internal/index.d.ts +15 -0
- package/dist/components/widgets/internal/loading-view.d.ts +17 -0
- package/dist/components/widgets/internal/queue-module.d.ts +27 -0
- package/dist/components/widgets/internal/start-view.d.ts +25 -0
- package/dist/components/widgets/internal/timed-release-module.d.ts +27 -0
- package/dist/components/widgets/internal/upcoming-module.d.ts +29 -0
- package/dist/components/widgets/internal/waitlist-view.d.ts +18 -0
- package/dist/components/widgets/queue/index.d.ts +6 -0
- package/dist/components/widgets/queue/queue-actions.d.ts +36 -0
- package/dist/components/widgets/timed-release/index.d.ts +6 -0
- package/dist/components/widgets/timed-release/timed-release-actions.d.ts +38 -0
- package/dist/components/widgets/waitlist/index.d.ts +6 -0
- package/dist/components/widgets/waitlist/waitlist-actions.d.ts +40 -0
- package/dist/context.d.ts +5 -0
- package/dist/hooks/use-appointment-slots.d.ts +13 -0
- package/dist/hooks/use-auth.d.ts +22 -0
- package/dist/hooks/use-experience-journey.d.ts +20 -0
- package/dist/hooks/use-fanfare.d.ts +11 -0
- package/dist/hooks/use-journey-snapshot.d.ts +8 -0
- package/dist/hooks/use-nanostore.d.ts +6 -0
- package/dist/i18n/i18n-context.d.ts +73 -0
- package/dist/i18n/i18n-provider.d.ts +67 -0
- package/dist/i18n/index.d.ts +13 -0
- package/dist/index.d.ts +53 -0
- package/dist/index.js +4918 -0
- package/dist/internal-sdk.d.ts +2 -0
- package/dist/lib/animations.d.ts +94 -0
- package/dist/lib/appointment-format.d.ts +35 -0
- package/dist/lib/confetti.d.ts +17 -0
- package/dist/lib/currency.d.ts +9 -0
- package/dist/lib/index.d.ts +5 -0
- package/dist/lib/phone-formatter-lite.d.ts +26 -0
- package/dist/lib/use-grant-celebration.d.ts +12 -0
- package/dist/lib/utils.d.ts +13 -0
- package/dist/provider.d.ts +99 -0
- package/dist/styles/base.css +2254 -0
- package/dist/styles/index.d.ts +2 -0
- package/dist/styles/theme.css +143 -0
- package/dist/theme/index.d.ts +16 -0
- package/dist/theme/theme-context.d.ts +20 -0
- package/dist/theme/theme-provider.d.ts +20 -0
- package/dist/theme/theme-utils.d.ts +18 -0
- package/dist/theme/theme.types.d.ts +47 -0
- package/dist/theme/use-theme.d.ts +44 -0
- package/docs/SLOTS.md +89 -0
- package/docs/STYLING.md +61 -0
- package/package.json +145 -0
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
export interface AppointmentDayTabsProps {
|
|
2
|
+
days: AppointmentDay[];
|
|
3
|
+
selectedDate: string | null;
|
|
4
|
+
onSelect(date: string): void;
|
|
5
|
+
}
|
|
6
|
+
export interface AppointmentDay {
|
|
7
|
+
/** ISO date string (YYYY-MM-DD) used as the stable key and selection value. */
|
|
8
|
+
date: string;
|
|
9
|
+
/** Short weekday label like "Mon". */
|
|
10
|
+
weekdayLabel: string;
|
|
11
|
+
/** Day-of-month number for the large label. */
|
|
12
|
+
dayNumber: number;
|
|
13
|
+
/** Whether any slots are available on this day. */
|
|
14
|
+
hasAvailability: boolean;
|
|
15
|
+
/** Whether the location is closed entirely on this day (no slots generated at all). */
|
|
16
|
+
isClosed: boolean;
|
|
17
|
+
}
|
|
18
|
+
export declare function AppointmentDayTabs({ days, selectedDate, onSelect }: AppointmentDayTabsProps): import("react/jsx-runtime").JSX.Element;
|
|
19
|
+
export declare namespace AppointmentDayTabs {
|
|
20
|
+
var displayName: string;
|
|
21
|
+
}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { AppointmentSlot } from '@fanfare-io/fanfare-sdk-core/appointments';
|
|
2
|
+
export interface AppointmentSlotGridProps {
|
|
3
|
+
slots: AppointmentSlot[];
|
|
4
|
+
isLoading: boolean;
|
|
5
|
+
selectedSlotId: string | null;
|
|
6
|
+
onSelect(slotId: string): void;
|
|
7
|
+
emptyMessage?: string;
|
|
8
|
+
}
|
|
9
|
+
export declare function AppointmentSlotGrid({ slots, isLoading, selectedSlotId, onSelect, emptyMessage, }: AppointmentSlotGridProps): import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
export declare namespace AppointmentSlotGrid {
|
|
11
|
+
var displayName: string;
|
|
12
|
+
}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
export interface AppointmentSlotItemProps {
|
|
2
|
+
slotId: string;
|
|
3
|
+
timeLabel: string;
|
|
4
|
+
ariaLabel: string;
|
|
5
|
+
isFull: boolean;
|
|
6
|
+
isSelected: boolean;
|
|
7
|
+
onSelect(slotId: string): void;
|
|
8
|
+
}
|
|
9
|
+
export declare function AppointmentSlotItem({ slotId, timeLabel, ariaLabel, isFull, isSelected, onSelect, }: AppointmentSlotItemProps): import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
export declare namespace AppointmentSlotItem {
|
|
11
|
+
var displayName: string;
|
|
12
|
+
}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { AppointmentSlot } from '@fanfare-io/fanfare-sdk-core/appointments';
|
|
2
|
+
export interface AppointmentSlotPickerProps {
|
|
3
|
+
appointmentId: string;
|
|
4
|
+
/** Defaults to today, clipped to the open window. */
|
|
5
|
+
bookingWindowOpenAt?: string;
|
|
6
|
+
bookingWindowCloseAt?: string;
|
|
7
|
+
timezone?: string;
|
|
8
|
+
/** Bubbled up so the parent can drive the confirm button label / enabled state. */
|
|
9
|
+
onSlotChange?(slot: AppointmentSlot | null): void;
|
|
10
|
+
/** Error from the parent's book action — surfaced inline beneath the grid. */
|
|
11
|
+
bookError?: string | null;
|
|
12
|
+
}
|
|
13
|
+
export declare function AppointmentSlotPicker({ appointmentId, bookingWindowOpenAt, bookingWindowCloseAt, timezone, onSlotChange, bookError, }: AppointmentSlotPickerProps): import("react/jsx-runtime").JSX.Element;
|
|
14
|
+
export declare namespace AppointmentSlotPicker {
|
|
15
|
+
var displayName: string;
|
|
16
|
+
}
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* AuctionActions Component
|
|
3
|
+
*
|
|
4
|
+
* Bid form and action buttons for auction operations.
|
|
5
|
+
*/
|
|
6
|
+
export type AuctionStatus = "open" | "bidding" | "winning" | "outbid" | "won" | "lost" | "ended";
|
|
7
|
+
export interface AuctionActionsProps {
|
|
8
|
+
/** Current auction status */
|
|
9
|
+
status: AuctionStatus;
|
|
10
|
+
/** Current highest bid */
|
|
11
|
+
currentBid: number;
|
|
12
|
+
/** Minimum next bid */
|
|
13
|
+
minNextBid: number;
|
|
14
|
+
/** Bid increment */
|
|
15
|
+
bidIncrement: number;
|
|
16
|
+
/** Place bid handler */
|
|
17
|
+
onBid?: (amount: number) => void;
|
|
18
|
+
/** Proceed to checkout handler (for won status) */
|
|
19
|
+
onProceed?: () => void;
|
|
20
|
+
/** Whether bid is in progress */
|
|
21
|
+
isBidding?: boolean;
|
|
22
|
+
/** Bid button label */
|
|
23
|
+
bidLabel?: string;
|
|
24
|
+
/** Proceed button label */
|
|
25
|
+
proceedLabel?: string;
|
|
26
|
+
/** Currency code (ISO 4217). */
|
|
27
|
+
currencyCode?: string;
|
|
28
|
+
/** Locale used for formatting */
|
|
29
|
+
locale?: string;
|
|
30
|
+
/** Show quick bid buttons */
|
|
31
|
+
showQuickBids?: boolean;
|
|
32
|
+
/** Additional class name */
|
|
33
|
+
className?: string;
|
|
34
|
+
}
|
|
35
|
+
export declare function AuctionActions({ status, currentBid, minNextBid, bidIncrement, onBid, onProceed, isBidding, bidLabel, proceedLabel, currencyCode, locale, showQuickBids, className, }: AuctionActionsProps): import("react/jsx-runtime").JSX.Element;
|
|
36
|
+
export declare namespace AuctionActions {
|
|
37
|
+
var displayName: string;
|
|
38
|
+
}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* AuctionBidDisplay Component
|
|
3
|
+
*
|
|
4
|
+
* Displays the current bid amount and auction status.
|
|
5
|
+
*/
|
|
6
|
+
export interface AuctionBidDisplayProps {
|
|
7
|
+
/** Current highest bid */
|
|
8
|
+
currentBid: number;
|
|
9
|
+
/** User's bid (if any) */
|
|
10
|
+
myBid?: number | null;
|
|
11
|
+
/** Minimum next bid */
|
|
12
|
+
minNextBid: number;
|
|
13
|
+
/** Bid increment */
|
|
14
|
+
bidIncrement: number;
|
|
15
|
+
/** Reserve price */
|
|
16
|
+
reservePrice?: number;
|
|
17
|
+
/** Whether reserve is met */
|
|
18
|
+
reserveMet?: boolean;
|
|
19
|
+
/** Total number of bids */
|
|
20
|
+
bidCount?: number;
|
|
21
|
+
/** Whether the user is winning */
|
|
22
|
+
isWinning?: boolean;
|
|
23
|
+
/** Currency code (ISO 4217). */
|
|
24
|
+
currencyCode?: string;
|
|
25
|
+
/** Locale used for formatting */
|
|
26
|
+
locale?: string;
|
|
27
|
+
/** Visual size */
|
|
28
|
+
size?: "sm" | "md" | "lg";
|
|
29
|
+
/** Additional class name */
|
|
30
|
+
className?: string;
|
|
31
|
+
}
|
|
32
|
+
export declare function AuctionBidDisplay({ currentBid, myBid, minNextBid, bidIncrement, reservePrice, reserveMet, bidCount, isWinning, currencyCode, locale, size, className, }: AuctionBidDisplayProps): import("react/jsx-runtime").JSX.Element;
|
|
33
|
+
export declare namespace AuctionBidDisplay {
|
|
34
|
+
var displayName: string;
|
|
35
|
+
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Auction Widget Internal Components
|
|
3
|
+
*
|
|
4
|
+
* Building blocks for the AuctionWidget.
|
|
5
|
+
*/
|
|
6
|
+
export { AuctionActions, type AuctionActionsProps, type AuctionStatus } from './auction-actions';
|
|
7
|
+
export { AuctionBidDisplay, type AuctionBidDisplayProps } from './auction-bid-display';
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* DrawActions Component
|
|
3
|
+
*
|
|
4
|
+
* Action buttons for draw operations (enter, withdraw, share).
|
|
5
|
+
*/
|
|
6
|
+
export type DrawStatus = "open" | "entered" | "drawing" | "won" | "lost" | "ended";
|
|
7
|
+
export interface DrawActionsProps {
|
|
8
|
+
/** Current draw status */
|
|
9
|
+
status: DrawStatus;
|
|
10
|
+
/** Enter draw handler */
|
|
11
|
+
onEnter?: () => void;
|
|
12
|
+
/** Withdraw entry handler */
|
|
13
|
+
onWithdraw?: () => void;
|
|
14
|
+
/** Share entry handler */
|
|
15
|
+
onShare?: () => void;
|
|
16
|
+
/** Proceed to checkout handler (for won status) */
|
|
17
|
+
onProceed?: () => void;
|
|
18
|
+
/** Whether enter is in progress */
|
|
19
|
+
isEntering?: boolean;
|
|
20
|
+
/** Whether withdraw is in progress */
|
|
21
|
+
isWithdrawing?: boolean;
|
|
22
|
+
/** Enter button label */
|
|
23
|
+
enterLabel?: string;
|
|
24
|
+
/** Withdraw button label */
|
|
25
|
+
withdrawLabel?: string;
|
|
26
|
+
/** Share button label */
|
|
27
|
+
shareLabel?: string;
|
|
28
|
+
/** Proceed button label */
|
|
29
|
+
proceedLabel?: string;
|
|
30
|
+
/** Show share button */
|
|
31
|
+
showShare?: boolean;
|
|
32
|
+
/** Layout direction */
|
|
33
|
+
layout?: "horizontal" | "vertical";
|
|
34
|
+
/** Additional class name */
|
|
35
|
+
className?: string;
|
|
36
|
+
}
|
|
37
|
+
export declare function DrawActions({ status, onEnter, onWithdraw, onShare, onProceed, isEntering, isWithdrawing, enterLabel, withdrawLabel, shareLabel, proceedLabel, showShare, layout, className, }: DrawActionsProps): import("react/jsx-runtime").JSX.Element;
|
|
38
|
+
export declare namespace DrawActions {
|
|
39
|
+
var displayName: string;
|
|
40
|
+
}
|
|
@@ -0,0 +1,141 @@
|
|
|
1
|
+
import { BotMitigationState, RoutingChallenge } from '@fanfare-io/fanfare-sdk-core/challenges';
|
|
2
|
+
import { JourneyHandle, JourneySnapshot, JourneyView, SequenceView } from '@fanfare-io/fanfare-sdk-core/experiences';
|
|
3
|
+
import { BrandTheme } from '../../theme';
|
|
4
|
+
import { AuthInputMode } from '../auth/auth-input';
|
|
5
|
+
import * as React from "react";
|
|
6
|
+
type ParticipationType = "queue" | "draw" | "auction" | "timed_release" | "appointment";
|
|
7
|
+
type EnterableSlotSequence = Extract<SequenceView, {
|
|
8
|
+
phase: "enterable";
|
|
9
|
+
mechanism: ParticipationType;
|
|
10
|
+
}>;
|
|
11
|
+
type ParticipatingSlotSequence = Extract<SequenceView, {
|
|
12
|
+
phase: "participating";
|
|
13
|
+
mechanism: ParticipationType;
|
|
14
|
+
}>;
|
|
15
|
+
type GrantedSlotSequence = Extract<SequenceView, {
|
|
16
|
+
phase: "granted";
|
|
17
|
+
}>;
|
|
18
|
+
/** Props passed to slot render functions */
|
|
19
|
+
export interface SlotProps {
|
|
20
|
+
snapshot: JourneySnapshot | null;
|
|
21
|
+
view: JourneyView | null;
|
|
22
|
+
error: string | null;
|
|
23
|
+
}
|
|
24
|
+
export interface StartSlotProps extends SlotProps {
|
|
25
|
+
onStart: () => void;
|
|
26
|
+
isStarting: boolean;
|
|
27
|
+
}
|
|
28
|
+
export interface AuthSlotProps extends SlotProps {
|
|
29
|
+
onSubmit: (credential: string, type: AuthInputMode) => Promise<void>;
|
|
30
|
+
onVerify: (otp: string) => Promise<void>;
|
|
31
|
+
onSkip?: () => void;
|
|
32
|
+
}
|
|
33
|
+
export interface AccessCodeSlotProps extends SlotProps {
|
|
34
|
+
onSubmit: (code: string) => Promise<void>;
|
|
35
|
+
onSkip?: () => void;
|
|
36
|
+
}
|
|
37
|
+
export interface UpcomingSlotProps extends SlotProps {
|
|
38
|
+
startsAt?: Date;
|
|
39
|
+
canEnter: boolean;
|
|
40
|
+
onEnter: () => void;
|
|
41
|
+
isEntering: boolean;
|
|
42
|
+
}
|
|
43
|
+
export interface WaitlistSlotProps extends SlotProps {
|
|
44
|
+
startsAt?: Date;
|
|
45
|
+
onLeave: () => void;
|
|
46
|
+
isLeaving: boolean;
|
|
47
|
+
}
|
|
48
|
+
export interface EnterableSlotProps extends SlotProps {
|
|
49
|
+
sequence: EnterableSlotSequence;
|
|
50
|
+
participationType: ParticipationType;
|
|
51
|
+
}
|
|
52
|
+
export interface ParticipatingSlotProps extends SlotProps {
|
|
53
|
+
sequence: ParticipatingSlotSequence;
|
|
54
|
+
participationType: ParticipationType;
|
|
55
|
+
position?: number;
|
|
56
|
+
}
|
|
57
|
+
export interface GrantedSlotProps extends SlotProps {
|
|
58
|
+
sequence: GrantedSlotSequence;
|
|
59
|
+
grant?: string;
|
|
60
|
+
expiresAt?: number;
|
|
61
|
+
}
|
|
62
|
+
export interface ExpiredSlotProps extends SlotProps {
|
|
63
|
+
reason: string;
|
|
64
|
+
endedAt?: Date;
|
|
65
|
+
}
|
|
66
|
+
export interface EndedSlotProps extends SlotProps {
|
|
67
|
+
reason: string;
|
|
68
|
+
endedAt?: Date;
|
|
69
|
+
}
|
|
70
|
+
export interface ErrorSlotProps extends SlotProps {
|
|
71
|
+
error: string;
|
|
72
|
+
onRetry: () => void;
|
|
73
|
+
}
|
|
74
|
+
export interface LoadingSlotProps extends SlotProps {
|
|
75
|
+
/** Stage-specific message (e.g. routing). `undefined` for generic loading — show just a spinner. */
|
|
76
|
+
message?: string;
|
|
77
|
+
}
|
|
78
|
+
export interface ChallengeSlotProps extends SlotProps {
|
|
79
|
+
challenge: RoutingChallenge | null;
|
|
80
|
+
botMitigation?: BotMitigationState;
|
|
81
|
+
onVerifyToken: (token: string) => Promise<void>;
|
|
82
|
+
onRetry: () => void;
|
|
83
|
+
}
|
|
84
|
+
/** Slots for overriding specific views */
|
|
85
|
+
export interface ExperienceWidgetSlots {
|
|
86
|
+
start?: (props: StartSlotProps) => React.ReactNode;
|
|
87
|
+
loading?: (props: LoadingSlotProps) => React.ReactNode;
|
|
88
|
+
auth?: (props: AuthSlotProps) => React.ReactNode;
|
|
89
|
+
accessCode?: (props: AccessCodeSlotProps) => React.ReactNode;
|
|
90
|
+
challenge?: (props: ChallengeSlotProps) => React.ReactNode;
|
|
91
|
+
upcoming?: (props: UpcomingSlotProps) => React.ReactNode;
|
|
92
|
+
waitlist?: (props: WaitlistSlotProps) => React.ReactNode;
|
|
93
|
+
enterable?: (props: EnterableSlotProps) => React.ReactNode;
|
|
94
|
+
participating?: (props: ParticipatingSlotProps) => React.ReactNode;
|
|
95
|
+
granted?: (props: GrantedSlotProps) => React.ReactNode;
|
|
96
|
+
expired?: (props: ExpiredSlotProps) => React.ReactNode;
|
|
97
|
+
ended?: (props: EndedSlotProps) => React.ReactNode;
|
|
98
|
+
error?: (props: ErrorSlotProps) => React.ReactNode;
|
|
99
|
+
}
|
|
100
|
+
/** Render props for full control */
|
|
101
|
+
export interface ExperienceRenderProps {
|
|
102
|
+
journey: JourneyHandle | null;
|
|
103
|
+
view: JourneyView | null;
|
|
104
|
+
snapshot: JourneySnapshot | null;
|
|
105
|
+
error: string | null;
|
|
106
|
+
start: () => Promise<void>;
|
|
107
|
+
isStarting: boolean;
|
|
108
|
+
}
|
|
109
|
+
export interface ExperienceWidgetProps {
|
|
110
|
+
/** Experience ID to load */
|
|
111
|
+
experienceId: string;
|
|
112
|
+
/** Automatically start journey on mount */
|
|
113
|
+
autoStart?: boolean;
|
|
114
|
+
/** Pre-fill access code */
|
|
115
|
+
accessCode?: string;
|
|
116
|
+
/** Auto-enter waitlist when available */
|
|
117
|
+
autoEnterWaitlist?: boolean;
|
|
118
|
+
/** Theme customization */
|
|
119
|
+
theme?: BrandTheme;
|
|
120
|
+
/** Widget variant (overrides theme.variant if provided) */
|
|
121
|
+
variant?: "default" | "retro" | "rounded" | "clean";
|
|
122
|
+
/** Slots for targeted overrides */
|
|
123
|
+
slots?: ExperienceWidgetSlots;
|
|
124
|
+
/** Render prop for full control (ignores slots if provided) */
|
|
125
|
+
children?: (props: ExperienceRenderProps) => React.ReactNode;
|
|
126
|
+
/** Checkout URL for granted state */
|
|
127
|
+
checkoutUrl?: string;
|
|
128
|
+
/** Called when journey state changes */
|
|
129
|
+
onJourneyChange?: (snapshot: JourneySnapshot) => void;
|
|
130
|
+
/** Called when the journey receives a grant */
|
|
131
|
+
onGranted?: (grant: string) => void;
|
|
132
|
+
/** Called when an error occurs */
|
|
133
|
+
onError?: (error: Error) => void;
|
|
134
|
+
/** Additional class name */
|
|
135
|
+
className?: string;
|
|
136
|
+
}
|
|
137
|
+
export declare function ExperienceWidget({ experienceId, autoStart, accessCode, autoEnterWaitlist, theme, variant, slots, children, checkoutUrl, onJourneyChange, onGranted, onError, className, }: ExperienceWidgetProps): import("react/jsx-runtime").JSX.Element;
|
|
138
|
+
export declare namespace ExperienceWidget {
|
|
139
|
+
var displayName: string;
|
|
140
|
+
}
|
|
141
|
+
export {};
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Widget Components
|
|
3
|
+
*
|
|
4
|
+
* ExperienceWidget is the primary entry point for all distribution types.
|
|
5
|
+
* Standalone widgets are deprecated - use ExperienceWidget instead.
|
|
6
|
+
*
|
|
7
|
+
* @packageDocumentation
|
|
8
|
+
*/
|
|
9
|
+
export { ExperienceWidget, type AccessCodeSlotProps, type AuthSlotProps, type EndedSlotProps, type EnterableSlotProps, type ErrorSlotProps, type ExperienceRenderProps, type ExperienceWidgetProps, type ExperienceWidgetSlots, type ExpiredSlotProps, type GrantedSlotProps, type LoadingSlotProps, type ParticipatingSlotProps, type SlotProps, type StartSlotProps, type UpcomingSlotProps, type WaitlistSlotProps, } from './experience-widget';
|
|
10
|
+
export { LoadingView, StartView, UpcomingModule, WaitlistView, type LoadingViewProps, type StartViewProps, type UpcomingModuleProps, type WaitlistViewProps, } from './internal';
|
|
11
|
+
export { AuctionModule, DrawModule, QueueModule, TimedReleaseModule, type AuctionModuleProps, type DrawModuleProps, type QueueModuleProps, type TimedReleaseModuleProps, } from './internal';
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { AppointmentDisplayState } from '@fanfare-io/fanfare-sdk-core/internals';
|
|
2
|
+
import { ReadableAtom } from 'nanostores';
|
|
3
|
+
import { OutcomeReason } from '../../module';
|
|
4
|
+
export interface AppointmentModuleProps {
|
|
5
|
+
appointmentId: string;
|
|
6
|
+
state$?: ReadableAtom<AppointmentDisplayState>;
|
|
7
|
+
sequencePhase: "enterable" | "participating" | "ended";
|
|
8
|
+
bookingWindowOpenAt?: string;
|
|
9
|
+
bookingWindowCloseAt?: string;
|
|
10
|
+
timezone?: string;
|
|
11
|
+
defaultLocationId?: string;
|
|
12
|
+
onBook: (slotId: string, locationId?: string) => Promise<void>;
|
|
13
|
+
onCancel: (reason?: string) => Promise<void>;
|
|
14
|
+
onReschedule: (newSlotId: string, newLocationId?: string) => Promise<void>;
|
|
15
|
+
isBooking: boolean;
|
|
16
|
+
isCancelling: boolean;
|
|
17
|
+
isRescheduling: boolean;
|
|
18
|
+
bookError?: string | null;
|
|
19
|
+
cancelError?: string | null;
|
|
20
|
+
outcomeReason?: OutcomeReason;
|
|
21
|
+
onReenter?: () => Promise<void>;
|
|
22
|
+
isReentering?: boolean;
|
|
23
|
+
className?: string;
|
|
24
|
+
}
|
|
25
|
+
export declare function AppointmentModule({ appointmentId, state$, sequencePhase, bookingWindowOpenAt, bookingWindowCloseAt, timezone, defaultLocationId, onBook, onCancel, onReschedule, isBooking, isCancelling, isRescheduling, bookError, cancelError, outcomeReason, onReenter, isReentering, className, }: AppointmentModuleProps): import("react/jsx-runtime").JSX.Element;
|
|
26
|
+
export declare namespace AppointmentModule {
|
|
27
|
+
var displayName: string;
|
|
28
|
+
}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { AuctionDisplayState } from '@fanfare-io/fanfare-sdk-core/internals';
|
|
2
|
+
import { ReadableAtom } from 'nanostores';
|
|
3
|
+
import { OutcomeReason } from '../../module';
|
|
4
|
+
export interface AuctionModuleProps {
|
|
5
|
+
state$?: ReadableAtom<AuctionDisplayState>;
|
|
6
|
+
fallbackState?: AuctionDisplayState;
|
|
7
|
+
sequencePhase: "enterable" | "participating" | "settling" | "granted" | "ended";
|
|
8
|
+
canEnter: boolean;
|
|
9
|
+
canLeave: boolean;
|
|
10
|
+
onEnter: () => Promise<void>;
|
|
11
|
+
onLeave: () => Promise<void>;
|
|
12
|
+
onBid?: (amount: string) => Promise<void>;
|
|
13
|
+
isEntering: boolean;
|
|
14
|
+
isLeaving: boolean;
|
|
15
|
+
countdownTo?: Date;
|
|
16
|
+
defaultBidAmount?: string;
|
|
17
|
+
/** Currency code for bid display (overridden by displayState.currencyCode if present) */
|
|
18
|
+
currencyCode?: string;
|
|
19
|
+
/** Locale for currency formatting */
|
|
20
|
+
locale?: string;
|
|
21
|
+
grant?: string;
|
|
22
|
+
expiresAt?: number | Date;
|
|
23
|
+
checkoutUrl?: string;
|
|
24
|
+
onCheckoutClick?: () => void;
|
|
25
|
+
outcomeReason?: OutcomeReason;
|
|
26
|
+
onReenter?: () => Promise<void>;
|
|
27
|
+
isReentering?: boolean;
|
|
28
|
+
className?: string;
|
|
29
|
+
}
|
|
30
|
+
export declare function AuctionModule({ state$, fallbackState, sequencePhase, canEnter, canLeave, onEnter, onLeave, onBid, isEntering, isLeaving, countdownTo, defaultBidAmount, currencyCode, locale, grant: _grant, expiresAt, checkoutUrl, onCheckoutClick, outcomeReason, onReenter, isReentering, className, }: AuctionModuleProps): import("react/jsx-runtime").JSX.Element | null;
|
|
31
|
+
export declare namespace AuctionModule {
|
|
32
|
+
var displayName: string;
|
|
33
|
+
}
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import { DrawDisplayState } from '@fanfare-io/fanfare-sdk-core/internals';
|
|
2
|
+
import { ReadableAtom } from 'nanostores';
|
|
3
|
+
import { OutcomeReason } from '../../module';
|
|
4
|
+
export interface DrawModuleProps {
|
|
5
|
+
/** Reactive display state atom from the journey */
|
|
6
|
+
state$?: ReadableAtom<DrawDisplayState>;
|
|
7
|
+
/** Current sequence phase */
|
|
8
|
+
sequencePhase: "enterable" | "participating" | "settling" | "granted" | "ended";
|
|
9
|
+
/** Whether user can enter (active only) */
|
|
10
|
+
canEnter: boolean;
|
|
11
|
+
/** Whether user can leave (participating only) */
|
|
12
|
+
canLeave: boolean;
|
|
13
|
+
/** Enter action handler */
|
|
14
|
+
onEnter: () => Promise<void>;
|
|
15
|
+
/** Leave action handler */
|
|
16
|
+
onLeave: () => Promise<void>;
|
|
17
|
+
/** Whether entering is in progress */
|
|
18
|
+
isEntering: boolean;
|
|
19
|
+
/** Whether leaving is in progress */
|
|
20
|
+
isLeaving: boolean;
|
|
21
|
+
/** Draw time for countdown (active/participating) */
|
|
22
|
+
countdownTo?: Date;
|
|
23
|
+
/** Grant token */
|
|
24
|
+
grant?: string;
|
|
25
|
+
/** When grant expires */
|
|
26
|
+
expiresAt?: number | Date;
|
|
27
|
+
/** Checkout URL — opens in a new tab when CTA clicked (granted) */
|
|
28
|
+
checkoutUrl?: string;
|
|
29
|
+
/** Override checkout click handler (granted) */
|
|
30
|
+
onCheckoutClick?: () => void;
|
|
31
|
+
/** Denial reason (denied) */
|
|
32
|
+
outcomeReason?: OutcomeReason;
|
|
33
|
+
/** Re-enter handler (denied with reason="expired") */
|
|
34
|
+
onReenter?: () => Promise<void>;
|
|
35
|
+
/** Whether re-entering is in progress */
|
|
36
|
+
isReentering?: boolean;
|
|
37
|
+
/** Additional class name */
|
|
38
|
+
className?: string;
|
|
39
|
+
}
|
|
40
|
+
export declare function DrawModule({ state$, sequencePhase, canEnter, canLeave, onEnter, onLeave, isEntering, isLeaving, countdownTo, grant: _grant, expiresAt, checkoutUrl, onCheckoutClick, outcomeReason, onReenter, isReentering, className, }: DrawModuleProps): import("react/jsx-runtime").JSX.Element | null;
|
|
41
|
+
export declare namespace DrawModule {
|
|
42
|
+
var displayName: string;
|
|
43
|
+
}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Internal Widget Views
|
|
3
|
+
*
|
|
4
|
+
* These are internal components used by ExperienceWidget for stage rendering.
|
|
5
|
+
* Not exported publicly - use slots to override these views.
|
|
6
|
+
*/
|
|
7
|
+
export { AppointmentModule, type AppointmentModuleProps } from './appointment-module';
|
|
8
|
+
export { AuctionModule, type AuctionModuleProps } from './auction-module';
|
|
9
|
+
export { DrawModule, type DrawModuleProps } from './draw-module';
|
|
10
|
+
export { QueueModule, type QueueModuleProps } from './queue-module';
|
|
11
|
+
export { TimedReleaseModule, type TimedReleaseModuleProps } from './timed-release-module';
|
|
12
|
+
export { UpcomingModule, type UpcomingModuleProps } from './upcoming-module';
|
|
13
|
+
export { LoadingView, type LoadingViewProps } from './loading-view';
|
|
14
|
+
export { StartView, type StartViewProps } from './start-view';
|
|
15
|
+
export { WaitlistView, type WaitlistViewProps } from './waitlist-view';
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* LoadingView Component
|
|
3
|
+
*
|
|
4
|
+
* Shown during journey stage transitions. Spinner with optional message.
|
|
5
|
+
* Deliberately NOT using PanelLayout — this is a transient hint, not a panel
|
|
6
|
+
* with branding/footer.
|
|
7
|
+
*/
|
|
8
|
+
export interface LoadingViewProps {
|
|
9
|
+
/** Loading message */
|
|
10
|
+
message?: string;
|
|
11
|
+
/** Additional class name */
|
|
12
|
+
className?: string;
|
|
13
|
+
}
|
|
14
|
+
export declare function LoadingView({ message, className }: LoadingViewProps): import("react/jsx-runtime").JSX.Element;
|
|
15
|
+
export declare namespace LoadingView {
|
|
16
|
+
var displayName: string;
|
|
17
|
+
}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { QueueDisplayState } from '@fanfare-io/fanfare-sdk-core/internals';
|
|
2
|
+
import { ReadableAtom } from 'nanostores';
|
|
3
|
+
import { OutcomeReason } from '../../module';
|
|
4
|
+
export interface QueueModuleProps {
|
|
5
|
+
state$?: ReadableAtom<QueueDisplayState>;
|
|
6
|
+
sequencePhase: "enterable" | "participating" | "granted" | "ended";
|
|
7
|
+
canEnter: boolean;
|
|
8
|
+
canLeave: boolean;
|
|
9
|
+
onEnter: () => Promise<void>;
|
|
10
|
+
onLeave: () => Promise<void>;
|
|
11
|
+
isEntering: boolean;
|
|
12
|
+
isLeaving: boolean;
|
|
13
|
+
/** When the queue stops accepting entries — drives the "Queue closes in" countdown. */
|
|
14
|
+
closeAt?: Date;
|
|
15
|
+
grant?: string;
|
|
16
|
+
expiresAt?: number | Date;
|
|
17
|
+
checkoutUrl?: string;
|
|
18
|
+
onCheckoutClick?: () => void;
|
|
19
|
+
outcomeReason?: OutcomeReason;
|
|
20
|
+
onReenter?: () => Promise<void>;
|
|
21
|
+
isReentering?: boolean;
|
|
22
|
+
className?: string;
|
|
23
|
+
}
|
|
24
|
+
export declare function QueueModule({ state$, sequencePhase, canEnter, canLeave, onEnter, onLeave, isEntering, isLeaving, closeAt, grant: _grant, expiresAt, checkoutUrl, onCheckoutClick, outcomeReason, onReenter, isReentering, className, }: QueueModuleProps): import("react/jsx-runtime").JSX.Element | null;
|
|
25
|
+
export declare namespace QueueModule {
|
|
26
|
+
var displayName: string;
|
|
27
|
+
}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { PanelHeadingVariant } from '../../module';
|
|
2
|
+
/**
|
|
3
|
+
* StartView
|
|
4
|
+
*
|
|
5
|
+
* Pre-routing state — shown when `journeyStage === "ready"`. Renders a
|
|
6
|
+
* Get-Started panel with an optional countdown and an `info` slot. CTA
|
|
7
|
+
* triggers `journey.start()` via `onStart`.
|
|
8
|
+
*/
|
|
9
|
+
import * as React from "react";
|
|
10
|
+
export interface StartViewProps {
|
|
11
|
+
variant?: PanelHeadingVariant;
|
|
12
|
+
label?: React.ReactNode;
|
|
13
|
+
title?: React.ReactNode;
|
|
14
|
+
description?: React.ReactNode;
|
|
15
|
+
countdownTo?: Date;
|
|
16
|
+
info?: React.ReactNode;
|
|
17
|
+
ctaLabel?: React.ReactNode;
|
|
18
|
+
onStart?: () => void;
|
|
19
|
+
isLoading?: boolean;
|
|
20
|
+
className?: string;
|
|
21
|
+
}
|
|
22
|
+
export declare function StartView({ variant, label, title, description, countdownTo, info, ctaLabel, onStart, isLoading, className, }: StartViewProps): import("react/jsx-runtime").JSX.Element;
|
|
23
|
+
export declare namespace StartView {
|
|
24
|
+
var displayName: string;
|
|
25
|
+
}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { TimedReleaseDisplayState } from '@fanfare-io/fanfare-sdk-core/internals';
|
|
2
|
+
import { ReadableAtom } from 'nanostores';
|
|
3
|
+
import { OutcomeReason } from '../../module';
|
|
4
|
+
export interface TimedReleaseModuleProps {
|
|
5
|
+
state$?: ReadableAtom<TimedReleaseDisplayState>;
|
|
6
|
+
sequencePhase: "enterable" | "participating" | "granted" | "ended";
|
|
7
|
+
canEnter: boolean;
|
|
8
|
+
canLeave: boolean;
|
|
9
|
+
onEnter: () => Promise<void>;
|
|
10
|
+
onLeave: () => Promise<void>;
|
|
11
|
+
onComplete?: () => Promise<void>;
|
|
12
|
+
isEntering: boolean;
|
|
13
|
+
isLeaving: boolean;
|
|
14
|
+
countdownTo?: Date;
|
|
15
|
+
checkoutUrl?: string;
|
|
16
|
+
onCheckoutClick?: () => void;
|
|
17
|
+
grant?: string;
|
|
18
|
+
expiresAt?: number | Date;
|
|
19
|
+
outcomeReason?: OutcomeReason;
|
|
20
|
+
onReenter?: () => Promise<void>;
|
|
21
|
+
isReentering?: boolean;
|
|
22
|
+
className?: string;
|
|
23
|
+
}
|
|
24
|
+
export declare function TimedReleaseModule({ state$, sequencePhase, canEnter, canLeave, onEnter, onLeave, onComplete, isEntering, isLeaving, countdownTo, checkoutUrl, onCheckoutClick, grant: _grant, expiresAt, outcomeReason, onReenter, isReentering, className, }: TimedReleaseModuleProps): import("react/jsx-runtime").JSX.Element | null;
|
|
25
|
+
export declare namespace TimedReleaseModule {
|
|
26
|
+
var displayName: string;
|
|
27
|
+
}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* UpcomingModule
|
|
3
|
+
*
|
|
4
|
+
* Shared (distribution-agnostic) module rendered before the active sequence
|
|
5
|
+
* begins. Honors the v3 anatomy contract — Badge + Countdown + optional
|
|
6
|
+
* CTA — composed from the shared kit.
|
|
7
|
+
*/
|
|
8
|
+
export interface UpcomingModuleProps {
|
|
9
|
+
/** Title text override */
|
|
10
|
+
title?: string;
|
|
11
|
+
/** Description text override */
|
|
12
|
+
description?: string;
|
|
13
|
+
/** When the distribution starts */
|
|
14
|
+
startsAt?: Date | number;
|
|
15
|
+
/** Called when countdown completes */
|
|
16
|
+
onCountdownComplete?: () => void;
|
|
17
|
+
/** Whether entry is available */
|
|
18
|
+
canEnter?: boolean;
|
|
19
|
+
/** Called when user enters */
|
|
20
|
+
onEnter?: () => void;
|
|
21
|
+
/** Whether entry is in progress */
|
|
22
|
+
isEntering?: boolean;
|
|
23
|
+
/** Additional class name */
|
|
24
|
+
className?: string;
|
|
25
|
+
}
|
|
26
|
+
export declare function UpcomingModule({ title, description, startsAt, onCountdownComplete, canEnter, onEnter, isEntering, className, }: UpcomingModuleProps): import("react/jsx-runtime").JSX.Element;
|
|
27
|
+
export declare namespace UpcomingModule {
|
|
28
|
+
var displayName: string;
|
|
29
|
+
}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* WaitlistView Component
|
|
3
|
+
*
|
|
4
|
+
* Shown when user has joined the waitlist for an upcoming distribution.
|
|
5
|
+
*/
|
|
6
|
+
export interface WaitlistViewProps {
|
|
7
|
+
title?: string;
|
|
8
|
+
description?: string;
|
|
9
|
+
startsAt?: Date | number;
|
|
10
|
+
onCountdownComplete?: () => void;
|
|
11
|
+
onLeave?: () => void;
|
|
12
|
+
isLeaving?: boolean;
|
|
13
|
+
className?: string;
|
|
14
|
+
}
|
|
15
|
+
export declare function WaitlistView({ title, description, startsAt, onCountdownComplete, onLeave, isLeaving, className, }: WaitlistViewProps): import("react/jsx-runtime").JSX.Element;
|
|
16
|
+
export declare namespace WaitlistView {
|
|
17
|
+
var displayName: string;
|
|
18
|
+
}
|