@developer_tribe/react-builder 1.2.43 → 1.2.44-test.2

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

@@ -0,0 +1,55 @@
+{
+  "schemaVersion": 2,
+  "types": {
+    "SkipConditionEntry": {
+      "pageKey": "string",
+      "conditionKey": "string"
+    }
+  },
+  "pattern": {
+    "type": "GlobalProvider",
+    "title": "title",
+    "description": "description",
+    "children": "node",
+    "extends": "View",
+    "attributes": {
+      "initialPage": "string",
+      "persistProgress": "boolean",
+      "skipConditions": "SkipConditionEntry[]"
+    }
+  },
+  "defaults": {
+    "styles": {
+      "flex": 1
+    }
+  },
+  "meta": {
+    "desiredParent": ["root"],
+    "label": "Global Provider",
+    "description": "Top-level provider that manages multi-page flow (Terms → Onboard → Paywall). Each direct child is treated as a page.",
+    "attributes": {
+      "initialPage": {
+        "label": "Initial Page Key",
+        "description": "The page key to show first. Defaults to the first child.",
+        "category": "other",
+        "specialCategory": null,
+        "sort": 1
+      },
+      "persistProgress": {
+        "label": "Persist Progress",
+        "description": "Save current page and conditions to localStorage so the user continues from where they left off.",
+        "category": "other",
+        "specialCategory": null,
+        "sort": 2
+      },
+      "skipConditions": {
+        "label": "Skip Conditions",
+        "description": "List of page skip rules. Each entry maps a pageKey to a conditionKey: when conditions[conditionKey] is true, that page is skipped on navigate.",
+        "category": "other",
+        "specialCategory": null,
+        "sort": 3
+      }
+    },
+    "styles": {}
+  }
+}

package/src/build-components/GlobalProvider/useGlobalNavigation.ts

@@ -0,0 +1,65 @@
+import { useCallback } from 'react';
+import { useGlobalContext } from './GlobalContext';
+import { useMockOSContext } from '../../mockOS/context/MockOSContextBase';
+import type { RouteType } from '../../mockOS/context/MockOSContextBase';
+
+/**
+ * Maps route/placement aliases to their canonical GlobalProvider page keys.
+ *
+ * Add entries here when a new alias should resolve to an existing page key.
+ * Keys are the incoming target strings (from JSON events / usePlacementButtonEvents).
+ * Values are the canonical page key that GlobalContext.navigate() will receive.
+ *
+ * Exported so other modules (e.g. a navigation-flow visualiser) can inspect
+ * which aliases exist without duplicating this logic.
+ */
+export const GLOBAL_ROUTE_ALIASES: Record<string, string> = {
+  subscription: 'paywall',
+  paywall: 'paywall',
+  onboard: 'onboard',
+  terms: 'terms',
+  home: 'home',
+};
+
+/**
+ * Returns a navigate function that first attempts to route within GlobalContext
+ * (when a GlobalProvider is active), then falls back to MockOSContext navigation.
+ *
+ * Used by SystemButton and OnboardButton so that events defined in JSON work
+ * transparently whether rendered inside a GlobalProvider or standalone.
+ */
+export function useGlobalNavigation(): (target: string) => boolean {
+  const globalCtx = useGlobalContext();
+  const mockOS = useMockOSContext();
+
+  return useCallback(
+    (target: string): boolean => {
+      if (globalCtx) {
+        // Direct page key match
+        if (globalCtx.pages.some((p) => p.key === target)) {
+          globalCtx.navigate(target);
+          return true;
+        }
+
+        // Alias resolution: map incoming target to canonical page key
+        const canonicalKey = GLOBAL_ROUTE_ALIASES[target];
+        if (
+          canonicalKey &&
+          globalCtx.pages.some((p) => p.key === canonicalKey)
+        ) {
+          globalCtx.navigate(canonicalKey);
+          return true;
+        }
+      }
+
+      // Fallback: delegate to MockOSContext
+      if (mockOS) {
+        mockOS.navigation(target as RouteType);
+        return true;
+      }
+
+      return false;
+    },
+    [globalCtx, mockOS],
+  );
+}

package/src/build-components/GlobalProvider/useGlobalProviderLogic.ts

