feat: Add trackPaymentButtonClick on PayPal button

src/payment/checkout/Checkout.jsx

@@ -16,7 +16,11 @@ import {
   paymentSelector,
   updateClientSecretSelector,
 } from '../data/selectors';
-import { fetchClientSecret, submitPayment } from '../data/actions';
+import {
+  fetchClientSecret,
+  submitPayment,
+  trackPaymentButtonClick,
+} from '../data/actions';
 import AcceptedCardLogos from './assets/accepted-card-logos.png';
 
 import PaymentForm from './payment-form/PaymentForm';
@@ -63,6 +67,9 @@ class Checkout extends React.Component {
     );
 
     this.props.submitPayment({ method: 'paypal' });
+
+    // Red Ventures Cohesion Tagular Event Tracking
+    this.props.trackPaymentButtonClick('PayPal');
   };
 
   // eslint-disable-next-line react/no-unused-class-component-methods
@@ -330,6 +337,7 @@ Checkout.propTypes = {
   loaded: PropTypes.bool,
   fetchClientSecret: PropTypes.func.isRequired,
   submitPayment: PropTypes.func.isRequired,
+  trackPaymentButtonClick: PropTypes.func.isRequired,
   isFreeBasket: PropTypes.bool,
   submitting: PropTypes.bool,
   isBasketProcessing: PropTypes.bool,
@@ -355,9 +363,15 @@ Checkout.defaultProps = {
   isPaypalRedirect: false,
 };
 
+const mapDispatchToProps = (dispatch) => ({
+  fetchClientSecret: () => dispatch(fetchClientSecret),
+  submitPayment: (data) => dispatch(submitPayment(data)),
+  trackPaymentButtonClick: (buttonName) => dispatch(trackPaymentButtonClick(buttonName)),
+});
+
 const mapStateToProps = (state) => ({
   ...paymentSelector(state),
   ...updateClientSecretSelector(state),
 });
 
-export default connect(mapStateToProps, { fetchClientSecret, submitPayment })(injectIntl(Checkout));
+export default connect(mapStateToProps, mapDispatchToProps)(injectIntl(Checkout));

src/payment/data/actions.js

@@ -1,4 +1,6 @@
 import { createRoutine } from 'redux-saga-routines';
+import EventMap from '../../cohesion/constants';
+import tagularEvent from '../../cohesion/helpers';
 
 // Routines are action + action creator pairs in a series.
 // Actions adhere to the flux standard action format.
@@ -74,3 +76,25 @@ export const clientSecretDataReceived = clientSecret => ({
   type: CLIENT_SECRET_DATA_RECEIVED,
   payload: clientSecret,
 });
+
+export const TRACK_PAYMENT_BUTTON_CLICK = 'TRACK_PAYMENT_BUTTON_CLICK';
+
+export const trackPaymentButtonClick = buttonName => {
+  const payload = {
+    text: buttonName,
+    name: buttonName.toLowerCase(),
+    title: 'Payment | edX',
+    url: 'https://payment.edx.org',
+    pageType: 'checkout',
+    elementType: 'BUTTON',
+  };
+
+  // Ideally this would happen in a middleware saga for separation of concerns
+  // but due to deadlines/payment MFE will go away, adding a call here
+  tagularEvent(EventMap.ElementClicked, payload);
+
+  return {
+    type: TRACK_PAYMENT_BUTTON_CLICK,
+    payload,
+  };
+};

src/payment/data/reducers.js

@@ -12,6 +12,7 @@ import {
   submitPayment,
   fetchCaptureKey,
   fetchClientSecret,
+  TRACK_PAYMENT_BUTTON_CLICK,
 } from './actions';
 
 import { DEFAULT_STATUS } from '../checkout/payment-form/flex-microform/constants';
@@ -115,10 +116,30 @@ const clientSecret = (state = clientSecretInitialState, action = null) => {
   return state;
 };
 
+const pageTrackingInitialState = {
+  paymentButtonClicks: [],
+};
+
+const pageTracking = (state = pageTrackingInitialState, action = null) => {
+  if (action !== null) {
+    switch (action.type) {
+      case TRACK_PAYMENT_BUTTON_CLICK:
+        return {
+          ...state,
+          paymentButtonClicks: [...state.paymentButtonClicks, action.payload],
+        };
+
+      default:
+    }
+  }
+  return state;
+};
+
 const reducer = combineReducers({
   basket,
   captureKey,
   clientSecret,
+  pageTracking,
 });
 
 export default reducer;