@developer_tribe/react-builder 1.2.14 → 1.2.17

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

@@ -0,0 +1,46 @@
+import React, { useId } from 'react';
+import type { PaywallCounterComponentProps } from './PaywallCounterProps.generated';
+import useNode from '../useNode';
+import { useBuilderParams } from '../../components/BuilderProvider';
+import { useExtractTextStyle } from '../../attribute-analyser/style/web/useExtractTextStyle';
+import { useLogRender } from '../../utils/useLogRender';
+import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
+import { useMergedStyle } from '../../utils/useMergedStyle';
+
+//Optimzation trade off by readability: skip React.memo to keep named exports.
+export function PaywallCounter({ node }: PaywallCounterComponentProps) {
+  useLogRender('PaywallCounter');
+  node = useNode(node);
+
+  const generatedId = useId();
+  const attributeName = node.sourceType ?? node.type ?? 'PaywallCounter';
+  const attributeKey = node.key ?? generatedId;
+
+  const { previewMode, selectedKey } = useBuilderParams();
+  const baseStyle = useExtractTextStyle(node);
+  const isSelected = isNodeSelected({
+    previewMode: !!previewMode,
+    current: selectedKey ? { key: selectedKey } : undefined,
+    node,
+  });
+  const style = useMergedStyle(
+    baseStyle,
+    isSelected ? SELECTED_OUTLINE_STYLE : undefined,
+  );
+
+  const fallbackCount = node.attributes?.count;
+  const count =
+    typeof fallbackCount === 'number' && Number.isFinite(fallbackCount)
+      ? fallbackCount
+      : 0;
+
+  return (
+    <p
+      attribute-name={attributeName}
+      attribute-key={attributeKey}
+      style={style}
+    >
+      {String(count)}
+    </p>
+  );
+}

package/src/build-components/PaywallCounter/PaywallCounterProps.generated.ts

