change date-picker & add page login-verify & account & new user & payment
This commit is contained in:
Ehsan
@@ -0,0 +1,17 @@
|
||||
function Content({ isConfirmed, children, title }) {
|
||||
return (
|
||||
<div className='flex w-full flex-col items-start justify-start gap-[16px]'>
|
||||
<div className='flex min-h-[32px] items-center justify-start gap-[4px]'>
|
||||
<p className="text-[#525252] text-[14px] font-medium">{title}</p>
|
||||
{isConfirmed && (
|
||||
<p
|
||||
className='py-[2px] px-[5px] leading-[28px] bg-[#05BA58] rounded-[40px] text-[#FFF] text-[12px] font-normal'
|
||||
>تایید شده</p>
|
||||
)}
|
||||
</div>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Content
|
||||
@@ -0,0 +1,42 @@
|
||||
import EditOrangeA from "@/components/icons/EditOrangeA"
|
||||
import { Button, TextField } from "@mui/material"
|
||||
|
||||
function EditField({ changeData, data, name }) {
|
||||
return (
|
||||
<div className="relative w-full">
|
||||
<TextField
|
||||
value={data.value}
|
||||
disabled={!data.isEdit}
|
||||
type='text'
|
||||
className="!bg-[#FFF] !w-full"
|
||||
onChange={e => {
|
||||
changeData(e.target.value, 'value', name)
|
||||
}}
|
||||
sx={{
|
||||
'& .MuiFormLabel-root': {
|
||||
top: '-4px !important'
|
||||
},
|
||||
'& .MuiInputBase-input': { padding: '12.5px 14px' },
|
||||
'& .MuiInputBase-root': { borderRadius: '6px !important' },
|
||||
'& .MuiOutlinedInput-notchedOutline': { border: '1px solid #E9ECEF !important' },
|
||||
".Mui-focused": {
|
||||
'& .MuiOutlinedInput-notchedOutline': {
|
||||
border: '1px solid #5559CE !important',
|
||||
transition: '0.5s all'
|
||||
}
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<Button
|
||||
className="!absolute !left-[8px] !top-1/2 !-translate-y-1/2 !min-w-fit !p-1"
|
||||
onClick={() => {
|
||||
changeData(!data.isEdit, 'isEdit', name)
|
||||
}}
|
||||
>
|
||||
<EditOrangeA />
|
||||
</Button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default EditField
|
||||
@@ -0,0 +1,35 @@
|
||||
import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect";
|
||||
import EditField from "./EditField";
|
||||
import Content from "./Content";
|
||||
|
||||
const bime = [
|
||||
{ label: 'بیمه 1', id: 10 },
|
||||
{ label: 'بیمه 2', id: 20 },
|
||||
{ label: 'بیمه 3', id: 30 }
|
||||
];
|
||||
|
||||
function Form({ changeData, data, updateSelect, isForAnother }) {
|
||||
return (
|
||||
<div className="grid mt-[20px] items-start justify-center gap-x-[24px] gap-y-[16px] grid-cols-2">
|
||||
<Content title='شماره موبایل' isConfirmed={isForAnother ? false : true}>
|
||||
<EditField changeData={changeData} data={data.phone} name='phone' />
|
||||
</Content>
|
||||
<Content title='کد ملی'>
|
||||
<EditField changeData={changeData} data={data.codemeli} name='codemeli' />
|
||||
</Content>
|
||||
<Content title='نام و نام خانوادگی'>
|
||||
<EditField changeData={changeData} data={data.name} name='name' />
|
||||
</Content>
|
||||
<Content title='نوع بیمه'>
|
||||
<AutoCompleteSelect
|
||||
updateData={updateSelect}
|
||||
label='نوع بیمه'
|
||||
name='first'
|
||||
list={bime}
|
||||
/>
|
||||
</Content>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Form
|
||||
@@ -0,0 +1,72 @@
|
||||
import { useState } from "react";
|
||||
import Form from "./Form";
|
||||
import { Button } from "@mui/material";
|
||||
import AddCircleBlueA from "@/components/icons/AddCircleBlueA";
|
||||
import ArrowLeftB from "@/components/icons/ArrowLeftB";
|
||||
|
||||
function Detail({ isForAnother, setIsForAnother, setIsPay }) {
|
||||
|
||||
|
||||
const [selected, setSelected] = useState({
|
||||
first: '',
|
||||
second: ''
|
||||
});
|
||||
const [data, setData] = useState({
|
||||
phone: { value: '09121056987', isEdit: false },
|
||||
codemeli: { value: '1741025645', isEdit: false },
|
||||
name: { value: 'ساغر صابری نژاد', isEdit: false }
|
||||
});
|
||||
|
||||
const changeData = (value, type, name) =>
|
||||
setData({
|
||||
...data,
|
||||
[name]: {
|
||||
...data[name],
|
||||
[type]: value
|
||||
}
|
||||
});
|
||||
|
||||
const updateSelect = (event, name) => setSelected({ ...selected, [name]: event.target.innerText })
|
||||
|
||||
return (
|
||||
<>
|
||||
<p className="text-[#3B3B3B] text-[20px] font-bold">
|
||||
{isForAnother ? 'اطلاعات کاربر جدید' : 'اطلاعات حساب کاربری'}
|
||||
</p>
|
||||
<Form
|
||||
isForAnother={isForAnother}
|
||||
updateSelect={updateSelect}
|
||||
changeData={changeData}
|
||||
data={data}
|
||||
/>
|
||||
{!isForAnother && (
|
||||
<Button
|
||||
className="!flex !items-center !justify-start !gap-[8px] !mt-[24px] !p-1"
|
||||
onClick={() => {
|
||||
setIsForAnother(true);
|
||||
setData({
|
||||
phone: { value: '09121056987', isEdit: false },
|
||||
codemeli: { value: '1741025645', isEdit: false },
|
||||
name: { value: 'ساغر صابری نژاد', isEdit: false }
|
||||
});
|
||||
}}
|
||||
>
|
||||
<AddCircleBlueA />
|
||||
<p className="text-[#5559CE] text-[16px] font-medium">دریافت نوبت برای فرد دیگر </p>
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
className={`
|
||||
!gap-[4px] !mr-auto !flex !px-[12px] !py-[8px] !min-w-[150px]
|
||||
${isForAnother ? '!mt-[94px]' : '!mt-[32px]'}`}
|
||||
variant="contained"
|
||||
onClick={() => setIsPay(true)}
|
||||
>
|
||||
<p className="text-[#EFEFEF] text-[16px] font-medium">ثبت اطلاعات</p>
|
||||
<ArrowLeftB />
|
||||
</Button>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default Detail
|
||||
@@ -0,0 +1,27 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from "react";
|
||||
import Detail from "./detail";
|
||||
import Payment from "./payment";
|
||||
|
||||
function Information() {
|
||||
|
||||
const [isForAnother, setIsForAnother] = useState(false)
|
||||
|
||||
const [isPay, setIsPay] = useState(false);
|
||||
|
||||
return (
|
||||
<div className="w-[59%] p-[24px] bg-[#FFF] border border-solid border-[#EFEFEF] rounded-[8px]">
|
||||
{isPay ?
|
||||
<Payment /> :
|
||||
<Detail
|
||||
setIsPay={setIsPay}
|
||||
isForAnother={isForAnother}
|
||||
setIsForAnother={setIsForAnother}
|
||||
/>
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Information
|
||||
@@ -0,0 +1,7 @@
|
||||
function FailedPay() {
|
||||
return (
|
||||
<div>FailedPay</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default FailedPay
|
||||
@@ -0,0 +1,30 @@
|
||||
import ArrowLeftB from '@/components/icons/ArrowLeftB';
|
||||
import { Button } from '@mui/material';
|
||||
|
||||
function Paying({ setTypePay }) {
|
||||
return (
|
||||
<>
|
||||
<p className="text-[#3B3B3B] text-[20px] font-bold">
|
||||
اطلاعات پرداخت
|
||||
</p>
|
||||
<div className='flex justify-between items-center mt-[30px]'>
|
||||
<p className='text-[#616161] tet-[16px] font-medium'>مبلغ پیش پرداخت (بیعانه) : </p>
|
||||
<p className='text-[#525252] text-[16px] font-bold'>20،000 تومان</p>
|
||||
</div>
|
||||
<span className='bg-[#D7D7D7] h-px w-full mt-[32px] mb-[25px] block'></span>
|
||||
<div className='flex items-center justify-between'>
|
||||
<p className='text-[#3B3B3B] text-[16px] font-bold'>مبلغ قابل پرداخت : 20،000 تومان</p>
|
||||
<Button
|
||||
className='!gap-[4px] !mr-auto !flex !px-[12px] !py-[9px] !min-w-[157px]'
|
||||
onClick={() => setTypePay(true)}
|
||||
variant="contained"
|
||||
>
|
||||
<p className="text-[#EFEFEF] text-[16px] font-medium">پرداخت نهایی</p>
|
||||
<ArrowLeftB />
|
||||
</Button>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default Paying
|
||||
@@ -0,0 +1,7 @@
|
||||
function SuccessPay() {
|
||||
return (
|
||||
<div>SuccessPay</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default SuccessPay
|
||||
@@ -0,0 +1,22 @@
|
||||
import { useState } from "react";
|
||||
import SuccessPay from "./SuccessPay";
|
||||
import FailedPay from "./FailedPay";
|
||||
import Paying from "./Paying";
|
||||
|
||||
function Payment() {
|
||||
|
||||
const [typePay, setTypePay] = useState('default');
|
||||
|
||||
return (
|
||||
<>
|
||||
{typePay === 'default' ?
|
||||
<Paying setTypePay={setTypePay} /> :
|
||||
typePay === 'success' ?
|
||||
<SuccessPay /> :
|
||||
<FailedPay />
|
||||
}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default Payment
|
||||
Reference in New Issue
Block a user