fix: canTrack for symbols (#3334)

## Description fixes canTrack for Symbols by adding them to the context and passing them correctly **Jira** https://builder-io.atlassian.net/browse/ENG-6034 _Screenshot_ If relevant, add a screenshot or two of the changes you made.
BuilderIO · Jun 18, 2024 · b4381f5 · b4381f5
1 parent 4854650
commit b4381f5
Show file tree

Hide file tree

Showing 10 changed files with 174 additions and 8 deletions.
diff --git a/.changeset/witty-tomatoes-shout.md b/.changeset/witty-tomatoes-shout.md
@@ -0,0 +1,12 @@
+---
+"@builder.io/sdk-angular": patch
+"@builder.io/sdk-react-nextjs": patch
+"@builder.io/sdk-qwik": patch
+"@builder.io/sdk-react": patch
+"@builder.io/sdk-react-native": patch
+"@builder.io/sdk-solid": patch
+"@builder.io/sdk-svelte": patch
+"@builder.io/sdk-vue": patch
+---
+
+Fix: `canTrack=false` not respected in Symbols
diff --git a/packages/react-tests/nextjs/pages/[[...index]].tsx b/packages/react-tests/nextjs/pages/[[...index]].tsx
@@ -43,9 +43,9 @@ export default function Page(props: PageProps & { apiVersion: any }) {
     builder.apiVersion = props?.apiVersion;
   }
 
-  // only enable tracking if we're not in the `/can-track-false` test route
+  // only enable tracking if we're not in the `/can-track-false` and `symbol-tracking` test route
   useEffect(() => {
-    if (!router.asPath.includes('can-track-false')) {
+    if (!router.asPath.includes('can-track-false') && !router.asPath.includes('symbol-tracking')) {
       builder.canTrack = true;
     }
   }, []);

diff --git a/packages/react-tests/react-remix/app/routes/($slug).tsx b/packages/react-tests/react-remix/app/routes/($slug).tsx
@@ -44,12 +44,12 @@ export default function Page() {
     builder.apiVersion = props?.apiVersion;
   }
 
-  // only enable tracking if we're not in the `/can-track-false` test route
+  // only enable tracking if we're not in the `/can-track-false` and `symbol-tracking` test route
   useEffect(() => {
-    if (!params.slug?.includes('can-track-false')) {
+    if (!params.slug?.includes('can-track-false') && !params.slug?.includes('symbol-tracking')) {
       builder.canTrack = true;
     }
-  }, []);
+  }, [params.slug]);
 
   return props?.content ? <BuilderComponent {...props} /> : <div>Content Not Found.</div>;
 }
diff --git a/packages/react-tests/react-vite/src/App.tsx b/packages/react-tests/react-vite/src/App.tsx
@@ -21,9 +21,12 @@ function App() {
     builder.apiVersion = props?.apiVersion;
   }
 
