feat: Add pageType to Checkout window

edx · Nov 7, 2024 · 52504dc · 52504dc
1 parent 461089f
commit 52504dc
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 19 deletions.
diff --git a/public/index.html b/public/index.html
@@ -23,7 +23,7 @@
     <% if (htmlWebpackPlugin?.options?.cohesionConfig) { %>
     <script>
       !function(co,h,e,s,i,o,n){console.log('Cohesion script running'); var d='documentElement';var a='className';h[d][a]+=' preampjs';
-      n.k=e;co._Cohesion=n;co._Preamp={k:s,start:new Date};co._Fuse={k:i};co._Tagular={k:o}; co.tagular = o;
+      n.k=e;co._Cohesion=n;co._Preamp={k:s,start:new Date};co._Fuse={k:i};co._Tagular={k:o};
       [e,s,i,o].map(function(x){co[x]=co[x]||function(){(co[x].q=co[x].q||[]).push([].slice.call(arguments))}});
       var b=function(){var u=h[d][a];h[d][a]=u.replace(/ ?preampjs/g,'')};
       h.addEventListener('DOMContentLoaded',function(){co.setTimeout(b,3e3);

diff --git a/src/cohesion/constants.js b/src/cohesion/constants.js
@@ -4,7 +4,10 @@ export const ElementType = {
   Button: 'BUTTON',
 };
 
-export const PaymentTitle = 'Payment | edX';
+export const PageData = {
+  PaymentTitle: 'Payment | edX',
+  PageType: 'checkout',
+};
 
 export const EventMap = {
   ProductClicked: 'redventures.ecommerce.v1.ProductClicked',

diff --git a/src/feedback/AlertMessage.jsx b/src/feedback/AlertMessage.jsx
@@ -6,7 +6,7 @@ import PropTypes from 'prop-types';
 import { Alert } from '@openedx/paragon';
 import { ALERT_TYPES, MESSAGE_TYPES } from './data/constants';
 import { trackElementIntersection } from '../payment/data/actions';
-import { ElementType, PaymentTitle, IS_FULLY_SHOWN_THRESHOLD_OR_MARGIN } from '../cohesion/constants';
+import { ElementType, PageData, IS_FULLY_SHOWN_THRESHOLD_OR_MARGIN } from '../cohesion/constants';
 
 // Put in a message type, get an alert type.
 const severityMap = {
@@ -31,9 +31,9 @@ const AlertMessage = (props) => {
       entries.forEach(entry => {
         if (entry.isIntersecting && entry.target?.innerText.includes('added to basket')) {
           const tagularElement = {
-            title: PaymentTitle,
+            title: PageData.PaymentTitle,
             url: entry.target?.baseURI,
-            pageType: 'checkout',
+            pageType: PageData.PageType,
             elementType: ElementType.Button,
             name: 'promotional-code',
             text: 'Apply',

diff --git a/src/payment/checkout/Checkout.jsx b/src/payment/checkout/Checkout.jsx
@@ -9,10 +9,7 @@ import {
   intlShape,
 } from '@edx/frontend-platform/i18n';
 import { sendTrackEvent } from '@edx/frontend-platform/analytics';
-import {
-  ElementType,
-  PaymentTitle,
-} from '../../cohesion/constants';
+import { ElementType, PageData } from '../../cohesion/constants';
 
 import messages from './Checkout.messages';
 import {
@@ -45,6 +42,7 @@ class Checkout extends React.Component {
 
   componentDidMount() {
     this.props.fetchClientSecret();
+    window.chsn_pageType = PageData.PageType;
   }
 
   handleRedirectToPaypal = () => {
@@ -75,9 +73,9 @@ class Checkout extends React.Component {
 
     // Red Ventures Cohesion Tagular Event Tracking for PayPal
     const tagularElement = {
-      title: PaymentTitle,
+      title: PageData.PaymentTitle,
       url: window.location.href,
-      pageType: 'checkout',
+      pageType: PageData.PageType,
       elementType: ElementType.Button,
       text: paymentMethod,
       name: paymentMethod.toLowerCase(),
@@ -133,9 +131,9 @@ class Checkout extends React.Component {
   handleSubmitStripe = (formData) => {
     // Red Ventures Cohesion Tagular Event Tracking for Stripe
     const tagularElement = {
-      title: PaymentTitle,
+      title: PageData.PaymentTitle,
       url: window.location.href,
-      pageType: 'checkout',
+      pageType: PageData.PageType,
       timestamp: Date.now(),
       productList: this.getProductList(),
     };

diff --git a/src/payment/checkout/payment-form/PlaceOrderButton.jsx b/src/payment/checkout/payment-form/PlaceOrderButton.jsx
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import { injectIntl, FormattedMessage } from '@edx/frontend-platform/i18n';
 import { StatefulButton } from '@openedx/paragon';
 import { trackElementIntersection } from '../../data/actions';
-import { ElementType, PaymentTitle, IS_FULLY_SHOWN_THRESHOLD_OR_MARGIN } from '../../../cohesion/constants';
+import { ElementType, PageData, IS_FULLY_SHOWN_THRESHOLD_OR_MARGIN } from '../../../cohesion/constants';
 
 const PlaceOrderButton = ({
   showLoadingButton, onSubmitButtonClick, stripeSelectedPaymentMethod, disabled, isProcessing,
@@ -24,9 +24,9 @@ const PlaceOrderButton = ({
       entries.forEach(entry => {
         if (entry.isIntersecting) {
           const tagularElement = {
-            title: PaymentTitle,
+            title: PageData.PaymentTitle,
             url: window.location.href,
-            pageType: 'checkout',
+            pageType: PageData.PageType,
             elementType: ElementType.Button,
             position: 'placeOrderButton',
             name: 'stripe',

diff --git a/src/payment/payment-methods/paypal/PayPalButton.jsx b/src/payment/payment-methods/paypal/PayPalButton.jsx
@@ -3,7 +3,7 @@ import { useDispatch } from 'react-redux';
 import PropTypes from 'prop-types';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { trackElementIntersection } from '../../data/actions';
-import { ElementType, PaymentTitle, IS_FULLY_SHOWN_THRESHOLD_OR_MARGIN } from '../../../cohesion/constants';
+import { ElementType, PageData, IS_FULLY_SHOWN_THRESHOLD_OR_MARGIN } from '../../../cohesion/constants';
 
 import PayPalLogo from './assets/paypal-logo.png';
 import messages from './PayPalButton.messages';
@@ -19,9 +19,9 @@ const PayPalButton = ({ intl, isProcessing, ...props }) => {
         if (entry.isIntersecting) {
           const elementId = entry.target?.id;
           const tagularElement = {
-            title: PaymentTitle,
+            title: PageData.PaymentTitle,
             url: window.location.href,
-            pageType: 'checkout',
+            pageType: PageData.PageType,
             elementType: ElementType.Button,
             position: elementId,
             name: 'paypal',