Add useShopifyEventHandlers hook for checkout event handling

- Provides standardized event handlers with debug logging
- Includes handlers for press, fail, complete, cancel, render state changes, pixel events, and link clicks
- Integrates with existing cart context for order completion cleanup
- Can be used independently of any specific checkout features

Author: markmur

modules/@shopify/checkout-sheet-kit/ios/ShopifyCheckoutSheetKit+EventSerialization.swift

@@ -0,0 +1,176 @@
+/*
+MIT License
+
+Copyright 2023 - Present, Shopify Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+*/
+
+import Foundation
+import ShopifyCheckoutSheetKit
+
+/**
+ * Shared event serialization utilities for converting ShopifyCheckoutSheetKit events
+ * to React Native compatible dictionaries.
+ */
+class ShopifyEventSerialization {
+
+	/**
+	 * Encodes a Codable object to a JSON dictionary for React Native bridge.
+	 */
+	static func encodeToJSON(from value: Codable) -> [String: Any] {
+		let encoder = JSONEncoder()
+
+		do {
+			let jsonData = try encoder.encode(value)
+			if let jsonObject = try JSONSerialization.jsonObject(with: jsonData, options: []) as? [String: Any] {
+				return jsonObject
+			}
+		} catch {
+			print("Error encoding to JSON object: \(error)")
+		}
+		return [:]
+	}
+
+	/**
+	 * Converts a JSON string to a dictionary.
+	 */
+	static func stringToJSON(from value: String?) -> [String: Any]? {
+		guard let data = value?.data(using: .utf8, allowLossyConversion: false) else { return [:] }
+		do {
+			return try JSONSerialization.jsonObject(with: data, options: .mutableContainers) as? [String: Any]
+		} catch {
+			print("Failed to convert string to JSON: \(error)", value ?? "nil")
+			return [:]
+		}
+	}
+
+	/**
+	 * Converts a CheckoutCompletedEvent to a React Native compatible dictionary.
+	 */
+	static func serialize(checkoutCompletedEvent event: CheckoutCompletedEvent) -> [String: Any] {
+		return encodeToJSON(from: event)
+	}
+
+	/**
+	 * Converts a PixelEvent to a React Native compatible dictionary.
+	 */
+	static func serialize(pixelEvent event: PixelEvent) -> [String: Any] {
+		switch event {
+		case .standardEvent(let standardEvent):
+			let encoded = encodeToJSON(from: standardEvent)
+			return [
+				"context": encoded["context"] ?? NSNull(),
+				"data": encoded["data"] ?? NSNull(),
+				"id": encoded["id"] ?? NSNull(),
+				"name": encoded["name"] ?? NSNull(),
+				"timestamp": encoded["timestamp"] ?? NSNull(),
+				"type": "STANDARD"
+			]
+
+		case .customEvent(let customEvent):
+			return [
+				"context": encodeToJSON(from: customEvent.context),
+				"customData": stringToJSON(from: customEvent.customData) ?? NSNull(),
+				"id": customEvent.id,
+				"name": customEvent.name,
+				"timestamp": customEvent.timestamp,
+				"type": "CUSTOM"
+			]
+		}
+	}
+
+  static func serialize(clickEvent url: URL) -> [String: URL] {
+    return ["url": url]
+  }
+
+	/**
+	 * Converts a CheckoutError to a React Native compatible dictionary.
+	 * Handles all specific error types with proper type information.
+	 */
+	static func serialize(checkoutError error: CheckoutError) -> [String: Any] {
+		switch error {
+		case .checkoutExpired(let message, let code, let recoverable):
+			return [
+				"__typename": "CheckoutExpiredError",
+				"message": message,
+				"code": code.rawValue,
+				"recoverable": recoverable
+			]
+
+		case .checkoutUnavailable(let message, let code, let recoverable):
+			switch code {
+			case .clientError(let clientErrorCode):
+				return [
+					"__typename": "CheckoutClientError",
+					"message": message,
+					"code": clientErrorCode.rawValue,
+					"recoverable": recoverable
+				]
+			case .httpError(let statusCode):
+				return [
+					"__typename": "CheckoutHTTPError",
+					"message": message,
+					"code": "http_error",
+					"statusCode": statusCode,
+					"recoverable": recoverable
+				]
+			}
+
+		case .configurationError(let message, let code, let recoverable):
+			return [
+				"__typename": "ConfigurationError",
+				"message": message,
+				"code": code.rawValue,
+				"recoverable": recoverable
+			]
+
+		case .sdkError(let underlying, let recoverable):
+			return [
+				"__typename": "InternalError",
+				"code": "unknown",
+				"message": underlying.localizedDescription,
+				"recoverable": recoverable
+			]
+
+		@unknown default:
+			return [
+				"__typename": "UnknownError",
+				"code": "unknown",
+				"message": error.localizedDescription,
+				"recoverable": error.isRecoverable
+			]
+		}
+	}
+
+	/**
+	 * Converts a RenderState enum to a string for React Native.
+	 */
+	static func serialize(renderState state: RenderState) -> [String: String] {
+		switch state {
+		case .loading:
+			return ["state": "loading"]
+		case .rendered:
+			return ["state": "rendered"]
+		case .error:
+			return ["state": "error"]
+		@unknown default:
+			return ["state": "unknown"]
+		}
+	}
+}