@@ -0,0 +1,78 @@
+/* AUTO-GENERATED FILE - DO NOT EDIT */
+
+import type { NodeData } from '../../types/Node';
+
+export type TextAlignOptionType = 'left' | 'center' | 'right' | 'justify';
+export type FlexDirectionOptionType = 'row' | 'column';
+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 PaywallCounterStyleGenerated {
+  color?: string;
+  fontSize?: string;
+  fontFamily?: string;
+  fontWeight?: string;
+  textAlign?: TextAlignOptionType;
+  flexDirection?: FlexDirectionOptionType;
+  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 PaywallCounterPropsGenerated {
+  child: string;
+  attributes: {
+    style?: PaywallCounterStyleGenerated;
+    count?: number;
+    title?: string;
+    description?: string;
+    adjustsFontSizeToFit?: boolean;
+    showEllipsis?: boolean;
+    scrollable?: boolean;
+  };
+}
+
+export interface PaywallCounterComponentProps {
+  node: NodeData<PaywallCounterPropsGenerated['attributes']>;
+}

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

@@ -0,0 +1,24 @@
+{
+  "schemaVersion": 2,
+  "pattern": {
+    "type": "PaywallCounter",
+    "children": "never",
+    "extends": "Counter",
+    "attributes": {}
+  },
+  "meta": {
+    "desiredParent": ["all"],
+    "label": "Paywall Counter",
+    "description": "Displays the paywall counter value.",
+    "attributes": {
+      "count": {
+        "label": "Fallback Count",
+        "description": "Used only when the paywall counter hook returns no value.",
+        "category": "other",
+        "specialCategory": null,
+        "sort": 1
+      }
+    }
+  }
+}
+

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,6 +58,8 @@ export interface PaywallOptionsPropsGenerated {
   child: string;
   attributes: {
     style?: PaywallOptionsStyleGenerated;
+    title?: string;
+    description?: string;
     scrollable?: boolean;
   };
 }

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

@@ -4,7 +4,10 @@
     "type": "PaywallOptions",
     "extends": "View",
     "children": "node",
-    "attributes": {}
+    "attributes": {
+      "title": "title",
+      "description": "description"
+    }
   },
   "meta": {
     "desiredParent": [

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');
@@ -20,14 +24,8 @@ function PaywallProvider({ node }: PaywallProviderComponentProps) {
   const attributeName = node.sourceType ?? node.type ?? 'PaywallProvider';
   const attributeKey = node.key ?? generatedId;
 
-  const {
-    benefits,
-    products,
-    onPaywallClose,
-    onPaywallSubscribe,
-    previewMode,
-    selectedKey,
-  } = useBuilderParams();
+  const { benefits, products, onPaywallSubscribe, previewMode, selectedKey } =
+    useBuilderParams();
   const mockOS = useMockOSContext();
   const benefitLocalizationParams = useMemo(() => {
     const raw =
@@ -63,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) {
@@ -76,6 +75,9 @@ function PaywallProvider({ node }: PaywallProviderComponentProps) {
     }
   }, [products, selectedProductId]);
 
+  useChangeDelayByPaywall(node, setIsBackAllowed);
+  useMockOSBackHandler(isBackAllowed);
+
   const selectedProduct = useMemo(() => {
     const list = Array.isArray(products) ? products : [];
     return (
@@ -85,23 +87,33 @@ function PaywallProvider({ node }: PaywallProviderComponentProps) {
   }, [products, selectedProductId]);
 
   const handleClose = useCallback(() => {
-    // Host app override wins.
-    if (onPaywallClose) {
-      onPaywallClose();
+    if (!isBackAllowed) {
+      return;
     }
-
     // Default: in MockOS go back (simulate dismissing paywall screen).
     // TODO: at react native merge it will change
-    if (mockOS?.isEnabled && mockOS.goBack) {
-      mockOS.goBack();
+    if (mockOS?.isEnabled) {
+      const canGoBack = mockOS.goBack();
+      if (!canGoBack) {
+        mockOS.navigation('launchscreen');
+      }
     }
-  }, [mockOS, onPaywallClose]);
+  }, [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
@@ -113,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.
@@ -130,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,7 +58,10 @@ export interface PaywallProviderPropsGenerated {
   child: string;
   attributes: {
     style?: PaywallProviderStyleGenerated;
+    title?: string;
+    description?: string;
     scrollable?: boolean;
+    delay?: number;
   };
 }
 

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

@@ -4,7 +4,11 @@
     "type": "PaywallProvider",
     "children": "node",
     "extends": "View",
-    "attributes": {}
+    "attributes": {
+      "title": "title",
+      "description": "description",
+      "delay": "number"
+    }
   },
   "defaults": {
     "style": {
@@ -18,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/PaywallSubscribeButton/PaywallSubscribeButtonProps.generated.ts

@@ -73,6 +73,8 @@ export interface PaywallSubscribeButtonPropsGenerated {
   child: string;
   attributes: {
     style?: PaywallSubscribeButtonStyleGenerated;
+    title?: string;
+    description?: string;
     scrollable?: boolean;
   };
 }

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

@@ -4,7 +4,10 @@
     "type": "PaywallSubscribeButton",
     "children": "string",
     "extends": "Button",
-    "attributes": {}
+    "attributes": {
+      "title": "title",
+      "description": "description"
+    }
   },
   "defaults": {
     "style": {

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

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

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

@@ -5,6 +5,8 @@
     "children": "never",
     "extends": "View",
     "attributes": {
+      "title": "title",
+      "description": "description",
       "selected": "boolean",
       "color": "color",
       "size": "number"

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

@@ -21,6 +21,8 @@ import type { CarouselButtonsComponentProps } from './CarouselButtons/CarouselBu
 import type { CarouselDotsComponentProps } from './CarouselDots/CarouselDotsProps.generated';
 import type { CarouselItemComponentProps } from './CarouselItem/CarouselItemProps.generated';
 import type { CarouselProviderComponentProps } from './CarouselProvider/CarouselProviderProps.generated';
+import type { CountDownComponentProps } from './CountDown/CountDownProps.generated';
+import type { CounterComponentProps } from './Counter/CounterProps.generated';
 import type { ImageComponentProps } from './Image/ImageProps.generated';
 import type { MainComponentProps } from './Main/MainProps.generated';
 import type { OnboardComponentProps } from './Onboard/OnboardProps.generated';
@@ -35,6 +37,7 @@ import type { OnboardSubtitleComponentProps } from './OnboardSubtitle/OnboardSub
 import type { OnboardTitleComponentProps } from './OnboardTitle/OnboardTitleProps.generated';
 import type { PaywallBackgroundComponentProps } from './PaywallBackground/PaywallBackgroundProps.generated';
 import type { PaywallCloseButtonComponentProps } from './PaywallCloseButton/PaywallCloseButtonProps.generated';
+import type { PaywallCounterComponentProps } from './PaywallCounter/PaywallCounterProps.generated';
 import type { PaywallOptionsComponentProps } from './PaywallOptions/PaywallOptionsProps.generated';
 import type { PaywallProviderComponentProps } from './PaywallProvider/PaywallProviderProps.generated';
 import type { PaywallSubscribeButtonComponentProps } from './PaywallSubscribeButton/PaywallSubscribeButtonProps.generated';
@@ -47,8 +50,10 @@ import Button from './Button/Button';
 import Carousel from './Carousel/Carousel';
 import CarouselButtons from './CarouselButtons/CarouselButtons';
 import CarouselDots from './CarouselDots/CarouselDots';
-import CarouselItem from './CarouselItem/CarouselItem';
+import { CarouselItem } from './CarouselItem/CarouselItem';
 import CarouselProvider from './CarouselProvider/CarouselProvider';
+import { CountDown } from './CountDown/CountDown';
+import { Counter } from './Counter/Counter';
 import Image from './Image/Image';
 import Main from './Main/Main';
 import Onboard from './Onboard/Onboard';
@@ -63,12 +68,13 @@ import OnboardSubtitle from './OnboardSubtitle/OnboardSubtitle';
 import OnboardTitle from './OnboardTitle/OnboardTitle';
 import PaywallBackground from './PaywallBackground/PaywallBackground';
 import PaywallCloseButton from './PaywallCloseButton/PaywallCloseButton';
+import { PaywallCounter } from './PaywallCounter/PaywallCounter';
 import PaywallOptions from './PaywallOptions/PaywallOptions';
 import PaywallProvider from './PaywallProvider/PaywallProvider';
 import PaywallSubscribeButton from './PaywallSubscribeButton/PaywallSubscribeButton';
 import RadioButton from './RadioButton/RadioButton';
 import Text from './Text/Text';
-import View from './View/View';
+import { View } from './View/View';
 
 type BuilderNode =
   | (BIconComponentProps['node'] & { type: 'BIcon' })
@@ -79,6 +85,8 @@ type BuilderNode =
   | (CarouselDotsComponentProps['node'] & { type: 'CarouselDots' })
   | (CarouselItemComponentProps['node'] & { type: 'CarouselItem' })
   | (CarouselProviderComponentProps['node'] & { type: 'CarouselProvider' })
+  | (CountDownComponentProps['node'] & { type: 'CountDown' })
+  | (CounterComponentProps['node'] & { type: 'Counter' })
   | (ImageComponentProps['node'] & { type: 'Image' })
   | (MainComponentProps['node'] & { type: 'Main' })
   | (OnboardComponentProps['node'] & { type: 'Onboard' })
@@ -93,6 +101,7 @@ type BuilderNode =
   | (OnboardTitleComponentProps['node'] & { type: 'OnboardTitle' })
   | (PaywallBackgroundComponentProps['node'] & { type: 'PaywallBackground' })
   | (PaywallCloseButtonComponentProps['node'] & { type: 'PaywallCloseButton' })
+  | (PaywallCounterComponentProps['node'] & { type: 'PaywallCounter' })
   | (PaywallOptionsComponentProps['node'] & { type: 'PaywallOptions' })
   | (PaywallProviderComponentProps['node'] & { type: 'PaywallProvider' })
   | (PaywallSubscribeButtonComponentProps['node'] & {
@@ -148,6 +157,10 @@ function RenderNode({ node }: { node: Node }) {
       return <CarouselItem node={normalizedNode} />;
     case 'CarouselProvider':
       return <CarouselProvider node={normalizedNode} />;
+    case 'CountDown':
+      return <CountDown node={normalizedNode} />;
+    case 'Counter':
+      return <Counter node={normalizedNode} />;
     case 'Image':
       return <Image node={normalizedNode} />;
     case 'Main':
@@ -176,6 +189,8 @@ function RenderNode({ node }: { node: Node }) {
       return <PaywallBackground node={normalizedNode} />;
     case 'PaywallCloseButton':
       return <PaywallCloseButton node={normalizedNode} />;
+    case 'PaywallCounter':
+      return <PaywallCounter node={normalizedNode} />;
     case 'PaywallOptions':
       return <PaywallOptions node={normalizedNode} />;
     case 'PaywallProvider':

package/src/build-components/Text/TextProps.generated.ts

@@ -64,6 +64,8 @@ export interface TextPropsGenerated {
   child: string;
   attributes: {
     style?: TextStyleGenerated;
+    title?: string;
+    description?: string;
     scrollable?: boolean;
     adjustsFontSizeToFit?: boolean;
     showEllipsis?: boolean;

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

@@ -5,6 +5,8 @@
     "children": "string",
     "extends": "View",
     "attributes": {
+      "title": "title",
+      "description": "description",
       "adjustsFontSizeToFit": "boolean",
       "showEllipsis": "boolean",
       "style": {
@@ -36,7 +38,7 @@
           "category": "style",
           "specialCategory": null,
           "sort": 2,
-          "preferedScale": "s"
+          "preferredScale": "s"
         },
         "fontFamily": {
           "label": "Font Family",

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

@@ -30,7 +30,7 @@ export function View({ node }: ViewComponentProps) {
     <div
       attribute-name={attributeName}
       attribute-key={attributeKey}
-      style={viewStyle}
+      style={{ ...viewStyle, boxSizing: 'border-box' }}
       className="scroll-container"
     >
       <RenderNode node={node.children as Node} />

package/src/build-components/View/ViewProps.generated.ts

@@ -58,6 +58,8 @@ export interface ViewPropsGenerated {
   child: string;
   attributes: {
     style?: ViewStyleGenerated;
+    title?: string;
+    description?: string;
     scrollable?: boolean;
   };
 }