feat(SW-706): make eslint rule 'formatjs/no-literal-string-in-jsx' pass

apps/scandic-web/components/Forms/Signup/index.tsx

@@ -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) => (