This is a React voice interaction app using Alan-Ai https://alan.app/."
Link to the video: https://drive.google.com/file/d/1JxHXAqHEdSFJp7rCixzDWXpDnXCqDiic/view
-Follow the link: < https://ahnlok.github.io/react-ai-cart/>
intent('show me the menu', p => {
p.play({command: 'getMenu', data: menuItems})
p.play("Here's the menu");
});
intent('order by $(ORDER_BY name|price|category)', p => {
const orderByField = p.ORDER_BY.value;
let orderedMenuItems = menuItems;
switch(orderByField) {
//sort the name by alphatical order
case 'name':
orderedMenuItems = menuItems.sort((p1, p2) => p1.name.localeCompare(p2.name));
break;
//Sort by category
case 'category':
orderedMenuItems = menuItems.sort((p1, p2) => p1.category.localeCompare(p2.category));
break;
//Sort by price
case 'price':
orderedMenuItems = menuItems.sort((p1, p2) => p1.price - p2.price);
break;
}
p.play({command: 'getMenu', data: orderedMenuItems});
p.play(`Ordering by ${p.ORDER_BY.value}`);
});
intent(`Add $(ITEM ${menuITemsSlotList}) to the cart`,
'Add $(UNAVAILABLE_ITEM* .*) to the cart',
p => {
if(p.UNAVAILABLE_ITEM) {
p.play(`That item is unavailable`);
} else {
const itemName = p.ITEM.value;
const itemToGoInCart = menuItems.find((menuItem) => {
return menuItem.name.toLowerCase() === itemName.toLowerCase();
})
p.play({command: 'addToCart', data: itemToGoInCart});
p.play(`Adding ${p.ITEM.value} to the cart`);
}
});
const menuItems = [
{name: "Angus Burger", price: 8.99, category: 'burger'},
{name: "Tuna Steak Burger", price: 15.00, category: 'burger'},
{name: "Bacon Burger", price: 11.50, category: 'burger'},
{name: "Southwest Chicken Burger", price: 9.99, category: 'burger'},
{name: "Mozzarella Burger", price: 12.50, category: 'burger'},
{name: "Cesar Salad", price: 6.50, category: 'salad'},
{name: "BBQ Chicken Salad", price: 13.99, category: 'salad'},
{name: "Garden Salad", price: 9.99, category: 'salad'},
{name: "Veggie Lasagna", price: 17.99, category: 'pasta'},
{name: "Spaghetti & Meatballs", price: 17.99, category: 'pasta'},
{name: "Fettuccine Alfredo", price: 17.99, category: 'pasta'},
];
alanBtn({
key: '9298c5e0f50206b31f16ca738b3fb5a62e956eca572e1d8b807a3e2338fdd0dc/stage',
onCommand: (commandData) => {
// Whenever user says 'Show me the menu' we would like Alan-ai to return the menu
if(commandData.command === 'getMenu') {
setMenuItems(commandData.data);
} else if (commandData.command === 'addToCart') {
addToCart(commandData.data);
}
},
});
}, [])
const [cart, setCart] = useState([])
const [menuItems, setMenuItems] = useState([])
<h2 className="menu_title">Menu</h2>
{menuItems.map((menuItem) => (
// key will be the 'name'
// This is the menu items that the user will see
<li key={menuItem.name} className="menu_list">
{menuItem.name} - ${menuItem.price} - {menuItem.category}
</li>
))}
const addToCart = (menuItem) => {
setCart((oldCart) => {
// Return all the items from 'oldCart' + menuItems
// Spread operator: '...'
return [...oldCart, menuItem]
})
<h2 className="cart_title">Cart</h2>
{/* Mapping through 'cart items' */}
{cart.map((cartItem) => (
// This will the 'cart item' user will see
<li key={cartItem.name} className="menu_list">
{cartItem.name} - ${cartItem.price} - {cartItem.category}
</li>