75 lines
2.7 KiB
JavaScript
75 lines
2.7 KiB
JavaScript
export default function LocationMapSetupPanel({
|
|
hasAnyMap,
|
|
canManage,
|
|
zoneCount = 0,
|
|
saving,
|
|
savingAction,
|
|
onContinue,
|
|
onPreview,
|
|
onPublish,
|
|
onCreateFromZones,
|
|
onCreateBlank,
|
|
}) {
|
|
const description = hasAnyMap
|
|
? canManage
|
|
? "A draft map exists for this location."
|
|
: "A map draft exists for this location, but it has not been published yet."
|
|
: canManage
|
|
? "Create a rough map for this store location."
|
|
: "A household admin has not published a map yet.";
|
|
const hasZones = zoneCount > 0;
|
|
const createFromZonesLabel = hasZones
|
|
? `Create From ${zoneCount} Zone${zoneCount === 1 ? "" : "s"}`
|
|
: "Create From Zones";
|
|
const createBlankLabel = savingAction === "create-blank" ? "Creating..." : "Create Blank Map";
|
|
const createZonesButtonLabel = savingAction === "create-zones" ? "Creating..." : createFromZonesLabel;
|
|
const publishLabel = savingAction === "publish" ? "Publishing..." : "Publish";
|
|
|
|
return (
|
|
<section className="location-map-setup">
|
|
<h2>{hasAnyMap ? "Draft Map" : "No Map"}</h2>
|
|
<p>{description}</p>
|
|
{hasAnyMap && canManage ? (
|
|
<div className="location-map-setup-actions">
|
|
<button type="button" className="btn-primary" onClick={onContinue} disabled={saving}>
|
|
Continue Editing
|
|
</button>
|
|
<button type="button" className="btn-secondary" onClick={onPreview} disabled={saving}>
|
|
Preview Draft
|
|
</button>
|
|
<button type="button" className="btn-primary" onClick={onPublish} disabled={saving || !canManage}>
|
|
{publishLabel}
|
|
</button>
|
|
</div>
|
|
) : !hasAnyMap && canManage ? (
|
|
<div className="location-map-setup-actions">
|
|
{!hasZones ? (
|
|
<p className="location-map-setup-note">
|
|
No zones are available yet. Create a blank map now, or add zones first for an automatic starter layout.
|
|
</p>
|
|
) : null}
|
|
{!hasZones ? (
|
|
<>
|
|
<button type="button" className="btn-primary" onClick={onCreateBlank} disabled={saving}>
|
|
{createBlankLabel}
|
|
</button>
|
|
<button type="button" className="btn-secondary" onClick={onCreateFromZones} disabled>
|
|
{createFromZonesLabel}
|
|
</button>
|
|
</>
|
|
) : (
|
|
<>
|
|
<button type="button" className="btn-primary" onClick={onCreateFromZones} disabled={saving}>
|
|
{createZonesButtonLabel}
|
|
</button>
|
|
<button type="button" className="btn-secondary" onClick={onCreateBlank} disabled={saving}>
|
|
{createBlankLabel}
|
|
</button>
|
|
</>
|
|
)}
|
|
</div>
|
|
) : null}
|
|
</section>
|
|
);
|
|
}
|