From 60eb2acf08fd74b3da5928653f0d097b33cc6f0c Mon Sep 17 00:00:00 2001
From: vishnubansal <vishnu.bansal@tarento.com>
Date: Thu, 25 Jul 2024 14:32:24 +0530
Subject: [PATCH] update for cios mweb issues

---
 .../app-toc-about.component.html              |  6 +--
 .../app-toc-about.component.scss              |  2 +
 .../app-toc-about/app-toc-about.component.ts  |  1 +
 .../toc-kpi-values.component.ts               |  1 -
 package.json                                  |  2 +-
 .../app-toc-cios-home.component.html          | 50 +++++++++++++++++--
 .../app-toc-cios-home.component.scss          |  9 +++-
 .../app-toc-cios-home.component.ts            |  7 ++-
 .../see-all-home/see-all-home.component.html  |  2 +-
 9 files changed, 69 insertions(+), 11 deletions(-)

diff --git a/library/ws-widget/collection/src/lib/_common/content-toc/app-toc-about/app-toc-about.component.html b/library/ws-widget/collection/src/lib/_common/content-toc/app-toc-about/app-toc-about.component.html
index 9c6055b1d7..ecf37f9541 100644
--- a/library/ws-widget/collection/src/lib/_common/content-toc/app-toc-about/app-toc-about.component.html
+++ b/library/ws-widget/collection/src/lib/_common/content-toc/app-toc-about/app-toc-about.component.html
@@ -76,7 +76,7 @@
     </div>
 </ng-template>
 
-<div class="flex flex-col gap-10 my-4 px-4" [class.mt60]="sticky">
+<div class="flex flex-col my-4 px-4" [class.mt60]="sticky" [ngClass]="isMobile ? '' : 'gap-10'">
     
     <ng-container *ngIf="content?.completionStatus === 2 || content?.certificateObj?.certData">
         <div class="certificate-container" *ngIf="!skeletonLoader">
@@ -181,7 +181,7 @@
                 <ws-widget-skeleton-loader [width]="'60px'" [height]="'60px'" [bindingClass]="'rounded'"></ws-widget-skeleton-loader>
             </div>
         </ng-container>
-        <ng-container *ngIf="!skeletonLoader">
+        <ng-container *ngIf="!skeletonLoader && !fromMarketPlace">
             <ws-widget-toc-kpi-values [content]="content" [tocStructure]="tocStructure"
                 [isMobile]="isMobile"></ws-widget-toc-kpi-values>
         </ng-container>
@@ -403,7 +403,7 @@
         </div>
     </ng-container>
 
-    <ng-container *ngIf="!skeletonLoader">
+    <ng-container *ngIf="!skeletonLoader && !fromMarketPlace">
         <div class="flex flex-column gap-3" [ngClass]="{'hideAbove1200': !router.url.includes('/viewer/')}" >
             <div class="text-base font-bold">{{ 'apptocsinglepage.authorsAndCurators' | translate }}</div>
             <div class="flex flex-col gap-4">
diff --git a/library/ws-widget/collection/src/lib/_common/content-toc/app-toc-about/app-toc-about.component.scss b/library/ws-widget/collection/src/lib/_common/content-toc/app-toc-about/app-toc-about.component.scss
index dfff4d853f..7731bccb46 100644
--- a/library/ws-widget/collection/src/lib/_common/content-toc/app-toc-about/app-toc-about.component.scss
+++ b/library/ws-widget/collection/src/lib/_common/content-toc/app-toc-about/app-toc-about.component.scss
@@ -73,6 +73,8 @@
 
     .mob-text {
         color: rgba($color: #000000, $alpha: 0.6);
+        word-wrap: break-word;
+        width: 100%;
     }
 }
 
diff --git a/library/ws-widget/collection/src/lib/_common/content-toc/app-toc-about/app-toc-about.component.ts b/library/ws-widget/collection/src/lib/_common/content-toc/app-toc-about/app-toc-about.component.ts
index 605d36a247..edfe28cf51 100644
--- a/library/ws-widget/collection/src/lib/_common/content-toc/app-toc-about/app-toc-about.component.ts
+++ b/library/ws-widget/collection/src/lib/_common/content-toc/app-toc-about/app-toc-about.component.ts
@@ -104,6 +104,7 @@ export class AppTocAboutComponent implements OnInit, OnChanges, AfterViewInit, O
   @Input() fromViewer = false
   @Input() selectedBatchData: any
   @Input() selectedTabValue = 0
+  @Input() fromMarketPlace? = false
   @ViewChild('summaryElem', { static: false }) summaryElem !: ElementRef
   @ViewChild('objectivesElem', { static: false }) objectivesElem !: ElementRef
   @ViewChild('descElem', { static: false }) descElem !: ElementRef
