@meaple-com/react-headless-components 1.0.0

package/dist/index.cjs

@@ -0,0 +1,461 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  Cart: () => Cart,
+  CartProvider: () => CartProvider,
+  Coupon: () => Coupon,
+  GetOrder: () => GetOrder,
+  ListCategories: () => ListCategories,
+  ListEventProducts: () => ListEventProducts,
+  ListEventTickets: () => ListEventTickets,
+  ListEvents: () => ListEvents,
+  ListUserEventTickets: () => ListUserEventTickets,
+  ListUserEvents: () => ListUserEvents,
+  ListUserOrders: () => ListUserOrders,
+  TicketQuantityController: () => TicketQuantityController,
+  useCart: () => useCart,
+  useTicketQuantity: () => useTicketQuantity
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/components/Cart.tsx
+var import_react2 = require("react");
+
+// src/contexts/CartContext.tsx
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var CartContext = (0, import_react.createContext)({});
+var CartProvider = ({ children, initialCoupon }) => {
+  const [items, setItems] = (0, import_react.useState)([]);
+  const [coupon, setCoupon] = (0, import_react.useState)(initialCoupon);
+  const incrementToCart = (0, import_react.useCallback)((item) => {
+    setItems((prevItems) => {
+      const itemExists = prevItems.find((prevItem) => prevItem.id === item.id);
+      if (!itemExists)
+        return [
+          ...prevItems,
+          {
+            ...item,
+            amount: 1,
+            seats: item.seat ? [item.seat] : void 0
+          }
+        ];
+      return prevItems.map((prevItem) => {
+        if (prevItem.id === item.id) {
+          return {
+            ...prevItem,
+            amount: prevItem.amount + 1,
+            seats: item.seat ? [...prevItem.seats ?? [], item.seat] : prevItem.seats
+          };
+        }
+        return prevItem;
+      });
+    });
+  }, []);
+  const decrementFromCart = (0, import_react.useCallback)((item) => {
+    setItems((prevItems) => {
+      return prevItems.map((prevItem) => {
+        if (prevItem.id === item.id) {
+          return {
+            ...prevItem,
+            amount: prevItem.amount - 1,
+            seats: prevItem.seats ? prevItem.seats.filter((seat) => seat.id !== item.seat?.id) : prevItem.seats
+          };
+        }
+        return prevItem;
+      }).filter((prevItem) => prevItem.amount > 0);
+    });
+  }, []);
+  const getItem = (0, import_react.useCallback)(
+    (itemId) => {
+      return items.find((item) => item.id === itemId);
+    },
+    [items]
+  );
+  const clearCart = (0, import_react.useCallback)(() => {
+    setItems([]);
+  }, []);
+  const applyCoupon = (0, import_react.useCallback)((coupon2) => {
+    setCoupon(coupon2);
+  }, []);
+  const computeItemDiscount = (0, import_react.useCallback)(
+    (item) => {
+      if (!coupon) return 0;
+      if (coupon.ticketIds.length > 0 && !coupon.ticketIds.includes(item.id))
+        return 0;
+      if (coupon.type === `PERCENTAGE`)
+        return item.amount * item.price * (coupon.value / 100);
+      return item.amount * coupon.value;
+    },
+    [coupon]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    CartContext.Provider,
+    {
+      value: {
+        items,
+        getItem,
+        incrementToCart,
+        decrementFromCart,
+        clearCart,
+        coupon,
+        computeItemDiscount,
+        applyCoupon
+      },
+      children
+    }
+  );
+};
+function useCart() {
+  const context = (0, import_react.useContext)(CartContext);
+  if (!context) {
+    throw new Error(`useCart must be used within a CartProvider`);
+  }
+  return context;
+}
+
+// src/components/Cart.tsx
+var Cart = ({
+  children,
+  feeType = `DIGITAL`,
+  platformFee
+}) => {
+  const cart = useCart();
+  const totalAmount = (0, import_react2.useMemo)(
+    () => cart.items.reduce((acc, item) => acc + item.amount, 0),
+    [cart.items]
+  );
+  const totalDiscount = (0, import_react2.useMemo)(() => {
+    return cart.items.reduce(
+      (acc, item) => acc + Math.min(cart.computeItemDiscount(item), item.price * item.amount),
+      0
+    );
+  }, [cart]);
+  const rawPrice = (0, import_react2.useMemo)(() => {
+    return cart.items.reduce((acc, item) => {
+      return acc + item.price * item.amount;
+    }, 0);
+  }, [cart.items]);
+  const rawFeeAmount = (0, import_react2.useMemo)(() => {
+    if (!platformFee) return 0;
+    const fee = feeType === `POS` && platformFee.pos ? platformFee.pos.fee : platformFee.fee;
+    return cart.items.reduce(
+      (acc, item) => acc + item.price * item.amount * fee,
+      0
+    );
+  }, [platformFee, cart.items, feeType]);
+  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 (rawFeeAmount < minFeeAmount && rawPrice < thresholdAmount) {
+      return minFeeAmount;
+    }
+    return rawFeeAmount;
+  }, [feeType, platformFee, rawFeeAmount, rawPrice]);
+  const totalPrice = Math.max(rawPrice - totalDiscount, 0) + totalFee;
+  return children({
+    totalAmount,
+    totalDiscount,
+    rawPrice,
+    rawFeeAmount,
+    totalFee,
+    totalPrice,
+    items: cart.items,
+    clearCart: cart.clearCart
+  });
+};
+
+// src/components/Coupon.tsx
+var import_react3 = require("react");
+var import_react_query = require("@meaple-com/react-query");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function mapCouponData(cart, couponState) {
+  const { coupon, applyCoupon } = cart;
+  return {
+    coupon,
+    applyCoupon,
+    // Cupom functions
+    isCheckingCoupon: couponState.isChecking,
+    couponError: couponState.error,
+    isCouponValid: couponState.isSuccess,
+    checkCoupon: couponState.checkCoupon,
+    clearCoupon: couponState.clearCoupon,
+    currentCouponCode: couponState.currentCouponCode,
+    setCouponCode: couponState.setCouponCode
+  };
+}
+var Coupon = ({ children, eventId, options }) => {
+  const cart = useCart();
+  const { mutateAsync: checkCouponFn, ...checkCoupon } = (0, import_react_query.useCheckCoupon)(options);
+  const [currentCouponCode, setCurrentCouponCode] = (0, import_react3.useState)(cart.coupon?.code);
+  const handleCheckCoupon = (0, import_react3.useCallback)(
+    async (couponCode) => {
+      try {
+        const data2 = await checkCouponFn({ eventId, couponCode });
+        console.log("data", data2);
+        console.log(typeof data2.ticketIds);
+        cart.applyCoupon(data2);
+        setCurrentCouponCode(couponCode);
+      } catch (err) {
+      }
+    },
+    [cart, checkCouponFn, eventId]
+  );
+  const handleClearCoupon = (0, import_react3.useCallback)(() => {
+    setCurrentCouponCode(``);
+    cart.applyCoupon(null);
+  }, [cart]);
+  const couponState = {
+    isChecking: checkCoupon.isPending,
+    error: checkCoupon.error,
+    isSuccess: checkCoupon.isSuccess,
+    checkCoupon: handleCheckCoupon,
+    clearCoupon: handleClearCoupon,
+    currentCouponCode,
+    setCouponCode: setCurrentCouponCode
+  };
+  const data = mapCouponData(cart, couponState);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: children(data) });
+};
+
+// src/components/GetOrder.tsx
+var import_react_query2 = require("@meaple-com/react-query");
+var GetOrder = ({ children, orderId, options }) => {
+  const { data, isPending, error } = (0, import_react_query2.useOrder)(orderId, options);
+  return children({
+    order: data?.order ?? null,
+    paidTickets: data?.paidTickets ?? null,
+    paymentIntent: data?.paymentIntent,
+    isPending,
+    error
+  });
+};
+
+// src/components/ListCategories.tsx
+var import_react_query3 = require("@meaple-com/react-query");
+var ListCategories = ({ children, options }) => {
+  const { data, isPending, error } = (0, import_react_query3.useCategories)(options);
+  return children({
+    categories: data ?? [],
+    isPending,
+    error
+  });
+};
+
+// src/components/ListEventProducts.tsx
+var import_react_query4 = require("@meaple-com/react-query");
+var ListEventProducts = ({
+  children,
+  eventId,
+  privateToken,
+  options
+}) => {
+  const { data, isPending, error } = (0, import_react_query4.useEventProducts)(
+    eventId,
+    privateToken,
+    options
+  );
+  return children({
+    products: data?.products ?? [],
+    isPending,
+    error
+  });
+};
+
+// src/components/ListEvents.tsx
+var import_react_query5 = require("@meaple-com/react-query");
+var ListEvents = ({ children, channelId, options }) => {
+  const { data, isPending, error } = (0, import_react_query5.useChannelEvents)({ channelId }, options);
+  return children({
+    events: data ?? [],
+    isPending,
+    error
+  });
+};
+
+// src/components/ListEventTickets.tsx
+var import_react_query6 = require("@meaple-com/react-query");
+var ListEventTickets = ({
+  children,
+  eventId,
+  privateToken,
+  predecessorIds,
+  options
+}) => {
+  const { data, isPending, error } = (0, import_react_query6.useEventTickets)(
+    eventId,
+    privateToken,
+    predecessorIds,
+    options
+  );
+  return children({
+    tickets: data?.tickets ?? [],
+    groups: data?.groups ?? [],
+    isPending,
+    error
+  });
+};
+
+// src/components/ListUserEvents.tsx
+var import_react_query7 = require("@meaple-com/react-query");
+var ListUserEvents = ({ children, type, options }) => {
+  const { data, isPending, error } = (0, import_react_query7.useUserEvents)(
+    {
+      type: type ?? "coming_soon"
+    },
+    options
+  );
+  const events = Array.isArray(data) ? data : [];
+  return children({ events, isPending, error });
+};
+
+// src/components/ListUserEventTickets.tsx
+var import_react_query8 = require("@meaple-com/react-query");
+var ListUserEventTickets = ({
+  children,
+  eventId,
+  options
+}) => {
+  const { data, isPending, error } = (0, import_react_query8.useUserEventTickets)(
+    eventId,
+    void 0,
+    options
+  );
+  return children({
+    userTickets: data?.userTickets ?? [],
+    isPending,
+    error
+  });
+};
+
+// src/components/ListUserOrders.tsx
+var import_react_query9 = require("@meaple-com/react-query");
+var ListUserOrders = ({
+  children,
+  status,
+  eventId,
+  options
+}) => {
+  const { data, isPending, error } = (0, import_react_query9.useUserOrders)(
+    { status, eventId },
+    options
+  );
+  return children({
+    orders: data ?? [],
+    isPending,
+    error
+  });
+};
+
+// src/components/TicketQuantityController.tsx
+var import_react4 = require("react");
+var TicketQuantityController = ({
+  ticket,
+  onSoldOut,
+  children
+}) => {
+  const cart = useCart();
+  const item = cart.getItem(ticket.id);
+  const amount = item?.amount ?? 0;
+  const incrementAmount = ticket.minBuy ?? 1;
+  const isMaxLimitReached = amount + incrementAmount > (ticket.maxBuy ?? Infinity);
+  const eventMaxBuy = ticket.maxBuy ?? Infinity;
+  const disabled = ticket.availableAmount === 0 || eventMaxBuy === 0;
+  const increment = (0, import_react4.useCallback)(() => {
+    if (disabled) return;
+    if (amount + incrementAmount >= ticket.availableAmount && onSoldOut)
+      onSoldOut();
+    for (let i = 0; i < incrementAmount; i++) {
+      cart.incrementToCart(ticket);
+    }
+  }, [amount, incrementAmount, ticket, onSoldOut, cart, disabled]);
+  const decrement = (0, import_react4.useCallback)(() => {
+    if (disabled) return;
+    for (let i = 0; i < incrementAmount; i++) {
+      cart.decrementFromCart({ id: ticket.id });
+    }
+  }, [cart, ticket.id, incrementAmount, disabled]);
+  return children({
+    amount,
+    isMaxLimitReached: isMaxLimitReached || !!disabled,
+    increment,
+    decrement,
+    disabled
+  });
+};
+
+// src/hooks/useTicketQuantity.ts
+var import_react5 = require("react");
+function useTicketQuantity({
+  ticket,
+  disabled,
+  onSoldOut
+}) {
+  const cart = useCart();
+  const item = cart.getItem(ticket.id);
+  const amount = item?.amount ?? 0;
+  const incrementAmount = ticket.minBuy ?? 1;
+  const isMaxLimitReached = amount + incrementAmount > (ticket.maxBuy ?? Infinity);
+  const increment = (0, import_react5.useCallback)(() => {
+    if (disabled) return;
+    if (amount + incrementAmount >= ticket.availableAmount && onSoldOut)
+      onSoldOut();
+    for (let i = 0; i < incrementAmount; i++) {
+      cart.incrementToCart(ticket);
+    }
+  }, [amount, incrementAmount, ticket, onSoldOut, cart, disabled]);
+  const decrement = (0, import_react5.useCallback)(() => {
+    if (disabled) return;
+    for (let i = 0; i < incrementAmount; i++) {
+      cart.decrementFromCart({ id: ticket.id });
+    }
+  }, [cart, ticket.id, incrementAmount, disabled]);
+  return (0, import_react5.useMemo)(
+    () => ({
+      amount,
+      isMaxLimitReached: isMaxLimitReached || !!disabled,
+      increment,
+      decrement,
+      disabled: !!disabled
+    }),
+    [amount, isMaxLimitReached, increment, decrement, disabled]
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Cart,
+  CartProvider,
+  Coupon,
+  GetOrder,
+  ListCategories,
+  ListEventProducts,
+  ListEventTickets,
+  ListEvents,
+  ListUserEventTickets,
+  ListUserEvents,
+  ListUserOrders,
+  TicketQuantityController,
+  useCart,
+  useTicketQuantity
+});

