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, GET_ACTIVE_ORDER, GET_PRODUCT_DETAIL, } from './documents'; import { OrderPartial, ProductVariantPartial } from './types'; import { OrderContents } from './components/OrderContents'; export default function App() { const [selectedVariant, setSelectedVariant] = React.useState(); const [activeOrder, setActiveOrder] = React.useState(); const { data: orderData } = useQuery(GET_ACTIVE_ORDER); const { data: productData, loading, error, } = useQuery(GET_PRODUCT_DETAIL, { slug: 'laptop', }); if (orderData?.activeOrder && !activeOrder) { setActiveOrder(orderData.activeOrder); } if (productData?.product && !selectedVariant) { setSelectedVariant(productData.product.variants[0]); } const selectVariant = (e) => { const variantId = e.target.value; setSelectedVariant( productData.product.variants.find((v) => v.id === variantId) ); }; const addItem = async (e) => { // Prevent the browser from reloading the page e.preventDefault(); const form = e.target; const quantity = +new FormData(form).get('quantity') ?? 1; const result = await query(ADD_ITEM_TO_ORDER, { variantId: selectedVariant.id, quantity, }); if (result.data.addItemToOrder.__typename !== 'Order') { // An error occurred! window.alert(result.data.addItemToOrder.message); } else { setActiveOrder(result.data.addItemToOrder); } }; if (loading) return

; if (error) return

Error : {error.message}

; return (

{productData.product.name}

{productData.product.description}

{selectedVariant && (

{selectedVariant.sku}

{selectedVariant.stockLevel}

{formatCurrency( selectedVariant.priceWithTax, selectedVariant.currencyCode )}

)} {activeOrder && }

); }