diff --git a/library/ws-widget/collection/src/lib/_common/content-toc/toc-kpi-values/toc-kpi-values.component.ts b/library/ws-widget/collection/src/lib/_common/content-toc/toc-kpi-values/toc-kpi-values.component.ts
index 23c2847f58..25f3f555b7 100644
--- a/library/ws-widget/collection/src/lib/_common/content-toc/toc-kpi-values/toc-kpi-values.component.ts
+++ b/library/ws-widget/collection/src/lib/_common/content-toc/toc-kpi-values/toc-kpi-values.component.ts
@@ -13,7 +13,6 @@ export class TocKpiValuesComponent implements OnInit {
   @Input() content: NsContent.IContent | null = null
   @Input() isMobile = false
   @Input() showInstructorLedMsg = false
-
   constructor() { }
 
   ngOnInit() {
diff --git a/package.json b/package.json
index 2ae41f062d..1cc377b1e8 100644
--- a/package.json
+++ b/package.json
@@ -47,7 +47,7 @@
         "@project-sunbird/sb-styles": "0.0.7",
         "@project-sunbird/sunbird-quml-player": "0.0.6",
         "@project-sunbird/telemetry-sdk": "0.0.26",
-        "@sunbird-cb/consumption": "0.0.61",
+        "@sunbird-cb/consumption": "0.0.63",
         "@sunbird-cb/design-system": "0.0.2",
         "@sunbird-cb/discussions-ui-v8": "2.1.3",
         "@sunbird-cb/micro-surveys": "^2.0.17",
diff --git a/project/ws/app/src/lib/routes/app-toc/components/app-toc-cios-home/app-toc-cios-home.component.html b/project/ws/app/src/lib/routes/app-toc/components/app-toc-cios-home/app-toc-cios-home.component.html
index 3c6bcdc089..57504039b9 100644
--- a/project/ws/app/src/lib/routes/app-toc/components/app-toc-cios-home/app-toc-cios-home.component.html
+++ b/project/ws/app/src/lib/routes/app-toc/components/app-toc-cios-home/app-toc-cios-home.component.html
@@ -79,9 +79,53 @@
     </div>
     </div>
 </div>
+<div *ngIf="isMobile">
+    <div class="flex flex-col gap-4 p-5 border-bottom position-bottom">
+        <!-- <ng-container *ngIf="(userExtCourseEnroll | json) !== '{}'">
+            <div class="flex flex-row justify-end w-full ws-mat-black-text">
+                <span class="mat-body-2  ws-mat-black-text">
+                    {{userExtCourseEnroll.progress}}%</span>
+            </div>
+            <ws-widget-content-progress [contentId]="userExtCourseEnroll.progress"
+                                        [progress]="userExtCourseEnroll.progress"
+                                        [progressType]="'percentage'" [customClassName]="'viewer-progress'">
+                                    </ws-widget-content-progress>
+          </ng-container>   -->
+        <ng-container *ngIf="(userExtCourseEnroll | json) === '{}'">
+            <button class="flex action-button justify-center flex-middle resume" type="button" (click)="enRollToExtCourse(extContentReadData?.contentId)">
+              <ng-container >{{ 'apptochome.enroll' | translate }}
+              </ng-container>
+            </button>
+          </ng-container>
+        <ng-container *ngIf="(userExtCourseEnroll | json) !== '{}' && extContentReadData?.redirectUrl">
+            <a class="flex action-button justify-center flex-middle resume" target="_blank" [href]="extContentReadData?.redirectUrl">
+              <ng-container >{{ 'apptochome.redirect' | translate }}
+                <mat-icon class="ml-2 ws-mat-white-text">open_in_new</mat-icon>
+              </ng-container>
+            </a>
+          </ng-container>
+          <ng-container *ngIf="(userExtCourseEnroll | json) !== '{}' && userExtCourseEnroll.issued_certificates?.length > 0 
+            && userExtCourseEnroll.progress === 100">
+            <button class="flex action-button justify-center flex-middle resume" type="button" (click)="downloadCert()">
+                <!-- <img src="fusion-assets/images/certificate-ico.svg" width="24" height="24"> -->
+                <span>Certificate</span>
+                <mat-icon  *ngIf="!downloadCertificateLoading" class="ml-2">arrow_downward</mat-icon>
+                <div class="center flex flex-middle certificate-loader margin-left-s" *ngIf="downloadCertificateLoading">
+                    <mat-spinner strokeWidth="2" stroke="'white'" class="white-spinner" [diameter]="24"></mat-spinner>
+                  </div>
+            </button>
+        </ng-container> 
+    </div>
+    <div>
+        <div class="flex flex-col px-8 py-4 gap-2" *ngIf="extContentReadData?.duration > 0">
+            <img src="/assets/icons/toc/timer.svg" width="20px" alt="web image" />
+            <div class="text-xs">{{ extContentReadData?.duration * 60 | pipeDurationTransform: 'hms' }}</div>
+        </div>
+    </div>
+</div>
 <div class="flex flex-row gap-6 fixed-width">
-    <div class="toc-content mt-8 mb-8">
-        <div class="flex flex-col mt-8 mb-8">
+    <div class="toc-content" [ngClass]="isMobile ? '':'mt-8 mb-8'">
+        <div class="flex flex-col" [ngClass]="isMobile ? '':'mt-8 mb-8'">
             <ng-container *ngIf="skeletonLoader">
                 <ws-widget-skeleton-loader [width]="'80px'" [height]="'16px'"
                     [bindingClass]="'rounded'"></ws-widget-skeleton-loader>
@@ -95,7 +139,7 @@
                 </div>
             </ng-container>
             <ng-container *ngIf="!skeletonLoader">
-                <ws-widget-app-toc-about [content]="extContentReadData"></ws-widget-app-toc-about>
+                <ws-widget-app-toc-about [content]="extContentReadData" [fromMarketPlace]="true"></ws-widget-app-toc-about>
             </ng-container>
             
         </div>
diff --git a/project/ws/app/src/lib/routes/app-toc/components/app-toc-cios-home/app-toc-cios-home.component.scss b/project/ws/app/src/lib/routes/app-toc/components/app-toc-cios-home/app-toc-cios-home.component.scss
index a1904ea1ac..9947d200c9 100644
--- a/project/ws/app/src/lib/routes/app-toc/components/app-toc-cios-home/app-toc-cios-home.component.scss
+++ b/project/ws/app/src/lib/routes/app-toc/components/app-toc-cios-home/app-toc-cios-home.component.scss
@@ -63,6 +63,7 @@
 
     .banner-text {
       color: rgba(255, 255, 255, 0.95);
+      word-wrap: break-word;
     }
   }
 
@@ -820,7 +821,13 @@ ul{
   text-align: center;
 }
 
-.kpi-values[_ngcontent-feq-c30] img[_ngcontent-feq-c30] {
+.kpi-values img {
   height: 24px;
   width: 24px;
+}
+
+.position-bottom {
+  position: fixed;
+  width: 88%;
+  bottom: 0;
 }
\ No newline at end of file
diff --git a/project/ws/app/src/lib/routes/app-toc/components/app-toc-cios-home/app-toc-cios-home.component.ts b/project/ws/app/src/lib/routes/app-toc/components/app-toc-cios-home/app-toc-cios-home.component.ts
index 95d3783ae5..aad422ed67 100644
--- a/project/ws/app/src/lib/routes/app-toc/components/app-toc-cios-home/app-toc-cios-home.component.ts
+++ b/project/ws/app/src/lib/routes/app-toc/components/app-toc-cios-home/app-toc-cios-home.component.ts
@@ -26,7 +26,7 @@ export class AppTocCiosHomeComponent implements OnInit, AfterViewInit {
   @ViewChild('rightContainer', { static: false }) rcElement!: ElementRef
   scrollLimit: any
   scrolled: boolean | undefined
-
+  isMobile = false
   @HostListener('window:scroll', ['$event'])
   handleScroll() {
 
@@ -74,6 +74,11 @@ export class AppTocCiosHomeComponent implements OnInit, AfterViewInit {
   }
 
   ngOnInit() {
+    if (window.innerWidth <= 1200) {
+      this.isMobile = true
+    } else {
+      this.isMobile = false
+    }
   }
 
   handleCapitalize(str: string, type?: string): string {
diff --git a/project/ws/app/src/lib/routes/see-all/components/see-all-home/see-all-home.component.html b/project/ws/app/src/lib/routes/see-all/components/see-all-home/see-all-home.component.html
index a3aaa6dd3b..1fba9f708b 100644
--- a/project/ws/app/src/lib/routes/see-all/components/see-all-home/see-all-home.component.html
+++ b/project/ws/app/src/lib/routes/see-all/components/see-all-home/see-all-home.component.html
@@ -14,7 +14,7 @@
                 </div>
             </ng-container>
             <ng-container *ngIf="isCoisContent">
-                <div class="mr-2 mb-5" *ngFor="let c of contentDataList">
+                <div class="mr-2" *ngFor="let c of contentDataList">
                     <sb-uic-card-portrait-ext [widgetData]="c.widgetData" (contentData)="takeExtClickAction($event)"></sb-uic-card-portrait-ext>
                 </div>
             </ng-container>