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

49
apps/scandic-web/components/Forms/BookingWidget/FormContent/BookingCode/index.tsx
View File

@@ -47,11 +47,15 @@ export default function BookingCode() {
const [showRemember, setShowRemember] = useState(false)
const [showRememberMobile, setShowRememberMobile] = useState(false)
const codeError = errors["bookingCode"]?.value
const codeVoucher = intl.formatMessage({ id: "Code / Voucher" })
const addCode = intl.formatMessage({ id: "Add code" })
const codeVoucher = intl.formatMessage({
defaultMessage: "Code / Voucher",
})
const addCode = intl.formatMessage({
defaultMessage: "Add code",
})
const ref = useRef<HTMLDivElement | null>(null)
const removeExtraRoomsText = intl.formatMessage({
id: "Remove extra rooms",
defaultMessage: "Remove extra rooms",
})
function updateBookingCodeFormValue(value: string) {
@@ -186,7 +190,11 @@ export default function BookingCode() {
>
<Switch name="bookingCode.remember" className="mobile-switch">
<Caption asChild>
<span>{intl.formatMessage({ id: "Remember code" })}</span>
<span>
{intl.formatMessage({
defaultMessage: "Remember code",
})}
</span>
</Caption>
</Switch>
</div>
@@ -204,9 +212,12 @@ type CodeRememberProps = {
function CodeRulesModal() {
const intl = useIntl()
const codeVoucher = intl.formatMessage({ id: "Code / Voucher" })
const codeVoucher = intl.formatMessage({
defaultMessage: "Code / Voucher",
})
const bookingCodeTooltipText = intl.formatMessage({
id: "If you're booking a promotional offer or a Corporate negotiated rate you'll need a special booking code. Don't use any special characters such as (.) (,) (-) (:). If you would like to make a booking with code VOF, please call us +46 8 517 517 20.Save your booking code for the next time you visit the page by ticking the box “Remember”. Don't tick the box if you're using a public computer to avoid unauthorized access to your booking code.",
defaultMessage:
"If you're booking a promotional offer or a Corporate negotiated rate you'll need a special booking code. Don't use any special characters such as (.) (,) (-) (:). If you would like to make a booking with code VOF, please call us +46 8 517 517 20.Save your booking code for the next time you visit the page by ticking the box “Remember”. Don't tick the box if you're using a public computer to avoid unauthorized access to your booking code.",
})
return (
@@ -236,7 +247,11 @@ function CodeRemember({ bookingCodeValue, onApplyClick }: CodeRememberProps) {
<>
<Checkbox name="bookingCode.remember">
<Caption asChild>
<span>{intl.formatMessage({ id: "Remember code" })}</span>
<span>
{intl.formatMessage({
defaultMessage: "Remember code",
})}
</span>
</Caption>
</Checkbox>
{bookingCodeValue ? (
@@ -247,7 +262,9 @@ function CodeRemember({ bookingCodeValue, onApplyClick }: CodeRememberProps) {
type="button"
onClick={onApplyClick}
>
{intl.formatMessage({ id: "Apply" })}
{intl.formatMessage({
defaultMessage: "Apply",
})}
</Button>
) : null}
</>
@@ -269,7 +286,9 @@ function BookingCodeError({ codeError }: { codeError: FieldError }) {
}
className={styles.errorIcon}
/>
{intl.formatMessage({ id: codeError.message })}
{intl.formatMessage({
defaultMessage: codeError.message,
})}
</Caption>
{isMultiroomErr ? (
<RemoveExtraRooms className={styles.hideOnMobile} />
@@ -299,7 +318,9 @@ export function RemoveExtraRooms({ ...props }: ButtonProps) {
intent="primary"
{...props}
>
{intl.formatMessage({ id: "Remove extra rooms" })}
{intl.formatMessage({
defaultMessage: "Remove extra rooms",
})}
</Button>
)
}
@@ -319,7 +340,9 @@ function TabletBookingCode({
formState: { errors },
} = useFormContext<BookingWidgetSchema>()
const codeError = errors["bookingCode"]?.value
const codeVoucher = intl.formatMessage({ id: "Code / Voucher" })
const codeVoucher = intl.formatMessage({
defaultMessage: "Code / Voucher",
})
function toggleModal(isOpen: boolean) {
if (document.body) {
@@ -372,7 +395,9 @@ function TabletBookingCode({
{({ close }) => (
<div className={styles.popover}>
<Input
label={intl.formatMessage({ id: "Add code" })}
label={intl.formatMessage({
defaultMessage: "Add code",
})}
{...register("bookingCode.value", {
onChange: (e) => updateValue(e.target.value),
})}

11
apps/scandic-web/components/Forms/BookingWidget/FormContent/RewardNight/index.tsx
View File

@@ -29,9 +29,12 @@ export default function RewardNight() {
trigger,
} = useFormContext<BookingWidgetSchema>()
const ref = useRef<HTMLDivElement | null>(null)
const reward = intl.formatMessage({ id: "Book Reward Night" })
const reward = intl.formatMessage({
defaultMessage: "Book Reward Night",
})
const rewardNightTooltip = intl.formatMessage({
id: "As a Scandic Friends member you need to be logged in to book a reward night (membership number and password). The points can be used to book reward nights at all Scandic hotels.",
defaultMessage:
"As a Scandic Friends member you need to be logged in to book a reward night (membership number and password). The points can be used to book reward nights at all Scandic hotels.",
})
const redemptionErr = errors[REDEMPTION]
const isMultiRoomError = redemptionErr?.message?.indexOf("Multi-room") === 0
@@ -122,7 +125,9 @@ export default function RewardNight() {
color="Icon/Feedback/Information"
className={styles.errorIcon}
/>
{intl.formatMessage({ id: redemptionErr.message })}
{intl.formatMessage({
defaultMessage: redemptionErr.message,
})}
</Caption>
{isMultiRoomError ? <RemoveExtraRooms /> : null}
</div>

6
apps/scandic-web/components/Forms/BookingWidget/FormContent/Search/SearchList/ClearSearchButton/index.tsx
View File

@@ -35,7 +35,11 @@ export default function ClearSearchButton({
>
<MaterialIcon icon="delete" color="Icon/Interactive/Default" size={20} />
<Caption color="burgundy" type="bold" asChild>
<span>{intl.formatMessage({ id: "Clear searches" })}</span>
<span>
{intl.formatMessage({
defaultMessage: "Clear searches",
})}
</span>
</Caption>
</button>
)

44
apps/scandic-web/components/Forms/BookingWidget/FormContent/Search/SearchList/index.tsx
View File

@@ -90,9 +90,12 @@ export default function SearchList({
return (
<SearchListError
getMenuProps={getMenuProps}
caption={intl.formatMessage({ id: "Enter destination or hotel" })}
caption={intl.formatMessage({
defaultMessage: "Enter destination or hotel",
})}
body={intl.formatMessage({
id: "A destination or hotel name is needed to be able to search for a hotel room.",
defaultMessage:
"A destination or hotel name is needed to be able to search for a hotel room.",
})}
/>
)
@@ -102,9 +105,12 @@ export default function SearchList({
return (
<SearchListError
getMenuProps={getMenuProps}
caption={intl.formatMessage({ id: "No results" })}
caption={intl.formatMessage({
defaultMessage: "No results",
})}
body={intl.formatMessage({
id: "We couldn't find a matching location for your search.",
defaultMessage:
"We couldn't find a matching location for your search.",
})}
/>
)
@@ -115,9 +121,12 @@ export default function SearchList({
return (
<SearchListError
getMenuProps={getMenuProps}
caption={intl.formatMessage({ id: "Unable to search" })}
caption={intl.formatMessage({
defaultMessage: "Unable to search",
})}
body={intl.formatMessage({
id: "An error occurred while searching, please try again.",
defaultMessage:
"An error occurred while searching, please try again.",
})}
/>
)
@@ -147,11 +156,14 @@ export default function SearchList({
return (
<Dialog getMenuProps={getMenuProps} variant="error">
<Body className={styles.text} textTransform="bold">
{intl.formatMessage({ id: "No results" })}
{intl.formatMessage({
defaultMessage: "No results",
})}
</Body>
<Body className={styles.text} color="uiTextPlaceholder">
{intl.formatMessage({
id: "We couldn't find a matching location for your search.",
defaultMessage:
"We couldn't find a matching location for your search.",
})}
</Body>
{searchHistory && (
@@ -162,7 +174,9 @@ export default function SearchList({
color="uiTextPlaceholder"
textTransform="uppercase"
>
{intl.formatMessage({ id: "Latest searches" })}
{intl.formatMessage({
defaultMessage: "Latest searches",
})}
</Footnote>
<List
getItemProps={getItemProps}
@@ -188,7 +202,9 @@ export default function SearchList({
return (
<Dialog getMenuProps={getMenuProps}>
<Footnote color="uiTextPlaceholder" textTransform="uppercase">
{intl.formatMessage({ id: "Latest searches" })}
{intl.formatMessage({
defaultMessage: "Latest searches",
})}
</Footnote>
<List
getItemProps={getItemProps}
@@ -215,14 +231,18 @@ export default function SearchList({
<List
getItemProps={getItemProps}
highlightedIndex={highlightedIndex}
label={intl.formatMessage({ id: "Cities" })}
label={intl.formatMessage({
defaultMessage: "Cities",
})}
locations={autocompleteData?.hits.cities ?? []}
/>
<List
getItemProps={getItemProps}
highlightedIndex={highlightedIndex}
initialIndex={autocompleteData?.hits.cities.length}
label={intl.formatMessage({ id: "Hotels" })}
label={intl.formatMessage({
defaultMessage: "Hotels",
})}
locations={autocompleteData?.hits.hotels ?? []}
/>
</Dialog>

14
apps/scandic-web/components/Forms/BookingWidget/FormContent/Search/index.tsx
View File

@@ -89,7 +89,11 @@ export default function Search({ handlePressEnter }: SearchProps) {
color={isOpen ? "uiTextActive" : "red"}
asChild
>
<span>{intl.formatMessage({ id: "Where to?" })}</span>
<span>
{intl.formatMessage({
defaultMessage: "Where to?",
})}
</span>
</Caption>
</label>
<div {...getRootProps({}, { suppressRefError: true })}>
@@ -101,7 +105,7 @@ export default function Search({ handlePressEnter }: SearchProps) {
openMenu()
},
placeholder: intl.formatMessage({
id: "Hotels & Destinations",
defaultMessage: "Hotels & Destinations",
}),
value: searchTerm,
...register(SEARCH_TERM_NAME, {
@@ -138,7 +142,11 @@ export function SearchSkeleton() {
<div className={styles.container}>
<div className={styles.label}>
<Caption type="bold" color="red" asChild>
<span>{intl.formatMessage({ id: "Where to?" })}</span>
<span>
{intl.formatMessage({
defaultMessage: "Where to?",
})}
</span>
</Caption>
</div>
<div>

8
apps/scandic-web/components/Forms/BookingWidget/FormContent/Voucher/index.tsx
View File

@@ -26,8 +26,12 @@ export default function Voucher() {
export function VoucherSkeleton() {
const intl = useIntl()
const vouchers = intl.formatMessage({ id: "Code / Voucher" })
const reward = intl.formatMessage({ id: "Book Reward Night" })
const vouchers = intl.formatMessage({
defaultMessage: "Code / Voucher",
})
const reward = intl.formatMessage({
defaultMessage: "Book Reward Night",
})
const form = useForm()

34
apps/scandic-web/components/Forms/BookingWidget/FormContent/index.tsx
View File

@@ -48,12 +48,13 @@ export default function FormContent({
{nights > 0
? intl.formatMessage(
{
id: "{totalNights, plural, one {# night} other {# nights}}",
defaultMessage:
"{totalNights, plural, one {# night} other {# nights}}",
},
{ totalNights: nights }
)
: intl.formatMessage({
id: "Check in",
defaultMessage: "Check in",
})}
</Caption>
<DatePicker />
@@ -61,7 +62,11 @@ export default function FormContent({
<div className={styles.rooms}>
<label>
<Caption color="red" type="bold" asChild>
<span>{intl.formatMessage({ id: "Rooms & Guests" })}</span>
<span>
{intl.formatMessage({
defaultMessage: "Rooms & Guests",
})}
</span>
</Caption>
</label>
<GuestsRoomsPickerForm />
@@ -105,7 +110,11 @@ export default function FormContent({
className={styles.buttonText}
asChild
>
<span>{intl.formatMessage({ id: "Search" })}</span>
<span>
{intl.formatMessage({
defaultMessage: "Search",
})}
</span>
</Caption>
<span className={styles.icon}>
<MaterialIcon icon="search" color="Icon/Inverted" size={28} />
@@ -129,7 +138,10 @@ export function BookingWidgetFormContentSkeleton() {
<div className={styles.when}>
<Caption color="red" type="bold">
{intl.formatMessage(
{ id: "{totalNights, plural, one {# night} other {# nights}}" },
{
defaultMessage:
"{totalNights, plural, one {# night} other {# nights}}",
},
{ totalNights: 0 }
)}
</Caption>
@@ -137,7 +149,11 @@ export function BookingWidgetFormContentSkeleton() {
</div>
<div className={styles.rooms}>
<Caption color="red" type="bold" asChild>
<span>{intl.formatMessage({ id: "Rooms & Guests" })}</span>
<span>
{intl.formatMessage({
defaultMessage: "Rooms & Guests",
})}
</span>
</Caption>
<SkeletonShimmer width={"100%"} display={"block"} />
</div>
@@ -159,7 +175,11 @@ export function BookingWidgetFormContentSkeleton() {
className={styles.buttonText}
asChild
>
<span>{intl.formatMessage({ id: "Search" })}</span>
<span>
{intl.formatMessage({
defaultMessage: "Search",
})}
</span>
</Caption>
<span className={styles.icon}>
<MaterialIcon icon="search" color="Icon/Inverted" size={28} />

48
apps/scandic-web/components/Forms/Edit/Profile/FormContent/index.tsx
View File

@@ -21,21 +21,43 @@ export default function FormContent() {
const lang = useLang()
const languageOptions = getLocalizedLanguageOptions(lang)
const city = intl.formatMessage({ id: "City" })
const country = intl.formatMessage({ id: "Country" })
const email = `${intl.formatMessage({ id: "Email" })} ${intl.formatMessage({ id: "Address" }).toLowerCase()}`
const street = intl.formatMessage({ id: "Address" })
const phoneNumber = intl.formatMessage({ id: "Phone number" })
const currentPassword = intl.formatMessage({ id: "Current password" })
const retypeNewPassword = intl.formatMessage({ id: "Retype new password" })
const zipCode = intl.formatMessage({ id: "Zip code" })
const city = intl.formatMessage({
defaultMessage: "City",
})
const country = intl.formatMessage({
defaultMessage: "Country",
})
const email = `${intl.formatMessage({
defaultMessage: "Email",
})} ${intl
.formatMessage({
defaultMessage: "Address",
})
.toLowerCase()}`
const street = intl.formatMessage({
defaultMessage: "Address",
})
const phoneNumber = intl.formatMessage({
defaultMessage: "Phone number",
})
const currentPassword = intl.formatMessage({
defaultMessage: "Current password",
})
const retypeNewPassword = intl.formatMessage({
defaultMessage: "Retype new password",
})
const zipCode = intl.formatMessage({
defaultMessage: "Zip code",
})
return (
<>
<section className={styles.user}>
<header>
<Body textTransform="bold">
{intl.formatMessage({ id: "User information" })}
{intl.formatMessage({
defaultMessage: "User information",
})}
</Body>
</header>
<DateSelect name="dateOfBirth" registerOptions={{ required: true }} />
@@ -68,7 +90,9 @@ export default function FormContent() {
<Phone label={phoneNumber} name="phoneNumber" data-hj-suppress />
<Select
items={languageOptions}
label={intl.formatMessage({ id: "Language" })}
label={intl.formatMessage({
defaultMessage: "Language",
})}
name="language"
/>
</section>
@@ -76,7 +100,9 @@ export default function FormContent() {
<section className={styles.password}>
<header>
<Body textTransform="bold">
{intl.formatMessage({ id: "Password" })}
{intl.formatMessage({
defaultMessage: "Password",
})}
</Body>
</header>
<PasswordInput

26
apps/scandic-web/components/Forms/Edit/Profile/index.tsx
View File

@@ -120,7 +120,9 @@ export default function Form({ user }: EditFormProps) {
<section className={styles.container}>
<div className={styles.title}>
<Title as="h4" color="red" level="h1" textTransform="capitalize">
{intl.formatMessage({ id: "Welcome" })}
{intl.formatMessage({
defaultMessage: "Welcome",
})}
</Title>
<Title
data-hj-suppress
@@ -135,15 +137,23 @@ export default function Form({ user }: EditFormProps) {
<div className={styles.btnContainer}>
<Dialog
bodyText={intl.formatMessage({
id: "Any changes you've made will be lost.",
defaultMessage: "Any changes you've made will be lost.",
})}
cancelButtonText={intl.formatMessage({
defaultMessage: "Go back to edit",
})}
cancelButtonText={intl.formatMessage({ id: "Go back to edit" })}
proceedHref={profile[lang]}
proceedText={intl.formatMessage({ id: "Yes, discard changes" })}
titleText={intl.formatMessage({ id: "Discard unsaved changes?" })}
proceedText={intl.formatMessage({
defaultMessage: "Yes, discard changes",
})}
titleText={intl.formatMessage({
defaultMessage: "Discard unsaved changes?",
})}
trigger={
<Button intent="secondary" size="small" theme="base">
{intl.formatMessage({ id: "Discard changes" })}
{intl.formatMessage({
defaultMessage: "Discard changes",
})}
</Button>
}
/>
@@ -155,7 +165,9 @@ export default function Form({ user }: EditFormProps) {
theme="base"
type="submit"
>
{intl.formatMessage({ id: "Save" })}
{intl.formatMessage({
defaultMessage: "Save",
})}
</Button>
</div>

62
apps/scandic-web/components/Forms/Signup/index.tsx
View File

@@ -36,12 +36,20 @@ export default function SignupForm({ title }: SignUpFormProps) {
const intl = useIntl()
const router = useRouter()
const lang = useLang()
const country = intl.formatMessage({ id: "Country" })
const email = intl.formatMessage({ id: "Email address" })
const phoneNumber = intl.formatMessage({ id: "Phone number" })
const zipCode = intl.formatMessage({ id: "Zip code" })
const country = intl.formatMessage({
defaultMessage: "Country",
})
const email = intl.formatMessage({
defaultMessage: "Email address",
})
const phoneNumber = intl.formatMessage({
defaultMessage: "Phone number",
})
const zipCode = intl.formatMessage({
defaultMessage: "Zip code",
})
const signupButtonText = intl.formatMessage({
id: "Join now",
defaultMessage: "Join now",
})
const signup = trpc.user.signup.useMutation({
@@ -54,13 +62,18 @@ export default function SignupForm({ title }: SignUpFormProps) {
if (error.data?.code === "CONFLICT") {
toast.error(
intl.formatMessage({
id: "An account with this email already exists. Please try signing in instead.",
defaultMessage:
"An account with this email already exists. Please try signing in instead.",
})
)
return
}
toast.error(intl.formatMessage({ id: "Something went wrong!" }))
toast.error(
intl.formatMessage({
defaultMessage: "Something went wrong!",
})
)
console.error("Component Signup error:", error)
},
})
@@ -103,17 +116,23 @@ export default function SignupForm({ title }: SignUpFormProps) {
<div className={styles.container}>
<header>
<Subtitle type="two">
{intl.formatMessage({ id: "Contact information" })}
{intl.formatMessage({
defaultMessage: "Contact information",
})}
</Subtitle>
</header>
<div className={styles.nameInputs}>
<Input
label={intl.formatMessage({ id: "First name" })}
label={intl.formatMessage({
defaultMessage: "First name",
})}
name="firstName"
registerOptions={{ required: true }}
/>
<Input
label={intl.formatMessage({ id: "Last name" })}
label={intl.formatMessage({
defaultMessage: "Last name",
})}
name="lastName"
registerOptions={{ required: true }}
/>
@@ -122,7 +141,9 @@ export default function SignupForm({ title }: SignUpFormProps) {
<div className={styles.dateField}>
<header>
<Caption type="bold">
{intl.formatMessage({ id: "Birth date" })}
{intl.formatMessage({
defaultMessage: "Birth date",
})}
</Caption>
</header>
<DateSelect
@@ -153,29 +174,38 @@ export default function SignupForm({ title }: SignUpFormProps) {
<section className={styles.password}>
<header>
<Subtitle type="two">
{intl.formatMessage({ id: "Password" })}
{intl.formatMessage({
defaultMessage: "Password",
})}
</Subtitle>
</header>
<PasswordInput
name="password"
label={intl.formatMessage({ id: "Password" })}
label={intl.formatMessage({
defaultMessage: "Password",
})}
isNewPassword
/>
</section>
<section className={styles.terms}>
<header>
<Subtitle type="two">
{intl.formatMessage({ id: "Terms and conditions" })}
{intl.formatMessage({
defaultMessage: "Terms and conditions",
})}
</Subtitle>
</header>
<Checkbox name="termsAccepted" registerOptions={{ required: true }}>
{intl.formatMessage({ id: "I accept" })}
{intl.formatMessage({
defaultMessage: "I accept",
})}
</Checkbox>
{/* TODO: Update copy once ready */}
<Body>
{intl.formatMessage(
{
id: "By accepting the <termsAndConditionsLink>Terms and Conditions for Scandic Friends</termsAndConditionsLink> I understand that my personal data will be processed in accordance with <privacyPolicy>Scandic's Privacy Policy</privacyPolicy>.",
defaultMessage:
"By accepting the <termsAndConditionsLink>Terms and Conditions for Scandic Friends</termsAndConditionsLink> I understand that my personal data will be processed in accordance with <privacyPolicy>Scandic's Privacy Policy</privacyPolicy>.",
},
{
termsAndConditionsLink: (str) => (