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

Merged in fix/sw-1897-member-price-modal (pull request #1856)

Browse Source 
fix(sw-1897): show member price modal immediately

* fix(sw-1897): show member price modal immediately

* Make checkbox fully controlled

* Remove action in the store that wasn't used


Approved-by: Hrishikesh Vaipurkar
This commit is contained in:
Niclas Edenvin
2025-04-25 09:55:24 +00:00
parent 0011cbe8d2
commit 3a958c4dd1
8 changed files with 87 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
apps/scandic-web/components/HotelReservation/EnterDetails/Details/RoomOne/JoinScandicFriendsCard/index.tsx
View File

@@ -1,5 +1,6 @@
"use client"
import { useState } from "react"
import { useIntl } from "react-intl"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
@@ -15,6 +16,8 @@ import { useRoomContext } from "@/contexts/Details/Room"
import useLang from "@/hooks/useLang"
import { formatPrice } from "@/utils/numberFormatting"
import MemberPriceModal from "../../MemberPriceModal"
import styles from "./joinScandicFriendsCard.module.css"
import type { JoinScandicFriendsCardProps } from "@/types/components/hotelReservation/enterDetails/details"
@@ -25,7 +28,18 @@ export default function JoinScandicFriendsCard({
}: JoinScandicFriendsCardProps) {
const lang = useLang()
const intl = useIntl()
const { room } = useRoomContext()
const {
room,
actions: { updateJoin },
} = useRoomContext()
const [isMemberPriceModalOpen, setIsMemberPriceModalOpen] = useState(false)
function onChange(event: { target: { value: boolean } }) {
updateJoin(event.target.value)
if (event.target.value) {
setIsMemberPriceModalOpen(true)
}
}
if (!("member" in room.roomRate) || !room.roomRate.member) {
return null
@@ -64,7 +78,11 @@ export default function JoinScandicFriendsCard({
return (
<div className={styles.cardContainer}>
<Checkbox name={name} className={styles.checkBox}>
<Checkbox
name={name}
className={styles.checkBox}
registerOptions={{ onChange }}
>
<div>
<Caption type="label" textTransform="uppercase" color="red">
{saveOnJoiningLabel}
@@ -138,6 +156,10 @@ export default function JoinScandicFriendsCard({
)}
</Footnote>
</div>
<MemberPriceModal
isOpen={isMemberPriceModalOpen}
setIsOpen={setIsMemberPriceModalOpen}
/>
</div>
)
}

74
apps/scandic-web/components/HotelReservation/EnterDetails/Details/RoomOne/MemberPriceModal/index.tsx
View File

@@ -1,74 +0,0 @@
"use client"
import { useIntl } from "react-intl"
import MagicWandIcon from "@scandic-hotels/design-system/Icons/MagicWandIcon"
import Modal from "@/components/Modal"
import Button from "@/components/TempDesignSystem/Button"
import Body from "@/components/TempDesignSystem/Text/Body"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import Title from "@/components/TempDesignSystem/Text/Title"
import { useRoomContext } from "@/contexts/Details/Room"
import { formatPrice } from "@/utils/numberFormatting"
import styles from "./modal.module.css"
import type { Dispatch, SetStateAction } from "react"
import { CurrencyEnum } from "@/types/enums/currency"
export default function MemberPriceModal({
isOpen,
setIsOpen,
}: {
isOpen: boolean
setIsOpen: Dispatch<SetStateAction<boolean>>
}) {
const { room } = useRoomContext()
const memberRate = "member" in room.roomRate ? room.roomRate.member : null
const intl = useIntl()
if (!memberRate) {
return null
}
const memberPrice = memberRate?.localPrice ?? memberRate?.requestedPrice
return (
<Modal isOpen={isOpen} onToggle={setIsOpen}>
<div className={styles.modalContent}>
<div className={styles.innerModalContent}>
<MagicWandIcon width="265px" />
<Title as="h3" level="h1" textTransform="regular">
{intl.formatMessage({
defaultMessage: "Member price activated",
})}
</Title>
{memberPrice && (
<span className={styles.newPrice}>
<Body>
{intl.formatMessage({
defaultMessage: "The new price is",
})}
</Body>
<Subtitle type="two" color="red">
{formatPrice(
intl,
memberPrice.pricePerStay ?? 0,
memberPrice.currency ?? CurrencyEnum.Unknown
)}
</Subtitle>
</span>
)}
</div>
<Button intent="primary" theme="base" onClick={() => setIsOpen(false)}>
{intl.formatMessage({
defaultMessage: "OK",
})}
</Button>
</div>
</Modal>
)
}

24
apps/scandic-web/components/HotelReservation/EnterDetails/Details/RoomOne/MemberPriceModal/modal.module.css
View File

@@ -1,24 +0,0 @@
.modalContent {
display: grid;
gap: var(--Spacing-x3);
width: 100%;
}
.innerModalContent {
display: grid;
gap: var(--Spacing-x2);
align-items: center;
justify-items: center;
}
.newPrice {
display: flex;
gap: var(--Spacing-x1);
align-items: center;
}
@media screen and (min-width: 768px) {
.modalContent {
width: 352px;
}
}

13
apps/scandic-web/components/HotelReservation/EnterDetails/Details/RoomOne/index.tsx
View File

@@ -1,6 +1,6 @@
"use client"
import { zodResolver } from "@hookform/resolvers/zod"
import { useCallback, useState } from "react"
import { useCallback } from "react"
import { FormProvider, useForm } from "react-hook-form"
import { useIntl } from "react-intl"
@@ -17,7 +17,6 @@ import { useRoomContext } from "@/contexts/Details/Room"
import { trackPaymentSectionOpen } from "@/utils/tracking/booking"
import JoinScandicFriendsCard from "./JoinScandicFriendsCard"
import MemberPriceModal from "./MemberPriceModal"
import { guestDetailsSchema, signedInDetailsSchema } from "./schema"
import Signup from "./Signup"
@@ -31,7 +30,6 @@ import type {
const formID = "enter-details"
export default function Details({ user }: DetailsProps) {
const intl = useIntl()
const [isMemberPriceModalOpen, setIsMemberPriceModalOpen] = useState(false)
const { canProceedToPayment, lastRoom, isMultiRoom } = useEnterDetailsStore(
(state) => ({
@@ -76,12 +74,9 @@ export default function Details({ user }: DetailsProps) {
const onSubmit = useCallback(
(values: DetailsSchema) => {
if ((values.join || values.membershipNo) && memberRate && !user) {
setIsMemberPriceModalOpen(true)
}
updateDetails(values)
},
[updateDetails, setIsMemberPriceModalOpen, memberRate, user]
[updateDetails]
)
return (
@@ -187,10 +182,6 @@ export default function Details({ user }: DetailsProps) {
</Button>
</footer>
) : null}
<MemberPriceModal
isOpen={isMemberPriceModalOpen}
setIsOpen={setIsMemberPriceModalOpen}
/>
</form>
</FormProvider>
)