+
+
+ Checkout
+
+
+
+
+
+
+
+ {cartProducts && cartProducts.length}{' '}
+ {cartProducts.length > 1 || cartProducts.length === 0 ? ' coffees' : ' coffee'} found
+
+
+
+
+
+ {cartProducts &&
+ cartProducts.map((coffee, index) => {
+ if (index <= amountLoaded) {
+ return (
+
+
+ 
+
+ {coffee.name}
+
+
+
+ ${coffee.price}
+
+
+
+
+ removeProductFromCart(index)}
+ >
+
+
+
+
+ );
+ }
+ })}
+
+
+
+
+
+ ${total.toFixed(2)}
+
+
+
+ Checkout
+
+
+
+
+ );
+};
+
+export default Cart;
diff --git a/03_source/mobile/src/pages/DemoOrderingApp/pages/Favourites.tsx b/03_source/mobile/src/pages/DemoOrderingApp/pages/Favourites.tsx
new file mode 100644
index 0000000..0995d1f
--- /dev/null
+++ b/03_source/mobile/src/pages/DemoOrderingApp/pages/Favourites.tsx
@@ -0,0 +1,113 @@
+import {
+ IonButtons,
+ IonCol,
+ IonContent,
+ IonGrid,
+ IonHeader,
+ IonInfiniteScroll,
+ IonInfiniteScrollContent,
+ IonNote,
+ IonPage,
+ IonRow,
+ IonTitle,
+ IonToolbar,
+ useIonRouter,
+} from '@ionic/react';
+import { Bag } from 'react-iconly';
+import { useEffect, useRef, useState } from 'react';
+import ViewCoffeeCard from '../components/ViewCoffeeCard';
+import { CartStore, CoffeeStore, FavouriteStore } from '../store';
+import { getCartCoffees, getCoffees, getFavouriteCoffees } from '../store/Selectors';
+import './Home.css';
+
+const Favourites = (): React.JSX.Element => {
+ const cartRef = useRef(null);
+ const router = useIonRouter();
+
+ const coffees = CoffeeStore.useState(getCoffees);
+ const favourites = FavouriteStore.useState(getFavouriteCoffees);
+ const cart = CartStore.useState(getCartCoffees);
+
+ const [searchResults, setSearchResults] = useState([]);
+ const [amountLoaded, setAmountLoaded] = useState(6);
+
+ useEffect(() => {
+ const getFavourites = () => {
+ setSearchResults([]);
+
+ favourites.forEach((favourite) => {
+ var coffeeID = favourite;
+ const tempCoffee = coffees.filter((c) => parseInt(c.id) === parseInt(coffeeID))[0];
+ setSearchResults((prevSearchResults) => [...prevSearchResults, tempCoffee]);
+ });
+ };
+
+ getFavourites();
+ }, [favourites]);
+
+ const fetchMore = async (e) => {
+ // Increment the amount loaded by 6 for the next iteration
+ setAmountLoaded((prevAmount) => prevAmount + 6);
+ e.target.complete();
+ };
+
+ return (
+ 
+