fix: order code and i18n context

Author: imrim12

app/api/payment.ts

@@ -1,3 +1,5 @@
+import type { PaymentStatus } from '@base/server/db/schemas'
+
 export function useApiPayment() {
   function checkout(type: 'payos' | 'vnpay' | 'sepay', productIdentifier: string) {
     if (type !== 'payos' && type !== 'vnpay' && type !== 'sepay')
@@ -16,7 +18,20 @@ export function useApiPayment() {
     })
   }
 
+  function checkStatus(type: 'payos' | 'vnpay' | 'sepay', description: string) {
+    return $api<{
+      data: {
+        status: PaymentStatus
+      }
+    }>(`api/payments/${type}/status`, {
+      params: {
+        description,
+      },
+    })
+  }
+
   return {
     checkout,
+    checkStatus,
   }
 }

app/pages/checkout.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { parseQuery } from 'ufo'
+import { PaymentStatus } from '@base/server/db/schemas'
 
 definePageMeta({
   middleware(to) {
@@ -29,9 +30,30 @@ const checkoutInfo = computed(() => {
   return query
 })
 
-function handleCheckStatus() {
-  //
-}
+const paymentApi = useApiPayment()
+
+const { data, error, execute: handleCheckStatus } = useAsyncData(
+  'checkoutInfo',
+  () => paymentApi.checkStatus('sepay', String(checkoutInfo.value.des)),
+  { server: false, immediate: false },
+)
+
+whenever(error, (err) => {
+  notifyError({
+    content: getErrorMessage(err),
+  })
+})
+
+whenever(data, (response) => {
+  if (response?.data?.status === PaymentStatus.RESOLVED) {
+    navigateTo({ name: 'app' })
+  }
+  else {
+    notifyError({
+      content: 'We have not received your payment yet. Please try again later, or contact support if the issue persists.',
+    })
+  }
+})
 </script>
 
 <template>
@@ -61,12 +83,12 @@ function handleCheckStatus() {
               <span class="text-lg font-medium text-gray-500 dark:text-gray-400">{{ $t('Bank Name') }}</span>
               <span class="text-lg font-semibold text-gray-900 dark:text-white">{{ checkoutInfo.bank }}</span>
             </div>
-            <UDivider />
+
             <div class="flex justify-between items-center">
               <span class="text-lg font-medium text-gray-500 dark:text-gray-400">{{ $t('Amount') }}</span>
               <span class="text-xl font-bold text-primary-500 dark:text-primary-400">{{ checkoutInfo.amount }}</span>
             </div>
-            <UDivider />
+
             <div class="flex justify-between items-start">
               <span class="text-lg font-medium text-gray-500 dark:text-gray-400">{{ $t('Description') }}</span>
               <span class="text-lg text-gray-700 dark:text-gray-300 text-right">{{ checkoutInfo.des }}</span>
@@ -80,7 +102,7 @@ function handleCheckStatus() {
             <div>
               <UButton
                 class="w-full font-semibold mt-4" size="xl"
-                @click="handleCheckStatus"
+                @click="handleCheckStatus()"
               >
                 {{ $t('I have transfered the money! (Click here)') }}
               </UButton>

app/pages/pricing.vue

@@ -94,10 +94,15 @@ tryOnBeforeMount(async () => {
     const isProcessing = Boolean(pendingPaymentPrice.value)
 
     if (isProcessing) {
-      const { data: checkoutData } = await paymentApi.checkout('payos', pendingPaymentPrice.value)
+      const { data: checkoutData } = await paymentApi.checkout('sepay', pendingPaymentPrice.value)
       pendingPaymentPrice.value = null
 
-      window.open(checkoutData.paymentUrl, '_blank')
+      navigateTo({
+        name: 'checkout',
+        query: {
+          qr: checkoutData.paymentUrl,
+        },
+      })
     }
   }
 })

app/utils/api.ts

@@ -14,7 +14,7 @@ export const $api = $fetch.create({
       options.headers.set('Csrf-Token', authStore.crsfToken)
   },
   async onResponseError(error) {
-    const { t } = useI18n()
+    const { t } = useSafeI18n()
 
     const isRequestFromExternalUrl = !String(error.response.url).startsWith(String(useRuntimeConfig().public.appBaseUrl))
     switch (error.response?.status) {

app/utils/i18n.ts

@@ -0,0 +1,18 @@
+export function useSafeI18n() {
+  const nuxtApp = useNuxtApp()
+
+  if (nuxtApp.$i18n) {
+    return nuxtApp.$i18n
+  }
+  else {
+    // mock useI18n
+    return {
+      t: (key: string) => key,
+      locale: 'en',
+      availableLocales: ['en'],
+      setLocale: (locale: string) => {
+        console.warn(`Setting locale to ${locale} is not supported in this mock implementation.`)
+      },
+    }
+  }
+}

app/utils/notification.ts

@@ -2,7 +2,7 @@ interface NotificationOptions {
   content: string
 }
 export function notifyError(options: NotificationOptions) {
-  const { t } = useI18n()
+  const { t } = useSafeI18n()
   const toast = useToast()
 
   toast.add({
@@ -13,7 +13,7 @@ export function notifyError(options: NotificationOptions) {
 }
 
 export function notifySuccess(options: NotificationOptions) {
-  const { t } = useI18n()
+  const { t } = useSafeI18n()
   const toast = useToast()
 
   toast.add({
@@ -24,7 +24,7 @@ export function notifySuccess(options: NotificationOptions) {
 }
 
 export function notifyWarning(options: NotificationOptions) {
-  const { t } = useI18n()
+  const { t } = useSafeI18n()
   const toast = useToast()
 
   toast.add({
@@ -35,7 +35,7 @@ export function notifyWarning(options: NotificationOptions) {
 }
 
 export function notifyInfo(options: NotificationOptions) {
-  const { t } = useI18n()
+  const { t } = useSafeI18n()
   const toast = useToast()
 
   toast.add({

i18n/en.json

@@ -225,5 +225,11 @@
   "Error": "Error",
   "Success": "Success",
   "Warning": "Warning",
-  "Infor": "Infor"
+  "Infor": "Infor",
+  "Payment Summary": "Payment Summary",
+  "Bank Name": "Bank Name",
+  "Amount": "Amount",
+  "Description": "Description",
+  "Please verify the details before proceeding with the payment.": "Please verify the details before proceeding with the payment.",
+  "I have transfered the money! (Click here)": "I have transfered the money! (Click here)"
 }

i18n/vi.json

@@ -225,5 +225,11 @@
   "Error": "Lỗi",
   "Success": "Thành công",
   "Warning": "Cảnh báo",
-  "Infor": "Thông tin"
+  "Infor": "Thông tin",
+  "Payment Summary": "Thông tin thanh toán",
+  "Bank Name": "Ngân hàng",
+  "Amount": "Số tiền",
+  "Description": "Mô tả",
+  "Please verify the details before proceeding with the payment.": "Vui lòng xác minh thông tin trước khi tiếp tục thanh toán.",
+  "I have transfered the money! (Click here)": "Tôi đã chuyển tiền! (Nhấp vào đây)"
 }

server/api/payments/sepay/status.get.ts

@@ -0,0 +1,41 @@
+import { z } from 'zod'
+
+import { PaymentStatus } from '@base/server/db/schemas'
+
+export default defineEventHandler(async (event) => {
+  try {
+    await defineEventOptions(event, { auth: true })
+
+    // description must be in format: uuid.uuid
+
+    const { description } = await getValidatedQuery(
+      event,
+      query => z.object({
+        description: z.string().min(1, 'Payment description must be in the correct format!'),
+      })
+        .refine((query) => {
+          const [part1, part2] = query.description.split('.')
+
+          return isUUID(part1) && isUUID(part2)
+        }, { message: 'Payment description must be in the correct format!' })
+        .parse(query),
+    )
+
+    const [orderCode] = description.split('.')
+
+    const { getProviderTransactionByOrderCode } = usePayment()
+
+    const paymentTransactionOfProvider = await getProviderTransactionByOrderCode(String(orderCode))
+
+    return {
+      data: {
+        status: paymentTransactionOfProvider?.provider_transaction_status || PaymentStatus.PENDING,
+      },
+    }
+  }
+  catch (error: any) {
+    logger.error('[Payment API] Error creating SePay checkout URL:', error)
+
+    throw parseError(error)
+  }
+})

server/composables/usePayment.ts

@@ -34,15 +34,15 @@ export function usePayment() {
   async function createProviderTransaction(
     paymentId: string,
     userId: string,
-    orderCode: number,
+    orderCode: string,
     provider: string,
     productType: string,
     productInfo: Record<string, any>,
   ): Promise<PaymentProviderTransaction> {
     return (
       await db.insert(paymentProviderTransactionTable).values({
         provider,
-        provider_transaction_id: String(orderCode),
+        provider_transaction_id: orderCode,
         provider_transaction_status: PaymentStatus.PENDING,
         provider_transaction_info: `${productType}:${productInfo.amount}`,
         payment_id: paymentId,