@rolatech/angular-checkout 19.0.0-beta.9 → 20.0.0-beta.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +0 -6
- package/fesm2022/rolatech-angular-checkout.mjs +90 -32
- package/fesm2022/rolatech-angular-checkout.mjs.map +1 -1
- package/index.d.ts +52 -2
- package/package.json +19 -7
- package/lib/components/checkout-action/checkout-action.component.d.ts +0 -8
- package/lib/components/checkout-item/checkout-item.component.d.ts +0 -22
- package/lib/components/checkout-shipping/checkout-shipping.component.d.ts +0 -6
- package/lib/components/checkout-summary/checkout-summary.component.d.ts +0 -10
- package/lib/components/index.d.ts +0 -4
- package/lib/pages/checkout-cart/checkout-cart.component.d.ts +0 -22
- package/lib/pages/checkout-course/checkout-course.component.d.ts +0 -20
- package/lib/pages/checkout-product/checkout-product.component.d.ts +0 -23
- package/lib/pages/checkout-product-variant/checkout-product-variant.component.d.ts +0 -23
- package/lib/pages/checkout.routes.d.ts +0 -2
- package/themes/_default.scss +0 -0
package/README.md
CHANGED
|
@@ -3,7 +3,7 @@ import { inject, Component, input, output, computed, booleanAttribute, model, Vi
|
|
|
3
3
|
import { BaseComponent, ThumbnailComponent, ContainerComponent, ToolbarComponent } from '@rolatech/angular-components';
|
|
4
4
|
import { AuthUserService } from '@rolatech/angular-auth';
|
|
5
5
|
import { CourseService, CourseType } from '@rolatech/angular-course';
|
|
6
|
-
import { OrderService, ProductService, CartService, TitleService } from '@rolatech/angular-services';
|
|
6
|
+
import { OrderService, ProductService, CartService, TitleService, MembershipService } from '@rolatech/angular-services';
|
|
7
7
|
import * as i1 from '@angular/material/button';
|
|
8
8
|
import { MatButtonModule } from '@angular/material/button';
|
|
9
9
|
import { FixedPipe, OptionsFormatPipe } from '@rolatech/angular-common';
|
|
@@ -16,6 +16,7 @@ import * as i3 from '@angular/material/input';
|
|
|
16
16
|
import { MatInputModule } from '@angular/material/input';
|
|
17
17
|
import * as i1$1 from '@angular/forms';
|
|
18
18
|
import { FormsModule } from '@angular/forms';
|
|
19
|
+
import * as i1$2 from '@angular/common';
|
|
19
20
|
import { CommonModule } from '@angular/common';
|
|
20
21
|
import { MatIcon } from '@angular/material/icon';
|
|
21
22
|
import * as i2 from '@angular/material/checkbox';
|
|
@@ -59,24 +60,24 @@ class CheckoutCourseComponent extends BaseComponent {
|
|
|
59
60
|
},
|
|
60
61
|
});
|
|
61
62
|
}
|
|
62
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
63
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
63
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: CheckoutCourseComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
64
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: CheckoutCourseComponent, isStandalone: true, selector: "rolatech-checkout-course", usesInheritance: true, ngImport: i0, template: "@if (course) {\n <rolatech-container>\n <rolatech-toolbar title=\"Order\" large></rolatech-toolbar>\n <div class=\"flex flex-col md:flex-row gap-3 mt-3\">\n <div class=\"md:w-2/3 md:pr-16\">\n <div class=\"flex flex-col\">\n <div class=\"text-xl\" i18n>Course info</div>\n @if (course) {\n <div>\n <div class=\"flex justify-between py-3\">\n <div class=\"flex w-full\">\n <div class=\"w-1/4 aspect-video bg-[--rt-raised-background] h-fit\">\n @if (course.media) {\n <div class=\"object-cover aspect-video rounded-lg\">\n @defer (on viewport()) {\n <rolatech-thumbnail [src]=\"course.media[0].url + '!w400'\" size=\"medium\"> </rolatech-thumbnail>\n } @placeholder {\n <div class=\"bg-[--rt-raised-background] h-full w-full object-cover aspect-video rounded-lg\"></div>\n }\n </div>\n }\n </div>\n <div class=\"w-3/4 ml-3 flex flex-col justify-between\">\n <span class=\"font-medium\">{{ course.name }}</span>\n <span class=\"text-sm text-[--rt-text-secondary]\" i18n>Type {{ type[course.type] }}</span>\n </div>\n </div>\n <div>\u00A5{{ course.pricing[0].total | fixed }}</div>\n </div>\n @if (course.schedule) {\n <div class=\"flex justify-between py-3\">\n <span i18n>Start at</span>\n <span>{{ course.schedule[0].startAt }}</span>\n </div>\n }\n </div>\n }\n </div>\n </div>\n <div class=\"md:w-1/3\">\n <div class=\"text-2xl font-medium mb-2\" i18n>Summary</div>\n <div class=\"divide-y divide-[--rt-10-percent-layer]\">\n <div class=\"flex justify-between py-2 pb-32 md:pb-3\">\n <span i18n> Total </span>\n <span> \u00A5{{ course.pricing[0].total | fixed }} </span>\n </div>\n <div class=\"py-3 bottom-0 left-0 right-0 md:static\">\n <div>\n <div class=\"flex justify-between\">\n <span class=\"text-lg font-medium\" i18n>Total</span>\n <span>\u00A5{{ course.pricing[0].total | fixed }}</span>\n </div>\n <a mat-flat-button class=\"w-full min-h-11 my-6\" (click)=\"createOrder()\" i18n>Place order</a>\n </div>\n </div>\n </div>\n </div>\n </div>\n </rolatech-container>\n}\n", styles: [""], dependencies: [{ kind: "component", type: ContainerComponent, selector: "rolatech-container" }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "pipe", type: FixedPipe, name: "fixed" }], deferBlockDependencies: [() => [ThumbnailComponent]] });
|
|
64
65
|
}
|
|
65
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
66
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: CheckoutCourseComponent, decorators: [{
|
|
66
67
|
type: Component,
|
|
67
|
-
args: [{ selector: 'rolatech-checkout-course', imports: [ContainerComponent, ToolbarComponent, ThumbnailComponent, MatButtonModule, FixedPipe], template: "@if (course) {\n <rolatech-container>\n <rolatech-toolbar title=\"\
|
|
68
|
+
args: [{ selector: 'rolatech-checkout-course', imports: [ContainerComponent, ToolbarComponent, ThumbnailComponent, MatButtonModule, FixedPipe], template: "@if (course) {\n <rolatech-container>\n <rolatech-toolbar title=\"Order\" large></rolatech-toolbar>\n <div class=\"flex flex-col md:flex-row gap-3 mt-3\">\n <div class=\"md:w-2/3 md:pr-16\">\n <div class=\"flex flex-col\">\n <div class=\"text-xl\" i18n>Course info</div>\n @if (course) {\n <div>\n <div class=\"flex justify-between py-3\">\n <div class=\"flex w-full\">\n <div class=\"w-1/4 aspect-video bg-[--rt-raised-background] h-fit\">\n @if (course.media) {\n <div class=\"object-cover aspect-video rounded-lg\">\n @defer (on viewport()) {\n <rolatech-thumbnail [src]=\"course.media[0].url + '!w400'\" size=\"medium\"> </rolatech-thumbnail>\n } @placeholder {\n <div class=\"bg-[--rt-raised-background] h-full w-full object-cover aspect-video rounded-lg\"></div>\n }\n </div>\n }\n </div>\n <div class=\"w-3/4 ml-3 flex flex-col justify-between\">\n <span class=\"font-medium\">{{ course.name }}</span>\n <span class=\"text-sm text-[--rt-text-secondary]\" i18n>Type {{ type[course.type] }}</span>\n </div>\n </div>\n <div>\u00A5{{ course.pricing[0].total | fixed }}</div>\n </div>\n @if (course.schedule) {\n <div class=\"flex justify-between py-3\">\n <span i18n>Start at</span>\n <span>{{ course.schedule[0].startAt }}</span>\n </div>\n }\n </div>\n }\n </div>\n </div>\n <div class=\"md:w-1/3\">\n <div class=\"text-2xl font-medium mb-2\" i18n>Summary</div>\n <div class=\"divide-y divide-[--rt-10-percent-layer]\">\n <div class=\"flex justify-between py-2 pb-32 md:pb-3\">\n <span i18n> Total </span>\n <span> \u00A5{{ course.pricing[0].total | fixed }} </span>\n </div>\n <div class=\"py-3 bottom-0 left-0 right-0 md:static\">\n <div>\n <div class=\"flex justify-between\">\n <span class=\"text-lg font-medium\" i18n>Total</span>\n <span>\u00A5{{ course.pricing[0].total | fixed }}</span>\n </div>\n <a mat-flat-button class=\"w-full min-h-11 my-6\" (click)=\"createOrder()\" i18n>Place order</a>\n </div>\n </div>\n </div>\n </div>\n </div>\n </rolatech-container>\n}\n" }]
|
|
68
69
|
}] });
|
|
69
70
|
|
|
70
71
|
class CheckoutActionComponent {
|
|
71
|
-
title = input('
|
|
72
|
+
title = input('Submit');
|
|
72
73
|
create = output();
|
|
73
74
|
onCreate() {
|
|
74
75
|
this.create.emit();
|
|
75
76
|
}
|
|
76
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
77
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "
|
|
77
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: CheckoutActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
78
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.3", type: CheckoutActionComponent, isStandalone: true, selector: "rolatech-checkout-action", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { create: "create" }, ngImport: i0, template: "<a mat-flat-button class=\"w-full min-h-11 my-6\" (click)=\"onCreate()\">{{ title() }}</a>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }] });
|
|
78
79
|
}
|
|
79
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
80
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: CheckoutActionComponent, decorators: [{
|
|
80
81
|
type: Component,
|
|
81
82
|
args: [{ selector: 'rolatech-checkout-action', imports: [CommonModule, MatButtonModule], template: "<a mat-flat-button class=\"w-full min-h-11 my-6\" (click)=\"onCreate()\">{{ title() }}</a>\n" }]
|
|
82
83
|
}] });
|
|
@@ -94,12 +95,12 @@ class CheckoutSummaryComponent {
|
|
|
94
95
|
remainingDisplay = computed(() => {
|
|
95
96
|
return ((this.total() - this.deposit()) / 100).toFixed(2);
|
|
96
97
|
});
|
|
97
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
98
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
98
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: CheckoutSummaryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
99
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: CheckoutSummaryComponent, isStandalone: true, selector: "rolatech-checkout-summary", inputs: { deposit: { classPropertyName: "deposit", publicName: "deposit", isSignal: true, isRequired: false, transformFunction: null }, total: { classPropertyName: "total", publicName: "total", isSignal: true, isRequired: true, transformFunction: null }, quantity: { classPropertyName: "quantity", publicName: "quantity", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"text-2xl font-medium mb-2\" i18n>Stats</div>\n<div class=\"divide-y divide-[--rt-10-percent-layer] pb-32 md:pb-3\">\n @if (deposit()) {\n <div class=\"flex justify-between py-2\">\n <span i18n>Deposit</span>\n <span> \u00A5{{ depositDisplay() }} </span>\n </div>\n <div class=\"flex justify-between py-2\">\n <span i18n> Remaining </span>\n <span> \u00A5{{ remainingDisplay() }} </span>\n </div>\n } @else {\n <div class=\"flex justify-between py-2\">\n <span i18n> Quantity </span>\n <span i18n> {{ quantity() }}\u4EF6 </span>\n </div>\n <div class=\"flex justify-between py-2\">\n <span i18n> Total </span>\n <span> \u00A5{{ total() | fixed }} </span>\n </div>\n }\n <div class=\"py-3 bottom-0 left-0 right-0 md:static\">\n <div>\n <div class=\"flex justify-between\">\n <span class=\"text-lg font-medium\" i18n>Total</span>\n <span>\u00A5{{ total() | fixed }}</span>\n </div>\n </div>\n </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: FixedPipe, name: "fixed" }] });
|
|
99
100
|
}
|
|
100
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
101
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: CheckoutSummaryComponent, decorators: [{
|
|
101
102
|
type: Component,
|
|
102
|
-
args: [{ selector: 'rolatech-checkout-summary', imports: [CommonModule, FixedPipe], template: "<div class=\"text-2xl font-medium mb-2\"
|
|
103
|
+
args: [{ selector: 'rolatech-checkout-summary', imports: [CommonModule, FixedPipe], template: "<div class=\"text-2xl font-medium mb-2\" i18n>Stats</div>\n<div class=\"divide-y divide-[--rt-10-percent-layer] pb-32 md:pb-3\">\n @if (deposit()) {\n <div class=\"flex justify-between py-2\">\n <span i18n>Deposit</span>\n <span> \u00A5{{ depositDisplay() }} </span>\n </div>\n <div class=\"flex justify-between py-2\">\n <span i18n> Remaining </span>\n <span> \u00A5{{ remainingDisplay() }} </span>\n </div>\n } @else {\n <div class=\"flex justify-between py-2\">\n <span i18n> Quantity </span>\n <span i18n> {{ quantity() }}\u4EF6 </span>\n </div>\n <div class=\"flex justify-between py-2\">\n <span i18n> Total </span>\n <span> \u00A5{{ total() | fixed }} </span>\n </div>\n }\n <div class=\"py-3 bottom-0 left-0 right-0 md:static\">\n <div>\n <div class=\"flex justify-between\">\n <span class=\"text-lg font-medium\" i18n>Total</span>\n <span>\u00A5{{ total() | fixed }}</span>\n </div>\n </div>\n </div>\n</div>\n" }]
|
|
103
104
|
}] });
|
|
104
105
|
|
|
105
106
|
class CheckoutItemComponent {
|
|
@@ -134,12 +135,12 @@ class CheckoutItemComponent {
|
|
|
134
135
|
console.log(this.selected());
|
|
135
136
|
this.toggleSelect.emit();
|
|
136
137
|
}
|
|
137
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
138
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
138
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: CheckoutItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
139
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: CheckoutItemComponent, isStandalone: true, selector: "rolatech-checkout-item", inputs: { selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, thumbnail: { classPropertyName: "thumbnail", publicName: "thumbnail", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, quantity: { classPropertyName: "quantity", publicName: "quantity", isSignal: true, isRequired: false, transformFunction: null }, price: { classPropertyName: "price", publicName: "price", isSignal: true, isRequired: true, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selectedChange", quantity: "quantityChange", add: "add", remove: "remove", delete: "delete", toggleSelect: "toggleSelect" }, ngImport: i0, template: "<div class=\"flex justify-between py-3\">\n <div class=\"flex w-full\">\n @if (selectable()) {\n <mat-checkbox [checked]=\"selected()\" (change)=\"onToggleSelect()\" (click)=\"$event.stopPropagation()\"></mat-checkbox>\n }\n <div class=\"w-1/4 aspect-video bg-[--rt-raised-background] rounded-lg h-fit\">\n <div class=\"object-cover aspect-video\">\n @defer (on viewport()) {\n <rolatech-thumbnail [src]=\"thumbnail()\" size=\"medium\" mode=\"full\"> </rolatech-thumbnail>\n } @placeholder {\n <div class=\"bg-[--rt-raised-background] h-full w-full object-cover aspect-video\"></div>\n }\n </div>\n </div>\n <div class=\"w-3/4 ml-3 flex flex-col justify-between\">\n <!-- info -->\n <div class=\"flex justify-between\">\n <div class=\"flex flex-col\">\n <span class=\"text-lg font-bold line-clamp-1\">{{ name() }}</span>\n <span class=\"text-sm text-[--rt-text-secondary] mt-2 line-clamp-2\">{{ description() }}</span>\n </div>\n <div class=\"p-1\">\u00A5{{ priceDisplay() }}</div>\n </div>\n <!-- action -->\n <div class=\"flex justify-between items-center w-full\">\n <div class=\"flex items-center text-sm\">\n <span class=\"mr-3\" i18n>quantity</span>\n <button mat-icon-button (click)=\"onRemove()\" [disabled]=\"quantity() === 1\">\n <mat-icon>remove</mat-icon>\n </button>\n <span class=\"w-11 text-center\">{{ quantity() }}</span>\n <button mat-icon-button (click)=\"onAdd()\" [disabled]=\"quantity() === max()\">\n <mat-icon>add</mat-icon>\n </button>\n </div>\n <button mat-icon-button (click)=\"onDelete()\">\n <mat-icon>delete</mat-icon>\n </button>\n </div>\n </div>\n </div>\n</div>\n", styles: ["mat-icon{scale:.7}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }], deferBlockDependencies: [() => [import('@rolatech/angular-components').then(m => m.ThumbnailComponent)]] });
|
|
139
140
|
}
|
|
140
|
-
i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "
|
|
141
|
+
i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "20.0.3", ngImport: i0, type: CheckoutItemComponent, resolveDeferredDeps: () => [import('@rolatech/angular-components').then(m => m.ThumbnailComponent)], resolveMetadata: ThumbnailComponent => ({ decorators: [{
|
|
141
142
|
type: Component,
|
|
142
|
-
args: [{ selector: 'rolatech-checkout-item', imports: [CommonModule, ThumbnailComponent, MatIcon, MatButtonModule, MatCheckboxModule], template: "<div class=\"flex justify-between py-3\">\n <div class=\"flex w-full\">\n @if (selectable()) {\n <mat-checkbox [checked]=\"selected()\" (change)=\"onToggleSelect()\" (click)=\"$event.stopPropagation()\"></mat-checkbox>\n }\n <div class=\"w-1/4 aspect-video bg-[--rt-raised-background] rounded-lg h-fit\">\n <div class=\"object-cover aspect-video\">\n @defer (on viewport()) {\n <rolatech-thumbnail [src]=\"thumbnail()\" size=\"medium\" mode=\"full\"> </rolatech-thumbnail>\n } @placeholder {\n <div class=\"bg-[--rt-raised-background] h-full w-full object-cover aspect-video\"></div>\n }\n </div>\n </div>\n <div class=\"w-3/4 ml-3 flex flex-col justify-between\">\n <!-- info -->\n <div class=\"flex justify-between\">\n <div class=\"flex flex-col\">\n <span class=\"text-lg font-bold line-clamp-1\">{{ name() }}</span>\n <span class=\"text-sm text-[--rt-text-secondary] mt-2 line-clamp-2\">{{ description() }}</span>\n </div>\n <div class=\"p-1\">\u00A5{{ priceDisplay() }}</div>\n </div>\n <!-- action -->\n <div class=\"flex justify-between items-center w-full\">\n <div class=\"flex items-center text-sm\">\n <span class=\"mr-3\"
|
|
143
|
+
args: [{ selector: 'rolatech-checkout-item', imports: [CommonModule, ThumbnailComponent, MatIcon, MatButtonModule, MatCheckboxModule], template: "<div class=\"flex justify-between py-3\">\n <div class=\"flex w-full\">\n @if (selectable()) {\n <mat-checkbox [checked]=\"selected()\" (change)=\"onToggleSelect()\" (click)=\"$event.stopPropagation()\"></mat-checkbox>\n }\n <div class=\"w-1/4 aspect-video bg-[--rt-raised-background] rounded-lg h-fit\">\n <div class=\"object-cover aspect-video\">\n @defer (on viewport()) {\n <rolatech-thumbnail [src]=\"thumbnail()\" size=\"medium\" mode=\"full\"> </rolatech-thumbnail>\n } @placeholder {\n <div class=\"bg-[--rt-raised-background] h-full w-full object-cover aspect-video\"></div>\n }\n </div>\n </div>\n <div class=\"w-3/4 ml-3 flex flex-col justify-between\">\n <!-- info -->\n <div class=\"flex justify-between\">\n <div class=\"flex flex-col\">\n <span class=\"text-lg font-bold line-clamp-1\">{{ name() }}</span>\n <span class=\"text-sm text-[--rt-text-secondary] mt-2 line-clamp-2\">{{ description() }}</span>\n </div>\n <div class=\"p-1\">\u00A5{{ priceDisplay() }}</div>\n </div>\n <!-- action -->\n <div class=\"flex justify-between items-center w-full\">\n <div class=\"flex items-center text-sm\">\n <span class=\"mr-3\" i18n>quantity</span>\n <button mat-icon-button (click)=\"onRemove()\" [disabled]=\"quantity() === 1\">\n <mat-icon>remove</mat-icon>\n </button>\n <span class=\"w-11 text-center\">{{ quantity() }}</span>\n <button mat-icon-button (click)=\"onAdd()\" [disabled]=\"quantity() === max()\">\n <mat-icon>add</mat-icon>\n </button>\n </div>\n <button mat-icon-button (click)=\"onDelete()\">\n <mat-icon>delete</mat-icon>\n </button>\n </div>\n </div>\n </div>\n</div>\n", styles: ["mat-icon{scale:.7}\n"] }]
|
|
143
144
|
}], ctorParameters: null, propDecorators: null }) });
|
|
144
145
|
|
|
145
146
|
class CheckoutProductComponent extends BaseComponent {
|
|
@@ -175,10 +176,10 @@ class CheckoutProductComponent extends BaseComponent {
|
|
|
175
176
|
},
|
|
176
177
|
});
|
|
177
178
|
}
|
|
178
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
179
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
179
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: CheckoutProductComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
180
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: CheckoutProductComponent, isStandalone: true, selector: "rolatech-checkout-product", usesInheritance: true, ngImport: i0, template: "@if (product) {\n <rolatech-container>\n <rolatech-toolbar title=\"Order confirm\" large></rolatech-toolbar>\n <div class=\"flex flex-col md:flex-row gap-3 mt-3\">\n <div class=\"md:w-2/3 md:pr-16\">\n <div class=\"flex flex-col\">\n <div class=\"text-xl\" i18n>Products</div>\n <rolatech-checkout-item\n [name]=\"product.name\"\n [description]=\"product.description\"\n [thumbnail]=\"product.media[0].url + '!w200'\"\n [price]=\"product.price\"\n [(quantity)]=\"quantity\"\n ></rolatech-checkout-item>\n </div>\n <div>\n <div class=\"text-md py-2\" i18n>Shipping info</div>\n <div class=\"flex flex-col md:flex-row gap-2\">\n <mat-form-field appearance=\"fill\">\n <mat-label i18n>Name</mat-label>\n <input matInput type=\"text\" [(ngModel)]=\"address.name\" />\n </mat-form-field>\n <mat-form-field appearance=\"fill\">\n <mat-label i18n>Phone</mat-label>\n <input matInput type=\"text\" [(ngModel)]=\"address.phone\" />\n </mat-form-field>\n </div>\n <div class=\"flex flex-col md:flex-row gap-2\">\n <mat-form-field appearance=\"fill\">\n <mat-label i18n>Province</mat-label>\n <input matInput type=\"text\" [(ngModel)]=\"address.province\" />\n </mat-form-field>\n <mat-form-field appearance=\"fill\">\n <mat-label i18n>City</mat-label>\n <input matInput type=\"text\" [(ngModel)]=\"address.city\" />\n </mat-form-field>\n <mat-form-field appearance=\"fill\">\n <mat-label i18n>district</mat-label>\n <input matInput type=\"text\" [(ngModel)]=\"address.district\" />\n </mat-form-field>\n </div>\n\n <mat-form-field appearance=\"fill\">\n <mat-label i18n>Address</mat-label>\n <textarea matInput type=\"text\" [(ngModel)]=\"address.detail\" cdkTextareaAutosize cdkAutosizeMinRows=\"3\"></textarea>\n </mat-form-field>\n </div>\n <div>\n <div class=\"text-md\" i18n>Note</div>\n <mat-form-field appearance=\"fill\">\n <textarea matInput type=\"text\" [(ngModel)]=\"note\" cdkTextareaAutosize cdkAutosizeMinRows=\"3\"></textarea>\n </mat-form-field>\n </div>\n </div>\n <div class=\"md:w-1/3\">\n @if (product.priceType && product.priceType.toString() === 'PARTIAL') {\n <rolatech-checkout-summary [total]=\"product.price\" [deposit]=\"product.deposit\"></rolatech-checkout-summary>\n } @else {\n <rolatech-checkout-summary [total]=\"product.price\" [quantity]=\"quantity\"></rolatech-checkout-summary>\n }\n <rolatech-checkout-action\n (create)=\"createOrder()\"\n [title]=\"product.priceType && product.priceType.toString() === 'FIXED' ? 'Submit' : 'Submit'\"\n ></rolatech-checkout-action>\n </div>\n </div>\n </rolatech-container>\n}\n", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "component", type: ContainerComponent, selector: "rolatech-container" }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: CheckoutSummaryComponent, selector: "rolatech-checkout-summary", inputs: ["deposit", "total", "quantity"] }, { kind: "component", type: CheckoutItemComponent, selector: "rolatech-checkout-item", inputs: ["selectable", "thumbnail", "name", "selected", "description", "quantity", "price", "max"], outputs: ["selectedChange", "quantityChange", "add", "remove", "delete", "toggleSelect"] }, { kind: "component", type: CheckoutActionComponent, selector: "rolatech-checkout-action", inputs: ["title"], outputs: ["create"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i4.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: TextFieldModule }], encapsulation: i0.ViewEncapsulation.None });
|
|
180
181
|
}
|
|
181
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
182
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: CheckoutProductComponent, decorators: [{
|
|
182
183
|
type: Component,
|
|
183
184
|
args: [{ selector: 'rolatech-checkout-product', imports: [
|
|
184
185
|
ContainerComponent,
|
|
@@ -191,17 +192,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
|
|
|
191
192
|
MatFormFieldModule,
|
|
192
193
|
MatInputModule,
|
|
193
194
|
TextFieldModule,
|
|
194
|
-
], encapsulation: ViewEncapsulation.None, template: "@if (product) {\n <rolatech-container>\n <rolatech-toolbar title=\"\
|
|
195
|
+
], encapsulation: ViewEncapsulation.None, template: "@if (product) {\n <rolatech-container>\n <rolatech-toolbar title=\"Order confirm\" large></rolatech-toolbar>\n <div class=\"flex flex-col md:flex-row gap-3 mt-3\">\n <div class=\"md:w-2/3 md:pr-16\">\n <div class=\"flex flex-col\">\n <div class=\"text-xl\" i18n>Products</div>\n <rolatech-checkout-item\n [name]=\"product.name\"\n [description]=\"product.description\"\n [thumbnail]=\"product.media[0].url + '!w200'\"\n [price]=\"product.price\"\n [(quantity)]=\"quantity\"\n ></rolatech-checkout-item>\n </div>\n <div>\n <div class=\"text-md py-2\" i18n>Shipping info</div>\n <div class=\"flex flex-col md:flex-row gap-2\">\n <mat-form-field appearance=\"fill\">\n <mat-label i18n>Name</mat-label>\n <input matInput type=\"text\" [(ngModel)]=\"address.name\" />\n </mat-form-field>\n <mat-form-field appearance=\"fill\">\n <mat-label i18n>Phone</mat-label>\n <input matInput type=\"text\" [(ngModel)]=\"address.phone\" />\n </mat-form-field>\n </div>\n <div class=\"flex flex-col md:flex-row gap-2\">\n <mat-form-field appearance=\"fill\">\n <mat-label i18n>Province</mat-label>\n <input matInput type=\"text\" [(ngModel)]=\"address.province\" />\n </mat-form-field>\n <mat-form-field appearance=\"fill\">\n <mat-label i18n>City</mat-label>\n <input matInput type=\"text\" [(ngModel)]=\"address.city\" />\n </mat-form-field>\n <mat-form-field appearance=\"fill\">\n <mat-label i18n>district</mat-label>\n <input matInput type=\"text\" [(ngModel)]=\"address.district\" />\n </mat-form-field>\n </div>\n\n <mat-form-field appearance=\"fill\">\n <mat-label i18n>Address</mat-label>\n <textarea matInput type=\"text\" [(ngModel)]=\"address.detail\" cdkTextareaAutosize cdkAutosizeMinRows=\"3\"></textarea>\n </mat-form-field>\n </div>\n <div>\n <div class=\"text-md\" i18n>Note</div>\n <mat-form-field appearance=\"fill\">\n <textarea matInput type=\"text\" [(ngModel)]=\"note\" cdkTextareaAutosize cdkAutosizeMinRows=\"3\"></textarea>\n </mat-form-field>\n </div>\n </div>\n <div class=\"md:w-1/3\">\n @if (product.priceType && product.priceType.toString() === 'PARTIAL') {\n <rolatech-checkout-summary [total]=\"product.price\" [deposit]=\"product.deposit\"></rolatech-checkout-summary>\n } @else {\n <rolatech-checkout-summary [total]=\"product.price\" [quantity]=\"quantity\"></rolatech-checkout-summary>\n }\n <rolatech-checkout-action\n (create)=\"createOrder()\"\n [title]=\"product.priceType && product.priceType.toString() === 'FIXED' ? 'Submit' : 'Submit'\"\n ></rolatech-checkout-action>\n </div>\n </div>\n </rolatech-container>\n}\n", styles: ["mat-form-field{width:100%}\n"] }]
|
|
195
196
|
}] });
|
|
196
197
|
|
|
197
198
|
class CheckoutShippingComponent {
|
|
198
199
|
address = model();
|
|
199
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
200
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "
|
|
200
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: CheckoutShippingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
201
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.3", type: CheckoutShippingComponent, isStandalone: true, selector: "rolatech-checkout-shipping", inputs: { address: { classPropertyName: "address", publicName: "address", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { address: "addressChange" }, ngImport: i0, template: "<div>\n <div class=\"text-md font-bold py-2\" i18n>Shipping info</div>\n <div class=\"flex flex-col md:flex-row gap-2\">\n <mat-form-field appearance=\"fill\">\n <mat-label i18n>Name</mat-label>\n <input matInput type=\"text\" [(ngModel)]=\"address().name\" />\n </mat-form-field>\n <mat-form-field appearance=\"fill\">\n <mat-label i18n>Phone</mat-label>\n <input matInput type=\"text\" [(ngModel)]=\"address().phone\" />\n </mat-form-field>\n </div>\n <div class=\"flex flex-col md:flex-row gap-2\">\n <mat-form-field appearance=\"fill\">\n <mat-label i18n>Province</mat-label>\n <input matInput type=\"text\" [(ngModel)]=\"address().province\" />\n </mat-form-field>\n <mat-form-field appearance=\"fill\">\n <mat-label i18n>City</mat-label>\n <input matInput type=\"text\" [(ngModel)]=\"address().city\" />\n </mat-form-field>\n <mat-form-field appearance=\"fill\">\n <mat-label i18n>District</mat-label>\n <input matInput type=\"text\" [(ngModel)]=\"address().district\" />\n </mat-form-field>\n </div>\n\n <mat-form-field appearance=\"fill\">\n <mat-label i18n>Address</mat-label>\n <textarea matInput type=\"text\" [(ngModel)]=\"address().detail\" cdkTextareaAutosize cdkAutosizeMinRows=\"3\"></textarea>\n </mat-form-field>\n</div>\n", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i4.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: TextFieldModule }] });
|
|
201
202
|
}
|
|
202
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
203
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: CheckoutShippingComponent, decorators: [{
|
|
203
204
|
type: Component,
|
|
204
|
-
args: [{ selector: 'rolatech-checkout-shipping', imports: [FormsModule, MatFormFieldModule, MatInputModule, TextFieldModule], template: "<div>\n <div class=\"text-md py-2\"
|
|
205
|
+
args: [{ selector: 'rolatech-checkout-shipping', imports: [FormsModule, MatFormFieldModule, MatInputModule, TextFieldModule], template: "<div>\n <div class=\"text-md font-bold py-2\" i18n>Shipping info</div>\n <div class=\"flex flex-col md:flex-row gap-2\">\n <mat-form-field appearance=\"fill\">\n <mat-label i18n>Name</mat-label>\n <input matInput type=\"text\" [(ngModel)]=\"address().name\" />\n </mat-form-field>\n <mat-form-field appearance=\"fill\">\n <mat-label i18n>Phone</mat-label>\n <input matInput type=\"text\" [(ngModel)]=\"address().phone\" />\n </mat-form-field>\n </div>\n <div class=\"flex flex-col md:flex-row gap-2\">\n <mat-form-field appearance=\"fill\">\n <mat-label i18n>Province</mat-label>\n <input matInput type=\"text\" [(ngModel)]=\"address().province\" />\n </mat-form-field>\n <mat-form-field appearance=\"fill\">\n <mat-label i18n>City</mat-label>\n <input matInput type=\"text\" [(ngModel)]=\"address().city\" />\n </mat-form-field>\n <mat-form-field appearance=\"fill\">\n <mat-label i18n>District</mat-label>\n <input matInput type=\"text\" [(ngModel)]=\"address().district\" />\n </mat-form-field>\n </div>\n\n <mat-form-field appearance=\"fill\">\n <mat-label i18n>Address</mat-label>\n <textarea matInput type=\"text\" [(ngModel)]=\"address().detail\" cdkTextareaAutosize cdkAutosizeMinRows=\"3\"></textarea>\n </mat-form-field>\n</div>\n", styles: ["mat-form-field{width:100%}\n"] }]
|
|
205
206
|
}] });
|
|
206
207
|
|
|
207
208
|
class CheckoutProductVariantComponent extends BaseComponent {
|
|
@@ -248,10 +249,10 @@ class CheckoutProductVariantComponent extends BaseComponent {
|
|
|
248
249
|
},
|
|
249
250
|
});
|
|
250
251
|
}
|
|
251
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
252
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
252
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: CheckoutProductVariantComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
253
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: CheckoutProductVariantComponent, isStandalone: true, selector: "rolatech-checkout-product-variant", usesInheritance: true, ngImport: i0, template: "@if (variant) {\n <rolatech-container>\n <rolatech-toolbar title=\"Order confirm\" large></rolatech-toolbar>\n <div class=\"flex flex-col md:flex-row gap-3 mt-3\">\n <div class=\"md:w-2/3 md:pr-16\">\n <div class=\"flex flex-col\">\n <div class=\"text-xl\" i18n>Products</div>\n <rolatech-checkout-item\n [name]=\"variant.title ? variant.title : product.name\"\n [description]=\"variant.options | options\"\n [thumbnail]=\"variant.media ? variant.media[0].url + '!w200' : product.media[0].url + '!w200'\"\n [price]=\"variant.price\"\n [(quantity)]=\"quantity\"\n [max]=\"3\"\n ></rolatech-checkout-item>\n </div>\n <div>\n <rolatech-checkout-shipping [address]=\"address\"></rolatech-checkout-shipping>\n </div>\n <div>\n <div class=\"text-md\" i18n>Note</div>\n <mat-form-field appearance=\"fill\">\n <textarea matInput type=\"text\" [(ngModel)]=\"note\" cdkTextareaAutosize cdkAutosizeMinRows=\"3\"></textarea>\n </mat-form-field>\n </div>\n </div>\n\n <div class=\"md:w-1/3\">\n <rolatech-checkout-summary\n [total]=\"variant.price * quantity\"\n [deposit]=\"product.deposit\"\n [quantity]=\"quantity\"\n ></rolatech-checkout-summary>\n <rolatech-checkout-action (create)=\"createOrder()\"></rolatech-checkout-action>\n </div>\n </div>\n </rolatech-container>\n}\n", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "component", type: ContainerComponent, selector: "rolatech-container" }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: CheckoutShippingComponent, selector: "rolatech-checkout-shipping", inputs: ["address"], outputs: ["addressChange"] }, { kind: "component", type: CheckoutSummaryComponent, selector: "rolatech-checkout-summary", inputs: ["deposit", "total", "quantity"] }, { kind: "component", type: CheckoutItemComponent, selector: "rolatech-checkout-item", inputs: ["selectable", "thumbnail", "name", "selected", "description", "quantity", "price", "max"], outputs: ["selectedChange", "quantityChange", "add", "remove", "delete", "toggleSelect"] }, { kind: "component", type: CheckoutActionComponent, selector: "rolatech-checkout-action", inputs: ["title"], outputs: ["create"] }, { kind: "pipe", type: OptionsFormatPipe, name: "options" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i4.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: TextFieldModule }] });
|
|
253
254
|
}
|
|
254
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
255
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: CheckoutProductVariantComponent, decorators: [{
|
|
255
256
|
type: Component,
|
|
256
257
|
args: [{ selector: 'rolatech-checkout-product-variant', imports: [
|
|
257
258
|
ContainerComponent,
|
|
@@ -266,7 +267,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
|
|
|
266
267
|
MatFormFieldModule,
|
|
267
268
|
MatInputModule,
|
|
268
269
|
TextFieldModule,
|
|
269
|
-
], template: "@if (variant) {\n <rolatech-container>\n <rolatech-toolbar title=\"\
|
|
270
|
+
], template: "@if (variant) {\n <rolatech-container>\n <rolatech-toolbar title=\"Order confirm\" large></rolatech-toolbar>\n <div class=\"flex flex-col md:flex-row gap-3 mt-3\">\n <div class=\"md:w-2/3 md:pr-16\">\n <div class=\"flex flex-col\">\n <div class=\"text-xl\" i18n>Products</div>\n <rolatech-checkout-item\n [name]=\"variant.title ? variant.title : product.name\"\n [description]=\"variant.options | options\"\n [thumbnail]=\"variant.media ? variant.media[0].url + '!w200' : product.media[0].url + '!w200'\"\n [price]=\"variant.price\"\n [(quantity)]=\"quantity\"\n [max]=\"3\"\n ></rolatech-checkout-item>\n </div>\n <div>\n <rolatech-checkout-shipping [address]=\"address\"></rolatech-checkout-shipping>\n </div>\n <div>\n <div class=\"text-md\" i18n>Note</div>\n <mat-form-field appearance=\"fill\">\n <textarea matInput type=\"text\" [(ngModel)]=\"note\" cdkTextareaAutosize cdkAutosizeMinRows=\"3\"></textarea>\n </mat-form-field>\n </div>\n </div>\n\n <div class=\"md:w-1/3\">\n <rolatech-checkout-summary\n [total]=\"variant.price * quantity\"\n [deposit]=\"product.deposit\"\n [quantity]=\"quantity\"\n ></rolatech-checkout-summary>\n <rolatech-checkout-action (create)=\"createOrder()\"></rolatech-checkout-action>\n </div>\n </div>\n </rolatech-container>\n}\n", styles: ["mat-form-field{width:100%}\n"] }]
|
|
270
271
|
}], ctorParameters: () => [] });
|
|
271
272
|
|
|
272
273
|
class CheckoutCartComponent {
|
|
@@ -305,10 +306,10 @@ class CheckoutCartComponent {
|
|
|
305
306
|
},
|
|
306
307
|
});
|
|
307
308
|
}
|
|
308
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
309
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
309
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: CheckoutCartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
310
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: CheckoutCartComponent, isStandalone: true, selector: "rolatech-checkout-cart", ngImport: i0, template: "<rolatech-container>\n <rolatech-toolbar title=\"\u8D2D\u7269\u8F66\u7ED3\u7B97\" large back></rolatech-toolbar>\n <div class=\"flex flex-col md:flex-row gap-3 mt-3\">\n <div class=\"md:w-2/3 md:pr-16\">\n <div>\n @for (item of carts; track $index) {\n @if (item.variant) {\n <rolatech-checkout-item\n [name]=\"item.variant.title ? item.variant.title : item.product.name\"\n [description]=\"item.variant.options | options\"\n [thumbnail]=\"item.variant.media ? item.variant.media[0].url + '!w400' : item.product.media[0].url + '!w400'\"\n [price]=\"item.variant ? item.variant.price * item.quantity : item.product.price\"\n [(quantity)]=\"item.quantity\"\n [max]=\"3\"\n ></rolatech-checkout-item>\n } @else {\n <rolatech-checkout-item\n [name]=\"item.product.name\"\n [description]=\"item.product.description\"\n [thumbnail]=\"item.product.media[0].url + '!w400'\"\n [price]=\"item.product.price * item.quantity\"\n [(quantity)]=\"item.quantity\"\n [max]=\"3\"\n ></rolatech-checkout-item>\n }\n }\n </div>\n <div>\n <rolatech-checkout-shipping [address]=\"address\"></rolatech-checkout-shipping>\n </div>\n <div>\n <div class=\"text-md\">\u5907\u6CE8</div>\n <mat-form-field appearance=\"fill\">\n <textarea matInput type=\"text\" [(ngModel)]=\"note\" cdkTextareaAutosize cdkAutosizeMinRows=\"3\"></textarea>\n </mat-form-field>\n </div>\n </div>\n <div class=\"md:w-1/3\">\n <rolatech-checkout-summary [total]=\"totalPrice\" [quantity]=\"quantity\"></rolatech-checkout-summary>\n <rolatech-checkout-action (create)=\"createOrder()\"></rolatech-checkout-action>\n </div>\n </div>\n</rolatech-container>\n", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ContainerComponent, selector: "rolatech-container" }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "component", type: CheckoutItemComponent, selector: "rolatech-checkout-item", inputs: ["selectable", "thumbnail", "name", "selected", "description", "quantity", "price", "max"], outputs: ["selectedChange", "quantityChange", "add", "remove", "delete", "toggleSelect"] }, { kind: "component", type: CheckoutSummaryComponent, selector: "rolatech-checkout-summary", inputs: ["deposit", "total", "quantity"] }, { kind: "component", type: CheckoutActionComponent, selector: "rolatech-checkout-action", inputs: ["title"], outputs: ["create"] }, { kind: "pipe", type: OptionsFormatPipe, name: "options" }, { kind: "component", type: CheckoutShippingComponent, selector: "rolatech-checkout-shipping", inputs: ["address"], outputs: ["addressChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i4.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: TextFieldModule }] });
|
|
310
311
|
}
|
|
311
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
312
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: CheckoutCartComponent, decorators: [{
|
|
312
313
|
type: Component,
|
|
313
314
|
args: [{ selector: 'rolatech-checkout-cart', imports: [
|
|
314
315
|
CommonModule,
|
|
@@ -326,6 +327,55 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
|
|
|
326
327
|
], template: "<rolatech-container>\n <rolatech-toolbar title=\"\u8D2D\u7269\u8F66\u7ED3\u7B97\" large back></rolatech-toolbar>\n <div class=\"flex flex-col md:flex-row gap-3 mt-3\">\n <div class=\"md:w-2/3 md:pr-16\">\n <div>\n @for (item of carts; track $index) {\n @if (item.variant) {\n <rolatech-checkout-item\n [name]=\"item.variant.title ? item.variant.title : item.product.name\"\n [description]=\"item.variant.options | options\"\n [thumbnail]=\"item.variant.media ? item.variant.media[0].url + '!w400' : item.product.media[0].url + '!w400'\"\n [price]=\"item.variant ? item.variant.price * item.quantity : item.product.price\"\n [(quantity)]=\"item.quantity\"\n [max]=\"3\"\n ></rolatech-checkout-item>\n } @else {\n <rolatech-checkout-item\n [name]=\"item.product.name\"\n [description]=\"item.product.description\"\n [thumbnail]=\"item.product.media[0].url + '!w400'\"\n [price]=\"item.product.price * item.quantity\"\n [(quantity)]=\"item.quantity\"\n [max]=\"3\"\n ></rolatech-checkout-item>\n }\n }\n </div>\n <div>\n <rolatech-checkout-shipping [address]=\"address\"></rolatech-checkout-shipping>\n </div>\n <div>\n <div class=\"text-md\">\u5907\u6CE8</div>\n <mat-form-field appearance=\"fill\">\n <textarea matInput type=\"text\" [(ngModel)]=\"note\" cdkTextareaAutosize cdkAutosizeMinRows=\"3\"></textarea>\n </mat-form-field>\n </div>\n </div>\n <div class=\"md:w-1/3\">\n <rolatech-checkout-summary [total]=\"totalPrice\" [quantity]=\"quantity\"></rolatech-checkout-summary>\n <rolatech-checkout-action (create)=\"createOrder()\"></rolatech-checkout-action>\n </div>\n </div>\n</rolatech-container>\n", styles: ["mat-form-field{width:100%}\n"] }]
|
|
327
328
|
}] });
|
|
328
329
|
|
|
330
|
+
class CheckoutPropertyComponent {
|
|
331
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: CheckoutPropertyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
332
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.3", type: CheckoutPropertyComponent, isStandalone: true, selector: "rolatech-checkout-property", ngImport: i0, template: "<p>checkout-property works!</p>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
|
|
333
|
+
}
|
|
334
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: CheckoutPropertyComponent, decorators: [{
|
|
335
|
+
type: Component,
|
|
336
|
+
args: [{ selector: 'rolatech-checkout-property', imports: [CommonModule], template: "<p>checkout-property works!</p>\n" }]
|
|
337
|
+
}] });
|
|
338
|
+
|
|
339
|
+
class CheckoutMembership extends BaseComponent {
|
|
340
|
+
membershipService = inject(MembershipService);
|
|
341
|
+
orderService = inject(OrderService);
|
|
342
|
+
note = '';
|
|
343
|
+
plan;
|
|
344
|
+
ngOnInit() {
|
|
345
|
+
this.getPlans();
|
|
346
|
+
console.log(this.id);
|
|
347
|
+
}
|
|
348
|
+
getPlans() {
|
|
349
|
+
this.membershipService.getPlan(this.id).subscribe({
|
|
350
|
+
next: (res) => {
|
|
351
|
+
this.plan = res.data;
|
|
352
|
+
},
|
|
353
|
+
});
|
|
354
|
+
}
|
|
355
|
+
createOrder() {
|
|
356
|
+
this.orderService
|
|
357
|
+
.create({
|
|
358
|
+
type: 'MEMBERSHIP',
|
|
359
|
+
productId: this.plan.id,
|
|
360
|
+
note: this.note,
|
|
361
|
+
})
|
|
362
|
+
.subscribe({
|
|
363
|
+
next: (res) => {
|
|
364
|
+
this.router.navigateByUrl(`/orders/${res.data.id}`);
|
|
365
|
+
},
|
|
366
|
+
error: (error) => {
|
|
367
|
+
this.snackBarService.open(error.message);
|
|
368
|
+
},
|
|
369
|
+
});
|
|
370
|
+
}
|
|
371
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: CheckoutMembership, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
372
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.3", type: CheckoutMembership, isStandalone: true, selector: "rolatech-checkout-membership", usesInheritance: true, ngImport: i0, template: "<div>{{plan | json}}</div>\n<rolatech-checkout-action (create)=\"createOrder()\" title=\"Submit\"></rolatech-checkout-action>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$2.JsonPipe, name: "json" }, { kind: "component", type: CheckoutActionComponent, selector: "rolatech-checkout-action", inputs: ["title"], outputs: ["create"] }] });
|
|
373
|
+
}
|
|
374
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: CheckoutMembership, decorators: [{
|
|
375
|
+
type: Component,
|
|
376
|
+
args: [{ selector: 'rolatech-checkout-membership', imports: [CommonModule, CheckoutActionComponent], template: "<div>{{plan | json}}</div>\n<rolatech-checkout-action (create)=\"createOrder()\" title=\"Submit\"></rolatech-checkout-action>\n" }]
|
|
377
|
+
}] });
|
|
378
|
+
|
|
329
379
|
const checkoutRoutes = [
|
|
330
380
|
{
|
|
331
381
|
path: 'courses/:id',
|
|
@@ -339,10 +389,18 @@ const checkoutRoutes = [
|
|
|
339
389
|
path: 'products/:id/variants/:variant-id',
|
|
340
390
|
component: CheckoutProductVariantComponent,
|
|
341
391
|
},
|
|
392
|
+
{
|
|
393
|
+
path: 'properties/:id',
|
|
394
|
+
component: CheckoutPropertyComponent,
|
|
395
|
+
},
|
|
342
396
|
{
|
|
343
397
|
path: 'cart',
|
|
344
398
|
component: CheckoutCartComponent,
|
|
345
399
|
},
|
|
400
|
+
{
|
|
401
|
+
path: 'memberships/plans/:id',
|
|
402
|
+
component: CheckoutMembership,
|
|
403
|
+
},
|
|
346
404
|
];
|
|
347
405
|
|
|
348
406
|
/**
|