@developer_tribe/react-builder 1.2.27 → 1.2.29

package/src/attribute-analyser/style/native/useExtractImageStyle.ts

@@ -7,7 +7,6 @@ import type {
 } from '../../../build-components/Image/ImageProps.generated';
 import { useBuilderParams } from '../../../components/BuilderProvider';
 import { extractImageStyleNative } from '../../../utils/extractImageStyle';
-import { defaultAppConfig } from '../../../types/PreviewConfig';
 import {
   getStyleBag,
   toAttributeRecord,
@@ -23,9 +22,7 @@ export function useExtractImageStyle<
   style: ImageStyle;
   other: Omit<T, StyleAttrKey> & { resizeMode?: ResizeModeOptionType };
 } {
-  const { appConfig, projectColors: builderProjectColors } = useBuilderParams();
-  const theme = appConfig?.theme ?? defaultAppConfig.theme;
-  const projectColors = builderProjectColors;
+  const { theme, projectColors } = useBuilderParams();
 
   return useMemo(() => {
     // extractImageStyleNative returns Record<string, unknown> that may include resizeMode.

package/src/attribute-analyser/style/native/useExtractTextStyle.ts

@@ -2,7 +2,6 @@ import { useMemo } from 'react';
 import type { TextStyle } from 'react-native';
 import type { NodeData } from '../../../types/Node';
 import type { TextPropsGenerated } from '../../../build-components/Text/TextProps.generated';
-import { defaultAppConfig } from '../../../types/PreviewConfig';
 import { useBuilderParams } from '../../../components/BuilderProvider';
 import { extractTextStyleNative } from '../../../utils/extractTextStyle';
 import {
@@ -21,20 +20,12 @@ export function useExtractTextStyle<T extends TextPropsGenerated['attributes']>(
     showEllipsis?: boolean;
   };
 } {
-  const {
-    appConfig: builderAppConfig,
-    projectColors: builderProjectColors,
-    fonts: builderFonts,
-  } = useBuilderParams();
-
-  const appConfig = builderAppConfig ?? defaultAppConfig;
-  const projectColors = builderProjectColors;
-  const fonts = builderFonts;
+  const { theme, projectColors, fonts } = useBuilderParams();
 
   return useMemo(
     () => {
       const style = extractTextStyleNative(node, {
-        appConfig,
+        theme,
         projectColors,
         fonts,
       });
@@ -60,6 +51,6 @@ export function useExtractTextStyle<T extends TextPropsGenerated['attributes']>(
       };
     },
     // fonts is intentionally included: extractTextStyleNative resolves weights via font definitions.
-    [node, appConfig, projectColors, fonts],
+    [node, theme, projectColors, fonts],
   );
 }

package/src/attribute-analyser/style/native/useExtractViewStyle.ts

@@ -4,7 +4,6 @@ import type { NodeData } from '../../../types/Node';
 import type { ViewPropsGenerated } from '../../../build-components/View/ViewProps.generated';
 import { useBuilderParams } from '../../../components/BuilderProvider';
 import { extractViewStyleNative } from '../../../utils/extractViewStyle';
-import { defaultAppConfig } from '../../../types/PreviewConfig';
 import {
   getStyleBag,
   toAttributeRecord,
@@ -18,9 +17,7 @@ export function useExtractViewStyle<T extends ViewPropsGenerated['attributes']>(
   style: ViewStyle;
   other: Omit<T, StyleAttrKey> & { scrollable?: boolean };
 } {
-  const { appConfig, projectColors: builderProjectColors } = useBuilderParams();
-  const theme = appConfig?.theme ?? defaultAppConfig.theme;
-  const projectColors = builderProjectColors;
+  const { theme, projectColors } = useBuilderParams();
 
   return useMemo(() => {
     const style = extractViewStyleNative(node, { theme, projectColors });

package/src/attribute-analyser/style/web/useExtractImageStyle.ts

@@ -4,14 +4,11 @@ import type { NodeData } from '../../../types/Node';
 import type { ImagePropsGenerated } from '../../../build-components/Image/ImageProps.generated';
 import { useBuilderParams } from '../../../components/BuilderProvider';
 import { extractImageStyle } from '../../../utils/extractImageStyle';
-import { defaultAppConfig } from '../../../types/PreviewConfig';
 
 export function useExtractImageStyle<
   T extends ImagePropsGenerated['attributes'],
 >(node: NodeData<T>): CSSProperties {
-  const { appConfig, projectColors: builderProjectColors } = useBuilderParams();
-  const theme = appConfig?.theme ?? defaultAppConfig.theme;
-  const projectColors = builderProjectColors;
+  const { theme, projectColors } = useBuilderParams();
 
   return useMemo(
     () => extractImageStyle(node, { theme, projectColors }),

package/src/attribute-analyser/style/web/useExtractTextStyle.ts

@@ -2,7 +2,6 @@ import { useMemo } from 'react';
 import type { CSSProperties } from 'react';
 import type { NodeData } from '../../../types/Node';
 import type { TextPropsGenerated } from '../../../build-components/Text/TextProps.generated';
-import { defaultAppConfig } from '../../../types/PreviewConfig';
 import { useBuilderParams } from '../../../components/BuilderProvider';
 import { extractTextStyle } from '../../../utils/extractTextStyle';
 
@@ -10,25 +9,17 @@ export function useExtractTextStyle<T extends TextPropsGenerated['attributes']>(
   node: NodeData<T>,
   directlyTextStyle = false,
 ): CSSProperties {
-  const {
-    appConfig: builderAppConfig,
-    projectColors: builderProjectColors,
-    fonts: builderFonts,
-  } = useBuilderParams();
-
-  const appConfig = builderAppConfig ?? defaultAppConfig;
-  const projectColors = builderProjectColors;
-  const fonts = builderFonts;
+  const { theme, projectColors, fonts } = useBuilderParams();
 
   return useMemo(
     () =>
       extractTextStyle(node, {
-        appConfig,
+        theme,
         projectColors,
         fonts,
         directlyTextStyle,
       }),
     // fonts is intentionally included: extractTextStyle resolves weights via font definitions.
-    [node, appConfig, projectColors, fonts, directlyTextStyle],
+    [node, theme, projectColors, fonts, directlyTextStyle],
   );
 }

package/src/attribute-analyser/style/web/useExtractViewStyle.ts

@@ -4,14 +4,11 @@ import type { NodeData } from '../../../types/Node';
 import type { ViewPropsGenerated } from '../../../build-components/View/ViewProps.generated';
 import { useBuilderParams } from '../../../components/BuilderProvider';
 import { extractViewStyle } from '../../../utils/extractViewStyle';
-import { defaultAppConfig } from '../../../types/PreviewConfig';
 
 export function useExtractViewStyle<T extends ViewPropsGenerated['attributes']>(
   node: NodeData<T>,
 ): CSSProperties {
-  const { appConfig, projectColors: builderProjectColors } = useBuilderParams();
-  const theme = appConfig?.theme ?? defaultAppConfig.theme;
-  const projectColors = builderProjectColors;
+  const { theme, projectColors } = useBuilderParams();
 
   return useMemo(
     () => extractViewStyle(node, { theme, projectColors }),

package/src/attributes-editor/useAttributesEditorModel.ts

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import type { NodeData, NodeDefaultAttribute } from '../types/Node';
-import type { ProjectColorTokenMap, ProjectColors } from '../types/Project';
+import type { ProjectColors } from '../types/Project';
 import type { ViewPropsGenerated } from '../build-components/View/ViewProps.generated';
 import useNode from '../build-components/useNode';
 import { isNodeString } from '../utils/analyseNode';
@@ -32,51 +32,6 @@ function isPlainObject(value: unknown): value is Record<string, unknown> {
   return typeof value === 'object' && value !== null && !Array.isArray(value);
 }
 
-function buildProjectColorsFallback(
-  appConfig: Record<string, unknown> | undefined | null,
-): ProjectColors | undefined {
-  const addColor = (collection: Set<string>, value?: string) => {
-    if (typeof value !== 'string') return;
-    const trimmed = value.trim();
-    if (!trimmed) return;
-    collection.add(trimmed);
-  };
-
-  const fallback = new Set<string>();
-  const screenStyle = (
-    appConfig as {
-      screenStyle?: {
-        light?: Record<string, string>;
-        dark?: Record<string, string>;
-      };
-    }
-  )?.screenStyle;
-  const styles = [screenStyle?.light, screenStyle?.dark].filter(
-    Boolean,
-  ) as Array<{
-    backgroundColor?: string;
-    color?: string;
-    seperatorColor?: string;
-  }>;
-  styles.forEach((style) => {
-    ['backgroundColor', 'color', 'seperatorColor'].forEach((key) => {
-      const value = style?.[key as keyof typeof style];
-      addColor(fallback, value);
-    });
-  });
-
-  if (fallback.size === 0) {
-    return undefined;
-  }
-
-  const fallbackRecord: ProjectColorTokenMap = {};
-  Array.from(fallback).forEach((color, index) => {
-    fallbackRecord[`FALLBACK_${index + 1}`] = color;
-  });
-
-  return { STATIC_COLORS: fallbackRecord };
-}
-
 export function useAttributesEditorModel({
   node,
   onChange,
@@ -191,12 +146,10 @@ export function useAttributesEditorModel({
     [attributes, isStyleKeyForRead, styleBag],
   );
 
-  const projectColorsForPicker = useMemo<ProjectColors | undefined>(() => {
-    if (projectColors) return projectColors;
-    return buildProjectColorsFallback(
-      appConfig as unknown as Record<string, unknown>,
-    );
-  }, [appConfig, projectColors]);
+  const projectColorsForPicker = useMemo<ProjectColors | undefined>(
+    () => projectColors,
+    [projectColors],
+  );
 
   const viewAttributes = useMemo<
     Partial<ViewPropsGenerated['attributes']> | undefined

package/src/build-components/BIcon/BIconProps.generated.ts

@@ -2,7 +2,6 @@
 
 import type { NodeData } from '../../types/Node';
 
-export type TextAlignOptionType = 'left' | 'center' | 'right' | 'justify';
 export type FlexDirectionOptionType = 'row' | 'column';
 export type FlexWrapOptionType = 'nowrap' | 'wrap' | 'wrap-reverse';
 export type AlignItemsOptionType =
@@ -25,7 +24,6 @@ export interface BIconStyleGenerated {
   fontSize?: string;
   fontFamily?: string;
   fontWeight?: string;
-  textAlign?: TextAlignOptionType;
   flexDirection?: FlexDirectionOptionType;
   flexWrap?: FlexWrapOptionType;
   alignItems?: AlignItemsOptionType;
@@ -68,6 +66,7 @@ export interface BIconPropsGenerated {
     style?: BIconStyleGenerated;
     adjustsFontSizeToFit?: boolean;
     showEllipsis?: boolean;
+    translateCounter?: number;
     scrollable?: boolean;
     iconType?: string;
     size?: number;

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

@@ -9,7 +9,6 @@ import { useMergedStyle } from '../../utils/useMergedStyle';
 import { parseColor } from '../../utils/parseColor';
 import { parseSize } from '../../size-matters';
 import { useBuilderParams } from '../../components/BuilderProvider';
-import { defaultAppConfig } from '../../types/PreviewConfig';
 import { getStyleBag, toAttributeRecord } from '../../utils/attributeStyle';
 
 function CarouselDots({ node }: CarouselDotsComponentProps) {
@@ -52,29 +51,23 @@ function CarouselDots({ node }: CarouselDotsComponentProps) {
     (stylesBag?.dot_thickness as string | number | undefined) ??
     (attrRecord.dot_thickness as string | number | undefined);
 
-  const { appConfig: builderAppConfig, projectColors } = useBuilderParams();
-  const appConfig = builderAppConfig ?? defaultAppConfig;
-  const isDark = appConfig.theme === 'dark';
+  const { theme, projectColors } = useBuilderParams();
+  const isDark = theme === 'dark';
   const inactiveDotColorBase = isDark
     ? GHOST_DOT_DARK_COLOR
     : GHOST_DOT_LIGHT_COLOR;
 
   const resolvedActiveDotColor = useMemo(
-    () => parseColor(activeDotColor, { theme: appConfig.theme, projectColors }),
-    [activeDotColor, appConfig.theme, projectColors],
+    () => parseColor(activeDotColor, { theme, projectColors }),
+    [activeDotColor, theme, projectColors],
   );
   const resolvedInactiveDotColor = useMemo(() => {
     const parsed = parseColor(inactiveDotColorOverride, {
-      theme: appConfig.theme,
+      theme,
       projectColors,
     });
     return parsed ?? inactiveDotColorBase;
-  }, [
-    inactiveDotColorBase,
-    inactiveDotColorOverride,
-    appConfig.theme,
-    projectColors,
-  ]);
+  }, [inactiveDotColorBase, inactiveDotColorOverride, theme, projectColors]);
 
   const dotSizeCss = useMemo(() => {
     const parsed = parseSize(dotThicknessRaw);

package/src/build-components/CountDown/CountDownProps.generated.ts

@@ -24,7 +24,6 @@ export interface CountDownStyleGenerated {
   fontSize?: string;
   fontFamily?: string;
   fontWeight?: string;
-  textAlign?: never;
   flexDirection?: FlexDirectionOptionType;
   flexWrap?: FlexWrapOptionType;
   alignItems?: AlignItemsOptionType;
@@ -59,6 +58,7 @@ export interface CountDownStyleGenerated {
   left?: string;
   right?: string;
   zIndex?: number;
+  textAlign?: never;
 }
 
 export interface CountDownPropsGenerated {
@@ -67,6 +67,7 @@ export interface CountDownPropsGenerated {
     style?: CountDownStyleGenerated;
     adjustsFontSizeToFit?: boolean;
     showEllipsis?: boolean;
+    translateCounter?: number;
     scrollable?: boolean;
     count?: number;
   };

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

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

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

@@ -18,8 +18,7 @@ function OnboardButton({ node }: OnboardButtonComponentProps) {
   node = useNode(node);
   const attributeName = node.sourceType ?? node.type ?? 'OnboardButton';
   const { emblaApi } = useContext(onboardContext) ?? {};
-  const { appConfig, projectColors } = useBuilderParams();
-  const theme = appConfig?.theme;
+  const { theme, projectColors, appConfig } = useBuilderParams();
 
   const context = useMockOSContext();
   const mockPermissionManager = useMockPermission(context);

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

@@ -9,7 +9,6 @@ import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
 import { useMergedStyle } from '../../utils/useMergedStyle';
 import { parseColor } from '../../utils/parseColor';
 import { parseSize } from '../../size-matters';
-import { defaultAppConfig } from '../../types/PreviewConfig';
 import { getStyleBag, toAttributeRecord } from '../../utils/attributeStyle';
 
 function OnboardDot({ node }: OnboardDotComponentProps) {
@@ -29,14 +28,8 @@ function OnboardDot({ node }: OnboardDotComponentProps) {
     'normal_dot';
   const GHOST_DOT_DARK_COLOR = '#E4E5E7';
   const GHOST_DOT_LIGHT_COLOR = '#F7F7F9';
-  const {
-    previewMode,
-    selectedKey,
-    appConfig: builderAppConfig,
-    projectColors,
-  } = useBuilderParams();
-  const appConfig = builderAppConfig ?? defaultAppConfig;
-  const isDark = appConfig.theme === 'dark';
+  const { previewMode, selectedKey, theme, projectColors } = useBuilderParams();
+  const isDark = theme === 'dark';
 
   // OnboardDot specific attributes
   const inactiveDotColor = isDark
@@ -53,21 +46,16 @@ function OnboardDot({ node }: OnboardDotComponentProps) {
     (stylesBag?.active_dot_color as string | undefined) ??
     (attrRecord.active_dot_color as string | undefined);
   const resolvedActiveDotColor = useMemo(
-    () => parseColor(activeDotColor, { theme: appConfig.theme, projectColors }),
-    [activeDotColor, appConfig.theme, projectColors],
+    () => parseColor(activeDotColor, { theme, projectColors }),
+    [activeDotColor, theme, projectColors],
   );
   const resolvedInactiveDotColor = useMemo(() => {
     const parsed = parseColor(inactiveDotColorOverride, {
-      theme: appConfig.theme,
+      theme,
       projectColors,
     });
     return parsed ?? inactiveDotColor;
-  }, [
-    inactiveDotColor,
-    inactiveDotColorOverride,
-    appConfig.theme,
-    projectColors,
-  ]);
+  }, [inactiveDotColor, inactiveDotColorOverride, theme, projectColors]);
 
   const extractedStyle = useExtractViewStyle(node);
   const baseStyle = useMemo(() => {

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

@@ -97,15 +97,17 @@ function OnboardFooter({ node }: OnboardFooterComponentProps) {
   const attributeName = node.sourceType ?? node.type ?? 'OnboardFooter';
   const {
     appConfig: builderAppConfig,
+    theme,
+    defaultLanguage,
     previewMode,
     selectedKey,
     projectColors: builderProjectColors,
   } = useBuilderParams();
   const appConfig = builderAppConfig ?? defaultAppConfig;
   const projectColors = builderProjectColors;
-  const { localication, defaultLanguage, theme } = appConfig;
-  const t = (key?: string) =>
-    key ? (localication?.[defaultLanguage ?? 'en']?.[key] ?? key) : '';
+  const { localication } = appConfig;
+  const lang = defaultLanguage ?? 'en';
+  const t = (key?: string) => (key ? (localication?.[lang]?.[key] ?? key) : '');
 
   const attrs = node?.attributes;
   const attrRecord = toAttributeRecord(attrs);

package/src/build-components/OnboardFooter/OnboardFooterProps.generated.ts

@@ -2,7 +2,6 @@
 
 import type { NodeData } from '../../types/Node';
 
-export type TextAlignOptionType = 'left' | 'center' | 'right' | 'justify';
 export type FlexDirectionOptionType = 'row' | 'column';
 export type FlexWrapOptionType = 'nowrap' | 'wrap' | 'wrap-reverse';
 export type AlignItemsOptionType =
@@ -25,7 +24,6 @@ export interface OnboardFooterStyleGenerated {
   fontSize?: string;
   fontFamily?: string;
   fontWeight?: string;
-  textAlign?: TextAlignOptionType;
   flexDirection?: FlexDirectionOptionType;
   flexWrap?: FlexWrapOptionType;
   alignItems?: AlignItemsOptionType;
@@ -68,6 +66,7 @@ export interface OnboardFooterPropsGenerated {
     style?: OnboardFooterStyleGenerated;
     adjustsFontSizeToFit?: boolean;
     showEllipsis?: boolean;
+    translateCounter?: number;
     scrollable?: boolean;
     textLocalizationKey?: string;
     linkedWordFirstLocalizationKey?: string;

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

@@ -4,7 +4,7 @@
     "type": "OnboardFooter",
     "title": "title",
     "description": "description",
-    "children": "node",
+    "children": "never",
     "extends": "Text",
     "attributes": {
       "textLocalizationKey": "string",

package/src/build-components/OnboardSubtitle/OnboardSubtitleProps.generated.ts

@@ -2,7 +2,6 @@
 
 import type { NodeData } from '../../types/Node';
 
-export type TextAlignOptionType = 'left' | 'center' | 'right' | 'justify';
 export type FlexDirectionOptionType = 'row' | 'column';
 export type FlexWrapOptionType = 'nowrap' | 'wrap' | 'wrap-reverse';
 export type AlignItemsOptionType =
@@ -25,7 +24,6 @@ export interface OnboardSubtitleStyleGenerated {
   fontSize?: string;
   fontFamily?: string;
   fontWeight?: string;
-  textAlign?: TextAlignOptionType;
   flexDirection?: FlexDirectionOptionType;
   flexWrap?: FlexWrapOptionType;
   alignItems?: AlignItemsOptionType;
@@ -68,6 +66,7 @@ export interface OnboardSubtitlePropsGenerated {
     style?: OnboardSubtitleStyleGenerated;
     adjustsFontSizeToFit?: boolean;
     showEllipsis?: boolean;
+    translateCounter?: number;
     scrollable?: boolean;
   };
 }

package/src/build-components/OnboardTitle/OnboardTitleProps.generated.ts

@@ -2,7 +2,6 @@
 
 import type { NodeData } from '../../types/Node';
 
-export type TextAlignOptionType = 'left' | 'center' | 'right' | 'justify';
 export type FlexDirectionOptionType = 'row' | 'column';
 export type FlexWrapOptionType = 'nowrap' | 'wrap' | 'wrap-reverse';
 export type AlignItemsOptionType =
@@ -25,7 +24,6 @@ export interface OnboardTitleStyleGenerated {
   fontSize?: string;
   fontFamily?: string;
   fontWeight?: string;
-  textAlign?: TextAlignOptionType;
   flexDirection?: FlexDirectionOptionType;
   flexWrap?: FlexWrapOptionType;
   alignItems?: AlignItemsOptionType;
@@ -68,6 +66,7 @@ export interface OnboardTitlePropsGenerated {
     style?: OnboardTitleStyleGenerated;
     adjustsFontSizeToFit?: boolean;
     showEllipsis?: boolean;
+    translateCounter?: number;
     scrollable?: boolean;
   };
 }

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

@@ -2,7 +2,6 @@
 
 import type { NodeData } from '../../types/Node';
 
-export type TextAlignOptionType = 'left' | 'center' | 'right' | 'justify';
 export type FlexDirectionOptionType = 'row' | 'column';
 export type FlexWrapOptionType = 'nowrap' | 'wrap' | 'wrap-reverse';
 export type AlignItemsOptionType =
@@ -25,7 +24,6 @@ export interface PaywallCloseButtonStyleGenerated {
   fontSize?: string;
   fontFamily?: string;
   fontWeight?: string;
-  textAlign?: TextAlignOptionType;
   flexDirection?: FlexDirectionOptionType;
   flexWrap?: FlexWrapOptionType;
   alignItems?: AlignItemsOptionType;
@@ -71,6 +69,7 @@ export interface PaywallCloseButtonPropsGenerated {
     strokeWidth?: number;
     adjustsFontSizeToFit?: boolean;
     showEllipsis?: boolean;
+    translateCounter?: number;
     scrollable?: boolean;
   };
 }

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

@@ -51,17 +51,17 @@ function compareProducts(
 function PaywallOptions({ node }: PaywallOptionsComponentProps) {
   useLogRender('PaywallOptions');
   node = useNode(node);
-  const { products } = useBuilderParams();
+  const { mockProducts } = useBuilderParams();
   const { selectedProduct, setSelectedProductId } = usePaywallContext();
   const getParamsForProduct = usePaywallOptionParamsFactory();
 
   const sortedProducts = useMemo(() => {
-    const list = Array.isArray(products) ? products : [];
+    const list = Array.isArray(mockProducts) ? mockProducts : [];
     return list
       .map((p, idx) => ({ p, idx }))
       .sort((a, b) => compareProducts(a.p, b.p, a.idx, b.idx))
       .map(({ p }) => p);
-  }, [products]);
+  }, [mockProducts]);
 
   return (
     <>

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

@@ -1,10 +1,13 @@
 import { useCallback } from 'react';
 import { useParams } from '../../hooks/useParams';
 import type { Product } from '../../paywall/types/paywall-types';
-import {
+import type {
   LocalizationParams,
   OtherParams,
 } from '../../components/ParamsProvider';
+import { buildPaywallLocalizationParams } from '../../product-base';
+import { useRenderStore } from '../../store';
+import { useLocalize } from '../../hooks/useLocalize';
 
 type PaywallOptionParams = {
   localizationParams: LocalizationParams;
@@ -17,26 +20,36 @@ export function usePaywallOptionParamsFactory() {
     otherParams: baseOtherParams,
   } = useParams();
 
+  const device = useRenderStore((s) => s.device);
+  const localize = useLocalize();
+  const platform = (device.platform === 'ios' ? 'ios' : 'android') as
+    | 'ios'
+    | 'android';
+
   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',
-      };
+      const productParams = buildPaywallLocalizationParams(
+        p,
+        platform,
+        undefined,
+        localize,
+      );
 
       return {
-        localizationParams: { ...baseLocalizationParams, ...derived },
-        otherParams: { ...baseOtherParams, isSelected },
+        localizationParams: {
+          ...baseLocalizationParams,
+          ...productParams,
+          productSelected: isSelected ? 'true' : 'false',
+        },
+        otherParams: {
+          ...baseOtherParams,
+          singleProductIsSelected: isSelected,
+        },
       };
     },
-    [baseLocalizationParams, baseOtherParams],
+    [baseLocalizationParams, baseOtherParams, platform, localize],
   );
 }