47 lines
1.5 KiB
JavaScript
47 lines
1.5 KiB
JavaScript
import { useState } from "react";
|
|
import Payment from "./payment";
|
|
import Detail from "./detail";
|
|
|
|
function Information({ typePay, setTypePay, setIsPay, isPay }) {
|
|
|
|
const [isForAnother, setIsForAnother] = useState(false);
|
|
const [fade, setFade] = useState(false);
|
|
|
|
const fadeElement = (func) => {
|
|
setFade(true);
|
|
|
|
const timeout = setTimeout(() => {
|
|
func()
|
|
setFade(false);
|
|
}, 1000);
|
|
|
|
return () => clearTimeout(timeout);
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className={`w-full lg:w-[59%] opacity-page bg-[#FFF] border border-solid border-[#EFEFEF]
|
|
rounded-[8px] p-[12px] sm:p-[16px] md:p-[20px] lg:p-[24px]
|
|
${typePay === 'success' || typePay === 'failed' ? 'bg-transparent border-transparent md:bg-[#FFF] md:border-[#EFEFEF]' : ''}`}
|
|
>
|
|
<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>
|
|
)
|
|
}
|
|
|
|
export default Information |