Rename configure to setConfig (#27)

markmur · web-flow · commit 5624f9fa49f8 · 2023-12-04T14:26:51.000Z
* Rename configure to setConfig

* Rename bridge function for iOS/Android, update tests

* Update iOS and Android tests

* Fix header text color on Android
diff --git a/README.md b/README.md
@@ -266,7 +266,7 @@ session in the background and ahead of time.
 ### Configuration
 
 The SDK provides a way to customize the presented checkout experience through a
-`configuration` object in the Context Provider or a `configure` method on an
+`configuration` object in the Context Provider or a `setConfig` method on an
 instance of the `ShopifyCheckoutKit` class.
 
 | Name          | Required | Default     | Description                                                                                                                                                    |
diff --git a/modules/react-native-shopify-checkout-kit/android/src/main/java/com/shopifycheckoutkit/ShopifyCheckoutKitModule.java b/modules/react-native-shopify-checkout-kit/android/src/main/java/com/shopifycheckoutkit/ShopifyCheckoutKitModule.java
@@ -216,7 +216,7 @@ private ColorScheme getColors(ColorScheme colorScheme, ReadableMap config) {
   }
 
   @ReactMethod
-  public void configure(ReadableMap config) {
+  public void setConfig(ReadableMap config) {
     Context context = getReactApplicationContext();
 
     ShopifyCheckoutKit.configure(configuration -> {
diff --git a/modules/react-native-shopify-checkout-kit/ios/ShopifyCheckoutKit.mm b/modules/react-native-shopify-checkout-kit/ios/ShopifyCheckoutKit.mm
@@ -32,7 +32,7 @@ @interface RCT_EXTERN_MODULE(RCTShopifyCheckoutKit, NSObject)
 RCT_EXTERN_METHOD(preload:(NSString *)checkoutURLString);
 
 /// Set configuration for checkout
-RCT_EXTERN_METHOD(configure:(NSDictionary *)configuration);
+RCT_EXTERN_METHOD(setConfig:(NSDictionary *)configuration);
 
 // Return configuration for checkout
 RCT_EXTERN_METHOD(getConfig: (RCTPromiseResolveBlock) resolve reject: (RCTPromiseRejectBlock) reject)
diff --git a/modules/react-native-shopify-checkout-kit/ios/ShopifyCheckoutKit.swift b/modules/react-native-shopify-checkout-kit/ios/ShopifyCheckoutKit.swift
@@ -120,7 +120,7 @@ class RCTShopifyCheckoutKit: RCTEventEmitter, CheckoutDelegate {
 		}
 	}
 
-	@objc func configure(_ configuration: [AnyHashable: Any]) {
+	@objc func setConfig(_ configuration: [AnyHashable: Any]) {
 		let colorConfig = configuration["colors"] as? [AnyHashable: Any]
 		let iosConfig = colorConfig?["ios"] as? [String: String]
 
diff --git a/modules/react-native-shopify-checkout-kit/src/context.tsx b/modules/react-native-shopify-checkout-kit/src/context.tsx
@@ -36,10 +36,10 @@ type Maybe<T> = T | undefined;
 interface Context {
   addEventListener: AddEventListener;
   getConfig: () => Promise<Configuration | undefined>;
+  setConfig: (config: Configuration) => void;
   removeEventListeners: RemoveEventListeners;
   preload: (checkoutUrl: string) => void;
   present: (checkoutUrl: string) => void;
-  configure: (config: Configuration) => void;
   version: Maybe<string>;
 }
 
@@ -48,7 +48,7 @@ const noop = () => undefined;
 const ShopifyCheckoutKitContext = React.createContext<Context>({
   addEventListener: noop,
   removeEventListeners: noop,
-  configure: noop,
+  setConfig: noop,
   getConfig: async () => undefined,
   preload: noop,
   present: noop,
@@ -92,8 +92,8 @@ export function ShopifyCheckoutKitProvider({
     }
   }, []);
 
-  const configure = useCallback((config: Configuration) => {
-    instance.current?.configure(config);
+  const setConfig = useCallback((config: Configuration) => {
+    instance.current?.setConfig(config);
   }, []);
 
   const getConfig = useCallback(async () => {
@@ -103,7 +103,7 @@ export function ShopifyCheckoutKitProvider({
   const context = useMemo((): Context => {
     return {
       addEventListener,
-      configure,
+      setConfig,
       getConfig,
       preload,
       present,
@@ -113,8 +113,8 @@ export function ShopifyCheckoutKitProvider({
   }, [
     addEventListener,
     removeEventListeners,
-    configure,
     getConfig,
+    setConfig,
     preload,
     present,
   ]);
diff --git a/modules/react-native-shopify-checkout-kit/src/index.d.ts b/modules/react-native-shopify-checkout-kit/src/index.d.ts
@@ -150,7 +150,7 @@ export interface ShopifyCheckoutKit {
   /**
    * Configure the checkout. See README.md for more details.
    */
-  configure(config: Configuration): void;
+  setConfig(config: Configuration): void;
   /**
    * Return the current config for the checkout. See README.md for more details.
    */
diff --git a/modules/react-native-shopify-checkout-kit/src/index.ts b/modules/react-native-shopify-checkout-kit/src/index.ts
@@ -49,18 +49,14 @@ class ShopifyCheckoutKit implements ShopifyCheckout {
 
   constructor(configuration?: Configuration) {
     if (configuration != null) {
-      this.configure(configuration);
+      this.setConfig(configuration);
     }
 
     this.eventEmitter = new NativeEventEmitter(RNShopifyCheckoutKit);
   }
 
   public readonly version: string = RNShopifyCheckoutKit.version;
 
-  public configure(configuration: Configuration): void {
-    RNShopifyCheckoutKit.configure(configuration);
-  }
-
   public preload(checkoutUrl: string): void {
     RNShopifyCheckoutKit.preload(checkoutUrl);
   }
@@ -73,6 +69,10 @@ class ShopifyCheckoutKit implements ShopifyCheckout {
     return RNShopifyCheckoutKit.getConfig();
   }
 
+  public setConfig(configuration: Configuration): void {
+    RNShopifyCheckoutKit.setConfig(configuration);
+  }
+
   public addEventListener(
     eventName: CheckoutEvent,
     callback: CheckoutEventCallback,
diff --git a/modules/react-native-shopify-checkout-kit/tests/index.test.ts b/modules/react-native-shopify-checkout-kit/tests/index.test.ts
@@ -21,10 +21,10 @@ jest.mock('react-native', () => {
 
   const ShopifyCheckoutKit = {
     version: '0.7.0',
-    configure: jest.fn(),
     preload: jest.fn(),
     present: jest.fn(),
     getConfig: jest.fn(async () => exampleConfig),
+    setConfig: jest.fn(),
     addEventListener: jest.fn(),
     removeEventListeners: jest.fn(),
   };
@@ -39,31 +39,31 @@ jest.mock('react-native', () => {
 
 describe('ShopifyCheckoutKit', () => {
   afterEach(() => {
-    NativeModules.ShopifyCheckoutKit.configure.mockReset();
+    NativeModules.ShopifyCheckoutKit.setConfig.mockReset();
   });
 
   describe('instantiation', () => {
-    it('calls `configure` with the specified config on instantiation', () => {
+    it('calls `setConfig` with the specified config on instantiation', () => {
       new ShopifyCheckoutKit(config);
-      expect(NativeModules.ShopifyCheckoutKit.configure).toHaveBeenCalledWith(
+      expect(NativeModules.ShopifyCheckoutKit.setConfig).toHaveBeenCalledWith(
         config,
       );
     });
 
-    it('does not call `configure` if no config was specified on instantiation', () => {
+    it('does not call `setConfig` if no config was specified on instantiation', () => {
       new ShopifyCheckoutKit();
-      expect(NativeModules.ShopifyCheckoutKit.configure).not.toHaveBeenCalled();
+      expect(NativeModules.ShopifyCheckoutKit.setConfig).not.toHaveBeenCalled();
     });
   });
 
-  describe('configure', () => {
-    it('calls the `configure` on the Native Module', () => {
+  describe('setConfig', () => {
+    it('calls the `setConfig` on the Native Module', () => {
       const instance = new ShopifyCheckoutKit();
-      instance.configure(config);
-      expect(NativeModules.ShopifyCheckoutKit.configure).toHaveBeenCalledTimes(
+      instance.setConfig(config);
+      expect(NativeModules.ShopifyCheckoutKit.setConfig).toHaveBeenCalledTimes(
         1,
       );
-      expect(NativeModules.ShopifyCheckoutKit.configure).toHaveBeenCalledWith(
+      expect(NativeModules.ShopifyCheckoutKit.setConfig).toHaveBeenCalledWith(
         config,
       );
     });
diff --git a/sample/android/app/src/test/java/com/reactnative/ShopifyCheckoutKitModuleTest.java b/sample/android/app/src/test/java/com/reactnative/ShopifyCheckoutKitModuleTest.java
@@ -69,13 +69,13 @@ public void callsPreloadWithCheckoutURL() {
   }
 
   @Test
-  public void configuresInternalConfig() {
+  public void setsInternalConfig() {
     assertFalse(ShopifyCheckoutKitModule.checkoutConfig.getPreloading().getEnabled());
 
     JavaOnlyMap updatedConfig = new JavaOnlyMap();
     updatedConfig.putBoolean("preloading", true);
     updatedConfig.putString("colorScheme", "dark");
-    shopifyCheckoutKitModule.configure(updatedConfig);
+    shopifyCheckoutKitModule.setConfig(updatedConfig);
 
     boolean preloadingEnabled = ShopifyCheckoutKitModule.checkoutConfig.getPreloading().getEnabled();
     String colorScheme = ShopifyCheckoutKitModule.checkoutConfig.getColorScheme().getId();
diff --git a/sample/ios/ReactNativeTests/ShopifyCheckoutKitTests.swift b/sample/ios/ReactNativeTests/ShopifyCheckoutKitTests.swift
@@ -73,7 +73,7 @@ class ShopifyCheckoutKitTests: XCTestCase {
       ]
     ]
 
-    shopifyCheckoutKit.configure(configuration)
+    shopifyCheckoutKit.setConfig(configuration)
 
     XCTAssertTrue(ShopifyCheckoutKit.configuration.preloading.enabled)
     XCTAssertEqual(ShopifyCheckoutKit.configuration.colorScheme, .dark)
@@ -86,7 +86,7 @@ class ShopifyCheckoutKitTests: XCTestCase {
       "preloading": false
     ]
 
-    shopifyCheckoutKit.configure(configuration)
+    shopifyCheckoutKit.setConfig(configuration)
 
     XCTAssertFalse(ShopifyCheckoutKit.configuration.preloading.enabled)
   }
@@ -101,7 +101,7 @@ class ShopifyCheckoutKitTests: XCTestCase {
     ]
 
     let defaultColorFallback = UIColor(red: 0, green: 0, blue: 0, alpha: 1)
-    shopifyCheckoutKit.configure(configuration)
+    shopifyCheckoutKit.setConfig(configuration)
 
     XCTAssertEqual(ShopifyCheckoutKit.configuration.spinnerColor, defaultColorFallback)
   }
diff --git a/sample/src/context/Config.tsx b/sample/src/context/Config.tsx
@@ -15,20 +15,20 @@ import {useTheme} from './Theme';
 
 interface Context {
   config: Configuration | undefined;
-  configure: (config: Configuration) => void;
+  setConfig: (config: Configuration) => void;
 }
 
 const ConfigContext = createContext<Context>({
   config: {
     colorScheme: ColorScheme.automatic,
     preloading: false,
   },
-  configure: () => undefined,
+  setConfig: () => undefined,
 });
 
 export const ConfigProvider: React.FC<PropsWithChildren> = ({children}) => {
   const ShopifyCheckoutKit = useShopifyCheckoutKit();
-  const [config, setConfig] = useState<Context['config']>(undefined);
+  const [config, setInternalConfig] = useState<Context['config']>(undefined);
   const {setColorScheme} = useTheme();
 
   useEffect(() => {
@@ -37,7 +37,7 @@ export const ConfigProvider: React.FC<PropsWithChildren> = ({children}) => {
         // Fetch the checkout configuration object
         const config = await ShopifyCheckoutKit.getConfig();
         // Store it in local state
-        setConfig(config);
+        setInternalConfig(config);
       } catch (error) {
         // eslint-disable-next-line no-console
         console.error('Failed to fetch Shopify checkout configuration', error);
@@ -47,17 +47,17 @@ export const ConfigProvider: React.FC<PropsWithChildren> = ({children}) => {
     init();
   }, [ShopifyCheckoutKit]);
 
-  const configure = useCallback(
+  const setConfig = useCallback(
     async (config: Configuration) => {
       try {
         // Update the SDK configuration
-        ShopifyCheckoutKit.configure(config);
+        ShopifyCheckoutKit.setConfig(config);
 
         // Fetch the latest configuration object
         const updatedConfig = await ShopifyCheckoutKit.getConfig();
 
         // Update local config state
-        setConfig(updatedConfig);
+        setInternalConfig(updatedConfig);
 
         // Update the color scheme theme setting if it changed
         if (updatedConfig?.colorScheme) {
@@ -77,9 +77,9 @@ export const ConfigProvider: React.FC<PropsWithChildren> = ({children}) => {
   const value = useMemo(
     () => ({
       config,
-      configure,
+      setConfig,
     }),
-    [config, configure],
+    [config, setConfig],
   );
 
   return (
diff --git a/sample/src/screens/SettingsScreen.tsx b/sample/src/screens/SettingsScreen.tsx
@@ -91,15 +91,15 @@ interface SectionData {
 
 function SettingsScreen() {
   const ShopifyCheckoutKit = useShopifyCheckoutKit();
-  const {config, configure} = useConfig();
+  const {config, setConfig} = useConfig();
   const {colors} = useTheme();
   const styles = createStyles(colors);
 
   const handleColorSchemeChange = (item: SingleSelectItem) => {
     const updatedColors = getColors(item.value, Appearance.getColorScheme());
 
     if (item.value === ColorScheme.automatic) {
-      configure({
+      setConfig({
         colorScheme: ColorScheme.automatic,
         colors: {
           ios: {
@@ -111,19 +111,19 @@ function SettingsScreen() {
               backgroundColor: lightColors.webviewBackgroundColor,
               spinnerColor: lightColors.webviewSpinnerColor,
               headerBackgroundColor: lightColors.webviewBackgroundColor,
-              headerTextColor: lightColors.text,
+              headerTextColor: lightColors.webviewHeaderTextColor,
             },
             dark: {
               backgroundColor: darkColors.webviewBackgroundColor,
               spinnerColor: darkColors.webviewSpinnerColor,
               headerBackgroundColor: darkColors.webviewBackgroundColor,
-              headerTextColor: darkColors.text,
+              headerTextColor: darkColors.webviewHeaderTextColor,
             },
           },
         },
       });
     } else {
-      configure({
+      setConfig({
         colorScheme: item.value,
         colors: {
           ios: {
@@ -134,18 +134,18 @@ function SettingsScreen() {
             backgroundColor: updatedColors.webviewBackgroundColor,
             spinnerColor: updatedColors.webviewSpinnerColor,
             headerBackgroundColor: updatedColors.webviewBackgroundColor,
-            headerTextColor: updatedColors.text,
+            headerTextColor: updatedColors.webviewHeaderTextColor,
           },
         },
       });
     }
   };
 
   const handleTogglePreloading = useCallback(() => {
-    configure({
+    setConfig({
       preloading: !config?.preloading,
     });
-  }, [config?.preloading, configure]);
+  }, [config?.preloading, setConfig]);
 
   const configurationOptions: readonly SwitchItem[] = useMemo(
     () => [

Original file line number	Diff line number	Diff line change
`@@ -216,7 +216,7 @@ private ColorScheme getColors(ColorScheme colorScheme, ReadableMap config) {`
`216`	`216`	`}`
`217`	`217`
`218`	`218`	`@ReactMethod`
`219`		`- public void configure(ReadableMap config) {`
	`219`	`+ public void setConfig(ReadableMap config) {`
`220`	`220`	`Context context = getReactApplicationContext();`
`221`	`221`
`222`	`222`	`ShopifyCheckoutKit.configure(configuration -> {`
Original file line number	Diff line number	Diff line change
`@@ -120,7 +120,7 @@ class RCTShopifyCheckoutKit: RCTEventEmitter, CheckoutDelegate {`
`120`	`120`	`}`
`121`	`121`	`}`
`122`	`122`
`123`		`- @objc func configure(_ configuration: [AnyHashable: Any]) {`
	`123`	`+ @objc func setConfig(_ configuration: [AnyHashable: Any]) {`
`124`	`124`	`let colorConfig = configuration["colors"] as? [AnyHashable: Any]`
`125`	`125`	`let iosConfig = colorConfig?["ios"] as? [String: String]`
`126`	`126`
Original file line number	Diff line number	Diff line change
`@@ -73,7 +73,7 @@ class ShopifyCheckoutKitTests: XCTestCase {`
`73`	`73`	`]`
`74`	`74`	`]`
`75`	`75`
`76`		`- shopifyCheckoutKit.configure(configuration)`
	`76`	`+ shopifyCheckoutKit.setConfig(configuration)`
`77`	`77`
`78`	`78`	`XCTAssertTrue(ShopifyCheckoutKit.configuration.preloading.enabled)`
`79`	`79`	`XCTAssertEqual(ShopifyCheckoutKit.configuration.colorScheme, .dark)`
`@@ -86,7 +86,7 @@ class ShopifyCheckoutKitTests: XCTestCase {`
`86`	`86`	`"preloading": false`
`87`	`87`	`]`
`88`	`88`
`89`		`- shopifyCheckoutKit.configure(configuration)`
	`89`	`+ shopifyCheckoutKit.setConfig(configuration)`
`90`	`90`
`91`	`91`	`XCTAssertFalse(ShopifyCheckoutKit.configuration.preloading.enabled)`
`92`	`92`	`}`
`@@ -101,7 +101,7 @@ class ShopifyCheckoutKitTests: XCTestCase {`
`101`	`101`	`]`
`102`	`102`
`103`	`103`	`let defaultColorFallback = UIColor(red: 0, green: 0, blue: 0, alpha: 1)`
`104`		`- shopifyCheckoutKit.configure(configuration)`
	`104`	`+ shopifyCheckoutKit.setConfig(configuration)`
`105`	`105`
`106`	`106`	`XCTAssertEqual(ShopifyCheckoutKit.configuration.spinnerColor, defaultColorFallback)`
`107`	`107`	`}`