@builder.io/react 5.0.2-0 → 5.0.2-10

package/src/blocks/PersonalizationContainer.tsx

@@ -2,10 +2,9 @@ import React from 'react';
 import { Builder, builder, BuilderElement } from '@builder.io/sdk';
 import { useEffect, useState } from 'react';
 import { BuilderBlocks } from '../components/builder-blocks.component';
+import { filterWithCustomTargeting, Query } from '../functions/filter-with-custom-targeting';
 
-type UserAttributes = any;
-type Query = any;
-
+const attributeCookieName = 'builder.attributes';
 export type PersonalizationContainerProps = {
   children: React.ReactNode;
   previewingIndex: number | null;
@@ -21,13 +20,57 @@ export type PersonalizationContainerProps = {
   attributes: any;
 };
 
-function PersonalizationContainer(props: PersonalizationContainerProps) {
-  const [isClient, setIsClient] = useState(false);
+export function PersonalizationContainer(props: PersonalizationContainerProps) {
+  const isBeingHydrated = Boolean(
+    Builder.isBrowser && (window as any).__hydrated?.[props.builderBlock?.id!]
+  );
+  const [isClient, setIsClient] = useState(isBeingHydrated);
+  const [update, setUpdate] = useState(0);
 
   useEffect(() => {
     setIsClient(true);
+    const subscriber = builder.userAttributesChanged.subscribe(() => {
+      builder.setCookie(attributeCookieName, JSON.stringify(builder.getUserAttributes()));
+      setUpdate(update + 1);
+    });
+    return () => {
+      subscriber.unsubscribe();
+    };
   }, []);
 
+  if (Builder.isServer) {
+    return (
+      <>
+        {props.variants?.map((variant, index) => (
+          <template key={index} data-variant-id={props.builderBlock?.id! + index}>
+            <BuilderBlocks
+              blocks={variant.blocks}
+              parentElementId={props.builderBlock?.id}
+              dataPath={`component.options.variants.${index}.blocks`}
+              child
+            />
+          </template>
+        ))}
+        <script
+          id={`variants-script-${props.builderBlock?.id}`}
+          dangerouslySetInnerHTML={{ __html: getPersonalizationScript(props) }}
+        />
+        <div
+          {...props.attributes}
+          data-default-variant-id={props.builderBlock?.id}
+          className={`builder-personalization-container ${props.attributes.className}`}
+        >
+          <BuilderBlocks
+            blocks={props.builderBlock?.children}
+            parentElementId={props.builderBlock?.id}
+            dataPath="this.children"
+            child
+          />
+        </div>
+      </>
+    );
+  }
+
   const filteredVariants = (props.variants || []).filter(variant => {
     return filterWithCustomTargeting(
       builder.getUserAttributes(),
@@ -39,12 +82,12 @@ function PersonalizationContainer(props: PersonalizationContainerProps) {
 
   return (
     <div
+      {...props.attributes}
       style={{
         opacity: isClient ? 1 : 0,
         transition: 'opacity 0.2s ease-in-out',
-        ...props.attributes,
+        ...props.attributes?.style,
       }}
-      {...props.attributes}
       className={`builder-personalization-container ${
         props.attributes.className
       } ${isClient ? '' : 'builder-personalization-container-loading'}`}
@@ -80,112 +123,19 @@ function PersonalizationContainer(props: PersonalizationContainerProps) {
           child
         />
       )}
+
+      <script
+        dangerouslySetInnerHTML={{
+          __html: `
+         window.__hydrated = window.__hydrated || {};
+         window.__hydrated['${props.builderBlock?.id}'] = true;
+        `.replace(/\s+/g, ' '),
+        }}
+      />
     </div>
   );
 }
 
-export default PersonalizationContainer;
-
-export function filterWithCustomTargeting(
-  userAttributes: UserAttributes,
-  query: Query[],
-  startDate?: string,
-  endDate?: string
-) {
-  const item = {
-    query,
-    startDate,
-    endDate,
-  };
-
-  const now = (userAttributes.date && new Date(userAttributes.date)) || new Date();
-
-  if (item.startDate && new Date(item.startDate) > now) {
-    return false;
-  } else if (item.endDate && new Date(item.endDate) < now) {
-    return false;
-  }
-
-  if (!item.query || !item.query.length) {
-    return true;
-  }
-
-  return item.query.every((filter: Query) => {
-    if (
-      filter &&
-      filter.property === 'urlPath' &&
-      filter.value &&
-      typeof filter.value === 'string' &&
-      filter.value !== '/' &&
-      filter.value.endsWith('/')
-    ) {
-      filter.value = filter.value.slice(0, -1);
-    }
-    return objectMatchesQuery(userAttributes, filter);
-  });
-
-  function isNumber(val: unknown) {
-    return typeof val === 'number';
-  }
-
-  function isString(val: unknown) {
-    return typeof val === 'string';
-  }
-
-  function objectMatchesQuery(userattr: UserAttributes, query: Query): boolean {
-    const result = (() => {
-      const property = query.property;
-      const operator = query.operator;
-      const testValue = query.value;
-
-      // Check is query property is present in userAttributes. Proceed only if it is present.
-      if (!(property && operator)) {
-        return true;
-      }
-
-      if (Array.isArray(testValue)) {
-        if (operator === 'isNot') {
-          return testValue.every(val =>
-            objectMatchesQuery(userattr, { property, operator, value: val })
-          );
-        }
-        return !!testValue.find(val =>
-          objectMatchesQuery(userattr, { property, operator, value: val })
-        );
-      }
-      const value = userattr[property];
-
-      if (Array.isArray(value)) {
-        return value.includes(testValue);
-      }
-
-      switch (operator) {
-        case 'is':
-          return value === testValue;
-        case 'isNot':
-          return value !== testValue;
-        case 'contains':
-          return (isString(value) || Array.isArray(value)) && value.includes(testValue);
-        case 'startsWith':
-          return isString(value) && value.startsWith(testValue);
-        case 'endsWith':
-          return isString(value) && value.endsWith(testValue);
-        case 'greaterThan':
-          return isNumber(value) && isNumber(testValue) && value > testValue;
-        case 'lessThan':
-          return isNumber(value) && isNumber(testValue) && value < testValue;
-        case 'greaterThanOrEqualTo':
-          return isNumber(value) && isNumber(testValue) && value >= testValue;
-        case 'lessThanOrEqualTo':
-          return isNumber(value) && isNumber(testValue) && value <= testValue;
-      }
-      return false;
-    })();
-
-    return result;
-  }
-}
-
 Builder.registerComponent(PersonalizationContainer, {
   name: 'PersonalizationContainer',
   noWrap: true,
@@ -204,7 +154,8 @@ Builder.registerComponent(PersonalizationContainer, {
           type: 'text',
         },
         {
-          name: 'variants',
+          name: 'query',
+          friendlyName: 'Targeting rules',
           type: 'BuilderQuery',
           defaultValue: [],
         },
@@ -226,3 +177,49 @@ Builder.registerComponent(PersonalizationContainer, {
     },
   ],
 });
+
+function getPersonalizationScript(props: PersonalizationContainerProps) {
+  return `
+      (function() {
+        function getCookie(name) {
+          var nameEQ = name + "=";
+          var ca = document.cookie.split(';');
+          for(var i=0;i < ca.length;i++) {
+              var c = ca[i];
+              while (c.charAt(0)==' ') c = c.substring(1,c.length);
+              if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
+          }
+          return null;
+        }
+          function removeVariants() {
+            variants.forEach(function (template, index) {
+              document.querySelector('template[data-variant-id="' + "${props.builderBlock?.id}" + index + '"]').remove();
+            });
+            document.getElementById('variants-script-${props.builderBlock?.id}').remove();
+          }
+
+        var attributes = JSON.parse(getCookie("${attributeCookieName}") || "{}");
+        var variants = ${JSON.stringify(props.variants?.map(v => ({ query: v.query, startDate: v.startDate, endDate: v.endDate })))};
+        var winningVariantIndex = variants.findIndex(function(variant) {
+          return filterWithCustomTargeting(
+            attributes,
+            variant.query,
+            variant.startDate,
+            variant.endDate
+          );
+        });
+        if (winningVariantIndex !== -1) {
+          var winningVariant = document.querySelector('template[data-variant-index="' + "${props.builderBlock?.id}" + winningVariantIndex + '"]');
+          if (winningVariant) {
+            var parentNode = winningVariant.parentNode;
+            var newParent = parentNode.cloneNode(false);
+            newParent.appendChild(winningVariant.content.firstChild);
+            parentNode.parentNode.replaceChild(newParent, parentNode);
+          }
+        } else if (variants.length > 0) {
+          removeVariants();
+        }
+        function filterWithCustomTargeting(e,t,n,r){var i={query:t,startDate:n,endDate:r},o=e.date&&new Date(e.date)||new Date;return!(i.startDate&&new Date(i.startDate)>o)&&(!(i.endDate&&new Date(i.endDate)<o)&&(!i.query||!i.query.length||i.query.every((function(t){return objectMatchesQuery(e,t)}))))}function isString(e){return"string"==typeof e}function isNumber(e){return"number"==typeof e}function objectMatchesQuery(e,t){return function(){var n=t.property,r=t.operator,i=t.value;if(t&&"urlPath"===t.property&&t.value&&"string"==typeof t.value&&"/"!==t.value&&t.value.endsWith("/")&&(i=t.value.slice(0,-1)),!n||!r)return!0;if(Array.isArray(i))return"isNot"===r?i.every((function(t){return objectMatchesQuery(e,{property:n,operator:r,value:t})})):!!i.find((function(t){return objectMatchesQuery(e,{property:n,operator:r,value:t})}));var o=e[n];if(Array.isArray(o))return o.includes(i);switch(r){case"is":return o===i;case"isNot":return o!==i;case"contains":return(isString(o)||Array.isArray(o))&&o.includes(String(i));case"startsWith":return isString(o)&&o.startsWith(String(i));case"endsWith":return isString(o)&&o.endsWith(String(i));case"greaterThan":return isNumber(o)&&isNumber(i)&&o>i;case"lessThan":return isNumber(o)&&isNumber(i)&&o<i;case"greaterThanOrEqualTo":return isNumber(o)&&isNumber(i)&&o>=i;case"lessThanOrEqualTo":return isNumber(o)&&isNumber(i)&&o<=i}return!1}()}
+      })();
+    `.replace(/\s+/g, ' ');
+}

package/src/builder-react.ts

@@ -51,6 +51,7 @@ export { FormSelect } from './blocks/forms/Select'; // advanced?
 export { TextArea } from './blocks/forms/TextArea';
 export { Img } from './blocks/raw/Img';
 export { RawText } from './blocks/raw/RawText';
+export { PersonalizationContainer } from './blocks/PersonalizationContainer';
 
 export { stringToFunction } from './functions/string-to-function';
 export { useIsPreviewing } from './hooks/useIsPreviewing';

package/src/functions/filter-with-custom-targeting.ts

@@ -0,0 +1,126 @@
+type UserAttributes = {
+  date?: string | Date;
+  urlPath?: string;
+  [key: string]: any; // Allow any other properties
+};
+
+// Query type
+type QueryOperator =
+  | 'is'
+  | 'isNot'
+  | 'contains'
+  | 'startsWith'
+  | 'endsWith'
+  | 'greaterThan'
+  | 'lessThan'
+  | 'greaterThanOrEqualTo'
+  | 'lessThanOrEqualTo';
+
+type QueryValue = string | number | boolean | Array<string | number | boolean>;
+
+export type Query = {
+  property: string;
+  operator: QueryOperator;
+  value: QueryValue;
+};
+
+export function filterWithCustomTargeting(
+  userAttributes: UserAttributes,
+  query: Query[],
+  startDate?: string,
+  endDate?: string
+) {
+  const item = {
+    query,
+    startDate,
+    endDate,
+  };
+
+  const now = (userAttributes.date && new Date(userAttributes.date)) || new Date();
+
+  if (item.startDate && new Date(item.startDate) > now) {
+    return false;
+  } else if (item.endDate && new Date(item.endDate) < now) {
+    return false;
+  }
+
+  if (!item.query || !item.query.length) {
+    return true;
+  }
+
+  return item.query.every((filter: Query) => {
+    return objectMatchesQuery(userAttributes, filter);
+  });
+}
+
+function isString(val: unknown): val is string {
+  return typeof val === 'string';
+}
+
+function isNumber(val: unknown): val is number {
+  return typeof val === 'number';
+}
+
+function objectMatchesQuery(userattr: UserAttributes, query: Query): boolean {
+  const result = (() => {
+    const property = query.property;
+    const operator = query.operator;
+    let testValue = query.value;
+
+    if (
+      query &&
+      query.property === 'urlPath' &&
+      query.value &&
+      typeof query.value === 'string' &&
+      query.value !== '/' &&
+      query.value.endsWith('/')
+    ) {
+      testValue = query.value.slice(0, -1);
+    }
+
+    // Check is query property is present in userAttributes. Proceed only if it is present.
+    if (!(property && operator)) {
+      return true;
+    }
+
+    if (Array.isArray(testValue)) {
+      if (operator === 'isNot') {
+        return testValue.every(val =>
+          objectMatchesQuery(userattr, { property, operator, value: val })
+        );
+      }
+      return !!testValue.find(val =>
+        objectMatchesQuery(userattr, { property, operator, value: val })
+      );
+    }
+    const value = userattr[property];
+
+    if (Array.isArray(value)) {
+      return value.includes(testValue);
+    }
+
+    switch (operator) {
+      case 'is':
+        return value === testValue;
+      case 'isNot':
+        return value !== testValue;
+      case 'contains':
+        return (isString(value) || Array.isArray(value)) && value.includes(String(testValue));
+      case 'startsWith':
+        return isString(value) && value.startsWith(String(testValue));
+      case 'endsWith':
+        return isString(value) && value.endsWith(String(testValue));
+      case 'greaterThan':
+        return isNumber(value) && isNumber(testValue) && value > testValue;
+      case 'lessThan':
+        return isNumber(value) && isNumber(testValue) && value < testValue;
+      case 'greaterThanOrEqualTo':
+        return isNumber(value) && isNumber(testValue) && value >= testValue;
+      case 'lessThanOrEqualTo':
+        return isNumber(value) && isNumber(testValue) && value <= testValue;
+    }
+    return false;
+  })();
+
+  return result;
+}

package/src/scripts/init-editing.ts

@@ -9,6 +9,7 @@ if (typeof window !== 'undefined') {
         supportsPatchUpdates: 'v4',
         supportsCustomBreakpoints: true,
         supportsGlobalSymbols: true,
+        blockLevelPersonalization: true,
         priorVersion: version,
       },
     },