@0xsequence/marketplace-sdk 0.8.11 → 0.8.12

package/src/react/ui/modals/BuyModal/__tests__/Modal.test.tsx.bak

@@ -0,0 +1,112 @@
+// import { cleanup, render, screen, waitFor } from "@test";
+// import { afterEach, beforeEach, describe, expect, it } from "vitest";
+
+// import { server } from "@test";
+// import type { Address } from "viem";
+// import { MarketplaceType } from "../../../../../types";
+// import {
+//   mockCollection,
+//   mockOrder,
+// } from "../../../../_internal/api/__mocks__/marketplace.msw";
+// import { BuyModal } from "../Modal";
+// import { buyModalStore } from "../store";
+
+// describe("BuyModal", () => {
+//   beforeEach(() => {
+//     buyModalStore.send({ type: "close" });
+//   });
+
+//   afterEach(() => {
+//     cleanup();
+//     // Reset server handlers
+//     server.resetHandlers();
+//   });
+
+//   it("should not render when isOpen is false", () => {
+//     render(<BuyModal />);
+
+//     expect(screen.queryByText("Loading Sequence Pay")).not.toBeInTheDocument();
+//     expect(screen.queryByText("Checkout")).not.toBeInTheDocument();
+//     expect(screen.queryByText("Select Quantity")).not.toBeInTheDocument();
+//   });
+
+//   it.skip("should render error modal when there is an error", async () => {
+//     server.use(
+//       http.post(mockMetadataEndpoint("GetContractInfo"), () => {
+//         return new HttpResponse(null, {
+//           status: 404,
+//         });
+//       })
+//     );
+//     buyModalStore.send({
+//       type: "open",
+//       props: {
+//         orderId: mockOrder.orderId,
+//         chainId: mockOrder.chainId,
+//         collectionAddress: mockOrder.collectionContractAddress as Address,
+//         collectibleId: "1",
+//         marketplace: mockOrder.marketplace,
+//       },
+//     });
+//     render(<BuyModal />);
+//     // Should show error modal
+//     await waitFor(
+//       () => {
+//         expect(screen.getByText("Error")).toBeInTheDocument();
+//       },
+//       { timeout: 1000 }
+//     );
+//   });
+
+//   it.skip("should render ERC1155QuantityModal when contract type is ERC1155", async () => {
+//     // Create an ERC1155 mock collection
+//     const erc1155Collection = {
+//       ...mockCollection,
+//       contractType: ContractType.ERC1155,
+//     };
+//     const erc1155Order = {
+//       ...mockOrder,
+//       quantityRemaining: "10",
+//       quantityRemainingFormatted: "10",
+//     };
+//     buyModalStore.send({
+//       type: "open",
+//       props: {
+//         orderId: erc1155Order.orderId,
+//         chainId: erc1155Order.chainId,
+//         collectionAddress: erc1155Order.collectionContractAddress,
+//         collectibleId: erc1155Order.tokenId,
+//         marketplace: erc1155Order.marketplace,
+//       },
+//     });
+//     render(<BuyModal />);
+//     // First should show loading
+//     expect(screen.getByText("Loading Sequence Pay")).toBeInTheDocument();
+//     // Then should show quantity modal for ERC1155
+//     await waitFor(
+//       () => {
+//         expect(screen.getByText("Select Quantity")).toBeInTheDocument();
+//       },
+//       { timeout: 5000 }
+//     );
+//   });
+
+//   it("should show loading modal", async () => {
+//     buyModalStore.send({
+//       type: "open",
+//       props: {
+//         orderId: mockOrder.orderId,
+//         chainId: mockOrder.chainId,
+//         collectionAddress: mockOrder.collectionContractAddress as Address,
+//         collectibleId: "1",
+//         marketplace: mockOrder.marketplace,
+//         marketplaceType: MarketplaceType.MARKET,
+//       },
+//     });
+
+//     render(<BuyModal />);
+
+//     // Should show loading modal
+//     expect(screen.getByText("Loading Sequence Pay")).toBeInTheDocument();
+//   });
+// });

package/src/react/ui/modals/BuyModal/__tests__/Modal1155.test.tsx

@@ -1,8 +1,14 @@
-import { act, fireEvent, render, screen } from '@test';
+import {
+	act,
+	fireEvent,
+	render,
+	screen,
+	waitForElementToBeRemoved,
+} from '@test';
 import { afterEach, beforeEach, describe, expect, it } from 'vitest';
 import type { Order } from '../../../../_internal';
 import { MarketplaceKind, OrderSide, OrderStatus } from '../../../../_internal';
