@developer_tribe/react-builder 1.0.3 → 1.0.5

package/src/modals/ProductPresetsModal.tsx

@@ -0,0 +1,151 @@
+import React, { useMemo } from 'react';
+import Modal from './Modal';
+import type { Product } from '../paywall/types/paywall-types';
+import presetsJson from '../assets/products.json';
+
+type PresetMap = Record<string, Product[]>;
+const DEFAULT_PRESET_KEY = 'Embeded Paywall';
+
+type ProductPresetsModalProps = {
+  current: Product[];
+  onReplace: (next: Product[]) => void;
+  onAppend: (next: Product[]) => void;
+  onClose: () => void;
+};
+
+function normalizeProduct(p: Product): Product {
+  return {
+    productId: p?.productId ?? '',
+    title: p?.title ?? '',
+    description: p?.description ?? '',
+    localizedPrice: p?.localizedPrice ?? '',
+    price: p?.price ?? '',
+    currency: p?.currency ?? '',
+  };
+}
+
+function getPresetMap(): PresetMap {
+  const raw = presetsJson as unknown as PresetMap;
+  const safe: PresetMap = {};
+  Object.entries(raw ?? {}).forEach(([key, list]) => {
+    if (!key || typeof key !== 'string') return;
+    if (!Array.isArray(list)) return;
+    safe[key] = list
+      .filter(Boolean)
+      .map((p) => normalizeProduct(p as Product))
+      .filter((p) => typeof p.productId === 'string');
+  });
+  return safe;
+}
+
+export function ProductPresetsModal({
+  current,
+  onReplace,
+  onAppend,
+  onClose,
+}: ProductPresetsModalProps) {
+  const presetMap = useMemo(() => getPresetMap(), []);
+  const presetEntries = useMemo(
+    () =>
+      Object.entries(presetMap).sort((a, b) => {
+        const aKey = a[0];
+        const bKey = b[0];
+        if (aKey === DEFAULT_PRESET_KEY && bKey !== DEFAULT_PRESET_KEY)
+          return -1;
+        if (bKey === DEFAULT_PRESET_KEY && aKey !== DEFAULT_PRESET_KEY)
+          return 1;
+        return aKey.localeCompare(bKey);
+      }),
+    [presetMap],
+  );
+
+  return (
+    <Modal
+      onClose={onClose}
+      ariaLabelledBy="product-presets-modal-title"
+      contentClassName="product-presets-modal"
+    >
+      <div className="modal__header">
+        <h3 id="product-presets-modal-title" className="modal__title">
+          Product presets
+        </h3>
+        <button type="button" className="editor-button" onClick={onClose}>
+          Close
+        </button>
+      </div>
+
+      <div className="product-presets-modal__body">
+        <section className="product-presets-modal__section">
+          <p className="product-presets-modal__section-title">
+            Current ({Array.isArray(current) ? current.length : 0})
+          </p>
+          <p className="product-presets-modal__muted">
+            Pick a preset below to replace or append to the current list.
+          </p>
+        </section>
+
+        <section className="product-presets-modal__section">
+          <p className="product-presets-modal__section-title">Presets</p>
+
+          {presetEntries.length ? (
+            <div className="product-presets-modal__grid">
+              {presetEntries.map(([key, list]) => (
+                <div key={key} className="product-presets-modal__card">
+                  <div className="product-presets-modal__card-header">
+                    <p className="product-presets-modal__card-title">{key}</p>
+                    <p className="product-presets-modal__card-count">
+                      {list.length} products
+                    </p>
+                  </div>
+
+                  <ul className="product-presets-modal__card-list">
+                    {list.slice(0, 3).map((p) => (
+                      <li
+                        key={p.productId}
+                        className="product-presets-modal__card-item"
+                      >
+                        {p.productId}
+                      </li>
+                    ))}
+                    {list.length > 3 ? (
+                      <li className="product-presets-modal__card-item product-presets-modal__muted">
+                        +{list.length - 3} more…
+                      </li>
+                    ) : null}
+                  </ul>
+
+                  <div className="product-presets-modal__actions">
+                    <button
+                      type="button"
+                      className="editor-button"
+                      onClick={() => {
+                        onReplace(list);
+                        onClose();
+                      }}
+                    >
+                      Replace
+                    </button>
+                    <button
+                      type="button"
+                      className="editor-button"
+                      onClick={() => {
+                        onAppend(list);
+                        onClose();
+                      }}
+                    >
+                      Append
+                    </button>
+                  </div>
+                </div>
+              ))}
+            </div>
+          ) : (
+            <p className="product-presets-modal__muted">No presets found.</p>
+          )}
+        </section>
+      </div>
+    </Modal>
+  );
+}
+
+export default ProductPresetsModal;

