@developer_tribe/react-builder 1.2.15 → 1.2.18

package/dist/mockOS/backHandler.d.ts

@@ -0,0 +1,4 @@
+export type MockOSBackHandler = () => boolean;
+export declare function registerMockOSBackHandler(handler: MockOSBackHandler): () => void;
+export declare function emitMockOSBackPress(): boolean;
+export declare function clearMockOSBackHandlers(): void;

package/dist/paywall/hooks/index.d.ts

@@ -1,5 +1,5 @@
-export { usePaywallCounter } from './usePaywallCounter';
-export { useCloseStatusPaywall } from './useCloseStatusPaywall';
-export { useCarouselOptionsSeperator } from './useCarouselOptionsSeperator';
 export { useCalculateLocalizedPrice } from './useCalculateLocalizedPrice';
 export { useDiscountRate } from './useDiscountRate';
+export { useChangeDelayByPaywall } from './useChangeDelayByPaywall';
+export { useHandleGoBack } from './useHandleGoBack';
+export { useMockOSBackHandler } from './useMockOSBackHandler';

package/dist/paywall/hooks/useChangeDelayByPaywall.d.ts

@@ -0,0 +1,4 @@
+import type { NodeData } from '../../types/Node';
+export declare function useChangeDelayByPaywall(node: NodeData<{
+    delay?: number;
+}> | null | undefined, setIsBackAllowed: (value: boolean) => void): void;

package/dist/paywall/hooks/useHandleGoBack.d.ts

@@ -0,0 +1 @@
+export declare function useHandleGoBack(handleGoBack: () => boolean | null | undefined): void;

package/dist/paywall/hooks/useMockOSBackHandler.d.ts

@@ -0,0 +1 @@
+export declare function useMockOSBackHandler(isBackAllowed: boolean): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@developer_tribe/react-builder",
-  "version": "1.2.15",
+  "version": "1.2.18",
   "license": "UNLICENSED",
   "type": "module",
   "restricted": true,
