🪟 Add Segment event for 'Buy Credits' (#15366)

* add segment event for "Buy credits" button

* update event's name for checkout process

Author: dizel852

airbyte-webapp/src/core/analytics/types.ts

@@ -14,6 +14,7 @@ export const enum Namespace {
   CONNECTOR = "Connector",
   ONBOARDING = "Onboarding",
   USER = "User",
+  CREDITS = "Credits",
 }
 
 export const enum Action {
@@ -34,6 +35,7 @@ export const enum Action {
   PREFERENCES = "Preferences",
   NO_MATCHING_CONNECTOR = "NoMatchingConnector",
   SELECTION_OPENED = "SelectionOpened",
+  CHECKOUT_START = "CheckoutStart",
 }
 
 export type EventParams = Record<string, unknown>;

airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/components/RemainingCredits.tsx

@@ -9,6 +9,8 @@ import styled from "styled-components";
 import { Button, LoadingButton } from "components";
 
 import { useConfig } from "config";
+import { Action, Namespace } from "core/analytics";
+import { useAnalyticsService } from "hooks/services/Analytics";
 import { useCurrentWorkspace } from "hooks/services/useWorkspace";
 import { CloudWorkspace } from "packages/cloud/lib/domain/cloudWorkspaces/types";
 import { useStripeCheckout } from "packages/cloud/services/stripe/StripeService";
@@ -67,6 +69,7 @@ const RemainingCredits: React.FC<Props> = ({ selfServiceCheckoutEnabled }) => {
   const [searchParams, setSearchParams] = useSearchParams();
   const invalidateWorkspace = useInvalidateCloudWorkspace(currentWorkspace.workspaceId);
   const { isLoading, mutateAsync: createCheckout } = useStripeCheckout();
+  const analytics = useAnalyticsService();
   const [isWaitingForCredits, setIsWaitingForCredits] = useState(false);
 
   useEffectOnce(() => {
@@ -107,6 +110,9 @@ const RemainingCredits: React.FC<Props> = ({ selfServiceCheckoutEnabled }) => {
       successUrl: successUrl.href,
       cancelUrl: window.location.href,
     });
+    await analytics.track(Namespace.CREDITS, Action.CHECKOUT_START, {
+      actionDescription: "Checkout Start",
+    });
     // Forward to stripe as soon as we created a checkout session successfully
     window.location.assign(stripeUrl);
   };