From e286905f5e270978c7dc47cced05617d03549683 Mon Sep 17 00:00:00 2001
From: Pedro Pablo Aste Kompen <wachunei@gmail.com>
Date: Mon, 26 Feb 2024 12:28:52 -0300
Subject: [PATCH] feat(ramp): add quotes expanded event

---
 .../UI/Ramp/Views/Quotes/Quotes.test.tsx      | 12 +++++++
 .../UI/Ramp/Views/Quotes/Quotes.tsx           | 31 ++++++++++++++++++-
 .../Quotes/__snapshots__/Quotes.test.tsx.snap |  2 +-
 app/components/UI/Ramp/types/analytics.ts     | 20 ++++++++++--
 app/core/Analytics/MetaMetrics.events.ts      |  4 +++
 5 files changed, 65 insertions(+), 4 deletions(-)

diff --git a/app/components/UI/Ramp/Views/Quotes/Quotes.test.tsx b/app/components/UI/Ramp/Views/Quotes/Quotes.test.tsx
index 4d82d4c8d25a..86d8f9b5a930 100644
--- a/app/components/UI/Ramp/Views/Quotes/Quotes.test.tsx
+++ b/app/components/UI/Ramp/Views/Quotes/Quotes.test.tsx
@@ -251,6 +251,18 @@ describe('Quotes', () => {
       jest.advanceTimersByTime(3000);
       jest.clearAllTimers();
     });
