refactor: rename Checkout prefixed types ShopifyCheckout

Author: kieran-osgood-shopify

modules/@shopify/checkout-sheet-kit/src/components/Checkout.tsx

@@ -41,7 +41,7 @@ import type {
   CheckoutSubmitStart
 } from '../events';
 
-export interface CheckoutProps {
+export interface ShopifyCheckoutProps {
   /**
    * The checkout URL to load in the webview
    */
@@ -104,14 +104,14 @@ export interface CheckoutProps {
   testID?: string;
 }
 
-export interface CheckoutRef {
+export interface ShopifyCheckoutRef {
   /**
    * Reload the current checkout page
    */
   reload: () => void;
 }
 
-interface NativeCheckoutWebViewProps {
+interface NativeShopifyCheckoutWebViewProps {
   checkoutUrl: string;
   auth?: string;
   style?: ViewStyle;
@@ -126,7 +126,7 @@ interface NativeCheckoutWebViewProps {
 }
 
 const RCTCheckoutWebView =
-  requireNativeComponent<NativeCheckoutWebViewProps>('RCTCheckoutWebView');
+  requireNativeComponent<NativeShopifyCheckoutWebViewProps>('RCTCheckoutWebView');
 
 /**
  * Checkout provides a native webview component for displaying
@@ -137,29 +137,29 @@ const RCTCheckoutWebView =
  * including Shop Pay, Apple Pay, and other payment methods.
  *
  * @example Basic usage
- * import {Checkout} from '@shopify/checkout-sheet-kit';
+ * import {ShopifyCheckout} from '@shopify/checkout-sheet-kit';
  *
- * <Checkout
+ * <ShopifyCheckout
  *   checkoutUrl="https://shop.example.com/checkouts/cn/123"
  *   onComplete={(event) => console.log('Checkout completed!', event.orderDetails)}
  *   onError={(error) => console.error('Checkout failed:', error.message)}
  *   style={{flex: 1}}
  * />
  *
  * @example Passing an app authentication token to customize checkout and receive richer events
- * <Checkout
+ * <ShopifyCheckout
  *   checkoutUrl="https://shop.example.com/checkouts/cn/123"
  *   auth="your_auth_token_here"
  *   onComplete={(event) => console.log('Checkout completed!')}
  * />
  *
  * @example Using with ref to reload on error
  * import {useRef} from 'react';
- * import {Checkout, CheckoutHandle} from '@shopify/checkout-sheet-kit';
+ * import {ShopifyCheckout, CheckoutHandle} from '@shopify/checkout-sheet-kit';
  *
- * const checkoutRef = useRef<CheckoutHandle>(null);
+ * const checkoutRef = useRef<ShopifyCheckoutHandle>(null);
  *
- * <Checkout
+ * <ShopifyCheckout
  *   ref={checkoutRef}
  *   checkoutUrl={url}
  *   auth={authToken}
@@ -169,7 +169,7 @@ const RCTCheckoutWebView =
  *   }}
  * />
  */
-export const Checkout = forwardRef<CheckoutRef, CheckoutProps>(
+export const ShopifyCheckout = forwardRef<ShopifyCheckoutRef, ShopifyCheckoutProps>(
   (
     {
       checkoutUrl,
@@ -201,7 +201,7 @@ export const Checkout = forwardRef<CheckoutRef, CheckoutProps>(
 
 
     const handleStart = useCallback<
-      Required<NativeCheckoutWebViewProps>['onStart']
+      Required<NativeShopifyCheckoutWebViewProps>['onStart']
     >(
       (event: {nativeEvent: CheckoutStartEvent}) => {
         onStart?.(event.nativeEvent);
@@ -210,7 +210,7 @@ export const Checkout = forwardRef<CheckoutRef, CheckoutProps>(
     );
 
     const handleError = useCallback<
-      Required<NativeCheckoutWebViewProps>['onError']
+      Required<NativeShopifyCheckoutWebViewProps>['onError']
     >(
       (event: {nativeEvent: CheckoutException}) => {
         onError?.(event.nativeEvent);
@@ -219,7 +219,7 @@ export const Checkout = forwardRef<CheckoutRef, CheckoutProps>(
     );
 
     const handleComplete = useCallback<
-      Required<NativeCheckoutWebViewProps>['onComplete']
+      Required<NativeShopifyCheckoutWebViewProps>['onComplete']
     >(
       (event: {nativeEvent: CheckoutCompleteEvent}) => {
         onComplete?.(event.nativeEvent);
@@ -228,13 +228,13 @@ export const Checkout = forwardRef<CheckoutRef, CheckoutProps>(
     );
 
     const handleCancel = useCallback<
-      Required<NativeCheckoutWebViewProps>['onCancel']
+      Required<NativeShopifyCheckoutWebViewProps>['onCancel']
     >(() => {
       onCancel?.();
     }, [onCancel]);
 
     const handleLinkClick = useCallback<
-      Required<NativeCheckoutWebViewProps>['onLinkClick']
+      Required<NativeShopifyCheckoutWebViewProps>['onLinkClick']
     >(
       (event: {nativeEvent: {url: string}}) => {
         if (!event.nativeEvent.url) return;
@@ -244,7 +244,7 @@ export const Checkout = forwardRef<CheckoutRef, CheckoutProps>(
     );
 
     const handleAddressChangeStart = useCallback<
-      Required<NativeCheckoutWebViewProps>['onAddressChangeStart']
+      Required<NativeShopifyCheckoutWebViewProps>['onAddressChangeStart']
     >(
       (event: {nativeEvent: CheckoutAddressChangeStart}) => {
         if (!event.nativeEvent) return;
@@ -254,7 +254,7 @@ export const Checkout = forwardRef<CheckoutRef, CheckoutProps>(
     );
 
     const handleSubmitStart = useCallback<
-      Required<NativeCheckoutWebViewProps>['onSubmitStart']
+      Required<NativeShopifyCheckoutWebViewProps>['onSubmitStart']
     >(
       (event: {nativeEvent: CheckoutSubmitStart}) => {
         if (!event.nativeEvent) return;
@@ -303,6 +303,6 @@ export const Checkout = forwardRef<CheckoutRef, CheckoutProps>(
   },
 );
 
-Checkout.displayName = 'Checkout';
+ShopifyCheckout.displayName = 'Checkout';
 
-export default Checkout;
+export default ShopifyCheckout;

modules/@shopify/checkout-sheet-kit/src/index.ts

@@ -523,15 +523,15 @@ export type {
   AcceleratedCheckoutButtonsProps,
   RenderStateChangeEvent,
 } from './components/AcceleratedCheckoutButtons';
-export type {CheckoutProps, CheckoutRef} from './components/Checkout';
+export type {ShopifyCheckoutProps as CheckoutProps, ShopifyCheckoutRef as CheckoutRef} from './components/Checkout';
 export type {CheckoutEventProviderProps} from './CheckoutEventProvider';
 
 // Components
 export {
   AcceleratedCheckoutButtons,
   RenderState,
 } from './components/AcceleratedCheckoutButtons';
-export {Checkout} from './components/Checkout';
+export {ShopifyCheckout} from './components/Checkout';
 export {
   CheckoutEventProvider,
   useCheckoutEvents,

modules/@shopify/checkout-sheet-kit/tests/CheckoutAddressChange.test.tsx

@@ -22,7 +22,7 @@ jest.mock('react-native', () => {
 
 import React from 'react';
 import {render, act} from '@testing-library/react-native';
-import {Checkout} from '../src/components/Checkout';
+import {ShopifyCheckout} from '../src/components/Checkout';
 import {createTestCart} from './testFixtures';
 
 describe('Checkout Component - Address Change Events', () => {
@@ -32,7 +32,7 @@ describe('Checkout Component - Address Change Events', () => {
     const onAddressChangeStart = jest.fn();
 
     const {getByTestId} = render(
-      <Checkout
+      <ShopifyCheckout
         checkoutUrl={mockCheckoutUrl}
         onAddressChangeStart={onAddressChangeStart}
         testID="checkout-webview"
@@ -65,7 +65,7 @@ describe('Checkout Component - Address Change Events', () => {
 
   it('does not crash when onAddressChangeStart prop is not provided', () => {
     const {getByTestId} = render(
-      <Checkout checkoutUrl={mockCheckoutUrl} testID="checkout-webview" />,
+      <ShopifyCheckout checkoutUrl={mockCheckoutUrl} testID="checkout-webview" />,
     );
 
     const nativeComponent = getByTestId('checkout-webview');
@@ -88,7 +88,7 @@ describe('Checkout Component - Address Change Events', () => {
     const onAddressChangeStart = jest.fn();
 
     const {getByTestId} = render(
-      <Checkout
+      <ShopifyCheckout
         checkoutUrl={mockCheckoutUrl}
         onAddressChangeStart={onAddressChangeStart}
         testID="checkout-webview"
@@ -108,7 +108,7 @@ describe('Checkout Component - Address Change Events', () => {
     const onAddressChangeStart = jest.fn();
 
     const {getByTestId} = render(
-      <Checkout
+      <ShopifyCheckout
         checkoutUrl={mockCheckoutUrl}
         onAddressChangeStart={onAddressChangeStart}
         testID="checkout-webview"

modules/@shopify/checkout-sheet-kit/tests/CheckoutSubmitStart.test.tsx

@@ -22,7 +22,7 @@ jest.mock('react-native', () => {
 
 import React from 'react';
 import {render, act} from '@testing-library/react-native';
-import {Checkout} from '../src/components/Checkout';
+import {ShopifyCheckout} from '../src/components/Checkout';
 import {createTestCart, createTestCheckout} from './testFixtures';
 
 describe('Checkout Component - Submit Start Events', () => {
@@ -32,7 +32,7 @@ describe('Checkout Component - Submit Start Events', () => {
     const onSubmitStart = jest.fn();
 
     const {getByTestId} = render(
-      <Checkout
+      <ShopifyCheckout
         checkoutUrl={mockCheckoutUrl}
         onSubmitStart={onSubmitStart}
         testID="checkout-webview"
@@ -65,7 +65,7 @@ describe('Checkout Component - Submit Start Events', () => {
 
   it('does not crash when onSubmitStart prop is not provided', () => {
     const {getByTestId} = render(
-      <Checkout checkoutUrl={mockCheckoutUrl} testID="checkout-webview" />,
+      <ShopifyCheckout checkoutUrl={mockCheckoutUrl} testID="checkout-webview" />,
     );
 
     const nativeComponent = getByTestId('checkout-webview');
@@ -88,7 +88,7 @@ describe('Checkout Component - Submit Start Events', () => {
     const onSubmitStart = jest.fn();
 
     const {getByTestId} = render(
-      <Checkout
+      <ShopifyCheckout
         checkoutUrl={mockCheckoutUrl}
         onSubmitStart={onSubmitStart}
         testID="checkout-webview"

sample/src/screens/BuyNow/CheckoutScreen.tsx

@@ -21,7 +21,7 @@ import type {NavigationProp, RouteProp} from '@react-navigation/native';
 import {useNavigation} from '@react-navigation/native';
 import React, {useRef} from 'react';
 import {
-  Checkout,
+  ShopifyCheckout,
   type CheckoutAddressChangeStart,
   type CheckoutCompleteEvent,
   type CheckoutRef,
@@ -81,7 +81,7 @@ export default function CheckoutScreen(props: {
   };
 
   return (
-    <Checkout
+    <ShopifyCheckout
       ref={ref}
       checkoutUrl={props.route.params.url}
       auth={props.route.params.auth}