Applet Runner: updated docs for new version (#255)

Author: theodoravraimakis

sites/labs/public/assets/applet-screenshots/applet_runner_demo.gif

@@ -32,9 +32,9 @@ const product = products[productId];
 				<br />
 				<p class="text-base">
 					Activate your license key by entering it in the "Manage License"
-					section of the installed JNLPRunner extension. For more information on
-					how to activate a license, please visit our <a
-						href="/cheerpj-jnlp-runner/getting-started/activate-license"
+					section of the installed {product.name} extension. For more information
+					on how to activate a license, please visit our <a
+						href=`/${product.id}/getting-started/activate-license`
 						target="_blank"
 						class="text-white hover:text-gray-300 font-bold underline"
 						>licensing page</a
@@ -48,8 +48,8 @@ const product = products[productId];
 					type="text/javascript"
 					data-storefront={formUrl.toString()}></script>
 				<div id="fsc-embedded-checkout-container"></div>
-				<script type="text/javascript">
-					fastspring.builder.add("cheerpj-jnlp-runner");
+				<script type="text/javascript" define:vars={{ productId: productId }}>
+					fastspring.builder.add(productId);
 				</script>
 			</div>
 		</div>

sites/labs/public/assets/applet-screenshots/applet_runner_usage.png

@@ -0,0 +1,51 @@
+---
+title: Activate your license
+description: Activate your extension license
+---
+
+This tutorial will guide you step by step on how to activate your extension license.
+
+## Prerequisites
+
+There are two ways to activate your license. Please follow the section that applies to you:
+
+- **License Key (Most Users)**: You can purchase a license key from the <a href="/payment-applet" target="_blank">_**Leaning Technologies shop**_</a> and activate it by following the **Activation via license key** section.
+- **License Token**: If you received a license token, typically for technical evaluations or organizational licenses — see the **Offline activation via License Token** section.
+
+## Activation via license key
+
+### Purchase License
+
+In order to activate your license, click on the _**Manage License**_ button on the popup.
+
+<div class="mx-24">![](/assets/applet-screenshots/popup_annotated.png)</div>
+
+Once you click on the _**Manage License**_ button, you will be redirected to the license activation screen. Here you can enter your license key or license token. Click on the link to purchase a license key.
+
+<div class="mx-24">
+	![](/assets/applet-screenshots/license_key_annotated.png)
+</div>
+
+### Validate License Key
+
+You will be redirected to the <a href="/payment-applet" target="_blank">_**Leaning Technologies shop**_</a> where you can request your license key.
+
+<div class="mx-24">![](/assets/applet-screenshots/purchase_license.png)</div>
+
+Once the purchase is complete, the license key will be displayed on the screen. You will also receive an email with the license key. Copy the license key then return to the extension and select the _**Enter License**_ option.
+
+<div class="mx-24">![](/assets/applet-screenshots/enter_license.png)</div>
+
+Paste the license key into the license key field.
+
+<div class="mx-24">![](/assets/applet-screenshots/license_key.png)</div>
+
+Click on the _**Validate**_ button to validate your license key. If your license key is valid, you will see a success message.
+
+<div class="mx-24">![](/assets/applet-screenshots/valid_license.png)</div>
+
+## Offline activation via License Token
+
+If you have been provided with a license token, you can activate your license offline. From the extension's home screen or popup, click on the _**Manage License**_ link, then select _**Enter License**_. Click on the _**License Token activation**_ checkbox, enter your license token and click on the _**Validate**_ button.
+
+<div class="mx-24">![](/assets/applet-screenshots/license_token.png)</div>

sites/labs/public/assets/applet-screenshots/enter_license.png

@@ -39,7 +39,7 @@ You will see a text letting you know that you do not have a Java installation on
 
 Just click on the extension icon and enable the Applet Runner in the popup.
 
-<div class="flex justify-center">
+<div class="mx-24">
 	<img
 		src="/assets/applet-screenshots/applet_runner_usage.png"
 		class="m-0"

sites/labs/public/assets/applet-screenshots/license_key.png

@@ -0,0 +1,8 @@
+---
+import ExtensionPayment from "../components/ExtensionPayment.astro";
+---
+
+<ExtensionPayment
+	productId="cheerpj-applet-runner"
+	formUrl="leaningtech.onfastspring.com/embedded-storefront"
+/>