Merge branch 'main' into redirect-fix

Author: ikuleshov

.gitignore

@@ -62,6 +62,7 @@ public
 .DS_Store
 
 # Yarn
+yarn.lock
 yarn-error.log
 .pnp/
 .pnp.js

package.json

@@ -105,6 +105,10 @@
     "react-server-dom-webpack@0.0.0-experimental-c8b778b7f-20220825": {
       "react": "^18.2.0"
     }
+  },
+   "resolutions": {
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0"
   },
   "scripts": {
     "lint": "eslint 'src/**/*' 'lib/**/*' 'gatsby/**/*'",

src/components/ExternalLink.tsx

@@ -1,22 +1,22 @@
 import * as React from "react"
 
-import { styled } from '@mui/material/styles';
+import { styled } from "@mui/material/styles"
 
-import {  Tooltip } from "@mui/material"
+import { Tooltip } from "@mui/material"
 
 import { Launch } from "@mui/icons-material"
 import clsx from "classnames"
-import {PropsWithChildren} from 'react';
+import { PropsWithChildren } from "react"
 
-const PREFIX = 'ExternalLink';
+const PREFIX = "ExternalLink"
 
 const classes = {
   link: `${PREFIX}-link`,
   icon: `${PREFIX}-icon`,
-  hover: `${PREFIX}-hover`
-};
+  hover: `${PREFIX}-hover`,
+}
 
