@builder.io/sdk-react-native 3.0.4 → 3.0.6

package/src/blocks/personalization-container/personalization-container.tsx

@@ -0,0 +1,176 @@
+import * as React from "react";
+import {
+  FlatList,
+  ScrollView,
+  View,
+  StyleSheet,
+  Image,
+  Text,
+  Pressable,
+  TextInput,
+  TouchableOpacity,
+  Button,
+  Linking,
+} from "react-native";
+import { useState, useRef, useEffect } from "react";
+import Blocks from "../../components/blocks/blocks";
+import InlinedScript from "../../components/inlined-script";
+import InlinedStyles from "../../components/inlined-styles";
+import { isEditing } from "../../functions/is-editing";
+import { isPreviewing } from "../../functions/is-previewing";
+import { getDefaultCanTrack } from "../../helpers/canTrack";
+import { userAttributesService } from "../../helpers/user-attributes";
+import {
+  checkShouldRenderVariants,
+  filterWithCustomTargeting,
+  getBlocksToRender,
+  getPersonalizationScript,
+} from "./helpers";
+import type { PersonalizationContainerProps } from "./personalization-container.types";
+
+function PersonalizationContainer(props: PersonalizationContainerProps) {
+  const rootRef = useRef<HTMLDivElement>(null);
+  const [userAttributes, setUserAttributes] = useState(() =>
+    userAttributesService.getUserAttributes()
+  );
+
+  const [scriptStr, setScriptStr] = useState(() =>
+    getPersonalizationScript(
+      props.variants,
+      props.builderBlock?.id || "none",
+      props.builderContext?.rootState?.locale as string | undefined
+    )
+  );
+
+  const [unsubscribers, setUnsubscribers] = useState(() => []);
+
+  const [shouldRenderVariants, setShouldRenderVariants] = useState(() =>
+    checkShouldRenderVariants(
+      props.variants,
+      getDefaultCanTrack(props.builderContext?.canTrack)
+    )
+  );
+
+  const [isHydrated, setIsHydrated] = useState(() => false);
+
+  function filteredVariants() {
+    return (props.variants || []).filter((variant) => {
+      return filterWithCustomTargeting(
+        {
+          ...(props.builderContext?.rootState?.locale
+            ? {
+                locale: props.builderContext?.rootState?.locale,
+              }
+            : {}),
+          ...(userAttributes as any),
+        },
+        variant.query,
+        variant.startDate,
+        variant.endDate
+      );
+    });
+  }
+
+  function blocksToRender() {
+    return getBlocksToRender({
+      variants: props.variants,
+      fallbackBlocks: props.builderBlock?.children,
+      isHydrated: isHydrated,
+      filteredVariants: filteredVariants(),
+      previewingIndex: props.previewingIndex,
+    });
+  }
+
+  function hideVariantsStyleString() {
+    return (props.variants || [])
+      .map(
+        (_, index) =>
+          `[data-variant-id="${props.builderBlock?.id}-${index}"] { display: none; } `
+      )
+      .join("");
+  }
+
+  useEffect(() => {
+    setIsHydrated(true);
+    const unsub = userAttributesService.subscribeOnUserAttributesChange(
+      (attrs) => {
+        setUserAttributes(attrs);
+      }
+    );
+    if (!(isEditing() || isPreviewing())) {
+      const variant = filteredVariants()[0];
+      if (rootRef.current) {
+        rootRef.current.dispatchEvent(
+          new CustomEvent("builder.variantLoaded", {
+            detail: {
+              variant: variant || "default",
+              content: props.builderContext?.content,
+            },
+            bubbles: true,
+          })
+        );
+        const observer = new IntersectionObserver((entries) => {
+          entries.forEach((entry) => {
+            if (entry.isIntersecting && rootRef.current) {
+              rootRef.current.dispatchEvent(
+                new CustomEvent("builder.variantDisplayed", {
+                  detail: {
+                    variant: variant || "default",
+                    content: props.builderContext?.content,
+                  },
+                  bubbles: true,
+                })
+              );
+            }
+          });
+        });
+        observer.observe(rootRef.current);
+      }
+    }
+    unsubscribers.push(unsub);
+  }, []);
+
+  useEffect(() => {
+    return () => {
+      unsubscribers.forEach((unsub) => unsub());
+    };
+  }, []);
+
+  return (
+    <View ref={rootRef} {...props.attributes}>
+      {shouldRenderVariants ? (
+        <>
+          {props.variants?.map((variant, index) => (
+            <View
+              key={index}
+              data-variant-id={`${props.builderBlock?.id}-${index}`}
+            >
+              <Blocks
+                blocks={variant.blocks}
+                parent={props.builderBlock?.id}
+                path={`component.options.variants.${index}.blocks`}
+              />
+            </View>
+          ))}
+          <InlinedStyles
+            nonce={props.builderContext?.nonce || ""}
+            styles={hideVariantsStyleString()}
+            id={`variants-styles-${props.builderBlock?.id}`}
+          />
+          <InlinedScript
+            nonce={props.builderContext?.nonce || ""}
+            scriptStr={scriptStr}
+            id={`variants-script-${props.builderBlock?.id}`}
+          />
+        </>
+      ) : null}
+      <Blocks
+        blocks={blocksToRender().blocks}
+        parent={props.builderBlock?.id}
+        path={blocksToRender().path}
+      />
+    </View>
+  );
+}
+
+export default PersonalizationContainer;

package/src/blocks/personalization-container/personalization-container.types.ts

