Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: adds prop update listening to modal browser zoid polyfill #1161

Draft
wants to merge 7 commits into
base: develop
Choose a base branch
from

Conversation

danzhaaspaypal
Copy link
Contributor

@danzhaaspaypal danzhaaspaypal commented Dec 4, 2024

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"});

@danzhaaspaypal danzhaaspaypal force-pushed the feature/DTCRCMERC-3611-modal-lander-v6 branch from 48ed5aa to ecf1a92 Compare December 10, 2024 18:11
Comment on lines 21 to 25
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);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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);


export function sendEventAck(eventId, trustedOrigin) {
// skip this step if running in test env because jest's target windows don't support postMessage
if (window.process?.env?.NODE_ENV === 'test') {
Copy link
Contributor

@perco12 perco12 Jan 21, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

did we perhaps mean?

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants