36 lines
1.8 KiB
JavaScript
36 lines
1.8 KiB
JavaScript
/**
|
||
* @file PickupCodeCard.jsx
|
||
* @description Блок «Ваш код выдачи» в карточке доставки клиента (самовывоз):
|
||
* крупный код, который клиент называет вслух, и под ним штрих-код с тем же кодом —
|
||
* чтобы на складе можно было не набирать код руками, а отсканировать с телефона.
|
||
* Разметка одна на оба места страницы (сохранённый выбор и вкладка «Самовывоз»),
|
||
* иначе блоки разъезжаются.
|
||
*/
|
||
import React from "react";
|
||
|
||
import { PickupCodeBarcode } from "./PickupCodeBarcode";
|
||
|
||
export const PickupCodeCard = ({ invitation, deliveryNumberDigits, className = "" }) => {
|
||
const code = invitation?.pickupCode || invitation?.pickup_code;
|
||
if (!code) return null;
|
||
|
||
return (
|
||
<div
|
||
className={[
|
||
"rounded-2xl border-2 border-[var(--color-accent)] bg-[var(--color-accent-soft)] p-4 text-center",
|
||
className,
|
||
].join(" ").trim()}
|
||
>
|
||
{deliveryNumberDigits ? (
|
||
<p className="text-sm font-semibold text-[var(--color-text)]">Ваш номер доставки {deliveryNumberDigits}</p>
|
||
) : null}
|
||
<p className="mt-2 text-xs uppercase tracking-[0.2em] text-[var(--color-text-muted)]">Ваш код выдачи</p>
|
||
<p className="mt-1 text-3xl font-bold tracking-[0.4em] text-[var(--color-accent)]">{code}</p>
|
||
<PickupCodeBarcode value={code} showText={false} className="mx-auto mt-3 w-full max-w-[320px]" />
|
||
<p className="mt-2 text-xs text-[var(--color-text-muted)]">
|
||
Покажите код при получении заказа или дайте отсканировать штрих-код
|
||
</p>
|
||
</div>
|
||
);
|
||
};
|