feat(checkout): CHECKOUT-7538 Introduce extension messenger and command handler

[bc-peng]

What?

• Establish a two-way communication mechanism between checkout-js and an extension.
• The message from an extension should always include the extension ID.
• Define command handling mechanism and its related interfaces.

Why?

checkout-js will be able to carry out the corresponding actions when receving a command from an extension.

Testing / Proof

• CI.

[davidchin]

I think it's better to return a function that could unsubscribe the handler, similar to the existing subscribe method. e.g.:

listenExtensionCommand(extensionId: string, commandType: ExtensionCommand, commandHandler, ExtensionCommandHandler): () => void

This makes it easier to unsubscribe a handler, as calling the return value can specifically remove such handler. Otherwise, clients need to hold a reference to the handler and therefore can't use inline anonymous function as the handler.

[bc-peng]

I have updated it as:

listenExtensionCommand(
        extensionId: string,
        command: ExtensionCommand,
        handler: ExtensionCommandHandler,
    ): () => void

To entirely remove the command listening, I also added a method in the checkoutService to stop listening for an extension.

stopListenExtensionCommand(extensionId: string): void

[davidchin]

I'm thinking you can just inject ReadableCheckoutStore as a constructor parameter of ExtensionMessenger. That way you don't need to pass extensions. You can just call the following to get the available extensions.

const { data: { getExtensions } } = this.store.getState();
const extensions = getExtensions();

[bc-peng]

Sure. Now the constructor is:

constructor(
        private _store: CheckoutStore,
        private _listeners: { [extensionId: string]: IframeEventListener<ExtensionOriginEventMap> },
        private _posters: { [extensionId: string]: IframeEventPoster<HostOriginEvent> },
    ) {}

[davidchin]

Maybe we could skip this method for now unless we really need it. IframeEventListener#stopListen doesn't actually remove the references to the handlers previously registered. So we need to do a bit of work to actually do what we want.

[bc-peng]

Removed. We can circle back to it once we have the use case.

[davidchin]

Preferably use the read-only version, i.e.: ReadableCheckoutStore

[bc-peng]

Yes, ReadableCheckoutStore is used in ways I was not aware of before.

[davidchin]

Fantastic work @bc-peng, LGTM! 👏