@developer_tribe/react-builder 1.2.39 → 1.2.41

package/src/product-base/types.ts

@@ -116,6 +116,8 @@ export interface Product {
   displayPrice?: string;
   localizedPrice?: string;
   price?: string;
+  promoPrice?: string;
+  localizedPromoPrice?: string;
   currency?: string;
   currencyCode?: string;
   platform?: 'android' | 'ios';
@@ -169,6 +171,7 @@ export interface ProductParams {
   productCurreny: string;
   productId: string;
   productSelected: string;
+  subscribe: string;
 }
 
 /** Keys excluded from single (per-option) params — these are global/context-level. */

package/src/size-matters/index.ts

@@ -52,15 +52,21 @@ export const ms = (size: number, factor?: number) =>
 
 export function parseSize(
   value: string | number | undefined,
-  baseSize?: BaseSize,
-  device?: Device,
+  baseSize: BaseSize | undefined,
+  device: Device | 'native' | undefined,
 ) {
   if (value === undefined) return undefined;
+
+  const multiplier = device === 'native' ? 1 : (device?.multiplier ?? 1);
+
   if (typeof value === 'number') {
-    return value;
+    return value * multiplier;
   }
 
-  const scalers = getScalers(baseSize, device);
+  const scalers = getScalers(
+    baseSize,
+    device === 'native' ? undefined : device,
+  );
 
   const raw = String(value).trim();
   const lower = raw.toLowerCase();
@@ -68,16 +74,16 @@ export function parseSize(
   // Handle explicit scalers via suffixes
   if (lower.endsWith('@s')) {
     const n = parseFloat(lower.slice(0, -2));
-    return Number.isFinite(n) ? scalers.scale(n) : raw;
+    return Number.isFinite(n) ? scalers.scale(n) * multiplier : raw;
   }
   if (lower.endsWith('@vs')) {
     const n = parseFloat(lower.slice(0, -3));
-    return Number.isFinite(n) ? scalers.verticalScale(n) : raw;
+    return Number.isFinite(n) ? scalers.verticalScale(n) * multiplier : raw;
   }
   if (lower.endsWith('@f') || lower.endsWith('@fs')) {
     const cut = lower.endsWith('@f') ? -2 : -3;
     const n = parseFloat(lower.slice(0, cut));
-    return Number.isFinite(n) ? scalers.verticalScale(n) : raw;
+    return Number.isFinite(n) ? scalers.verticalScale(n) * multiplier : raw;
   }
 
   // Preserve percentage values as-is
@@ -89,13 +95,13 @@ export function parseSize(
   // Handle px explicitly (treat as absolute, not scaled)
   if (lower.endsWith('px')) {
     const n = parseFloat(lower.replace('px', ''));
-    return Number.isFinite(n) ? n : raw;
+    return Number.isFinite(n) ? n * multiplier : raw;
   }
 
   // Plain numeric strings fall back to provided scaler (implicit number)
   const numeric = parseFloat(lower);
   if (Number.isFinite(numeric)) {
-    return numeric;
+    return numeric * multiplier;
   }
 
   // Unknown format, return as-is

package/src/store.ts

@@ -1,3 +1,18 @@
+import type { ComponentType } from 'react';
+
+export type LocalizationApiConfig = {
+  forgeUrl: string;
+  forgeToken: string;
+  forgeAppId?: string | number | null;
+};
+
+export type LanguageColumn = {
+  id: number;
+  code: string;
+  title: string;
+  iso_code: string;
+  is_right_alignment: boolean;
+};
 import { createWithEqualityFn } from 'zustand/traditional';
 import { shallow } from 'zustand/shallow';
 import type { Device } from './types/Device';
@@ -43,6 +58,8 @@ type RenderStore = {
   setLocalization: (localization: Localication) => void;
   isRtl: boolean;
   setIsRtl: (isRtl: boolean) => void;
+  languageColumns: LanguageColumn[];
+  setLanguageColumns: (cols: LanguageColumn[]) => void;
   previewMode: boolean;
   setPreviewMode: (previewMode: boolean) => void;
   // Mockable: products (persisted)
@@ -92,8 +109,27 @@ type RenderStore = {
   // OS bar color overrides (set by StatusBarColor / NavigationBarColor build components)
   statusBarOverrideColor: string | null;
   setStatusBarOverrideColor: (color: string | null) => void;
+  statusBarOverrideTranslucent: boolean | null;
+  setStatusBarOverrideTranslucent: (translucent: boolean | null) => void;
   navBarOverrideColor: string | null;
   setNavBarOverrideColor: (color: string | null) => void;
+  navBarOverrideTranslucent: boolean | null;
+  setNavBarOverrideTranslucent: (translucent: boolean | null) => void;
+
+  favoriteDevices: string[];
+  toggleFavoriteDevice: (name: string) => void;
+
+  // Host-provided custom renderer for the "Text" (string children) field
+  renderStringChildrenField?: ComponentType<{
+    value: string;
+    onChange: (v: string) => void;
+  }>;
+  setRenderStringChildrenField: (
+    comp?: ComponentType<{ value: string; onChange: (v: string) => void }>,
+  ) => void;
+
+  localizationApiConfig?: LocalizationApiConfig;
+  setLocalizationApiConfig: (config?: LocalizationApiConfig) => void;
 };
 
 export const useRenderStore = createWithEqualityFn<RenderStore>()(
@@ -122,6 +158,8 @@ export const useRenderStore = createWithEqualityFn<RenderStore>()(
       setLocalization: (localization) => set({ localization }),
       isRtl: false,
       setIsRtl: (isRtl) => set({ isRtl }),
+      languageColumns: [],
+      setLanguageColumns: (cols) => set({ languageColumns: cols }),
       previewMode: false,
       setPreviewMode: (previewMode) => set({ previewMode }),
       products: [],
@@ -269,8 +307,34 @@ export const useRenderStore = createWithEqualityFn<RenderStore>()(
       statusBarOverrideColor: null,
       setStatusBarOverrideColor: (color) =>
         set({ statusBarOverrideColor: color }),
+      statusBarOverrideTranslucent: null,
+      setStatusBarOverrideTranslucent: (translucent) =>
+        set({ statusBarOverrideTranslucent: translucent }),
       navBarOverrideColor: null,
       setNavBarOverrideColor: (color) => set({ navBarOverrideColor: color }),
+      navBarOverrideTranslucent: null,
+      setNavBarOverrideTranslucent: (translucent) =>
+        set({ navBarOverrideTranslucent: translucent }),
+
+      favoriteDevices: [],
+      toggleFavoriteDevice: (name) =>
+        set((state) => {
+          const devs = state.favoriteDevices || [];
+          const isFav = devs.includes(name);
+          return {
+            favoriteDevices: isFav
+              ? devs.filter((n) => n !== name)
+              : [...devs, name],
+          };
+        }),
+
+      renderStringChildrenField: undefined,
+      setRenderStringChildrenField: (comp) =>
+        set({ renderStringChildrenField: comp }),
+
+      localizationApiConfig: undefined,
+      setLocalizationApiConfig: (config) =>
+        set({ localizationApiConfig: config }),
     }),
     {
       name: 'render-store',
@@ -281,6 +345,8 @@ export const useRenderStore = createWithEqualityFn<RenderStore>()(
         products: state.products,
         benefits: state.benefits,
         listMaxNested: state.listMaxNested,
+        favoriteDevices: state.favoriteDevices,
+        device: state.device,
       }),
       storage: createJSONStorage(() => localStorage),
     },

package/src/styles/modals/_product-edit-modal.scss

@@ -1,7 +1,7 @@
 @use '../foundation/sizes' as sizes;
 
 .product-edit-modal {
-  width: min(640px, calc(100vw - 32px));
+  width: min(800px, calc(100vw - 32px));
   max-height: 90vh;
   padding: sizes.$spaceRoomy;
   display: flex;
@@ -17,7 +17,7 @@
 }
 
 .product-edit-modal__textarea {
-  min-height: 90px;
+  min-height: 140px;
   padding: 8px;
   resize: vertical;
 }

package/src/types/Device.ts

@@ -35,4 +35,9 @@ export interface Device {
    * 1 = highest importance, 100 = lowest importance
    */
   importance?: number;
+  /**
+   * Optional multiplier to adjust for differences in CSS viewport sizing between web and native.
+   * Example: 0.5 for a device where web renders it twice as large as expected compared to native.
+   */
+  multiplier?: number;
 }

package/src/types/PreviewConfig.ts

@@ -15,6 +15,8 @@ export type LocalizationKey =
   | 'base.builder.paywall.promo.default.text'
   | 'base.builder.paywall.promo.freeTrial.text'
   | 'base.builder.paywall.promo.regular.text'
+  | 'base.builder.paywall.button.subscribe'
+  | 'base.builder.paywall.button.subscribe-free'
   // onboard – titles
   | 'base.onboard.title.one-page'
   | 'base.onboard.title.two-page'
@@ -79,6 +81,8 @@ export const defaultLocalization: Localication = {
       '@trialPeriod-@trialPeriodUnit free trial',
     'base.builder.paywall.promo.regular.text':
       '@localizedPrice @localizedPeriod',
+    'base.builder.paywall.button.subscribe': 'Subscribe',
+    'base.builder.paywall.button.subscribe-free': 'Subscribe with Free Trial',
     // onboard – titles
     'base.onboard.title.one-page': 'Secure your connection',
     'base.onboard.title.two-page': 'Access content worldwide',
@@ -146,6 +150,8 @@ export const defaultLocalization: Localication = {
       '@trialPeriod @trialPeriodUnit ücretsiz deneme',
     'base.builder.paywall.promo.regular.text':
       '@localizedPrice @localizedPeriod',
+    'base.builder.paywall.button.subscribe': 'Abone Ol',
+    'base.builder.paywall.button.subscribe-free': 'Ücretsiz Denemeyi Başlat',
     // onboard – titles
     'base.onboard.title.five-page': 'Deneyiminizi geliştirin',
     'base.onboard.title.six-page': 'Her şey hazır!',

package/src/utils/analyseNodeByPatterns.ts

@@ -429,11 +429,15 @@ function validateAttributesByPattern(
     if (attrName === 'style' || attrName === 'styles') continue;
     const attrSpec = schema?.[attrName] as AttributeTypeSpec | undefined;
     if (!attrSpec) {
-      if (attrName === 'title' || attrName === 'description') {
+      if (
+        attrName === 'title' ||
+        attrName === 'description' ||
+        attrName === 'testID'
+      ) {
         const res = validateAttributeValue(
           pattern.pattern.type,
           attrValue,
-          attrName,
+          attrName === 'testID' ? 'string' : attrName,
           joinPath(path, attrName),
         );
         if (!res.valid) return res;

package/src/utils/extractTextStyle/extractTextStyle.ts

@@ -95,6 +95,7 @@ export type ExtractTextStyleOptions = {
   onError?: (error: string) => void;
   directlyTextStyle?: boolean;
   baseSize?: BaseSize;
+  device?: import('../../types/Device').Device;
 };
 
 export function extractTextStyle<T extends TextPropsGenerated['attributes']>(
@@ -127,7 +128,7 @@ export function extractTextStyle<T extends TextPropsGenerated['attributes']>(
   // Typography
   const fontSize = get('fontSize') as string | number | undefined;
   if (fontSize !== undefined) {
-    const parsed = parseSize(fontSize, options.baseSize);
+    const parsed = parseSize(fontSize, options.baseSize, options.device!);
     style.fontSize = parsed as React.CSSProperties['fontSize'];
   } else {
     style.fontSize = fs(14);
@@ -194,6 +195,7 @@ export function extractTextStyle<T extends TextPropsGenerated['attributes']>(
     projectColors: options.projectColors,
     theme,
     baseSize: options.baseSize,
+    device: options.device,
   });
   const fullStyle = { ...viewStyle, ...style };
 

package/src/utils/extractTextStyle/extractTextStyleNative.ts

@@ -63,7 +63,7 @@ export function extractTextStyleNative<
   }
 
   const rawFontSize = get('fontSize') as string | number | undefined;
-  const parsedFontSize = parseSize(rawFontSize, options.baseSize);
+  const parsedFontSize = parseSize(rawFontSize, options.baseSize, 'native');
   if (typeof parsedFontSize === 'number') style.fontSize = parsedFontSize;
   else style.fontSize = fs(14);
 

package/src/utils/extractViewStyle/extractViewStyle.ts

@@ -8,11 +8,13 @@ import type { BaseSize } from '../../types/PreviewConfig';
 import { parseSize } from '../../size-matters';
 import { parseColor } from '../parseColor';
 import { getStyleBag, toAttributeRecord } from '../attributeStyle';
+import { getDefaultDevice } from '../getDevices';
 
 export type ExtractViewStyleOptions = {
   projectColors?: ProjectColors;
   theme?: string;
   baseSize?: BaseSize;
+  device?: import('../../types/Device').Device;
 };
 
 export function extractViewStyle<T extends ViewPropsGenerated['attributes']>(
@@ -74,7 +76,7 @@ export function extractViewStyle<T extends ViewPropsGenerated['attributes']>(
     rawValue: string | number | undefined,
   ) => {
     if (isEmptySizeValue(rawValue)) return;
-    const parsed = parseSize(rawValue, options.baseSize);
+    const parsed = parseSize(rawValue, options.baseSize, options.device!);
     style[property] = parsed as React.CSSProperties[K];
   };
 
@@ -87,13 +89,21 @@ export function extractViewStyle<T extends ViewPropsGenerated['attributes']>(
     | number
     | undefined;
   if (!isEmptySizeValue(paddingHorizontal)) {
-    const parsed = parseSize(paddingHorizontal, options.baseSize);
+    const parsed = parseSize(
+      paddingHorizontal,
+      options.baseSize,
+      options.device!,
+    );
     style.paddingLeft = parsed as React.CSSProperties['paddingLeft'];
     style.paddingRight = parsed as React.CSSProperties['paddingRight'];
   }
   const paddingVertical = get('paddingVertical') as string | number | undefined;
   if (!isEmptySizeValue(paddingVertical)) {
-    const parsed = parseSize(paddingVertical, options.baseSize);
+    const parsed = parseSize(
+      paddingVertical,
+      options.baseSize,
+      options.device!,
+    );
     style.paddingTop = parsed as React.CSSProperties['paddingTop'];
     style.paddingBottom = parsed as React.CSSProperties['paddingBottom'];
   }
@@ -117,14 +127,18 @@ export function extractViewStyle<T extends ViewPropsGenerated['attributes']>(
     (attrRecord.marginHorizontal as string | number | undefined) ??
     (styleBag?.marginHorizontal as string | number | undefined);
   if (!isEmptySizeValue(marginHorizontalRaw)) {
-    const parsed = parseSize(marginHorizontalRaw, options.baseSize);
+    const parsed = parseSize(
+      marginHorizontalRaw,
+      options.baseSize,
+      options.device!,
+    );
     style.marginLeft = parsed as React.CSSProperties['marginLeft'];
     style.marginRight = parsed as React.CSSProperties['marginRight'];
   }
 
   const marginVertical = get('marginVertical') as string | number | undefined;
   if (!isEmptySizeValue(marginVertical)) {
-    const parsed = parseSize(marginVertical, options.baseSize);
+    const parsed = parseSize(marginVertical, options.baseSize, options.device!);
     style.marginTop = parsed as React.CSSProperties['marginTop'];
     style.marginBottom = parsed as React.CSSProperties['marginBottom'];
   }

package/src/utils/extractViewStyle/extractViewStyleNative.ts

@@ -51,7 +51,11 @@ export function extractViewStyleNative<
 
   const setParsedSize = (property: string, rawValue: unknown) => {
     if (isEmptySizeValue(rawValue)) return;
-    const parsed = parseSize(rawValue as string | number, options.baseSize);
+    const parsed = parseSize(
+      rawValue as string | number,
+      options.baseSize,
+      'native',
+    );
     // RN generally expects numbers (dp). We allow percentages for width/height-like props.
     if (typeof parsed === 'number' || typeof parsed === 'string') {
       style[property] = parsed;

package/src/utils/replaceLocalizationParams.ts

@@ -9,11 +9,9 @@ export function replaceLocalizationParams(
   // (e.g. @trialPeriod matching inside @trialPeriodUnit)
   const sorted = Object.entries(params).sort(([a], [b]) => b.length - a.length);
 
-  return (
-    sorted.reduce((acc, [key, val]) => {
-      if (val == null) return acc;
-      const needle = `@${key}`;
-      return acc.split(needle).join(val);
-    }, text) || text
-  );
+  return sorted.reduce((acc, [key, val]) => {
+    if (val == null) return acc;
+    const needle = `@${key}`;
+    return acc.split(needle).join(val);
+  }, text);
 }