feat: add button session id to modals

src/components/modal/v2/lib/utils.js

@@ -23,7 +23,8 @@ export const getContent = memoize(
  contextualComponents,
  devTouchpoint,
  disableSetCookie,
- features
+ features,
+ buttonSessionId
  }) => {
  const query = objectEntries({
  currency,
@@ -44,7 +45,8 @@ export const getContent = memoize(
  contextual_components: contextualComponents,
  devTouchpoint,
  disableSetCookie,
- features
+ features,
+ buttonSessionId
  })
  .filter(([, val]) => Boolean(val))
  .reduce(

src/library/controllers/modal/interface.js

@@ -42,7 +42,8 @@ const memoizedModal = memoizeOnProps(
  contextualComponents,
  cspNonce,
  integrationIdentifier,
- features
+ features,
+ buttonSessionId
  }) => {
  addPerformanceMeasure(PERFORMANCE_MEASURE_KEYS.FIRST_MODAL_RENDER_DELAY);
 
@@ -68,7 +69,8 @@ const memoizedModal = memoizeOnProps(
  contextualComponents,
  cspNonce,
  integrationIdentifier,
- features
+ features,
+ buttonSessionId
  });
  // Fired from inside the default onReady callback
  let renderProm;

src/library/zoid/message/validation.js

@@ -275,6 +275,17 @@ export default {
 
  return undefined;
  },
+ buttonSessionId: ({ props: { buttonSessionId } }) => {
+ if (typeof buttonSessionId !== 'undefined') {
+ if (!validateType(Types.STRING, buttonSessionId)) {
+ logInvalidType('buttonSessionId', Types.STRING, buttonSessionId);
+ } else {
+ return buttonSessionId;
+ }
+ }
+
+ return undefined;
+ },
  contextualComponents: ({ props: { contextualComponents } }) => {
  // Return early if contextualComponents is undefined
  if (typeof contextualComponents === 'undefined') {

src/library/zoid/modal/component.js

@@ -137,6 +137,12 @@ export default createGlobalVariableGetter('__paypal_credit_modal__', () =>
  required: false,
  value: validate.ecToken
  },
+ buttonSessionId: {
+ type: 'string',
+ queryParam: 'button_session_id',
+ required: false,
+ value: validate.buttonSessionId
+ },
  pageType: {
  type: 'string',
  queryParam: 'page_type',
@@ -159,7 +165,6 @@ export default createGlobalVariableGetter('__paypal_credit_modal__', () =>
 
  return ({ linkName, src }) => {
  const { index, refIndex } = props;
-
  logger.track({
  index,
  refIndex,
@@ -284,7 +289,7 @@ export default createGlobalVariableGetter('__paypal_credit_modal__', () =>
  type: 'function',
  queryParam: false,
  value: ({ props, state, event }) => {
- const { onReady } = props;
+ const { onReady, buttonSessionId } = props;
  // Fired anytime we fetch new content (e.g. amount change)
  return ({ products, meta, ts }) => {
  const { index, offer, merchantId, account, refIndex, messageRequestId } = props;
@@ -318,6 +323,7 @@ export default createGlobalVariableGetter('__paypal_credit_modal__', () =>
  [index]: {
  type: 'modal',
  messageRequestId,
+ buttonSessionId,
  account: merchantId || account,
  partnerClientId,
  trackingDetails

src/utils/logger.js

@@ -27,8 +27,8 @@ function generateLogPayload(account, { meta, events: bizEvents, tracking }) {
  const components = Object.entries(meta)
  .filter(([, component]) => component.account === account)
  .map(([index, component]) => {
- const { type, messageRequestId, stats = {}, trackingDetails } = component;
-
+ // buttonSessionId could be undefined here
+ const { type, buttonSessionId, messageRequestId, stats = {}, trackingDetails } = component;
  const { clickUrl } = trackingDetails;
  delete trackingDetails.clickUrl;
 
@@ -58,6 +58,7 @@ function generateLogPayload(account, { meta, events: bizEvents, tracking }) {
  return {
  component_type: type,
  instance_id: messageRequestId,
+ button_session_id: buttonSessionId,
  fdata,
  merchant_events: bizEvents.filter(event => event.payload?.index === index),
  ...trackingDetails,