@shopify/checkout-sheet-kit (#44)

* @shopify/checkout-sheet-kit

* Update exports + file names

* Fix reference in module package script

* Update README

.gitignore

@@ -84,10 +84,10 @@ 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
+modules/@shopify/checkout-sheet-kit/android/gradle/wrapper/gradle-wrapper.jar
+modules/@shopify/checkout-sheet-kit/android/gradle/wrapper/gradle-wrapper.properties
+modules/@shopify/checkout-sheet-kit/android/gradlew
+modules/@shopify/checkout-sheet-kit/android/gradlew.bat
 
 # Sample bundle
 **/index.android.bundle

CONTRIBUTING.md

@@ -3,8 +3,7 @@
 This repo is subdivided into 3 parts using yarn workspaces:
 
 - The base repo (workspace name = `checkout-kit-react-native`)
-- The `react-native-shopify-checkout-kit` Native Module (workspace name =
-  `module`)
+- The `@shopify/checkout-sheet-kit` Native Module (workspace name = `module`)
 - The sample application (workspace name = `sample`)
 
 Each of the worksapces contains a separate `package.json` to manage tasks
@@ -43,10 +42,9 @@ open both the iOS and Android simulators/emulators respectively.
 ## Making changes to the Native Module
 
 If your intentions are to modify the TS code for the Native Module under
-`modules/react-native-shopify-checkout-kit`, note that you will not need to
-rebuild to observe your changes in the sample app. This is because the sample
-app is importing the TS files directly from the module directory (through
-symlinking).
+`modules/@shopify/checkout-sheet-kit`, note that you will not need to rebuild to
+observe your changes in the sample app. This is because the sample app is
+importing the TS files directly from the module directory (through symlinking).
 
 However, if you're running the iOS/Android tests against the module, you will
 first need to run `yarn module build` each time you change the TS code.
@@ -87,7 +85,7 @@ There are 3 types of tests in this repo: Typescript, Swift and Java - each for
 testing the Native Module.
 
 ```sh
-# Run Jest tests for "modules/react-native-shopify-checkout-kit/src/**/*.tsx"
+# Run Jest tests for "modules/@shopify/checkout-sheet-kit/src/**/*.tsx"
 yarn test
 
 # Run swift tests for the Native Module

README.md

@@ -4,14 +4,15 @@
 
 ![image](https://github.com/Shopify/checkout-kit-react-native/assets/2034704/107fbeb8-50be-43ac-8837-33d576cac9ab)
 
-
-**Shopify Checkout Kit** is a Native Module (currently in [Developer Preview](https://shopify.dev/docs/api/release-notes/developer-previews)) 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 Kit** is a Native Module (currently in
+[Developer Preview](https://shopify.dev/docs/api/release-notes/developer-previews))
+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 Checkout Kit](https://www.shopify.com/partners/blog/mobile-checkout-sdks-for-ios-and-android).
@@ -40,10 +41,10 @@ started:
 Install the Shopify Checkout Kit package dependency:
 
 ```sh
-yarn add react-native-shopify-checkout-kit
+yarn add @shopify/checkout-sheet-kit
 
 # or using npm
-npm install react-native-shopify-checkout-kit
+npm install @shopify/checkout-sheet-kit
 ```
 
 #### 2. Ensure your app meets the minimum Android SDK version requirement
@@ -83,25 +84,25 @@ requirements have been checked, you can begin by importing the library in your
 application code:
 
 ```tsx
-import {ShopifyCheckoutKitProvider} from 'react-native-shopify-checkout-kit';
+import {ShopifyCheckoutSheetProvider} from '@shopify/checkout-sheet-kit';
 
 function AppWithContext() {
   return (
-    <ShopifyCheckoutKitProvider>
+    <ShopifyCheckoutSheetProvider>
       <App />
-    </ShopifyCheckoutKitProvider>
+    </ShopifyCheckoutSheetProvider>
   );
 }
 ```
 
-Doing so will now allow you to access the ShopifyCheckoutKit Native Module
-anywhere in your application using React hooks:
+Doing so will now allow you to access the Native Module anywhere in your
+application using React hooks:
 
 ```tsx
-import {useShopifyCheckoutKit} from 'react-native-shopify-checkout-kit';
+import {useShopifyCheckoutSheet} from '@shopify/checkout-sheet-kit';
 
 function App() {
-  const shopifyCheckout = useShopifyCheckoutKit();
+  const shopifyCheckout = useShopifyCheckoutSheet();
 
   // Present the checkout
   shopifyCheckout.present(checkoutUrl);
@@ -112,20 +113,21 @@ See [Usage with the Storefront API](#usage-with-the-storefront-api) below on how
 to get a checkoutUrl to pass to the SDK.
 
 > Note: The recommended usage of the library is through a
-> `ShopifyCheckoutKitProvider` Context provider, but see
+> `ShopifyCheckoutSheetProvider` Context provider, but see
 > [Programmatic usage](#programamatic-usage) below for details on how to use the
 > library without React context.
 
 ### Programmatic Usage
 
-To use the library without React context, import the `ShopifyCheckoutKit` class
-from the package and instantiate it. We recommend to instantiating the class at
-a high level in your application, and exporting it for use throughout your app.
+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 high level in your application, and exporting it for use throughout
+your app.
 
 ```tsx
-import {ShopifyCheckoutKit} from 'react-native-shopify-checkout-kit';
+import {ShopifyCheckoutSheet} from '@shopify/checkout-sheet-kit';
 
-export const shopifyCheckout = new ShopifyCheckoutKit({
+export const shopifyCheckout = new ShopifyCheckoutSheet({
   // optional configuration
 });
 ```
@@ -219,7 +221,7 @@ browser. To present a native checkout sheet in your application, provide the
 
 ```tsx
 function App() {
-  const shopifyCheckout = useShopifyCheckoutKit()
+  const shopifyCheckout = useShopifyCheckoutSheet()
   const checkoutUrl = useRef<string>(null)
   const [createCart] = useMutation(createCartMutation)
   const [addToCart] = useMutation(addToCartMutation)
@@ -267,7 +269,7 @@ session in the background and ahead of time.
 
 The SDK provides a way to customize the presented checkout experience through a
 `configuration` object in the Context Provider or a `setConfig` method on an
-instance of the `ShopifyCheckoutKit` class.
+instance of the `ShopifyCheckoutSheet` class.
 
 | Name          | Required | Default     | Description                                                                                                                                                    |
 | ------------- | -------- | ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
@@ -281,8 +283,8 @@ Here's an example of how a fully customized configuration object might look:
 import {
   ColorScheme,
   Configuration,
-  ShopifyCheckoutKitProvider,
-} from 'react-native-shopify-checkout-kit';
+  ShopifyCheckoutSheetProvider,
+} from '@shopify/checkout-sheet-kit';
 
 const config: Configuration = {
   colorScheme: ColorScheme.web,
@@ -304,14 +306,14 @@ const config: Configuration = {
 // If using React Context
 function AppWithContext() {
   return (
-    <ShopifyCheckoutKitProvider configuration={config}>
+    <ShopifyCheckoutSheetProvider configuration={config}>
       <App />
-    </ShopifyCheckoutKitProvider>
+    </ShopifyCheckoutSheetProvider>
   );
 }
 
-// If using ShopifyCheckoutKit directly
-const shopifyCheckout = new ShopifyCheckoutKit(config);
+// If using ShopifyCheckoutSheet directly
+const shopifyCheckout = new ShopifyCheckoutSheet(config);
 ```
 
 #### `colorScheme`
@@ -358,8 +360,8 @@ slightly different, as you can specify different overrides for `light` and
 import {
   ColorScheme,
   Configuration,
-  ShopifyCheckoutKitProvider,
-} from 'react-native-shopify-checkout-kit';
+  ShopifyCheckoutSheetProvider,
+} from '@shopify/checkout-sheet-kit';
 
 const config: Configuration = {
   colorScheme: ColorScheme.automatic,
@@ -384,9 +386,9 @@ const config: Configuration = {
 
 function AppWithContext() {
   return (
-    <ShopifyCheckoutKitProvider configuration={config}>
+    <ShopifyCheckoutSheetProvider configuration={config}>
       <App />
-    </ShopifyCheckoutKitProvider>
+    </ShopifyCheckoutSheetProvider>
   );
 }
 ```
@@ -408,11 +410,11 @@ Once enabled, preloading a checkout is as simple as calling
 
 ```tsx
 // using hooks
-const shopifyCheckout = useShopifyCheckoutKit();
+const shopifyCheckout = useShopifyCheckoutSheet();
 ShopifyCheckout.preload(checkoutUrl);
 
 // using a class instance
-const shopifyCheckout = new ShopifyCheckoutKit();
+const shopifyCheckout = new ShopifyCheckoutSheet();
 shopifyCheckout.preload(checkoutUrl);
 ```
 
@@ -452,7 +454,7 @@ an event listener in a React `useEffect`, ensuring to remove it on unmount.
 
 ```tsx
 // Using hooks
-const shopifyCheckout = useShopifyCheckoutKit();
+const shopifyCheckout = useShopifyCheckoutSheet();
 
 useEffect(() => {
   const close = shopifyCheckout.addEventListener('close', () => {

jest.config.js

@@ -1,6 +1,6 @@
 module.exports = {
   preset: 'react-native',
-  modulePathIgnorePatterns: ['modules/react-native-shopify-checkout-kit/lib'],
+  modulePathIgnorePatterns: ['modules/@shopify/checkout-sheet-kit/lib'],
   transform: {
     '\\.[jt]sx?$': 'babel-jest',
   },

metro.config.js

@@ -31,10 +31,10 @@ const config = mergeConfig(getDefaultConfig(__dirname), {
     extraNodeModules: {
       react: path.resolve(sample, 'node_modules', 'react'),
       'react-native': path.resolve(sample, 'node_modules', 'react-native'),
-      'react-native-shopify-checkout-kit': path.resolve(
+      '@shopify/checkout-sheet-kit': path.resolve(
         root,
         'modules',
-        'react-native-shopify-checkout-kit',
+        '@shopify/checkout-sheet-kit',
       ),
     },
   },

modules/react-native-shopify-checkout-kit/react-native-shopify-checkout-kit.podspec → modules/@shopify/checkout-sheet-kit/RNShopifyCheckoutSheetKit.podspec

@@ -7,7 +7,7 @@ folly_compiler_flags = '-DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1
 fabric_enabled = ENV['RCT_NEW_ARCH_ENABLED'] == '1'
 
 Pod::Spec.new do |s|
-  s.name         = package["name"]
+  s.name         = "RNShopifyCheckoutSheetKit"
   s.version      = package["version"]
   s.summary      = package["description"]
   s.homepage     = package["homepage"]

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

@@ -46,7 +46,7 @@ ndkVersion = "23.1.7779620"
 
 android {
   if (supportsNamespace()) {
-    namespace "com.shopify.reactnative.checkoutkit"
+    namespace "com.shopify.reactnative.checkoutsheetkit"
 
     sourceSets {
       main {

modules/react-native-shopify-checkout-kit/android/src/main/AndroidManifest.xml → modules/@shopify/checkout-sheet-kit/android/src/main/AndroidManifest.xml

@@ -1,3 +1,3 @@
 <manifest xmlns:android="http://schemas.android.com/apk/res/android"
-          package="com.shopify.reactnative.checkoutkit">
+          package="com.shopify.reactnative.checkoutsheetkit">
 </manifest>

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

@@ -21,7 +21,7 @@ of this software and associated documentation files (the "Software"), to deal
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */
 
-package com.shopify.reactnative.checkoutkit;
+package com.shopify.reactnative.checkoutsheetkit;
 
 import android.content.Context;
 import com.shopify.checkoutkit.*;

modules/react-native-shopify-checkout-kit/android/src/main/java/com/shopify/reactnative/checkoutkit/ShopifyCheckoutKitModule.java → modules/@shopify/checkout-sheet-kit/android/src/main/java/com/shopify/reactnative/checkoutsheetkit/ShopifyCheckoutSheetKitModule.java

@@ -21,7 +21,7 @@ of this software and associated documentation files (the "Software"), to deal
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */
 
-package com.shopify.reactnative.checkoutkit;
+package com.shopify.reactnative.checkoutsheetkit;
 
 import android.app.Activity;
 import android.content.Context;
@@ -38,14 +38,14 @@ of this software and associated documentation files (the "Software"), to deal
 import java.util.HashMap;
 import java.util.Map;
 
-public class ShopifyCheckoutKitModule extends ReactContextBaseJavaModule {
-  private static final String MODULE_NAME = "ShopifyCheckoutKit";
+public class ShopifyCheckoutSheetKitModule extends ReactContextBaseJavaModule {
+  private static final String MODULE_NAME = "ShopifyCheckoutSheetKit";
 
   public static Configuration checkoutConfig = new Configuration();
 
   private final ReactApplicationContext reactContext;
 
-  public ShopifyCheckoutKitModule(ReactApplicationContext reactContext) {
+  public ShopifyCheckoutSheetKitModule(ReactApplicationContext reactContext) {
     super(reactContext);
 
     this.reactContext = reactContext;
@@ -119,7 +119,7 @@ private boolean isValidColorConfig(ReadableMap config) {
       return false;
     }
 
-    String[] colorKeys = {"backgroundColor", "spinnerColor", "headerTextColor", "headerBackgroundColor"};
+    String[] colorKeys = { "backgroundColor", "spinnerColor", "headerTextColor", "headerBackgroundColor" };
 
     for (String key : colorKeys) {
       if (!config.hasKey(key) || config.getString(key) == null || parseColor(config.getString(key)) == null) {
@@ -170,11 +170,10 @@ private Colors createColorsFromConfig(ReadableMap config) {
 
     if (webViewBackground != null && spinnerColor != null && headerFont != null && headerBackground != null) {
       return new Colors(
-        webViewBackground,
-        headerBackground,
-        headerFont,
-        spinnerColor
-      );
+          webViewBackground,
+          headerBackground,
+          headerFont,
+          spinnerColor);
     }
 
     return null;

modules/react-native-shopify-checkout-kit/android/src/main/java/com/shopify/reactnative/checkoutkit/ShopifyCheckoutKitPackage.java → modules/@shopify/checkout-sheet-kit/android/src/main/java/com/shopify/reactnative/checkoutsheetkit/ShopifyCheckoutSheetKitPackage.java

@@ -21,7 +21,7 @@ of this software and associated documentation files (the "Software"), to deal
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */
 
-package com.shopify.reactnative.checkoutkit;
+package com.shopify.reactnative.checkoutsheetkit;
 
 import com.facebook.react.ReactPackage;
 import com.facebook.react.bridge.NativeModule;
@@ -32,7 +32,7 @@ of this software and associated documentation files (the "Software"), to deal
 import java.util.Collections;
 import java.util.List;
 
-public class ShopifyCheckoutKitPackage implements ReactPackage {
+public class ShopifyCheckoutSheetKitPackage implements ReactPackage {
 
   @Override
   public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
@@ -44,7 +44,7 @@ public List<NativeModule> createNativeModules(
       ReactApplicationContext reactContext) {
     List<NativeModule> modules = new ArrayList<>();
 
-    modules.add(new ShopifyCheckoutKitModule(reactContext));
+    modules.add(new ShopifyCheckoutSheetKitModule(reactContext));
 
     return modules;
   }

modules/react-native-shopify-checkout-kit/ios/ShopifyCheckoutKit.mm → modules/@shopify/checkout-sheet-kit/ios/ShopifyCheckoutSheetKit.mm

@@ -23,7 +23,7 @@ of this software and associated documentation files (the "Software"), to deal
 
 #import <React/RCTBridgeModule.h>
 
-@interface RCT_EXTERN_MODULE(RCTShopifyCheckoutKit, NSObject)
+@interface RCT_EXTERN_MODULE(RCTShopifyCheckoutSheetKit, NSObject)
 
 /// Present checkout
 RCT_EXTERN_METHOD(present:(NSString *)checkoutURLString);

modules/react-native-shopify-checkout-kit/ios/ShopifyCheckoutKit.swift → modules/@shopify/checkout-sheet-kit/ios/ShopifyCheckoutSheetKit.swift

@@ -26,8 +26,8 @@ import ShopifyCheckoutKit
 import UIKit
 import React
 
-@objc(RCTShopifyCheckoutKit)
-class RCTShopifyCheckoutKit: RCTEventEmitter, CheckoutDelegate {
+@objc(RCTShopifyCheckoutSheetKit)
+class RCTShopifyCheckoutSheetKit: RCTEventEmitter, CheckoutDelegate {
 	private var rootViewController: UIViewController?
 
 	private var hasListeners = false