Create simple POS with React.js, Node.js, and MongoDB #16: Order Screen

Create simple POS with React.js, Node.js, and MongoDB #16: Order Screen

Create simple POS with React.js, Node.js, and MongoDB #16: Order Screen

Defenition: POS – “Point of Sale”. At the point of sale, the merchant calculates the amount owed by the customer, indicates that amount, may prepare an invoice for the customer (which may be a cash register printout), and indicates the options for the customer to make payment.

In the previous chapter, we worked on role-based access control feature for our react app. We had two roles: admin and employee. We used those user roles for conditional rendering with the react-rbac-guard package.

In this chapter, we are going to create an order page. The order page displays the products and the calculator to help calculate the total price. Finally, we will save the transaction to the database.

For the order page, the idea is to have to columns: lefts to display products and right to display total price and products in the cart.

Displaying Products

First, we are going to create a column that displays the number of products for sale. We are going to display them in a grid style by creating a new component called order.js. Now, we will create a file named create.js and work on it.

In create.js, we need to import the required component, hooks, and product actions as displayed in the code snippet below:

Then, we fetch the product data using useDispatch hook variable inside the useEffect hook as directed in the code snippet below:

Next, we need to import a reducer named productReducer using useSelector hook in order to get the getting product data as displayed in the code snippet below:

Now, we need to create a function to fetch all products. First, we create a product catalog by wrapping it in the card element and using the classes to show four-card items in a row. Each card will have the data concerning a single product. There will also be a button to add the items to the cart. The overall coding implementation of the function is provided in the code snippet below:

Hence, we will get the result as displayed in the following screenshot:

Product Catalog

Product Catalog

Our display Product section is complete. Now, we move to implement the right column which will have the total cost and items in the cart.

Cart section

Here, we are going to implement the right side of the column called the cart section. For that, we need to add another column just beside the Product Catalog section.

In this section, we will show the total price and tax as well as a list of items in the cart. We will use number format to manage float number and create a new action named shop to handle all calculations.

First, we need to create a new action and reducer in order to handle the cart operations.

Hence, in the constant.js file, we need to create new constants as directed in the code snippet below:

Then, we need to create a new reducer named shop to handle updates in the cart as well as payment. The initial states are also to be defined. The overall coding implementation of the reducer is provided in the code snippet below:

Next, we need to create an action that accesses the modification of reducer data. So, we need to create a new action named shop and add a function to handle orders. The coding implementation of action functions are provided in the code snippet below:

Now, it is time to implement the UI. We will get the cart and price states from the reducer to be rendered into the UI. For now, we need to create a function named CartSection and use NumberFormat component to display price and table to display the cart items. The overall UI coding implementation is provided in the code snippet below:

hence, we will get the result as displayed in the following screenshot:

Cart Section

Cart Section

As we can notice, the state in the reducer is empty. Hence, we get the total price as 0 and no items in the cart section.

In order to add the item to the cart and calculate the price, we dispatch the addOrder action from shopActions in the Add to Cart button as directed in the code snippet below:

Then, we add the updated data in the product when we add the products to the cart stock. Hence, the cart data will update as well. For that, we do the conditional rendering as directed in the code snippet below:

The function to count the number of items in the cart is shown in the code snippet below:

Hence, we will get the result as displayed in the demo below:

Add to Cart

Add to Cart

Now, we need to create a simple table element to display products in the cart. We will also add a remove feature to it in order to remove the product from the cart if needed. For that, we need to create a new function called renderOrder and use the code from the following code snippet:

Then, we need to add the function to the main table as displayed in the code snippet below:

Hence, we will get the result as displayed in the demo below:

List Order in Cart

List Order in Cart

Here, we can see that as we add an item to the card the item number decreases in the product section and the items added increases in the cart section along with updates to the price as well.

Calculator

Now, we are going to create a simple calculator that will allow employees to calculate the change easily. The calculator will be displayed once an employee clicks on the payment button.

First, in the shop.action.js file, we add functions to send order data and toggle the calculator. The coding implementation of submitPayment and togglePaymentState functions are provided in the code snippet below:

Now in the order component, we need to create a new component named Payment in order to contain the calculator components. Then, we need to import the Payment component to the Create component as directed in the code snippet below:

