From 6d951441dec177e439c99a609f058c0faeec24ff Mon Sep 17 00:00:00 2001
From: Matheus Lucca do Carmo <mematheuslc@gmail.com>
Date: Fri, 20 May 2022 14:23:44 -0300
Subject: [PATCH] Chore: convert marketplace price display component to use
 typescript (#25504)

---
 .../{PriceDisplay.js => PriceDisplay.tsx}     | 29 +++++++++++++++----
 .../admin/apps/definitions/PricingPlan.ts     | 16 ++++++++++
 apps/meteor/client/views/admin/apps/types.ts  |  4 ++-
 3 files changed, 42 insertions(+), 7 deletions(-)
 rename apps/meteor/client/views/admin/apps/{PriceDisplay.js => PriceDisplay.tsx} (57%)
 create mode 100644 apps/meteor/client/views/admin/apps/definitions/PricingPlan.ts

diff --git a/apps/meteor/client/views/admin/apps/PriceDisplay.js b/apps/meteor/client/views/admin/apps/PriceDisplay.tsx
similarity index 57%
rename from apps/meteor/client/views/admin/apps/PriceDisplay.js
rename to apps/meteor/client/views/admin/apps/PriceDisplay.tsx
index cfdfc956e914..b390d0caa061 100644
--- a/apps/meteor/client/views/admin/apps/PriceDisplay.js
+++ b/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,18 +36,19 @@ 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>
@@ -39,6 +56,6 @@ function PriceDisplay({ purchaseType, pricingPlans, price, showType = true, ...p
 			</Box>
 		</Box>
 	);
-}
+};
 
 export default PriceDisplay;
diff --git a/apps/meteor/client/views/admin/apps/definitions/PricingPlan.ts b/apps/meteor/client/views/admin/apps/definitions/PricingPlan.ts
new file mode 100644
index 000000000000..cbe5afa32d55
--- /dev/null
+++ b/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;
+};
diff --git a/apps/meteor/client/views/admin/apps/types.ts b/apps/meteor/client/views/admin/apps/types.ts
index 3942395edb4f..77987d92e854 100644
--- a/apps/meteor/client/views/admin/apps/types.ts
+++ b/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;