diff --git a/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/link/LinkAccountForm.tsx b/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/link/LinkAccountForm.tsx index 0a9e86cd3..8f1ee6d80 100644 --- a/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/link/LinkAccountForm.tsx +++ b/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/link/LinkAccountForm.tsx @@ -6,6 +6,7 @@ import { FormProvider, useForm } from "react-hook-form" import { useIntl } from "react-intl" import { profileEdit } from "@scandic-hotels/common/constants/routes/myPages" +import Checkbox from "@scandic-hotels/design-system/Form/Checkbox" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" import { Typography } from "@scandic-hotels/design-system/Typography" @@ -13,7 +14,6 @@ import { sasPartnershipTermsAndConditions } from "@/constants/webHrefs" import Image from "@/components/Image" import Button from "@/components/TempDesignSystem/Button" -import Checkbox from "@/components/TempDesignSystem/Form/Checkbox" import Link from "@/components/TempDesignSystem/Link" import styles from "./link-sas.module.css" diff --git a/apps/scandic-web/components/Forms/BookingWidget/FormContent/BookingCode/index.tsx b/apps/scandic-web/components/Forms/BookingWidget/FormContent/BookingCode/index.tsx index 7f24ec85f..6958293c6 100644 --- a/apps/scandic-web/components/Forms/BookingWidget/FormContent/BookingCode/index.tsx +++ b/apps/scandic-web/components/Forms/BookingWidget/FormContent/BookingCode/index.tsx @@ -6,13 +6,13 @@ import { useMediaQuery } from "usehooks-ts" import Body from "@scandic-hotels/design-system/Body" import Caption from "@scandic-hotels/design-system/Caption" +import Checkbox from "@scandic-hotels/design-system/Form/Checkbox" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" import { Typography } from "@scandic-hotels/design-system/Typography" import { SEARCH_TYPE_REDEMPTION } from "@scandic-hotels/trpc/constants/booking" import Modal from "@/components/Modal" import Button from "@/components/TempDesignSystem/Button" -import Checkbox from "@/components/TempDesignSystem/Form/Checkbox" import Input from "@/components/TempDesignSystem/Form/Input" import { getErrorMessage } from "@/components/TempDesignSystem/Form/Input/errors" import Switch from "@/components/TempDesignSystem/Form/Switch" diff --git a/apps/scandic-web/components/Forms/BookingWidget/FormContent/RewardNight/index.tsx b/apps/scandic-web/components/Forms/BookingWidget/FormContent/RewardNight/index.tsx index 605bc0783..adb90df81 100644 --- a/apps/scandic-web/components/Forms/BookingWidget/FormContent/RewardNight/index.tsx +++ b/apps/scandic-web/components/Forms/BookingWidget/FormContent/RewardNight/index.tsx @@ -6,13 +6,13 @@ import { useIntl } from "react-intl" import { useMediaQuery } from "usehooks-ts" import Caption from "@scandic-hotels/design-system/Caption" +import Checkbox from "@scandic-hotels/design-system/Form/Checkbox" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" import { Typography } from "@scandic-hotels/design-system/Typography" import { SEARCH_TYPE_REDEMPTION } from "@scandic-hotels/trpc/constants/booking" import Modal from "@/components/Modal" import Button from "@/components/TempDesignSystem/Button" -import Checkbox from "@/components/TempDesignSystem/Form/Checkbox" import { getErrorMessage } from "@/components/TempDesignSystem/Form/Input/errors" import { RemoveExtraRooms } from "../BookingCode" diff --git a/apps/scandic-web/components/Forms/Signup/index.tsx b/apps/scandic-web/components/Forms/Signup/index.tsx index e7da8ff5b..e02ec787d 100644 --- a/apps/scandic-web/components/Forms/Signup/index.tsx +++ b/apps/scandic-web/components/Forms/Signup/index.tsx @@ -7,9 +7,11 @@ import { FormProvider, useForm } from "react-hook-form" import { useIntl } from "react-intl" import { Button } from "@scandic-hotels/design-system/Button" +import Checkbox from "@scandic-hotels/design-system/Form/Checkbox" import { Typography } from "@scandic-hotels/design-system/Typography" import { trpc } from "@scandic-hotels/trpc/client" import { + signupErrors, type SignUpSchema, signUpSchema, } from "@scandic-hotels/trpc/routers/user/schemas" @@ -20,7 +22,6 @@ import { privacyPolicy, } from "@/constants/webHrefs" -import Checkbox from "@/components/TempDesignSystem/Form/Checkbox" import CountrySelect from "@/components/TempDesignSystem/Form/Country" import DateSelect from "@/components/TempDesignSystem/Form/Date" import Input from "@/components/TempDesignSystem/Form/Input" @@ -217,7 +218,17 @@ export default function SignupForm({ title }: SignUpFormProps) { - + {intl.formatMessage({ defaultMessage: "I accept", })} diff --git a/apps/scandic-web/components/HotelReservation/EnterDetails/Confirm/Guarantee/index.tsx b/apps/scandic-web/components/HotelReservation/EnterDetails/Confirm/Guarantee/index.tsx index 9326cde3f..b6d7e0c35 100644 --- a/apps/scandic-web/components/HotelReservation/EnterDetails/Confirm/Guarantee/index.tsx +++ b/apps/scandic-web/components/HotelReservation/EnterDetails/Confirm/Guarantee/index.tsx @@ -11,12 +11,12 @@ import { useIntl } from "react-intl" import { PaymentMethodEnum } from "@scandic-hotels/common/constants/paymentMethod" import { Button } from "@scandic-hotels/design-system/Button" +import Checkbox from "@scandic-hotels/design-system/Form/Checkbox" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" import { Typography } from "@scandic-hotels/design-system/Typography" import MySavedCards from "@/components/HotelReservation/MySavedCards" import PaymentOption from "@/components/HotelReservation/PaymentOption" -import Checkbox from "@/components/TempDesignSystem/Form/Checkbox" import useSetOverflowVisibleOnRA from "@/hooks/useSetOverflowVisibleOnRA" import PaymentOptionsGroup from "../../Payment/PaymentOptionsGroup" diff --git a/apps/scandic-web/components/HotelReservation/EnterDetails/Confirm/index.tsx b/apps/scandic-web/components/HotelReservation/EnterDetails/Confirm/index.tsx index ba57f4f5a..fe0af105f 100644 --- a/apps/scandic-web/components/HotelReservation/EnterDetails/Confirm/index.tsx +++ b/apps/scandic-web/components/HotelReservation/EnterDetails/Confirm/index.tsx @@ -2,10 +2,9 @@ import { useIntl } from "react-intl" import { Divider } from "@scandic-hotels/design-system/Divider" +import Checkbox from "@scandic-hotels/design-system/Form/Checkbox" import { Typography } from "@scandic-hotels/design-system/Typography" -import Checkbox from "@/components/TempDesignSystem/Form/Checkbox" - import TermsAndConditions from "../Payment/TermsAndConditions" import Guarantee from "./Guarantee" diff --git a/apps/scandic-web/components/HotelReservation/EnterDetails/Details/Multiroom/JoinScandicFriendsCard/index.tsx b/apps/scandic-web/components/HotelReservation/EnterDetails/Details/Multiroom/JoinScandicFriendsCard/index.tsx index 6fbc9e9e9..28511594e 100644 --- a/apps/scandic-web/components/HotelReservation/EnterDetails/Details/Multiroom/JoinScandicFriendsCard/index.tsx +++ b/apps/scandic-web/components/HotelReservation/EnterDetails/Details/Multiroom/JoinScandicFriendsCard/index.tsx @@ -4,11 +4,11 @@ import { useIntl } from "react-intl" import { CurrencyEnum } from "@scandic-hotels/common/constants/currency" import Footnote from "@scandic-hotels/design-system/Footnote" +import Checkbox from "@scandic-hotels/design-system/Form/Checkbox" import { Typography } from "@scandic-hotels/design-system/Typography" import { membershipTermsAndConditions } from "@/constants/webHrefs" -import Checkbox from "@/components/TempDesignSystem/Form/Checkbox" import Link from "@/components/TempDesignSystem/Link" import { useRoomContext } from "@/contexts/Details/Room" import useLang from "@/hooks/useLang" diff --git a/apps/scandic-web/components/HotelReservation/EnterDetails/Details/RoomOne/JoinScandicFriendsCard/index.tsx b/apps/scandic-web/components/HotelReservation/EnterDetails/Details/RoomOne/JoinScandicFriendsCard/index.tsx index 0128533ae..d1cedc973 100644 --- a/apps/scandic-web/components/HotelReservation/EnterDetails/Details/RoomOne/JoinScandicFriendsCard/index.tsx +++ b/apps/scandic-web/components/HotelReservation/EnterDetails/Details/RoomOne/JoinScandicFriendsCard/index.tsx @@ -3,13 +3,13 @@ import { useIntl } from "react-intl" import { CurrencyEnum } from "@scandic-hotels/common/constants/currency" import Footnote from "@scandic-hotels/design-system/Footnote" +import Checkbox from "@scandic-hotels/design-system/Form/Checkbox" import { Typography } from "@scandic-hotels/design-system/Typography" import { membershipTermsAndConditions } from "@/constants/webHrefs" import LoginButton from "@/components/LoginButton" import Button from "@/components/TempDesignSystem/Button" -import Checkbox from "@/components/TempDesignSystem/Form/Checkbox" import Link from "@/components/TempDesignSystem/Link" import { useRoomContext } from "@/contexts/Details/Room" import useLang from "@/hooks/useLang" diff --git a/apps/scandic-web/components/HotelReservation/EnterDetails/Payment/PaymentClient.tsx b/apps/scandic-web/components/HotelReservation/EnterDetails/Payment/PaymentClient.tsx index 6ea0da737..ec371125a 100644 --- a/apps/scandic-web/components/HotelReservation/EnterDetails/Payment/PaymentClient.tsx +++ b/apps/scandic-web/components/HotelReservation/EnterDetails/Payment/PaymentClient.tsx @@ -12,6 +12,7 @@ import { PaymentMethodEnum } from "@scandic-hotels/common/constants/paymentMetho import { selectRate } from "@scandic-hotels/common/constants/routes/hotelReservation" import Body from "@scandic-hotels/design-system/Body" import { Button } from "@scandic-hotels/design-system/Button" +import Checkbox from "@scandic-hotels/design-system/Form/Checkbox" import { Typography } from "@scandic-hotels/design-system/Typography" import { trpc } from "@scandic-hotels/trpc/client" import { bedTypeMap } from "@scandic-hotels/trpc/constants/bedTypeMap" @@ -25,7 +26,6 @@ import { env } from "@/env/client" import { useEnterDetailsStore } from "@/stores/enter-details" import PaymentOption from "@/components/HotelReservation/PaymentOption" -import Checkbox from "@/components/TempDesignSystem/Form/Checkbox" import { useAvailablePaymentOptions } from "@/hooks/booking/useAvailablePaymentOptions" import { useHandleBookingStatus } from "@/hooks/booking/useHandleBookingStatus" import useLang from "@/hooks/useLang" diff --git a/apps/scandic-web/components/HotelReservation/EnterDetails/Payment/TermsAndConditions/index.tsx b/apps/scandic-web/components/HotelReservation/EnterDetails/Payment/TermsAndConditions/index.tsx index 2303a48f9..111800da5 100644 --- a/apps/scandic-web/components/HotelReservation/EnterDetails/Payment/TermsAndConditions/index.tsx +++ b/apps/scandic-web/components/HotelReservation/EnterDetails/Payment/TermsAndConditions/index.tsx @@ -1,11 +1,11 @@ import { useIntl } from "react-intl" import Caption from "@scandic-hotels/design-system/Caption" +import Checkbox from "@scandic-hotels/design-system/Form/Checkbox" import { Typography } from "@scandic-hotels/design-system/Typography" import { bookingTermsAndConditions, privacyPolicy } from "@/constants/webHrefs" -import Checkbox from "@/components/TempDesignSystem/Form/Checkbox" import Link from "@/components/TempDesignSystem/Link" import useLang from "@/hooks/useLang" diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/ConfirmationStep/index.tsx b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/ConfirmationStep/index.tsx index c52b53fb9..0ef6ff89b 100644 --- a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/ConfirmationStep/index.tsx +++ b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/ConfirmationStep/index.tsx @@ -3,6 +3,7 @@ import { useIntl } from "react-intl" import { PaymentMethodEnum } from "@scandic-hotels/common/constants/paymentMethod" import { dt } from "@scandic-hotels/common/dt" +import Checkbox from "@scandic-hotels/design-system/Form/Checkbox" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" import { Typography } from "@scandic-hotels/design-system/Typography" import { AlertTypeEnum } from "@scandic-hotels/trpc/types/alertType" @@ -14,7 +15,6 @@ import PaymentOptionsGroup from "@/components/HotelReservation/EnterDetails/Paym import MySavedCards from "@/components/HotelReservation/MySavedCards" import PaymentOption from "@/components/HotelReservation/PaymentOption" import Alert from "@/components/TempDesignSystem/Alert" -import Checkbox from "@/components/TempDesignSystem/Form/Checkbox" import Link from "@/components/TempDesignSystem/Link" import useLang from "@/hooks/useLang" diff --git a/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/NotCancelled/ManageStay/Actions/CancelStay/Steps/Confirmation/Multiroom/index.tsx b/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/NotCancelled/ManageStay/Actions/CancelStay/Steps/Confirmation/Multiroom/index.tsx index 4c3dbab3c..d384de314 100644 --- a/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/NotCancelled/ManageStay/Actions/CancelStay/Steps/Confirmation/Multiroom/index.tsx +++ b/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/NotCancelled/ManageStay/Actions/CancelStay/Steps/Confirmation/Multiroom/index.tsx @@ -1,12 +1,11 @@ "use client" import { useIntl } from "react-intl" +import Checkbox from "@scandic-hotels/design-system/Form/Checkbox" import { Typography } from "@scandic-hotels/design-system/Typography" import { useMyStayStore } from "@/stores/my-stay" -import Checkbox from "@/components/TempDesignSystem/Form/Checkbox" - import styles from "./multiroom.module.css" import type { Room } from "@/types/stores/my-stay" diff --git a/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/NotCancelled/ManageStay/Actions/GuaranteeLateArrival/Form/index.tsx b/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/NotCancelled/ManageStay/Actions/GuaranteeLateArrival/Form/index.tsx index dc5e73f59..d8bf5b8b6 100644 --- a/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/NotCancelled/ManageStay/Actions/GuaranteeLateArrival/Form/index.tsx +++ b/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/NotCancelled/ManageStay/Actions/GuaranteeLateArrival/Form/index.tsx @@ -5,6 +5,7 @@ import { useIntl } from "react-intl" import { PaymentMethodEnum } from "@scandic-hotels/common/constants/paymentMethod" import { Divider } from "@scandic-hotels/design-system/Divider" +import Checkbox from "@scandic-hotels/design-system/Form/Checkbox" import { Typography } from "@scandic-hotels/design-system/Typography" import { guaranteeCallback } from "@/constants/routes/hotelReservation" @@ -17,7 +18,6 @@ import PaymentOptionsGroup from "@/components/HotelReservation/EnterDetails/Paym import MySavedCards from "@/components/HotelReservation/MySavedCards" import PaymentOption from "@/components/HotelReservation/PaymentOption" import LoadingSpinner from "@/components/LoadingSpinner" -import Checkbox from "@/components/TempDesignSystem/Form/Checkbox" import Link from "@/components/TempDesignSystem/Link" import { toast } from "@/components/TempDesignSystem/Toasts" import { useGuaranteeBooking } from "@/hooks/booking/useGuaranteeBooking" diff --git a/apps/scandic-web/components/TempDesignSystem/Form/Checkbox/errors.ts b/apps/scandic-web/components/TempDesignSystem/Form/Checkbox/errors.ts deleted file mode 100644 index 7c09842d5..000000000 --- a/apps/scandic-web/components/TempDesignSystem/Form/Checkbox/errors.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { signupErrors } from "@scandic-hotels/trpc/routers/user/schemas" - -import type { IntlShape } from "react-intl" - -export function getErrorMessage(intl: IntlShape, errorCode?: string) { - switch (errorCode) { - case signupErrors.TERMS_REQUIRED: - return intl.formatMessage({ - defaultMessage: "You must accept the terms and conditions", - }) - default: - console.warn("Error code not supported:", errorCode) - return errorCode - } -} diff --git a/apps/scandic-web/types/components/checkbox/index.ts b/apps/scandic-web/types/components/checkbox/index.ts deleted file mode 100644 index d51473f35..000000000 --- a/apps/scandic-web/types/components/checkbox/index.ts +++ /dev/null @@ -1,9 +0,0 @@ -import type { RegisterOptions } from "react-hook-form" - -export interface CheckboxProps - extends React.InputHTMLAttributes { - name: string - registerOptions?: RegisterOptions - hideError?: boolean - topAlign?: boolean -} diff --git a/apps/scandic-web/components/TempDesignSystem/Form/Checkbox/checkbox.module.css b/packages/design-system/lib/components/Form/Checkbox/checkbox.module.css similarity index 100% rename from apps/scandic-web/components/TempDesignSystem/Form/Checkbox/checkbox.module.css rename to packages/design-system/lib/components/Form/Checkbox/checkbox.module.css diff --git a/apps/scandic-web/components/TempDesignSystem/Form/Checkbox/index.tsx b/packages/design-system/lib/components/Form/Checkbox/index.tsx similarity index 63% rename from apps/scandic-web/components/TempDesignSystem/Form/Checkbox/index.tsx rename to packages/design-system/lib/components/Form/Checkbox/index.tsx index 9d742f2c6..c9f99adc9 100644 --- a/apps/scandic-web/components/TempDesignSystem/Form/Checkbox/index.tsx +++ b/packages/design-system/lib/components/Form/Checkbox/index.tsx @@ -1,30 +1,37 @@ -"use client" +'use client' -import { forwardRef } from "react" -import { Checkbox as AriaCheckbox } from "react-aria-components" -import { useController, useFormContext } from "react-hook-form" -import { useIntl } from "react-intl" +import { forwardRef } from 'react' +import { Checkbox as AriaCheckbox } from 'react-aria-components' +import { + type RegisterOptions, + useController, + useFormContext, +} from 'react-hook-form' -import Caption from "@scandic-hotels/design-system/Caption" -import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" +import styles from './checkbox.module.css' +import { MaterialIcon } from '../../Icons/MaterialIcon' +import Caption from '../../Caption' -import { getErrorMessage } from "./errors" - -import styles from "./checkbox.module.css" - -import type { CheckboxProps } from "@/types/components/checkbox" +interface CheckboxProps extends React.InputHTMLAttributes { + name: string + registerOptions?: RegisterOptions + hideError?: boolean + topAlign?: boolean + errorCodeMessages?: Record +} const Checkbox = forwardRef< HTMLInputElement, React.PropsWithChildren >(function Checkbox( { - className = "", + className = '', name, children, registerOptions, hideError, topAlign = false, + errorCodeMessages, }, ref ) { @@ -34,7 +41,6 @@ const Checkbox = forwardRef< name, rules: registerOptions, }) - const intl = useIntl() return ( ( <> - {getErrorMessage(intl, fieldState.error.message)} + {(fieldState.error.message && + errorCodeMessages?.[fieldState.error.message]) || + fieldState.error.message} ) : null} diff --git a/packages/design-system/package.json b/packages/design-system/package.json index 4132a22d6..ac3afd6ba 100644 --- a/packages/design-system/package.json +++ b/packages/design-system/package.json @@ -13,6 +13,7 @@ "./Chips": "./dist/components/Chips/index.js", "./Divider": "./dist/components/Divider/index.js", "./Footnote": "./dist/components/Footnote/index.js", + "./Form/Checkbox": "./dist/components/Form/Checkbox/index.js", "./Input": "./dist/components/Input/index.js", "./Label": "./dist/components/Label/index.js", "./Select": "./dist/components/Select/index.js",