package/src/modals/index.ts

@@ -2,4 +2,10 @@ export { default as Modal } from './Modal';
 export { AddComponentModal } from './AddComponentModal';
 export { DeviceSelectorModal } from './DeviceSelectorModal';
 export { ColorModal } from './ColorModal';
+export { IconPickerModal } from './IconPickerModal';
 export { LocalicationModal } from './LocalicationModal';
+export { MockableFeatureModal } from './MockableFeatureModal';
+export { ProductEditModal } from './ProductEditModal';
+export { ProductPresetsModal } from './ProductPresetsModal';
+export { BenefitEditModal } from './BenefitEditModal';
+export { BenefitPresetsModal } from './BenefitPresetsModal';

package/src/pages/ProjectPage.tsx

@@ -1,7 +1,10 @@
 import { useCallback, useEffect, useState } from 'react';
-import { Node, NodeData, RenderPage, Project, ProjectColors } from '..';
+import type { Node, NodeData } from '../types/Node';
+import type { Project, ProjectColors } from '../types/Project';
+import { RenderPage } from '../RenderPage';
 import { EditorHeader } from '../components/EditorHeader';
 import { AttributesEditorPanel } from '../components/AttributesEditorPanel';
+import { BuilderProvider } from '../components/BuilderProvider';
 import { BuilderPanel } from './tabs/BuilderPanel';
 import { SideTool } from './tabs/SideTool';
 import { AppConfig, defaultAppConfig } from '../types/PreviewConfig';
@@ -11,12 +14,16 @@ import { useLogRender } from '../utils/useLogRender';
 import type { LogLevel } from '../types/Project';
 import { analyseAndProccess } from '../utils/analyseNode';
 import backgroundImage from '../assets/images/background.jpg';
+import type { PaywallBenefits } from '../paywall/types/benefits';
+import Lottie from 'lottie-react';
+import loadingAnimation from '../assets/loading_animation.json';
 export type ProjectPageProps = {
   project: Project;
   onSaveProject: (project: Project) => void;
   appConfig?: AppConfig;
   logLevel?: LogLevel;
   projectColors?: ProjectColors;
+  name: string;
 };
 
 const MOBILE_BREAKPOINT = 1000;
