diff --git a/src/App.js b/src/App.js
index 86c1b33..cab3c8f 100644
--- 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() {
- }/>
+ }/>
}/>
}/>
}/>
@@ -70,11 +70,11 @@ function App() {
} />
} />
}/>
- } />
+
{/* */}
-
+
{/* */}
diff --git a/src/components/Home/Footer.js b/src/components/Home/Footer.js
index 0a0fa41..450b667 100644
--- 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 = () => {
+
+ {/* Download Section */}
+
+
+ دانلود اپلیکیشن مدوگرام
+
+
+
+
+
+ نسخه اندروید
+
+
+
+
+
+ نسخه وب اپلیکیشن
+
+
+
+
+
ارتباط با ما
diff --git a/src/components/Payment/TransactionComponent.js b/src/components/Payment/TransactionComponent.js
index f0d28d1..1c6181b 100644
--- a/src/components/Payment/TransactionComponent.js
+++ b/src/components/Payment/TransactionComponent.js
@@ -11,7 +11,11 @@ import {
Fade,
Grow,
Divider,
- useTheme
+ useTheme,
+ TextField,
+ Tooltip,
+ Zoom,
+ IconButton
} from '@mui/material';
import { styled } from '@mui/material/styles';
import { toast, ToastContainer } from 'react-toastify';
@@ -19,34 +23,55 @@ import 'react-toastify/dist/ReactToastify.css';
import CreditCardIcon from '@mui/icons-material/CreditCard';
import LockIcon from '@mui/icons-material/Lock';
import PaymentIcon from '@mui/icons-material/Payment';
+import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
+import SecurityIcon from '@mui/icons-material/Security';
const StyledPaper = styled(Paper)(({ theme }) => ({
padding: theme.spacing(4),
maxWidth: 450,
margin: '0 auto',
marginTop: theme.spacing(8),
- borderRadius: 16,
- boxShadow: '0 3px 5px 2px rgba(0, 0, 0, .1)',
- background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
+ borderRadius: 24,
+ boxShadow: '0 8px 32px rgba(0, 0, 0, 0.1)',
+ background: 'linear-gradient(135deg, #6B73FF 0%, #000DFF 100%)',
+ transition: 'transform 0.3s ease-in-out',
+ '&:hover': {
+ transform: 'translateY(-5px)',
+ },
}));
const ContentBox = styled(Box)(({ theme }) => ({
- background: 'rgba(255, 255, 255, 0.9)',
- borderRadius: 12,
- padding: theme.spacing(3),
+ background: 'rgba(255, 255, 255, 0.95)',
+ borderRadius: 20,
+ padding: theme.spacing(4),
+ boxShadow: 'inset 0 2px 10px rgba(0, 0, 0, 0.1)',
}));
const StyledButton = styled(Button)(({ theme }) => ({
- borderRadius: 25,
- padding: '10px 25px',
- fontSize: '1rem',
+ borderRadius: 30,
+ padding: '12px 30px',
+ fontSize: '1.1rem',
fontWeight: 'bold',
textTransform: 'none',
- boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
- transition: 'all 0.3s',
+ boxShadow: '0 4px 15px rgba(0, 0, 0, 0.2)',
+ transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
'&:hover': {
- transform: 'translateY(-2px)',
- boxShadow: '0 6px 10px 4px rgba(255, 105, 135, .3)',
+ transform: 'translateY(-3px) scale(1.02)',
+ boxShadow: '0 6px 20px rgba(0, 0, 0, 0.25)',
+ },
+}));
+
+const AmountButton = styled(Button)(({ theme }) => ({
+ margin: theme.spacing(0.7),
+ borderRadius: 20,
+ padding: '8px 20px',
+ transition: 'all 0.2s ease',
+ '&:hover': {
+ transform: 'scale(1.05)',
+ },
+ '&.Mui-selected': {
+ background: theme.palette.primary.main,
+ color: '#fff',
},
}));
@@ -54,60 +79,168 @@ const PaymentAmount = styled(Box)(({ theme }) => ({
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
- backgroundColor: theme.palette.primary.main,
- color: theme.palette.primary.contrastText,
- padding: theme.spacing(2),
- borderRadius: theme.shape.borderRadius,
+ backgroundColor: 'rgba(25, 118, 210, 0.08)',
+ color: theme.palette.primary.main,
+ padding: theme.spacing(3),
+ borderRadius: 16,
marginBottom: theme.spacing(3),
+ border: '2px solid rgba(25, 118, 210, 0.2)',
+ transition: 'all 0.3s ease',
+ '&:hover': {
+ backgroundColor: 'rgba(25, 118, 210, 0.12)',
+ transform: 'scale(1.02)',
+ },
+}));
+
+const StyledTextField = styled(TextField)(({ theme }) => ({
+ '& .MuiOutlinedInput-root': {
+ borderRadius: 12,
+ transition: 'all 0.2s',
+ '&:hover': {
+ backgroundColor: 'rgba(0, 0, 0, 0.02)',
+ },
+ '&.Mui-focused': {
+ backgroundColor: 'rgba(0, 0, 0, 0.03)',
+ },
+ },
+}));
+
+const SecurityBadge = styled(Box)(({ theme }) => ({
+ display: 'flex',
+ alignItems: 'center',
+ gap: theme.spacing(1),
+ padding: theme.spacing(1.5),
+ borderRadius: 12,
+ backgroundColor: 'rgba(76, 175, 80, 0.1)',
+ color: theme.palette.success.main,
+ marginTop: theme.spacing(2),
}));
const TransactionComponent = () => {
const { token, isVerified } = useContext(AuthContext);
const [loading, setLoading] = useState(false);
const [paymentUrl, setPaymentUrl] = useState(null);
+ const [amount, setAmount] = useState(300000);
+ const [amountError, setAmountError] = useState('');
const theme = useTheme();
+ const predefinedAmounts = [300000, 600000, 900000, 1200000];
+
+ const handleAmountChange = (event) => {
+ const value = parseInt(event.target.value);
+ if (isNaN(value)) {
+ setAmountError('لطفاً یک عدد معتبر وارد کنید');
+ return;
+ }
+ if (value < 100000) {
+ setAmountError('حداقل مبلغ ۱۰۰,۰۰۰ تومان است');
+ } else if (value > 5000000) {
+ setAmountError('حداکثر مبلغ ۵,۰۰۰,۰۰۰ تومان است');
+ } else {
+ setAmountError('');
+ }
+ setAmount(value);
+ setPaymentUrl(null);
+ };
+
+ const handlePresetAmountClick = (preset) => {
+ setAmount(preset);
+ setPaymentUrl(null);
+ setAmountError('');
+ };
+
const getPaymentLink = async () => {
- setLoading(true);
+ if (amountError) return;
+ setLoading(true);
try {
const config = {
- headers: {
- Authorization: `Bearer ${token}`,
- }
+ headers: { Authorization: `Bearer ${token}` }
};
-
- const response = await axios.post('https://api.medogram.ir/api/transaction/', {}, config);
+ const response = await axios.post('https://api.medogram.ir/api/transaction/', {
+ amount: amount
+ }, config);
setPaymentUrl(response.data.payment_url);
- toast.success('لینک پرداخت با موفقیت ایجاد شد!');
+ toast.success('لینک پرداخت با موفقیت ایجاد شد!', {
+ position: "top-center",
+ autoClose: 3000
+ });
} catch (err) {
- const errorMessage = err.response ? err.response.data.error : 'خطایی در دریافت لینک پرداخت رخ داده است.';
+ const errorMessage = err.response?.data.error || 'خطایی در دریافت لینک پرداخت رخ داده است.';
toast.error(errorMessage);
} finally {
setLoading(false);
}
};
+ const formatAmount = (value) => {
+ return new Intl.NumberFormat('fa-IR').format(value);
+ };
+
return (
-
- تراکنش امن
-
+
+
+
+ پرداخت امن
+
+
+
+
+
+ مبلغ مورد نظر را انتخاب کنید
+
+
+ {predefinedAmounts.map((preset) => (
+
+ handlePresetAmountClick(preset)}
+ className={amount === preset ? 'Mui-selected' : ''}
+ >
+ {formatAmount(preset)} تومان
+
+
+ ))}
+
+
+
+
+
+
+ ),
+ }}
+ />
+
+
-
-
- مبلغ قابل پرداخت: ۳۰,۰۰۰ تومان
+
+
+ مبلغ قابل پرداخت: {formatAmount(amount)} تومان
-
+
+
+
{isVerified ? (
{loading ? (
-
+
) : (
!paymentUrl ? (
{
color="primary"
onClick={getPaymentLink}
fullWidth
+ disabled={Boolean(amountError)}
startIcon={}
>
دریافت لینک پرداخت
@@ -129,39 +263,45 @@ const TransactionComponent = () => {
fullWidth
startIcon={}
>
- ادامه به پرداخت
+ ادامه به درگاه پرداخت
)
)}
-
- تراکنش شما توسط سیستم امن ما محافظت میشود.
-
+
+
+
+
+ تراکنش شما با پروتکل (اس اس ال) محافظت میشود
+
+
) : (
-
-
+
+
تایید حساب الزامی است
-
- لطفا حساب خود را تایید کنید تا بتوانید ادامه دهید.
+
+ لطفا برای ادامه، حساب کاربری خود را تایید کنید.
)}
+
);