@developer_tribe/react-builder 1.2.27 → 1.2.29

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

@@ -14,6 +14,9 @@ import { useMockOSContext } from '../../mockOS/context/MockOSContextBase';
 import type { Product } from '../../paywall/types/paywall-types';
 import { useChangeDelayByPaywall } from '../../paywall/hooks/useChangeDelayByPaywall';
 import { useMockOSBackHandler } from '../../paywall/hooks/useMockOSBackHandler';
+import { usePaywallLocalizationParams } from '../../product-base';
+import { useRenderStore } from '../../store';
+import { useLocalize } from '../../hooks/useLocalize';
 
 function PaywallProvider({ node }: PaywallProviderComponentProps) {
   useLogRender('PaywallProvider');
@@ -23,13 +26,20 @@ function PaywallProvider({ node }: PaywallProviderComponentProps) {
   const attributeName = node.sourceType ?? node.type ?? 'PaywallProvider';
   const attributeKey = node.key ?? generatedId;
 
-  const { benefits, products, onPaywallSubscribe, previewMode, selectedKey } =
-    useBuilderParams();
+  const {
+    mockBenefits,
+    mockProducts,
+    onPaywallSubscribe,
+    previewMode,
+    selectedKey,
+  } = useBuilderParams();
   const mockOS = useMockOSContext();
   const benefitLocalizationParams = useMemo(() => {
     const raw =
-      benefits && typeof benefits === 'object' && !Array.isArray(benefits)
-        ? (benefits as Record<string, unknown>)
+      mockBenefits &&
+      typeof mockBenefits === 'object' &&
+      !Array.isArray(mockBenefits)
+        ? (mockBenefits as Record<string, unknown>)
         : {};
 
     const entries = Object.entries(raw).filter(([k]) => k.trim().length > 0);
@@ -45,7 +55,7 @@ function PaywallProvider({ node }: PaywallProviderComponentProps) {
       params[`benefit${idx}`] = value;
     }
     return params;
-  }, [benefits]);
+  }, [mockBenefits]);
 
   const baseStyle = useExtractViewStyle(node);
 
