Merge pull request #814 from paypal/feature/v6-react-storybook-enhancement

Feature/v6 react storybook enhancement

Author: HackTheW2d

packages/react-paypal-js-storybook/v6/.storybook/preview.ts

@@ -3,6 +3,10 @@ import { withPayPalProvider } from "../src/decorators";
 
 const preview: Preview = {
     parameters: {
+        actions: {
+            // Automatically create actions for props matching on* pattern
+            argTypesRegex: "^on[A-Z].*",
+        },
         controls: {
             matchers: {
                 color: /(background|color)$/i,

packages/react-paypal-js-storybook/v6/src/decorators/PayPalProviderDecorator.tsx

@@ -1,7 +1,12 @@
 import React, { useState, useEffect } from "react";
 import type { Decorator } from "@storybook/react";
+import { action } from "storybook/actions";
 
-import { PayPalProvider } from "@paypal/react-paypal-js/sdk-v6";
+import {
+    PayPalProvider,
+    usePayPal,
+    INSTANCE_LOADING_STATE,
+} from "@paypal/react-paypal-js/sdk-v6";
 import { SAMPLE_INTEGRATION_API } from "../shared/utils";
 
 async function fetchClientToken(): Promise<string> {
@@ -60,6 +65,28 @@ function ErrorDisplay({ message }: { message: string }) {
     );
 }
 
+// Logs SDK and button events to the Actions panel.
+function SdkStatusMonitor({ children }: { children: React.ReactNode }) {
+    const { loadingStatus } = usePayPal();
+
+    useEffect(() => {
+        if (loadingStatus === INSTANCE_LOADING_STATE.RESOLVED) {
+            action("SDK")("Library initialized and rendered");
+        }
+    }, [loadingStatus]);
+
+    const handleClick = (e: React.MouseEvent) => {
+        const tag = (e.target as HTMLElement).tagName.toLowerCase();
+        if (tag.endsWith("-button")) {
+            action("button")(
+                "Click event dispatched from the PayPal payment button",
+            );
+        }
+    };
+
+    return <div onClick={handleClick}>{children}</div>;
+}
+
 function ProviderWrapper({ children }: { children: React.ReactNode }) {
     const [clientToken, setClientToken] = useState<string>();
     const [error, setError] = useState<Error>();
@@ -86,7 +113,7 @@ function ProviderWrapper({ children }: { children: React.ReactNode }) {
             ]}
             pageType="checkout"
         >
-            {children}
+            <SdkStatusMonitor>{children}</SdkStatusMonitor>
         </PayPalProvider>
     );
 }

packages/react-paypal-js-storybook/v6/src/shared/utils.ts

@@ -15,6 +15,7 @@ import type {
     OnCancelDataSavePayments,
     OnErrorData,
 } from "@paypal/react-paypal-js/sdk-v6";
+import { action } from "storybook/actions";
 
 export const SAMPLE_INTEGRATION_API =
     import.meta.env.STORYBOOK_PAYPAL_API_URL ||
@@ -31,11 +32,14 @@ export async function createOrder(): Promise<{ orderId: string }> {
     return { orderId: data.id };
 }
 
-export async function captureOrder(orderId: string): Promise<void> {
-    await fetch(
+export async function captureOrder(
+    orderId: string,
+): Promise<Record<string, unknown>> {
+    const response = await fetch(
         `${SAMPLE_INTEGRATION_API}/paypal-api/checkout/orders/${orderId}/capture`,
         { method: "POST" },
     );
+    return response.json();
 }
 
 // Vault/Save Payment APIs
@@ -55,27 +59,29 @@ export async function createVaultToken(): Promise<{ vaultSetupToken: string }> {
 
 export const oneTimePaymentCallbacks = {
     onApprove: async (data: OnApproveDataOneTimePayments) => {
-        console.log("Payment approved:", data);
-        await captureOrder(data.orderId);
-        console.log("Order captured successfully");
+        const orderData = await captureOrder(data.orderId);
+        action("approve")({
+            ...orderData,
+            orderID: data.orderId,
+        });
     },
     onCancel: (data: OnCancelDataOneTimePayments) => {
-        console.log("Payment cancelled:", data);
+        action("cancel")(data);
     },
     onError: (error: unknown) => {
-        console.error("Payment error:", error as OnErrorData);
+        action("error")(error as OnErrorData);
     },
 };
 
 export const savePaymentCallbacks = {
     onApprove: async (data: { vaultSetupToken: string }) => {
-        console.log("Payment method saved:", data);
+        action("approve")(data);
     },
     onCancel: (data: OnCancelDataSavePayments) => {
-        console.log("Save payment cancelled:", data);
+        action("cancel")(data);
     },
     onError: (error: unknown) => {
-        console.error("Save payment error:", error as OnErrorData);
+        action("error")(error as OnErrorData);
     },
 };