From 660ba8d301adb7a3fadf182a2206da52727120fa Mon Sep 17 00:00:00 2001
From: lytrankieio123 <lytran@kie.io>
Date: Wed, 29 Sep 2021 14:48:12 +0700
Subject: [PATCH] :art: styles: page verify customer account

:%s
---
 .../VerifyCustomerAccount.module.scss         | 11 ++++++
 .../VerifyCustomerAccount.tsx                 | 34 +++++++++++++++----
 2 files changed, 38 insertions(+), 7 deletions(-)

diff --git a/src/components/modules/verify-customer/VerifyCustomerAccount/VerifyCustomerAccount.module.scss b/src/components/modules/verify-customer/VerifyCustomerAccount/VerifyCustomerAccount.module.scss
index c0abfceda..64431e892 100644
--- a/src/components/modules/verify-customer/VerifyCustomerAccount/VerifyCustomerAccount.module.scss
+++ b/src/components/modules/verify-customer/VerifyCustomerAccount/VerifyCustomerAccount.module.scss
@@ -12,5 +12,16 @@
         .message {
             margin-bottom: 1.6rem;
         }
+        .bottom {
+            @apply flex justify-center items-center flex-col;
+            a {
+                margin-right: 1.6rem;
+                margin-bottom: 1.6rem;
+                width: 100%;
+            }
+            button {
+                @apply w-full;
+            }
+        }
     }
 }
diff --git a/src/components/modules/verify-customer/VerifyCustomerAccount/VerifyCustomerAccount.tsx b/src/components/modules/verify-customer/VerifyCustomerAccount/VerifyCustomerAccount.tsx
index 75caecb5b..e2c93db2e 100644
--- a/src/components/modules/verify-customer/VerifyCustomerAccount/VerifyCustomerAccount.tsx
+++ b/src/components/modules/verify-customer/VerifyCustomerAccount/VerifyCustomerAccount.tsx
@@ -2,15 +2,22 @@ import { useRouter } from 'next/router'
 import { useEffect, useState } from 'react'
 import { ButtonCommon } from 'src/components/common'
 import LoadingCommon from 'src/components/common/LoadingCommon/LoadingCommon'
-import { useVerifyCustomer } from 'src/components/hooks'
+import { useModalCommon, useVerifyCustomer } from 'src/components/hooks'
 import { ROUTE } from 'src/utils/constanst.utils'
 import s from './VerifyCustomerAccount.module.scss'
 import Link from 'next/link'
+import { LANGUAGE } from 'src/utils/language.utils'
+import ModalAuthenticate from 'src/components/common/ModalAuthenticate/ModalAuthenticate'
 
 export default function VerifyCustomerAccount() {
   const router = useRouter()
   const [isVerified, setIsVerified] = useState<boolean>(false)
   const { error, loading, verify } = useVerifyCustomer()
+  const {
+    visible: visibleModalAuthen,
+    closeModal: closeModalAuthen,
+    openModal: openModalAuthen,
+  } = useModalCommon({ initialValue: false })
 
   useEffect(() => {
     const token = router.query.token
@@ -37,14 +44,27 @@ export default function VerifyCustomerAccount() {
         </div>
       ) : (
         <div className={s.result}>
-          <div className={s.message}>Congratulation! Verified account successfully</div>
-          <Link href={ROUTE.HOME}>
-            <a href="">
-              <ButtonCommon>Back to home</ButtonCommon>
-            </a>
-          </Link>
+          <div className={s.message}>
+            Congratulation! Verified account successfully
+          </div>
+          <div className={s.bottom}>
+            <Link href={ROUTE.HOME}>
+              <a href="">
+                <ButtonCommon type="light">Back to home</ButtonCommon>
+              </a>
+            </Link>
+
+            <ButtonCommon onClick={openModalAuthen}>
+              {LANGUAGE.BUTTON_LABEL.SIGNIN}
+            </ButtonCommon>
+          </div>
         </div>
       )}
+
+      <ModalAuthenticate
+        visible={visibleModalAuthen}
+        closeModal={closeModalAuthen}
+      />
     </div>
   )
 }