diff --git a/src/flows/CostCalculator/EstimationResults/EstimationResults.tsx b/src/flows/CostCalculator/EstimationResults/EstimationResults.tsx index ff404599..f4061b32 100644 --- a/src/flows/CostCalculator/EstimationResults/EstimationResults.tsx +++ b/src/flows/CostCalculator/EstimationResults/EstimationResults.tsx @@ -305,7 +305,6 @@ interface BreakdownItem { employerAmount?: string; description?: string; zendeskId?: string; - zendeskURL?: string; isCollapsible?: boolean; children?: BreakdownItem[]; } @@ -353,7 +352,7 @@ function BreakdownListItem({ content={ <> {item.tooltip}{' '} - {item.zendeskId && item.zendeskURL && ( + {item.zendeskId && ( Learn more @@ -457,6 +456,181 @@ function BreakdownList({ ); } +const useEstimationResults = (estimation: CostCalculatorEmployment) => { + const isMultipleCurrency = + estimation.employer_currency_costs.currency.code !== + estimation.regional_currency_costs.currency.code; + + const formatAmounts = (regionalAmount: number, employerAmount: number) => { + if (isMultipleCurrency) { + return [ + formatCurrency( + regionalAmount, + estimation.regional_currency_costs.currency.symbol, + ), + formatCurrency( + employerAmount, + estimation.employer_currency_costs.currency.symbol, + ), + ]; + } + return formatCurrency( + regionalAmount, + estimation.regional_currency_costs.currency.symbol, + ); + }; + + const createBreakdownItems = ( + items: + | Array<{ + name: string; + amount: number; + zendesk_article_id?: string | null; + description?: string | null; + }> + | undefined, + ): BreakdownItem[] => { + return ( + items?.map((item) => ({ + label: item.name, + regionalAmount: formatCurrency( + item.amount, + estimation.regional_currency_costs.currency.symbol, + ), + employerAmount: formatCurrency( + item.amount, + estimation.employer_currency_costs.currency.symbol, + ), + zendeskId: item.zendesk_article_id || undefined, + tooltip: item.description || undefined, + })) || [] + ); + }; + + const monthlyData = { + totalAmounts: formatAmounts( + estimation.regional_currency_costs.monthly_total, + estimation.employer_currency_costs.monthly_total, + ), + breakdownItems: [ + { + label: 'Gross monthly salary', + regionalAmount: formatCurrency( + estimation.regional_currency_costs.monthly_gross_salary, + estimation.regional_currency_costs.currency.symbol, + ), + employerAmount: formatCurrency( + estimation.employer_currency_costs.monthly_gross_salary, + estimation.employer_currency_costs.currency.symbol, + ), + zendeskId: zendeskArticles.extraPayments.toString(), + tooltip: + 'This country respects extra payments on top of the gross salary.', + }, + { + label: 'Mandatory employer costs', + regionalAmount: formatCurrency( + estimation.regional_currency_costs.monthly_contributions_total, + estimation.regional_currency_costs.currency.symbol, + ), + employerAmount: formatCurrency( + estimation.employer_currency_costs.monthly_contributions_total, + estimation.employer_currency_costs.currency.symbol, + ), + children: createBreakdownItems( + estimation.employer_currency_costs.monthly_contributions_breakdown, + ), + }, + { + label: 'Core benefits', + regionalAmount: formatCurrency( + estimation.regional_currency_costs.monthly_benefits_total, + estimation.regional_currency_costs.currency.symbol, + ), + employerAmount: formatCurrency( + estimation.employer_currency_costs.monthly_benefits_total, + estimation.employer_currency_costs.currency.symbol, + ), + children: createBreakdownItems( + estimation.employer_currency_costs.monthly_benefits_breakdown, + ), + }, + ] as BreakdownItem[], + }; + + const annualData = { + totalAmounts: formatAmounts( + estimation.regional_currency_costs.annual_total, + estimation.employer_currency_costs.annual_total, + ), + breakdownItems: [ + { + label: 'Annual gross salary', + regionalAmount: formatCurrency( + estimation.regional_currency_costs.annual_gross_salary, + estimation.regional_currency_costs.currency.symbol, + ), + employerAmount: formatCurrency( + estimation.employer_currency_costs.annual_gross_salary, + estimation.employer_currency_costs.currency.symbol, + ), + }, + { + label: 'Mandatory employer costs', + regionalAmount: formatCurrency( + estimation.regional_currency_costs.annual_contributions_total, + estimation.regional_currency_costs.currency.symbol, + ), + employerAmount: formatCurrency( + estimation.employer_currency_costs.annual_contributions_total, + estimation.employer_currency_costs.currency.symbol, + ), + children: createBreakdownItems( + estimation.employer_currency_costs.annual_contributions_breakdown, + ), + }, + { + label: 'Core benefits', + regionalAmount: formatCurrency( + estimation.regional_currency_costs.annual_benefits_total, + estimation.regional_currency_costs.currency.symbol, + ), + employerAmount: formatCurrency( + estimation.employer_currency_costs.annual_benefits_total, + estimation.employer_currency_costs.currency.symbol, + ), + children: createBreakdownItems( + estimation.employer_currency_costs.annual_benefits_breakdown, + ), + }, + { + label: 'Extra statutory payments', + regionalAmount: formatCurrency( + estimation.regional_currency_costs.extra_statutory_payments_total, + estimation.regional_currency_costs.currency.symbol, + ), + employerAmount: formatCurrency( + estimation.employer_currency_costs.extra_statutory_payments_total, + estimation.employer_currency_costs.currency.symbol, + ), + children: createBreakdownItems( + estimation.employer_currency_costs.extra_statutory_payments_breakdown, + ), + }, + ] as BreakdownItem[], + }; + + return { + isMultipleCurrency, + country: estimation.country, + monthlyData, + annualData, + minimumOnboardingTime: estimation.minimum_onboarding_time, + countryBenefitsUrl: estimation.country_benefits_details_url as string, + countryGuideUrl: estimation.country_guide_url as string, + }; +}; + type EstimationResultsProps = { estimation: CostCalculatorEmployment; title: string; @@ -470,264 +644,64 @@ export const EstimationResults = ({ onDelete, onExportPdf, }: EstimationResultsProps) => { - const isMultipleCurrency = - estimation.employer_currency_costs.currency.code !== - estimation.regional_currency_costs.currency.code; + const { + isMultipleCurrency, + country, + monthlyData, + annualData, + minimumOnboardingTime, + countryBenefitsUrl, + countryGuideUrl, + } = useEstimationResults(estimation); return ( -
+
-
+
({ - label: item.name, - regionalAmount: formatCurrency( - item.amount, - estimation.regional_currency_costs.currency.symbol, - ), - employerAmount: formatCurrency( - item.amount, - estimation.employer_currency_costs.currency.symbol, - ), - zendeskId: item.zendesk_article_id || undefined, - zendeskURL: item.zendesk_article_url || undefined, - tooltip: item.description || undefined, - }), - ) || [], - }, - { - label: 'Core benefits', - regionalAmount: formatCurrency( - estimation.regional_currency_costs.monthly_benefits_total, - estimation.regional_currency_costs.currency.symbol, - ), - employerAmount: formatCurrency( - estimation.employer_currency_costs.monthly_benefits_total, - estimation.employer_currency_costs.currency.symbol, - ), - children: - estimation.employer_currency_costs.monthly_benefits_breakdown?.map( - (item) => ({ - label: item.name, - regionalAmount: formatCurrency( - item.amount, - estimation.regional_currency_costs.currency.symbol, - ), - employerAmount: formatCurrency( - item.amount, - estimation.employer_currency_costs.currency.symbol, - ), - zendeskId: item.zendesk_article_id || undefined, - zendeskURL: item.zendesk_article_url || undefined, - tooltip: item.description || undefined, - }), - ) || [], - }, - ]} + items={monthlyData.breakdownItems} isMultipleCurrency={isMultipleCurrency} />
-
+
({ - label: item.name, - regionalAmount: formatCurrency( - item.amount, - estimation.regional_currency_costs.currency.symbol, - ), - employerAmount: formatCurrency( - item.amount, - estimation.employer_currency_costs.currency.symbol, - ), - zendeskId: item.zendesk_article_id || undefined, - zendeskURL: item.zendesk_article_url || undefined, - tooltip: item.description || undefined, - }), - ) || [], - }, - { - label: 'Core benefits', - regionalAmount: formatCurrency( - estimation.regional_currency_costs.annual_benefits_total, - estimation.regional_currency_costs.currency.symbol, - ), - employerAmount: formatCurrency( - estimation.employer_currency_costs.annual_benefits_total, - estimation.employer_currency_costs.currency.symbol, - ), - children: - estimation.employer_currency_costs.annual_benefits_breakdown?.map( - (item) => ({ - label: item.name, - regionalAmount: formatCurrency( - item.amount, - estimation.regional_currency_costs.currency.symbol, - ), - employerAmount: formatCurrency( - item.amount, - estimation.employer_currency_costs.currency.symbol, - ), - zendeskId: item.zendesk_article_id || undefined, - zendeskURL: item.zendesk_article_url || undefined, - tooltip: item.description || undefined, - }), - ) || [], - }, - { - label: 'Extra statutory payments', - regionalAmount: formatCurrency( - estimation.regional_currency_costs - .extra_statutory_payments_total, - estimation.regional_currency_costs.currency.symbol, - ), - employerAmount: formatCurrency( - estimation.employer_currency_costs - .extra_statutory_payments_total, - estimation.employer_currency_costs.currency.symbol, - ), - children: - estimation.employer_currency_costs.extra_statutory_payments_breakdown?.map( - (item) => ({ - label: item.name, - regionalAmount: formatCurrency( - item.amount, - estimation.regional_currency_costs.currency.symbol, - ), - employerAmount: formatCurrency( - item.amount, - estimation.employer_currency_costs.currency.symbol, - ), - zendeskId: item.zendesk_article_id || undefined, - zendeskURL: item.zendesk_article_url || undefined, - tooltip: item.description || undefined, - }), - ) || [], - }, - ]} + items={annualData.breakdownItems} isMultipleCurrency={isMultipleCurrency} />
-
- +
+
); diff --git a/src/styles/global.css b/src/styles/global.css index faccd7cb..d62c3816 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -89,7 +89,7 @@ box-shadow: 0px 1px 2px 0px hsla(0, 0%, 0%, 0.051); } - .RemoteFlows__Estimation__Separator { + .RemoteFlows__Separator { @apply border-b border-[#E4E4E7] pb-6; }