From 1746ed98034c7c0e1815e7d297685f456699cbed Mon Sep 17 00:00:00 2001
From: Erik Tiekstra <erik.tiekstra@scandichotels.com>
Date: Thu, 25 Sep 2025 13:26:23 +0000
Subject: [PATCH] feat(BOOK-242): Removed legacy seo filter block on
 destination pages

Approved-by: Chuma Mcphoy (We Ahead)
---
 .../DestinationFilterAndSort/index.tsx        | 180 ++++++++----------
 1 file changed, 80 insertions(+), 100 deletions(-)

diff --git a/apps/scandic-web/components/DestinationFilterAndSort/index.tsx b/apps/scandic-web/components/DestinationFilterAndSort/index.tsx
index a204b4cee..6b20bf3be 100644
--- a/apps/scandic-web/components/DestinationFilterAndSort/index.tsx
+++ b/apps/scandic-web/components/DestinationFilterAndSort/index.tsx
@@ -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>
   )
 }