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:

import  React,   {    useEffect   }    from    "react";

import   {    useSelector,    useDispatch   }    from    "react-redux";

 import   *    as   productActions  from    "../../actions/product.action";

export  default   ( props)   = > {}

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

 const    dispatch   =   useDispatch();

useEffect(()   = > {

     dispatch( productActions.Index());

   },   []);

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:

 const    productReducer   =   useSelector(({    productReducer   })   = >  productReducer);

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:

 const    renderProductRows   =   ()   = > {

      if   ( productReducer. result)   {

        const   {    result   }   =    productReducer;

        return   (

         <div className= "row" >

           { result   &&

            result.map((item, index) => {

              return (

                <>

      {index % 3 === 0 && <div class="w-100 d-lg-none mt-4"></div>}

                  <div class="col-md-6 col-lg-4 col-xl-3 py-2">

                    <div className="card h-100">

                      <img

                        className="card-img-top img-fluid"

                        src={

                          process.env.REACT_APP_PRODUCT_IMAGE_PATH +

                          "/" +

                          item.image

                        }

                        alt="Card image cap"

                      />

                      <div className="card-block">

                        <h4 className="card-title">{item.name}</h4>

                        <p className="card-text">Price {item.price}</p>

                        <p className="card-text">

                          <small className="text-muted">

                            remain {item.stock}

                          </small>

                        </p>

                       <a href="#" class="btn btn-primary btn-block ">

                          Add to Card

                        </a>                      

</div>

                    </div>

                  </div>

                </>

              );

             })}

         </ div >

       );

     }    else   {

        return    "loading...";

     }

   };

#javascript #node.js #pos tutorial #react #node