const skuToDisplayPricesFor = product.sku;
const byTermForCurrentSku = additionalPricing[`${skuToDisplayPricesFor} SKU`];
const terms = Object.keys(byTermForCurrentSku).sort();
return (
<div className="mt-10">
<h2 className="mb-2 border-b text-lg font-medium">
{formatMessage(messages.additionalPurchasingOptions)}
</h2>
<div className="flex w-full flex-col space-y-4">
{terms.map((term, i) => {
const priceInfoForTerm = byTermForCurrentSku[term];
return (
<ul key={i} className="flex w-full flex-col space-y-4">
{priceInfoForTerm.sort(sortPriceInfo).map((pi, j) => {
const { recurringPrice } = pi;
const selected = isEqualWith(pi, priceInfo, /* ... */);
return (
<TermSelectButton
key={j}
onClick={() => setPriceInfo(pi)}
selected={selected}
>
{/* ... */}
{recurringPrice && (
<Financing
priceInfo={pi}
recurringPrice={recurringPrice}
/>
)}
{!recurringPrice && <PayInFull priceInfo={pi} />}
</TermSelectButton>
);
})}
</ul>
);
})}
</div>
</div>
);
