@meaple-com/react-headless-components 2.0.0 → 3.0.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.
Files changed (6) hide show
  1. package/README.md +19 -19
  2. package/dist/index.cjs +4 -2
  3. package/dist/index.d.cts +3 -3
  4. package/dist/index.d.ts +3 -3
  5. package/dist/index.js +4 -2
  6. package/package.json +5 -5
package/README.md CHANGED
@@ -14,8 +14,8 @@ bun add @meaple-com/react-headless-components @meaple-com/react-query @meaple-co
14
14
 
15
15
  **Peer dependencies:**
16
16
 
17
- - `react` ^19.0.0
18
- - `@meaple-com/react-query` ^1.0.6
17
+ - `react` ^19.0.0
18
+ - `@meaple-com/react-query` ^1.0.6
19
19
 
20
20
  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).
21
21
 
@@ -28,7 +28,7 @@ import { CartProvider } from '@meaple-com/react-headless-components';
28
28
 
29
29
  <CartProvider initialCoupon={null}>
30
30
  {/* Components that use Cart, Coupon, ListEventTickets, etc. */}
31
- </CartProvider>
31
+ </CartProvider>;
32
32
  ```
33
33
 
34
34
  ## Components
@@ -37,28 +37,28 @@ Components use a **render-props** API: they call `children` with data and state
37
37
 
38
38
  ### Lists (read-only)
39
39
 
40
- | Component | Description | Render props |
41
- |-----------|-------------|--------------|
42
- | **`ListEvents`** | List events (uses `useEvents`) | `events`, `isPending`, `error` |
43
- | **`ListCategories`** | List categories | `categories`, `isPending`, `error` |
44
- | **`ListEventTickets`** | Tickets for an event | `tickets`, `isPending`, `error` |
45
- | **`ListEventProducts`** | Products for an event | `products`, `isPending`, `error` |
46
- | **`ListUserEvents`** | Current user’s events | `events`, `isPending`, `error` |
47
- | **`ListUserEventTickets`** | Current user’s tickets for an event | `tickets`, `isPending`, `error` |
48
- | **`ListUserOrders`** | Current user’s orders | `orders`, `isPending`, `error` |
40
+ | Component | Description | Render props |
41
+ | -------------------------- | ----------------------------------- | ---------------------------------- |
42
+ | **`ListEvents`** | List events (uses `useEvents`) | `events`, `isPending`, `error` |
43
+ | **`ListCategories`** | List categories | `categories`, `isPending`, `error` |
44
+ | **`ListEventTickets`** | Tickets for an event | `tickets`, `isPending`, `error` |
45
+ | **`ListEventProducts`** | Products for an event | `products`, `isPending`, `error` |
46
+ | **`ListUserEvents`** | Current user’s events | `events`, `isPending`, `error` |
47
+ | **`ListUserEventTickets`** | Current user’s tickets for an event | `tickets`, `isPending`, `error` |
48
+ | **`ListUserOrders`** | Current user’s orders | `orders`, `isPending`, `error` |
49
49
 
50
50
  ### Order and coupon
51
51
 
52
- | Component | Description | Render props |
53
- |-----------|-------------|--------------|
54
- | **`GetOrder`** | Single order by ID | order data, `isPending`, `error` |
55
- | **`Coupon`** | Check and apply coupon | mutation + coupon state |
56
- | **`Cart`** | Cart totals, items, clear | `items`, `totalAmount`, `totalPrice`, `totalDiscount`, `clearCart`, etc. |
57
- | **`TicketQuantityController`** | Add/remove ticket to/from cart | quantity controls (uses `useTicketQuantity`) |
52
+ | Component | Description | Render props |
53
+ | ------------------------------ | ------------------------------ | ------------------------------------------------------------------------ |
54
+ | **`GetOrder`** | Single order by ID | order data, `isPending`, `error` |
55
+ | **`Coupon`** | Check and apply coupon | mutation + coupon state |
56
+ | **`Cart`** | Cart totals, items, clear | `items`, `totalAmount`, `totalPrice`, `totalDiscount`, `clearCart`, etc. |
57
+ | **`TicketQuantityController`** | Add/remove ticket to/from cart | quantity controls (uses `useTicketQuantity`) |
58
58
 
59
59
  ### Hooks
60
60
 
61
- - **`useCart()`** – Cart context (items, increment, decrement, clear, coupon, applyCoupon, computeItemDiscount). Use inside `CartProvider`.
61
+ - **`useCart()`** – Cart context (items, increment, decrement, clear, coupon, applyCoupon, computeItemDiscount). Use inside `CartProvider`.
62
62
  - **`useTicketQuantity(ticket, options?)`** – Quantity in cart for a ticket (and optional seat), plus increment/decrement.
63
63
 
64
64
  ## Example: Event list and cart
package/dist/index.cjs CHANGED
@@ -163,17 +163,19 @@ var Cart = ({
163
163
  0
164
164
  );
165
165
  }, [platformFee, cart.items, feeType]);
166
+ const discountedPrice = Math.max(rawPrice - totalDiscount, 0);
166
167
  const totalFee = (0, import_react2.useMemo)(() => {
167
168
  if (!platformFee) return 0;
168
169
  const { fee, minFeeAmount, thresholdAmount } = feeType === `POS` && platformFee.pos ? platformFee.pos : platformFee;
169
170
  if (fee === 0) return 0;
170
171
  if (rawFeeAmount <= 0) return 0;
172
+ if (discountedPrice <= 0) return 0;
171
173
  if (rawFeeAmount < minFeeAmount && rawPrice < thresholdAmount) {
172
174
  return minFeeAmount;
173
175
  }
174
176
  return rawFeeAmount;
175
- }, [feeType, platformFee, rawFeeAmount, rawPrice]);
176
- const totalPrice = Math.max(rawPrice - totalDiscount, 0) + totalFee;
177
+ }, [feeType, platformFee, rawFeeAmount, rawPrice, discountedPrice]);
178
+ const totalPrice = discountedPrice + totalFee;
177
179
  return children({
178
180
  totalAmount,
179
181
  totalDiscount,
package/dist/index.d.cts CHANGED
@@ -1,6 +1,6 @@
1
1
  import { ReactNode } from 'react';
2
2
  import * as _meaple_com_types from '@meaple-com/types';
3
- import { TicketProps, GroupProps, CouponProps, GetOrderResponseProps as GetOrderResponseProps$1, CategoryProps, GetEventProductProps, FindEventProps, FindEventsParams, GetEventTicketProps, GetEventTicketGroupProps, GetUserEventsProps, UserTicketProps, UserOrderProps } from '@meaple-com/types';
3
+ import { TicketProps, GroupProps, CouponProps, GetOrderResponseProps as GetOrderResponseProps$1, CategoryProps, GetEventProductProps, FindEventProps, FindEventsParams, GetEventTicketProps, GetEventTicketGroupProps, GetUserEventProps, UserTicketProps, GetUserOrderProps } from '@meaple-com/types';
4
4
  import * as react_jsx_runtime from 'react/jsx-runtime';
5
5
  import { useCheckCoupon, useOrder, useCategories, useEventProducts, useEvents, useEventTickets, useUserEvents, useUserEventTickets, useUserOrders } from '@meaple-com/react-query';
6
6
 
@@ -157,7 +157,7 @@ declare const ListEventTickets: ({ children, eventId, privateToken, predecessorI
157
157
  type SectionType = 'coming_soon' | 'past' | 'awards';
158
158
  type ListUserEventsProps = {
159
159
  children: (props: {
160
- events: GetUserEventsProps[];
160
+ events: GetUserEventProps[];
161
161
  isPending: boolean;
162
162
  error: Error | null;
163
163
  }) => ReactNode;
@@ -180,7 +180,7 @@ declare const ListUserEventTickets: ({ children, eventId, options, }: ListUserEv
180
180
  type SectionStatus = 'PAID' | 'REFUNDED';
181
181
  type ListUserOrdersProps = {
182
182
  children: (props: {
183
- orders: UserOrderProps[];
183
+ orders: GetUserOrderProps[];
184
184
  isPending: boolean;
185
185
  error: Error | null;
186
186
  }) => ReactNode;
package/dist/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import { ReactNode } from 'react';
2
2
  import * as _meaple_com_types from '@meaple-com/types';
3
- import { TicketProps, GroupProps, CouponProps, GetOrderResponseProps as GetOrderResponseProps$1, CategoryProps, GetEventProductProps, FindEventProps, FindEventsParams, GetEventTicketProps, GetEventTicketGroupProps, GetUserEventsProps, UserTicketProps, UserOrderProps } from '@meaple-com/types';
3
+ import { TicketProps, GroupProps, CouponProps, GetOrderResponseProps as GetOrderResponseProps$1, CategoryProps, GetEventProductProps, FindEventProps, FindEventsParams, GetEventTicketProps, GetEventTicketGroupProps, GetUserEventProps, UserTicketProps, GetUserOrderProps } from '@meaple-com/types';
4
4
  import * as react_jsx_runtime from 'react/jsx-runtime';
5
5
  import { useCheckCoupon, useOrder, useCategories, useEventProducts, useEvents, useEventTickets, useUserEvents, useUserEventTickets, useUserOrders } from '@meaple-com/react-query';
6
6
 
@@ -157,7 +157,7 @@ declare const ListEventTickets: ({ children, eventId, privateToken, predecessorI
157
157
  type SectionType = 'coming_soon' | 'past' | 'awards';
158
158
  type ListUserEventsProps = {
159
159
  children: (props: {
160
- events: GetUserEventsProps[];
160
+ events: GetUserEventProps[];
161
161
  isPending: boolean;
162
162
  error: Error | null;
163
163
  }) => ReactNode;
@@ -180,7 +180,7 @@ declare const ListUserEventTickets: ({ children, eventId, options, }: ListUserEv
180
180
  type SectionStatus = 'PAID' | 'REFUNDED';
181
181
  type ListUserOrdersProps = {
182
182
  children: (props: {
183
- orders: UserOrderProps[];
183
+ orders: GetUserOrderProps[];
184
184
  isPending: boolean;
185
185
  error: Error | null;
186
186
  }) => ReactNode;
package/dist/index.js CHANGED
@@ -129,17 +129,19 @@ var Cart = ({
129
129
  0
130
130
  );
131
131
  }, [platformFee, cart.items, feeType]);
132
+ const discountedPrice = Math.max(rawPrice - totalDiscount, 0);
132
133
  const totalFee = useMemo(() => {
133
134
  if (!platformFee) return 0;
134
135
  const { fee, minFeeAmount, thresholdAmount } = feeType === `POS` && platformFee.pos ? platformFee.pos : platformFee;
135
136
  if (fee === 0) return 0;
136
137
  if (rawFeeAmount <= 0) return 0;
138
+ if (discountedPrice <= 0) return 0;
137
139
  if (rawFeeAmount < minFeeAmount && rawPrice < thresholdAmount) {
138
140
  return minFeeAmount;
139
141
  }
140
142
  return rawFeeAmount;
141
- }, [feeType, platformFee, rawFeeAmount, rawPrice]);
142
- const totalPrice = Math.max(rawPrice - totalDiscount, 0) + totalFee;
143
+ }, [feeType, platformFee, rawFeeAmount, rawPrice, discountedPrice]);
144
+ const totalPrice = discountedPrice + totalFee;
143
145
  return children({
144
146
  totalAmount,
145
147
  totalDiscount,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@meaple-com/react-headless-components",
3
- "version": "2.0.0",
3
+ "version": "3.0.0",
4
4
  "description": "Headless React components for Meaple SDK",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",
@@ -28,11 +28,11 @@
28
28
  "clean": "rimraf dist"
29
29
  },
30
30
  "dependencies": {
31
- "@meaple-com/types": "^3.0.0"
31
+ "@meaple-com/types": "^4.1.0"
32
32
  },
33
33
  "devDependencies": {
34
34
  "@eslint/js": "^9.36.0",
35
- "@meaple-com/react-query": "^1.1.0",
35
+ "@meaple-com/react-query": "^1.2.0",
36
36
  "@types/react": "^19.0.0",
37
37
  "@typescript-eslint/eslint-plugin": "^7.18.0",
38
38
  "@typescript-eslint/parser": "^7.18.0",
@@ -44,8 +44,8 @@
44
44
  "rimraf": "^5.0.5"
45
45
  },
46
46
  "peerDependencies": {
47
- "@meaple-com/react-query": "^1.1.0",
48
- "react": "^19.0.0"
47
+ "@meaple-com/react-query": "^1.2.0",
48
+ "react": "^19.2.4"
49
49
  },
50
50
  "files": [
51
51
  "dist"