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