refactor: enforce frontend view model boundaries

src/pages/bond/ui/BondPage/BondPage.view.tsx

@@ -35,12 +35,113 @@ import type { BondPageVm } from "./BondPage.vm";
 import classes from "./BondPage.module.css";
 
 type BondPageViewProps = { vm: BondPageVm };
+
 const BondPageView: FC<BondPageViewProps> = (props) => {
 	const { vm } = props;
 	const { t } = useTranslation();
 	const bond = vm.bond;
 	if (!bond) return;
-	const maturity = bond.maturityDate ? formatDate(bond.maturityDate) : t("bond.unknown");
+
+	const maturity = bond.maturityDate
+		? formatDate(bond.maturityDate)
+		: t("bond.unknown");
+
+	const maturityDate = bond.perpetual ? t("bond.perpetual") : maturity;
+
+	const callDate = bond.callDate
+		? formatDate(bond.callDate)
+		: t("bond.unknown");
+
+	const couponFrequency
+		= bond.couponQuantityPerYear == undefined
+			? t("bond.unknown")
+			: String(bond.couponQuantityPerYear);
+
+	const lotSize = bond.lot == undefined ? t("bond.unknown") : String(bond.lot);
+
+	let quoteContent;
+
+	if (vm.quoteState.loading) {
+		quoteContent = (
+			<LoadingSkeleton label={t("stock.loadingPrice")}>
+				<Skeleton h={55} mt="lg" w="50%" />
+			</LoadingSkeleton>
+		);
+	}
+	else {
+		quoteContent = (
+			<Stack aria-live="polite" gap="xs" mt="lg">
+				<Text c="dimmed" size="sm">
+					{t("bond.percentOfNominal")}
+				</Text>
+
+				<Text className={classes.price}>
+					{vm.quote?.pricePercent == undefined
+						? t("bond.unknown")
+						: `${formatDecimal(vm.quote.pricePercent)} %`}
+				</Text>
+
+				{vm.quote?.changePercentagePoints != undefined && (
+					<Text fw={600}>
+						{formatDecimal(vm.quote.changePercentagePoints)}{" "}
+						{t("bond.percentagePoints")}
+					</Text>
+				)}
+
+				<Text c="dimmed" size="xs">
+					{vm.quote?.previousCloseDate
+						? t("stock.changeBase", {
+								date: formatDate(vm.quote.previousCloseDate),
+							})
+						: t("stock.noComparison")}
+				</Text>
+
+				<Group gap="xl" my="sm">
+					<Metric
+						label={t("bond.cleanPrice")}
+						value={formatMoney(vm.quote?.cleanPrice)}
+					/>
+
+					<Metric
+						label={t("bond.aci")}
+						value={formatMoney(vm.quote?.aci)}
+					/>
+
+					<Metric
+						label={t("bond.dirtyPrice")}
+						value={formatMoney(vm.quote?.dirtyPrice)}
+					/>
+				</Group>
+
+				<Text c="dimmed" size="xs">
+					{t("bond.indicativePrice")}
+				</Text>
+
+				<Group>
+					<Badge color="gray" variant="light">
+						{t(`stock.trading.${vm.quote?.tradingStatus}`, {
+							defaultValue: t("stock.trading.unknown"),
+						})}
+					</Badge>
+
+					{!!vm.quote?.priceAt && (
+						<Text c="dimmed" size="xs">
+							{t("stock.priceAt", {
+								date: formatSnapshotTime(vm.quote.priceAt),
+							})}
+						</Text>
+					)}
+				</Group>
+
+				{!!vm.quote?.unavailable.length && (
+					<Text c="dimmed" size="xs">
+						{t("stock.partialQuote")}
+					</Text>
+				)}
+			</Stack>
+		);
+	}
+
 	return (
 		<Stack className={classes.page} gap="lg">
 			<Paper className={classes.section} component="header" withBorder>
@@ -49,19 +150,18 @@ const BondPageView: FC<BondPageViewProps> = (props) => {
 						<Avatar alt="" radius="md" size={56} src={vm.logoSrc}>
 							{bond.name[0]}
 						</Avatar>
+
 						<div>
 							<Title order={1} size="h2">
 								{bond.name}
 							</Title>
+
 							<Text c="dimmed" size="sm">
-								{bond.ticker}
-								{" "}
-								·
-								{" "}
-								{bond.isin}
+								{bond.ticker} · {bond.isin}
 							</Text>
 						</div>
 					</div>
+
 					<Button
 						disabled={vm.refreshing}
 						onClick={vm.refresh}
@@ -70,150 +170,80 @@ const BondPageView: FC<BondPageViewProps> = (props) => {
 						{t("investment.refresh")}
 					</Button>
 				</Group>
+
 				<Group gap="xs" mt="md">
-					{!!(bond.floatingCoupon) && ((
+					{!!bond.floatingCoupon && (
 						<Badge variant="light">{t("bond.floatingCoupon")}</Badge>
-					))}
-					{!!(bond.amortization) && ((
+					)}
+
+					{!!bond.amortization && (
 						<Badge variant="light">{t("bond.amortization")}</Badge>
-					))}
-					{!!(bond.perpetual) && ((
+					)}
+
+					{!!bond.perpetual && (
 						<Badge variant="light">{t("bond.perpetual")}</Badge>
-					))}
-					{!!(bond.subordinated) && ((
+					)}
+
+					{!!bond.subordinated && (
 						<Badge color="orange" variant="light">
 							{t("bond.subordinated")}
 						</Badge>
-					))}
+					)}
 				</Group>
-				{!!(vm.refreshError || vm.bondState.error || vm.quoteState.error) && ((
+
+				{!!(vm.refreshError || vm.bondState.error || vm.quoteState.error) && (
 					<Alert aria-live="polite" color="orange" mt="md" role="status">
 						{t(vm.quote ? "accounts.refreshError" : "stock.sectionError")}
 					</Alert>
-				))}
-				{vm.quoteState.loading
-					? (
-							<LoadingSkeleton label={t("stock.loadingPrice")}>
-								<Skeleton h={55} mt="lg" w="50%" />
-							</LoadingSkeleton>
-						)
-					: (
-							<Stack aria-live="polite" gap="xs" mt="lg">
-								<Text c="dimmed" size="sm">
-									{t("bond.percentOfNominal")}
-								</Text>
-								<Text className={classes.price}>
-									{vm.quote?.pricePercent == undefined
-										? t("bond.unknown")
-										: `${formatDecimal(vm.quote.pricePercent)} %`}
-								</Text>
-								{vm.quote?.changePercentagePoints != undefined && ((
-									<Text fw={600}>
-										{formatDecimal(vm.quote.changePercentagePoints)}
-										{" "}
-										{t("bond.percentagePoints")}
-									</Text>
-								))}
-								<Text c="dimmed" size="xs">
-									{vm.quote?.previousCloseDate
-										? t("stock.changeBase", {
-												date: formatDate(vm.quote.previousCloseDate),
-											})
-										: t("stock.noComparison")}
-								</Text>
-								<Group gap="xl" my="sm">
-									<Metric
-										label={t("bond.cleanPrice")}
-										value={formatMoney(vm.quote?.cleanPrice)}
-									/>
-									<Metric
-										label={t("bond.aci")}
-										value={formatMoney(vm.quote?.aci)}
-									/>
-									<Metric
-										label={t("bond.dirtyPrice")}
-										value={formatMoney(vm.quote?.dirtyPrice)}
-									/>
-								</Group>
-								<Text c="dimmed" size="xs">
-									{t("bond.indicativePrice")}
-								</Text>
-								<Group>
-									<Badge color="gray" variant="light">
-										{t(`stock.trading.${vm.quote?.tradingStatus}`, {
-											defaultValue: t("stock.trading.unknown"),
-										})}
-									</Badge>
-									{!!(vm.quote?.priceAt) && ((
-										<Text c="dimmed" size="xs">
-											{t("stock.priceAt", {
-												date: formatSnapshotTime(vm.quote.priceAt),
-											})}
-										</Text>
-									))}
-								</Group>
-								{!!(vm.quote?.unavailable.length) && ((
-									<Text c="dimmed" size="xs">
-										{t("stock.partialQuote")}
-									</Text>
-								))}
-							</Stack>
-						)}
-				{!!(vm.quoteState.refreshing || vm.bondState.refreshing) && ((
+				)}
+
+				{quoteContent}
+
+				{!!(vm.quoteState.refreshing || vm.bondState.refreshing) && (
 					<Text c="dimmed" role="status" size="xs">
 						{t("accounts.refreshing")}
 					</Text>
-				))}
+				)}
+
 				<div className={classes.embeddedSection}>
 					<Title mb="md" order={2} size="h3">
 						{t("bond.terms")}
 					</Title>
+
 					<div className={classes.companyMetrics}>
 						<Metric
 							label={t("bond.nominal")}
 							value={formatMoney(bond.nominal)}
 						/>
+
 						<Metric
 							label={t("bond.initialNominal")}
 							value={formatMoney(bond.initialNominal)}
 						/>
-						<Metric
-							label={t("bond.maturity")}
-							value={
-								bond.perpetual
-									? t("bond.perpetual")
-									: maturity
-							}
-						/>
-						<Metric
-							label={t("bond.callDate")}
-							value={
-								bond.callDate ? formatDate(bond.callDate) : t("bond.unknown")
-							}
-						/>
-						<Metric
-							label={t("bond.couponFrequency")}
-							value={
-								bond.couponQuantityPerYear == undefined
-									? t("bond.unknown")
-									: String(bond.couponQuantityPerYear)
-							}
-						/>
-						<Metric
-							label={t("bond.lot")}
-							value={bond.lot == undefined ? t("bond.unknown") : String(bond.lot)}
-						/>
+
+						<Metric label={t("bond.maturity")} value={maturityDate} />
+
+						<Metric label={t("bond.callDate")} value={callDate} />
+
+						<Metric label={t("bond.couponFrequency")} value={couponFrequency} />
+
+						<Metric label={t("bond.lot")} value={lotSize} />
 					</div>
 				</div>
 			</Paper>
+
 			<BondMetrics vm={vm} />
+
 			<InstrumentChart priceUnit="percent" vm={vm} />
+
 			<InstrumentPosition
 				quantityLabel={t("bond.quantity")}
 				returnNote={t("bond.returnNote")}
 				vm={vm}
 			/>
+
 			<BondCoupons vm={vm} />
+
 			<InstrumentEvents
 				historyNote={t("bond.historyNote")}
 				incomeFilter="coupons"
@@ -228,55 +258,87 @@ const BondMetrics: FC<BondPageViewProps> = (props) => {
 	const { vm } = props;
 	const { t } = useTranslation();
 	const creditRating = vm.metrics?.creditRating;
-	let rating = t(vm.metrics?.unavailable.includes("rating") ? "bond.ratingUnavailable" : "bond.ratingMissing");
-	if (creditRating) rating = creditRating.status === "withdrawn" ? t("bond.ratingWithdrawn") : (creditRating.value ?? t("bond.unknown"));
+
+	let rating = t(
+		vm.metrics?.unavailable.includes("rating")
+			? "bond.ratingUnavailable"
+			: "bond.ratingMissing",
+	);
+
+	if (creditRating) {
+		rating
+			= creditRating.status === "withdrawn"
+				? t("bond.ratingWithdrawn")
+				: (creditRating.value ?? t("bond.unknown"));
+	}
+
+	const couponDate = vm.metrics?.couponDate
+		? formatDate(vm.metrics?.couponDate)
+		: t("bond.unknown");
+
+	const effectiveYield = vm.metrics?.effectiveYield
+		? `${formatDecimal(vm.metrics?.effectiveYield.value)} %`
+		: t("bond.unknown");
+
+	const couponYield
+		= vm.metrics?.couponYieldPercent == undefined
+			? t("bond.unknown")
+			: `${formatDecimal(vm.metrics?.couponYieldPercent)} %`;
+
+	let yieldContent;
+
+	if (vm.metrics?.effectiveYield) {
+		yieldContent = (
+			<Text c="dimmed" size="xs">
+				{t("bond.yieldSource", {
+					at: formatSnapshotTime(vm.metrics?.effectiveYield.tradeAt),
+					date: formatDate(vm.metrics?.effectiveYield.date),
+					price: formatDecimal(
+						vm.metrics?.effectiveYield.pricePercent,
+					),
+					target: t(
+						`bond.yieldTargets.${vm.metrics?.effectiveYield.dateType}`,
+						{ defaultValue: t("bond.yieldTargets.unknown") },
+					),
+				})}
+			</Text>
+		);
+	}
+	else {
+		yieldContent = (
+			<Text c="dimmed" size="xs">
+				{t("bond.yieldUnavailable")}
+			</Text>
+		);
+	}
+
 	return (
 		<InstrumentSection state={vm.metricsState} title={t("bond.metrics")}>
-			{!!(vm.metrics) && ((
+			{!!vm.metrics && (
 				<Stack gap="md">
 					<div className={classes.companyMetrics}>
-						<Metric
-							label={t("bond.creditRating")}
-							value={
-								rating
-							}
-						/>
+						<Metric label={t("bond.creditRating")} value={rating} />
+
 						<Metric
 							label={t("bond.couponAmount")}
 							value={formatMoney(vm.metrics.coupon)}
 						/>
+
 						<Metric
 							label={t("bond.couponType")}
 							value={t(`bond.couponTypes.${vm.metrics.couponType}`, {
 								defaultValue: t("bond.unknown"),
 							})}
 						/>
-						<Metric
-							label={t("bond.couponDate")}
-							value={
-								vm.metrics.couponDate
-									? formatDate(vm.metrics.couponDate)
-									: t("bond.unknown")
-							}
-						/>
-						<Metric
-							label={t("bond.effectiveYield")}
-							value={
-								vm.metrics.effectiveYield
-									? `${formatDecimal(vm.metrics.effectiveYield.value)} %`
-									: t("bond.unknown")
-							}
-						/>
-						<Metric
-							label={t("bond.couponYield")}
-							value={
-								vm.metrics.couponYieldPercent === null
-									? t("bond.unknown")
-									: `${formatDecimal(vm.metrics.couponYieldPercent)} %`
-							}
-						/>
+
+						<Metric label={t("bond.couponDate")} value={couponDate} />
+
+						<Metric label={t("bond.effectiveYield")} value={effectiveYield} />
+
+						<Metric label={t("bond.couponYield")} value={couponYield} />
 					</div>
-					{!!(vm.metrics.creditRating) && ((
+
+					{!!vm.metrics.creditRating && (
 						<Group gap="xs">
 							<Anchor
 								href={vm.metrics.creditRating.sourceUrl}
@@ -288,54 +350,40 @@ const BondMetrics: FC<BondPageViewProps> = (props) => {
 									date: formatDate(vm.metrics.creditRating.date),
 								})}
 							</Anchor>
+
 							<Text c="dimmed" size="xs">
 								{t("bond.ratingChecked", {
-									date: formatSnapshotTime(
-										vm.metrics.creditRating.observedAt,
-									),
+									date: formatSnapshotTime(vm.metrics.creditRating.observedAt),
 								})}
 							</Text>
 						</Group>
-					))}
+					)}
+
 					<Text c="dimmed" size="xs">
 						{t("bond.ratingCoverage")}
 					</Text>
-					{vm.metrics.effectiveYield
-						? (
-								<Text c="dimmed" size="xs">
-									{t("bond.yieldSource", {
-										at: formatSnapshotTime(vm.metrics.effectiveYield.tradeAt),
-										date: formatDate(vm.metrics.effectiveYield.date),
-										price: formatDecimal(vm.metrics.effectiveYield.pricePercent),
-										target: t(
-											`bond.yieldTargets.${vm.metrics.effectiveYield.dateType}`,
-											{ defaultValue: t("bond.yieldTargets.unknown") },
-										),
-									})}
-								</Text>
-							)
-						: (
-								<Text c="dimmed" size="xs">
-									{t("bond.yieldUnavailable")}
-								</Text>
-							)}
+
+					{yieldContent}
+
 					<Text c="dimmed" size="xs">
 						{t("bond.couponYieldNote")}
 					</Text>
-					{!!(vm.metrics.couponYieldPriceAt) && ((
+
+					{!!vm.metrics?.couponYieldPriceAt && (
 						<Text c="dimmed" size="xs">
 							{t("bond.couponYieldPriceAt", {
-								date: formatSnapshotTime(vm.metrics.couponYieldPriceAt),
+								date: formatSnapshotTime(vm.metrics?.couponYieldPriceAt),
 							})}
 						</Text>
-					))}
-					{vm.metrics.unavailable.length > 0 && ((
+					)}
+
+					{vm.metrics.unavailable.length > 0 && (
 						<Text c="dimmed" size="xs">
 							{t("bond.metricsPartial")}
 						</Text>
-					))}
+					)}
 				</Stack>
-			))}
+			)}
 		</InstrumentSection>
 	);
 };
@@ -343,18 +391,20 @@ const BondMetrics: FC<BondPageViewProps> = (props) => {
 const BondCoupons: FC<BondPageViewProps> = (props) => {
 	const { vm } = props;
 	const { t } = useTranslation();
+
 	return (
 		<InstrumentSection
 			state={vm.couponsState}
 			title={t("bond.upcomingCoupons")}
 		>
-			{!!(vm.coupons) && ((
+			{!!vm.coupons && (
 				<Stack gap="md">
-					{!!(vm.coupons.estimateUnavailable || vm.coupons.positionIsStale) && ((
+					{!!(vm.coupons.estimateUnavailable || vm.coupons.positionIsStale) && (
 						<Alert aria-live="polite" color="orange" role="status">
 							{t("stock.estimateUnavailable")}
 						</Alert>
-					))}
+					)}
+
 					{vm.upcoming.length > 0
 						? (
 								vm.upcoming.map(coupon => (
@@ -367,25 +417,30 @@ const BondCoupons: FC<BondPageViewProps> = (props) => {
 						: (
 								<Text c="dimmed">{t("bond.noCoupons")}</Text>
 							)}
+
 					<Text c="dimmed" size="xs">
 						{t("bond.couponWindow", {
 							from: formatDate(vm.coupons.from),
 							to: formatDate(vm.coupons.to),
 						})}
 					</Text>
+
 					<Text c="dimmed" size="xs">
 						{t("bond.couponNote")}
 					</Text>
-					{!!(vm.coupons.positionAt) && ((
+
+					{!!vm.coupons.positionAt && (
 						<Text c="dimmed" size="xs">
 							{t("stock.snapshotAt", {
 								date: formatSnapshotTime(vm.coupons.positionAt),
 							})}
 						</Text>
-					))}
+					)}
+
 					<Accordion radius="md" variant="contained">
 						<Accordion.Item value="history">
 							<Accordion.Control>{t("bond.couponHistory")}</Accordion.Control>
+
 							<Accordion.Panel>
 								<Stack gap="sm">
 									{vm.pastCoupons.length > 0
@@ -405,28 +460,33 @@ const BondCoupons: FC<BondPageViewProps> = (props) => {
 						</Accordion.Item>
 					</Accordion>
 				</Stack>
-			))}
+			)}
 		</InstrumentSection>
 	);
 };
 
 type MetricProps = { label: string; value: string };
+
 const Metric: FC<MetricProps> = props => (
 	<div>
 		<Text c="dimmed" size="xs">
 			{props.label}
 		</Text>
+
 		<Text fw={600} size="lg">
 			{props.value}
 		</Text>
 	</div>
 );
+
 type CouponProps = {
 	coupon: NonNullable<BondPageVm["coupons"]>["coupons"][number];
 };
+
 const Coupon: FC<CouponProps> = (props) => {
 	const { coupon } = props;
 	const { t } = useTranslation();
+
 	return (
 		<Paper p="md" radius="md" withBorder>
 			<Group align="start" justify="space-between">
@@ -436,39 +496,42 @@ const Coupon: FC<CouponProps> = (props) => {
 							? formatDate(coupon.paymentDate)
 							: t("stock.dateUnknown")}
 					</Text>
+
 					<Text c="dimmed" size="xs">
 						{t("bond.couponNumber", {
 							number: coupon.number ?? t("bond.unknown"),
 						})}
 					</Text>
 				</div>
+
 				<Metric label={t("bond.perBond")} value={formatMoney(coupon.perBond)} />
-				{!!(coupon.estimatedAmount) && ((
+
+				{!!coupon.estimatedAmount && (
 					<Metric
 						label={t("stock.yourEstimate")}
 						value={formatMoney(coupon.estimatedAmount)}
 					/>
-				))}
+				)}
 			</Group>
+
 			<Group gap="md" mt="sm">
 				<Badge color="gray" variant="light">
 					{t(`bond.couponTypes.${coupon.couponType}`, {
 						defaultValue: t("bond.unknown"),
 					})}
 				</Badge>
-				{coupon.periodDays != undefined && ((
+
+				{coupon.periodDays != undefined && (
 					<Text c="dimmed" size="xs">
 						{t("bond.couponDays", { count: coupon.periodDays })}
 					</Text>
-				))}
-				{!!(coupon.recordDate) && ((
+				)}
+
+				{!!coupon.recordDate && (
 					<Text c="dimmed" size="xs">
-						{t("stock.record")}
-						:
-						{" "}
-						{formatDate(coupon.recordDate)}
+						{t("stock.record")}: {formatDate(coupon.recordDate)}
 					</Text>
-				))}
+				)}
 			</Group>
 		</Paper>
 	);