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

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}
+                    />
             }
         </>
     )