From 74d76a17e2edffa96eb011d3017fcc332a2b49e8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=94=D0=B5=D0=BD=D0=B8=D1=81=20=D0=9A=D0=B0=D1=82=D0=B0?=
 =?UTF-8?q?=D0=B5=D0=B2?= <itkataev@gmail.com>
Date: Thu, 18 Apr 2024 21:54:57 +0000
Subject: [PATCH] AW-28-displayPaymentErrors

---
 src/api/errors.ts                                |  9 ++++++---
 src/api/utils.ts                                 |  4 ++--
 src/components/pages/SinglePaymentPage/index.tsx |  4 ++--
 src/hooks/payment/useSinglePayment.ts            | 13 ++++++++++++-
 4 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/src/api/errors.ts b/src/api/errors.ts
index d5a9427..1da7531 100644
--- a/src/api/errors.ts
+++ b/src/api/errors.ts
@@ -24,23 +24,26 @@ export interface SingleErrorResponse {
 
 export type ErrorResponse = ErrorListResponse | SingleErrorResponse
 
-export type ErrorPayload = {
+export type ErrorPayload<T = unknown> = {
   body: ErrorResponse
   statusCode: number
+  responseData?: T | null
 }
 
 export type MaybeError = ShortDomainError | FullDomainError | undefined
 
 export const buildUnknownError = (statusCode: number) => `Unknown Error occurred from Server with status code ${statusCode}`
 
-export class ApiError extends Error {
+export class ApiError<T = unknown> extends Error {
   readonly body: ErrorResponse
   readonly statusCode: number
-  constructor(payload: ErrorPayload) {
+  readonly responseData: T | null
+  constructor(payload: ErrorPayload<T>) {
     super('Caught an error while fetching the API Server endpoint...')
     this.name = 'ApiError'
     this.body = payload.body
     this.statusCode = payload.statusCode
+    this.responseData = payload?.responseData || null
   }
 }
 
diff --git a/src/api/utils.ts b/src/api/utils.ts
index 39f80a1..4c38e1a 100644
--- a/src/api/utils.ts
+++ b/src/api/utils.ts
@@ -17,11 +17,11 @@ export function createMethod<P, R>(createRequest: (payload: P) => Request) {
       const body = isErrorResponse<R>(data)
         ? data
         : { error: buildUnknownError(statusCode) };
-      throw new ApiError({ body, statusCode });
+      throw new ApiError<R | ErrorResponse>({ body, statusCode, responseData: data });
     }
 
     if (isErrorResponse<R>(data)) {
-      throw new ApiError({ body: data, statusCode });
+      throw new ApiError<R | ErrorResponse>({ body: data, statusCode, responseData: data });
     }
 
     return data;
diff --git a/src/components/pages/SinglePaymentPage/index.tsx b/src/components/pages/SinglePaymentPage/index.tsx
index 195b814..5081c52 100644
--- a/src/components/pages/SinglePaymentPage/index.tsx
+++ b/src/components/pages/SinglePaymentPage/index.tsx
@@ -68,7 +68,7 @@ function SinglePaymentPage({ productId, isForce = false }: ISinglePaymentPage) {
             />
           </>
         )}
-      {errorSinglePayment?.error && (
+      {errorSinglePayment?.error && !isLoadingSinglePayment && (
         <Title variant="h3" style={{ color: "red", margin: 0 }}>
           Something went wrong:{" "}
           {errorSinglePayment?.error?.length && errorSinglePayment?.error}
@@ -78,4 +78,4 @@ function SinglePaymentPage({ productId, isForce = false }: ISinglePaymentPage) {
   );
 }
 
-export default SinglePaymentPage;
\ No newline at end of file
+export default SinglePaymentPage;
diff --git a/src/hooks/payment/useSinglePayment.ts b/src/hooks/payment/useSinglePayment.ts
index 4cc3b80..df40126 100644
--- a/src/hooks/payment/useSinglePayment.ts
+++ b/src/hooks/payment/useSinglePayment.ts
@@ -1,4 +1,4 @@
-import { SinglePayment, useApi } from "@/api";
+import { ApiError, SinglePayment, useApi } from "@/api";
 import { User } from "@/api/resources/User";
 import { AuthToken } from "@/api/types";
 import { productUrls } from "@/data/products";
@@ -135,7 +135,18 @@ export const useSinglePayment = () => {
           },
           return_url: returnUrl,
         },
+      }).catch((error: ApiError<SinglePayment.ResponsePost>) => {
+        if (error.responseData && "message" in error.responseData) {
+          setError({ error: error.responseData.message });
+        } else {
+          setError({ error: error.message });
+        }
+        setIsLoading(false);
+        return;
       });
+      if (typeof paymentIntent !== "object") {
+        return;
+      }
       if ("message" in paymentIntent) {
         setError({ error: paymentIntent.message });
         setIsLoading(false);