feat: SW-276 Optimized code removed vanilla implmentation

components/GuestsRoomsPicker/AdultSelector/index.tsx

@@ -22,10 +22,10 @@ export default function AdultSelector({ roomIndex = 0 }: AdultSelectorProps) {
   const adultsLabel = intl.formatMessage({ id: "Adults" })
   const { setValue } = useFormContext()
   const { adults, children, childrenInAdultsBed } = useGuestsRoomsStore(
-    (state) => ({ ...state.rooms[roomIndex] })
+    (state) => state.rooms[roomIndex]
   )
-  const increaseAdults = useGuestsRoomsStore.use.increaseAdults()
-  const decreaseAdults = useGuestsRoomsStore.use.decreaseAdults()
+  const increaseAdults = useGuestsRoomsStore((state) => state.increaseAdults)
+  const decreaseAdults = useGuestsRoomsStore((state) => state.decreaseAdults)
 
   function increaseAdultsCount(roomIndex: number) {
     if (adults < 6) {

components/GuestsRoomsPicker/ChildSelector/ChildInfoSelector.tsx

@@ -30,13 +30,19 @@ export default function ChildInfoSelector({
   const { adults, childrenInAdultsBed } = useGuestsRoomsStore(
     (state) => state.rooms[roomIndex]
   )
-  const isValidated = useGuestsRoomsStore.use.isValidated()
-  const updateChildAge = useGuestsRoomsStore.use.updateChildAge()
-  const updateChildBed = useGuestsRoomsStore.use.updateChildBed()
-  const increaseChildInAdultsBed =
-    useGuestsRoomsStore.use.increaseChildInAdultsBed()
-  const decreaseChildInAdultsBed =
-    useGuestsRoomsStore.use.decreaseChildInAdultsBed()
+  const {
+    isValidated,
+    updateChildAge,
+    updateChildBed,
+    increaseChildInAdultsBed,
+    decreaseChildInAdultsBed,
+  } = useGuestsRoomsStore((state) => ({
+    isValidated: state.isValidated,
+    updateChildAge: state.updateChildAge,
+    updateChildBed: state.updateChildBed,
+    increaseChildInAdultsBed: state.increaseChildInAdultsBed,
+    decreaseChildInAdultsBed: state.decreaseChildInAdultsBed,
+  }))
 
   const ageList = Array.from(Array(13).keys()).map((age) => ({
     label: `${age}`,

components/GuestsRoomsPicker/ChildSelector/index.tsx

@@ -22,8 +22,12 @@ export default function ChildSelector({ roomIndex = 0 }: ChildSelectorProps) {
   const children = useGuestsRoomsStore(
     (state) => state.rooms[roomIndex].children
   )
-  const increaseChildren = useGuestsRoomsStore.use.increaseChildren()
-  const decreaseChildren = useGuestsRoomsStore.use.decreaseChildren()
+  const increaseChildren = useGuestsRoomsStore(
+    (state) => state.increaseChildren
+  )
+  const decreaseChildren = useGuestsRoomsStore(
+    (state) => state.decreaseChildren
+  )
 
   function increaseChildrenCount(roomIndex: number) {
     if (children.length < 5) {

components/GuestsRoomsPicker/GuestsRoomsPicker.tsx

@@ -4,7 +4,7 @@ import { useIntl } from "react-intl"
 
 import { useGuestsRoomsStore } from "@/stores/guests-rooms"
 
-import { CloseLarge, PlusCircleIcon } from "../Icons"
+import { CloseLargeIcon, PlusCircleIcon } from "../Icons"
 import Button from "../TempDesignSystem/Button"
 import Divider from "../TempDesignSystem/Divider"
 import Subtitle from "../TempDesignSystem/Text/Subtitle"
@@ -33,7 +33,7 @@ export default function GuestsRoomsPicker({
 
   const { getFieldState } = useFormContext<BookingWidgetSchema>()
 
-  const rooms = useGuestsRoomsStore.use.rooms()
+  const rooms = useGuestsRoomsStore((state) => state.rooms)
 
   // Not in MVP
   // const increaseRoom = useGuestsRoomsStore.use.increaseRoom()
@@ -43,7 +43,7 @@ export default function GuestsRoomsPicker({
     <div className={styles.pickerContainer}>
       <header className={styles.header}>
         <button type="button" className={styles.close} onClick={closePicker}>
-          <CloseLarge />
+          <CloseLargeIcon />
         </button>
       </header>
       <div className={styles.contentContainer}>

components/GuestsRoomsPicker/index.tsx

@@ -15,10 +15,14 @@ import styles from "./guests-rooms-picker.module.css"
 export default function GuestsRoomsPickerForm() {
   const intl = useIntl()
   const [isOpen, setIsOpen] = useState(false)
-  const rooms = useGuestsRoomsStore.use.rooms()
-  const adultCount = useGuestsRoomsStore.use.adultCount()
-  const childCount = useGuestsRoomsStore.use.childCount()
-  const setIsValidated = useGuestsRoomsStore.use.setIsValidated()
+  const { rooms, adultCount, childCount, setIsValidated } = useGuestsRoomsStore(
+    (state) => ({
+      rooms: state.rooms,
+      adultCount: state.adultCount,
+      childCount: state.childCount,
+      setIsValidated: state.setIsValidated,
+    })
+  )
   const ref = useRef<HTMLDivElement | null>(null)
   function handleOnClick() {
     setIsOpen((prevIsOpen) => !prevIsOpen)

i18n/dictionaries/sv.json

@@ -322,6 +322,7 @@
   "Zoo": "Djurpark",
   "Zoom in": "Zooma in",
   "Zoom out": "Zooma ut",
+  "as of today": "från och med idag",
   "booking.adults": "{totalAdults, plural, one {# vuxen} other {# vuxna}}",
   "booking.children": "{totalChildren, plural, one {# barn} other {# barn}}",
   "booking.guests": "Max {nrOfGuests, plural, one {# gäst} other {# gäster}}",
@@ -347,7 +348,8 @@
   "special character": "speciell karaktär",
   "spendable points expiring by": "{points} poäng förfaller {date}",
   "to": "till",
+  "uppercase letter": "stor bokstav",
   "{amount} {currency}": "{amount} {currency}",
   "{difference}{amount} {currency}": "{difference}{amount} {currency}",
   "{width} cm × {length} cm": "{width} cm × {length} cm"
-}
+}

stores/guests-rooms.ts

@@ -3,8 +3,6 @@
 import { produce } from "immer"
 import { create } from "zustand"
 
-import { createSelectors } from "./utils"
-
 import { BedTypeEnum } from "@/types/components/bookingWidget/enums"
 import { Child } from "@/types/components/bookingWidget/guestsRoomsPicker"
 
@@ -32,7 +30,7 @@ interface GuestsRooms {
   setIsValidated: (isValidated: boolean) => void
 }
 
-export const useGuestsRoomsStoreBase = create<GuestsRooms>((set, get) => ({
+export const useGuestsRoomsStore = create<GuestsRooms>((set, get) => ({
   rooms: [
     {
       adults: 1,
@@ -144,5 +142,3 @@ export const useGuestsRoomsStoreBase = create<GuestsRooms>((set, get) => ({
     ),
   setIsValidated: (isValidated) => set(() => ({ isValidated })),
 }))
-
-export const useGuestsRoomsStore = createSelectors(useGuestsRoomsStoreBase)

stores/utils.ts

@@ -1,17 +0,0 @@
-import { StoreApi, UseBoundStore } from "zustand"
-
-type WithSelectors<S> = S extends { getState: () => infer T }
-  ? S & { use: { [K in keyof T]: () => T[K] } }
-  : never
-
-export const createSelectors = <S extends UseBoundStore<StoreApi<object>>>(
-  _store: S
-) => {
-  let store = _store as WithSelectors<typeof _store>
-  store.use = {}
-  for (let k of Object.keys(store.getState())) {
-    ;(store.use as any)[k] = () => store((s) => s[k as keyof typeof s])
-  }
-
-  return store
-}