@@ -64,7 +74,7 @@ function PaywallProvider({ node }: PaywallProviderComponentProps) {
   useChangeDelayByPaywall(node, setIsBackAllowed);
   useMockOSBackHandler(isBackAllowed);
   useEffect(() => {
-    const list = Array.isArray(products) ? products : [];
+    const list = Array.isArray(mockProducts) ? mockProducts : [];
     if (list.length === 0) {
       if (selectedProductId) setSelectedProductId('');
       return;
@@ -74,15 +84,38 @@ function PaywallProvider({ node }: PaywallProviderComponentProps) {
     if (!selectedProductId || !exists) {
       setSelectedProductId(list[0]?.productId ?? '');
     }
-  }, [products, selectedProductId]);
+  }, [mockProducts, selectedProductId]);
 
   const selectedProduct = useMemo(() => {
-    const list = Array.isArray(products) ? products : [];
+    const list = Array.isArray(mockProducts) ? mockProducts : [];
     return (
       list.find((p) => p?.productId === selectedProductId) ??
       (list.length > 0 ? list[0] : undefined)
     );
-  }, [products, selectedProductId]);
+  }, [mockProducts, selectedProductId]);
+
+  const device = useRenderStore((s) => s.device);
+  const localize = useLocalize();
+  const platformForExtraction = (
+    device.platform === 'ios' ? 'ios' : 'android'
+  ) as 'ios' | 'android';
+  const detailedProductParams = usePaywallLocalizationParams(
+    selectedProduct,
+    selectedProductId,
+    {
+      platform: platformForExtraction,
+      localize,
+    },
+  );
+
+  console.log('[PaywallProvider] extraction debug', {
+    platform: platformForExtraction,
+    selectedProductId,
+    hasSubscriptionOffers: !!selectedProduct?.subscriptionOffers?.length,
+    subscriptionOffersCount: selectedProduct?.subscriptionOffers?.length ?? 0,
+    detailedProductParams,
+    selectedProduct,
+  });
 
   const handleClose = useCallback(() => {
     if (!isBackAllowed) {
@@ -154,7 +187,7 @@ function PaywallProvider({ node }: PaywallProviderComponentProps) {
 
   const paywallContextValue = useMemo(
     () => ({
-      products: Array.isArray(products) ? products : [],
+      products: Array.isArray(mockProducts) ? mockProducts : [],
       setSelectedProductId,
       selectedProduct,
       onClose: handleClose,
@@ -163,7 +196,7 @@ function PaywallProvider({ node }: PaywallProviderComponentProps) {
       isBackAllowed,
     }),
     [
-      products,
+      mockProducts,
       selectedProduct,
       handleClose,
       handleSubscribe,
@@ -179,7 +212,13 @@ function PaywallProvider({ node }: PaywallProviderComponentProps) {
       style={style}
     >
       <PaywallContext.Provider value={paywallContextValue}>
-        <LocalizationParamsProvider params={benefitLocalizationParams}>
+        <LocalizationParamsProvider
+          params={{
+            ...benefitLocalizationParams,
+            ...detailedProductParams,
+            platform: platformForExtraction,
+          }}
+        >
           <RenderNode node={node.children as Node} />
         </LocalizationParamsProvider>
       </PaywallContext.Provider>

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import type { PriceTagComponentProps } from './PriceTagProps.generated';
+import Text from '../Text/Text';
+import useNode from '../useNode';
+import { useLogRender } from '../../utils/useLogRender';
+import { useLocalizationParams } from '../../hooks/useLocalizationParams';
+
+function PriceTag({ node }: PriceTagComponentProps) {
+  useLogRender('PriceTag');
+  node = useNode(node);
+
+  const params = useLocalizationParams();
+  const hasDiscount = !!params?.promoPrice;
+
+  const hideIfItsNotDiscount =
+    (node.attributes as Record<string, unknown>)?.hideIfItsNotDiscount ?? false;
+
+  if (hideIfItsNotDiscount && !hasDiscount) {
+    return null;
+  }
+
+  return <Text node={node} />;
+}
+
+export default React.memo(PriceTag);

package/src/build-components/PriceTag/PriceTagProps.generated.ts

@@ -0,0 +1,83 @@
+/* AUTO-GENERATED FILE - DO NOT EDIT */
+
+import type { NodeData } from '../../types/Node';
+
+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 type TextDecorationLineOptionType =
+  | 'none'
+  | 'underline'
+  | 'line-through';
+
+export interface PriceTagStyleGenerated {
+  color?: string;
+  fontSize?: string;
+  fontFamily?: string;
+  fontWeight?: string;
+  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;
+  textDecorationLine?: TextDecorationLineOptionType;
+}
+
+export interface PriceTagPropsGenerated {
+  child: string;
+  attributes: {
+    style?: PriceTagStyleGenerated;
+    adjustsFontSizeToFit?: boolean;
+    showEllipsis?: boolean;
+    translateCounter?: number;
+    scrollable?: boolean;
+    showOriginalPricePossible?: boolean;
+    hideIfItsNotDiscount?: boolean;
+  };
+}
+
+export interface PriceTagComponentProps {
+  node: NodeData<PriceTagPropsGenerated['attributes']>;
+}

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

@@ -0,0 +1,53 @@
+{
+  "schemaVersion": 2,
+  "pattern": {
+    "type": "PriceTag",
+    "title": "title",
+    "description": "description",
+    "children": "string",
+    "extends": "Text",
+    "attributes": {
+      "showOriginalPricePossible": "boolean",
+      "hideIfItsNotDiscount": "boolean",
+      "style": {
+        "textDecorationLine": ["none", "underline", "line-through"]
+      }
+    }
+  },
+  "defaults": {
+    "style": {
+      "fontSize": "16@fs",
+      "fontWeight": "700"
+    }
+  },
+  "meta": {
+    "desiredParent": [">PaywallProvider"],
+    "label": "Price Tag",
+    "description": "Displays a price tag text. Extends Text.",
+    "styles": {
+      "textDecorationLine": {
+        "label": "Text Decoration",
+        "description": "Text decoration line style (e.g. line-through for strikethrough).",
+        "category": "style",
+        "specialCategory": null,
+        "sort": 6
+      }
+    },
+    "attributes": {
+      "showOriginalPricePossible": {
+        "label": "Show Original Price Possible",
+        "description": "When enabled, shows the original price if available.",
+        "category": "other",
+        "specialCategory": null,
+        "sort": 1
+      },
+      "hideIfItsNotDiscount": {
+        "label": "Hide If No Discount",
+        "description": "Hides this element when there is no active discount/promo.",
+        "category": "other",
+        "specialCategory": null,
+        "sort": 2
+      }
+    }
+  }
+}

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { PricingComponentProps } from './PricingProps.generated';
+import Text from '../Text/Text';
+import useNode from '../useNode';
+import { useLogRender } from '../../utils/useLogRender';
+
+function Pricing({ node }: PricingComponentProps) {
+  useLogRender('Pricing');
+  node = useNode(node);
+  return <Text node={node} />;
+}
+
+export default React.memo(Pricing);

package/src/build-components/Pricing/PricingProps.generated.ts

@@ -0,0 +1,76 @@
+/* AUTO-GENERATED FILE - DO NOT EDIT */
+
+import type { NodeData } from '../../types/Node';
+
+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 PricingStyleGenerated {
+  color?: string;
+  fontSize?: string;
+  fontFamily?: string;
+  fontWeight?: string;
+  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 PricingPropsGenerated {
+  child: string;
+  attributes: {
+    style?: PricingStyleGenerated;
+    adjustsFontSizeToFit?: boolean;
+    showEllipsis?: boolean;
+    translateCounter?: number;
+    scrollable?: boolean;
+  };
+}
+
+export interface PricingComponentProps {
+  node: NodeData<PricingPropsGenerated['attributes']>;
+}

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

@@ -0,0 +1,25 @@
+{
+  "schemaVersion": 2,
+  "pattern": {
+    "type": "Pricing",
+    "title": "title",
+    "description": "base.builder.paywall.pricing.default.text",
+    "children": "string",
+    "extends": "Text"
+  },
+  "defaults": {
+    "translateCounter": 2,
+    "style": {
+      "textAlign": "center",
+      "fontSize": "12@fs",
+      "fontWeight": "400",
+      "color": "rgba(255,255,255,0.6)"
+    }
+  },
+  "meta": {
+    "desiredParent": [">PaywallProvider"],
+    "label": "Pricing",
+    "description": "Displays pricing details (e.g. promo/trial breakdown). Extends Text.",
+    "styles": {}
+  }
+}

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { PromoComponentProps } from './PromoProps.generated';
+import Text from '../Text/Text';
+import useNode from '../useNode';
+import { useLogRender } from '../../utils/useLogRender';
+
+function Promo({ node }: PromoComponentProps) {
+  useLogRender('Promo');
+  node = useNode(node);
+  return <Text node={node} />;
+}
+
+export default React.memo(Promo);

package/src/build-components/Promo/PromoProps.generated.ts

@@ -0,0 +1,76 @@
+/* AUTO-GENERATED FILE - DO NOT EDIT */
+
+import type { NodeData } from '../../types/Node';
+
+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 PromoStyleGenerated {
+  color?: string;
+  fontSize?: string;
+  fontFamily?: string;
+  fontWeight?: string;
+  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 PromoPropsGenerated {
+  child: string;
+  attributes: {
+    style?: PromoStyleGenerated;
+    adjustsFontSizeToFit?: boolean;
+    showEllipsis?: boolean;
+    translateCounter?: number;
+    scrollable?: boolean;
+  };
+}
+
+export interface PromoComponentProps {
+  node: NodeData<PromoPropsGenerated['attributes']>;
+}

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

@@ -0,0 +1,25 @@
+{
+  "schemaVersion": 2,
+  "pattern": {
+    "type": "Promo",
+    "title": "title",
+    "description": "base.builder.paywall.promo.default.text",
+    "children": "string",
+    "extends": "Text"
+  },
+  "defaults": {
+    "translateCounter": 2,
+    "style": {
+      "textAlign": "center",
+      "fontSize": "12@fs",
+      "fontWeight": "600",
+      "color": "#34D399"
+    }
+  },
+  "meta": {
+    "desiredParent": [">PaywallProvider"],
+    "label": "Promo",
+    "description": "Displays promotional badge/text (e.g. discount percentage). Extends Text.",
+    "styles": {}
+  }
+}

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

@@ -35,11 +35,9 @@ export function RadioButtonBase({
   const sizeHalf = Math.round(size * 0.5);
 
   const paramsContext = useContext(ParamsContext);
-  const otherParams = paramsContext?.otherParams ?? {};
-  const newSelected =
-    otherParams.isSelected !== undefined
-      ? String(otherParams.isSelected).toLowerCase() === 'true'
-      : selected;
+  const { singleProductIsSelected: contextIsSelected } =
+    paramsContext?.otherParams ?? {};
+  const newSelected = contextIsSelected ?? selected;
   return (
     <div style={{ marginLeft: 8, marginRight: 16 }}>
       <div

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

@@ -40,6 +40,9 @@ import type { PaywallCloseButtonComponentProps } from './PaywallCloseButton/Payw
 import type { PaywallOptionsComponentProps } from './PaywallOptions/PaywallOptionsProps.generated';
 import type { PaywallProviderComponentProps } from './PaywallProvider/PaywallProviderProps.generated';
 import type { PaywallSubscribeButtonComponentProps } from './PaywallSubscribeButton/PaywallSubscribeButtonProps.generated';
+import type { PriceTagComponentProps } from './PriceTag/PriceTagProps.generated';
+import type { PricingComponentProps } from './Pricing/PricingProps.generated';
+import type { PromoComponentProps } from './Promo/PromoProps.generated';
 import type { RadioButtonComponentProps } from './RadioButton/RadioButtonProps.generated';
 import type { SeparatorComponentProps } from './Separator/SeparatorProps.generated';
 import type { StatusBarColorComponentProps } from './StatusBarColor/StatusBarColorProps.generated';
@@ -72,6 +75,9 @@ import PaywallCloseButton from './PaywallCloseButton/PaywallCloseButton';
 import PaywallOptions from './PaywallOptions/PaywallOptions';
 import PaywallProvider from './PaywallProvider/PaywallProvider';
 import PaywallSubscribeButton from './PaywallSubscribeButton/PaywallSubscribeButton';
+import PriceTag from './PriceTag/PriceTag';
+import Pricing from './Pricing/Pricing';
+import Promo from './Promo/Promo';
 import RadioButton from './RadioButton/RadioButton';
 import Separator from './Separator/Separator';
 import StatusBarColor from './StatusBarColor/StatusBarColor';
@@ -108,6 +114,9 @@ type BuilderNode =
   | (PaywallSubscribeButtonComponentProps['node'] & {
       type: 'PaywallSubscribeButton';
     })
+  | (PriceTagComponentProps['node'] & { type: 'PriceTag' })
+  | (PricingComponentProps['node'] & { type: 'Pricing' })
+  | (PromoComponentProps['node'] & { type: 'Promo' })
   | (RadioButtonComponentProps['node'] & { type: 'RadioButton' })
   | (SeparatorComponentProps['node'] & { type: 'Separator' })
   | (StatusBarColorComponentProps['node'] & { type: 'StatusBarColor' })
@@ -198,6 +207,12 @@ function RenderNode({ node }: { node: Node }) {
       return <PaywallProvider node={normalizedNode} />;
     case 'PaywallSubscribeButton':
       return <PaywallSubscribeButton node={normalizedNode} />;
+    case 'PriceTag':
+      return <PriceTag node={normalizedNode} />;
+    case 'Pricing':
+      return <Pricing node={normalizedNode} />;
+    case 'Promo':
+      return <Promo node={normalizedNode} />;
     case 'RadioButton':
       return <RadioButton node={normalizedNode} />;
     case 'Separator':

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

@@ -11,7 +11,7 @@ function StatusBarColor({ node }: StatusBarColorComponentProps) {
   useLogRender('StatusBarColor');
   node = useNode(node);
 
-  const { appConfig, projectColors } = useBuilderParams();
+  const { theme, projectColors } = useBuilderParams();
   const setStatusBarOverrideColor = useRenderStore(
     (s) => s.setStatusBarOverrideColor,
   );
@@ -21,7 +21,7 @@ function StatusBarColor({ node }: StatusBarColorComponentProps) {
     | undefined;
   const resolvedColor = parseColor(rawBg, {
     projectColors,
-    theme: appConfig?.theme,
+    theme,
   });
 
   useEffect(() => {

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

@@ -26,11 +26,18 @@ function Text({ node }: TextComponentProps) {
     node,
   });
   const localize = useLocalize({ appConfig });
-
-  const localizedText = useMemo(
-    () => localize(keyOrText),
-    [localize, keyOrText],
-  );
+  const translateCounter = (node.attributes as Record<string, unknown>)
+    ?.translateCounter as number | undefined;
+
+  const localizedText = useMemo(() => {
+    let text = localize(keyOrText);
+    const passes = translateCounter ?? 1;
+    for (let i = 1; i < passes; i++) {
+      text = localize(text);
+    }
+    return text;
+    //Optimzation trade off by readability: could avoid dict lookup on subsequent passes
+  }, [localize, keyOrText, translateCounter]);
 
   const styleBag = node.attributes?.style as unknown as
     | { adjustsFontSizeToFit?: boolean; showEllipsis?: boolean }

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

@@ -18,7 +18,6 @@ export type JustifyContentOptionType =
   | 'space-around'
   | 'space-evenly';
 export type PositionOptionType = 'relative' | 'absolute';
-export type TextAlignOptionType = 'left' | 'center' | 'right' | 'justify';
 
 export interface TextStyleGenerated {
   flexDirection?: FlexDirectionOptionType;
@@ -59,7 +58,6 @@ export interface TextStyleGenerated {
   fontSize?: string;
   fontFamily?: string;
   fontWeight?: string;
-  textAlign?: TextAlignOptionType;
 }
 
 export interface TextPropsGenerated {
@@ -69,6 +67,7 @@ export interface TextPropsGenerated {
     scrollable?: boolean;
     adjustsFontSizeToFit?: boolean;
     showEllipsis?: boolean;
+    translateCounter?: number;
   };
 }
 

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

@@ -9,15 +9,16 @@
     "attributes": {
       "adjustsFontSizeToFit": "boolean",
       "showEllipsis": "boolean",
+      "translateCounter": "number",
       "style": {
         "color": "color",
         "fontSize": "size",
         "fontFamily": "fontFamily",
-        "fontWeight": "fontWeight",
-        "textAlign": ["left", "center", "right", "justify"]
+        "fontWeight": "fontWeight"
       }
     },
     "defaults": {
+      "translateCounter": 1,
       "style": {
         "color": "THEME_COLORS.TEXT",
         "fontSize": "16@fs",