@meaple-com/react-headless-components 2.0.1 → 4.0.0

package/README.md

@@ -14,8 +14,8 @@ bun add @meaple-com/react-headless-components @meaple-com/react-query @meaple-co
 
 **Peer dependencies:**
 
-- `react` ^19.0.0  
-- `@meaple-com/react-query` ^1.0.6  
+- `react` ^19.0.0
+- `@meaple-com/react-query` ^1.0.6
 
 Make sure the app is wrapped with `QueryClientProvider` and `MeapleSDKProvider` as described in [@meaple-com/react-query](https://www.npmjs.com/package/@meaple-com/react-query).
 
@@ -28,7 +28,7 @@ import { CartProvider } from '@meaple-com/react-headless-components';
 
 <CartProvider initialCoupon={null}>
   {/* Components that use Cart, Coupon, ListEventTickets, etc. */}
-</CartProvider>
+</CartProvider>;
 ```
 
 ## Components
@@ -37,28 +37,28 @@ Components use a **render-props** API: they call `children` with data and state
 
 ### Lists (read-only)
 
-| Component | Description | Render props |
-|-----------|-------------|--------------|
-| **`ListEvents`** | List events (uses `useEvents`) | `events`, `isPending`, `error` |
-| **`ListCategories`** | List categories | `categories`, `isPending`, `error` |
-| **`ListEventTickets`** | Tickets for an event | `tickets`, `isPending`, `error` |
-| **`ListEventProducts`** | Products for an event | `products`, `isPending`, `error` |
-| **`ListUserEvents`** | Current user’s events | `events`, `isPending`, `error` |
-| **`ListUserEventTickets`** | Current user’s tickets for an event | `tickets`, `isPending`, `error` |
-| **`ListUserOrders`** | Current user’s orders | `orders`, `isPending`, `error` |
+| Component                  | Description                         | Render props                       |
+| -------------------------- | ----------------------------------- | ---------------------------------- |
+| **`ListEvents`**           | List events (uses `useEvents`)      | `events`, `isPending`, `error`     |
+| **`ListCategories`**       | List categories                     | `categories`, `isPending`, `error` |
+| **`ListEventTickets`**     | Tickets for an event                | `tickets`, `isPending`, `error`    |
+| **`ListEventProducts`**    | Products for an event               | `products`, `isPending`, `error`   |
+| **`ListUserEvents`**       | Current user’s events               | `events`, `isPending`, `error`     |
+| **`ListUserEventTickets`** | Current user’s tickets for an event | `tickets`, `isPending`, `error`    |
+| **`ListUserOrders`**       | Current user’s orders               | `orders`, `isPending`, `error`     |
 
 ### Order and coupon
 
-| Component | Description | Render props |
-|-----------|-------------|--------------|
-| **`GetOrder`** | Single order by ID | order data, `isPending`, `error` |
-| **`Coupon`** | Check and apply coupon | mutation + coupon state |
-| **`Cart`** | Cart totals, items, clear | `items`, `totalAmount`, `totalPrice`, `totalDiscount`, `clearCart`, etc. |
-| **`TicketQuantityController`** | Add/remove ticket to/from cart | quantity controls (uses `useTicketQuantity`) |
+| Component                      | Description                    | Render props                                                             |
+| ------------------------------ | ------------------------------ | ------------------------------------------------------------------------ |
+| **`GetOrder`**                 | Single order by ID             | order data, `isPending`, `error`                                         |
+| **`Coupon`**                   | Check and apply coupon         | mutation + coupon state                                                  |
+| **`Cart`**                     | Cart totals, items, clear      | `items`, `totalAmount`, `totalPrice`, `totalDiscount`, `clearCart`, etc. |
+| **`TicketQuantityController`** | Add/remove ticket to/from cart | quantity controls (uses `useTicketQuantity`)                             |
 
 ### Hooks
 
-- **`useCart()`** – Cart context (items, increment, decrement, clear, coupon, applyCoupon, computeItemDiscount). Use inside `CartProvider`.  
+- **`useCart()`** – Cart context (items, increment, decrement, clear, coupon, applyCoupon, computeItemDiscount). Use inside `CartProvider`.
 - **`useTicketQuantity(ticket, options?)`** – Quantity in cart for a ticket (and optional seat), plus increment/decrement.
 
 ## Example: Event list and cart

package/dist/index.cjs

@@ -163,17 +163,19 @@ var Cart = ({
       0
     );
   }, [platformFee, cart.items, feeType]);
+  const discountedPrice = Math.max(rawPrice - totalDiscount, 0);
   const totalFee = (0, import_react2.useMemo)(() => {
     if (!platformFee) return 0;
     const { fee, minFeeAmount, thresholdAmount } = feeType === `POS` && platformFee.pos ? platformFee.pos : platformFee;
     if (fee === 0) return 0;
     if (rawFeeAmount <= 0) return 0;
+    if (discountedPrice <= 0) return 0;
     if (rawFeeAmount < minFeeAmount && rawPrice < thresholdAmount) {
       return minFeeAmount;
     }
     return rawFeeAmount;
-  }, [feeType, platformFee, rawFeeAmount, rawPrice]);
-  const totalPrice = Math.max(rawPrice - totalDiscount, 0) + totalFee;
+  }, [feeType, platformFee, rawFeeAmount, rawPrice, discountedPrice]);
+  const totalPrice = discountedPrice + totalFee;
   return children({
     totalAmount,
     totalDiscount,
@@ -268,6 +270,7 @@ var import_react_query4 = require("@meaple-com/react-query");
 var ListEventProducts = ({
   children,
   eventId,
+  channelId,
   privateToken,
   options
 }) => {
@@ -276,9 +279,10 @@ var ListEventProducts = ({
     privateToken,
     options
   );
-  const { data: platformFee } = (0, import_react_query4.usePlatformFee)(eventId, {
-    enabled: !!eventId
-  });
+  const { data: platformFee } = (0, import_react_query4.usePlatformFee)(
+    { eventId, channelId },
+    { enabled: !!eventId && !!channelId }
+  );
   const fee = platformFee?.fee ?? 0;
   return children({
     products: data?.products ?? [],
@@ -304,6 +308,7 @@ var import_react_query6 = require("@meaple-com/react-query");
 var ListEventTickets = ({
   children,
   eventId,
+  channelId,
   privateToken,
   predecessorIds,
   options
@@ -314,9 +319,10 @@ var ListEventTickets = ({
     predecessorIds,
     options
   );
-  const { data: platformFee } = (0, import_react_query6.usePlatformFee)(eventId, {
-    enabled: !!eventId
-  });
+  const { data: platformFee } = (0, import_react_query6.usePlatformFee)(
+    { eventId, channelId },
+    { enabled: !!eventId && !!channelId }
+  );
   const fee = platformFee?.fee ?? 0;
   return children({
     tickets: data?.tickets ?? [],

package/dist/index.d.cts

@@ -123,10 +123,11 @@ type ListEventProductsProps = {
         error: Error | null;
     }) => ReactNode;
     eventId: string;
+    channelId: string;
     privateToken?: string | null;
     options?: Parameters<typeof useEventProducts>[2];
 };
-declare const ListEventProducts: ({ children, eventId, privateToken, options, }: ListEventProductsProps) => ReactNode;
+declare const ListEventProducts: ({ children, eventId, channelId, privateToken, options, }: ListEventProductsProps) => ReactNode;
 
 type ListEventsProps = {
     children: (props: {
@@ -148,11 +149,12 @@ type ListEventTicketsProps = {
         error: Error | null;
     }) => ReactNode;
     eventId: string;
+    channelId: string;
     privateToken?: string | null;
     predecessorIds?: string[];
     options?: Parameters<typeof useEventTickets>[3];
 };
-declare const ListEventTickets: ({ children, eventId, privateToken, predecessorIds, options, }: ListEventTicketsProps) => ReactNode;
+declare const ListEventTickets: ({ children, eventId, channelId, privateToken, predecessorIds, options, }: ListEventTicketsProps) => ReactNode;
 
 type SectionType = 'coming_soon' | 'past' | 'awards';
 type ListUserEventsProps = {

package/dist/index.d.ts

@@ -123,10 +123,11 @@ type ListEventProductsProps = {
         error: Error | null;
     }) => ReactNode;
     eventId: string;
+    channelId: string;
     privateToken?: string | null;
     options?: Parameters<typeof useEventProducts>[2];
 };
-declare const ListEventProducts: ({ children, eventId, privateToken, options, }: ListEventProductsProps) => ReactNode;
+declare const ListEventProducts: ({ children, eventId, channelId, privateToken, options, }: ListEventProductsProps) => ReactNode;
 
 type ListEventsProps = {
     children: (props: {
@@ -148,11 +149,12 @@ type ListEventTicketsProps = {
         error: Error | null;
     }) => ReactNode;
     eventId: string;
+    channelId: string;
     privateToken?: string | null;
     predecessorIds?: string[];
     options?: Parameters<typeof useEventTickets>[3];
 };
-declare const ListEventTickets: ({ children, eventId, privateToken, predecessorIds, options, }: ListEventTicketsProps) => ReactNode;
+declare const ListEventTickets: ({ children, eventId, channelId, privateToken, predecessorIds, options, }: ListEventTicketsProps) => ReactNode;
 
 type SectionType = 'coming_soon' | 'past' | 'awards';
 type ListUserEventsProps = {

package/dist/index.js

@@ -129,17 +129,19 @@ var Cart = ({
       0
     );
   }, [platformFee, cart.items, feeType]);
+  const discountedPrice = Math.max(rawPrice - totalDiscount, 0);
   const totalFee = useMemo(() => {
     if (!platformFee) return 0;
     const { fee, minFeeAmount, thresholdAmount } = feeType === `POS` && platformFee.pos ? platformFee.pos : platformFee;
     if (fee === 0) return 0;
     if (rawFeeAmount <= 0) return 0;
+    if (discountedPrice <= 0) return 0;
     if (rawFeeAmount < minFeeAmount && rawPrice < thresholdAmount) {
       return minFeeAmount;
     }
     return rawFeeAmount;
-  }, [feeType, platformFee, rawFeeAmount, rawPrice]);
-  const totalPrice = Math.max(rawPrice - totalDiscount, 0) + totalFee;
+  }, [feeType, platformFee, rawFeeAmount, rawPrice, discountedPrice]);
+  const totalPrice = discountedPrice + totalFee;
   return children({
     totalAmount,
     totalDiscount,
@@ -234,6 +236,7 @@ import { useEventProducts, usePlatformFee } from "@meaple-com/react-query";
 var ListEventProducts = ({
   children,
   eventId,
+  channelId,
   privateToken,
   options
 }) => {
@@ -242,9 +245,10 @@ var ListEventProducts = ({
     privateToken,
     options
   );
-  const { data: platformFee } = usePlatformFee(eventId, {
-    enabled: !!eventId
-  });
+  const { data: platformFee } = usePlatformFee(
+    { eventId, channelId },
+    { enabled: !!eventId && !!channelId }
+  );
   const fee = platformFee?.fee ?? 0;
   return children({
     products: data?.products ?? [],
@@ -270,6 +274,7 @@ import { useEventTickets, usePlatformFee as usePlatformFee2 } from "@meaple-com/
 var ListEventTickets = ({
   children,
   eventId,
+  channelId,
   privateToken,
   predecessorIds,
   options
@@ -280,9 +285,10 @@ var ListEventTickets = ({
     predecessorIds,
     options
   );
-  const { data: platformFee } = usePlatformFee2(eventId, {
-    enabled: !!eventId
-  });
+  const { data: platformFee } = usePlatformFee2(
+    { eventId, channelId },
+    { enabled: !!eventId && !!channelId }
+  );
   const fee = platformFee?.fee ?? 0;
   return children({
     tickets: data?.tickets ?? [],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meaple-com/react-headless-components",
-  "version": "2.0.1",
+  "version": "4.0.0",
   "description": "Headless React components for Meaple SDK",
   "type": "module",
   "main": "./dist/index.js",
@@ -28,11 +28,11 @@
     "clean": "rimraf dist"
   },
   "dependencies": {
-    "@meaple-com/types": "^4.0.0"
+    "@meaple-com/types": "^4.1.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.36.0",
-    "@meaple-com/react-query": "^1.1.1",
+    "@meaple-com/react-query": "^2.0.0",
     "@types/react": "^19.0.0",
     "@typescript-eslint/eslint-plugin": "^7.18.0",
     "@typescript-eslint/parser": "^7.18.0",
@@ -44,7 +44,7 @@
     "rimraf": "^5.0.5"
   },
   "peerDependencies": {
-    "@meaple-com/react-query": "^1.1.1",
+    "@meaple-com/react-query": "^2.0.0",
     "react": "^19.2.4"
   },
   "files": [