feat(demo): add bundles section to material lending page (#5677)

Co-authored-by: d.strigo <d.strigo@akveo.com>

docs/app/@core/data/service/bundles.service.ts

@@ -25,6 +25,11 @@ export const BUNDLE_LICENSE = {
   developer: 'developer',
 };
 
+export const STORE_PRODUCTS_URL = {
+  base: 'https://store.akveo.com/collections/frontpage/products.json',
+  material: 'https://store.akveo.com/collections/material-bundles/products.json',
+};
+
 export class Feature {
   text: string;
   availableInPersonalLicence: boolean;
@@ -34,7 +39,6 @@ export class Feature {
 @Injectable()
 export class BundlesService {
 
-  private readonly STORE_PRODUCTS: string = 'https://store.akveo.com/collections/frontpage/products.json';
   private readonly STORE: string = 'https://store.akveo.com/products';
 
   private features: Feature[] = [
@@ -81,8 +85,8 @@ export class BundlesService {
     return observableOf(this.features);
   }
 
-  getProducts(): Observable<Product[]> {
+  getProducts(url: string): Observable<Product[]> {
-    return this.http.get(this.STORE_PRODUCTS)
+    return this.http.get(url)
       .pipe(map((result: any) => {
         return result.products.map((item: any) => {
           return {

docs/app/pages/home/backend-bundles-section/backend-bundles-section.component.html

@@ -40,8 +40,7 @@
             <span class="package-card__price">${{ (product.variants | license:selectedLicenseType).price }}</span>
           </div>
           <a href="{{ product.storeUrl }}?utm_source=ngx_admin&utm_medium=referral&utm_campaign=akveo_store%20-%20specific%20bundle%20-%20ngx_admin%20landing&utm_content=buy_bundle_{{ selectedLicenseType }}"
-             class="package-card__buy-link btn btn-demo"
+             class="package-card__buy-link btn">
-             nbButton>
              Buy now
           </a>
         </nb-card-body>
@@ -50,11 +49,11 @@
   </ul>
 
   <div class="request-code-section">
-    <a href="https://github.com/akveo/ngx-admin-bundle-support/tree/master/codeSamples" target="_blank" class="package-card__buy-link btn btn-demo" nbButton>
+    <a href="https://github.com/akveo/ngx-admin-bundle-support/tree/master/codeSamples" target="_blank" class="package-card__buy-link btn">
       CODE SAMPLE
     </a>
 
-    <a href="https://hubs.ly/H0n5NTk0" target="_blank" class="package-card__buy-link btn btn-demo" nbButton>
+    <a href="https://hubs.ly/H0n5NTk0" target="_blank" class="package-card__buy-link btn">
       BROWSE OTHER BUNDLES
     </a>
   </div>
@@ -107,7 +106,7 @@
   <p class="features__description">Need more details or have a question?</p>
 
   <div class="request-code-section">
-    <a href="mailto:support@akveo.com?subject=Custom bundle request" class="package-card__buy-link btn btn-demo" nbButton>
+    <a href="mailto:support@akveo.com?subject=Custom bundle request" class="package-card__buy-link btn">
       CONTACT US
     </a>
   </div>

docs/app/pages/home/backend-bundles-section/backend-bundles-section.component.scss

@@ -112,6 +112,7 @@
       &:active {
         color: #ffffff;
       }
+
       &.active {
         color: #000000;
         background-color: #fafafa;
@@ -258,13 +259,18 @@
       font-size: 0.75rem;
       color: #ffffff;
       text-transform: uppercase;
-      background-color: #18cb90;
+      background-color: nb-theme(color-active-fg);
-      box-shadow: 0 5px 29px 0 rgba(0, 219, 146, 0.32);
+      box-shadow: nb-theme(shadow-btn);
       border-radius: 3px;
       margin-top: 0.5rem;
       cursor: pointer;
+
       &:hover {
-        box-shadow: 0 0.375rem 2.125rem 0 rgba(0, 219, 146, 0.32);
+        box-shadow: nb-theme(shadow-hover-green-btn);
+      }
+
+      &:active {
+        box-shadow: nb-theme(shadow-active-green-btn);
       }
     }
     &__type {

docs/app/pages/home/backend-bundles-section/backend-bundles-section.component.ts

@@ -4,7 +4,7 @@
  * Licensed under the MIT License. See License.txt in the project root for license information.
  */
 
-import { AfterViewInit, Component, ElementRef, EventEmitter, Inject, Output } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, EventEmitter, Inject, Input, Output } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { Observable } from 'rxjs';
 import { delay, filter, take } from 'rxjs/operators';
@@ -12,6 +12,7 @@ import { NB_WINDOW } from '@nebular/theme';
 
 import {
   BUNDLE_LICENSE,
+  STORE_PRODUCTS_URL,
   BundlesService,
   Feature,
   Product,
@@ -28,13 +29,22 @@ import { LicensePipe } from '../backend-bundles-section/license.pipe';
 export class BackendBundlesSectionComponent implements AfterViewInit {
 
   @Output() loaded = new EventEmitter();
+  @Input()
+  set material(value: boolean | undefined) {
+    if (value) {
+      this.productUrl = STORE_PRODUCTS_URL.material;
+
+      this.getProducts();
+    }
+  }
 
   selectedLicenseType = BUNDLE_LICENSE.personal;
+  productUrl = STORE_PRODUCTS_URL.base;
 
   licenses = Object.values(BUNDLE_LICENSE);
 
   descriptions: Observable<Descriptions[]> = this.descriptionService.getBundleDescriptions();
-  products: Observable<Product[]> = this.bundlesService.getProducts();
+  products: Observable<Product[]>;
   features: Observable<Feature[]> = this.bundlesService.getFeatures();
 
   constructor(private descriptionService: DescriptionsService,
@@ -43,6 +53,7 @@ export class BackendBundlesSectionComponent implements AfterViewInit {
               private el: ElementRef<HTMLElement>,
               @Inject(NB_WINDOW) private window,
               private licensePipe: LicensePipe) {
+    this.getProducts();
   }
 
   ngAfterViewInit() {
@@ -57,6 +68,10 @@ export class BackendBundlesSectionComponent implements AfterViewInit {
       });
   }
 
+  getProducts() {
+    this.products = this.bundlesService.getProducts(this.productUrl);
+  }
+
   shouldShowOldPrice(variants: ProductVariant[], selectedLicenseType: string): boolean {
     const product = this.licensePipe.transform(variants, selectedLicenseType);
 

docs/app/pages/home/material-landing/material-landing.component.html

@@ -9,6 +9,7 @@
     <ngx-landing-main-info material></ngx-landing-main-info>
     <ngx-material-features></ngx-material-features>
     <ngx-landing-theme-section material></ngx-landing-theme-section>
+    <ngx-backend-bundles-section [material]="true"></ngx-backend-bundles-section>
     <ngx-contact-form></ngx-contact-form>
   </nb-layout-column>