Add support for Checkout events, add ShopifyCheckoutKitProvider context (#20)

* Update API

* Write events for Android

* Add license to context file

* Update snapshot

* Add SwiftLint pod dependency + yarn task to run locally

* dismiss -> cancel

* Update Android to 0.3.3, expose error message in checkoutDidFail event

* cancel -> close

* Remove listener count

* Simplify ShopifyCheckoutKit interface, remove redundant NativeModule listeners, expose add/remove to class

Author: markmur

.gitignore

@@ -82,3 +82,9 @@ sample/ios/Pods/
 lib
 dist
 .turbo
+
+# Module
+modules/react-native-shopify-checkout-kit/android/gradle/wrapper/gradle-wrapper.jar
+modules/react-native-shopify-checkout-kit/android/gradle/wrapper/gradle-wrapper.properties
+modules/react-native-shopify-checkout-kit/android/gradlew
+modules/react-native-shopify-checkout-kit/android/gradlew.bat

README.md

@@ -83,8 +83,6 @@ function YourReactNativeApp() {
 The `checkoutURL` object is a standard web checkout URL that can be opened in any browser. To present a native checkout sheet in your application, provide the `checkoutURL` alongside optional runtime configuration settings to the `present(checkoutURL)` function provided by the SDK:
 
 ```tsx
-import {ShopifyCheckoutKit} from "react-native-shopify-checkout-kit"
-
 function App() {
   const [createCart] = useMutation(createCartMutation)
   const [addToCart] = useMutation(addToCartMutation)
@@ -98,9 +96,24 @@ function App() {
 The `checkoutUrl` value is a standard web checkout URL that can be opened in any browser. To present a native checkout sheet in your application, provide the `checkoutUrl` alongside optional runtime configuration settings to the `present(checkoutUrl)` function provided by the SDK:
 
 ```tsx
-import {ShopifyCheckoutKit} from "react-native-shopify-checkout-kit"
+import {ShopifyCheckoutKitProvider, ColorScheme} from "react-native-shopify-checkout-kit"
+
+function AppWithContext() {
+  return (
+    <ShopifyCheckoutKitProvider
+      configuration={{
+        colorScheme: ColorScheme.automatic
+      }}
+    >
+      <ApolloProvider>
+        <App />
+      </ApolloProvider>
+    </ShopifyCheckoutKitProvider>
+  )
+}
 
 function App() {
+  const shopifyCheckout = useShopifyCheckoutKit()
   const checkoutUrl = useRef<string>(null)
   const [createCart] = useMutation(createCartMutation)
   const [addToCart] = useMutation(addToCartMutation)
@@ -117,11 +130,15 @@ function App() {
     })
     // Retrieve checkoutUrl from the Storefront response
     checkoutUrl.current = addToCartResponse.cartLinesAdd.cart.checkoutUrl
+
+    // Preload the checkout in the background for faster presentation
+    shopifyCheckout.preload(checkoutUrl.current)
   }, []);
 
   const handleCheckout = useCallback(() => {
     if (checkoutURL.current) {
-      ShopifyCheckoutKit.present(checkoutURL.current)
+      // Present the checkout to the buyer
+      shopifyCheckout.present(checkoutURL.current)
     }
   }, [])
 

.swiftlint.yml …tive-shopify-checkout-kit/.swiftlint.yml.swiftlint.yml renamed to modules/react-native-shopify-checkout-kit/.swiftlint.yml .swiftlint.yml renamed to modules/react-native-shopify-checkout-kit/.swiftlint.yml

@@ -2,7 +2,6 @@ disabled_rules:
   - line_length
   - redundant_void_return
   - todo
-  - tailing_comma
 
 opt_in_rules:
   - array_init

modules/react-native-shopify-checkout-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=0.3.2
+SHOPIFY_CHECKOUT_SDK_VERSION=0.3.3

modules/react-native-shopify-checkout-kit/android/src/main/java/com/shopifycheckoutkit/CustomCheckoutEventProcessor.java

