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

Merged in feat/SW-1055-Accordion-for-summary-bar-in-mobile-on-Select-Rate (pull request #1283)

Browse Source 
Feat/SW-1055 Accordion for summary bar in mobile on Select Rate

* feat(SW-1055) created mobile summary for select rate

* feat(SW-1055) Added summary for mobile (accordion)


Approved-by: Tobias Johansson
This commit is contained in:
Pontus Dreij
2025-02-10 15:11:31 +00:00
parent 5a0edc9187
commit c863294919
20 changed files with 405 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
components/HotelReservation/SelectRate/RateSummary/index.tsx
View File

@@ -11,10 +11,10 @@ import SignupPromoMobile from "@/components/HotelReservation/SignupPromo/Mobile"
import Button from "@/components/TempDesignSystem/Button"
import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Footnote from "@/components/TempDesignSystem/Text/Footnote"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import { formatPrice } from "@/utils/numberFormatting"
import MobileSummary from "./MobileSummary"
import { calculateTotalPrice } from "./utils"
import styles from "./rateSummary.module.css"
@@ -26,13 +26,16 @@ export default function RateSummary({
isUserLoggedIn,
packages,
roomsAvailability,
rooms,
booking,
vat,
}: RateSummaryProps) {
const intl = useIntl()
const [isVisible, setIsVisible] = useState(false)
const { getSelectedRateSummary } = useRateSelectionStore()
const { rooms } = booking
useEffect(() => {
const timer = setTimeout(() => setIsVisible(true), 0)
return () => clearTimeout(timer)
@@ -88,7 +91,6 @@ export default function RateSummary({
return (
<div className={styles.summary} data-visible={isVisible}>
{showMemberDiscountBanner && <SignupPromoMobile />}
<div className={styles.content}>
<div className={styles.summaryText}>
{selectedRateSummary.map((room, index) => (
@@ -161,54 +163,48 @@ export default function RateSummary({
>
{formatPrice(
intl,
totalPriceToShow.localPrice.price,
totalPriceToShow.localPrice.currency
totalPriceToShow.local.price,
totalPriceToShow.local.currency
)}
</Subtitle>
{totalPriceToShow?.requestedPrice ? (
{totalPriceToShow?.requested ? (
<Body color="uiTextMediumContrast">
{intl.formatMessage(
{ id: "Approx. {value}" },
{
value: formatPrice(
intl,
totalPriceToShow.requestedPrice.price,
totalPriceToShow.requestedPrice.currency
totalPriceToShow.requested.price,
totalPriceToShow.requested.currency
),
}
)}
</Body>
) : null}
</div>
<div className={styles.summaryPriceTextMobile}>
<Caption color="uiTextHighContrast">
{intl.formatMessage({ id: "Total price" })}
</Caption>
<Subtitle color={isUserLoggedIn ? "red" : "uiTextHighContrast"}>
{formatPrice(
intl,
totalPriceToShow.localPrice.price,
totalPriceToShow.localPrice.currency
)}
</Subtitle>
<Footnote
color="uiTextMediumContrast"
className={styles.summaryPriceTextMobile}
>
{summaryPriceText}
</Footnote>
</div>
<Button
type="submit"
theme="base"
className={styles.continueButton}
disabled={!isAllRoomsSelected}
>
{intl.formatMessage({ id: "Continue" })}
</Button>
</div>
<Button
intent="primary"
theme="base"
type="submit"
className={styles.continueButton}
disabled={!isAllRoomsSelected}
>
{intl.formatMessage({ id: "Continue" })}
</Button>
</div>
</div>
<div className={styles.mobileSummary}>
{showMemberDiscountBanner ? <SignupPromoMobile /> : null}
<MobileSummary
totalPriceToShow={totalPriceToShow}
isAllRoomsSelected={isAllRoomsSelected}
booking={booking}
isUserLoggedIn={isUserLoggedIn}
vat={vat}
roomsAvailability={roomsAvailability}
/>
</div>
</div>
)
}