v2.0.0 (#76)

* [iOS] Upgrade to v2

* Update snapshot

* Bump version (major) + add changelog entry

* Update Ci to add lint/test dependency to platform test actions

* Update iOS tests

* [Module] Add tests for completed event handling

* [Android] Add test for completed event

* Reset checkout title

* Update README

* Update Android implementation

* Remove redundant swift comment

* Remove redundant Android dependency

* Make pixel event data required

* Minor TS improvements

* Map CheckoutEvent names to callbacks to remove casting

* Upgrade typescript, revert to casting

* Remove L from color hex

* De-duplicate handleWebPixelEvent and handleCompletedEvent private methods

* Prevent prettier destroying blockquotes in readme

* Improve types

Author: markmur

.github/workflows/ci.yml

@@ -39,6 +39,19 @@ jobs:
 
       - run: ./scripts/compare_snapshot
 
+  lint:
+    name: Lint module + sample
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Setup
+        uses: ./.github/actions/setup
+
+      - run: |
+          yarn module lint
+          yarn sample lint
+
   test:
     name: Run jest tests
     runs-on: ubuntu-latest
@@ -53,6 +66,7 @@ jobs:
   test-android:
     name: Run Android Tests
     runs-on: ubuntu-latest
+    needs: [lint, test]
     steps:
       - name: Checkout
         uses: actions/checkout@v3
@@ -75,6 +89,7 @@ jobs:
   test-ios:
     name: Run iOS Tests
     runs-on: macos-13
+    needs: [lint, lint-swift, test]
     steps:
       - name: Checkout
         uses: actions/checkout@v3

CHANGELOG.md

@@ -1,5 +1,45 @@
 # Changelog
 
+## 2.0.0 - March 21, 2024
+
+### Updated dependencies
+
+- [`[email protected]`](https://github.com/Shopify/checkout-sheet-kit-swift/releases)
+- [`[email protected]`](https://github.com/Shopify/checkout-sheet-kit-android/releases)
+
+### New features
+
+1. The loading spinner has been replaced by a progress bar. This will result in
+   a faster perceived load time since the SDK will now no longer wait for full
+   page load to show the DOM content.
+2. The "title" of the webview is now configurable via a `Localizable.xcstrings`
+   file on iOS, a `res/values/strings.xml` on Android or using the `title`
+   attribute on the ShopifyCheckoutSheetKit configuration.
+
+> [!IMPORTANT] 
+> The `title` attribute on the configuration will configure iOS _only_.
+
+```diff
+ShopifyCheckoutSheetKit.setConfig({
++ title: "Localized value"
+})
+```
+
+1. The `completed` event now returns details about the order, including the
+   order ID:
+
+```diff
+- const checkoutCompletedSubscription = shopify.addEventListener('completed', () => {
++ const checkoutCompletedSubscription = shopify.addEventListener('completed', event => {
++  console.log('[CheckoutCompletedEvent]', event.orderDetails.id);
+});
+```
+
+### Breaking changes
+
+1. `spinnerColor` has been replaced by `tintColor` for iOS and
+   `progressIndicator` for android.
+
 ## 1.0.5 - March 5, 2024
 
 - Updates the underlying swift SDK from `1.0.1` to `1.0.2` to include

README.md

@@ -110,14 +110,18 @@ function App() {
 ```
 
 See [Usage with the Storefront API](#usage-with-the-storefront-api) below on how
-to get a checkoutUrl to pass to the SDK.
+to get a checkout URL to pass to the kit.
+
+<!-- prettier-ignore-start -->
 
 > [!NOTE]
 > The recommended usage of the library is through a
 > `ShopifyCheckoutSheetProvider` Context provider, but see
 > [Programmatic usage](#programamatic-usage) below for details on how to use the
 > library without React context.
 
+<!-- prettier-ignore-end -->
+
 ### Programmatic Usage
 
 To use the library without React context, import the `ShopifyCheckoutSheet`
@@ -264,11 +268,15 @@ function App() {
 }
 ```
 
+<!-- prettier-ignore-start -->
+
 > [!TIP]
-> To help optimize and deliver the best experience the SDK also provides a
-> [preloading API](#preloading) that can be used to initialize the checkout
+> To help optimize and deliver the best experience the SDK also provides
+> a [preloading API](#preloading) that can be used to initialize the checkout
 > session in the background and ahead of time.
 
+<!-- prettier-ignore-end -->
+
 ### Configuration
 
 The SDK provides a way to customize the presented checkout experience through a
@@ -296,11 +304,11 @@ const config: Configuration = {
   colors: {
     ios: {
       backgroundColor: '#f0f0e8',
-      spinnerColor: '#2d2a38',
+      tintColor: '#2d2a38',
     },
     android: {
       backgroundColor: '#f0f0e8',
-      spinnerColor: '#2d2a38',
+      progressIndicator: '#2d2a38',
       headerBackgroundColor: '#f0f0e8',
       headerTextColor: '#2d2a38',
     },
@@ -344,11 +352,11 @@ const config: Configuration = {
   colors: {
     ios: {
       backgroundColor: '#ffffff',
-      spinnerColor: '#000000',
+      tintColor: '#000000',
     },
     android: {
       backgroundColor: '#ffffff',
-      spinnerColor: '#2d2a38',
+      progressIndicator: '#2d2a38',
       headerBackgroundColor: '#ffffff',
       headerTextColor: '#000000',
     },
@@ -374,13 +382,13 @@ const config: Configuration = {
     android: {
       light: {
         backgroundColor: '#ffffff',
-        spinnerColor: '#2d2a38',
+        progressIndicator: '#2d2a38',
         headerBackgroundColor: '#ffffff',
         headerTextColor: '#000000',
       },
       dark: {
         backgroundColor: '#000000',
-        spinnerColor: '#0087ff',
+        progressIndicator: '#0087ff',
         headerBackgroundColor: '#000000',
         headerTextColor: '#ffffff',
       },
@@ -397,6 +405,88 @@ function AppWithContext() {
 }
 ```
 
+### Localization
+
+#### Checkout Sheet title
+
+There are several ways to change the title of the Checkout Sheet.
+
+##### iOS
+
+On iOS, you can set a localized value on the `title` attribute of the
+configuration.
+
+Alternatively, use a Localizable.xcstrings file in your app by doing the
+following:
+
+1. Create a `Localizable.xcstrings` file under "ios/{YourApplicationName}"
+2. Add an entry for the key `"shopify_checkout_sheet_title"`
+
+##### Android
+
+On Android, you can add a string entry for the key `"checkout_web_view_title"`
+to the "android/app/src/res/values/strings.xml" file for your application.
+
+```diff
+<resources>
+    <string name="app_name">Your App Name</string>
++    <string name="checkout_web_view_title">Checkout</string>
+</resources>
+```
+
+<!-- prettier-ignore-start -->
+
+> [!IMPORTANT]
+> The `title` configuration attribute will only affect iOS. For Android you **must** use
+> `res/values/strings.xml`.
+
+<!-- prettier-ignore-end -->
+
+#### Currency
+
+To set an appropriate currency for a given cart, the Storefront API offers an
+`@inContext(country)` directive which will ensure the correct currency is
+presented.
+
+```tsx
+const CREATE_CART_MUTATION = gql`
+  mutation CreateCart($input: CartInput, $country: CountryCode = CA)
+  @inContext(country: $country) {
+    cartCreate(input: $input) {
+      cart {
+        id
+        checkoutUrl
+      }
+    }
+  }
+`;
+```
+
+See [Storefront Directives](https://shopify.dev/docs/api/storefront#directives)
+for more information.
+
+#### Language
+
+Similarly to currency, you can use an `@inContext(language)` directive to set
+the language for your checkout.
+
+```tsx
+const CREATE_CART_MUTATION = gql`
+  mutation CreateCart($input: CartInput, $language: Language = EN)
+  @inContext(language: $language) {
+    cartCreate(input: $input) {
+      cart {
+        id
+        checkoutUrl
+      }
+    }
+  }
+`;
+```
+
+See [Storefront Directives](https://shopify.dev/docs/api/storefront#directives)
+for more information.
+
 ### Preloading
 
 Initializing a checkout session requires communicating with Shopify servers,
@@ -444,12 +534,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.             |
-| `pixel`     | `(event: PixelEvent) => void`        | Fired when a Web Pixel event has been relayed from checkout. |
+| Name        | Callback                                  | Description                                                  |
+| ----------- | ----------------------------------------- | ------------------------------------------------------------ |
+| `close`     | `() => void`                              | Fired when the checkout has been closed.                     |
+| `completed` | `(event: CheckoutCompletedEvent) => 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)`
 
@@ -466,9 +556,13 @@ useEffect(() => {
     // Do something on checkout close
   });
 
-  const completed = shopifyCheckout.addEventListener('completed', () => {
-    // Do something on checkout completion
-  });
+  const completed = shopifyCheckout.addEventListener(
+    'completed',
+    (event: CheckoutCompletedEvent) => {
+      // Lookup order on checkout completion
+      const orderId = event.orderDetails.id;
+    },
+  );
 
   const error = shopifyCheckout.addEventListener(
     'error',
@@ -565,10 +659,14 @@ external identity system and initialize a buyer-aware checkout session.
    `checkoutUrl`
 2. Provide the Multipass URL to `present(checkoutUrl)`
 
+<!-- prettier-ignore-start -->
+
 > [!IMPORTANT]
-> The above JSON omits useful customer attributes that should be provided
-> where possible and encryption and signing should be done server-side to ensure
-> Multipass keys are kept secret._
+> The above JSON omits useful customer attributes that should be
+> provided where possible and encryption and signing should be done server-side
+> to ensure Multipass keys are kept secret.
+
+<!-- prettier-ignore-end -->
 
 #### Shop Pay
 
@@ -595,7 +693,8 @@ see [guidelines and instructions](.github/CONTRIBUTING.md). See
 
 #### Running the sample app
 
-To run the sample app in this repo, first clone the repo and run the following commands at the root of the project directory.
+To run the sample app in this repo, first clone the repo and run the following
+commands at the root of the project directory.
 
 #### Install NPM dependencies
 
@@ -617,7 +716,8 @@ yarn module build
 
 #### Update the dotenv file
 
-Replace the details in the `sample/.env.example` file and rename it to `sample/.env`
+Replace the details in the `sample/.env.example` file and rename it to
+`sample/.env`
 
 ```
 # Storefront Details

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", "~> 1.0.2"
+	s.dependency "ShopifyCheckoutSheetKit", "~> 2.0.1"
 
   if fabric_enabled
 		install_modules_dependencies(s)

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

@@ -90,7 +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.9.0"
+  // Uncomment to install dependencies for local development
+  //  implementation("com.facebook.react:react-android:+")
+
   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=1.0.0
+SHOPIFY_CHECKOUT_SDK_VERSION=2.0.1