@@ -0,0 +1,172 @@
+import { useCallback, useId, useMemo, useRef, useState } from 'react';
+import type { GlobalContextValue } from './GlobalContext';
+import {
+  buildPages,
+  loadProgress,
+  normalizeSkipConditions,
+  persistProgress,
+  resolveEffectivePage,
+} from './globalProviderUtils';
+import useNode from '../useNode';
+import type { NodeData } from '../../types/Node';
+
+export interface UseGlobalProviderLogicOptions {
+  node: NodeData;
+}
+
+export function useGlobalProviderLogic({
+  node: rawNode,
+}: UseGlobalProviderLogicOptions) {
+  const node = useNode(rawNode);
+
+  const generatedId = useId();
+  const attributeName = node.sourceType ?? node.type ?? 'GlobalProvider';
+  const attributeKey = node.key ?? generatedId;
+  const attrs = node.attributes;
+  const shouldPersist = attrs?.persistProgress === true;
+
+  const childNodes = useMemo((): NodeData[] => {
+    const raw = node.children;
+    if (!raw) return [];
+    if (Array.isArray(raw)) return raw as NodeData[];
+    return [raw as NodeData];
+  }, [node.children]);
+
+  const skipConditions = useMemo(
+    () => normalizeSkipConditions(attrs?.skipConditions),
+    [attrs?.skipConditions],
+  );
+
+  const pages = useMemo(
+    () => buildPages(childNodes, skipConditions),
+    [childNodes, skipConditions],
+  );
+
+  const storageKey = attributeKey;
+
+  const [conditions, setConditions] = useState<Record<string, boolean>>(() => {
+    if (shouldPersist) {
+      return loadProgress(storageKey)?.conditions ?? {};
+    }
+    return {};
+  });
+
+  const [pageStack, setPageStack] = useState<string[]>(() => {
+    const saved = shouldPersist ? loadProgress(storageKey) : null;
+    const initialConditions = saved?.conditions ?? {};
+
+    const firstEffective = (() => {
+      if (saved?.currentPageKey) {
+        return resolveEffectivePage(
+          saved.currentPageKey,
+          pages,
+          initialConditions,
+        );
+      }
+
+      const requestedKey =
+        typeof attrs?.initialPage === 'string'
+          ? attrs.initialPage
+          : (pages[0]?.key ?? '');
+      return resolveEffectivePage(requestedKey, pages, initialConditions);
+    })();
+    return firstEffective ? [firstEffective] : [];
+  });
+
+  const currentPageKey = pageStack[pageStack.length - 1] ?? '';
+
+  const conditionsRef = useRef(conditions);
+  conditionsRef.current = conditions;
+
+  const setCondition = useCallback(
+    (key: string, value: boolean) => {
+      setConditions((prev) => {
+        const next = { ...prev, [key]: value };
+        if (shouldPersist) {
+          const currentKey = pageStack[pageStack.length - 1] ?? '';
+          persistProgress(storageKey, currentKey, next);
+        }
+        return next;
+      });
+    },
+    [shouldPersist, storageKey, pageStack],
+  );
+
+  const navigate = useCallback(
+    (key: string) => {
+      const effective = resolveEffectivePage(key, pages, conditionsRef.current);
+      if (!effective) return;
+
+      setPageStack((prev) => {
+        const last = prev[prev.length - 1];
+        if (last === effective) return prev;
+        const next = [...prev, effective];
+        if (shouldPersist) {
+          persistProgress(storageKey, effective, conditionsRef.current);
+        }
+        return next;
+      });
+    },
+    [pages, shouldPersist, storageKey],
+  );
+
+  const goNext = useCallback(() => {
+    const currentIdx = pages.findIndex((p) => p.key === currentPageKey);
+    if (currentIdx === -1 || currentIdx >= pages.length - 1) return;
+    const nextPage = pages[currentIdx + 1];
+    if (!nextPage) return;
+    navigate(nextPage.key);
+  }, [pages, currentPageKey, navigate]);
+
+  const goBack = useCallback((): boolean => {
+    if (pageStack.length <= 1) return false;
+    setPageStack((prev) => {
+      const next = prev.slice(0, -1);
+      const prevKey = next[next.length - 1] ?? '';
+      if (shouldPersist) {
+        persistProgress(storageKey, prevKey, conditionsRef.current);
+      }
+      return next;
+    });
+    return true;
+  }, [pageStack.length, shouldPersist, storageKey]);
+
+  const activePage = useMemo(
+    () => pages.find((p) => p.key === currentPageKey),
+    [pages, currentPageKey],
+  );
+
+  const contextValue = useMemo<GlobalContextValue>(
+    () => ({
+      currentPageKey,
+      pages,
+      pageStack,
+      navigate,
+      goNext,
+      goBack,
+      conditions,
+      setCondition,
+    }),
+    [
+      currentPageKey,
+      pages,
+      pageStack,
+      navigate,
+      goNext,
+      goBack,
+      conditions,
+      setCondition,
+    ],
+  );
+
+  return {
+    node,
+    attributeName,
+    attributeKey,
+    attrs,
+    pages,
+    currentPageKey,
+    activePage,
+    contextValue,
+  };
+}

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