+    expect(mockTrackEvent.mock.lastCall).toMatchInlineSnapshot(`
+      Array [
+        "ONRAMP_QUOTES_EXPANDED",
+        Object {
+          "amount": 50,
+          "chain_id_destination": "1",
+          "currency_destination": "ETH",
+          "currency_source": "USD",
+          "payment_method_id": "/payment-methods/test-payment-method",
+        },
+      ]
+    `);
     expect(screen.toJSON()).toMatchSnapshot();
     act(() => {
       jest.useRealTimers();
diff --git a/app/components/UI/Ramp/Views/Quotes/Quotes.tsx b/app/components/UI/Ramp/Views/Quotes/Quotes.tsx
index 90453d7e0084..da931aea184e 100644
--- a/app/components/UI/Ramp/Views/Quotes/Quotes.tsx
+++ b/app/components/UI/Ramp/Views/Quotes/Quotes.tsx
@@ -230,6 +230,35 @@ function Quotes() {
     trackEvent,
   ]);
 
+  const handleExpandQuotes = useCallback(() => {
+    setIsExpanded(true);
+    const payload = {
+      payment_method_id: selectedPaymentMethodId as string,
+      currency_source: params.fiatCurrency?.symbol,
+      currency_destination: params.asset?.symbol,
+      amount: params.amount,
+    };
+    if (isBuy) {
+      trackEvent('ONRAMP_QUOTES_EXPANDED', {
+        ...payload,
+        chain_id_destination: selectedChainId,
+      });
+    } else {
+      trackEvent('OFFRAMP_QUOTES_EXPANDED', {
+        ...payload,
+        chain_id_source: selectedChainId,
+      });
+    }
+  }, [
+    isBuy,
+    params.amount,
+    params.asset?.symbol,
+    params.fiatCurrency?.symbol,
+    selectedChainId,
+    selectedPaymentMethodId,
+    trackEvent,
+  ]);
+
   const handleOnQuotePress = useCallback(
     (quote: QuoteResponse | SellQuoteResponse) => {
       setProviderId(quote.provider.id);
@@ -739,7 +768,7 @@ function Quotes() {
                     label: strings(
                       'fiat_on_ramp_aggregator.explore_more_options',
                     ),
-                    onPress: () => setIsExpanded(true),
+                    onPress: handleExpandQuotes,
                   },
                 ]
               : []
diff --git a/app/components/UI/Ramp/Views/Quotes/__snapshots__/Quotes.test.tsx.snap b/app/components/UI/Ramp/Views/Quotes/__snapshots__/Quotes.test.tsx.snap
index 5cadbcbb8380..7ac2cbd1ac0f 100644
--- a/app/components/UI/Ramp/Views/Quotes/__snapshots__/Quotes.test.tsx.snap
+++ b/app/components/UI/Ramp/Views/Quotes/__snapshots__/Quotes.test.tsx.snap
@@ -2843,7 +2843,7 @@ exports[`Quotes renders correctly after animation with quotes 1`] = `
 </View>
 `;
 
-exports[`Quotes renders correctly after animation with quotes and expanded 1`] = `
+exports[`Quotes renders correctly after animation with quotes and expanded 2`] = `
 <View
   style={
     Object {
diff --git a/app/components/UI/Ramp/types/analytics.ts b/app/components/UI/Ramp/types/analytics.ts
index d358b29786b1..6c20ec38197a 100644
--- a/app/components/UI/Ramp/types/analytics.ts
+++ b/app/components/UI/Ramp/types/analytics.ts
@@ -280,6 +280,21 @@ interface RampTransaction {
   order_id?: string;
 }
 
+interface RampQuotesExpanded {
+  payment_method_id: string;
+  currency_source: string;
+  currency_destination: string;
+  amount: number | string;
+}
+
+interface OnRampQuotesExpanded extends RampQuotesExpanded {
+  chain_id_destination: string;
+}
+
+interface OffRampQuotesExpanded extends RampQuotesExpanded {
+  chain_id_source: string;
+}
+
 export interface AnalyticsEvents {
   BUY_BUTTON_CLICKED: BuyButtonClicked;
   SELL_BUTTON_CLICKED: SellButtonClicked;
@@ -305,6 +320,9 @@ export interface AnalyticsEvents {
   ONRAMP_QUOTES_RECEIVED: OnRampQuotesReceived;
   OFFRAMP_QUOTES_RECEIVED: OffRampQuotesReceived;
 
+  ONRAMP_QUOTES_EXPANDED: OnRampQuotesExpanded;
+  OFFRAMP_QUOTES_EXPANDED: OffRampQuotesExpanded;
+
   ONRAMP_PROVIDER_SELECTED: OnRampProviderSelected;
   OFFRAMP_PROVIDER_SELECTED: OffRampProviderSelected;
 
@@ -341,6 +359,4 @@ export interface AnalyticsEvents {
   OFFRAMP_SEND_TRANSACTION_INVOKED: RampTransaction;
   OFFRAMP_SEND_TRANSACTION_CONFIRMED: RampTransaction;
   OFFRAMP_SEND_TRANSACTION_REJECTED: RampTransaction;
-
-  // after redirection events will go here
 }
diff --git a/app/core/Analytics/MetaMetrics.events.ts b/app/core/Analytics/MetaMetrics.events.ts
index 75ae6b91d52e..edbde16cbf88 100644
--- a/app/core/Analytics/MetaMetrics.events.ts
+++ b/app/core/Analytics/MetaMetrics.events.ts
@@ -205,6 +205,7 @@ enum EVENT_NAME {
   ONRAMP_QUOTES_REQUESTED = 'On-ramp Quotes Requested',
   ONRAMP_CANCELED = 'On-ramp Canceled',
   ONRAMP_QUOTES_RECEIVED = 'On-ramp Quotes Received',
+  ONRAMP_QUOTES_EXPANDED = 'On-ramp Quotes Expanded',
   ONRAMP_PROVIDER_SELECTED = 'On-ramp Provider Selected',
   ONRAMP_PROVIDER_DETAILS_VIEWED = 'On-ramp Provider Details Viewed',
   ONRAMP_DIRECT_PROVIDER_CLICKED = 'On-ramp Provider Custom Action Clicked',
@@ -227,6 +228,7 @@ enum EVENT_NAME {
   OFFRAMP_QUOTES_REQUESTED = 'Off-ramp Quotes Requested',
   OFFRAMP_CANCELED = 'Off-ramp Canceled',
   OFFRAMP_QUOTES_RECEIVED = 'Off-ramp Quotes Received',
+  OFFRAMP_QUOTES_EXPANDED = 'Off-ramp Quotes Expanded',
   OFFRAMP_PROVIDER_SELECTED = 'Off-ramp Provider Selected',
   OFFRAMP_PROVIDER_DETAILS_VIEWED = 'Off-ramp Provider Details Viewed',
   OFFRAMP_DIRECT_PROVIDER_CLICKED = 'Off-ramp Provider Custom Action Clicked',
@@ -592,6 +594,7 @@ const events = {
   ONRAMP_QUOTES_REQUESTED: generateOpt(EVENT_NAME.ONRAMP_QUOTES_REQUESTED),
   ONRAMP_CANCELED: generateOpt(EVENT_NAME.ONRAMP_CANCELED),
   ONRAMP_QUOTES_RECEIVED: generateOpt(EVENT_NAME.ONRAMP_QUOTES_RECEIVED),
+  ONRAMP_QUOTES_EXPANDED: generateOpt(EVENT_NAME.ONRAMP_QUOTES_EXPANDED),
   ONRAMP_PROVIDER_SELECTED: generateOpt(EVENT_NAME.ONRAMP_PROVIDER_SELECTED),
   ONRAMP_PROVIDER_DETAILS_VIEWED: generateOpt(
     EVENT_NAME.ONRAMP_PROVIDER_DETAILS_VIEWED,
@@ -628,6 +631,7 @@ const events = {
   OFFRAMP_QUOTES_REQUESTED: generateOpt(EVENT_NAME.OFFRAMP_QUOTES_REQUESTED),
   OFFRAMP_CANCELED: generateOpt(EVENT_NAME.OFFRAMP_CANCELED),
   OFFRAMP_QUOTES_RECEIVED: generateOpt(EVENT_NAME.OFFRAMP_QUOTES_RECEIVED),
+  OFFRAMP_QUOTES_EXPANDED: generateOpt(EVENT_NAME.OFFRAMP_QUOTES_EXPANDED),
   OFFRAMP_PROVIDER_SELECTED: generateOpt(EVENT_NAME.OFFRAMP_PROVIDER_SELECTED),
   OFFRAMP_PROVIDER_DETAILS_VIEWED: generateOpt(
     EVENT_NAME.OFFRAMP_PROVIDER_DETAILS_VIEWED,