Merge pull request #3951 from NativeScript/fatme/qr-code-messages

fix: show color messages above the QR code on preview command

Author: Fatme

lib/definitions/qr-code.d.ts

@@ -1,3 +1,3 @@
 interface IQrCodeTerminalService {
-	generate(url: string): void;
+	generate(url: string, message: string): void;
 }

lib/services/livesync/playground/qr-code-generator.ts

@@ -11,23 +11,26 @@ export class PlaygroundQrCodeGenerator implements IPlaygroundQrCodeGenerator {
 	}
 
 	public async generateQrCodeForiOS(): Promise<void> {
-		await this.generateQrCode(PlaygroundStoreUrls.APP_STORE_URL);
+		const message = `Scan the QR code below to install ${"NativeScript Playground app".underline.bold} on your ${"iOS".underline.bold} device or get it from ${PlaygroundStoreUrls.APP_STORE_URL.underline.bold}.`;
+		await this.generateQrCode(PlaygroundStoreUrls.APP_STORE_URL, message);
 	}
 
 	public async generateQrCodeForAndroid(): Promise<void> {
-		await this.generateQrCode(PlaygroundStoreUrls.GOOGLE_PLAY_URL);
+		const message = `Scan the QR code below to install ${"NativeScript Playground app".underline.bold} on your ${"Android".underline.bold} device or get it from ${PlaygroundStoreUrls.GOOGLE_PLAY_URL.underline.bold}.`;
+		await this.generateQrCode(PlaygroundStoreUrls.GOOGLE_PLAY_URL, message);
 	}
 
 	public async generateQrCodeForCurrentApp(options: IHasUseHotModuleReloadOption): Promise<void> {
-		await this.generateQrCode(this.$previewSdkService.getQrCodeUrl(options));
+		const message = `Use ${"NativeScript Playground app".underline.bold} and scan the QR code below to preview the application on your device.`;
+		await this.generateQrCode(this.$previewSdkService.getQrCodeUrl(options), message);
 	}
 
-	private async generateQrCode(url: string): Promise<void> {
-		await this.generateQrCodeCore(url);
+	private async generateQrCode(url: string, message: string): Promise<void> {
+		await this.generateQrCodeCore(url, message);
 		this.printUsage();
 	}
 
-	private async generateQrCodeCore(url: string): Promise<void> {
+	private async generateQrCodeCore(url: string, message: string): Promise<void> {
 		const shortenUrlEndpoint = util.format(this.$config.SHORTEN_URL_ENDPOINT, encodeURIComponent(url));
 		try {
 			const response = await this.$httpClient.httpRequest(shortenUrlEndpoint);
@@ -37,14 +40,14 @@ export class PlaygroundQrCodeGenerator implements IPlaygroundQrCodeGenerator {
 			// use the longUrl
 		}
 
-		this.$qrCodeTerminalService.generate(url);
+		this.$qrCodeTerminalService.generate(url, message);
 	}
 
 	private printUsage(): void {
 		this.$logger.info(`
--> Press ${this.underlineBoldCyan("a")} to show the QR code of NativeScript Playground app for ${this.underlineBoldCyan("Android")} devices
--> Press ${this.underlineBoldCyan("i")} to show the QR code of NativeScript Playground app for ${this.underlineBoldCyan("iOS")} devices
--> Press ${this.underlineBoldCyan("c")} to display the QR code of the ${this.underlineBoldCyan("current application")}.
+-> Press ${this.underlineBoldCyan("a")} to get a link to NativeScript Playground app for ${this.underlineBoldCyan("Android")}
+-> Press ${this.underlineBoldCyan("i")} to get a link to NativeScript Playground app for ${this.underlineBoldCyan("iOS")}
+-> Press ${this.underlineBoldCyan("c")} to show the QR code of the ${this.underlineBoldCyan("current application")}.
 		`);
 	}
 

lib/services/qr-code-terminal-service.ts

@@ -1,10 +1,13 @@
+import { EOL } from "os";
+
 const qrcode = require("qrcode-terminal");
 
 export class QrCodeTerminalService implements IQrCodeTerminalService {
 	constructor(private $logger: ILogger) { }
 
-	public generate(url: string): void {
-		this.$logger.info(`Generating qrcode for url ${url}.`);
+	public generate(url: string, message: string): void {
+		this.$logger.info(`${EOL} ${message.blue}`);
+		this.$logger.info(`${EOL} Generating qrcode for url ${url}.`);
 
 		try {
 			qrcode.generate(url);