Update Footer and improve payment flow

Re-introduce and enhance Footer component; add a download section for app versions. Replace NotFound with Home route for undefined paths; improve styling and user interaction in TransactionComponent; introduce new features for dynamic amount input and selection in the payment flow.
mehran-shabani · Oct 27, 2024 · 1f5d176 · 1f5d176
1 parent b902938
commit 1f5d176
Show file tree

Hide file tree

Showing 3 changed files with 248 additions and 52 deletions.
diff --git a/src/App.js b/src/App.js
@@ -16,14 +16,14 @@ import TransactionComponent from './components/Payment/TransactionComponent';
 import PaymentRedirect from "./components/Payment/PaymentRedirect";
 import ProfilePage from "./components/Auth/ProfilePage";
 import '@fortawesome/fontawesome-free/css/all.min.css';
-//import Footer from "./components/Home/Footer";
-import BottomNavBar from "./components/appbar/SnackBar";
+import Footer from "./components/Home/Footer";
+//import BottomNavBar from "./components/appbar/SnackBar";
 import BlogPostPage from "./components/Blog/BlogPostPage";
 import { ThemeProvider } from '@mui/material/styles';
 import theme from './styles/theme';
 import logoImage from '../src/images/medogram-logo.png';
 import DiabetesPredict from "./components/predictions/DiabetPredict";
-import NotFound from './components/NotFound';
+//import NotFound from './components/NotFound';
 
 function App() {
     const [showSplash, setShowSplash] = useState(true);
@@ -57,7 +57,7 @@ function App() {
                             <ThemeProvider theme={theme}>
                                 <Navbar logo={logoImage} />
                                 <Routes>
-                                    <Route path="/" element={<Home/>}/>
+                                    <Route path="*" element={<Home/>}/>
                                     <Route path="/about" element={<About/>}/>
                                     <Route path="/contact" element={<Contact/>}/>
                                     <Route path="/login" element={<Login/>}/>
@@ -70,11 +70,11 @@ function App() {
                                     <Route path="/payment-redirect" element={<PaymentRedirect />} />
                                     <Route path="/blogs" element={<BlogPostPage />} />
                                     <Route path="/chat" element={<ChatPage/>}/>
-                                    <Route path="*" element={<NotFound />} />
+
                                 </Routes>
 
                                 {/* <Footer logo={logoImage} /> */}
-                                <BottomNavBar />
+                                <Footer logo={logoImage} />
                                 {/* <BottomNavBar /> */}
                             </ThemeProvider>
                         </>

diff --git a/src/components/Home/Footer.js b/src/components/Home/Footer.js
@@ -4,6 +4,8 @@ import TelegramIcon from '@mui/icons-material/Telegram';
 import InstagramIcon from '@mui/icons-material/Instagram';
 import PhoneIcon from '@mui/icons-material/Phone';
 import EmailIcon from '@mui/icons-material/Email';
+import AndroidIcon from '@mui/icons-material/Android';
+import WebIcon from '@mui/icons-material/Web';
 
 const Footer = () => {
     const theme = useTheme();
@@ -107,6 +109,60 @@ const Footer = () => {
                     </Box>
                 </Grid>
             </Grid>
+
+            {/* Download Section */}
+            <Box mt={6} textAlign="center">
+                <Typography variant="h6" sx={{ fontWeight: 'bold', color: '#0056b3', mb: 2 }}>
+                    دانلود اپلیکیشن مدوگرام
+                </Typography>
+                <Grid container spacing={2} justifyContent="center">
+                    <Grid item>
+                        <MuiLink
+                            href="https://api.medogram.ir/api/download-apk/"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            sx={{
+                                display: 'flex',
+                                alignItems: 'center',
+                                color: '#555',
+                                textDecoration: 'none',
+                                backgroundColor: '#e8f5e9',
+                                padding: '8px 16px',
+                                borderRadius: '8px',
+                                '&:hover': {
+                                    backgroundColor: '#c8e6c9'
+                                }
+                            }}
+                        >
+                            <AndroidIcon sx={{ mr: 1, color: '#43a047' }} />
+                            نسخه اندروید
+                        </MuiLink>
+                    </Grid>
+                    <Grid item>
+                        <MuiLink
+                            href="https://pwa.medogram.ir/"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            sx={{
+                                display: 'flex',
+                                alignItems: 'center',
+                                color: '#555',
+                                textDecoration: 'none',
+                                backgroundColor: '#e3f2fd',
+                                padding: '8px 16px',
+                                borderRadius: '8px',
+                                '&:hover': {
+                                    backgroundColor: '#bbdefb'
+                                }
+                            }}
+                        >
+                            <WebIcon sx={{ mr: 1, color: '#1976d2' }} />
+                            نسخه وب اپلیکیشن
+                        </MuiLink>
+                    </Grid>
+                </Grid>
+            </Box>
+
             <Box mt={6} textAlign="center">
                 <Typography variant="h6" sx={{ fontWeight: 'bold', color: '#0056b3', mb: 2 }}>
                     ارتباط با ما