Use serializations + checkout event handlers in sample app

Author: markmur

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

@@ -62,7 +62,7 @@ class RCTShopifyCheckoutSheetKit: RCTEventEmitter, CheckoutDelegate {
 
 	func checkoutDidComplete(event: CheckoutCompletedEvent) {
 		if hasListeners {
-			self.sendEvent(withName: "completed", body: encodeToJSON(from: event))
+			self.sendEvent(withName: "completed", body: ShopifyEventSerialization.serialize(checkoutCompletedEvent: event))
 		}
 	}
 
@@ -73,66 +73,12 @@ class RCTShopifyCheckoutSheetKit: RCTEventEmitter, CheckoutDelegate {
 	func checkoutDidFail(error: ShopifyCheckoutSheetKit.CheckoutError) {
 		guard hasListeners else { return }
 
-		if case .checkoutExpired(let message, let code, let recoverable) = error {
-			self.sendEvent(withName: "error", body: [
-				"__typename": "CheckoutExpiredError",
-				"message": message,
-				"code": code.rawValue,
-				"recoverable": recoverable
-			])
-		} else if case .checkoutUnavailable(let message, let code, let recoverable) = error {
-			switch code {
-			case .clientError(let clientErrorCode):
-				self.sendEvent(withName: "error", body: [
-					"__typename": "CheckoutClientError",
-					"message": message,
-					"code": clientErrorCode.rawValue,
-					"recoverable": recoverable
-				])
-			case .httpError(let statusCode):
-				self.sendEvent(withName: "error", body: [
-					"__typename": "CheckoutHTTPError",
-					"message": message,
-					"code": "http_error",
-					"statusCode": statusCode,
-					"recoverable": recoverable
-				])
-			}
-		} else if case .configurationError(let message, let code, let recoverable) = error {
-			self.sendEvent(withName: "error", body: [
-				"__typename": "ConfigurationError",
-				"message": message,
-				"code": code.rawValue,
-				"recoverable": recoverable
-			])
-		} else if case .sdkError(let underlying, let recoverable) = error {
-			var errorMessage = "\(underlying.localizedDescription)"
-			self.sendEvent(withName: "error", body: [
-				"__typename": "InternalError",
-				"code": "unknown",
-				"message": errorMessage,
-				"recoverable": recoverable
-			])
-		} else {
-			self.sendEvent(withName: "error", body: [
-				"__typename": "UnknownError",
-				"code": "unknown",
-				"message": error.localizedDescription,
-				"recoverable": error.isRecoverable
-			])
-		}
+		self.sendEvent(withName: "error", body: ShopifyEventSerialization.serialize(checkoutError: error))
 	}
 
 	func checkoutDidEmitWebPixelEvent(event: ShopifyCheckoutSheetKit.PixelEvent) {
 		if hasListeners {
-			var genericEvent: [String: Any]
-			switch event {
-				case .standardEvent(let standardEvent):
-					genericEvent = mapToGenericEvent(standardEvent: standardEvent)
-				case .customEvent(let customEvent):
-					genericEvent = mapToGenericEvent(customEvent: customEvent)
-			}
-			self.sendEvent(withName: "pixel", body: genericEvent)
+			self.sendEvent(withName: "pixel", body: ShopifyEventSerialization.serialize(pixelEvent: event))
 		}
 	}
 
@@ -257,87 +203,4 @@ class RCTShopifyCheckoutSheetKit: RCTEventEmitter, CheckoutDelegate {
 	}
 
 	// MARK: - Private
-
-	private 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)
-			return [:]
-		}
-	}
-
-	private 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 [:]
-	}
-
-	private func mapToGenericEvent(standardEvent: StandardEvent) -> [String: Any] {
-		let encoded = encodeToJSON(from: standardEvent)
-		return [
-			"context": encoded["context"],
-			"data": encoded["data"],
-			"id": encoded["id"],
-			"name": encoded["name"],
-			"timestamp": encoded["timestamp"],
-			"type": "STANDARD"
-		] as [String: Any]
-	}
-
-	private func mapToGenericEvent(customEvent: CustomEvent) -> [String: Any] {
-		do {
-			return try decodeAndMap(event: customEvent)
-		} catch {
-			print("[debug] Failed to map custom event: \(error)")
-		}
-
-		return [:]
-	}
-
-	private func decodeAndMap(event: CustomEvent, decoder: JSONDecoder = JSONDecoder()) throws -> [String: Any] {
-		return [
-			"context": encodeToJSON(from: event.context),
-			"customData": stringToJSON(from: event.customData),
-			"id": event.id,
-			"name": event.name,
-			"timestamp": event.timestamp,
-			"type": "CUSTOM"
-		] as [String: Any]
-	}
-}
-
-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/linking.test.ts

@@ -11,14 +11,6 @@ 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/App.tsx

@@ -57,6 +57,7 @@ import CartScreen from './screens/CartScreen';
 import ProductDetailsScreen from './screens/ProductDetailsScreen';
 import type {ProductVariant, ShopifyProduct} from '../@types';
 import ErrorBoundary from './ErrorBoundary';
+import {useShopifyEventHandlers} from './hooks/useCheckoutEventHandlers';
 
 const colorScheme = ColorScheme.web;
 
@@ -163,28 +164,28 @@ class StorefrontURL {
 
 function AppWithContext({children}: PropsWithChildren) {
   const shopify = useShopifyCheckoutSheet();
+  const eventHandlers = useShopifyEventHandlers('App');
 
   useEffect(() => {
     const close = shopify.addEventListener('close', () => {
-      console.log('[CheckoutClose]');
+      eventHandlers.onCancel?.();
     });
 
     const pixel = shopify.addEventListener('pixel', (event: PixelEvent) => {
-      console.log('[CheckoutPixelEvent]', event.name, event);
+      eventHandlers.onWebPixelEvent?.(event);
     });
 
     const completed = shopify.addEventListener(
       'completed',
       (event: CheckoutCompletedEvent) => {
-        console.log('[CheckoutCompletedEvent]', event.orderDetails.id);
-        console.log('[CheckoutCompletedEvent]', event);
+        eventHandlers.onComplete?.(event);
       },
     );
 
     const error = shopify.addEventListener(
       'error',
       (error: CheckoutException) => {
-        console.log(error.constructor.name, error);
+        eventHandlers.onFail?.(error);
       },
     );
 
@@ -194,7 +195,7 @@ function AppWithContext({children}: PropsWithChildren) {
       close?.remove();
       error?.remove();
     };
-  }, [shopify]);
+  }, [shopify, eventHandlers]);
 
   return (
     <ConfigProvider>

sample/src/hooks/useCheckoutEventHandlers.ts

@@ -7,7 +7,6 @@ import type {
   CheckoutCompletedEvent,
   CheckoutException,
   PixelEvent,
-  RenderState,
 } from '@shopify/checkout-sheet-kit';
 import {Linking} from 'react-native';
 
@@ -16,7 +15,6 @@ interface EventHandlers {
   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;
@@ -41,9 +39,6 @@ export function useShopifyEventHandlers(name?: string): EventHandlers {
       onCancel: () => {
         log('onCancel');
       },
-      onRenderStateChange: state => {
-        log('onRenderStateChange', state);
-      },
       onWebPixelEvent: event => {
         log('onWebPixelEvent', event.name);
       },