Skip to content

Commit 7779798

Browse files
wjrosawjrosa
authored
Fix missing order attribution metadata when using ECE (#3629)
* Fix missing order attribution metadata when using ECE * Adding order attribution fields to block checkout * Adding order attribution fields to PRB * Add order attribution data to ECE * Adding inputs only when they don't exist * Moving logic to a new method * Fix order attribution for PRB * Move method to shared file * Moving order attribution inputs creation to a shared trait * Fix include * Fix data not being sent for shortcode PRB * Removing unnecessary trait * Changelog and readme entries * Reverting unnecessary changes * Reverting unnecessary changes * Adding specific unit tests * Adding specific unit tests * Adding specific unit tests * Fix block checkout attribution
1 parent c3e261c commit 7779798

File tree

11 files changed

+192
-5
lines changed

11 files changed

+192
-5
lines changed

‎assets/js/stripe-payment-request.js

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -144,7 +144,7 @@ jQuery( function( $ ) {
144144

145145
data = wc_stripe_payment_request.getRequiredFieldDataFromCheckoutForm( data );
146146

147-
return data;
147+
return { ...data, ...wc_stripe_payment_request.extractOrderAttributionData() };
148148
},
149149

150150
/**
@@ -173,7 +173,7 @@ jQuery( function( $ ) {
173173
if ( ! data[ name ] ) {
174174
data[ name ] = value;
175175
}
176-
176+
177177
// if shipping same as billing is selected, copy the billing field to shipping field.
178178
const shipToDiffAddress = $( '#ship-to-different-address' ).find( 'input' ).is( ':checked' );
179179
if ( ! shipToDiffAddress ) {
@@ -833,6 +833,24 @@ jQuery( function( $ ) {
833833
} );
834834
},
835835

836+
/**
837+
* Get order attribution data from the hidden inputs.
838+
*
839+
* @return {Object} Order attribution data.
840+
*/
841+
extractOrderAttributionData: function() {
842+
const $orderAttributionWrapper = $( 'wc-order-attribution-inputs' );
843+
if ( ! $orderAttributionWrapper.length ) {
844+
return {};
845+
}
846+
847+
const orderAttributionData = {};
848+
$orderAttributionWrapper.children( 'input' ).each( function () {
849+
orderAttributionData[ $(this).attr( 'name' ) ] = $(this).val();
850+
});
851+
return orderAttributionData;
852+
},
853+
836854
showPaymentRequestButton: function( prButton ) {
837855
if ( wc_stripe_payment_request.isCustomPaymentRequestButton( prButton ) ) {
838856
prButton.addClass( 'is-active' );

‎changelog.txt

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
*** Changelog ***
22

33
= 9.0.0 - xxxx-xx-xx =
4+
* Fix - Fix order attribution metadata not included in PRBs or Express Checkout Element.
45
* Add - Pre-fill user email and phone number for Link in the Payment Element.
56
* Remove - Remove Link autofill modal feature.
67
* Update - Improve accuracy of webhook status information displayed in settings page.

‎client/blocks/__tests__/utils.test.js

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import { render } from '@testing-library/react';
2+
import {
3+
extractOrderAttributionData,
4+
populateOrderAttributionInputs,
5+
} from 'wcstripe/blocks/utils';
6+
7+
describe( 'Blocks Utils', () => {
8+
describe( 'extractOrderAttributionData', () => {
9+
it( 'order attribution wrapper not found', () => {
10+
const data = extractOrderAttributionData();
11+
expect( data ).toStrictEqual( {} );
12+
} );
13+
14+
it( 'order attribution wrapper exists', () => {
15+
render(
16+
<wc-order-attribution-inputs>
17+
<input name="foo" defaultValue="bar" />
18+
<input name="baz" defaultValue="qux" />
19+
</wc-order-attribution-inputs>
20+
);
21+
22+
const data = extractOrderAttributionData();
23+
expect( data ).toStrictEqual( {
24+
foo: 'bar',
25+
baz: 'qux',
26+
} );
27+
} );
28+
} );
29+
30+
describe( 'populateOrderAttributionInputs', () => {
31+
test( 'order attribution global present', () => {
32+
global.wc_order_attribution = {
33+
params: {
34+
allowTracking: true,
35+
},
36+
setOrderTracking: jest.fn(),
37+
};
38+
39+
populateOrderAttributionInputs();
40+
41+
expect(
42+
global.wc_order_attribution.setOrderTracking
43+
).toHaveBeenCalledWith( true );
44+
} );
45+
} );
46+
} );

‎client/blocks/normalize.js

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,10 @@
99
* @typedef {import('@woocommerce/type-defs/billing').BillingData} CartBillingAddress
1010
*/
1111

12-
import { getBlocksConfiguration } from 'wcstripe/blocks/utils';
12+
import {
13+
extractOrderAttributionData,
14+
getBlocksConfiguration,
15+
} from 'wcstripe/blocks/utils';
1316

1417
/**
1518
* Normalizes order data received upon creating an order using the store's AJAX API.
@@ -79,7 +82,7 @@ const normalizeOrderData = ( paymentMethodEvent, paymentRequestType ) => {
7982
data.shipping_postcode = shipping?.postalCode;
8083
}
8184

82-
return data;
85+
return { ...data, ...extractOrderAttributionData() };
8386
};
8487

8588
/**

‎client/blocks/payment-request/payment-request-express.js

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { __ } from '@wordpress/i18n';
2+
import { useEffect } from '@wordpress/element';
23
import {
34
Elements,
45
PaymentRequestButtonElement,
@@ -70,6 +71,17 @@ const PaymentRequestExpressComponent = ( {
7071
);
7172
useCancelHandler( paymentRequest, onClose );
7273

74+
useEffect( () => {
75+
if ( paymentRequest ) {
76+
const orderAttribution = window?.wc_order_attribution;
77+
if ( orderAttribution ) {
78+
orderAttribution.setOrderTracking(
79+
orderAttribution.params.allowTracking
80+
);
81+
}
82+
}
83+
}, [ paymentRequest ] );
84+
7385
// locale is not a valid value for the paymentRequestButton style.
7486
// Make sure `theme` defaults to 'dark' if it's not found in the server provided configuration.
7587
let {
@@ -173,6 +185,7 @@ export const PaymentRequestExpress = ( props ) => {
173185
return (
174186
<Elements stripe={ stripe }>
175187
<PaymentRequestExpressComponent { ...props } />
188+
<wc-order-attribution-inputs id="wc-stripe-express-checkout__order-attribution-inputs" />
176189
</Elements>
177190
);
178191
};

‎client/blocks/upe/index.js

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,11 @@ import {
1414
expressCheckoutElementsStripeLink,
1515
} from 'wcstripe/blocks/express-checkout';
1616
import WCStripeAPI from 'wcstripe/api';
17-
import { getBlocksConfiguration } from 'wcstripe/blocks/utils';
17+
import {
18+
addOrderAttributionInputsIfNotExists,
19+
getBlocksConfiguration,
20+
populateOrderAttributionInputs,
21+
} from 'wcstripe/blocks/utils';
1822
import './styles.scss';
1923

2024
const api = new WCStripeAPI(
@@ -106,3 +110,9 @@ if ( getBlocksConfiguration()?.isECEEnabled ) {
106110

107111
// Update token labels when the checkout form is loaded.
108112
updateTokenLabelsWhenLoaded();
113+
114+
// Add order attribution inputs to the page.
115+
addOrderAttributionInputsIfNotExists();
116+
117+
// Populate order attribution inputs with order tracking data.
118+
populateOrderAttributionInputs();

‎client/blocks/utils.js

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -84,3 +84,57 @@ export const getApiKey = () => {
8484
}
8585
return apiKey;
8686
};
87+
88+
/**
89+
* Get order attribution data from the hidden inputs.
90+
*
91+
* @return {Object} Order attribution data.
92+
*/
93+
export const extractOrderAttributionData = () => {
94+
const orderAttributionWrapper = document.getElementsByTagName(
95+
'wc-order-attribution-inputs'
96+
);
97+
if ( ! orderAttributionWrapper.length ) {
98+
return {};
99+
}
100+
101+
const orderAttributionData = {};
102+
const orderAttributionInputs = orderAttributionWrapper[ 0 ].children;
103+
for ( let i = 0; i < orderAttributionInputs.length; i++ ) {
104+
orderAttributionData[ orderAttributionInputs[ i ].name ] =
105+
orderAttributionInputs[ i ].value;
106+
}
107+
return orderAttributionData;
108+
};
109+
110+
/**
111+
* Populate order attribution inputs with order tracking data.
112+
*
113+
* @return {void}
114+
*/
115+
export const populateOrderAttributionInputs = () => {
116+
const orderAttribution = window?.wc_order_attribution;
117+
if ( orderAttribution ) {
118+
orderAttribution.setOrderTracking(
119+
orderAttribution.params.allowTracking
120+
);
121+
}
122+
};
123+
124+
/**
125+
* Add order attribution inputs to the page.
126+
*
127+
* @return {void}
128+
*/
129+
export const addOrderAttributionInputsIfNotExists = () => {
130+
const elementId = 'wc-stripe-express-checkout__order-attribution-inputs';
131+
if ( document.getElementById( elementId ) ) {
132+
return;
133+
}
134+
135+
const orderAttributionInputs = document.createElement(
136+
'wc-order-attribution-inputs'
137+
);
138+
orderAttributionInputs.id = elementId;
139+
document.body.appendChild( orderAttributionInputs );
140+
};

‎client/express-checkout/utils/normalize.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import { extractOrderAttributionData } from 'wcstripe/blocks/utils';
2+
13
/**
24
* Normalizes incoming cart total items for use as a displayItems with the Stripe api.
35
*
@@ -72,6 +74,7 @@ export const normalizeOrderData = ( event, paymentMethodId ) => {
7274
express_checkout_type: event?.expressPaymentType,
7375
express_payment_type: event?.expressPaymentType,
7476
'wc-stripe-is-deferred-intent': true,
77+
...extractOrderAttributionData(),
7578
};
7679
};
7780

‎includes/payment-methods/class-wc-stripe-express-checkout-element.php

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -420,9 +420,25 @@ public function display_express_checkout_button_html() {
420420
<!-- A Stripe Element will be inserted here. -->
421421
</div>
422422
<?php
423+
424+
if ( is_cart() ) {
425+
add_action( 'woocommerce_after_cart', [ $this, 'add_order_attribution_inputs' ], 1 );
426+
} else {
427+
$this->add_order_attribution_inputs();
428+
}
429+
423430
$this->display_express_checkout_button_separator_html();
424431
}
425432

433+
/**
434+
* Add order attribution inputs to the page.
435+
*
436+
* @return void
437+
*/
438+
public function add_order_attribution_inputs() {
439+
echo '<wc-order-attribution-inputs id="wc-stripe-express-checkout__order-attribution-inputs"></wc-order-attribution-inputs>';
440+
}
441+
426442
/**
427443
* Display express checkout button separator.
428444
*/

‎readme.txt

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -111,6 +111,7 @@ If you get stuck, you can ask for help in the [Plugin Forum](https://wordpress.o
111111
== Changelog ==
112112

113113
= 9.0.0 - xxxx-xx-xx =
114+
* Fix - Fix order attribution metadata not included in PRBs or Express Checkout Element.
114115
* Add - Pre-fill user email and phone number for Link in the Payment Element.
115116
* Remove - Remove Link autofill modal feature.
116117
* Update - Improve accuracy of webhook status information displayed in settings page.

0 commit comments

Comments
 (0)