64 lines
2.2 KiB
JavaScript
64 lines
2.2 KiB
JavaScript
import React from "react";
|
|
import { getInvitationReferenceLabel } from "./invitationReference";
|
|
import { Badge } from "../UI/Badge";
|
|
import { Button } from "../UI/Button";
|
|
import { Panel } from "../UI/Panel";
|
|
import { DeliveryStateNotice } from "./DeliveryStateNotice";
|
|
import { formatDeliverySlotLabel } from "./deliveryDateFormatting";
|
|
|
|
const ACTIVE_STATES = new Set(["awaiting_choice", "opened", "reminder_sent"]);
|
|
|
|
const STATE_LABELS = {
|
|
awaiting_choice: "Ожидает ответа клиента",
|
|
opened: "Страница открыта",
|
|
reminder_sent: "Напоминание отправлено",
|
|
transferred_to_logistics: "Передан логисту",
|
|
paid_storage: "Платное хранение",
|
|
delivered: "Доставлен",
|
|
agreed: "Доставка согласована",
|
|
};
|
|
|
|
export const DeliveryChoiceFlow = ({
|
|
invitation = {},
|
|
selectedSlot = null,
|
|
onConfirmChoice = () => {},
|
|
}) => {
|
|
const state = invitation.state || "awaiting_choice";
|
|
const isActive = ACTIVE_STATES.has(state);
|
|
const invitationReference = getInvitationReferenceLabel(invitation);
|
|
const slotSummary = selectedSlot ? formatDeliverySlotLabel(selectedSlot) : "";
|
|
|
|
if (!isActive) {
|
|
return (
|
|
<div className="space-y-4">
|
|
<DeliveryStateNotice state={state} />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Panel className="space-y-5 p-5 sm:p-6">
|
|
<div className="space-y-2">
|
|
<p className="text-sm uppercase tracking-[0.24em] text-[var(--color-text-muted)]">Согласование доставки</p>
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<h1 className="text-2xl font-semibold leading-tight sm:text-3xl">Выберите время доставки</h1>
|
|
<Badge tone="warning">{STATE_LABELS[state]}</Badge>
|
|
</div>
|
|
<p className="text-sm leading-6 text-[var(--color-text-muted)]">
|
|
{invitationReference}. Выберите удобную половину дня.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="flex flex-col gap-3 sm:flex-row">
|
|
<Button
|
|
className="w-full sm:w-auto"
|
|
disabled={!slotSummary}
|
|
onClick={() => onConfirmChoice(selectedSlot)}
|
|
>
|
|
Сохранить
|
|
</Button>
|
|
</div>
|
|
</Panel>
|
|
);
|
|
};
|