feat: podpora více odkazů na podnik při objednávání
This commit is contained in:
@@ -2,8 +2,9 @@ import { useState } from "react";
|
||||
import { Modal, Button, Form, ListGroup, Alert } from "react-bootstrap";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { faTrashCan } from "@fortawesome/free-regular-svg-icons";
|
||||
import { faUpRightFromSquare } from "@fortawesome/free-solid-svg-icons";
|
||||
import { faPlus, faUpRightFromSquare, faXmark } from "@fortawesome/free-solid-svg-icons";
|
||||
import { addStore, deleteStore, Store } from "../../../../types";
|
||||
import { getStoreUrls, storeUrlLabel } from "../../utils/storeUrls";
|
||||
|
||||
type Props = {
|
||||
isOpen: boolean;
|
||||
@@ -14,23 +15,33 @@ type Props = {
|
||||
|
||||
export default function StoreAdminModal({ isOpen, onClose, stores, onStoresChanged }: Readonly<Props>) {
|
||||
const [newName, setNewName] = useState('');
|
||||
const [newUrl, setNewUrl] = useState('');
|
||||
// Jeden podnik může být dostupný přes více dovozových služeb — proto seznam URL
|
||||
const [newUrls, setNewUrls] = useState<string[]>(['']);
|
||||
const [heslo, setHeslo] = useState('');
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const setUrlAt = (index: number, value: string) =>
|
||||
setNewUrls(prev => prev.map((u, i) => (i === index ? value : u)));
|
||||
|
||||
const addUrlRow = () => setNewUrls(prev => [...prev, '']);
|
||||
|
||||
const removeUrlRow = (index: number) =>
|
||||
setNewUrls(prev => (prev.length === 1 ? [''] : prev.filter((_, i) => i !== index)));
|
||||
|
||||
const handleAdd = async () => {
|
||||
if (!newName.trim()) return;
|
||||
setError(null);
|
||||
setLoading(true);
|
||||
try {
|
||||
const res = await addStore({ body: { name: newName.trim(), url: newUrl.trim() || undefined, heslo } });
|
||||
const urls = newUrls.map(u => u.trim()).filter(Boolean);
|
||||
const res = await addStore({ body: { name: newName.trim(), urls: urls.length > 0 ? urls : undefined, heslo } });
|
||||
if (res.error) {
|
||||
setError((res.error as any).error || 'Nastala chyba');
|
||||
} else if (res.data) {
|
||||
onStoresChanged(res.data as Store[]);
|
||||
setNewName('');
|
||||
setNewUrl('');
|
||||
setNewUrls(['']);
|
||||
}
|
||||
} catch (e: any) {
|
||||
setError(e.message || 'Nastala chyba');
|
||||
@@ -89,14 +100,32 @@ export default function StoreAdminModal({ isOpen, onClose, stores, onStoresChang
|
||||
onChange={e => setNewName(e.target.value)}
|
||||
onKeyDown={e => { e.stopPropagation(); if (e.key === 'Enter') handleAdd(); }}
|
||||
/>
|
||||
<div className="d-flex gap-2 mb-3">
|
||||
<Form.Control
|
||||
type="url"
|
||||
placeholder="URL na nabídku (volitelné, např. Bolt Food/Wolt)"
|
||||
value={newUrl}
|
||||
onChange={e => setNewUrl(e.target.value)}
|
||||
onKeyDown={e => { e.stopPropagation(); if (e.key === 'Enter') handleAdd(); }}
|
||||
/>
|
||||
{newUrls.map((url, index) => (
|
||||
<div key={index} className="d-flex gap-2 mb-2 align-items-center">
|
||||
<Form.Control
|
||||
type="url"
|
||||
placeholder={index === 0
|
||||
? 'URL na nabídku (volitelné, např. Bolt Food/Wolt)'
|
||||
: 'Další URL na nabídku (jiná dovozová služba)'}
|
||||
value={url}
|
||||
onChange={e => setUrlAt(index, e.target.value)}
|
||||
onKeyDown={e => { e.stopPropagation(); if (e.key === 'Enter') handleAdd(); }}
|
||||
/>
|
||||
<Button
|
||||
variant="outline-secondary"
|
||||
onClick={() => removeUrlRow(index)}
|
||||
disabled={newUrls.length === 1 && !url}
|
||||
title="Odebrat tuto URL"
|
||||
>
|
||||
<FontAwesomeIcon icon={faXmark} />
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
<div className="d-flex justify-content-between align-items-center mb-3">
|
||||
<Button variant="link" size="sm" className="p-0" onClick={addUrlRow}>
|
||||
<FontAwesomeIcon icon={faPlus} className="me-1" />
|
||||
Přidat další URL
|
||||
</Button>
|
||||
<Button variant="primary" onClick={handleAdd} disabled={loading || !newName.trim() || !heslo}>
|
||||
Přidat
|
||||
</Button>
|
||||
@@ -107,25 +136,39 @@ export default function StoreAdminModal({ isOpen, onClose, stores, onStoresChang
|
||||
<p className="text-muted">Žádné obchody v seznamu</p>
|
||||
) : (
|
||||
<ListGroup>
|
||||
{stores.map(s => (
|
||||
<ListGroup.Item key={s.name} className="d-flex justify-content-between align-items-center">
|
||||
<span>
|
||||
{s.name}
|
||||
{s.url && /^https?:\/\//i.test(s.url) && (
|
||||
<a href={s.url} target="_blank" rel="noopener noreferrer" className="ms-2" title="Otevřít nabídku v nové záložce">
|
||||
<FontAwesomeIcon icon={faUpRightFromSquare} />
|
||||
</a>
|
||||
)}
|
||||
</span>
|
||||
<FontAwesomeIcon
|
||||
icon={faTrashCan}
|
||||
className="action-icon"
|
||||
title="Odebrat"
|
||||
onClick={() => handleRemove(s.name)}
|
||||
style={{ cursor: 'pointer' }}
|
||||
/>
|
||||
</ListGroup.Item>
|
||||
))}
|
||||
{stores.map(s => {
|
||||
const urls = getStoreUrls(s);
|
||||
return (
|
||||
<ListGroup.Item key={s.name} className="d-flex justify-content-between align-items-start">
|
||||
<div>
|
||||
<div>{s.name}</div>
|
||||
{urls.length > 0 && (
|
||||
<small className="text-muted d-flex flex-wrap gap-2">
|
||||
{urls.map(url => (
|
||||
<a
|
||||
key={url}
|
||||
href={url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
title={url}
|
||||
>
|
||||
{storeUrlLabel(url)}
|
||||
<FontAwesomeIcon icon={faUpRightFromSquare} className="ms-1" />
|
||||
</a>
|
||||
))}
|
||||
</small>
|
||||
)}
|
||||
</div>
|
||||
<FontAwesomeIcon
|
||||
icon={faTrashCan}
|
||||
className="action-icon"
|
||||
title="Odebrat"
|
||||
onClick={() => handleRemove(s.name)}
|
||||
style={{ cursor: 'pointer' }}
|
||||
/>
|
||||
</ListGroup.Item>
|
||||
);
|
||||
})}
|
||||
</ListGroup>
|
||||
)}
|
||||
</Modal.Body>
|
||||
|
||||
@@ -11,6 +11,7 @@ import {
|
||||
getData, createGroup, deleteGroup, addGroupMember, removeGroupMember, updateGroupMember, setGroupState, updateGroupTimes, setTracking, getOrderDates,
|
||||
} from '../../../types';
|
||||
import { computeFeeShare, computeMemberTotal, countActiveMembers } from '../utils/groupFees';
|
||||
import { getStoreUrls, isHttpUrl, storeUrlLabel } from '../utils/storeUrls';
|
||||
import { EVENT_MESSAGE, EVENT_PENDING_QR, SocketContext } from '../context/socket';
|
||||
import { useAuth } from '../context/auth';
|
||||
import { useSettings } from '../context/settings';
|
||||
@@ -125,6 +126,8 @@ export default function OrderGroupsPage() {
|
||||
// ISO data dnů, ve kterých existuje aspoň jedna objednávka (pro zvýraznění v date pickeru)
|
||||
const [orderDates, setOrderDates] = useState<string[]>([]);
|
||||
const [newGroupName, setNewGroupName] = useState('');
|
||||
// Vybraná URL na nabídku — podnik může být dostupný přes více dovozových služeb
|
||||
const [newGroupUrl, setNewGroupUrl] = useState('');
|
||||
const [creating, setCreating] = useState(false);
|
||||
const [adminModalOpen, setAdminModalOpen] = useState(false);
|
||||
const [editAmounts, setEditAmounts] = useState<Record<string, string>>({});
|
||||
@@ -248,11 +251,18 @@ export default function OrderGroupsPage() {
|
||||
const handleCreate = async () => {
|
||||
if (!newGroupName || !auth?.login) return;
|
||||
setCreating(true);
|
||||
const ok = await refresh(() => createGroup({ body: { name: newGroupName } }));
|
||||
if (ok) setNewGroupName('');
|
||||
// Pojistka, kdyby se seznam obchodů mezitím změnil (socket) — vezmeme první URL podniku
|
||||
const urls = getStoreUrls((data?.stores ?? []).find(s => s.name === newGroupName));
|
||||
const url = urls.includes(newGroupUrl) ? newGroupUrl : urls[0];
|
||||
const ok = await refresh(() => createGroup({ body: { name: newGroupName, url } }));
|
||||
if (ok) {
|
||||
setNewGroupName('');
|
||||
setNewGroupUrl('');
|
||||
}
|
||||
setCreating(false);
|
||||
};
|
||||
|
||||
|
||||
const handleJoin = (groupId: string) =>
|
||||
refresh(() => addGroupMember({ body: { id: groupId } }));
|
||||
|
||||
@@ -359,6 +369,8 @@ export default function OrderGroupsPage() {
|
||||
|
||||
const stores = data.stores ?? [];
|
||||
const groups = data.groups ?? [];
|
||||
// URL na nabídku vybíraného podniku — výběr nabízíme, jen když jich je víc
|
||||
const newStoreUrls = getStoreUrls(stores.find(s => s.name === newGroupName));
|
||||
|
||||
// Zobrazené datum a režim historie (vše read-only, pokud nejde o aktuální den)
|
||||
const displayedIso = data.isoDate;
|
||||
@@ -456,12 +468,29 @@ export default function OrderGroupsPage() {
|
||||
<div className="d-flex gap-2 align-items-center flex-wrap">
|
||||
<Form.Select
|
||||
value={newGroupName}
|
||||
onChange={e => setNewGroupName(e.target.value)}
|
||||
onChange={e => {
|
||||
const name = e.target.value;
|
||||
setNewGroupName(name);
|
||||
// Výběr nabídky se resetuje na první URL nově vybraného podniku
|
||||
setNewGroupUrl(getStoreUrls(stores.find(s => s.name === name))[0] ?? '');
|
||||
}}
|
||||
style={{ maxWidth: 260 }}
|
||||
>
|
||||
<option value="">— vyberte obchod —</option>
|
||||
{stores.map(s => <option key={s.name} value={s.name}>{s.name}</option>)}
|
||||
</Form.Select>
|
||||
{newStoreUrls.length > 1 && (
|
||||
<Form.Select
|
||||
value={newStoreUrls.includes(newGroupUrl) ? newGroupUrl : newStoreUrls[0]}
|
||||
onChange={e => setNewGroupUrl(e.target.value)}
|
||||
style={{ maxWidth: 220 }}
|
||||
title="Odkud se bude objednávat"
|
||||
>
|
||||
{newStoreUrls.map(url => (
|
||||
<option key={url} value={url}>{storeUrlLabel(url)}</option>
|
||||
))}
|
||||
</Form.Select>
|
||||
)}
|
||||
<Button variant="primary" onClick={handleCreate} disabled={creating || !newGroupName}>
|
||||
Vytvořit skupinu
|
||||
</Button>
|
||||
@@ -485,10 +514,13 @@ export default function OrderGroupsPage() {
|
||||
const isLocked = group.state === GroupState.LOCKED;
|
||||
const memberEntries = Object.entries(group.members) as [string, OrderGroupMember][];
|
||||
const editingTimes = group.id in editTimes;
|
||||
// URL na nabídku podniku (pokud ji má dohledatelný obchod vyplněnou).
|
||||
// URL na nabídku podniku — přednostně ta, kterou zakladatel vybral při vytvoření
|
||||
// skupiny. Skupiny z doby před výběrem URL ji nemají, pak zkusíme jedinou URL obchodu.
|
||||
// Povolíme jen http(s), aby odkaz nemohl být zneužit (např. javascript:).
|
||||
const rawStoreUrl = stores.find(s => s.name === group.name)?.url;
|
||||
const storeUrl = rawStoreUrl && /^https?:\/\//i.test(rawStoreUrl) ? rawStoreUrl : undefined;
|
||||
const groupStoreUrls = getStoreUrls(stores.find(s => s.name === group.name));
|
||||
const storeUrl = isHttpUrl(group.url)
|
||||
? group.url
|
||||
: (groupStoreUrls.length === 1 ? groupStoreUrls[0] : undefined);
|
||||
|
||||
const totalFees = (group.fees ?? 0) + (group.shipping ?? 0) + (group.tip ?? 0);
|
||||
// Poplatky se dělí jen mezi aktivní strávníky (kdo si reálně něco objednal).
|
||||
|
||||
@@ -0,0 +1,37 @@
|
||||
import { Store } from '../../../types';
|
||||
|
||||
/** Známé dovozové služby — hostname (bez www) → čitelný název pro nabídku. */
|
||||
const KNOWN_SERVICES: { match: string; label: string }[] = [
|
||||
{ match: 'bolt.eu', label: 'Bolt Food' },
|
||||
{ match: 'wolt.com', label: 'Wolt' },
|
||||
{ match: 'foodora.cz', label: 'Foodora' },
|
||||
{ match: 'damejidlo.cz', label: 'Dáme jídlo' },
|
||||
];
|
||||
|
||||
/**
|
||||
* Ověří, že jde o odkaz s protokolem http(s) — jiné protokoly (např. javascript:)
|
||||
* by mohly být zneužity, proto je jako odkaz nezobrazujeme.
|
||||
*/
|
||||
export function isHttpUrl(url?: string): boolean {
|
||||
return !!url && /^https?:\/\//i.test(url);
|
||||
}
|
||||
|
||||
/** Vrátí platné URL na nabídku daného obchodu. */
|
||||
export function getStoreUrls(store?: Store): string[] {
|
||||
return (store?.urls ?? []).filter(isHttpUrl);
|
||||
}
|
||||
|
||||
/**
|
||||
* Popisek URL pro výběr nabídky — u známých dovozových služeb jejich název,
|
||||
* jinak hostname odkazu (např. "restaurace-u-nas.cz").
|
||||
*/
|
||||
export function storeUrlLabel(url: string): string {
|
||||
let hostname: string;
|
||||
try {
|
||||
hostname = new URL(url).hostname.toLowerCase().replace(/^www\./, '');
|
||||
} catch {
|
||||
return url;
|
||||
}
|
||||
const known = KNOWN_SERVICES.find(s => hostname === s.match || hostname.endsWith(`.${s.match}`));
|
||||
return known ? known.label : hostname;
|
||||
}
|
||||
Reference in New Issue
Block a user