feat: refactor Pricing component to utilize PricingData type and streamline pricing logic
This commit is contained in:
parent
6a20a7fb36
commit
9e120379ed
2 changed files with 48 additions and 44 deletions
|
|
@ -96,7 +96,7 @@ export const PricingChoice = () => {
|
|||
);
|
||||
};
|
||||
|
||||
type PricingData = { downPayment: number; secondPayment: number }[];
|
||||
export type PricingData = { downPayment: number; secondPayment: number }[];
|
||||
|
||||
export const PricingComponent = ({
|
||||
pricingData,
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ import { IconMatrix } from "~/components/IconComponents";
|
|||
import InformationBubble from "~/components/InformationBubble";
|
||||
import { LoadingPage } from "~/components/loading";
|
||||
import { MappaDialogFullscreen } from "~/components/MapDialog";
|
||||
import { PricingComponent } from "~/components/prezzi";
|
||||
import { PricingComponent, type PricingData } from "~/components/prezzi";
|
||||
import {
|
||||
Accordion,
|
||||
AccordionContent,
|
||||
|
|
@ -262,44 +262,58 @@ const Pricing = ({ isDesktop }: { isDesktop: boolean }) => {
|
|||
if (isLoading) return <LoadingPage />;
|
||||
if (!prezziario) return null;
|
||||
|
||||
const opzioniT = [
|
||||
t.pricing_cmp.breve_option1,
|
||||
t.pricing_cmp.breve_option2,
|
||||
t.pricing_cmp.breve_option3,
|
||||
t.pricing_cmp.breve_option4,
|
||||
t.pricing_cmp.breve_option5,
|
||||
];
|
||||
const opzioniS = [
|
||||
t.pricing_cmp.stabile_option1,
|
||||
t.pricing_cmp.stabile_option2,
|
||||
t.pricing_cmp.stabile_option3,
|
||||
];
|
||||
|
||||
const cta =
|
||||
tipologia === TipologiaPosizioneEnum.Transitorio
|
||||
? t.pricing_cmp.cta_breve
|
||||
: t.pricing_cmp.cta_stabile;
|
||||
const opzioni =
|
||||
tipologia === TipologiaPosizioneEnum.Transitorio
|
||||
? [
|
||||
t.pricing_cmp.breve_option1,
|
||||
t.pricing_cmp.breve_option2,
|
||||
t.pricing_cmp.breve_option3,
|
||||
t.pricing_cmp.breve_option4,
|
||||
t.pricing_cmp.breve_option5,
|
||||
]
|
||||
: [
|
||||
t.pricing_cmp.stabile_option1,
|
||||
t.pricing_cmp.stabile_option2,
|
||||
t.pricing_cmp.stabile_option3,
|
||||
];
|
||||
|
||||
const style =
|
||||
tipologia === TipologiaPosizioneEnum.Transitorio
|
||||
? "border-transitorio bg-transitorio"
|
||||
: "border-stabile bg-stabile";
|
||||
|
||||
const pricing = prezziario.saldi.map((s) => ({
|
||||
downPayment: prezziario.acconto.prezzo_cent / 100,
|
||||
secondPayment: s.prezzo_cent / 100,
|
||||
}));
|
||||
|
||||
//se stabile, mostra il prezzo basato sul canone in default
|
||||
const defaultValue =
|
||||
tipologia === TipologiaPosizioneEnum.Stabile
|
||||
? prezzo > 70000
|
||||
? 2
|
||||
: prezzo > 50000
|
||||
? 1
|
||||
: 0
|
||||
: undefined;
|
||||
let opzioni: string[] = [];
|
||||
let pricingData: PricingData = [];
|
||||
|
||||
if (tipologia === TipologiaPosizioneEnum.Stabile) {
|
||||
//se stabile, mostra il prezzo basato sul canone in default
|
||||
const idx = prezzo > 70000 ? 2 : prezzo > 50000 ? 1 : 0;
|
||||
const opzione = opzioniS[idx];
|
||||
const pricingS = pricing[idx];
|
||||
if (opzione && pricingS) {
|
||||
opzioni = [opzione];
|
||||
pricingData = [pricingS];
|
||||
} else {
|
||||
opzioni = opzioniS;
|
||||
pricingData = pricing;
|
||||
}
|
||||
} else {
|
||||
opzioni = opzioniT;
|
||||
pricingData = pricing;
|
||||
}
|
||||
|
||||
const style =
|
||||
tipologia === TipologiaPosizioneEnum.Transitorio
|
||||
? "border-transitorio bg-transitorio"
|
||||
: "border-stabile bg-stabile";
|
||||
|
||||
const title =
|
||||
tipologia === TipologiaPosizioneEnum.Transitorio
|
||||
? t.prezzi.titolo_transitori
|
||||
: t.prezzi.titolo_stabile;
|
||||
|
||||
if (isDesktop) {
|
||||
return (
|
||||
|
|
@ -309,16 +323,11 @@ const Pricing = ({ isDesktop }: { isDesktop: boolean }) => {
|
|||
"max-w-2xl **:data-[role=wrapper]:flex-wrap **:data-[role=amount]:text-2xl lg:**:data-[role=wrapper]:flex-nowrap xl:**:data-[role=amount]:text-3xl sm:[&_#contratto-link]:h-8 xl:[&_#contratto-link]:h-9",
|
||||
)}
|
||||
cta={cta}
|
||||
defaultValue={defaultValue}
|
||||
opzioni={opzioni}
|
||||
pricingData={pricing}
|
||||
pricingData={pricingData}
|
||||
statico={true}
|
||||
tipo={tipologia}
|
||||
title={
|
||||
tipologia === TipologiaPosizioneEnum.Transitorio
|
||||
? t.prezzi.titolo_transitori
|
||||
: t.prezzi.titolo_stabile
|
||||
}
|
||||
title={title}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
@ -344,16 +353,11 @@ const Pricing = ({ isDesktop }: { isDesktop: boolean }) => {
|
|||
<PricingComponent
|
||||
className={cn(style, "max-w-full")}
|
||||
cta={cta}
|
||||
defaultValue={defaultValue}
|
||||
opzioni={opzioni}
|
||||
pricingData={pricing}
|
||||
pricingData={pricingData}
|
||||
statico={true}
|
||||
tipo={tipologia}
|
||||
title={
|
||||
tipologia === TipologiaPosizioneEnum.Transitorio
|
||||
? t.prezzi.titolo_transitori
|
||||
: t.prezzi.titolo_stabile
|
||||
}
|
||||
title={title}
|
||||
/>
|
||||
</CollapsibleContent>
|
||||
</Collapsible>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue