;
13 |
14 | constructor(private basketService: BasketService) { }
15 |
16 | ngOnInit(): void {
17 | this.basket$ = this.basketService.basket$;
18 | }
19 |
20 | removeBasketItem(item: BasketItem) {
21 | this.basketService.removeItemFromBasket(item);
22 | }
23 |
24 | incrementItemQuantity(item: BasketItem) {
25 | this.basketService.incrementItemQuantity(item);
26 | }
27 |
28 | decrementItemQuantity(item: BasketItem) {
29 | this.basketService.decrementItemQuantity(item);
30 | }
31 |
32 | }
33 |
--------------------------------------------------------------------------------
/client/src/app/basket/basket.module.ts:
--------------------------------------------------------------------------------
1 | import { SharedModule } from './../shared/shared.module';
2 | import { NgModule } from '@angular/core';
3 | import { CommonModule } from '@angular/common';
4 |
5 | import { BasketRoutingModule } from './basket-routing.module';
6 | import { BasketComponent } from './basket.component';
7 |
8 |
9 | @NgModule({
10 | declarations: [BasketComponent],
11 | imports: [
12 | CommonModule,
13 | BasketRoutingModule,
14 | SharedModule
15 | ]
16 | })
17 | export class BasketModule { }
18 |
--------------------------------------------------------------------------------
/client/src/app/checkout/checkout-address/checkout-address.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
Shipping Address
4 |
9 |
10 |
11 |
14 |
17 |
20 |
23 |
26 |
29 |
30 |
33 |
36 |
39 |
--------------------------------------------------------------------------------
/client/src/app/checkout/checkout-address/checkout-address.component.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RobinHaider/An-E-commerce-app-with-.Net-Core-and-Angular/3f4ef5cae6b426b9cf0411324bc6674ec7e06551/client/src/app/checkout/checkout-address/checkout-address.component.scss
--------------------------------------------------------------------------------
/client/src/app/checkout/checkout-address/checkout-address.component.ts:
--------------------------------------------------------------------------------
1 | import { Address } from './../../shared/models/address';
2 | import { ToastrService } from 'ngx-toastr';
3 | import { AccountService } from './../../account/account.service';
4 | import { FormGroup } from '@angular/forms';
5 | import { Component, OnInit, Input } from '@angular/core';
6 |
7 | @Component({
8 | selector: 'app-checkout-address',
9 | templateUrl: './checkout-address.component.html',
10 | styleUrls: ['./checkout-address.component.scss']
11 | })
12 | export class CheckoutAddressComponent implements OnInit {
13 | @Input() checkoutForm: FormGroup;
14 |
15 | constructor(private accountService: AccountService, private toastr: ToastrService) { }
16 |
17 | ngOnInit(): void {
18 | }
19 |
20 | saveUserAddress(){
21 | this.accountService.updateUserAddress(this.checkoutForm.get('addressForm').value)
22 | .subscribe((address: Address) => {
23 | this.toastr.success('Address Saved');
24 | this.checkoutForm.get('addressForm').reset(address);
25 | }, error => {
26 | this.toastr.error(error.message);
27 | console.log(error);
28 | });
29 | }
30 |
31 | }
32 |
--------------------------------------------------------------------------------
/client/src/app/checkout/checkout-delivery/checkout-delivery.component.html:
--------------------------------------------------------------------------------
1 |
2 |
Choose Your Delivery Method
3 |
4 |
5 |
13 |
18 |
19 |
20 |
23 |
26 |
29 |
--------------------------------------------------------------------------------
/client/src/app/checkout/checkout-delivery/checkout-delivery.component.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RobinHaider/An-E-commerce-app-with-.Net-Core-and-Angular/3f4ef5cae6b426b9cf0411324bc6674ec7e06551/client/src/app/checkout/checkout-delivery/checkout-delivery.component.scss
--------------------------------------------------------------------------------
/client/src/app/checkout/checkout-delivery/checkout-delivery.component.ts:
--------------------------------------------------------------------------------
1 | import { BasketService } from './../../basket/basket.service';
2 | import { IDeliveryMethod } from './../../shared/models/deliveryMethod';
3 | import { FormGroup } from '@angular/forms';
4 | import { CheckoutService } from './../checkout.service';
5 | import { Component, OnInit, Input } from '@angular/core';
6 |
7 | @Component({
8 | selector: 'app-checkout-delivery',
9 | templateUrl: './checkout-delivery.component.html',
10 | styleUrls: ['./checkout-delivery.component.scss']
11 | })
12 | export class CheckoutDeliveryComponent implements OnInit {
13 | @Input() checkoutForm: FormGroup;
14 | deliveryMethods: IDeliveryMethod[];
15 |
16 | constructor(private checkoutService: CheckoutService, private basketService: BasketService) { }
17 |
18 | ngOnInit(): void {
19 | this.checkoutService.getDeliveryMethods().subscribe((dm: IDeliveryMethod[]) => {
20 | this.deliveryMethods = dm;
21 | }, error => {
22 | console.log(error);
23 | });
24 | }
25 |
26 | setShippingPrice(deliveryMethod: IDeliveryMethod){
27 | this.basketService.setShippingPrice(deliveryMethod);
28 | }
29 |
30 | }
31 |
--------------------------------------------------------------------------------
/client/src/app/checkout/checkout-payment/checkout-payment.component.html:
--------------------------------------------------------------------------------
1 |
20 |
21 |
22 |
25 |
34 |
--------------------------------------------------------------------------------
/client/src/app/checkout/checkout-payment/checkout-payment.component.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RobinHaider/An-E-commerce-app-with-.Net-Core-and-Angular/3f4ef5cae6b426b9cf0411324bc6674ec7e06551/client/src/app/checkout/checkout-payment/checkout-payment.component.scss
--------------------------------------------------------------------------------
/client/src/app/checkout/checkout-review/checkout-review.component.html:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
9 |
12 |
--------------------------------------------------------------------------------
/client/src/app/checkout/checkout-review/checkout-review.component.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RobinHaider/An-E-commerce-app-with-.Net-Core-and-Angular/3f4ef5cae6b426b9cf0411324bc6674ec7e06551/client/src/app/checkout/checkout-review/checkout-review.component.scss
--------------------------------------------------------------------------------
/client/src/app/checkout/checkout-review/checkout-review.component.ts:
--------------------------------------------------------------------------------
1 | import { CdkStepper } from '@angular/cdk/stepper';
2 | import { ToastrService } from 'ngx-toastr';
3 | import { BasketService } from './../../basket/basket.service';
4 | import { Component, OnInit, Input } from '@angular/core';
5 |
6 | @Component({
7 | selector: 'app-checkout-review',
8 | templateUrl: './checkout-review.component.html',
9 | styleUrls: ['./checkout-review.component.scss']
10 | })
11 | export class CheckoutReviewComponent implements OnInit {
12 | @Input() appStepper: CdkStepper;
13 |
14 | constructor(private basketService: BasketService, private toastr: ToastrService) { }
15 |
16 | ngOnInit(): void {
17 | }
18 |
19 | createPaymentIntent(){
20 | return this.basketService.createPaymentIntent().subscribe((response: any) => {
21 | // this.toastr.success('Payment Intent Created');
22 | this.appStepper.next();
23 | }, error => {
24 | console.log(error);
25 | // this.toastr.error(error.message);
26 | });
27 | }
28 |
29 | }
30 |
--------------------------------------------------------------------------------
/client/src/app/checkout/checkout-routing.module.ts:
--------------------------------------------------------------------------------
1 | import { CheckoutSuccessComponent } from './checkout-success/checkout-success.component';
2 | import { CheckoutComponent } from './checkout.component';
3 | import { NgModule } from '@angular/core';
4 | import { Routes, RouterModule } from '@angular/router';
5 |
6 |
7 | const routes: Routes = [
8 | {path: '', component: CheckoutComponent},
9 | {path: 'success', component: CheckoutSuccessComponent}
10 | ];
11 |
12 | @NgModule({
13 | imports: [RouterModule.forChild(routes)],
14 | exports: [RouterModule]
15 | })
16 | export class CheckoutRoutingModule { }
17 |
--------------------------------------------------------------------------------
/client/src/app/checkout/checkout-success/checkout-success.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
Thank you, Your order is confirmed
4 |
Your order hasn't shipped yet, but this is to be expected as we are not a real store!
5 |
6 |
7 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
22 |
23 |
4 |
11 |
22 |
55 |
not-found works!
2 |
--------------------------------------------------------------------------------
/client/src/app/core/not-found/not-found.component.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RobinHaider/An-E-commerce-app-with-.Net-Core-and-Angular/3f4ef5cae6b426b9cf0411324bc6674ec7e06551/client/src/app/core/not-found/not-found.component.scss
--------------------------------------------------------------------------------
/client/src/app/core/not-found/not-found.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-not-found',
5 | templateUrl: './not-found.component.html',
6 | styleUrls: ['./not-found.component.scss']
7 | })
8 | export class NotFoundComponent implements OnInit {
9 |
10 | constructor() { }
11 |
12 | ngOnInit(): void {
13 | }
14 |
15 | }
16 |
--------------------------------------------------------------------------------
/client/src/app/core/section-header/section-header.component.html:
--------------------------------------------------------------------------------
1 |
2 |
10 |
11 |
12 |
13 |
14 | {{
15 | breadcrumbs.length > 0 &&
16 | breadcrumbs[breadcrumbs.length - 1].label | titlecase
17 | }}
18 |
19 |
20 |
21 |
22 |
23 |
24 |
2 |
3 | Internal Server Error - refreshing the page will make the exception
4 | disappear
5 |
6 |
7 | Error: {{ error.message }}
8 |
9 | Note: if you are seeing this then Angular is probably not responsible
10 |
11 | What to do next?
12 |
13 | - Open chrome dev tools
14 | - Inspect the network tab
15 | - Check the failing request
16 | - Examine this request URL - make sure this is correct
17 | -
18 | Reproduce the error in postman - if we get the same reponse in Postman,
19 | then the issue is NOT with Angular
20 |
21 |
22 |
23 | Following is the stack trace - this is where your investigation should
24 | start!
25 |
26 | {{
27 | error.details
28 | }}
29 |
30 |
2 |
5 |
8 |
11 |
17 |
22 |
4 |
5 |
6 | 
7 |
8 |
9 | 
10 |
11 |
12 |
13 |
14 |
Welcome to the Shop!
15 |
16 |
--------------------------------------------------------------------------------
/client/src/app/home/home.component.scss:
--------------------------------------------------------------------------------
1 | .featured {
2 | height: 250px;
3 | }
4 |
5 | img {
6 | object-fit: cover;
7 | height: 600px;
8 | width: 100%;
9 | }
--------------------------------------------------------------------------------
/client/src/app/home/home.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-home',
5 | templateUrl: './home.component.html',
6 | styleUrls: ['./home.component.scss']
7 | })
8 | export class HomeComponent implements OnInit {
9 |
10 | constructor() { }
11 |
12 | ngOnInit(): void {
13 | }
14 |
15 | }
16 |
--------------------------------------------------------------------------------
/client/src/app/home/home.module.ts:
--------------------------------------------------------------------------------
1 | import { SharedModule } from './../shared/shared.module';
2 | import { NgModule } from '@angular/core';
3 | import { CommonModule } from '@angular/common';
4 | import { HomeComponent } from './home.component';
5 |
6 |
7 |
8 | @NgModule({
9 | declarations: [HomeComponent],
10 | imports: [
11 | CommonModule,
12 | SharedModule
13 | ],
14 | exports: [HomeComponent]
15 | })
16 | export class HomeModule { }
17 |
--------------------------------------------------------------------------------
/client/src/app/orders/order-detailed/order-detailed.component.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RobinHaider/An-E-commerce-app-with-.Net-Core-and-Angular/3f4ef5cae6b426b9cf0411324bc6674ec7e06551/client/src/app/orders/order-detailed/order-detailed.component.scss
--------------------------------------------------------------------------------
/client/src/app/orders/order-detailed/order-detailed.component.ts:
--------------------------------------------------------------------------------
1 | import { OrdersService } from './../orders.service';
2 | import { BreadcrumbService } from 'xng-breadcrumb';
3 | import { ActivatedRoute } from '@angular/router';
4 | import { IOrder } from './../../shared/models/order';
5 | import { Component, OnInit } from '@angular/core';
6 |
7 | @Component({
8 | selector: 'app-order-detailed',
9 | templateUrl: './order-detailed.component.html',
10 | styleUrls: ['./order-detailed.component.scss']
11 | })
12 | export class OrderDetailedComponent implements OnInit {
13 | order: IOrder;
14 |
15 | constructor(
16 | private route: ActivatedRoute,
17 | private breadcrumbService: BreadcrumbService,
18 | private ordersService: OrdersService
19 | ) {
20 | this.breadcrumbService.set('@OrderDetailed', '');
21 | }
22 |
23 | ngOnInit(): void {
24 | this.ordersService.getOrderDetailed(+this.route.snapshot.paramMap.get('id'))
25 | .subscribe((order: IOrder) => {
26 | this.order = order;
27 | this.breadcrumbService.set('@OrderDetailed', `Order# ${order.id} - ${order.status}`);
28 | }, error => {
29 | console.log(error);
30 | });
31 | }
32 |
33 | }
34 |
--------------------------------------------------------------------------------
/client/src/app/orders/orders-routing.module.ts:
--------------------------------------------------------------------------------
1 | import { OrderDetailedComponent } from './order-detailed/order-detailed.component';
2 | import { OrdersComponent } from './orders.component';
3 | import { NgModule } from '@angular/core';
4 | import { Routes, RouterModule } from '@angular/router';
5 |
6 |
7 | const routes: Routes = [
8 | {path: '', component: OrdersComponent},
9 | {path: ':id', component: OrderDetailedComponent, data: {breadcrumb: {alias: 'OrderDetailed'}}}
10 | ];
11 |
12 | @NgModule({
13 | imports: [RouterModule.forChild(routes)],
14 | exports: [RouterModule]
15 | })
16 | export class OrdersRoutingModule { }
17 |
--------------------------------------------------------------------------------
/client/src/app/orders/orders.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | | Order |
8 | Date |
9 | Total |
10 | Status |
11 |
12 |
13 |
14 |
15 | | # {{order.id}} |
16 | {{order.orderDate | date: 'medium'}} |
17 | {{order.total | currency}} |
18 | {{order.status}} |
19 |
20 |
21 |
22 |
23 |
24 |
2 | Order Summary
3 |
4 |
5 |
Shipping costs will be added depending on choices made during checkout
6 |
7 | -
8 | Order subtotal
9 | {{(basketTotal$ | async).subtotal | currency}}
10 |
11 | -
12 | Shipping and handling
13 | {{(basketTotal$ | async).shipping | currency}}
14 |
15 | -
16 | Total
17 | {{(basketTotal$ | async).total | currency}}
18 |
19 |
20 |