Deploy

src/Apps/Order/OrderApp.tsx

@@ -5,7 +5,10 @@ import { AppContainer } from "Apps/Components/AppContainer"
 import { StickyFooterWithInquiry } from "Apps/Order/Components/StickyFooter"
 import { ErrorPage } from "Components/ErrorPage"
 import { SalesforceWrapper } from "Components/SalesforceWrapper"
+import { useVariant } from "@unleash/proxy-client-react"
+import { CHECKOUT_REDESIGN_FLAG } from "Apps/Order/redirects"
 import { useSystemContext } from "System/Hooks/useSystemContext"
+import { useTrackFeatureVariantOnMount } from "System/Hooks/useTrackFeatureVariant"
 import { findCurrentRoute } from "System/Router/Utils/routeUtils"
 import { Media } from "Utils/Responsive"
 import { exceedsChatSupportThreshold } from "Utils/exceedsChatSupportThreshold"
@@ -42,6 +45,12 @@ export const preventHardReload = event => {
 const OrderApp: FC<React.PropsWithChildren<OrderAppProps>> = props => {
   const { order, children, match, router } = props
   const { isEigen } = useSystemContext()
+  const variant = useVariant(CHECKOUT_REDESIGN_FLAG)
+
+  useTrackFeatureVariantOnMount({
+    experimentName: CHECKOUT_REDESIGN_FLAG,
+    variantName: variant?.name,
+  })
 
   const removeNavigationListenerRef = useRef<null | (() => void)>(null)
 

src/Apps/Order/__tests__/OrderApp.jest.tsx

@@ -34,6 +34,14 @@ jest.mock("System/Hooks/useSystemContext", () => ({
   }),
 }))
 
