scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merged in fix/SW-2121 (pull request #1747)

Browse Source 
SW-2121: Fix issue where closing SidePeeks would trigger other click events

* fix: replace div with Button in BookingWidget to align press events

* fix: replace div with Button in ImageGallery to align press events


Approved-by: Michael Zetterberg
This commit is contained in:
Arvid Norlin
2025-04-07 10:28:51 +00:00
parent 7c82a565ae
commit 39059eb8b2
4 changed files with 124 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

148
apps/scandic-web/components/BookingWidget/MobileToggleButton/index.tsx
View File

@@ -1,16 +1,16 @@
"use client"
import { Button } from "react-aria-components"
import { useWatch } from "react-hook-form"
import { useIntl } from "react-intl"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { dt } from "@/lib/dt"
import SkeletonShimmer from "@/components/SkeletonShimmer"
import Divider from "@/components/TempDesignSystem/Divider"
import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import useLang from "@/hooks/useLang"
import isValidJson from "@/utils/isValidJson"
@@ -85,68 +85,78 @@ export default function MobileToggleButton({
totalDetails.push(totalRoomsMsg)
return (
<div
<Button
className={locationAndDateIsSet ? styles.complete : styles.partial}
onClick={openMobileSearch}
role="button"
onPress={openMobileSearch}
>
{!locationAndDateIsSet && (
<>
<div>
<Caption type="bold" color="red">
{intl.formatMessage({ id: "Where to?" })}
</Caption>
<Body color="uiTextPlaceholder">
{parsedLocation
? parsedLocation.name
: intl.formatMessage({ id: "Destination" })}
</Body>
</div>
<span className={styles.block}>
<Typography variant={"Body/Supporting text (caption)/smBold"}>
<span className={styles.blockLabel}>
{intl.formatMessage({ id: "Where to?" })}
</span>
</Typography>
<Typography variant={"Body/Paragraph/mdRegular"}>
<span className={styles.placeholder}>
{parsedLocation
? parsedLocation.name
: intl.formatMessage({ id: "Destination" })}
</span>
</Typography>
</span>
{/* Divider can't be a div */}
<Divider color="baseSurfaceSubtleNormal" variant="vertical" />
<div>
<Caption type="bold" color="red">
{totalNightsMsg}
</Caption>
<Body>
{intl.formatMessage(
{ id: "{selectedFromDate} - {selectedToDate}" },
{
selectedFromDate,
selectedToDate,
}
)}
</Body>
</div>
<div className={styles.icon}>
<span className={styles.block}>
<Typography variant={"Body/Supporting text (caption)/smBold"}>
<span className={styles.blockLabel}>{totalNightsMsg}</span>
</Typography>
<Typography variant={"Body/Paragraph/mdRegular"}>
<span>
{intl.formatMessage(
{ id: "{selectedFromDate} - {selectedToDate}" },
{
selectedFromDate,
selectedToDate,
}
)}
</span>
</Typography>
</span>
<span className={styles.icon}>
<MaterialIcon icon="search" color="Icon/Inverted" />
</div>
</span>
</>
)}
{locationAndDateIsSet && (
<>
<div>
<Caption color="red">{parsedLocation?.name}</Caption>
<Caption>
{intl.formatMessage(
{
id: "{selectedFromDate} - {selectedToDate} ({totalNights}) {details}",
},
{
selectedFromDate,
selectedToDate,
totalNights: totalNightsMsg,
details: totalDetails.join(", "),
}
)}
</Caption>
</div>
<div className={styles.icon}>
<span className={styles.block}>
<Typography variant={"Body/Supporting text (caption)/smRegular"}>
<span className={styles.blockLabel}>{parsedLocation?.name}</span>
</Typography>
<Typography variant={"Body/Supporting text (caption)/smRegular"}>
<span className={styles.locationAndDate}>
{intl.formatMessage(
{
id: "{selectedFromDate} - {selectedToDate} ({totalNights}) {details}",
},
{
selectedFromDate,
selectedToDate,
totalNights: totalNightsMsg,
details: totalDetails.join(", "),
}
)}
</span>
</Typography>
</span>
<span className={styles.icon}>
<MaterialIcon icon="edit_square" color="Icon/Inverted" />
</div>
</span>
</>
)}
</div>
</Button>
)
}
@@ -155,25 +165,29 @@ export function MobileToggleButtonSkeleton() {
return (
<div className={styles.partial}>
<div>
<Caption type="bold" color="red">
{intl.formatMessage({ id: "Where to?" })}
</Caption>
<SkeletonShimmer height="24px" />
</div>
<span className={styles.block}>
<Typography variant={"Body/Supporting text (caption)/smBold"}>
<span className={styles.blockLabel}>
{intl.formatMessage({ id: "Where to?" })}
</span>
</Typography>
<SkeletonShimmer display={"block"} height="24px" />
</span>
<Divider color="baseSurfaceSubtleNormal" variant="vertical" />
<div>
<Caption type="bold" color="red">
{intl.formatMessage(
{ id: "{totalNights, plural, one {# night} other {# nights}}" },
{ totalNights: 0 }
)}
</Caption>
<SkeletonShimmer height="24px" />
</div>
<div className={styles.icon}>
<span className={styles.block}>
<Typography variant="Body/Supporting text (caption)/smBold">
<span className={styles.blockLabel}>
{intl.formatMessage(
{ id: "{totalNights, plural, one {# night} other {# nights}}" },
{ totalNights: 0 }
)}
</span>
</Typography>
<SkeletonShimmer display={"block"} height="24px" />
</span>
<span className={styles.icon}>
<MaterialIcon icon="search" color="Icon/Inverted" />
</div>
</span>
</div>
)
}