[0.2.0] Add support for Web Pixel events (#57)

* Add support for Web Pixel events

Author: markmur

.github/actions/setup/action.yml

@@ -7,7 +7,7 @@ runs:
     - name: Setup Node.js
       uses: actions/setup-node@v3
       with:
-        node-version: 18
+        node-version: 20
 
     - name: Cache turbo build setup
       uses: actions/cache@v3

.gitignore

@@ -91,3 +91,4 @@ modules/@shopify/checkout-sheet-kit/android/gradlew.bat
 
 # Sample bundle
 **/index.android.bundle
+.xcode.env.local

CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## 0.2.0 - January 30, 2024
+
+Exposes a new `pixel` event type, which enables you to consume
+[Standard](https://shopify.dev/docs/api/web-pixels-api/standard-events) and
+[Custom](https://shopify.dev/docs/api/web-pixels-api/emitting-data#publishing-custom-events)
+Web Pixels from Checkout and relay them to your third-party analytics providers.
+
 ## 0.1.1 - January 15, 2024
 
 Updates the README on the NPM regsitry entry page.

README.md

@@ -4,7 +4,13 @@
 
 ![image](https://github.com/Shopify/checkout-sheet-kit-react-native/assets/2034704/73246cc6-bd39-4130-a7df-69b06907b897)
 
-**Shopify Checkout Sheet Kit** is a Native Module that enables React Native apps to provide the world’s highest converting, customizable, one-page checkout within the app. The presented experience is a fully-featured checkout that preserves all of the store customizations: Checkout UI extensions, Functions, branding, and more. It also provides platform idiomatic defaults such as support for light and dark mode, and convenient developer APIs to embed, customize, and follow the lifecycle of the checkout experience.
+**Shopify Checkout Sheet Kit** is a Native Module that enables React Native apps
+to provide the world’s highest converting, customizable, one-page checkout
+within the app. The presented experience is a fully-featured checkout that
+preserves all of the store customizations: Checkout UI extensions, Functions,
+branding, and more. It also provides platform idiomatic defaults such as support
+for light and dark mode, and convenient developer APIs to embed, customize, and
+follow the lifecycle of the checkout experience.
 
 Check out our blog to
 [learn how and why we built the Shopify Checkout Sheet Kit](https://www.shopify.com/partners/blog/mobile-checkout-sdks-for-ios-and-android).
@@ -24,9 +30,10 @@ experiences.
 
 ### Getting Started
 
-Shopify Checkout Sheet Kit is an open-source NPM package. 
+Shopify Checkout Sheet Kit is an open-source NPM package.
 
-Use the following steps to get started with adding it to your React Native application:
+Use the following steps to get started with adding it to your React Native
+application:
 
 #### 1. Install
 
@@ -113,8 +120,8 @@ to get a checkoutUrl to pass to the SDK.
 
 To use the library without React context, import the `ShopifyCheckoutSheet`
 class from the package and instantiate it. We recommend to instantiating the
-class at a relatively high level in your application, and exporting it for use throughout
-your app.
+class at a relatively high level in your application, and exporting it for use
+throughout your app.
 
 ```tsx
 // shopify.ts
@@ -320,7 +327,7 @@ behavior can be customized via the `colorScheme` property:
 | ----------- | ------- | ------------------------------------------------------------------------------------------------ |
 | `automatic` | ✔       | Alternates between an idiomatic light and dark theme - depending on the users device preference. |
 | `light`     |         | Force the idomatic light theme.                                                                  |
-| `dark`      |         | Force the idomatic dark theme.                                                                  |
+| `dark`      |         | Force the idomatic dark theme.                                                                   |
 | `web`       |         | Force your storefront web theme, as rendered by a mobile browser.                                |
 
 #### `colors`
@@ -434,11 +441,12 @@ There are currently 3 checkout events exposed through the Native Module. You can
 subscribe to these events using `addEventListener` and `removeEventListeners`
 methods - available on both the context provider as well as the class instance.
 
-| Name        | Callback                             | Description                                              |
-| ----------- | ------------------------------------ | -------------------------------------------------------- |
-| `close`     | `() => void`                         | Fired when the checkout has been closed.                 |
-| `completed` | `() => void`                         | Fired when the checkout has been successfully completed. |
-| `error`     | `(error: {message: string}) => void` | Fired when a checkout exception has been raised.         |
+| Name        | Callback                             | Description                                                  |
+| ----------- | ------------------------------------ | ------------------------------------------------------------ |
+| `close`     | `() => void`                         | Fired when the checkout has been closed.                     |
+| `completed` | `() => void`                         | Fired when the checkout has been successfully completed.     |
+| `error`     | `(error: {message: string}) => void` | Fired when a checkout exception has been raised.             |
+| `pixel`     | `(event: PixelEvent) => void`        | Fired when a Web Pixel event has been relayed from checkout. |
 
 #### `addEventListener(eventName, callback)`
 
@@ -459,16 +467,30 @@ useEffect(() => {
     // Do something on checkout completion
   });
 
-  const error = shopifyCheckout.addEventListener('error', error => {
-    // Do something on checkout error
-    // console.log(error.message)
-  });
+  const error = shopifyCheckout.addEventListener(
+    'error',
+    (error: CheckoutError) => {
+      // Do something on checkout error
+      // console.log(error.message)
+    },
+  );
+
+  const pixel = shopifyCheckout.addEventListener(
+    'pixel',
+    (event: PixelEvent) => {
+      // Dispatch web pixel events to third-party services
+      if (hasPermissionToTrack) {
+        sendEventToAnalyticsProvider(event);
+      }
+    },
+  );
 
   return () => {
     // It is important to clear the subscription on unmount to prevent memory leaks
     close?.remove();
     completed?.remove();
     error?.remove();
+    pixel?.remove();
   };
 }, [shopifyCheckout]);
 ```
@@ -482,10 +504,24 @@ On the rare occasion that you want to remove all event listeners for a given
 
 App developers can use
 [lifecycle events](#monitoring-the-lifecycle-of-a-checkout-session) to monitor
-and log the status of a checkout session. Web Pixel events are currently not
-executed within rendered checkout. Support for customer events and behavioral
-analytics is under development and will be available prior to the general
-availability of SDK.
+and log the status of a checkout session.
+
+\*\*For behavioural monitoring,
+[standard](https://shopify.dev/docs/api/web-pixels-api/standard-events) and
+[custom](https://shopify.dev/docs/api/web-pixels-api#custom-web-pixels) Web
+Pixel events will be relayed back to your application through the `"pixel"`
+event listener. The responsibility then falls on the application developer to
+ensure adherence to Apple's privacy policy and local regulations like GDPR and
+ePrivacy directive before disseminating these events to first-party and
+third-party systems.
+
+_Note that you will likely need to augment these events with customer/session
+information derived from app state._
+
+_Also note that the customData attribute of CustomPixelEvent can take on any
+shape. As such, this attribute will be returned as a String. Client applications
+should define a custom data type and deserialize the customData string into that
+type._
 
 ### Integrating identity & customer accounts
 
@@ -517,8 +553,7 @@ external identity system and initialize a buyer-aware checkout session.
   "email": "<Customer's email address>",
   "created_at": "<Current timestamp in ISO8601 encoding>",
   "remote_ip": "<Client IP address>",
-  "return_to": "<Checkout URL obtained from Storefront API>",
-  ...
+  "return_to": "<Checkout URL obtained from Storefront API>"
 }
 ```
 

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

@@ -2,6 +2,7 @@ disabled_rules:
   - line_length
   - redundant_void_return
   - todo
+  - switch_case_alignment
 
 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", "~> 0.9"
+	s.dependency "ShopifyCheckoutSheetKit", "~> 0.10.1"
 
   if fabric_enabled
 		install_modules_dependencies(s)

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

@@ -90,8 +90,9 @@ dependencies {
   // For > 0.71, this will be replaced by `com.facebook.react:react-android:$version` by react gradle plugin
   //noinspection GradleDynamicVersion
   implementation "com.facebook.react:react-native:+"
-  implementation "org.jetbrains.kotlin:kotlin-stdlib:1.7.0"
+  implementation "org.jetbrains.kotlin:kotlin-stdlib:1.9.0"
   implementation("com.shopify:checkout-sheet-kit:${SHOPIFY_CHECKOUT_SDK_VERSION}")
+  implementation("com.fasterxml.jackson.core:jackson-databind:2.12.5")
   debugImplementation("com.shopify:checkout-sheet-kit:${SHOPIFY_CHECKOUT_SDK_VERSION}")
 }
 

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=0.4.1
+SHOPIFY_CHECKOUT_SDK_VERSION=0.5.0

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

@@ -24,18 +24,19 @@ of this software and associated documentation files (the "Software"), to deal
 package com.shopify.reactnative.checkoutsheetkit;
 
 import android.content.Context;
+import android.util.Log;
+import androidx.annotation.NonNull;
 import com.shopify.checkoutsheetkit.*;
 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.JavaOnlyMap;
+import com.facebook.react.bridge.WritableNativeMap;
+import com.shopify.checkoutsheetkit.pixelevents.PixelEvent;
+import com.fasterxml.jackson.databind.ObjectMapper;
 import org.jetbrains.annotations.Nullable;
+import java.io.IOException;
 
 public class CustomCheckoutEventProcessor extends DefaultCheckoutEventProcessor {
-  private ReactContext reactContext;
+  private final ReactContext reactContext;
 
   public CustomCheckoutEventProcessor(Context context, ReactContext reactContext) {
     super(context);
@@ -45,26 +46,43 @@ public CustomCheckoutEventProcessor(Context context, ReactContext reactContext)
 
   @Override
   public void onCheckoutCompleted() {
-    sendEvent(this.reactContext, "completed", null);
+    sendEvent("completed", null);
+  }
+
+  @Override
+  public void onWebPixelEvent(@NonNull PixelEvent event) {
+    try {
+      ObjectMapper mapper = new ObjectMapper();
+      String data = mapper.writeValueAsString(event);
+      sendPixelEvent(data);
+    } catch (IOException e) {
+      Log.e("ShopifyCheckoutSheetKit", "Error processing pixel event", e);
+    }
   }
 
   @Override
   public void onCheckoutFailed(CheckoutException checkoutError) {
-    JavaOnlyMap error = new JavaOnlyMap();
+    WritableNativeMap error = new WritableNativeMap();
 
     error.putString("message", checkoutError.getErrorDescription());
 
-    sendEvent(this.reactContext, "error", error);
+    sendEvent("error", error);
   }
 
   @Override
   public void onCheckoutCanceled() {
-    sendEvent(this.reactContext, "close", null);
+    sendEvent("close", null);
   }
 
-  private void sendEvent(ReactContext reactContext, String eventName, @Nullable WritableMap params) {
+  private void sendEvent(String eventName, @Nullable WritableNativeMap params) {
     reactContext
         .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
         .emit(eventName, params);
   }
+
+  private void sendPixelEvent(String data) {
+    reactContext
+      .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
+      .emit("pixel", data);
+  }
 }