-import { ERC1155QuantityModal } from '../ERC1155QuantityModal';
+import { ERC1155QuantityModal } from '../components/ERC1155QuantityModal';
 import { buyModalStore } from '../store';
 
 const testOrder: Order = {
@@ -49,6 +55,7 @@ describe('ERC1155QuantityModal', () => {
 				collectionAddress: '0x123' as `0x${string}`,
 				collectibleId: '1',
 				marketplace: MarketplaceKind.sequence_marketplace_v2,
+				marketplaceType: 'market',
 			},
 		});
 	});
@@ -59,17 +66,38 @@ describe('ERC1155QuantityModal', () => {
 	});
 
 	it('should render quantity modal with order details', async () => {
-		render(<ERC1155QuantityModal order={testOrder} />);
+		render(
+			<ERC1155QuantityModal
+				order={testOrder}
+				marketplaceType={'market'}
+				chainId={1}
+				quantityDecimals={0}
+				quantityRemaining="10"
+			/>,
+		);
 
 		// Check if the modal renders with the correct title
 		expect(screen.getByText('Select Quantity')).toBeInTheDocument();
 
+		// Wait for spinner to disappear if it exists
+		try {
+			await waitForElementToBeRemoved(() => screen.queryByTestId('spinner'));
+		} catch (error) {
+			// If no spinner or already gone, continue
+		}
+
 		// Check if the Buy now button exists
 		const buyButton = await screen.findByRole('button', { name: /buy now/i });
 		expect(buyButton).toBeInTheDocument();
+
 		// Capture the initial store state
 		const initialState = buyModalStore.getSnapshot();
-		expect(initialState.context.quantity).toBeUndefined();
+		expect(initialState.context.quantity).toBeNull();
+
+		// Check for Total Price section
+		await act(async () => {
+			expect(await screen.findByText('Total Price')).toBeInTheDocument();
+		});
 
 		// Click the Buy now button with default quantity "1"
 		await act(async () => {
@@ -82,14 +110,31 @@ describe('ERC1155QuantityModal', () => {
 	});
 
 	it('should update quantity when user changes the input value', async () => {
-		render(<ERC1155QuantityModal order={testOrder} />);
-
-		// Find the quantity input using label text
-		const quantityInput = await screen.findByLabelText('Enter quantity');
+		render(
+			<ERC1155QuantityModal
+				order={testOrder}
+				marketplaceType={'market'}
+				chainId={1}
+				quantityDecimals={0}
+				quantityRemaining="10"
+			/>,
+		);
+
+		// Wait for spinner to disappear if it exists
+		try {
+			await waitForElementToBeRemoved(() => screen.queryByTestId('spinner'));
+		} catch (error) {
+			// If no spinner or already gone, continue
+		}
+
+		// Find the quantity input using role and name
+		const quantityInput = await screen.findByRole('textbox', {
+			name: /enter quantity/i,
+		});
 
 		// Capture initial store state
 		const initialState = buyModalStore.getSnapshot();
-		expect(initialState.context.quantity).toBeUndefined();
+		expect(initialState.context.quantity).toBeNull();
 
 		// Change quantity to 5
 		await act(async () => {
@@ -97,7 +142,7 @@ describe('ERC1155QuantityModal', () => {
 		});
 
 		// Click Buy now button
-		const buyButton = screen.getByRole('button', { name: /buy now/i });
+		const buyButton = await screen.findByRole('button', { name: /buy now/i });
 		await act(async () => {
 			fireEvent.click(buyButton);
 		});
@@ -108,9 +153,27 @@ describe('ERC1155QuantityModal', () => {
 	});
 
 	it('should validate input quantity against available quantity', async () => {
-		render(<ERC1155QuantityModal order={testOrder} />);
-
-		const quantityInput = await screen.findByLabelText('Enter quantity');
+		render(
+			<ERC1155QuantityModal
+				order={testOrder}
+				marketplaceType={'market'}
+				chainId={1}
+				quantityDecimals={0}
+				quantityRemaining="10"
+			/>,
+		);
+
+		// Wait for spinner to disappear if it exists
+		try {
+			await waitForElementToBeRemoved(() => screen.queryByTestId('spinner'));
+		} catch (error) {
+			// If no spinner or already gone, continue
+		}
+
+		// Find the quantity input using role and name
+		const quantityInput = await screen.findByRole('textbox', {
+			name: /enter quantity/i,
+		});
 
 		const invalidQuantity = '';
 		await act(async () => {
@@ -137,4 +200,45 @@ describe('ERC1155QuantityModal', () => {
 		const updatedState = buyModalStore.getSnapshot();
 		expect(updatedState.context.quantity).toBe(10);
 	});
+	it('should display total price based on selected quantity', async () => {
+		render(
+			<ERC1155QuantityModal
+				order={testOrder}
+				marketplaceType={'market'}
+				chainId={1}
+				quantityDecimals={0}
+				quantityRemaining="10"
+			/>,
+		);
+
+		// Wait for spinner to disappear if it exists
+		try {
+			await waitForElementToBeRemoved(() => screen.queryByTestId('spinner'));
+		} catch (error) {
+			// If no spinner or already gone, continue
+		}
+
+		// Check that Total Price section is displayed (using findByText for async)
+		await act(async () => {
+			expect(await screen.findByText('Total Price')).toBeInTheDocument();
+		});
+
+		// Initially, when no currency data is loaded, it should show loading
+		await act(async () => {
+			expect(await screen.findByText('Loading...')).toBeInTheDocument();
+		});
+	});
+
+	//   it("should show error modal when required props are missing", async () => {
+	//     render(
+	//       <ERC1155QuantityModal
+	//         order={testOrder}
+	//         marketplaceType={'market'}
+	//         chainId={1}
+	//       />
+	//     );
+
+	//     // Should show error modal
+	//     expect(screen.getByText("Error")).toBeInTheDocument();
+	//   });
 });

package/src/react/ui/modals/BuyModal/__tests__/store.test.ts

@@ -1,6 +1,6 @@
 import { beforeEach, describe, expect, it } from 'vitest';
 import { MarketplaceKind } from '../../../../_internal';
-import { buyModalStore } from '../store';
+import { type MarketplaceBuyModalProps, buyModalStore } from '../store';
 
 describe('BuyModal Store', () => {
 	beforeEach(() => {
@@ -11,16 +11,17 @@ describe('BuyModal Store', () => {
 		const state = buyModalStore.getSnapshot();
 		expect(state.context.isOpen).toBe(false);
 		expect(state.context.props).toBeDefined();
-		expect(state.context.quantity).toBeUndefined();
+		expect(state.context.quantity).toBeNull();
 	});
 
 	it('should handle open action correctly', () => {
-		const mockProps = {
+		const mockProps: MarketplaceBuyModalProps = {
 			orderId: '1',
 			chainId: 1,
 			collectionAddress: '0x123' as `0x${string}`,
 			collectibleId: '1',
 			marketplace: MarketplaceKind.sequence_marketplace_v2,
+			marketplaceType: 'market',
 		};
 
 		buyModalStore.send({
@@ -36,12 +37,13 @@ describe('BuyModal Store', () => {
 	});
 
 	it('should handle close action correctly', () => {
-		const mockProps = {
+		const mockProps: MarketplaceBuyModalProps = {
 			orderId: '1',
 			chainId: 1,
 			collectionAddress: '0x123' as `0x${string}`,
 			collectibleId: '1',
 			marketplace: MarketplaceKind.sequence_marketplace_v2,
+			marketplaceType: 'market',
 		};
 
 		buyModalStore.send({
@@ -61,12 +63,13 @@ describe('BuyModal Store', () => {
 	});
 
 	it('should update loading states correctly', () => {
-		const mockProps = {
+		const mockProps: MarketplaceBuyModalProps = {
 			orderId: '1',
 			chainId: 1,
 			collectionAddress: '0x123' as `0x${string}`,
 			collectibleId: '1',
 			marketplace: MarketplaceKind.sequence_marketplace_v2,
+			marketplaceType: 'market',
 		};
 
 		buyModalStore.send({
@@ -75,7 +78,7 @@ describe('BuyModal Store', () => {
 		});
 
 		const state1 = buyModalStore.getSnapshot();
-		expect(state1.context.quantity).toBeUndefined();
+		expect(state1.context.quantity).toBeNull();
 
 		buyModalStore.send({
 			type: 'setQuantity',
@@ -89,6 +92,6 @@ describe('BuyModal Store', () => {
 		buyModalStore.send({ type: 'close' });
 
 		const state3 = buyModalStore.getSnapshot();
-		expect(state3.context.quantity).toBeUndefined();
+		expect(state3.context.quantity).toBeNull();
 	});
 });

package/src/react/ui/modals/BuyModal/components/BuyModalRouter.tsx

@@ -0,0 +1,157 @@
+'use client';
+
+import { ErrorModal } from '../../_internal/components/actionModal/ErrorModal';
+import { LoadingModal } from '../../_internal/components/actionModal/LoadingModal';
+import { useLoadData } from '../hooks/useLoadData';
+import {
+	buyModalStore,
+	isShopProps,
+	useBuyModalProps,
+	useOnError,
+} from '../store';
+import { ERC721BuyModal } from './ERC721BuyModal';
+import { ERC721ShopModal } from './ERC721ShopModal';
+import { ERC1155BuyModal } from './ERC1155BuyModal';
+import { ERC1155ShopModal } from './ERC1155ShopModal';
+
+export const BuyModalRouter = () => {
+	const modalProps = useBuyModalProps();
+	const chainId = modalProps.chainId;
+	const isShop = isShopProps(modalProps);
+	const onError = useOnError();
+	const {
+		collection,
+		collectable,
+		wallet,
+		isLoading,
+		order,
+		checkoutOptions,
+		currency,
+		shopData,
+		isError,
+	} = useLoadData();
+
+	if (isError) {
+		return (
+			<ErrorModal
+				isOpen={true}
+				chainId={chainId}
+				onClose={() => buyModalStore.send({ type: 'close' })}
+				title="Loading Error"
+			/>
+		);
+	}
+
+	if (isLoading || !collection) {
+		return (
+			<LoadingModal
+				isOpen={true}
+				chainId={chainId}
+				onClose={() => buyModalStore.send({ type: 'close' })}
+				title="Loading Sequence Pay"
+			/>
+		);
+	}
+
+	if (isShop) {
+		if (collection.type === 'ERC721') {
+			if (!shopData || !currency) {
+				return (
+					<LoadingModal
+						isOpen={true}
+						chainId={chainId}
+						onClose={() => buyModalStore.send({ type: 'close' })}
+						title="Loading Sequence Pay"
+					/>
+				);
+			}
+			return (
+				<ERC721ShopModal
+					collection={collection}
+					shopData={shopData}
+					chainId={chainId}
+				/>
+			);
+		}
+		if (collection.type === 'ERC1155') {
+			if (!shopData || !currency) {
+				return (
+					<LoadingModal
+						isOpen={true}
+						chainId={chainId}
+						onClose={() => buyModalStore.send({ type: 'close' })}
+						title="Loading Sequence Pay"
+					/>
+				);
+			}
+			return (
+				<ERC1155ShopModal
+					collection={collection}
+					shopData={shopData}
+					chainId={chainId}
+				/>
+			);
+		}
+	} else {
+		if (collection.type === 'ERC721') {
+			if (!collectable || !order || !wallet || !checkoutOptions) {
+				return (
+					<LoadingModal
+						isOpen={true}
+						chainId={chainId}
+						onClose={() => buyModalStore.send({ type: 'close' })}
+						title="Loading Sequence Pay"
+					/>
+				);
+			}
+			return (
+				<ERC721BuyModal
+					collection={collection}
+					collectable={collectable}
+					order={order}
+					wallet={wallet}
+					checkoutOptions={checkoutOptions}
+					chainId={chainId}
+				/>
+			);
+		}
+		if (collection.type === 'ERC1155') {
+			if (!collectable || !order || !wallet || !checkoutOptions) {
+				return (
+					<LoadingModal
+						isOpen={true}
+						chainId={chainId}
+						onClose={() => buyModalStore.send({ type: 'close' })}
+						title="Loading Sequence Pay"
+					/>
+				);
+			}
+			return (
+				<ERC1155BuyModal
+					collection={collection}
+					collectable={collectable}
+					order={order}
+					wallet={wallet}
+					checkoutOptions={checkoutOptions}
+					chainId={chainId}
+				/>
+			);
+		}
+	}
+
+	onError(
+		new Error(
+			`Unsupported configuration: ${collection.type} in ${
+				isShop ? 'shop' : 'market'
+			} mode`,
+		),
+	);
+	return (
+		<ErrorModal
+			isOpen={true}
+			chainId={chainId}
+			onClose={() => buyModalStore.send({ type: 'close' })}
+			title="Unsupported Configuration"
+		/>
+	);
+};

package/src/react/ui/modals/BuyModal/components/ERC1155BuyModal.tsx

@@ -0,0 +1,136 @@
+'use client';
+
+import {
+	type SelectPaymentSettings,
+	useSelectPaymentModal,
+} from '@0xsequence/checkout';
+import type { ContractInfo, TokenMetadata } from '@0xsequence/metadata';
+import { useEffect } from 'react';
+import type { CheckoutOptions, Order } from '../../../../_internal';
+import type { WalletInstance } from '../../../../_internal/wallet/wallet';
+import { usePaymentModalParams } from '../hooks/usePaymentModalParams';
+import {
+	buyModalStore,
+	isShopProps,
+	useBuyModalProps,
+	usePaymentModalState,
+	useQuantity,
+} from '../store';
+import { ERC1155QuantityModal } from './ERC1155QuantityModal';
+
+interface ERC1155BuyModalProps {
+	collection: ContractInfo;
+	collectable: TokenMetadata;
+	order: Order;
+	wallet: WalletInstance | null | undefined;
+	checkoutOptions: CheckoutOptions | undefined;
+	chainId: number;
+}
+
+export const ERC1155BuyModal = ({
+	collectable,
+	order,
+	wallet,
+	checkoutOptions,
+	chainId,
+}: ERC1155BuyModalProps) => {
+	const quantity = useQuantity();
+	const modalProps = useBuyModalProps();
+	const marketplaceType = modalProps.marketplaceType || 'market';
+	const isShop = isShopProps(modalProps);
+	const quantityDecimals = isShop
+		? modalProps.quantityDecimals
+		: order?.quantityDecimals;
+	const quantityRemaining = isShop
+		? modalProps.quantityRemaining?.toString()
+		: order?.quantityRemaining;
+
+	if (!quantity) {
+		return (
+			<ERC1155QuantityModal
+				order={order}
+				marketplaceType={marketplaceType}
+				quantityDecimals={quantityDecimals}
+				quantityRemaining={quantityRemaining}
+				chainId={chainId}
+			/>
+		);
+	}
+
+	if (!checkoutOptions) {
+		return null;
+	}
+
+	return (
+		<Modal
+			wallet={wallet}
+			quantity={quantity}
+			order={order}
+			collectable={collectable}
+			checkoutOptions={checkoutOptions}
+		/>
+	);
+};
+
+interface ModalProps {
+	wallet: WalletInstance | null | undefined;
+	quantity: number;
+	order: Order;
+	collectable: TokenMetadata;
+	checkoutOptions: CheckoutOptions;
+}
+
+const Modal = ({
+	wallet,
+	quantity,
+	order,
+	collectable,
+	checkoutOptions,
+}: ModalProps) => {
+	const {
+		data: paymentModalParams,
+		isLoading: isPaymentModalParamsLoading,
+		isError: isPaymentModalParamsError,
+	} = usePaymentModalParams({
+		wallet,
+		quantity,
+		marketplace: order?.marketplace,
+		collectable,
+		checkoutOptions,
+		priceCurrencyAddress: order?.priceCurrencyAddress,
+		enabled: true,
+	});
+
+	if (isPaymentModalParamsLoading || !paymentModalParams) {
+		return null;
+	}
+
+	if (isPaymentModalParamsError) {
+		throw new Error(
+			'Failed to load payment parameters for ERC1155 marketplace purchase',
+		);
+	}
+
+	return <PaymentModalOpener paymentModalParams={paymentModalParams} />;
+};
+
+interface PaymentModalOpenerProps {
+	paymentModalParams: SelectPaymentSettings;
+}
+
+const PaymentModalOpener = ({
+	paymentModalParams,
+}: PaymentModalOpenerProps) => {
+	const { openSelectPaymentModal } = useSelectPaymentModal();
+	const paymentModalState = usePaymentModalState();
+
+	useEffect(() => {
+		if (paymentModalState === 'idle') {
+			buyModalStore.send({ type: 'openPaymentModal' });
+			openSelectPaymentModal(paymentModalParams);
+			buyModalStore.send({ type: 'paymentModalOpened' });
+		}
+	}, [paymentModalState, paymentModalParams, openSelectPaymentModal]);
+
+	return null;
+};