Merge branch 'develop' into release

src/hooks/payment.ts

@@ -0,0 +1,36 @@
+import axios from 'axios'
+import { useEffect, useState } from 'react'
+
+export const useFetchPayFormToken = (paymentNo?: string, cacheToken?: string | null | undefined) => {
+  const [result, setResult] = useState<any | null>(null)
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<Error | null>(null)
+
+  useEffect(() => {
+    if (!paymentNo || !cacheToken) return
+
+    const fetchPayFormToken = async () => {
+      setLoading(true)
+      try {
+        const response = await axios.get(
+          `${process.env.REACT_APP_API_BASE_ROOT}/payment/${paymentNo}/pay-form-token/${cacheToken}`,
+        )
+        if (response.data.code === 'SUCCESS') {
+          setResult({
+            token: response.data.result.payFormToken.toString(),
+          })
+        } else {
+          setError(new Error(response.data.message))
+        }
+      } catch (err) {
+        setError(err as Error)
+      } finally {
+        setLoading(false)
+      }
+    }
+
+    fetchPayFormToken()
+  }, [paymentNo, cacheToken])
+
+  return { result, loading, error }
+}

src/pages/PaymentPage.tsx

@@ -14,6 +14,8 @@ import AdminCard from '../components/common/AdminCard'
 import DefaultLayout from '../components/layout/DefaultLayout'
 import hasura from '../hasura'
 import { commonMessages } from '../helpers/translation'
+import { useFetchPayFormToken } from '../hooks/payment'
+import LoadingPage from './LoadingPage'
 
 const messages = defineMessages({
   bankCodeMessage: {
@@ -56,6 +58,7 @@ const PaymentPage: React.VFC = () => {
   const tracking = useTracking()
   const { paymentNo } = useParams<{ paymentNo: string }>()
   const [payToken] = useQueryParam('token', StringParam)
+  const [cacheToken] = useQueryParam('cacheToken', StringParam)
   const [method] = useQueryParam('method', StringParam)
   const { data: payment, loading } = useQuery<hasura.GetPaymentInfo, hasura.GetPaymentInfoVariables>(
     gql`
@@ -70,7 +73,19 @@ const PaymentPage: React.VFC = () => {
   )
   const [bankCode, setBankCode] = useState('')
 
-  const decodedToken = payToken && jwt.decode(payToken)
+  let decodedToken = payToken && jwt.decode(payToken)
+
+  const { result: payFormResult, loading: payFormLoading } = useFetchPayFormToken(paymentNo, cacheToken || '')
+
+  if (cacheToken) {
+    if (payFormLoading) {
+      return <LoadingPage />
+    }
+
+    if (payFormResult?.token) {
+      decodedToken = jwt.decode(payFormResult.token)
+    }
+  }
 
   if (decodedToken) {
     const payload = decodedToken as { gateway: string; method: string; payForm: { html?: string; url?: string } }