scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(WEB-220): label translations

Browse Source
This commit is contained in:
Simon Emanuelsson
2024-05-22 10:27:16 +02:00
parent 125998efcf
commit de79c2dc80
80 changed files with 1104 additions and 460 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
components/MyProfile/CommunicationPreferences/index.tsx
View File

@@ -1,12 +1,16 @@
import Card from "@/components/MyProfile/Card"
import Title from "@/components/TempDesignSystem/Text/Title"
import { getIntl } from "@/i18n"
import styles from "./com.module.css"
export default function CommunicationPreferences() {
export default async function CommunicationPreferences() {
const { formatMessage } = await getIntl()
return (
<Card className={styles.container}>
<Title level="h2">My communication preferences</Title>
<Title level="h4">
{formatMessage({ id: "My communication preferences" })}
</Title>
</Card>
)
}

6
components/MyProfile/CreditCards/index.tsx
View File

@@ -1,12 +1,14 @@
import Card from "@/components/MyProfile/Card"
import Title from "@/components/TempDesignSystem/Text/Title"
import { getIntl } from "@/i18n"
import styles from "./creditCards.module.css"
export default function CreditCards() {
export default async function CreditCards() {
const { formatMessage } = await getIntl()
return (
<Card className={styles.container}>
<Title level="h2">My credit cards</Title>
<Title level="h4">{formatMessage({ id: "My credit cards" })}</Title>
</Card>
)
}

6
components/MyProfile/MembershipCard/index.tsx
View File

@@ -1,12 +1,14 @@
import Card from "@/components/MyProfile/Card"
import Title from "@/components/TempDesignSystem/Text/Title"
import { getIntl } from "@/i18n"
import styles from "./membershipCard.module.css"
export default function MembershipCard() {
export default async function MembershipCard() {
const { formatMessage } = await getIntl()
return (
<Card className={styles.container}>
<Title level="h2">Membership cards</Title>
<Title level="h4">{formatMessage({ id: "Membership cards" })}</Title>
</Card>
)
}

6
components/MyProfile/Password/index.tsx
View File

@@ -1,12 +1,14 @@
import Card from "@/components/MyProfile/Card"
import Title from "@/components/TempDesignSystem/Text/Title"
import { getIntl } from "@/i18n"
import styles from "./password.module.css"
export default function Password() {
export default async function Password() {
const { formatMessage } = await getIntl()
return (
<Card className={styles.container}>
<Title level="h2">Password</Title>
<Title level="h4">{formatMessage({ id: "Password" })}</Title>
</Card>
)
}

46
components/MyProfile/Profile/Edit/Form/Content.tsx
View File

@@ -2,8 +2,8 @@
import { useEffect } from "react"
import { useFormStatus } from "react-dom"
import { useWatch } from "react-hook-form"
import { useIntl } from "react-intl"
import { _ } from "@/lib/translation"
import { useProfileStore } from "@/stores/edit-profile"
import {
@@ -21,6 +21,7 @@ import Phone from "@/components/TempDesignSystem/Form/Phone"
import type { EditFormContentProps } from "@/types/components/myPages/myProfile/edit"
export default function FormContent({ control }: EditFormContentProps) {
const { formatMessage } = useIntl()
const { pending } = useFormStatus()
const setIsPending = useProfileStore((store) => store.setIsPending)
const country = useWatch({ name: "address.country" })
@@ -29,11 +30,18 @@ export default function FormContent({ control }: EditFormContentProps) {
setIsPending(pending)
}, [pending, setIsPending])
const city = formatMessage({ id: "City" })
const email = formatMessage({ id: "Email" })
const street = formatMessage({ id: "Street" })
const zipCode = formatMessage({ id: "Zip code" })
return (
<>
<Field>
<Field.Icon>{country}</Field.Icon>
<Field.Label htmlFor="address.country">*{_("Country")}</Field.Label>
<Field.Label htmlFor="address.country">
*{formatMessage({ id: "Country" })}
</Field.Label>
<Field.Content>
<CountrySelect name="address.country" />
</Field.Content>
@@ -43,7 +51,9 @@ export default function FormContent({ control }: EditFormContentProps) {
<Field.Icon>
<CalendarIcon />
</Field.Icon>
<Field.Label htmlFor="dateOfBirth">*{_("Date of Birth")}</Field.Label>
<Field.Label htmlFor="dateOfBirth">
*{formatMessage({ id: "Date of Birth" })}
</Field.Label>
<Field.Content>
<DateSelect
control={control}
@@ -57,13 +67,13 @@ export default function FormContent({ control }: EditFormContentProps) {
<Field.Icon>
<EmailIcon />
</Field.Icon>
<Field.Label htmlFor="email">*{_("Email")}</Field.Label>
<Field.Label htmlFor="email">*{email}</Field.Label>
<Field.Content>
<Input
aria-label={_("Email")}
aria-label={email}
control={control}
name="email"
placeholder={_("Email")}
placeholder={email}
registerOptions={{ required: true }}
type="email"
/>
@@ -74,7 +84,9 @@ export default function FormContent({ control }: EditFormContentProps) {
<Field.Icon>
<PhoneIcon />
</Field.Icon>
<Field.Label htmlFor="phoneNumber">*{_("Phone")}</Field.Label>
<Field.Label htmlFor="phoneNumber">
*{formatMessage({ id: "Phone" })}
</Field.Label>
<Field.Content>
<Phone countrySelectName="address.country" name="phoneNumber" />
</Field.Content>
@@ -85,14 +97,14 @@ export default function FormContent({ control }: EditFormContentProps) {
<HouseIcon />
</Field.Icon>
<Field.Label htmlFor="address.streetAddress">
{_("Address")}
{formatMessage({ id: "Address" })}
</Field.Label>
<Field.Content>
<Input
aria-label={_("Street")}
aria-label={street}
control={control}
name="address.streetAddress"
placeholder={_("Street 123")}
placeholder={street}
/>
</Field.Content>
</Field>
@@ -101,13 +113,15 @@ export default function FormContent({ control }: EditFormContentProps) {
<Field.Icon>
<HouseIcon />
</Field.Icon>
<Field.Label htmlFor="address.city">{_("City/State")}</Field.Label>
<Field.Label htmlFor="address.city">
{formatMessage({ id: "City/State" })}
</Field.Label>
<Field.Content>
<Input
aria-label={_("City")}
aria-label={city}
control={control}
name="address.city"
placeholder={_("City")}
placeholder={city}
/>
</Field.Content>
</Field>
@@ -116,13 +130,13 @@ export default function FormContent({ control }: EditFormContentProps) {
<Field.Icon>
<HouseIcon />
</Field.Icon>
<Field.Label htmlFor="address.zipCode">*{_("Zip code")}</Field.Label>
<Field.Label htmlFor="address.zipCode">*{zipCode}</Field.Label>
<Field.Content>
<Input
aria-label={_("Zip code")}
aria-label={zipCode}
control={control}
name="address.zipCode"
placeholder={_("Zip code")}
placeholder={zipCode}
registerOptions={{ required: true }}
/>
</Field.Content>

18
components/MyProfile/Profile/Edit/Form/schema.ts
View File

@@ -1,25 +1,17 @@
import { z } from "zod"
import { _ } from "@/lib/translation"
import { phoneValidator } from "@/utils/phoneValidator"
export const editProfileSchema = z.object({
"address.country": z
.string({ required_error: _("Country is required") })
.min(1, { message: _("Country is required") }),
"address.country": z.string().min(1),
"address.city": z.string().optional(),
"address.streetAddress": z.string().optional(),
"address.zipCode": z
.string({ required_error: _("Zip code is required") })
.min(1, { message: _("Zip code is required") }),
dateOfBirth: z
.string({ required_error: _("Date of Birth is required") })
.min(1, { message: _("Date of Birth is required") }),
"address.zipCode": z.string().min(1),
dateOfBirth: z.string().min(1),
email: z.string().email(),
phoneNumber: phoneValidator(
_("Phone is required"),
_("Please enter a valid phone number")
"Phone is required",
"Please enter a valid phone number"
),
})

23
components/MyProfile/Profile/index.tsx
View File

@@ -1,5 +1,4 @@
import { dt } from "@/lib/dt"
import { _ } from "@/lib/translation"
import { serverClient } from "@/lib/trpc/server"
import {
@@ -9,6 +8,7 @@ import {
PhoneIcon,
} from "@/components/Icons"
import { countries } from "@/components/TempDesignSystem/Form/Country/countries"
import { getIntl } from "@/i18n"
import Field from "../Field"
import Container from "./Container"
@@ -16,6 +16,7 @@ import Container from "./Container"
import styles from "./profile.module.css"
export default async function Profile() {
const { formatMessage } = await getIntl()
const user = await serverClient().user.get()
const countryName = countries.find(
(country) => country.code === user.address.country
@@ -26,49 +27,55 @@ export default async function Profile() {
<section className={styles.info}>
<Field>
<Field.Icon>{user.address.country}</Field.Icon>
<Field.TextLabel>{_("Country")}</Field.TextLabel>
<Field.TextLabel>{formatMessage({ id: "Country" })}</Field.TextLabel>
<Field.Content>{countryName?.name}</Field.Content>
</Field>
<Field>
<Field.Icon>
<CalendarIcon />
</Field.Icon>
<Field.TextLabel>{_("Date of Birth")}</Field.TextLabel>
<Field.TextLabel>
{formatMessage({ id: "Date of Birth" })}
</Field.TextLabel>
<Field.Content>{dob}</Field.Content>
</Field>
<Field>
<Field.Icon>
<EmailIcon />
</Field.Icon>
<Field.TextLabel>{_("Email")}</Field.TextLabel>
<Field.TextLabel>{formatMessage({ id: "Email" })}</Field.TextLabel>
<Field.Content>{user.email}</Field.Content>
</Field>
<Field>
<Field.Icon>
<PhoneIcon />
</Field.Icon>
<Field.TextLabel>{_("Phone number")}</Field.TextLabel>
<Field.TextLabel>
{formatMessage({ id: "Phone number" })}
</Field.TextLabel>
<Field.Content>{user.phoneNumber}</Field.Content>
</Field>
<Field>
<Field.Icon>
<HouseIcon />
</Field.Icon>
<Field.TextLabel>{_("Address")}</Field.TextLabel>
<Field.TextLabel>{formatMessage({ id: "Address" })}</Field.TextLabel>
<Field.Content>{user.address.streetAddress || "-"}</Field.Content>
</Field>
<Field>
<Field.Icon>
<HouseIcon />
</Field.Icon>
<Field.TextLabel>{_("City/State")}</Field.TextLabel>
<Field.TextLabel>
{formatMessage({ id: "City/State" })}
</Field.TextLabel>
<Field.Content>{user.address.city || "-"}</Field.Content>
</Field>
<Field>
<Field.Icon>
<HouseIcon />
</Field.Icon>
<Field.TextLabel>{_("Zip code")}</Field.TextLabel>
<Field.TextLabel>{formatMessage({ id: "Zip code" })}</Field.TextLabel>
<Field.Content>{user.address.zipCode}</Field.Content>
</Field>
</section>

6
components/MyProfile/Wishes/index.tsx
View File

@@ -1,12 +1,14 @@
import Card from "@/components/MyProfile/Card"
import Title from "@/components/TempDesignSystem/Text/Title"
import { getIntl } from "@/i18n"
import styles from "./wishes.module.css"
export default function Wishes() {
export default async function Wishes() {
const { formatMessage } = await getIntl()
return (
<Card className={styles.container}>
<Title level="h2">My wishes</Title>
<Title level="h4">{formatMessage({ id: "My wishes" })}</Title>
</Card>
)
}