diff --git a/apps/scandic-web/components/Forms/Edit/Profile/FormContent/index.tsx b/apps/scandic-web/components/Forms/Edit/Profile/FormContent/index.tsx index 08d9c0f6c..487cbeb99 100644 --- a/apps/scandic-web/components/Forms/Edit/Profile/FormContent/index.tsx +++ b/apps/scandic-web/components/Forms/Edit/Profile/FormContent/index.tsx @@ -2,16 +2,17 @@ import { useIntl } from "react-intl" +import { Select } from "@scandic-hotels/design-system/Select" +import { Typography } from "@scandic-hotels/design-system/Typography" + import { getLocalizedLanguageOptions } from "@/constants/languages" import Divider from "@/components/TempDesignSystem/Divider" import CountrySelect from "@/components/TempDesignSystem/Form/Country" import DateSelect from "@/components/TempDesignSystem/Form/Date" -import DeprecatedPhone from "@/components/TempDesignSystem/Form/DeprecatedPhone" import Input from "@/components/TempDesignSystem/Form/Input" import PasswordInput from "@/components/TempDesignSystem/Form/PasswordInput" -import Select from "@/components/TempDesignSystem/Form/Select" -import Body from "@/components/TempDesignSystem/Text/Body" +import Phone from "@/components/TempDesignSystem/Form/Phone" import useLang from "@/hooks/useLang" import styles from "./formContent.module.css" @@ -19,76 +20,65 @@ import styles from "./formContent.module.css" export default function FormContent() { const intl = useIntl() const lang = useLang() - const languageOptions = getLocalizedLanguageOptions(lang) - 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 ( <>
- - {intl.formatMessage({ - defaultMessage: "User information", - })} - + +

+ {intl.formatMessage({ + defaultMessage: "User information", + })} +

+
- +
- @@ -103,21 +93,27 @@ export default function FormContent() {
- - {intl.formatMessage({ - defaultMessage: "Password", - })} - + +

+ {intl.formatMessage({ + defaultMessage: "Password", + })} +

+
diff --git a/apps/scandic-web/components/Forms/Signup/form.module.css b/apps/scandic-web/components/Forms/Signup/form.module.css index dc913b792..b2bd6b372 100644 --- a/apps/scandic-web/components/Forms/Signup/form.module.css +++ b/apps/scandic-web/components/Forms/Signup/form.module.css @@ -1,52 +1,61 @@ .form { display: grid; - gap: var(--Spacing-x5); - grid-area: form; -} - -.title { - grid-area: title; -} - -.formWrapper { - display: flex; - flex-direction: column; - gap: var(--Spacing-x3); + gap: var(--Space-x5); } +.formWrapper, .userInfo, -.password, -.terms { - align-self: flex-start; +.password { display: grid; - gap: var(--Spacing-x2); + gap: var(--Space-x3); } -.container { - display: flex; - flex-direction: column; - gap: var(--Spacing-x3); +.container, +.terms { + display: grid; + gap: var(--Space-x2); } .nameInputs { display: grid; - gap: var(--Spacing-x2); + gap: var(--Space-x2); } .dateField { display: grid; - gap: var(--Spacing-x1); + gap: var(--Space-x1); } @media screen and (min-width: 1367px) { .formWrapper { - gap: var(--Spacing-x5); + gap: var(--Space-x5); } .nameInputs { grid-template-columns: 1fr 1fr; } + .additional { + grid-template-columns: 2fr 5fr; + grid-template-areas: + "zip country" + "email email" + "phone phone"; + + & > div:nth-child(1) { + grid-area: zip; + } + & > div:nth-child(2) { + grid-area: country; + } + & > div:nth-child(3) { + grid-area: email; + } + & > div:nth-child(4) { + grid-area: phone; + } + } + .signUpButton { width: fit-content; } diff --git a/apps/scandic-web/components/Forms/Signup/index.tsx b/apps/scandic-web/components/Forms/Signup/index.tsx index 6562a05ea..77da57309 100644 --- a/apps/scandic-web/components/Forms/Signup/index.tsx +++ b/apps/scandic-web/components/Forms/Signup/index.tsx @@ -1,28 +1,27 @@ "use client" import { zodResolver } from "@hookform/resolvers/zod" +import { cx } from "class-variance-authority" import { useRouter } from "next/navigation" import { FormProvider, useForm } from "react-hook-form" import { useIntl } from "react-intl" +import { Button } from "@scandic-hotels/design-system/Button" +import { Typography } from "@scandic-hotels/design-system/Typography" + import { membershipTermsAndConditions, privacyPolicy, } from "@/constants/webHrefs" import { trpc } from "@/lib/trpc/client" -import Button from "@/components/TempDesignSystem/Button" import Checkbox from "@/components/TempDesignSystem/Form/Checkbox" import CountrySelect from "@/components/TempDesignSystem/Form/Country" import DateSelect from "@/components/TempDesignSystem/Form/Date" -import DeprecatedPhone from "@/components/TempDesignSystem/Form/DeprecatedPhone" import Input from "@/components/TempDesignSystem/Form/Input" import PasswordInput from "@/components/TempDesignSystem/Form/PasswordInput" +import Phone from "@/components/TempDesignSystem/Form/Phone" import Link from "@/components/TempDesignSystem/Link" -import Body from "@/components/TempDesignSystem/Text/Body" -import Caption from "@/components/TempDesignSystem/Text/Caption" -import Subtitle from "@/components/TempDesignSystem/Text/Subtitle" -import Title from "@/components/TempDesignSystem/Text/Title" import { toast } from "@/components/TempDesignSystem/Toasts" import { useFormTracking } from "@/components/TrackingSDK/hooks" import useLang from "@/hooks/useLang" @@ -37,18 +36,7 @@ export default function SignupForm({ title }: SignUpFormProps) { const intl = useIntl() const router = useRouter() const lang = useLang() - 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({ defaultMessage: "Join now", }) @@ -109,8 +97,12 @@ export default function SignupForm({ title }: SignUpFormProps) { } return ( -
- {title} +
+ {title ? ( + +

{title}

+ + ) : null}
- - {intl.formatMessage({ - defaultMessage: "Contact information", - })} - + +

+ {intl.formatMessage({ + defaultMessage: "Contact information", + })} +

+
-
- + +

{intl.formatMessage({ defaultMessage: "Birth date", })} - -

+

+
-
+
+ +
- -
- - {intl.formatMessage({ - defaultMessage: "Password", - })} - + +

+ {intl.formatMessage({ + defaultMessage: "Password", + })} +

+
- - {intl.formatMessage({ - defaultMessage: "Terms and conditions", - })} - + +

+ {intl.formatMessage({ + defaultMessage: "Terms and conditions", + })} +

+
{intl.formatMessage({ defaultMessage: "I accept", })} - {/* TODO: Update copy once ready */} - - {intl.formatMessage( - { - defaultMessage: - "By accepting the Terms and Conditions for Scandic Friends I understand that my personal data will be processed in accordance with Scandic's Privacy Policy.", - }, - { - termsAndConditionsLink: (str) => ( - - {str} - - ), - privacyPolicy: (str) => ( - - {str} - - ), - } - )} - + +

+ {intl.formatMessage( + { + defaultMessage: + "By accepting the Terms and Conditions for Scandic Friends I understand that my personal data will be processed in accordance with Scandic's Privacy Policy.", + }, + { + termsAndConditionsLink: (str) => ( + + {str} + + ), + privacyPolicy: (str) => ( + + {str} + + ), + } + )} +

+
{/* @@ -248,9 +258,9 @@ export default function SignupForm({ title }: SignUpFormProps) {
+ ) } diff --git a/apps/scandic-web/components/HotelReservation/MyStay/ModifyContact/index.tsx b/apps/scandic-web/components/HotelReservation/MyStay/ModifyContact/index.tsx index 00df1cc33..8cfaddcc5 100644 --- a/apps/scandic-web/components/HotelReservation/MyStay/ModifyContact/index.tsx +++ b/apps/scandic-web/components/HotelReservation/MyStay/ModifyContact/index.tsx @@ -4,8 +4,8 @@ import { useFormContext } from "react-hook-form" import { useIntl } from "react-intl" import CountrySelect from "@/components/TempDesignSystem/Form/Country" -import DeprecatedPhone from "@/components/TempDesignSystem/Form/DeprecatedPhone" import Input from "@/components/TempDesignSystem/Form/Input" +import Phone from "@/components/TempDesignSystem/Form/Phone" import Body from "@/components/TempDesignSystem/Text/Body" import styles from "./modifyContact.module.css" @@ -73,7 +73,7 @@ export default function ModifyContact({ />
- { - // If not checked trigger(name) forces validation on mount - // which shows error message before user even can see the form - if (value.inputValue) { - setValue(name, value.phone) - trigger(name) - } else { - setValue(name, "") - } - }, - }) - - function handleSelectCountry(value: ParsedCountry) { - setCountry(value.iso2) - } - - function handleChange(evt: ChangeEvent) { - handlePhoneValueChange(evt) - } - - return ( -
- ( - - )} - /> - - - - -
- ) -} diff --git a/apps/scandic-web/components/TempDesignSystem/Form/DeprecatedPhone/phone.module.css b/apps/scandic-web/components/TempDesignSystem/Form/DeprecatedPhone/phone.module.css deleted file mode 100644 index b0521c7d4..000000000 --- a/apps/scandic-web/components/TempDesignSystem/Form/DeprecatedPhone/phone.module.css +++ /dev/null @@ -1,108 +0,0 @@ -.phone { - display: grid; - grid-template-columns: 1fr; - gap: var(--Spacing-x2); - - --react-international-phone-background-color: var(--Main-Grey-White); - --react-international-phone-border-color: var(--Scandic-Beige-40); - --react-international-phone-dropdown-preferred-list-divider-color: var( - --Scandic-Brand-Pale-Peach - ); - --react-international-phone-selected-dropdown-item-background-color: var( - --Scandic-Blue-00 - ); - --react-international-phone-text-color: var(--Main-Grey-100); - - --react-international-phone-dropdown-preferred-list-divider-margin: 8px; - - --react-international-phone-height: 60px; - --react-international-phone-dropdown-top: calc( - var(--react-international-phone-height) + var(--Spacing-x1) - ); - --react-international-phone-dial-code-preview-font-size: var( - --typography-Body-Regular-fontSize - ); -} - -@media (min-width: 385px) { - .phone { - grid-template-columns: minmax(124px, 164px) 1fr; - } -} - -.phone:has(.input:active, .input:focus) { - --react-international-phone-border-color: var(--Scandic-Blue-90); -} - -.phone :global(.react-international-phone-country-selector-dropdown) { - background: var(--Main-Grey-White); - border-radius: var(--Corner-radius-md); - box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.08); - gap: var(--Spacing-x1); - outline: none; - padding: var(--Spacing-x2); -} - -.phone - :global(.react-international-phone-country-selector-dropdown__list-item) { - border-radius: var(--Corner-radius-md); - padding: var(--Spacing-x1) var(--Spacing-x1) var(--Spacing-x1) - var(--Spacing-x-one-and-half); -} - -.phone - :global(.react-international-phone-country-selector-button__button-content) { - align-self: center; -} - -.select { - align-content: center; - background-color: var(--Main-Grey-White); - border-color: var(--Scandic-Beige-40); - border-style: solid; - border-width: 1px; - border-radius: var(--Corner-radius-md); - display: grid; - gap: var(--Spacing-x-half); - grid-template-rows: auto auto; - height: 60px; - padding: var(--Spacing-x1) var(--Spacing-x2); - transition: border-color 200ms ease; -} - -.select { - width: 100%; -} - -.select[aria-expanded="true"] .chevron { - transform: rotate(180deg); -} - -.selectContainer { - background-color: var(--Main-Grey-White); - border: none; - display: grid; - gap: var(--Spacing-x1); - grid-template-columns: auto 1fr auto; - height: 18px; - justify-content: flex-start; - order: 2; -} - -.arrow { - display: none; -} - -.flag { - height: 18px; - margin: 0; - width: 18px; -} - -.select .dialCode { - border: none; - color: var(--UI-Text-High-contrast); - line-height: 1; - justify-self: flex-start; - padding: 0; -} diff --git a/apps/scandic-web/components/TempDesignSystem/Form/Phone/index.tsx b/apps/scandic-web/components/TempDesignSystem/Form/Phone/index.tsx index a795b93e0..969458d73 100644 --- a/apps/scandic-web/components/TempDesignSystem/Form/Phone/index.tsx +++ b/apps/scandic-web/components/TempDesignSystem/Form/Phone/index.tsx @@ -32,7 +32,7 @@ export default function Phone({ disabled = false, label, name = "phoneNumber", - placeholder = "", + placeholder, readOnly = false, registerOptions = { required: true, diff --git a/apps/scandic-web/components/TempDesignSystem/Form/Phone/phone.module.css b/apps/scandic-web/components/TempDesignSystem/Form/Phone/phone.module.css index 2e339f51a..087433f68 100644 --- a/apps/scandic-web/components/TempDesignSystem/Form/Phone/phone.module.css +++ b/apps/scandic-web/components/TempDesignSystem/Form/Phone/phone.module.css @@ -1,7 +1,7 @@ .phone { display: grid; grid-template-columns: 1fr; - gap: var(--Spacing-x2); + gap: var(--Space-x2); --react-international-phone-background-color: var(--Main-Grey-White); --react-international-phone-border-color: var(--Scandic-Beige-40); @@ -17,7 +17,7 @@ --react-international-phone-height: 60px; --react-international-phone-dropdown-top: calc( - var(--react-international-phone-height) + var(--Spacing-x1) + var(--react-international-phone-height) + var(--Space-x1) ); --react-international-phone-dial-code-preview-font-size: var( --Body-Paragraph-Size @@ -27,7 +27,7 @@ ); } -@media (min-width: 385px) { +@media (min-width: 400px) { .phone { grid-template-columns: minmax(124px, 164px) 1fr; } @@ -41,16 +41,15 @@ background: var(--Main-Grey-White); border-radius: var(--Corner-radius-md); box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.08); - gap: var(--Spacing-x1); + gap: var(--Space-x1); outline: none; - padding: var(--Spacing-x2); + padding: var(--Space-x2); } .phone :global(.react-international-phone-country-selector-dropdown__list-item) { border-radius: var(--Corner-radius-md); - padding: var(--Spacing-x1) var(--Spacing-x1) var(--Spacing-x1) - var(--Spacing-x-one-and-half); + padding: var(--Space-x1) var(--Space-x1) var(--Space-x1) var(--Space-x15); font-family: var(--Body-Paragraph-Font-family); } @@ -67,14 +66,11 @@ border-width: 1px; border-radius: var(--Corner-radius-md); display: grid; - gap: var(--Spacing-x-half); + gap: var(--Space-x05); grid-template-rows: auto auto; height: 60px; - padding: var(--Spacing-x1) var(--Spacing-x2); + padding: var(--Space-x1) var(--Space-x2); transition: border-color 200ms ease; -} - -.select { width: 100%; } @@ -86,7 +82,7 @@ background-color: var(--Main-Grey-White); border: none; display: grid; - gap: var(--Spacing-x1); + gap: var(--Space-x1); grid-template-columns: auto 1fr auto; height: 18px; justify-content: flex-start;