/* ============================================================
LISTING VARIATIONS (Phase 1 — text-only, simplified)
Shared module for vendor editor, customer selector, staff summary.
Stored inside each listing's existing meta.jsonb as meta.variations.
Exposes: window.SarayaVariations (helpers),
window.VariationEditor, window.VariationSelector,
window.VariationSummary
============================================================ */
(function () {
var React = window.React;
if (!React) { return; }
var useState = React.useState;
function readVariations(item) {
if (!item) return [];
var v = item.variations;
if (!Array.isArray(v) && item.meta && Array.isArray(item.meta.variations)) v = item.meta.variations;
return Array.isArray(v) ? v : [];
}
// selection is a map { groupIndex: optionIndex }
function priceDelta(groups, selection) {
var sum = 0;
(groups || []).forEach(function (g, gi) {
var oi = selection ? selection[gi] : undefined;
if (oi === undefined || oi === null) return;
var opt = (g.options || [])[oi];
if (opt && opt.is_available !== false) {
var pa = Number(opt.price_adjustment);
if (!isNaN(pa)) sum += pa;
}
});
return sum;
}
function selectionSummary(groups, selection, ar) {
var parts = [];
(groups || []).forEach(function (g, gi) {
var oi = selection ? selection[gi] : undefined;
if (oi === undefined || oi === null) return;
var opt = (g.options || [])[oi];
if (!opt) return;
var gname = (ar && g.name_ar) ? g.name_ar : (g.name || g.type || '');
var oname = (ar && opt.label_ar) ? opt.label_ar : (opt.label || opt.value || '');
if (oname) parts.push(gname + ': ' + oname);
});
return parts.join(' | ');
}
// image_url of the last-selected option that has one (for main-image swap)
function selectedImage(groups, selection) {
var img = '';
(groups || []).forEach(function (g, gi) {
var oi = selection ? selection[gi] : undefined;
if (oi === undefined || oi === null) return;
var opt = (g.options || [])[oi];
if (opt && opt.image_url) img = opt.image_url;
});
return img;
}
/* ---------- Vendor editor (simplified) ---------- */
function VariationEditor(props) {
var ar = props.ar;
var groups = Array.isArray(props.value) ? props.value : [];
var upSt = useState({});
var uploading = upSt[0];
var setUploading = upSt[1];
var handleUpload = function (gi, oi) {
return function (e) {
var file = e.target.files && e.target.files[0];
if (!file) return;
if (!(window.SarayaService && window.SarayaService.storage)) { return; }
var key = gi + '-' + oi;
setUploading(function (u) { var n = Object.assign({}, u); n[key] = true; return n; });
window.SarayaService.storage.uploadListingImage(props.vendorId, file, true).then(function (res) {
if (res && res.url) { setOption(gi, oi, { image_url: res.url }); }
setUploading(function (u) { var n = Object.assign({}, u); delete n[key]; return n; });
}).catch(function () { setUploading(function (u) { var n = Object.assign({}, u); delete n[key]; return n; }); });
};
};
var emit = function (next) { props.onChange && props.onChange(next); };
var newOption = function () { return { label: '', label_ar: '', price_adjustment: 0, is_available: true }; };
var newGroup = function (name) { return { name: name || '', name_ar: '', display: 'pills', options: [newOption(), newOption()] }; };
var setGroup = function (gi, patch) { emit(groups.map(function (g, i) { return i === gi ? Object.assign({}, g, patch) : g; })); };
var addGroup = function (name) { emit(groups.concat([newGroup(name)])); };
var removeGroup = function (gi) { emit(groups.filter(function (_, i) { return i !== gi; })); };
var addOption = function (gi) { setGroup(gi, { options: (groups[gi].options || []).concat([newOption()]) }); };
var setOption = function (gi, oi, patch) { setGroup(gi, { options: (groups[gi].options || []).map(function (o, i) { return i === oi ? Object.assign({}, o, patch) : o; }) }); };
var removeOption = function (gi, oi) { setGroup(gi, { options: (groups[gi].options || []).filter(function (_, i) { return i !== oi; }) }); };
var inp = { padding: '8px 10px', borderRadius: 8, border: '1px solid var(--line-strong)', fontSize: 13.5, fontFamily: 'var(--font-body)', background: 'var(--white)' };
var QUICK = ar ? [['اللون', 'Color'], ['المقاس', 'Size'], ['النمط', 'Style'], ['الباقة', 'Package']] : [['Color'], ['Size'], ['Style'], ['Package']];
return (
{ar ? 'اختياري — أضف خيارات مثل اللون أو المقاس أو الباقة. اتركها فارغة إذا لم تكن مطلوبة.' : 'Optional — add choices like colour, size, or package. Leave empty if not needed.'}