diff --git a/modules/@shopify/checkout-sheet-kit/src/index.d.ts b/modules/@shopify/checkout-sheet-kit/src/index.d.ts index d8279e6b..77ff5d01 100644 --- a/modules/@shopify/checkout-sheet-kit/src/index.d.ts +++ b/modules/@shopify/checkout-sheet-kit/src/index.d.ts @@ -153,6 +153,7 @@ export type CheckoutEvent = | 'start' | 'error' | 'addressChangeStart' + | 'paymentMethodChangeStart' | 'submitStart' | 'geolocationRequest'; @@ -174,6 +175,9 @@ export type CheckoutStartEventCallback = ( export type CheckoutAddressChangeStartCallback = ( event: CheckoutAddressChangeStartEvent, ) => void; +export type CheckoutPaymentMethodChangeStartCallback = ( + event: CheckoutPaymentMethodChangeStartEvent, +) => void; export type CheckoutSubmitStartCallback = ( event: CheckoutSubmitStartEvent, ) => void; @@ -185,6 +189,7 @@ export type CheckoutEventCallback = | CheckoutStartEventCallback | CheckoutAddressChangeStartCallback | CheckoutSubmitStartCallback + | CheckoutPaymentMethodChangeStartCallback | GeolocationRequestEventCallback; /** @@ -268,6 +273,11 @@ function addEventListener( callback: CheckoutAddressChangeStartCallback, ): Maybe; +function addEventListener( + event: 'paymentMethodChangeStart', + callback: CheckoutPaymentMethodChangeStartCallback, +): Maybe; + function addEventListener( event: 'submitStart', callback: CheckoutSubmitStartCallback, diff --git a/modules/@shopify/checkout-sheet-kit/src/index.ts b/modules/@shopify/checkout-sheet-kit/src/index.ts index d43c912b..1ef56e5d 100644 --- a/modules/@shopify/checkout-sheet-kit/src/index.ts +++ b/modules/@shopify/checkout-sheet-kit/src/index.ts @@ -180,6 +180,24 @@ class ShopifyCheckoutSheet implements ShopifyCheckoutSheetKit { let eventCallback; switch (event) { + case 'complete': + eventCallback = this.parseEventData('complete', callback); + break; + case 'start': + eventCallback = this.parseEventData('start', callback); + break; + case 'addressChangeStart': + eventCallback = this.parseEventData('addressChangeStart', callback); + break; + case 'submitStart': + eventCallback = this.parseEventData('submitStart', callback); + break; + case 'paymentMethodChangeStart': + eventCallback = this.parseEventData( + 'paymentMethodChangeStart', + callback, + ); + break; case 'error': eventCallback = this.parseEventData( event, diff --git a/modules/@shopify/checkout-sheet-kit/tests/index.test.ts b/modules/@shopify/checkout-sheet-kit/tests/index.test.ts index 96d0d2ea..3ad8235b 100644 --- a/modules/@shopify/checkout-sheet-kit/tests/index.test.ts +++ b/modules/@shopify/checkout-sheet-kit/tests/index.test.ts @@ -469,6 +469,61 @@ describe('ShopifyCheckoutSheetKit', () => { }); }); + describe('Payment Method Change Start Event', () => { + it('parses paymentMethodChangeStart event data', () => { + const instance = new ShopifyCheckoutSheet(); + const callback = jest.fn(); + instance.addEventListener('paymentMethodChangeStart', callback); + + eventEmitter.emit('paymentMethodChangeStart', { + id: 'test-event-id', + method: 'checkout.paymentMethodChangeStart', + cart: {id: 'test-cart-id'}, + }); + + expect(callback).toHaveBeenCalledWith({ + id: 'test-event-id', + method: 'checkout.paymentMethodChangeStart', + cart: {id: 'test-cart-id'}, + }); + }); + + it('parses paymentMethodChangeStart event string data as JSON', () => { + const instance = new ShopifyCheckoutSheet(); + const callback = jest.fn(); + instance.addEventListener('paymentMethodChangeStart', callback); + + eventEmitter.emit( + 'paymentMethodChangeStart', + JSON.stringify({ + id: 'test-event-id', + method: 'checkout.paymentMethodChangeStart', + cart: {id: 'test-cart-id'}, + }), + ); + + expect(callback).toHaveBeenCalledWith({ + id: 'test-event-id', + method: 'checkout.paymentMethodChangeStart', + cart: {id: 'test-cart-id'}, + }); + }); + + it('prints an error if the paymentMethodChangeStart event data cannot be parsed', () => { + const mock = jest.spyOn(global.console, 'error'); + const instance = new ShopifyCheckoutSheet(); + const callback = jest.fn(); + instance.addEventListener('paymentMethodChangeStart', callback); + + eventEmitter.emit('paymentMethodChangeStart', 'INVALID JSON'); + + expect(mock).toHaveBeenCalledWith( + expect.any(LifecycleEventParseError), + 'INVALID JSON', + ); + }); + }); + describe('Error Event', () => { const internalError = { __typename: CheckoutNativeErrorType.InternalError, diff --git a/sample/src/App.tsx b/sample/src/App.tsx index 88012044..d06bffae 100644 --- a/sample/src/App.tsx +++ b/sample/src/App.tsx @@ -236,6 +236,16 @@ function AppWithContext({children}: PropsWithChildren) { }, ); + const paymentMethodChangeStart = shopify.addEventListener( + 'paymentMethodChangeStart', + event => { + console.log( + '[App] onPaymentMethodChangeStart event received from imperative API:', + event, + ); + }, + ); + const error = shopify.addEventListener( 'error', (error: CheckoutException) => { @@ -247,6 +257,7 @@ function AppWithContext({children}: PropsWithChildren) { completed?.remove(); started?.remove(); addressChangeStart?.remove(); + paymentMethodChangeStart?.remove(); close?.remove(); error?.remove(); };