-  // only enable tracking if we're not in the `/can-track-false` test route
+  // only enable tracking if we're not in the `/can-track-false` and `symbol-tracking` test route
   useEffect(() => {
-    if (!window.location.pathname.includes('can-track-false')) {
+    if (
+      !window.location.pathname.includes('can-track-false') &&
+      !window.location.pathname.includes('symbol-tracking')
+    ) {
       builder.canTrack = true;
     }
   }, []);

diff --git a/packages/sdks-tests/src/e2e-tests/tracking.spec.ts b/packages/sdks-tests/src/e2e-tests/tracking.spec.ts
@@ -22,6 +22,25 @@ test.describe('Tracking', () => {
       const builderSessionCookie = cookies.find(cookie => cookie.name === 'builderSessionId');
       expect(builderSessionCookie).toBeUndefined();
     });
+    test('do not appear if canTrack=false (for Symbols)', async ({
+      page,
+      context,
+      sdk,
+      packageName,
+    }) => {
+      // TO-DO: figure out why React gen1 fails this test,
+      // track is not called in a published content if builder.canTrack = false
+      test.fail(packageName === 'gen1-react');
+      test.skip(
+        excludeTestFor({ angular: true }, sdk),
+        'Symbols not working well for Angular Gen2 SDK - infinite loop'
+      );
+      await page.goto('/symbol-tracking', { waitUntil: 'networkidle' });
+
+      const cookies = await context.cookies();
+      const builderSessionCookie = cookies.find(cookie => cookie.name === 'builderSessionId');
+      expect(builderSessionCookie).toBeUndefined();
+    });
     test('appear by default', async ({ page, context, sdk }) => {
       test.fail(excludeTestFor({ angular: true }, sdk), 'Angular Gen2 SDK not implemented.');
       test.fail(excludeRn(sdk));

diff --git a/packages/sdks-tests/src/specs/index.ts b/packages/sdks-tests/src/specs/index.ts
@@ -46,6 +46,7 @@ import { CONTENT as video } from './video.js';
 import { CUSTOM_COMPONENTS } from './custom-components.js';
 import { BASIC_STYLES } from './basic-styles.js';
 import { ACCORDION, ACCORDION_GRID, ACCORDION_ONE_AT_A_TIME } from './accordion.js';
+import { SYMBOL_TRACKING } from './symbol-tracking.js';
 
 function isBrowser(): boolean {
   return typeof window !== 'undefined' && typeof document !== 'undefined';
@@ -109,6 +110,7 @@ const PAGES = {
   '/accordion': ACCORDION,
   '/accordion-one-at-a-time': ACCORDION_ONE_AT_A_TIME,
   '/accordion-grid': ACCORDION_GRID,
+  '/symbol-tracking': SYMBOL_TRACKING,
 } as const;
 
 const apiVersionPathToProp = {
@@ -182,7 +184,7 @@ export const getProps = async (args: {
   }
 
   const extraProps =
-    pathname === '/can-track-false'
+    pathname === '/can-track-false' || pathname === '/symbol-tracking'
       ? {
           canTrack: false,
         }

diff --git a/packages/sdks-tests/src/specs/symbol-tracking.ts b/packages/sdks-tests/src/specs/symbol-tracking.ts
@@ -0,0 +1,127 @@
+export const SYMBOL_TRACKING = {
+  ownerId: 'ad30f9a246614faaa6a03374f83554c9',
+  lastUpdateBy: null,
+  createdDate: 1718384180800,
+  id: 'b5c1d5fe125042cfb0bbd9646e3b3ba5',
+  '@version': 4,
+  name: 'sagxv',
+  modelId: '17c6065109ef4062ba083f5741f4ee6a',
+  published: 'published',
+  meta: {
+    kind: 'page',
+    lastPreviewUrl:
+      'http://localhost:5173/sagxv?builder.space=ad30f9a246614faaa6a03374f83554c9&builder.user.permissions=read%2Ccreate%2Cpublish%2CeditCode%2CeditDesigns%2Cadmin%2CeditLayouts%2CeditLayers&builder.user.role.name=Admin&builder.user.role.id=admin&builder.cachebust=true&builder.preview=page&builder.noCache=true&builder.allowTextEdit=true&__builder_editing__=true&builder.overrides.page=b5c1d5fe125042cfb0bbd9646e3b3ba5&builder.overrides.b5c1d5fe125042cfb0bbd9646e3b3ba5=b5c1d5fe125042cfb0bbd9646e3b3ba5&builder.overrides.page:/sagxv=b5c1d5fe125042cfb0bbd9646e3b3ba5&builder.options.locale=Default',
+    hasLinks: false,
+    symbolsUsed: {
+      '853f03cb79aa4a05b5742cf53cd3d40d': true,
+    },
+  },
+  priority: -526,
+  query: [
+    {
+      '@type': '@builder.io/core:Query',
+      property: 'urlPath',
+      operator: 'is',
+      value: '/sagxv',
+    },
+  ],
+  data: {
+    themeId: false,
+    title: 'sagxv',
+    blocks: [
+      {
+        '@type': '@builder.io/sdk:Element',
+        '@version': 2,
+        id: 'builder-3983afd867ff41b4a8660f7f363393e7',
+        component: {
+          name: 'Symbol',
+          options: {
+            symbol: {
+              data: {},
+              model: 'symbol',
+              entry: '853f03cb79aa4a05b5742cf53cd3d40d',
+              ownerId: 'ad30f9a246614faaa6a03374f83554c9',
+              content: {
+                ownerId: 'ad30f9a246614faaa6a03374f83554c9',
+                lastUpdateBy: null,
+                createdDate: 1718342822371,
+                id: '853f03cb79aa4a05b5742cf53cd3d40d',
+                '@version': 4,
+                name: 'mysymbol1234',
+                modelId: '5e1209efea0045f58d9b871d81b652fa',
+                published: 'published',
+                meta: {
+                  kind: 'component',
+                  lastPreviewUrl:
+                    'https://preview.builder.codes?model=symbol&previewing=true&apiKey=ad30f9a246614faaa6a03374f83554c9&builder.space=ad30f9a246614faaa6a03374f83554c9&builder.user.permissions=read%2Ccreate%2Cpublish%2CeditCode%2CeditDesigns%2Cadmin%2CeditLayouts%2CeditLayers&builder.user.role.name=Admin&builder.user.role.id=admin&builder.cachebust=true&builder.preview=symbol&builder.noCache=true&builder.allowTextEdit=true&__builder_editing__=true&builder.overrides.symbol=853f03cb79aa4a05b5742cf53cd3d40d&builder.overrides.853f03cb79aa4a05b5742cf53cd3d40d=853f03cb79aa4a05b5742cf53cd3d40d&builder.options.locale=Default',
+                  hasLinks: false,
+                },
+                priority: -521,
+                query: [],
+                data: {
+                  blocks: [
+                    {
+                      '@type': '@builder.io/sdk:Element',
+                      '@version': 2,
+                      id: 'builder-161790216c794a2bb79111674497bd2d',
+                      meta: {
+                        previousId: 'builder-00d86dfba4d04233a1a0c9ddd505b366',
+                      },
+                      component: {
+                        name: 'Text',
+                        options: {
+                          text: 'Enter some text...',
+                        },
+                      },
+                      responsiveStyles: {
+                        large: {
+                          display: 'flex',
+                          flexDirection: 'column',
+                          position: 'relative',
+                          flexShrink: '0',
+                          boxSizing: 'border-box',
+                          marginTop: '20px',
+                          lineHeight: 'normal',
+                          height: 'auto',
+                        },
+                      },
+                    },
+                  ],
+                },
+                metrics: {
+                  clicks: 0,
+                  impressions: 0,
+                },
+                variations: {},
+                testRatio: 1,
+                createdBy: 'RuGeCLr9ryVt1xRazFYc72uWwIK2',
+                lastUpdatedBy: 'RuGeCLr9ryVt1xRazFYc72uWwIK2',
+                folders: [],
+              },
+            },
+          },
+        },
+        responsiveStyles: {
+          large: {
+            display: 'flex',
+            flexDirection: 'column',
+            position: 'relative',
+            flexShrink: '0',
+            boxSizing: 'border-box',
+          },
+        },
+      },
+    ],
+  },
+  metrics: {
+    clicks: 0,
+    impressions: 0,
+  },
+  variations: {},
+  lastUpdated: 1718384685594,
+  firstPublished: 1718384227361,
+  testRatio: 1,
+  createdBy: 'RuGeCLr9ryVt1xRazFYc72uWwIK2',
+  lastUpdatedBy: 'RuGeCLr9ryVt1xRazFYc72uWwIK2',
+  folders: [],
+};
diff --git a/packages/sdks/src/blocks/symbol/symbol.lite.tsx b/packages/sdks/src/blocks/symbol/symbol.lite.tsx
@@ -132,6 +132,7 @@ export default function Symbol(props: SymbolProps) {
           ...props.builderContext.value.localState,
           ...state.contentToUse?.data?.state,
         }}
+        canTrack={props.builderContext.value.canTrack}
         model={props.symbol?.model}
         content={state.contentToUse}
         linkComponent={props.builderLinkComponent}

diff --git a/packages/sdks/src/components/content/content.lite.tsx b/packages/sdks/src/components/content/content.lite.tsx
@@ -94,6 +94,7 @@ export default function ContentComponent(props: ContentProps) {
           default: state.contentSetState,
         }),
         context: props.context || {},
+        canTrack: props.canTrack,
         apiKey: props.apiKey,
         apiVersion: props.apiVersion,
         componentInfos: [

diff --git a/packages/sdks/src/context/types.ts b/packages/sdks/src/context/types.ts
@@ -40,4 +40,5 @@ export interface BuilderContextInterface
   componentInfos: Dictionary<ComponentInfo>;
   // Used to recursively store all CSS coming from a parent that would apply to a Text block
   inheritedStyles: Record<string, unknown>;
+  canTrack?: boolean;
 }