diff --git a/apps/store/public/locales/en/purchase-form.json b/apps/store/public/locales/en/purchase-form.json
index 1b8147c0bb..c8824fd188 100644
--- a/apps/store/public/locales/en/purchase-form.json
+++ b/apps/store/public/locales/en/purchase-form.json
@@ -161,6 +161,8 @@
"SE_DOG_BASIC_DESCRIPTION": "Veterinary care amount 30,000 SEK",
"SE_DOG_PREMIUM_DESCRIPTION": "Veterinary care amount 160,000 SEK",
"SE_DOG_STANDARD_DESCRIPTION": "Veterinary care amount 60,000 SEK",
+ "SSN_SECTION_SUBTITLE": "Get a personalized quote in just two minutes",
+ "SSN_SECTION_TITLE": "Customize your insurance",
"START_DATE_FIELD_LABEL": "Start date",
"SUBMIT_LABEL_FINISH": "Calculate price",
"SUBMIT_LABEL_PROCEED": "Next step",
diff --git a/apps/store/public/locales/sv-se/purchase-form.json b/apps/store/public/locales/sv-se/purchase-form.json
index dc922a2438..61dfd38459 100644
--- a/apps/store/public/locales/sv-se/purchase-form.json
+++ b/apps/store/public/locales/sv-se/purchase-form.json
@@ -161,6 +161,8 @@
"SE_DOG_BASIC_DESCRIPTION": "Veterinärvårdsbelopp 30 000 kr",
"SE_DOG_PREMIUM_DESCRIPTION": "Veterinärvårdsbelopp 160 000 kr",
"SE_DOG_STANDARD_DESCRIPTION": "Veterinärvårdsbelopp 60 000 kr",
+ "SSN_SECTION_SUBTITLE": "Få en personlig offert på bara två minuter",
+ "SSN_SECTION_TITLE": "Skräddarsy din försäkring",
"START_DATE_FIELD_LABEL": "Startdatum",
"SUBMIT_LABEL_FINISH": "Beräkna pris",
"SUBMIT_LABEL_PROCEED": "Nästa steg",
diff --git a/apps/store/src/components/PriceCalculator/SsnSeSection.tsx b/apps/store/src/components/PriceCalculator/SsnSeSection.tsx
index 767a5edabd..61a1c1d96b 100644
--- a/apps/store/src/components/PriceCalculator/SsnSeSection.tsx
+++ b/apps/store/src/components/PriceCalculator/SsnSeSection.tsx
@@ -1,8 +1,9 @@
import { datadogLogs } from '@datadog/browser-logs'
+import clsx from 'clsx'
import { useAtomValue, useSetAtom } from 'jotai'
import { useTranslation } from 'next-i18next'
import { type FormEventHandler, memo } from 'react'
-import { Button, Space } from 'ui'
+import { Button, yStack } from 'ui'
import { PersonalNumberField } from '@/components/PersonalNumberField/PersonalNumberField'
import {
activeFormSectionIdAtom,
@@ -15,7 +16,7 @@ import { useErrorMessage } from '@/utils/useErrorMessage'
const SsnFieldName = 'ssn'
-export const SsnSeSection = memo(() => {
+export const SsnSeSection = memo(({ className }: { className?: string }) => {
const shopSessionId = useShopSessionId()!
const shopSessionCustomer = useAtomValue(shopSessionCustomerAtom)
const setActiveSectionId = useSetAtom(activeFormSectionIdAtom)
@@ -46,21 +47,22 @@ export const SsnSeSection = memo(() => {
const errorMessage = useErrorMessage(result.error)
return (
-
+
{sectionBody}
diff --git a/apps/store/src/features/priceCalculator/PriceCalculatorCmsPage.css.ts b/apps/store/src/features/priceCalculator/PriceCalculatorCmsPage.css.ts
index 536fe597a9..0a05f7ffcf 100644
--- a/apps/store/src/features/priceCalculator/PriceCalculatorCmsPage.css.ts
+++ b/apps/store/src/features/priceCalculator/PriceCalculatorCmsPage.css.ts
@@ -34,6 +34,12 @@ export const productHeroSection = style([
},
])
+export const priceCalculatorSection = style({
+ position: 'relative',
+ padding: tokens.space.md,
+ backgroundColor: tokens.colors.white,
+})
+
export const productHero = style({
marginBlock: 'auto',
gap: 'xs',
@@ -61,11 +67,6 @@ export const arrowBackWrapper = style({
padding: tokens.space.xs,
})
-export const priceCalculatorSection = style({
- padding: tokens.space.md,
- backgroundColor: tokens.colors.white,
-})
-
export const purchaseFormWrapper = style({
maxWidth: '23rem',
marginInline: 'auto',
diff --git a/apps/store/src/features/priceCalculator/priceTemplates/SE_ACCIDENT_V2.ts b/apps/store/src/features/priceCalculator/priceTemplates/SE_ACCIDENT_V2.ts
index d9e70c9ac5..4eff4fe554 100644
--- a/apps/store/src/features/priceCalculator/priceTemplates/SE_ACCIDENT_V2.ts
+++ b/apps/store/src/features/priceCalculator/priceTemplates/SE_ACCIDENT_V2.ts
@@ -1,7 +1,7 @@
import {
LAYOUT,
livingSpaceField,
- ssnSeSection,
+ ssnSeSectionV2,
postalCodeField,
streetAddressField,
emailField,
@@ -16,7 +16,7 @@ const template: TemplateV2 = {
name: 'SE_ACCIDENT_V2',
productName: 'SE_ACCIDENT',
sections: [
- ssnSeSection,
+ ssnSeSectionV2,
{
id: 'your-information',
title: { key: tKey('SECTION_TITLE_YOUR_INFORMATION') },
diff --git a/apps/store/src/features/priceCalculator/priceTemplates/SE_APARTMENT_BRF_V2.ts b/apps/store/src/features/priceCalculator/priceTemplates/SE_APARTMENT_BRF_V2.ts
index cd5a5895c4..6664b7c27d 100644
--- a/apps/store/src/features/priceCalculator/priceTemplates/SE_APARTMENT_BRF_V2.ts
+++ b/apps/store/src/features/priceCalculator/priceTemplates/SE_APARTMENT_BRF_V2.ts
@@ -1,9 +1,9 @@
-import { apartmentSectionV2, ssnSeSection } from '@/services/PriceCalculator/formFragments'
+import { apartmentSectionV2, ssnSeSectionV2 } from '@/services/PriceCalculator/formFragments'
import { type TemplateV2 } from '@/services/PriceCalculator/PriceCalculator.types'
const SE_APARTMENT_BRF_V2: TemplateV2 = {
name: 'SE_APARTMENT_BRF_V2',
productName: 'SE_APARTMENT_BRF',
- sections: [ssnSeSection, apartmentSectionV2],
+ sections: [ssnSeSectionV2, apartmentSectionV2],
}
export default SE_APARTMENT_BRF_V2
diff --git a/apps/store/src/features/priceCalculator/priceTemplates/SE_APARTMENT_RENT_V2.ts b/apps/store/src/features/priceCalculator/priceTemplates/SE_APARTMENT_RENT_V2.ts
index 5edaec2dce..7666422f88 100644
--- a/apps/store/src/features/priceCalculator/priceTemplates/SE_APARTMENT_RENT_V2.ts
+++ b/apps/store/src/features/priceCalculator/priceTemplates/SE_APARTMENT_RENT_V2.ts
@@ -1,9 +1,9 @@
-import { apartmentSectionV2, ssnSeSection } from '@/services/PriceCalculator/formFragments'
+import { apartmentSectionV2, ssnSeSectionV2 } from '@/services/PriceCalculator/formFragments'
import { type TemplateV2 } from '@/services/PriceCalculator/PriceCalculator.types'
const SE_APARTMENT_RENT_V2: TemplateV2 = {
name: 'SE_APARTMENT_RENT_V2',
productName: 'SE_APARTMENT_RENT',
- sections: [ssnSeSection, apartmentSectionV2],
+ sections: [ssnSeSectionV2, apartmentSectionV2],
}
export default SE_APARTMENT_RENT_V2
diff --git a/apps/store/src/features/priceCalculator/priceTemplates/SE_APARTMENT_STUDENT_V2.ts b/apps/store/src/features/priceCalculator/priceTemplates/SE_APARTMENT_STUDENT_V2.ts
index 6f7a4b8cd2..8f331c5638 100644
--- a/apps/store/src/features/priceCalculator/priceTemplates/SE_APARTMENT_STUDENT_V2.ts
+++ b/apps/store/src/features/priceCalculator/priceTemplates/SE_APARTMENT_STUDENT_V2.ts
@@ -2,7 +2,7 @@ import {
apartmentSectionV2,
apartmentSubTypeField,
LAYOUT,
- ssnSeSection,
+ ssnSeSectionV2,
} from '@/services/PriceCalculator/formFragments'
import { type TemplateV2 } from '@/services/PriceCalculator/PriceCalculator.types'
@@ -10,7 +10,7 @@ const SE_APARTMENT_STUDENT_V2: TemplateV2 = {
name: 'SE_APARTMENT_STUDENT_V2',
productName: 'SE_APARTMENT_STUDENT',
sections: [
- ssnSeSection,
+ ssnSeSectionV2,
{
...apartmentSectionV2,
items: [
diff --git a/apps/store/src/features/priceCalculator/priceTemplates/SE_CAR_V2.ts b/apps/store/src/features/priceCalculator/priceTemplates/SE_CAR_V2.ts
index 2a42c83a68..195d240517 100644
--- a/apps/store/src/features/priceCalculator/priceTemplates/SE_CAR_V2.ts
+++ b/apps/store/src/features/priceCalculator/priceTemplates/SE_CAR_V2.ts
@@ -2,7 +2,7 @@ import {
carRegistrationNumberField,
LAYOUT,
mileageField,
- ssnSeSection,
+ ssnSeSectionV2,
yourAddressSectionV2,
} from '@/services/PriceCalculator/formFragments'
import { type TemplateV2 } from '@/services/PriceCalculator/PriceCalculator.types'
@@ -14,7 +14,7 @@ const SE_CAR_V2: TemplateV2 = {
name: 'SE_CAR_V2',
productName: 'SE_CAR',
sections: [
- ssnSeSection,
+ ssnSeSectionV2,
{
id: 'your-car',
title: { key: tKey('SECTION_TITLE_YOUR_CAR') },
diff --git a/apps/store/src/features/priceCalculator/priceTemplates/SE_HOUSE_V2.ts b/apps/store/src/features/priceCalculator/priceTemplates/SE_HOUSE_V2.ts
index c9b91fb7b5..ba4b8c97ca 100644
--- a/apps/store/src/features/priceCalculator/priceTemplates/SE_HOUSE_V2.ts
+++ b/apps/store/src/features/priceCalculator/priceTemplates/SE_HOUSE_V2.ts
@@ -5,7 +5,7 @@ import {
LAYOUT,
livingSpaceField,
postalCodeField,
- ssnSeSection,
+ ssnSeSectionV2,
streetAddressField,
useRegistrationAddressField,
} from '@/services/PriceCalculator/formFragments'
@@ -16,7 +16,7 @@ const SE_HOUSE_V2: TemplateV2 = {
name: 'SE_HOUSE_V2',
productName: 'SE_HOUSE',
sections: [
- ssnSeSection,
+ ssnSeSectionV2,
{
id: 'your-home',
title: { key: tKey('SECTION_TITLE_YOUR_HOME') },
diff --git a/apps/store/src/features/priceCalculator/priceTemplates/SE_PET_CAT_V2.ts b/apps/store/src/features/priceCalculator/priceTemplates/SE_PET_CAT_V2.ts
index c9083701a7..aa25832a50 100644
--- a/apps/store/src/features/priceCalculator/priceTemplates/SE_PET_CAT_V2.ts
+++ b/apps/store/src/features/priceCalculator/priceTemplates/SE_PET_CAT_V2.ts
@@ -2,7 +2,7 @@ import {
LAYOUT,
petBirthDate,
petNameField,
- ssnSeSection,
+ ssnSeSectionV2,
yourAddressSectionWithLivingSpaceV2,
} from '@/services/PriceCalculator/formFragments'
import type { TemplateV2 } from '@/services/PriceCalculator/PriceCalculator.types'
@@ -14,7 +14,7 @@ const template: TemplateV2 = {
name: 'SE_PET_CAT_V2',
productName: 'SE_PET_CAT',
sections: [
- ssnSeSection,
+ ssnSeSectionV2,
{
id: 'your-cat',
title: { key: tKey('SECTION_TITLE_YOUR_CAT') },
diff --git a/apps/store/src/features/priceCalculator/priceTemplates/SE_PET_DOG_V2.ts b/apps/store/src/features/priceCalculator/priceTemplates/SE_PET_DOG_V2.ts
index f04c58ca2c..a6146fbc84 100644
--- a/apps/store/src/features/priceCalculator/priceTemplates/SE_PET_DOG_V2.ts
+++ b/apps/store/src/features/priceCalculator/priceTemplates/SE_PET_DOG_V2.ts
@@ -2,7 +2,7 @@ import {
LAYOUT,
petBirthDate,
petNameField,
- ssnSeSection,
+ ssnSeSectionV2,
yourAddressSectionWithLivingSpaceV2,
} from '@/services/PriceCalculator/formFragments'
import type { TemplateV2 } from '@/services/PriceCalculator/PriceCalculator.types'
@@ -14,7 +14,7 @@ const template: TemplateV2 = {
name: 'SE_PET_DOG_V2',
productName: 'SE_PET_DOG',
sections: [
- ssnSeSection,
+ ssnSeSectionV2,
{
id: 'your-dog',
title: { key: tKey('SECTION_TITLE_YOUR_DOG') },
diff --git a/apps/store/src/services/PriceCalculator/formFragments.ts b/apps/store/src/services/PriceCalculator/formFragments.ts
index 789578a5a9..892b349bb4 100644
--- a/apps/store/src/services/PriceCalculator/formFragments.ts
+++ b/apps/store/src/services/PriceCalculator/formFragments.ts
@@ -123,6 +123,23 @@ export const ssnSeSection: TemplateSection = {
},
}
+export const ssnSeSectionV2: TemplateSection = {
+ id: 'ssn-se',
+ title: { key: tKey('SSN_SECTION_TITLE') },
+ subtitle: { key: tKey('SSN_SECTION_SUBTITLE') },
+ // TODO: Ignored, remove or remodel
+ submitLabel: { key: tKey('SUBMIT_LABEL_PROCEED') },
+ items: [
+ {
+ field: ssnSeField,
+ layout: LAYOUT.FULL_WIDTH,
+ },
+ ],
+ preview: {
+ fieldName: ssnSeField.name,
+ },
+}
+
export const yourApartmentSection: TemplateSection = {
id: 'your-home',
title: { key: tKey('SECTION_TITLE_YOUR_HOME') },