Chore: convert marketplace price display component to use typescript (#…

…25504)

apps/meteor/client/views/admin/apps/PriceDisplay.js → apps/meteor/client/views/admin/apps/PriceDisplay.tsx

@@ -1,10 +1,26 @@
 import { Box } from '@rocket.chat/fuselage';
-import { useTranslation } from '@rocket.chat/ui-contexts';
-import React, { useMemo } from 'react';
+import { TranslationKey, useTranslation } from '@rocket.chat/ui-contexts';
+import React, { FC, useMemo } from 'react';
 
+import { PricingPlan } from './definitions/PricingPlan';
 import { formatPricingPlan, formatPrice } from './helpers';
 
-const formatPriceAndPurchaseType = (purchaseType, pricingPlans, price) => {
+type PriceDisplayProps = {
+	purchaseType: string;
+	pricingPlans: PricingPlan[];
+	price: number;
+	showType?: boolean;
+	marginInline?: string;
+};
+
+type PlanType = 'Subscription' | 'Paid' | 'Free';
+
+type FormattedPriceAndPlan = {
+	type: PlanType;
+	price: string;
+};
+
+const formatPriceAndPurchaseType = (purchaseType: string, pricingPlans: PricingPlan[], price: number): FormattedPriceAndPlan => {
 	if (purchaseType === 'subscription') {
 		const type = 'Subscription';
 		if (!pricingPlans || !Array.isArray(pricingPlans) || pricingPlans.length === 0) {
@@ -20,25 +36,26 @@ const formatPriceAndPurchaseType = (purchaseType, pricingPlans, price) => {
 	return { type: 'Free', price: '-' };
 };
 
-function PriceDisplay({ purchaseType, pricingPlans, price, showType = true, ...props }) {
+const PriceDisplay: FC<PriceDisplayProps> = ({ purchaseType, pricingPlans, price, showType = true, ...props }) => {
 	const t = useTranslation();
 
 	const { type, price: formattedPrice } = useMemo(
 		() => formatPriceAndPurchaseType(purchaseType, pricingPlans, price),
 		[purchaseType, pricingPlans, price],
 	);
+
 	return (
 		<Box display='flex' flexDirection='column' {...props}>
 			{showType && (
 				<Box color='default' withTruncatedText>
-					{t(type)}
+					{t(type as TranslationKey)}
 				</Box>
 			)}
 			<Box color='hint' withTruncatedText>
 				{!showType && type === 'Free' ? t(type) : formattedPrice}
 			</Box>
 		</Box>
 	);
-}
+};
 
 export default PriceDisplay;

apps/meteor/client/views/admin/apps/definitions/PricingPlan.ts

@@ -0,0 +1,16 @@
+export type PricingPlan = {
+	id: string;
+	enabled: boolean;
+	price: number;
+	trialDays: number;
+	strategy: string;
+	isPerSeat: boolean;
+	tiers?: Tiers[];
+};
+
+export type Tiers = {
+	perUnit: boolean;
+	minimum: number;
+	maximum: number;
+	price: number;
+};

apps/meteor/client/views/admin/apps/types.ts

@@ -1,5 +1,7 @@
 import { AppStatus } from '@rocket.chat/apps-engine/definition/AppStatus';
 
+import { PricingPlan } from './definitions/PricingPlan';
+
 export type App = {
 	id: string;
 	iconFileData: string;
@@ -14,7 +16,7 @@ export type App = {
 	version: string;
 	price: number;
 	purchaseType: string;
-	pricingPlans: unknown[];
+	pricingPlans: PricingPlan[];
 	iconFileContent: string;
 	installed?: boolean;
 	isEnterpriseOnly?: boolean;