package/dist/index.d.cts

@@ -0,0 +1,223 @@
+import { ReactNode } from 'react';
+import * as _meaple_com_types from '@meaple-com/types';
+import { TicketProps, GroupProps as GroupProps$1, CouponProps, GetOrderProps as GetOrderProps$1, CategoryProps, EventProps, UserTicketProps, UserOrderProps } from '@meaple-com/types';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { useCheckCoupon, useOrder, useCategories, useEventProducts, useChannelEvents, useEventTickets, useUserEvents, useUserEventTickets, useUserOrders } from '@meaple-com/react-query';
+
+type ItemProps$1 = Pick<TicketProps, 'id' | 'name' | 'price' | 'amount' | 'type'> & {
+    group?: Pick<GroupProps$1, 'name'>;
+};
+type PlatformFeeData = {
+    fee: number;
+    minFeeAmount: number;
+    thresholdAmount: number;
+    pos?: {
+        fee: number;
+        minFeeAmount: number;
+        thresholdAmount: number;
+    };
+};
+type CartProps = {
+    children: (props: {
+        totalAmount: number;
+        totalDiscount: number;
+        rawPrice: number;
+        rawFeeAmount: number;
+        totalFee: number;
+        totalPrice: number;
+        clearCart: () => void;
+        items: ItemProps$1[];
+    }) => ReactNode;
+    eventId?: string;
+    channelId?: string;
+    feeType?: 'POS' | 'DIGITAL';
+    platformFee?: PlatformFeeData;
+};
+declare const Cart: ({ children, feeType, platformFee, }: CartProps) => ReactNode;
+
+type ItemProps = Pick<TicketProps, 'id' | 'name' | 'price' | 'amount' | 'type'> & {
+    group?: Pick<GroupProps$1, 'name'>;
+};
+type SeatProps = {
+    id: string;
+    label: string;
+};
+type MyItemsProps = ItemProps & {
+    seats?: SeatProps[];
+};
+type IncrementToCartProps = Omit<ItemProps, 'amount'> & {
+    seat?: SeatProps;
+};
+type DecrementToCartProps = Pick<ItemProps, 'id'> & {
+    seat?: SeatProps;
+};
+interface CartContextProps {
+    children: ReactNode;
+    initialCoupon: CouponProps | null;
+}
+interface CartContextData {
+    items: MyItemsProps[];
+    getItem: (itemId: string) => ItemProps | undefined;
+    incrementToCart: (item: IncrementToCartProps) => void;
+    decrementFromCart: (item: DecrementToCartProps) => void;
+    clearCart: () => void;
+    coupon: CouponProps | null;
+    computeItemDiscount: (item: Omit<ItemProps, 'name'>) => number;
+    applyCoupon: (coupon: CouponProps | null) => void;
+}
+declare const CartProvider: ({ children, initialCoupon }: CartContextProps) => react_jsx_runtime.JSX.Element;
+declare function useCart(): CartContextData;
+
+type CouponHeadlessProps = {
+    children: (props: ReturnType<typeof mapCouponData>) => ReactNode;
+    eventId: string;
+    options?: Parameters<typeof useCheckCoupon>[0];
+};
+declare function mapCouponData(cart: ReturnType<typeof useCart>, couponState: {
+    isChecking: boolean;
+    error: Error | null;
+    isSuccess: boolean;
+    checkCoupon: (couponCode: string) => Promise<void>;
+    clearCoupon: () => void;
+    currentCouponCode: string | undefined;
+    setCouponCode: (code: string) => void;
+}): {
+    coupon: _meaple_com_types.CouponProps | null;
+    applyCoupon: (coupon: _meaple_com_types.CouponProps | null) => void;
+    isCheckingCoupon: boolean;
+    couponError: Error | null;
+    isCouponValid: boolean;
+    checkCoupon: (couponCode: string) => Promise<void>;
+    clearCoupon: () => void;
+    currentCouponCode: string | undefined;
+    setCouponCode: (code: string) => void;
+};
+declare const Coupon: ({ children, eventId, options }: CouponHeadlessProps) => react_jsx_runtime.JSX.Element;
+
+type GetOrderProps = {
+    children: (props: {
+        order: GetOrderProps$1['order'] | null;
+        paidTickets: GetOrderProps$1['paidTickets'] | null;
+        paymentIntent: GetOrderProps$1['paymentIntent'];
+        isPending: boolean;
+        error: Error | null;
+    }) => ReactNode;
+    orderId: string;
+    options?: Parameters<typeof useOrder>[1];
+};
+declare const GetOrder: ({ children, orderId, options }: GetOrderProps) => ReactNode;
+
+type ListCategoriesProps = {
+    children: (props: {
+        categories: CategoryProps[];
+        isPending: boolean;
+        error: Error | null;
+    }) => ReactNode;
+    options?: Parameters<typeof useCategories>[0];
+};
+declare const ListCategories: ({ children, options }: ListCategoriesProps) => ReactNode;
+
+type ListEventProductsProps = {
+    children: (props: {
+        products: TicketProps[];
+        isPending: boolean;
+        error: Error | null;
+    }) => ReactNode;
+    eventId: string;
+    privateToken?: string | null;
+    options?: Parameters<typeof useEventProducts>[2];
+};
+declare const ListEventProducts: ({ children, eventId, privateToken, options, }: ListEventProductsProps) => ReactNode;
+
+type ListEventsProps = {
+    children: (props: {
+        events: EventProps[];
+        isPending: boolean;
+        error: Error | null;
+    }) => ReactNode;
+    channelId: string;
+    options?: Parameters<typeof useChannelEvents>[1];
+};
+declare const ListEvents: ({ children, channelId, options }: ListEventsProps) => ReactNode;
+
+type GroupProps = GroupProps$1 & {
+    maxBuyAmount?: number;
+};
+type ListEventTicketsProps = {
+    children: (props: {
+        tickets: TicketProps[];
+        groups: GroupProps[];
+        isPending: boolean;
+        error: Error | null;
+    }) => ReactNode;
+    eventId: string;
+    privateToken?: string | null;
+    predecessorIds?: string[];
+    options?: Parameters<typeof useEventTickets>[3];
+};
+declare const ListEventTickets: ({ children, eventId, privateToken, predecessorIds, options, }: ListEventTicketsProps) => ReactNode;
+
+type SectionType = 'coming_soon' | 'past' | 'awards';
+type ListUserEventsProps = {
+    children: (props: {
+        events: EventProps[];
+        isPending: boolean;
+        error: Error | null;
+    }) => ReactNode;
+    type?: SectionType;
+    options?: Parameters<typeof useUserEvents>[1];
+};
+declare const ListUserEvents: ({ children, type, options }: ListUserEventsProps) => ReactNode;
+
+type ListUserEventTicketsProps = {
+    children: (props: {
+        userTickets: UserTicketProps[];
+        isPending: boolean;
+        error: Error | null;
+    }) => ReactNode;
+    eventId: string;
+    options?: Parameters<typeof useUserEventTickets>[2];
+};
+declare const ListUserEventTickets: ({ children, eventId, options, }: ListUserEventTicketsProps) => ReactNode;
+
+type SectionStatus = 'PAID' | 'REFUNDED';
+type ListUserOrdersProps = {
+    children: (props: {
+        orders: UserOrderProps[];
+        isPending: boolean;
+        error: Error | null;
+    }) => ReactNode;
+    status: SectionStatus;
+    eventId?: string;
+    options?: Parameters<typeof useUserOrders>[1];
+};
+declare const ListUserOrders: ({ children, status, eventId, options, }: ListUserOrdersProps) => ReactNode;
+
+type ControllerProps = {
+    ticket: Pick<TicketProps, 'id' | 'name' | 'price' | 'type' | 'minBuy' | 'maxBuy' | 'availableAmount'>;
+    disabled?: boolean;
+    onSoldOut?: () => void;
+    children: (props: {
+        amount: number;
+        isMaxLimitReached: boolean;
+        increment: () => void;
+        decrement: () => void;
+        disabled: boolean;
+    }) => ReactNode;
+};
+declare const TicketQuantityController: ({ ticket, onSoldOut, children, }: ControllerProps) => ReactNode;
+
+type UseTicketQuantityParams = {
+    ticket: Pick<TicketProps, 'id' | 'name' | 'price' | 'type' | 'minBuy' | 'maxBuy' | 'availableAmount'>;
+    disabled?: boolean;
+    onSoldOut?: () => void;
+};
+declare function useTicketQuantity({ ticket, disabled, onSoldOut, }: UseTicketQuantityParams): {
+    amount: number;
+    isMaxLimitReached: boolean;
+    increment: () => void;
+    decrement: () => void;
+    disabled: boolean;
+};
+
+export { Cart, type CartContextData, type CartProps, CartProvider, Coupon, GetOrder, ListCategories, ListEventProducts, ListEventTickets, ListEvents, ListUserEventTickets, ListUserEvents, ListUserOrders, type PlatformFeeData, TicketQuantityController, useCart, useTicketQuantity };

