@developer_tribe/react-builder 1.2.46 → 1.2.48

package/src/build-components/PaywallProvider/pattern.json

@@ -7,7 +7,8 @@
     "children": "node",
     "extends": "View",
     "attributes": {
-      "delay": "number"
+      "delay": "number",
+      "animation": ["default", "fade", "fade_from_bottom", "fade_from_right", "reveal_from_bottom", "scale_from_center", "slide_from_right", "slide_from_left", "slide_from_bottom", "none"]
     }
   },
   "defaults": {
@@ -27,6 +28,13 @@
         "category": "other",
         "specialCategory": null,
         "sort": 1
+      },
+      "animation": {
+        "label": "Page transition animation",
+        "description": "When this component is a GlobalProvider page: animation used when navigating to this screen.",
+        "category": "other",
+        "specialCategory": null,
+        "sort": 2
       }
     },
     "mockableFeatures": {

package/src/build-components/RenderNode.generated.tsx

@@ -27,6 +27,7 @@ import type { FormCheckboxComponentProps } from './FormCheckbox/FormCheckboxProp
 import type { FormErrorTextComponentProps } from './FormErrorText/FormErrorTextProps.generated';
 import type { FormProviderComponentProps } from './FormProvider/FormProviderProps.generated';
 import type { FormSubmitButtonComponentProps } from './FormSubmitButton/FormSubmitButtonProps.generated';
+import type { GlobalProviderComponentProps } from './GlobalProvider/GlobalProviderProps.generated';
 import type { ImageComponentProps } from './Image/ImageProps.generated';
 import type { MainComponentProps } from './Main/MainProps.generated';
 import type { NavigationBarColorComponentProps } from './NavigationBarColor/NavigationBarColorProps.generated';
@@ -53,6 +54,7 @@ import type { RadioButtonComponentProps } from './RadioButton/RadioButtonProps.g
 import type { SeparatorComponentProps } from './Separator/SeparatorProps.generated';
 import type { StatusBarColorComponentProps } from './StatusBarColor/StatusBarColorProps.generated';
 import type { SystemButtonComponentProps } from './SystemButton/SystemButtonProps.generated';
+import type { TermsProviderComponentProps } from './TermsProvider/TermsProviderProps.generated';
 import type { TextComponentProps } from './Text/TextProps.generated';
 import type { ViewComponentProps } from './View/ViewProps.generated';
 import type { WebViewComponentProps } from './WebView/WebViewProps.generated';
@@ -70,6 +72,7 @@ import { FormCheckbox } from './FormCheckbox/FormCheckbox';
 import { FormErrorText } from './FormErrorText/FormErrorText';
 import { FormProvider } from './FormProvider/FormProvider';
 import { FormSubmitButton } from './FormSubmitButton/FormSubmitButton';
+import GlobalProvider from './GlobalProvider/GlobalProvider';
 import Image from './Image/Image';
 import Main from './Main/Main';
 import NavigationBarColor from './NavigationBarColor/NavigationBarColor';
@@ -96,6 +99,7 @@ import RadioButton from './RadioButton/RadioButton';
 import Separator from './Separator/Separator';
 import StatusBarColor from './StatusBarColor/StatusBarColor';
 import { SystemButton } from './SystemButton/SystemButton';
+import TermsProvider from './TermsProvider/TermsProvider';
 import { Text } from './Text/Text';
 import View from './View/View';
 import { WebView } from './WebView/WebView';
@@ -115,6 +119,7 @@ type BuilderNode =
   | (FormErrorTextComponentProps['node'] & { type: 'FormErrorText' })
   | (FormProviderComponentProps['node'] & { type: 'FormProvider' })
   | (FormSubmitButtonComponentProps['node'] & { type: 'FormSubmitButton' })
+  | (GlobalProviderComponentProps['node'] & { type: 'GlobalProvider' })
   | (ImageComponentProps['node'] & { type: 'Image' })
   | (MainComponentProps['node'] & { type: 'Main' })
   | (NavigationBarColorComponentProps['node'] & { type: 'NavigationBarColor' })
@@ -143,6 +148,7 @@ type BuilderNode =
   | (SeparatorComponentProps['node'] & { type: 'Separator' })
   | (StatusBarColorComponentProps['node'] & { type: 'StatusBarColor' })
   | (SystemButtonComponentProps['node'] & { type: 'SystemButton' })
+  | (TermsProviderComponentProps['node'] & { type: 'TermsProvider' })
   | (TextComponentProps['node'] & { type: 'Text' })
   | (ViewComponentProps['node'] & { type: 'View' })
   | (WebViewComponentProps['node'] & { type: 'WebView' });
@@ -205,6 +211,8 @@ function RenderNode({ node }: { node: Node }) {
       return <FormProvider node={normalizedNode} />;
     case 'FormSubmitButton':
       return <FormSubmitButton node={normalizedNode} />;
+    case 'GlobalProvider':
+      return <GlobalProvider node={normalizedNode} />;
     case 'Image':
       return <Image node={normalizedNode} />;
     case 'Main':
@@ -257,6 +265,8 @@ function RenderNode({ node }: { node: Node }) {
       return <StatusBarColor node={normalizedNode} />;
     case 'SystemButton':
       return <SystemButton node={normalizedNode} />;
+    case 'TermsProvider':
+      return <TermsProvider node={normalizedNode} />;
     case 'Text':
       return <Text node={normalizedNode} />;
     case 'View':

package/src/build-components/SystemButton/SystemButton.tsx

@@ -8,6 +8,8 @@ import { useMergedStyle } from '../../utils/useMergedStyle';
 import { useMockOSContext, useMockPermission } from '../../mockOS';
 import { useLocalize } from '../../hooks/useLocalize';
 import { usePlacementButtonEvents } from './usePlacementButtonEvents';
+import { useGlobalNavigation } from '../GlobalProvider/useGlobalNavigation';
+import { useGlobalContext } from '../GlobalProvider/GlobalContext';
 
 export type SystemButtonOptionalProps = {
   onClick?: () => void;
@@ -24,6 +26,8 @@ export function SystemButton({
   const attributeName = node.sourceType ?? node.type ?? 'SystemButton';
   const context = useMockOSContext();
   const mockPermissionManager = useMockPermission(context);
+  const globalNavigate = useGlobalNavigation();
+  const globalCtx = useGlobalContext();
   const generatedId = useId();
   const attributeKey = node.key ?? generatedId;
   const attrs = node.attributes;
@@ -37,6 +41,8 @@ export function SystemButton({
     context,
     requestPermission: (permission) =>
       mockPermissionManager.requestPermission(permission),
+    globalNavigate,
+    setCondition: globalCtx?.setCondition,
   });
 
   const handleClick = onClickProp ?? placementClick;

package/src/build-components/SystemButton/SystemButtonProps.generated.ts

@@ -2,7 +2,28 @@
 
 import type { NodeData } from '../../types/Node';
 
-export type TypeOptionType = 'Permission' | 'Navigate' | 'Placement';
+export type TypeOptionType =
+  | 'Permission'
+  | 'Navigate'
+  | 'Placement'
+  | 'SetCondition';
+export type PermissionOptionType =
+  | 'notification'
+  | 'camera'
+  | 'microphone'
+  | 'location'
+  | 'photos'
+  | 'contacts'
+  | 'att'
+  | 'rating'
+  | 'GDPR';
+export type PlacementKeyOptionType =
+  | 'terms'
+  | 'onboard'
+  | 'paywall'
+  | 'subscription'
+  | 'home';
+export type ConditionKeyOptionType = 'termsAccepted';
 export type FlexDirectionOptionType = 'row' | 'column';
 export type FlexWrapOptionType = 'nowrap' | 'wrap' | 'wrap-reverse';
 export type AlignItemsOptionType =
@@ -22,10 +43,12 @@ export type PositionOptionType = 'relative' | 'absolute';
 
 export interface EventObjectGenerated {
   type?: TypeOptionType;
-  permission?: string;
+  permission?: PermissionOptionType;
   navigate_to?: string;
   targetIndex?: number;
-  placementKey?: string;
+  placementKey?: PlacementKeyOptionType;
+  conditionKey?: ConditionKeyOptionType;
+  value?: boolean;
 }
 
 export interface SystemButtonStyleGenerated {

package/src/build-components/SystemButton/pattern.json

@@ -33,11 +33,13 @@
   },
   "types": {
     "EventObject": {
-      "type": ["Permission", "Navigate", "Placement"],
-      "permission": "string",
+      "type": "$ref:event-constants.eventTypes",
+      "permission": "$ref:event-constants.permissionTypes",
       "navigate_to": "string",
       "targetIndex": "number",
-      "placementKey": "string"
+      "placementKey": "$ref:event-constants.placementKeys",
+      "conditionKey": "$ref:event-constants.conditionKeys",
+      "value": "boolean"
     }
   },
   "meta": {

package/src/build-components/SystemButton/usePlacementButtonEvents.ts

@@ -2,13 +2,15 @@ import { useRef, useCallback } from 'react';
 import type { MockOSContextValue } from '../../mockOS/context/MockOSContextBase';
 import type { PermissionStatus } from '../../mockOS/managers/mockPermissionManager';
 
-/** Event shape shared by SystemButton and OnboardButton. Placement = go to placementKey (onboard/terms/paywall); Navigate = navigate_to or carousel. */
+/** Event shape shared by SystemButton and OnboardButton. Placement = go to placementKey (onboard/terms/paywall); Navigate = navigate_to or carousel; SetCondition = update a global boolean condition. */
 export interface PlacementEventObject {
-  type?: 'Permission' | 'Navigate' | 'Placement';
+  type?: 'Permission' | 'Navigate' | 'Placement' | 'SetCondition';
   permission?: string | null;
   placementKey?: string;
   navigate_to?: string;
   targetIndex?: number;
+  conditionKey?: string;
+  value?: boolean;
 }
 
 export interface UsePlacementButtonEventsOptions {
@@ -18,6 +20,17 @@ export interface UsePlacementButtonEventsOptions {
   onNavigateWithoutPlacement?: (
     e: PlacementEventObject,
   ) => Promise<boolean> | boolean;
+  /**
+   * Optional global navigate function (from useGlobalNavigation).
+   * When provided, Navigate/Placement events try this first before falling back
+   * to MockOSContext. Return true if the navigation was handled.
+   */
+  globalNavigate?: (target: string) => boolean;
+  /**
+   * Optional callback to set a global boolean condition (from GlobalContext).
+   * Used by SetCondition events.
+   */
+  setCondition?: (key: string, value: boolean) => void;
 }
 
 /**
@@ -29,9 +42,27 @@ export function usePlacementButtonEvents(
   events: PlacementEventObject[] | undefined,
   options: UsePlacementButtonEventsOptions,
 ): () => Promise<void> {
-  const { context, requestPermission, onNavigateWithoutPlacement } = options;
+  const {
+    context,
+    requestPermission,
+    onNavigateWithoutPlacement,
+    globalNavigate,
+    setCondition,
+  } = options;
   const handledEventsRef = useRef<PlacementEventObject[]>([]);
 
+  /**
+   * Attempts to navigate to a target. Tries globalNavigate first (GlobalProvider),
+   * then falls back to MockOSContext.
+   */
+  const navigateTo = useCallback(
+    (target: string): void => {
+      if (globalNavigate?.(target)) return;
+      context?.navigation(target as Parameters<typeof context.navigation>[0]);
+    },
+    [context, globalNavigate],
+  );
+
   const handleClick = useCallback(async () => {
     const list = events ?? [];
 
@@ -44,24 +75,19 @@ export function usePlacementButtonEvents(
         const permission = e.permission ?? 'camera';
         await requestPermission(permission);
         handledEventsRef.current.push(e);
+      } else if (e.type === 'SetCondition' && e.conditionKey) {
+        setCondition?.(e.conditionKey, e.value ?? false);
+        handledEventsRef.current.push(e);
       } else if (e.type === 'Placement' && e.placementKey) {
-        if (e.placementKey === 'onboard') {
-          context?.navigation('onboard');
-        } else if (e.placementKey === 'paywall') {
-          context?.navigation('subscription');
-        } else if (e.placementKey === 'terms') {
-          context?.navigation('terms');
-        }
+        const target =
+          e.placementKey === 'paywall' ? 'paywall' : e.placementKey;
+        navigateTo(target);
         handledEventsRef.current.push(e);
       } else if (e.type === 'Navigate') {
         if (e.placementKey) {
-          if (e.placementKey === 'onboard') {
-            context?.navigation('onboard');
-          } else if (e.placementKey === 'paywall') {
-            context?.navigation('subscription');
-          } else if (e.placementKey === 'terms') {
-            context?.navigation('terms');
-          }
+          const target =
+            e.placementKey === 'paywall' ? 'paywall' : e.placementKey;
+          navigateTo(target);
           handledEventsRef.current.push(e);
         } else {
           const handled =
@@ -70,21 +96,19 @@ export function usePlacementButtonEvents(
           if (handled) {
             handledEventsRef.current.push(e);
           } else if (e.navigate_to && typeof e.navigate_to === 'string') {
-            context?.navigation(
-              e.navigate_to as
-                | 'onboard'
-                | 'terms'
-                | 'subscription'
-                | 'app'
-                | 'home'
-                | 'launchscreen',
-            );
+            navigateTo(e.navigate_to);
             handledEventsRef.current.push(e);
           }
         }
       }
     }
-  }, [events, context, requestPermission, onNavigateWithoutPlacement]);
+  }, [
+    events,
+    requestPermission,
+    setCondition,
+    navigateTo,
+    onNavigateWithoutPlacement,
+  ]);
 
   return handleClick;
 }

package/src/build-components/TermsProvider/TermsProvider.tsx

@@ -0,0 +1,45 @@
+import React, { useId } from 'react';
+import type { TermsProviderComponentProps } from './TermsProviderProps.generated';
+import RenderNode from '../RenderNode.generated';
+import type { Node } from '../../types/Node';
+import useNode from '../useNode';
+import { useBuilderParams } from '../../components/BuilderProvider';
+import { useExtractViewStyle } from '../../attribute-analyser/style/web/useExtractViewStyle';
+import { useLogRender } from '../../utils/useLogRender';
+import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
+import { useMergedStyle } from '../../utils/useMergedStyle';
+
+function TermsProvider({ node }: TermsProviderComponentProps) {
+  useLogRender('TermsProvider');
+  node = useNode(node);
+
+  const generatedId = useId();
+  const attributeName = node.sourceType ?? node.type ?? 'TermsProvider';
+  const attributeKey = node.key ?? generatedId;
+
+  const { previewMode, selectedKey } = useBuilderParams();
+
+  const baseStyle = useExtractViewStyle(node);
+
+  const isSelected = isNodeSelected({
+    previewMode: !!previewMode,
+    current: selectedKey ? { key: selectedKey } : undefined,
+    node,
+  });
+  const style = useMergedStyle(
+    baseStyle,
+    isSelected ? SELECTED_OUTLINE_STYLE : undefined,
+  );
+
+  return (
+    <div
+      attribute-name={attributeName}
+      attribute-key={attributeKey}
+      style={style}
+    >
+      {node.children && <RenderNode node={node.children as Node} />}
+    </div>
+  );
+}
+
+export default React.memo(TermsProvider);

package/src/build-components/TermsProvider/TermsProviderProps.generated.ts

@@ -0,0 +1,82 @@
+/* AUTO-GENERATED FILE - DO NOT EDIT */
+
+import type { NodeData } from '../../types/Node';
+
+export type AnimationOptionType =
+  | 'default'
+  | 'fade'
+  | 'fade_from_bottom'
+  | 'fade_from_right'
+  | 'reveal_from_bottom'
+  | 'scale_from_center'
+  | 'slide_from_right'
+  | 'slide_from_left'
+  | 'slide_from_bottom'
+  | 'none';
+export type FlexDirectionOptionType = 'row' | 'column';
+export type FlexWrapOptionType = 'nowrap' | 'wrap' | 'wrap-reverse';
+export type AlignItemsOptionType =
+  | 'flex-start'
+  | 'center'
+  | 'flex-end'
+  | 'stretch'
+  | 'baseline';
+export type JustifyContentOptionType =
+  | 'flex-start'
+  | 'center'
+  | 'flex-end'
+  | 'space-between'
+  | 'space-around'
+  | 'space-evenly';
+export type PositionOptionType = 'relative' | 'absolute';
+
+export interface TermsProviderStyleGenerated {
+  flexDirection?: FlexDirectionOptionType;
+  flexWrap?: FlexWrapOptionType;
+  alignItems?: AlignItemsOptionType;
+  justifyContent?: JustifyContentOptionType;
+  gap?: string;
+  padding?: string;
+  paddingHorizontal?: string;
+  paddingVertical?: string;
+  paddingTop?: string;
+  paddingBottom?: string;
+  paddingLeft?: string;
+  paddingRight?: string;
+  margin?: string;
+  marginHorizontal?: string;
+  marginVertical?: string;
+  marginTop?: string;
+  marginBottom?: string;
+  marginLeft?: string;
+  marginRight?: string;
+  backgroundColor?: string;
+  borderRadius?: string;
+  width?: string;
+  minWidth?: string;
+  maxWidth?: string;
+  height?: string;
+  minHeight?: string;
+  maxHeight?: string;
+  flex?: number;
+  position?: PositionOptionType;
+  top?: string;
+  bottom?: string;
+  left?: string;
+  right?: string;
+  zIndex?: number;
+}
+
+export interface TermsProviderPropsGenerated {
+  child: string;
+  attributes: {
+    styles?: TermsProviderStyleGenerated;
+    scrollable?: boolean;
+    testID?: string;
+    animation?: AnimationOptionType;
+  };
+}
+
+export interface TermsProviderComponentProps {
+  node: NodeData<TermsProviderPropsGenerated['attributes']>;
+}

package/src/build-components/TermsProvider/pattern.json

@@ -0,0 +1,35 @@
+{
+  "schemaVersion": 2,
+  "pattern": {
+    "type": "TermsProvider",
+    "title": "title",
+    "description": "description",
+    "children": "node",
+    "extends": "View",
+    "attributes": {
+      "animation": ["default", "fade", "fade_from_bottom", "fade_from_right", "reveal_from_bottom", "scale_from_center", "slide_from_right", "slide_from_left", "slide_from_bottom", "none"]
+    }
+  },
+  "defaults": {
+    "styles": {
+      "width": "100%",
+      "height": "100%",
+      "flex": 1
+    }
+  },
+  "meta": {
+    "desiredParent": ["root", "GlobalProvider"],
+    "label": "Terms Provider",
+    "description": "Provider for terms & privacy page (e.g. WebView + form). Use as a GlobalProvider page.",
+    "attributes": {
+      "animation": {
+        "label": "Page transition animation",
+        "description": "When this component is a GlobalProvider page: animation used when navigating to this screen.",
+        "category": "other",
+        "specialCategory": null,
+        "sort": 1
+      }
+    },
+    "styles": {}
+  }
+}

package/src/build-components/index.ts

@@ -19,6 +19,7 @@ export const allcomponentNames = [
   'FormErrorText',
   'FormProvider',
   'FormSubmitButton',
+  'GlobalProvider',
   'Image',
   'Main',
   'NavigationBarColor',
@@ -45,6 +46,7 @@ export const allcomponentNames = [
   'Separator',
   'StatusBarColor',
   'SystemButton',
+  'TermsProvider',
   'Text',
   'View',
   'WebView',
@@ -106,6 +108,10 @@ export type {
   FormSubmitButtonPropsGenerated,
   FormSubmitButtonComponentProps,
 } from './FormSubmitButton/FormSubmitButtonProps.generated';
+export type {
+  GlobalProviderPropsGenerated,
+  GlobalProviderComponentProps,
+} from './GlobalProvider/GlobalProviderProps.generated';
 export type {
   ImagePropsGenerated,
   ImageComponentProps,
@@ -210,6 +216,10 @@ export type {
   SystemButtonPropsGenerated,
   SystemButtonComponentProps,
 } from './SystemButton/SystemButtonProps.generated';
+export type {
+  TermsProviderPropsGenerated,
+  TermsProviderComponentProps,
+} from './TermsProvider/TermsProviderProps.generated';
 export type {
   TextPropsGenerated,
   TextComponentProps,