[NT-2010] Add capability for nested personalization

implementations/react-native/App.tsx

@@ -8,6 +8,7 @@ import type { Entry } from 'contentful'
 import { AnalyticsEventDisplay } from './components/AnalyticsEventDisplay'
 import { ENV_CONFIG } from './env.config'
 import { ContentEntry } from './sections/ContentEntry'
+import { NestedContentEntry } from './sections/NestedContentEntry'
 import { fetchEntries, initializeSDK } from './utils/sdkHelpers'
 
 const ENTRY_IDS = [
@@ -18,6 +19,7 @@ const ENTRY_IDS = [
   '5XHssysWUDECHzKLzoIsg1',
   '6zqoWXyiSrf0ja7I2WGtYj',
   '7pa5bOx8Z9NmNcr7mISvD',
+  ENV_CONFIG.entries.nested,
 ]
 
 function App(): React.JSX.Element {
@@ -84,9 +86,13 @@ function App(): React.JSX.Element {
           )}
         </View>
         <ScrollView>
-          {entries.map((entry) => (
-            <ContentEntry key={entry.sys.id} entry={entry} sdk={sdk} />
-          ))}
+          {entries.map((entry) =>
+            entry.sys.contentType.sys.id === 'nestedContent' ? (
+              <NestedContentEntry key={entry.sys.id} entry={entry} />
+            ) : (
+              <ContentEntry key={entry.sys.id} entry={entry} sdk={sdk} />
+            ),
+          )}
         </ScrollView>
         <View>
           <AnalyticsEventDisplay sdk={sdk} />

implementations/react-native/e2e/analytics.test.js

@@ -1,4 +1,4 @@
-const { clearProfileState } = require('./helpers')
+const { clearProfileState, ELEMENT_VISIBILITY_TIMEOUT } = require('./helpers')
 
 describe('Analytics Events', () => {
   beforeAll(async () => {
@@ -12,14 +12,14 @@ describe('Analytics Events', () => {
   it('should track component impression events for visible entries', async () => {
     // Wait for the app to load
     const analyticsTitle = element(by.text('Analytics Events'))
-    await waitFor(analyticsTitle).toBeVisible().withTimeout(10000)
+    await waitFor(analyticsTitle).toBeVisible().withTimeout(ELEMENT_VISIBILITY_TIMEOUT)
 
     // Wait a bit for content to load and be visible
     await new Promise((resolve) => setTimeout(resolve, 3000))
 
     // Look for component events with entry IDs
     // The merge tag entry should trigger a component event
-    const componentEvent = element(by.text(/component - Component: 1MwiFl4z7gkwqGYdvCmr8c/i))
-    await waitFor(componentEvent).toBeVisible().withTimeout(15000)
+    const componentEvent = element(by.label('component - Component: 1MwiFl4z7gkwqGYdvCmr8c'))
+    await waitFor(componentEvent).toBeVisible().withTimeout(ELEMENT_VISIBILITY_TIMEOUT)
   })
 })

implementations/react-native/e2e/displays-identified-user-variants.test.js

@@ -1,4 +1,4 @@
-const { clearProfileState } = require('./helpers')
+const { clearProfileState, ELEMENT_VISIBILITY_TIMEOUT } = require('./helpers')
 
 describe('identified user', () => {
   beforeAll(async () => {
@@ -10,7 +10,7 @@ describe('identified user', () => {
 
     await waitFor(element(by.id('identify-button')))
       .toBeVisible()
-      .withTimeout(10000)
+      .withTimeout(ELEMENT_VISIBILITY_TIMEOUT)
 
     await element(by.id('identify-button')).tap()
 
@@ -22,7 +22,7 @@ describe('identified user', () => {
       // Wait for the entry text to appear
       await waitFor(element(by.id('entry-text-1MwiFl4z7gkwqGYdvCmr8c')))
         .toBeVisible()
-        .withTimeout(10000)
+        .withTimeout(ELEMENT_VISIBILITY_TIMEOUT)
 
       // Verify the element contains the merge tag text - check for key parts
       await expect(
@@ -38,7 +38,7 @@ describe('identified user', () => {
       // Wait for the entry text to appear
       await waitFor(element(by.id('entry-text-4ib0hsHWoSOnCVdDkizE8d')))
         .toBeVisible()
-        .withTimeout(10000)
+        .withTimeout(ELEMENT_VISIBILITY_TIMEOUT)
 
       // Check for the variant text
       await expect(
@@ -54,7 +54,7 @@ describe('identified user', () => {
       // Wait for the entry text to appear
       await waitFor(element(by.id('entry-text-xFwgG3oNaOcjzWiGe4vXo')))
         .toBeVisible()
-        .withTimeout(10000)
+        .withTimeout(ELEMENT_VISIBILITY_TIMEOUT)
 
       // Check for the variant text
       await expect(
@@ -71,7 +71,7 @@ describe('identified user', () => {
     it('should display variant for return visitors', async () => {
       await waitFor(element(by.id('entry-text-2Z2WLOx07InSewC3LUB3eX')))
         .toBeVisible()
-        .withTimeout(10000)
+        .withTimeout(ELEMENT_VISIBILITY_TIMEOUT)
 
       await expect(
         element(
@@ -85,7 +85,7 @@ describe('identified user', () => {
     it('should display variant B for A/B/C experiment', async () => {
       await waitFor(element(by.id('entry-text-5XHssysWUDECHzKLzoIsg1')))
         .toBeVisible()
-        .withTimeout(10000)
+        .withTimeout(ELEMENT_VISIBILITY_TIMEOUT)
 
       await expect(
         element(
@@ -99,7 +99,7 @@ describe('identified user', () => {
     it('should display variant for visitors with custom event', async () => {
       await waitFor(element(by.id('entry-text-6zqoWXyiSrf0ja7I2WGtYj')))
         .toBeVisible()
-        .withTimeout(10000)
+        .withTimeout(ELEMENT_VISIBILITY_TIMEOUT)
 
       await expect(
         element(
@@ -113,7 +113,7 @@ describe('identified user', () => {
     it('should display variant for identified users', async () => {
       await waitFor(element(by.id('entry-text-7pa5bOx8Z9NmNcr7mISvD')))
         .toBeVisible()
-        .withTimeout(10000)
+        .withTimeout(ELEMENT_VISIBILITY_TIMEOUT)
 
       await expect(
         element(
@@ -124,4 +124,42 @@ describe('identified user', () => {
       ).toBeVisible()
     })
   })
+
+  describe('nested personalization variants', () => {
+    it('should display level 0 nested variant for return visitors', async () => {
+      await waitFor(element(by.id('entry-text-2KIWllNZJT205BwOSkMINg')))
+        .toBeVisible()
+        .withTimeout(ELEMENT_VISIBILITY_TIMEOUT)
+
+      await expect(
+        element(
+          by.label('This is a level 0 nested variant entry. [Entry: 2KIWllNZJT205BwOSkMINg]'),
+        ),
+      ).toBeVisible()
+    })
+
+    it('should display level 1 nested variant for return visitors', async () => {
+      await waitFor(element(by.id('entry-text-5a8ONfBdanJtlJ39WWnH1w')))
+        .toBeVisible()
+        .withTimeout(ELEMENT_VISIBILITY_TIMEOUT)
+
+      await expect(
+        element(
+          by.label('This is a level 1 nested variant entry. [Entry: 5a8ONfBdanJtlJ39WWnH1w]'),
+        ),
+      ).toBeVisible()
+    })
+
+    it('should display level 2 nested variant for return visitors', async () => {
+      await waitFor(element(by.id('entry-text-4hDiXxYEFrXHXcQgmdL9Uv')))
+        .toBeVisible()
+        .withTimeout(ELEMENT_VISIBILITY_TIMEOUT)
+
+      await expect(
+        element(
+          by.label('This is a level 2 nested variant entry. [Entry: 4hDiXxYEFrXHXcQgmdL9Uv]'),
+        ),
+      ).toBeVisible()
+    })
+  })
 })

implementations/react-native/e2e/displays-unidentified-user-variants.test.js

@@ -1,4 +1,4 @@
-const { clearProfileState } = require('./helpers')
+const { clearProfileState, ELEMENT_VISIBILITY_TIMEOUT } = require('./helpers')
 
 describe('unidentified user', () => {
   beforeAll(async () => {
@@ -14,7 +14,7 @@ describe('unidentified user', () => {
       // Wait for the entry text to appear
       await waitFor(element(by.id('entry-text-1MwiFl4z7gkwqGYdvCmr8c')))
         .toBeVisible()
-        .withTimeout(10000)
+        .withTimeout(ELEMENT_VISIBILITY_TIMEOUT)
 
       // Verify the element contains the merge tag text - check for key parts
       await expect(
@@ -30,7 +30,7 @@ describe('unidentified user', () => {
       // Wait for the entry text to appear
       await waitFor(element(by.id('entry-text-4ib0hsHWoSOnCVdDkizE8d')))
         .toBeVisible()
-        .withTimeout(10000)
+        .withTimeout(ELEMENT_VISIBILITY_TIMEOUT)
 
       // Check for the variant text
       await expect(
@@ -46,7 +46,7 @@ describe('unidentified user', () => {
       // Wait for the entry text to appear
       await waitFor(element(by.id('entry-text-xFwgG3oNaOcjzWiGe4vXo')))
         .toBeVisible()
-        .withTimeout(10000)
+        .withTimeout(ELEMENT_VISIBILITY_TIMEOUT)
 
       // Check for the variant text
       await expect(
@@ -63,7 +63,7 @@ describe('unidentified user', () => {
     it('should display variant for new visitors', async () => {
       await waitFor(element(by.id('entry-text-2Z2WLOx07InSewC3LUB3eX')))
         .toBeVisible()
-        .withTimeout(10000)
+        .withTimeout(ELEMENT_VISIBILITY_TIMEOUT)
 
       await expect(
         element(
@@ -77,7 +77,7 @@ describe('unidentified user', () => {
     it('should display variant B for A/B/C experiment', async () => {
       await waitFor(element(by.id('entry-text-5XHssysWUDECHzKLzoIsg1')))
         .toBeVisible()
-        .withTimeout(10000)
+        .withTimeout(ELEMENT_VISIBILITY_TIMEOUT)
 
       await expect(
         element(
@@ -91,7 +91,7 @@ describe('unidentified user', () => {
     it('should display baseline for visitors with or without custom event', async () => {
       await waitFor(element(by.id('entry-text-6zqoWXyiSrf0ja7I2WGtYj')))
         .toBeVisible()
-        .withTimeout(10000)
+        .withTimeout(ELEMENT_VISIBILITY_TIMEOUT)
 
       await expect(
         element(
@@ -105,7 +105,7 @@ describe('unidentified user', () => {
     it('should display baseline for all identified or unidentified users', async () => {
       await waitFor(element(by.id('entry-text-7pa5bOx8Z9NmNcr7mISvD')))
         .toBeVisible()
-        .withTimeout(10000)
+        .withTimeout(ELEMENT_VISIBILITY_TIMEOUT)
 
       await expect(
         element(
@@ -116,4 +116,42 @@ describe('unidentified user', () => {
       ).toBeVisible()
     })
   })
+
+  describe('nested personalization baselines', () => {
+    it('should display level 0 nested baseline for new visitors', async () => {
+      await waitFor(element(by.id('entry-text-1JAU028vQ7v6nB2swl3NBo')))
+        .toBeVisible()
+        .withTimeout(ELEMENT_VISIBILITY_TIMEOUT)
+
+      await expect(
+        element(
+          by.label('This is a level 0 nested baseline entry. [Entry: 1JAU028vQ7v6nB2swl3NBo]'),
+        ),
+      ).toBeVisible()
+    })
+
+    it('should display level 1 nested baseline for new visitors', async () => {
+      await waitFor(element(by.id('entry-text-5i4SdJXw9oDEY0vgO7CwF4')))
+        .toBeVisible()
+        .withTimeout(ELEMENT_VISIBILITY_TIMEOUT)
+
+      await expect(
+        element(
+          by.label('This is a level 1 nested baseline entry. [Entry: 5i4SdJXw9oDEY0vgO7CwF4]'),
+        ),
+      ).toBeVisible()
+    })
+
+    it('should display level 2 nested baseline for new visitors', async () => {
+      await waitFor(element(by.id('entry-text-uaNY4YJ0HFPAX3gKXiRdX')))
+        .toBeVisible()
+        .withTimeout(ELEMENT_VISIBILITY_TIMEOUT)
+
+      await expect(
+        element(
+          by.label('This is a level 2 nested baseline entry. [Entry: uaNY4YJ0HFPAX3gKXiRdX]'),
+        ),
+      ).toBeVisible()
+    })
+  })
 })

implementations/react-native/e2e/helpers.js

@@ -1,3 +1,6 @@
+// Timeout value for waiting for elements to become visible (in milliseconds)
+const ELEMENT_VISIBILITY_TIMEOUT = 10000 // 120 seconds
+
 async function clearProfileState() {
   const platform = device.getPlatform()
 
@@ -7,4 +10,5 @@ async function clearProfileState() {
 
 module.exports = {
   clearProfileState,
+  ELEMENT_VISIBILITY_TIMEOUT,
 }

implementations/react-native/env.config.ts

@@ -31,6 +31,7 @@ interface EnvConfig {
     personalized: string
     product: string
     mergeTag: string
+    nested: string
   }
 }
 
@@ -66,6 +67,7 @@ export const ENV_CONFIG = {
     personalized: '2Z2WLOx07InSewC3LUB3eX',
     product: '1MwiFl4z7gkwqGYdvCmr8c',
     mergeTag: '1MwiFl4z7gkwqGYdvCmr8c',
+    nested: '1JAU028vQ7v6nB2swl3NBo',
   },
 } as const satisfies EnvConfig