Merged in fix/STAY-131-hide-ancillaries (pull request #3299)

fix: fix logic for identifying single use ancillaries

* fix: fix logic for identifying single use ancillaries

* fix: filter out empty categories of ancillaries


Approved-by: Erik Tiekstra

apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AllAncillariesModal/SelectAncillaryStep/index.tsx

@@ -1,6 +1,6 @@
 import { useIntl } from "react-intl"
 
-import { Typography } from "@scandic-hotels/design-system/Typography"
+import { ChipButton } from "@scandic-hotels/design-system/ChipButton"
 
 import { useAddAncillaryStore } from "@/stores/my-stay/add-ancillary-flow"
 
@@ -30,22 +30,20 @@ export default function SelectAncillaryStep({
     <div className={styles.container}>
       <div className={styles.tabs}>
         {categories.map((categoryName) => (
-          <button
+          <ChipButton
+            onPress={() => selectCategory(categoryName)}
             key={categoryName}
-            className={`${styles.chip} ${categoryName === selectedCategory ? styles.selected : ""}`}
-            onClick={() => selectCategory(categoryName)}
+            selected={categoryName === selectedCategory}
+            variant="FilterRounded"
+            size="Large"
           >
-            <Typography variant="Body/Supporting text (caption)/smRegular">
-              <p>
-                {categoryName
-                  ? categoryName
-                  : intl.formatMessage({
-                      id: "common.other",
-                      defaultMessage: "Other",
-                    })}
-              </p>
-            </Typography>
-          </button>
+            {categoryName
+              ? categoryName
+              : intl.formatMessage({
+                  id: "common.other",
+                  defaultMessage: "Other",
+                })}
+          </ChipButton>
         ))}
       </div>