946605: Need to implement UI team suggested changes in hotel booking

Hotel-booking-App/.gitignore

@@ -1,23 +1,7 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-
-# testing
-/coverage
-
-# production
-/build
-
-# misc
-.DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
+.npmrc
+.vscode/
+node_modules/
+src/**/*.js
+dist/
+styles/*.*
+!styles/index.css

Hotel-booking-App/.npmignore

@@ -0,0 +1,9 @@
+.npmrc
+.vscode/
+.npmignore
+config.json
+gulpfile.js
+tsconfig.json
+node-modules/
+Jenkinsfile
+src/**/*.js

Hotel-booking-App/Jenkinsfile

@@ -0,0 +1,39 @@
+#!groovy
+
+node('EJ2Angularlatest') {
+    try {
+        deleteDir()
+
+        stage('Import') {
+            git url: 'http://github.com/essential-studio/ej2-groovy-scripts.git', branch: 'master', credentialsId: env.GithubCredentialID;
+            shared = load 'src/shared.groovy'
+        }
+
+        stage('Checkout') {
+            checkout scm
+            shared.getProjectDetails()
+            shared.gitlabCommitStatus('running')
+        }
+
+        stage('Install') {
+            sh 'npm install'
+        }
+
+        stage('Build') {
+            sh 'gulp hide-license && npm run build && gulp finished'
+        }
+
+        stage('Publish') {
+            shared.publish()
+        }
+
+        shared.gitlabCommitStatus('success')
+
+        deleteDir()
+    }
+    catch(Exception e) {
+        shared.throwError(e)
+        deleteDir()
+        error('Build Failed')     
+    }
+}

Hotel-booking-App/README.md

@@ -1,53 +1,26 @@
-# Hotel booking application using Syncfusion React Grid 
+# Hotel booking application using Syncfusion React DataGrid
 While looking for a secure and comfortable hotel stay that fits your budget, preferred amenities, desired location, and high user reviews, this article explores how Syncfusion React Grid can display a comprehensive list of hotels and their rooms, along with facilities, user reviews, and costs. Additionally, Syncfusion React Grid offers filtering options based on budget, amenities, location, and user reviews, making the booking process more efficient and user-friendly.
 
