@developer_tribe/react-builder 1.2.40 → 1.2.42

package/src/components/BottomBar.tsx

@@ -1,6 +1,6 @@
-import React, { useMemo, useState } from 'react';
+import React, { useMemo, useState, useCallback, useRef } from 'react';
 import { Icon } from './Icon.generated';
-import type { IconsType } from '../types/Icons.generated';
+import type { IconsType } from '../types/Icons';
 import { useRenderStore } from '../store';
 import type { Localication } from '../types/PreviewConfig';
 import {
@@ -29,7 +29,6 @@ export function BottomBar({
   setData,
   project,
 }: BottomBarProps) {
-  const rtlIcon: IconsType = 'translate';
   const magicCursorIcon: IconsType = 'magicpen';
   const debugIcon: IconsType = 'speedometer-03';
   const localizationIcon: IconsType = 'globe-01';
@@ -45,8 +44,8 @@ export function BottomBar({
     setDefaultLanguage,
     previewMode,
     setPreviewMode,
-    isRtl,
     setIsRtl,
+    languageColumns,
   } = useRenderStore((s) => ({
     localization: s.localization,
     setLocalization: s.setLocalization,
@@ -56,24 +55,55 @@ export function BottomBar({
     setDefaultLanguage: s.setDefaultLanguage,
     previewMode: s.previewMode,
     setPreviewMode: s.setPreviewMode,
-    isRtl: s.isRtl,
     setIsRtl: s.setIsRtl,
+    languageColumns: s.languageColumns,
   }));
 
   const [isDebugOpen, setIsDebugOpen] = useState(false);
   const [isLocalizationOpen, setIsLocalizationOpen] = useState(false);
   const [isInspectOpen, setIsInspectOpen] = useState(false);
   const [isPromptManagerOpen, setIsPromptManagerOpen] = useState(false);
+  const [langDropdownOpen, setLangDropdownOpen] = useState(false);
+  const langTimeoutRef = useRef<ReturnType<typeof setTimeout>>();
+
+  // Use languageColumns from API, fallback to localization object keys
+  const availableLanguages = useMemo(() => {
+    if (languageColumns.length > 0) return languageColumns;
+    const locKeys = Object.keys(localization ?? {});
+    return locKeys.map((code) => ({
+      id: 0,
+      code: code.toUpperCase(),
+      title: code,
+      iso_code: code.toUpperCase(),
+      is_right_alignment: false,
+    }));
+  }, [languageColumns, localization]);
 
-  const languages = useMemo(() => ['en', 'tr', 'ar'], []);
   const activeLanguage = defaultLanguage;
 
+  const handleSelectLanguage = useCallback(
+    (lang: { code: string; is_right_alignment: boolean }) => {
+      const code = lang.code.toLowerCase();
+      setDefaultLanguage(code);
+      setIsRtl(lang.is_right_alignment);
+      setLangDropdownOpen(false);
+    },
+    [setDefaultLanguage, setIsRtl],
+  );
+
+  const handleLangMouseEnter = () => {
+    if (langTimeoutRef.current) clearTimeout(langTimeoutRef.current);
+    setLangDropdownOpen(true);
+  };
+  const handleLangMouseLeave = () => {
+    langTimeoutRef.current = setTimeout(() => setLangDropdownOpen(false), 200);
+  };
+
   const handleLocalicationChange = (next: Localication) => {
     setLocalization(next);
   };
 
   const themeIsActive = theme === 'dark';
-  const rtlIsActive = isRtl;
   const previewIsActive = previewMode;
   const themeIcon: IconsType = themeIsActive ? 'moon-bold' : 'sun';
 
@@ -90,19 +120,6 @@ export function BottomBar({
           <Icon iconType={themeIcon} size={20} color="currentColor" alt="" />
         </button>
 
-        <button
-          type="button"
-          className={`rb-bottom-bar__button rb-bottom-bar__button--rtl${
-            rtlIsActive ? ' is-active' : ''
-          }`}
-          aria-label="RTL"
-          aria-pressed={rtlIsActive}
-          onClick={() => setIsRtl(!isRtl)}
-        >
-          <Icon iconType={rtlIcon} size={18} color="currentColor" alt="" />
-          <span className="rb-bottom-bar__rtl-text">RTL</span>
-        </button>
-
         <button
           type="button"
           className={`rb-bottom-bar__button rb-bottom-bar__button--preview${
@@ -171,19 +188,106 @@ export function BottomBar({
 
         <div className="rb-bottom-bar__spacer" />
 
-        <div className="rb-bottom-bar__langs" aria-label="Language">
-          {languages.map((language) => (
-            <button
-              key={language}
-              type="button"
-              className={`rb-bottom-bar__lang${
-                activeLanguage === language ? ' is-active' : ''
-              }`}
-              onClick={() => setDefaultLanguage(language)}
+        {/* Language selector with hover-up dropdown */}
+        <div
+          className="rb-bottom-bar__lang-selector"
+          onMouseEnter={handleLangMouseEnter}
+          onMouseLeave={handleLangMouseLeave}
+          style={{ position: 'relative' }}
+        >
+          <button
+            type="button"
+            className="rb-bottom-bar__lang is-active"
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: 4,
+            }}
+          >
+            {activeLanguage.toUpperCase()}
+            <span style={{ fontSize: 8, opacity: 0.6 }}>▲</span>
+          </button>
+
+          {langDropdownOpen && availableLanguages.length > 0 && (
+            <div
+              className="rb-bottom-bar__lang-dropdown"
+              style={{
+                position: 'absolute',
+                bottom: '100%',
+                right: 0,
+                marginBottom: 4,
+                background: 'var(--rb-bg-secondary, #2a2a2a)',
+                border: '1px solid var(--rb-border, #444)',
+                borderRadius: 6,
+                padding: '4px 0',
+                minWidth: 150,
+                maxHeight: 260,
+                overflowY: 'auto',
+                boxShadow: '0 -4px 16px rgba(0,0,0,0.3)',
+                zIndex: 100,
+              }}
             >
-              {language}
-            </button>
-          ))}
+              {availableLanguages.map((lang) => {
+                const isActive =
+                  lang.code.toLowerCase() === activeLanguage.toLowerCase();
+                return (
+                  <button
+                    key={lang.code}
+                    type="button"
+                    onClick={() => handleSelectLanguage(lang)}
+                    style={{
+                      display: 'flex',
+                      alignItems: 'center',
+                      gap: 6,
+                      width: '100%',
+                      padding: '5px 10px',
+                      border: 'none',
+                      background: isActive
+                        ? 'var(--rb-accent, #6366f1)'
+                        : 'transparent',
+                      color: isActive
+                        ? '#fff'
+                        : 'var(--rb-text-primary, #e0e0e0)',
+                      cursor: 'pointer',
+                      fontSize: 12,
+                      textAlign: 'left',
+                    }}
+                    onMouseEnter={(e) => {
+                      if (!isActive)
+                        e.currentTarget.style.background =
+                          'var(--rb-bg-hover, #333)';
+                    }}
+                    onMouseLeave={(e) => {
+                      if (!isActive)
+                        e.currentTarget.style.background = 'transparent';
+                    }}
+                  >
+                    <span
+                      style={{
+                        fontWeight: 600,
+                        width: 24,
+                        flexShrink: 0,
+                      }}
+                    >
+                      {lang.code}
+                    </span>
+                    <span style={{ opacity: 0.7, flex: 1 }}>{lang.title}</span>
+                    {lang.is_right_alignment && (
+                      <span
+                        style={{
+                          fontSize: 9,
+                          opacity: 0.5,
+                          flexShrink: 0,
+                        }}
+                      >
+                        RTL
+                      </span>
+                    )}
+                  </button>
+                );
+              })}
+            </div>
+          )}
         </div>
       </div>
 

package/src/components/DeviceNavigationBar.tsx

@@ -49,7 +49,7 @@ export function DeviceNavigationBar({
         context.navigation('launchscreen');
       }
     } else {
-      alert('Navigation: Back\n(Mock OS context not available)');
+      console.warn('Navigation: Back\n(Mock OS context not available)');
     }
   }
 
@@ -57,7 +57,7 @@ export function DeviceNavigationBar({
     if (context) {
       context.navigation('launchscreen');
     } else {
-      alert('Navigation: Home\n(Mock OS context not available)');
+      console.warn('Navigation: Home\n(Mock OS context not available)');
     }
   }
 

package/src/hooks/useLocalize.ts

@@ -23,7 +23,19 @@ export function useLocalize(options?: {
 
   return useCallback(
     (keyOrText: string) => {
-      const raw = localization?.[defaultLanguage]?.[keyOrText] ?? keyOrText;
+      const langMap = localization?.[defaultLanguage];
+      const raw = langMap?.[keyOrText] ?? keyOrText;
+      // DEBUG: trace localization lookup
+      if (keyOrText.includes('.')) {
+        console.log('[useLocalize]', {
+          keyOrText,
+          defaultLanguage,
+          hasLangMap: !!langMap,
+          langMapKeyCount: langMap ? Object.keys(langMap).length : 0,
+          resolved: raw !== keyOrText ? raw : '❌ NOT FOUND',
+          allLangs: Object.keys(localization ?? {}),
+        });
+      }
       return replaceLocalizationParams(raw, params);
     },
     [defaultLanguage, localization, params],

package/src/index.web.ts

@@ -11,3 +11,22 @@ export * from './index';
 export * from './build-components';
 export { default as useNode } from './build-components/useNode';
 export type { EventObjectGenerated } from './build-components/OnboardButton/OnboardButtonProps.generated';
+
+// Host-app API: let parent apps inject a custom "Text" field renderer.
+import { useRenderStore } from './store';
+import type { ComponentType } from 'react';
+import type { LocalizationApiConfig, LanguageColumn } from './store';
+
+export function setBuilderStringChildrenField(
+  comp?: ComponentType<{ value: string; onChange: (v: string) => void }>,
+) {
+  useRenderStore.getState().setRenderStringChildrenField(comp);
+}
+
+export function setBuilderLocalizationConfig(config?: LocalizationApiConfig) {
+  useRenderStore.getState().setLocalizationApiConfig(config);
+}
+
+export function setBuilderLanguageColumns(cols: LanguageColumn[]) {
+  useRenderStore.getState().setLanguageColumns(cols);
+}

package/src/mockOS/managers/mockPermissionManager.ts

@@ -22,7 +22,7 @@ export class MockPermissionManager {
     permission: PermissionType | string,
   ): Promise<PermissionStatus> {
     if (this.context === null) {
-      alert(
+      console.warn(
         `Permission requested: ${permission}\n(Mock OS context not available)`,
       );
       return 'not-determined';
@@ -40,7 +40,9 @@ export class MockPermissionManager {
 
   checkPermission(permission: PermissionType | string): PermissionStatus {
     if (this.context === null) {
-      alert(`Permission check: ${permission}\n(Mock OS context not available)`);
+      console.warn(
+        `Permission check: ${permission}\n(Mock OS context not available)`,
+      );
       return 'not-determined';
     }
 
@@ -49,7 +51,7 @@ export class MockPermissionManager {
 
   openSettings(): void {
     if (this.context === null) {
-      alert('Opening Settings\n(Mock OS context not available)');
+      console.warn('Opening Settings\n(Mock OS context not available)');
       return;
     }
   }

package/src/mockOS/managers/navigationManager.ts

@@ -22,7 +22,7 @@ export class MockNavigationManager {
 
   goToHome(): void {
     if (this.context === null) {
-      alert('Navigate to Home\n(Mock OS context not available)');
+      console.warn('Navigate to Home\n(Mock OS context not available)');
       return;
     }
 
@@ -35,7 +35,9 @@ export class MockNavigationManager {
 
   goToSubscriptions(): void {
     if (this.context === null) {
-      alert('Navigate to Subscriptions\n(Mock OS context not available)');
+      console.warn(
+        'Navigate to Subscriptions\n(Mock OS context not available)',
+      );
       return;
     }
 
@@ -48,7 +50,7 @@ export class MockNavigationManager {
 
   goToLaunchApp(): void {
     if (this.context === null) {
-      alert('Navigate to Launch App\n(Mock OS context not available)');
+      console.warn('Navigate to Launch App\n(Mock OS context not available)');
       return;
     }
 
@@ -65,7 +67,7 @@ export class MockNavigationManager {
     }
 
     if (this.context === null) {
-      alert('Go Back\n(Mock OS context not available)');
+      console.warn('Go Back\n(Mock OS context not available)');
       return false;
     }
 

package/src/modals/IconPickerModal.tsx

@@ -1,6 +1,6 @@
 import React, { useMemo, useState } from 'react';
 import Modal from './Modal';
-import { Icons, type IconsType } from '../types/Icons.generated';
+import { Icons, type IconsType } from '../types/Icons';
 import { Icon } from '../components/Icon.generated';
 
 type IconPickerModalProps = {

package/src/modals/InspectModal.tsx

@@ -113,8 +113,41 @@ function LocalizationsTab({
     );
   }
 
+  const handleDownloadCSV = () => {
+    let csvContent = 'Key,Value,Source\n';
+    allKeys.forEach((key) => {
+      const hasCustom = key in langKeys;
+      const customValue = langKeys[key];
+      const defaultValue = defaultLangKeys[key];
+
+      const isCustom =
+        hasCustom && customValue !== defaultValue && customValue !== undefined;
+      const value = isCustom ? customValue : (defaultValue ?? '');
+
+      const escape = (str: string) => `"${String(str).replace(/"/g, '""')}"`;
+      csvContent += `${escape(key)},${escape(String(value))},${isCustom ? 'custom' : 'fallback'}\n`;
+    });
+
+    downloadCSV(`localizations-${language}.csv`, csvContent);
+  };
+
   return (
     <div className="inspect-modal__table-wrap">
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'flex-end',
+          marginBottom: '8px',
+        }}
+      >
+        <button
+          type="button"
+          className="editor-button"
+          onClick={handleDownloadCSV}
+        >
+          Download CSV
+        </button>
+      </div>
       <table className="inspect-modal__table">
         <thead>
           <tr>
@@ -184,8 +217,38 @@ function ParamsTab({
     );
   }
 
+  const handleDownloadCSV = () => {
+    let csvContent = 'Param,Value,Type\n';
+    const escape = (str: string) => `"${String(str).replace(/"/g, '""')}"`;
+
+    flatEntries.forEach(([key, value]) => {
+      csvContent += `${escape(key)},${escape(formatValue(value))},Flat\n`;
+    });
+
+    nestedEntries.forEach(([key, value]) => {
+      csvContent += `${escape(key)},${escape(formatValue(value))},Nested\n`;
+    });
+
+    downloadCSV('params.csv', csvContent);
+  };
+
   return (
     <div className="inspect-modal__table-wrap">
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'flex-end',
+          marginBottom: '8px',
+        }}
+      >
+        <button
+          type="button"
+          className="editor-button"
+          onClick={handleDownloadCSV}
+        >
+          Download CSV
+        </button>
+      </div>
       <table className="inspect-modal__table">
         <thead>
           <tr>
@@ -249,8 +312,40 @@ function ColorsTab({
     return <p className="inspect-modal__empty">No project colors defined.</p>;
   }
 
+  const handleDownloadCSV = () => {
+    let csvContent = 'Type,Token,Value,Source\n';
+    const escape = (str: string) => `"${String(str).replace(/"/g, '""')}"`;
+
+    staticEntries.forEach(([token, hex]) => {
+      const isDefault = defaultStatic[token] === hex;
+      csvContent += `Static,${escape(token)},${escape(String(hex))},${isDefault ? 'fallback' : 'custom'}\n`;
+    });
+
+    themeEntries.forEach(([token, hex]) => {
+      const isDefault = defaultThemeMap[token] === hex;
+      csvContent += `Theme (${theme}),${escape(token)},${escape(String(hex))},${isDefault ? 'fallback' : 'custom'}\n`;
+    });
+
+    downloadCSV('colors.csv', csvContent);
+  };
+
   return (
     <div className="inspect-modal__table-wrap">
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'flex-end',
+          marginBottom: '8px',
+        }}
+      >
+        <button
+          type="button"
+          className="editor-button"
+          onClick={handleDownloadCSV}
+        >
+          Download CSV
+        </button>
+      </div>
       {staticEntries.length > 0 && (
         <>
           <h4 className="inspect-modal__section-title">Static Colors</h4>
@@ -357,3 +452,14 @@ function formatValue(v: unknown): string {
   if (typeof v === 'number' || typeof v === 'boolean') return String(v);
   return JSON.stringify(v);
 }
+
+function downloadCSV(filename: string, csvContent: string) {
+  const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement('a');
+  link.setAttribute('href', url);
+  link.setAttribute('download', filename);
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+}

package/src/product-base/buildPaywallLocalizationParams.ts

@@ -105,5 +105,8 @@ export function buildPaywallLocalizationParams(
     productCurreny: extractedParams.currency,
     productId: String(product.productId ?? ''),
     productSelected: 'true',
+    subscribe: hasTrial
+      ? resolve('base.builder.paywall.button.subscribe-free')
+      : resolve('base.builder.paywall.button.subscribe'),
   };
 }

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/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)
@@ -101,6 +118,18 @@ type RenderStore = {
 
   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>()(
@@ -129,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: [],
@@ -296,6 +327,14 @@ export const useRenderStore = createWithEqualityFn<RenderStore>()(
               : [...devs, name],
           };
         }),
+
+      renderStringChildrenField: undefined,
+      setRenderStringChildrenField: (comp) =>
+        set({ renderStringChildrenField: comp }),
+
+      localizationApiConfig: undefined,
+      setLocalizationApiConfig: (config) =>
+        set({ localizationApiConfig: config }),
     }),
     {
       name: 'render-store',

package/src/styles/base/_global.scss

@@ -80,6 +80,7 @@ body,
   background-position: center;
   background-repeat: repeat;
   background-size: 500px auto;
+  padding-bottom: 120px;
   > * {
     position: relative;
     z-index: 1;
@@ -369,7 +370,6 @@ body,
     min-width: 0;
     min-height: calc(100vh - 120px);
     padding: sizes.$spaceComfy;
-    padding-bottom: 120px;
     position: relative;
   }