Next, we need to create a function called renderPayment for conditional rendering and passing the order data in the cart to the calculator. The implementation of the function is provided in the code snippet below:

Now, we can toggle between product catalog and calculator using the conditional rendering as shown in the code snippet below:

Now to implement the calculator screen, we import the necessary components in the payment.js file as shown in the code snippet below:

First, we are going to create a calculator UI. The idea is simple. Each button will represent a banknote and coin that a customer pays and subtracts from the order total. After subtraction, we can display the change to be returned to the customer. This will make it easier for employees to calculate money to be returned to the customers.

Then, we will have two input fields: one to display the total money that customer pays and another to display change to be returned to the customer.

Here, we will have three action button:

  • Exact for when there is no change to be returned.
  • Clear in order to reset the data.
  • Submit to save data of the successful sale to database

The coding implementation for this is provided in the code snippet below:

Hence, we will get the result as displayed in the demo below:

Activate Calculator

Activate Calculator

Here, we can see that as soon as we press the Payment button, a calculator page pops up with three buttons that we mentioned before.

Now for calculation, we need to create new functions as mentioned below:

  • isMustChanged function to display change input. If an employee doesn’t need to return the change then we simply hide this section.
  • updateChange to update the change value.
  • onClickGiven to sum up all money that the customer pays.
  • onClickExact trigger when no need for any change to be returned. The customer provides the exact fund equal to the money he/she has to pay.

The coding implementations of these function are provided in the code snippet below:

Hence, we will get the result as displayed in the demo screenshot below:

Calculate Change Demo

Calculate Change Demo

Saving Order data

Now, the last step is to save the order data to the database for each successful transaction. For this, we need to create a new endpoint in the backed to receive the order data.

First, we need to create a schema for the new table named order. We are also going to add an auto-increment field in order to generate the data in sequential order. The schema implementation using mongoose library is provided in the code snippet below:

Then, we need to create a new API endpoint named order. The API implementation code is simple. If you have been following this tutorial, you will find it pretty simple. The actual implementation of the endpoint is provided in the code snippet below:

Hence, we have successfully created an endpoint to store the order data.

Now, we need to go back to frontend and create a static file to contain default order data that will represent the blank data as directed in the code snippet below:

In the payment component, we need to create a new function named onClickSubmit which takes order values as parameter. This function works to submit order data. The implementation is given in the code snippet below:

Now, we set up the data and pass it to action using submitPayment . We also add an alert to display the successful sale information as shown in the code snippet below:

Hence, we will get the result as displayed in the demo below:

Submit Order

Submit Order

Finally, we have successfully completed the implementation of the order page in our POS system project.

Your Next Challenge….
In this tutorial, we completed the hard part to implement the overall UI and functionality of the Order page. Now, the challenge is the easy part that you have to implement. The challenge is to create a simple CRUD operation for Order in order to display the Order history.

Conclusion

At last, we have completed one of the difficult parts of this tutorial series. The tutorial was long but interesting with lots of new things to learn. We successfully coded the overall UI and functions of the Order screen. We learned how to display the product section as well as the cart section with the price section. We learned how to calculate the total items, total price as well as implement the calculator to simplify change calculation for employees. The implementation was simple but improvements can be made.

The coding implementations used in this tutorial chapter are both Frontend and Backend available on Github.

See you in the next chapter! Good day folks!

About the author

Stay Informed

It's important to keep up
with industry - subscribe!

Stay Informed

Looks good!
Please enter the correct name.
Please enter the correct email.
Looks good!

Related articles

Create simple POS with React.js, Node.js, and MongoDB #17: Stat screen

Now, we are going to implement the final chapter for this tutorial series where we are implementing a graphical representation section on our ...

Create simple POS with React.js, Node.js, and MongoDB #15: Simple RBAC

In this chapter, we are going to continue from where we left off from the previous chapter intuitive with a plethora of ...

Create simple POS with React.js, Node.js, and MongoDB #14: Export PDF, Excel, CSV, Bulk Delete, Inline Editing

In this chapter, we are going to continue from where we left off from the previous chapter. We are about to add more features to our react table to ...

No comments yet

Sign in

Forgot password?

Or use a social network account

 

By Signing In \ Signing Up, you agree to our privacy policy

Password recovery

You can also try to

Or use a social network account

 

By Signing In \ Signing Up, you agree to our privacy policy