modules/@shopify/checkout-sheet-kit/ios/ShopifyCheckoutSheetKit+Extensions.swift

@@ -0,0 +1,52 @@
+/*
+MIT License
+
+Copyright 2023 - Present, Shopify Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+*/
+
+import UIKit
+
+// MARK: - UIColor Extensions
+
+extension UIColor {
+	convenience init(hex: String) {
+		let hexString: String = hex.trimmingCharacters(in: CharacterSet.whitespacesAndNewlines)
+		let start = hexString.index(hexString.startIndex, offsetBy: hexString.hasPrefix("#") ? 1 : 0)
+		let hexColor = String(hexString[start...])
+
+		let scanner = Scanner(string: hexColor)
+		var hexNumber: UInt64 = 0
+
+		if scanner.scanHexInt64(&hexNumber) {
+			let red = (hexNumber & 0xff0000) >> 16
+			let green = (hexNumber & 0x00ff00) >> 8
+			let blue = hexNumber & 0x0000ff
+
+			self.init(
+				red: CGFloat(red) / 0xff,
+				green: CGFloat(green) / 0xff,
+				blue: CGFloat(blue) / 0xff,
+				alpha: 1
+			)
+		} else {
+			self.init(red: 0, green: 0, blue: 0, alpha: 1)
+		}
+	}
+}

modules/@shopify/checkout-sheet-kit/tests/context.test.tsx

