--- 

+++ 

@@ -2,6 +2,7 @@

 import {
-    el, mount, card, button, field, fieldValue, modal, toast, confirmDialog,
-    pill, loadingBlock, emptyBlock, errorBlock, toggleSwitch,
+    el, mount, card, button, modal, toast, confirmDialog,
+    pill, loadingBlock, emptyBlock, errorBlock, toggleSwitch, fmtNum,
 } from '../core/ui.js';
 import { t, extendStrings } from '../core/i18n.js';
+import { paymentRuleForm } from './payment_condition_editor.js';
 
@@ -72,22 +73,3 @@

 
-const CHECKS = ['PAYMENT_COUNT', 'PAYMENT_AMOUNT', 'USER_AGE', 'SUBSCRIPTION_COUNT'];
-const OPS = ['>=', '<=', '=', '>', '<', '!='];
-const METHOD_CHECKS = { PAYMENT_COUNT: 1, PAYMENT_AMOUNT: 1 };
-
-// Operator symbol -> friendly i18n label key. The <option> value stays the
-// symbol (so the backend is unaffected); only the displayed text is friendly.
-const OP_LABELS = {
-    '>=': 'op_gte', '<=': 'op_lte', '=': 'op_eq',
-    '>': 'op_gt', '<': 'op_lt', '!=': 'op_ne',
-};
-function opLabel(op) {
-    return OP_LABELS[op] ? t(OP_LABELS[op]) : op;
-}
-
 let META = { methods: [], base_method_ids: [] };
-
-function methodTitle(id) {
-    const m = META.methods.find(function (x) { return x.id === id; });
-    return m ? m.title : ('#' + id);
-}
 
@@ -114,3 +96,3 @@

         : [emptyBlock()];
-    mount(host, [head].concat(list));
+    mount(host, [head,el('p',{class:'rules-intro hint',text:'مشخص کنید کدام روش پرداخت، برای چه کاربرانی در دسترس باشد. مثلاً پرداخت ارزی پس از اولین پرداخت موفق.'})].concat(list));
 }