-This demo will show you how to utilize the Syncfusion Data Grid to display the lists of hotels and it facility and cost and locations and user reviews. Also, how to provide the option to select the hostel based on available hotel rooms on the selected check and checkout date with budget-wise and facilities and user review. With our step-by-step guide, you'll be able to easily set up and configure the data grid to meet your specific needs.
-
-
-![Hotelbooking App](img/hotel-app.gif)
-
-## Target Audience
--	Accountants and Bookkeepers 
--	Construction Companies 
--	Property Management Companies
--	Medical Practice
--	Educational Institutions
--	Event Management Companies
--	Software Development Firms
--	Transportation and Logistics Companies
--	Manufacturing Companies
--	Travel Agencies
--	Insurance Agencies
--	Real Estate Agencies
--	Hospitality Businesses
--	Fitness Centers and Gyms
--	Consulting Firms
--	Photography Studios
-
-## Prerequisites 
--	We have developed this app by using the [node.js 16.0](https://legacy.reactjs.org/blog/2017/09/26/react-v16.0.html).
--	If you have not previously installed the React packages or if you have installed a version of node.js older than Node 16 on your machine, you can run the following command to install them.
- ```sh
-  npm install -g create-react-app
-
-  ```
-## Run the sample
-To execute the following command in your command prompt.
- ```sh
-npm start
-  ```
-## Common errors
-
-| Error  | Try to solution |
-|----------|----------|
-| Module not found: Can't resolve 'module'    | This indicates that the required module is either not installed properly or is missing. Therefore, we recommend ensuring that all dependency modules are installed correctly by executing either the npm install or yarn install command after deleting the package.lock.json file.   |
-| npm ERR! ENOENT: no such file or directory   | This error suggests that the specified directory or file is not available on your machine, or permission for execution was denied. To resolve this, ensure that the file exists and that proper permissions are enabled for accessing the file or directory.   |
-|npm ERR! Failed at the project-name@0.1.0 start script| This error occurred due to a problem with  the start script defined in your package.json file. It's important to validate the start script and execute it correctly set up to run your application. Additionally, ensure that all dependencies are installed properly or not. |
-|npm ERR! EADDRINUSE: Address already in use | This error indicates the port number already used. So, you can choose another port or stop the existing running application. |
-|npm ERR! Invalid package.json| This error indicates any syntax issue occurred in your package.json. to ensure all the syntax properly. |
-
-## Reference of Syncfusion Grid
-[Demo](https://ej2.syncfusion.com/react/demos/#/material3/grid/overview), <br/>
-[Documentation](https://ej2.syncfusion.com/react/documentation/grid/getting-started).
+This demo will show you how to utilize the Syncfusion Data Grid to display the lists of hotels, facilities, costs, locations, and user reviews. Also, how to provide the option to select the hostel based on available hotel rooms on the selected check and checkout date with budget-wise and facilities and user review. With our step-by-step guide, you can easily set up and configure the data grid to meet your specific needs.
 
+![Hotelbooking App](images/hotel-app.gif)
+
+* To install all dependent packages, use the below command.
+
+```
+npm install
+```
+* If Angular CLI is not installed into your machine, please use the below command to install Angular CLI.
+
+```
+npm install -g @angular/cli@15.1.5
+```
+
+### Run
+
+To run the sample, use the below command
+
+```
+ng serve
+```
 

Hotel-booking-App/config.json

@@ -0,0 +1,3 @@
+{
+    "productOwner": "Maithiliy Karthikeyan "
+}

Hotel-booking-App/gulpfile.js

@@ -0,0 +1 @@
+require('@syncfusion/ej2-showcase-helper');

Hotel-booking-App/index.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="description" content="Essential JS 2 for React - Samples template">
+    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
+    <title>Essential JS 2 for React - Hotel room booking application</title>
+    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link
+        href="https://fonts.googleapis.com/css2?family=Jersey+15&family=Josefin+Sans:ital,wght@0,100..700;1,100..700&family=Rubik+Vinyl&display=swap"
+        rel="stylesheet">
+</head>
+
+<body>
+    <div id="content-area"></div>
+</body>
+
+</html>

Hotel-booking-App/license

@@ -0,0 +1,10 @@
+Essential JS 2 library is available under the Syncfusion Essential Studio program,  and can be licensed either under the Syncfusion Community License Program or the Syncfusion commercial license.
+
+To be qualified for the Syncfusion Community License Program you must have a gross revenue of less than one (1) million U.S. dollars ($1,000,000.00 USD) per year and have less than five (5) developers in your organization, and agree to be bound by Syncfusion’s terms and conditions. 
+
+Customers who do not qualify for the community license can contact sales@syncfusion.com for commercial licensing options.
+
+Under no circumstances can you use this product without (1) either a Community License or a commercial license and (2) without agreeing and abiding by Syncfusion’s license containing all terms and conditions. 
+
+The Syncfusion license that contains the terms and conditions can be found at 
+https://www.syncfusion.com/content/downloads/syncfusion_license.pdf

Hotel-booking-App/package.json

@@ -1,80 +1,41 @@
 {
-  "name": "react-app",
-  "version": "0.1.0",
-  "private": true,
-  "homepage": ".",
+  "name": "@syncfusion/ej2-react-hotel-room-reserve",
+  "version": "1.0.0",
+  "description": "Essential JS 2 - Hotel room booking application",
+  "author": "Syncfusion Inc.",
+  "license": "SEE LICENSE IN license",
+  "scripts": {
+    "start": "webpack-dev-server --open --mode development",
+    "build": "webpack --mode production",
+    "ci-publish": "gulp publish-sample"
+  },
+  "devDependencies": {
+    "@types/node": "^20.4.1",
+    "@types/react": "^18.2.14",
+    "@types/react-dom": "^18.2.6",
+    "@types/react-router-dom": "^5.3.3",
+    "css-loader": "^6.8.1",
+    "html-webpack-plugin": "^5.5.3",
+    "mini-css-extract-plugin": "^2.7.6",
+    "terser-webpack-plugin": "^5.3.9",
+    "ts-loader": "^9.4.4",
+    "typescript": "^5.1.6",
+    "webpack": "^5.88.1",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^4.15.1",
+    "copy-webpack-plugin": "^12.0.2"
+  },
   "dependencies": {
-    "@babel/plugin-transform-runtime": "^7.23.4",
-    "@babel/preset-env": "^7.23.3",
-    "@babel/preset-react": "^7.23.3",
-    "@babel/preset-typescript": "^7.23.3",
-    "@headlessui/react": "^1.7.15",
-    "@heroicons/react": "^2.0.18",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.14.1",
     "@syncfusion/ej2-react-grids": "*",
     "@syncfusion/ej2-react-calendars": "*",
     "@syncfusion/ej2-react-buttons": "*",
     "@syncfusion/ej2-react-popups": "*",
     "@syncfusion/ej2-react-inputs": "*",
     "@syncfusion/ej2-react-dropdowns": "*",
     "@syncfusion/ej2-react-navigations": "*",
-    "@syncfusion/ej2-react-maps": "*",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.4.0",
-    "@testing-library/user-event": "^13.5.0",
-    "@types/jest": "^27.5.2",
-    "@types/node": "^16.18.23",
-    "@types/numeral": "^2.0.2",
-    "@types/react": "^18.0.37",
-    "@types/react-dom": "^18.0.11",
-    "axios": "^1.4.0",
-    "babel-plugin-inline-react-svg": "^2.0.2",
-    "babel-plugin-transform-decorators": "^6.24.1",
-    "buffer": "^6.0.3",
-    "formik": "^2.4.2",
-    "moment": "^2.29.4",
-    "numeral": "^2.0.6",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-inject-env": "^2.1.0",
-    "react-number-format": "^5.3.1",
-    "react-router-dom": "^6.11.1",
-    "react-scripts": "5.0.1",
-    "typescript": "^4.9.5",
-    "web-vitals": "^2.1.4",
-    "yup": "^1.2.0"
-  },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject",
-    "format": "prettier --write \"./src/**/*.{js,jsx,ts,tsx,json,css,scss,md}\"",
-    "prepare": "husky install"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  },
-  "devDependencies": {
-    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-    "autoprefixer": "^10.4.14",
-    "husky": "^8.0.3",
-    "postcss": "^8.4.22",
-    "prettier": "2.8.8",
-    "tailwindcss": "^3.3.1"
+    "@syncfusion/ej2-react-maps": "*"
   }
 }

Hotel-booking-App/src/common/index.tsx

@@ -0,0 +1,9 @@
+import * as React from "react";
+import { createRoot } from 'react-dom/client';
+import HotelBook from "../components/HotelBook/HotelBook";
+import "../../styles/index.css";
+
+const root = createRoot(document.getElementById("content-area") as HTMLElement);
+root.render(
+  <HotelBook />
+);