AW-28-displayPaymentErrors

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
   }
 }
 

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;

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;
+export default SinglePaymentPage;

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);