fix(SW-957 SW-958): Make selected EnterDetailsCards clickable

components/HotelReservation/EnterDetails/BedType/index.tsx

@@ -76,6 +76,9 @@ export default function BedType({ bedTypes }: BedTypeProps) {
               subtitle={width}
               title={roomType.description}
               value={roomType.value}
+              handleSelectedOnClick={
+                bedType === roomType.value ? completeStep : undefined
+              }
             />
           )
         })}

components/HotelReservation/EnterDetails/Breakfast/index.tsx

@@ -97,6 +97,9 @@ export default function Breakfast({ packages }: BreakfastProps) {
             })}
             title={intl.formatMessage({ id: "Breakfast buffet" })}
             value={pkg.code}
+            handleSelectedOnClick={
+              breakfast === pkg.code ? completeStep : undefined
+            }
           />
         ))}
         <RadioCard
@@ -113,6 +116,9 @@ export default function Breakfast({ packages }: BreakfastProps) {
           })}
           title={intl.formatMessage({ id: "No breakfast" })}
           value="false"
+          handleSelectedOnClick={
+            breakfast === "false" ? completeStep : undefined
+          }
         />
       </form>
     </FormProvider>

components/TempDesignSystem/Form/ChoiceCard/_Card/card.ts

@@ -12,6 +12,7 @@ interface BaseCardProps
   title: React.ReactNode
   type: "checkbox" | "radio"
   value?: string
+  handleSelectedOnClick?: () => void
 }
 
 interface ListCardProps extends BaseCardProps {

components/TempDesignSystem/Form/ChoiceCard/_Card/index.tsx

@@ -25,10 +25,22 @@ export default function Card({
   title,
   type,
   value,
+  handleSelectedOnClick,
 }: CardProps) {
   const { register } = useFormContext()
+
+  function onLabelClick(event: React.MouseEvent) {
+    // Preventing click event on label elements firing twice: https://github.com/facebook/react/issues/14295
+    event.preventDefault()
+    handleSelectedOnClick?.()
+  }
   return (
-    <label className={styles.label} data-declined={declined} tabIndex={0}>
+    <label
+      className={styles.label}
+      data-declined={declined}
+      tabIndex={0}
+      onClick={handleSelectedOnClick ? onLabelClick : undefined}
+    >
       <Caption className={styles.title} color="burgundy" type="label" uppercase>
         {title}
       </Caption>