feat: ⚡ Implemented Area Analysis

Backend/index.js

@@ -10,6 +10,7 @@ const Pharmacy = require("./src/api/pharmacy.api");
 const GroceryAPI = require("./src/api/grocery.api")
 const UserAPI = require("./src/api/user.api")
 const SubscriptionAPI = require("./src/api/subscription.api")
+const AreaDetailsAPI = require("./src/api/areaDetails.api")
 
 
 const port = process.env.PORT || 5000;
@@ -33,6 +34,7 @@ app.use("/pharmacy",Pharmacy());
 app.use("/grocery", GroceryAPI());
 app.use("/user", UserAPI());
 app.use("/subscription", SubscriptionAPI());
+app.use("/areaDetails", AreaDetailsAPI());
 
 
 app.listen(port, () => {

Backend/src/api/areaDetails.api.js

+const express = require('express');
+const router = express.Router();
+const AreaDetailsController = require('../controller/areaDetails.controller');
+
+module.exports = function () {
+    router.post('/getAreaAllAttractionPlaces', AreaDetailsController.getAreaAllAttractionPlaces);
+    router.post('/getAreaTransportationModesCount', AreaDetailsController.getAreaTransportationModesCount);
+    router.post('/getAreaNearByHotels', AreaDetailsController.getAreaNearByHotels);
+
+    router.post('/getAreaBusinessCount', AreaDetailsController.getAreaBusinessCount);
+    router.post('/getAreaDistanceToCity', AreaDetailsController.getAreaDistanceToCity);
+    router.post('/getAreaWorkPlacesCount', AreaDetailsController.getAreaWorkPlacesCount);
+    router.post('/getAreaEducationRelatedPlacesCount', AreaDetailsController.getAreaEducationRelatedPlacesCount);
+    router.post('/getAreaShoppingMallsCount', AreaDetailsController.getAreaShoppingMallsCount);
+    
+    router.post('/getAreaRestaurentCount', AreaDetailsController.getAreaRestaurentCount);
+
+    return router;
+}
\ No newline at end of file

Backend/src/controller/user.controller.js

@@ -332,7 +332,7 @@ const updateUser = async (req, res) => {
         //     req.body.subscriptionStatus = "Over";
         // }
         try{
-            const data = await User.updateOne({ _id: req.body.id }, req.body)
+            const data = await User.findByIdAndUpdate({ _id: req.body.id }, req.body)
             console.log(data);
             res.status(200).send(data);
         }

Backend/src/model/user.model.js

@@ -9,6 +9,8 @@ const UserSchema = new mongoose.Schema({
     emailToken: { type: String, required: false },
     password: { type: String, required: true },
     predictionCount: { type: Number, required: false },
+    compareCount: { type: Number, required: false },
+    locationPredictCount: { type: Number, required: false },
     paymentType: { type: String, required: true },
     paymentID: { type: String, required: true },
     subscriptionPlan: { type: String, required: false },

bussifinder/src/App.js

@@ -13,6 +13,7 @@ import Map from './components/Map';
 import Loader from './components/Loader'
 import Footer from './components/Footer';
 import themeReducer from "./features/theme";
+import factorReducer from "./features/factorDetails";
 import businessReducer from "./features/business";
 import headerReducer from "./features/header";
 import userReducer from "./features/user";
@@ -30,13 +31,15 @@ import LocationBasedPredict from './components/LocationBasedPredict';
 import FactorDetails from './components/FactorDetails';
 import AdminDashboard  from './components/Admin/AdminDashboard';
 import UserSubscriptionPlan from './components/User/UserSubscriptionPlan';
+import ResultsFD from './components/ResultsFD';
 
 const store = configureStore({
   reducer: {
     theme: themeReducer,
     business: businessReducer,
     header: headerReducer,
-    user: userReducer
+    user: userReducer,
+    factorDetails: factorReducer
   },
 });
 
@@ -64,9 +67,10 @@ function App() {
           <Route path="/resultWOTypes" element={<ResultsWOTypes/>} />
           <Route path="/Service" element={<BusinessTypePage />} />
           <Route path="/locationBasedPredict" element={<LocationBasedPredict />} />
-          <Route path="/Factor%20Details" element={<FactorDetails />} />
+          <Route path="/Area%20Analysis" element={<FactorDetails />} />
           <Route path="/AdminDashboard" element={<AdminDashboard />} />
           <Route path="/UserSubscriptionPlan" element={<UserSubscriptionPlan />} />
+          <Route path="/ResultsFactorDetails" element={<ResultsFD />} />
         </Route>
       </Routes>
       <Footer />

bussifinder/src/assets/data/subscriptionPlan.js

@@ -2,80 +2,142 @@
  const SUBSCRIPTION_PLAN = [
         {
             "id": 1,
-            "title": "Free Plan",
+            "plan": "Free",
             "price": 0,
-            "type": "Free",
-            "count": 3,
-            "duration": "monthly",
+            "type": "month",
+            "predictionCount": 5,
+            "compareCount": 3,
+            "locationPredictCount": 10,
             "description": "For most businesses that want to optimize web queries 1",
+            "features": [
+                "Unlimited Factors Based Predictions",
+                "Free Five Predictions",
+                "Free Three Comparisons",
+                "Free Ten Location Predictions",
+            ]
 
         },
         {
             "id": 2,
-            "title": "Basic Plan",
-            "price": 10,
-            "count": 15,
-            "type": "Basic-monthly",
-            "duration": "monthly",
+            "plan": "Basic",
+            "price": 15,
+            "type": "month",
+            "predictionCount": 30,
+            "compareCount": 10,
+            "locationPredictCount": 20,
             "description": "For most businesses that want to optimize web queries 2",
+            "features": [
+                "Unlimited Factors Based Predictions",
+                "Free Thirty Predictions",
+                "Free Ten Comparisons",
+                "Free Twenty Location Predictions",
+            ]
+
         },
         {
             "id": 3,
-            "title": "Premium Plan",
-            "price": 100,
-            "count": 50,
-            "type": "Popular-monthly",
-            "duration": "monthly",
+            "plan": "Popular",
+            "price": 50,
+            "type": "month",
+            "predictionCount": 50,
+            "compareCount": 20,
+            "locationPredictCount": 50,
             "description": "For most businesses that want to optimize web queries 3",
+            "features": [
+                "Unlimited Factors Based Predictions",
+                "Free Fifty Predictions",
+                "Free Twenty Comparisons",
+                "Free Fifty Location Predictions",
+            ]
 
         },
         {
             "id": 4,
-            "title": "Premium Plan",
-            "price": 150,
-            "count": 100,
-            "type": "Pro-monthly",
-            "duration": "monthly",
+            "plan": "Premium",
+            "price": 80,
+            "type": "month",
+            "predictionCount": 100,
+            "compareCount": 30,
+            "locationPredictCount": 80,
             "description": "For most businesses that want to optimize web queries 4",
+            "features": [
+                "Unlimited Factors Based Predictions",
+                "Free Hundred Predictions",
+                "Free Thirty Comparisons",
+                "Free Eighty Location Predictions",
+
+            ]
+
         },
         {
             "id": 5,
-            "title": "Intro Plan",
-            "price": 500,
-            "count": 250,
-            "type": "Intro-yearly",
-            "duration": "yearly",
+            "plan": "Intro",
+            "price": 300,
+            "type": "year",
+            "predictionCount": 250,
+            "compareCount": 100,
+            "locationPredictCount": 100,
             "description": "For most businesses that want to optimize web queries 5",
-        },{
+            "features": [
+                "Unlimited Factors Based Predictions",
+                "Free Two Hundred Fifty Predictions",
+                "Free Hundred Comparisons",
+                "Free Hundred Location Predictions",
+            ]
+
+        }
+        ,{
             "id": 6,
-            "title": "Basic Plan",
-            "price": 700,
-            "count": 400,
-            "type": "Basic-yearly",
-            "duration": "yearly",
+            "plan": "Pro",
+            "price": 400,
+            "type": "year",
+            "predictionCount": 350,
+            "compareCount": 100,
+            "locationPredictCount": 100,
             "description": "For most businesses that want to optimize web queries 6",
+            "features": [
+                "Unlimited Factors Based Predictions",
+                "Free Three Hundred Fifty Predictions",
+                "Free Hundred Comparisons",
+                "Free Hundred Location Predictions",
+
+            ]
 
         },
         {
             "id": 7,
-            "title": "Premium Plan",
-            "price": 1000,
-            "count": 750,
-            "type": "Popular-yearly",
-            "duration": "yearly",
+            "plan": "Flash",
+            "price": 600,
+            "type": "year",
+            "predictionCount": 450,
+            "compareCount": 200,
+            "locationPredictCount": 150,
             "description": "For most businesses that want to optimize web queries 7",
+            "features": [
+                "Unlimited Factors Based Predictions",
+                "Free Four Hundred Fifty Predictions",
+                "Free Two Hundred Comparisons",
+                "Free One Hundred Fifty Location Predictions",
+            ]
 
         },
         {
             "id": 8,
-            "title": "Premium Plan",
-            "price": 1200,
-            "count": 1000,
-            "type": "Pro-yearly",
-            "duration": "yearly",
+            "plan": "Ultra",
+            "price": 1500,
+            "type": "year",
+            "predictionCount": 800,
+            "compareCount": 300,
+            "locationPredictCount": 300,
             "description": "For most businesses that want to optimize web queries 8",
+            "features": [
+                "Unlimited Factors Based Predictions",
+                "Free Eight Hundred Predictions",
+                "Free Three Hundred Comparisons",
+                "Free Three Hundred Location Predictions",
+            ]
 
-        }
+        },
     ]
     
 

bussifinder/src/components/Admin/Subscriptions.js

@@ -112,6 +112,24 @@ const headCells = [
     disablePadding: false,
     label: "Subscription End Date",
   },
+  {
+    id: "subscriptionEndDate",
+    numeric: true,
+    disablePadding: false,
+    label: "Subscription End Date",
+  },
+  {
+    id: "subscriptionEndDate",
+    numeric: true,
+    disablePadding: false,
+    label: "Subscription End Date",
+  },
+  {
+    id: "subscriptionEndDate",
+    numeric: true,
+    disablePadding: false,
+    label: "Subscription End Date",
+  },
   {
     id: "subscriptionStatus",
     numeric: false,

bussifinder/src/components/Admin/Users.js

@@ -222,7 +222,7 @@ function EnhancedTableToolbar({
   const [dataToReport, setDataToReport] = React.useState(false);
 
   const getPlanInfo = (type) => {
-    let planInfo = DATA.filter((item) => item.type === type);
+    let planInfo = DATA.filter((item) => item.plan === type);
     return planInfo[0];
   };
 
@@ -415,13 +415,13 @@ function EnhancedTableToolbar({
                   <MenuItem value={"Free"}>
                     <em>Free</em>
                   </MenuItem>
-                  <MenuItem value={"Basic-monthly"}>Basic-monthly</MenuItem>
-                  <MenuItem value={"Popular-monthly"}>Popular-monthly</MenuItem>
-                  <MenuItem value={"Pro-monthly"}>Pro-monthly</MenuItem>
-                  <MenuItem value={"Intro-yearly"}>Intro-yearly</MenuItem>
-                  <MenuItem value={"Basic-yearly"}>Basic-yearly</MenuItem>
-                  <MenuItem value={"Popular-yearly"}>Popular-yearly</MenuItem>
-                  <MenuItem value={"Pro-yearly"}>Pro-yearly</MenuItem>
+                  <MenuItem value={"Basic"}>Basic</MenuItem>
+                  <MenuItem value={"Popular"}>Popular</MenuItem>
+                  <MenuItem value={"Premium"}>Premium</MenuItem>
+                  <MenuItem value={"Intro"}>Intro</MenuItem>
+                  <MenuItem value={"Pro"}>Pro</MenuItem>
+                  <MenuItem value={"Flash"}>Flash</MenuItem>
+                  <MenuItem value={"Ultra"}>Ultra</MenuItem>
                 </Select>
               </FormControl>
             </Box>

bussifinder/src/components/AlertDialogSlide.js

@@ -38,9 +38,17 @@ export default function AlertDialogSlide({ open, setOpen, title, content, handle
         onClose={handleClose}
         aria-describedby="alert-dialog-slide-description"
       >
-        <DialogTitle>{title}</DialogTitle>
+        <DialogTitle sx={{
+            color: "#231D4F",
+            fontSize: "20px",
+            fontWeight: "600",
+            whiteSpace: "nowrap",
+        }}>{title}</DialogTitle>
         <DialogContent>
-          <DialogContentText id="alert-dialog-slide-description">
+          <DialogContentText id="alert-dialog-slide-description" sx={{color: "#888888",
+    fontSize: "14px",
+    fontWeight: "400",
+   }}>
             {content}
           </DialogContentText>
         </DialogContent>

bussifinder/src/components/Auth/SignIn.js

@@ -185,15 +185,16 @@ export default function SignIn() {
                 role: 'user',
                 emailToken: null,
                 isVerified: true,
-                predictionCount : 0,
-                predictionCountLimit : 0,
-                subscriptionType : 'none',
+                predictionCount : 5,
+                compareCount : 3,
+                locationPredictCount:10,
+                subscriptionType: 'Monthly',
                 paymentType: 'none',
                 paymentID: 'none',
-                subscriptionPlan: 'none',
-                subscriptionEndDate : 'none',
-                subscriptionDate : 'none',
-                subscriptionStatus : 'none',
+                subscriptionPlan: 'Free',
+                subscriptionEndDate : '15-12-2022',
+                subscriptionDate : '15-11-2022',
+                subscriptionStatus : 'Active',
 
             }
 

bussifinder/src/components/Auth/SignUp.js

@@ -125,15 +125,16 @@ export default function SignUp() {
             email: data.get('email'),
             password: data.get('password'),
             role: 'user',
-            predictionCount : 0,
-            predictionCountLimit : 0,
+            predictionCount : 5,
+            compareCount : 3,
+            locationPredictCount:10,
             paymentType: 'none',
             paymentID: 'none',
-            subscriptionPlan: 'none',
-            subscriptionType: 'none',
-            subscriptionEndDate : 'none',
-            subscriptionDate : 'none',
-            subscriptionStatus : 'none'
+            subscriptionType: 'Monthly',
+            subscriptionPlan: 'Free',
+            subscriptionEndDate : '15-12-2022',
+            subscriptionDate : '15-11-2022',
+            subscriptionStatus : 'Active',
         }
         try {
             const result = await API.post('user/create', body)

bussifinder/src/components/BusinessTypePage.js

@@ -15,6 +15,16 @@ import TabContext from '@mui/lab/TabContext';
 import TabList from '@mui/lab/TabList';
 import TabPanel from '@mui/lab/TabPanel';
 import { addNewBusiness } from './../features/business';
+import AlertDialogSlide from './AlertDialogSlide';
+import Snackbar from '@mui/material/Snackbar';
+import MuiAlert, { AlertProps } from '@mui/material/Alert';
+
+const Alert = React.forwardRef(function Alert(
+    props,
+    ref,
+) {
+    return <MuiAlert elevation={6} ref={ref} variant="filled" {...props} />;
+});
 
 
 const GetStarted = styled(Button)(() => ({
@@ -87,26 +97,103 @@ const BusinessTypePage = () => {
     const theme = useSelector((state) => state.theme);
     const classes = useStyles(theme);
     const [value, setValue] = React.useState('1');
+    const userInfo = useSelector((state) => state.user.userDetails);
+    const [open, setOpen] = React.useState(false);
+    const [titleBox, setTitleBox] = React.useState('');
+    const [contentBox, setContentBox] = React.useState('');
+    const [error, setError] = React.useState(false);
+    const [errorMsg, setErrorMsg] = React.useState("Error");
+
 
     const handleChange = (event, newValue) => {
         setValue(newValue);
     };
 
+    const handleCheckCount = () => {
+        if(userInfo?.predictionCount > 0){
+            return true;
+        }else{
+            return false;
+        }
+    }
+
+    const handleCheckLogin = () => {
+        console.log(userInfo.predictionCount ? true : false);
+        if(userInfo){
+            return true;
+        }else{
+            return false;
+        }
+    }
+
+
     const navigateToHInputForm = () => {
-        console.log("first")
-        dispatch(addNewBusiness({ 'type': 'hotel' }))
-        navigate(`/inputHotel`);
+        if(!handleCheckLogin()){
+            setErrorMsg('Please login to continue');
+            handleError()
+        }
+        else if(handleCheckCount()){
+            dispatch(addNewBusiness({ 'type': 'hotel' }))
+            navigate(`/inputHotel`);
+        }else{
+            setTitleBox('You have already used your prediction count');
+            setContentBox('You can only use your prediction count once. Please contact us to get more prediction count.');
+            setOpen(true);
+        }
     }
     
     const navigateToRInputForm = () => {
-        dispatch(addNewBusiness({ 'type': 'restaurant' }))
-        navigate(`/inputHotel`)
+        if(!handleCheckLogin()){
+            setErrorMsg('Please login to continue');
+            handleError()
+        }
+        else if(handleCheckCount()){
+            dispatch(addNewBusiness({ 'type': 'restaurant' }))
+            navigate(`/inputHotel`)
+        }else{
+            setTitleBox('You have already used your prediction count');
+            setContentBox('You can only use your prediction count once. Please contact us to get more prediction count.');
+            setOpen(true);
+        }
+        
     }
 
     const navigateToLocationBasedPredic = () => {
-        dispatch(addNewBusiness({ 'type': 'locationBased' }))
-        navigate(`/locationBasedPredict`)
+        if(!handleCheckLogin()){
+            setErrorMsg('Please login to continue');
+            handleError()
+        }
+        else if(handleCheckCount()){
+            dispatch(addNewBusiness({ 'type': 'locationBased' }))
+            navigate(`/locationBasedPredict`)
+        }else{
+            setTitleBox('You have already used your prediction count');
+            setContentBox('You can only use your prediction count once. Please contact us to get more prediction count.');
+            setOpen(true);
+        }
+    }
+
+    const handleConfirmDailog = (Confirm) => {
+        if(Confirm){
+            navigate(`/Pricing`);
+            setOpen(false);
+        }else{
+            navigate(`/`);
+            setOpen(false);
+        }
+        
     }
+
+    const handleError = () => {
+        setError(true);
+    };
+    const handleCloseError = (event, reason) => {
+        if (reason === 'clickaway') {
+            return;
+        }
+        setError(false);
+    }
+    
 return (
     <Box
         sx={{
@@ -122,6 +209,15 @@ return (
             boxSizing:'border-box',
         }}
     >   
+     <Snackbar open={error} autoHideDuration={6000} onClose={handleCloseError}>
+                <Alert onClose={handleCloseError} severity="error">{errorMsg}</Alert>
+</Snackbar>
+    <AlertDialogSlide  
+            open={open}
+            setOpen={setOpen}
+            title={titleBox}
+            content={contentBox}
+            handleConfirmDailog={handleConfirmDailog}/>
     <TabContext value={value}>
         <Box sx={{
             display:'flex',

bussifinder/src/components/Hotel Input/InputDetails.js

@@ -25,6 +25,15 @@ import { useNavigate } from "react-router-dom";
 import styled from '@emotion/styled';
 import { FillingBottle } from "react-cssfx-loading";
 import { TypeAnimation } from 'react-type-animation';
+import Snackbar from '@mui/material/Snackbar';
+import MuiAlert, { AlertProps } from '@mui/material/Alert';
+
+const Alert = React.forwardRef(function Alert(
+    props,
+    ref,
+) {
+    return <MuiAlert elevation={6} ref={ref} variant="filled" {...props} />;
+});
 
 
 const NextBtn = styled(Button)(() => ({
@@ -89,7 +98,10 @@ export default function InputDetails() {
     const [open, setOpen] = React.useState(false);
     const dispatch = useDispatch();
     const [activeStep, setActiveStep] = React.useState(0);
-    const businessDetails = useSelector((state) => state.business)
+    const businessDetails = useSelector((state) => state.business);
+    const userInfo = useSelector((state) => state.user.userDetails);
+    const [error, setError] = React.useState(false);
+    const [errorMsg, setErrorMsg] = React.useState("Error");
     let navigate = useNavigate();
     const handleClose = () => {
         setOpen(false);
@@ -113,7 +125,10 @@ export default function InputDetails() {
         }
     };
 
+    
+
     const handleNext = () => {
+        if(businessDetails.value[0].latitude && businessDetails.value[0].longitude){
         setActiveStep(activeStep + 1);
         if (activeStep === steps.length - 1 && businessDetails && businessDetails.value[0].type == 'hotel') {
             handleToggle()
@@ -273,16 +288,32 @@ export default function InputDetails() {
                 }).catch(function (error) { })
             }).catch(function (error) { });
         }
-
+    }else{
+        setErrorMsg('Please Select a Location');
+        handleError()
+    }
     };
 
     const handleBack = () => {
         setActiveStep(activeStep - 1);
     };
 
+    const handleError = () => {
+        setError(true);
+    };
+    const handleCloseError = (event, reason) => {
+        if (reason === 'clickaway') {
+            return;
+        }
+        setError(false);
+    }
+
     return (
         <ThemeProvider theme={theme}>
             {/* <CssBaseline /> */}
+            <Snackbar open={error} autoHideDuration={6000} onClose={handleCloseError}>
+                <Alert onClose={handleCloseError} severity="error">{errorMsg}</Alert>
+</Snackbar>
             <Container component="main" maxWidth={activeStep == 0 ? "md" : "sm"} sx={{ p: 8 ,boxSizing:"border-box",}}>
                 <Paper variant="outlined" 
                 sx={{
@@ -356,7 +387,6 @@ export default function InputDetails() {
                                             repeat={Infinity}
                                             style={{ fontSize: '2em',color:"#101554" }}
                                             />
-                                       
                                     </Box>
                                 
                                 </React.Fragment>

bussifinder/src/components/Map.js

@@ -11,7 +11,7 @@ import { addBusiness } from '../features/business';
 
 function Map() {
   const dispatch = useDispatch();
-  const businessDetails = useSelector((state) => state.business)
+  const businessDetails = useSelector((state) => state.business);
   const [mapRef, setMapRef] = useState(null);
   const [selectedPlace, setSelectedPlace] = useState(null);
   const [markerMap, setMarkerMap] = useState({});
@@ -19,8 +19,8 @@ function Map() {
   const [position, setPosition] = useState({});
   const [zoom, setZoom] = useState(9);
   const [clickedLatLng, setClickedLatLng] = useState({
-    lat: businessDetails && businessDetails.value[0].latitude ? businessDetails.value[0].latitude : '',
-    lng: businessDetails && businessDetails.value[0].longitude ? businessDetails.value[0].longitude : '',
+    lat:  businessDetails?.value[0]?.latitude ? businessDetails.value[0].latitude : '',
+    lng:  businessDetails?.value[0]?.longitude ? businessDetails.value[0].longitude : '',
   });
   const [infoOpen, setInfoOpen] = useState(false);
 
@@ -64,9 +64,8 @@ function Map() {
 
   useEffect(() => {
     if (clickedLatLng) {
-      console.log('sqqqqqqqqqqqqqqqqqqqq')
       setPosition(clickedLatLng)
-      console.log("clickedLatLng", clickedLatLng, businessDetails.value[0].type)
+      console.log("clickedLatLng", clickedLatLng, businessDetails.value[0]?.type)
       dispatch(addBusiness({
         ...businessDetails.value[0],
         latitude: clickedLatLng.lat,

bussifinder/src/components/MultipleResult.js

@@ -284,10 +284,10 @@ const MultipleResult = () => {
                                 <div className={classes.featureTitleTxt}>Location Based Features</div>
                                 <Box className={classes.featuresBox}>
                                     <Grow in={checked} style={{ transformOrigin: '0 0 0' }} {...(checked ? { timeout: 500 } : {})} >
-                                        <div className={classes.features}><LocationOnRoundedIcon style={{ color: '#df5e52' }} />Location Attractiveness Places  - {businessDetails.value[i].locationFeatures.attractionPlacesCount}</div>
+                                        <div className={classes.features}><LocationOnRoundedIcon style={{ color: '#df5e52' }} />Location Attractiveness Places  - {businessDetails.value[i].locationFeatures?.attractionPlacesCount}</div>
                                     </Grow>
                                     <Grow in={checked} style={{ transformOrigin: '0 0 0' }} {...(checked ? { timeout: 800 } : {})} >
-                                        <div className={classes.features}><DirectionsTransitFilledSharpIcon style={{ color: '#2f9f48' }} />Transportation Modes Count - {businessDetails.value[i].locationFeatures.transportationModesCount}</div>
+                                        <div className={classes.features}><DirectionsTransitFilledSharpIcon style={{ color: '#2f9f48' }} />Transportation Modes Count - {businessDetails.value[i].locationFeatures?.transportationModesCount}</div>
                                     </Grow>
                                     <Grow in={checked} style={{ transformOrigin: '0 0 0' }} {...(checked ? { timeout: 1100 } : {})} >
                                         <div className={classes.features}><ApartmentRoundedIcon style={{ color: '#ce7c39' }} />Nearby Hotel Count  - {businessDetails.value[i].locationFeatures.competitors}</div>
@@ -496,9 +496,6 @@ const MultipleResult = () => {
                 </Box>
 
 
-
-
-
             </Box>
 
 

bussifinder/src/components/ResultsFD.js

+import React, { useEffect, useState } from "react";
+import Box from "@mui/material/Box";
+import { makeStyles } from "@mui/styles";
+import Grow from "@mui/material/Grow";
+import { red } from "@mui/material/colors";
+import { BsFilePlus } from "react-icons/bs";
+import { GiPathDistance } from "react-icons/gi";
+import { MdWork } from "react-icons/md";
+import { IoMdSchool } from "react-icons/io";
+import { HiShoppingBag } from "react-icons/hi";
+import { RiRestaurantFill } from "react-icons/ri";
+import { GoPrimitiveDot } from "react-icons/go";
+import DirectionsTransitFilledSharpIcon from "@mui/icons-material/DirectionsTransitFilledSharp";
+import LocationOnRoundedIcon from "@mui/icons-material/LocationOnRounded";
+import ApartmentRoundedIcon from "@mui/icons-material/ApartmentRounded";
+import StarRoundedIcon from "@mui/icons-material/StarRounded";
+import { useSelector } from "react-redux";
+import {
+  useLoadScript,
+  GoogleMap,
+  MarkerF,
+  InfoWindow,
+} from "@react-google-maps/api";
+
+const UseStyles = makeStyles(() => ({
+  titleTxt: {
+    color: "#231D4F",
+    fontSize: "25px",
+    fontWeight: "600",
+    marginTop: "10px",
+  },
+  subTxt: {
+    color: "#888888",
+    fontSize: "14px",
+    fontWeight: "400",
+    marginBottom: "10px",
+  },
+  featuresBoxFlex: {
+    width: "100%",
+    height: "100%",
+    boxSizing: "border-box",
+    display: "flex",
+    justifyContent: "center",
+    flexDirection: "column",
+    alignItems: "flex-start",
+    color: (themeColor) =>
+      themeColor.status == "light" ? "#3e3d3d" : "#f5f5f5",
+  },
+  featuresBox: {
+    width: "100%",
+    height: "100%",
+    // backgroundColor: themeColor => themeColor.status == 'dark' ? '#3e3d3d' : '#f5f5f5',
+    borderRadius: "30px",
+    boxSizing: "border-box",
+    overflow: "hidden",
+    padding: "20px",
+    display: "flex",
+    justifyContent: "center",
+    flexWrap: "wrap",
+    gap: "10px",
+  },
+  features: {
+    flex: "2 5 12rem",
+    width: "fit-content",
+    height: "fit-content",
+    whiteSpace: "pre-wrap",
+    backgroundColor: (themeColor) =>
+      themeColor.status == "dark" ? "#4c4c4c" : "#e8e8e8",
+    borderRadius: "8px",
+    boxSizing: "border-box",
+    display: "flex",
+    flexDirection: "column",
+    gap: "10px",
+    alignItems: "center",
+    padding: "10px",
+    paddingInline: "15px",
+    boxShadow: "0px 0px 5px 0px rgba(234,234,234,0.2)",
+    color: "#272830",
+    fontSize: "16px",
+    fontWeight: "600",
+    marginTop: "10px",
+  },
+  countTxt:{
+    color: "#231D4F",
+    fontSize: "26px",
+    fontWeight: "600",
+    marginBottom: "10px",
+  }
+}));
+
+const ResultsFD = () => {
+  const themeColor = useSelector((state) => state.theme.value);
+  const factorDetails = useSelector((state)=>state.factorDetails.value);
+  const classes = UseStyles(themeColor);
+  const [center, setCenter] = useState({
+    lat: 60.192059,
+    lng: 24.945831,
+  });
+  const [position, setPosition] = useState({
+    lat: 60.192059,
+    lng: 24.945831,
+  });
+  const [zoom, setZoom] = useState(9);
+  const { isLoaded } = useLoadScript({
+    // Enter your own Google Maps API key
+    googleMapsApiKey: "AIzaSyC_mV5GkYx8ULNDqXgwBobTczkM7j6T0uc",
+  });
+  const [checked, setChecked] = useState(true);
+
+  useEffect(() => {
+    console.log(factorDetails);
+  }, [factorDetails]);
+
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        backgroundColor: "#E4E6F1",
+        paddingBlock: "50px",
+        paddingInline: "250px",
+      }}
+    >
+      <Box
+        sx={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          padding: "35px",
+          backgroundColor: "#FFFFFF",
+          width: "100%",
+          height: "100%",
+          borderRadius: "1rem",
+          boxSizing: "border-box",
+        }}
+      >
+        <Box
+          sx={{
+            width: "100%",
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "flex-start",
+            justifyContent: "flex-start",
+          }}
+        >
+          <div className={classes.titleTxt}>Simple, transparent pricing</div>
+          <div className={classes.subTxt}>No contracts. No surprise fees.</div>
+
+          <Box className={classes.featuresBoxFlex}>
+            <Box className={classes.featuresBox}>
+              <Grow
+                in={checked}
+                style={{ transformOrigin: "0 0 0" }}
+                {...(checked ? { timeout: 500 } : {})}
+              >
+                <div className={classes.features}>
+                  <LocationOnRoundedIcon style={{ color: "#df5e52" ,fontSize:"30px"}} />
+                    Attractiveness Places
+                    <div className={classes.countTxt}>
+                        {factorDetails?.attractionPlacesCount}
+                    </div>
+                </div>
+                
+              </Grow>
+              <Grow
+                in={checked}
+                style={{ transformOrigin: "0 0 0" }}
+                {...(checked ? { timeout: 800 } : {})}
+              >
+                <div className={classes.features}>
+                  <DirectionsTransitFilledSharpIcon
+                    style={{ color: "#2f9f48" ,fontSize:"30px"}}
+                  />
+                  Transportation Modes  
+                  <div className={classes.countTxt}>
+                        {factorDetails?.transportationModesCount}
+                </div>
+                </div>
+              </Grow>
+              <Grow
+                in={checked}
+                style={{ transformOrigin: "0 0 0" }}
+                {...(checked ? { timeout: 1100 } : {})}
+              >
+                <div className={classes.features}>
+                  <ApartmentRoundedIcon style={{ color: "#ce7c39" ,fontSize:"30px"}} />
+                  Nearby Hotel Count
+                  <div className={classes.countTxt}>
+                        {factorDetails?.nearByHotelCount}
+                </div>
+                </div>
+              </Grow>
+              <Grow
+                in={checked}
+                style={{ transformOrigin: "0 0 0" }}
+                {...(checked ? { timeout: 1400 } : {})}
+              >
+                <div className={classes.features}>
+                  <StarRoundedIcon style={{ color: "#e2da5f",fontSize:"30px" }} />
+                  Nearby Hotel Reviews
+                  <div className={classes.countTxt}>
+                        {factorDetails?.nearByHotelReviewCount}
+                </div>
+                </div>
+                
+              </Grow>
+              <Grow
+                in={checked}
+                style={{ transformOrigin: "0 0 0" }}
+                {...(checked ? { timeout: 500 } : {})}
+              >
+                <div className={classes.features}>
+                  <GiPathDistance
+                    style={{ color: "#df5e52",fontSize:"30px" }}
+                  />
+                  DistanceTo The City
+                  
+                <div className={classes.countTxt}>
+                        {factorDetails?.DistanceToCity}km
+                </div>
+                </div>
+              </Grow>
+              <Grow
+                in={checked}
+                style={{ transformOrigin: "0 0 0" }}
+                {...(checked ? { timeout: 800 } : {})}
+              >
+                <div className={classes.features}>
+                  <HiShoppingBag
+                    style={{ color: "#2f9f48",fontSize:"30px" }}
+                  />
+                  Shopping Malls 
+                  
+                <div className={classes.countTxt}>
+                        {factorDetails?.ShoppingMallsCount}
+                </div>
+                </div>
+              </Grow>
+              <Grow
+                in={checked}
+                style={{ transformOrigin: "0 0 0" }}
+                {...(checked ? { timeout: 1100 } : {})}
+              >
+                <div className={classes.features}>
+                  <IoMdSchool style={{ color: "#ce7c39",fontSize:"30px" }} />
+                  Education Related Places 
+                  
+                <div className={classes.countTxt}>
+                        {factorDetails?.EducationRelatedPlacesCount}
+                </div>
+                </div>
+              </Grow>
+              <Grow
+                in={checked}
+                style={{ transformOrigin: "0 0 0" }}
+                {...(checked ? { timeout: 1400 } : {})}
+              >
+                <div className={classes.features}>
+                  <MdWork style={{ color: "#4e4c2e",fontSize:"30px"}} />
+                  Work Places 
+                  
+                <div className={classes.countTxt}>
+                        {factorDetails?.WorkPlacesCount}
+                </div>
+                </div>
+              </Grow>
+            </Box>
+          </Box>
+          <Box
+            sx={{
+              width: "100%",
+              height: "100%",
+              borderRadius: "1rem",
+            }}
+          >
+            {isLoaded ? (
+              <div>
+                <GoogleMap
+                  center={center}
+                  zoom={zoom}
+                  mapContainerStyle={{
+                    borderRadius: "8px",
+                    height: "35vh",
+                  }}
+                >
+                  {position && <MarkerF position={position} />}
+                </GoogleMap>
+              </div>
+            ) : (
+              <div>
+                Loading...
+              </div>
+            )}
+          </Box>
+        </Box>
+      </Box>
+    </Box>
+  );
+};
+
+export default ResultsFD;

bussifinder/src/components/User/UserSubscriptionPlan.js

@@ -3,9 +3,12 @@ import { Margin } from "@mui/icons-material";
 import Button from "@mui/material/Button";
 import { makeStyles } from "@mui/styles";
 import { Box } from "@mui/system";
+import { type } from "@testing-library/user-event/dist/type";
 import React, { useEffect } from "react";
 import { FiCheck } from "react-icons/fi";
 import { useSelector } from "react-redux";
+import { useNavigate } from "react-router-dom";
+import DATA from '../../assets/data/subscriptionPlan'
 
 const UseStyles = makeStyles((theme) => ({
   pricingBoxMost: {
@@ -135,9 +138,18 @@ const MostPlanButton = styled(Button)(({ theme }) => ({
 
 const UserSubscriptionPlan = () => {
   const classes = UseStyles();
+  const navigate = useNavigate();
   const userInfo = useSelector((state) => state.user.userDetails);
+  const [predictionNo, setPredictionNo] = React.useState(0);
 
-
+  useEffect(() => {
+    for(let i=0; i<DATA.length; i++){
+      if(DATA[i].plan === userInfo?.subscriptionPlan){
+        console.log(DATA[i].plan)
+        setPredictionNo(DATA[i].locationPredictCount)
+      }
+    }
+  },[userInfo])
   return (
     <Box
       sx={{
@@ -187,49 +199,44 @@ const UserSubscriptionPlan = () => {
           </div>
           <div className={classes.planItemsMost}>
             <FiCheck className={classes.planIcon} />
-            <div className={classes.bodyTxt}>Total Search - 40 </div>
+            <div className={classes.bodyTxt}>Prediction Limit - {userInfo?.predictionCount} </div>
+          </div>
+          <div className={classes.planItemsMost}>
+            <FiCheck className={classes.planIcon} />
+            <div className={classes.bodyTxt}>Compare Location Limit - {userInfo?.compareCount} </div>
           </div>
           <div className={classes.planItemsMost}>
             <FiCheck className={classes.planIcon} />
-            <div className={classes.bodyTxt}>Left - 10 </div>
+            <div className={classes.bodyTxt}>Location Based Limit - {userInfo?.locationPredictCount} </div>
           </div>
           <div className={classes.planItemsMost}>
             <FiCheck className={classes.planIcon} />
-            <div className={classes.bodyTxt}>Activate Date - 10/05/2022 </div>
+            <div className={classes.bodyTxt}>Activate Date - {userInfo?.subscriptionDate} </div>
           </div>
           <div className={classes.planItemsMost}>
             <FiCheck className={classes.planIcon} />
-            <div className={classes.bodyTxt}>Expire Date - 10/07/2023 </div>
+            <div className={classes.bodyTxt}>Expire Date - {(userInfo?.subscriptionEndDate)}</div>
           </div>
         </Box>
 
-        <Box className={classes.pricingBoxMost}>
-          <div className={classes.popularTxtMost}>Premium Plan</div>
+        {DATA.map((item, index) => (
+            item.plan === userInfo.subscriptionPlan && (
+        <Box className={classes.pricingBoxMost} key={index}>
+          <div className={classes.popularTxtMost}>{item.plan}</div>
           <div className={classes.priceMonthTxtMost}>
-            <span className={classes.priceTxtMost}>100$</span> /year
+            <span className={classes.priceTxtMost}>{item.price}$</span> /{item.type}
           </div>
-          <div className={classes.planTypeTxtMost}>Pro</div>
+          <div className={classes.planTypeTxtMost}>{item.plan}</div>
           <div className={classes.planDescTxtMost}>
-            For most businesses that want to otpimize web queries
+            {item.description}
           </div>
-          <div className={classes.planItemsMost}>
-            <FiCheck className={classes.planIconMost} />
-            <div className={classes.planItemTxtMost}>Free forever</div>
-          </div>
-          <div className={classes.planItemsMost}>
-            <FiCheck className={classes.planIconMost} />
-            <div className={classes.planItemTxtMost}>Free forever</div>
-          </div>
-          <div className={classes.planItemsMost}>
-            <FiCheck className={classes.planIconMost} />
-            <div className={classes.planItemTxtMost}>Free forever</div>
-          </div>
-          <div className={classes.planItemsMost}>
-            <FiCheck className={classes.planIconMost} />
-            <div className={classes.planItemTxtMost}>Free forever</div>
-          </div>
-          <MostPlanButton> Upgrade Plan </MostPlanButton>
-        </Box>
+          {item.features.map((feature, i) => (
+            <div className={classes.planItemsMost} key={i}>
+              <FiCheck className={classes.planIconMost}/><div className={classes.planItemTxtMost}>{feature}</div>
+            </div>
+          ))}
+          <MostPlanButton onClick={()=> navigate("/Pricing") }> Change Plan </MostPlanButton>
+        </Box>)))}
       </Box>
     </Box>
   );

bussifinder/src/features/business.js

@@ -21,7 +21,6 @@ export const businessSlice = createSlice({
                 temp.push(state.value[i])
             }
             // state.value.push(action.payload)
-            console.log("temppppppppppppppppppppppppppppppppppppppppppp", temp)
             state.value = temp;
             state.value[0] = action.payload
         },
@@ -37,8 +36,6 @@ export const businessSlice = createSlice({
                 }
                 temp.push(state.value[i])
             }
-            // state.value.push(action.payload)
-            // console.log("temppppppppppppppppppppppppppppppppppppppppppp", temp)
             state.value = temp;
             state.value[0] = action.payload
         },

bussifinder/src/features/factorDetails.js

+import { createSlice } from '@reduxjs/toolkit'
+
+export const factorDetailsSlice = createSlice({
+    name: "factorDetails",
+    initialState: {
+        value: []
+    },
+    reducers: {
+        factorDetailsInfo: (state, action) => {
+            state.value = action.payload
+        }
+    }
+});
+export const { factorDetailsInfo } = factorDetailsSlice.actions;
+export default factorDetailsSlice.reducer;
\ No newline at end of file

bussifinder/src/features/user.js

-import { createSlice } from '@reduxjs/toolkit';
-import api from '../api';
+import { createSlice } from "@reduxjs/toolkit";
+import api from "../api";
 
 export const userSlice = createSlice({
-    name: "user",
-    initialState: {
-        value: [],
-        userDetails: [],
+  name: "user",
+  initialState: {
+    value: [],
+    userDetails: [],
+  },
+  reducers: {
+    login: (state, action) => {
+      state.value.push(action.payload);
     },
-    reducers: {
-        login: (state, action) => {
-            state.value.push(action.payload)
-        },
-        register: (state, action) => {
-            state.value.push(action.payload)
-        },
-        userInfo: (state, action) => {
-            state.userDetails=action.payload;
-        },
-        updateUser: (state, action) => {
-        const  updateSubscription = async ()=>{
-            await api.put(`/users/updateUser/`, action.payload);
-        }
-        if(action.payload){
-            state.userDetails.push(updateSubscription())
-        }
-        },
-        logout: (state) => {
-            state.value = [];
-            state.userDetails = [];
-        },
-    }
+    register: (state, action) => {
+      state.value.push(action.payload);
+    },
+    userInfo: (state, action) => {
+      state.userDetails = action.payload;
+    },
+    updateUser: (state, action) => {
+      console.log(action.payload);
+    },
+    logout: (state) => {
+      state.value = [];
+      state.userDetails = [];
+    },
+  },
 });
-export const { login: login, register: register, logout:logout,userInfo:userInfo } = userSlice.actions;
-export default userSlice.reducer;
\ No newline at end of file
+export const {
+  login: login,
+  register: register,
+  logout: logout,
+  userInfo: userInfo,
+  updateUser: updateUser,
+} = userSlice.actions;
+export default userSlice.reducer;

bussifinder/src/utils/functionUpdate.js

+import api from "../api";
+
+export const UpdateLocationPredicCount = (uid,count) => async (dispatch) => {
+    try {
+        const { data } = await  api
+        .put(`/user/updateUser/`,{
+            id:uid,
+            locationPredicCount:count
+        });
+        console.log(data)
+    } catch (error) {
+        console.log(error);
+    }
+}
\ No newline at end of file