refactor: suffix events with Event - prefix with Checkout

Author: kieran-osgood-shopify

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

@@ -32,11 +32,11 @@ import {
 } from 'react-native';
 import {useCheckoutEvents} from '../ShopifyCheckoutEventProvider';
 import type {
-  CheckoutAddressChangeStart,
+  CheckoutAddressChangeStartEvent,
   CheckoutCompleteEvent,
-  CheckoutPaymentMethodChangeStart,
+  CheckoutPaymentMethodChangeStartEvent,
   CheckoutStartEvent,
-  CheckoutSubmitStart,
+  CheckoutSubmitStartEvent,
 } from '../events';
 import type {CheckoutException} from '../errors';
 
@@ -82,15 +82,15 @@ export interface ShopifyCheckoutProps {
    * Note: This callback is only invoked when native address selection is enabled
    * for the authenticated app.
    */
-  onAddressChangeStart?: (event: CheckoutAddressChangeStart) => void;
+  onAddressChangeStart?: (event: CheckoutAddressChangeStartEvent) => void;
 
   /**
    * Called when the buyer attempts to submit the checkout.
    *
    * Note: This callback is only invoked when native payment delegation is configured
    * for the authenticated app.
    */
-  onSubmitStart?: (event: CheckoutSubmitStart) => void;
+  onSubmitStart?: (event: CheckoutSubmitStartEvent) => void;
 
   /**
    * Called when checkout starts a payment method change flow (e.g., for native picker).
@@ -99,7 +99,7 @@ export interface ShopifyCheckoutProps {
    * for the authenticated app.
    */
   onPaymentMethodChangeStart?: (
-    event: CheckoutPaymentMethodChangeStart,
+    event: CheckoutPaymentMethodChangeStartEvent,
   ) => void;
   /**
    * Style for the webview container
@@ -130,11 +130,11 @@ interface NativeShopifyCheckoutWebViewProps {
   onCancel?: () => void;
   onLinkClick?: (event: {nativeEvent: {url: string}}) => void;
   onAddressChangeStart?: (event: {
-    nativeEvent: CheckoutAddressChangeStart;
+    nativeEvent: CheckoutAddressChangeStartEvent;
   }) => void;
-  onSubmitStart?: (event: {nativeEvent: CheckoutSubmitStart}) => void;
+  onSubmitStart?: (event: {nativeEvent: CheckoutSubmitStartEvent}) => void;
   onPaymentMethodChangeStart?: (event: {
-    nativeEvent: CheckoutPaymentMethodChangeStart;
+    nativeEvent: CheckoutPaymentMethodChangeStartEvent;
   }) => void;
 }
 

modules/@shopify/checkout-sheet-kit/src/events.d.ts

@@ -381,6 +381,10 @@ export interface CheckoutStartEvent {
   method: 'checkout.start';
   /** Initial cart state when checkout started */
   cart: Cart;
+  /** 
+   * Locale of the checkout 
+   **/
+  locale: string;
 }
 
 /**
@@ -512,7 +516,7 @@ export interface CartInput {
  * This event is only emitted when native address selection is enabled
  * for the authenticated app.
  */
