feat(SW-706): make eslint rule 'formatjs/no-literal-string-in-jsx' pass
This commit is contained in:
Michael Zetterberg
@@ -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>
|
||||
}
|
||||
|
||||
@@ -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"
|
||||
|
||||
+34
-10
@@ -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>
|
||||
|
||||
+31
-11
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user