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

6
apps/scandic-web/components/Blocks/DynamicContent/HowItWorks/index.tsx
View File

@@ -12,7 +12,11 @@ export default async function HowItWorks({ dynamic_content }: HowItWorksProps) {
return (
<SectionWrapper dynamic_content={dynamic_content}>
<section className={styles.container}>
<Title level="h3">{intl.formatMessage({ id: "How it works" })}</Title>
<Title level="h3">
{intl.formatMessage({
defaultMessage: "How it works",
})}
</Title>
</section>
</SectionWrapper>
)

28
apps/scandic-web/components/Blocks/DynamicContent/JobylonFeed/JobList/Filter/index.tsx
View File

@@ -33,8 +33,12 @@ export default function Filter({
<Select
items={countryFilters}
defaultSelectedKey={""}
label={intl.formatMessage({ id: "Country" })}
aria-label={intl.formatMessage({ id: "Country" })}
label={intl.formatMessage({
defaultMessage: "Country",
})}
aria-label={intl.formatMessage({
defaultMessage: "Country",
})}
name="country"
onSelect={(value) => onFilterChange(JobylonFilterKey.country, value)}
/>
@@ -42,10 +46,10 @@ export default function Filter({
items={cityFilters}
defaultSelectedKey={""}
label={intl.formatMessage({
id: "Location (shown in local language)",
defaultMessage: "Location (shown in local language)",
})}
aria-label={intl.formatMessage({
id: "Location (shown in local language)",
defaultMessage: "Location (shown in local language)",
})}
name="city"
onSelect={(value) => onFilterChange(JobylonFilterKey.city, value)}
@@ -53,16 +57,24 @@ export default function Filter({
<Select
items={departmentFilters}
defaultSelectedKey={""}
label={intl.formatMessage({ id: "Hotel or office" })}
aria-label={intl.formatMessage({ id: "Hotel or office" })}
label={intl.formatMessage({
defaultMessage: "Hotel or office",
})}
aria-label={intl.formatMessage({
defaultMessage: "Hotel or office",
})}
name="department"
onSelect={(value) => onFilterChange(JobylonFilterKey.department, value)}
/>
<Select
items={categoryFilters}
defaultSelectedKey={""}
label={intl.formatMessage({ id: "Category" })}
aria-label={intl.formatMessage({ id: "Category" })}
label={intl.formatMessage({
defaultMessage: "Category",
})}
aria-label={intl.formatMessage({
defaultMessage: "Category",
})}
name="category"
onSelect={(value) => onFilterChange(JobylonFilterKey.category, value)}
/>

30
apps/scandic-web/components/Blocks/DynamicContent/JobylonFeed/JobList/index.tsx
View File

@@ -31,19 +31,39 @@ export default function JobList({ allJobs }: JobListProps) {
}
const countryFilters = [
{ label: intl.formatMessage({ id: "All countries" }), value: "" },
{
label: intl.formatMessage({
defaultMessage: "All countries",
}),
value: "",
},
...state.countryFilters,
]
const cityFilters = [
{ label: intl.formatMessage({ id: "All locations" }), value: "" },
{
label: intl.formatMessage({
defaultMessage: "All locations",
}),
value: "",
},
...state.cityFilters,
]
const departmentFilters = [
{ label: intl.formatMessage({ id: "All hotels and offices" }), value: "" },
{
label: intl.formatMessage({
defaultMessage: "All hotels and offices",
}),
value: "",
},
...state.departmentFilters,
]
const categoryFilters = [
{ label: intl.formatMessage({ id: "All categories" }), value: "" },
{
label: intl.formatMessage({
defaultMessage: "All categories",
}),
value: "",
},
...state.categoryFilters,
]
@@ -59,7 +79,7 @@ export default function JobList({ allJobs }: JobListProps) {
<Subtitle type="two">
{intl.formatMessage(
{
id: "{count, plural, one {# Result} other {# Results}}",
defaultMessage: "{count, plural, one {# Result} other {# Results}}",
},
{ count: state.jobs.length }
)}

12
apps/scandic-web/components/Blocks/DynamicContent/JobylonFeed/JobylonCard/index.tsx
View File

@@ -24,10 +24,14 @@ export default function JobylonCard({ job }: JobylonCardProps) {
const lang = useLang()
const deadlineText = job.toDate
? intl.formatMessage(
{ id: "Deadline: {date}" },
{
defaultMessage: "Deadline: {date}",
},
{ date: dt(job.toDate).locale(lang).format("Do MMMM") }
)
: intl.formatMessage({ id: "Open for application" })
: intl.formatMessage({
defaultMessage: "Open for application",
})
return (
<div className={styles.jobylonCard}>
@@ -53,7 +57,9 @@ export default function JobylonCard({ job }: JobylonCardProps) {
asChild
>
<a href={job.url} target="_blank" rel="noopener noreferrer">
{intl.formatMessage({ id: "View & apply" })}
{intl.formatMessage({
defaultMessage: "View & apply",
})}
<MaterialIcon icon="open_in_new" size={20} />
</a>
</Button>

11
apps/scandic-web/components/Blocks/DynamicContent/LoyaltyLevels/index.tsx
View File

@@ -37,14 +37,17 @@ async function LevelCard({ level }: LevelCardProps) {
const intl = await getIntl()
let pointsMsg: React.ReactNode = intl.formatMessage(
{ id: "{pointsAmount, number} points" },
{
defaultMessage: "{pointsAmount, number} points",
},
{ pointsAmount: level.required_points }
)
if (level.required_nights) {
pointsMsg = intl.formatMessage(
{
id: "{pointsAmount, number} points <highlight>or {nightsAmount, number} nights</highlight>",
defaultMessage:
"{pointsAmount, number} points <highlight>or {nightsAmount, number} nights</highlight>",
},
{
pointsAmount: level.required_points,
@@ -63,7 +66,9 @@ async function LevelCard({ level }: LevelCardProps) {
tilted="large"
>
{intl.formatMessage(
{ id: "Level {level}" },
{
defaultMessage: "Level {level}",
},
{ level: level.user_facing_tag }
)}
</BiroScript>

10
apps/scandic-web/components/Blocks/DynamicContent/Overview/Buttons/CopyButton.tsx
View File

@@ -18,10 +18,16 @@ export default function CopyButton({ membershipNumber }: CopyButtonProps) {
try {
navigator.clipboard.writeText(membershipNumber)
toast.success(
intl.formatMessage({ id: "Membership ID copied to clipboard" })
intl.formatMessage({
defaultMessage: "Membership ID copied to clipboard",
})
)
} catch {
toast.error(intl.formatMessage({ id: "Failed to copy" }))
toast.error(
intl.formatMessage({
defaultMessage: "Failed to copy",
})
)
}
}

9
apps/scandic-web/components/Blocks/DynamicContent/Overview/Friend/MembershipNumber/index.tsx
View File

@@ -19,12 +19,17 @@ export default async function MembershipNumber({
return (
<div className={classNames}>
<Caption color="pale">
{intl.formatMessage({ id: "Membership ID:" })}
{intl.formatMessage({
defaultMessage: "Membership ID:",
})}
</Caption>
<span className={styles.icon}>
<Caption className={styles.icon} color="pale" asChild>
<code data-hj-suppress>
{membership?.membershipNumber ?? intl.formatMessage({ id: "N/A" })}
{membership?.membershipNumber ??
intl.formatMessage({
defaultMessage: "N/A",
})}
</code>
</Caption>
{membership?.membershipNumber && (

8
apps/scandic-web/components/Blocks/DynamicContent/Overview/Friend/index.tsx
View File

@@ -24,10 +24,14 @@ export default async function Friend({
}
const isHighestLevel = isHighestMembership(membership.membershipLevel)
const lvlMessageHighest = intl.formatMessage({ id: "Highest level" })
const lvlMessageHighest = intl.formatMessage({
defaultMessage: "Highest level",
})
const lvlMessageLevel = intl.formatMessage(
{ id: "Level {level}" },
{
defaultMessage: "Level {level}",
},
{ level: membershipLevels[membership.membershipLevel] }
)

4
apps/scandic-web/components/Blocks/DynamicContent/Overview/Stats/ExpiringPoints/index.tsx
View File

@@ -24,7 +24,9 @@ export default async function ExpiringPoints({ user }: UserProps) {
<section>
<Body color="white" textTransform="bold" textAlign="center">
{intl.formatMessage(
{ id: "{points} spendable points expiring by {date}" },
{
defaultMessage: "{points} spendable points expiring by {date}",
},
{
points: intl.formatNumber(membership.pointsToExpire),
date: d.format(dateFormat),

16
apps/scandic-web/components/Blocks/DynamicContent/Overview/Stats/Points/index.tsx
View File

@@ -25,15 +25,23 @@ export default async function Points({ user }: UserProps) {
<PointsContainer>
<PointsColumn
value={membership?.currentPoints}
title={intl.formatMessage({ id: "Your points to spend" })}
subtitle={intl.formatMessage({ id: "as of today" })}
title={intl.formatMessage({
defaultMessage: "Your points to spend",
})}
subtitle={intl.formatMessage({
defaultMessage: "as of today",
})}
/>
{nextLevel && (
<PointsColumn
value={membership?.pointsRequiredToNextlevel}
title={intl.formatMessage({ id: "Points needed to level up" })}
title={intl.formatMessage({
defaultMessage: "Points needed to level up",
})}
subtitle={intl.formatMessage(
{ id: "next level: {nextLevel}" },
{
defaultMessage: "next level: {nextLevel}",
},
{ nextLevel: nextLevel.name }
)}
/>

16
apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/Client.tsx
View File

@@ -99,9 +99,13 @@ export default function OverviewTableClient({
showDescription={false}
/>
<Select
aria-label={intl.formatMessage({ id: "Level" })}
aria-label={intl.formatMessage({
defaultMessage: "Level",
})}
name={`reward` + column}
label={intl.formatMessage({ id: "Level" })}
label={intl.formatMessage({
defaultMessage: "Level",
})}
items={levelOptions}
value={selectedLevelMobile.level_id}
onSelect={handleSelectChange(actionEnumMobile)}
@@ -134,9 +138,13 @@ export default function OverviewTableClient({
}
return (
<Select
aria-label={intl.formatMessage({ id: "Level" })}
aria-label={intl.formatMessage({
defaultMessage: "Level",
})}
name={`reward` + column}
label={intl.formatMessage({ id: "Level" })}
label={intl.formatMessage({
defaultMessage: "Level",
})}
items={levelOptions}
value={selectedLevelDesktop.level_id}
onSelect={handleSelectChange(actionEnumDesktop)}

7
apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/LevelSummary/index.tsx
View File

@@ -13,7 +13,8 @@ export default function LevelSummary({
const pointsMsg: React.ReactNode = level.required_nights
? intl.formatMessage(
{
id: "{pointsAmount, number} points or {nightsAmount, number} nights",
defaultMessage:
"{pointsAmount, number} points or {nightsAmount, number} nights",
},
{
pointsAmount: level.required_points,
@@ -21,7 +22,9 @@ export default function LevelSummary({
}
)
: intl.formatMessage(
{ id: "{pointsAmount, number} points" },
{
defaultMessage: "{pointsAmount, number} points",
},
{ pointsAmount: level.required_points }
)

4
apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/YourLevelScript/index.tsx
View File

@@ -13,7 +13,9 @@ export default function YourLevel() {
type="two"
textAlign={"center"}
>
{intl.formatMessage({ id: "Your level" })}
{intl.formatMessage({
defaultMessage: "Your level",
})}
</BiroScript>
)
}

4
apps/scandic-web/components/Blocks/DynamicContent/Points/EarnAndBurn/AwardPoints/index.tsx
View File

@@ -34,7 +34,9 @@ export default function AwardPoints({
<Body textTransform="bold" className={classNames}>
{isCalculated
? intl.formatNumber(awardPoints)
: intl.formatMessage({ id: "Points being calculated" })}
: intl.formatMessage({
defaultMessage: "Points being calculated",
})}
</Body>
)
}

28
apps/scandic-web/components/Blocks/DynamicContent/Points/EarnAndBurn/JourneyTable/ClientTable/Row/index.tsx
View File

@@ -24,7 +24,7 @@ export default function Row({ transaction }: RowProps) {
const nightsMsg = intl.formatMessage(
{
id: "{totalNights, plural, one {# night} other {# nights}}",
defaultMessage: "{totalNights, plural, one {# night} other {# nights}}",
},
{
totalNights: transaction.nights,
@@ -40,28 +40,40 @@ export default function Row({ transaction }: RowProps) {
case Transactions.rewardType.stay:
case Transactions.rewardType.stayAdj:
if (transaction.hotelId === "ORS") {
description = intl.formatMessage({ id: "Former Scandic Hotel" })
description = intl.formatMessage({
defaultMessage: "Former Scandic Hotel",
})
}
if (transaction.confirmationNumber === "BALFWD") {
description = intl.formatMessage({
id: "Points earned prior to May 1, 2021",
defaultMessage: "Points earned prior to May 1, 2021",
})
}
break
case Transactions.rewardType.ancillary:
description = intl.formatMessage({ id: "Extras to your booking" })
description = intl.formatMessage({
defaultMessage: "Extras to your booking",
})
break
case Transactions.rewardType.enrollment:
description = intl.formatMessage({ id: "Sign up bonus" })
description = intl.formatMessage({
defaultMessage: "Sign up bonus",
})
break
case Transactions.rewardType.mastercard_points:
description = intl.formatMessage({ id: "Scandic Friends Mastercard" })
description = intl.formatMessage({
defaultMessage: "Scandic Friends Mastercard",
})
break
case Transactions.rewardType.tui_points:
description = intl.formatMessage({ id: "TUI Points" })
description = intl.formatMessage({
defaultMessage: "TUI Points",
})
case Transactions.rewardType.pointShop:
description = intl.formatMessage({ id: "Scandic Friends Point Shop" })
description = intl.formatMessage({
defaultMessage: "Scandic Friends Point Shop",
})
break
}

20
apps/scandic-web/components/Blocks/DynamicContent/Points/EarnAndBurn/JourneyTable/ClientTable/index.tsx
View File

@@ -15,10 +15,18 @@ export default function ClientTable({ transactions }: ClientTableProps) {
const intl = useIntl()
const tableHeadings = [
intl.formatMessage({ id: "Points" }),
intl.formatMessage({ id: "Description" }),
intl.formatMessage({ id: "Booking number" }),
intl.formatMessage({ id: "Arrival date" }),
intl.formatMessage({
defaultMessage: "Points",
}),
intl.formatMessage({
defaultMessage: "Description",
}),
intl.formatMessage({
defaultMessage: "Booking number",
}),
intl.formatMessage({
defaultMessage: "Arrival date",
}),
]
return (
@@ -44,7 +52,9 @@ export default function ClientTable({ transactions }: ClientTableProps) {
) : (
<Table.TR className={styles.placeholder}>
<Table.TD colSpan={tableHeadings.length}>
{intl.formatMessage({ id: "No transactions available" })}
{intl.formatMessage({
defaultMessage: "No transactions available",
})}
</Table.TD>
</Table.TR>
)}

8
apps/scandic-web/components/Blocks/DynamicContent/Points/ExpiringPoints/ExpiringPointsTable/index.tsx
View File

@@ -22,8 +22,12 @@ export default function ExpiringPointsTable({
const expiration = dt(expirationDate).locale(lang).format("DD MMM YYYY")
const tableHeadings = [
intl.formatMessage({ id: "Points" }),
intl.formatMessage({ id: "Expiration Date" }),
intl.formatMessage({
defaultMessage: "Points",
}),
intl.formatMessage({
defaultMessage: "Expiration Date",
}),
]
return (

8
apps/scandic-web/components/Blocks/DynamicContent/Rewards/NextLevel/index.tsx
View File

@@ -47,12 +47,16 @@ export default async function NextLevelRewardsBlock({
<article key={reward.reward_id} className={styles.card}>
<Chip>
<Lock height={16} />
{intl.formatMessage({ id: "Level up to unlock" })}
{intl.formatMessage({
defaultMessage: "Level up to unlock",
})}
</Chip>
<div className={styles.textContainer}>
<Body color="peach50" textAlign="center">
{intl.formatMessage(
{ id: "As our {level}" },
{
defaultMessage: "As our {level}",
},
{ level: nextLevelRewards.level?.name }
)}
</Body>

6
apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/ActiveRedeemedBadge.tsx
View File

@@ -26,7 +26,11 @@ export default function ActiveRedeemedBadge() {
>
<MaterialIcon icon="check_circle" color="Icon/Feedback/Success" />
</motion.div>
<Caption>{intl.formatMessage({ id: "Active" })}</Caption>
<Caption>
{intl.formatMessage({
defaultMessage: "Active",
})}
</Caption>
</div>
)
}

15
apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/ConfirmClose.tsx
View File

@@ -17,17 +17,18 @@ export function ConfirmClose({ close }: { close: VoidFunction }) {
<div className={styles.modalContent}>
<Title level="h3" textAlign="center" textTransform="regular">
{intl.formatMessage({
id: "If you close this your benefit will be removed",
defaultMessage: "If you close this your benefit will be removed",
})}
</Title>
<Body>
{intl.formatMessage({
id: "Have you showed this benefit to the hotel staff?",
defaultMessage: "Have you showed this benefit to the hotel staff?",
})}
</Body>
<Body>
{intl.formatMessage({
id: "If not, please go back and do so before you close this. Once you close this your benefit will be void and removed from My Benefits.",
defaultMessage:
"If not, please go back and do so before you close this. Once you close this your benefit will be void and removed from My Benefits.",
})}
</Body>
</div>
@@ -37,10 +38,14 @@ export function ConfirmClose({ close }: { close: VoidFunction }) {
intent="primary"
theme="base"
>
{intl.formatMessage({ id: "No, go back" })}
{intl.formatMessage({
defaultMessage: "No, go back",
})}
</Button>
<Button onClick={close} intent="secondary" theme="base">
{intl.formatMessage({ id: "Yes, close and remove benefit" })}
{intl.formatMessage({
defaultMessage: "Yes, close and remove benefit",
})}
</Button>
</footer>
</>

20
apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/Flows/Campaign.tsx
View File

@@ -29,7 +29,9 @@ export default function Campaign({ reward }: { reward: Campaign }) {
<Body textAlign="center">{reward.description}</Body>
<div className={styles.rewardBadge}>
<Caption textAlign="center" color="uiTextHighContrast" type="bold">
{intl.formatMessage({ id: "Promo code" })}
{intl.formatMessage({
defaultMessage: "Promo code",
})}
</Caption>
<Caption textAlign="center" color="uiTextHighContrast">
{reward.operaRewardId}
@@ -41,9 +43,17 @@ export default function Campaign({ reward }: { reward: Campaign }) {
onClick={() => {
try {
navigator.clipboard.writeText(reward.operaRewardId)
toast.success(intl.formatMessage({ id: "Copied to clipboard" }))
toast.success(
intl.formatMessage({
defaultMessage: "Copied to clipboard",
})
)
} catch {
toast.error(intl.formatMessage({ id: "Failed to copy" }))
toast.error(
intl.formatMessage({
defaultMessage: "Failed to copy",
})
)
}
}}
type="button"
@@ -53,7 +63,9 @@ export default function Campaign({ reward }: { reward: Campaign }) {
intent="primary"
>
<MaterialIcon icon="content_copy" color="CurrentColor" />
{intl.formatMessage({ id: "Copy promotion code" })}
{intl.formatMessage({
defaultMessage: "Copy promotion code",
})}
</Button>
</footer>
</>

12
apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/Flows/Tier.tsx
View File

@@ -86,7 +86,9 @@ export default function Tier({
intent="primary"
theme="base"
>
{intl.formatMessage({ id: "Redeem benefit" })}
{intl.formatMessage({
defaultMessage: "Redeem benefit",
})}
</Button>
</footer>
)}
@@ -99,14 +101,18 @@ export default function Tier({
intent="primary"
theme="base"
>
{intl.formatMessage({ id: "Yes, redeem" })}
{intl.formatMessage({
defaultMessage: "Yes, redeem",
})}
</Button>
<Button
onClick={() => setRedeemStep("initial")}
intent="secondary"
theme="base"
>
{intl.formatMessage({ id: "Go back" })}
{intl.formatMessage({
defaultMessage: "Go back",
})}
</Button>
</footer>
)}

4
apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/MembershipNumberBadge.tsx
View File

@@ -15,7 +15,9 @@ export default function MembershipNumberBadge({
<div className={styles.rewardBadge}>
<Caption textAlign="center" color="uiTextHighContrast">
{intl.formatMessage(
{ id: "Membership ID: {id}" },
{
defaultMessage: "Membership ID: {id}",
},
{ id: membershipNumber }
)}
</Caption>

2
apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/TimedRedeemedBadge.tsx
View File

@@ -24,7 +24,7 @@ export default function TimedRedeemedBadge() {
<MaterialIcon icon="check_circle" color="Icon/Feedback/Success" />
<Caption>
{intl.formatMessage({
id: "Redeemed & valid through:",
defaultMessage: "Redeemed & valid through:",
})}
</Caption>
</div>

8
apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/index.tsx
View File

@@ -71,8 +71,12 @@ export default function Redeem({ reward, membershipNumber }: RedeemProps) {
>
<Button intent="primary" fullWidth>
{reward.redeemLocation === "Non-redeemable"
? intl.formatMessage({ id: "How to use" })
: intl.formatMessage({ id: "Open" })}
? intl.formatMessage({
defaultMessage: "How to use",
})
: intl.formatMessage({
defaultMessage: "Open",
})}
</Button>
<MotionOverlay
className={styles.overlay}

12
apps/scandic-web/components/Blocks/DynamicContent/Rewards/ScriptedRewardText/index.tsx
View File

@@ -21,11 +21,17 @@ export default function ScriptedRewardText({
: null
}
case "Campaign":
return intl.formatMessage({ id: "Campaign" })
return intl.formatMessage({
defaultMessage: "Campaign",
})
case "Surprise":
return intl.formatMessage({ id: "Surprise!" })
return intl.formatMessage({
defaultMessage: "Surprise!",
})
case "Member-voucher":
return intl.formatMessage({ id: "Voucher" })
return intl.formatMessage({
defaultMessage: "Voucher",
})
default:
return null
}

17
apps/scandic-web/components/Blocks/DynamicContent/SAS/LinkedAccounts/UnlinkSAS.tsx
View File

@@ -17,17 +17,24 @@ export function UnlinkSAS() {
return (
<Dialog
titleText={intl.formatMessage({
id: "Are you sure you want to unlink your account?",
defaultMessage: "Are you sure you want to unlink your account?",
})}
bodyText={intl.formatMessage({
id: "This will remove any membership level upgrades gained from the linking.",
defaultMessage:
"This will remove any membership level upgrades gained from the linking.",
})}
cancelButtonText={intl.formatMessage({
defaultMessage: "Go back",
})}
proceedText={intl.formatMessage({
defaultMessage: "Yes, unlink my accounts",
})}
cancelButtonText={intl.formatMessage({ id: "Go back" })}
proceedText={intl.formatMessage({ id: "Yes, unlink my accounts" })}
proceedHref={`/${params.lang}/sas-x-scandic/login?intent=unlink`}
trigger={
<Button intent="text" theme="base">
{intl.formatMessage({ id: "Unlink accounts" })}
{intl.formatMessage({
defaultMessage: "Unlink accounts",
})}
<MaterialIcon icon="chevron_right" size={20} color="CurrentColor" />
</Button>
}

79
apps/scandic-web/components/Blocks/DynamicContent/SAS/LinkedAccounts/index.tsx
View File

@@ -58,7 +58,8 @@ export default async function SASLinkedAccount({
<p className={styles.caption}>
<MaterialIcon icon="info" size={20} />
{intl.formatMessage({
id: "Changes in your level match can take up to 24 hours to be displayed.",
defaultMessage:
"Changes in your level match can take up to 24 hours to be displayed.",
})}
</p>
</Typography>
@@ -96,20 +97,37 @@ async function MatchedAccountInfo() {
<section className={styles.matchedAccountSection}>
<div className={styles.accountDetails}>
<div className={styles.stack}>
<Label>{intl.formatMessage({ id: "Linked account" })}</Label>
<Label>
{intl.formatMessage({
defaultMessage: "Linked account",
})}
</Label>
<Typography variant="Body/Paragraph/mdBold">
<p>{intl.formatMessage({ id: "SAS EuroBonus" })}</p>
<p>
{intl.formatMessage({
defaultMessage: "SAS EuroBonus",
})}
</p>
</Typography>
</div>
<div className={styles.stack}>
<Label>{intl.formatMessage({ id: "Level" })}</Label>
<Label>
{intl.formatMessage({
defaultMessage: "Level",
})}
</Label>
<Typography variant="Body/Paragraph/mdBold">
<p>{sasLevelName}</p>
</Typography>
</div>
<div className={cx(styles.stack, styles.accountMemberNumber)}>
<Label>{intl.formatMessage({ id: "Membership number" })}</Label>
<Label>
{intl.formatMessage({
defaultMessage: "Membership number",
})}
</Label>
<Typography variant="Body/Paragraph/mdBold">
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
<p className={styles.textRight}>EB{sasMembershipNumber}</p>
</Typography>
</div>
@@ -137,17 +155,33 @@ async function MatchedAccountInfoSkeleton() {
<section className={styles.matchedAccountSection}>
<div className={styles.accountDetails}>
<div className={styles.stack}>
<Label>{intl.formatMessage({ id: "Linked account" })}</Label>
<Label>
{intl.formatMessage({
defaultMessage: "Linked account",
})}
</Label>
<Typography variant="Body/Paragraph/mdBold">
<p>{intl.formatMessage({ id: "SAS EuroBonus" })}</p>
<p>
{intl.formatMessage({
defaultMessage: "SAS EuroBonus",
})}
</p>
</Typography>
</div>
<div className={styles.stack}>
<Label>{intl.formatMessage({ id: "Level" })}</Label>
<Label>
{intl.formatMessage({
defaultMessage: "Level",
})}
</Label>
<SkeletonShimmer width="6ch" height="24px" />
</div>
<div className={cx(styles.stack, styles.accountMemberNumber)}>
<Label>{intl.formatMessage({ id: "Membership number" })}</Label>
<Label>
{intl.formatMessage({
defaultMessage: "Membership number",
})}
</Label>
<SkeletonShimmer width="10ch" height="24px" />
</div>
</div>
@@ -188,19 +222,22 @@ async function TierMatchMessage({
const messageMap: Record<MatchState, ReactNode> = {
boostedBySAS: intl.formatMessage(
{
id: "<sasMark>EuroBonus {sasLevelName}</sasMark> has upgraded your Scandic Friends level to <scandicMark>{scandicLevelName}</scandicMark>.",
defaultMessage:
"<sasMark>EuroBonus {sasLevelName}</sasMark> has upgraded your Scandic Friends level to <scandicMark>{scandicLevelName}</scandicMark>.",
},
messageValues
),
boostedByScandic: intl.formatMessage(
{
id: "Your Scandic Friends level <scandicMark>{scandicLevelName}</scandicMark> has upgraded you to <sasMark>EuroBonus {sasLevelName}</sasMark>.",
defaultMessage:
"Your Scandic Friends level <scandicMark>{scandicLevelName}</scandicMark> has upgraded you to <sasMark>EuroBonus {sasLevelName}</sasMark>.",
},
messageValues
),
noBoost: intl.formatMessage(
{
id: "<sasMark>EuroBonus {sasLevelName}</sasMark> and <scandicMark>{scandicLevelName}</scandicMark> are equally matched tiers. Level up in one of your memberships to qualify for an upgrade!",
defaultMessage:
"<sasMark>EuroBonus {sasLevelName}</sasMark> and <scandicMark>{scandicLevelName}</scandicMark> are equally matched tiers. Level up in one of your memberships to qualify for an upgrade!",
},
messageValues
),
@@ -214,7 +251,11 @@ async function TierMatchMessage({
return (
<div className={styles.stack}>
<Label>{intl.formatMessage({ id: "Level match status" })}</Label>
<Label>
{intl.formatMessage({
defaultMessage: "Level match status",
})}
</Label>
<div className={styles.tierMatchText}>
<div className={styles.iconWrapper}>{iconMap[matchState]}</div>
<Typography variant="Body/Paragraph/mdRegular">
@@ -230,7 +271,11 @@ async function TierMatchMessageSkeleton() {
return (
<div className={styles.stack}>
<Label>{intl.formatMessage({ id: "Level match status" })}</Label>
<Label>
{intl.formatMessage({
defaultMessage: "Level match status",
})}
</Label>
<div className={styles.tierMatchText}>
<SkeletonShimmer width="250px" height="24px" />
</div>
@@ -256,7 +301,11 @@ async function TierMatchExpiration({
return (
<div className={styles.stack}>
<Label>{intl.formatMessage({ id: "Upgrade valid until" })}</Label>
<Label>
{intl.formatMessage({
defaultMessage: "Upgrade valid until",
})}
</Label>
<Typography variant="Body/Paragraph/mdBold">
<p>
{matchState === "boostedBySAS"

44
apps/scandic-web/components/Blocks/DynamicContent/SAS/TransferPoints/TransferPointsForm.tsx
View File

@@ -78,18 +78,28 @@ async function TransferPointsFormContent({
<div>
<div className={styles.labelWithIcon}>
<Typography variant="Tag/sm">
<p>{intl.formatMessage({ id: "Transfer from" })}</p>
<p>
{intl.formatMessage({
defaultMessage: "Transfer from",
})}
</p>
</Typography>
<MaterialIcon icon="upload" />
</div>
<Typography variant="Title/Subtitle/md">
<p>{intl.formatMessage({ id: "SAS EuroBonus" })}</p>
<p>
{intl.formatMessage({
defaultMessage: "SAS EuroBonus",
})}
</p>
</Typography>
</div>
<div>
<Typography variant="Tag/sm">
<p className={styles.balanceLabel}>
{intl.formatMessage({ id: "Balance" })}
{intl.formatMessage({
defaultMessage: "Balance",
})}
</p>
</Typography>
{sasPoints === null ? (
@@ -102,7 +112,9 @@ async function TransferPointsFormContent({
<Typography variant="Body/Paragraph/mdRegular">
<p>
{intl.formatMessage(
{ id: "{points, number} p" },
{
defaultMessage: "{points, number} p",
},
{ points: sasPoints }
)}
</p>
@@ -115,7 +127,7 @@ async function TransferPointsFormContent({
<Typography variant="Body/Paragraph/mdRegular">
<p>
{intl.formatMessage({
id: "You have no points to transfer.",
defaultMessage: "You have no points to transfer.",
})}
</p>
</Typography>
@@ -126,17 +138,27 @@ async function TransferPointsFormContent({
<div className={styles.labelWithIcon}>
<MaterialIcon icon="download" />
<Typography variant="Tag/sm">
<p>{intl.formatMessage({ id: "Transfer to" })}</p>
<p>
{intl.formatMessage({
defaultMessage: "Transfer to",
})}
</p>
</Typography>
</div>
<Typography variant="Title/Subtitle/md">
<p>{intl.formatMessage({ id: "Scandic Friends" })}</p>
<p>
{intl.formatMessage({
defaultMessage: "Scandic Friends",
})}
</p>
</Typography>
</div>
<div>
<Typography variant="Tag/sm">
<p className={styles.balanceLabel}>
{intl.formatMessage({ id: "Balance" })}
{intl.formatMessage({
defaultMessage: "Balance",
})}
</p>
</Typography>
{scandicPoints === null ? (
@@ -149,7 +171,9 @@ async function TransferPointsFormContent({
<Typography variant="Body/Paragraph/mdRegular">
<p>
{intl.formatMessage(
{ id: "{points, number} p" },
{
defaultMessage: "{points, number} p",
},
{ points: scandicPoints }
)}
</p>
@@ -167,7 +191,7 @@ async function TransferPointsFormContent({
<Typography variant="Body/Supporting text (caption)/smRegular">
<p style={{ color: "var(--Text-Tertiary)" }}>
{intl.formatMessage({
id: "Transferred points will not be level qualifying",
defaultMessage: "Transferred points will not be level qualifying",
})}
</p>
</Typography>

42
apps/scandic-web/components/Blocks/DynamicContent/SAS/TransferPoints/TransferPointsFormClient.tsx
View File

@@ -66,7 +66,9 @@ export function TransferPointsFormClient({
className={styles.slider}
// Set max value to 1 if sasPoints is 0 since slider requires a range
maxValue={hasNoSasPoints ? 1 : sasPoints}
aria-label={intl.formatMessage({ id: "EB points to transfer" })}
aria-label={intl.formatMessage({
defaultMessage: "EB points to transfer",
})}
formatOptions={{
useGrouping: true,
maximumFractionDigits: 0,
@@ -85,7 +87,9 @@ export function TransferPointsFormClient({
<div className={styles.inputsWrapper}>
<TextField type="number" isDisabled={disabled}>
<AriaInputWithLabel
label={intl.formatMessage({ id: "EB points to transfer" })}
label={intl.formatMessage({
defaultMessage: "EB points to transfer",
})}
type="number"
min={0}
value={pointState ?? ""}
@@ -105,13 +109,17 @@ export function TransferPointsFormClient({
<p className={styles.conversionRate}>
{/* TODO maybe dynamic string based on exchange rate */}
{intl.formatMessage({
id: "1 EuroBonus point = 2 Scandic Friends points",
defaultMessage: "1 EuroBonus point = 2 Scandic Friends points",
})}
</p>
</Typography>
<div className={styles.pointsOutput}>
<Typography variant="Label/xsRegular">
<p>{intl.formatMessage({ id: "SF points to receive" })}</p>
<p>
{intl.formatMessage({
defaultMessage: "SF points to receive",
})}
</p>
</Typography>
<Typography variant="Body/Paragraph/mdRegular">
<p>{intl.formatNumber(calculatedPoints)}</p>
@@ -174,7 +182,9 @@ function ConfirmModal({
onClick={() => handleToggle(true)}
disabled={disabled}
>
{intl.formatMessage({ id: "Transfer points" })}
{intl.formatMessage({
defaultMessage: "Transfer points",
})}
</Button>
<Modal isOpen={isOpen} onToggle={handleToggle}>
<div className={styles.modalContainer}>
@@ -186,18 +196,25 @@ function ConfirmModal({
/>
<Typography variant="Title/Subtitle/lg">
<h3>
{intl.formatMessage({ id: "Proceed with point transfer?" })}
{intl.formatMessage({
defaultMessage: "Proceed with point transfer?",
})}
</h3>
</Typography>
<div>
<Typography variant="Body/Paragraph/mdRegular">
<p>{intl.formatMessage({ id: "You are about to exchange:" })}</p>
<p>
{intl.formatMessage({
defaultMessage: "You are about to exchange:",
})}
</p>
</Typography>
<Typography variant="Body/Paragraph/mdRegular">
<p>
{intl.formatMessage(
{
id: "<bold>{sasPoints, number} EuroBonus points</bold> to <bold>{scandicPoints, number} Scandic Friends points</bold>",
defaultMessage:
"<bold>{sasPoints, number} EuroBonus points</bold> to <bold>{scandicPoints, number} Scandic Friends points</bold>",
},
{
sasPoints,
@@ -215,7 +232,8 @@ function ConfirmModal({
<Typography variant="Body/Supporting text (caption)/smRegular">
<p className={styles.expiryText}>
{intl.formatMessage({
id: "Your exchanged points will retain their original expiry date with a maximum validity of 12 months.",
defaultMessage:
"Your exchanged points will retain their original expiry date with a maximum validity of 12 months.",
})}
</p>
</Typography>
@@ -227,7 +245,7 @@ function ConfirmModal({
color="none"
>
{intl.formatMessage({
id: "Yes, I want to transfer my points",
defaultMessage: "Yes, I want to transfer my points",
})}
</Link>
</Button>
@@ -237,7 +255,9 @@ function ConfirmModal({
theme="base"
onClick={() => handleToggle(false)}
>
{intl.formatMessage({ id: "Cancel" })}
{intl.formatMessage({
defaultMessage: "Cancel",
})}
</Button>
</div>
</div>

2
apps/scandic-web/components/Blocks/DynamicContent/Stays/Previous/EmptyPreviousStays/index.tsx
View File

@@ -9,7 +9,7 @@ export default async function EmptyPreviousStaysBlock() {
<section className={styles.container}>
<Title as="h4" level="h3" color="red" textAlign="center">
{intl.formatMessage({
id: "You have no previous stays.",
defaultMessage: "You have no previous stays.",
})}
</Title>
</section>

4
apps/scandic-web/components/Blocks/DynamicContent/Stays/ShowMoreButton/index.tsx
View File

@@ -30,7 +30,9 @@ export default function ShowMoreButton({
size={20}
color="CurrentColor"
/>
{intl.formatMessage({ id: "Show more" })}
{intl.formatMessage({
defaultMessage: "Show more",
})}
</Button>
</div>
)

12
apps/scandic-web/components/Blocks/DynamicContent/Stays/Soonest/EmptyUpcomingStays/index.tsx
View File

@@ -28,14 +28,20 @@ export default async function EmptyUpcomingStaysBlock() {
className={styles.title}
textAlign="center"
>
{intl.formatMessage({ id: "You have no upcoming stays." })}
{intl.formatMessage({
defaultMessage: "You have no upcoming stays.",
})}
<span className={styles.burgundyTitle}>
{intl.formatMessage({ id: "Where should you go next?" })}
{intl.formatMessage({
defaultMessage: "Where should you go next?",
})}
</span>
</Title>
</div>
<Link href={href} className={styles.link} color="peach80">
{intl.formatMessage({ id: "Get inspired" })}
{intl.formatMessage({
defaultMessage: "Get inspired",
})}
<MaterialIcon icon="arrow_forward" color="CurrentColor" />
</Link>
</section>

1
apps/scandic-web/components/Blocks/DynamicContent/Stays/StayCard/index.tsx
View File

@@ -59,6 +59,7 @@ export default function StayCard({ stay }: StayCardProps) {
<Caption asChild>
<time dateTime={arrivalDateTime}>{arrivalDate}</time>
</Caption>
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
{" - "}
<Caption asChild>
<time dateTime={departDateTime}>{departDate}</time>

12
apps/scandic-web/components/Blocks/DynamicContent/Stays/Upcoming/EmptyUpcomingStays/index.tsx
View File

@@ -28,14 +28,20 @@ export default async function EmptyUpcomingStaysBlock() {
className={styles.title}
textAlign="center"
>
{intl.formatMessage({ id: "You have no upcoming stays." })}
{intl.formatMessage({
defaultMessage: "You have no upcoming stays.",
})}
<span className={styles.burgundyTitle}>
{intl.formatMessage({ id: "Where should you go next?" })}
{intl.formatMessage({
defaultMessage: "Where should you go next?",
})}
</span>
</Title>
</div>
<Link href={href} className={styles.link} color="peach80">
{intl.formatMessage({ id: "Get inspired" })}
{intl.formatMessage({
defaultMessage: "Get inspired",
})}
<MaterialIcon icon="arrow_forward" color="CurrentColor" />
</Link>
</section>