update design page doctor item & design page account & success and failed pay

components/account/information/detail/index.js

@@ -4,8 +4,7 @@ import { Button } from "@mui/material";
 import AddCircleBlueA from "@/components/icons/AddCircleBlueA";
 import ArrowLeftB from "@/components/icons/ArrowLeftB";
 
-function Detail({ isForAnother, setIsForAnother, setIsPay }) {
-
+function Detail({ isForAnother, setIsForAnother, fadeElement, setIsPay }) {
 
     const [selected, setSelected] = useState({
         first: '',
@@ -43,7 +42,7 @@ function Detail({ isForAnother, setIsForAnother, setIsPay }) {
                 <Button
                     className="!flex !items-center !justify-start !gap-[8px] !mt-[24px] !p-1"
                     onClick={() => {
-                        setIsForAnother(true);
+                        fadeElement(() => setIsForAnother(true))
                         setData({
                             phone: { value: '09121056987', isEdit: false },
                             codemeli: { value: '1741025645', isEdit: false },
@@ -60,7 +59,7 @@ function Detail({ isForAnother, setIsForAnother, setIsPay }) {
                     !gap-[4px] !mr-auto !flex !px-[12px] !py-[8px] !min-w-[150px] 
                     ${isForAnother ? '!mt-[94px]' : '!mt-[32px]'}`}
                 variant="contained"
-                onClick={() => setIsPay(true)}
+                onClick={() => fadeElement(() => setIsPay(true))}
             >
                 <p className="text-[#EFEFEF] text-[16px] font-medium">ثبت اطلاعات</p>
                 <ArrowLeftB />

components/account/information/index.js

@@ -7,19 +7,42 @@ import Payment from "./payment";
 function Information() {
 
     const [isForAnother, setIsForAnother] = useState(false)
+    const [typePay, setTypePay] = useState('success');
+    const [isPay, setIsPay] = useState(true);
+    const [fade, setFade] = useState(false);
 
-    const [isPay, setIsPay] = useState(false);
+    const fadeElement = (func) => {
+        setFade(true);
+
+        const timeout = setTimeout(() => {
+            func()
+            setFade(false);
+        }, 1000);
+
+        return () => clearTimeout(timeout);
+    }
 
     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
+            className={`w-[59%] opacity-page p-[24px] bg-[#FFF] border border-solid border-[#EFEFEF] rounded-[8px]
+            `}
+        >
+            <div className={`transition-opacity !duration-300 ease-in ${fade ? '!opacity-0' : '!opacity-100'}`}>
+                {isPay ?
+                    <Payment
+                        typePay={typePay}
+                        setIsPay={setIsPay}
+                        setTypePay={setTypePay}
+                        fadeElement={fadeElement}
+                    /> :
+                    <Detail
+                        setIsPay={setIsPay}
+                        fadeElement={fadeElement}
+                        isForAnother={isForAnother}
+                        setIsForAnother={setIsForAnother}
+                    />
+                }
+            </div>
         </div>
     )
 }

components/account/information/payment/FailedPay.js

@@ -1,6 +1,34 @@
-function FailedPay() {
+import InfoCircleRedA from "@/components/icons/InfoCircleRedA"
+import RedoA from "@/components/icons/RedoA"
+import RefreshA from "@/components/icons/RefreshA"
+import { Button } from "@mui/material"
+
+function FailedPay({ setTypePay, setIsPay, fadeElement }) {
     return (
-        <div>FailedPay</div>
+        <div className="mt-[7px]">
+            <div className="flex flex-col justify-center items-center gap-[14px]">
+                <InfoCircleRedA />
+                <p className="text-[#D32F2F] text-[20px] font-bold">پرداخت شما انجام نشد.</p>
+            </div>
+            <div className="flex mt-[24px] items-center justify-center gap-[24px]">
+                <Button
+                    variant="outlined"
+                    onClick={() => fadeElement(() => setIsPay(false))}
+                    className="!flex !rounded-[8px] !items-center !p-2 !justify-center !gap-[4px]"
+                >
+                    <RedoA />
+                    <p className="text-[#5559CE] text-[16px] font-medium">صفحه اصلی</p>
+                </Button>
+                <Button
+                    variant="contained"
+                    onClick={() => fadeElement(() => setTypePay('default'))}
+                    className="!flex !rounded-[8px] !items-center !p-2 !justify-center !gap-[4px]"
+                >
+                    <RefreshA />
+                    <p className="text-[#FAFAFA] text-[16px] font-medium">تلاش دوباره</p>
+                </Button>
+            </div>
+        </div>
     )
 }
 

components/account/information/payment/Paying.js

@@ -1,7 +1,7 @@
 import ArrowLeftB from '@/components/icons/ArrowLeftB';
 import { Button } from '@mui/material';
 
-function Paying({ setTypePay }) {
+function Paying({ setTypePay, fadeElement }) {
     return (
         <>
             <p className="text-[#3B3B3B] text-[20px] font-bold">
@@ -16,7 +16,7 @@ function Paying({ setTypePay }) {
                 <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)}
+                    onClick={() => fadeElement(() => setTypePay('success'))}
                     variant="contained"
                 >
                     <p className="text-[#EFEFEF] text-[16px] font-medium">پرداخت نهایی</p>

components/account/information/payment/SuccessPay.js

@@ -1,6 +1,23 @@
+import ArrowLeftBlueA from "@/components/icons/ArrowLeftBlueA"
+import TickCircleGreenA from "@/components/icons/TickCircleGreenA"
+import { Button } from "@mui/material"
+
 function SuccessPay() {
     return (
-        <div>SuccessPay</div>
+        <div className="pt-[8px] pb-[4px] grid place-items-center">
+            <div className="flex flex-col justify-center items-center gap-[14px]">
+                <TickCircleGreenA />
+                <p className="text-[#3B3B3B] text-[20px] font-bold">پرداخت شما با موفقیت انجام شد.</p>
+            </div>
+            <p className="text-[#3B3B3B] text-[16px] font-normal mt-[32px] mb-[16px]">برای نمایش نوبت ها به قسمت نوبت های من بروید.  </p>
+            <Button
+                variant="text"
+                className="!flex !items-center !justify-center !gap-[4px]"
+            >
+                <p className="text-[16px] font-medium text-[#5559CE]">برو به نوبت های من</p>
+                <ArrowLeftBlueA />
+            </Button>
+        </div>
     )
 }
 

components/account/information/payment/index.js

@@ -1,19 +1,24 @@
 import { useState } from "react";
+
 import SuccessPay from "./SuccessPay";
 import FailedPay from "./FailedPay";
 import Paying from "./Paying";
 
-function Payment() {
-
-    const [typePay, setTypePay] = useState('default');
-
+function Payment({ setIsPay, fadeElement, typePay, setTypePay }) {
     return (
         <>
             {typePay === 'default' ?
-                <Paying setTypePay={setTypePay} /> :
+                <Paying
+                    setTypePay={setTypePay}
+                    fadeElement={fadeElement}
+                /> :
                 typePay === 'success' ?
                     <SuccessPay /> :
-                    <FailedPay />
+                    <FailedPay
+                        setIsPay={setIsPay}
+                        setTypePay={setTypePay}
+                        fadeElement={fadeElement}
+                    />
             }
         </>
     )