@@ -25,24 +25,46 @@ of this software and associated documentation files (the "Software"), to deal
 
 import android.content.Context;
 import com.shopify.checkoutkit.*;
+import com.facebook.react.modules.core.DeviceEventManagerModule;
+import com.facebook.react.bridge.ReactMethod;
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.bridge.ReactContextBaseJavaModule;
+import com.facebook.react.bridge.ReactContext;
+import com.facebook.react.bridge.WritableMap;
+import com.facebook.react.bridge.Arguments;
+import org.jetbrains.annotations.Nullable;
 
 public class CustomCheckoutEventProcessor extends DefaultCheckoutEventProcessor {
-  public CustomCheckoutEventProcessor(Context context) {
+  private ReactContext reactContext;
+
+  public CustomCheckoutEventProcessor(Context context, ReactContext reactContext) {
     super(context);
+
+    this.reactContext = reactContext;
   }
 
   @Override
   public void onCheckoutCompleted() {
-    // Handle checkout completion
+    sendEvent(this.reactContext, "completed", null);
   }
 
   @Override
-  public void onCheckoutFailed(CheckoutException error) {
-    // Handle checkout failure
+  public void onCheckoutFailed(CheckoutException checkoutError) {
+    WritableMap error = Arguments.createMap();
+
+    error.putString("message", checkoutError.getErrorDescription());
+
+    sendEvent(this.reactContext, "error", error);
   }
 
   @Override
   public void onCheckoutCanceled() {
-    // Handle checkout cancellation
+    sendEvent(this.reactContext, "close", null);
+  }
+
+  private void sendEvent(ReactContext reactContext, String eventName, @Nullable WritableMap params) {
+    reactContext
+      .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
+      .emit(eventName, params);
   }
 }

modules/react-native-shopify-checkout-kit/android/src/main/java/com/shopifycheckoutkit/ShopifyCheckoutKitModule.java

@@ -46,8 +46,12 @@ public class ShopifyCheckoutKitModule extends ReactContextBaseJavaModule {
 
   private static Configuration checkoutConfig = new Configuration();
 
+  private ReactApplicationContext reactContext;
+
   public ShopifyCheckoutKitModule(ReactApplicationContext reactContext) {
     super(reactContext);
+
+    this.reactContext = reactContext;
   }
 
   @Override
@@ -62,12 +66,22 @@ public Map<String, Object> getConstants() {
     return constants;
   }
 
+  @ReactMethod
+  public void addListener(String eventName) {
+    // No-op but required for RN to register module
+  }
+
+  @ReactMethod
+  public void removeListeners(Integer count) {
+    // No-op but required for RN to register module
+  }
+
   @ReactMethod
   public void present(String checkoutURL) {
     Activity currentActivity = getCurrentActivity();
     if (currentActivity instanceof ComponentActivity) {
       Context appContext = getReactApplicationContext();
-      CheckoutEventProcessor checkoutEventProcessor = new CustomCheckoutEventProcessor(appContext);
+      CheckoutEventProcessor checkoutEventProcessor = new CustomCheckoutEventProcessor(appContext, this.reactContext);
       currentActivity.runOnUiThread(() -> {
         ShopifyCheckoutKit.present(checkoutURL, (ComponentActivity) currentActivity,
             checkoutEventProcessor);

modules/react-native-shopify-checkout-kit/ios/ShopifyCheckoutKit.swift

@@ -24,22 +24,64 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SO
 import Foundation
 import ShopifyCheckoutKit
 import UIKit
+import React
 
 @objc(RCTShopifyCheckoutKit)
-class RCTShopifyCheckoutKit: UIViewController, CheckoutDelegate {
-	func checkoutDidComplete() {}
+class RCTShopifyCheckoutKit: RCTEventEmitter, CheckoutDelegate {
+	private var rootViewController: UIViewController?
 
-	func checkoutDidFail(error _: ShopifyCheckoutKit.CheckoutError) {}
+	private var hasListeners = false
+
+	override init() {
+		super.init()
+		self.rootViewController = UIApplication.shared.delegate?.window??.rootViewController
+	}
+
+	override var methodQueue: DispatchQueue! {
+		return DispatchQueue.main
+	}
+
+	@objc override static func requiresMainQueueSetup() -> Bool {
+		return true
+	}
+
+	override func supportedEvents() -> [String]! {
+		return ["close", "completed", "error"]
+	}
+
+	override func startObserving() {
+		hasListeners = true
+	}
+
+	override func stopObserving() {
+		hasListeners = false
+	}
+
+	func checkoutDidComplete() {
+		if hasListeners {
+			self.sendEvent(withName: "completed", body: nil)
+		}
+	}
+
+	func checkoutDidFail(error checkoutError: ShopifyCheckoutKit.CheckoutError) {
+		if hasListeners {
+			let errorInfo: [String: Any] = [
+				"message": checkoutError.localizedDescription
+			]
+			self.sendEvent(withName: "error", body: errorInfo)
+		}
+	}
 
 	func checkoutDidCancel() {
 		DispatchQueue.main.async {
-			if let rootViewController = UIApplication.shared.delegate?.window??.rootViewController {
-				rootViewController.dismiss(animated: true)
+			if self.hasListeners {
+				self.sendEvent(withName: "close", body: nil)
 			}
+			self.rootViewController?.dismiss(animated: true)
 		}
 	}
 
-	@objc func constantsToExport() -> [String: String]! {
+	@objc override func constantsToExport() -> [AnyHashable: Any]! {
 		return [
 			"version": ShopifyCheckoutKit.version
 		]
@@ -96,7 +138,7 @@ class RCTShopifyCheckoutKit: UIViewController, CheckoutDelegate {
 
 		if let backgroundColorHex = iosConfig?["backgroundColor"] as? String {
 			ShopifyCheckoutKit.configuration.backgroundColor = UIColor(hex: backgroundColorHex)
-		}
+    }
 	}
 
 	@objc func getConfig(_ resolve: @escaping RCTPromiseResolveBlock, reject _: @escaping RCTPromiseRejectBlock) {
@@ -107,10 +149,6 @@ class RCTShopifyCheckoutKit: UIViewController, CheckoutDelegate {
 
 		resolve(config)
 	}
-
-	@objc static func requiresMainQueueSetup() -> Bool {
-		return true
-	}
 }
 
 extension UIColor {

modules/react-native-shopify-checkout-kit/package.json

@@ -15,6 +15,7 @@
   "scripts": {
     "clean": "rm -rf lib",
     "build": "bob build",
+    "lint:swift": "./../../sample/ios/Pods/SwiftLint/swiftlint --strict --quiet ios",
     "lint": "yarn typecheck && eslint src",
     "prepack": "yarn clean && yarn build",
     "typecheck": "tsc --noEmit"

modules/react-native-shopify-checkout-kit/package.snap

@@ -11,18 +11,25 @@
   "ios/ShopifyCheckoutKit-Bridging-Header.h",
   "ios/ShopifyCheckoutKit.mm",
   "ios/ShopifyCheckoutKit.swift",
+  "lib/commonjs/context.js",
+  "lib/commonjs/context.js.map",
   "lib/commonjs/index.d.js",
   "lib/commonjs/index.d.js.map",
   "lib/commonjs/index.js",
   "lib/commonjs/index.js.map",
+  "lib/module/context.js",
+  "lib/module/context.js.map",
   "lib/module/index.d.js",
   "lib/module/index.d.js.map",
   "lib/module/index.js",
   "lib/module/index.js.map",
+  "lib/typescript/src/context.d.ts",
+  "lib/typescript/src/context.d.ts.map",
   "lib/typescript/src/index.d.ts",
   "lib/typescript/src/index.d.ts.map",
   "package.json",
   "react-native-shopify-checkout-kit.podspec",
+  "src/context.tsx",
   "src/index.d.ts",
   "src/index.tsx"
 ]