-const Root = styled('div')(() => ({
+const Root = styled("span")(() => ({
   [`& .${classes.link}`]: {
     display: "inline-flex",
     alignItems: "center",
@@ -32,36 +32,40 @@ const Root = styled('div')(() => ({
       opacity: 1.0,
     },
     opacity: 0.3,
-  }
-}));
+  },
+}))
 
 type Props = {
   href: string
   title?: string
   hover?: true | undefined
 }
 
-const ExternalLink: React.FC<PropsWithChildren<Props>> = ({ href, title, children, hover }) => {
-
+const ExternalLink: React.FC<PropsWithChildren<Props>> = ({
+  href,
+  title,
+  children,
+  hover,
+}) => {
   return (
-      <Root>
-        <Tooltip title={title || ""}>
-          <a
-            className={clsx({ [classes.hover]: hover }, classes.link)}
-            href={href}
-            target="_blank"
-            rel="noreferrer"
-          >
-            {children}
-            <Launch
-              className={clsx({ [classes.icon]: children !== undefined })}
-              color="action"
-              fontSize={children === undefined ? undefined : "inherit"}
-            />
-          </a>
-        </Tooltip>
-      </Root>
-  );
+    <Root>
+      <Tooltip title={title || ""}>
+        <a
+          className={clsx({ [classes.hover]: hover }, classes.link)}
+          href={href}
+          target="_blank"
+          rel="noreferrer"
+        >
+          {children}
+          <Launch
+            className={clsx({ [classes.icon]: children !== undefined })}
+            color="action"
+            fontSize={children === undefined ? undefined : "inherit"}
+          />
+        </a>
+      </Tooltip>
+    </Root>
+  )
 }
 
 export default ExternalLink

src/components/ga4/EventBuilder/ValidateEvent/handlers/formatCheckLib.ts

@@ -5,12 +5,11 @@ import {eventDefinitions} from "../schemas/eventTypes/eventDefinitions"
 import {InstanceId} from "../../types"
 
 const RESERVED_EVENT_NAMES = [
-    "ad_activeview", "ad_click", "ad_exposure", "ad_impression", "ad_query",
+    "ad_activeview", "ad_click", "ad_exposure", "ad_query",
     "adunit_exposure", "app_clear_data", "app_install", "app_update",
     "app_remove", "error", "first_open", "first_visit", "in_app_purchase",
     "notification_dismiss", "notification_foreground", "notification_open",
-    "notification_receive", "os_update", "screen_view", "session_start",
-    "user_engagement"
+    "notification_receive", "os_update", "session_start", "user_engagement"
 ]
 const RESERVED_USER_PROPERTY_NAMES = [
     "first_open_time", "first_visit_time", "last_deep_link_referrer", "user_id",

src/components/ga4/EventBuilder/ValidateEvent/useValidateEvent.ts

@@ -55,9 +55,9 @@ const sendHit = async (
   instanceId: InstanceId,
   api_secret: string
 ): Promise<void> => {
-  const url = `https://www.google-analytics.com/mp/collect?${instanceQueryParamFor(
+  const url = `https://www.google-analytics.com/mp/collect?api_secret=${api_secret}${instanceQueryParamFor(
     instanceId
-  )}&api_secret=${api_secret}`
+  )}`
   const body = Object.assign({}, payload, {
     validationBehavior: "ENFORCE_RECOMMENDATIONS",
   })

src/components/ga4/EventBuilder/event.ts

@@ -40,12 +40,14 @@ const eventFor = (
   type: EventType,
   categories: Category[],
   parameters: Parameter[],
-  firstItem?: Parameter[]
+  firstItem?: Parameter[],
+  clients: ("web" | "app")[] = ["web", "app"]
 ) => ({
   type,
   categories,
   parameters,
   items: firstItem === undefined ? undefined : [firstItem],
+  clients,
 })
 
 const custom_event = eventFor(EventType.CustomEvent, [Category.Custom], [], [])
@@ -60,7 +62,9 @@ const ad_impression = eventFor(
       stringParam("ad_unit_name", "Banner_03"),
       stringParam("currency", "USD"),
       numberParam("value", 	3.99),
-    ]
+    ],
+    undefined,
+    ["app"]
 )
 
 const add_payment_info = eventFor(
@@ -306,7 +310,9 @@ const screen_view = eventFor(
     [
       stringParam("screen_class", "MainActivity"),
       stringParam("screen_name", "About"),
-    ]
+    ],
+    undefined,
+    ["app"]
 )
 
 const search = eventFor(
@@ -598,5 +604,11 @@ const events = Object.values(EventType).map(eventType =>
   suggestedEventFor(eventType)
 )
 
-export const eventsForCategory = (category: Category) =>
-  events.filter(event => event.categories.find(c => c === category))
+export const eventsForCategory = (category: Category, useFirebase?: boolean) => {
+  const client = useFirebase ? "app" : "web"
+  return events.filter(
+    (event: any) =>
+      event.categories.find((c: any) => c === category) &&
+      event.clients.includes(client)
+  )
+}

src/components/ga4/EventBuilder/index.spec.tsx

@@ -49,7 +49,7 @@ describe("Event Builder", () => {
         const { wrapped } = withProviders(<Sut />, { isLoggedIn: false })
         const { findByLabelText, findByTestId } = renderer.render(wrapped)
 
-        await renderer.act(async () => {
+        await React.act(async () => {
           // Choose the second view in the list
           const clientToggle = await findByTestId("use firebase")
           clientToggle.click()
@@ -94,7 +94,7 @@ describe("Event Builder", () => {
             exact: false,
           })
 
-          await renderer.act(async () => {
+          await React.act(async () => {
             await userEvent.type(apiSecret, "my_secret", { delay: 1 })
             await userEvent.type(firebaseAppId, "my_firebase_app_id", {
               delay: 1,
@@ -145,7 +145,7 @@ describe("Event Builder", () => {
             wrapped
           )
 
-          await renderer.act(async () => {
+          await React.act(async () => {
             // Choose the second view in the list
             const clientToggle = await findByTestId("use firebase")
             clientToggle.click()
@@ -166,7 +166,7 @@ describe("Event Builder", () => {
             exact: false,
           })
 
-          await renderer.act(async () => {
+          await React.act(async () => {
             await userEvent.type(apiSecret, "my_secret", { delay: 1 })
             await userEvent.type(measurementId, "my_measurement_id", {
               delay: 1,
@@ -187,7 +187,7 @@ describe("Event Builder", () => {
 
             const enInput = within(eventName).getByRole("combobox")
             //eventCategory.focus()
-            renderer.fireEvent.change(enInput, { target: { value: "select_content" } })
+            renderer.fireEvent.change(enInput, { target: { value: "campaign_details" } })
 
             await userEvent.type(
               timestampMicros,
@@ -208,9 +208,28 @@ describe("Event Builder", () => {
           expect(payload).toHaveTextContent(/"user_id":"my_user_id"/)
           expect(payload).toHaveTextContent(/"timestamp_micros":"1234"/)
           expect(payload).toHaveTextContent(/"non_personalized_ads":true/)
-          expect(payload).toHaveTextContent(/"name":"select_content"/)
+          expect(payload).toHaveTextContent(/"name":"campaign_details"/)
         })
       })
     })
   })
+  describe("for firebase switch", () => {
+    test("app only event ad_impression is not available", async () => {
+      const { wrapped } = withProviders(<Sut />, { isLoggedIn: false })
+      const { findByTestId } = renderer.render(wrapped)
+
+      await React.act(async () => {
+        const clientToggle = await findByTestId("use firebase")
+        clientToggle.click()
+      })
+
+      const eventName = await findByTestId(Label.EventName)
+      const enInput = within(eventName).getByRole("combobox")
+      eventName.focus()
+      renderer.fireEvent.change(enInput, { target: { value: "ad" } })
+
+      const adImpression = renderer.screen.queryByText("ad_impression")
+      expect(adImpression).toBeNull()
+    })
+  })
 })

src/components/ga4/EventBuilder/index.tsx

@@ -226,6 +226,11 @@ const EventBuilder: React.FC = () => {
     setNonPersonalizedAds,
   } = useInputs(categories)
 
+  const eventOptions = React.useMemo(
+    () => eventsForCategory(category, useFirebase),
+    [category, useFirebase]
+  )
+
   const formatPayload = React.useCallback( () => {
     try {
       if (inputPayload) {
@@ -274,11 +279,22 @@ const EventBuilder: React.FC = () => {
               data-testid="use firebase"
               checked={useFirebase}
               onChange={e => {
-                setUseFirebase(e.target.checked)
+                const newUseFirebase = e.target.checked
+                setUseFirebase(newUseFirebase)
 
                 if (!e.target.checked) {
                   setUseTextBox(false)
                 }
+
+                // Always reset the event type when the client changes.
+                const newOptions = eventsForCategory(category, newUseFirebase)
+                if (newOptions.length > 0) {
+                  setType(newOptions[0].type)
+                } else {
+                  // If the new client has no events for this category, switch to Custom.
+                  setCategory(Category.Custom)
+                  setType(EventType.CustomEvent)
+                }
               }}
               name="use firebase"
               color="primary"
@@ -446,9 +462,15 @@ const EventBuilder: React.FC = () => {
             value={category}
             onChange={(_event, value) => {
               setCategory(value as Category)
-              const events = eventsForCategory(value as Category)
-              if (events.length > 0) {
-                setType(events[0].type)
+              const newOptions = eventsForCategory(
+                value as Category,
+                useFirebase
+              )
+              if (newOptions.length > 0) {
+                setType(newOptions[0].type)
+              } else {
+                setCategory(Category.Custom)
+                setType(EventType.CustomEvent)
               }
             }}
             renderInput={params => (
@@ -483,7 +505,7 @@ const EventBuilder: React.FC = () => {
               autoComplete
               autoHighlight
               autoSelect
-              options={eventsForCategory(category).map(e => e.type)}
+              options={eventOptions.map(e => e.type)}
               getOptionLabel={eventType => eventType}
               value={type}
               onChange={(_event, value) => {

src/components/ga4/EventBuilder/useInputs.ts

@@ -14,7 +14,7 @@ const useInputs = (categories: Category[]) => {
   )
 
   const [useTextBox, setUseTextBox] = useHydratedPersistantBoolean(
-    StorageKey.eventBuilderUseFirebase,
+    StorageKey.eventBuilderUseTextBox,
     UrlParam.UseTextBox,
     false
   )

src/constants.ts

@@ -243,6 +243,7 @@ export enum StorageKey {
   eventBuilderTimestampMicros = "ga4/event-builder/timestamp-micros",
   eventBuilderNonPersonalizedAds = "ga4/event-builder/non-personalized-ads",
   eventBuilderUseFirebase = "ga4/event-builder/use-firebase",
+  eventBuilderUseTextBox = "ga4/event-builder/use-text-box",
   ga4EventBuilderEvents = "ga4/event-builder/events",
   ga4EventBuilderLastEventType = "ga4/event-builder/last-event-type",
   ga4EventBuilderParameters = "ga4/event-builder/parameters",