@@ -33,6 +33,9 @@
   ],
   "scripts": {
     "prebuild": "node ./scripts/prebuild/prebuild.js",
+    "prebuild:basics": "yarn builder build --name builder --components=View --components=Text --components=Button --components=Image --components=Carousel --components=CarouselProvider --components=CarouselItem --components=CarouselDots --components=CarouselButtons --components=BIcon --components=BackgroundImage --components=Main --components=RadioButton --components=Counter --components=CountDown",
+    "prebuild:onboard": "yarn builder build --name onboard/builder --components=OnboardProvider --components=Onboard --components=OnboardItem --components=OnboardImage --components=OnboardTitle --components=OnboardSubtitle --components=OnboardDot --components=OnboardButtons --components=OnboardButton --components=OnboardFooter",
+    "prebuild:paywall": "yarn builder build --name paywall/builder --components=PaywallProvider --components=PaywallBackground --components=PaywallCloseButton --components=PaywallOptions --components=PaywallSubscribeButton --components=PaywallCounter",
     "build": "yarn prebuild && yarn rimraf dist && rollup -c",
     "build:watch": "rollup -c -w",
     "lint": "eslint src",

package/src/RenderPage.tsx

@@ -84,60 +84,37 @@ export function RenderPage({
   const showEmptyState = isEmptyPreview(data);
 
   useEffect(() => {
-    console.info('[preview] RenderPage effect', {
-      previewMode,
-      forceRender,
-      hasRoot: !!previewRootRef.current,
-    });
-
     if (!previewMode) {
       return;
     }
 
     const root = previewRootRef.current;
     if (!root) {
-      console.info('[preview] RenderPage effect skipped (no root)');
       return;
     }
 
-    console.info('[preview] RenderPage effect bound', {
-      rootTag: root.tagName,
-      rootClass: root.className,
-    });
-
     const handleClick = (event: MouseEvent) => {
       const target = event.target as HTMLElement | null;
-      console.info('[preview] click', {
-        target: target ? target.tagName : null,
-        className: target ? target.className : null,
-      });
 
       if (!target) return;
 
       // Ignore clicks on carousel dots to avoid interfering with navigation
       if (target.closest('.embla__dot')) {
-        console.info('[preview] click ignored (embla dot)');
         return;
       }
 
       const element = target.closest('[attribute-key]') as HTMLElement | null;
       if (!element) {
-        console.info('[preview] click ignored (no attribute-key ancestor)');
         return;
       }
 
       const key = element.getAttribute('attribute-key');
 
       if (!key) {
-        console.info('[preview] click ignored (no attribute-key value)');
         return;
       }
 
       const node = findNodeByKeyNested(data, key);
-      console.info('[preview] click resolved', {
-        key,
-        foundNode: !!node,
-      });
       setCurrent(node);
       onSelectNode?.(node);
     };
@@ -145,7 +122,6 @@ export function RenderPage({
     root.addEventListener('click', handleClick);
 
     return () => {
-      console.info('[preview] RenderPage effect cleanup');
       root.removeEventListener('click', handleClick);
     };
   }, [previewMode, data, onSelectNode, setCurrent, forceRender]); // forceRender: retrigger effect when we want to force a refresh (e.g. route change)

package/src/assets/meta.json

@@ -1,4 +1,4 @@
 {
   "supportedProjectVersion": "1.1.2",
-  "reactBuilderVersion": "1.2.15"
+  "reactBuilderVersion": "1.2.17"
 }

package/src/assets/samples/paywall-2.json

@@ -37,6 +37,7 @@
             "backgroundColor": "#EEF2FF"
           },
           "scrollable": true,
+          "delay": 5000,
           "description": "Paywall provider container.",
           "title": "Main Paywall"
         },
@@ -293,14 +294,14 @@
               {
                 "type": "CountDown",
                 "attributes": {
-                  "count": 30000,
+                  "count": 10000,
                   "style": {
                     "color": "#FF0000",
                     "fontWeight": "700",
                     "fontSize": 40,
                     "textAlign": "center"
                   },
-                  "description": "Countdown timer (30 seconds).",
+                  "description": "Countdown timer (10 seconds).",
                   "title": "Countdown"
                 },
                 "children": null

package/src/build-components/BackgroundImage/BackgroundImageProps.generated.ts

@@ -59,9 +59,9 @@ export interface BackgroundImagePropsGenerated {
   child: string;
   attributes: {
     style?: BackgroundImageStyleGenerated;
+    scrollable?: boolean;
     title?: string;
     description?: string;
-    scrollable?: boolean;
     src?: string;
     resizeMode?: ResizeModeOptionType;
   };

package/src/build-components/Button/ButtonProps.generated.ts

@@ -73,9 +73,9 @@ export interface ButtonPropsGenerated {
   child: string;
   attributes: {
     style?: ButtonStyleGenerated;
+    scrollable?: boolean;
     title?: string;
     description?: string;
-    scrollable?: boolean;
   };
 }
 

package/src/build-components/Carousel/CarouselProps.generated.ts

@@ -59,9 +59,9 @@ export interface CarouselPropsGenerated {
   child: string;
   attributes: {
     style?: CarouselStyleGenerated;
+    scrollable?: boolean;
     title?: string;
     description?: string;
-    scrollable?: boolean;
     loop?: boolean;
     dragFree?: boolean;
     align?: AlignOptionType;

package/src/build-components/CarouselButtons/CarouselButtonsProps.generated.ts

@@ -62,9 +62,9 @@ export interface CarouselButtonsPropsGenerated {
   child: string;
   attributes: {
     style?: CarouselButtonsStyleGenerated;
+    scrollable?: boolean;
     title?: string;
     description?: string;
-    scrollable?: boolean;
     buttonType?: ButtonTypeOptionType;
     skipNumber?: number;
   };

package/src/build-components/CarouselDots/CarouselDotsProps.generated.ts

@@ -65,9 +65,9 @@ export interface CarouselDotsPropsGenerated {
   child: string;
   attributes: {
     style?: CarouselDotsStyleGenerated;
+    scrollable?: boolean;
     title?: string;
     description?: string;
-    scrollable?: boolean;
     dotType?: DotTypeOptionType;
   };
 }

package/src/build-components/CarouselItem/CarouselItemProps.generated.ts

@@ -58,9 +58,9 @@ export interface CarouselItemPropsGenerated {
   child: string;
   attributes: {
     style?: CarouselItemStyleGenerated;
+    scrollable?: boolean;
     title?: string;
     description?: string;
-    scrollable?: boolean;
   };
 }
 

package/src/build-components/CarouselProvider/CarouselProviderProps.generated.ts

@@ -58,9 +58,9 @@ export interface CarouselProviderPropsGenerated {
   child: string;
   attributes: {
     style?: CarouselProviderStyleGenerated;
+    scrollable?: boolean;
     title?: string;
     description?: string;
-    scrollable?: boolean;
   };
 }
 

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useId, useState } from 'react';
+import React, { useEffect, useId, useRef, useState } from 'react';
 import type { CountDownComponentProps } from './CountDownProps.generated';
 import useNode from '../useNode';
 import { useBuilderParams } from '../../components/BuilderProvider';
@@ -7,6 +7,7 @@ import { useLogRender } from '../../utils/useLogRender';
 import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
 import { useMergedStyle } from '../../utils/useMergedStyle';
 import { formatCountdownTime } from './formatCountdownTime';
+import { usePaywallContext } from '../PaywallProvider/PaywallContext';
 
 const DEFAULT_FORMAT = 'm : s';
 
@@ -20,6 +21,8 @@ export function CountDown({ node }: CountDownComponentProps) {
   const attributeKey = node.key ?? generatedId;
 
   const { previewMode, selectedKey } = useBuilderParams();
+  const { onCounterDown } = usePaywallContext();
+  const onCounterDownRef = useRef(onCounterDown);
   const baseStyle = useExtractTextStyle(node);
   const isSelected = isNodeSelected({
     previewMode: !!previewMode,
@@ -39,6 +42,10 @@ export function CountDown({ node }: CountDownComponentProps) {
 
   const [time, setTime] = useState<string>('');
 
+  useEffect(() => {
+    onCounterDownRef.current = onCounterDown;
+  }, [onCounterDown]);
+
   useEffect(() => {
     const targetTimeMs = Date.now() + delayMs;
     setTime(formatCountdownTime(targetTimeMs, DEFAULT_FORMAT));
@@ -53,6 +60,7 @@ export function CountDown({ node }: CountDownComponentProps) {
       setTime(formatCountdownTime(targetTimeMs, DEFAULT_FORMAT, nowMs));
       if (diffMs <= 0) {
         clearInterval(intervalId);
+        onCounterDownRef.current?.();
       }
     }, 950); // Keep slightly under 1s to reduce visible drift.
 

package/src/build-components/Image/ImageProps.generated.ts

@@ -59,9 +59,9 @@ export interface ImagePropsGenerated {
   child: string;
   attributes: {
     style?: ImageStyleGenerated;
+    scrollable?: boolean;
     title?: string;
     description?: string;
-    scrollable?: boolean;
     src?: string;
     width?: string;
     height?: string;

package/src/build-components/Main/MainProps.generated.ts

@@ -58,9 +58,9 @@ export interface MainPropsGenerated {
   child: string;
   attributes: {
     style?: MainStyleGenerated;
+    scrollable?: boolean;
     title?: string;
     description?: string;
-    scrollable?: boolean;
     useSafeAreaView?: boolean;
   };
 }

package/src/build-components/Onboard/OnboardProps.generated.ts

@@ -58,9 +58,9 @@ export interface OnboardPropsGenerated {
   child: string;
   attributes: {
     style?: OnboardStyleGenerated;
+    scrollable?: boolean;
     title?: string;
     description?: string;
-    scrollable?: boolean;
   };
 }
 

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

@@ -73,9 +73,9 @@ export interface OnboardButtonPropsGenerated {
   child: string;
   attributes: {
     style?: OnboardButtonStyleGenerated;
+    scrollable?: boolean;
     title?: string;
     description?: string;
-    scrollable?: boolean;
     labelKey?: string;
     button_text_color?: string;
     animation?: AnimationOptionType;

package/src/build-components/OnboardButtons/OnboardButtonsProps.generated.ts

@@ -64,9 +64,9 @@ export interface OnboardButtonsPropsGenerated {
   child: string;
   attributes: {
     style?: OnboardButtonsStyleGenerated;
+    scrollable?: boolean;
     title?: string;
     description?: string;
-    scrollable?: boolean;
     buttonType?: ButtonTypeOptionType;
     skipNumber?: number;
     buttons_direction?: ButtonsDirectionOptionType;

package/src/build-components/OnboardDot/OnboardDotProps.generated.ts

@@ -65,9 +65,9 @@ export interface OnboardDotPropsGenerated {
   child: string;
   attributes: {
     style?: OnboardDotStyleGenerated;
+    scrollable?: boolean;
     title?: string;
     description?: string;
-    scrollable?: boolean;
     dotType?: DotTypeOptionType;
     inactive_dot_opacity?: number;
     expanding_dot_width?: string;

package/src/build-components/OnboardItem/OnboardItemProps.generated.ts

@@ -59,9 +59,9 @@ export interface OnboardItemPropsGenerated {
   child: string;
   attributes: {
     style?: OnboardItemStyleGenerated;
+    scrollable?: boolean;
     title?: string;
     description?: string;
-    scrollable?: boolean;
     display?: DisplayOptionType;
     gap?: string;
     flexDirection?: FlexDirectionOptionType;

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

@@ -59,9 +59,9 @@ export interface OnboardProviderPropsGenerated {
   child: string;
   attributes: {
     style?: OnboardProviderStyleGenerated;
+    scrollable?: boolean;
     title?: string;
     description?: string;
-    scrollable?: boolean;
     theme?: ThemeOptionType;
     borderRadius?: never;
   };

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

@@ -14,7 +14,7 @@ import { usePaywallContext } from '../PaywallProvider/PaywallContext';
 function PaywallCloseButton({ node }: PaywallCloseButtonComponentProps) {
   useLogRender('PaywallCloseButton');
   node = useNode(node);
-  const { onClose } = usePaywallContext();
+  const { onClose, isBackAllowed } = usePaywallContext();
 
   const generatedId = useId();
   const attributeName = node.sourceType ?? node.type ?? 'PaywallCloseButton';
@@ -35,6 +35,10 @@ function PaywallCloseButton({ node }: PaywallCloseButtonComponentProps) {
     isSelected ? SELECTED_OUTLINE_STYLE : undefined,
   );
 
+  if (!isBackAllowed) {
+    return null;
+  }
+
   const attrs = node.attributes;
   const styleBag = attrs?.style;
   const iconType = attrs?.iconType ?? 'close';

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

@@ -21,6 +21,9 @@
     "iconType": "close",
     "size": 24,
     "style": {
+      "position": "absolute",
+      "top": "35@vs",
+      "left": "24@s",
       "flexDirection": "row",
       "justifyContent": "center",
       "alignItems": "center"

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

@@ -6,7 +6,6 @@ import { useExtractTextStyle } from '../../attribute-analyser/style/web/useExtra
 import { useLogRender } from '../../utils/useLogRender';
 import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
 import { useMergedStyle } from '../../utils/useMergedStyle';
-import { usePaywallCounter } from '../../paywall/hooks';
 
 //Optimzation trade off by readability: skip React.memo to keep named exports.
 export function PaywallCounter({ node }: PaywallCounterComponentProps) {
@@ -29,11 +28,9 @@ export function PaywallCounter({ node }: PaywallCounterComponentProps) {
     isSelected ? SELECTED_OUTLINE_STYLE : undefined,
   );
 
-  const paywallCount = usePaywallCounter();
   const fallbackCount = node.attributes?.count;
-  const count = Number.isFinite(paywallCount)
-    ? paywallCount
-    : typeof fallbackCount === 'number' && Number.isFinite(fallbackCount)
+  const count =
+    typeof fallbackCount === 'number' && Number.isFinite(fallbackCount)
       ? fallbackCount
       : 0;
 

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

@@ -52,7 +52,7 @@ function PaywallOptions({ node }: PaywallOptionsComponentProps) {
   useLogRender('PaywallOptions');
   node = useNode(node);
   const { products } = useBuilderParams();
-  const { selectedProductId, setSelectedProductId } = usePaywallContext();
+  const { selectedProduct, setSelectedProductId } = usePaywallContext();
   const getParamsForProduct = usePaywallOptionParamsFactory();
 
   const sortedProducts = useMemo(() => {
@@ -67,7 +67,7 @@ function PaywallOptions({ node }: PaywallOptionsComponentProps) {
     <>
       {sortedProducts.map((p, index) => {
         const productId = p.productId || `${index}`;
-        const isSelected = selectedProductId === productId;
+        const isSelected = selectedProduct?.productId === productId;
         const { localizationParams, otherParams } = getParamsForProduct(p, {
           isSelected,
         });

package/src/build-components/PaywallOptions/PaywallOptionsProps.generated.ts

@@ -58,9 +58,9 @@ export interface PaywallOptionsPropsGenerated {
   child: string;
   attributes: {
     style?: PaywallOptionsStyleGenerated;
+    scrollable?: boolean;
     title?: string;
     description?: string;
-    scrollable?: boolean;
   };
 }
 

package/src/build-components/PaywallProvider/PaywallContext.ts

@@ -3,11 +3,12 @@ import type { Product } from '../../paywall/types/paywall-types';
 
 export type PaywallContextValue = {
   products: Product[];
-  selectedProductId: string;
   setSelectedProductId: (productId: string) => void;
   selectedProduct?: Product;
   onClose?: () => void;
   onSubscribe?: (product?: Product) => void | boolean | Promise<boolean>;
+  onCounterDown?: () => void;
+  isBackAllowed: boolean;
 };
 
 export const PaywallContext = createContext<PaywallContextValue | undefined>(
@@ -18,8 +19,9 @@ export function usePaywallContext(): PaywallContextValue {
   return (
     useContext(PaywallContext) ?? {
       products: [],
-      selectedProductId: '',
       setSelectedProductId: () => {},
+      onCounterDown: () => {},
+      isBackAllowed: true,
     }
   );
 }

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

@@ -11,6 +11,10 @@ import { LocalizationParamsProvider } from '../../components/LocalizationParamsP
 import { useBuilderParams } from '../../components/BuilderProvider';
 import { PaywallContext } from './PaywallContext';
 import { useMockOSContext } from '../../mockOS/context/MockOSContextBase';
+import type { Product } from '../../paywall/types/paywall-types';
+import { useChangeDelayByPaywall } from '../../paywall/hooks/useChangeDelayByPaywall';
+import { useHandleGoBack } from '../../paywall/hooks/useHandleGoBack';
+import { useMockOSBackHandler } from '../../paywall/hooks/useMockOSBackHandler';
 
 function PaywallProvider({ node }: PaywallProviderComponentProps) {
   useLogRender('PaywallProvider');
@@ -57,6 +61,7 @@ function PaywallProvider({ node }: PaywallProviderComponentProps) {
   );
 
   const [selectedProductId, setSelectedProductId] = useState<string>('');
+  const [isBackAllowed, setIsBackAllowed] = useState<boolean>(false);
   useEffect(() => {
     const list = Array.isArray(products) ? products : [];
     if (list.length === 0) {
@@ -70,6 +75,9 @@ function PaywallProvider({ node }: PaywallProviderComponentProps) {
     }
   }, [products, selectedProductId]);
 
+  useChangeDelayByPaywall(node, setIsBackAllowed);
+  useMockOSBackHandler(isBackAllowed);
+
   const selectedProduct = useMemo(() => {
     const list = Array.isArray(products) ? products : [];
     return (
@@ -79,6 +87,9 @@ function PaywallProvider({ node }: PaywallProviderComponentProps) {
   }, [products, selectedProductId]);
 
   const handleClose = useCallback(() => {
+    if (!isBackAllowed) {
+      return;
+    }
     // Default: in MockOS go back (simulate dismissing paywall screen).
     // TODO: at react native merge it will change
     if (mockOS?.isEnabled) {
@@ -87,13 +98,22 @@ function PaywallProvider({ node }: PaywallProviderComponentProps) {
         mockOS.navigation('launchscreen');
       }
     }
-  }, [mockOS]);
+  }, [mockOS, isBackAllowed]);
+
+  const handleGoBack = useCallback(() => {
+    if (!isBackAllowed) {
+      return false;
+    }
+    return true;
+  }, [isBackAllowed]);
+
+  useHandleGoBack(handleGoBack);
 
   const handleSubscribe = useCallback(
-    async (product?: { productId?: string }) => {
+    async (product?: Product): Promise<boolean> => {
       // Host app override wins.
       if (onPaywallSubscribe) {
-        const result = onPaywallSubscribe(product as any);
+        const result = onPaywallSubscribe(product);
         const ok =
           result instanceof Promise
             ? await result
@@ -105,7 +125,7 @@ function PaywallProvider({ node }: PaywallProviderComponentProps) {
         if (ok && mockOS?.isEnabled) {
           mockOS.goBack?.();
         }
-        return;
+        return ok;
       }
 
       // Default: in MockOS show a native-like subscription prompt.
@@ -122,26 +142,44 @@ function PaywallProvider({ node }: PaywallProviderComponentProps) {
           // TODO: at react native merge it will change
           mockOS.goBack?.();
         }
+        return ok;
       }
+      return false;
     },
     [mockOS, onPaywallSubscribe],
   );
 
+  const handleCounterDown = useCallback(() => {
+    if (!isBackAllowed) {
+      return;
+    }
+    // Default: in MockOS go back (simulate dismissing paywall screen).
+    // TODO: at react native merge it will change
+    if (mockOS?.isEnabled) {
+      const canGoBack = mockOS.goBack();
+      if (!canGoBack) {
+        mockOS.navigation('launchscreen');
+      }
+    }
+  }, [isBackAllowed, mockOS]);
+
   const paywallContextValue = useMemo(
     () => ({
       products: Array.isArray(products) ? products : [],
-      selectedProductId,
       setSelectedProductId,
       selectedProduct,
       onClose: handleClose,
-      onSubscribe: handleSubscribe as any,
+      onSubscribe: handleSubscribe,
+      onCounterDown: handleCounterDown,
+      isBackAllowed,
     }),
     [
       products,
-      selectedProductId,
       selectedProduct,
       handleClose,
       handleSubscribe,
+      handleCounterDown,
+      isBackAllowed,
     ],
   );
 

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

@@ -58,9 +58,10 @@ export interface PaywallProviderPropsGenerated {
   child: string;
   attributes: {
     style?: PaywallProviderStyleGenerated;
+    scrollable?: boolean;
     title?: string;
     description?: string;
-    scrollable?: boolean;
+    delay?: number;
   };
 }
 

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

@@ -6,7 +6,8 @@
     "extends": "View",
     "attributes": {
       "title": "title",
-      "description": "description"
+      "description": "description",
+      "delay": "number"
     }
   },
   "defaults": {
@@ -21,6 +22,15 @@
     ],
     "label": "Paywall Provider",
     "description": "Provider/wrapper for paywall screen components.",
+    "attributes": {
+      "delay": {
+        "label": "Back Delay (ms)",
+        "description": "Milliseconds before the paywall can be dismissed via back/close.",
+        "category": "other",
+        "specialCategory": null,
+        "sort": 1
+      }
+    },
     "mockableFeatures": {
       "products": true,
       "benefits": true

package/src/build-components/RadioButton/RadioButtonProps.generated.ts

@@ -58,9 +58,9 @@ export interface RadioButtonPropsGenerated {
   child: string;
   attributes: {
     style?: RadioButtonStyleGenerated;
+    scrollable?: boolean;
     title?: string;
     description?: string;
-    scrollable?: boolean;
     selected?: boolean;
     color?: string;
     size?: number;