@@ -0,0 +1,14 @@
+import type { BuilderBlock } from '../../types/builder-block';
+import type { BuilderDataProps } from '../../types/builder-props';
+import type { Query } from './helpers';
+export type PersonalizationContainerProps = {
+  children?: any;
+  attributes?: any;
+  previewingIndex?: number | null;
+  variants?: Array<{
+    blocks: BuilderBlock[];
+    query: Query[];
+    startDate?: string;
+    endDate?: string;
+  }>;
+} & BuilderDataProps

package/src/components/blocks/blocks-wrapper.tsx

@@ -49,8 +49,11 @@ function BlocksWrapper(props: BlocksWrapperProps) {
     if (!props.path) {
       return undefined;
     }
+    const thisPrefix = "this.";
     const pathPrefix = "component.options.";
-    return props.path.startsWith(pathPrefix)
+    return props.path.startsWith(thisPrefix)
+      ? props.path.replace(thisPrefix, "")
+      : props.path.startsWith(pathPrefix)
       ? props.path
       : `${pathPrefix}${props.path || ""}`;
   }

package/src/constants/builder-registered-components.ts

@@ -8,6 +8,8 @@ import { componentInfo as fragmentComponentInfo } from '../blocks/fragment/compo
 import { default as Fragment } from '../blocks/fragment/index';
 import { componentInfo as imageComponentInfo } from '../blocks/image/component-info';
 import { default as Image } from '../blocks/image/index';
+import { componentInfo as personalizationContainerComponentInfo } from '../blocks/personalization-container/component-info';
+import { default as PersonalizationContainer } from '../blocks/personalization-container/index';
 import { componentInfo as sectionComponentInfo } from '../blocks/section/component-info';
 import { default as Section } from '../blocks/section/index';
 import { componentInfo as slotComponentInfo } from '../blocks/slot/component-info';
@@ -50,7 +52,10 @@ export const getDefaultRegisteredComponents: () => RegisteredComponent[] = () =>
 }, {
   component: Text,
   ...textComponentInfo
-}, ...(TARGET === 'rsc' ? [] : [{
+}, ...(TARGET === 'react' ? [{
+  component: PersonalizationContainer,
+  ...personalizationContainerComponentInfo
+}] : []), ...(TARGET === 'rsc' ? [] : [{
   component: Tabs,
   ...tabsComponentInfo
 }, {

package/src/constants/sdk-version.ts

@@ -1 +1 @@
-export const SDK_VERSION = "3.0.4"
+export const SDK_VERSION = "3.0.6"

package/src/helpers/canTrack.ts

@@ -1,2 +1,7 @@
 import { checkIsDefined } from './nullable';
-export const getDefaultCanTrack = (canTrack?: boolean) => checkIsDefined(canTrack) ? canTrack : true
+import { userAttributesService } from './user-attributes';
+export const getDefaultCanTrack = (canTrack?: boolean) => {
+  const result = checkIsDefined(canTrack) ? canTrack : true;
+  userAttributesService.setCanTrack(result);
+  return result;
+}

package/src/helpers/user-attributes.ts

@@ -0,0 +1,49 @@
+import { isBrowser } from '../functions/is-browser';
+import { getCookieSync, setCookie } from './cookie';
+export interface UserAttributes {
+  [key: string]: any;
+}
+export const USER_ATTRIBUTES_COOKIE_NAME = 'builder.userAttributes';
+export function createUserAttributesService() {
+  let canTrack = true;
+  const subscribers = new Set<(attrs: UserAttributes) => void>();
+  return {
+    setUserAttributes(newAttrs: UserAttributes) {
+      if (!isBrowser()) {
+        return;
+      }
+      const userAttributes: UserAttributes = {
+        ...this.getUserAttributes(),
+        ...newAttrs
+      };
+      setCookie({
+        name: USER_ATTRIBUTES_COOKIE_NAME,
+        value: JSON.stringify(userAttributes),
+        canTrack
+      });
+      subscribers.forEach(callback => callback(userAttributes));
+    },
+    getUserAttributes() {
+      if (!isBrowser()) {
+        return {};
+      }
+      return JSON.parse(getCookieSync({
+        name: USER_ATTRIBUTES_COOKIE_NAME,
+        canTrack
+      }) || '{}');
+    },
+    subscribeOnUserAttributesChange(callback: (attrs: UserAttributes) => void) {
+      subscribers.add(callback);
+      return () => {
+        subscribers.delete(callback);
+      };
+    },
+    setCanTrack(value: boolean) {
+      canTrack = value;
+    }
+  };
+}
+export const userAttributesService = createUserAttributesService();
+export const setClientUserAttributes = (attributes: UserAttributes) => {
+  userAttributesService.setUserAttributes(attributes);
+}

package/src/scripts/init-editing.ts

@@ -47,7 +47,8 @@ export const setupBrowserForEditing = (options: {
         // Supports builder-model="..." attribute which is needed to
         // scope our '+ add block' button styling
         supportsAddBlockScoping: true,
-        supportsCustomBreakpoints: true
+        supportsCustomBreakpoints: true,
+        blockLevelPersonalization: true
       }
     }, '*');
     window.parent?.postMessage({

package/src/types/input.ts

@@ -125,6 +125,7 @@ export interface Input {
    * Use optionally with inputs of type `reference`. Restricts the content entry picker to a specific model by name.
    */
   model?: string;
+  behavior?: string;
   valueType?: {
     type?: string;
   };