Demo: New Checkout Component and inline mode

[tiagocandido]

What changes are you making?

This PR implements a new ShopifyCheckout React component that provides inline checkout functionality alongside the existing popup/sheet mode, addressing the need for embeddable checkout components within React Native applications.

Key Features:

• New Component API: Introduces <ShopifyCheckout> component with ref-based imperative controls
• Inline Mode Support: Enables embedding checkout directly within the component tree (e.g., chat interfaces, product pages)
• WebView Plugin Architecture: Solves react-native-webview peer dependency issues through external plugin registration
• Optional Authentication: Works with or without JWT tokens for flexible demo and production usage
• Auto-resize Functionality: Automatically adjusts height based on checkout content using ResizeObserver
• Protocol Communication: Implements bidirectional messaging between WebView and React Native for checkout events
• Backward Compatibility: Existing hook-based API (useShopifyCheckoutSheet) remains unchanged

Technical Implementation:

• Plugin system avoids static imports of peer dependencies, preventing build failures
• Graceful fallback to mock implementation when WebView is unavailable
• Comprehensive error handling for authentication and network issues
• Support for both authenticated and unauthenticated checkout flows

Sample App Enhancements:

• Added ChatScreen demonstrating inline checkout in conversational interface
• Added CheckoutKitDemoScreen showing side-by-side API comparison
• Updated navigation with new demo tabs

How to test

1. Install Dependencies:

   yarn install
   cd sample && yarn install

2. Build the Library:

   cd modules/@shopify/checkout-sheet-kit && yarn build

3. Run the Sample App:

   dev ios  # or dev android

4. Test Inline Checkout:

   • Navigate to "Assistant" tab
   • Type "show me my cart" to see inline checkout embedded in chat
   • Navigate to "API Demo" tab
   • Click "Show Inline Checkout" to see WebView-based checkout

5. Test Plugin Architecture:

   • Inline checkout should use real WebView when react-native-webview is installed
   • Should show helpful fallback message when WebView is unavailable

6. Test Authentication Flows:

   • Works without authentication token (demo mode)
   • Can be enhanced with JWT tokens for production use

7. Test Existing Functionality:

   • Legacy hook-based API should work unchanged
   • Popup checkout should function as before

---

PR Checklist

Important

• I've added tests to support my implementation
• I have read and agree with the Contribution Guidelines.
• I have read and agree with the Code of Conduct.
• I've updated the README.

---

Checklist for releasing a new version

• I have bumped the version number in the package.json file.
• I have added a Changelog entry.

Tip

See the Contributing documentation for instructions on how to publish a new version of the library.