package/dist/index.d.ts

@@ -0,0 +1,223 @@
+import { ReactNode } from 'react';
+import * as _meaple_com_types from '@meaple-com/types';
+import { TicketProps, GroupProps as GroupProps$1, CouponProps, GetOrderProps as GetOrderProps$1, CategoryProps, EventProps, UserTicketProps, UserOrderProps } from '@meaple-com/types';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { useCheckCoupon, useOrder, useCategories, useEventProducts, useChannelEvents, useEventTickets, useUserEvents, useUserEventTickets, useUserOrders } from '@meaple-com/react-query';
+
+type ItemProps$1 = Pick<TicketProps, 'id' | 'name' | 'price' | 'amount' | 'type'> & {
+    group?: Pick<GroupProps$1, 'name'>;
+};
+type PlatformFeeData = {
+    fee: number;
+    minFeeAmount: number;
+    thresholdAmount: number;
+    pos?: {
+        fee: number;
+        minFeeAmount: number;
+        thresholdAmount: number;
+    };
+};
+type CartProps = {
+    children: (props: {
+        totalAmount: number;
+        totalDiscount: number;
+        rawPrice: number;
+        rawFeeAmount: number;
+        totalFee: number;
+        totalPrice: number;
+        clearCart: () => void;
+        items: ItemProps$1[];
+    }) => ReactNode;
+    eventId?: string;
+    channelId?: string;
+    feeType?: 'POS' | 'DIGITAL';
+    platformFee?: PlatformFeeData;
+};
+declare const Cart: ({ children, feeType, platformFee, }: CartProps) => ReactNode;
+
+type ItemProps = Pick<TicketProps, 'id' | 'name' | 'price' | 'amount' | 'type'> & {
+    group?: Pick<GroupProps$1, 'name'>;
+};
+type SeatProps = {
+    id: string;
+    label: string;
+};
+type MyItemsProps = ItemProps & {
+    seats?: SeatProps[];
+};
+type IncrementToCartProps = Omit<ItemProps, 'amount'> & {
+    seat?: SeatProps;
+};
+type DecrementToCartProps = Pick<ItemProps, 'id'> & {
+    seat?: SeatProps;
+};
+interface CartContextProps {
+    children: ReactNode;
+    initialCoupon: CouponProps | null;
+}
+interface CartContextData {
+    items: MyItemsProps[];
+    getItem: (itemId: string) => ItemProps | undefined;
+    incrementToCart: (item: IncrementToCartProps) => void;
+    decrementFromCart: (item: DecrementToCartProps) => void;
+    clearCart: () => void;
+    coupon: CouponProps | null;
+    computeItemDiscount: (item: Omit<ItemProps, 'name'>) => number;
+    applyCoupon: (coupon: CouponProps | null) => void;
+}
+declare const CartProvider: ({ children, initialCoupon }: CartContextProps) => react_jsx_runtime.JSX.Element;
+declare function useCart(): CartContextData;
+
+type CouponHeadlessProps = {
+    children: (props: ReturnType<typeof mapCouponData>) => ReactNode;
+    eventId: string;
+    options?: Parameters<typeof useCheckCoupon>[0];
+};
+declare function mapCouponData(cart: ReturnType<typeof useCart>, couponState: {
+    isChecking: boolean;
+    error: Error | null;
+    isSuccess: boolean;
+    checkCoupon: (couponCode: string) => Promise<void>;
+    clearCoupon: () => void;
+    currentCouponCode: string | undefined;
+    setCouponCode: (code: string) => void;
+}): {
+    coupon: _meaple_com_types.CouponProps | null;
+    applyCoupon: (coupon: _meaple_com_types.CouponProps | null) => void;
+    isCheckingCoupon: boolean;
+    couponError: Error | null;
+    isCouponValid: boolean;
+    checkCoupon: (couponCode: string) => Promise<void>;
+    clearCoupon: () => void;
+    currentCouponCode: string | undefined;
+    setCouponCode: (code: string) => void;
+};
+declare const Coupon: ({ children, eventId, options }: CouponHeadlessProps) => react_jsx_runtime.JSX.Element;
+
+type GetOrderProps = {
+    children: (props: {
+        order: GetOrderProps$1['order'] | null;
+        paidTickets: GetOrderProps$1['paidTickets'] | null;
+        paymentIntent: GetOrderProps$1['paymentIntent'];
+        isPending: boolean;
+        error: Error | null;
+    }) => ReactNode;
+    orderId: string;
+    options?: Parameters<typeof useOrder>[1];
+};
+declare const GetOrder: ({ children, orderId, options }: GetOrderProps) => ReactNode;
+
+type ListCategoriesProps = {
+    children: (props: {
+        categories: CategoryProps[];
+        isPending: boolean;
+        error: Error | null;
+    }) => ReactNode;
+    options?: Parameters<typeof useCategories>[0];
+};
+declare const ListCategories: ({ children, options }: ListCategoriesProps) => ReactNode;
+
+type ListEventProductsProps = {
+    children: (props: {
+        products: TicketProps[];
+        isPending: boolean;
+        error: Error | null;
+    }) => ReactNode;
+    eventId: string;
+    privateToken?: string | null;
+    options?: Parameters<typeof useEventProducts>[2];
+};
+declare const ListEventProducts: ({ children, eventId, privateToken, options, }: ListEventProductsProps) => ReactNode;
+
+type ListEventsProps = {
+    children: (props: {
+        events: EventProps[];
+        isPending: boolean;
+        error: Error | null;
+    }) => ReactNode;
+    channelId: string;
+    options?: Parameters<typeof useChannelEvents>[1];
+};
+declare const ListEvents: ({ children, channelId, options }: ListEventsProps) => ReactNode;
+
+type GroupProps = GroupProps$1 & {
+    maxBuyAmount?: number;
+};
+type ListEventTicketsProps = {
+    children: (props: {
+        tickets: TicketProps[];
+        groups: GroupProps[];
+        isPending: boolean;
+        error: Error | null;
+    }) => ReactNode;
+    eventId: string;
+    privateToken?: string | null;
+    predecessorIds?: string[];
+    options?: Parameters<typeof useEventTickets>[3];
+};
+declare const ListEventTickets: ({ children, eventId, privateToken, predecessorIds, options, }: ListEventTicketsProps) => ReactNode;
+
+type SectionType = 'coming_soon' | 'past' | 'awards';
+type ListUserEventsProps = {
+    children: (props: {
+        events: EventProps[];
+        isPending: boolean;
+        error: Error | null;
+    }) => ReactNode;
+    type?: SectionType;
+    options?: Parameters<typeof useUserEvents>[1];
+};
+declare const ListUserEvents: ({ children, type, options }: ListUserEventsProps) => ReactNode;
+
+type ListUserEventTicketsProps = {
+    children: (props: {
+        userTickets: UserTicketProps[];
+        isPending: boolean;
+        error: Error | null;
+    }) => ReactNode;
+    eventId: string;
+    options?: Parameters<typeof useUserEventTickets>[2];
+};
+declare const ListUserEventTickets: ({ children, eventId, options, }: ListUserEventTicketsProps) => ReactNode;
+
+type SectionStatus = 'PAID' | 'REFUNDED';
+type ListUserOrdersProps = {
+    children: (props: {
+        orders: UserOrderProps[];
+        isPending: boolean;
+        error: Error | null;
+    }) => ReactNode;
+    status: SectionStatus;
+    eventId?: string;
+    options?: Parameters<typeof useUserOrders>[1];
+};
+declare const ListUserOrders: ({ children, status, eventId, options, }: ListUserOrdersProps) => ReactNode;
+
+type ControllerProps = {
+    ticket: Pick<TicketProps, 'id' | 'name' | 'price' | 'type' | 'minBuy' | 'maxBuy' | 'availableAmount'>;
+    disabled?: boolean;
+    onSoldOut?: () => void;
+    children: (props: {
+        amount: number;
+        isMaxLimitReached: boolean;
+        increment: () => void;
+        decrement: () => void;
+        disabled: boolean;
+    }) => ReactNode;
+};
+declare const TicketQuantityController: ({ ticket, onSoldOut, children, }: ControllerProps) => ReactNode;
+
+type UseTicketQuantityParams = {
+    ticket: Pick<TicketProps, 'id' | 'name' | 'price' | 'type' | 'minBuy' | 'maxBuy' | 'availableAmount'>;
+    disabled?: boolean;
+    onSoldOut?: () => void;
+};
+declare function useTicketQuantity({ ticket, disabled, onSoldOut, }: UseTicketQuantityParams): {
+    amount: number;
+    isMaxLimitReached: boolean;
+    increment: () => void;
+    decrement: () => void;
+    disabled: boolean;
+};
+
+export { Cart, type CartContextData, type CartProps, CartProvider, Coupon, GetOrder, ListCategories, ListEventProducts, ListEventTickets, ListEvents, ListUserEventTickets, ListUserEvents, ListUserOrders, type PlatformFeeData, TicketQuantityController, useCart, useTicketQuantity };

