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

Co-authored-by: d.strigo <d.strigo@akveo.com>
This commit is contained in:
Denis Strigo 2020-05-15 11:01:19 +03:00 committed by Sergey Andrievskiy
parent c416d894d4
commit 50b5696c3b
5 changed files with 38 additions and 13 deletions

View file

@ -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[]> {
return this.http.get(this.STORE_PRODUCTS)
getProducts(url: string): Observable<Product[]> {
return this.http.get(url)
.pipe(map((result: any) => {
return result.products.map((item: any) => {
return {

View file

@ -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"
nbButton>
class="package-card__buy-link btn">
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>

View file

@ -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;
box-shadow: 0 5px 29px 0 rgba(0, 219, 146, 0.32);
background-color: nb-theme(color-active-fg);
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 {

View file

@ -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);

View file

@ -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>