From 82bd8a4643b57a6449e5d6295eee5a45299bde1b Mon Sep 17 00:00:00 2001
From: bcotrim <bernardo.cotrim@a8c.com>
Date: Tue, 14 Jan 2025 07:49:10 +0000
Subject: [PATCH] fix get apps link for studio on mobile (#98281)

---
 .../get-apps/{apps-config.ts => apps-config.tsx}    | 13 ++++++++++++-
 client/blocks/get-apps/desktop-download-options.tsx | 10 +---------
 client/blocks/get-apps/style.scss                   |  4 ----
 3 files changed, 13 insertions(+), 14 deletions(-)
 rename client/blocks/get-apps/{apps-config.ts => apps-config.tsx} (92%)

diff --git a/client/blocks/get-apps/apps-config.ts b/client/blocks/get-apps/apps-config.tsx
similarity index 92%
rename from client/blocks/get-apps/apps-config.ts
rename to client/blocks/get-apps/apps-config.tsx
index a9a2b4157c6c7..6db6368bbd1cd 100644
--- a/client/blocks/get-apps/apps-config.ts
+++ b/client/blocks/get-apps/apps-config.tsx
@@ -1,6 +1,6 @@
 import { recordTracksEvent } from '@automattic/calypso-analytics';
 import { localizeUrl } from '@automattic/i18n-utils';
-import { useTranslate } from 'i18n-calypso';
+import { useTranslate, Substitution } from 'i18n-calypso';
 import Apple from 'calypso/assets/images/icons/apple-logo.svg';
 import DesktopAppLogo from 'calypso/assets/images/icons/desktop-app-logo.svg';
 import Linux from 'calypso/assets/images/icons/linux-logo.svg';
@@ -34,6 +34,7 @@ export interface DesktopAppConfig {
 	logoName: string;
 	title: string;
 	subtitle: string;
+	link: Substitution;
 	platforms: Partial< Record< PlatformType, PlatformConfig > >;
 	isPrimary?: boolean;
 }
@@ -103,6 +104,11 @@ export const createWordPressDesktopConfig = (
 		subtitle: translate(
 			'The full WordPress.com experience packaged as an app for your laptop or desktop.'
 		),
+		link: translate( 'Visit {{a}}desktop.wordpress.com{{/a}} on your desktop.', {
+			components: {
+				a: <a href="https://desktop.wordpress.com" />,
+			},
+		} ),
 		platforms: {
 			[ PlatformType.MacIntel ]: {
 				...platformConfigs[ PlatformType.MacIntel ],
@@ -144,6 +150,11 @@ export const createWordPressStudioConfig = (
 		logoName: 'studio-app-logo',
 		title: translate( 'Studio by WordPress.com' ),
 		subtitle: translate( 'A fast, free way to develop locally with WordPress.' ),
+		link: translate( 'Visit {{a}}developer.wordpress.com/studio{{/a}} on your desktop.', {
+			components: {
+				a: <a href="https://developer.wordpress.com/studio/" />,
+			},
+		} ),
 		isPrimary: true,
 		platforms: {
 			[ PlatformType.MacIntel ]: {
diff --git a/client/blocks/get-apps/desktop-download-options.tsx b/client/blocks/get-apps/desktop-download-options.tsx
index e06aab2a96844..2b0e2f52d5719 100644
--- a/client/blocks/get-apps/desktop-download-options.tsx
+++ b/client/blocks/get-apps/desktop-download-options.tsx
@@ -39,15 +39,7 @@ export const DesktopDownloadOptions: React.FC< Props > = ( {
 	const translate = useTranslate();
 
 	if ( isMobile ) {
-		return (
-			<div className="get-apps__desktop-link">
-				{ translate( 'Visit {{a}}desktop.wordpress.com{{/a}} on your desktop.', {
-					components: {
-						a: <a href="https://desktop.wordpress.com" />,
-					},
-				} ) }
-			</div>
-		);
+		return <div className="get-apps__desktop-link">{ appConfig.link }</div>;
 	}
 
 	return (
diff --git a/client/blocks/get-apps/style.scss b/client/blocks/get-apps/style.scss
index dcc3d0b65fe00..02e83fcd74e55 100644
--- a/client/blocks/get-apps/style.scss
+++ b/client/blocks/get-apps/style.scss
@@ -74,10 +74,6 @@ main.get-apps {
 	}
 
 	.get-apps__desktop-link {
-		display: flex;
-		flex-direction: row;
-		align-items: center;
-		gap: 3px;
 		font-size: $font-body-extra-small;
 	}