@developer_tribe/react-builder 1.1.0 → 1.2.0

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

@@ -0,0 +1,67 @@
+import React, { useId, useMemo } from 'react';
+import type { PaywallCloseButtonComponentProps } from './PaywallCloseButtonProps.generated';
+import useNode from '../useNode';
+import { useRenderStore } from '../../store';
+import { extractTextStyle } from '../../utils/extractTextStyle';
+import { useLogRender } from '../../utils/useLogRender';
+import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
+import { useMergedStyle } from '../../utils/useMergedStyle';
+import { Icon } from '../../components/Icon.generated';
+import { IconsType } from '../../types/Icons';
+import { usePaywallContext } from '../PaywallProvider/PaywallContext';
+
+function PaywallCloseButton({ node }: PaywallCloseButtonComponentProps) {
+  useLogRender('PaywallCloseButton');
+  node = useNode(node);
+  const { onClose } = usePaywallContext();
+
+  const generatedId = useId();
+  const attributeName =
+    (node as any)?.sourceType ?? node.type ?? 'PaywallCloseButton';
+  const attributeKey = node.key ?? generatedId;
+
+  const { previewMode, current, appConfig, projectColors } = useRenderStore(
+    (s) => ({
+      previewMode: s.previewMode,
+      current: s.current,
+      appConfig: s.appConfig,
+      projectColors: s.projectColors,
+    }),
+  );
+
+  const baseStyle = useMemo(
+    () => extractTextStyle(node, { appConfig, projectColors }),
+    [node, appConfig, projectColors],
+  );
+
+  const isSelected = isNodeSelected({ previewMode, current, node });
+  const style = useMergedStyle(
+    baseStyle,
+    isSelected ? SELECTED_OUTLINE_STYLE : undefined,
+  );
+
+  const iconType = node.attributes?.iconType ?? 'close';
+  const size =
+    node.attributes?.size ?? (style.fontSize as number | undefined) ?? 24;
+  const color =
+    (style.color as string | undefined) ??
+    (node.attributes?.color as string | undefined);
+
+  return (
+    <a
+      attribute-name={attributeName}
+      attribute-key={attributeKey}
+      href="#"
+      onClick={(e) => {
+        e.preventDefault();
+        onClose?.();
+      }}
+      aria-label="Close"
+      style={{ ...style, cursor: 'pointer', textDecoration: 'none' }}
+    >
+      <Icon iconType={iconType as IconsType} size={size} color={color} alt="" />
+    </a>
+  );
+}
+
+export default React.memo(PaywallCloseButton);

package/src/build-components/PaywallCloseButton/PaywallCloseButtonProps.generated.ts

