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

13
apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/components/AlreadyLinkedError.tsx
View File

@@ -20,18 +20,25 @@ export function AlreadyLinkedError() {
<SASModal>
<MaterialIcon icon="cancel" isFilled size={64} />
<Typography variant="Title/Subtitle/lg">
<h1>{intl.formatMessage({ id: "Accounts are already linked" })}</h1>
<h1>
{intl.formatMessage({
defaultMessage: "Accounts are already linked",
})}
</h1>
</Typography>
<Typography variant="Body/Paragraph/mdRegular">
<p>
{intl.formatMessage({
id: "Looks like you’ve already linked your Scandic Friends and SAS EuroBonus accounts!",
defaultMessage:
"Looks like you’ve already linked your Scandic Friends and SAS EuroBonus accounts!",
})}
</p>
</Typography>
<Button theme="base" asChild>
<Link href={partnerSas[lang]}>
{intl.formatMessage({ id: "View your linked accounts" })}
{intl.formatMessage({
defaultMessage: "View your linked accounts",
})}
</Link>
</Button>
<SASModalDivider />

13
apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/components/DateOfBirthError.tsx
View File

@@ -25,18 +25,25 @@ export function DateOfBirthError() {
size={64}
/>
<Typography variant="Title/Subtitle/lg">
<h1>{intl.formatMessage({ id: "Date of birth not matching" })}</h1>
<h1>
{intl.formatMessage({
defaultMessage: "Date of birth not matching",
})}
</h1>
</Typography>
<Typography variant="Body/Paragraph/mdRegular">
<p>
{intl.formatMessage({
id: "We couldn’t connect your accounts. Please contact us and we’ll help you resolve this.",
defaultMessage:
"We couldn’t connect your accounts. Please contact us and we’ll help you resolve this.",
})}
</p>
</Typography>
<Button theme="base" asChild>
<Link href={profile[lang]}>
{intl.formatMessage({ id: "View your details" })}
{intl.formatMessage({
defaultMessage: "View your details",
})}
</Link>
</Button>
<SASModalDivider />

10
apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/components/FailedAttemptsError.tsx
View File

@@ -13,18 +13,22 @@ export function FailedAttemptsError() {
return (
<GenericError
title={intl.formatMessage({ id: "Too many failed attempts" })}
title={intl.formatMessage({
defaultMessage: "Too many failed attempts",
})}
variant="info"
>
<Typography variant="Body/Paragraph/mdRegular">
<p>
{intl.formatMessage({
id: "Please wait 1 hour before trying again.",
defaultMessage: "Please wait 1 hour before trying again.",
})}
</p>
</Typography>
<Button theme="base" disabled>
{intl.formatMessage({ id: "Send new code" })}
{intl.formatMessage({
defaultMessage: "Send new code",
})}
</Button>
</GenericError>
)

15
apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/components/SASModal.tsx
View File

@@ -18,7 +18,11 @@ export function SASModalDivider() {
return (
<div className={styles.divider}>
<Typography variant="Body/Paragraph/mdRegular">
<span>{intl.formatMessage({ id: "or" })}</span>
<span>
{intl.formatMessage({
defaultMessage: "or",
})}
</span>
</Typography>
</div>
)
@@ -27,13 +31,17 @@ export function SASModalDivider() {
export function SASModalContactBlock() {
const intl = useIntl()
const phone = intl.formatMessage({ id: "+46 8 517 517 00" })
const phone = intl.formatMessage({
defaultMessage: "+46 8 517 517 00",
})
return (
<div style={{ display: "flex", flexDirection: "column" }}>
<Typography variant="Title/Subtitle/md">
<h4 className={styles.contactBlockTitle}>
{intl.formatMessage({ id: "Contact us" })}
{intl.formatMessage({
defaultMessage: "Contact us",
})}
</h4>
</Typography>
<Link
@@ -42,6 +50,7 @@ export function SASModalContactBlock() {
>
{phone}
</Link>
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
<Link href="mailto:member@scandichotels.com" textDecoration="underline">
member@scandichotels.com
</Link>

10
apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/components/TooManyCodesError.tsx
View File

@@ -13,18 +13,22 @@ export function TooManyCodesError() {
return (
<GenericError
title={intl.formatMessage({ id: "You’ve requested too many codes" })}
title={intl.formatMessage({
defaultMessage: "You’ve requested too many codes",
})}
variant="info"
>
<Typography variant="Body/Paragraph/mdRegular">
<p>
{intl.formatMessage({
id: "Please wait 1 hour before trying again.",
defaultMessage: "Please wait 1 hour before trying again.",
})}
</p>
</Typography>
<Button theme="base" disabled>
{intl.formatMessage({ id: "Send new code" })}
{intl.formatMessage({
defaultMessage: "Send new code",
})}
</Button>
</GenericError>
)

10
apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/components/TooManyFailedAttemptsError.tsx
View File

@@ -13,18 +13,22 @@ export function TooManyFailedAttemptsError() {
return (
<GenericError
title={intl.formatMessage({ id: "Too many failed attempts." })}
title={intl.formatMessage({
defaultMessage: "Too many failed attempts.",
})}
variant="info"
>
<Typography variant="Body/Paragraph/mdRegular">
<p>
{intl.formatMessage({
id: "Please wait 1 hour before trying again.",
defaultMessage: "Please wait 1 hour before trying again.",
})}
</p>
</Typography>
<Button theme="base" disabled>
{intl.formatMessage({ id: "Send new code" })}
{intl.formatMessage({
defaultMessage: "Send new code",
})}
</Button>
</GenericError>
)

4
apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/error.tsx
View File

@@ -26,13 +26,13 @@ export default function Error({
return (
<GenericError
title={intl.formatMessage({
id: "Something went wrong",
defaultMessage: "Something went wrong",
})}
>
<Typography variant="Body/Paragraph/mdRegular">
<p>
{intl.formatMessage({
id: "Please try again later",
defaultMessage: "Please try again later",
})}
</p>
</Typography>

5
apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/error/page.tsx
View File

@@ -37,13 +37,14 @@ export default async function Page({
return (
<GenericError
title={intl.formatMessage({
id: "We could not connect your accounts",
defaultMessage: "We could not connect your accounts",
})}
>
<Typography variant="Body/Paragraph/mdRegular">
<p>
{intl.formatMessage({
id: "We couldn’t connect your accounts. Please contact us and we’ll help you resolve this.",
defaultMessage:
"We couldn’t connect your accounts. Please contact us and we’ll help you resolve this.",
})}
</p>
</Typography>

16
apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/layout.tsx
View File

@@ -29,10 +29,14 @@ export default async function SasXScandicLayout({
<Link className={styles.backLink} href={profileOverview[params.lang]}>
<ArrowLeft height={20} width={20} />
<span className={styles.long}>
{intl.formatMessage({ id: "Back to scandichotels.com" })}
{intl.formatMessage({
defaultMessage: "Back to scandichotels.com",
})}
</span>
<span className={styles.short}>
{intl.formatMessage({ id: "Back" })}
{intl.formatMessage({
defaultMessage: "Back",
})}
</span>
</Link>
<MainMenuLogo />
@@ -45,7 +49,13 @@ export default async function SasXScandicLayout({
async function MainMenuLogo() {
const intl = await getIntl()
return <Logo alt={intl.formatMessage({ id: "Back to scandichotels.com" })} />
return (
<Logo
alt={intl.formatMessage({
defaultMessage: "Back to scandichotels.com",
})}
/>
)
}
function Logo({ alt }: { alt: string }) {

29
apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/link/LinkAccountForm.tsx
View File

@@ -61,7 +61,11 @@ export function LinkAccountForm({
src="/_static/img/partner/sas/sas-campaign-logo.png"
/>
<Typography variant="Title/Subtitle/lg">
<h3>{intl.formatMessage({ id: "Link your accounts" })}</h3>
<h3>
{intl.formatMessage({
defaultMessage: "Link your accounts",
})}
</h3>
</Typography>
</div>
<div className={styles.dateOfBirth}>
@@ -70,19 +74,23 @@ export function LinkAccountForm({
{userDateOfBirth
? intl.formatMessage(
{
id: "Birth date: {dateOfBirth, date, ::MMMM d yyyy}",
defaultMessage:
"Birth date: {dateOfBirth, date, ::MMMM d yyyy}",
},
{
dateOfBirth: new Date(userDateOfBirth),
}
)
: intl.formatMessage({ id: "Birth date is missing" })}
: intl.formatMessage({
defaultMessage: "Birth date is missing",
})}
</p>
</Typography>
<Typography variant="Label/xsRegular">
<p className={styles.dateOfBirthDescription}>
{intl.formatMessage({
id: "We require your birth date in order to link your Scandic Friends account with your SAS EuroBonus account. Please check that it is correct.",
defaultMessage:
"We require your birth date in order to link your Scandic Friends account with your SAS EuroBonus account. Please check that it is correct.",
})}
</p>
</Typography>
@@ -93,7 +101,7 @@ export function LinkAccountForm({
variant="underscored"
>
{intl.formatMessage({
id: "Edit your personal details",
defaultMessage: "Edit your personal details",
})}
<MaterialIcon icon="arrow_forward" size={18} color="CurrentColor" />
@@ -106,7 +114,7 @@ export function LinkAccountForm({
required: {
value: true,
message: intl.formatMessage({
id: "You must accept the terms and conditions",
defaultMessage: "You must accept the terms and conditions",
}),
},
disabled: !userDateOfBirth,
@@ -115,7 +123,7 @@ export function LinkAccountForm({
<Typography variant="Body/Paragraph/mdRegular">
<p>
{intl.formatMessage({
id: "I accept the terms and conditions",
defaultMessage: "I accept the terms and conditions",
})}
</p>
</Typography>
@@ -124,7 +132,8 @@ export function LinkAccountForm({
<p className={styles.termsDescription}>
{intl.formatMessage(
{
id: "By linking your accounts you accept the <sasScandicTermsAndConditionsLink>Terms & Conditions for Scandic Friends and SAS EuroBonus Account Linking</sasScandicTermsAndConditionsLink>.",
defaultMessage:
"By linking your accounts you accept the <sasScandicTermsAndConditionsLink>Terms & Conditions for Scandic Friends and SAS EuroBonus Account Linking</sasScandicTermsAndConditionsLink>.",
},
{
sasScandicTermsAndConditionsLink: (str) => (
@@ -150,7 +159,9 @@ export function LinkAccountForm({
type="submit"
disabled={isPending || disableSubmit}
>
{intl.formatMessage({ id: "Link my accounts" })}
{intl.formatMessage({
defaultMessage: "Link my accounts",
})}
</Button>
</div>
</form>

10
apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/link/success/page.tsx
View File

@@ -26,20 +26,24 @@ export default async function SASxScandicLinkPage({
color="Icon/Feedback/Success"
/>
<Typography variant="Title/Subtitle/lg">
<h1>{intl.formatMessage({ id: "Your accounts are linked" })}</h1>
<h1>
{intl.formatMessage({
defaultMessage: "Your accounts are linked",
})}
</h1>
</Typography>
<div>
<Typography variant="Body/Paragraph/mdRegular">
<p>
{intl.formatMessage({
id: "We successfully connected your accounts!",
defaultMessage: "We successfully connected your accounts!",
})}
</p>
</Typography>
<Typography variant="Body/Paragraph/mdRegular">
<p>
{intl.formatMessage({
id: "Redirecting you to my pages.",
defaultMessage: "Redirecting you to my pages.",
})}
</p>
</Typography>

18
apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/login/page.tsx
View File

@@ -51,13 +51,16 @@ export default async function SASxScandicLoginPage({
const intentDescriptions: Record<Intent, string> = {
link: intl.formatMessage({
id: "Log in to your SAS EuroBonus account to confirm account linking.",
defaultMessage:
"Log in to your SAS EuroBonus account to confirm account linking.",
}),
unlink: intl.formatMessage({
id: "Log in to your SAS Eurobonus account to confirm account unlinking.",
defaultMessage:
"Log in to your SAS Eurobonus account to confirm account unlinking.",
}),
transfer: intl.formatMessage({
id: "In order to transfer your points we will ask you to sign in to your SAS EuroBonus account.",
defaultMessage:
"In order to transfer your points we will ask you to sign in to your SAS EuroBonus account.",
}),
}
@@ -72,7 +75,11 @@ export default async function SASxScandicLoginPage({
style={{ marginTop: 16 }}
/>
<Typography variant="Title/Subtitle/lg">
<h1>{intl.formatMessage({ id: "Redirecting you to SAS" })}</h1>
<h1>
{intl.formatMessage({
defaultMessage: "Redirecting you to SAS",
})}
</h1>
</Typography>
<Typography variant="Body/Paragraph/mdRegular">
<p style={{ textAlign: "center" }}>
@@ -82,7 +89,8 @@ export default async function SASxScandicLoginPage({
<Footnote textAlign="center">
{intl.formatMessage(
{
id: "If you are not redirected automatically, please <loginLink>click here</loginLink>.",
defaultMessage:
"If you are not redirected automatically, please <loginLink>click here</loginLink>.",
},
{
loginLink: (str) => (

16
apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/otp/OneTimePasswordForm.tsx
View File

@@ -56,7 +56,9 @@ export default function OneTimePasswordForm({
if (requestOtp.isError) {
const cause = requestOtp.error?.data?.cause as RequestOtpError
const title = intl.formatMessage({ id: "Error requesting OTP" })
const title = intl.formatMessage({
defaultMessage: "Error requesting OTP",
})
const body = getRequestErrorBody(intl, cause?.errorCode)
return (
@@ -125,11 +127,12 @@ export default function OneTimePasswordForm({
const errorMessages: Record<OtpError, ReactNode> = {
invalidCode: intl.formatMessage({
id: "The code you've entered is incorrect.",
defaultMessage: "The code you've entered is incorrect.",
}),
expiredCode: intl.formatMessage(
{
id: "This code has expired. <resendOtpLink>Send new code.</resendOtpLink>",
defaultMessage:
"This code has expired. <resendOtpLink>Send new code.</resendOtpLink>",
},
{
resendOtpLink: getResendOtpLink,
@@ -189,7 +192,8 @@ export default function OneTimePasswordForm({
<p>
{intl.formatMessage(
{
id: "Didn't receive a code? <resendOtpLink>Resend code</resendOtpLink>",
defaultMessage:
"Didn't receive a code? <resendOtpLink>Resend code</resendOtpLink>",
},
{
resendOtpLink: getResendOtpLink,
@@ -226,11 +230,11 @@ const getRequestErrorBody = (
switch (errorCode) {
case "TOO_MANY_REQUESTS":
return intl.formatMessage({
id: "Too many requests. Please try again later.",
defaultMessage: "Too many requests. Please try again later.",
})
default:
return intl.formatMessage({
id: "An error occurred while requesting a new OTP",
defaultMessage: "An error occurred while requesting a new OTP",
})
}
}

2
apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/otp/loading.tsx
View File

@@ -16,7 +16,7 @@ export default function Loading() {
<Typography variant="Body/Paragraph/mdRegular">
<p>
{intl.formatMessage({
id: "Hang tight...",
defaultMessage: "Hang tight...",
})}
</p>
</Typography>

15
apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/otp/page.tsx
View File

@@ -110,19 +110,22 @@ export default async function SASxScandicOneTimePasswordPage({
const intentDescriptions: Record<Intent, ReactNode> = {
link: intl.formatMessage(
{
id: "Please enter the code sent to <maskedContactInfo></maskedContactInfo> in order to confirm your account linking.",
defaultMessage:
"Please enter the code sent to <maskedContactInfo></maskedContactInfo> in order to confirm your account linking.",
},
{ maskedContactInfo }
),
unlink: intl.formatMessage(
{
id: "Please enter the code sent to <maskedContactInfo></maskedContactInfo> in order to unlink your accounts.",
defaultMessage:
"Please enter the code sent to <maskedContactInfo></maskedContactInfo> in order to unlink your accounts.",
},
{ maskedContactInfo }
),
transfer: intl.formatMessage(
{
id: "Please enter the code sent to <maskedContactInfo></maskedContactInfo> in order to transfer your points.",
defaultMessage:
"Please enter the code sent to <maskedContactInfo></maskedContactInfo> in order to transfer your points.",
},
{ maskedContactInfo }
),
@@ -130,10 +133,12 @@ export default async function SASxScandicOneTimePasswordPage({
return (
<OneTimePasswordForm
heading={intl.formatMessage({ id: "Verification code" })}
heading={intl.formatMessage({
defaultMessage: "Verification code",
})}
ingress={intentDescriptions[intent]}
footnote={intl.formatMessage({
id: "This verifcation is needed for additional security.",
defaultMessage: "This verifcation is needed for additional security.",
})}
otpLength={6}
onSubmit={handleOtpVerified}

47
apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/transfer/success/page.tsx
View File

@@ -40,7 +40,11 @@ export default async function SASxScandicTransferSuccessPage({
/>
<div className={styles.container}>
<Typography variant="Title/Subtitle/lg">
<h1>{intl.formatMessage({ id: "Point transfer completed!" })}</h1>
<h1>
{intl.formatMessage({
defaultMessage: "Point transfer completed!",
})}
</h1>
</Typography>
<TransactionCard addedPoints={addedPoints} lang={lang} />
<div className={styles.divider} />
@@ -52,7 +56,7 @@ export default async function SASxScandicTransferSuccessPage({
>
<Link href={partnerSas[params.lang]} color="none">
{intl.formatMessage({
id: "Go back to My Pages",
defaultMessage: "Go back to My Pages",
})}
</Link>
</Button>
@@ -80,20 +84,33 @@ async function TransactionCard({
return (
<div className={styles.transactionBox}>
<Typography variant="Title/Subtitle/md">
<h2>{intl.formatMessage({ id: "Your transaction" })}</h2>
<h2>
{intl.formatMessage({
defaultMessage: "Your transaction",
})}
</h2>
</Typography>
<div className={styles.transactionDetails}>
<div className={styles.transactionRow}>
<Typography variant="Title/Overline/sm">
<h3>{intl.formatMessage({ id: "Points added" })}</h3>
<h3>
{intl.formatMessage({
defaultMessage: "Points added",
})}
</h3>
</Typography>
<Typography variant="Body/Paragraph/mdBold">
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
<p>+ {transferredPoints}</p>
</Typography>
</div>
<div className={styles.transactionRow}>
<Typography variant="Title/Overline/sm">
<h3>{intl.formatMessage({ id: "Your new total" })}</h3>
<h3>
{intl.formatMessage({
defaultMessage: "Your new total",
})}
</h3>
</Typography>
<Suspense fallback={<SkeletonShimmer width="15ch" height="24px" />}>
<TotalPoints />
@@ -106,14 +123,15 @@ async function TransactionCard({
<Typography variant="Body/Paragraph/mdBold">
<h3>
{intl.formatMessage({
id: "You have enough points for a bonus night!",
defaultMessage: "You have enough points for a bonus night!",
})}
</h3>
</Typography>
<Typography variant="Body/Paragraph/mdRegular">
<p>
{intl.formatMessage({
id: "Bonus Nights range from 10 000 - 80 000 points. Book your next stay with us today!",
defaultMessage:
"Bonus Nights range from 10 000 - 80 000 points. Book your next stay with us today!",
})}
</p>
</Typography>
@@ -128,7 +146,13 @@ async function TransactionCard({
>
{/* TODO correct link */}
<Link href={hotelreservation(lang)} color="none">
{intl.formatMessage({ id: "Book now" })}{" "}
{intl.formatMessage({
defaultMessage: "Book now",
})}
{
/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */
" "
}
<MaterialIcon
icon="calendar_add_on"
size={20}
@@ -150,9 +174,12 @@ async function TotalPoints() {
return (
<Typography variant="Body/Paragraph/mdBold">
<p>
={" "}
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
{"= "}
{intl.formatMessage(
{ id: "{points, number} points" },
{
defaultMessage: "{points, number} points",
},
{
points,
}

8
apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/unlink/success/page.tsx
View File

@@ -26,13 +26,17 @@ export default async function SASxScandicUnlinkSuccessPage({
color="Icon/Feedback/Success"
/>
<Typography variant="Title/Subtitle/lg">
<h1>{intl.formatMessage({ id: "Your accounts are now unlinked" })}</h1>
<h1>
{intl.formatMessage({
defaultMessage: "Your accounts are now unlinked",
})}
</h1>
</Typography>
<div>
<Typography variant="Body/Paragraph/mdRegular">
<p>
{intl.formatMessage({
id: "Redirecting you to My Pages.",
defaultMessage: "Redirecting you to My Pages.",
})}
</p>
</Typography>