change date-picker & add page login-verify & account & new user & payment

2024-08-26 20:04:33 +03:30
parent 31ed32fc21
commit 7925493681
34 changed files with 564 additions and 60 deletions
@@ -0,0 +1,64 @@
+import ArrowLeftOrangeA from "@/components/icons/ArrowLeftOrangeA"
+import CalendarA from "@/components/icons/CalendarA"
+import ClockA from "@/components/icons/ClockA"
+import LocationA from "@/components/icons/LocationA"
+import TickCircleOrange from "@/components/icons/TickCircleOrange"
+import { Button } from "@mui/material"
+
+function Detail({ doctor }) {
+    return (
+        <div className="mt-[8px]">
+            <ul className="flex flex-col items-start justify-start gap-[24px]">
+                <li className="flex items-center justify-start gap-[4px]">
+                    <LocationA />
+                    <p className="text-[#616161] text-[16px] font-normal">آدرس: {doctor.location}</p>
+                </li>
+                <li className="flex items-center justify-between w-full">
+                    <div className="flex items-center justify-start gap-[4px]">
+                        <CalendarA />
+                        <div className="flex items-center justify-start">
+                            <p className="text-[#616161] text-[16px] font-medium">تاریخ نوبت: </p>
+                            <p className="text-[#2F2F2F] text-[16px] font-medium mr-1">13 خرداد 1403</p>
+                        </div>
+                    </div>
+                    <Button
+                        className="!p-1 !flex !items-center !justify-end !gap-[2px]"
+                        variant="text"
+                    >
+                        <p className="!text-[#F17732] !text-[14px] !font-normal">تغییر </p>
+                        <ArrowLeftOrangeA />
+                    </Button>
+                </li>
+                <li className="flex items-center justify-between w-full">
+                    <div className="flex items-center justify-start gap-[4px]">
+                        <ClockA />
+                        <div className="flex items-center justify-start">
+                            <p className="text-[#616161] text-[16px] font-medium">زمان نوبت: </p>
+                            <p className="text-[#2F2F2F] text-[16px] font-medium mr-1">ساعت 17:20</p>
+                        </div>
+                    </div>
+                    <Button
+                        className="!p-1 !flex !items-center !justify-end !gap-[2px]"
+                        variant="text"
+                    >
+                        <p className="!text-[#F17732] !text-[14px] !font-normal">تغییر </p>
+                        <ArrowLeftOrangeA />
+                    </Button>
+                </li>
+            </ul>
+            <span className="mt-[28px] mb-[24px] w-full h-px bg-[#D7D7D7] block"></span>
+            <ul className="flex flex-col items-start justify-start gap-[24px]">
+                <li className="flex items-center justify-start gap-[8px]">
+                    <TickCircleOrange />
+                    <p className="text-[#616161] text-[16px] font-normal">فقط در صورت لغو نوبت تا 5 ساعت قبل از زمان ویزیت، امکان استرداد وجه ممکن می باشد.</p>
+                </li>
+                <li className="flex items-center justify-start gap-[8px]">
+                    <TickCircleOrange />
+                    <p className="text-[#616161] text-[16px] font-normal">لطفا به موقع در مطب حضور داشته باشید.</p>
+                </li>
+            </ul>
+        </div>
+    )
+}
+
+export default Detail
@@ -0,0 +1,20 @@
+import Image from "next/image"
+
+function Head({ doctor }) {
+    return (
+        <div className="flex items-center justify-start gap-[16px] my-[24px]">
+            <Image
+                alt="profile doctor"
+                src={doctor.img}
+                height={95}
+                width={95}
+            />
+            <div className="flex flex-col items-start justify-center gap-[20px]">
+                <p className="text-[#3B3B3B] text-[20px] font-medium">{doctor.name}</p>
+                <p className="text-[#616161] text-[16px] font-medium">تخصص: {doctor.expertise}</p>
+            </div>
+        </div>
+    )
+}
+
+export default Head
@@ -0,0 +1,14 @@
+import Detail from "./Detail"
+import Head from "./Head"
+
+function DetailDoctor({ doctor }) {
+    return (
+        <div className="p-[24px] w-[41%] rounded-[8px] border border-solid border-[#EFEFEF] bg-[#FFF]">
+            <p className="text-[#3B3B3B] text-[20px] font-bold">جزئیات نوبت</p>
+            <Head doctor={doctor} />
+            <Detail doctor={doctor} />
+        </div>
+    )
+}
+
+export default DetailDoctor
@@ -0,0 +1,17 @@
+import DetailDoctor from "./detailDoctor"
+import Information from "./information";
+
+function AccountPage({ doctor }) {
+    return (
+        <div
+            className="padding-responsive pt-[calc(12px_+_75px_+_32px)] sm:pt-[calc(21px_+_75px_+_45px)] 
+            md:pt-[calc(30px_+_75px_+_58px)] lg:pt-[calc(40px_+_75px_+_78px)]
+            flex items-start gap-[24px]"
+        >
+            <DetailDoctor doctor={doctor} />
+            <Information />
+        </div>
+    )
+}
+
+export default AccountPage
@@ -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