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>
</>
)}