+jest.mock("@unleash/proxy-client-react", () => ({
+  useVariant: jest.fn(() => ({ enabled: false, name: "control" })),
+}))
+
+jest.mock("System/Hooks/useTrackFeatureVariant", () => ({
+  useTrackFeatureVariantOnMount: jest.fn(),
+}))
+
 jest.mock(
   "Components/BankDebitForm/BankDebitProvider",
   // not sure why this is neccessary :(
@@ -45,6 +53,7 @@ jest.mock(
 
 const featureFlags = {
   isEnabled: jest.fn(() => false),
+  getVariant: jest.fn(() => ({ enabled: false, name: "control" })),
 }
 
 describe("OrderApp routing redirects", () => {
@@ -87,8 +96,14 @@ describe("OrderApp routing redirects", () => {
   })
 
   describe("new checkout flow redirects", () => {
-    it("redirects from the legacy shipping step to the new checkout flow if feature flag is enabled and order is BUY mode", async () => {
-      featureFlags.isEnabled.mockReturnValue(true)
+    beforeEach(() => {
+      featureFlags.getVariant.mockReturnValue({
+        enabled: true,
+        name: "experiment",
+      })
+    })
+
+    it("redirects from the legacy shipping step to the new checkout flow if in experiment variant", async () => {
       const res = await render(
         "/orders/2939023/shipping",
         mockResolver({
@@ -100,8 +115,7 @@ describe("OrderApp routing redirects", () => {
       expect(res.redirect.url).toBe("/orders2/2939023/checkout")
     })
 
-    it("redirects from the legacy payment step to the new checkout flow if feature flag is enabled and order is BUY mode", async () => {
-      featureFlags.isEnabled.mockReturnValue(true)
+    it("redirects from the legacy payment step to the new checkout flow if in experiment variant", async () => {
       const res = await render(
         "/orders/2939023/payment",
         mockResolver({
@@ -113,8 +127,7 @@ describe("OrderApp routing redirects", () => {
       expect(res.redirect.url).toBe("/orders2/2939023/checkout")
     })
 
-    it("redirects from the legacy review step to the new checkout flow if feature flag is enabled and order is BUY mode", async () => {
-      featureFlags.isEnabled.mockReturnValue(true)
+    it("redirects from the legacy review step to the new checkout flow if in experiment variant", async () => {
       const res = await render(
         "/orders/2939023/review",
         mockResolver({
@@ -126,8 +139,7 @@ describe("OrderApp routing redirects", () => {
       expect(res.redirect.url).toBe("/orders2/2939023/checkout")
     })
 
-    it("redirects from the legacy review step to the new checkout flow if feature flag is enabled and order is OFFER mode", async () => {
-      featureFlags.isEnabled.mockReturnValue(true)
+    it("redirects from the legacy offer step to the new checkout flow if in experiment variant", async () => {
       const res = await render(
         "/orders/2939023/offer",
         mockResolver({
@@ -677,6 +689,11 @@ describe("OrderApp", () => {
   })
 
   const mockGetENV = getENV as jest.Mock
+  const mockUseVariant = require("@unleash/proxy-client-react")
+    .useVariant as jest.Mock
+  const mockUseTrackFeatureVariantOnMount =
+    require("System/Hooks/useTrackFeatureVariant")
+      .useTrackFeatureVariantOnMount as jest.Mock
 
   const getWrapper = ({ props, context, breakpoint = "lg" }: any) => {
     return render(
@@ -759,6 +776,28 @@ describe("OrderApp", () => {
     expect(screen.getByTestId("error-page")).toBeInTheDocument()
   })
 
+  describe("experiment tracking", () => {
+    it("tracks the experiment variant on mount", () => {
+      mockUseVariant.mockReturnValue({ enabled: true, name: "experiment" })
+      const props = getProps() as any
+      getWrapper({ props })
+      expect(mockUseTrackFeatureVariantOnMount).toHaveBeenCalledWith({
+        experimentName: "emerald_checkout-redesign",
+        variantName: "experiment",
+      })
+    })
+
+    it("tracks the control variant on mount", () => {
+      mockUseVariant.mockReturnValue({ enabled: true, name: "control" })
+      const props = getProps() as any
+      getWrapper({ props })
+      expect(mockUseTrackFeatureVariantOnMount).toHaveBeenCalledWith({
+        experimentName: "emerald_checkout-redesign",
+        variantName: "control",
+      })
+    })
+  })
+
   describe("chat bubble", () => {
     it("shows the Salesforce chat integration button", () => {
       mockGetENV.mockImplementation(() => ({

src/Apps/Order/redirects.tsx

@@ -195,6 +195,8 @@ const goToOrder2CheckoutIfEnabled: OrderPredicate = ({
   }
 }
 
+export const CHECKOUT_REDESIGN_FLAG = "emerald_checkout-redesign"
+
 // Temporary type to allow orders queried for the new checkout page to work here
 interface Order2RedirectArgs {
   order: { mode?: string | null }
@@ -204,21 +206,8 @@ export const newCheckoutEnabled = ({
   order,
   featureFlags,
 }: Order2RedirectArgs): boolean => {
-  if (
-    order.mode === "BUY" &&
-    featureFlags?.isEnabled("emerald_checkout-redesign")
-  ) {
-    return true
-  }
-
-  if (
-    order.mode === "OFFER" &&
-    featureFlags?.isEnabled("emerald_checkout-redesign")
-  ) {
-    return true
-  }
-
-  return false
+  const variant = featureFlags?.getVariant(CHECKOUT_REDESIGN_FLAG)
+  return !!(variant?.enabled && variant?.name === "experiment")
 }
 
 export const redirects: RedirectRecord<OrderQuery> = {

src/Apps/Order2/Order2App.tsx

@@ -1,5 +1,15 @@
+import { useVariant } from "@unleash/proxy-client-react"
+import { CHECKOUT_REDESIGN_FLAG } from "Apps/Order/redirects"
+import { useTrackFeatureVariantOnMount } from "System/Hooks/useTrackFeatureVariant"
 import type * as React from "react"
 
 export const Order2App: React.FC<React.PropsWithChildren> = ({ children }) => {
+  const variant = useVariant(CHECKOUT_REDESIGN_FLAG)
+
+  useTrackFeatureVariantOnMount({
+    experimentName: CHECKOUT_REDESIGN_FLAG,
+    variantName: variant?.name,
+  })
+
   return children
 }

src/Apps/Order2/__tests__/Order2App.jest.tsx

@@ -0,0 +1,50 @@
+import { render } from "@testing-library/react"
+import { useVariant } from "@unleash/proxy-client-react"
+import { CHECKOUT_REDESIGN_FLAG } from "Apps/Order/redirects"
+import { useTrackFeatureVariantOnMount } from "System/Hooks/useTrackFeatureVariant"
+import { Order2App } from "../Order2App"
+
+jest.mock("@unleash/proxy-client-react", () => ({
+  useVariant: jest.fn(),
+}))
+
+jest.mock("System/Hooks/useTrackFeatureVariant", () => ({
+  useTrackFeatureVariantOnMount: jest.fn(),
+}))
+
+const mockUseVariant = useVariant as jest.Mock
+const mockUseTrackFeatureVariantOnMount =
+  useTrackFeatureVariantOnMount as jest.Mock
+
+describe("Order2App", () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  it("tracks the experiment variant on mount", () => {
+    mockUseVariant.mockReturnValue({ enabled: true, name: "experiment" })
+    render(<Order2App>children</Order2App>)
+    expect(mockUseTrackFeatureVariantOnMount).toHaveBeenCalledWith({
+      experimentName: CHECKOUT_REDESIGN_FLAG,
+      variantName: "experiment",
+    })
+  })
+
+  it("tracks the control variant on mount", () => {
+    mockUseVariant.mockReturnValue({ enabled: true, name: "control" })
+    render(<Order2App>children</Order2App>)
+    expect(mockUseTrackFeatureVariantOnMount).toHaveBeenCalledWith({
+      experimentName: CHECKOUT_REDESIGN_FLAG,
+      variantName: "control",
+    })
+  })
+
+  it("tracks disabled variant when flag is off", () => {
+    mockUseVariant.mockReturnValue({ enabled: false, name: "disabled" })
+    render(<Order2App>children</Order2App>)
+    expect(mockUseTrackFeatureVariantOnMount).toHaveBeenCalledWith({
+      experimentName: CHECKOUT_REDESIGN_FLAG,
+      variantName: "disabled",
+    })
+  })
+})