Заказ создаётся в кассе ресторана. Ссылка на оплату появится после подтверждения заказа.

1. Контактные данные

Имя setCustomerName(event.target.value)} /> Телефон setCustomerPhone(event.target.value)} />

Email для чека (необязательно)

2. Способ получения

deliveryAllowed && setMethod("delivery")} /> Доставка{deliveryAllowed ? "" : " — недоступна"} pickupAllowed && setMethod("pickup")} /> Самовывоз{pickupAllowed ? "" : " — недоступен"}

{info?.hours?.orders?.start && info?.hours?.orders?.end ?

Приём заказов: {info.hours.orders.start}–{info.hours.orders.end}{info.hours.orders.note ? ` · ${info.hours.orders.note}` : ""}.

: null} {method === "delivery" ? ( <>

Адрес

{addressBookAvailable ? : null}

{selectedAddress ? : addressBookAvailable ? : <> setGuestAddress(event.target.value)} placeholder="Санкт-Петербург, улица, дом" />

Комментарий курьеру

</label></>}
              {activeQuoteError ? <p className="text-sm text-kiln-flame">{activeQuoteError}</p> : activeQuote ? <div className="grid gap-1 rounded-md border border-white/10 bg-white/5 p-3 text-sm text-kiln-milk/75"><p>Минимальная сумма заказа: <strong>{activeQuote.minOrder} ₽</strong></p><p>Стоимость доставки: <strong>{activeQuote.deliveryFee ? `${activeQuote.deliveryFee} ₽` : "бесплатно"}</strong></p><p>Бесплатная доставка: <strong>{activeQuote.freeFrom === null ? "порог не установлен" : `от ${activeQuote.freeFrom} ₽`}</strong></p>{activeQuote.shortfall > 0 ? <p className="text-kiln-flame">До минимальной суммы заказа не хватает <strong>{activeQuote.shortfall} ₽</strong></p> : null}</div> : quoteAddress.length >= 5 && currentQuoteState === "loading" ? <p className="text-sm text-kiln-milk/60">Рассчитываем стоимость доставки…</p> : null}
            </div>
          </>
        ) : null}
        <h2 className="pt-2 text-2xl">3. Время и комментарий</h2>
        <label><span className="mb-1 block text-sm">Комментарий</span><textarea className="input min-h-24" name="orderComment" maxLength={160} value={orderComment} onChange={(event) => setOrderComment(event.target.value)} /><span className="mt-1 block text-right text-xs muted">{orderComment.length}/160</span></label>
        {deferredEnabled ? <label><span className="mb-1 block text-sm">Желаемое время (необязательно)</span><input className="input" name="desiredTime" type="datetime-local" defaultValue={String(editDraft?.due || "").replace(" ", "T").slice(0, 16)} /></label> : null}
        {method === "pickup" ? <p className="rounded-md border border-white/10 bg-white/5 p-3 text-sm text-kiln-milk/80">Забрать заказ: <strong>{pickupAddress}</strong></p> : null}
        <label className="flex items-start gap-3 text-sm"><input className="mt-1 h-4 w-4" type="checkbox" name="offerConsent" required /> <span>Согласен с публичной офертой.</span></label>
        <label className="flex items-start gap-3 text-sm"><input className="mt-1 h-4 w-4" type="checkbox" name="personalDataConsent" required /> <span>Согласен на обработку персональных данных.</span></label>
        {marketingEnabled ? <label className="flex items-start gap-3 text-sm"><input className="mt-1 h-4 w-4" type="checkbox" name="marketingConsent" /> <span>Хочу получать новости и предложения КИЛН.</span></label> : null}
      </div>
      <aside className="card h-fit p-5">
        <h2 className="text-2xl">4. Состав и оплата</h2>
        <div className="mt-4 grid gap-2 text-sm">
          {totals.lines.map((line) => line ? <div key={line.dish.id} className="flex justify-between gap-3"><span>{line.quantity} × {line.dish.name}</span><strong className="shrink-0 whitespace-nowrap">{line.lineTotal}{"\u00a0"}₽</strong></div> : null)}
        </div>
        <div className="mt-4 grid gap-2 text-sm">
          <div className="flex justify-between"><span>Блюда</span><strong className="whitespace-nowrap">{totals.subtotal}{"\u00a0"}₽</strong></div>
          {method === "pickup" ? <div className="flex justify-between"><span>Самовывоз</span><strong className="whitespace-nowrap">бесплатно</strong></div> : activeQuote ? <><div className="flex justify-between"><span>Минимальная сумма</span><strong className="whitespace-nowrap">{activeQuote.minOrder}{"\u00a0"}₽</strong></div><div className="flex justify-between"><span>Доставка</span><strong className="whitespace-nowrap">{activeQuote.deliveryFee ? `${activeQuote.deliveryFee}\u00a0₽` : "бесплатно"}</strong></div><div className="flex justify-between"><span>Бесплатная доставка</span><strong className="text-right">{activeQuote.freeFrom === null ? "порог не установлен" : `от ${activeQuote.freeFrom}\u00a0₽`}</strong></div></> : currentQuoteState === "loading" ? <p className="text-kiln-milk/60">Рассчитываем условия доставки…</p> : null}
          {(method === "pickup" || activeQuote) ? <div className="flex justify-between border-t border-white/10 pt-3 text-lg"><span>Итого</span><strong className="whitespace-nowrap">{method === "delivery" && activeQuote ? activeQuote.totalWithDelivery : totals.subtotal}{"\u00a0"}₽</strong></div> : null}
        </div>
        {method === "delivery" && activeQuote?.shortfall ? <p className="mt-4 text-sm text-kiln-flame">До минимальной суммы заказа не хватает {activeQuote.shortfall} ₽.</p> : null}
        {hasUnavailableItems ? <p className="mt-4 text-sm text-kiln-flame">Исправьте недоступные позиции или количество в корзине.</p> : null}
        <button className="button button-primary mt-5 w-full" disabled={checkoutIsDisabled}>
          {status === "loading" ? "Переходим к оплате..." : "Перейти к оплате"}
        </button>
        {status === "error" ? <p className="mt-3 text-sm text-kiln-flame">{message}</p> : null}
      </aside>
    </form>
      {addressModal ? <div className="dish-modal" role="presentation" onMouseDown={(event) => event.target === event.currentTarget && !addressBusy && setAddressModal(false)}><section className="dish-modal-panel !block max-w-2xl" role="dialog" aria-modal="true" aria-labelledby="address-modal-title"><div className="dish-modal-content grid gap-5"><div className="flex items-center justify-between gap-3"><h2 id="address-modal-title" className="text-2xl">Адреса доставки</h2><button type="button" className="icon-button" onClick={() => setAddressModal(false)} aria-label="Закрыть"><X size={18} /></button></div>{addressError ? <p className="text-sm text-kiln-flame">{addressError}</p> : null}{addresses.length ? <div className="grid gap-2">{addresses.map((item) => <div key={item.id} className={`flex items-start justify-between gap-3 rounded-md border p-3 ${item.id === selectedAddressId ? "border-kiln-flame" : "border-white/10"}`}><button type="button" className="min-w-0 flex-1 text-left" onClick={() => { setSelectedAddressId(item.id); setAddressModal(false); }}><strong>{item.label || "Адрес доставки"}{item.isDefault ? " · основной" : ""}</strong><span className="mt-1 block text-sm text-kiln-milk/65">{item.address}</span></button><span className="flex gap-1"><button type="button" className="icon-button" onClick={() => editAddress(item)} aria-label="Изменить адрес"><Pencil size={16} /></button><button type="button" className="icon-button" onClick={() => void deleteAddress(item.id)} aria-label="Удалить адрес"><Trash2 size={16} /></button></span></div>)}</div> : null}<div className="grid gap-3 border-t border-white/10 pt-4"><div className="flex items-center justify-between gap-3"><h3 className="text-xl">{addressDraft.id ? "Изменить адрес" : "Добавить адрес"}</h3>{addressDraft.id ? <button type="button" className="button button-secondary px-3 py-2" onClick={() => { setAddressDraft({ ...emptyAddress, isDefault: addresses.length === 0 }); setAddressError(""); }}><Plus size={16} /> Новый адрес</button> : null}</div><div className="grid gap-3 sm:grid-cols-2"><input className="input sm:col-span-2" value={addressDraft.label} onChange={(event) => setAddressDraft({ ...addressDraft, label: event.target.value })} placeholder="Название, например Дом" /><input className="input sm:col-span-2" value={addressDraft.address} onChange={(event) => setAddressDraft({ ...addressDraft, address: event.target.value })} placeholder="Санкт-Петербург, улица, дом" /><input className="input" value={addressDraft.apartment} onChange={(event) => setAddressDraft({ ...addressDraft, apartment: event.target.value })} placeholder="Квартира" /><input className="input" value={addressDraft.floor} onChange={(event) => setAddressDraft({ ...addressDraft, floor: event.target.value })} placeholder="Этаж" /><input className="input" value={addressDraft.intercom} onChange={(event) => setAddressDraft({ ...addressDraft, intercom: event.target.value })} placeholder="Домофон" /><input className="input" value={addressDraft.courierComment} onChange={(event) => setAddressDraft({ ...addressDraft, courierComment: event.target.value })} placeholder="Комментарий курьеру" /></div><label className="flex items-center gap-2 text-sm"><input type="checkbox" checked={addressDraft.isDefault} onChange={(event) => setAddressDraft({ ...addressDraft, isDefault: event.target.checked })} /> Основной адрес</label><div className="flex flex-wrap justify-between gap-2">{addressDraft.id ? <button type="button" className="button button-danger" disabled={addressBusy} onClick={() => void deleteAddress(addressDraft.id!)}><Trash2 size={16} /> Удалить</button> : <span />}<button type="button" className="button button-primary" disabled={addressBusy || addressDraft.address.trim().length < 5} onClick={() => void saveAddress()}>{addressBusy ? "Сохраняем…" : "Сохранить"}</button></div></div></div></section></div> : null}
    </>
  );
}

Приём заказов временно отключён

1. Контактные данные

2. Способ получения

Адрес