scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(BOOK-242): Removed legacy seo filter block on destination pages

Browse Source 
Approved-by: Chuma Mcphoy (We Ahead)
This commit is contained in:
Erik Tiekstra
2025-09-25 13:26:23 +00:00
parent 9f02870647
commit 1746ed9803
1 changed files with 80 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

180
apps/scandic-web/components/DestinationFilterAndSort/index.tsx
View File

@@ -1,6 +1,5 @@
"use client"
import Link from "next/link"
import { useRouter } from "next/navigation"
import {
Dialog,
@@ -35,7 +34,7 @@ export default function DestinationFilterAndSort({
const intl = useIntl()
const router = useRouter()
const {
filters,
allFilters,
sortItems,
pendingFilters,
pendingSort,
@@ -48,7 +47,7 @@ export default function DestinationFilterAndSort({
resetPendingValues,
setIsLoading,
} = useDestinationDataStore((state) => ({
filters: state.allFilters,
allFilters: state.allFilters,
sortItems: state.sortItems,
pendingFilters: state.pendingFilters,
pendingSort: state.pendingSort,
@@ -62,7 +61,6 @@ export default function DestinationFilterAndSort({
resetPendingValues: state.actions.resetPendingValues,
setIsLoading: state.actions.setIsLoading,
}))
const { facilityFilters, surroundingsFilters } = filters
const alertHeading =
listType === "city"
? intl.formatMessage({
@@ -128,103 +126,85 @@ export default function DestinationFilterAndSort({
}
}
return (
<>
<DialogTrigger onOpenChange={handleClose}>
<FilterAndSortButton filterLength={activeFilters.length} />
<ModalOverlay isDismissable className={styles.overlay}>
<Modal>
<Dialog
className={styles.dialog}
aria-label={intl.formatMessage({
defaultMessage: "Filter and sort",
})}
>
{({ close }) => (
<>
<header className={styles.header}>
<Subtitle
type="two"
textAlign="center"
className={styles.title}
asChild
>
<h3>
{intl.formatMessage({
defaultMessage: "Filter and sort",
})}
</h3>
</Subtitle>
<button
onClick={close}
type="button"
className={styles.close}
>
<MaterialIcon icon="close" />
</button>
</header>
<div className={styles.content}>
<Sort sortItems={sortItems} />
<Divider className={styles.divider} />
<Filter filters={filters} />
</div>
{pendingCount === 0 && (
<div className={styles.alertWrapper}>
<Alert
type={AlertTypeEnum.Warning}
heading={alertHeading}
text={alertText}
ariaRole="status"
/>
</div>
)}
<footer className={styles.footer}>
<Button
onClick={clearPendingFilters}
variant="Text"
size="Small"
color="Primary"
>
<DialogTrigger onOpenChange={handleClose}>
<FilterAndSortButton filterLength={activeFilters.length} />
<ModalOverlay isDismissable className={styles.overlay}>
<Modal>
<Dialog
className={styles.dialog}
aria-label={intl.formatMessage({
defaultMessage: "Filter and sort",
})}
>
{({ close }) => (
<>
<header className={styles.header}>
<Subtitle
type="two"
textAlign="center"
className={styles.title}
asChild
>
<h3>
{intl.formatMessage({
defaultMessage: "Clear all filters",
defaultMessage: "Filter and sort",
})}
</Button>
<Button
variant="Primary"
size="Medium"
color="Primary"
isDisabled={pendingCount === 0}
onClick={() => submitAndClose(close)}
>
{intl.formatMessage(
{
defaultMessage: "See results ({ count })",
},
{ count: pendingCount }
)}
</Button>
</footer>
</>
)}
</Dialog>
</Modal>
</ModalOverlay>
</DialogTrigger>
{/* This section is added to the DOM for SEO purposes. The filters are linkable and should be indexable */}
<nav className="sr-only">
<ul>
{facilityFilters.map((filter) => (
<li key={`filter-${filter.slug}`}>
<Link href={`${basePath}/${filter.slug}`}>{filter.name}</Link>
</li>
))}
{surroundingsFilters.map((filter) => (
<li key={`filter-${filter.slug}`}>
<Link href={`${basePath}/${filter.slug}`}>{filter.name}</Link>
</li>
))}
</ul>
</nav>
</>
</h3>
</Subtitle>
<button
onClick={close}
type="button"
className={styles.close}
>
<MaterialIcon icon="close" />
</button>
</header>
<div className={styles.content}>
<Sort sortItems={sortItems} />
<Divider className={styles.divider} />
<Filter filters={allFilters} />
</div>
{pendingCount === 0 && (
<div className={styles.alertWrapper}>
<Alert
type={AlertTypeEnum.Warning}
heading={alertHeading}
text={alertText}
ariaRole="status"
/>
</div>
)}
<footer className={styles.footer}>
<Button
onClick={clearPendingFilters}
variant="Text"
size="Small"
color="Primary"
>
{intl.formatMessage({
defaultMessage: "Clear all filters",
})}
</Button>
<Button
variant="Primary"
size="Medium"
color="Primary"
isDisabled={pendingCount === 0}
onClick={() => submitAndClose(close)}
>
{intl.formatMessage(
{
defaultMessage: "See results ({ count })",
},
{ count: pendingCount }
)}
</Button>
</footer>
</>
)}
</Dialog>
</Modal>
</ModalOverlay>
</DialogTrigger>
)
}