From d94f1fb003f99234a5d07e417552a4fd932759c4 Mon Sep 17 00:00:00 2001
From: Andrew <andrew.telnov@gmail.com>
Date: Thu, 18 Jan 2024 09:39:41 +0200
Subject: [PATCH] Update license banner rendering (#5085)

---
 .../src/creator.component.html                       | 12 +++++-------
 .../survey-creator-core/src/components/creator.scss  |  3 +--
 .../survey-creator-core/src/localization/english.ts  |  2 +-
 .../survey-creator-core/src/localization/hebrew.ts   |  3 +--
 .../survey-creator-knockout/src/survey-creator.html  |  3 +--
 packages/survey-creator-react/src/SurveyCreator.tsx  |  7 ++-----
 packages/survey-creator-vue/src/Creator.vue          |  9 ++++-----
 7 files changed, 15 insertions(+), 24 deletions(-)

diff --git a/packages/survey-creator-angular/src/creator.component.html b/packages/survey-creator-angular/src/creator.component.html
index 84455da94b..bef8bad9b0 100644
--- a/packages/survey-creator-angular/src/creator.component.html
+++ b/packages/survey-creator-angular/src/creator.component.html
@@ -23,8 +23,10 @@
             <div class="svc-creator__content-holder svc-flex-column">
               <ng-container *ngFor="let tab of creator.tabs">
                 <div class="svc-creator-tab" *ngIf="creator.viewType == tab.id && tab.visible"
-                  [attr.id]="'scrollableDiv-' + tab.id" [class.svc-creator__toolbox--right]="creator.toolboxLocation == 'right'">
-                  <ng-template [component]="{ name: tab.componentContent, data: { model: tab.data.model } }"></ng-template>
+                  [attr.id]="'scrollableDiv-' + tab.id"
+                  [class.svc-creator__toolbox--right]="creator.toolboxLocation == 'right'">
+                  <ng-template
+                    [component]="{ name: tab.componentContent, data: { model: tab.data.model } }"></ng-template>
                 </div>
               </ng-container>
             </div>
@@ -40,11 +42,7 @@
         </div>
       </div>
       <div class="svc-creator__banner" *ngIf="!creator.haveCommercialLicense">
-        <span class="svc-creator__non-commercial-text">
-          <a href="https://surveyjs.io/buy">
-            {{creator.licenseText}}
-          </a>
-        </span>
+        <span class="svc-creator__non-commercial-text" [innerHTML]="creator.licenseText | safeHtml"></span>
       </div>
       <sv-notifier [notifier]="creator.notifier"></sv-notifier>
     </div>
diff --git a/packages/survey-creator-core/src/components/creator.scss b/packages/survey-creator-core/src/components/creator.scss
index 24ab0bf0b9..3776bb0104 100644
--- a/packages/survey-creator-core/src/components/creator.scss
+++ b/packages/survey-creator-core/src/components/creator.scss
@@ -123,13 +123,12 @@ survey-creator,
 .svc-creator__non-commercial-text {
   color: $primary-foreground;
   font-family: $font-family;
-  font-weight: bold;
   font-size: calcSize(2);
   vertical-align: middle;
+  padding: 12px 128px;
 
   a {
     color: $primary-foreground;
-    text-decoration: none;
   }
 }
 
diff --git a/packages/survey-creator-core/src/localization/english.ts b/packages/survey-creator-core/src/localization/english.ts
index c130844004..5dfcc28ca3 100644
--- a/packages/survey-creator-core/src/localization/english.ts
+++ b/packages/survey-creator-core/src/localization/english.ts
@@ -16,7 +16,7 @@ export var enStrings = {
     deleteQuestion: "Delete Question",
     convertTo: "Convert to",
     drag: "Drag element",
-    license: "To use our library in your app, a developer license is necessary. If you currently hold an activated license, ensure you're using the latest version available."
+    license: "To use our library, a <a href='https://surveyjs.io/licensing'>developer license</a> is required. If you have an active license, <a href='https://surveyjs.io/remove-alert-banner'>set up your license key</a> and ensure you're using the latest version."
   },
   // Question types
   qt: {
diff --git a/packages/survey-creator-core/src/localization/hebrew.ts b/packages/survey-creator-core/src/localization/hebrew.ts
index 0f984d4cf7..8b459be24c 100644
--- a/packages/survey-creator-core/src/localization/hebrew.ts
+++ b/packages/survey-creator-core/src/localization/hebrew.ts
@@ -14,8 +14,7 @@ export var hebrewStrings = {
     deletePanel: "מחיקת לוח",
     deleteQuestion: "מחיקת שאלה",
     convertTo: "המרה ל",
-    drag: "גרירת אלמנט",
-    license: "אנא רכשו רישיון מפתחים כדי להשתמש ביוצר הסקר ביישום שלכם"
+    drag: "גרירת אלמנט"
   },
   // Question types
   qt: {
diff --git a/packages/survey-creator-knockout/src/survey-creator.html b/packages/survey-creator-knockout/src/survey-creator.html
index 335367d3c1..f837690eb9 100644
--- a/packages/survey-creator-knockout/src/survey-creator.html
+++ b/packages/survey-creator-knockout/src/survey-creator.html
@@ -51,8 +51,7 @@
     </div>
     <!-- ko ifnot: creator.haveCommercialLicense -->
     <div class="svc-creator__banner">
-      <span class="svc-creator__non-commercial-text"><a href="https://surveyjs.io/buy"
-          data-bind="text: creator.licenseText"></a></span>
+      <span class="svc-creator__non-commercial-text" data-bind="html: creator.licenseText"></span>
     </div>
     <!-- /ko -->
     <!-- ko component: { name: 'sv-notifier', params: { notifier: creator.notifier } } -->
diff --git a/packages/survey-creator-react/src/SurveyCreator.tsx b/packages/survey-creator-react/src/SurveyCreator.tsx
index f45c400886..82ce5e2e2a 100644
--- a/packages/survey-creator-react/src/SurveyCreator.tsx
+++ b/packages/survey-creator-react/src/SurveyCreator.tsx
@@ -65,13 +65,10 @@ export class SurveyCreatorComponent extends SurveyElementBase<
     const fullContainerClassName = "svc-flex-row svc-full-container" + (" svc-creator__side-bar--" + this.creator.sidebarLocation);
     let licenseBanner = null;
     if (!this.props.creator.haveCommercialLicense) {
+      const htmlValue = { __html: this.props.creator.licenseText };
       licenseBanner = (
         <div className="svc-creator__banner">
-          <span className="svc-creator__non-commercial-text">
-            <a href="https://surveyjs.io/buy">
-              {this.props.creator.licenseText}
-            </a>
-          </span>
+          <span className="svc-creator__non-commercial-text" dangerouslySetInnerHTML={htmlValue}></span>
         </div>
       );
     }
diff --git a/packages/survey-creator-vue/src/Creator.vue b/packages/survey-creator-vue/src/Creator.vue
index ea3309a7f0..bd9e1c5b6d 100644
--- a/packages/survey-creator-vue/src/Creator.vue
+++ b/packages/survey-creator-vue/src/Creator.vue
@@ -79,11 +79,10 @@
           </div>
         </div>
         <div class="svc-creator__banner" v-if="!model.haveCommercialLicense">
-          <span class="svc-creator__non-commercial-text">
-            <a href="https://surveyjs.io/buy">
-              {{ model.licenseText }}
-            </a>
-          </span>
+          <span
+            class="svc-creator__non-commercial-text"
+            v-html="model.licenseText"
+          ></span>
         </div>
         <sv-notifier :model="model.notifier"></sv-notifier>
       </div>