@developer_tribe/react-builder 1.1.0 → 1.2.0

package/src/modals/LocalicationModal.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { JsonTextEditor } from '../components/JsonTextEditor';
+import { Localication } from '../types/PreviewConfig';
+import Modal from './Modal';
+
+type LocalicationModalProps = {
+  data: Localication;
+  onChange: (next: Localication) => void;
+  onClose: () => void;
+};
+
+export function LocalicationModal({
+  data,
+  onChange,
+  onClose,
+}: LocalicationModalProps) {
+  const normalizedData = data ?? {};
+
+  return (
+    <Modal
+      onClose={onClose}
+      ariaLabelledBy="localication-modal-title"
+      className="modal--large modal--scrollable localication-modal"
+      contentClassName="localication-modal__content"
+    >
+      <div className="modal__header localication-modal__header">
+        <div className="localication-modal__header-main">
+          <h3 id="localication-modal-title" className="modal__title">
+            Localization data
+          </h3>
+          <p className="localication-modal__description">
+            Manage your translations directly from the JSON structure.
+          </p>
+        </div>
+        <button type="button" className="editor-button" onClick={onClose}>
+          Close
+        </button>
+      </div>
+      <div className="localication-modal__body">
+        <div className="localication-modal__editor">
+          <JsonTextEditor
+            rootName="localication"
+            value={normalizedData}
+            onChange={(next) => onChange(next as Localication)}
+            className="localication-modal__json-editor"
+          />
+        </div>
+      </div>
+    </Modal>
+  );
+}
+
+export default LocalicationModal;

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/Modal.tsx

@@ -0,0 +1,64 @@
+import React, { useEffect } from 'react';
+import { createPortal } from 'react-dom';
+
+type ModalProps = {
+  onClose: () => void;
+  ariaLabelledBy?: string;
+  children: React.ReactNode;
+  className?: string;
+  contentClassName?: string;
+  closeOnOverlayClick?: boolean;
+  closeOnEsc?: boolean;
+};
+
+export function Modal({
+  onClose,
+  ariaLabelledBy,
+  children,
+  className,
+  contentClassName,
+  closeOnOverlayClick = true,
+  closeOnEsc = true,
+}: ModalProps) {
+  useEffect(() => {
+    if (!closeOnEsc) return undefined;
+    if (typeof window === 'undefined') return undefined;
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        onClose();
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [closeOnEsc, onClose]);
+
+  const modalNode = (
+    <div
+      className={`modal${className ? ` ${className}` : ''}`}
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby={ariaLabelledBy}
+    >
+      <div
+        className="modal__overlay"
+        onClick={closeOnOverlayClick ? onClose : undefined}
+      />
+      <div
+        className={`modal__content${contentClassName ? ` ${contentClassName}` : ''}`}
+        role="document"
+      >
+        {children}
+      </div>
+    </div>
+  );
+
+  if (typeof document === 'undefined') {
+    return modalNode;
+  }
+
+  return createPortal(modalNode, document.body);
+}
+
+export default Modal;

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;