@@ -1,8 +1,5 @@
-import React, { useContext, useId, useRef } from 'react';
-import type {
-  EventObjectGenerated,
-  OnboardButtonComponentProps,
-} from './OnboardButtonProps.generated';
+import React, { useContext, useId, useCallback } from 'react';
+import type { OnboardButtonComponentProps } from './OnboardButtonProps.generated';
 import { onboardContext } from '../OnboardProvider/OnboardProvider';
 import useNode from '../useNode';
 import { useBuilderParams } from '../../components/BuilderProvider';
@@ -11,6 +8,12 @@ import { useExtractViewStyle } from '../../attribute-analyser/style/web/useExtra
 import { useMockOSContext, useMockPermission } from '../../mockOS';
 import { useLocalize } from '../../hooks/useLocalize';
 import { parseColor } from '../../utils/parseColor';
+import {
+  usePlacementButtonEvents,
+  type PlacementEventObject,
+} from '../SystemButton/usePlacementButtonEvents';
+import { useGlobalNavigation } from '../GlobalProvider/useGlobalNavigation';
+import { useGlobalContext } from '../GlobalProvider/GlobalContext';
 
 export function OnboardButton({ node }: OnboardButtonComponentProps) {
   useLogRender('OnboardButton');
@@ -20,7 +23,8 @@ export function OnboardButton({ node }: OnboardButtonComponentProps) {
   const { selectedTheme: theme, projectColors } = useBuilderParams();
   const context = useMockOSContext();
   const mockPermissionManager = useMockPermission(context);
-  const handledEventsRef = useRef<EventObjectGenerated[]>([]);
+  const globalNavigate = useGlobalNavigation();
+  const globalCtx = useGlobalContext();
   const generatedId = useId();
   const attributeKey = node.key ?? generatedId;
   const attrs = node.attributes;
@@ -30,40 +34,44 @@ export function OnboardButton({ node }: OnboardButtonComponentProps) {
   const rawTextColor = attrs?.styles?.color as string | undefined;
   const textColor = parseColor(rawTextColor, { projectColors, theme });
   const viewStyle = useExtractViewStyle(node);
-  const handleClick = async () => {
-    //TODO: any ??
-    const events: EventObjectGenerated[] = attrs?.events ?? [];
 
-    for (const e of events) {
-      // Check if event is already handled
-      if (handledEventsRef.current.includes(e)) {
-        continue;
+  const onNavigateWithoutPlacement = useCallback(
+    (e: PlacementEventObject): boolean => {
+      const eventTargetIndex = e.targetIndex;
+      if (typeof eventTargetIndex === 'number') {
+        emblaApi?.scrollTo(eventTargetIndex);
+        return true;
       }
-
-      if (e.type === 'Permission') {
-        const permission = e.permission ?? 'camera';
-        await mockPermissionManager.requestPermission(permission);
-        handledEventsRef.current.push(e);
-      } else if (e.type === 'Navigate') {
-        const eventTargetIndex = e.targetIndex;
-        if (typeof eventTargetIndex === 'number') {
-          emblaApi?.scrollTo(eventTargetIndex);
-          handledEventsRef.current.push(e);
-        } else if (e.navigate_to) {
-          const eventTarget = e.navigate_to;
-          if (typeof eventTarget === 'string') {
-            handledEventsRef.current.push(e);
-            if (context) {
-              context.navigation(eventTarget as any);
-            } else {
-              console.warn('Mock OS context not available for navigation.');
-            }
-          }
+      if (e.navigate_to && typeof e.navigate_to === 'string') {
+        if (globalNavigate(e.navigate_to)) return true;
+        if (context) {
+          context.navigation(
+            e.navigate_to as
+              | 'onboard'
+              | 'terms'
+              | 'subscription'
+              | 'app'
+              | 'home'
+              | 'launchscreen',
+          );
+        } else {
+          console.warn('Mock OS context not available for navigation.');
         }
+        return true;
       }
-    }
-    // Fallback: do nothing when there is no Navigate event
-  };
+      return false;
+    },
+    [emblaApi, context, globalNavigate],
+  );
+
+  const handleClick = usePlacementButtonEvents(attrs?.events, {
+    context,
+    requestPermission: (permission) =>
+      mockPermissionManager.requestPermission(permission),
+    onNavigateWithoutPlacement,
+    globalNavigate,
+    setCondition: globalCtx?.setCondition,
+  });
 
   return (
     <button

package/src/build-components/OnboardButton/OnboardButtonProps.generated.ts

@@ -2,8 +2,28 @@
 
 import type { NodeData } from '../../types/Node';
 
-export type TypeOptionType = 'Permission' | 'Navigate';
-export type PermissionOptionType = 'att' | 'notification' | 'rating' | 'GDPR';
+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 TestIDOptionType = 'onboardSkip' | 'onboardNext';
 export type AnimationOptionType =
   | 'simple-animation'
@@ -30,12 +50,23 @@ export type PositionOptionType = 'relative' | 'absolute';
 
 export interface EventObjectGenerated {
   type?: TypeOptionType;
-  permission?: PermissionOptionType | null;
+  permission?: PermissionOptionType;
   navigate_to?: string;
   targetIndex?: number;
+  placementKey?: PlacementKeyOptionType;
+  conditionKey?: ConditionKeyOptionType;
+  value?: boolean;
 }
 
 export interface OnboardButtonStyleGenerated {
+  color?: string;
+  backgroundColor?: string;
+  height?: string;
+  borderRadius?: string;
+  fontSize?: string;
+  fontWeight?: string;
+  fontFamily?: string;
+  textAlign?: string;
   flexDirection?: FlexDirectionOptionType;
   flexWrap?: FlexWrapOptionType;
   alignItems?: AlignItemsOptionType;
@@ -55,12 +86,9 @@ export interface OnboardButtonStyleGenerated {
   marginBottom?: string;
   marginLeft?: string;
   marginRight?: string;
-  backgroundColor?: string;
-  borderRadius?: string;
   width?: string;
   minWidth?: string;
   maxWidth?: string;
-  height?: string;
   minHeight?: string;
   maxHeight?: string;
   flex?: number;
@@ -70,19 +98,21 @@ export interface OnboardButtonStyleGenerated {
   left?: string;
   right?: string;
   zIndex?: number;
-  color?: string;
 }
 
 export interface OnboardButtonPropsGenerated {
   child: string;
   attributes: {
     styles?: OnboardButtonStyleGenerated;
-    scrollable?: boolean;
-    testID?: TestIDOptionType;
     labelKey?: string;
+    events?: EventObjectGenerated[];
+    testID?: TestIDOptionType;
+    adjustsFontSizeToFit?: boolean;
+    numberOfLines?: number;
+    translateCounter?: number;
+    scrollable?: boolean;
     animation?: AnimationOptionType;
     animation_color?: string;
-    events?: EventObjectGenerated[];
   };
 }
 

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

@@ -5,7 +5,7 @@
     "title": "title",
     "description": "description",
     "children": "never",
-    "extends": "View",
+    "extends": "SystemButton",
     "attributes": {
       "labelKey": "string",
       "animation": [
@@ -32,10 +32,13 @@
   },
   "types": {
     "EventObject": {
-      "type": ["Permission", "Navigate"],
-      "permission": ["att", "notification", "rating", "GDPR", "null"],
+      "type": "$ref:event-constants.eventTypes",
+      "permission": "$ref:event-constants.permissionTypes",
       "navigate_to": "string",
-      "targetIndex": "number"
+      "targetIndex": "number",
+      "placementKey": "$ref:event-constants.placementKeys",
+      "conditionKey": "$ref:event-constants.conditionKeys",
+      "value": "boolean"
     }
   },
   "meta": {

package/src/build-components/OnboardProvider/OnboardProviderProps.generated.ts

@@ -3,6 +3,17 @@
 import type { NodeData } from '../../types/Node';
 
 export type ThemeOptionType = 'light' | 'dark' | 'all';
+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 =
@@ -65,6 +76,7 @@ export interface OnboardProviderPropsGenerated {
     testID?: string;
     theme?: ThemeOptionType;
     borderRadius?: never;
+    animation?: AnimationOptionType;
   };
 }
 

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

@@ -8,7 +8,8 @@
     "extends": "View",
     "attributes": {
       "theme": ["light", "dark", "all"],
-      "borderRadius": "never"
+      "borderRadius": "never",
+      "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": {
@@ -30,6 +31,13 @@
         "specialCategory": null,
         "sort": -10
       },
+      "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
+      },
       "styles": {
         "paddingTop": {
           "label": "Padding Top",

package/src/build-components/PaywallProvider/PaywallProviderProps.generated.ts

@@ -2,6 +2,17 @@
 
 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 =
@@ -63,6 +74,7 @@ export interface PaywallProviderPropsGenerated {
     scrollable?: boolean;
     testID?: string;
     delay?: number;
+    animation?: AnimationOptionType;
   };
 }
 

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": {