@getspot/spot-widget-react 1.4.0 → 2.0.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @getspot/spot-widget-react
 
+## 2.0.0
+
+### Major Changes
+
+- 4c59d56: Typescript support
+
+### Patch Changes
+
+- Updated dependencies [4c59d56]
+  - @getspot/spot-widget@2.0.0
+
 ## 1.4.0
 
 ### Minor Changes

package/README.md

@@ -1,12 +1,254 @@
-# Spot React Widget
+# @getspot/spot-widget-react
 
-## Description
-This is a UI component for displaying a quote offer to users in a checkout flow
+React component wrapper for the Spot refund guarantee widget.
+
+> **Note:** This React wrapper uses types from [@getspot/spot-widget](https://www.npmjs.com/package/@getspot/spot-widget).
+
+### Key Types
+- `ApiConfig` - API configuration (environment, partnerId, customEndpoint)
+- `QuoteRequestData` - Quote request data for single items or batch requests
+- `SelectionData` - User selection data returned in callbacks
+- `Quote` - Quote response data with pricing and terms
+- `Theme` - Styling customization options
+
+For complete type definitions, see the [@getspot/spot-widget documentation](https://www.npmjs.com/package/@getspot/spot-widget).
 
 ## Installation
 
 ```bash
-npm install --save @getspot/spot-widget-react
+npm install @getspot/spot-widget-react
+```
+
+## Quick Start
+
+```tsx
+import React from 'react';
+import ReactSpotWidget from '@getspot/spot-widget-react';
+
+function App() {
+  return (
+    <ReactSpotWidget
+      apiConfig={{
+        environment: 'production', // or 'sandbox' for testing
+        partnerId: 'your-partner-id'
+      }}
+      quoteRequestData={{
+        startDate: '2024-01-01T00:00:00Z',
+        endDate: '2024-01-07T23:59:59Z',
+        currencyCode: 'USD',
+        eventType: 'Ski Trip',
+        productType: 'Trip',
+        productDuration: 'Trip',
+        productPrice: 500,
+        productId: 'ski-trip-2024',
+        cartId: 'cart-123',
+        productName: 'Aspen Ski Trip 2024'
+      }}
+      onOptIn={(data) => {
+        console.log('User opted in:', data);
+        // Handle opt-in (e.g., add to cart, track analytics)
+      }}
+      onOptOut={(data) => {
+        console.log('User opted out:', data);
+        // Handle opt-out (e.g., track analytics)
+      }}
+      onError={(error) => {
+        console.error('Widget error:', error);
+        // Handle errors (e.g., show fallback UI)
+      }}
+    />
+  );
+}
 ```
 
-## Usage
+## TypeScript Support
+
+This package includes full TypeScript definitions. All props are typed for better development experience.
+
+## Props Reference
+
+### Required Props
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `apiConfig` | `ApiConfig` | Configuration for the Spot API including environment and partner ID |
+| `quoteRequestData` | `QuoteRequestData` | Quote request data containing product and cart information |
+
+### Optional Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `showTable` | `boolean` | `true` | Whether to show the payout table |
+| `optInSelected` | `boolean` | `false` | Whether the widget should be pre-selected for opt-in |
+| `theme` | `Theme` | `undefined` | Theme customization options for styling the widget |
+
+### Callback Props
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `onQuoteRetrieved` | `(quote: Quote) => void` | Callback fired when a quote is successfully retrieved |
+| `onOptIn` | `(data: SelectionData) => void` | Callback fired when user opts in to the refund guarantee |
+| `onOptOut` | `(data: SelectionData) => void` | Callback fired when user opts out of the refund guarantee |
+| `onError` | `(error: ErrorData) => void` | Callback fired when an error occurs during quote retrieval |
+| `onNoMatchingQuote` | `(data: NoQuoteData) => void` | Callback fired when no matching quote is found |
+| `onSelectionChange` | `(data: SelectionData) => void` | Callback fired when user changes their selection (opt-in or opt-out) |
+
+## Using Refs
+
+You can access widget methods using React refs:
+
+```tsx
+import React, { useRef } from 'react';
+import ReactSpotWidget, { ReactSpotWidgetRef } from '@getspot/spot-widget-react';
+
+function App() {
+  const widgetRef = useRef<ReactSpotWidgetRef>(null);
+
+  const handleUpdateQuote = async () => {
+    const success = await widgetRef.current?.updateQuote({
+      // new quote data
+    });
+    console.log('Quote updated:', success);
+  };
+
+  const handleGetSelection = () => {
+    const selection = widgetRef.current?.getSelection();
+    console.log('Current selection:', selection);
+  };
+
+  const handleValidateSelection = () => {
+    const isValid = widgetRef.current?.validateSelection();
+    console.log('Selection is valid:', isValid);
+  };
+
+  return (
+    <div>
+      <ReactSpotWidget
+        ref={widgetRef}
+        // ... props
+      />
+      <button onClick={handleUpdateQuote}>Update Quote</button>
+      <button onClick={handleGetSelection}>Get Selection</button>
+      <button onClick={handleValidateSelection}>Validate Selection</button>
+    </div>
+  );
+}
+```
+
+## Ref Methods
+
+| Method | Return Type | Description |
+|--------|-------------|-------------|
+| `updateQuote(data)` | `Promise<boolean>` | Update the quote with new request data |
+| `getSelection()` | `SelectionData \| null` | Get the current user selection |
+| `validateSelection()` | `boolean` | Validate that the user has made a selection |
+| `destroy()` | `void` | Destroy the widget instance and clean up resources |
+
+## API Configuration
+
+The `apiConfig` prop accepts the following options:
+
+```tsx
+{
+  environment: 'production' | 'sandbox' | 'local',
+  partnerId: string,
+  customEndpoint?: string // Optional custom API endpoint
+}
+```
+
+## Quote Request Data
+
+The `quoteRequestData` prop requires the following fields:
+
+### Single Quote Format
+
+```tsx
+{
+  startDate: string,        // ISO 8601 date string
+  endDate: string,          // ISO 8601 date string  
+  currencyCode: 'USD' | 'CAD' | 'AUD',
+  eventType: string,        // e.g., "Ski Trip", "Concert"
+  productType: 'Pass' | 'Trip' | 'Registration',
+  productDuration: 'Daily' | 'Seasonal' | 'Trip' | 'Event',
+  productPrice: number,     // Price in specified currency
+  productId: string,        // Unique product identifier
+  cartId: string,           // Cart identifier
+  productName: string,      // Human-readable product name
+  participantDescription?: string // Optional participant details
+}
+```
+
+### Batch Quote Format
+
+For multiple items in a cart:
+
+```tsx
+{
+  cartInfo: {
+    cartId: string,
+    cartName: string,
+    currencyCode: 'USD' | 'CAD' | 'AUD'
+  },
+  items: Array<{
+    // Same fields as single quote, minus cartId and currencyCode
+    cartItemId?: string // Optional unique identifier for cart item
+  }>
+}
+```
+
+## Styling
+
+Customize the widget appearance using the `theme` prop:
+
+```tsx
+<ReactSpotWidget
+  theme={{
+    primaryColor: '#007bff',
+    borderRadius: '8px',
+    fontFamily: 'Arial, sans-serif'
+    // Add any CSS custom properties (without -- prefix)
+  }}
+  // ... other props
+/>
+```
+
+## Error Handling
+
+Always implement error handling for production use:
+
+```tsx
+<ReactSpotWidget
+  onError={(error) => {
+    // Log error for debugging
+    console.error('Spot Widget Error:', error);
+    
+    // Show user-friendly message
+    toast.error('Unable to load refund options. Please try again.');
+    
+    // Track error in analytics
+    analytics.track('spot_widget_error', {
+      message: error.message,
+      status: error.status
+    });
+  }}
+  onNoMatchingQuote={() => {
+    // Handle case where no quote is available
+    console.log('No refund guarantee available for this product');
+  }}
+  // ... other props
+/>
+```
+
+## Compatibility
+
+- **React**: 18.x
+- **TypeScript**: 5.x
+- **Node.js**: 16+
+
+## License
+
+See the main package for license information.
+
+## Support
+
+For support, please contact [support@getspot.com](mailto:support@getspot.com).

package/dist/ReactSpotWidget.d.ts

@@ -0,0 +1,83 @@
+import React from "react";
+import { type SpotWidgetOptions, type SelectionData, type Quote } from "@getspot/spot-widget";
+/**
+ * Props for the ReactSpotWidget component
+ */
+interface ReactSpotWidgetProps extends Omit<SpotWidgetOptions, 'location' | 'callbacks'> {
+    /** Configuration for the Spot API including environment and partner ID */
+    apiConfig: SpotWidgetOptions['apiConfig'];
+    /** Quote request data containing product and cart information */
+    quoteRequestData: SpotWidgetOptions['quoteRequestData'];
+    /** Whether to show the payout table. Defaults to true */
+    showTable?: boolean;
+    /** Whether the widget should be pre-selected for opt-in. Defaults to false */
+    optInSelected?: boolean;
+    /** Theme customization options for styling the widget */
+    theme?: SpotWidgetOptions['theme'];
+    /** Callback fired when a quote is successfully retrieved */
+    onQuoteRetrieved?: (quote: Quote) => void;
+    /** Callback fired when user opts in to the refund guarantee */
+    onOptIn?: (data: SelectionData) => void;
+    /** Callback fired when user opts out of the refund guarantee */
+    onOptOut?: (data: SelectionData) => void;
+    /** Callback fired when an error occurs during quote retrieval */
+    onError?: (error: {
+        message: string;
+        status?: number;
+        responseBody?: any;
+    }) => void;
+    /** Callback fired when no matching quote is found */
+    onNoMatchingQuote?: (data: {
+        status: string;
+        data: any;
+    }) => void;
+    /** Callback fired when user changes their selection (opt-in or opt-out) */
+    onSelectionChange?: (data: SelectionData) => void;
+    /** Additional callback configuration options */
+    callbacks?: SpotWidgetOptions['callbacks'];
+}
+/**
+ * Methods available on the ReactSpotWidget component ref
+ */
+export interface ReactSpotWidgetRef {
+    /** Update the quote with new request data */
+    updateQuote: (newQuoteRequestData: SpotWidgetOptions['quoteRequestData']) => Promise<boolean>;
+    /** Get the current user selection */
+    getSelection: () => SelectionData | null;
+    /** Validate that the user has made a selection */
+    validateSelection: () => boolean;
+    /** Destroy the widget instance and clean up resources */
+    destroy: () => void;
+}
+/**
+ * React component wrapper for the Spot refund guarantee widget.
+ *
+ * This component provides a React-friendly interface to the Spot Widget,
+ * offering refund guarantee options for e-commerce purchases.
+ *
+ * @example
+ * ```tsx
+ * import ReactSpotWidget from '@getspot/spot-widget-react';
+ *
+ * function MyComponent() {
+ *   return (
+ *     <ReactSpotWidget
+ *       apiConfig={{
+ *         environment: 'production',
+ *         partnerId: 'your-partner-id'
+ *       }}
+ *       quoteRequestData={{
+ *         productPrice: 100,
+ *         productType: 'Trip',
+ *         // ... other required fields
+ *       }}
+ *       onOptIn={(data) => console.log('User opted in:', data)}
+ *       onOptOut={(data) => console.log('User opted out:', data)}
+ *     />
+ *   );
+ * }
+ * ```
+ */
+declare const ReactSpotWidget: React.ForwardRefExoticComponent<ReactSpotWidgetProps & React.RefAttributes<ReactSpotWidgetRef>>;
+export default ReactSpotWidget;
+//# sourceMappingURL=ReactSpotWidget.d.ts.map

package/dist/ReactSpotWidget.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReactSpotWidget.d.ts","sourceRoot":"","sources":["../src/ReactSpotWidget.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6D,MAAM,OAAO,CAAC;AAClF,OAAmB,EAAE,KAAK,iBAAiB,EAAE,KAAK,aAAa,EAAE,KAAK,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAE1G;;GAEG;AACH,UAAU,oBAAqB,SAAQ,IAAI,CAAC,iBAAiB,EAAE,UAAU,GAAG,WAAW,CAAC;IACtF,0EAA0E;IAC1E,SAAS,EAAE,iBAAiB,CAAC,WAAW,CAAC,CAAC;IAC1C,iEAAiE;IACjE,gBAAgB,EAAE,iBAAiB,CAAC,kBAAkB,CAAC,CAAC;IACxD,yDAAyD;IACzD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,8EAA8E;IAC9E,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,yDAAyD;IACzD,KAAK,CAAC,EAAE,iBAAiB,CAAC,OAAO,CAAC,CAAC;IACnC,4DAA4D;IAC5D,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IAC1C,+DAA+D;IAC/D,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAC;IACxC,gEAAgE;IAChE,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAC;IACzC,iEAAiE;IACjE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,OAAO,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAC;QAAC,YAAY,CAAC,EAAE,GAAG,CAAA;KAAE,KAAK,IAAI,CAAC;IACpF,qDAAqD;IACrD,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,GAAG,CAAA;KAAE,KAAK,IAAI,CAAC;IAClE,2EAA2E;IAC3E,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAC;IAClD,gDAAgD;IAChD,SAAS,CAAC,EAAE,iBAAiB,CAAC,WAAW,CAAC,CAAC;CAC5C;AAED;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC,6CAA6C;IAC7C,WAAW,EAAE,CAAC,mBAAmB,EAAE,iBAAiB,CAAC,kBAAkB,CAAC,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;IAC9F,qCAAqC;IACrC,YAAY,EAAE,MAAM,aAAa,GAAG,IAAI,CAAC;IACzC,kDAAkD;IAClD,iBAAiB,EAAE,MAAM,OAAO,CAAC;IACjC,yDAAyD;IACzD,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,QAAA,MAAM,eAAe,iGAuFnB,CAAC;AAIH,eAAe,eAAe,CAAC"}

package/dist/__tests__/ReactSpotWidget.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ReactSpotWidget.test.d.ts.map

package/dist/__tests__/ReactSpotWidget.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReactSpotWidget.test.d.ts","sourceRoot":"","sources":["../../src/__tests__/ReactSpotWidget.test.tsx"],"names":[],"mappings":""}

package/dist/index.d.ts

@@ -0,0 +1,83 @@
+import React from "react";
+import { type SpotWidgetOptions, type SelectionData, type Quote } from "@getspot/spot-widget";
+/**
+ * Props for the ReactSpotWidget component
+ */
+interface ReactSpotWidgetProps extends Omit<SpotWidgetOptions, 'location' | 'callbacks'> {
+    /** Configuration for the Spot API including environment and partner ID */
+    apiConfig: SpotWidgetOptions['apiConfig'];
+    /** Quote request data containing product and cart information */
+    quoteRequestData: SpotWidgetOptions['quoteRequestData'];
+    /** Whether to show the payout table. Defaults to true */
+    showTable?: boolean;
+    /** Whether the widget should be pre-selected for opt-in. Defaults to false */
+    optInSelected?: boolean;
+    /** Theme customization options for styling the widget */
+    theme?: SpotWidgetOptions['theme'];
+    /** Callback fired when a quote is successfully retrieved */
+    onQuoteRetrieved?: (quote: Quote) => void;
+    /** Callback fired when user opts in to the refund guarantee */
+    onOptIn?: (data: SelectionData) => void;
+    /** Callback fired when user opts out of the refund guarantee */
+    onOptOut?: (data: SelectionData) => void;
+    /** Callback fired when an error occurs during quote retrieval */
+    onError?: (error: {
+        message: string;
+        status?: number;
+        responseBody?: any;
+    }) => void;
+    /** Callback fired when no matching quote is found */
+    onNoMatchingQuote?: (data: {
+        status: string;
+        data: any;
+    }) => void;
+    /** Callback fired when user changes their selection (opt-in or opt-out) */
+    onSelectionChange?: (data: SelectionData) => void;
+    /** Additional callback configuration options */
+    callbacks?: SpotWidgetOptions['callbacks'];
+}
+/**
+ * Methods available on the ReactSpotWidget component ref
+ */
+export interface ReactSpotWidgetRef {
+    /** Update the quote with new request data */
+    updateQuote: (newQuoteRequestData: SpotWidgetOptions['quoteRequestData']) => Promise<boolean>;
+    /** Get the current user selection */
+    getSelection: () => SelectionData | null;
+    /** Validate that the user has made a selection */
+    validateSelection: () => boolean;
+    /** Destroy the widget instance and clean up resources */
+    destroy: () => void;
+}
+/**
+ * React component wrapper for the Spot refund guarantee widget.
+ *
+ * This component provides a React-friendly interface to the Spot Widget,
+ * offering refund guarantee options for e-commerce purchases.
+ *
+ * @example
+ * ```tsx
+ * import ReactSpotWidget from '@getspot/spot-widget-react';
+ *
+ * function MyComponent() {
+ *   return (
+ *     <ReactSpotWidget
+ *       apiConfig={{
+ *         environment: 'production',
+ *         partnerId: 'your-partner-id'
+ *       }}
+ *       quoteRequestData={{
+ *         productPrice: 100,
+ *         productType: 'Trip',
+ *         // ... other required fields
+ *       }}
+ *       onOptIn={(data) => console.log('User opted in:', data)}
+ *       onOptOut={(data) => console.log('User opted out:', data)}
+ *     />
+ *   );
+ * }
+ * ```
+ */
+declare const ReactSpotWidget: React.ForwardRefExoticComponent<ReactSpotWidgetProps & React.RefAttributes<ReactSpotWidgetRef>>;
+export default ReactSpotWidget;
+//# sourceMappingURL=ReactSpotWidget.d.ts.map

package/dist/index.es.js

@@ -1,70 +1,72 @@
-import z, { forwardRef as A, useRef as x, useImperativeHandle as B, useEffect as E } from "react";
-import F from "@getspot/spot-widget";
-const K = A(({
+import { jsx as P } from "react/jsx-runtime";
+import { forwardRef as b, useRef as R, useImperativeHandle as p, useEffect as z } from "react";
+import A from "@getspot/spot-widget";
+const B = b(({
   apiConfig: m,
-  quoteRequestData: y,
-  showTable: i = !0,
+  quoteRequestData: i,
+  showTable: y = !0,
   optInSelected: W = !1,
-  theme: v,
-  callbacks: w = {},
-  onQuoteRetrieved: s,
-  onOptIn: t,
-  onOptOut: c,
+  theme: a,
+  callbacks: v = {},
+  onQuoteRetrieved: c,
+  onOptIn: s,
+  onOptOut: t,
   onError: f,
   onNoMatchingQuote: d,
   onSelectionChange: e,
-  ...R
-}, H) => {
-  const l = x(null), u = x(null), b = {
-    ...w,
-    ...s && { onQuoteRetrieved: s },
-    ...t && {
+  ...w
+}, j) => {
+  const l = R(null), u = R(null), k = {
+    ...v,
+    ...c && { onQuoteRetrieved: c },
+    ...s && {
       onOptIn: (r) => {
-        t == null || t(r), e == null || e(r);
+        s == null || s(r), e == null || e(r);
       }
     },
-    ...c && {
+    ...t && {
       onOptOut: (r) => {
-        c == null || c(r), e == null || e(r);
+        t == null || t(r), e == null || e(r);
       }
     },
     ...f && { onError: f },
-    ...d && { onNoMatchingQuote: d }
-  }, j = {
+    ...d && { noMatchingQuote: d }
+  }, H = {
     apiConfig: m,
-    quoteRequestData: y,
-    showTable: i,
+    quoteRequestData: i,
+    showTable: y,
     optInSelected: W,
-    theme: v,
-    callbacks: b,
-    ...R
+    theme: a,
+    callbacks: k,
+    ...w
   };
-  return B(H, () => ({
+  return p(j, () => ({
     updateQuote: (r) => {
-      var k;
-      return (k = u.current) == null ? void 0 : k.updateQuote(r);
+      var x;
+      return ((x = u.current) == null ? void 0 : x.updateQuote(r)) ?? Promise.resolve(!1);
     },
     getSelection: () => {
       var r;
-      return (r = u.current) == null ? void 0 : r.getSelection();
+      return ((r = u.current) == null ? void 0 : r.getSelection()) ?? null;
     },
     validateSelection: () => {
       var r;
-      return (r = u.current) == null ? void 0 : r.validateSelection();
+      return ((r = u.current) == null ? void 0 : r.validateSelection()) ?? !1;
     },
     destroy: () => {
       u.current && (u.current.destroy(), u.current = null);
     }
-  })), E(() => {
+  })), z(() => {
     if (l.current)
-      return u.current && u.current.destroy(), u.current = new F({
+      return u.current && u.current.destroy(), u.current = new A({
         location: l.current,
-        ...j
+        ...H
       }), () => {
         u.current && (u.current.destroy(), u.current = null);
       };
-  }, [m, y, i, W, v, w, s, t, c, f, d, e, R]), /* @__PURE__ */ z.createElement("div", { ref: l });
+  }, [m, i, y, W, a, v, c, s, t, f, d, e, w]), /* @__PURE__ */ P("div", { ref: l });
 });
+B.displayName = "ReactSpotWidget";
 export {
-  K as default
+  B as default
 };

package/dist/index.umd.js

@@ -1 +1 @@
-(function(r,s){typeof exports=="object"&&typeof module<"u"?module.exports=s(require("react"),require("@getspot/spot-widget")):typeof define=="function"&&define.amd?define(["react","@getspot/spot-widget"],s):(r=typeof globalThis<"u"?globalThis:r||self,r.ReactSpotWidget=s(r.React,r.SpotWidget))})(this,function(r,s){"use strict";return r.forwardRef(({apiConfig:y,quoteRequestData:m,showTable:W=!0,optInSelected:w=!1,theme:v,callbacks:x={},onQuoteRetrieved:c,onOptIn:d,onOptOut:f,onError:i,onNoMatchingQuote:l,onSelectionChange:u,...j},H)=>{const p=r.useRef(null),t=r.useRef(null),T={...x,...c&&{onQuoteRetrieved:c},...d&&{onOptIn:e=>{d==null||d(e),u==null||u(e)}},...f&&{onOptOut:e=>{f==null||f(e),u==null||u(e)}},...i&&{onError:i},...l&&{onNoMatchingQuote:l}},q={apiConfig:y,quoteRequestData:m,showTable:W,optInSelected:w,theme:v,callbacks:T,...j};return r.useImperativeHandle(H,()=>({updateQuote:e=>{var k;return(k=t.current)==null?void 0:k.updateQuote(e)},getSelection:()=>{var e;return(e=t.current)==null?void 0:e.getSelection()},validateSelection:()=>{var e;return(e=t.current)==null?void 0:e.validateSelection()},destroy:()=>{t.current&&(t.current.destroy(),t.current=null)}})),r.useEffect(()=>{if(p.current)return t.current&&t.current.destroy(),t.current=new s({location:p.current,...q}),()=>{t.current&&(t.current.destroy(),t.current=null)}},[y,m,W,w,v,x,c,d,f,i,l,u,j]),r.createElement("div",{ref:p})})});
+(function(u,t){typeof exports=="object"&&typeof module<"u"?module.exports=t(require("react/jsx-runtime"),require("react"),require("@getspot/spot-widget")):typeof define=="function"&&define.amd?define(["react/jsx-runtime","react","@getspot/spot-widget"],t):(u=typeof globalThis<"u"?globalThis:u||self,u.ReactSpotWidget=t(u.React,u.React,u.SpotWidget))})(this,function(u,t,n){"use strict";const p=t.forwardRef(({apiConfig:y,quoteRequestData:R,showTable:x=!0,optInSelected:W=!1,theme:j,callbacks:w={},onQuoteRetrieved:i,onOptIn:d,onOptOut:f,onError:c,onNoMatchingQuote:l,onSelectionChange:s,...v},q)=>{const m=t.useRef(null),r=t.useRef(null),H={...w,...i&&{onQuoteRetrieved:i},...d&&{onOptIn:e=>{d==null||d(e),s==null||s(e)}},...f&&{onOptOut:e=>{f==null||f(e),s==null||s(e)}},...c&&{onError:c},...l&&{noMatchingQuote:l}},P={apiConfig:y,quoteRequestData:R,showTable:x,optInSelected:W,theme:j,callbacks:H,...v};return t.useImperativeHandle(q,()=>({updateQuote:e=>{var k;return((k=r.current)==null?void 0:k.updateQuote(e))??Promise.resolve(!1)},getSelection:()=>{var e;return((e=r.current)==null?void 0:e.getSelection())??null},validateSelection:()=>{var e;return((e=r.current)==null?void 0:e.validateSelection())??!1},destroy:()=>{r.current&&(r.current.destroy(),r.current=null)}})),t.useEffect(()=>{if(m.current)return r.current&&r.current.destroy(),r.current=new n({location:m.current,...P}),()=>{r.current&&(r.current.destroy(),r.current=null)}},[y,R,x,W,j,w,i,d,f,c,l,s,v]),u.jsx("div",{ref:m})});return p.displayName="ReactSpotWidget",p});

package/dist/setupTests.d.ts

@@ -0,0 +1,2 @@
+import '@testing-library/jest-dom';
+//# sourceMappingURL=setupTests.d.ts.map

package/dist/setupTests.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"setupTests.d.ts","sourceRoot":"","sources":["../src/setupTests.ts"],"names":[],"mappings":"AAAA,OAAO,2BAA2B,CAAC"}

package/package.json

@@ -1,23 +1,52 @@
 {
   "name": "@getspot/spot-widget-react",
-  "version": "1.4.0",
+  "version": "2.0.0",
   "publishConfig": {
     "access": "public"
   },
   "main": "dist/index.umd.js",
   "module": "dist/index.es.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "README.md",
+    "CHANGELOG.md"
+  ],
+  "scripts": {
+    "build": "vite build && npx -p typescript tsc --emitDeclarationOnly && cp dist/ReactSpotWidget.d.ts dist/index.d.ts",
+    "docs": "npx -p typedoc -p typedoc-plugin-markdown typedoc --plugin typedoc-plugin-markdown --out docs src/ReactSpotWidget.tsx",
+    "docs:readme": "npm run docs && node scripts/generate-readme.js",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "test:coverage": "jest --coverage",
+    "test:ci": "jest --ci --coverage --watchAll=false",
+    "prepublishOnly": "npm run build"
+  },
   "dependencies": {
-    "@getspot/spot-widget": "1.4.0"
+    "@getspot/spot-widget": "workspace:*"
   },
   "peerDependencies": {
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0",
+    "@types/react": ">=18.0.0",
+    "@types/react-dom": ">=18.0.0"
   },
   "devDependencies": {
     "vite": "^5.0.0",
-    "@vitejs/plugin-react": "^4.0.0"
-  },
-  "scripts": {
-    "build": "vite build"
+    "@vitejs/plugin-react": "^4.0.0",
+    "typescript": "~5.4.0",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "typedoc": "^0.28.0",
+    "typedoc-plugin-markdown": "^4.0.0",
+    "jest": "^29.0.0",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/jest-dom": "^6.0.0",
+    "@testing-library/user-event": "^14.0.0",
+    "@types/jest": "^29.0.0",
+    "jest-environment-jsdom": "^29.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "ts-jest": "^29.0.0"
   }
-}
+}

package/.turbo/turbo-build.log

@@ -1,14 +0,0 @@
-
-> @getspot/spot-widget-react@1.4.0 build /builds/getspot/spot-widget/packages/react
-> vite build
-
-The CJS build of Vite's Node API is deprecated. See https://vite.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more details.
-vite v5.4.18 building for production...
-transforming...
-✓ 1 modules transformed.
-No name was provided for external module "@getspot/spot-widget" in "output.globals" – guessing "SpotWidget".
-rendering chunks...
-computing gzip size...
-dist/index.umd.js  1.41 kB │ gzip: 0.65 kB
-dist/index.es.js  1.71 kB │ gzip: 0.68 kB
-✓ built in 140ms

package/src/ReactSpotWidget.jsx

@@ -1,93 +0,0 @@
-import React, { useEffect, useRef, useImperativeHandle, forwardRef } from "react";
-import SpotWidget from "@getspot/spot-widget";
-
-const ReactSpotWidget = forwardRef(({ 
-  apiConfig,
-  quoteRequestData,
-  showTable = true,
-  optInSelected = false,
-  theme,
-  callbacks = {},
-  onQuoteRetrieved,
-  onOptIn,
-  onOptOut,
-  onError,
-  onNoMatchingQuote,
-  onSelectionChange,
-  ...otherOptions 
-}, ref) => {
-  const widgetRef = useRef(null);
-  const spotWidgetInstance = useRef(null);
-
-  // Merge callbacks from props with callbacks object
-  const mergedCallbacks = {
-    ...callbacks,
-    ...(onQuoteRetrieved && { onQuoteRetrieved }),
-    ...(onOptIn && { 
-      onOptIn: (data) => {
-        onOptIn?.(data);
-        onSelectionChange?.(data);
-      }
-    }),
-    ...(onOptOut && { 
-      onOptOut: (data) => {
-        onOptOut?.(data);
-        onSelectionChange?.(data);
-      }
-    }),
-    ...(onError && { onError }),
-    ...(onNoMatchingQuote && { onNoMatchingQuote }),
-  };
-
-  const options = {
-    apiConfig,
-    quoteRequestData,
-    showTable,
-    optInSelected,
-    theme,
-    callbacks: mergedCallbacks,
-    ...otherOptions,
-  };
-
-  useImperativeHandle(ref, () => ({
-    updateQuote: (newQuoteRequestData) => {
-      return spotWidgetInstance.current?.updateQuote(newQuoteRequestData);
-    },
-    getSelection: () => {
-      return spotWidgetInstance.current?.getSelection();
-    },
-    validateSelection: () => {
-      return spotWidgetInstance.current?.validateSelection();
-    },
-    destroy: () => {
-      if (spotWidgetInstance.current) {
-        spotWidgetInstance.current.destroy();
-        spotWidgetInstance.current = null;
-      }
-    },
-  }));
-
-  useEffect(() => {
-    if (widgetRef.current) {
-      if (spotWidgetInstance.current) {
-        spotWidgetInstance.current.destroy();
-      }
-      
-      spotWidgetInstance.current = new SpotWidget({
-        location: widgetRef.current,
-        ...options,
-      });
-
-      return () => {
-        if (spotWidgetInstance.current) {
-          spotWidgetInstance.current.destroy();
-          spotWidgetInstance.current = null;
-        }
-      };
-    }
-  }, [apiConfig, quoteRequestData, showTable, optInSelected, theme, callbacks, onQuoteRetrieved, onOptIn, onOptOut, onError, onNoMatchingQuote, onSelectionChange, otherOptions]);
-
-  return <div ref={widgetRef}></div>;
-});
-
-export default ReactSpotWidget;

package/vite.config.js

@@ -1,23 +0,0 @@
-import { defineConfig } from "vite";
-import path from "path";
-
-export default defineConfig({
-  build: {
-    outDir: "dist",
-    lib: {
-      entry: path.resolve(__dirname, "src/ReactSpotWidget.jsx"),
-      name: "ReactSpotWidget",
-      fileName: (format) => `index.${format}.js`,
-      formats: ["umd", "es"],
-    },
-    rollupOptions: {
-      external: ["react", "react-dom", "@getspot/spot-widget"],
-      output: {
-        globals: {
-          react: "React",
-          "react-dom": "ReactDOM",
-        },
-      },
-    },
-  },
-});