@developer_tribe/react-builder 1.0.4 → 1.0.6

package/src/modals/MockableFeatureModal.tsx

@@ -0,0 +1,292 @@
+import React, { useState } from 'react';
+import Modal from './Modal';
+import { useRenderStore } from '../store';
+import { ProductEditModal } from './ProductEditModal';
+import { ProductPresetsModal } from './ProductPresetsModal';
+import { BenefitEditModal } from './BenefitEditModal';
+import { BenefitPresetsModal } from './BenefitPresetsModal';
+import type {
+  PaywallBenefits,
+  PaywallBenefitValue,
+} from '../paywall/types/benefits';
+
+type MockableFeatureModalProps = {
+  featureKey: string;
+  onClose: () => void;
+};
+
+export function MockableFeatureModal({
+  featureKey,
+  onClose,
+}: MockableFeatureModalProps) {
+  const {
+    products,
+    addProduct,
+    removeProduct,
+    updateProduct,
+    setProducts,
+    clearProducts,
+    benefits,
+    setBenefits,
+    clearBenefits,
+    upsertBenefit,
+    removeBenefit,
+    renameBenefit,
+  } = useRenderStore((s) => ({
+    products: s.products,
+    addProduct: s.addProduct,
+    removeProduct: s.removeProduct,
+    updateProduct: s.updateProduct,
+    setProducts: s.setProducts,
+    clearProducts: s.clearProducts,
+    benefits: s.benefits,
+    setBenefits: s.setBenefits,
+    clearBenefits: s.clearBenefits,
+    upsertBenefit: s.upsertBenefit,
+    removeBenefit: s.removeBenefit,
+    renameBenefit: s.renameBenefit,
+  }));
+
+  const [editingIndex, setEditingIndex] = useState<number | null>(null);
+  const [showPresets, setShowPresets] = useState(false);
+  const [editingBenefitKey, setEditingBenefitKey] = useState<string | null>(
+    null,
+  );
+  const [showBenefitPresets, setShowBenefitPresets] = useState(false);
+
+  const benefitEntries = Object.entries(
+    benefits && typeof benefits === 'object' && !Array.isArray(benefits)
+      ? (benefits as PaywallBenefits)
+      : {},
+  );
+
+  const addBenefit = () => {
+    const base = 'benefit';
+    const existing = new Set(benefitEntries.map(([k]) => k));
+    let nextKey = `${base}_1`;
+    let i = 1;
+    while (existing.has(nextKey)) {
+      i += 1;
+      nextKey = `${base}_${i}`;
+    }
+    upsertBenefit(nextKey, true);
+    setEditingBenefitKey(nextKey);
+  };
+
+  return (
+    <>
+      <Modal
+        onClose={onClose}
+        ariaLabelledBy="mockable-feature-modal-title"
+        contentClassName="mockable-feature-modal"
+      >
+        <div className="modal__header">
+          <h3 id="mockable-feature-modal-title" className="modal__title">
+            Mockable: {featureKey}
+          </h3>
+          <button type="button" className="editor-button" onClick={onClose}>
+            Close
+          </button>
+        </div>
+        <div className="mockable-feature-modal__body">
+          {featureKey === 'products' ? (
+            <>
+              <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
+                <button
+                  type="button"
+                  className="editor-button"
+                  onClick={addProduct}
+                >
+                  Add product
+                </button>
+                <button
+                  type="button"
+                  className="editor-button"
+                  onClick={() => setShowPresets(true)}
+                >
+                  Presets
+                </button>
+                <button
+                  type="button"
+                  className="editor-button"
+                  onClick={clearProducts}
+                  disabled={products.length === 0}
+                >
+                  Clear
+                </button>
+              </div>
+
+              <div style={{ marginTop: 12 }}>
+                {products.length ? (
+                  <ul style={{ margin: 0, paddingLeft: 18 }}>
+                    {products.map((p, index) => (
+                      <li
+                        key={`${index}-${p?.productId ?? ''}`}
+                        style={{
+                          display: 'flex',
+                          gap: 8,
+                          marginBottom: 8,
+                          alignItems: 'center',
+                        }}
+                      >
+                        <span style={{ flex: 1 }}>
+                          {p?.productId?.trim()
+                            ? p.productId
+                            : '(empty productId)'}
+                        </span>
+                        <button
+                          type="button"
+                          className="editor-button"
+                          onClick={() => setEditingIndex(index)}
+                        >
+                          Edit
+                        </button>
+                        <button
+                          type="button"
+                          className="editor-button"
+                          onClick={() => removeProduct(index)}
+                        >
+                          Remove
+                        </button>
+                      </li>
+                    ))}
+                  </ul>
+                ) : (
+                  <p style={{ margin: 0, opacity: 0.7 }}>No products yet.</p>
+                )}
+              </div>
+            </>
+          ) : featureKey === 'benefits' ? (
+            <>
+              <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
+                <button
+                  type="button"
+                  className="editor-button"
+                  onClick={addBenefit}
+                >
+                  Add benefit
+                </button>
+                <button
+                  type="button"
+                  className="editor-button"
+                  onClick={() => setShowBenefitPresets(true)}
+                >
+                  Presets
+                </button>
+                <button
+                  type="button"
+                  className="editor-button"
+                  onClick={clearBenefits}
+                  disabled={benefitEntries.length === 0}
+                >
+                  Clear
+                </button>
+              </div>
+
+              <div style={{ marginTop: 12 }}>
+                {benefitEntries.length ? (
+                  <ul style={{ margin: 0, paddingLeft: 18 }}>
+                    {benefitEntries.map(([key, value], index) => (
+                      <li
+                        key={`${index}-${key}`}
+                        style={{
+                          display: 'flex',
+                          gap: 8,
+                          marginBottom: 8,
+                          alignItems: 'center',
+                        }}
+                      >
+                        <span style={{ flex: 1, wordBreak: 'break-word' }}>
+                          {key}: {String(value)}
+                        </span>
+                        <button
+                          type="button"
+                          className="editor-button"
+                          onClick={() => setEditingBenefitKey(key)}
+                        >
+                          Edit
+                        </button>
+                        <button
+                          type="button"
+                          className="editor-button"
+                          onClick={() => removeBenefit(key)}
+                        >
+                          Remove
+                        </button>
+                      </li>
+                    ))}
+                  </ul>
+                ) : (
+                  <p style={{ margin: 0, opacity: 0.7 }}>No benefits yet.</p>
+                )}
+              </div>
+            </>
+          ) : (
+            <p style={{ margin: 0, opacity: 0.7 }}>
+              No mock UI yet for “{featureKey}”.
+            </p>
+          )}
+        </div>
+      </Modal>
+
+      {featureKey === 'products' && editingIndex !== null ? (
+        <ProductEditModal
+          index={editingIndex}
+          product={products[editingIndex]}
+          onClose={() => setEditingIndex(null)}
+          onSave={(patch) => {
+            updateProduct(editingIndex, patch);
+            setEditingIndex(null);
+          }}
+        />
+      ) : null}
+
+      {featureKey === 'products' && showPresets ? (
+        <ProductPresetsModal
+          current={products}
+          onClose={() => setShowPresets(false)}
+          onReplace={(next) => setProducts(next)}
+          onAppend={(next) =>
+            setProducts([...(products ?? []), ...(next ?? [])])
+          }
+        />
+      ) : null}
+
+      {featureKey === 'benefits' && editingBenefitKey !== null ? (
+        <BenefitEditModal
+          index={Math.max(
+            0,
+            benefitEntries.findIndex(([k]) => k === editingBenefitKey),
+          )}
+          benefitKey={editingBenefitKey}
+          benefitValue={
+            (benefits?.[editingBenefitKey] as PaywallBenefitValue) ?? ''
+          }
+          onClose={() => setEditingBenefitKey(null)}
+          onSave={({ key, value }) => {
+            const nextKey = key.trim();
+            const prevKey = editingBenefitKey;
+            if (prevKey !== nextKey) {
+              renameBenefit(prevKey, nextKey);
+            }
+            upsertBenefit(nextKey, value);
+            setEditingBenefitKey(null);
+          }}
+        />
+      ) : null}
+
+      {featureKey === 'benefits' && showBenefitPresets ? (
+        <BenefitPresetsModal
+          current={benefits}
+          onClose={() => setShowBenefitPresets(false)}
+          onReplace={(next) => setBenefits(next)}
+          onMerge={(next) =>
+            setBenefits({ ...(benefits ?? {}), ...(next ?? {}) })
+          }
+        />
+      ) : null}
+    </>
+  );
+}
+
+export default MockableFeatureModal;

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;