Initial commit - restaurant dashboard

src/components/Home/CreateYourRestaurant/CreateRestaurant.js

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { Box, useTheme, useMediaQuery } from '@mui/material';
+import { Box, useTheme, useMediaQuery, Snackbar, Alert } from '@mui/material';
 import KitchPlusAppBar from '../AppBar';
 import Sidebar from '../SideHome';
 import CloudKitchenProject from './contcet/CloudKitchenProject';
@@ -10,7 +10,9 @@ import Budget from './contcet/Budget';
 import AdditionalSupport from './contcet/AdditionalSupport';
 import AdditionalNotes from './contcet/AdditionalNotes';
 import SideProfile from './SideProfile';
+import authService from '../../../services/authService';
 
+const { createNewRestaurant } = authService;
 const drawerWidth = 230;
 
 const CreateRestaurant = () => {
@@ -19,30 +21,98 @@ const CreateRestaurant = () => {
   const [hasProducts, setHasProducts] = useState(false);
   const [sidebarOpen, setSidebarOpen] = useState(!isMobile);
 
-  // ⬇️ إدارة الخطوة الحالية
+  const [snackbarOpen, setSnackbarOpen] = useState(false);
   const [currentStep, setCurrentStep] = useState(0);
 
+  // إدارة بيانات النموذج لجميع الخطوات (مشاركة البيانات بين الخطوات)
+  const [formData, setFormData] = useState({
+
+  });
+
+  // دالة لتحديث بيانات النموذج بشكل مرن (دمج الجديد مع القديم)
+  const updateFormData = (newData) => {
+    setFormData(prev => ({
+      ...prev,
+      ...newData,
+    }));
+  };
+
+
+  // دالة لإغلاق السناك بار
+  const handleSnackbarClose = (event, reason) => {
+    if (reason === 'clickaway') return;
+    setSnackbarOpen(false);
+  };
+
+  const handleSubmit = async () => {
+    try {
+      await createNewRestaurant(formData);
+      setSnackbarOpen(true);
+    } catch (error) {
+      console.error(error);
+
+    }
+  };
+
   const steps = [
-    <CloudKitchenProject onNext={() => setCurrentStep(currentStep + 1)} onBack={() => setCurrentStep(currentStep - 1)} />,
-    <OperationalDetails onNext={() => setCurrentStep(currentStep + 1)} onBack={() => setCurrentStep(currentStep - 1)} />,
-    <RequiredEquipments onNext={() => setCurrentStep(currentStep + 1)} onBack={() => setCurrentStep(currentStep - 1)} />,
-    <VisualIdentity onNext={() => setCurrentStep(currentStep + 1)} onBack={() => setCurrentStep(currentStep - 1)} />,
-    <Budget onNext={() => setCurrentStep(currentStep + 1)} onBack={() => setCurrentStep(currentStep - 1)} />,
-    <AdditionalSupport onNext={() => setCurrentStep(currentStep + 1)} onBack={() => setCurrentStep(currentStep - 1)} />,
-    <AdditionalNotes onBack={() => setCurrentStep(currentStep - 1)} />,
+    <CloudKitchenProject
+      key="step-0"
+      formData={formData}
+      updateFormData={updateFormData}
+      onNext={() => setCurrentStep(prev => Math.min(prev + 1, steps.length - 1))}
+      onBack={() => setCurrentStep(prev => Math.max(prev - 1, 0))}
+    />,
+    <OperationalDetails
+      key="step-1"
+      formData={formData}
+      updateFormData={updateFormData}
+      onNext={() => setCurrentStep(prev => Math.min(prev + 1, steps.length - 1))}
+      onBack={() => setCurrentStep(prev => Math.max(prev - 1, 0))}
+    />,
+    <RequiredEquipments
+      key="step-2"
+      formData={formData}
+      updateFormData={updateFormData}
+      onNext={() => setCurrentStep(prev => Math.min(prev + 1, steps.length - 1))}
+      onBack={() => setCurrentStep(prev => Math.max(prev - 1, 0))}
+    />,
+    <VisualIdentity
+      key="step-3"
+      formData={formData}
+      updateFormData={updateFormData}
+      onNext={() => setCurrentStep(prev => Math.min(prev + 1, steps.length - 1))}
+      onBack={() => setCurrentStep(prev => Math.max(prev - 1, 0))}
+    />,
+    <Budget
+      key="step-4"
+      formData={formData}
+      updateFormData={updateFormData}
+      onNext={() => setCurrentStep(prev => Math.min(prev + 1, steps.length - 1))}
+      onBack={() => setCurrentStep(prev => Math.max(prev - 1, 0))}
+    />,
+    <AdditionalNotes
+      key="step-5"
+      formData={formData}
+      updateFormData={updateFormData}
+      onBack={() => setCurrentStep(prev => Math.max(prev - 1, 0))}
+      onSubmit={handleSubmit}
+    />
+
   ];
 
-  useEffect(() => {
-    const checkProducts = async () => {
-      const productsExist = await checkIfProductsExist();
-      setHasProducts(productsExist);
-    };
-    checkProducts();
-  }, []);
 
-  const checkIfProductsExist = async () => {
-    return false;
-  };
+  // useEffect(() => {
+  //   const checkProducts = async () => {
+  //     const productsExist = await checkIfProductsExist();
+  //     setHasProducts(productsExist);
+  //   };
+  //   checkProducts();
+  // }, []);
+
+  // const checkIfProductsExist = async () => {
+  //   return false;
+  // };
+
 
   useEffect(() => {
     if (window.innerWidth >= theme.breakpoints.values.md) {
@@ -71,12 +141,14 @@ const CreateRestaurant = () => {
   };
 
   return (
-    <Box sx={{
-      display: 'flex',
-      height: '100vh',
-      backgroundColor: '#F6F6F6',
-      overflow: 'hidden',
-    }}>
+    <Box
+      sx={{
+        display: 'flex',
+        height: '100vh',
+        backgroundColor: '#F6F6F6',
+        overflow: 'hidden',
+      }}
+    >
       <Sidebar
         open={sidebarOpen}
         onClose={handleDrawerToggle}
@@ -84,82 +156,102 @@ const CreateRestaurant = () => {
         drawerWidth={drawerWidth}
       />
 
-      <Box sx={{
-        flexGrow: 1,
-        display: 'flex',
-        flexDirection: 'column',
-        width: { xs: '100%', sm: '100%', md: '100%' },
-        marginLeft: { xs: 0, sm: sidebarOpen ? `${drawerWidth}px` : 0, md: 0 },
-        transition: theme.transitions.create(['width'], {
-          easing: theme.transitions.easing.sharp,
-          duration: theme.transitions.duration.leavingScreen,
-        }),
-      }}>
+      <Box
+        sx={{
+          flexGrow: 1,
+          display: 'flex',
+          flexDirection: 'column',
+          width: { xs: '100%', sm: '100%', md: '100%' },
+          marginLeft: { xs: 0, sm: sidebarOpen ? `${drawerWidth}px` : 0, md: 0 },
+          transition: theme.transitions.create(['width'], {
+            easing: theme.transitions.easing.sharp,
+            duration: theme.transitions.duration.leavingScreen,
+          }),
+        }}
+      >
         <KitchPlusAppBar
           onDrawerToggle={handleDrawerToggle}
           sidebarOpen={sidebarOpen}
           isMobile={isMobile}
         />
         <Box>
-          <Box sx={{
-            display: 'flex', height: '100vh',
-
-          }}>
-            <Box sx={{
+          <Box
+            sx={{
+              display: 'flex',
               height: '100vh',
-              ml: 3,
-              mb: 2,
-              width: { md: '30%' },
-              display: { xs: 'none', sm: 'none', md: 'block' },
-              overflowY: 'auto',
-              scrollbarWidth: 'none',
-              '&::-webkit-scrollbar': {
-                display: 'none',
-              },
-            }}>
-
-              <Box sx={{
-                minHeight: '100%', pb: 15, pt: 3,
-
-              }}>
+            }}
+          >
+            <Box
+              sx={{
+                height: '100vh',
+                ml: 3,
+                mb: 2,
+                width: { md: '30%' },
+                display: { xs: 'none', sm: 'none', md: 'block' },
+                overflowY: 'auto',
+                scrollbarWidth: 'none',
+                '&::-webkit-scrollbar': {
+                  display: 'none',
+                },
+              }}
+            >
+              <Box
+                sx={{
+                  minHeight: '100%',
+                  pb: 15,
+                  pt: 3,
+                }}
+              >
                 <SideProfile
                   currentStepIndex={currentStep}
                   onBack={() => setCurrentStep(prev => Math.max(prev - 1, 0))}
                 />
-
-
               </Box>
             </Box>
 
-            <Box sx={{
-              ml: { xs: 2, md: 3 },
-
-              flexGrow: 1,
-              height: '100vh',
-              pr: { sm: 2, md: 1 },
-
-              pt: 3,
-              mb: { sm: 20 },
-              width: { md: '60%' }, display: { xs: 'block', sm: 'block', md: 'block' },
-              overflowY: 'auto',
-              scrollbarWidth: 'none',
-              '&::-webkit-scrollbar': {
-                display: 'none',
-              },
-            }}>
-              <Box sx={{
-                minHeight: '100%', pb: 18,
-
-              }}>
+            <Box
+              sx={{
+                ml: { xs: 2, md: 3 },
+                flexGrow: 1,
+                height: '100vh',
+                pr: { sm: 2, md: 1 },
+                pt: 3,
+                mb: { sm: 20 },
+                width: { md: '60%' },
+                display: { xs: 'block', sm: 'block', md: 'block' },
+                overflowY: 'auto',
+                scrollbarWidth: 'none',
+                '&::-webkit-scrollbar': {
+                  display: 'none',
+                },
+              }}
+            >
+              <Box
+                sx={{
+                  minHeight: '100%',
+                  pb: 18,
+                }}
+              >
                 {steps[currentStep]}
               </Box>
             </Box>
           </Box>
         </Box>
       </Box>
+
+
+      <Snackbar
+        open={snackbarOpen}
+        autoHideDuration={4000}
+        onClose={handleSnackbarClose}
+        anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
+      >
+        <Alert onClose={handleSnackbarClose} severity="success" sx={{ width: '100%' }}>
+          عملية إنشاء المطعم تمت بنجاح
+        </Alert>
+      </Snackbar>
     </Box>
   );
 };
 
-
-export default CreateRestaurant;
+export default CreateRestaurant;