@@ -130,3 +112,4 @@

         children: [
-            el('div', { class: 'muted', text: c.description || '' }),
+            c.description?el('p', {class:'hint',text:c.description}):null,
+            el('span',{class:'hint',text:fmtNum(c.leaf_count||1)+' شرط برای دسترسی'}),
             el('div', { class: 'row', style: { gap: '6px', marginTop: '6px' } },
@@ -135,3 +118,3 @@

                 el('span', { class: 'muted', text: t('pcx_active') }),
-                toggleSwitch({ checked: c.is_active, onChange: function (next) {
+                toggleSwitch({ label:'وضعیت قانون '+c.name,checked: c.is_active, onChange: function (next) {
                     return api('/payment-conditions/' + c.id + '/toggle',
@@ -171,2 +154,3 @@

     load.then(function (data) {
+        if(!host.isConnected)return;
         const state = {
@@ -176,4 +160,3 @@

             priority: data ? data.priority : 1,
-            tree: (data && data.tree && data.tree.children && data.tree.children.length)
-                ? data.tree : newGroup(),
+            tree: data?.tree ? structuredClone(data.tree) : newGroup(),
             unlocked: data ? (data.unlocked_method_ids || []) : [],
@@ -185,48 +168,9 @@

 function renderEditor(host, groupId, state) {
-    const nameF = field({ label: t('pcx_name'), value: state.name });
-    const descF = field({ label: t('pcx_desc'), value: state.description });
-    const activeToggle = toggleSwitch({ checked: state.is_active, onChange: function (next) {
-        state.is_active = next; return Promise.resolve();
-    } });
-    const activeRow = el('div', { class: 'row', style: { gap: '8px', marginTop: '6px', alignItems: 'center' } },
-        [el('span', { text: t('pcx_active') }), activeToggle]);
-    const prioF = field({ label: t('pcx_priority'), type: 'number', value: state.priority, min: '1', hint: t('pcx_priority_hint') });
-    const advanced = el('details', {}, [el('summary', { text: t('pcx_advanced') }), prioF]);
-
-    const treeBox = el('div', { class: 'pcx-tree' });
-    const summaryBox = el('div', { class: 'pcx-summary muted' });
-    const methodsBox = el('div', { class: 'pcx-methods' });
-    const warnBox = el('div', { class: 'pcx-warn' });
-
-    function refresh() {
-        mount(treeBox, [renderNode(state.tree, null, -1, refresh)]);
-        mount(summaryBox, [el('div', { text: t('pcx_summary') + ': ' + summarize(state.tree) })]);
-        mount(methodsBox, [renderMethods(state, warnBox)]);
-        renderWarn(state, warnBox);
-    }
-    refresh();
-
-    const testBox = renderTester(state);
-
+    const form = paymentRuleForm(state, META);
     const m = modal({
-        title: groupId == null ? t('pcx_add') : t('pcx_edit'),
-        body: [
-            el('div', { class: 'pcx-editor' }, [
-                nameF, descF, activeRow, advanced,
-                el('label', { class: 'pcx-section-label', text: t('pcx_unlock') }), methodsBox, warnBox,
-                el('hr'),
-                el('label', { class: 'pcx-section-label', text: t('pcx_conditions') }),
-                treeBox, summaryBox,
-                el('hr'),
-                testBox,
-            ]),
-        ],
-        actions: [
-            button({ label: t('pcx_save'), onClick: function () {
-                state.name = fieldValue(nameF);
-                state.description = fieldValue(descF);
-                state.priority = parseInt(fieldValue(prioF), 10) || 1;
-                save(host, groupId, state, m);
-            } }),
-        ],
+        title: groupId == null ? t('pcx_add') : t('pcx_edit') + ' ' + state.name,
+        body: form.body,
+        actions: [button({label:t('pcx_save'), onClick:event=>{
+            if(form.read())save(host, groupId, state, m, event.currentTarget);
+        }})],
     });
@@ -234,140 +178,3 @@

 
-function renderMethods(state, warnBox) {
-    const wrap = el('div', { class: 'row', style: { flexWrap: 'wrap', gap: '8px' } });
-    META.methods.forEach(function (mth) {
-        const checked = state.unlocked.indexOf(mth.id) >= 0;
-        const cb = el('input', { type: 'checkbox' });
-        cb.checked = checked;
-        cb.addEventListener('change', function () {
-            const i = state.unlocked.indexOf(mth.id);
-            if (cb.checked && i < 0) state.unlocked.push(mth.id);
-            if (!cb.checked && i >= 0) state.unlocked.splice(i, 1);
-            renderWarn(state, warnBox);
-        });
-        wrap.appendChild(el('label', { class: 'pcx-method' }, [cb, ' ' + mth.title]));
-    });
-    return wrap;
-}
-
-function renderWarn(state, warnBox) {
-    const msgs = [];
-    const baseSet = META.base_method_ids || [];
-    state.unlocked.forEach(function (id) {
-        if (baseSet.indexOf(id) >= 0) msgs.push(t('pcx_base_warn') + ' (' + methodTitle(id) + ')');
-    });
-    // Would gating these empty the always-available set entirely?
-    const remainingBase = baseSet.filter(function (id) { return state.unlocked.indexOf(id) < 0; });
-    if (baseSet.length > 0 && remainingBase.length === 0) msgs.push(t('pcx_zero_base_warn'));
-    mount(warnBox, msgs.map(function (mm) { return el('div', { class: 'warn-note', text: mm }); }));
-}
-
-function renderNode(node, parent, index, refresh) {
-    if (node.type === 'condition') return renderCondition(node, parent, index, refresh);
-    const connF = el('select', {});
-    [['ALL', t('pcx_match_all')], ['ANY', t('pcx_match_any')]].forEach(function (o) {
-        const opt = el('option', { value: o[0] }, o[1]);
-        if (o[0] === node.connector) opt.selected = true;
-        connF.appendChild(opt);
-    });
-    connF.addEventListener('change', function () { node.connector = connF.value; refresh(); });
-
-    const childrenBox = el('div', { class: 'pcx-children' },
-        node.children.map(function (ch, i) { return renderNode(ch, node, i, refresh); }));
-
-    const controls = el('div', { class: 'row', style: { gap: '6px' } }, [
-        button({ label: t('pcx_add_cond'), small: true, kind: 'ghost', onClick: function () {
-            node.children.push(newCondition()); refresh(); } }),
-        button({ label: t('pcx_add_group'), small: true, kind: 'ghost', onClick: function () {
-            node.children.push(newGroup()); refresh(); } }),
-        parent ? button({ label: '✕', small: true, kind: 'danger', onClick: function () {
-            parent.children.splice(index, 1); refresh(); } }) : null,
-    ]);
-    return el('div', { class: 'pcx-group' }, [connF, childrenBox, controls]);
-}
-
-function renderCondition(node, parent, index, refresh) {
-    const checkF = el('select', {});
-    CHECKS.forEach(function (ck) {
-        const opt = el('option', { value: ck }, t('chk_' + ck));
-        if (ck === node.check) opt.selected = true;
-        checkF.appendChild(opt);
-    });
-    checkF.addEventListener('change', function () {
-        node.check = checkF.value;
-        if (!METHOD_CHECKS[node.check]) node.payment_type_id = null;
-        else if (node.payment_type_id == null)
-            node.payment_type_id = (META.methods[0] && META.methods[0].id) || null;
-        refresh();
-    });
-
-    let methodF = null;
-    if (METHOD_CHECKS[node.check]) {
-        methodF = el('select', {});
-        META.methods.forEach(function (mth) {
-            const opt = el('option', { value: mth.id }, mth.title);
-            if (mth.id === node.payment_type_id) opt.selected = true;
-            methodF.appendChild(opt);
-        });
-        methodF.addEventListener('change', function () {
-            node.payment_type_id = parseInt(methodF.value, 10); refresh();
-        });
-    }
-
-    const opF = el('select', {});
-    OPS.forEach(function (op) {
-        const opt = el('option', { value: op }, opLabel(op));
-        if (op === node.op) opt.selected = true;
-        opF.appendChild(opt);
-    });
-    opF.addEventListener('change', function () { node.op = opF.value; refresh(); });
-
-    const valF = el('input', { type: 'number', value: node.value, min: '0' });
-    valF.addEventListener('input', function () {
-        node.value = valF.value === '' ? 0 : Number(valF.value);
-    });
-
-    const del = parent ? button({ label: '✕', small: true, kind: 'danger',
-        onClick: function () { parent.children.splice(index, 1); refresh(); } }) : null;
-
-    return el('div', { class: 'pcx-cond row', style: { gap: '6px', flexWrap: 'wrap' } },
-        [checkF, methodF, opF, valF, del]);
-}
-
-function summarize(node) {
-    if (node.type === 'condition') {
-        const m = METHOD_CHECKS[node.check] ? (' [' + methodTitle(node.payment_type_id) + ']') : '';
-        return t('chk_' + node.check) + m + ' ' + opLabel(node.op) + ' ' + node.value;
-    }
-    const join = node.connector === 'ALL' ? ' و ' : ' یا ';
-    return '(' + node.children.map(summarize).join(join) + ')';
-}
-
-function renderTester(state) {
-    const uidF = field({ label: t('pcx_user_id'), type: 'number', ltr: true });
-    const out = el('div', { class: 'pcx-test-out' });
-    const runBtn = button({ label: t('pcx_run'), small: true, onClick: function () {
-        const uid = parseInt(fieldValue(uidF), 10);
-        if (!uid) return;
-        mount(out, [loadingBlock()]);
-        api('/payment-conditions/test', { method: 'POST', body: {
-            user_id: uid, tree: state.tree, unlocked_method_ids: state.unlocked,
-        } }).then(function (r) { drawTestResult(out, r.result); })
-            .catch(function (e) { mount(out, [el('div', { class: 'warn-note', text: errText(e) || 'error' })]); });
-    } });
-    return el('div', {}, [el('label', { text: t('pcx_test') }), uidF, runBtn, out]);
-}
-
-function drawTestResult(out, res) {
-    const rows = (res.leaves || []).map(function (lf) {
-        const mark = lf.passed ? '✓' : '✗';
-        return el('div', { class: lf.passed ? 'ok-note' : 'warn-note',
-            text: mark + ' ' + t('chk_' + lf.check) + ' ' + opLabel(lf.op) + ' ' + lf.required +
-                  '  (=' + lf.actual + ')' });
-    });
-    rows.push(el('div', { style: { fontWeight: '700', marginTop: '6px' },
-        text: res.overall ? t('pcx_result_unlocked') : t('pcx_result_locked') }));
-    mount(out, rows);
-}
-
-function save(host, groupId, state, m) {
+function save(host, groupId, state, m, submit) {
     if (!state.name || !state.name.trim()) { toast(t('pcx_name'), 'error'); return; }
@@ -378,2 +185,3 @@

     };
+    submit.disabled = true;
     const req = groupId == null
@@ -382,3 +190,4 @@

     req.then(function () { toast(t('pcx_saved')); m.close(); loadRules(host); })
-       .catch(function (e) { toast(errText(e) || 'error', 'error'); });
+       .catch(function (e) { toast(errText(e) || 'error', 'error'); })
+       .finally(function () { submit.disabled = false; });
 }