feat: SW-276 Updated translations

components/GuestsRoomsPicker/GuestsRoomPicker/ChildSelector/ChildInfoSelector.tsx

@@ -4,17 +4,9 @@ import Select from "@/components/TempDesignSystem/Select"
 
 import {
   Child,
-  ChildBed,
+  ChildInfoSelectorProps,
 } from "@/types/components/bookingWidget/guestsRoomsPicker"
 
-type ChildSelectorProps = {
-  child: Child
-  index: number
-  availableBedTypes?: ChildBed[]
-  updateChild: (child: Child, index: number) => void
-  childAgeError: boolean
-}
-
 export default function ChildInfoSelector({
   child = { age: -1, bed: -1 },
   index = 0,
@@ -24,10 +16,11 @@ export default function ChildInfoSelector({
     { label: "In extra bed", value: 2 },
   ],
   updateChild = (child: Child, index: number) => {},
-  childAgeError,
-}: ChildSelectorProps) {
+  isValid,
+}: ChildInfoSelectorProps) {
   const intl = useIntl()
   const ageLabel = intl.formatMessage({ id: "Age" })
+  const ageReqdErrMsg = intl.formatMessage({ id: "Child age is required" })
   const bedLabel = intl.formatMessage({ id: "Bed" })
 
   const ageList = [
@@ -70,9 +63,7 @@ export default function ChildInfoSelector({
           name="age"
           placeholder={ageLabel}
         />
-        {childAgeError && child.age < 0 ? (
-          <span>Child Age is required</span>
-        ) : null}
+        {!isValid && child.age < 0 ? <span>{ageReqdErrMsg}</span> : null}
       </div>
       <div>
         {child.age !== -1 ? (

components/GuestsRoomsPicker/GuestsRoomPicker/ChildSelector/index.tsx

@@ -17,7 +17,7 @@ export default function ChildSelector({
   roomChildren = [],
   adultCount = 1,
   updateChildren = (children: Child[]) => {},
-  childAgeError,
+  isValid,
 }: ChildSelectorProps) {
   const intl = useIntl()
   const childrenLabel = intl.formatMessage({ id: "Children" })
@@ -107,7 +107,7 @@ export default function ChildSelector({
             child={child}
             availableBedTypes={childBedTypes[index]}
             updateChild={updateChildInfo}
-            childAgeError={childAgeError}
+            isValid={isValid}
           />
         </div>
       ))}

components/GuestsRoomsPicker/GuestsRoomPicker/index.tsx

@@ -17,7 +17,7 @@ export default function GuestsRoomPicker({
   handleOnSelect = (selected: GuestsRoom, index: number) => {},
   room = { adults: 1, children: [] },
   index = 1,
-  childAgeError,
+  isValid,
 }: GuestsRoomPickerProps) {
   const intl = useIntl()
   const roomLabel = intl.formatMessage({ id: "Room" })
@@ -42,7 +42,7 @@ export default function GuestsRoomPicker({
         roomChildren={room.children}
         adultCount={room.adults}
         updateChildren={updateChildren}
-        childAgeError={childAgeError}
+        isValid={isValid}
       />
     </section>
   )

components/GuestsRoomsPicker/GuestsRoomsPicker.tsx

@@ -1,5 +1,6 @@
 "use client"
 import { useState } from "react"
+import { useIntl } from "react-intl"
 
 import useLang from "@/hooks/useLang"
 
@@ -23,9 +24,11 @@ export default function GuestsRoomsPicker({
     },
   ],
   closePicker,
-  childAgeError,
+  isValid,
 }: GuestsRoomsPickerProps) {
   const lang = useLang()
+  const intl = useIntl()
+  const doneLabel = intl.formatMessage({ id: "Done" })
   const [selectedGuests, setSelectedGuests] =
     useState<GuestsRoom[]>(initialSelected)
 
@@ -39,6 +42,7 @@ export default function GuestsRoomsPicker({
     setSelectedGuests(updatedSelectedGuests)
   }
 
+  // Not in MVP scope
   function addRoom() {
     if (selectedGuests.length < 4) {
       let updatedSelectedGuests = JSON.parse(JSON.stringify(selectedGuests))
@@ -51,6 +55,7 @@ export default function GuestsRoomsPicker({
     }
   }
 
+  // Not in MVP scope
   function removeRoom(index: number) {
     if (selectedGuests.length > 1) {
       let updatedSelectedGuests = JSON.parse(JSON.stringify(selectedGuests))
@@ -68,7 +73,7 @@ export default function GuestsRoomsPicker({
             room={room}
             handleOnSelect={handleSelectRoomGuests}
             index={index}
-            childAgeError={childAgeError}
+            isValid={isValid}
           />
           {/* Not in MVP
            {index > 0 ? (
@@ -86,7 +91,9 @@ export default function GuestsRoomsPicker({
             Add Room
           </Button>
         ) : null} */}
-        <Button onClick={closePicker}>Done</Button>
+        <Button onClick={closePicker} disabled={!isValid}>
+          {doneLabel}
+        </Button>
       </div>
     </>
   )

components/GuestsRoomsPicker/index.tsx

@@ -21,7 +21,7 @@ export default function GuestsRoomsPickerForm({
 }: GuestsRoomsFormProps) {
   const intl = useIntl()
   const [isOpen, setIsOpen] = useState(false)
-  const [isAgeError, setIsAgeError] = useState(false)
+  const [isValid, setIsValid] = useState(true)
   const selectedGuests = useWatch({ name })
   const { register, setValue } = useFormContext()
   const ref = useRef<HTMLDivElement | null>(null)
@@ -30,14 +30,14 @@ export default function GuestsRoomsPickerForm({
   }
   function handleSelectGuest(selected: GuestsRoom[]) {
     setValue(name, selected)
-    setIsAgeError(false)
+    setIsValid(true)
   }
   const closePicker = useCallback(() => {
     const guestRoomsValidData = guestRoomsSchema.safeParse(selectedGuests)
     if (guestRoomsValidData.success) {
       setIsOpen(false)
     } else {
-      setIsAgeError(true)
+      setIsValid(false)
     }
   }, [selectedGuests])
 
@@ -90,7 +90,7 @@ export default function GuestsRoomsPickerForm({
           handleOnSelect={handleSelectGuest}
           initialSelected={selectedGuests}
           closePicker={closePicker}
-          childAgeError={isAgeError}
+          isValid={isValid}
         />
       </div>
     </div>