-export interface CheckoutAddressChangeStart {
+export interface CheckoutAddressChangeStartEvent {
   /**
    * Unique identifier for this event instance.
    * Use this ID with the ShopifyCheckoutEventProvider to respond to the event.
@@ -539,13 +543,13 @@ export interface CheckoutAddressChangeStart {
 }
 
 /**
- * Response payload for CheckoutAddressChangeStart event.
+ * Response payload for CheckoutAddressChangeStartEvent event.
  * Use with ShopifyCheckoutEventProvider.respondToEvent() or useShopifyEvent().respondWith()
  *
  * Note: This response is only used when native address selection is enabled
  * for the authenticated app.
  */
-export interface CheckoutAddressChangeStartResponse {
+export interface CheckoutAddressChangeStartResponsePayload {
   /**
    * Updated cart input with the delivery addresses to set.
    */
@@ -612,20 +616,20 @@ export interface CartPaymentInstrumentInput {
 /**
  * Event emitted when the buyer intends to change their payment method.
  */
-export interface CheckoutPaymentMethodChangeStart {
+export interface CheckoutPaymentMethodChangeStartEvent {
   /** Unique identifier for this event instance */
   id: string;
   /** Type of payment change event */
-  type: 'paymentMethodChangeStart';
+  method: 'checkout.paymentMethodChangeStart';
   /** Cart state when the event was emitted */
   cart: Cart;
 }
 
 /**
- * Response payload for CheckoutPaymentMethodChangeStart event.
+ * Response payload for CheckoutPaymentMethodChangeStartEvent event.
  * Use with CheckoutEventProvider.respondToEvent() or useShopifyEvent().respondWith()
  */
-export interface CheckoutPaymentMethodChangeStartResponse {
+export interface CheckoutPaymentMethodChangeStartResponsePayload {
   /**
    * Updated cart input with the payment instruments to set.
    */
@@ -642,7 +646,7 @@ export interface CheckoutPaymentMethodChangeStartResponse {
  * This event is only emitted when native payment delegation is configured
  * for the authenticated app.
  */
-export interface CheckoutSubmitStart {
+export interface CheckoutSubmitStartEvent {
   /**
    * Unique identifier for this event instance.
    * Use this ID with the ShopifyCheckoutEventProvider to respond to the event.
@@ -675,13 +679,13 @@ export interface PaymentTokenInput {
 }
 
 /**
- * Response payload for CheckoutSubmitStart event.
+ * Response payload for CheckoutSubmitStartEvent event.
  * Use with ShopifyCheckoutEventProvider.respondToEvent() or useShopifyEvent().respondWith()
  *
  * Note: This response is only used when native payment delegation is enabled
  * for the authenticated app.
  */
-export interface CheckoutSubmitStartResponse {
+export interface CheckoutSubmitStartResponsePayload {
   /**
    * Optional payment token information for delegated payment processing.
    */

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

@@ -22,7 +22,7 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SO
 */
 
 import type {EmitterSubscription} from 'react-native';
-import type {CheckoutCompleteEvent, CheckoutStartEvent, CheckoutSubmitStart} from './events';
+import type {CheckoutCompleteEvent, CheckoutStartEvent, CheckoutSubmitStartEvent} from './events';
 import type {CheckoutException} from './errors';
 
 export type Maybe<T> = T | undefined;
@@ -172,10 +172,10 @@ export type CheckoutStartEventCallback = (
   event: CheckoutStartEvent,
 ) => void;
 export type CheckoutAddressChangeStartCallback = (
-  event: CheckoutAddressChangeStart,
+  event: CheckoutAddressChangeStartEvent,
 ) => void;
 export type CheckoutSubmitStartCallback = (
-  event: CheckoutSubmitStart,
+  event: CheckoutSubmitStartEvent,
 ) => void;
 
 export type CheckoutEventCallback =

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

@@ -511,16 +511,16 @@ export type {
   CartPaymentInstrumentDisplayInput,
   CartPaymentInstrumentInput,
   PaymentTokenInput,
-  CheckoutAddressChangeStart,
-  CheckoutAddressChangeStartResponse,
+  CheckoutAddressChangeStartEvent,
+  CheckoutAddressChangeStartResponsePayload,
   CheckoutCompleteEvent,
-  CheckoutPaymentMethodChangeStart,
-  CheckoutPaymentMethodChangeStartResponse,
+  CheckoutPaymentMethodChangeStartEvent ,
+  CheckoutPaymentMethodChangeStartResponsePayload,
   CheckoutResponseError,
   ExpiryInput,
   CheckoutStartEvent,
-  CheckoutSubmitStart,
-  CheckoutSubmitStartResponse,
+  CheckoutSubmitStartEvent,
+  CheckoutSubmitStartResponsePayload,
   MailingAddressInput,
 } from './events.d';
 

sample/src/screens/BuyNow/AddressScreen.tsx

@@ -22,7 +22,7 @@ import {useNavigation, useRoute} from '@react-navigation/native';
 import React, {useState} from 'react';
 import {Alert, Button, StyleSheet, Text, TouchableOpacity, View} from 'react-native';
 import {useShopifyEvent} from '@shopify/checkout-sheet-kit';
-import type {CheckoutAddressChangeStartResponse} from '@shopify/checkout-sheet-kit';
+import type {CheckoutAddressChangeStartResponsePayload} from '@shopify/checkout-sheet-kit';
 import {useCart} from '../../context/Cart';
 import type {BuyNowStackParamList} from './types';
 
@@ -86,7 +86,7 @@ export default function AddressScreen() {
     try {
       const selectedAddress = addressOptions[selectedAddressIndex];
 
-      const response: CheckoutAddressChangeStartResponse = {
+      const response: CheckoutAddressChangeStartResponsePayload = {
         cart: {
           delivery: {
             addresses: [

sample/src/screens/BuyNow/CheckoutScreen.tsx

@@ -22,12 +22,12 @@ import {useNavigation} from '@react-navigation/native';
 import React, {useRef} from 'react';
 import {
   ShopifyCheckout,
-  type CheckoutAddressChangeStart,
+  type CheckoutAddressChangeStartEvent,
   type CheckoutCompleteEvent,
-  type CheckoutPaymentMethodChangeStart,
+  type CheckoutPaymentMethodChangeStartEvent,
   type ShopifyCheckoutRef,
   type CheckoutStartEvent,
-  type CheckoutSubmitStart,
+  type CheckoutSubmitStartEvent,
   useCheckoutEvents,
 } from '@shopify/checkout-sheet-kit';
 import type {BuyNowStackParamList} from './types';
@@ -46,17 +46,19 @@ export default function CheckoutScreen(props: {
     console.log('<CheckoutScreen /> onStart', event);
   };
 
-  const onAddressChangeStart = (event: CheckoutAddressChangeStart) => {
+  const onAddressChangeStart = (event: CheckoutAddressChangeStartEvent) => {
     console.log('<CheckoutScreen /> onAddressChangeStart: ', event);
     navigation.navigate('Address', {id: event.id});
   };
 
-  const onPaymentMethodChangeStart = (event: CheckoutPaymentMethodChangeStart) => {
+  const onPaymentMethodChangeStart = (
+    event: CheckoutPaymentMethodChangeStartEvent,
+  ) => {
     console.log('<CheckoutScreen /> onPaymentMethodChangeStart: ', event);
     navigation.navigate('Payment', {id: event.id});
-  }
-  
-  const onSubmitStart = async (event: CheckoutSubmitStart) => {
+  };
+
+  const onSubmitStart = async (event: CheckoutSubmitStartEvent) => {
     console.log('<CheckoutScreen /> onSubmitStart', event);
     try {
       await eventContext?.respondToEvent(event.id, {

sample/src/screens/BuyNow/PaymentScreen.tsx

@@ -25,7 +25,7 @@ import {
   useShopifyEvent,
   type CardBrand,
   type CartPaymentInstrumentInput,
-  type CheckoutPaymentMethodChangeStartResponse,
+  type CheckoutPaymentMethodChangeStartResponsePayload,
   type MailingAddressInput,
 } from '@shopify/checkout-sheet-kit';
 import {useCart} from '../../context/Cart';
@@ -117,7 +117,7 @@ export default function PaymentScreen() {
       billingAddress: selectedPayment.billingAddress,
     };
 
-    const response: CheckoutPaymentMethodChangeStartResponse = {
+    const response: CheckoutPaymentMethodChangeStartResponsePayload = {
       cart: {
         paymentInstruments: [paymentInstrument],
       },