feat: add loadingStatusErrorMessage to state (#366)

paypal · Jul 3, 2023 · e1b9068 · e1b9068
1 parent eac53c8
commit e1b9068
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 2 deletions.
diff --git a/src/components/PayPalScriptProvider.test.tsx b/src/components/PayPalScriptProvider.test.tsx
@@ -56,13 +56,14 @@ describe("<PayPalScriptProvider />", () => {
         await waitFor(() => expect(state.isResolved).toBeTruthy());
         expect(state.isPending).toBeFalsy();
         expect(state.isRejected).toBeFalsy();
+        expect(state.loadingStatusErrorMessage).toBeFalsy();
     });
 
     test('should set "isRejected" state to "true" after failing to load the script', async () => {
         const spyConsoleError = jest
             .spyOn(console, "error")
             .mockImplementation();
-        (loadScript as jest.Mock).mockRejectedValue(new Error());
+        (loadScript as jest.Mock).mockRejectedValue(new Error("test error"));
         const { state, TestComponent } = setupTestComponent();
         render(
             <PayPalScriptProvider options={{ clientId: "test" }}>
@@ -79,6 +80,7 @@ describe("<PayPalScriptProvider />", () => {
         // verify initial loading state
         expect(state.isPending).toBeTruthy();
         await waitFor(() => expect(state.isRejected).toBeTruthy());
+        expect(state.loadingStatusErrorMessage).toBe("Error: test error");
         expect(state.isPending).toBeFalsy();
         expect(state.isResolved).toBeFalsy();
         spyConsoleError.mockRestore();
@@ -99,6 +101,7 @@ describe("<PayPalScriptProvider />", () => {
         unmount();
 
         await waitFor(() => expect(loadScript).toBeCalled());
+        expect(state.loadingStatusErrorMessage).toBeFalsy();
         // verify initial loading state
         expect(state.isInitial).toBeFalsy();
         expect(state.isPending).toBeTruthy();
@@ -142,6 +145,7 @@ describe("<PayPalScriptProvider />", () => {
 
         expect(state.isPending).toBe(true);
         await waitFor(() => expect(state.isResolved).toBe(true));
+        expect(state.loadingStatusErrorMessage).toBeFalsy();
     });
 
     test("should remount without reloading the sdk script when the options have not changed", async () => {
@@ -251,6 +255,7 @@ describe("usePayPalScriptReducer", () => {
 
 function setupTestComponent() {
     const state = {
+        loadingStatusErrorMessage: "",
         options: { "data-react-paypal-script-id": "" },
         isInitial: true,
         isPending: false,

diff --git a/src/components/PayPalScriptProvider.tsx b/src/components/PayPalScriptProvider.tsx
@@ -66,7 +66,10 @@ export const PayPalScriptProvider: FC<ScriptProviderProps> = ({
                 if (isSubscribed) {
                     dispatch({
                         type: DISPATCH_ACTION.LOADING_STATUS,
-                        value: SCRIPT_LOADING_STATE.REJECTED,
+                        value: {
+                            state: SCRIPT_LOADING_STATE.REJECTED,
+                            message: String(err),
+                        },
                     });
                 }
             });

diff --git a/src/context/scriptProviderContext.ts b/src/context/scriptProviderContext.ts
@@ -51,6 +51,14 @@ export function scriptReducer(
 ): ScriptContextState {
     switch (action.type) {
         case DISPATCH_ACTION.LOADING_STATUS:
+            if (typeof action.value === "object") {
+                return {
+                    ...state,
+                    loadingStatus: action.value.state as SCRIPT_LOADING_STATE,
+                    loadingStatusErrorMessage: action.value.message,
+                };
+            }
+
             return {
                 ...state,
                 loadingStatus: action.value as SCRIPT_LOADING_STATE,

diff --git a/src/types/scriptProviderTypes.ts b/src/types/scriptProviderTypes.ts
@@ -13,6 +13,10 @@ export type ScriptReducerAction =
           type: `${DISPATCH_ACTION.LOADING_STATUS}`;
           value: SCRIPT_LOADING_STATE;
       }
+    | {
+          type: `${DISPATCH_ACTION.LOADING_STATUS}`;
+          value: { state: SCRIPT_LOADING_STATE; message: string };
+      }
     | {
           type: `${DISPATCH_ACTION.RESET_OPTIONS}`;
           value: ReactPayPalScriptOptions;
@@ -30,6 +34,7 @@ export type InitialState = {
 export interface ScriptContextState {
     options: ReactPayPalScriptOptions;
     loadingStatus: SCRIPT_LOADING_STATE;
+    loadingStatusErrorMessage?: string;
     braintreePayPalCheckoutInstance?: BraintreePayPalCheckout;
     dispatch?: Dispatch<ScriptReducerAction>;
 }