@@ -27,15 +34,28 @@ export function ProjectPage({
   onSaveProject,
   logLevel,
   projectColors,
+  name,
 }: ProjectPageProps) {
   useLogRender('ProjectPage');
   const resolvedProjectColors = projectColors ?? project.projectColors;
-  const { current, setCurrent, setProjectColors } = useRenderStore((s) => ({
+  const {
+    current,
+    setCurrent,
+    setProjectColors,
+    setProjectName,
+    products,
+    benefits,
+  } = useRenderStore((s) => ({
     current: s.current,
     setCurrent: s.setCurrent,
     setProjectColors: s.setProjectColors,
+    setProjectName: s.setProjectName,
+    products: s.products,
+    benefits: s.benefits,
   }));
   const [editorData, setEditorData] = useState<Node>(null);
+  const [minLoadingDelayDone, setMinLoadingDelayDone] =
+    useState<boolean>(false);
   const [mobilePanel, setMobilePanel] = useState<
     'builder' | 'attributes' | null
   >(null);
@@ -46,8 +66,14 @@ export function ProjectPage({
 
   const handleDeleteNode = useCallback(
     (nodeToDelete: Node) => {
-      // Do not allow deleting the root node
+      // Extra warning for deleting the root node (editorData)
       if (nodeToDelete === editorData) {
+        const shouldDeleteRoot = window.confirm(
+          'You are about to delete the root component. This will clear the entire screen. Continue?',
+        );
+        if (!shouldDeleteRoot) return;
+        setEditorData(null);
+        setCurrent(null);
         return;
       }
       const updated: Node = deleteNodeFromTree(editorData, nodeToDelete);
@@ -81,6 +107,10 @@ export function ProjectPage({
     };
   }, [appConfig, project.name]);
 
+  useEffect(() => {
+    setProjectName(name);
+  }, [name, setProjectName]);
+
   useEffect(() => {
     setProjectColors(resolvedProjectColors);
     return () => setProjectColors(undefined);
@@ -116,8 +146,18 @@ export function ProjectPage({
   const leftPanelIsOpen = !isMobile || mobilePanel === 'builder';
   const attributesPanelIsOpen = !isMobile || mobilePanel === 'attributes';
 
+  useEffect(() => {
+    setMinLoadingDelayDone(false);
+    const timer = setTimeout(() => setMinLoadingDelayDone(true), 1000);
+    return () => clearTimeout(timer);
+  }, [project.data]);
+
   useEffect(() => {
     try {
+      // Reset to "loading" immediately on project change so the loader is shown
+      // until a valid node is available (and for at least 2 seconds).
+      setEditorData(null);
+      setCurrent(null);
       const processed = analyseAndProccess(project.data);
       if (!processed) {
         setEditorData(null);
@@ -127,13 +167,14 @@ export function ProjectPage({
       setEditorData(processed);
       setCurrent(processed);
     } catch (error) {
-      // eslint-disable-next-line no-alert
-      alert('Duplicate node key detected. Please check your project data.');
+      console.error(error);
       setEditorData(null);
       setCurrent(null);
     }
   }, [project.data]);
 
+  const showLoading = editorData === null || !minLoadingDelayDone;
+
   return (
     <div className="container-full">
       <EditorHeader
@@ -227,17 +268,31 @@ export function ProjectPage({
             />
           </div>
         </div>
-        <div className="split-right">
-          <div className="split-right__controls">
-            <SideTool data={editorData} setData={setEditorData} />
-          </div>
-          <div
-            className="split-right-background"
-            style={{
-              backgroundImage: `url(${backgroundImage})`,
-            }}
-          />
-          {editorData && <RenderPage data={editorData} name={project.name} />}
+        <div
+          style={{ backgroundImage: `url(${backgroundImage})` }}
+          className="split-right"
+        >
+          <SideTool data={editorData} setData={setEditorData} />
+
+          {showLoading && (
+            <div className="rb-loading-overlay" aria-busy="true">
+              <LoadingComponent />
+            </div>
+          )}
+          {/* NOTE: In React Native, `products` should come from an IAP wrapper (e.g. `react-native-iap`). */}
+          {!showLoading && editorData && (
+            <BuilderProvider
+              params={{
+                products,
+                benefits:
+                  benefits && typeof benefits === 'object'
+                    ? (benefits as PaywallBenefits)
+                    : {},
+              }}
+            >
+              <RenderPage data={editorData} name={project.name} />
+            </BuilderProvider>
+          )}
         </div>
         <div
           id="split-attributes-panel"
@@ -289,6 +344,14 @@ export function ProjectPage({
   );
 }
 
+function LoadingComponent() {
+  return (
+    <div className="rb-loading">
+      <Lottie animationData={loadingAnimation as any} loop autoplay />
+    </div>
+  );
+}
+
 function deleteNodeFromTree(root: Node, target: Node): Node {
   if (root === null || root === undefined) return root;
   if (typeof root === 'string') return root;

package/src/pages/tabs/BuilderPanel.tsx

@@ -1,4 +1,4 @@
-import { Node } from '../..';
+import type { Node } from '../../types/Node';
 import { useLogRender } from '../../utils/useLogRender';
 import { Builder } from '../../components/Builder';
 import { useRenderStore } from '../../store';

package/src/pages/tabs/SideTool.tsx

@@ -1,11 +1,13 @@
 import React, { useEffect, useState } from 'react';
-import { JsonEditor } from 'json-edit-react';
+import { JsonTextEditor } from '../../components/JsonTextEditor';
 import { Modal } from '../../modals';
-import { Localication, Node } from '../..';
+import type { Node } from '../../types/Node';
+import type { Localication } from '../../types/PreviewConfig';
 import { useLogRender } from '../../utils/useLogRender';
 import { useRenderStore } from '../../store';
 import { Checkbox } from '../../components/Checkbox';
 import { LocalicationModal } from '../../modals/LocalicationModal';
+import { analyseAndProccess } from '../../utils/analyseNode';
 
 const screenStyleDefaults = {
   light: { backgroundColor: '#FDFDFD', color: '#161827' },
@@ -17,7 +19,7 @@ type ScreenColorKey = keyof (typeof screenStyleDefaults)['light'];
 
 type SideToolProps = {
   data: Node;
-  setData: (data: Node) => void;
+  setData: React.Dispatch<React.SetStateAction<Node>>;
 };
 
 const colorFields = [
@@ -108,27 +110,18 @@ export function SideTool({ data, setData }: SideToolProps) {
   };
 
   return (
-    <div
-      style={{
-        height: '100%',
-        display: 'flex',
-        flexDirection: 'column',
-        gap: 8,
-        backgroundColor: isCompactMode ? '#fff' : undefined,
-      }}
-    >
+    <div className="side-tool-container">
       <button
         type="button"
         className="editor-button"
         onClick={() => setIsCompactPanelVisible((prev) => !prev)}
         aria-pressed={isCompactPanelVisible}
-        style={{ alignSelf: 'flex-start' }}
       >
         {isCompactPanelVisible ? 'Hide tools' : 'Show tools'}
       </button>
 
       {isCompactPanelVisible && (
-        <div className="side-tool" style={{ display: 'flex', height: '100%' }}>
+        <div className="side-tool">
           <select
             value={appConfig.defaultLanguage ?? 'en'}
             onChange={(e) =>
@@ -233,12 +226,13 @@ export function SideTool({ data, setData }: SideToolProps) {
               </div>
               <div className="localication-modal__body">
                 <div className="localication-modal__editor">
-                  <JsonEditor
-                    rootName="debug"
-                    data={data as any}
-                    setData={setData as any}
+                  <JsonTextEditor
+                    rootName="node"
+                    value={data ?? {}}
+                    onChange={(next) =>
+                      setData(analyseAndProccess(next as Node) as Node)
+                    }
                     className="localication-modal__json-editor"
-                    maxWidth="100%"
                   />
                 </div>
               </div>

package/src/paywall/hooks/index.ts

@@ -0,0 +1,5 @@
+export { usePaywallCounter } from './usePaywallCounter';
+export { useCloseStatusPaywall } from './useCloseStatusPaywall';
+export { useCarouselOptionsSeperator } from './useCarouselOptionsSeperator';
+export { useCalculateLocalizedPrice } from './useCalculateLocalizedPrice';
+export { useDiscountRate } from './useDiscountRate';

package/src/paywall/hooks/useCalculateLocalizedPrice.ts

@@ -0,0 +1,6 @@
+/**
+ * Placeholder hook — will be implemented later.
+ */
+export function useCalculateLocalizedPrice(): string {
+  return '';
+}

package/src/paywall/hooks/useCarouselOptionsSeperator.ts

@@ -0,0 +1,8 @@
+/**
+ * Placeholder hook — will be implemented later.
+ *
+ * NOTE: name kept as `Seperator` to match existing external API usage.
+ */
+export function useCarouselOptionsSeperator(): string {
+  return '';
+}

package/src/paywall/hooks/useCloseStatusPaywall.ts

@@ -0,0 +1,6 @@
+/**
+ * Placeholder hook — will be implemented later.
+ */
+export function useCloseStatusPaywall(): boolean {
+  return false;
+}

package/src/paywall/hooks/useDiscountRate.ts

@@ -0,0 +1,6 @@
+/**
+ * Placeholder hook — will be implemented later.
+ */
+export function useDiscountRate(): number {
+  return 0;
+}

package/src/paywall/hooks/usePaywallCounter.ts

@@ -0,0 +1,6 @@
+/**
+ * Placeholder hook — will be implemented later.
+ */
+export function usePaywallCounter(): number {
+  return 0;
+}

package/src/paywall/types/benefits.ts

@@ -0,0 +1,44 @@
+/**
+ * Benefits are a simple key/value map used by paywall UIs to show feature bullets,
+ * trial metadata, headlines, etc.
+ *
+ * We keep the value type primitive so it serializes cleanly and is easy to mock.
+ */
+export type PaywallBenefitValue = string | number | boolean;
+
+export type PaywallBenefits = Record<string, PaywallBenefitValue>;
+
+export type PaywallBenefitEntry = {
+  key: string;
+  value: PaywallBenefitValue;
+};
+
+export function benefitMapToEntries(
+  map: PaywallBenefits | undefined,
+): PaywallBenefitEntry[] {
+  if (!map || typeof map !== 'object') return [];
+  return Object.entries(map)
+    .filter(([key]) => typeof key === 'string' && key.trim().length > 0)
+    .map(([key, value]) => ({ key, value: value as PaywallBenefitValue }));
+}
+
+export function benefitEntriesToMap(
+  entries: Array<PaywallBenefitEntry | null | undefined> | undefined,
+): PaywallBenefits {
+  const out: PaywallBenefits = {};
+  if (!Array.isArray(entries)) return out;
+  entries.forEach((entry) => {
+    const key = entry?.key?.toString?.().trim?.() ?? '';
+    if (!key) return;
+    const value = entry?.value as PaywallBenefitValue;
+    if (
+      typeof value !== 'string' &&
+      typeof value !== 'number' &&
+      typeof value !== 'boolean'
+    ) {
+      return;
+    }
+    out[key] = value;
+  });
+  return out;
+}

package/src/paywall/types/paywall-types.ts

@@ -0,0 +1,51 @@
+/**
+ * Simple paywall-related types.
+ *
+ * We keep this intentionally small and runtime-agnostic.
+ *
+ * Product fields are based on the common shape returned by `react-native-iap`
+ * calls like `getProducts()` / `getSubscriptions()`.
+ * See: `https://www.npmjs.com/package/react-native-iap`
+ */
+
+export type { PaywallBenefits, PaywallBenefitValue } from './benefits';
+
+/**
+ * Minimal "product" representation (compatible with `react-native-iap` product-ish objects).
+ *
+ * Note: `react-native-iap` has slightly different fields per platform/product type.
+ * This is the common subset most paywalls need.
+ */
+export interface Product {
+  /** iOS: `productId`, Android: `productId` */
+  productId: string;
+
+  /** Display name / title from the store (when available). */
+  title?: string;
+
+  /** Description from the store (when available). */
+  description?: string;
+
+  /**
+   * Localized formatted price (e.g. "$4.99", "€9,99").
+   * In `react-native-iap` this is typically `localizedPrice`.
+   */
+  localizedPrice?: string;
+
+  /**
+   * Raw price string from the store (often numeric string).
+   * In `react-native-iap` this is typically `price`.
+   */
+  price?: string;
+
+  /** Currency code (e.g. "USD", "EUR"). */
+  currency?: string;
+}
+
+/**
+ * A simple paywall model you can store/serialize.
+ */
+export interface PaywallModel {
+  product: Product[];
+  benefits: import('./benefits').PaywallBenefits;
+}