feat(boutique): check order status before showing success message (#1988)

* feat(boutique): check order status before showing success message

* add extra info for error message

---------

Co-authored-by: Tymmmy <117268143+Tymmmy@users.noreply.github.com>

Author: dragosp1011

packages/boutique/backend/src/app.ts

@@ -79,6 +79,7 @@ export class App {
     router.post('/orders/setup-one-click', orderController.setup)
     router.post('/orders/setup-one-click/finish', orderController.setupFinish)
     router.patch('/orders/:id', orderController.finish)
+    router.get('/orders/:id', orderController.get)
 
     router.use('*', (req: Request, res: TypedResponse) => {
       const e = Error(`Requested path ${req.path} was not found.`)

packages/boutique/frontend/src/app/checkout/confirmation.tsx

@@ -10,6 +10,7 @@ import { useEffect } from 'react'
 import { Link, Navigate, useSearchParams } from 'react-router-dom'
 import { checkoutConfirmationSearchParamsSchema } from '../route-schemas.ts'
 import { Loader } from '@/components/loader.tsx'
+import { OrderStatus, useOrderQuery } from '@/hooks/use-order-query.ts'
 
 function InstantBuy() {
   return (
@@ -27,8 +28,8 @@ function CheckoutConfirmation() {
   const [{ orderId, hash, interact_ref, result }] = useZodSearchParams(
     checkoutConfirmationSearchParamsSchema
   )
-  const { mutate, data, error } = useFinishCheckoutMutation(orderId)
-
+  const { data: orderResponse } = useOrderQuery(orderId)
+  const { mutate, error } = useFinishCheckoutMutation(orderId)
   useEffect(() => {
     mutate({
       hash,
@@ -38,7 +39,13 @@ function CheckoutConfirmation() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
-  if (data) {
+  if (!orderResponse) {
+    return <Loader />
+  }
+
+  const order = orderResponse.result
+
+  if (order.status !== OrderStatus.PROCESSING) {
     let color: string = ' text-green dark:text-green-neon'
     let text: string = 'Thank you for your order!'
     let variant: VariantProps<typeof buttonVariants>['variant'] = 'default'
@@ -49,6 +56,12 @@ function CheckoutConfirmation() {
       variant = 'secondary'
     }
 
+    if (order.status === OrderStatus.FAILED) {
+      color = ' text-orange-dark dark:text-pink-neon'
+      text = 'Payment failed. Check funds and please try again.'
+      variant = 'secondary'
+    }
+
     return (
       <div
         className={cn(

packages/boutique/frontend/src/hooks/use-order-query.ts

@@ -0,0 +1,33 @@
+import { UseQueryResult, useQuery } from '@tanstack/react-query'
+import { fetcher, APIError } from '@/lib/fetcher.ts'
+import { SuccessResponse } from '@/lib/types.ts'
+
+export enum OrderStatus {
+  PROCESSING = 'PROCESSING',
+  FAILED = 'FAILED',
+  COMPLETED = 'COMPLETED',
+  REJECTED = 'REJECTED'
+}
+
+export interface Order {
+  id: string
+  status: OrderStatus
+}
+export function useOrderQuery(
+  id: string
+): UseQueryResult<SuccessResponse<Order>, APIError> {
+  return useQuery({
+    queryKey: ['orders', id],
+    queryFn: async function () {
+      return await fetcher('/orders/' + id, {
+        method: 'GET'
+      })
+    },
+    refetchInterval: (query) => {
+      return !query.state.data ||
+        query.state.data.result?.status === OrderStatus.PROCESSING
+        ? 2000
+        : undefined
+    }
+  })
+}