@makeaslot/react 0.1.0 → 0.1.1

package/README.md

@@ -1,6 +1,6 @@
 # @makeaslot/react
 
-React controls for the hosted MakeASlot booking experience. The package loads the existing `embed.js` script and opens its modal or drawer; it does not render a booking form inline.
+React controls for the hosted MakeASlot booking experience.
 
 ## Install
 
@@ -8,29 +8,41 @@ React controls for the hosted MakeASlot booking experience. The package loads th
 npm install @makeaslot/react
 ```
 
-## Usage
+## Default floating button
 
 ```tsx
-import { MakeASlotButton } from "@makeaslot/react";
+import { MakeASlotFloatingButton } from "@makeaslot/react";
 
-export function BookAppointment() {
+export function BookingEmbed() {
   return (
-    <MakeASlotButton
-      origin="https://appointix.duckdns.org"
+    <MakeASlotFloatingButton
       makeASlotLink="joe-consultancy/discovery-call"
       presentation="modal"
       theme="dark"
       brandName="Joe Consultancy"
-      logoUrl="https://appointix-server.duckdns.org/storage/booking-branding/10/logo.png"
-      className="book-button"
+      position="bottom-right"
+      buttonColor="#2BCEFF"
+      buttonTextColor="#003935"
     >
       Book now
-    </MakeASlotButton>
+    </MakeASlotFloatingButton>
   );
 }
 ```
 
-Set `presentation="drawer"` to open the same hosted booking experience in a drawer.
+It displays a fixed call-to-action and opens the hosted booking experience. Set `presentation="drawer"` to use the right-side drawer instead.
+
+## Button in your own layout
+
+Use `MakeASlotButton` when the call-to-action should appear within your page rather than float above it.
+
+```tsx
+import { MakeASlotButton } from "@makeaslot/react";
+
+<MakeASlotButton makeASlotLink="joe-consultancy/discovery-call">
+  Book a discovery call
+</MakeASlotButton>
+```
 
 For custom triggers, use `openMakeASlot`:
 
@@ -38,12 +50,13 @@ For custom triggers, use `openMakeASlot`:
 import { openMakeASlot } from "@makeaslot/react";
 
 openMakeASlot({
-  origin: "https://appointix.duckdns.org",
   makeASlotLink: "joe-consultancy/discovery-call",
   presentation: "modal",
 });
 ```
 
+`origin` is optional and defaults to MakeASlot's production host. Provide it only for an advanced setup, such as staging or a future custom host.
+
 ## Build and test locally
 
 ```bash
@@ -51,10 +64,3 @@ cd packages/react
 npm run build
 npm run pack:check
 ```
-
-`npm pack` produces the exact archive that will be published. Publish only after logging into the intended npm organization:
-
-```bash
-cd packages/react
-npm publish
-```

package/dist/MakeASlotFloatingButton.d.ts

@@ -0,0 +1,7 @@
+import type { MakeASlotFloatingButtonProps } from "./types.js";
+/**
+ * The default fixed-position embed CTA. It opens MakeASlot's hosted modal or
+ * drawer and does not render the booking experience inline.
+ */
+export declare function MakeASlotFloatingButton({ children, onClick, origin, makeASlotLink, presentation, theme, brandName, logoUrl, scriptSrc, position, buttonColor, buttonTextColor, style, type, ...buttonProps }: MakeASlotFloatingButtonProps): import("react").JSX.Element;
+//# sourceMappingURL=MakeASlotFloatingButton.d.ts.map

package/dist/MakeASlotFloatingButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MakeASlotFloatingButton.d.ts","sourceRoot":"","sources":["../src/MakeASlotFloatingButton.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAEV,4BAA4B,EAC7B,MAAM,YAAY,CAAC;AAOpB;;;GAGG;AACH,wBAAgB,uBAAuB,CAAC,EACtC,QAAqB,EACrB,OAAO,EACP,MAAM,EACN,aAAa,EACb,YAAsB,EACtB,KAAe,EACf,SAAS,EACT,OAAO,EACP,SAAS,EACT,QAAyB,EACzB,WAAuB,EACvB,eAA2B,EAC3B,KAAK,EACL,IAAe,EACf,GAAG,WAAW,EACf,EAAE,4BAA4B,+BAyC9B"}

package/dist/MakeASlotFloatingButton.js

@@ -0,0 +1,43 @@
+"use client";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect } from "react";
+import { loadMakeASlot, openMakeASlot } from "./script-loader.js";
+const positionStyles = {
+    "bottom-right": { right: 20, bottom: 20 },
+    "bottom-left": { left: 20, bottom: 20 },
+};
+/**
+ * The default fixed-position embed CTA. It opens MakeASlot's hosted modal or
+ * drawer and does not render the booking experience inline.
+ */
+export function MakeASlotFloatingButton(_a) {
+    var { children = "Book now", onClick, origin, makeASlotLink, presentation = "modal", theme = "light", brandName, logoUrl, scriptSrc, position = "bottom-right", buttonColor = "#111111", buttonTextColor = "#ffffff", style, type = "button" } = _a, buttonProps = __rest(_a, ["children", "onClick", "origin", "makeASlotLink", "presentation", "theme", "brandName", "logoUrl", "scriptSrc", "position", "buttonColor", "buttonTextColor", "style", "type"]);
+    useEffect(() => {
+        loadMakeASlot({ origin, scriptSrc });
+    }, [origin, scriptSrc]);
+    return (_jsx("button", Object.assign({}, buttonProps, { type: type, style: Object.assign(Object.assign({ position: "fixed", zIndex: 2147482999, border: 0, borderRadius: 9999, padding: "12px 18px", backgroundColor: buttonColor, color: buttonTextColor, font: "600 14px system-ui, sans-serif", cursor: "pointer", boxShadow: "0 8px 24px rgba(0, 0, 0, 0.2)" }, positionStyles[position]), style), onClick: (event) => {
+            onClick === null || onClick === void 0 ? void 0 : onClick(event);
+            if (event.defaultPrevented)
+                return;
+            openMakeASlot({
+                origin,
+                makeASlotLink,
+                presentation,
+                theme,
+                brandName,
+                logoUrl,
+                scriptSrc,
+            });
+        }, children: children })));
+}

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 export { MakeASlotButton } from "./MakeASlotButton.js";
-export { loadMakeASlot, openMakeASlot } from "./script-loader.js";
-export type { MakeASlotApi, MakeASlotButtonProps, MakeASlotOptions, MakeASlotPresentation, MakeASlotTheme, } from "./types.js";
+export { MakeASlotFloatingButton } from "./MakeASlotFloatingButton.js";
+export { DEFAULT_MAKE_A_SLOT_ORIGIN, loadMakeASlot, openMakeASlot, } from "./script-loader.js";
+export type { MakeASlotApi, MakeASlotButtonProps, MakeASlotFloatingButtonPosition, MakeASlotFloatingButtonProps, MakeASlotOptions, MakeASlotPresentation, MakeASlotTheme, } from "./types.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAClE,YAAY,EACV,YAAY,EACZ,oBAAoB,EACpB,gBAAgB,EAChB,qBAAqB,EACrB,cAAc,GACf,MAAM,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,EAAE,uBAAuB,EAAE,MAAM,8BAA8B,CAAC;AACvE,OAAO,EACL,0BAA0B,EAC1B,aAAa,EACb,aAAa,GACd,MAAM,oBAAoB,CAAC;AAC5B,YAAY,EACV,YAAY,EACZ,oBAAoB,EACpB,+BAA+B,EAC/B,4BAA4B,EAC5B,gBAAgB,EAChB,qBAAqB,EACrB,cAAc,GACf,MAAM,YAAY,CAAC"}

