User App component

It gives detailed information regarding the User App component.

Restaurant Saas Mobile App:

Components

• Home

• All restaurant list

• Restaurant details

• Product details

• Cart

• Confirm order

• Payment

• Thank you

• Menu

• Location Changer

Home

• Location: The folder can be found under src/pages/home/ containing following files src/pages/home/home.html src/pages/home/home.ts src/pages/home/home.service.ts src/pages/home/home.module.ts

• • Home.html contains images slider to display offers with images and three-section to show categories based on Near By restaurants, Newly arrived restaurants and Top rated restaurants.

  • Home.ts loads restaurants list 1) based on location taken from the current location of customer 2) based on rating submitted by customers 3) based on newly created restaurants. (limited to 10 restaurants)

  • Home.service.ts calls backend via getting and POST methods to get restaurants info according to rating, location, and recently added restaurants. One backend call accepts longitude and latitude based on customers current location.

  • Home.module.ts declares different modules required on home page plus it provides various service injections for home page.

All Restaurant List

• Location: The folder can be found under src/pages/all-restaurant-list/ containing following files src/pages/all-restaurant-list/all-restaurant-list.html src/pages/all-restaurant-list/all-restaurant-list.ts src/pages/all-restaurant-list/all-restaurant-list.service.ts src/pages/all-restaurant-list/all-restaurant-list.module.ts

• All-restaurant-list.html serves a list of all available restaurants based on the category chosen from the home page.

• All-restaurant-list.ts loads restaurants list 1) based on the address takes the current location of customer 2) based on rating submitted by customers 3) based on newly created restaurants here it shows all restaurant list but one category at a time based on sorting techniques provided by backend.

• All-restaurant-list.service.ts calls backend via GET and POST methods to get restaurants info according to rating, location, and newly added restaurants. One backend call accepts longitude and latitude based on the customer's current location.

• All-restaurant-list.module.ts declares different modules required on all-restaurant-list page plus it provides various service injections for all-restaurant-list page.

Restaurant Details

• Location: The folder can be found under src/pages/home/restaurant-details/ containing following files src/pages/restaurant-details/restaurant-details.html src/pages/restaurant-details/restaurant-details.ts src/pages/restaurant-details/restaurant-details.service.ts src/pages/restaurant-details/restaurant-details.module.ts

• restaurant-details.html renders categorized product list of selected restaurant with product image in addition to eye-catching information about restaurant, i.e., 1) Real-time info about restaurant is open or not at a time of viewing restaurant 2) Delivery charges of selected restaurants 3) Rating of restaurant 4) Delivery time 5) customer can initialize direct chat with manager of the restaurant chosen.

• restaurant-details.ts contains logic 1) To calculate opening/closing timing from received data. 2) To get a list of products from backend side. 3) calculates cart items if somethings is there it will show button to go ahead for checkout via cart page.

• restaurant-details.service.ts calls backend via GET methods to get restaurant timing information, product information, category information, and contact information

• restaurant-details.module.ts declares different modules required on restaurant-details page plus it provides various service injections for the restaurant-details page.

Product Details

• Location: The folder can be found under src/pages/product-details/ containing following files src/pages/product-details/product-details.html src/pages/product-details/product-details.ts src/pages/product-details/product-details.service.ts src/pages/product-details/product-details.module.ts

• product-details.html renders detailed information of products including price, discount, available sizes. One can increment/decrement number of quantity to be added in cart. Plus user can add/remove product on the favorite list.

• product-details.ts calls service to favorite/unfavourite information from the backend. It contains logic to insert item on a cart with a related price based on selected quantity and size.

• product-details.service.ts calls backend via GET and POST methods to add or remove items from the favorite list.

• product-details.module.ts declares different modules required on product-details page plus it provides various service injections for the product details page.

Cart

• Location: The folder can be found under src/pages/cart/ containing following files src/pages/cart/cart.html src/pages/cart/cart.ts src/pages/cart/cart.service.ts src/pages/cart/cart.module.ts

• cart.html shows the list of products added on a cart by a customer with several quantities that will also be adjustable from this page. And It also shows loyalty points and promo codes if available.

• cart.ts fetches user data to get a user's loyalty information and restaurant's promo codes. It calculates prices according to changes made by the user on changing the number of quantity. Customer can remove the product(s) if later on, customer changes their mind.

• cart.service.ts calls backend via GET methods to get loyalty point information of the logged-in user.

• cart.module.ts declares different modules required on cart page plus it provides various service injections for cart page.

Confirm order

• Location: The folder can be found under src/pages/confirm-order/ containing following files src/pages/confirm-order/confirm-order.html src/pages/confirm-order/confirm-order.ts src/pages/confirm-order/confirm-order.service.ts src/pages/confirm-order/confirm-order.module.ts

• confirm-order.html displays final confirmation, including tax, delivery charges, and total that user needs to pay before checkout. And allow users to select an address to which delivery will happen.

• confirm-order.ts contains logic to check that delivery is possible on selected address based on Pincode list provided by the restaurant manager. It will not allow going ahead without the selection of address.

• confirm-order.service.ts calls backend via GET and DELETE methods to get address list and delete selected address respectively.

• confirm-order.module.ts declares different modules required on confirm-order page plus it provides various service injections for the confirm-order page.

Payment

• Location: The folder can be found under src/pages/payment/ containing following files src/pages/payment/payment.html src/pages/payment/payment.ts src/pages/payment/payment.service.ts src/pages/payment/payment.module.ts

• payment.html contains UI to show a list of payment methods to choose from. Available payment methods are 1) PayPal 2) Stripe 3) Cash on Delivery. Need to select anyone to make payment.

• payment.ts will place the order based on the selected payment method, and it will send order information to the backend.

• payment.service.ts calls PUT and POST ways to make a connection with restaurant backend as well as stripe or PayPal backend based on the chosen payment method.

• payment.module.ts declares different modules required on payment page plus it provides various service injections for the payment page.

Thank you

• Location: The folder can be found under src/pages/thankyou/ containing following files src/pages/thankyou/thankyou.html src/pages/thankyou/thankyou.ts

• thankyou.html shows confirmation after order gets placed.

• thankyou.ts contains method to route user back to homepage.

Menu

• Location: The folder can be found under src/app/ containing following files src/app/app.html src/app/app.component.ts src/app/app.module.ts src/app/constant.service.ts

• app.html shows Menu containing a list of buttons to go to that page. i.e., 1) Home 2) Cart 3) Order History 4) Favourites 5) Chat 6) Profile7) Settings 8) Supports 9) About 10) login/logout

• app.component.ts contains logic to set homepage as root page or location-changer page as root page based on the distance between the previous location and current location.

• app.module.ts contains declarations, imports, entry components, and providers used throughout the app.

• constant.service.ts contains constant variables for changing backend's base URLs.

Location changer

• Location: The folder can be found under src/pages/location-changer/ containing following files src/pages/location-changer/location-changer.html src/pages/location-changer/location-changer.ts

• location-changer.html provides a view containing 1) button to choose current location 2) input to search area 3) list to select from previously used sites.

• location-changer.ts fetches current user location and already used place before page load and removes related entries before leaving the page if needed. It also searches area based on user's entries on the search input.