@developer_tribe/react-builder 1.0.4 → 1.0.5

package/src/modals/ProductEditModal.tsx

@@ -0,0 +1,215 @@
+import React, { useMemo, useState } from 'react';
+import type { Product } from '../paywall/types/paywall-types';
+import Modal from './Modal';
+
+type ProductEditModalProps = {
+  product: Product;
+  index: number;
+  onSave: (patch: Partial<Product>) => void;
+  onClose: () => void;
+};
+
+function randomInt(min: number, max: number): number {
+  return Math.floor(Math.random() * (max - min + 1)) + min;
+}
+
+function randomChoice<T>(list: T[]): T {
+  return list[randomInt(0, list.length - 1)];
+}
+
+function randomSku(): string {
+  const families = ['premium', 'pro', 'plus', 'gold', 'starter'];
+  const periods = ['weekly', 'monthly', 'yearly', 'lifetime'];
+  return `com.app.${randomChoice(families)}.${randomChoice(periods)}`;
+}
+
+function randomPrice(): {
+  price: string;
+  localizedPrice: string;
+  currency: string;
+} {
+  const currency = randomChoice(['USD', 'EUR', 'GBP', 'TRY']);
+  const major = randomChoice([1, 2, 3, 4, 5, 7, 9, 12, 19, 29, 49, 99]);
+  const minor = randomChoice([0, 49, 99]);
+  const price = `${major}.${minor.toString().padStart(2, '0')}`;
+  const symbol =
+    currency === 'USD'
+      ? '$'
+      : currency === 'EUR'
+        ? '€'
+        : currency === 'GBP'
+          ? '£'
+          : '₺';
+  return { price, localizedPrice: `${symbol}${price}`, currency };
+}
+
+export function ProductEditModal({
+  product,
+  index,
+  onSave,
+  onClose,
+}: ProductEditModalProps) {
+  const initial = useMemo(
+    () => ({
+      productId: product?.productId ?? '',
+      title: product?.title ?? '',
+      description: product?.description ?? '',
+      localizedPrice: product?.localizedPrice ?? '',
+      price: product?.price ?? '',
+      currency: product?.currency ?? '',
+    }),
+    [product],
+  );
+
+  const [draft, setDraft] = useState(initial);
+
+  const canSave = draft.productId.trim().length > 0;
+
+  const applyRandom = () => {
+    const price = randomPrice();
+    const title = randomChoice([
+      'Premium',
+      'Pro',
+      'Plus',
+      'Gold',
+      'Starter',
+      'Unlimited',
+    ]);
+    const period = randomChoice(['Weekly', 'Monthly', 'Yearly', 'Lifetime']);
+    setDraft({
+      productId: randomSku(),
+      title: `${title} ${period}`,
+      description: randomChoice([
+        'Unlock all features.',
+        'Full access to premium content.',
+        'Remove ads and get more features.',
+        'Best value for power users.',
+      ]),
+      localizedPrice: price.localizedPrice,
+      price: price.price,
+      currency: price.currency,
+    });
+  };
+
+  return (
+    <Modal
+      onClose={onClose}
+      ariaLabelledBy="product-edit-modal-title"
+      contentClassName="product-edit-modal"
+    >
+      <div className="modal__header">
+        <h3 id="product-edit-modal-title" className="modal__title">
+          Edit product #{index + 1}
+        </h3>
+        <button type="button" className="editor-button" onClick={onClose}>
+          Close
+        </button>
+      </div>
+
+      <div className="product-edit-modal__body">
+        <div className="form-row">
+          <label htmlFor="productId">productId</label>
+          <input
+            id="productId"
+            className="input"
+            value={draft.productId}
+            onChange={(e) =>
+              setDraft((prev) => ({ ...prev, productId: e.target.value }))
+            }
+            placeholder="com.app.subscription.monthly"
+          />
+        </div>
+
+        <div className="form-row">
+          <label htmlFor="title">title</label>
+          <input
+            id="title"
+            className="input"
+            value={draft.title}
+            onChange={(e) =>
+              setDraft((prev) => ({ ...prev, title: e.target.value }))
+            }
+            placeholder="Monthly Premium"
+          />
+        </div>
+
+        <div className="form-row">
+          <label htmlFor="description">description</label>
+          <textarea
+            id="description"
+            className="input product-edit-modal__textarea"
+            value={draft.description}
+            onChange={(e) =>
+              setDraft((prev) => ({ ...prev, description: e.target.value }))
+            }
+            placeholder="Full access to all features..."
+          />
+        </div>
+
+        <div className="form-row">
+          <label htmlFor="localizedPrice">localizedPrice</label>
+          <input
+            id="localizedPrice"
+            className="input"
+            value={draft.localizedPrice}
+            onChange={(e) =>
+              setDraft((prev) => ({ ...prev, localizedPrice: e.target.value }))
+            }
+            placeholder="$4.99"
+          />
+        </div>
+
+        <div className="form-row">
+          <label htmlFor="price">price</label>
+          <input
+            id="price"
+            className="input"
+            value={draft.price}
+            onChange={(e) =>
+              setDraft((prev) => ({ ...prev, price: e.target.value }))
+            }
+            placeholder="4.99"
+          />
+        </div>
+
+        <div className="form-row">
+          <label htmlFor="currency">currency</label>
+          <input
+            id="currency"
+            className="input"
+            value={draft.currency}
+            onChange={(e) =>
+              setDraft((prev) => ({ ...prev, currency: e.target.value }))
+            }
+            placeholder="USD"
+          />
+        </div>
+
+        <div className="form-actions">
+          <button
+            type="button"
+            className="editor-button"
+            onClick={applyRandom}
+            title="Fill with random values"
+          >
+            Random
+          </button>
+          <button
+            type="button"
+            className="editor-button"
+            onClick={() => onSave(draft)}
+            disabled={!canSave}
+            title={canSave ? 'Save' : 'productId is required'}
+          >
+            Save
+          </button>
+          <button type="button" className="editor-button" onClick={onClose}>
+            Cancel
+          </button>
+        </div>
+      </div>
+    </Modal>
+  );
+}
+
+export default ProductEditModal;

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);
@@ -87,6 +107,10 @@ export function ProjectPage({
     };
   }, [appConfig, project.name]);
 
+  useEffect(() => {
+    setProjectName(name);
+  }, [name, setProjectName]);
+
   useEffect(() => {
     setProjectColors(resolvedProjectColors);
     return () => setProjectColors(undefined);
@@ -122,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);
@@ -133,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
@@ -233,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"
@@ -295,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,7 +1,8 @@
 import React, { useEffect, useState } from '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';
@@ -109,20 +110,12 @@ export function SideTool({ data, setData }: SideToolProps) {
   };
 
   return (
-    <div
-      style={{
-        height: '100%',
-        display: 'flex',
-        flexDirection: 'column',
-        gap: 8,
-      }}
-    >
+    <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>

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;
+}