fix(marketplace): `AppsInfo` small UX problems (#30012)

Co-authored-by: Tasso Evangelista <2263066+tassoevan@users.noreply.github.com>

apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppDetails/AppDetails.tsx

@@ -8,6 +8,7 @@ import React from 'react';
 import ScreenshotCarouselAnchor from '../../../components/ScreenshotCarouselAnchor';
 import type { AppInfo } from '../../../definitions/AppInfo';
 import AppDetailsAPIs from './AppDetailsAPIs';
+import { normalizeUrl } from './normalizeUrl';
 
 const AppDetails = ({ app }: { app: AppInfo }): ReactElement => {
 	const t = useTranslation();
@@ -18,12 +19,15 @@ const AppDetails = ({ app }: { app: AppInfo }): ReactElement => {
 		categories = [],
 		screenshots,
 		apis,
-		documentationUrl,
+		documentationUrl: documentation,
 	} = app;
 
 	const isMarkdown = detailedDescription && Object.keys(detailedDescription).length !== 0 && detailedDescription.rendered;
 	const isCarouselVisible = screenshots && Boolean(screenshots.length);
-	const normalizeDocumentationUrl = documentationUrl?.startsWith('http') ? documentationUrl : `https://${documentationUrl}`;
+
+	const normalizedHomepageUrl = normalizeUrl(homepage);
+	const normalizedSupportUrl = normalizeUrl(support);
+	const normalizedDocumentationUrl = normalizeUrl(documentation);
 
 	return (
 		<Box maxWidth='x640' w='full' marginInline='auto' color='default'>
@@ -76,24 +80,21 @@ const AppDetails = ({ app }: { app: AppInfo }): ReactElement => {
 								<Box fontScale='h4' color='hint'>
 									{t('Author_Site')}
 								</Box>
-								<ExternalLink to={homepage} />
+								{normalizedHomepageUrl ? <ExternalLink to={normalizedHomepageUrl}>{homepage}</ExternalLink> : homepage}
 							</Box>
 							<Box display='flex' flexDirection='column' flexGrow={1}>
 								<Box fontScale='h4' color='hint'>
 									{t('Support')}
 								</Box>
-								<ExternalLink to={support} />
+								{normalizedSupportUrl ? <ExternalLink to={normalizedSupportUrl}>{support}</ExternalLink> : support}
 							</Box>
 						</Box>
-
-						{documentationUrl && (
-							<>
-								<Box fontScale='h4' color='hint'>
-									{t('Documentation')}
-								</Box>
-								<ExternalLink to={normalizeDocumentationUrl} />
-							</>
-						)}
+						<>
+							<Box fontScale='h4' color='hint'>
+								{t('Documentation')}
+							</Box>
+							{normalizedDocumentationUrl ? <ExternalLink to={normalizedDocumentationUrl}>{documentation}</ExternalLink> : documentation}
+						</>
 					</Box>
 
 					{apis?.length ? (

apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppDetails/normalizeUrl.spec.ts

+import { it } from '@jest/globals';
+
+import { normalizeUrl } from './normalizeUrl';
+
+it.each([
+	['https://rocket.chat', 'https://rocket.chat'],
+	['//rocket.chat', 'https://rocket.chat'],
+	['rocket.chat', 'https://rocket.chat'],
+	['rocketchat@rocket.chat', 'mailto:rocketchat@rocket.chat'],
+	['plain_text', undefined],
+])('should normalize %o as %o', (input, output) => {
+	expect(normalizeUrl(input)).toBe(output);
+});

apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppDetails/normalizeUrl.tsx

+import { parse } from '@rocket.chat/message-parser';
+
+export const normalizeUrl = (url: string): string | undefined => {
+	if (url.startsWith('http')) {
+		return url;
+	}
+
+	if (url.startsWith('//')) {
+		return `https:${url}`;
+	}
+
+	const parsedUrl = parse(url);
+
+	if (parsedUrl[0].type === 'PARAGRAPH') {
+		if (parsedUrl[0].value[0].type === 'LINK') {
+			if (parsedUrl[0].value[0].value.src.value.startsWith('//')) {
+				return `https:${parsedUrl[0].value[0].value.src.value}`;
+			}
+
+			return parsedUrl[0].value[0].value.src.value;
+		}
+	}
+
+	return undefined;
+};

apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppStatus/AppStatusPriceDisplay.tsx

 import type { AppPricingPlan, PurchaseType } from '@rocket.chat/core-typings';
-import { Box, Tag } from '@rocket.chat/fuselage';
-import type { TranslationKey } from '@rocket.chat/ui-contexts';
+import { Box, Margins, Tag } from '@rocket.chat/fuselage';
 import { useTranslation } from '@rocket.chat/ui-contexts';
 import type { FC } from 'react';
 import React, { useMemo } from 'react';
@@ -24,10 +23,12 @@ const AppStatusPriceDisplay: FC<AppStatusPriceDisplayProps> = ({ purchaseType, p
 	);
 
 	return (
-		<Tag>
-			{showType && <Box color='default'>{t(type as TranslationKey)}</Box>}
-			<Box>{!showType && type === 'Free' ? t(type) : formattedPrice}</Box>
-		</Tag>
+		<Margins inline={4}>
+			<Tag>
+				{showType && <Box color='default'>{t.has(type) ? t(type) : type}</Box>}
+				<Box>{!showType && type === 'Free' ? t(type) : formattedPrice}</Box>
+			</Tag>
+		</Margins>
 	);
 };