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

feat(SW-706): make eslint rule 'formatjs/no-literal-string-in-jsx' pass

Browse Source
This commit is contained in:
Michael Zetterberg
2025-02-07 06:51:36 +01:00
parent e22fc1f3c8
commit 440e1f92df
393 changed files with 4839 additions and 1554 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/ActionButtons/index.tsx
View File

@@ -43,8 +43,12 @@ export default function ActionButtons({
const intl = useIntl()
const isConfirmStep = currentStep === AncillaryStepEnum.confirmation
const confirmLabel = intl.formatMessage({ id: "Confirm" })
const continueLabel = intl.formatMessage({ id: "Continue" })
const confirmLabel = intl.formatMessage({
defaultMessage: "Confirm",
})
const continueLabel = intl.formatMessage({
defaultMessage: "Continue",
})
const quantityWithCard = useWatch<AncillaryQuantityFormData>({
name: "quantityWithCard",
})
@@ -87,7 +91,9 @@ export default function ActionButtons({
onPress={togglePriceDetails}
className={styles.priceButton}
>
{intl.formatMessage({ id: "Price details" })}
{intl.formatMessage({
defaultMessage: "Price details",
})}
{isPriceDetailsOpen ? (
<MaterialIcon
icon="keyboard_arrow_up"
@@ -112,7 +118,9 @@ export default function ActionButtons({
color="Primary"
onPress={prevStep}
>
{intl.formatMessage({ id: "Back" })}
{intl.formatMessage({
defaultMessage: "Back",
})}
</Button>
{isConfirmStep && (
<Button

3
apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/PriceDetails/PriceSummary/PriceRow/index.tsx
View File

@@ -22,7 +22,8 @@ export default function PriceRow({
<h2>{title}</h2>
</Typography>
<Typography variant="Body/Paragraph/mdBold">
<p>{`X${quantity}`}</p>
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
<p>{`×${quantity}`}</p>
</Typography>
</div>
<div className={styles.column}>

42
apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/PriceDetails/PriceSummary/index.tsx
View File

@@ -35,7 +35,11 @@ export default function PriceSummary({
return (
<div className={styles.container}>
<Typography variant="Body/Paragraph/mdBold">
<h2>{intl.formatMessage({ id: "Summary" })}</h2>
<h2>
{intl.formatMessage({
defaultMessage: "Summary",
})}
</h2>
</Typography>
<Divider color="subtle" />
@@ -45,7 +49,9 @@ export default function PriceSummary({
<PriceRow
title={item.title}
quantity={item.quantityWithCard}
label={intl.formatMessage({ id: "Price including VAT" })}
label={intl.formatMessage({
defaultMessage: "Price including VAT",
})}
value={formatPrice(intl, item.totalPrice, item.currency)}
/>
)}
@@ -53,8 +59,12 @@ export default function PriceSummary({
<PriceRow
title={item.title}
quantity={item.quantityWithPoints}
label={intl.formatMessage({ id: "Points" })}
value={`${item.points} ${intl.formatMessage({ id: "points" })}`}
label={intl.formatMessage({
defaultMessage: "Points",
})}
value={`${item.points} ${intl.formatMessage({
defaultMessage: "points",
})}`}
/>
)}
<Divider color="subtle" />
@@ -65,19 +75,29 @@ export default function PriceSummary({
<Typography variant="Body/Paragraph/mdBold">
<p>
{hasTotalPrice
? intl.formatMessage({ id: "Total price including VAT" })
: intl.formatMessage({ id: "Total points" })}
? intl.formatMessage({
defaultMessage: "Total price including VAT",
})
: intl.formatMessage({
defaultMessage: "Total points",
})}
</p>
</Typography>
<div className={styles.totalPrice}>
{(hasTotalPoints || hasTotalPrice) && (
<Typography variant="Body/Paragraph/mdBold">
<p>
{hasTotalPrice &&
formatPrice(intl, totalPrice, items[0]?.currency)}
{hasTotalPoints && hasTotalPrice && " + "}
{hasTotalPoints &&
`${totalPoints} ${intl.formatMessage({ id: "points" })}`}
{hasTotalPrice
? formatPrice(intl, totalPrice, items[0]?.currency)
: null}
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
{hasTotalPoints && hasTotalPrice ? " + " : null}
{hasTotalPoints
? // eslint-disable-next-line formatjs/no-literal-string-in-jsx
`${totalPoints} ${intl.formatMessage({
defaultMessage: "points",
})}`
: null}
</p>
</Typography>
)}

35
apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/PriceDetails/index.tsx
View File

@@ -74,7 +74,9 @@ export default function PriceDetails({
const items = [
{
title: `${selectedAncillary.title} / ${intl.formatMessage({ id: "Adult" })}`,
title: `${selectedAncillary.title} / ${intl.formatMessage({
defaultMessage: "Adult",
})}`,
totalPrice: breakfastData.priceAdult,
currency: breakfastData.currency,
quantityWithCard: breakfastData.nrOfAdults * breakfastData.nrOfNights,
@@ -83,7 +85,9 @@ export default function PriceDetails({
if (breakfastData.nrOfPayingChildren > 0) {
items.push({
title: `${selectedAncillary.title} / ${intl.formatMessage({ id: "Children" })} 4-12`,
title: `${selectedAncillary.title} / ${intl.formatMessage({
defaultMessage: "Children",
})} 4-12`,
totalPrice: breakfastData.priceChild,
currency: breakfastData.currency,
quantityWithCard:
@@ -93,7 +97,12 @@ export default function PriceDetails({
if (breakfastData.nrOfFreeChildren > 0) {
items.push({
title: `${selectedAncillary.title} / ${intl.formatMessage({ id: "Children under {age}" }, { age: 4 })}`,
title: `${selectedAncillary.title} / ${intl.formatMessage(
{
defaultMessage: "Children under {age}",
},
{ age: 4 }
)}`,
totalPrice: 0,
currency: breakfastData.currency,
quantityWithCard:
@@ -122,12 +131,19 @@ export default function PriceDetails({
<div className={styles.totalPrice}>
<div className={styles.totalPriceInclVAT}>
<Typography variant="Body/Paragraph/mdBold">
<p>{intl.formatMessage({ id: "Total" })}</p>
<p>
{intl.formatMessage({
defaultMessage: "Total",
})}
</p>
</Typography>
{totalPrice && (
<Typography variant="Body/Paragraph/mdRegular">
<p className={styles.vatText}>
({intl.formatMessage({ id: "Incl. VAT" })})
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
{`(${intl.formatMessage({
defaultMessage: "Incl. VAT",
})})`}
</p>
</Typography>
)}
@@ -154,7 +170,14 @@ export default function PriceDetails({
</div>
<Typography variant="Body/Paragraph/mdBold">
<p>
{totalPoints} {intl.formatMessage({ id: "points" })}
{totalPoints}
{
/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */
" "
}
{intl.formatMessage({
defaultMessage: "points",
})}
</p>
</Typography>
</div>

40
apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/ConfirmationStep/index.tsx
View File

@@ -54,7 +54,8 @@ export default function ConfirmationStep({
<p>
{intl.formatMessage(
{
id: "All ancillaries are fully refundable until {date}. Time selection and special requests are also modifiable.",
defaultMessage:
"All ancillaries are fully refundable until {date}. Time selection and special requests are also modifiable.",
},
{ date: refundableDate }
)}
@@ -65,7 +66,7 @@ export default function ConfirmationStep({
<Typography variant="Title/Subtitle/md">
<h2>
{intl.formatMessage({
id: "Points to be deducted now",
defaultMessage: "Points to be deducted now",
})}
</h2>
</Typography>
@@ -75,7 +76,9 @@ export default function ConfirmationStep({
<Typography variant="Title/Overline/sm">
<h2>
{intl.formatMessage(
{ id: "{amount} points" },
{
defaultMessage: "{amount} points",
},
{ amount: totalPoints }
)}
</h2>
@@ -84,7 +87,9 @@ export default function ConfirmationStep({
<Typography variant="Body/Paragraph/mdRegular">
<p>
{intl.formatMessage(
{ id: "{amount} points available" },
{
defaultMessage: "{amount} points available",
},
{ amount: currentPoints }
)}
</p>
@@ -98,7 +103,7 @@ export default function ConfirmationStep({
<Typography variant="Title/Subtitle/md">
<h2>
{intl.formatMessage({
id: "Reserve with Card",
defaultMessage: "Reserve with Card",
})}
</h2>
</Typography>
@@ -106,7 +111,8 @@ export default function ConfirmationStep({
<Typography variant="Body/Supporting text (caption)/smRegular">
<p>
{intl.formatMessage({
id: "Payment will be made on check-in. The card will be only used to guarantee the ancillary in case of no-show.",
defaultMessage:
"Payment will be made on check-in. The card will be only used to guarantee the ancillary in case of no-show.",
})}
</p>
</Typography>
@@ -115,14 +121,17 @@ export default function ConfirmationStep({
name="paymentMethod"
value={PaymentMethodEnum.card}
cardNumber={guaranteeInfo.maskedCard.slice(-4)}
label={intl.formatMessage({ id: "Credit card" })}
label={intl.formatMessage({
defaultMessage: "Credit card",
})}
/>
) : (
<>
<Alert
type={AlertTypeEnum.Info}
text={intl.formatMessage({
id: "By adding a card you also guarantee your room booking for late arrival.",
defaultMessage:
"By adding a card you also guarantee your room booking for late arrival.",
})}
/>
{savedCreditCards?.length && (
@@ -131,13 +140,19 @@ export default function ConfirmationStep({
<>
{savedCreditCards?.length && (
<Typography variant="Title/Overline/sm">
<h4>{intl.formatMessage({ id: "OTHER" })}</h4>
<h4>
{intl.formatMessage({
defaultMessage: "OTHER",
})}
</h4>
</Typography>
)}
<PaymentOption
name="paymentMethod"
value={PaymentMethodEnum.card}
label={intl.formatMessage({ id: "Credit card" })}
label={intl.formatMessage({
defaultMessage: "Credit card",
})}
/>
</>
</>
@@ -150,7 +165,8 @@ export default function ConfirmationStep({
<p>
{intl.formatMessage(
{
id: "Yes, I accept the general <termsAndConditionsLink>Terms & Conditions</termsAndConditionsLink>, and understand that Scandic will process my personal data in accordance with <privacyPolicyLink>Scandic's Privacy policy</privacyPolicyLink>. There you can learn more about what data we process, your rights and where to turn if you have questions.",
defaultMessage:
"Yes, I accept the general <termsAndConditionsLink>Terms & Conditions</termsAndConditionsLink>, and understand that Scandic will process my personal data in accordance with <privacyPolicyLink>Scandic's Privacy policy</privacyPolicyLink>. There you can learn more about what data we process, your rights and where to turn if you have questions.",
},
{
termsAndConditionsLink: (str) => (
@@ -185,7 +201,7 @@ export default function ConfirmationStep({
<Typography variant="Body/Supporting text (caption)/smRegular">
<span>
{intl.formatMessage({
id: "I accept the terms and conditions",
defaultMessage: "I accept the terms and conditions",
})}
</span>
</Typography>

13
apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/DeliveryDetailsStep/index.tsx
View File

@@ -17,7 +17,9 @@ export default function DeliveryMethodStep() {
<div className={styles.selectContainer}>
<div className={styles.select}>
<Subtitle type="two">
{intl.formatMessage({ id: "Delivered at:" })}
{intl.formatMessage({
defaultMessage: "Delivered at:",
})}
</Subtitle>
<Select
name="deliveryTime"
@@ -28,18 +30,21 @@ export default function DeliveryMethodStep() {
/>
<Body>
{intl.formatMessage({
id: "All add-ons are delivered at the same time. Changes to delivery times will affect earlier add-ons.",
defaultMessage:
"All add-ons are delivered at the same time. Changes to delivery times will affect earlier add-ons.",
})}
</Body>
</div>
<div className={styles.select}>
<Input
label={intl.formatMessage({ id: "Other Requests" })}
label={intl.formatMessage({
defaultMessage: "Other Requests",
})}
name="optionalText"
/>
<Caption>
{intl.formatMessage({
id: "Optional",
defaultMessage: "Optional",
})}
</Caption>
</div>

4
apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/SelectAncillaryStep/index.tsx
View File

@@ -34,7 +34,9 @@ export default function SelectAncillaryStep() {
<p>
{categoryName
? categoryName
: intl.formatMessage({ id: "Other" })}
: intl.formatMessage({
defaultMessage: "Other",
})}
</p>
</Typography>
</button>

62
apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/SelectQuantityStep/index.tsx
View File

@@ -51,21 +51,33 @@ export default function SelectQuantityStep({ user }: SelectQuantityStepProps) {
const insufficientPoints = currentPoints < pointsCost || currentPoints === 0
const pointsLabel = insufficientPoints
? intl.formatMessage({ id: "Insufficient points" })
: intl.formatMessage({ id: "Select quantity" })
? intl.formatMessage({
defaultMessage: "Insufficient points",
})
: intl.formatMessage({
defaultMessage: "Select quantity",
})
return (
<div className={styles.selectContainer}>
{selectedAncillary?.points && user && (
<div className={styles.select}>
<Typography variant="Title/Subtitle/md">
<h2>{intl.formatMessage({ id: "Pay with points" })}</h2>
<h2>
{intl.formatMessage({
defaultMessage: "Pay with points",
})}
</h2>
</Typography>
<div className={styles.totalPointsContainer}>
<div className={styles.totalPoints}>
<MaterialIcon icon="diamond" />
<Typography variant="Title/Overline/sm">
<h2>{intl.formatMessage({ id: "Total points" })}</h2>
<h2>
{intl.formatMessage({
defaultMessage: "Total points",
})}
</h2>
</Typography>
</div>
<Typography variant="Body/Paragraph/mdRegular">
@@ -83,11 +95,21 @@ export default function SelectQuantityStep({ user }: SelectQuantityStepProps) {
)}
<div className={styles.select}>
<Typography variant="Title/Subtitle/md">
<h2> {intl.formatMessage({ id: "Pay with Card" })}</h2>
<h2>
{
/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */
" "
}
{intl.formatMessage({
defaultMessage: "Pay with Card",
})}
</h2>
</Typography>
<Select
name="quantityWithCard"
label={intl.formatMessage({ id: "Select quantity" })}
label={intl.formatMessage({
defaultMessage: "Select quantity",
})}
items={cardQuantityOptions}
isNestedInModal
/>
@@ -107,7 +129,7 @@ function BreakfastInfo() {
if (!breakfastData) {
return intl.formatMessage({
id: "Can not show breakfast prices.",
defaultMessage: "Can not show breakfast prices.",
})
}
@@ -116,7 +138,8 @@ function BreakfastInfo() {
<Alert
type={AlertTypeEnum.Info}
text={intl.formatMessage({
id: "Breakfast can only be added for the entire duration of the stay and for all guests.",
defaultMessage:
"Breakfast can only be added for the entire duration of the stay and for all guests.",
})}
/>
{(breakfastData.nrOfPayingChildren > 0 ||
@@ -126,10 +149,14 @@ function BreakfastInfo() {
<MaterialIcon icon="check_circle" className={styles.icon} />
<div>
<dt>
{`${breakfastData.nrOfAdults} X ${intl.formatMessage({ id: "Adults" })}`}
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
{`${breakfastData.nrOfAdults} × ${intl.formatMessage({
defaultMessage: "Adults",
})}`}
</dt>
<dd>
<Body>
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
{`${breakfastData.priceAdult} ${breakfastData.currency}`}
</Body>
</dd>
@@ -141,10 +168,14 @@ function BreakfastInfo() {
<MaterialIcon icon="check_circle" className={styles.icon} />
<div>
<dt>
{`${breakfastData.nrOfPayingChildren} X ${intl.formatMessage({ id: "ages" })} 4-12`}
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
{`${breakfastData.nrOfPayingChildren} × ${intl.formatMessage({
defaultMessage: "ages",
})} 4-12`}
</dt>
<dd>
<Body>
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
{`${breakfastData.priceChild} ${breakfastData.currency}`}
</Body>
</dd>
@@ -157,10 +188,17 @@ function BreakfastInfo() {
<MaterialIcon icon="check_circle" className={styles.icon} />
<div>
<dt>
{`${breakfastData.nrOfFreeChildren} X ${intl.formatMessage({ id: "under" })} 4`}
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
{`${breakfastData.nrOfFreeChildren} × ${intl.formatMessage({
defaultMessage: "under",
})} 4`}
</dt>
<dd>
<Body>{intl.formatMessage({ id: "Free" })}</Body>
<Body>
{intl.formatMessage({
defaultMessage: "Free",
})}
</Body>
</dd>
</div>
</div>

47
apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/index.tsx
View File

@@ -110,7 +110,8 @@ export default function AddAncillaryFlowModal({
const ancillaryErrorMessage = intl.formatMessage(
{
id: "Something went wrong. {ancillary} could not be added to your booking!",
defaultMessage:
"Something went wrong. {ancillary} could not be added to your booking!",
},
{ ancillary: selectedAncillary?.title }
)
@@ -170,7 +171,9 @@ export default function AddAncillaryFlowModal({
)
toast.success(
intl.formatMessage(
{ id: "{ancillary} added to your booking!" },
{
defaultMessage: "{ancillary} added to your booking!",
},
{ ancillary: selectedAncillary?.title }
)
)
@@ -261,7 +264,11 @@ export default function AddAncillaryFlowModal({
: []
if (isBreakfast && !breakfastData) {
toast.error(intl.formatMessage({ id: "Something went wrong!" }))
toast.error(
intl.formatMessage({
defaultMessage: "Something went wrong!",
})
)
return
}
const shouldSkipGuarantee =
@@ -329,7 +336,9 @@ export default function AddAncillaryFlowModal({
const modalTitle =
currentStep === AncillaryStepEnum.selectAncillary
? intl.formatMessage({ id: "Upgrade your stay" })
? intl.formatMessage({
defaultMessage: "Upgrade your stay",
})
: selectedAncillary?.title
return (
<Modal isOpen={true} onToggle={closeModal} title={modalTitle}>
@@ -375,7 +384,9 @@ export default function AddAncillaryFlowModal({
<Typography variant="Body/Paragraph/mdBold">
<p>
{intl.formatMessage(
{ id: "{value} points" },
{
defaultMessage: "{value} points",
},
{
value: selectedAncillary.points,
}
@@ -431,7 +442,7 @@ function BreakfastPriceList() {
if (!breakfastData) {
return intl.formatMessage({
id: "Can not show breakfast prices.",
defaultMessage: "Can not show breakfast prices.",
})
}
@@ -439,7 +450,12 @@ function BreakfastPriceList() {
<div>
<div className={styles.breakfastPriceList}>
<Typography variant="Body/Paragraph/mdBold">
<span>{`${breakfastData.priceAdult} ${breakfastData.currency} / ${intl.formatMessage({ id: "Adult" })}`}</span>
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
<span>{`${breakfastData.priceAdult} ${breakfastData.currency} / ${intl.formatMessage(
{
defaultMessage: "Adult",
}
)}`}</span>
</Typography>
{breakfastData.nrOfPayingChildren > 0 && (
@@ -449,7 +465,12 @@ function BreakfastPriceList() {
</div>
<Typography variant="Body/Paragraph/mdBold">
<span>{`${breakfastData.priceChild} ${breakfastData.currency} / ${intl.formatMessage({ id: "Years" })} 4-12`}</span>
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
<span>{`${breakfastData.priceChild} ${breakfastData.currency} / ${intl.formatMessage(
{
defaultMessage: "Years",
}
)} 4-12`}</span>
</Typography>
</>
)}
@@ -461,7 +482,15 @@ function BreakfastPriceList() {
</div>
<Typography variant="Body/Paragraph/mdBold">
<span>{`${intl.formatMessage({ id: "Free" })} / ${intl.formatMessage({ id: "Under {age} years" }, { age: 4 })}`}</span>
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
<span>{`${intl.formatMessage({
defaultMessage: "Free",
})} / ${intl.formatMessage(
{
defaultMessage: "Under {age} years",
},
{ age: 4 }
)}`}</span>
</Typography>
</>
)}

24
apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddedAncillaries/RemoveButton.tsx
View File

@@ -27,16 +27,24 @@ export default function RemoveButton({
return (
<Dialog
bodyText={intl.formatMessage({
id: "Are you sure you want to remove this product?",
defaultMessage: "Are you sure you want to remove this product?",
})}
proceedText={intl.formatMessage({
defaultMessage: "Remove",
})}
proceedText={intl.formatMessage({ id: "Remove" })}
proceedIsPending={removePackage.isPending}
cancelButtonText={intl.formatMessage({ id: "Cancel" })}
titleText={`${intl.formatMessage({ id: "Remove" })} ${title}`}
cancelButtonText={intl.formatMessage({
defaultMessage: "Cancel",
})}
titleText={`${intl.formatMessage({
defaultMessage: "Remove",
})} ${title}`}
trigger={
<Button intent="text" size="small" variant="icon" theme="base">
<MaterialIcon icon="delete" color="CurrentColor" />
{intl.formatMessage({ id: "Remove" })}
{intl.formatMessage({
defaultMessage: "Remove",
})}
</Button>
}
proceedOnClick={(close) => {
@@ -56,7 +64,11 @@ export default function RemoveButton({
onSuccess()
},
onError: () => {
toast.error(intl.formatMessage({ id: "Something went wrong!" }))
toast.error(
intl.formatMessage({
defaultMessage: "Something went wrong!",
})
)
},
}
)

55
apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddedAncillaries/index.tsx
View File

@@ -42,12 +42,18 @@ export function AddedAncillaries({
return (
<div className={styles.container}>
<div className={styles.header}>
<Subtitle>{intl.formatMessage({ id: "My Add-on's" })}</Subtitle>
<Subtitle>
{intl.formatMessage({
defaultMessage: "My Add-on's",
})}
</Subtitle>
{booking.ancillary?.deliveryTime && (
<div className={styles.deliveryTime}>
<Body color="baseTextHighContrast" textTransform="bold">
{intl.formatMessage({ id: "Delivered at:" })}
{intl.formatMessage({
defaultMessage: "Delivered at:",
})}
</Body>
<Body color="baseTextHighContrast" textTransform="bold">
{booking.ancillary?.deliveryTime}
@@ -59,7 +65,9 @@ export function AddedAncillaries({
{addedAncillaries.map((ancillary) => {
const ancillaryTitle =
ancillary.code === BreakfastPackageEnum.ANCILLARY_REGULAR_BREAKFAST
? intl.formatMessage({ id: "Breakfast" })
? intl.formatMessage({
defaultMessage: "Breakfast",
})
: (ancillaries?.find(
(a) =>
a.id === ancillary.code || a.loyaltyCode === ancillary.code
@@ -82,7 +90,11 @@ export function AddedAncillaries({
<>
<div className={styles.commentMobile}>
<Body textTransform="bold">
{intl.formatMessage({ id: "Other requests" })}:
{intl.formatMessage({
defaultMessage: "Other requests",
})}
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
{":"}
</Body>
<Body color="uiTextMediumContrast">
{ancillary.comment}
@@ -92,11 +104,19 @@ export function AddedAncillaries({
)}
<div className={styles.paymentMobileWrapper}>
<div className={styles.paymentMobile}>
<Body>{intl.formatMessage({ id: "Total" })}</Body>
<Body>
{intl.formatMessage({
defaultMessage: "Total",
})}
</Body>
<Body textTransform="bold">
{ancillary.currency.toLowerCase() === "points"
? `${ancillary.totalPrice} ${intl.formatMessage({ id: "Points" })}`
: `${ancillary.totalPrice} ${ancillary.currency}`}
? // eslint-disable-next-line formatjs/no-literal-string-in-jsx
`${ancillary.totalPrice} ${intl.formatMessage({
defaultMessage: "Points",
})}`
: // eslint-disable-next-line formatjs/no-literal-string-in-jsx
`${ancillary.totalPrice} ${ancillary.currency}`}
</Body>
</div>
</div>
@@ -129,14 +149,23 @@ export function AddedAncillaries({
color="Icon/Feedback/Success"
/>
<Body textTransform="bold">{ancillaryTitle}</Body>
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
<Body textTransform="bold">{`X${ancillary.totalUnit}`}</Body>
</div>
<div className={styles.payment}>
<Body>{intl.formatMessage({ id: "Total" })}</Body>
<Body>
{intl.formatMessage({
defaultMessage: "Total",
})}
</Body>
<Body textTransform="bold">
{ancillary.currency.toLowerCase() === "points"
? `${ancillary.totalPrice} ${intl.formatMessage({ id: "Points" })}`
: `${ancillary.totalPrice} ${ancillary.currency}`}
? // eslint-disable-next-line formatjs/no-literal-string-in-jsx
`${ancillary.totalPrice} ${intl.formatMessage({
defaultMessage: "Points",
})}`
: // eslint-disable-next-line formatjs/no-literal-string-in-jsx
`${ancillary.totalPrice} ${ancillary.currency}`}
</Body>
</div>
</div>
@@ -148,7 +177,11 @@ export function AddedAncillaries({
{ancillary.comment && (
<>
<Body textTransform="bold">
{intl.formatMessage({ id: "Other requests" })}:
{intl.formatMessage({
defaultMessage: "Other requests",
})}
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
{":"}
</Body>
<Body>{ancillary.comment}</Body>
</>

4
apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/ViewAllAncillaries/index.tsx
View File

@@ -17,7 +17,9 @@ export default function ViewAllAncillaries() {
size="small"
onClick={openModal}
>
{intl.formatMessage({ id: "View all" })}
{intl.formatMessage({
defaultMessage: "View all",
})}
<MaterialIcon icon="chevron_right" size={20} color="CurrentColor" />
</Button>
)

12
apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/index.tsx
View File

@@ -113,9 +113,13 @@ export function Ancillaries({
const breakfastAncillary: SelectedAncillary | undefined = breakfastPackage
? {
description: intl.formatMessage({ id: "Buffet" }),
description: intl.formatMessage({
defaultMessage: "Buffet",
}),
id: breakfastPackage.code,
title: intl.formatMessage({ id: "Breakfast" }),
title: intl.formatMessage({
defaultMessage: "Breakfast",
}),
price: {
currency: breakfastPackage.localPrice.currency,
total: breakfastPackage.localPrice.totalPrice,
@@ -172,7 +176,9 @@ export function Ancillaries({
<>
<div className={styles.title}>
<Title as="h5">
{intl.formatMessage({ id: "Upgrade your stay" })}
{intl.formatMessage({
defaultMessage: "Upgrade your stay",
})}
</Title>
<ViewAllAncillaries />
</div>

20
apps/scandic-web/components/HotelReservation/MyStay/BookingSummary/index.tsx
View File

@@ -27,7 +27,9 @@ export default function BookingSummary({ hotel }: BookingSummaryProps) {
<div className={styles.bookingSummary}>
<Typography variant="Title/sm">
<h2 className={styles.title}>
{intl.formatMessage({ id: "Practical information" })}
{intl.formatMessage({
defaultMessage: "Practical information",
})}
</h2>
</Typography>
<div className={styles.bookingSummaryContent}>
@@ -46,7 +48,9 @@ export default function BookingSummary({ hotel }: BookingSummaryProps) {
`${hotel.address.zipCode} ${hotel.address.city}`,
]}
supportingText={intl.formatMessage(
{ id: "Long {long} ∙ Lat {lat}" },
{
defaultMessage: "Long {long} ∙ Lat {lat}",
},
{
lat: hotel.location.latitude,
long: hotel.location.longitude,
@@ -55,7 +59,9 @@ export default function BookingSummary({ hotel }: BookingSummaryProps) {
links={[
{
href: directionsUrl,
text: intl.formatMessage({ id: "Directions" }),
text: intl.formatMessage({
defaultMessage: "Directions",
}),
icon: (
<MaterialIcon
icon="directions"
@@ -67,7 +73,9 @@ export default function BookingSummary({ hotel }: BookingSummaryProps) {
},
{
href: `mailto:${hotel.contactInformation.email}`,
text: intl.formatMessage({ id: "Email" }),
text: intl.formatMessage({
defaultMessage: "Email",
}),
icon: (
<MaterialIcon
icon="mail"
@@ -79,7 +87,9 @@ export default function BookingSummary({ hotel }: BookingSummaryProps) {
},
{
href: hotel.contactInformation.websiteUrl,
text: intl.formatMessage({ id: "Homepage" }),
text: intl.formatMessage({
defaultMessage: "Homepage",
}),
icon: (
<MaterialIcon
icon="link"

40
apps/scandic-web/components/HotelReservation/MyStay/GuaranteeLateArrival/index.tsx
View File

@@ -107,7 +107,7 @@ export default function GuaranteeLateArrival({
handleGuaranteeError("No confirmation number")
toast.error(
intl.formatMessage({
id: "Something went wrong!",
defaultMessage: "Something went wrong!",
})
)
}
@@ -116,39 +116,48 @@ export default function GuaranteeLateArrival({
return (
<FormProvider {...methods}>
<ModalContentWithActions
title={intl.formatMessage({ id: "Guarantee late arrival" })}
title={intl.formatMessage({
defaultMessage: "Guarantee late arrival",
})}
onClose={handleCloseModal}
content={
<>
<Caption>
{intl.formatMessage({
id: "Planning to arrive after 18.00? Secure your room by guaranteeing it with a credit card. Without the guarantee and in case of no-show, the room might be reallocated after 18:00.",
defaultMessage:
"Planning to arrive after 18.00? Secure your room by guaranteeing it with a credit card. Without the guarantee and in case of no-show, the room might be reallocated after 18:00.",
})}
</Caption>
<Caption type="bold">
{intl.formatMessage({
id: "In case of no-show you will be charged for the first night.",
defaultMessage:
"In case of no-show you will be charged for the first night.",
})}
</Caption>
{savedCreditCards?.length ? (
<>
<MySavedCards savedCreditCards={savedCreditCards} />
<Body color="uiTextHighContrast" textTransform="bold">
{intl.formatMessage({ id: "OTHER" })}
{intl.formatMessage({
defaultMessage: "OTHER",
})}
</Body>
</>
) : null}
<PaymentOption
name="paymentMethod"
value={PaymentMethodEnum.card}
label={intl.formatMessage({ id: "Credit card" })}
label={intl.formatMessage({
defaultMessage: "Credit card",
})}
/>
<div className={styles.termsAndConditions}>
<Typography variant="Body/Supporting text (caption)/smRegular">
<p>
{intl.formatMessage(
{
id: "By guaranteeing with any of the payment methods available, I accept the terms for this stay and the general <termsAndConditionsLink>Terms & Conditions</termsAndConditionsLink>, and understand Scandic will process my personal data for this stay in accordance with <privacyPolicyLink>Scandic’s Privacy Policy</privacyPolicyLink>. I accept Scandic requiring a valid credit card during my visit in case anything is left unpaid.",
defaultMessage:
"By guaranteeing with any of the payment methods available, I accept the terms for this stay and the general <termsAndConditionsLink>Terms & Conditions</termsAndConditionsLink>, and understand Scandic will process my personal data for this stay in accordance with <privacyPolicyLink>Scandic’s Privacy Policy</privacyPolicyLink>. I accept Scandic requiring a valid credit card during my visit in case anything is left unpaid.",
},
{
termsAndConditionsLink: (str) => (
@@ -179,7 +188,7 @@ export default function GuaranteeLateArrival({
<Typography variant="Body/Supporting text (caption)/smRegular">
<span>
{intl.formatMessage({
id: "I accept the terms and conditions",
defaultMessage: "I accept the terms and conditions",
})}
</span>
</Typography>
@@ -188,11 +197,14 @@ export default function GuaranteeLateArrival({
<div className={styles.guaranteeCost}>
<div className={styles.guaranteeCostText}>
<Caption type="bold">
{intl.formatMessage({ id: "Guarantee cost" })}
{intl.formatMessage({
defaultMessage: "Guarantee cost",
})}
</Caption>
<Caption color="uiTextHighContrast">
{intl.formatMessage({
id: "Your card will only be used for authorisation",
defaultMessage:
"Your card will only be used for authorisation",
})}
</Caption>
</div>
@@ -204,12 +216,16 @@ export default function GuaranteeLateArrival({
</>
}
primaryAction={{
label: intl.formatMessage({ id: "Guarantee" }),
label: intl.formatMessage({
defaultMessage: "Guarantee",
}),
onClick: methods.handleSubmit(handleGuaranteeLateArrival),
intent: "primary",
}}
secondaryAction={{
label: intl.formatMessage({ id: "Back" }),
label: intl.formatMessage({
defaultMessage: "Back",
}),
onClick: handleCloseView,
intent: "text",
}}

68
apps/scandic-web/components/HotelReservation/MyStay/GuestDetails/index.tsx
View File

@@ -71,7 +71,9 @@ export default function GuestDetails({
onSuccess: (data) => {
if (!data) {
toast.error(
intl.formatMessage({ id: "Failed to update guest details" })
intl.formatMessage({
defaultMessage: "Failed to update guest details",
})
)
return
@@ -86,12 +88,20 @@ export default function GuestDetails({
},
})
toast.success(intl.formatMessage({ id: "Guest details updated" }))
toast.success(
intl.formatMessage({
defaultMessage: "Guest details updated",
})
)
setIsModifyGuestDetailsOpen(false)
setCurrentStep(MODAL_STEPS.INITIAL)
},
onError: () => {
toast.error(intl.formatMessage({ id: "Failed to update guest details" }))
toast.error(
intl.formatMessage({
defaultMessage: "Failed to update guest details",
})
)
},
onSettled: () => {
setIsLoading(false)
@@ -127,7 +137,11 @@ export default function GuestDetails({
<div className={styles.userDetails}>
<div className={styles.userDetailsTitle}>
<Typography variant="Title/Overline/sm">
<p>{intl.formatMessage({ id: "Your member tier" })}</p>
<p>
{intl.formatMessage({
defaultMessage: "Your member tier",
})}
</p>
</Typography>
</div>
<div className={styles.memberLevel}>
@@ -143,7 +157,11 @@ export default function GuestDetails({
<MaterialIcon icon="diamond" color="Icon/Intense" />
<Typography variant="Title/Overline/sm">
<p>{intl.formatMessage({ id: "Total points" })}</p>
<p>
{intl.formatMessage({
defaultMessage: "Total points",
})}
</p>
</Typography>
</div>
@@ -163,7 +181,9 @@ export default function GuestDetails({
<Typography variant="Body/Paragraph/mdRegular">
<p className={styles.memberNumber}>
{intl.formatMessage(
{ id: "Member no. {nr}" },
{
defaultMessage: "Member no. {nr}",
},
{
nr: user.membership.membershipNumber,
}
@@ -203,7 +223,11 @@ export default function GuestDetails({
size={20}
/>
<Typography variant="Body/Paragraph/mdRegular">
<span>{intl.formatMessage({ id: "Modify guest details" })}</span>
<span>
{intl.formatMessage({
defaultMessage: "Modify guest details",
})}
</span>
</Typography>
</Button>
) : (
@@ -228,7 +252,11 @@ export default function GuestDetails({
size={20}
/>
<Typography variant="Body/Paragraph/mdRegular">
<span>{intl.formatMessage({ id: "Modify guest details" })}</span>
<span>
{intl.formatMessage({
defaultMessage: "Modify guest details",
})}
</span>
</Typography>
</Button>
{isModifyGuestDetailsOpen && (
@@ -239,12 +267,16 @@ export default function GuestDetails({
onToggle={setIsModifyGuestDetailsOpen}
>
<Dialog
aria-label={intl.formatMessage({ id: "Modify guest details" })}
aria-label={intl.formatMessage({
defaultMessage: "Modify guest details",
})}
>
{({ close }) => (
<FormProvider {...form}>
<ModalContentWithActions
title={intl.formatMessage({ id: "Modify guest details" })}
title={intl.formatMessage({
defaultMessage: "Modify guest details",
})}
onClose={() => setIsModifyGuestDetailsOpen(false)}
content={
booking.guest && (
@@ -256,8 +288,12 @@ export default function GuestDetails({
}
primaryAction={{
label: isFirstStep
? intl.formatMessage({ id: "Save updates" })
: intl.formatMessage({ id: "Confirm" }),
? intl.formatMessage({
defaultMessage: "Save updates",
})
: intl.formatMessage({
defaultMessage: "Confirm",
}),
onClick: isFirstStep
? () => setCurrentStep(MODAL_STEPS.CONFIRMATION)
: () => form.handleSubmit(onSubmit)(),
@@ -266,8 +302,12 @@ export default function GuestDetails({
}}
secondaryAction={{
label: isFirstStep
? intl.formatMessage({ id: "Back" })
: intl.formatMessage({ id: "Cancel" }),
? intl.formatMessage({
defaultMessage: "Back",
})
: intl.formatMessage({
defaultMessage: "Cancel",
}),
onClick: () => {
close()
setCurrentStep(MODAL_STEPS.INITIAL)

8
apps/scandic-web/components/HotelReservation/MyStay/Header/index.tsx
View File

@@ -12,7 +12,13 @@ export async function Header({ hotel }: Pick<BookingConfirmation, "hotel">) {
<header>
<Title as="h2" color="white" className={styles.title} textAlign="center">
<BiroScript type="two" tilted="medium">
{intl.formatMessage({ id: "My stay at" })}{" "}
{intl.formatMessage({
defaultMessage: "My stay at",
})}
{
/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */
" "
}
</BiroScript>
<span className={styles.hotelName}>{hotel.name}</span>
{hotel.cityName}

4
apps/scandic-web/components/HotelReservation/MyStay/ManageStay/ActionPanel/Actions/AddToCalendarButton.tsx
View File

@@ -31,7 +31,9 @@ export default function AddToCalendarButton({
onPress={handleAddToCalendar}
disabled={disabled}
>
{intl.formatMessage({ id: "Add to calendar" })}
{intl.formatMessage({
defaultMessage: "Add to calendar",
})}
<MaterialIcon icon="calendar_add_on" color="CurrentColor" />
</Button>
)

4
apps/scandic-web/components/HotelReservation/MyStay/ManageStay/ActionPanel/Actions/CancelStay/CancelStayPriceContainer/index.tsx
View File

@@ -26,7 +26,9 @@ export default function CancelStayPriceContainer({
return (
<PriceContainer
text={intl.formatMessage({ id: "Cancellation cost" })}
text={intl.formatMessage({
defaultMessage: "Cancellation cost",
})}
price={0}
currencyCode={roomDetails.currencyCode}
nightsText={stayDetails.nightsText}

15
apps/scandic-web/components/HotelReservation/MyStay/ManageStay/ActionPanel/Actions/CancelStay/Confirmation/index.tsx
View File

@@ -37,7 +37,8 @@ export function CancelStayConfirmation({
<Body color="uiTextHighContrast">
{intl.formatMessage(
{
id: "Are you sure you want to cancel your stay at {hotel} from {checkInDate} to {checkOutDate}? This can't be reversed.",
defaultMessage:
"Are you sure you want to cancel your stay at {hotel} from {checkInDate} to {checkOutDate}? This can't be reversed.",
},
{
hotel: hotel.name,
@@ -47,13 +48,17 @@ export function CancelStayConfirmation({
)}
</Body>
<Caption color="uiTextHighContrast">
{intl.formatMessage({ id: "No charges were made." })}
{intl.formatMessage({
defaultMessage: "No charges were made.",
})}
</Caption>
</div>
{multiRoom && (
<>
<Body color="uiTextHighContrast" textTransform="bold">
{intl.formatMessage({ id: "Select rooms" })}
{intl.formatMessage({
defaultMessage: "Select rooms",
})}
</Body>
<div className={styles.rooms}>
@@ -80,7 +85,9 @@ export function CancelStayConfirmation({
<div className={styles.roomInfo}>
<Caption color="uiTextHighContrast">
{intl.formatMessage(
{ id: "Room {roomIndex}" },
{
defaultMessage: "Room {roomIndex}",
},
{
roomIndex: index + 1,
}

3
apps/scandic-web/components/HotelReservation/MyStay/ManageStay/ActionPanel/Actions/CancelStay/FinalConfirmation/index.tsx
View File

@@ -20,7 +20,8 @@ export function FinalConfirmation({ stayDetails }: FinalConfirmationProps) {
<div className={styles.modalText}>
<Body color="uiTextHighContrast">
{intl.formatMessage({
id: "Are you sure you want to continue with the cancellation?",
defaultMessage:
"Are you sure you want to continue with the cancellation?",
})}
</Body>
</div>

12
apps/scandic-web/components/HotelReservation/MyStay/ManageStay/ActionPanel/Actions/CancelStay/hooks/useCancelStay.ts
View File

@@ -51,7 +51,7 @@ export default function useCancelStay({
if (!bookedRoom.confirmationNumber) {
toast.error(
intl.formatMessage({
id: "Something went wrong. Please try again later.",
defaultMessage: "Something went wrong. Please try again later.",
})
)
return
@@ -136,7 +136,8 @@ export default function useCancelStay({
toast.success(
intl.formatMessage(
{
id: "Your stay was cancelled. Cancellation cost: 0 {currency}. We're sorry to see that the plans didn't work out",
defaultMessage:
"Your stay was cancelled. Cancellation cost: 0 {currency}. We're sorry to see that the plans didn't work out",
},
{ currency: bookedRoom.currencyCode }
)
@@ -145,14 +146,15 @@ export default function useCancelStay({
// Some rooms cancelled, some failed
toast.warning(
intl.formatMessage({
id: "Some rooms were cancelled successfully, but we encountered issues with others. Please contact customer service for assistance.",
defaultMessage:
"Some rooms were cancelled successfully, but we encountered issues with others. Please contact customer service for assistance.",
})
)
} else {
// No rooms cancelled successfully
toast.error(
intl.formatMessage({
id: "Something went wrong. Please try again later.",
defaultMessage: "Something went wrong. Please try again later.",
})
)
}
@@ -162,7 +164,7 @@ export default function useCancelStay({
console.error("Error in handleCancelStay:", error)
toast.error(
intl.formatMessage({
id: "Something went wrong. Please try again later.",
defaultMessage: "Something went wrong. Please try again later.",
})
)
} finally {

29
apps/scandic-web/components/HotelReservation/MyStay/ManageStay/ActionPanel/Actions/CancelStay/index.tsx
View File

@@ -59,15 +59,27 @@ export default function CancelStay({ hotel }: CancelStayProps) {
function getModalCopy() {
if (isFirstStep) {
return {
title: intl.formatMessage({ id: "Cancel stay" }),
primaryLabel: intl.formatMessage({ id: "Cancel stay" }),
secondaryLabel: intl.formatMessage({ id: "Back" }),
title: intl.formatMessage({
defaultMessage: "Cancel stay",
}),
primaryLabel: intl.formatMessage({
defaultMessage: "Cancel stay",
}),
secondaryLabel: intl.formatMessage({
defaultMessage: "Back",
}),
}
} else {
return {
title: intl.formatMessage({ id: "Confirm cancellation" }),
primaryLabel: intl.formatMessage({ id: "Confirm cancellation" }),
secondaryLabel: intl.formatMessage({ id: "Don't cancel" }),
title: intl.formatMessage({
defaultMessage: "Confirm cancellation",
}),
primaryLabel: intl.formatMessage({
defaultMessage: "Confirm cancellation",
}),
secondaryLabel: intl.formatMessage({
defaultMessage: "Don't cancel",
}),
}
}
}
@@ -84,10 +96,11 @@ export default function CancelStay({ hotel }: CancelStayProps) {
<Alert
type={AlertTypeEnum.Info}
heading={intl.formatMessage({
id: "Contact the person who booked the stay",
defaultMessage: "Contact the person who booked the stay",
})}
text={intl.formatMessage({
id: "As this is a multiroom stay, the cancellation has to be done by the person who made the booking. Please call 08-517 517 00 to talk to our customer service if you would need further assistance.",
defaultMessage:
"As this is a multiroom stay, the cancellation has to be done by the person who made the booking. Please call 08-517 517 00 to talk to our customer service if you would need further assistance.",
})}
/>
)

22
apps/scandic-web/components/HotelReservation/MyStay/ManageStay/ActionPanel/Actions/CancelStay/utils.ts
View File

@@ -62,15 +62,22 @@ export function formatStayDetails({
.diff(dt(checkInDate).startOf("day"), "days")
const nightsText = intl.formatMessage(
{ id: "{totalNights, plural, one {# night} other {# nights}}" },
{
defaultMessage: "{totalNights, plural, one {# night} other {# nights}}",
},
{ totalNights: diff }
)
const adultsText = intl.formatMessage(
{ id: "{totalAdults, plural, one {# adult} other {# adults}}" },
{
defaultMessage: "{totalAdults, plural, one {# adult} other {# adults}}",
},
{ totalAdults: totalAdults }
)
const childrenText = intl.formatMessage(
{ id: "{totalChildren, plural, one {# child} other {# children}}" },
{
defaultMessage:
"{totalChildren, plural, one {# child} other {# children}}",
},
{ totalChildren: totalChildren }
)
@@ -138,11 +145,16 @@ export const useCheckedRoomsCounts = (
const { totalAdults, totalChildren } = calculateTotals(matchedRooms)
const adultsText = intl.formatMessage(
{ id: "{totalAdults, plural, one {# adult} other {# adults}}" },
{
defaultMessage: "{totalAdults, plural, one {# adult} other {# adults}}",
},
{ totalAdults: totalAdults }
)
const childrenText = intl.formatMessage(
{ id: "{totalChildren, plural, one {# child} other {# children}}" },
{
defaultMessage:
"{totalChildren, plural, one {# child} other {# children}}",
},
{ totalChildren: totalChildren }
)

32
apps/scandic-web/components/HotelReservation/MyStay/ManageStay/ActionPanel/Actions/ModifyStay/Confirmation/index.tsx
View File

@@ -55,7 +55,9 @@ export default function Confirmation({
.diff(dt(newCheckIn).startOf("day"), "days")
const nightsText = intl.formatMessage(
{ id: "{totalNights, plural, one {# night} other {# nights}}" },
{
defaultMessage: "{totalNights, plural, one {# night} other {# nights}}",
},
{ totalNights: diff }
)
@@ -69,7 +71,9 @@ export default function Confirmation({
type="bold"
textTransform="uppercase"
>
{intl.formatMessage({ id: "Old dates" })}
{intl.formatMessage({
defaultMessage: "Old dates",
})}
</Caption>
<Body color="uiTextMediumContrast">
{oldPrice} {currencyCode}
@@ -82,7 +86,9 @@ export default function Confirmation({
type="bold"
textTransform="uppercase"
>
{intl.formatMessage({ id: "Check-in" })}
{intl.formatMessage({
defaultMessage: "Check-in",
})}
</Caption>
<Body color="uiTextMediumContrast">{originalCheckIn}</Body>
</div>
@@ -92,7 +98,9 @@ export default function Confirmation({
type="bold"
textTransform="uppercase"
>
{intl.formatMessage({ id: "Check-out" })}
{intl.formatMessage({
defaultMessage: "Check-out",
})}
</Caption>
<Body color="uiTextMediumContrast">{originalCheckOut}</Body>
</div>
@@ -104,7 +112,9 @@ export default function Confirmation({
<div className={styles.dateGroup}>
<div className={styles.dateHeader}>
<Caption color="red" type="bold" textTransform="uppercase">
{intl.formatMessage({ id: "New dates" })}
{intl.formatMessage({
defaultMessage: "New dates",
})}
</Caption>
<Body color="red">
{newPrice} {currencyCode}
@@ -117,7 +127,9 @@ export default function Confirmation({
type="bold"
textTransform="uppercase"
>
{intl.formatMessage({ id: "Check-in" })}
{intl.formatMessage({
defaultMessage: "Check-in",
})}
</Caption>
<Body color="uiTextMediumContrast">{newCheckIn}</Body>
</div>
@@ -127,7 +139,9 @@ export default function Confirmation({
type="bold"
textTransform="uppercase"
>
{intl.formatMessage({ id: "Check-out" })}
{intl.formatMessage({
defaultMessage: "Check-out",
})}
</Caption>
<Body color="uiTextMediumContrast">{newCheckOut}</Body>
</div>
@@ -136,7 +150,9 @@ export default function Confirmation({
</div>
<PriceContainer
text={intl.formatMessage({ id: "To be paid" })}
text={intl.formatMessage({
defaultMessage: "To be paid",
})}
price={newPrice}
currencyCode={currencyCode}
nightsText={nightsText}

20
apps/scandic-web/components/HotelReservation/MyStay/ManageStay/ActionPanel/Actions/ModifyStay/NewDates/index.tsx
View File

@@ -131,25 +131,31 @@ export default function NewDates({
{noAvailability && (
<Alert
type={AlertTypeEnum.Info}
heading={intl.formatMessage({ id: "No availability" })}
heading={intl.formatMessage({
defaultMessage: "No availability",
})}
text={intl.formatMessage({
id: "No single rooms are available on these dates",
defaultMessage: "No single rooms are available on these dates",
})}
/>
)}
{error && (
<Alert
type={AlertTypeEnum.Alarm}
heading={intl.formatMessage({ id: "Error" })}
heading={intl.formatMessage({
defaultMessage: "Error",
})}
text={intl.formatMessage({
id: "Something went wrong!",
defaultMessage: "Something went wrong!",
})}
/>
)}
<div className={styles.container}>
<div className={styles.checkInDate}>
<Caption color="uiTextHighContrast" type="bold">
{intl.formatMessage({ id: "Check-in" })}
{intl.formatMessage({
defaultMessage: "Check-in",
})}
</Caption>
<CalendarButton
@@ -161,7 +167,9 @@ export default function NewDates({
</div>
<div className={styles.checkOutDate}>
<Caption color="uiTextHighContrast" type="bold">
{intl.formatMessage({ id: "Check-out" })}
{intl.formatMessage({
defaultMessage: "Check-out",
})}
</Caption>
<CalendarButton

26
apps/scandic-web/components/HotelReservation/MyStay/ManageStay/ActionPanel/Actions/ModifyStay/hooks/useModifyStay.ts
View File

@@ -40,7 +40,11 @@ export default function useModifyStay({
onMutate: () => setIsLoading(true),
onSuccess: (updatedBooking) => {
if (!updatedBooking) {
toast.error(intl.formatMessage({ id: "Failed to update your stay" }))
toast.error(
intl.formatMessage({
defaultMessage: "Failed to update your stay",
})
)
return
}
// Update room details with server response data
@@ -50,11 +54,19 @@ export default function useModifyStay({
checkOutDate: updatedBooking.checkOutDate,
})
toast.success(intl.formatMessage({ id: "Your stay was updated" }))
toast.success(
intl.formatMessage({
defaultMessage: "Your stay was updated",
})
)
handleCloseModal()
},
onError: () => {
toast.error(intl.formatMessage({ id: "Failed to update your stay" }))
toast.error(
intl.formatMessage({
defaultMessage: "Failed to update your stay",
})
)
},
onSettled: () => {
setIsLoading(false)
@@ -65,7 +77,11 @@ export default function useModifyStay({
const formValues = getFormValues()
if (!formValues.checkInDate || !formValues.checkOutDate) {
toast.error(intl.formatMessage({ id: "Please select dates" }))
toast.error(
intl.formatMessage({
defaultMessage: "Please select dates",
})
)
return { success: false }
}
@@ -146,7 +162,7 @@ export default function useModifyStay({
console.error("Error modifying stay:", error)
toast.error(
intl.formatMessage({
id: "Failed to update your stay. Please try again later.",
defaultMessage: "Failed to update your stay. Please try again later.",
})
)
setIsLoading(false)

39
apps/scandic-web/components/HotelReservation/MyStay/ManageStay/ActionPanel/Actions/ModifyStay/index.tsx
View File

@@ -98,10 +98,11 @@ export default function ModifyStay({ isLoggedIn }: ModifyStayProps) {
<Alert
type={AlertTypeEnum.Info}
heading={intl.formatMessage({
id: "Contact customer service",
defaultMessage: "Contact customer service",
})}
text={intl.formatMessage({
id: "As this is a multiroom stay, any dates changes are applicable to all rooms. Please contact customer service to update the dates.",
defaultMessage:
"As this is a multiroom stay, any dates changes are applicable to all rooms. Please contact customer service to update the dates.",
})}
/>
)
@@ -111,10 +112,11 @@ export default function ModifyStay({ isLoggedIn }: ModifyStayProps) {
<Alert
type={AlertTypeEnum.Info}
heading={intl.formatMessage({
id: "Contact customer service",
defaultMessage: "Contact customer service",
})}
text={intl.formatMessage({
id: "Please contact customer service to update the dates.",
defaultMessage:
"Please contact customer service to update the dates.",
})}
/>
)
@@ -142,10 +144,11 @@ export default function ModifyStay({ isLoggedIn }: ModifyStayProps) {
<Alert
type={AlertTypeEnum.Info}
heading={intl.formatMessage({
id: "Contact the person who booked the stay",
defaultMessage: "Contact the person who booked the stay",
})}
text={intl.formatMessage({
id: "As this is a multiroom stay, any dates changes are applicable to all rooms. Please ask the person who booked the stay to contact customer service.",
defaultMessage:
"As this is a multiroom stay, any dates changes are applicable to all rooms. Please ask the person who booked the stay to contact customer service.",
})}
/>
)
@@ -156,8 +159,12 @@ export default function ModifyStay({ isLoggedIn }: ModifyStayProps) {
<ModalContentWithActions
title={
isFirstStep
? intl.formatMessage({ id: "New dates for the stay" })
: intl.formatMessage({ id: "Confirm date change" })
? intl.formatMessage({
defaultMessage: "New dates for the stay",
})
: intl.formatMessage({
defaultMessage: "Confirm date change",
})
}
content={getModalContent()}
onClose={handleCloseModal}
@@ -165,8 +172,12 @@ export default function ModifyStay({ isLoggedIn }: ModifyStayProps) {
mainRoom && !multiRoom && canChangeDate
? {
label: isFirstStep
? intl.formatMessage({ id: "Check availability" })
: intl.formatMessage({ id: "Confirm" }),
? intl.formatMessage({
defaultMessage: "Check availability",
})
: intl.formatMessage({
defaultMessage: "Confirm",
}),
onClick: isFirstStep ? onCheckAvailability : handleModifyStay,
intent: isFirstStep ? "secondary" : "primary",
isLoading: isLoading,
@@ -176,8 +187,12 @@ export default function ModifyStay({ isLoggedIn }: ModifyStayProps) {
}
secondaryAction={{
label: isFirstStep
? intl.formatMessage({ id: "Back" })
: intl.formatMessage({ id: "Cancel" }),
? intl.formatMessage({
defaultMessage: "Back",
})
: intl.formatMessage({
defaultMessage: "Cancel",
}),
onClick: isFirstStep ? handleCloseView : handleCloseModal,
intent: "text",
}}

2
apps/scandic-web/components/HotelReservation/MyStay/ManageStay/ActionPanel/PriceContainer/index.tsx
View File

@@ -29,7 +29,9 @@ export default function PriceContainer({
{text}
</Caption>
<Caption color="uiTextHighContrast">
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
{nightsText}, {adultsText}
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
{totalChildren > 0 ? `, ${childrenText}` : ""}
</Caption>
</div>

30
apps/scandic-web/components/HotelReservation/MyStay/ManageStay/ActionPanel/index.tsx
View File

@@ -139,7 +139,9 @@ export default function ActionPanel({ hotel }: ActionPanelProps) {
className={styles.button}
disabled={!isDateModifyable}
>
{intl.formatMessage({ id: "Modify dates" })}
{intl.formatMessage({
defaultMessage: "Modify dates",
})}
<MaterialIcon icon="calendar_month" color="CurrentColor" />
</Button>
@@ -150,7 +152,9 @@ export default function ActionPanel({ hotel }: ActionPanelProps) {
className={styles.button}
disabled={!isGuaranteeable}
>
{intl.formatMessage({ id: "Guarantee late arrival" })}
{intl.formatMessage({
defaultMessage: "Guarantee late arrival",
})}
<MaterialIcon icon="credit_card" color="CurrentColor" />
</Button>
@@ -173,13 +177,19 @@ export default function ActionPanel({ hotel }: ActionPanelProps) {
className={styles.actionLink}
onClick={handleDownloadInvoice}
>
{intl.formatMessage({ id: "Download invoice" })}
{intl.formatMessage({
defaultMessage: "Download invoice",
})}
<MaterialIcon icon="download" color="CurrentColor" />
</Link>
) : (
<div className={styles.disabledLink}>
<Typography variant="Body/Paragraph/mdBold">
<p>{intl.formatMessage({ id: "Download invoice" })}</p>
<p>
{intl.formatMessage({
defaultMessage: "Download invoice",
})}
</p>
</Typography>
<MaterialIcon icon="download" color="CurrentColor" />
@@ -193,14 +203,18 @@ export default function ActionPanel({ hotel }: ActionPanelProps) {
className={styles.button}
disabled={!isCancelable}
>
{intl.formatMessage({ id: "Cancel stay" })}
{intl.formatMessage({
defaultMessage: "Cancel stay",
})}
<MaterialIcon icon="cancel" color="CurrentColor" />
</Button>
</div>
<div className={styles.info}>
<div>
<span className={styles.tag}>
{intl.formatMessage({ id: "Reference number" })}
{intl.formatMessage({
defaultMessage: "Reference number",
})}
</span>
<Subtitle color="burgundy" textAlign="right">
{confirmationNumber}
@@ -229,7 +243,9 @@ export default function ActionPanel({ hotel }: ActionPanelProps) {
onClick={handleCustomerSupport}
>
<Caption color="burgundy">
{intl.formatMessage({ id: "Customer support" })}
{intl.formatMessage({
defaultMessage: "Customer support",
})}
</Caption>
<MaterialIcon icon="chevron_right" size={20} color="CurrentColor" />
</Link>

4
apps/scandic-web/components/HotelReservation/MyStay/ManageStay/index.tsx
View File

@@ -77,7 +77,9 @@ export default function ManageStay({
disabled={allRoomsCancelled}
className={styles.manageStayButton}
>
{intl.formatMessage({ id: "Manage stay" })}
{intl.formatMessage({
defaultMessage: "Manage stay",
})}
<MaterialIcon
icon="keyboard_arrow_down"
color={

23
apps/scandic-web/components/HotelReservation/MyStay/ModifyContact/index.tsx
View File

@@ -38,13 +38,17 @@ export default function ModifyContact({
<div className={styles.container}>
<div className={`${styles.row} ${styles.gridEqual}`}>
<Input
label={intl.formatMessage({ id: "First name" })}
label={intl.formatMessage({
defaultMessage: "First name",
})}
maxLength={30}
name="firstName"
disabled={!!guest.firstName}
/>
<Input
label={intl.formatMessage({ id: "Last name" })}
label={intl.formatMessage({
defaultMessage: "Last name",
})}
maxLength={30}
name="lastName"
disabled={!!guest.lastName}
@@ -52,13 +56,17 @@ export default function ModifyContact({
</div>
<div className={styles.row}>
<CountrySelect
label={intl.formatMessage({ id: "Country" })}
label={intl.formatMessage({
defaultMessage: "Country",
})}
name="countryCode"
/>
</div>
<div className={styles.row}>
<Input
label={intl.formatMessage({ id: "Email" })}
label={intl.formatMessage({
defaultMessage: "Email",
})}
name="email"
type="email"
registerOptions={{ required: true }}
@@ -66,7 +74,9 @@ export default function ModifyContact({
</div>
<div className={styles.row}>
<Phone
label={intl.formatMessage({ id: "Phone number" })}
label={intl.formatMessage({
defaultMessage: "Phone number",
})}
name="phoneNumber"
registerOptions={{ required: true }}
/>
@@ -76,7 +86,8 @@ export default function ModifyContact({
<>
<Body color="uiTextHighContrast">
{intl.formatMessage({
id: "Are you sure you want to change your guest details?",
defaultMessage:
"Are you sure you want to change your guest details?",
})}
</Body>
<div className={styles.container}>

82
apps/scandic-web/components/HotelReservation/MyStay/MultiRoom/index.tsx
View File

@@ -135,7 +135,9 @@ export default function MultiRoom({
const fromDate = dt(checkInDate).locale(lang)
const adultsMsg = intl.formatMessage(
{ id: "{adults, plural, one {# adult} other {# adults}}" },
{
defaultMessage: "{adults, plural, one {# adult} other {# adults}}",
},
{
adults: adults,
}
@@ -143,7 +145,7 @@ export default function MultiRoom({
const childrenMsg = intl.formatMessage(
{
id: "{children, plural, one {# child} other {# children}}",
defaultMessage: "{children, plural, one {# child} other {# children}}",
},
{
children: childrenAges.length,
@@ -171,16 +173,25 @@ export default function MultiRoom({
}
>
<Typography variant="Body/Supporting text (caption)/smBold">
<span>{intl.formatMessage({ id: "Cancelled" })}</span>
<span>
{intl.formatMessage({
defaultMessage: "Cancelled",
})}
</span>
</Typography>
</IconChip>
) : (
<div className={styles.chip}>
<Typography variant="Tag/sm">
<span>
{intl.formatMessage({ id: "Room" }) +
" " +
(index !== undefined ? index + 2 : 1)}
{intl.formatMessage(
{
defaultMessage: "Room {roomIndex}",
},
{
roomIndex: index !== undefined ? index + 2 : 1,
}
)}
</span>
</Typography>
</div>
@@ -188,9 +199,21 @@ export default function MultiRoom({
<div className={styles.reference}>
<Typography variant="Body/Supporting text (caption)/smBold">
{isCancelled ? (
<span>{intl.formatMessage({ id: "Cancellation no" })}:</span>
<span>
{intl.formatMessage({
defaultMessage: "Cancellation no",
})}
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
{":"}
</span>
) : (
<span>{intl.formatMessage({ id: "Reference" })}:</span>
<span>
{intl.formatMessage({
defaultMessage: "Reference",
})}
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
{":"}
</span>
)}
</Typography>
<Typography variant="Body/Supporting text (caption)/smRegular">
@@ -250,7 +273,11 @@ export default function MultiRoom({
<div className={styles.details}>
<div className={styles.row}>
<Typography variant="Body/Paragraph/mdBold">
<p>{intl.formatMessage({ id: "Guests" })}</p>
<p>
{intl.formatMessage({
defaultMessage: "Guests",
})}
</p>
</Typography>
<Typography variant="Body/Paragraph/mdRegular">
<p>
@@ -260,7 +287,11 @@ export default function MultiRoom({
</div>
<div className={styles.row}>
<Typography variant="Body/Paragraph/mdBold">
<p>{intl.formatMessage({ id: "Terms" })}</p>
<p>
{intl.formatMessage({
defaultMessage: "Terms",
})}
</p>
</Typography>
<Typography variant="Body/Paragraph/mdRegular">
<p>{rateDefinition.cancellationText}</p>
@@ -269,10 +300,15 @@ export default function MultiRoom({
{hasModifiableRate(rateDefinition.cancellationRule) && (
<div className={styles.row}>
<Typography variant="Body/Paragraph/mdBold">
<p>{intl.formatMessage({ id: "Modify By" })}</p>
<p>
{intl.formatMessage({
defaultMessage: "Modify By",
})}
</p>
</Typography>
<Typography variant="Body/Paragraph/mdRegular">
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
<p color="uiTextHighContrast">
18:00, {fromDate.format("dddd D MMM")}
</p>
@@ -281,7 +317,11 @@ export default function MultiRoom({
)}
<div className={styles.row}>
<Typography variant="Body/Paragraph/mdBold">
<p>{intl.formatMessage({ id: "Breakfast" })}</p>
<p>
{intl.formatMessage({
defaultMessage: "Breakfast",
})}
</p>
</Typography>
<Typography variant="Body/Paragraph/mdRegular">
@@ -291,15 +331,23 @@ export default function MultiRoom({
code: pkg.code,
})) ?? []
)
? intl.formatMessage({ id: "Included" })
: intl.formatMessage({ id: "Not included" })}
? intl.formatMessage({
defaultMessage: "Included",
})
: intl.formatMessage({
defaultMessage: "Not included",
})}
</p>
</Typography>
</div>
<Divider color="subtle" />
<div className={styles.row}>
<Typography variant="Body/Lead text">
<p>{intl.formatMessage({ id: "Room total" })}</p>
<p>
{intl.formatMessage({
defaultMessage: "Room total",
})}
</p>
</Typography>
{priceType === "points" ? (
<Points points={roomPoints} variant="Body/Paragraph/mdBold" />
@@ -307,7 +355,9 @@ export default function MultiRoom({
<Typography variant="Body/Paragraph/mdBold">
<p>
{intl.formatMessage(
{ id: "{count} voucher" },
{
defaultMessage: "{count} voucher",
},
{ count: vouchers }
)}
</p>

9
apps/scandic-web/components/HotelReservation/MyStay/Points/index.tsx
View File

@@ -24,7 +24,14 @@ export default function Points({
return (
<Typography variant={variant}>
<p>
{intl.formatNumber(points)} {intl.formatMessage({ id: "Points" })}
{intl.formatNumber(points)}
{
/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */
" "
}
{intl.formatMessage({
defaultMessage: "Points",
})}
</p>
</Typography>
)

70
apps/scandic-web/components/HotelReservation/MyStay/PriceDetails/PriceDetailsTable/index.tsx
View File

@@ -130,7 +130,9 @@ export default function PriceDetailsTable({
const diff = dt(toDate).diff(fromDate, "days")
const nights = intl.formatMessage(
{ id: "{totalNights, plural, one {# night} other {# nights}}" },
{
defaultMessage: "{totalNights, plural, one {# night} other {# nights}}",
},
{ totalNights: diff }
)
const vatPercentage = vat / 100
@@ -145,6 +147,31 @@ export default function PriceDetailsTable({
return (
<table className={styles.priceDetailsTable}>
{rooms.map((room, idx) => {
const totalAdultsMsg = intl.formatMessage(
{
defaultMessage:
"{totalAdults, plural, one {# adult} other {# adults}}",
},
{
totalAdults: room.adults,
}
)
const totalChildrenMsg = intl.formatMessage(
{
defaultMessage:
"{totalChildren, plural, one {# child} other {# children}}",
},
{
totalChildren: room.childrenInRoom.length,
}
)
const guestsCountMsg = [totalAdultsMsg]
if (room.childrenInRoom.length) {
guestsCountMsg.push(totalChildrenMsg)
}
return (
<Fragment key={idx}>
<TableSection>
@@ -154,7 +181,9 @@ export default function PriceDetailsTable({
<Typography variant="Body/Paragraph/mdBold">
<span>
{intl.formatMessage(
{ id: "Room {roomIndex}" },
{
defaultMessage: "Room {roomIndex}",
},
{ roomIndex: idx + 1 }
)}
</span>
@@ -164,7 +193,9 @@ export default function PriceDetailsTable({
)}
<TableSectionHeader title={room.roomName} subtitle={duration} />
<Row
label={intl.formatMessage({ id: "Average price per night" })}
label={intl.formatMessage({
defaultMessage: "Average price per night",
})}
value={formatPrice(
intl,
room.roomPrice.perNight.local.price,
@@ -186,7 +217,9 @@ export default function PriceDetailsTable({
: null}
<Row
bold
label={intl.formatMessage({ id: "Room charge" })}
label={intl.formatMessage({
defaultMessage: "Room charge",
})}
value={formatPrice(
intl,
room.roomPrice.perStay.local.price,
@@ -199,11 +232,11 @@ export default function PriceDetailsTable({
<Row
label={intl.formatMessage(
{
id: "Breakfast ({totalAdults, plural, one {# adult} other {# adults}}{totalChildren, plural, =0 {} one {, # child} other {, # children}}) x {totalBreakfasts}",
defaultMessage:
"Breakfast ({guestsCount}) x {totalBreakfasts}",
},
{
totalAdults: room.adults,
totalChildren: room.childrenInRoom.length,
guestsCount: guestsCountMsg.join(", "),
totalBreakfasts: diff,
}
)}
@@ -216,7 +249,7 @@ export default function PriceDetailsTable({
<Row
bold
label={intl.formatMessage({
id: "Breakfast charge",
defaultMessage: "Breakfast charge",
})}
value={formatPrice(
intl,
@@ -230,19 +263,32 @@ export default function PriceDetailsTable({
)
})}
<TableSection>
<TableSectionHeader title={intl.formatMessage({ id: "Total" })} />
<TableSectionHeader
title={intl.formatMessage({
defaultMessage: "Total",
})}
/>
<Row
label={intl.formatMessage({ id: "Price excluding VAT" })}
label={intl.formatMessage({
defaultMessage: "Price excluding VAT",
})}
value={formatPrice(intl, priceExclVat, totalPrice.local.currency)}
/>
<Row
label={intl.formatMessage({ id: "VAT {vat}%" }, { vat })}
label={intl.formatMessage(
{
defaultMessage: "VAT {vat}%",
},
{ vat }
)}
value={formatPrice(intl, vatAmount, totalPrice.local.currency)}
/>
<tr className={styles.row}>
<td>
<Body textTransform="bold">
{intl.formatMessage({ id: "Price including VAT" })}
{intl.formatMessage({
defaultMessage: "Price including VAT",
})}
</Body>
</td>
<td className={styles.price}>

82
apps/scandic-web/components/HotelReservation/MyStay/Receipt/Footer/index.tsx
View File

@@ -24,7 +24,11 @@ export default async function Footer({ booking, room }: FooterProps) {
<div>
<div>
<Typography variant="Body/Supporting text (caption)/smRegular">
<dt>{intl.formatMessage({ id: "Reference number" })}</dt>
<dt>
{intl.formatMessage({
defaultMessage: "Reference number",
})}
</dt>
</Typography>
<Typography variant="Body/Supporting text (caption)/smRegular">
<dd>{booking.confirmationNumber}</dd>
@@ -33,7 +37,11 @@ export default async function Footer({ booking, room }: FooterProps) {
<div>
<Typography variant="Body/Supporting text (caption)/smRegular">
<dt>{intl.formatMessage({ id: "Room" })}</dt>
<dt>
{intl.formatMessage({
defaultMessage: "Room",
})}
</dt>
</Typography>
<Typography variant="Body/Supporting text (caption)/smRegular">
<dd>{room?.name}</dd>
@@ -42,7 +50,11 @@ export default async function Footer({ booking, room }: FooterProps) {
<div>
<Typography variant="Body/Supporting text (caption)/smRegular">
<dt>{intl.formatMessage({ id: "Rate" })}</dt>
<dt>
{intl.formatMessage({
defaultMessage: "Rate",
})}
</dt>
</Typography>
<Typography variant="Body/Supporting text (caption)/smRegular">
<dd>{booking.rateDefinition.title}</dd>
@@ -51,7 +63,11 @@ export default async function Footer({ booking, room }: FooterProps) {
<div>
<Typography variant="Body/Supporting text (caption)/smRegular">
<dt>{intl.formatMessage({ id: "Check-in" })}</dt>
<dt>
{intl.formatMessage({
defaultMessage: "Check-in",
})}
</dt>
</Typography>
<Typography variant="Body/Supporting text (caption)/smRegular">
<dd>
@@ -62,7 +78,11 @@ export default async function Footer({ booking, room }: FooterProps) {
<div>
<Typography variant="Body/Supporting text (caption)/smRegular">
<dt>{intl.formatMessage({ id: "Check-out" })}</dt>
<dt>
{intl.formatMessage({
defaultMessage: "Check-out",
})}
</dt>
</Typography>
<Typography variant="Body/Supporting text (caption)/smRegular">
<dd>
@@ -75,7 +95,11 @@ export default async function Footer({ booking, room }: FooterProps) {
<div className={styles.rightColumn}>
<div>
<Typography variant="Body/Supporting text (caption)/smRegular">
<dt>{intl.formatMessage({ id: "Number of nights" })}</dt>
<dt>
{intl.formatMessage({
defaultMessage: "Number of nights",
})}
</dt>
</Typography>
<Typography variant="Body/Supporting text (caption)/smRegular">
<dd>
@@ -86,12 +110,19 @@ export default async function Footer({ booking, room }: FooterProps) {
<div>
<Typography variant="Body/Supporting text (caption)/smRegular">
<dt>{intl.formatMessage({ id: "Number of guests" })}</dt>
<dt>
{intl.formatMessage({
defaultMessage: "Number of guests",
})}
</dt>
</Typography>
<Typography variant="Body/Supporting text (caption)/smRegular">
<dd>
{intl.formatMessage(
{ id: "{adults, plural, one {# adult} other {# adults}}" },
{
defaultMessage:
"{adults, plural, one {# adult} other {# adults}}",
},
{ adults: booking.adults }
)}
{booking.childrenAges.length > 0 && (
@@ -99,7 +130,8 @@ export default async function Footer({ booking, room }: FooterProps) {
{", "}
{intl.formatMessage(
{
id: "{children, plural, one {# child} other {# children}}",
defaultMessage:
"{children, plural, one {# child} other {# children}}",
},
{ children: booking.childrenAges.length }
)}
@@ -111,7 +143,11 @@ export default async function Footer({ booking, room }: FooterProps) {
<div>
<Typography variant="Body/Supporting text (caption)/smRegular">
<dt>{intl.formatMessage({ id: "Bed type" })}</dt>
<dt>
{intl.formatMessage({
defaultMessage: "Bed type",
})}
</dt>
</Typography>
<Typography variant="Body/Supporting text (caption)/smRegular">
<dd>{room?.bedType.mainBed.description}</dd>
@@ -121,23 +157,39 @@ export default async function Footer({ booking, room }: FooterProps) {
{petRoomPackage && (
<div>
<Typography variant="Body/Supporting text (caption)/smRegular">
<dt>{intl.formatMessage({ id: "Room classification" })}</dt>
<dt>
{intl.formatMessage({
defaultMessage: "Room classification",
})}
</dt>
</Typography>
<Typography variant="Body/Supporting text (caption)/smRegular">
<dd>{intl.formatMessage({ id: "Pet-friendly" })}</dd>
<dd>
{intl.formatMessage({
defaultMessage: "Pet-friendly",
})}
</dd>
</Typography>
</div>
)}
<div>
<Typography variant="Body/Supporting text (caption)/smRegular">
<dt>{intl.formatMessage({ id: "Breakfast" })}</dt>
<dt>
{intl.formatMessage({
defaultMessage: "Breakfast",
})}
</dt>
</Typography>
<Typography variant="Body/Supporting text (caption)/smRegular">
<dd>
{booking.rateDefinition.breakfastIncluded
? intl.formatMessage({ id: "Included" })
: intl.formatMessage({ id: "Not included" })}
? intl.formatMessage({
defaultMessage: "Included",
})
: intl.formatMessage({
defaultMessage: "Not included",
})}
</dd>
</Typography>
</div>

101
apps/scandic-web/components/HotelReservation/MyStay/Receipt/Specification/index.tsx
View File

@@ -40,7 +40,9 @@ export default async function Specification({
: ""
const breakfastPointsString =
breakfastTotalPriceInPoints > 0
? `${breakfastTotalPriceInPoints} ${intl.formatMessage({ id: "Points" })}`
? `${breakfastTotalPriceInPoints} ${intl.formatMessage({
defaultMessage: "Points",
})}`
: ""
const breakfastPlusString =
breakfastMoneyString && breakfastPointsString ? " + " : ""
@@ -59,23 +61,36 @@ export default async function Specification({
{/****** The room ********/}
<Typography variant="Body/Supporting text (caption)/smBold">
<span>
{intl.formatMessage({ id: "Accommodation" })}
{intl.formatMessage({
defaultMessage: "Accommodation",
})}
{!booking.rateDefinition.mustBeGuaranteed && (
<>
{" - "}
{intl.formatMessage({ id: "Room is prepaid" })}
{intl.formatMessage({
defaultMessage: "Room is prepaid",
})}
</>
)}
</span>
</Typography>
<dl className={styles.dl}>
<Typography variant="Body/Supporting text (caption)/smRegular">
<dt>{intl.formatMessage({ id: "Price including VAT" })}</dt>
<dt>
{intl.formatMessage({
defaultMessage: "Price including VAT",
})}
</dt>
</Typography>
<Typography variant="Body/Supporting text (caption)/smRegular">
<dd>
{!booking.rateDefinition.mustBeGuaranteed &&
`(${intl.formatMessage({ id: "PREPAID" })}) `}
{!booking.rateDefinition.mustBeGuaranteed
? // eslint-disable-next-line formatjs/no-literal-string-in-jsx
`(${intl.formatMessage({
defaultMessage: "PREPAID",
})}) `
: null}
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
{`${booking.roomPrice} ${currency}`}
</dd>
</Typography>
@@ -84,10 +99,13 @@ export default async function Specification({
<>
<Typography variant="Body/Supporting text (caption)/smRegular">
<dt>
{intl.formatMessage({ id: "Pet room charge including VAT" })}
{intl.formatMessage({
defaultMessage: "Pet room charge including VAT",
})}
</dt>
</Typography>
<Typography variant="Body/Supporting text (caption)/smRegular">
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
<dd>{`${petRoomPackage.totalPrice} ${petRoomPackage.currency}`}</dd>
</Typography>
</>
@@ -95,24 +113,32 @@ export default async function Specification({
<Typography variant="Body/Supporting text (caption)/smRegular">
<dt className={styles.tertiary}>
{intl.formatMessage({ id: "Price excluding VAT" })}
{intl.formatMessage({
defaultMessage: "Price excluding VAT",
})}
</dt>
</Typography>
<Typography variant="Body/Supporting text (caption)/smRegular">
<dd
className={styles.tertiary}
>{`${roomPriceExclVat.toFixed(2)} ${currency}`}</dd>
<dd className={styles.tertiary}>
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
{`${roomPriceExclVat.toFixed(2)} ${currency}`}
</dd>
</Typography>
<Typography variant="Body/Supporting text (caption)/smRegular">
<dt className={styles.tertiary}>
{intl.formatMessage({ id: "VAT" })} {booking.vatPercentage} %
{intl.formatMessage({
defaultMessage: "VAT",
})}
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
{` ${booking.vatPercentage} %`}
</dt>
</Typography>
<Typography variant="Body/Supporting text (caption)/smRegular">
<dd
className={styles.tertiary}
>{`${roomPriceVat.toFixed(2)} ${currency}`}</dd>
<dd className={styles.tertiary}>
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
{`${roomPriceVat.toFixed(2)} ${currency}`}
</dd>
</Typography>
</dl>
</div>
@@ -131,11 +157,17 @@ export default async function Specification({
aa.id === ancillary.code ||
aa.loyaltyCode === ancillary.code
)
)[0]?.title ?? intl.formatMessage({ id: "Unknown item" })}
)[0]?.title ??
intl.formatMessage({
defaultMessage: "Unknown item",
})}
</span>
</Typography>
<Typography variant="Body/Supporting text (caption)/smBold">
<span>{`x ${ancillary.unit}`}</span>
<span>
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
{`× ${ancillary.unit}`}
</span>
</Typography>
</div>
@@ -143,12 +175,19 @@ export default async function Specification({
<Typography variant="Body/Supporting text (caption)/smRegular">
<dt>
{ancillary.currency !== CurrencyEnum.POINTS
? intl.formatMessage({ id: "Price including VAT" })
: intl.formatMessage({ id: "Price" })}
? intl.formatMessage({
defaultMessage: "Price including VAT",
})
: intl.formatMessage({
defaultMessage: "Price",
})}
</dt>
</Typography>
<Typography variant="Body/Supporting text (caption)/smRegular">
<dd>{`${ancillary.totalPrice} ${ancillary.currency}`}</dd>
<dd>
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
{`${ancillary.totalPrice} ${ancillary.currency}`}
</dd>
</Typography>
</dl>
</div>
@@ -162,10 +201,15 @@ export default async function Specification({
<div>
<div className={styles.quantifyingHeader}>
<Typography variant="Body/Supporting text (caption)/smBold">
<span>{intl.formatMessage({ id: "Breakfast" })}</span>
<span>
{intl.formatMessage({
defaultMessage: "Breakfast",
})}
</span>
</Typography>
<Typography variant="Body/Supporting text (caption)/smBold">
<span>{`x ${breakfastCount}`}</span>
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
<span>{`× ${breakfastCount}`}</span>
</Typography>
</div>
@@ -173,12 +217,19 @@ export default async function Specification({
<Typography variant="Body/Supporting text (caption)/smRegular">
<dt>
{breakfastTotalPriceInMoney > 0
? intl.formatMessage({ id: "Price including VAT" })
: intl.formatMessage({ id: "Price" })}
? intl.formatMessage({
defaultMessage: "Price including VAT",
})
: intl.formatMessage({
defaultMessage: "Price",
})}
</dt>
</Typography>
<Typography variant="Body/Supporting text (caption)/smRegular">
<dd>{`${breakfastMoneyString}${breakfastPlusString}${breakfastPointsString}`}</dd>
<dd>
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
{`${breakfastMoneyString}${breakfastPlusString}${breakfastPointsString}`}
</dd>
</Typography>
</dl>
</div>

38
apps/scandic-web/components/HotelReservation/MyStay/Receipt/Total/index.tsx
View File

@@ -22,7 +22,9 @@ export default async function Total({ booking, currency }: TotalProps) {
totalPriceInMoney > 0 ? `${totalPriceInMoney} ${currency}` : ""
const pointsString =
totalPriceInPoints > 0
? `${totalPriceInPoints} ${intl.formatMessage({ id: "Points" })}`
? `${totalPriceInPoints} ${intl.formatMessage({
defaultMessage: "Points",
})}`
: ""
const plusString = moneyString && pointsString ? " + " : ""
@@ -33,11 +35,14 @@ export default async function Total({ booking, currency }: TotalProps) {
<Typography>
<div>
<span className={styles.title}>
{intl.formatMessage({ id: "Preliminary receipt" })}
{intl.formatMessage({
defaultMessage: "Preliminary receipt",
})}
</span>
<span className={styles.titleSubtext}>
{intl.formatMessage({
id: "Final VAT breakdown will be provided at check-out.",
defaultMessage:
"Final VAT breakdown will be provided at check-out.",
})}
</span>
</div>
@@ -46,9 +51,14 @@ export default async function Total({ booking, currency }: TotalProps) {
<Divider color="subtle" />
<dl className={styles.dl}>
<Typography>
<dt>{intl.formatMessage({ id: "Total including VAT" })}</dt>
<dt>
{intl.formatMessage({
defaultMessage: "Total including VAT",
})}
</dt>
</Typography>
<Typography>
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
<dd>{`${moneyString}${plusString}${pointsString}`}</dd>
</Typography>
@@ -56,13 +66,16 @@ export default async function Total({ booking, currency }: TotalProps) {
<>
<Typography>
<dt className={styles.tertiary}>
{intl.formatMessage({ id: "Total excluding VAT" })}
{intl.formatMessage({
defaultMessage: "Total excluding VAT",
})}
</dt>
</Typography>
<Typography>
<dd
className={styles.tertiary}
>{`${totalPriceInMoneyExclVat} ${currency}`}</dd>
<dd className={styles.tertiary}>
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
{`${totalPriceInMoneyExclVat} ${currency}`}
</dd>
</Typography>
</>
)}
@@ -71,11 +84,16 @@ export default async function Total({ booking, currency }: TotalProps) {
<>
<Typography>
<dt className={styles.tertiary}>
{intl.formatMessage({ id: "VAT" })}
{intl.formatMessage({
defaultMessage: "VAT",
})}
</dt>
</Typography>
<Typography>
<dd className={styles.tertiary}>{`${totalVat} ${currency}`}</dd>
<dd className={styles.tertiary}>
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
{`${totalVat} ${currency}`}
</dd>
</Typography>
</>
)}

12
apps/scandic-web/components/HotelReservation/MyStay/Receipt/index.tsx
View File

@@ -72,6 +72,7 @@ export async function Receipt({ refId }: { refId: string }) {
</Typography>
<Typography variant="Body/Supporting text (caption)/smRegular">
<div>
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
{`${hotel.address.streetAddress}, ${hotel.address.zipCode} ${hotel.address.city}`}
</div>
</Typography>
@@ -88,11 +89,15 @@ export async function Receipt({ refId }: { refId: string }) {
</div>
<div className={styles.rightColumn}>
<Typography variant="Body/Supporting text (caption)/smRegular">
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
<div>{`${booking.guest.firstName} ${booking.guest.lastName}`}</div>
</Typography>
{booking.guest.membershipNumber && (
<Typography variant="Body/Supporting text (caption)/smRegular">
<div>{`${intl.formatMessage({ id: "Member" })} ${booking.guest.membershipNumber}`}</div>
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
<div>{`${intl.formatMessage({
defaultMessage: "Member",
})} ${booking.guest.membershipNumber}`}</div>
</Typography>
)}
<Typography variant="Body/Supporting text (caption)/smRegular">
@@ -142,14 +147,15 @@ export async function Receipt({ refId }: { refId: string }) {
<Typography variant="Title/md">
<h1>
{intl.formatMessage({
id: "You need to be logged in to view your booking",
defaultMessage: "You need to be logged in to view your booking",
})}
</h1>
</Typography>
<Typography variant="Body/Lead text">
<p>
{intl.formatMessage({
id: "And you need to be logged in with the same member account that made the booking.",
defaultMessage:
"And you need to be logged in with the same member account that made the booking.",
})}
</p>
</Typography>

110
apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/index.tsx
View File

@@ -120,7 +120,9 @@ export function ReferenceCard({
const allRoomsCancelled = allRooms.every((room) => room.isCancelled)
const adultsMsg = intl.formatMessage(
{ id: "{adults, plural, one {# adult} other {# adults}}" },
{
defaultMessage: "{adults, plural, one {# adult} other {# adults}}",
},
{
adults: adults,
}
@@ -128,7 +130,7 @@ export function ReferenceCard({
const childrenMsg = intl.formatMessage(
{
id: "{children, plural, one {# child} other {# children}}",
defaultMessage: "{children, plural, one {# child} other {# children}}",
},
{
children: children,
@@ -136,16 +138,22 @@ export function ReferenceCard({
)
const cancelledRoomsMsg = intl.formatMessage(
{ id: "{rooms, plural, one {# room} other {# rooms}}" },
{
defaultMessage: "{rooms, plural, one {# room} other {# rooms}}",
},
{
rooms: cancelledRooms,
}
)
const roomCancelledRoomsMsg = intl.formatMessage({ id: "Room cancelled" })
const roomCancelledRoomsMsg = intl.formatMessage({
defaultMessage: "Room cancelled",
})
const roomsMsg = intl.formatMessage(
{ id: "{rooms, plural, one {# room} other {# rooms}}" },
{
defaultMessage: "{rooms, plural, one {# room} other {# rooms}}",
},
{
rooms: allRooms.filter((room) => !room.isCancelled).length,
}
@@ -163,15 +171,21 @@ export function ReferenceCard({
<>
<div className={styles.referenceRow}>
<Subtitle color="uiTextHighContrast" className={styles.titleMobile}>
{intl.formatMessage({ id: "Reference" })}
{intl.formatMessage({
defaultMessage: "Reference",
})}
</Subtitle>
<Subtitle
color="uiTextHighContrast"
className={styles.titleDesktop}
>
{isCancelled && !isMultiRoom
? intl.formatMessage({ id: "Cancellation number" })
: intl.formatMessage({ id: "Reference number" })}
? intl.formatMessage({
defaultMessage: "Cancellation number",
})
: intl.formatMessage({
defaultMessage: "Reference number",
})}
</Subtitle>
<Subtitle color="uiTextHighContrast">
{isCancelled && !isMultiRoom
@@ -187,7 +201,11 @@ export function ReferenceCard({
{!allRoomsCancelled && (
<div className={styles.referenceRow}>
<Typography variant="Title/Overline/sm">
<p>{intl.formatMessage({ id: "Guests" })}</p>
<p>
{intl.formatMessage({
defaultMessage: "Guests",
})}
</p>
</Typography>
<Typography variant="Body/Paragraph/mdBold">
<p>
@@ -205,12 +223,19 @@ export function ReferenceCard({
{allRooms.some((room) => room.isCancelled) && (
<div className={styles.referenceRow}>
<Typography variant="Title/Overline/sm">
<p>{intl.formatMessage({ id: "Cancellation" })}</p>
<p>
{intl.formatMessage({
defaultMessage: "Cancellation",
})}
</p>
</Typography>
<Typography variant="Body/Paragraph/mdBold">
<p className={styles.cancelledRooms}>
{isMultiRoom
? `${cancelledRoomsMsg} ${intl.formatMessage({ id: "cancelled" })}`
? // eslint-disable-next-line formatjs/no-literal-string-in-jsx
`${cancelledRoomsMsg} ${intl.formatMessage({
defaultMessage: "cancelled",
})}`
: roomCancelledRoomsMsg}
</p>
</Typography>
@@ -220,21 +245,39 @@ export function ReferenceCard({
<>
<div className={styles.referenceRow}>
<Typography variant="Title/Overline/sm">
<p>{intl.formatMessage({ id: "Check-in" })}</p>
<p>
{intl.formatMessage({
defaultMessage: "Check-in",
})}
</p>
</Typography>
<Typography variant="Body/Paragraph/mdBold">
<p>
{`${dt(checkInDate).locale(lang).format("dddd, D MMMM")} ${intl.formatMessage({ id: "from" })} ${hotel.hotelFacts.checkin.checkInTime}`}
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
{`${dt(checkInDate).locale(lang).format("dddd, D MMMM")} ${intl.formatMessage(
{
defaultMessage: "from",
}
)} ${hotel.hotelFacts.checkin.checkInTime}`}
</p>
</Typography>
</div>
<div className={styles.referenceRow}>
<Typography variant="Title/Overline/sm">
<p>{intl.formatMessage({ id: "Check-out" })}</p>
<p>
{intl.formatMessage({
defaultMessage: "Check-out",
})}
</p>
</Typography>
<Typography variant="Body/Paragraph/mdBold">
<p>
{`${dt(checkOutDate).locale(lang).format("dddd, D MMMM")} ${intl.formatMessage({ id: "until" })} ${hotel.hotelFacts.checkin.checkOutTime}`}
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
{`${dt(checkOutDate).locale(lang).format("dddd, D MMMM")} ${intl.formatMessage(
{
defaultMessage: "until",
}
)} ${hotel.hotelFacts.checkin.checkOutTime}`}
</p>
</Typography>
</div>
@@ -252,10 +295,15 @@ export function ReferenceCard({
<Typography variant="Body/Supporting text (caption)/smRegular">
<p className={styles.guaranteedText}>
<strong>
{intl.formatMessage({ id: "Booking guaranteed." })}
</strong>{" "}
{intl.formatMessage({
defaultMessage: "Booking guaranteed.",
})}
</strong>
{/* eslint-disable formatjs/no-literal-string-in-jsx */}{" "}
{/* eslint-enable formatjs/no-literal-string-in-jsx */}
{intl.formatMessage({
id: "Your stay remains available for check-in after 18:00.",
defaultMessage:
"Your stay remains available for check-in after 18:00.",
})}
</p>
</Typography>
@@ -266,14 +314,22 @@ export function ReferenceCard({
<div className={styles.referenceRow}>
<Typography variant="Title/Overline/sm">
<p>{intl.formatMessage({ id: "Total" })}</p>
<p>
{intl.formatMessage({
defaultMessage: "Total",
})}
</p>
</Typography>
<TotalPrice variant="Title/Subtitle/md" type={priceType} />
</div>
{bookingCode && (
<div className={styles.referenceRow}>
<Typography variant="Title/Overline/sm">
<p>{intl.formatMessage({ id: "Booking code" })}</p>
<p>
{intl.formatMessage({
defaultMessage: "Booking code",
})}
</p>
</Typography>
<Typography variant="Body/Supporting text (caption)/smBold">
<IconChip
@@ -281,11 +337,14 @@ export function ReferenceCard({
icon={<DiscountIcon color="Icon/Feedback/Information" />}
>
{intl.formatMessage(
{ id: "<strong>Booking code</strong>: {value}" },
{
defaultMessage: "<strong>Booking code</strong>: {value}",
},
{
value: bookingCode,
strong: (text) => (
<Typography variant="Body/Supporting text (caption)/smBold">
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
<strong>{text}</strong>
</Typography>
),
@@ -304,14 +363,18 @@ export function ReferenceCard({
/>
<Button fullWidth intent="secondary" asChild size="small">
<Link href={directionsUrl} target="_blank">
{intl.formatMessage({ id: "Get directions" })}
{intl.formatMessage({
defaultMessage: "Get directions",
})}
</Link>
</Button>
</div>
{isMultiRoom && (
<Typography variant="Body/Supporting text (caption)/smBold">
<p className={styles.note}>
{intl.formatMessage({ id: "Multi-room stay" })}
{intl.formatMessage({
defaultMessage: "Multi-room stay",
})}
</p>
</Typography>
)}
@@ -323,6 +386,7 @@ export function ReferenceCard({
{rateDefinition.generalTerms.map((term) => (
<span key={term}>
{term}
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
{term.endsWith(".") ? " " : ". "}
</span>
))}

9
apps/scandic-web/components/HotelReservation/MyStay/Rooms/TotalPrice/index.tsx
View File

@@ -43,7 +43,12 @@ export default function TotalPrice({
return (
<Typography variant={variant}>
<p>
{intl.formatMessage({ id: "{count} voucher" }, { count: vouchers })}
{intl.formatMessage(
{
defaultMessage: "{count} voucher",
},
{ count: vouchers }
)}
</p>
</Typography>
)
@@ -53,6 +58,7 @@ export default function TotalPrice({
return (
<div className={styles.totalPrice}>
<Typography variant={variant}>
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
<p>{cheques} CC + </p>
</Typography>
<Price price={totalPrice} variant={variant} />
@@ -63,6 +69,7 @@ export default function TotalPrice({
if (totalPrice && totalPrice > 0 && type === "points") {
return (
<div className={styles.totalPrice}>
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
<Points points={totalPoints} variant={variant} /> +{" "}
<Price price={totalPrice} variant={variant} />
</div>

12
apps/scandic-web/components/HotelReservation/MyStay/Rooms/index.tsx
View File

@@ -55,7 +55,9 @@ export default async function Rooms({
{isMultiRoom && (
<Typography variant="Title/sm">
<h2 className={styles.title}>
{intl.formatMessage({ id: "Your rooms" })}
{intl.formatMessage({
defaultMessage: "Your rooms",
})}
</h2>
</Typography>
)}
@@ -91,7 +93,13 @@ export default async function Rooms({
<div className={styles.totalContainer}>
<div className={styles.total}>
<Typography variant="Body/Lead text">
<p>{intl.formatMessage({ id: "Booking total" })}:</p>
<p>
{intl.formatMessage({
defaultMessage: "Booking total",
})}
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
{":"}
</p>
</Typography>
<TotalPrice
variant="Title/Subtitle/lg"

6
apps/scandic-web/components/HotelReservation/MyStay/SingleRoom/ToggleSidePeek.tsx
View File

@@ -35,7 +35,11 @@ export default function ToggleSidePeek({
intent={intent}
wrapping
>
{title ? title : intl.formatMessage({ id: "See room details" })}
{title
? title
: intl.formatMessage({
defaultMessage: "See room details",
})}
<MaterialIcon icon="chevron_right" size={14} color="CurrentColor" />
</Button>
)

84
apps/scandic-web/components/HotelReservation/MyStay/SingleRoom/index.tsx
View File

@@ -72,7 +72,9 @@ export function SingleRoom({ bedType, image, hotel, user }: RoomProps) {
} = bookedRoom
const mainBedWidthValueMsg = intl.formatMessage(
{ id: "{value} cm" },
{
defaultMessage: "{value} cm",
},
{
value: bedType.mainBed.widthRange.min,
}
@@ -80,7 +82,7 @@ export function SingleRoom({ bedType, image, hotel, user }: RoomProps) {
const mainBedWidthRangeMsg = intl.formatMessage(
{
id: "{min}–{max} cm",
defaultMessage: "{min}–{max} cm",
},
{
min: bedType.mainBed.widthRange.min,
@@ -89,7 +91,9 @@ export function SingleRoom({ bedType, image, hotel, user }: RoomProps) {
)
const adultsMsg = intl.formatMessage(
{ id: "{adults, plural, one {# adult} other {# adults}}" },
{
defaultMessage: "{adults, plural, one {# adult} other {# adults}}",
},
{
adults,
}
@@ -97,7 +101,7 @@ export function SingleRoom({ bedType, image, hotel, user }: RoomProps) {
const childrenMsg = intl.formatMessage(
{
id: "{children, plural, one {# child} other {# children}}",
defaultMessage: "{children, plural, one {# child} other {# children}}",
},
{
children: childrenAges.length,
@@ -114,7 +118,9 @@ export function SingleRoom({ bedType, image, hotel, user }: RoomProps) {
)
const breakfastText = rateDefinition.breakfastIncluded
? intl.formatMessage({ id: "Included" })
? intl.formatMessage({
defaultMessage: "Included",
})
: breakfast
? formatPrice(
intl,
@@ -135,7 +141,9 @@ export function SingleRoom({ bedType, image, hotel, user }: RoomProps) {
<Typography variant="Tag/sm">
<span>
{intl.formatMessage(
{ id: "Room {roomIndex}" },
{
defaultMessage: "Room {roomIndex}",
},
{
roomIndex: bookedRoom.roomNumber,
}
@@ -145,7 +153,13 @@ export function SingleRoom({ bedType, image, hotel, user }: RoomProps) {
</div>
<div className={styles.reference}>
<Typography variant="Body/Paragraph/mdBold">
<span>{intl.formatMessage({ id: "Reference" })}:</span>
<span>
{intl.formatMessage({
defaultMessage: "Reference",
})}
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
{":"}
</span>
</Typography>
<Typography variant="Body/Paragraph/mdRegular">
<span>{confirmationNumber}</span>
@@ -209,7 +223,11 @@ export function SingleRoom({ bedType, image, hotel, user }: RoomProps) {
size={20}
/>
<Typography variant="Body/Paragraph/mdBold">
<p>{intl.formatMessage({ id: "Guests" })}</p>
<p>
{intl.formatMessage({
defaultMessage: "Guests",
})}
</p>
</Typography>
</span>
<div className={styles.rowContent}>
@@ -230,7 +248,11 @@ export function SingleRoom({ bedType, image, hotel, user }: RoomProps) {
size={20}
/>
<Typography variant="Body/Paragraph/mdBold">
<p>{intl.formatMessage({ id: "Terms" })}</p>
<p>
{intl.formatMessage({
defaultMessage: "Terms",
})}
</p>
</Typography>
</span>
<div className={styles.rowContent}>
@@ -250,14 +272,20 @@ export function SingleRoom({ bedType, image, hotel, user }: RoomProps) {
size={20}
/>
<Typography variant="Body/Paragraph/mdBold">
<p>{intl.formatMessage({ id: "Modify By" })}</p>
<p>
{intl.formatMessage({
defaultMessage: "Modify By",
})}
</p>
</Typography>
</span>
<div className={styles.rowContent}>
<Typography variant="Body/Paragraph/mdRegular">
<p color="uiTextHighContrast">
{intl.formatMessage(
{ id: "Until {time}, {date}" },
{
defaultMessage: "Until {time}, {date}",
},
{
time: "18:00",
date: fromDate.format("dddd D MMM"),
@@ -277,7 +305,11 @@ export function SingleRoom({ bedType, image, hotel, user }: RoomProps) {
size={20}
/>
<Typography variant="Body/Paragraph/mdBold">
<p>{intl.formatMessage({ id: "Breakfast" })}</p>
<p>
{intl.formatMessage({
defaultMessage: "Breakfast",
})}
</p>
</Typography>
</span>
<div className={styles.rowContent}>
@@ -297,7 +329,9 @@ export function SingleRoom({ bedType, image, hotel, user }: RoomProps) {
/>
<Typography variant="Body/Paragraph/mdBold">
<p>
{intl.formatMessage({ id: "Room classification" })}
{intl.formatMessage({
defaultMessage: "Room classification",
})}
</p>
</Typography>
</span>
@@ -322,7 +356,11 @@ export function SingleRoom({ bedType, image, hotel, user }: RoomProps) {
<span className={styles.rowTitle}>
<MaterialIcon icon="bed" color="Icon/Default" size={20} />
<Typography variant="Body/Paragraph/mdBold">
<p>{intl.formatMessage({ id: "Bed preference" })}</p>
<p>
{intl.formatMessage({
defaultMessage: "Bed preference",
})}
</p>
</Typography>
</span>
<div className={styles.rowContent}>
@@ -331,8 +369,10 @@ export function SingleRoom({ bedType, image, hotel, user }: RoomProps) {
{bedType.mainBed.description}
{bedType.mainBed.widthRange.min ===
bedType.mainBed.widthRange.max
? ` (${mainBedWidthValueMsg})`
: ` (${mainBedWidthRangeMsg})`}
? // eslint-disable-next-line formatjs/no-literal-string-in-jsx
` (${mainBedWidthValueMsg})`
: // eslint-disable-next-line formatjs/no-literal-string-in-jsx
` (${mainBedWidthRangeMsg})`}
</p>
</Typography>
</div>
@@ -355,7 +395,9 @@ export function SingleRoom({ bedType, image, hotel, user }: RoomProps) {
icon={<DiscountIcon color="Icon/Feedback/Information" />}
>
{intl.formatMessage(
{ id: "<strong>Booking code</strong>: {value}" },
{
defaultMessage: "<strong>Booking code</strong>: {value}",
},
{
value: bookingCode,
strong: (text) => (
@@ -372,7 +414,9 @@ export function SingleRoom({ bedType, image, hotel, user }: RoomProps) {
<div className={styles.price}>
<Typography variant="Body/Lead text">
<p color="uiTextHighContrast">
{intl.formatMessage({ id: "Room total" })}
{intl.formatMessage({
defaultMessage: "Room total",
})}
</p>
</Typography>
{priceType === "points" ? (
@@ -381,7 +425,9 @@ export function SingleRoom({ bedType, image, hotel, user }: RoomProps) {
<Typography variant="Title/Subtitle/lg">
<p>
{intl.formatMessage(
{ id: "{count} voucher" },
{
defaultMessage: "{count} voucher",
},
{ count: vouchers }
)}
</p>

18
apps/scandic-web/components/HotelReservation/MyStay/index.tsx
View File

@@ -133,11 +133,16 @@ export async function MyStay({ refId }: { refId: string }) {
<BookingSummary hotel={hotel} />
<Promo
title={intl.formatMessage({ id: "Book your next stay" })}
text={intl.formatMessage({
id: "Get inspired and start dreaming beyond your next trip. Explore more Scandic destinations.",
title={intl.formatMessage({
defaultMessage: "Book your next stay",
})}
text={intl.formatMessage({
defaultMessage:
"Get inspired and start dreaming beyond your next trip. Explore more Scandic destinations.",
})}
buttonText={intl.formatMessage({
defaultMessage: "Explore Scandic hotels",
})}
buttonText={intl.formatMessage({ id: "Explore Scandic hotels" })}
href={promoUrl.toString()}
image={hotel.hotelContent.images}
/>
@@ -166,14 +171,15 @@ export async function MyStay({ refId }: { refId: string }) {
<Typography variant="Title/md">
<h1>
{intl.formatMessage({
id: "You need to be logged in to view your booking",
defaultMessage: "You need to be logged in to view your booking",
})}
</h1>
</Typography>
<Typography variant="Body/Lead text">
<p>
{intl.formatMessage({
id: "And you need to be logged in with the same member account that made the booking.",
defaultMessage:
"And you need to be logged in with the same member account that made the booking.",
})}
</p>
</Typography>