feat: add new design for join scandic friends checkbox

components/HotelReservation/EnterDetails/Details/Signup/index.tsx

@@ -7,9 +7,9 @@ import { useIntl } from "react-intl"
 import { privacyPolicy } from "@/constants/currentWebHrefs"
 
 import Checkbox from "@/components/TempDesignSystem/Form/Checkbox"
-import CheckboxCard from "@/components/TempDesignSystem/Form/ChoiceCard/Checkbox"
 import DateSelect from "@/components/TempDesignSystem/Form/Date"
 import Input from "@/components/TempDesignSystem/Form/Input"
+import JoinScandicFriendsCard from "@/components/TempDesignSystem/Form/JoinScandicFriendsCard"
 import Link from "@/components/TempDesignSystem/Link"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
@@ -31,29 +31,11 @@ export default function Signup({ name }: { name: string }) {
     setIsJoinChecked(joinValue)
   }, [joinValue])
 
-  const list = [
-    { title: intl.formatMessage({ id: "Earn bonus nights & points" }) },
-    { title: intl.formatMessage({ id: "Get member benefits & offers" }) },
-    { title: intl.formatMessage({ id: "Join at no cost" }) },
-  ]
-
   return (
     <div className={styles.container}>
-      <CheckboxCard
-        highlightSubtitle
-        list={list}
+      <JoinScandicFriendsCard
         name={name}
-        subtitle={intl.formatMessage(
-          {
-            id: "{difference}{amount} {currency}",
-          },
-          {
-            amount: "491",
-            currency: "SEK",
-            difference: "-",
-          }
-        )}
-        title={intl.formatMessage({ id: "Join Scandic Friends" })}
+        difference={{ price: 1000, currency: "SEK" }}
       />
       {isJoinChecked ? (
         <div className={styles.additionalFormData}>