Merge pull request #4752 from HedvigInsurance/GEN-2516/styles/ssn-sec…

…tion GEN-2516 - styles(price-calculator-ssn-section): changed title and subtitle
HedvigInsurance · Sep 19, 2024 · 7b88b47 · 7b88b47
2 parents 0323db5 + 77fa7a5
commit 7b88b47
Show file tree

Hide file tree

Showing 14 changed files with 70 additions and 40 deletions.
diff --git 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
@@ -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
@@ -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 (
-    <form onSubmit={handleSubmit}>
-      <Space y={errorMessage ? 1 : 0.25}>
-        <PersonalNumberField
-          label={t('FIELD_SSN_SE_LABEL')}
-          name={SsnFieldName}
-          defaultValue={shopSessionCustomer?.ssn ?? ''}
-          required={true}
-          warning={!!errorMessage}
-          message={errorMessage}
-          onValidValueEntered={handleValidValueEntered}
-        />
-        <Button type="submit" loading={result.loading} fullWidth={true}>
-          {t('SUBMIT_LABEL_PROCEED')}
-        </Button>
-      </Space>
+    <form
+      className={clsx(yStack({ gap: errorMessage ? 'md' : 'xxs' }), className)}
+      onSubmit={handleSubmit}
+    >
+      <PersonalNumberField
+        label={t('FIELD_SSN_SE_LABEL')}
+        name={SsnFieldName}
+        defaultValue={shopSessionCustomer?.ssn ?? ''}
+        required={true}
+        warning={!!errorMessage}
+        message={errorMessage}
+        onValidValueEntered={handleValidValueEntered}
+      />
+      <Button type="submit" loading={result.loading} fullWidth={true}>
+        {t('SUBMIT_LABEL_PROCEED')}
+      </Button>
     </form>
   )
 })

diff --git a/apps/store/src/features/priceCalculator/InsuranceDataForm.tsx b/apps/store/src/features/priceCalculator/InsuranceDataForm.tsx
@@ -57,7 +57,13 @@ export function InsuranceDataForm() {
     let sectionBody: ReactNode
     let sectionStyle = {}
     if (section.id === SSN_SE_SECTION_ID) {
-      sectionBody = <SsnSeSection />
+      sectionStyle = {
+        position: 'absolute',
+        top: '50%',
+        transform: 'translateY(-50%)',
+        maxWidth: '23rem',
+      }
+      sectionBody = <SsnSeSection className={yStack({ gap: 'lg' })} />
     } else {
       sectionStyle = { marginTop: '3.75rem' }
       const isLast = index === form.sections.length - 1
@@ -78,7 +84,7 @@ export function InsuranceDataForm() {
       )
     }
     return (
-      <div key={section.id} className={yStack({ gap: 'xl' })} style={sectionStyle}>
+      <div key={section.id} className={yStack({ gap: 'lg' })} style={sectionStyle}>
         <SectionTitle section={section} />
         {sectionBody}
       </div>

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -2,15 +2,15 @@ import {
   apartmentSectionV2,
   apartmentSubTypeField,
   LAYOUT,
-  ssnSeSection,
+  ssnSeSectionV2,
 } from '@/services/PriceCalculator/formFragments'
 import { type TemplateV2 } from '@/services/PriceCalculator/PriceCalculator.types'
 
 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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') },