@bigz-app/booking-widget 0.1.4 → 0.1.5

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.
@@ -7946,9 +7946,117 @@
7946
7946
  }, children: u$1(PaymentFormInner, { config: config, eventDetails: eventDetails, formData: formData, totalAmount: totalAmount, discountCode: discountCode, onSuccess: onSuccess, onError: onError, systemConfig: systemConfig, clientSecret: clientSecret }) }));
7947
7947
  }
7948
7948
 
7949
- function Sidebar({ isOpen, onClose, title, children, width = "400px" }) {
7949
+ // Simplified theme application (mirroring the main StyleProvider logic)
7950
+ const getThemedStyles = (config) => {
7951
+ if (!config) {
7952
+ // Fallback styles if no config provided
7953
+ return {
7954
+ "--bw-highlight-color": "#06b6d4",
7955
+ "--bw-background-color": "#e0f2fe",
7956
+ "--bw-surface-color": "#f0fdff",
7957
+ "--bw-text-color": "#0e7490",
7958
+ "--bw-text-muted": "rgba(14, 116, 144, 0.7)",
7959
+ "--bw-border-color": "#bae6fd",
7960
+ "--bw-success-color": "#38bdf8",
7961
+ "--bw-warning-color": "#fbbf24",
7962
+ "--bw-error-color": "#f43f5e",
7963
+ "--bw-border-radius": "18px",
7964
+ "--bw-border-radius-small": "16px",
7965
+ "--bw-spacing": "16px",
7966
+ "--bw-spacing-large": "24px",
7967
+ "--bw-font-family": "'Inter', system-ui, sans-serif",
7968
+ "--bw-font-size": "14px",
7969
+ "--bw-font-size-large": "18px",
7970
+ "--bw-shadow-lg": "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
7971
+ };
7972
+ }
7973
+ // Simplified theme logic (basic version of what's in StyleProvider)
7974
+ const themes = {
7975
+ "light-fresh": {
7976
+ highlight: "#06b6d4",
7977
+ background: "#e0f2fe",
7978
+ surface: "#f0fdff",
7979
+ text: "#0e7490",
7980
+ border: "#bae6fd",
7981
+ success: "#38bdf8",
7982
+ warning: "#fbbf24",
7983
+ error: "#f43f5e",
7984
+ borderRadius: "18px",
7985
+ fontFamily: "'Inter', system-ui, sans-serif",
7986
+ },
7987
+ "midnight": {
7988
+ highlight: "#3b82f6",
7989
+ background: "#0f172a",
7990
+ surface: "#1e293b",
7991
+ text: "#f1f5f9",
7992
+ border: "#334155",
7993
+ success: "#22c55e",
7994
+ warning: "#eab308",
7995
+ error: "#ef4444",
7996
+ borderRadius: "8px",
7997
+ fontFamily: "Inter, system-ui, sans-serif",
7998
+ },
7999
+ // Add more themes as needed
8000
+ };
8001
+ const selectedTheme = config.theme || "light-fresh";
8002
+ const themeDefaults = themes[selectedTheme] || themes["light-fresh"];
8003
+ const getCSSValue = (value, fallback) => {
8004
+ if (!value)
8005
+ return fallback;
8006
+ if (value.includes("#") ||
8007
+ value.includes("px") ||
8008
+ value.includes("%") ||
8009
+ value.includes("rgb") ||
8010
+ value.includes("hsl")) {
8011
+ return value;
8012
+ }
8013
+ return fallback;
8014
+ };
8015
+ const addOpacity = (color, opacity) => {
8016
+ if (color.startsWith("#")) {
8017
+ const r = parseInt(color.slice(1, 3), 16);
8018
+ const g = parseInt(color.slice(3, 5), 16);
8019
+ const b = parseInt(color.slice(5, 7), 16);
8020
+ return `rgba(${r}, ${g}, ${b}, ${opacity})`;
8021
+ }
8022
+ return color;
8023
+ };
8024
+ const colors = config.colors || {};
8025
+ const finalColors = {
8026
+ highlight: getCSSValue(colors.highlight, themeDefaults.highlight),
8027
+ background: getCSSValue(colors.background, themeDefaults.background),
8028
+ surface: getCSSValue(colors.surface, themeDefaults.surface),
8029
+ text: getCSSValue(colors.text, themeDefaults.text),
8030
+ border: getCSSValue(colors.border, themeDefaults.border),
8031
+ success: themeDefaults.success,
8032
+ warning: themeDefaults.warning,
8033
+ error: themeDefaults.error,
8034
+ };
8035
+ return {
8036
+ "--bw-highlight-color": finalColors.highlight,
8037
+ "--bw-background-color": finalColors.background,
8038
+ "--bw-surface-color": finalColors.surface,
8039
+ "--bw-text-color": finalColors.text,
8040
+ "--bw-text-muted": addOpacity(finalColors.text, 0.7),
8041
+ "--bw-border-color": finalColors.border,
8042
+ "--bw-success-color": finalColors.success,
8043
+ "--bw-warning-color": finalColors.warning,
8044
+ "--bw-error-color": finalColors.error,
8045
+ "--bw-border-radius": config.borderRadius || themeDefaults.borderRadius,
8046
+ "--bw-border-radius-small": config.borderRadius || themeDefaults.borderRadius,
8047
+ "--bw-spacing": "16px",
8048
+ "--bw-spacing-large": "24px",
8049
+ "--bw-font-family": config.fontFamily || themeDefaults.fontFamily,
8050
+ "--bw-font-size": "14px",
8051
+ "--bw-font-size-large": "18px",
8052
+ "--bw-shadow-lg": "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
8053
+ };
8054
+ };
8055
+ function Sidebar({ isOpen, onClose, title, children, width = "400px", config, }) {
7950
8056
  const [isVisible, setIsVisible] = d(false);
7951
8057
  const [isAnimating, setIsAnimating] = d(false);
8058
+ // Get themed styles
8059
+ const themedStyles = getThemedStyles(config);
7952
8060
  // Ensure portal root exists
7953
8061
  y(() => {
7954
8062
  let portalRoot = document.getElementById("booking-widget-portal-root");
@@ -8015,6 +8123,7 @@
8015
8123
  bottom: 0,
8016
8124
  zIndex: 1000,
8017
8125
  fontFamily: "var(--bw-font-family)",
8126
+ ...themedStyles, // Apply themed styles
8018
8127
  }, children: [u$1("div", { style: {
8019
8128
  position: "absolute",
8020
8129
  inset: 0,
@@ -8275,7 +8384,7 @@
8275
8384
  }
8276
8385
  };
8277
8386
  if (!eventDetails.bookingOpen) {
8278
- return (u$1(Sidebar, { isOpen: isOpen, onClose: handleClose, title: "Buchung nicht m\u00F6glich", children: u$1("div", { style: {
8387
+ return (u$1(Sidebar, { isOpen: isOpen, onClose: handleClose, title: "Buchung nicht m\u00F6glich", config: config, children: u$1("div", { style: {
8279
8388
  display: "flex",
8280
8389
  alignItems: "center",
8281
8390
  justifyContent: "center",
@@ -8328,7 +8437,7 @@
8328
8437
  transition: "all 0.2s ease",
8329
8438
  fontFamily: "var(--bw-font-family)",
8330
8439
  };
8331
- return (u$1(Sidebar, { isOpen: isOpen, onClose: handleClose, title: `Buchung - ${eventDetails.name}`, width: "420px", children: u$1("div", { className: "booking-widget-container", style: { padding: "var(--bw-spacing)" }, children: [u$1("div", { style: {
8440
+ return (u$1(Sidebar, { isOpen: isOpen, onClose: handleClose, title: `Buchung - ${eventDetails.name}`, width: "420px", config: config, children: u$1("div", { className: "booking-widget-container", style: { padding: "var(--bw-spacing)" }, children: [u$1("div", { style: {
8332
8441
  backgroundColor: "var(--bw-surface-color)",
8333
8442
  border: `1px solid var(--bw-border-color)`,
8334
8443
  backdropFilter: "blur(4px)",
@@ -8616,7 +8725,7 @@
8616
8725
  "November",
8617
8726
  "Dezember",
8618
8727
  ];
8619
- function EventInstanceSelection({ eventInstances, selectedEventType, onEventInstanceSelect, onBackToEventTypes, isOpen, onClose, }) {
8728
+ function EventInstanceSelection({ eventInstances, selectedEventType, onEventInstanceSelect, onBackToEventTypes, isOpen, onClose, config, }) {
8620
8729
  const [selectedEventInstanceId, setSelectedEventInstanceId] = d(null);
8621
8730
  const [openMonths, setOpenMonths] = d(new Set());
8622
8731
  const getEventsForMonth = (monthIndex) => {
@@ -8657,7 +8766,7 @@
8657
8766
  onBackToEventTypes();
8658
8767
  };
8659
8768
  if (eventInstances.length === 0) {
8660
- return (u$1(Sidebar, { isOpen: isOpen, onClose: handleClose, title: "Keine verf\u00FCgbaren Termine", children: u$1("div", { style: {
8769
+ return (u$1(Sidebar, { isOpen: isOpen, onClose: handleClose, title: "Keine verf\u00FCgbaren Termine", config: config, children: u$1("div", { style: {
8661
8770
  display: "flex",
8662
8771
  alignItems: "center",
8663
8772
  justifyContent: "center",
@@ -8678,7 +8787,7 @@
8678
8787
  fontFamily: "var(--bw-font-family)",
8679
8788
  }, children: "F\u00FCr diesen Event-Typ sind derzeit keine Termine verf\u00FCgbar." })] }) }) }));
8680
8789
  }
8681
- return (u$1(Sidebar, { isOpen: isOpen, onClose: handleClose, title: `Terminauswahl - ${selectedEventType?.name || "Event"}`, width: "500px", children: [u$1("div", { style: { padding: "var(--bw-spacing)" }, children: u$1("div", { style: { display: "flex", flexDirection: "column", gap: "var(--bw-spacing)" }, children: monthsWithEvents.map(({ month, index, events, minPrice }) => (u$1(Accordion$1, { title: month, priceInfo: `ab ${formatCurrency(minPrice)}`, isOpen: openMonths.has(index), onToggle: () => toggleMonth(index), children: u$1("div", { style: {
8790
+ return (u$1(Sidebar, { isOpen: isOpen, onClose: handleClose, title: `Terminauswahl - ${selectedEventType?.name || "Event"}`, width: "500px", config: config, children: [u$1("div", { style: { padding: "var(--bw-spacing)" }, children: u$1("div", { style: { display: "flex", flexDirection: "column", gap: "var(--bw-spacing)" }, children: monthsWithEvents.map(({ month, index, events, minPrice }) => (u$1(Accordion$1, { title: month, priceInfo: `ab ${formatCurrency(minPrice)}`, isOpen: openMonths.has(index), onToggle: () => toggleMonth(index), children: u$1("div", { style: {
8682
8791
  display: "flex",
8683
8792
  flexDirection: "column",
8684
8793
  gap: "12px",
@@ -9877,20 +9986,98 @@
9877
9986
  };
9878
9987
  // Loading state
9879
9988
  if (isLoading) {
9880
- return (u$1(StyleProvider, { config: config, children: u$1("div", { className: "max-w-2xl mx-auto p-6", children: u$1("div", { className: "animate-pulse space-y-4", children: [u$1("div", { style: {
9881
- height: "32px",
9882
- backgroundColor: "var(--bw-text-muted)",
9883
- borderRadius: "var(--bw-border-radius)",
9884
- } }), u$1("div", { style: {
9885
- height: "16px",
9886
- backgroundColor: "var(--bw-text-muted)",
9887
- borderRadius: "var(--bw-border-radius)",
9888
- width: "75%",
9889
- } }), u$1("div", { style: {
9890
- height: "128px",
9891
- backgroundColor: "var(--bw-text-muted)",
9892
- borderRadius: "var(--bw-border-radius)",
9893
- } })] }) }) }));
9989
+ return (u$1(StyleProvider, { config: config, children: u$1("div", { style: {
9990
+ width: "100%",
9991
+ maxWidth: 1600,
9992
+ margin: "0 auto",
9993
+ boxSizing: "border-box",
9994
+ padding: 24,
9995
+ }, children: u$1("div", { style: {
9996
+ display: "flex",
9997
+ flexWrap: "wrap",
9998
+ justifyContent: "center",
9999
+ gap: "32px",
10000
+ width: "100%",
10001
+ boxSizing: "border-box",
10002
+ }, children: [1, 2].map((_, idx) => (u$1("div", { style: {
10003
+ position: "relative",
10004
+ backgroundColor: "var(--bw-surface-color)",
10005
+ border: `1px solid var(--bw-border-color)`,
10006
+ borderRadius: "var(--bw-border-radius)",
10007
+ overflow: "hidden",
10008
+ boxShadow: "var(--bw-shadow-md)",
10009
+ fontFamily: "var(--bw-font-family)",
10010
+ minWidth: 350,
10011
+ maxWidth: 500,
10012
+ flex: "1 1 350px",
10013
+ display: "flex",
10014
+ flexDirection: "column",
10015
+ minHeight: 560,
10016
+ boxSizing: "border-box",
10017
+ }, children: [u$1("div", { style: { position: "absolute", top: "16px", left: "16px", zIndex: 10 }, children: u$1("div", { style: {
10018
+ width: 80,
10019
+ height: 20,
10020
+ borderRadius: "var(--bw-border-radius-small)",
10021
+ background: "var(--bw-highlight-muted)",
10022
+ } }) }), u$1("div", { style: {
10023
+ position: "relative",
10024
+ width: "100%",
10025
+ height: "300px",
10026
+ background: "var(--bw-highlight-subtle)",
10027
+ } }), u$1("div", { style: { padding: "24px" }, children: [u$1("div", { style: {
10028
+ width: 120,
10029
+ height: 16,
10030
+ borderRadius: 8,
10031
+ background: "var(--bw-highlight-muted)",
10032
+ marginBottom: 8,
10033
+ } }), u$1("div", { style: {
10034
+ width: "70%",
10035
+ height: 28,
10036
+ borderRadius: 8,
10037
+ background: "var(--bw-text-subtle)",
10038
+ marginBottom: 12,
10039
+ } }), u$1("div", { style: { display: "flex", alignItems: "center", gap: 6, marginBottom: 6 }, children: [u$1("div", { style: {
10040
+ width: 16,
10041
+ height: 16,
10042
+ borderRadius: 8,
10043
+ background: "var(--bw-text-subtle)",
10044
+ } }), u$1("div", { style: {
10045
+ width: 60,
10046
+ height: 14,
10047
+ borderRadius: 6,
10048
+ background: "var(--bw-text-subtle)",
10049
+ } })] }), u$1("div", { style: { display: "flex", alignItems: "center", gap: 6, marginBottom: 6 }, children: [u$1("div", { style: {
10050
+ width: 16,
10051
+ height: 16,
10052
+ borderRadius: 8,
10053
+ background: "var(--bw-text-subtle)",
10054
+ } }), u$1("div", { style: {
10055
+ width: 120,
10056
+ height: 14,
10057
+ borderRadius: 6,
10058
+ background: "var(--bw-text-subtle)",
10059
+ } })] }), u$1("div", { style: {
10060
+ width: "100%",
10061
+ height: 96,
10062
+ borderRadius: 8,
10063
+ background: "var(--bw-text-muted)",
10064
+ margin: "10px 0",
10065
+ } }), u$1("div", { style: {
10066
+ display: "flex",
10067
+ justifyContent: "space-between",
10068
+ alignItems: "center",
10069
+ marginTop: 20,
10070
+ }, children: [u$1("div", { style: {
10071
+ width: 80,
10072
+ height: 32,
10073
+ borderRadius: 8,
10074
+ background: "var(--bw-text-subtle)",
10075
+ } }), u$1("div", { style: {
10076
+ width: 120,
10077
+ height: 40,
10078
+ borderRadius: "var(--bw-border-radius)",
10079
+ background: "var(--bw-highlight-muted)",
10080
+ } })] })] })] }, idx))) }) }) }));
9894
10081
  }
9895
10082
  // Error state
9896
10083
  if (error) {
@@ -9941,7 +10128,7 @@
9941
10128
  }, isOpen: currentStep === "eventInstances", onClose: () => {
9942
10129
  setShowingPreview(true);
9943
10130
  setCurrentStep("eventTypes");
9944
- } }) }));
10131
+ }, config: config }) }));
9945
10132
  }
9946
10133
  if (viewMode === "button" && (isSingleEventTypeMode || isDirectInstanceMode)) {
9947
10134
  // Button mode - show button that opens sidebar/booking directly
@@ -9962,7 +10149,7 @@
9962
10149
  boxShadow: "var(--bw-shadow-md)",
9963
10150
  cursor: "pointer",
9964
10151
  }, onClick: () => setCurrentStep("booking"), children: config.buttonText ||
9965
- (isDirectInstanceMode ? "Jetzt buchen" : "Jetzt Termin auswählen") }), u$1(EventInstanceSelection, { eventInstances: eventInstances, selectedEventType: selectedEventType, onEventInstanceSelect: handleEventInstanceSelect, onBackToEventTypes: () => setSidebarOpen(false), isOpen: sidebarOpen, onClose: () => setSidebarOpen(false) }), eventDetails && (u$1(BookingForm, { config: config, eventDetails: eventDetails, stripePromise: stripePromise, onSuccess: handleBookingSuccess, onError: handleBookingError, onBackToEventInstances: () => setCurrentStep(isDirectInstanceMode ? "eventTypes" : "eventInstances"), onBackToEventTypes: () => setSidebarOpen(false), selectedEventType: selectedEventType, selectedEventInstance: selectedEventInstance, isOpen: currentStep === "booking" && !!eventDetails, onClose: () => setCurrentStep(isDirectInstanceMode ? "eventTypes" : "eventInstances"), systemConfig: systemConfig }))] }) }));
10152
+ (isDirectInstanceMode ? "Jetzt buchen" : "Jetzt Termin auswählen") }), u$1(EventInstanceSelection, { eventInstances: eventInstances, selectedEventType: selectedEventType, onEventInstanceSelect: handleEventInstanceSelect, onBackToEventTypes: () => setSidebarOpen(false), isOpen: sidebarOpen, onClose: () => setSidebarOpen(false), config: config }), eventDetails && (u$1(BookingForm, { config: config, eventDetails: eventDetails, stripePromise: stripePromise, onSuccess: handleBookingSuccess, onError: handleBookingError, onBackToEventInstances: () => setCurrentStep(isDirectInstanceMode ? "eventTypes" : "eventInstances"), onBackToEventTypes: () => setSidebarOpen(false), selectedEventType: selectedEventType, selectedEventInstance: selectedEventInstance, isOpen: currentStep === "booking" && !!eventDetails, onClose: () => setCurrentStep(isDirectInstanceMode ? "eventTypes" : "eventInstances"), systemConfig: systemConfig }))] }) }));
9966
10153
  }
9967
10154
  // Cards mode (default) - show event type selection
9968
10155
  const cardsView = (u$1(EventTypeSelection, { eventTypes: eventTypes, onEventTypeSelect: handleEventTypeSelect }));
@@ -9995,7 +10182,7 @@
9995
10182
  };
9996
10183
  };
9997
10184
  const backHandlers = getBackHandlers();
9998
- return (u$1(StyleProvider, { config: config, children: [cardsView, u$1(EventInstanceSelection, { eventInstances: eventInstances, selectedEventType: selectedEventType, onEventInstanceSelect: handleEventInstanceSelect, onBackToEventTypes: handleBackToEventTypes, isOpen: currentStep === "eventInstances", onClose: handleBackToEventTypes }), eventDetails && (u$1(BookingForm, { config: config, eventDetails: eventDetails, stripePromise: stripePromise, onSuccess: handleBookingSuccess, onError: handleBookingError, onBackToEventInstances: backHandlers.onBackToEventInstances, onBackToEventTypes: backHandlers.onBackToEventTypes, selectedEventType: selectedEventType, selectedEventInstance: selectedEventInstance, isOpen: currentStep === "booking" && !!eventDetails, onClose: backHandlers.onClose, systemConfig: systemConfig }))] }));
10185
+ return (u$1(StyleProvider, { config: config, children: [cardsView, u$1(EventInstanceSelection, { eventInstances: eventInstances, selectedEventType: selectedEventType, onEventInstanceSelect: handleEventInstanceSelect, onBackToEventTypes: handleBackToEventTypes, isOpen: currentStep === "eventInstances", onClose: handleBackToEventTypes, config: config }), eventDetails && (u$1(BookingForm, { config: config, eventDetails: eventDetails, stripePromise: stripePromise, onSuccess: handleBookingSuccess, onError: handleBookingError, onBackToEventInstances: backHandlers.onBackToEventInstances, onBackToEventTypes: backHandlers.onBackToEventTypes, selectedEventType: selectedEventType, selectedEventInstance: selectedEventInstance, isOpen: currentStep === "booking" && !!eventDetails, onClose: backHandlers.onClose, systemConfig: systemConfig }))] }));
9999
10186
  }
10000
10187
 
10001
10188
  // Export init function for vanilla JS usage with Preact