@developer_tribe/react-builder 1.0.4 → 1.0.5

package/src/modals/BenefitPresetsModal.tsx

@@ -0,0 +1,166 @@
+import React, { useMemo } from 'react';
+import Modal from './Modal';
+import type {
+  PaywallBenefits,
+  PaywallBenefitValue,
+} from '../paywall/types/benefits';
+import presetsJson from '../assets/benefits.json';
+
+type PresetMap = Record<string, PaywallBenefits>;
+const DEFAULT_PRESET_KEY = 'Embeded Paywall';
+
+type BenefitPresetsModalProps = {
+  current: PaywallBenefits;
+  onReplace: (next: PaywallBenefits) => void;
+  onMerge: (next: PaywallBenefits) => void;
+  onClose: () => void;
+};
+
+function normalizeBenefits(raw: unknown): PaywallBenefits {
+  if (!raw || typeof raw !== 'object' || Array.isArray(raw)) return {};
+  const out: PaywallBenefits = {};
+  Object.entries(raw as Record<string, unknown>).forEach(([key, value]) => {
+    const normalizedKey = typeof key === 'string' ? key.trim() : '';
+    if (!normalizedKey) return;
+    if (
+      typeof value === 'string' ||
+      typeof value === 'number' ||
+      typeof value === 'boolean'
+    ) {
+      out[normalizedKey] = value as PaywallBenefitValue;
+    }
+  });
+  return out;
+}
+
+function getPresetMap(): PresetMap {
+  const raw = presetsJson as unknown as PresetMap;
+  const safe: PresetMap = {};
+  Object.entries(raw ?? {}).forEach(([key, map]) => {
+    const normalizedKey = typeof key === 'string' ? key.trim() : '';
+    if (!normalizedKey) return;
+    safe[normalizedKey] = normalizeBenefits(map);
+  });
+  return safe;
+}
+
+function countBenefits(map: PaywallBenefits): number {
+  if (!map || typeof map !== 'object') return 0;
+  return Object.keys(map).length;
+}
+
+export function BenefitPresetsModal({
+  current,
+  onReplace,
+  onMerge,
+  onClose,
+}: BenefitPresetsModalProps) {
+  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="benefit-presets-modal-title"
+      contentClassName="benefit-presets-modal"
+    >
+      <div className="modal__header">
+        <h3 id="benefit-presets-modal-title" className="modal__title">
+          Benefit presets
+        </h3>
+        <button type="button" className="editor-button" onClick={onClose}>
+          Close
+        </button>
+      </div>
+
+      <div className="benefit-presets-modal__body">
+        <section className="benefit-presets-modal__section">
+          <p className="benefit-presets-modal__section-title">
+            Current ({countBenefits(current)})
+          </p>
+          <p className="benefit-presets-modal__muted">
+            Pick a preset below to replace or merge into the current map.
+          </p>
+        </section>
+
+        <section className="benefit-presets-modal__section">
+          <p className="benefit-presets-modal__section-title">Presets</p>
+
+          {presetEntries.length ? (
+            <div className="benefit-presets-modal__grid">
+              {presetEntries.map(([key, map]) => {
+                const entries = Object.entries(map);
+                return (
+                  <div key={key} className="benefit-presets-modal__card">
+                    <div className="benefit-presets-modal__card-header">
+                      <p className="benefit-presets-modal__card-title">{key}</p>
+                      <p className="benefit-presets-modal__card-count">
+                        {entries.length} benefits
+                      </p>
+                    </div>
+
+                    <ul className="benefit-presets-modal__card-list">
+                      {entries.slice(0, 3).map(([k, v]) => (
+                        <li
+                          key={k}
+                          className="benefit-presets-modal__card-item"
+                        >
+                          {k}: {String(v)}
+                        </li>
+                      ))}
+                      {entries.length > 3 ? (
+                        <li className="benefit-presets-modal__card-item benefit-presets-modal__muted">
+                          +{entries.length - 3} more…
+                        </li>
+                      ) : null}
+                    </ul>
+
+                    <div className="benefit-presets-modal__actions">
+                      <button
+                        type="button"
+                        className="editor-button"
+                        onClick={() => {
+                          onReplace(map);
+                          onClose();
+                        }}
+                      >
+                        Replace
+                      </button>
+                      <button
+                        type="button"
+                        className="editor-button"
+                        onClick={() => {
+                          onMerge(map);
+                          onClose();
+                        }}
+                        title="Merges preset into current (preset values overwrite existing keys)"
+                      >
+                        Merge
+                      </button>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          ) : (
+            <p className="benefit-presets-modal__muted">No presets found.</p>
+          )}
+        </section>
+      </div>
+    </Modal>
+  );
+}
+
+export default BenefitPresetsModal;

package/src/modals/IconPickerModal.tsx

@@ -0,0 +1,109 @@
+import React, { useMemo, useState } from 'react';
+import Modal from './Modal';
+import { Icons, type IconsType } from '../types/Icons';
+import { Icon } from '../components/Icon.generated';
+
+type IconPickerModalProps = {
+  value?: IconsType;
+  onSelect: (icon: IconsType) => void;
+  onClose: () => void;
+  onClear?: () => void;
+};
+
+export function IconPickerModal({
+  value,
+  onSelect,
+  onClose,
+  onClear,
+}: IconPickerModalProps) {
+  const [query, setQuery] = useState('');
+
+  const filtered = useMemo(() => {
+    const q = query.trim().toLowerCase();
+    if (!q) return Icons;
+    return Icons.filter((name) => name.toLowerCase().includes(q));
+  }, [query]);
+
+  return (
+    <Modal onClose={onClose} ariaLabelledBy="icon-picker-title">
+      <div style={{ display: 'grid', gap: 12 }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+          <p id="icon-picker-title" style={{ margin: 0, fontWeight: 700 }}>
+            Select Icon
+          </p>
+          <div style={{ flex: 1 }} />
+          {onClear ? (
+            <button type="button" className="editor-button" onClick={onClear}>
+              Clear
+            </button>
+          ) : null}
+          <button type="button" className="editor-button" onClick={onClose}>
+            Close
+          </button>
+        </div>
+
+        <input
+          type="text"
+          className="input"
+          placeholder="Search icons..."
+          value={query}
+          onChange={(e) => setQuery(e.target.value)}
+          autoFocus
+        />
+
+        <div style={{ fontSize: 12, color: '#666' }}>
+          {filtered.length} / {Icons.length}
+          {value ? ` • Selected: ${value}` : ''}
+        </div>
+
+        <div
+          style={{
+            display: 'grid',
+            gridTemplateColumns: 'repeat(auto-fill, minmax(120px, 1fr))',
+            gap: 8,
+            maxHeight: '60vh',
+            overflow: 'auto',
+            paddingRight: 4,
+          }}
+        >
+          {filtered.map((name) => {
+            const isActive = value === name;
+            return (
+              <button
+                key={name}
+                type="button"
+                onClick={() => onSelect(name)}
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: 8,
+                  borderRadius: 8,
+                  border: isActive ? '2px solid #222' : '1px solid #ddd',
+                  padding: '8px 10px',
+                  background: '#fff',
+                  cursor: 'pointer',
+                }}
+                aria-label={`Select icon ${name}`}
+              >
+                <Icon iconType={name} size={18} />
+                <span
+                  style={{
+                    fontSize: 12,
+                    fontWeight: isActive ? 700 : 500,
+                    textAlign: 'left',
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    whiteSpace: 'nowrap',
+                  }}
+                  title={name}
+                >
+                  {name}
+                </span>
+              </button>
+            );
+          })}
+        </div>
+      </div>
+    </Modal>
+  );
+}

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;