feat: add loadingStatusErrorMessage to state

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.criticalError).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,9 @@ describe("<PayPalScriptProvider />", () => {
         // verify initial loading state
         expect(state.isPending).toBeTruthy();
         await waitFor(() => expect(state.isRejected).toBeTruthy());
+        await waitFor(() =>
+            expect(state.criticalError).toBe("Error: test error")
+        );
         expect(state.isPending).toBeFalsy();
         expect(state.isResolved).toBeFalsy();
         spyConsoleError.mockRestore();
@@ -99,6 +103,7 @@ describe("<PayPalScriptProvider />", () => {
         unmount();
 
         await waitFor(() => expect(loadScript).toBeCalled());
+        await waitFor(() => expect(state.criticalError).toBeFalsy());
         // verify initial loading state
         expect(state.isInitial).toBeFalsy();
         expect(state.isPending).toBeTruthy();
@@ -142,6 +147,7 @@ describe("<PayPalScriptProvider />", () => {
 
         expect(state.isPending).toBe(true);
         await waitFor(() => expect(state.isResolved).toBe(true));
+        expect(state.criticalError).toBeFalsy();
     });
 
     test("should remount without reloading the sdk script when the options have not changed", async () => {
@@ -251,6 +257,7 @@ describe("usePayPalScriptReducer", () => {
 
 function setupTestComponent() {
     const state = {
+        criticalError: "",
         options: { "data-react-paypal-script-id": "" },
         isInitial: true,
         isPending: false,

src/components/PayPalScriptProvider.tsx

@@ -68,6 +68,10 @@ export const PayPalScriptProvider: FC<ScriptProviderProps> = ({
                         type: DISPATCH_ACTION.LOADING_STATUS,
                         value: SCRIPT_LOADING_STATE.REJECTED,
                     });
+                    dispatch({
+                        type: DISPATCH_ACTION.CRITICAL_ERROR,
+                        value: String(err),
+                    });
                 }
             });
         return () => {

src/context/scriptProviderContext.ts

@@ -18,7 +18,7 @@
  */
 export function getScriptID(options: ReactPayPalScriptOptions): string {
     // exclude the data-react-paypal-script-id value from the options hash
     const { [SCRIPT_ID]: _scriptId, ...paypalScriptOptions } = options;
 
     return `react-paypal-js-${hashStr(JSON.stringify(paypalScriptOptions))}`;
 }
@@ -55,6 +55,11 @@
                 ...state,
                 loadingStatus: action.value as SCRIPT_LOADING_STATE,
             };
+        case DISPATCH_ACTION.CRITICAL_ERROR:
+            return {
+                ...state,
+                criticalError: action.value,
+            };
         case DISPATCH_ACTION.RESET_OPTIONS:
             // destroy existing script to make sure only one script loads at a time
             destroySDKScript(state.options[SCRIPT_ID]);

src/types/enums.ts

@@ -17,6 +17,7 @@ export enum SCRIPT_LOADING_STATE {
  */
 export enum DISPATCH_ACTION {
     LOADING_STATUS = "setLoadingStatus",
+    CRITICAL_ERROR = "criticalError",
     RESET_OPTIONS = "resetOptions",
     SET_BRAINTREE_INSTANCE = "braintreeInstance",
 }

src/types/scriptProviderTypes.ts

@@ -5,7 +5,7 @@
 import type { PayPalScriptOptions } from "@paypal/paypal-js";
 
 export interface ReactPayPalScriptOptions extends PayPalScriptOptions {
     [key: string]: any;
 }
 
 export type ScriptReducerAction =
@@ -13,6 +13,10 @@
           type: `${DISPATCH_ACTION.LOADING_STATUS}`;
           value: SCRIPT_LOADING_STATE;
       }
+    | {
+          type: `${DISPATCH_ACTION.CRITICAL_ERROR}`;
+          value: string;
+      }
     | {
           type: `${DISPATCH_ACTION.RESET_OPTIONS}`;
           value: ReactPayPalScriptOptions;
@@ -30,6 +34,7 @@
 export interface ScriptContextState {
     options: ReactPayPalScriptOptions;
     loadingStatus: SCRIPT_LOADING_STATE;
+    criticalError?: string;
     braintreePayPalCheckoutInstance?: BraintreePayPalCheckout;
     dispatch?: Dispatch<ScriptReducerAction>;
 }