feat: adds prop update listening to modal browser zoid polyfill

[danzhaaspaypal]

Description

Updates the modal lander to support communicating bi-directionally with the v6 modal wrapper

Screenshots

Testing instructions

1. Prepare local env to test corresponding PR feat: add learn more modal wrapper for messages in an internal repo (DM Dan for more details).
2. in that internal repo, go to LearnMore.ts, and on line 52, append &stage_tag=merc3611_test to end of url query.
3. Try combinations of the below lines inserted onto the demo page (again DM Dan for more details):

try {
    const clientToken = await getClientToken();
    const sdkInstance = await window.paypal.createInstance({
      clientToken,
      components: ["paypal-payments", "paypal-messages"],
    });
    const msgInstance = sdkInstance.createPayPalMessages({buyerCountry: "us"});
    const learnMore = await msgInstance.createLearnMore({amount:"50", presentationType:"modal"});
    // const learnMore = await msgInstance.createLearnMore({amount:"50", presentationType:"popup"});
    // const learnMore = await msgInstance.createLearnMore({amount:"50", presentationType:"redirect"});
    // const learnMore = await msgInstance.createLearnMore({amount:"50", presentationType:"auto"});
    // await learnMore.update({amount:"70", offerTypes:["PAY_LATER_LONG_TERM"]});
    // await learnMore.update({amount:"70", offerTypes:["PAY_LATER_SHORT_TERM"]});
    // await learnMore.open({amount:"70"});
    // await learnMore.update({amount:"90"});
    // await learnMore.open({amount:"90"});

[perco12]

I know we chatted about this internally, but I think we can go with

Suggested change

	const merchantOrigin = decodeURIComponent(initialProps.origin);
	if (eventOrigin === merchantOrigin && eventName === 'PROPS_UPDATE' && newProps && typeof newProps === 'object') {
	// send event ack so PostMessenger will stop reposting event
	sendEventAck(id, merchantOrigin);
	const clientOrigin = decodeURIComponent(initialProps.origin);
	if (eventOrigin === clientOrigin && eventName === 'PROPS_UPDATE' && newProps && typeof newProps === 'object') {
	// send event ack so PostMessenger will stop reposting event
	sendEventAck(id, clientOrigin);

[perco12]

did we perhaps mean?

Suggested change

	if (window.process?.env?.NODE_ENV === 'test') {
	if (process.env.NODE_ENV === 'test') {

[Seavenly]

Is there a belter util we can leverage that meets our needs here?

[danzhaaspaypal]

belter has uniqueID that returns uid_${randomID}_${timeID}. Considerations are that the existing postMessenger message ids have a format that is different from that (32 alphanumeric vs the above format in hex); however, there is no validation for nor true consumer of the id we will generate here. Would you like me to use this belter uniqueID?

[Seavenly]

Suggested change

	let targetWindow;
	const popupCheck = window.parent === window;
	if (popupCheck) {
	targetWindow = window.opener;
	} else {
	targetWindow = window.parent;
	}
	const targetWindow = window.parent === window ? window.opener : window.parent;

[Seavenly]

The name of this function makes it sound like we are creating a listener of some sort when in reality we calling the listeners that have already been registered. Consider avoiding the listen verb as part of the function name.

[danzhaaspaypal]

How about handleNewProps or handleUpdatedProps?

[Seavenly]

Are we guaranteed to only pass in props that we have validation for? Should we account for the scenario where validate[k] is undefined which would throw an error here.

[danzhaaspaypal]

Good call. See #1170 for this fix