import * as React from 'react'; import { query, useQuery } from './client'; import { VendureAsset } from './components/VendureAsset'; import './style.css'; import { formatCurrency } from './utils'; import { ADD_ITEM_TO_ORDER, ADJUST_ORDER_LINE, GET_ACTIVE_ORDER, REMOVE_ITEM_FROM_ORDER, } from './documents'; import { OrderPartial } from './types'; export default function App() { const [activeOrder, setActiveOrder] = React.useState(); const { data, loading, error } = useQuery(GET_ACTIVE_ORDER); if (data?.activeOrder && !activeOrder) { setActiveOrder(data.activeOrder); } const addItem = async (e) => { // Prevent the browser from reloading the page e.preventDefault(); // Read the form data const form = e.target; const variantId = +new FormData(form).get('productVariantId'); const result = await query(ADD_ITEM_TO_ORDER, { productVariantId: variantId, quantity: 1, }); if (result.data.addItemToOrder.__typename !== 'Order') { // An error occurred! window.alert(result.data.addItemToOrder.message); } else { setActiveOrder(result.data.addItemToOrder); } }; const adjustOrderLine = async (orderLineId: string, quantity: number) => { const result = await query(ADJUST_ORDER_LINE, { orderLineId, quantity, }); if (result.data.adjustOrderLine.__typename !== 'Order') { // An error occurred! window.alert(result.data.adjustOrderLine.message); } else { setActiveOrder(result.data.adjustOrderLine); } }; const removeItem = async (orderLineId: string) => { const result = await query(REMOVE_ITEM_FROM_ORDER, { orderLineId, }); if (result.data.removeOrderLine.__typename !== 'Order') { // An error occurred! window.alert(result.data.removeOrderLine.message); } else { setActiveOrder(result.data.removeOrderLine); } }; if (loading) return

; if (error) return

Error : {error.message}

; return (

Active Order

{activeOrder ? ( {activeOrder.lines.map((l) => ( ))}

	{l.productVariant.name}	{l.quantity}	{formatCurrency( l.linePriceWithTax, activeOrder.currencyCode )}
	Total	{activeOrder.totalQuantity}	{formatCurrency( activeOrder.totalWithTax, activeOrder.currencyCode )}

) : (

Order is empty

)}

); }