package/dist/index.js

@@ -1,3 +1,4 @@
 "use client";
 export { MakeASlotButton } from "./MakeASlotButton.js";
-export { loadMakeASlot, openMakeASlot } from "./script-loader.js";
+export { MakeASlotFloatingButton } from "./MakeASlotFloatingButton.js";
+export { DEFAULT_MAKE_A_SLOT_ORIGIN, loadMakeASlot, openMakeASlot, } from "./script-loader.js";

package/dist/script-loader.d.ts

@@ -1,4 +1,5 @@
 import type { MakeASlotApi, MakeASlotOptions } from "./types.js";
+export declare const DEFAULT_MAKE_A_SLOT_ORIGIN = "https://appointix.duckdns.org";
 declare global {
     interface Window {
         MakeASlot?: MakeASlotApi;

package/dist/script-loader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"script-loader.d.ts","sourceRoot":"","sources":["../src/script-loader.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAEjE,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,SAAS,CAAC,EAAE,YAAY,CAAC;KAC1B;CACF;AAmCD,wFAAwF;AACxF,wBAAgB,aAAa,CAAC,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAAE,QAAQ,CAAC,GAAG;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,4BAM/F;AAED,uEAAuE;AACvE,wBAAgB,aAAa,CAC3B,OAAO,EAAE,gBAAgB,GAAG;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,QAQnD"}
+{"version":3,"file":"script-loader.d.ts","sourceRoot":"","sources":["../src/script-loader.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAEjE,eAAO,MAAM,0BAA0B,kCAAkC,CAAC;AAE1E,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,SAAS,CAAC,EAAE,YAAY,CAAC;KAC1B;CACF;AAmCD,wFAAwF;AACxF,wBAAgB,aAAa,CAAC,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAAE,QAAQ,CAAC,GAAG;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,4BAQ/F;AAED,uEAAuE;AACvE,wBAAgB,aAAa,CAC3B,OAAO,EAAE,gBAAgB,GAAG;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,QAWnD"}

package/dist/script-loader.js

@@ -9,7 +9,8 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-function normalizedOrigin(origin) {
+export const DEFAULT_MAKE_A_SLOT_ORIGIN = "https://appointix.duckdns.org";
+function normalizedOrigin(origin = DEFAULT_MAKE_A_SLOT_ORIGIN) {
     return origin.replace(/\/$/, "");
 }
 function getOrCreateQueue() {
@@ -49,6 +50,6 @@ export function openMakeASlot(options) {
     if (!api)
         return;
     const { scriptSrc: _scriptSrc } = options, bookingOptions = __rest(options, ["scriptSrc"]);
-    api("init", bookingOptions);
+    api("init", Object.assign(Object.assign({}, bookingOptions), { origin: normalizedOrigin(bookingOptions.origin) }));
     api("open");
 }

package/dist/types.d.ts

@@ -1,9 +1,10 @@
 import type { ButtonHTMLAttributes, ReactNode } from "react";
 export type MakeASlotPresentation = "modal" | "drawer";
 export type MakeASlotTheme = "light" | "dark";
+export type MakeASlotFloatingButtonPosition = "bottom-right" | "bottom-left";
 export interface MakeASlotOptions {
-    /** The domain where embed.js and the booking page are hosted. */
-    origin: string;
+    /** Overrides the default MakeASlot production host. */
+    origin?: string;
     /** The booking-link slug, or a complete booking-link URL. */
     makeASlotLink: string;
     /** Opens the existing booking experience as a modal or a right-side drawer. */
@@ -17,6 +18,15 @@ export interface MakeASlotButtonProps extends MakeASlotOptions, Omit<ButtonHTMLA
     scriptSrc?: string;
     children?: ReactNode;
 }
+export interface MakeASlotFloatingButtonProps extends MakeASlotOptions, Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
+    /** Overrides the default production embed script URL. */
+    scriptSrc?: string;
+    /** The label displayed in the floating call-to-action button. */
+    children?: ReactNode;
+    position?: MakeASlotFloatingButtonPosition;
+    buttonColor?: string;
+    buttonTextColor?: string;
+}
 export type MakeASlotCommand = "init" | "open" | "close";
 export interface MakeASlotApi {
     (command: "init", options: MakeASlotOptions): void;

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE7D,MAAM,MAAM,qBAAqB,GAAG,OAAO,GAAG,QAAQ,CAAC;AACvD,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,MAAM,CAAC;AAE9C,MAAM,WAAW,gBAAgB;IAC/B,iEAAiE;IACjE,MAAM,EAAE,MAAM,CAAC;IACf,6DAA6D;IAC7D,aAAa,EAAE,MAAM,CAAC;IACtB,+EAA+E;IAC/E,YAAY,CAAC,EAAE,qBAAqB,CAAC;IACrC,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,oBACf,SAAQ,gBAAgB,EACtB,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC;IAC3D,6DAA6D;IAC7D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;AAEzD,MAAM,WAAW,YAAY;IAC3B,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,gBAAgB,GAAG,IAAI,CAAC;IACnD,CAAC,OAAO,EAAE,MAAM,GAAG,OAAO,GAAG,IAAI,CAAC;IAClC,CAAC,CAAC,EAAE,OAAO,EAAE,EAAE,CAAC;CACjB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE7D,MAAM,MAAM,qBAAqB,GAAG,OAAO,GAAG,QAAQ,CAAC;AACvD,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,MAAM,CAAC;AAC9C,MAAM,MAAM,+BAA+B,GAAG,cAAc,GAAG,aAAa,CAAC;AAE7E,MAAM,WAAW,gBAAgB;IAC/B,uDAAuD;IACvD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,6DAA6D;IAC7D,aAAa,EAAE,MAAM,CAAC;IACtB,+EAA+E;IAC/E,YAAY,CAAC,EAAE,qBAAqB,CAAC;IACrC,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,oBACf,SAAQ,gBAAgB,EACtB,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC;IAC3D,6DAA6D;IAC7D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,MAAM,WAAW,4BACf,SAAQ,gBAAgB,EACtB,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC;IAC3D,yDAAyD;IACzD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iEAAiE;IACjE,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,QAAQ,CAAC,EAAE,+BAA+B,CAAC;IAC3C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;AAEzD,MAAM,WAAW,YAAY;IAC3B,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,gBAAgB,GAAG,IAAI,CAAC;IACnD,CAAC,OAAO,EAAE,MAAM,GAAG,OAAO,GAAG,IAAI,CAAC;IAClC,CAAC,CAAC,EAAE,OAAO,EAAE,EAAE,CAAC;CACjB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@makeaslot/react",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "React controls for opening MakeASlot booking modals and drawers.",
   "type": "module",
   "main": "./dist/index.js",