541b91e34c
Feat/SW-1281 ancillaries add flow * feat(SW-1546): update design * feat(SW-1546): show points only if logged in * feat(SW-1546): always show points * feat(SW-1281): ancillary add flow initial * feat(SW-1546): add api call * feat(SW-1281): refactor naming and break out components * feat(SW-1281): handle back button * feat(SW-1281): make mobile cards clickable * feat(SW-1281): refactor spread ancillaries * feat(SW-1281): add deliverytimes * feat(SW-1281): rebase master * feat(SW-1281): add design for logged in or not * feat(SW-1281): add design * feat(SW-1281): add mobile design * feat(SW-1281): fix carousel * feat(SW-1281): show deliverytime only if ancillary has not been added * feat(SW-1281): add design * feat(SW-1281): add translations * feat(SW-1281): add translations * feat(SW-1281): add translations * feat(SW-1281): base dates on check in date only * feat(SW-1281): fix show correct toast when no valid data * feat(SW-1281): hande logic if deliverytime is not required * feat(SW-1281): fix max width for mobile * feat(SW-1281): refactor after pr comment Approved-by: Niclas Edenvin Approved-by: Linus Flood
92 lines
2.8 KiB
TypeScript
92 lines
2.8 KiB
TypeScript
import { useIntl } from "react-intl"
|
|
|
|
import { useAddAncillaryStore } from "@/stores/my-stay/add-ancillary-flow"
|
|
|
|
import { ChevronRightSmallIcon } from "@/components/Icons"
|
|
import Modal from "@/components/Modal"
|
|
import { AncillaryCard } from "@/components/TempDesignSystem/AncillaryCard"
|
|
import Button from "@/components/TempDesignSystem/Button"
|
|
import Body from "@/components/TempDesignSystem/Text/Body"
|
|
|
|
import styles from "./ancillaryGridModal.module.css"
|
|
|
|
import type {
|
|
Ancillary,
|
|
AncillaryGridModalProps,
|
|
} from "@/types/components/myPages/myStay/ancillaries"
|
|
|
|
export default function AncillaryGridModal({
|
|
ancillaries,
|
|
selectedCategory,
|
|
setSelectedCategory,
|
|
handleCardClick,
|
|
}: AncillaryGridModalProps) {
|
|
const intl = useIntl()
|
|
const { isGridOpen, setGridIsOpen, setOpenedFrom } = useAddAncillaryStore()
|
|
|
|
const handleClick = (ancillary: Ancillary["ancillaryContent"][number]) => {
|
|
handleCardClick(ancillary)
|
|
setOpenedFrom("grid")
|
|
setGridIsOpen(false)
|
|
}
|
|
|
|
return (
|
|
<div className={styles.modalTrigger}>
|
|
<Button
|
|
theme="base"
|
|
variant="icon"
|
|
intent="text"
|
|
size="small"
|
|
onClick={() => setGridIsOpen(true)}
|
|
>
|
|
{intl.formatMessage({ id: "View all" })}
|
|
<ChevronRightSmallIcon
|
|
width={20}
|
|
height={20}
|
|
color="baseButtonTextOnFillNormal"
|
|
/>
|
|
</Button>
|
|
<Modal
|
|
isOpen={isGridOpen}
|
|
onToggle={() => setGridIsOpen(!isGridOpen)}
|
|
title={intl.formatMessage({ id: "Upgrade your stay" })}
|
|
>
|
|
<div className={styles.modalContent}>
|
|
<div className={styles.tabs}>
|
|
{ancillaries.map((category) => (
|
|
<button
|
|
key={category.categoryName}
|
|
className={`${styles.chip} ${category.categoryName === selectedCategory ? styles.selected : ""}`}
|
|
onClick={() => setSelectedCategory(category.categoryName)}
|
|
>
|
|
<Body
|
|
color={
|
|
category.categoryName === selectedCategory
|
|
? "pale"
|
|
: "baseTextHighContrast"
|
|
}
|
|
>
|
|
{category.categoryName}
|
|
</Body>
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
<div className={styles.grid}>
|
|
{ancillaries
|
|
.find((category) => category.categoryName === selectedCategory)
|
|
?.ancillaryContent.map(({ description, ...ancillary }) => (
|
|
<div
|
|
key={ancillary.id}
|
|
onClick={() => handleClick({ description, ...ancillary })}
|
|
>
|
|
<AncillaryCard key={ancillary.id} ancillary={ancillary} />
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</Modal>
|
|
</div>
|
|
)
|
|
}
|