Skip to content

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

Merged
surekhaw merged 12 commits intodevelopfrom
feature/DTCRCMERC-3611-modal-lander-v6
Apr 8, 2025
Merged

feat: adds prop update listening to modal browser zoid polyfill#1161
surekhaw merged 12 commits intodevelopfrom
feature/DTCRCMERC-3611-modal-lander-v6

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') {

@danzhaaspaypal danzhaaspaypal marked this pull request as ready for review February 5, 2025 21:34
@erikacolette29 erikacolette29 added the DO NOT MERGE Requires a change from some external dependency or service label Feb 24, 2025
@surekhaw surekhaw removed the DO NOT MERGE Requires a change from some external dependency or service label Apr 8, 2025
@surekhaw surekhaw merged commit 86c001c into develop Apr 8, 2025
50 checks passed
@surekhaw surekhaw deleted the feature/DTCRCMERC-3611-modal-lander-v6 branch April 8, 2025 16:02
github-actions bot pushed a commit that referenced this pull request Apr 8, 2025
## [1.68.0](v1.67.0...v1.68.0) (2025-04-08)

### Features

* adds prop update listening to modal browser zoid polyfill ([#1161](#1161)) ([86c001c](86c001c))

### Bug Fixes

* update product list tile headline font to 5.1 standard ([#1192](#1192)) ([06970de](06970de))
@github-actions
Copy link

github-actions bot commented Apr 8, 2025

🎉 This PR is included in version 1.68.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

6 participants