3.0.0-beta.1 - Improved error handling + graceful recovery

.github/workflows/ci.yml

@@ -40,7 +40,7 @@ jobs:
       - run: |
           yarn module clean
           yarn module build
-          ./scripts/compare_snapshot
+          yarn compare-snapshot
 
   lint:
     name: Lint module + sample
@@ -52,6 +52,7 @@ jobs:
         uses: ./.github/actions/setup
 
       - run: |
+          yarn module build
           yarn module lint
           yarn sample lint
 

modules/@shopify/checkout-sheet-kit/.swiftlint.yml

@@ -3,6 +3,7 @@ disabled_rules:
   - redundant_void_return
   - todo
   - switch_case_alignment
+  - function_body_length
 
 opt_in_rules:
   - array_init

modules/@shopify/checkout-sheet-kit/RNShopifyCheckoutSheetKit.podspec

@@ -20,7 +20,7 @@ Pod::Spec.new do |s|
   s.source_files = "ios/*.{h,m,mm,swift}"
 
 	s.dependency "React-Core"
-	s.dependency "ShopifyCheckoutSheetKit", "~> 2.0.1"
+	s.dependency "ShopifyCheckoutSheetKit", "~> 3.0.0-beta.5"
 
   if fabric_enabled
 		install_modules_dependencies(s)

modules/@shopify/checkout-sheet-kit/android/gradle.properties

@@ -5,4 +5,4 @@ ndkVersion=23.1.7779620
 buildToolsVersion = "33.0.0"
 
 # Version of Shopify Checkout SDK to use with React Native
-SHOPIFY_CHECKOUT_SDK_VERSION=2.0.1
+SHOPIFY_CHECKOUT_SDK_VERSION=3.0.0-beta.2

modules/@shopify/checkout-sheet-kit/android/src/main/java/com/shopify/reactnative/checkoutsheetkit/CustomCheckoutEventProcessor.java

@@ -27,14 +27,17 @@ of this software and associated documentation files (the "Software"), to deal
 import android.util.Log;
 import androidx.annotation.NonNull;
 import androidx.annotation.Nullable;
+
 import com.shopify.checkoutsheetkit.*;
 import com.facebook.react.modules.core.DeviceEventManagerModule;
-import com.facebook.react.bridge.ReactApplicationContext;
 import com.facebook.react.bridge.WritableNativeMap;
+import com.facebook.react.bridge.ReactApplicationContext;
 import com.shopify.checkoutsheetkit.pixelevents.PixelEvent;
 import com.shopify.checkoutsheetkit.lifecycleevents.CheckoutCompletedEvent;
 import com.fasterxml.jackson.databind.ObjectMapper;
 import java.io.IOException;
+import java.util.HashMap;
+import java.util.Map;
 
 public class CustomCheckoutEventProcessor extends DefaultCheckoutEventProcessor {
   private final ReactApplicationContext reactContext;
@@ -69,11 +72,42 @@ public void onWebPixelEvent(@NonNull PixelEvent event) {
 
   @Override
   public void onCheckoutFailed(CheckoutException checkoutError) {
-    WritableNativeMap error = new WritableNativeMap();
+    try {
+      String data = mapper.writeValueAsString(populateErrorDetails(checkoutError));
+      sendEventWithStringData("error", data);
+    } catch (IOException e) {
+      Log.e("ShopifyCheckoutSheetKit", "Error processing checkout failed event", e);
+    }
+  }
 
-    error.putString("message", checkoutError.getErrorDescription());
+  private Map<String, Object> populateErrorDetails(CheckoutException checkoutError) {
+    Map<String, Object> errorMap = new HashMap();
+    errorMap.put("__typename", getErrorTypeName(checkoutError));
+    errorMap.put("message", checkoutError.getErrorDescription());
+    errorMap.put("recoverable", checkoutError.isRecoverable());
+    errorMap.put("code", checkoutError.getErrorCode());
 
-    sendEvent("error", error);
+    if (checkoutError instanceof HttpException) {
+      errorMap.put("statusCode", ((HttpException) checkoutError).getStatusCode());
+    }
+
+    return errorMap;
+  }
+
+  private String getErrorTypeName(CheckoutException error) {
+    if (error instanceof CheckoutExpiredException) {
+      return "CheckoutExpiredError";
+    } else if (error instanceof ClientException) {
+      return "CheckoutClientError";
+    } else if (error instanceof HttpException) {
+      return "CheckoutHTTPError";
+    } else if (error instanceof ConfigurationException) {
+      return "ConfigurationError";
+    } else if (error instanceof CheckoutSheetKitException) {
+      return "InternalError";
+    } else {
+      return "UnknownError";
+    }
   }
 
   @Override
@@ -89,7 +123,7 @@ private void sendEvent(String eventName, @Nullable WritableNativeMap params) {
 
   private void sendEventWithStringData(String name, String data) {
     reactContext
-      .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
-      .emit(name, data);
+        .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
+        .emit(name, data);
   }
 }

modules/@shopify/checkout-sheet-kit/android/src/main/java/com/shopify/reactnative/checkoutsheetkit/ShopifyCheckoutSheetKitModule.java

@@ -46,10 +46,17 @@ public class ShopifyCheckoutSheetKitModule extends ReactContextBaseJavaModule {
 
   private final ReactApplicationContext reactContext;
 
+  private CheckoutSheetKitDialog checkoutSheet;
+
   public ShopifyCheckoutSheetKitModule(ReactApplicationContext reactContext) {
     super(reactContext);
 
     this.reactContext = reactContext;
+
+    ShopifyCheckoutSheetKit.configure(configuration -> {
+      configuration.setPlatform(Platform.REACT_NATIVE);
+      checkoutConfig = configuration;
+    });
   }
 
   @NonNull
@@ -82,12 +89,20 @@ public void present(String checkoutURL) {
       DefaultCheckoutEventProcessor checkoutEventProcessor = new CustomCheckoutEventProcessor(currentActivity,
           this.reactContext);
       currentActivity.runOnUiThread(() -> {
-        ShopifyCheckoutSheetKit.present(checkoutURL, (ComponentActivity) currentActivity,
+        checkoutSheet = ShopifyCheckoutSheetKit.present(checkoutURL, (ComponentActivity) currentActivity,
             checkoutEventProcessor);
       });
     }
   }
 
+  @ReactMethod
+  public void dismiss() {
+    if (checkoutSheet != null) {
+      checkoutSheet.dismiss();
+      checkoutSheet = null;
+    }
+  }
+
   @ReactMethod
   public void preload(String checkoutURL) {
     Activity currentActivity = getCurrentActivity();

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

@@ -31,6 +31,9 @@ @interface RCT_EXTERN_MODULE(RCTShopifyCheckoutSheetKit, NSObject)
 /// Preload checkout
 RCT_EXTERN_METHOD(preload:(NSString *)checkoutURLString);
 
+/// Dismiss checkout
+RCT_EXTERN_METHOD(dismiss);
+
 /// Set configuration for checkout
 RCT_EXTERN_METHOD(setConfig:(NSDictionary *)configuration);
 

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

@@ -40,6 +40,14 @@ class RCTShopifyCheckoutSheetKit: RCTEventEmitter, CheckoutDelegate {
 		return true
 	}
 
+	override init() {
+		ShopifyCheckoutSheetKit.configure {
+			$0.platform = ShopifyCheckoutSheetKit.Platform.reactNative
+		}
+
+		super.init()
+	}
+
 	override func supportedEvents() -> [String]! {
 		return ["close", "completed", "error", "pixel"]
 	}
@@ -58,12 +66,60 @@ class RCTShopifyCheckoutSheetKit: RCTEventEmitter, CheckoutDelegate {
 		}
 	}
 
-	func checkoutDidFail(error checkoutError: ShopifyCheckoutSheetKit.CheckoutError) {
-		if hasListeners {
-			let errorInfo: [String: Any] = [
-				"message": checkoutError.localizedDescription
-			]
-			self.sendEvent(withName: "error", body: errorInfo)
+	func shouldRecoverFromError(error: CheckoutError) -> Bool {
+		return error.isRecoverable
+	}
+
+	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
+			])
 		}
 	}
 
@@ -120,6 +176,12 @@ class RCTShopifyCheckoutSheetKit: RCTEventEmitter, CheckoutDelegate {
 		return controller
 	}
 
+	@objc func dismiss() {
+		DispatchQueue.main.async {
+			self.checkoutSheet?.dismiss(animated: true)
+		}
+	}
+
 	@objc func present(_ checkoutURL: String) {
 		DispatchQueue.main.async {
 			if let url = URL(string: checkoutURL), let viewController = self.getCurrentViewController() {

modules/@shopify/checkout-sheet-kit/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shopify/checkout-sheet-kit",
   "license": "MIT",
-  "version": "2.0.1",
+  "version": "3.0.0-beta.1",
   "main": "lib/commonjs/index.js",
   "types": "src/index.ts",
   "source": "src/index.ts",

modules/@shopify/checkout-sheet-kit/package.snapshot.json

@@ -13,6 +13,8 @@
   "ios/ShopifyCheckoutSheetKit.swift",
   "lib/commonjs/context.js",
   "lib/commonjs/context.js.map",
+  "lib/commonjs/errors.d.js",
+  "lib/commonjs/errors.d.js.map",
   "lib/commonjs/events.d.js",
   "lib/commonjs/events.d.js.map",
   "lib/commonjs/index.d.js",
@@ -23,6 +25,8 @@
   "lib/commonjs/pixels.d.js.map",
   "lib/module/context.js",
   "lib/module/context.js.map",
+  "lib/module/errors.d.js",
+  "lib/module/errors.d.js.map",
   "lib/module/events.d.js",
   "lib/module/events.d.js.map",
   "lib/module/index.d.js",
@@ -37,6 +41,7 @@
   "lib/typescript/src/index.d.ts.map",
   "package.json",
   "src/context.tsx",
+  "src/errors.d.ts",
   "src/events.d.ts",
   "src/index.d.ts",
   "src/index.ts",

modules/@shopify/checkout-sheet-kit/src/context.tsx

@@ -40,6 +40,7 @@ interface Context {
   removeEventListeners: RemoveEventListeners;
   preload: (checkoutUrl: string) => void;
   present: (checkoutUrl: string) => void;
+  dismiss: () => void;
   version: Maybe<string>;
 }
 
@@ -52,6 +53,7 @@ const ShopifyCheckoutSheetContext = React.createContext<Context>({
   getConfig: async () => undefined,
   preload: noop,
   present: noop,
+  dismiss: noop,
   version: undefined,
 });
 
@@ -92,6 +94,10 @@ export function ShopifyCheckoutSheetProvider({
     }
   }, []);
 
+  const dismiss = useCallback(() => {
+    instance.current?.dismiss();
+  }, []);
+
   const setConfig = useCallback((config: Configuration) => {
     instance.current?.setConfig(config);
   }, []);
@@ -103,6 +109,7 @@ export function ShopifyCheckoutSheetProvider({
   const context = useMemo((): Context => {
     return {
       addEventListener,
+      dismiss,
       setConfig,
       getConfig,
       preload,
@@ -112,6 +119,7 @@ export function ShopifyCheckoutSheetProvider({
     };
   }, [
     addEventListener,
+    dismiss,
     removeEventListeners,
     getConfig,
     setConfig,