From e05100022244448e474ce245ae296623d5063a34 Mon Sep 17 00:00:00 2001 From: haiibarose Date: Fri, 22 Mar 2024 09:42:22 +0700 Subject: [PATCH 1/2] finish payment successful popup --- src/frontend/public/images/Checkmark.png | Bin 0 -> 7726 bytes .../src/components/Popup/PaymentSuccess.tsx | 58 ++++++++++++++++++ 2 files changed, 58 insertions(+) create mode 100644 src/frontend/public/images/Checkmark.png create mode 100644 src/frontend/src/components/Popup/PaymentSuccess.tsx diff --git a/src/frontend/public/images/Checkmark.png b/src/frontend/public/images/Checkmark.png new file mode 100644 index 0000000000000000000000000000000000000000..6a5a7249984c0c2dea4a1015d3ecfe3035621572 GIT binary patch literal 7726 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 literal 0 HcmV?d00001 diff --git a/src/frontend/src/components/Popup/PaymentSuccess.tsx b/src/frontend/src/components/Popup/PaymentSuccess.tsx new file mode 100644 index 00000000..87c8ea9e --- /dev/null +++ b/src/frontend/src/components/Popup/PaymentSuccess.tsx @@ -0,0 +1,58 @@ +import React from 'react'; +import Image from 'next/image'; +import checkmarkImage from '../../../public/images/Checkmark.png'; + +const PaymentSuccessful: React.FC = () => { + return ( +
+
+
+ Checkmark +
+

Payment Successful

+
+
+ ); +}; + +const styles = { + overlay: { + position: 'fixed' as const, + top: 0, + left: 0, + right: 0, + bottom: 0, + backgroundColor: 'rgba(0, 0, 0, 0.4)', + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + zIndex: 1000, + }, + modal: { + backgroundColor: 'white', + padding: '20px', + borderRadius: '10px', + textAlign: 'center' as const, + maxWidth: '300px', + }, + checkIconContainer: { + position: 'relative' as const, + width: '30vw', + height: '30vw', + maxWidth: '120px', + maxHeight: '120px', + margin: '0 auto 20px', + }, + successMessage: { + margin: '20px 0', + fontSize: '24px', + color: '#000000', + }, +}; + +export default PaymentSuccessful; \ No newline at end of file From c25eb459d7847b4519eeabd43a33b7b4c5952af6 Mon Sep 17 00:00:00 2001 From: haiibarose Date: Wed, 27 Mar 2024 20:35:10 +0700 Subject: [PATCH 2/2] finish payment successful popup --- .../src/components/Popup/PaymentSuccess.tsx | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/src/frontend/src/components/Popup/PaymentSuccess.tsx b/src/frontend/src/components/Popup/PaymentSuccess.tsx index b8b662ff..436ce529 100644 --- a/src/frontend/src/components/Popup/PaymentSuccess.tsx +++ b/src/frontend/src/components/Popup/PaymentSuccess.tsx @@ -1,8 +1,21 @@ -import React from 'react'; +import React, { useEffect } from 'react'; +import { useModal } from "@/context/ModalContext"; +import userService from '@/services/user'; +import { useErrorModal } from '@/hooks/useErrorModal'; import Image from 'next/image'; import checkmarkImage from '../../../public/images/Checkmark.png'; const PaymentSuccessful: React.FC = () => { + const { closeModal } = useModal(); + + useEffect(() => { + const timer = setTimeout(() => { + closeModal(); + }, 3000); + + return () => clearTimeout(timer); + }, [closeModal]); + return (