wip: new PhoneCountryCode Select

apps/scandic-web/components/HotelReservation/EnterDetails/Details/RoomOne/index.tsx

@@ -10,6 +10,8 @@ import SpecialRequests from "@/components/HotelReservation/EnterDetails/Details/
 import CountrySelect from "@/components/TempDesignSystem/Form/Country"
 import Input from "@/components/TempDesignSystem/Form/Input"
 import Phone from "@/components/TempDesignSystem/Form/Phone"
+import PhoneCountryCode from "@/components/TempDesignSystem/Form/Phone/CountryCode"
+import PhoneNumber from "@/components/TempDesignSystem/Form/Phone/Number"
 import Footnote from "@/components/TempDesignSystem/Text/Footnote"
 import { useRoomContext } from "@/contexts/Details/Room"
 
@@ -159,6 +161,10 @@ export default function Details({ user }: DetailsProps) {
             readOnly={!!user}
             registerOptions={{ required: true, onBlur: updateDetailsStore }}
           />
+          <div>
+            <PhoneCountryCode />
+            <PhoneNumber />
+          </div>
           {user ? null : (
             <div className={styles.fullWidth}>
               <Signup

apps/scandic-web/components/TempDesignSystem/Form/Phone/CountryCode.tsx

@@ -0,0 +1,25 @@
+import { useIntl } from "react-intl"
+
+import { Select } from "@scandic-hotels/design-system/Select"
+
+import { countryPhoneCodes } from "@/constants/countryPhoneCodes"
+
+export default function PhoneCountryCode() {
+  const intl = useIntl()
+  const countries = Object.entries(countryPhoneCodes).map(
+    ([countryName, countryCode]) => ({
+      label: countryName,
+      value: countryCode,
+    })
+  )
+  console.log("length: ", countries.length)
+  return (
+    <Select
+      name="phoneCountryCode"
+      label={intl.formatMessage({
+        defaultMessage: "Country code",
+      })}
+      items={countries}
+    />
+  )
+}

apps/scandic-web/components/TempDesignSystem/Form/Phone/Number.tsx

@@ -0,0 +1,16 @@
+import { useIntl } from "react-intl"
+
+import Input from "@/components/TempDesignSystem/Form/Input"
+
+export default function PhoneNumber() {
+  const intl = useIntl()
+  return (
+    <Input
+      label={intl.formatMessage({
+        defaultMessage: "Phone number",
+      })}
+      name="phoneNumber"
+      type="tel"
+    />
+  )
+}