feat: self serve implementation PLAT-22825 (#976)

* fix(header): change "create" button, add credentials avatar (#955) * Upgrade to Angular 10.2 * primeng style fixes * update primeng styles * update primeng styles * update primeng styles * update primeng styles * update primeng styles * update primeng styles * update primeng styles * update primeng autocomplete * update primeng styles * update primeng styles * update primeng styles * update primeng styles * update primeng styles * update primeng styles * update primeng styles * update primeng styles * upgrade to Angular 11 * add import statement * Angular 11 upgrade - style fixes and Auto-complete API changes * Angular 11 upgrade - style fixes * Angular 11 upgrade - radio box in reactive form fix for issue primefaces/primeng#9631 * Angular 11 upgrade - style fix * Angular 11 upgrade - style fixs * Angular 11 RxJs fixes * Angular 11 RxJs fixes * Angular 11 RxJs fixes * Angular 11 RxJs fixes * Angular 11 RxJs fixes * Angular 11 RxJs fixes * Angular 11 RxJs fixes * Angular 11 fixes after master merge * update kaltura-ng libs * update clientlib * typo fix * fix(live stream): change universal live call to use new RxJS syntax (#945) * fix(entries/categories): endless load of Entitlements tab (use new RxJS syntax) (#946) * fix(playlists/details): switch to next/previous playlist (left/right arrows) (#949) * fix(settings/transcoding): table has wrong width on IE11 (#950) * typo fix * fix(entries/edit/flavors/): Match from Drop Folder error due to old RxJS syntax (use new RxJS syntax) (#947) * fix(categories): After selecting another Category all of them disappear on Move Category (#952) * fix(entry): IE-11 - Back arrow cut-off in all relevant pages KMCNG-2340 (#948) * fix(entries/edit): IE-11 - Back arrow cut-off in all relevant pages * fix(entry): back button is cut-off in IE11 * fix(entries/distribution): refresh button is cut off KMCNG-2320 (#951) * fix(entries/distribution): refresh button is cut off * fix(entry/distribution): IE11 - refresh button is cut off * fix: angular.json * fix(theme): change controls color to primary, change analytics logo, change header gradient KMCNG-2370 (#953) * fix(theme): change controls color to primary, change analytics logo, change header gradient * fix: link colors, logo for dpi 1 * fix(theme): style and RxJS fixes for Angular 11 (#954) * fix(header): change "create" button, add credentials avatar * fix: add checking to appUser * fix: user dropdown position, long user name * fix layout * load partner status Co-authored-by: amirch1 <[email protected]> * add free trial "start plan" button in header * add notifications bar * add introduction video placeholder to the "what's new" window * display notifications bar only for self serve users * add self serve options to user settings menu * add KPF connectivity * update route for KPF * update routes * update server-config-example.json * fix usage dashboard permissions * fix usage dashboard permissions * fix usage dashboard permissions Co-authored-by: Viktor Kyryltsev <[email protected]>
kaltura · Dec 16, 2021 · 035f9ac · 035f9ac
1 parent 527ee4a
commit 035f9ac
Show file tree

Hide file tree

Showing 28 changed files with 659 additions and 170 deletions.
diff --git a/src/applications/analytics/analytics.component.ts b/src/applications/analytics/analytics.component.ts
@@ -5,7 +5,7 @@ import { AppLocalization } from '@kaltura-ng/mc-shared';
 import { AppEventsService } from 'app-shared/kmc-shared';
 import { ResetMenuEvent, UpdateMenuEvent } from 'app-shared/kmc-shared/events';
 import { BrowserService } from 'app-shared/kmc-shell/providers';
-import { KMCPermissionsService } from "app-shared/kmc-shared/kmc-permissions";
+import {KMCPermissions, KMCPermissionsService} from "app-shared/kmc-shared/kmc-permissions";
 import { AppAuthentication } from "app-shared/kmc-shell";
 
 @Component({

diff --git a/src/applications/kmc-upload-app/upload-button/upload-button.component.html b/src/applications/kmc-upload-app/upload-button/upload-button.component.html
@@ -1,6 +1,8 @@
 <button pButton [disabled]="_disabled"
-        label="{{'app.titles.create' | translate | uppercase}}"
-        class="kButtonDefault kUploadBtn"
+        label="{{'app.titles.create' | translate}}"
+        class="kUploadBtn"
+        icon="kIconplus"
+        iconPos="left"
         (click)="uploadmenu.open()"></button>
 
 <kPopupWidget #uploadmenu data-aid="uploadmenu" [popupWidth]="360" [popupHeight]="385" [closeBtn]="true"

diff --git a/src/applications/kmc-upload-app/upload-button/upload-button.component.scss b/src/applications/kmc-upload-app/upload-button/upload-button.component.scss
@@ -2,22 +2,22 @@
 
 .kUploadBtn {
   height: 34px;
-  font-size: 12px;
+  font-size: 14px;
   letter-spacing: 0.1em;
   font-weight: 700;
-  color: $kGrayscale1;
   margin-right: 12px;
-  padding-left: 6px;
-  padding-right: 6px;
-  border: none !important;
+  background: transparent;
+  color: #fff;
+  border: 1px solid #fff;
   &:disabled{
       color: $kGrayscale4;
       background: transparent;
       border: 1px solid $kGrayscale4 !important;
       cursor: none;
   }
-    ::ng-deep   .p-button-label {
-        padding: .25em 1em;
+
+    ::ng-deep .p-button-icon {
+        font-size: 20px;
     }
 }
 
diff --git a/src/configuration/server-config-example.json b/src/configuration/server-config-example.json
@@ -8,6 +8,10 @@
         "serverUri": "http://cdnapi.kaltura.com",
         "securedServerUri": "https://cdnapisec.kaltura.com"
     },
+    "kpfServer": {
+        "kpfPackageManagerBaseUrl": "https://kpf-dev.kaltura.com/package-manager",
+        "kpfPurchaseManagerBaseUrl": "https://kpf-dev.kaltura.com/purchase-manager"
+    },
     "externalApps": {
     },
     "externalLinks": {

diff --git a/src/configuration/server-config.ts b/src/configuration/server-config.ts
@@ -74,6 +74,10 @@ export interface ServerConfig {
         serverUri: string,
         securedServerUri: string
     };
+    kpfServer: {
+        kpfPackageManagerBaseUrl: string,
+        kpfPurchaseManagerBaseUrl: string
+    },
     externalAPI: {
         youtube: {
             uri: string;

diff --git a/src/i18n/en.json b/src/i18n/en.json
@@ -260,6 +260,23 @@
             "messageNav": "This view cannot be loaded.\nIf the problem persists - contact Kaltura support.\nClick OK to navigate to the main view."
         }
     },
+    "selfServe": {
+        "unMute": "Unmute",
+        "getStarted": "Get Started",
+        "startPlan": "Start Plan",
+        "trial": "Free Trial Plan",
+        "credits": "${{0}} Credits Left",
+        "balance": "Credit Balance",
+        "creditsBalance": "${{0}} Credits",
+        "buy": "Buy Credit",
+        "manage": "Manage Subscription",
+        "trialExpired": "Your free trial expired.",
+        "dunning": "Your account is about to be deactivated.",
+        "deactivated": "Your account is currently deactivated.",
+        "update": "Update Payment Method",
+        "connecting": "Connecting...",
+        "error": "Error connecting to server"
+    },
     "applications": {
         "embed":{
             "previewShare": "Share & Embed",

diff --git a/src/kmc-app/app.module.ts b/src/kmc-app/app.module.ts
@@ -15,6 +15,7 @@ import {CategoriesStatusModule} from 'app-shared/content-shared/categories-statu
 import { KMCPermissionsModule } from 'app-shared/kmc-shared/kmc-permissions';
 import { LocalizationModule } from '@kaltura-ng/mc-shared';
 import { KalturaLoggerInjectionToken } from '@kaltura-ng/kaltura-common';
+import { KalturaPlayerV7Component } from 'app-shared/kmc-shared/player-v7';
 
 export function createTranslateLoader(http: HttpClient) {
     return new TranslateHttpLoader(http, './i18n/', '.json');
@@ -217,6 +218,7 @@ export function kalturaClientDefaultOptionsFactory(): KalturaRequestOptionsArgs
       InvalidRestorePasswordHashFormComponent,
       ProgressBarComponent,
       PersistLoginByKsComponent,
+      KalturaPlayerV7Component,
   ],
   bootstrap: [
     AppComponent

diff --git a/src/kmc-app/components/app-menu/app-menu.component.html b/src/kmc-app/components/app-menu/app-menu.component.html
@@ -1,4 +1,10 @@
 <kSticky stickyId="header" [stickyClass]="'kStickyClass'">
+    <div *ngIf="_showNotificationsBar" class="kNotificationsBar">
+        <span class="notification" *ngIf="_isFreeTrial">{{'selfServe.trialExpired' | translate}}</span>
+        <button *ngIf="_isFreeTrial" (click)="startPlan()" class="kButtonBranded kNotificationBtn" [disabled]="_connectingToKPF" pButton [label]="_connectingToKPF ? (('selfServe.connecting' | translate)) : ('selfServe.startPlan' | translate)"></button>
+        <span class="notification" *ngIf="!_isFreeTrial">{{'selfServe.deactivated' | translate}}</span>
+        <button *ngIf="!_isFreeTrial" (click)="updatePayment()" class="kButtonBranded kNotificationBtn" [disabled]="_connectingToKPF" pButton [label]="_connectingToKPF ? (('selfServe.connecting' | translate)) : ('selfServe.update' | translate)"></button>
+    </div>
     <div class="kMainMenuWrapper">
         <kLazyModuleLoadingProgressBar></kLazyModuleLoadingProgressBar>
         <div #appmenu class="appMenu">
@@ -21,20 +27,24 @@
                             {{item.menuTitle | uppercase}}
                     </a>
                 </div>
+
+                <kUploadButton></kUploadButton>
             </div>
 
             <div class="kMenu-right">
                 <k-logs-record mode="button"
                                *ngIf="(_kmcLogs.logsRecordMode | async).enabled"
                                [logLevel]="(_kmcLogs.logsRecordMode | async).logLevel"></k-logs-record>
-                <kUploadButton></kUploadButton>
+
+                <button *ngIf="_showStartPlan" (click)="startPlan()" class="kButtonBranded kStartPlan" pButton [label]="'selfServe.startPlan' | translate"></button>
+
                 <kUploadMonitor [appmenu]="appmenu"></kUploadMonitor>
 
                 <i *ngFor="let item of rightMenuConfig" (click)="item.open()" [ngClass]="item.icon" [class.open]="item === selectedMenuItem" [kTooltip]="item.menuTitle" [placement]="'bottom'"></i>
 
                 <i #help class="kIconhelp" [class.has-notification]="_showChangelog" [class.open]="_helpMenuOpened"></i>
                 <div #username class="kUserName">
-                    <span>{{_userAuthentication.appUser?.fullName}}</span>
+                    <div class="kUserInitials">{{userInitials}}</div>
                     <i class="kIcondropdown_arrow_bottom"></i>
                 </div>
             </div>
@@ -56,16 +66,16 @@
 
 <kPopupWidget #usersettings [appendTo]="appmenu"
               data-aid="usersettings"
-              [popupWidth]="240"
+              [popupWidth]="260"
               [closeBtn]="false"
               [targetRef]="username"
-              [targetOffset]="{'x': 8, 'y': 30}"
+              [targetOffset]="{'x': 8, 'y': 37}"
               (onOpen)="username.className='kUserName open'"
               (onClose)="username.className='kUserName'">
     <kKMCUserSettings [parentPopup]="usersettings"></kKMCUserSettings>
 </kPopupWidget>
 
-<kPopupWidget #helpmenu data-aid="helpmenu" [appendTo]="appmenu" [popupWidth]="240" [closeBtn]="false" [targetRef]="help" [targetOffset]="{'x':-109, 'y': 35}" (onOpen)="_helpMenuOpened = true" (onClose)="_helpMenuOpened = false">
+<kPopupWidget #helpmenu data-aid="helpmenu" [appendTo]="appmenu" [popupWidth]="240" [closeBtn]="false" [targetRef]="help" [targetOffset]="{'x':-140, 'y': 35}" (onOpen)="_helpMenuOpened = true" (onClose)="_helpMenuOpened = false">
     <ng-template>
         <div class="kHelpMenu">
             <!--p *ngIf="_kmcOverviewLinkExists || _mediaManagementLinkExists" class="kHelpTitle">{{'app.helpMenu.gettingStarted' | translate | uppercase}}</p>

diff --git a/src/kmc-app/components/app-menu/app-menu.component.scss b/src/kmc-app/components/app-menu/app-menu.component.scss
@@ -4,7 +4,11 @@
 .kMainMenuWrapper{
     height: 54px;
 }
-
+.kDisabled {
+    opacity: 0.3;
+    cursor: default;
+    pointer-events: none;
+}
 .appMenu {
     background: $menuBkgColor; /* Old browsers */
     background: -moz-linear-gradient(left, #004194 0%, #006EFA 100%); /* FF3.6-15 */
@@ -103,25 +107,28 @@
     .kUserName {
         display: flex;
         align-items: center;
-        opacity: 0.6;
-        color: $headerTextColor;
+        color: #fff;
         cursor: pointer;
         font-weight: 400;
         margin-left: 12px;
         font-size: 14px;
-        &:hover, &.open {
-            opacity: 1;
-            color: $mainLinkHoverColor;
-            i {
-                color: $mainLinkHoverColor;
-                opacity: 1;
-            }
-        }
         i {
             font-size: 10px;
             margin-left: 6px;
             margin-top: 2px;
         }
+
+        .kUserInitials {
+            height: 34px;
+            width: 34px;
+            background: rgba(255,255,255,0.2);
+            border-radius: 50%;
+            color: #fff;
+            font-weight: bold;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
     }
     .kLogo {
         color: white;
@@ -215,7 +222,42 @@
         display: flex;
     }
 }
+.kNotificationsBar {
+    background-color: $kDandger;
+    width: 100%;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .notification {
+        color: white;
+        font-size: 14px;
+        font-weight: 700;
+        margin-right: 8px;
+    }
+    .kNotificationBtn {
+        font-size: 13px;
+        color: white;
+        font-weight: 700;
+        height: 24px;
+        background: rgba(255, 255, 255, 0.2);
+        margin-left: 8px;
+        &:hover {
+            background: rgba(255, 255, 255, 0.4);
+        }
+        &:active {
+            box-shadow: 0 0 0 1px rgb(255 255 255 / 60%);
+        }
+    }
+}
 
+.kStartPlan {
+    margin-right: 8px;
+    background: rgba(0,0,0,0.5);
+    &:hover {
+        background: rgba(0,0,0,0.3);
+    }
+}
 .kHeader {
     height: 78px;
     width: 100%;