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

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