@@ -394,7 +394,9 @@ describe('ShopifyCheckoutSheetContext without provider', () => {
     // Test all the noop functions to ensure they don't throw
     expect(() => hookValue.addEventListener('close', jest.fn())).not.toThrow();
     expect(() => hookValue.removeEventListeners('close')).not.toThrow();
-    expect(() => hookValue.setConfig({colorScheme: ColorScheme.automatic})).not.toThrow();
+    expect(() =>
+      hookValue.setConfig({colorScheme: ColorScheme.automatic}),
+    ).not.toThrow();
     expect(() => hookValue.preload('test-url')).not.toThrow();
     expect(() => hookValue.present('test-url')).not.toThrow();
     expect(() => hookValue.invalidate()).not.toThrow();

modules/@shopify/checkout-sheet-kit/tests/index.test.ts

@@ -22,7 +22,7 @@ const config: Configuration = {
 jest.mock('react-native', () => {
   let listeners: (typeof jest.fn)[] = [];
 
-  const NativeEventEmitter = jest.fn(() => ({
+  const mockNativeEventEmitter = jest.fn(() => ({
     addListener: jest.fn((_, callback) => {
       listeners.push(callback);
     }),
@@ -43,8 +43,8 @@ jest.mock('react-native', () => {
     preloading: true,
   };
 
-  const ShopifyCheckoutSheetKit = {
-    eventEmitter: NativeEventEmitter(),
+  const mockShopifyCheckoutSheetKit = {
+    eventEmitter: mockNativeEventEmitter(),
     version: '0.7.0',
     preload: jest.fn(),
     present: jest.fn(),
@@ -55,26 +55,34 @@ jest.mock('react-native', () => {
     addEventListener: jest.fn(),
     removeEventListeners: jest.fn(),
     initiateGeolocationRequest: jest.fn(),
+    configureAcceleratedCheckouts: jest.fn(),
+    isAcceleratedCheckoutAvailable: jest.fn(),
   };
 
+  const mockRequireNativeComponent = jest.fn().mockImplementation(() => {
+    return 'MockNativeComponent';
+  });
+
   return {
     Platform: {
       OS: 'ios',
     },
     PermissionsAndroid: {
       requestMultiple: jest.fn(),
     },
+    requireNativeComponent: mockRequireNativeComponent,
     _listeners: listeners,
-    NativeEventEmitter,
+    NativeEventEmitter: mockNativeEventEmitter,
     NativeModules: {
-      ShopifyCheckoutSheetKit,
+      ShopifyCheckoutSheetKit: mockShopifyCheckoutSheetKit,
     },
   };
 });
 
 global.console = {
   ...global.console,
   error: jest.fn(),
+  warn: jest.fn(),
 };
 
 describe('ShopifyCheckoutSheetKit', () => {

modules/@shopify/checkout-sheet-kit/tests/linking.test.ts

@@ -11,6 +11,14 @@ jest.mock('react-native', () => ({
   Platform: {
     OS: 'ios',
   },
+  requireNativeComponent: jest.fn().mockImplementation(() => {
+    const mockComponent = (props: any) => {
+      // Use React.createElement with plain object instead
+      const mockReact = jest.requireActual('react');
+      return mockReact.createElement('View', props);
+    };
+    return mockComponent;
+  }),
 }));
 
 describe('Native Module Linking', () => {

sample/src/hooks/useCheckoutEventHandlers.ts

@@ -0,0 +1,59 @@
+import {useMemo} from 'react';
+
+import {createDebugLogger} from '../utils';
+
+import {useCart} from '../context/Cart';
+import type {
+  CheckoutCompletedEvent,
+  CheckoutException,
+  PixelEvent,
+  RenderState,
+} from '@shopify/checkout-sheet-kit';
+import {Linking} from 'react-native';
+
+interface EventHandlers {
+  onPress?: () => void;
+  onFail?: (error: CheckoutException) => void;
+  onComplete?: (event: CheckoutCompletedEvent) => void;
+  onCancel?: () => void;
+  onRenderStateChange?: (state: RenderState) => void;
+  onShouldRecoverFromError?: (error: {message: string}) => boolean;
+  onWebPixelEvent?: (event: PixelEvent) => void;
+  onClickLink?: (url: string) => void;
+}
+
+export function useShopifyEventHandlers(name?: string): EventHandlers {
+  const log = createDebugLogger(name ?? '');
+  const {clearCart} = useCart();
+
+  return useMemo(() => {
+    return {
+      onPress: () => {
+        log('onPress');
+      },
+      onFail: error => {
+        log('onFail', error);
+      },
+      onComplete: event => {
+        log('onComplete', event.orderDetails.id);
+        clearCart();
+      },
+      onCancel: () => {
+        log('onCancel');
+      },
+      onRenderStateChange: state => {
+        log('onRenderStateChange', state);
+      },
+      onWebPixelEvent: event => {
+        log('onWebPixelEvent', event.name);
+      },
+      onClickLink: async url => {
+        log('onClickLink', url);
+
+        if (await Linking.canOpenURL(url)) {
+          await Linking.openURL(url);
+        }
+      },
+    };
+  }, [log, clearCart]);
+}