From 7fa34adedb4169bab8697c72d5b7ae59970d1f73 Mon Sep 17 00:00:00 2001
From: julianajlk <julianajlk@gmail.com>
Date: Mon, 15 Apr 2024 13:32:28 -0400
Subject: [PATCH] fix: Add stripeSelectedPaymentMethod to payment_selected
 click event

---
 src/payment/checkout/Checkout.jsx                     |  4 ++--
 .../checkout/payment-form/PlaceOrderButton.jsx        |  6 ++++--
 .../checkout/payment-form/StripePaymentForm.jsx       | 11 ++++++-----
 src/payment/payment-methods/stripe/service.js         |  4 ++--
 4 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/src/payment/checkout/Checkout.jsx b/src/payment/checkout/Checkout.jsx
index e2a32163d..03c3ceec6 100644
--- a/src/payment/checkout/Checkout.jsx
+++ b/src/payment/checkout/Checkout.jsx
@@ -93,13 +93,13 @@ class Checkout extends React.Component {
     this.props.submitPayment({ method: 'stripe', ...formData });
   };
 
-  handleSubmitStripeButtonClick = () => {
+  handleSubmitStripeButtonClick = (stripeSelectedPaymentMethod) => {
     sendTrackEvent(
       'edx.bi.ecommerce.basket.payment_selected',
       {
         type: 'click',
         category: 'checkout',
-        paymentMethod: 'Credit Card - Stripe',
+        paymentMethod: stripeSelectedPaymentMethod === 'affirm' ? 'Affirm - Stripe' : 'Credit Card - Stripe',
         checkoutType: 'client_side',
         stripeEnabled: this.props.enableStripePaymentProcessor,
       },
diff --git a/src/payment/checkout/payment-form/PlaceOrderButton.jsx b/src/payment/checkout/payment-form/PlaceOrderButton.jsx
index fec4a883d..22215bac9 100644
--- a/src/payment/checkout/payment-form/PlaceOrderButton.jsx
+++ b/src/payment/checkout/payment-form/PlaceOrderButton.jsx
@@ -4,7 +4,7 @@ import { injectIntl, FormattedMessage } from '@edx/frontend-platform/i18n';
 import { StatefulButton } from '@openedx/paragon';
 
 const PlaceOrderButton = ({
-  showLoadingButton, onSubmitButtonClick, disabled, isProcessing,
+  showLoadingButton, onSubmitButtonClick, stripeSelectedPaymentMethod, disabled, isProcessing,
 }) => {
   let submitButtonState = 'default';
   // istanbul ignore if
@@ -26,7 +26,7 @@ const PlaceOrderButton = ({
             size="lg"
             block
             state={submitButtonState}
-            onClick={onSubmitButtonClick}
+            onClick={() => onSubmitButtonClick(stripeSelectedPaymentMethod)}
             labels={{
               default: (
                 <FormattedMessage
@@ -52,6 +52,7 @@ const PlaceOrderButton = ({
 
 PlaceOrderButton.propTypes = {
   onSubmitButtonClick: PropTypes.func.isRequired,
+  stripeSelectedPaymentMethod: PropTypes.string,
   showLoadingButton: PropTypes.bool,
   disabled: PropTypes.bool,
   isProcessing: PropTypes.bool,
@@ -59,6 +60,7 @@ PlaceOrderButton.propTypes = {
 
 PlaceOrderButton.defaultProps = {
   showLoadingButton: false,
+  stripeSelectedPaymentMethod: null,
   disabled: false,
   isProcessing: false,
 };
diff --git a/src/payment/checkout/payment-form/StripePaymentForm.jsx b/src/payment/checkout/payment-form/StripePaymentForm.jsx
index 24b320673..747c2af15 100644
--- a/src/payment/checkout/payment-form/StripePaymentForm.jsx
+++ b/src/payment/checkout/payment-form/StripePaymentForm.jsx
@@ -41,6 +41,9 @@ const StripePaymentForm = ({
   isSubscription,
   paymentDataSelector,
 }) => {
+  // Check payment type before submitting since BNPL requires state/zip code and Afterpay requires a shipping address.
+  // This is also used for analytics on "Place Order" click event.
+  const [stripeSelectedPaymentMethod, setStripeSelectedPaymentMethod] = useState(null);
   const stripe = useStripe();
   const elements = useElements();
   const context = useContext(AppContext);
@@ -54,9 +57,6 @@ const StripePaymentForm = ({
   const [firstErrorId, setfirstErrorId] = useState(false);
   const [shouldFocusFirstError, setshouldFocusFirstError] = useState(false);
 
-  // Check payment type before submitting since BNPL requires state/zip code and Afterpay requires a shipping address
-  let stripePaymentMethodType;
-
   const checkoutDetails = useSelector(paymentDataSelector);
   const {
     enableStripePaymentProcessor,
@@ -148,13 +148,13 @@ const StripePaymentForm = ({
     }
 
     onSubmitPayment({
-      skus, elements, stripe, context, values, stripePaymentMethodType,
+      skus, elements, stripe, context, values, stripeSelectedPaymentMethod,
     });
   };
 
   const handleStripeElementOnChange = (event) => {
     if (event.value) {
-      stripePaymentMethodType = event.value.type;
+      setStripeSelectedPaymentMethod(event.value.type);
     }
   };
 
@@ -227,6 +227,7 @@ const StripePaymentForm = ({
       ) : (
         <PlaceOrderButton
           onSubmitButtonClick={onSubmitButtonClick}
+          stripeSelectedPaymentMethod={stripeSelectedPaymentMethod}
           showLoadingButton={showLoadingButton}
           disabled={submitting}
           isProcessing={isProcessing}
diff --git a/src/payment/payment-methods/stripe/service.js b/src/payment/payment-methods/stripe/service.js
index 0df397b3d..62e59c0ef 100644
--- a/src/payment/payment-methods/stripe/service.js
+++ b/src/payment/payment-methods/stripe/service.js
@@ -18,7 +18,7 @@ ensureConfig(['ECOMMERCE_BASE_URL', 'STRIPE_RESPONSE_URL'], 'Stripe API service'
 export default async function checkout(
   basket,
   {
-    skus, elements, stripe, context, values, stripePaymentMethodType,
+    skus, elements, stripe, context, values, stripeSelectedPaymentMethod,
   },
   setLocation = href => { global.location.href = href; }, // HACK: allow tests to mock setting location
 ) {
@@ -36,7 +36,7 @@ export default async function checkout(
   } = values;
 
   let shippingAddress;
-  if (stripePaymentMethodType === 'afterpay_clearpay') {
+  if (stripeSelectedPaymentMethod === 'afterpay_clearpay') {
     shippingAddress = {
       address: {
         city,