package/dist/index.js

@@ -0,0 +1,426 @@
+// src/components/Cart.tsx
+import { useMemo } from "react";
+
+// src/contexts/CartContext.tsx
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useState
+} from "react";
+import { jsx } from "react/jsx-runtime";
+var CartContext = createContext({});
+var CartProvider = ({ children, initialCoupon }) => {
+  const [items, setItems] = useState([]);
+  const [coupon, setCoupon] = useState(initialCoupon);
+  const incrementToCart = useCallback((item) => {
+    setItems((prevItems) => {
+      const itemExists = prevItems.find((prevItem) => prevItem.id === item.id);
+      if (!itemExists)
+        return [
+          ...prevItems,
+          {
+            ...item,
+            amount: 1,
+            seats: item.seat ? [item.seat] : void 0
+          }
+        ];
+      return prevItems.map((prevItem) => {
+        if (prevItem.id === item.id) {
+          return {
+            ...prevItem,
+            amount: prevItem.amount + 1,
+            seats: item.seat ? [...prevItem.seats ?? [], item.seat] : prevItem.seats
+          };
+        }
+        return prevItem;
+      });
+    });
+  }, []);
+  const decrementFromCart = useCallback((item) => {
+    setItems((prevItems) => {
+      return prevItems.map((prevItem) => {
+        if (prevItem.id === item.id) {
+          return {
+            ...prevItem,
+            amount: prevItem.amount - 1,
+            seats: prevItem.seats ? prevItem.seats.filter((seat) => seat.id !== item.seat?.id) : prevItem.seats
+          };
+        }
+        return prevItem;
+      }).filter((prevItem) => prevItem.amount > 0);
+    });
+  }, []);
+  const getItem = useCallback(
+    (itemId) => {
+      return items.find((item) => item.id === itemId);
+    },
+    [items]
+  );
+  const clearCart = useCallback(() => {
+    setItems([]);
+  }, []);
+  const applyCoupon = useCallback((coupon2) => {
+    setCoupon(coupon2);
+  }, []);
+  const computeItemDiscount = useCallback(
+    (item) => {
+      if (!coupon) return 0;
+      if (coupon.ticketIds.length > 0 && !coupon.ticketIds.includes(item.id))
+        return 0;
+      if (coupon.type === `PERCENTAGE`)
+        return item.amount * item.price * (coupon.value / 100);
+      return item.amount * coupon.value;
+    },
+    [coupon]
+  );
+  return /* @__PURE__ */ jsx(
+    CartContext.Provider,
+    {
+      value: {
+        items,
+        getItem,
+        incrementToCart,
+        decrementFromCart,
+        clearCart,
+        coupon,
+        computeItemDiscount,
+        applyCoupon
+      },
+      children
+    }
+  );
+};
+function useCart() {
+  const context = useContext(CartContext);
+  if (!context) {
+    throw new Error(`useCart must be used within a CartProvider`);
+  }
+  return context;
+}
+
+// src/components/Cart.tsx
+var Cart = ({
+  children,
+  feeType = `DIGITAL`,
+  platformFee
+}) => {
+  const cart = useCart();
+  const totalAmount = useMemo(
+    () => cart.items.reduce((acc, item) => acc + item.amount, 0),
+    [cart.items]
+  );
+  const totalDiscount = useMemo(() => {
+    return cart.items.reduce(
+      (acc, item) => acc + Math.min(cart.computeItemDiscount(item), item.price * item.amount),
+      0
+    );
+  }, [cart]);
+  const rawPrice = useMemo(() => {
+    return cart.items.reduce((acc, item) => {
+      return acc + item.price * item.amount;
+    }, 0);
+  }, [cart.items]);
+  const rawFeeAmount = useMemo(() => {
+    if (!platformFee) return 0;
+    const fee = feeType === `POS` && platformFee.pos ? platformFee.pos.fee : platformFee.fee;
+    return cart.items.reduce(
+      (acc, item) => acc + item.price * item.amount * fee,
+      0
+    );
+  }, [platformFee, cart.items, feeType]);
+  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 (rawFeeAmount < minFeeAmount && rawPrice < thresholdAmount) {
+      return minFeeAmount;
+    }
+    return rawFeeAmount;
+  }, [feeType, platformFee, rawFeeAmount, rawPrice]);
+  const totalPrice = Math.max(rawPrice - totalDiscount, 0) + totalFee;
+  return children({
+    totalAmount,
+    totalDiscount,
+    rawPrice,
+    rawFeeAmount,
+    totalFee,
+    totalPrice,
+    items: cart.items,
+    clearCart: cart.clearCart
+  });
+};
+
+// src/components/Coupon.tsx
+import { useCallback as useCallback2, useState as useState2 } from "react";
+import { useCheckCoupon } from "@meaple-com/react-query";
+import { Fragment, jsx as jsx2 } from "react/jsx-runtime";
+function mapCouponData(cart, couponState) {
+  const { coupon, applyCoupon } = cart;
+  return {
+    coupon,
+    applyCoupon,
+    // Cupom functions
+    isCheckingCoupon: couponState.isChecking,
+    couponError: couponState.error,
+    isCouponValid: couponState.isSuccess,
+    checkCoupon: couponState.checkCoupon,
+    clearCoupon: couponState.clearCoupon,
+    currentCouponCode: couponState.currentCouponCode,
+    setCouponCode: couponState.setCouponCode
+  };
+}
+var Coupon = ({ children, eventId, options }) => {
+  const cart = useCart();
+  const { mutateAsync: checkCouponFn, ...checkCoupon } = useCheckCoupon(options);
+  const [currentCouponCode, setCurrentCouponCode] = useState2(cart.coupon?.code);
+  const handleCheckCoupon = useCallback2(
+    async (couponCode) => {
+      try {
+        const data2 = await checkCouponFn({ eventId, couponCode });
+        console.log("data", data2);
+        console.log(typeof data2.ticketIds);
+        cart.applyCoupon(data2);
+        setCurrentCouponCode(couponCode);
+      } catch (err) {
+      }
+    },
+    [cart, checkCouponFn, eventId]
+  );
+  const handleClearCoupon = useCallback2(() => {
+    setCurrentCouponCode(``);
+    cart.applyCoupon(null);
+  }, [cart]);
+  const couponState = {
+    isChecking: checkCoupon.isPending,
+    error: checkCoupon.error,
+    isSuccess: checkCoupon.isSuccess,
+    checkCoupon: handleCheckCoupon,
+    clearCoupon: handleClearCoupon,
+    currentCouponCode,
+    setCouponCode: setCurrentCouponCode
+  };
+  const data = mapCouponData(cart, couponState);
+  return /* @__PURE__ */ jsx2(Fragment, { children: children(data) });
+};
+
+// src/components/GetOrder.tsx
+import { useOrder } from "@meaple-com/react-query";
+var GetOrder = ({ children, orderId, options }) => {
+  const { data, isPending, error } = useOrder(orderId, options);
+  return children({
+    order: data?.order ?? null,
+    paidTickets: data?.paidTickets ?? null,
+    paymentIntent: data?.paymentIntent,
+    isPending,
+    error
+  });
+};
+
+// src/components/ListCategories.tsx
+import { useCategories } from "@meaple-com/react-query";
+var ListCategories = ({ children, options }) => {
+  const { data, isPending, error } = useCategories(options);
+  return children({
+    categories: data ?? [],
+    isPending,
+    error
+  });
+};
+
+// src/components/ListEventProducts.tsx
+import { useEventProducts } from "@meaple-com/react-query";
+var ListEventProducts = ({
+  children,
+  eventId,
+  privateToken,
+  options
+}) => {
+  const { data, isPending, error } = useEventProducts(
+    eventId,
+    privateToken,
+    options
+  );
+  return children({
+    products: data?.products ?? [],
+    isPending,
+    error
+  });
+};
+
+// src/components/ListEvents.tsx
+import { useChannelEvents } from "@meaple-com/react-query";
+var ListEvents = ({ children, channelId, options }) => {
+  const { data, isPending, error } = useChannelEvents({ channelId }, options);
+  return children({
+    events: data ?? [],
+    isPending,
+    error
+  });
+};
+
+// src/components/ListEventTickets.tsx
+import { useEventTickets } from "@meaple-com/react-query";
+var ListEventTickets = ({
+  children,
+  eventId,
+  privateToken,
+  predecessorIds,
+  options
+}) => {
+  const { data, isPending, error } = useEventTickets(
+    eventId,
+    privateToken,
+    predecessorIds,
+    options
+  );
+  return children({
+    tickets: data?.tickets ?? [],
+    groups: data?.groups ?? [],
+    isPending,
+    error
+  });
+};
+
+// src/components/ListUserEvents.tsx
+import { useUserEvents } from "@meaple-com/react-query";
+var ListUserEvents = ({ children, type, options }) => {
+  const { data, isPending, error } = useUserEvents(
+    {
+      type: type ?? "coming_soon"
+    },
+    options
+  );
+  const events = Array.isArray(data) ? data : [];
+  return children({ events, isPending, error });
+};
+
+// src/components/ListUserEventTickets.tsx
+import { useUserEventTickets } from "@meaple-com/react-query";
+var ListUserEventTickets = ({
+  children,
+  eventId,
+  options
+}) => {
+  const { data, isPending, error } = useUserEventTickets(
+    eventId,
+    void 0,
+    options
+  );
+  return children({
+    userTickets: data?.userTickets ?? [],
+    isPending,
+    error
+  });
+};
+
+// src/components/ListUserOrders.tsx
+import { useUserOrders } from "@meaple-com/react-query";
+var ListUserOrders = ({
+  children,
+  status,
+  eventId,
+  options
+}) => {
+  const { data, isPending, error } = useUserOrders(
+    { status, eventId },
+    options
+  );
+  return children({
+    orders: data ?? [],
+    isPending,
+    error
+  });
+};
+
+// src/components/TicketQuantityController.tsx
+import { useCallback as useCallback3 } from "react";
+var TicketQuantityController = ({
+  ticket,
+  onSoldOut,
+  children
+}) => {
+  const cart = useCart();
+  const item = cart.getItem(ticket.id);
+  const amount = item?.amount ?? 0;
+  const incrementAmount = ticket.minBuy ?? 1;
+  const isMaxLimitReached = amount + incrementAmount > (ticket.maxBuy ?? Infinity);
+  const eventMaxBuy = ticket.maxBuy ?? Infinity;
+  const disabled = ticket.availableAmount === 0 || eventMaxBuy === 0;
+  const increment = useCallback3(() => {
+    if (disabled) return;
+    if (amount + incrementAmount >= ticket.availableAmount && onSoldOut)
+      onSoldOut();
+    for (let i = 0; i < incrementAmount; i++) {
+      cart.incrementToCart(ticket);
+    }
+  }, [amount, incrementAmount, ticket, onSoldOut, cart, disabled]);
+  const decrement = useCallback3(() => {
+    if (disabled) return;
+    for (let i = 0; i < incrementAmount; i++) {
+      cart.decrementFromCart({ id: ticket.id });
+    }
+  }, [cart, ticket.id, incrementAmount, disabled]);
+  return children({
+    amount,
+    isMaxLimitReached: isMaxLimitReached || !!disabled,
+    increment,
+    decrement,
+    disabled
+  });
+};
+
+// src/hooks/useTicketQuantity.ts
+import { useCallback as useCallback4, useMemo as useMemo2 } from "react";
+function useTicketQuantity({
+  ticket,
+  disabled,
+  onSoldOut
+}) {
+  const cart = useCart();
+  const item = cart.getItem(ticket.id);
+  const amount = item?.amount ?? 0;
+  const incrementAmount = ticket.minBuy ?? 1;
+  const isMaxLimitReached = amount + incrementAmount > (ticket.maxBuy ?? Infinity);
+  const increment = useCallback4(() => {
+    if (disabled) return;
+    if (amount + incrementAmount >= ticket.availableAmount && onSoldOut)
+      onSoldOut();
+    for (let i = 0; i < incrementAmount; i++) {
+      cart.incrementToCart(ticket);
+    }
+  }, [amount, incrementAmount, ticket, onSoldOut, cart, disabled]);
+  const decrement = useCallback4(() => {
+    if (disabled) return;
+    for (let i = 0; i < incrementAmount; i++) {
+      cart.decrementFromCart({ id: ticket.id });
+    }
+  }, [cart, ticket.id, incrementAmount, disabled]);
+  return useMemo2(
+    () => ({
+      amount,
+      isMaxLimitReached: isMaxLimitReached || !!disabled,
+      increment,
+      decrement,
+      disabled: !!disabled
+    }),
+    [amount, isMaxLimitReached, increment, decrement, disabled]
+  );
+}
+export {
+  Cart,
+  CartProvider,
+  Coupon,
+  GetOrder,
+  ListCategories,
+  ListEventProducts,
+  ListEventTickets,
+  ListEvents,
+  ListUserEventTickets,
+  ListUserEvents,
+  ListUserOrders,
+  TicketQuantityController,
+  useCart,
+  useTicketQuantity
+};

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@meaple-com/react-headless-components",
+  "version": "1.0.0",
+  "description": "Headless React components for Meaple SDK",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs",
+      "default": "./dist/index.js"
+    }
+  },
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "scripts": {
+    "build": "tsup",
+    "build:packages": "tsup",
+    "dev": "tsup --watch",
+    "lint": "eslint \"src/**/*.{ts,tsx}\"",
+    "lint:fix": "eslint --fix \"src/**/*.{ts,tsx}\"",
+    "clean": "rimraf dist"
+  },
+  "dependencies": {
+    "@meaple-com/types": "workspace:*"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.36.0",
+    "@meaple-com/react-query": "workspace:*",
+    "@types/react": "^19.0.0",
+    "@typescript-eslint/eslint-plugin": "^7.18.0",
+    "@typescript-eslint/parser": "^7.18.0",
+    "eslint": "^9.36.0",
+    "globals": "^16.4.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.0.0",
+    "typescript-eslint": "^8.44.1",
+    "rimraf": "^5.0.5"
+  },
+  "peerDependencies": {
+    "@meaple-com/react-query": "^1.0.0",
+    "react": "^19.0.0"
+  },
+  "files": [
+    "dist"
+  ]
+}