@developer_tribe/react-builder 1.2.40 → 1.2.41

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 ? 'spreadsheet' : '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>
@@ -148,7 +181,7 @@ function LocalizationsTab({
                         <span style={{ color: 'red' }}>!</span> fallback
                       </>
                     ) : (
-                      'custom'
+                      'spreadsheet'
                     )}
                   </span>
                 </td>
@@ -179,13 +212,43 @@ function ParamsTab({
   if (!hasAny) {
     return (
       <p className="inspect-modal__empty">
-        No params available. Params are populated inside a PaywallProvider.
+        No params available. Params are populated inside a ParamsProvider.
       </p>
     );
   }
 
+  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,29 @@ function ColorsTab({
     return <p className="inspect-modal__empty">No project colors defined.</p>;
   }
 
+  const handleDownloadJSON = () => {
+    const data = projectColors ?? {};
+    const jsonContent = JSON.stringify(data, null, 2);
+    downloadJSON('colors.json', jsonContent);
+  };
+
   return (
     <div className="inspect-modal__table-wrap">
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'flex-end',
+          marginBottom: '8px',
+        }}
+      >
+        <button
+          type="button"
+          className="editor-button"
+          onClick={handleDownloadJSON}
+        >
+          Download JSON
+        </button>
+      </div>
       {staticEntries.length > 0 && (
         <>
           <h4 className="inspect-modal__section-title">Static Colors</h4>
@@ -284,7 +368,7 @@ function ColorsTab({
                             <span style={{ color: 'red' }}>!</span> fallback
                           </>
                         ) : (
-                          'custom'
+                          'added to project'
                         )}
                       </span>
                     </td>
@@ -331,7 +415,7 @@ function ColorsTab({
                             <span style={{ color: 'red' }}>!</span> fallback
                           </>
                         ) : (
-                          'custom'
+                          'added to project'
                         )}
                       </span>
                     </td>
@@ -357,3 +441,27 @@ 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);
+}
+
+function downloadJSON(filename: string, jsonContent: string) {
+  const blob = new Blob([jsonContent], {
+    type: 'application/json;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/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!',