/* ============================================================
Төрмен — ratings & reviews (Medusa API + fallback)
Bilingual RU/KZ. Avatars are initials, no stock faces.
============================================================ */
const { useState:useStateR, useEffect:useEffectR, useCallback:useCbR } = React;
const REVIEW_DEFAULT = { rating:0, count:0, dist:[0,0,0,0,0], recommend:0, list:[] };
const STORE_SOURCES = [
{ id:'2gis', icon:'map-pin', label:'2ГИС', rating:4.8, count:'420' },
{ id:'insta', icon:'instagram', label:'Instagram', rating:4.9, count:'760' },
{ id:'tg', icon:'send', label:'Telegram', rating:5.0, count:'660' },
];
function reviewsApiEnabled(){
return window.isMedusaConfigured?.() && typeof window.medusaFetch === 'function';
}
function getVoterKey(){
const key = 'tormen_voter_key';
let id = localStorage.getItem(key);
if(!id){
id = 'v_' + Math.random().toString(36).slice(2) + Date.now().toString(36);
localStorage.setItem(key, id);
}
return id;
}
function formatReviewDate(iso, lang){
if(!iso) return lang==='kz' ? 'жаңа ғана' : 'только что';
const diffDays = Math.max(0, Math.floor((Date.now() - new Date(iso).getTime()) / 86400000));
if(lang==='kz'){
if(diffDays < 1) return 'жаңа ғана';
if(diffDays < 7) return `${diffDays} күн бұрын`;
if(diffDays < 30) return `${Math.max(1, Math.floor(diffDays/7))} апта бұрын`;
return `${Math.max(1, Math.floor(diffDays/30))} ай бұрын`;
}
if(diffDays < 1) return 'только что';
if(diffDays < 7) return diffDays === 1 ? 'вчера' : `${diffDays} дн. назад`;
if(diffDays < 30) return `${Math.max(1, Math.floor(diffDays/7))} нед. назад`;
return `${Math.max(1, Math.floor(diffDays/30))} мес. назад`;
}
const REVIEW_MAX_PHOTOS = 4;
const REVIEW_MAX_PHOTO_BYTES = 5 * 1024 * 1024;
function parseReviewImages(raw){
if(!raw) return [];
const list = Array.isArray(raw) ? raw : [];
return list
.map(url=> window.normalizeMedusaAssetUrl?.(url) || url)
.filter(url=> typeof url === 'string' && url.startsWith('http'));
}
function mapApiReview(row){
const created = row.created_at || row.updated_at;
return {
id: row.id,
n: row.author_name,
d: { ru: formatReviewDate(created, 'ru'), kz: formatReviewDate(created, 'kz') },
s: row.rating,
p: row.persons || null,
t: { ru: row.text_ru, kz: row.text_kz || row.text_ru },
images: parseReviewImages(row.images),
verified: !!row.verified,
h: row.helpful_count ?? 0,
voted_by_me: !!row.voted_by_me,
fresh: false,
};
}
async function uploadReviewImages(files){
if(!files?.length) return [];
const env = window.TORMEN_ENV?.medusa || {};
const fd = new FormData();
files.forEach(file=> fd.append('files', file));
const ctrl = new AbortController();
const timer = setTimeout(()=> ctrl.abort(), 30000);
let res;
try{
res = await fetch(`${env.backendUrl}/store/tormen/reviews/upload`, {
method: 'POST',
headers: { 'x-publishable-api-key': env.publishableKey },
body: fd,
signal: ctrl.signal,
});
}finally{ clearTimeout(timer); }
let data = {};
try{ data = await res.json(); }catch(_){}
if(!res.ok) throw new Error(data.message || data.type || 'upload_failed');
return (data.files || []).map(f=> window.normalizeMedusaAssetUrl?.(f.url) || f.url).filter(Boolean);
}
async function fetchReviewSummary(scope, productHandle){
const q = new URLSearchParams({ scope });
if(productHandle) q.set('product_handle', productHandle);
const data = await window.medusaFetch(`/store/tormen/reviews/summary?${q}`);
return data.summary || REVIEW_DEFAULT;
}
async function fetchReviews(scope, productHandle, limit=50){
const q = new URLSearchParams({ scope, limit: String(limit), voter_key: getVoterKey() });
if(productHandle) q.set('product_handle', productHandle);
const data = await window.medusaFetch(`/store/tormen/reviews?${q}`);
return (data.reviews || []).map(mapApiReview);
}
async function submitReview(payload){
return window.medusaFetch('/store/tormen/reviews', { method:'POST', body: payload, auth: true });
}
async function voteReviewHelpful(reviewId){
return window.medusaFetch(`/store/tormen/reviews/${reviewId}/helpful`, {
method:'POST',
auth: false,
body: { voter_key: getVoterKey() },
});
}
function reviewsFor(id){ return REVIEW_DEFAULT; }
function useReviewBundle(scope, productHandle){
const [summary,setSummary]=useStateR(null);
const [items,setItems]=useStateR([]);
const [loading,setLoading]=useStateR(true);
const [error,setError]=useStateR(null);
const reload = useCbR(async ()=>{
if(!reviewsApiEnabled()){
setSummary(REVIEW_DEFAULT);
setItems([]);
setLoading(false);
setError('offline');
return;
}
setLoading(true);
setError(null);
try{
const [sum, list] = await Promise.all([
fetchReviewSummary(scope, productHandle),
fetchReviews(scope, productHandle),
]);
setSummary(sum);
setItems(list);
}catch(e){
setSummary(REVIEW_DEFAULT);
setItems([]);
setError(e?.message || 'reviews_failed');
}finally{
setLoading(false);
}
}, [scope, productHandle]);
useEffectR(()=>{ reload(); }, [reload]);
const patchItem = useCbR((reviewId, patch)=>{
setItems(prev=> prev.map(item=> item.id === reviewId ? { ...item, ...patch } : item));
}, []);
return { summary: summary || REVIEW_DEFAULT, items, loading, error, reload, patchItem };
}
function useReviewSummary(scope, productHandle){
const { summary, loading } = useReviewBundle(scope, productHandle);
return { summary, loading };
}
/* ---------- avatar (initials) ---------- */
function Avatar({ name='', size=42 }){
const init = (name.trim()[0]||'?').toUpperCase();
return (
{init}
);
}
/* ---------- rating distribution bars ---------- */
function RatingBars({ dist }){
return (
{dist.map((pct,i)=>(
{5-i}
{pct}%
))}
{rating.toFixed(1)}
{count.toLocaleString('ru-RU').replace(/,/g,' ')} {t('rev_reviews')}
{recommend!=null && (
{recommend}% {t('rev_recommend')}
)}
{sources && (
{sources.map(s=>(
{s.rating.toFixed(1)}
{s.label}
))}
)}
);
}
/* ---------- review photo lightbox (in-app) ---------- */
function ReviewPhotoLightbox({ images, index, onIndexChange, onClose }){
const n = images.length;
const move = (d)=> onIndexChange((index + d + n) % n);
useEffectR(()=>{
const prev = document.body.style.overflow;
document.body.style.overflow = 'hidden';
const h=(e)=>{
if(e.key==='Escape') onClose();
if(n>1 && e.key==='ArrowRight') move(1);
if(n>1 && e.key==='ArrowLeft') move(-1);
};
window.addEventListener('keydown', h);
return ()=>{ document.body.style.overflow = prev; window.removeEventListener('keydown', h); };
}, [index, n]);
return (
{n > 1 && (
)}
e.stopPropagation()} style={{ maxWidth:'min(920px,92vw)' }}>
{n > 1 && (
{images.map((url,i)=>(
)}
);
}
/* ---------- review photo strip ---------- */
function ReviewPhotoStrip({ images, className='' }){
const [lightbox,setLightbox]=useStateR(null);
if(!images?.length) return null;
return (
{images.map((url,i)=>(
))}
{tx(r.t)}
{r.n}
{tx(r.d)}
{r.p && ·{r.p} {t('persons')}}
{onVote && (
)}
);
}
return (
{'“'}
{tx(r.t)}
{r.n}
{tx(r.d)}
·
{r.verified !== false && (
{t('rev_verified')}
)}
{r.p && ·{r.p} {t('persons')}}
{setName && ·{setName}}
{onVote && (
)}
);
}
/* ---------- sortable list with helpful votes ---------- */
function ReviewList({ items, scope, withSort=false, limit=4, plain=false, onHelpfulPatch }){
const { t } = useLang();
const [sort,setSort]=useStateR('new');
const [showAll,setShowAll]=useStateR(false);
const [busy,setBusy]=useStateR({});
const toggleHelp = async (entry)=>{
if(!entry.reviewId || busy[entry.reviewId] || !reviewsApiEnabled()) return;
setBusy(b=> ({ ...b, [entry.reviewId]: true }));
try{
const data = await voteReviewHelpful(entry.reviewId);
onHelpfulPatch?.(entry.reviewId, {
h: data.review?.helpful_count ?? entry.helpful,
voted_by_me: !!data.voted,
});
}catch(_){}
finally{
setBusy(b=>{ const n={...b}; delete n[entry.reviewId]; return n; });
}
};
const enriched = items.map((r,i)=>{
const key = r.id || (scope+'-'+i);
return { r, id: key, reviewId: r.id, helpful: r.h ?? 0, voted: !!r.voted_by_me };
});
const fresh = enriched.filter(e=>e.r.fresh);
let rest = enriched.filter(e=>!e.r.fresh);
if(sort==='top') rest=[...rest].sort((a,b)=> b.r.s - a.r.s);
if(sort==='helpful') rest=[...rest].sort((a,b)=> b.helpful - a.helpful);
const ordered=[...fresh,...rest];
const shown = showAll ? ordered : ordered.slice(0,limit);
return (
{withSort && (
{t('rev_sort')}:
{[['new','rev_sort_new'],['top','rev_sort_top'],['helpful','rev_sort_helpful']].map(([v,k])=>
)}
)}
{shown.map((e,i)=> plain
? toggleHelp(e)} plain />
:
toggleHelp(e)} />
)}
{ordered.length>limit && (
)}
{t('rev_thanks')}
{t('rev_thanks_d')}
);
}
if(!open){
if(prominent){
return (
);
}
return (
);
}
const submit=async ()=>{
if(uploading || disabled) return;
const s = stars||5;
const payload = {
n: name.trim() || (t('lang_name')==='ҚАЗ' ? 'Қонақ' : 'Гость'),
d: { ru:'только что', kz:'жаңа ғана' },
s,
t: { ru: text || '—', kz: text || '—' },
fresh: true,
images: [],
};
setUploading(true);
try{
if(photos.length && reviewsApiEnabled()){
payload.images = await uploadReviewImages(photos.map(p=> p.file));
}
if(onSubmit) await onSubmit(payload);
photos.forEach(p=> p.preview && URL.revokeObjectURL(p.preview));
setPhotos([]);
setDone(true);
}catch(_){}
finally{ setUploading(false); }
};
const starRow = (
{[1,2,3,4,5].map(i=>(
))}
{prominent && stars > 0 && (
{stars}/5
)}
);
return (
{prominent && (
{t('rev_write')}
)}
{prominent ? (
) : (
{t('rev_your_rating')}
{starRow}
)}