@@ -0,0 +1,74 @@
+/* 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 PaywallCloseButtonPropsGenerated {
+  child: string;
+  attributes: {
+    style?: Record<string, unknown>;
+    iconType?: string;
+    size?: number;
+    strokeWidth?: number;
+    color?: string;
+    fontSize?: string;
+    fontFamily?: string;
+    fontWeight?: string;
+    textAlign?: TextAlignOptionType;
+    adjustsFontSizeToFit?: boolean;
+    showEllipsis?: boolean;
+    scrollable?: boolean;
+    flexDirection?: FlexDirectionOptionType;
+    alignItems?: AlignItemsOptionType;
+    justifyContent?: JustifyContentOptionType;
+    gap?: string;
+    padding?: string;
+    paddingHorizontal?: string;
+    paddingVertical?: string;
+    paddingTop?: string;
+    paddingBottom?: string;
+    paddingLeft?: string;
+    paddingRight?: string;
+    margin?: 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 PaywallCloseButtonComponentProps {
+  node: NodeData<PaywallCloseButtonPropsGenerated['attributes']>;
+}

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

@@ -0,0 +1,26 @@
+{
+  "schemaVersion": 2,
+  "pattern": {
+    "type": "PaywallCloseButton",
+    "children": "never",
+    "extends": "BIcon",
+    "attributes": {}
+  },
+  "meta": {
+    "desiredParent": [
+      ">PaywallProvider"
+    ],
+    "label": "Paywall Close Button",
+    "description": "Paywall Close Button component.",
+    "styles": {}
+  },
+  "defaults": {
+    "iconType": "close",
+    "size": 24,
+    "style": {
+      "flexDirection": "row",
+      "justifyContent": "center",
+      "alignItems": "center"
+    }
+  }
+}

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

@@ -0,0 +1,63 @@
+import { useId, useMemo } from 'react';
+import type { Product } from '../../paywall/types/paywall-types';
+import { extractViewStyle } from '../../utils/extractViewStyle';
+import type { NodeData } from '../../types/Node';
+import { useRenderStore } from '../../store';
+import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
+import { useMergedStyle } from '../../utils/useMergedStyle';
+import { RenderNode } from '../..';
+
+export type OptionsButtonProps = {
+  product: Product;
+  selected: boolean;
+  onPress: (productId: string) => void;
+  node: NodeData<any>;
+};
+
+export function PaywallOptionButton({
+  product,
+  selected,
+  onPress,
+  node,
+}: OptionsButtonProps) {
+  const generatedId = useId();
+  const productId = (product.productId ?? '').trim();
+
+  const { previewMode, current, appConfig, projectColors } = useRenderStore(
+    (s) => ({
+      previewMode: s.previewMode,
+      current: s.current,
+      appConfig: s.appConfig,
+      projectColors: s.projectColors,
+    }),
+  );
+
+  const baseStyle = useMemo(
+    () => extractViewStyle(node, { appConfig, projectColors }),
+    [node, appConfig, projectColors],
+  );
+
+  const isSelected = isNodeSelected({ previewMode, current, node });
+
+  const mergedStyle = useMergedStyle(
+    baseStyle,
+    isSelected ? SELECTED_OUTLINE_STYLE : undefined,
+  );
+  const attributeName = (node as any)?.sourceType ?? node.type ?? 'text';
+  const baseAttributeKey = (node.key ?? generatedId) as string;
+  const attributeKey = productId
+    ? `${baseAttributeKey}:${productId}`
+    : baseAttributeKey;
+  return (
+    <div
+      attribute-name={attributeName}
+      attribute-key={attributeKey}
+      role="button"
+      tabIndex={0}
+      onClick={() => onPress(productId)}
+      style={{ ...mergedStyle, cursor: 'pointer' }}
+    >
+      <RenderNode node={node.children as Node} />
+    </div>
+  );
+}

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

@@ -0,0 +1,93 @@
+import React, { useId, useMemo } from 'react';
+import type { PaywallOptionsComponentProps } from './PaywallOptionsProps.generated';
+import useNode from '../useNode';
+import { useLogRender } from '../../utils/useLogRender';
+import { useBuilderParams } from '../../components/BuilderProvider';
+import { ParamsProvider } from '../../components/ParamsProvider';
+import type { Product } from '../../paywall/types/paywall-types';
+import { PaywallOptionButton } from './PaywallOptionButton';
+import { usePaywallOptionParamsFactory } from './usePaywallOptionParamsFactory';
+import { usePaywallContext } from '../PaywallProvider/PaywallContext';
+
+function parseNumberLike(value: unknown): number | undefined {
+  if (value === null || value === undefined) return undefined;
+  if (typeof value === 'number' && Number.isFinite(value)) return value;
+  if (typeof value !== 'string') return undefined;
+  const trimmed = value.trim();
+  if (!trimmed) return undefined;
+  const normalized = trimmed.replace(',', '.');
+  const parsed = Number.parseFloat(normalized);
+  if (!Number.isFinite(parsed)) return undefined;
+  return parsed;
+}
+
+function compareProducts(
+  a: Product,
+  b: Product,
+  aIndex: number,
+  bIndex: number,
+): number {
+  const aPrice = parseNumberLike(a.price);
+  const bPrice = parseNumberLike(b.price);
+  if (aPrice !== undefined && bPrice !== undefined && aPrice !== bPrice) {
+    return aPrice - bPrice;
+  }
+
+  const aTitle = (a.title ?? '').trim();
+  const bTitle = (b.title ?? '').trim();
+  if (aTitle && bTitle && aTitle !== bTitle)
+    return aTitle.localeCompare(bTitle);
+  if (aTitle && !bTitle) return -1;
+  if (!aTitle && bTitle) return 1;
+
+  const aId = (a.productId ?? '').trim();
+  const bId = (b.productId ?? '').trim();
+  if (aId !== bId) return aId.localeCompare(bId);
+
+  // Stable fallback
+  return aIndex - bIndex;
+}
+
+function PaywallOptions({ node }: PaywallOptionsComponentProps) {
+  useLogRender('PaywallOptions');
+  node = useNode(node);
+  const { products } = useBuilderParams();
+  const { selectedProductId, setSelectedProductId } = usePaywallContext();
+  const getParamsForProduct = usePaywallOptionParamsFactory();
+
+  const sortedProducts = useMemo(() => {
+    const list = Array.isArray(products) ? products : [];
+    return list
+      .map((p, idx) => ({ p, idx }))
+      .sort((a, b) => compareProducts(a.p, b.p, a.idx, b.idx))
+      .map(({ p }) => p);
+  }, [products]);
+
+  return (
+    <>
+      {sortedProducts.map((p, index) => {
+        const productId = p.productId || `${index}`;
+        const isSelected = selectedProductId === productId;
+        const { localizationParams, otherParams } = getParamsForProduct(p, {
+          isSelected,
+        });
+        return (
+          <ParamsProvider
+            key={productId}
+            localizationParams={localizationParams}
+            otherParams={otherParams}
+          >
+            <PaywallOptionButton
+              node={node}
+              product={p}
+              selected={isSelected}
+              onPress={setSelectedProductId}
+            />
+          </ParamsProvider>
+        );
+      })}
+    </>
+  );
+}
+
+export default React.memo(PaywallOptions);

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

@@ -0,0 +1,63 @@
+/* AUTO-GENERATED FILE - DO NOT EDIT */
+
+import type { NodeData } from '../../types/Node';
+
+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 PaywallOptionsPropsGenerated {
+  child: string;
+  attributes: {
+    style?: Record<string, unknown>;
+    scrollable?: boolean;
+    flexDirection?: FlexDirectionOptionType;
+    alignItems?: AlignItemsOptionType;
+    justifyContent?: JustifyContentOptionType;
+    gap?: string;
+    padding?: string;
+    paddingHorizontal?: string;
+    paddingVertical?: string;
+    paddingTop?: string;
+    paddingBottom?: string;
+    paddingLeft?: string;
+    paddingRight?: string;
+    margin?: 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 PaywallOptionsComponentProps {
+  node: NodeData<PaywallOptionsPropsGenerated['attributes']>;
+}

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

@@ -0,0 +1,25 @@
+{
+  "schemaVersion": 2,
+  "pattern": {
+    "type": "PaywallOptions",
+    "extends": "View",
+    "children": "node",
+    "attributes": {}
+  },
+  "meta": {
+    "desiredParent": [
+      ">PaywallProvider"
+    ],
+    "label": "Paywall Options",
+    "description": "Paywall options selector component.",
+    "styles": {}
+  },
+  "defaults": {
+    "style": {
+      "flexDirection": "row",
+      "justifyContent": "space-between",
+      "alignItems": "center",
+      "minHeight": "60px"
+    }
+  }
+}

package/src/build-components/PaywallOptions/usePaywallOptionParamsFactory.ts

@@ -0,0 +1,42 @@
+import { useCallback } from 'react';
+import { useParams } from '../../hooks/useParams';
+import type { Product } from '../../paywall/types/paywall-types';
+import {
+  LocalizationParams,
+  OtherParams,
+} from '../../components/ParamsProvider';
+
+type PaywallOptionParams = {
+  localizationParams: LocalizationParams;
+  otherParams: OtherParams;
+};
+
+export function usePaywallOptionParamsFactory() {
+  const {
+    localizationParams: baseLocalizationParams,
+    otherParams: baseOtherParams,
+  } = useParams();
+
+  return useCallback(
+    (
+      p: Product,
+      { isSelected }: { isSelected: boolean },
+    ): PaywallOptionParams => {
+      const derived = {
+        price: String(p.price ?? ''),
+        productTitle: String(p.title ?? ''),
+        productDescription: String(p.description ?? ''),
+        productCurreny: String(p.currency ?? ''),
+        localizedPrice: (p.price ?? '') + ' ' + (p.currency ?? ''), //TODO: use hook for this
+        productId: String(p.productId ?? ''),
+        productSelected: isSelected ? 'true' : 'false',
+      };
+
+      return {
+        localizationParams: { ...baseLocalizationParams, ...derived },
+        otherParams: { ...baseOtherParams, isSelected },
+      };
+    },
+    [baseLocalizationParams, baseOtherParams],
+  );
+}

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

@@ -0,0 +1,25 @@
+import React, { createContext, useContext } from 'react';
+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>;
+};
+
+export const PaywallContext = createContext<PaywallContextValue | undefined>(
+  undefined,
+);
+
+export function usePaywallContext(): PaywallContextValue {
+  return (
+    useContext(PaywallContext) ?? {
+      products: [],
+      selectedProductId: '',
+      setSelectedProductId: () => {},
+    }
+  );
+}

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

@@ -0,0 +1,175 @@
+import React, { useCallback, useEffect, useId, useMemo, useState } from 'react';
+import type { PaywallProviderComponentProps } from './PaywallProviderProps.generated';
+import RenderNode from '../RenderNode.generated';
+import type { Node } from '../../types/Node';
+import useNode from '../useNode';
+import { useRenderStore } from '../../store';
+import { extractViewStyle } from '../../utils/extractViewStyle';
+import { useLogRender } from '../../utils/useLogRender';
+import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
+import { useMergedStyle } from '../../utils/useMergedStyle';
+import { LocalizationParamsProvider } from '../../components/LocalizationParamsProvider';
+import { useBuilderParams } from '../../components/BuilderProvider';
+import { PaywallContext } from './PaywallContext';
+import { useMockOSContext } from '../../mockOS/context/MockOSContextBase';
+
+function PaywallProvider({ node }: PaywallProviderComponentProps) {
+  useLogRender('PaywallProvider');
+  node = useNode(node);
+
+  const generatedId = useId();
+  const attributeName =
+    (node as any)?.sourceType ?? node.type ?? 'PaywallProvider';
+  const attributeKey = node.key ?? generatedId;
+
+  const { previewMode, current, appConfig, projectColors } = useRenderStore(
+    (s) => ({
+      previewMode: s.previewMode,
+      current: s.current,
+      appConfig: s.appConfig,
+      projectColors: s.projectColors,
+    }),
+  );
+
+  const { benefits, products, onPaywallClose, onPaywallSubscribe } =
+    useBuilderParams();
+  const mockOS = useMockOSContext();
+  const benefitLocalizationParams = useMemo(() => {
+    const raw =
+      benefits && typeof benefits === 'object' && !Array.isArray(benefits)
+        ? (benefits as Record<string, unknown>)
+        : {};
+
+    const entries = Object.entries(raw).filter(([k]) => k.trim().length > 0);
+
+    const params: Record<string, string> = Object.fromEntries(
+      entries.map(([k, v]) => [k.trim(), String(v)]),
+    );
+
+    for (let i = 0; i < entries.length; i += 1) {
+      const [, rawValue] = entries[i];
+      const value = String(rawValue);
+      const idx = i + 1;
+      params[`benefit${idx}`] = value;
+    }
+    return params;
+  }, [benefits]);
+
+  const baseStyle = useMemo(
+    () => extractViewStyle(node, { appConfig, projectColors }),
+    [node, appConfig, projectColors],
+  );
+
+  const isSelected = isNodeSelected({ previewMode, current, node });
+  const style = useMergedStyle(
+    baseStyle,
+    isSelected ? SELECTED_OUTLINE_STYLE : undefined,
+  );
+
+  const [selectedProductId, setSelectedProductId] = useState<string>('');
+  useEffect(() => {
+    const list = Array.isArray(products) ? products : [];
+    if (list.length === 0) {
+      if (selectedProductId) setSelectedProductId('');
+      return;
+    }
+
+    const exists = list.some((p) => p?.productId === selectedProductId);
+    if (!selectedProductId || !exists) {
+      setSelectedProductId(list[0]?.productId ?? '');
+    }
+  }, [products, selectedProductId]);
+
+  const selectedProduct = useMemo(() => {
+    const list = Array.isArray(products) ? products : [];
+    return (
+      list.find((p) => p?.productId === selectedProductId) ??
+      (list.length > 0 ? list[0] : undefined)
+    );
+  }, [products, selectedProductId]);
+
+  const handleClose = useCallback(() => {
+    // Host app override wins.
+    if (onPaywallClose) {
+      onPaywallClose();
+    }
+
+    // Default: in MockOS go back (simulate dismissing paywall screen).
+    // TODO: at react native merge it will change
+    if (mockOS?.isEnabled && mockOS.goBack) {
+      mockOS.goBack();
+    }
+  }, [mockOS, onPaywallClose]);
+
+  const handleSubscribe = useCallback(
+    async (product?: { productId?: string }) => {
+      // Host app override wins.
+      if (onPaywallSubscribe) {
+        const result = onPaywallSubscribe(product as any);
+        const ok =
+          result instanceof Promise
+            ? await result
+            : result === true
+              ? true
+              : false;
+
+        // If host signals success, go back (OS return).
+        if (ok && mockOS?.isEnabled) {
+          mockOS.goBack?.();
+        }
+        return;
+      }
+
+      // Default: in MockOS show a native-like subscription prompt.
+      // TODO: at react native merge it will change
+      const productId = product?.productId;
+      if (
+        mockOS?.isEnabled &&
+        productId &&
+        mockOS.requestSubscriptionPurchase
+      ) {
+        const ok = await mockOS.requestSubscriptionPurchase(productId);
+        if (ok) {
+          // On success, go back (simulate dismissing paywall after purchase).
+          // TODO: at react native merge it will change
+          mockOS.goBack?.();
+        }
+      }
+    },
+    [mockOS, onPaywallSubscribe],
+  );
+
+  const paywallContextValue = useMemo(
+    () => ({
+      products: Array.isArray(products) ? products : [],
+      selectedProductId,
+      setSelectedProductId,
+      selectedProduct,
+      onClose: handleClose,
+      onSubscribe: handleSubscribe as any,
+    }),
+    [
+      products,
+      selectedProductId,
+      selectedProduct,
+      handleClose,
+      handleSubscribe,
+    ],
+  );
+
+  return (
+    <div
+      attribute-name={attributeName}
+      attribute-key={attributeKey}
+      style={style}
+    >
+      <PaywallContext.Provider value={paywallContextValue}>
+        <LocalizationParamsProvider params={benefitLocalizationParams}>
+          <RenderNode node={node.children as Node} />
+        </LocalizationParamsProvider>
+      </PaywallContext.Provider>
+    </div>
+  );
+}
+
+export default React.memo(PaywallProvider);