From 77fa7a57de05e5dcdd57894f53ae1b9ebe38f0fd Mon Sep 17 00:00:00 2001 From: "Guilherme S. Popolin" Date: Thu, 19 Sep 2024 08:34:32 +0200 Subject: [PATCH] styles(price-calculator-ssn-section): changed title and subtitle --- .../public/locales/en/purchase-form.json | 2 ++ .../public/locales/sv-se/purchase-form.json | 2 ++ .../PriceCalculator/SsnSeSection.tsx | 36 ++++++++++--------- .../priceCalculator/InsuranceDataForm.tsx | 10 ++++-- .../PriceCalculatorCmsPage.css.ts | 11 +++--- .../priceTemplates/SE_ACCIDENT_V2.ts | 4 +-- .../priceTemplates/SE_APARTMENT_BRF_V2.ts | 4 +-- .../priceTemplates/SE_APARTMENT_RENT_V2.ts | 4 +-- .../priceTemplates/SE_APARTMENT_STUDENT_V2.ts | 4 +-- .../priceTemplates/SE_CAR_V2.ts | 4 +-- .../priceTemplates/SE_HOUSE_V2.ts | 4 +-- .../priceTemplates/SE_PET_CAT_V2.ts | 4 +-- .../priceTemplates/SE_PET_DOG_V2.ts | 4 +-- .../services/PriceCalculator/formFragments.ts | 17 +++++++++ 14 files changed, 70 insertions(+), 40 deletions(-) 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 ( -
- - - - + + + ) }) diff --git a/apps/store/src/features/priceCalculator/InsuranceDataForm.tsx b/apps/store/src/features/priceCalculator/InsuranceDataForm.tsx index 526dd72f51..7921e9e47b 100644 --- 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 = + sectionStyle = { + position: 'absolute', + top: '50%', + transform: 'translateY(-50%)', + maxWidth: '23rem', + } + sectionBody = } else { sectionStyle = { marginTop: '3.75rem' } const isLast = index === form.sections.length - 1 @@ -78,7 +84,7 @@ export function InsuranceDataForm() { ) } 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') },