@NgModule({   declarations: [SimplePageComponent, TitleComponent, WordWrapPipe, ItemQuantityComponent],   imports: [CommonModule, MatIconModule, MatButtonModule, MatTooltipModule, MatMenuModule, RouterModule],   exports: [     CommonModule,     ItemQuantityComponent,     MatButtonModule,     MatIconModule,     MatSnackBarModule,     MatTooltipModule,     SimplePageComponent,     TitleComponent,     WordWrapPipe   ] }) export class SharedModule { }

<button mat-stroked-button [matMenuTriggerFor]="menu" [disabled]="disabled">     {{quantity}}     <mat-icon ngIf="!disabled">expand_more</mat-icon> </button> <mat-menu #menu="matMenu">     <button ngFor="let no of values" (click)="setQuantity(no)" mat-menu-item>{{no}}</button> </mat-menu>

<div id="container">     <app-title no="{{number}}" title="{How To Build An E-Commerce Site With Angular 11, Commerce Layer And Paypal}" subtitle="{{subtitle}}" [centerText]="centerText"></app-title>     <div *ngIf="icon" id="icon-container">         <mat-icon color="primary" class="icon">{{icon}}</mat-icon>     </div>     <button mat-flat-button color="primary" (click)="buttonClicked()" [disabled]="buttonDisabled">         {{buttonText}}     </button> </div>

@Injectable({   providedIn: 'root' }) export class HttpErrorHandler {    constructor() { }    handleError(err: HttpErrorResponse): Observable {     let displayMessage = '';      if (err.error instanceof ErrorEvent) {       displayMessage = Client-side error: $  {err.error.message};     } else {       displayMessage = Server-side error: $  {err.message};     }      return throwError(displayMessage);   } }

@Injectable({   providedIn: 'root' }) export class AddressService {   private url: string = $  {environment.apiUrl}/api/addresses;    constructor(private http: HttpClient, private eh: HttpErrorHandler) { }    createAddress(address: Address): Observable<Address> {     return this.http.post<Address>(this.url, address)       .pipe(catchError(this.eh.handleError));   }    getAddress(id: string): Observable<Address> {     return this.http.get<Address>($  {this.url}/$  {id})       .pipe(catchError(this.eh.handleError));   } }

@Injectable({   providedIn: 'root' }) export class CartService {   private cart = new BehaviorSubject({     orderId: this.orderId,     itemCount: this.itemCount   });    cartValue$   = this.cart.asObservable();    constructor(private storage: LocalStorageService) { }    get orderId(): string {     const id = this.storage.getItem('order-id');     return id ? id : '';   }    set orderId(id: string) {     this.storage.addItem('order-id', id);     this.cart.next({ orderId: id, itemCount: this.itemCount });   }    get itemCount(): number {     const itemCount = this.storage.getItem('item-count');      return itemCount ? parseInt(itemCount) : 0;   }    set itemCount(amount: number) {     this.storage.addItem('item-count', amount.toString());     this.cart.next({ orderId: this.orderId, itemCount: amount });   }    incrementItemCount(amount: number) {     this.itemCount = this.itemCount + amount;   }    decrementItemCount(amount: number) {     this.itemCount = this.itemCount - amount;   }    clearCart() {     this.storage.deleteItem('item-count');     this.cart.next({ orderId: '', itemCount: 0 });   } }

@Injectable({   providedIn: 'root' }) export class CountryService {    constructor(private http: HttpClient) { }    getCountries(): Observable<Country[]> {     return this.http.get<Country[]>('./../../../assets/json/country-codes.json');   } }

@Injectable({   providedIn: 'root' }) export class CustomerAddressService {   private url: string = $  {environment.apiUrl}/api/customer_addresses;    constructor(private http: HttpClient, private eh: HttpErrorHandler) { }    createCustomerAddress(addressId: string, customerId: string): Observable<CustomerAddress> {     return this.http.post<CustomerAddress>(this.url, {       addressId: addressId, customerId: customerId     })       .pipe(catchError(this.eh.handleError));   }    getCustomerAddresses(): Observable<CustomerAddress[]> {     return this.http.get<CustomerAddress[]>($  {this.url})       .pipe(catchError(this.eh.handleError));   }    getCustomerAddress(id: string): Observable<CustomerAddress> {     return this.http.get<CustomerAddress>($  {this.url}/$  {id})       .pipe(catchError(this.eh.handleError));   } }

@Injectable({   providedIn: 'root' }) export class CustomerService {   private url: string = $  {environment.apiUrl}/api/customers;    constructor(private http: HttpClient, private eh: HttpErrorHandler) { }    createCustomer(email: string, password: string, firstName: string, lastName: string): Observable<Customer> {     return this.http.post<Customer>(this.url, {       email: email,       password: password,       firstName: firstName,       lastName: lastName     })       .pipe(catchError(this.eh.handleError));   }    getCurrentCustomer(): Observable<Customer> {     return this.http.get<Customer>($  {this.url}/current)       .pipe(catchError(this.eh.handleError));   }    getCustomer(id: string): Observable<Customer> {     return this.http.get<Customer>($  {this.url}/$  {id})       .pipe(catchError(this.eh.handleError));   } }

@Injectable({   providedIn: 'root' }) export class DeliveryLeadTimeService {   private url: string = $  {environment.apiUrl}/api/delivery_lead_times;    constructor(private http: HttpClient, private eh: HttpErrorHandler) { }    getDeliveryLeadTimes(): Observable<DeliveryLeadTime[]> {     return this.http.get<DeliveryLeadTime[]>(this.url)       .pipe(catchError(this.eh.handleError));   } }

@Injectable({   providedIn: 'root' }) export class LineItemService {   private url: string = $  {environment.apiUrl}/api/line_items;    constructor(private http: HttpClient, private eh: HttpErrorHandler) { }    createLineItem(lineItem: LineItem): Observable<LineItem> {     return this.http.post<LineItem>(this.url, lineItem)       .pipe(catchError(this.eh.handleError));   }    getLineItem(id: string): Observable<LineItem> {     return this.http.get<LineItem>($  {this.url}/$  {id})       .pipe(catchError(this.eh.handleError));   }    updateLineItem(id: string, quantity: number): Observable<LineItem> {     return this.http.patch<LineItem>($  {this.url}/$  {id}, { quantity: quantity })       .pipe(catchError(this.eh.handleError));   }    deleteLineItem(id: string): Observable<LineItem> {     return this.http.delete<LineItem>($  {this.url}/$  {id})       .pipe(catchError(this.eh.handleError));   } }

@Injectable({   providedIn: 'root' }) export class OrderService {   private url: string = $  {environment.apiUrl}/api/orders;    constructor(     private http: HttpClient,     private eh: HttpErrorHandler) { }    createOrder(): Observable<Order> {     return this.http.post<Order>(this.url, {})       .pipe(catchError(this.eh.handleError));   }    getOrder(id: string, orderParam: GetOrderParams): Observable<Order> {     let params = {};     if (orderParam != GetOrderParams.none) {       params = { [orderParam]: 'true' };     }      return this.http.get<Order>($  {this.url}/$  {id}, { params: params })       .pipe(catchError(this.eh.handleError));   }    updateOrder(order: Order, params: UpdateOrderParams[]): Observable<Order> {     let updateParams = [];     for (const param of params) {       updateParams.push(param.toString());     }      return this.http.patch<Order>(       $  {this.url}/$  {order.id},       order,       { params: { 'field': updateParams } }     )       .pipe(catchError(this.eh.handleError));   }    getOrderShipments(id: string): Observable<Shipment[]> {     return this.http.get<Shipment[]>($  {this.url}/$  {id}/shipments)       .pipe(catchError(this.eh.handleError));   } }

@Injectable({   providedIn: 'root' }) export class PaypalPaymentService {   private url: string = $  {environment.apiUrl}/api/paypal_payments;    constructor(private http: HttpClient, private eh: HttpErrorHandler) { }    createPaypalPayment(payment: PaypalPayment): Observable<PaypalPayment> {     return this.http.post<PaypalPayment>(this.url, payment)       .pipe(catchError(this.eh.handleError));   }    getPaypalPayment(id: string): Observable<PaypalPayment> {     return this.http.get<PaypalPayment>($  {this.url}/$  {id})       .pipe(catchError(this.eh.handleError));   }    updatePaypalPayment(id: string, paypalPayerId: string): Observable<PaypalPayment> {     return this.http.patch<PaypalPayment>(       $  {this.url}/$  {id},       { paypalPayerId: paypalPayerId }     )       .pipe(catchError(this.eh.handleError));   } }

@Injectable({   providedIn: 'root' }) export class ShipmentService {   private url: string = $  {environment.apiUrl}/api/shipments;    constructor(private http: HttpClient, private eh: HttpErrorHandler) { }    getShipment(id: string): Observable<Shipment> {     return this.http.get<Shipment>($  {this.url}/$  {id})       .pipe(catchError(this.eh.handleError));   }    updateShipment(id: string, shippingMethodId: string): Observable<Shipment> {     return this.http.patch<Shipment>(       $  {this.url}/$  {id},       { shippingMethodId: shippingMethodId }     )       .pipe(catchError(this.eh.handleError));   } }

@Injectable({   providedIn: 'root' }) export class SkuService {   private url: string = $  {environment.apiUrl}/api/skus;    constructor(private http: HttpClient, private eh: HttpErrorHandler) { }    getSku(id: string): Observable<Sku> {     return this.http.get<Sku>($  {this.url}/$  {id})       .pipe(catchError(this.eh.handleError));   }    getSkus(page: number, pageSize: number): Observable<Sku[]> {     return this.http.get<Sku[]>(       this.url,       {         params: {           'page': page.toString(),           'pageSize': pageSize.toString()         }       })       .pipe(catchError(this.eh.handleError));   } }

ng g m core ng g g core/guards/empty-cart ng g s core/header/header ng g interceptor core/interceptors/options for comp in header error not-found; do ng g c "core/$  {comp}"; done for serv in authentication session; do ng g s "core/authentication/$  {serv}"; done

@NgModule({   declarations: [HeaderComponent, NotFoundComponent, ErrorComponent],   imports: [     RouterModule.forChild([       { path: '404', component: NotFoundComponent },       { path: 'error', component: ErrorComponent },       { path: '**', redirectTo: '/404' }     ]),     MatBadgeModule,     SharedModule   ],   exports: [HeaderComponent] }) export class CoreModule { }

@Injectable({   providedIn: 'root' }) export class AuthenticationService {   private url: string = $  {environment.apiUrl}/oauth/token;    constructor(private http: HttpClient, private eh: HttpErrorHandler) { }    getClientSession(): Observable<object> {     return this.http.post<object>(       this.url,       { grantType: 'client_credentials' })       .pipe(catchError(this.eh.handleError));   }    login(email: string, password: string): Observable<object> {     return this.http.post<object>(       this.url,       { username: email, password: password, grantType: 'password' })       .pipe(catchError(this.eh.handleError));   } }

@Injectable({   providedIn: 'root' }) export class SessionService {   private url: string = $  {environment.apiUrl}/session;   private isLoggedIn = new BehaviorSubject(false);    loggedInStatus = this.isLoggedIn.asObservable();    constructor(private http: HttpClient, private eh: HttpErrorHandler) { }    setLoggedInStatus(status: boolean) {     this.isLoggedIn.next(status);   }    isCustomerLoggedIn(): Observable<{ message: string }> {     return this.http.get<{ message: string }>($  {this.url}/customer/status)       .pipe(catchError(this.eh.handleError));   }    logout(): Observable<{ message: string }> {     return this.http.get<{ message: string }>($  {this.url}/destroy)       .pipe(catchError(this.eh.handleError));   } }

@Injectable({   providedIn: 'root' }) export class HeaderService {   private headerButtonsVisibility = new BehaviorSubject(true);    showHeaderButtons = this.headerButtonsVisibility.asObservable();    constructor() { }    setHeaderButtonsVisibility(visible: boolean) {     this.headerButtonsVisibility.next(visible);   } }

<app-simple-page title="An error occurred" subtitle="There was a problem fetching your page" buttonText="GO TO HOME" icon="report" [centerText]="true" route="/"> </app-simple-page>

<app-simple-page title="404: Page not found" buttonText="GO TO HOME" icon="search" subtitle="The requested page could not be found" [centerText]="true" route="/"></app-simple-page>

@UntilDestroy({ checkProperties: true }) @Component({   selector: 'app-header',   templateUrl: './header.component.html',   styleUrls: ['./header.component.css'] }) export class HeaderComponent implements OnInit {   cartAmount: number = 0;   isLoggedIn: boolean = false;   showButtons: boolean = true;    constructor(     private session: SessionService,     private snackBar: MatSnackBar,     private cart: CartService,     private header: HeaderService,     private auth: AuthenticationService   ) { }    ngOnInit() {     this.session.isCustomerLoggedIn()       .subscribe(         () => {           this.isLoggedIn = true;           this.session.setLoggedInStatus(true);         }       );      this.session.loggedInStatus.subscribe(status => this.isLoggedIn = status);      this.header.showHeaderButtons.subscribe(visible => this.showButtons = visible);      this.cart.cartValue$  .subscribe(cart => this.cartAmount = cart.itemCount);   }    logout() {     concat(       this.session.logout(),       this.auth.getClientSession()     ).subscribe(       () => {         this.snackBar.open('You have been logged out.', 'Close', { duration: 4000 });         this.session.setLoggedInStatus(false);       },       err => this.snackBar.open('There was a problem logging you out.', 'Close', { duration: 4000 })     );   } }

<div id="header-container">     <div id="left-half" routerLink="/">         <h1><span id="lime-text">Lime</span><span id="store-text">Store</span></h1>     </div>     <div id="right-half">         <div id="button-container" ngIf="showButtons">             <button mat-icon-button color="primary" aria-label="shopping cart">                 <mat-icon [matBadge]="cartAmount" matBadgeColor="accent" aria-label="shopping cart" routerLink="/cart">shopping_cart</mat-icon>             </button>             <button mat-icon-button color="primary" aria-label="login" ngIf="!isLoggedIn">                 <mat-icon aria-label="login" matTooltip="login" routerLink="/login">login</mat-icon>             </button>             <button mat-icon-button color="primary" aria-label="logout" *ngIf="isLoggedIn" (click)="logout()">                 <mat-icon aria-label="logout" matTooltip="logout">logout</mat-icon>             </button>         </div>     </div> </div>

@Injectable({   providedIn: 'root' }) export class EmptyCartGuard implements CanActivate {   constructor(private cart: CartService, private router: Router) { }    canActivate(     route: ActivatedRouteSnapshot,     state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {     if (this.cart.orderId) {       if (this.cart.itemCount > 0) {         return true;       }     }      return this.router.parseUrl('/empty');   } }

@Injectable() export class OptionsInterceptor implements HttpInterceptor {    constructor() { }    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {     request = request.clone({       headers: request.headers.set('Content-Type', 'application/json'),       withCredentials: true     });      return next.handle(request);   } }

@UntilDestroy({ checkProperties: true }) @Component({   selector: 'app-product-list',   templateUrl: './product-list.component.html',   styleUrls: ['./product-list.component.css'] }) export class ProductListComponent implements OnInit {   cols = 4;   length = 0;   pageIndex = 0;   pageSize = 20;   pageSizeOptions: number[] = [5, 10, 20];    pageEvent!: PageEvent | void;    products: Sku[] = [];    constructor(     private breakpointObserver: BreakpointObserver,     private skus: SkuService,     private router: Router,     private header: HeaderService) { }    ngOnInit() {     this.getProducts(1, 20);     this.header.setHeaderButtonsVisibility(true);      this.breakpointObserver.observe([       Breakpoints.Handset,       Breakpoints.Tablet,       Breakpoints.Web     ]).subscribe(result => {       if (result.matches) {         if (result.breakpoints['(max-width: 599.98px) and (orientation: portrait)'] || result.breakpoints['(max-width: 599.98px) and (orientation: landscape)']) {           this.cols = 1;         }         else if (result.breakpoints['(min-width: 1280px) and (orientation: portrait)'] || result.breakpoints['(min-width: 1280px) and (orientation: landscape)']) {           this.cols = 4;         } else {           this.cols = 3;         }       }     });   }    private getProducts(page: number, pageSize: number) {     this.skus.getSkus(page, pageSize)       .subscribe(         skus => {           this.products = skus;           this.length = skus[0].__collectionMeta.recordCount;         },         err => this.router.navigateByUrl('/error')       );   }    getNextPage(event: PageEvent) {     this.getProducts(event.pageIndex + 1, event.pageSize);   }    trackSkus(index: number, item: Sku) {     return $  {item.id}-$  {index};   } }

<mat-grid-list cols="{{cols}}" rowHeight="400px" gutterSize="20px" class="grid-layout">     <mat-grid-tile *ngFor="let product of products; trackBy: trackSkus">         <mat-card>             <img id="card-image" mat-card-image src="{{product.imageUrl}}" alt="product photo">             <mat-card-content>                 <mat-card-title matTooltip="{{product.name}}">{{product.name |wordWrap:35}}</mat-card-title>                 <mat-card-subtitle>{{product.prices[0].compareAtAmountFloat | currency:'EUR'}}</mat-card-subtitle>             </mat-card-content>             <mat-card-actions>                 <button mat-flat-button color="primary" [routerLink]="['/product', product.id]">                     View                 </button>             </mat-card-actions>         </mat-card>     </mat-grid-tile> </mat-grid-list> <mat-paginator [length]="length" [pageIndex]="pageIndex" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" (page)="pageEvent = getNextPage($  event)"> </mat-paginator>

@UntilDestroy({ checkProperties: true }) @Component({   selector: 'app-product',   templateUrl: './product.component.html',   styleUrls: ['./product.component.css'] }) export class ProductComponent implements OnInit {   id: string = '';   product!: Sku;   quantity: number = 0;    constructor(     private route: ActivatedRoute,     private skus: SkuService,     private location: Location,     private router: Router,     private header: HeaderService,     private orders: OrderService,     private lineItems: LineItemService,     private cart: CartService,     private snackBar: MatSnackBar   ) { }    ngOnInit() {     this.route.paramMap       .pipe(         mergeMap(params => {           const id = params.get('id')           this.id = id ? id : '';            return this.skus.getSku(this.id);         }),         tap((sku) => {           this.product = sku;         })       ).subscribe({         error: (err) => this.router.navigateByUrl('/error')       });      this.header.setHeaderButtonsVisibility(true);   }    addItemToCart() {     if (this.quantity > 0) {       if (this.cart.orderId == '') {         this.orders.createOrder()           .pipe(             mergeMap((order: Order) => {               this.cart.orderId = order.id || '';                return this.lineItems.createLineItem({                 orderId: order.id,                 name: this.product.name,                 imageUrl: this.product.imageUrl,                 quantity: this.quantity,                 skuCode: this.product.code               });             })           )           .subscribe(             () => {               this.cart.incrementItemCount(this.quantity);               this.showSuccessSnackBar();             },             err => this.showErrorSnackBar()           );       } else {         this.lineItems.createLineItem({           orderId: this.cart.orderId,           name: this.product.name,           imageUrl: this.product.imageUrl,           quantity: this.quantity,           skuCode: this.product.code         }).subscribe(           () => {             this.cart.incrementItemCount(this.quantity);             this.showSuccessSnackBar();           },           err => this.showErrorSnackBar()         );       }     } else {       this.snackBar.open('Select a quantity greater than 0.', 'Close', { duration: 8000 });     }   }    setQuantity(no: number) {     this.quantity = no;   }    goBack() {     this.location.back();   }    private showSuccessSnackBar() {     this.snackBar.open('Item successfully added to cart.', 'Close', { duration: 8000 });   }    private showErrorSnackBar() {     this.snackBar.open('Failed to add your item to the cart.', 'Close', { duration: 8000 });   } }

<div id="container">     <mat-card *ngIf="product" class="product-card">         <img mat-card-image src="{{product.imageUrl}}" alt="Photo of a product">         <mat-card-content>             <mat-card-title>{{product.name}}</mat-card-title>             <mat-card-subtitle>{{product.prices[0].compareAtAmountFloat | currency:'EUR'}}</mat-card-subtitle>             <p>                 {{product.description}}             </p>         </mat-card-content>         <mat-card-actions>             <app-item-quantity [quantity]="quantity" [maxValue]="10" (setQuantityEvent)="setQuantity($  event)"></app-item-quantity>             <button mat-raised-button color="accent" (click)="addItemToCart()">                 <mat-icon>add_shopping_cart</mat-icon>                 Add to cart             </button>             <button mat-raised-button color="primary" (click)="goBack()">                 <mat-icon>storefront</mat-icon>                 Continue shopping             </button>         </mat-card-actions>     </mat-card> </div>

@UntilDestroy({ checkProperties: true }) @Component({   selector: 'app-signup',   templateUrl: './signup.component.html',   styleUrls: ['./signup.component.css'] }) export class SignupComponent implements OnInit {   signupForm = this.fb.group({     firstName: ['', Validators.required],     lastName: ['', Validators.required],     email: ['', [Validators.required, Validators.email]],     password: ['', [Validators.required, Validators.minLength(8)]],     confirmedPassword: ['', [Validators.required]]   }, { validators: this.matchPasswords });    @ViewChild(FormGroupDirective) sufDirective: FormGroupDirective | undefined;    constructor(     private customer: CustomerService,     private fb: FormBuilder,     private snackBar: MatSnackBar,     private router: Router,     private header: HeaderService   ) { }    ngOnInit() {     this.header.setHeaderButtonsVisibility(false);   }    matchPasswords(signupGroup: AbstractControl): ValidationErrors | null {     const password = signupGroup.get('password')?.value;     const confirmedPassword = signupGroup.get('confirmedPassword')?.value;      return password == confirmedPassword ? null : { differentPasswords: true };   }    get password() { return this.signupForm.get('password'); }    get confirmedPassword() { return this.signupForm.get('confirmedPassword'); }    signup() {     const customer = this.signupForm.value;      this.customer.createCustomer(       customer.email,       customer.password,       customer.firstName,       customer.lastName     ).subscribe(       () => {         this.signupForm.reset();         this.sufDirective?.resetForm();          this.snackBar.open('Account successfully created. You will be redirected in 5 seconds.', 'Close', { duration: 5000 });          setTimeout(() => this.router.navigateByUrl('/'), 6000);       },       err => this.snackBar.open('There was a problem creating your account.', 'Close', { duration: 5000 })     );   } }

<form id="container" [formGroup]="signupForm" (ngSubmit)="signup()">     <h1 class="mat-display-3">Create Account</h1>     <mat-form-field appearance="outline">         <mat-label>First Name</mat-label>         <input matInput formControlName="firstName">         <mat-icon matPrefix>portrait</mat-icon>     </mat-form-field>     <mat-form-field appearance="outline">         <mat-label>Last Name</mat-label>         <input matInput formControlName="lastName">         <mat-icon matPrefix>portrait</mat-icon>     </mat-form-field>     <mat-form-field appearance="outline">         <mat-label>Email</mat-label>         <input matInput formControlName="email" type="email">         <mat-icon matPrefix>alternate_email</mat-icon>     </mat-form-field>     <mat-form-field appearance="outline">         <mat-label>Password</mat-label>         <input matInput formControlName="password" type="password">         <mat-icon matPrefix>vpn_key</mat-icon>     </mat-form-field>     <mat-form-field appearance="outline">         <mat-label>Confirm Password</mat-label>         <input matInput formControlName="confirmedPassword" type="password">         <mat-icon matPrefix>vpn_key</mat-icon>     </mat-form-field>     <div ngIf="confirmedPassword?.invalid && (confirmedPassword?.dirty || confirmedPassword?.touched)">         <mat-error ngIf="signupForm.hasError('differentPasswords')">             Your passwords do not match.         </mat-error>     </div>     <div ngIf="password?.invalid && (password?.dirty || password?.touched)">         <mat-error ngIf="password?.hasError('minlength')">             Your password should be at least 8 characters.         </mat-error>     </div>     <button mat-flat-button color="primary" [disabled]="!signupForm.valid">Sign Up</button> </form>

<form id="container" [formGroup]="loginForm" (ngSubmit)="login()">     <h1 class="mat-display-3">Login</h1>     <mat-form-field appearance="outline">         <mat-label>Email</mat-label>         <input matInput type="email" formControlName="email" required>         <mat-icon matPrefix>alternate_email</mat-icon>     </mat-form-field>     <mat-form-field appearance="outline">         <mat-label>Password</mat-label>         <input matInput type="password" formControlName="password" required>         <mat-icon matPrefix>vpn_key</mat-icon>     </mat-form-field>     <button mat-flat-button color="primary" [disabled]="!loginForm.valid">Login</button>     <p id="newAccount" class="mat-h3">Not registered yet? <a id="newAccountLink" routerLink="/signup">Create an account.</a></p> </form>

@NgModule({   declarations: [SummaryComponent, CodesComponent, EmptyComponent],   imports: [     RouterModule.forChild([       {         path: '', canActivate: [EmptyCartGuard], children: [           { path: 'cart', component: SummaryComponent },           { path: 'codes', component: CodesComponent }         ]       },       { path: 'empty', component: EmptyComponent }     ]),     MatDividerModule,     MatFormFieldModule,     MatInputModule,     MatMenuModule,     ReactiveFormsModule,     SharedModule   ] }) export class CartModule { }

@UntilDestroy({ checkProperties: true }) @Component({   selector: 'app-codes',   templateUrl: './codes.component.html',   styleUrls: ['./codes.component.css'] }) export class CodesComponent {   couponCode = new FormControl('');   giftCardCode = new FormControl('');    @ViewChild(FormControlDirective) codesDirective: FormControlDirective | undefined;    constructor(     private cart: CartService,     private order: OrderService,     private snackBar: MatSnackBar   ) { }    private updateOrder(order: Order, params: UpdateOrderParams[], codeType: string) {     this.order.updateOrder(order, params)       .subscribe(         () => {           this.snackBar.open(Successfully added $  {codeType} code., 'Close', { duration: 8000 });           this.couponCode.reset();           this.giftCardCode.reset();           this.codesDirective?.reset();         },         err => this.snackBar.open(There was a problem adding your $  {codeType} code., 'Close', { duration: 8000 })       );   }    addCoupon() {     this.updateOrder({ id: this.cart.orderId, couponCode: this.couponCode.value }, [UpdateOrderParams.couponCode], 'coupon');   }    addGiftCard() {     this.updateOrder({ id: this.cart.orderId, giftCardCode: this.giftCardCode.value }, [UpdateOrderParams.giftCardCode], 'gift card');   }  }

<div id="container">     <app-title title="Redeem a code" subtitle="Enter a coupon code or gift card" [centerText]="true"></app-title>     <div class="input-row">         <mat-form-field appearance="outline">             <mat-label>Coupon Code</mat-label>             <input matInput [formControl]="couponCode" required>             <mat-icon matPrefix>card_giftcard</mat-icon>         </mat-form-field>         <button class="redeem" mat-flat-button color="accent" [disabled]="couponCode.invalid" (click)="addCoupon()">Redeem</button>     </div>     <div class="input-row">         <mat-form-field appearance="outline">             <mat-label>Gift Card Code</mat-label>             <input matInput [formControl]="giftCardCode" required>             <mat-icon matPrefix>redeem</mat-icon>         </mat-form-field>         <button class="redeem" mat-flat-button color="accent" [disabled]="giftCardCode.invalid" (click)="addGiftCard()">Redeem</button>     </div>     <button color="primary" mat-flat-button routerLink="/cart">         <mat-icon>shopping_cart</mat-icon>         CONTINUE TO CART     </button> </div>

<app-simple-page title="Your cart is empty" subtitle="There is currently nothing in your cart. Head to the home page to add items." buttonText="GO TO HOME PAGE" icon="shopping_basket" [centerText]="true" route="/"> </app-simple-page>

@UntilDestroy({ checkProperties: true }) @Component({   selector: 'app-summary',   templateUrl: './summary.component.html',   styleUrls: ['./summary.component.css'] }) export class SummaryComponent implements OnInit {   order: Order = {};    summary: { name: string, amount: string | undefined, id: string }[] = [];    constructor(     private orders: OrderService,     private lineItems: LineItemService,     private cart: CartService,     private snackBar: MatSnackBar,     private router: Router   ) { }    ngOnInit() {     this.orders.getOrder(this.cart.orderId, GetOrderParams.cart)       .subscribe(         order => this.processOrder(order),         err => this.showOrderError('retrieving your cart')       );   }    private processOrder(order: Order) {     this.order = order;      this.summary = [       { name: 'Subtotal', amount: order.formattedSubtotalAmount, id: 'subtotal' },       { name: 'Discount', amount: order.formattedDiscountAmount, id: 'discount' },       { name: 'Taxes (included)', amount: order.formattedTotalTaxAmount, id: 'taxes' },       { name: 'Shipping', amount: order.formattedShippingAmount, id: 'shipping' },       { name: 'Gift Card', amount: order.formattedGiftCardAmount, id: 'gift-card' }     ];   }    private showOrderError(msg: string) {     this.snackBar.open(There was a problem $  {msg}., 'Close', { duration: 8000 });   }    checkout() {     this.router.navigateByUrl('/customer');   }    deleteLineItem(id: string) {     this.lineItems.deleteLineItem(id)       .pipe(         mergeMap(() => this.orders.getOrder(this.cart.orderId, GetOrderParams.cart))       ).subscribe(         order => {           this.processOrder(order);           this.cart.itemCount = order.skusCount || this.cart.itemCount;           this.snackBar.open(Item successfully removed from cart., 'Close', { duration: 8000 })         },         err => this.showOrderError('deleting your order')       );   } }

<div class="container" ngIf="order">     <h3 id="order-id">Order #{{order.number}} ({{order.skusCount}} items)</h3>     <div class="line-item" ngFor="let item of order.lineItems">         <div id="product-details">             <img ngIf="item.imageUrl" class="image-xs" src="{{item.imageUrl}}" alt="product photo">             <div ngIf="!item.imageUrl" class="image-xs no-image"></div>             <div id="line-details">                 <div>{{item.name}}</div>                 <div> {{item.formattedUnitAmount }} </div>             </div>         </div>         <div id="product-config">             <app-item-quantity [quantity]="item.quantity || 0" [disabled]="true"></app-item-quantity>             <div class="itemTotal"> {{item.formattedTotalAmount }} </div>             <button mat-icon-button color="warn" (click)="deleteLineItem(item.id || '')">                 <mat-icon>clear</mat-icon>         </button>         </div>     </div>     <mat-divider></mat-divider>     <div class="costSummary">         <div class="costItem" *ngFor="let item of summary" [id]="item.id">             <h3 class="costLabel">{{item.name}}</h3>             <p> {{item.amount }} </p>         </div>     </div>     <mat-divider></mat-divider>     <div class="costSummary">         <div class="costItem" id="total">             <h2 id="totalLabel">Total</h2>             <h2> {{order.formattedTotalAmountWithTaxes}} </h2>         </div>     </div>     <div id="checkout-button">         <button color="accent" mat-flat-button routerLink="/codes">         <mat-icon>redeem</mat-icon>         ADD GIFT CARD/COUPON     </button>         <button color="primary" mat-flat-button (click)="checkout()">         <mat-icon>point_of_sale</mat-icon>         CHECKOUT     </button>     </div> </div>

@NgModule({   declarations: [     CustomerComponent,     AddressComponent,     BillingAddressComponent,     ShippingAddressComponent,     ShippingMethodsComponent,     PaymentComponent,     PlaceOrderComponent,     AddressListComponent,     CountrySelectComponent,     CancelPaymentComponent   ],   imports: [     RouterModule.forChild([       {         path: '', canActivate: [EmptyCartGuard], children: [           { path: 'billing-address', component: BillingAddressComponent },           { path: 'cancel-payment', component: CancelPaymentComponent },           { path: 'customer', component: CustomerComponent },           { path: 'payment', component: PaymentComponent },           { path: 'place-order', component: PlaceOrderComponent },           { path: 'shipping-address', component: ShippingAddressComponent },           { path: 'shipping-methods', component: ShippingMethodsComponent }         ]       }     ]),     MatCardModule,     MatCheckboxModule,     MatDividerModule,     MatInputModule,     MatMenuModule,     MatRadioModule,     ReactiveFormsModule,     SharedModule   ] }) export class CheckoutModule { }

<button id="country-select" mat-stroked-button [matMenuTriggerFor]="countryMenu">     {{country}}     <mat-icon>expand_more</mat-icon> </button> <mat-menu #countryMenu="matMenu">     <button *ngFor="let cnt of countries" (click)="setCountry(cnt)" mat-menu-item>{{cnt.name}}</button> </mat-menu>

@Component({   selector: 'app-address',   templateUrl: './address.component.html',   styleUrls: ['./address.component.css'] }) export class AddressComponent {   @Input() buttonText: string = '';   @Input() showTitle?: boolean = false;    @Output() createAddress = new EventEmitter<Address>();    @Input() checkboxText: string = '';   @Output() isCheckboxChecked = new EventEmitter<boolean>();    countryCode: string = '';    addressForm = this.fb.group({     firstName: [''],     lastName: [''],     line1: [''],     city: [''],     zipCode: [''],     stateCode: [''],     phone: ['']   });    @ViewChild(FormGroupDirective) afDirective: FormGroupDirective | undefined;    constructor(private fb: FormBuilder) { }    setCountryCode(code: string) {     this.countryCode = code;   }    addAddress() {     this.createAddress.emit({       firstName: this.addressForm.get('firstName')?.value,       lastName: this.addressForm.get('lastName')?.value,       line1: this.addressForm.get('line1')?.value,       city: this.addressForm.get('city')?.value,       zipCode: this.addressForm.get('zipCode')?.value,       stateCode: this.addressForm.get('stateCode')?.value || 'N/A',       countryCode: this.countryCode,       phone: this.addressForm.get('phone')?.value     });   }    setCheckboxValue(change: MatCheckboxChange) {     if (this.isCheckboxChecked) {       this.isCheckboxChecked.emit(change.checked);     }   } }

<form id="container" [formGroup]="addressForm">     <p class="mat-headline" *ngIf="showTitle">Or add a new address</p>     <div class="row">         <mat-form-field appearance="outline">             <mat-label>First Name</mat-label>             <input matInput formControlName="firstName">         </mat-form-field>         <mat-form-field appearance="outline">             <mat-label>Last Name</mat-label>             <input matInput formControlName="lastName">         </mat-form-field>     </div>     <div class="row">         <mat-form-field appearance="outline">             <mat-label>Address</mat-label>             <input matInput formControlName="line1">         </mat-form-field>         <mat-form-field appearance="outline">             <mat-label>City</mat-label>             <input matInput formControlName="city">         </mat-form-field>     </div>     <div class="row">         <mat-form-field appearance="outline">             <mat-label>State Code</mat-label>             <input matInput formControlName="stateCode">         </mat-form-field>         <mat-form-field appearance="outline">             <mat-label>Zip Code</mat-label>             <input matInput formControlName="zipCode">         </mat-form-field>     </div>     <div class="row">         <mat-form-field appearance="outline">             <mat-label>Phone</mat-label>             <input matInput formControlName="phone">         </mat-form-field>         <app-country-select (setCountryEvent)="setCountryCode($  event)"></app-country-select>     </div>     <mat-checkbox color="accent" (change)="setCheckboxValue($  event)">         {{checkboxText}}     </mat-checkbox>     <button id="submit-button" mat-flat-button color="primary" (click)="addAddress()">         {{buttonText}}     </button> </form>

@Component({   selector: 'app-address-list',   templateUrl: './address-list.component.html',   styleUrls: ['./address-list.component.css'] }) export class AddressListComponent implements OnInit {   addresses: CustomerAddress[] = [];    @Output() setAddressEvent = new EventEmitter<string>();    constructor(     private session: SessionService,     private customerAddresses: CustomerAddressService,     private snackBar: MatSnackBar   ) { }    ngOnInit() {     this.session.loggedInStatus       .pipe(         mergeMap(           status => iif(() => status, this.customerAddresses.getCustomerAddresses())         ))       .subscribe(         addresses => {           if (addresses.length) {             this.addresses = addresses           }         },         err => this.snackBar.open('There was a problem getting your existing addresses.', 'Close', { duration: 8000 })       );   }    setAddress(change: MatRadioChange) {     this.setAddressEvent.emit(change.value);   } }

<div id="container">     <p class="mat-headline">Pick an existing address</p>     <mat-error ngIf="!addresses.length">You have no existing addresses</mat-error>     <mat-radio-group ngIf="addresses.length" class="addresses" (change)="setAddress($  event)">         <mat-card class="address" *ngFor="let address of addresses">             <mat-radio-button [value]="address.address?.id" color="primary">                 <p>{{address.address?.firstName}} {{address.address?.lastName}},</p>                 <p>{{address.address?.line1}},</p>                 <p>{{address.address?.city}},</p>                 <p>{{address.address?.zipCode}},</p>                 <p>{{address.address?.stateCode}}, {{address.address?.countryCode}}</p>                 <p>{{address.address?.phone}}</p>             </mat-radio-button>         </mat-card>     </mat-radio-group> </div>

@UntilDestroy({ checkProperties: true }) @Component({   selector: 'app-customer',   templateUrl: './customer.component.html',   styleUrls: ['./customer.component.css'] }) export class CustomerComponent implements OnInit {   email = new FormControl('', [Validators.required, Validators.email]);    constructor(     private orders: OrderService,     private customers: CustomerService,     private cart: CartService,     private router: Router,     private snackBar: MatSnackBar   ) { }    ngOnInit() {     this.customers.getCurrentCustomer()       .subscribe(         customer => this.email.setValue(customer.email)       );   }    addCustomerEmail() {     this.orders.updateOrder(       { id: this.cart.orderId, customerEmail: this.email.value },       [UpdateOrderParams.customerEmail])       .subscribe(         () => this.router.navigateByUrl('/billing-address'),         err => this.snackBar.open('There was a problem adding your email to the order.', 'Close', { duration: 8000 })       );   } }

<div id="container">     <app-title no="1" title="Customer" subtitle="Billing information and shipping address"></app-title>     <mat-form-field appearance="outline">         <mat-label>Email</mat-label>         <input matInput [formControl]="email" required>         <mat-icon matPrefix>alternate_email</mat-icon>     </mat-form-field>     <button mat-flat-button color="primary" [disabled]="email.invalid" (click)="addCustomerEmail()">         PROCEED TO BILLING ADDRESS     </button> </div>

@UntilDestroy({ checkProperties: true }) @Component({   selector: 'app-billing-address',   templateUrl: './billing-address.component.html',   styleUrls: ['./billing-address.component.css'] }) export class BillingAddressComponent implements OnInit {   showAddresses: boolean = false;   sameShippingAddressAsBilling: boolean = false;   selectedCustomerAddressId: string = '';    constructor(     private addresses: AddressService,     private snackBar: MatSnackBar,     private session: SessionService,     private orders: OrderService,     private cart: CartService,     private router: Router,     private customerAddresses: CustomerAddressService) { }    ngOnInit() {     this.session.loggedInStatus       .subscribe(         status => this.showAddresses = status       );   }    updateBillingAddress(address: Address) {     if (this.showAddresses && this.selectedCustomerAddressId) {       this.cloneAddress();     } else if (address.firstName && address.lastName && address.line1 && address.city && address.zipCode && address.stateCode && address.countryCode && address.phone) {       this.createAddress(address);     }     else {       this.snackBar.open('Check your address. Some fields are missing.', 'Close');     }   }    setCustomerAddress(customerAddressId: string) {     this.selectedCustomerAddressId = customerAddressId;   }    setSameShippingAddressAsBilling(change: boolean) {     this.sameShippingAddressAsBilling = change;   }    private createAddress(address: Address) {     this.addresses.createAddress(address)       .pipe(         concatMap(           address => {             const update = this.updateOrderObservable({               id: this.cart.orderId,               billingAddressId: address.id             }, [UpdateOrderParams.billingAddress]);              if (this.showAddresses) {               return combineLatest([update, this.customerAddresses.createCustomerAddress(address.id || '', '')]);             } else {               return update;             }           }))       .subscribe(         () => this.showSuccessSnackBar(),         err => this.showErrorSnackBar()       );   }    private cloneAddress() {     this.updateOrderObservable({       id: this.cart.orderId,       billingAddressCloneId: this.selectedCustomerAddressId     }, [UpdateOrderParams.billingAddressClone])       .subscribe(         () => this.showSuccessSnackBar(),         err => this.showErrorSnackBar()       );   }    private updateOrderObservable(order: Order, updateParams: UpdateOrderParams[]): Observable<any> {     return iif(() => this.sameShippingAddressAsBilling,       concat([         this.orders.updateOrder(order, updateParams),         this.orders.updateOrder(order, [UpdateOrderParams.shippingAddressSameAsBilling])       ]),       this.orders.updateOrder(order, updateParams)     );   }    private showErrorSnackBar() {     this.snackBar.open('There was a problem creating your address.', 'Close', { duration: 8000 });   }    private navigateTo(path: string) {     setTimeout(() => this.router.navigateByUrl(path), 4000);   }    private showSuccessSnackBar() {     this.snackBar.open('Billing address successfully added. Redirecting...', 'Close', { duration: 3000 });     if (this.sameShippingAddressAsBilling) {       this.navigateTo('/shipping-methods');     } else {       this.navigateTo('/shipping-address');     }   } }

<app-title no="2" title="Billing Address" subtitle="Address to bill charges to"></app-title> <app-address-list ngIf="showAddresses" (setAddressEvent)="setCustomerAddress($  event)"></app-address-list> <mat-divider ngIf="showAddresses"></mat-divider> <app-address [showTitle]="showAddresses" buttonText="PROCEED TO NEXT STEP" checkboxText="Ship to the same address" (isCheckboxChecked)="setSameShippingAddressAsBilling($  event)" (createAddress)="updateBillingAddress($  event)"></app-address>

@UntilDestroy({ checkProperties: true }) @Component({   selector: 'app-shipping-address',   templateUrl: './shipping-address.component.html',   styleUrls: ['./shipping-address.component.css'] }) export class ShippingAddressComponent implements OnInit {   showAddresses: boolean = false;   sameBillingAddressAsShipping: boolean = false;   selectedCustomerAddressId: string = '';    constructor(     private addresses: AddressService,     private snackBar: MatSnackBar,     private session: SessionService,     private orders: OrderService,     private cart: CartService,     private router: Router,     private customerAddresses: CustomerAddressService) { }    ngOnInit() {     this.session.loggedInStatus       .subscribe(         status => this.showAddresses = status       );   }    updateShippingAddress(address: Address) {     if (this.showAddresses && this.selectedCustomerAddressId) {       this.cloneAddress();     } else if (address.firstName && address.lastName && address.line1 && address.city && address.zipCode && address.stateCode && address.countryCode && address.phone) {       this.createAddress(address);     }     else {       this.snackBar.open('Check your address. Some fields are missing.', 'Close');     }   }    setCustomerAddress(customerAddressId: string) {     this.selectedCustomerAddressId = customerAddressId;   }    setSameBillingAddressAsShipping(change: boolean) {     this.sameBillingAddressAsShipping = change;   }    private createAddress(address: Address) {     this.addresses.createAddress(address)       .pipe(         concatMap(           address => {             const update = this.updateOrderObservable({               id: this.cart.orderId,               shippingAddressId: address.id             }, [UpdateOrderParams.shippingAddress]);              if (this.showAddresses) {               return combineLatest([update, this.customerAddresses.createCustomerAddress(address.id || '', '')]);             } else {               return update;             }           }))       .subscribe(         () => this.showSuccessSnackBar(),         err => this.showErrorSnackBar()       );   }    private cloneAddress() {     this.updateOrderObservable({       id: this.cart.orderId,       shippingAddressCloneId: this.selectedCustomerAddressId     }, [UpdateOrderParams.shippingAddressClone])       .subscribe(         () => this.showSuccessSnackBar(),         err => this.showErrorSnackBar()       );   }    private updateOrderObservable(order: Order, updateParams: UpdateOrderParams[]): Observable<any> {     return iif(() => this.sameBillingAddressAsShipping,       concat([         this.orders.updateOrder(order, updateParams),         this.orders.updateOrder(order, [UpdateOrderParams.billingAddressSameAsShipping])       ]),       this.orders.updateOrder(order, updateParams)     );   }    private showErrorSnackBar() {     this.snackBar.open('There was a problem creating your address.', 'Close', { duration: 8000 });   }    private showSuccessSnackBar() {     this.snackBar.open('Shipping address successfully added. Redirecting...', 'Close', { duration: 3000 });      setTimeout(() => this.router.navigateByUrl('/shipping-methods'), 4000);   } }

<app-title no="3" title="Shipping Address" subtitle="Address to ship package to"></app-title> <app-address-list ngIf="showAddresses" (setAddressEvent)="setCustomerAddress($  event)"></app-address-list> <mat-divider ngIf="showAddresses"></mat-divider> <app-address [showTitle]="showAddresses" buttonText="PROCEED TO SHIPPING METHODS" checkboxText="Bill to the same address" (isCheckboxChecked)="setSameBillingAddressAsShipping($  event)" (createAddress)="updateShippingAddress($  event)"></app-address>

@UntilDestroy({ checkProperties: true }) @Component({   selector: 'app-shipping-methods',   templateUrl: './shipping-methods.component.html',   styleUrls: ['./shipping-methods.component.css'] }) export class ShippingMethodsComponent implements OnInit {   shipments: Shipment[] | undefined = [];   shipmentsForm: FormGroup = this.fb.group({});    constructor(     private orders: OrderService,     private dlts: DeliveryLeadTimeService,     private cart: CartService,     private router: Router,     private fb: FormBuilder,     private shipments: ShipmentService,     private snackBar: MatSnackBar   ) { }    ngOnInit() {     combineLatest([       this.orders.getOrder(this.cart.orderId, GetOrderParams.shipments),       this.dlts.getDeliveryLeadTimes()     ]).subscribe(       ([lineItems, deliveryLeadTimes]) => {         let li: LineItem;         let lt: DeliveryLeadTime[];          this.shipments = lineItems.shipments?.map((shipment) => {           if (shipment.id) {             this.shipmentsForm.addControl(shipment.id, new FormControl('', Validators.required));           }            if (shipment.lineItems) {             shipment.lineItems = shipment.lineItems.map(item => {               li = this.findItem(lineItems, item.skuCode || '');               item.imageUrl = li.imageUrl;               item.name = li.name;               return item;             });           }            if (shipment.availableShippingMethods) {             lt = this.findLocationLeadTime(deliveryLeadTimes, shipment);             shipment.availableShippingMethods = shipment.availableShippingMethods?.map(               method => {                 method.deliveryLeadTime = this.findMethodLeadTime(lt, method);                 return method;               });           }            return shipment;         });       },       err => this.router.navigateByUrl('/error')     );   }    setShipmentMethods() {     const shipmentsFormValue = this.shipmentsForm.value;      combineLatest(Object.keys(shipmentsFormValue).map(       key => this.shipments.updateShipment(key, shipmentsFormValue[key])     )).subscribe(       () => {         this.snackBar.open('Your shipments have been updated with a shipping method.', 'Close', { duration: 3000 });         setTimeout(() => this.router.navigateByUrl('/payment'), 4000);       },       err => this.snackBar.open('There was a problem adding shipping methods to your shipments.', 'Close', { duration: 5000 })     );   }     private findItem(lineItems: LineItem[], skuCode: string): LineItem {     return lineItems.filter((item) => item.skuCode == skuCode)[0];   }    private findLocationLeadTime(times: DeliveryLeadTime[], shipment: Shipment): DeliveryLeadTime[] {     return times.filter((dlTime) => dlTime?.stockLocation?.id == shipment?.stockLocation?.id);   }    private findMethodLeadTime(times: DeliveryLeadTime[], method: ShippingMethod): DeliveryLeadTime {     return times.filter((dlTime) => dlTime?.shippingMethod?.id == method?.id)[0];   } }

<form id="container" [formGroup]="shipmentsForm">     <app-title no="4" title="Shipping Methods" subtitle="How to ship your packages"></app-title>     <div class="shipment-container" ngFor="let shipment of shipments; let j = index; let isLast = last">         <h1>Shipment {{j+1}} of {{shipments?.length}}</h1>         <div class="row" ngFor="let item of shipment.lineItems">             <img class="image-xs" [src]="item.imageUrl" alt="product photo">             <div id="shipment-details">                 <h4 id="item-name">{{item.name}}</h4>                 <p>{{item.skuCode}}</p>             </div>             <div id="quantity-section">                 <p id="quantity-label">Quantity: </p>{{item.quantity}}             </div>         </div>         <mat-radio-group [formControlName]="shipment?.id || j">             <mat-radio-button ngFor="let method of shipment.availableShippingMethods" [value]="method.id">                 <div class="radio-button">                     <p>{{method.name}}</p>                     <div>                         <p class="radio-label">Cost:</p>                         <p> {{method.formattedPriceAmount}}</p>                     </div>                     <div>                         <p class="radio-label">Timeline:</p>                         <p> Available in {{method.deliveryLeadTime?.minDays}}-{{method.deliveryLeadTime?.maxDays}} days</p>                     </div>                 </div>             </mat-radio-button>         </mat-radio-group>         <mat-divider ngIf="!isLast"></mat-divider>     </div>     <button mat-flat-button color="primary" [disabled]="shipmentsForm.invalid" (click)="setShipmentMethods()">PROCEED TO PAYMENT</button> </form>

@UntilDestroy({ checkProperties: true }) @Component({   selector: 'app-payment',   templateUrl: './payment.component.html',   styleUrls: ['./payment.component.css'] }) export class PaymentComponent implements OnInit {   approvalUrl: string = '';    constructor(     private orders: OrderService,     private cart: CartService,     private router: Router,     private payments: PaypalPaymentService   ) { }    ngOnInit() {     const orderId = this.cart.orderId;      this.orders.getOrder(orderId, GetOrderParams.paymentSource)       .pipe(         concatMap((order: Order) => {           const paymentSourceId = order.paymentSource?.id;            const paymentMethod = order.availablePaymentMethods?.filter(             (method) => method.paymentSourceType == 'paypal_payments'           )[0];            return iif(             () => paymentSourceId ? true : false,             this.payments.getPaypalPayment(paymentSourceId || ''),             this.orders.updateOrder({               id: orderId,               paymentMethodId: paymentMethod?.id             }, [UpdateOrderParams.paymentMethod])               .pipe(concatMap(                 order => this.payments.createPaypalPayment({                   orderId: orderId,                   cancelUrl: $  {environment.clientUrl}/cancel-payment,                   returnUrl: $  {environment.clientUrl}/place-order                 })               ))           );         }))       .subscribe(         paypalPayment => this.approvalUrl = paypalPayment?.approvalUrl || '',         err => this.router.navigateByUrl('/error')       );   }    navigateToPaypal() {     window.location.href = this.approvalUrl;   } }

<app-simple-page number="5" title="Payment" subtitle="Pay for your order" buttonText="PROCEED TO PAY WITH PAYPAL" icon="point_of_sale" (buttonEvent)="navigateToPaypal()" [buttonDisabled]="approvalUrl.length ? false : true"></app-simple-page>

<app-simple-page title="Payment cancelled" subtitle="Your Paypal payment has been cancelled" icon="money_off" buttonText="GO TO HOME" [centerText]="true" route="/"></app-simple-page>

@UntilDestroy({ checkProperties: true }) @Component({   selector: 'app-place-order',   templateUrl: './place-order.component.html',   styleUrls: ['./place-order.component.css'] }) export class PlaceOrderComponent implements OnInit {   disableButton = true;    constructor(     private route: ActivatedRoute,     private router: Router,     private payments: PaypalPaymentService,     private orders: OrderService,     private cart: CartService,     private snackBar: MatSnackBar   ) { }    ngOnInit() {     this.route.queryParams       .pipe(         concatMap(params => {           const payerId = params['PayerID'];           const orderId = this.cart.orderId;            return iif(             () => payerId.length > 0,             this.orders.getOrder(orderId, GetOrderParams.paymentSource)               .pipe(                 concatMap(order => {                   const paymentSourceId = order.paymentSource?.id || '';                    return iif(                     () => paymentSourceId ? paymentSourceId.length > 0 : false,                     this.payments.updatePaypalPayment(paymentSourceId, payerId)                   );                 })               )           );         }))       .subscribe(         () => this.disableButton = false,         () => this.router.navigateByUrl('/error')       );   }    placeOrder() {     this.disableButton = true;      this.orders.updateOrder({       id: this.cart.orderId,       place: true     }, [UpdateOrderParams.place])       .subscribe(         () => {           this.snackBar.open('Your order has been successfully placed.', 'Close', { duration: 3000 });           this.cart.clearCart();           setTimeout(() => this.router.navigateByUrl('/'), 4000);         },         () => {           this.snackBar.open('There was a problem placing your order.', 'Close', { duration: 8000 });           this.disableButton = false;         }       );   } }

<app-simple-page title="Finalize Order" subtitle="Complete your order" [number]="'6'" icon="shopping_bag" buttonText="PLACE YOUR ORDER" (buttonEvent)="placeOrder()" [buttonDisabled]="disableButton"></app-simple-page>

@NgModule({   declarations: [     AppComponent   ],   imports: [     BrowserModule,     AppRoutingModule,     HttpClientModule,     BrowserAnimationsModule,     AuthModule,     ProductsModule,     CartModule,     CheckoutModule,     CoreModule   ],   providers: [     {       provide: HTTP_INTERCEPTORS,       useClass: OptionsInterceptor,       multi: true     },     {       provide: APP_INITIALIZER,       useFactory: (http: HttpClient) => () => http.post<object>(         $  {environment.apiUrl}/oauth/token,         { 'grantType': 'client_credentials' },         { withCredentials: true }),       multi: true,       deps: [HttpClient]     }   ],   bootstrap: [AppComponent] }) export class AppModule { }

@NgModule({   declarations: [SimplePageComponent, TitleComponent, WordWrapPipe, ItemQuantityComponent],   imports: [CommonModule, MatIconModule, MatButtonModule, MatTooltipModule, MatMenuModule, RouterModule],   exports: [     CommonModule,     ItemQuantityComponent,     MatButtonModule,     MatIconModule,     MatSnackBarModule,     MatTooltipModule,     SimplePageComponent,     TitleComponent,     WordWrapPipe   ] }) export class SharedModule { }

<button mat-stroked-button [matMenuTriggerFor]="menu" [disabled]="disabled">     {{quantity}}     <mat-icon ngIf="!disabled">expand_more</mat-icon> </button> <mat-menu #menu="matMenu">     <button ngFor="let no of values" (click)="setQuantity(no)" mat-menu-item>{{no}}</button> </mat-menu>

<div id="container">     <app-title no="{{number}}" title="{How To Build An E-Commerce Site With Angular 11, Commerce Layer And Paypal}" subtitle="{{subtitle}}" [centerText]="centerText"></app-title>     <div *ngIf="icon" id="icon-container">         <mat-icon color="primary" class="icon">{{icon}}</mat-icon>     </div>     <button mat-flat-button color="primary" (click)="buttonClicked()" [disabled]="buttonDisabled">         {{buttonText}}     </button> </div>

@Injectable({   providedIn: 'root' }) export class HttpErrorHandler {    constructor() { }    handleError(err: HttpErrorResponse): Observable {     let displayMessage = '';      if (err.error instanceof ErrorEvent) {       displayMessage = Client-side error: $  {err.error.message};     } else {       displayMessage = Server-side error: $  {err.message};     }      return throwError(displayMessage);   } }

@Injectable({   providedIn: 'root' }) export class AddressService {   private url: string = $  {environment.apiUrl}/api/addresses;    constructor(private http: HttpClient, private eh: HttpErrorHandler) { }    createAddress(address: Address): Observable<Address> {     return this.http.post<Address>(this.url, address)       .pipe(catchError(this.eh.handleError));   }    getAddress(id: string): Observable<Address> {     return this.http.get<Address>($  {this.url}/$  {id})       .pipe(catchError(this.eh.handleError));   } }

@Injectable({   providedIn: 'root' }) export class CartService {   private cart = new BehaviorSubject({     orderId: this.orderId,     itemCount: this.itemCount   });    cartValue$   = this.cart.asObservable();    constructor(private storage: LocalStorageService) { }    get orderId(): string {     const id = this.storage.getItem('order-id');     return id ? id : '';   }    set orderId(id: string) {     this.storage.addItem('order-id', id);     this.cart.next({ orderId: id, itemCount: this.itemCount });   }    get itemCount(): number {     const itemCount = this.storage.getItem('item-count');      return itemCount ? parseInt(itemCount) : 0;   }    set itemCount(amount: number) {     this.storage.addItem('item-count', amount.toString());     this.cart.next({ orderId: this.orderId, itemCount: amount });   }    incrementItemCount(amount: number) {     this.itemCount = this.itemCount + amount;   }    decrementItemCount(amount: number) {     this.itemCount = this.itemCount - amount;   }    clearCart() {     this.storage.deleteItem('item-count');     this.cart.next({ orderId: '', itemCount: 0 });   } }

@Injectable({   providedIn: 'root' }) export class CountryService {    constructor(private http: HttpClient) { }    getCountries(): Observable<Country[]> {     return this.http.get<Country[]>('./../../../assets/json/country-codes.json');   } }

@Injectable({   providedIn: 'root' }) export class CustomerAddressService {   private url: string = $  {environment.apiUrl}/api/customer_addresses;    constructor(private http: HttpClient, private eh: HttpErrorHandler) { }    createCustomerAddress(addressId: string, customerId: string): Observable<CustomerAddress> {     return this.http.post<CustomerAddress>(this.url, {       addressId: addressId, customerId: customerId     })       .pipe(catchError(this.eh.handleError));   }    getCustomerAddresses(): Observable<CustomerAddress[]> {     return this.http.get<CustomerAddress[]>($  {this.url})       .pipe(catchError(this.eh.handleError));   }    getCustomerAddress(id: string): Observable<CustomerAddress> {     return this.http.get<CustomerAddress>($  {this.url}/$  {id})       .pipe(catchError(this.eh.handleError));   } }

@Injectable({   providedIn: 'root' }) export class CustomerService {   private url: string = $  {environment.apiUrl}/api/customers;    constructor(private http: HttpClient, private eh: HttpErrorHandler) { }    createCustomer(email: string, password: string, firstName: string, lastName: string): Observable<Customer> {     return this.http.post<Customer>(this.url, {       email: email,       password: password,       firstName: firstName,       lastName: lastName     })       .pipe(catchError(this.eh.handleError));   }    getCurrentCustomer(): Observable<Customer> {     return this.http.get<Customer>($  {this.url}/current)       .pipe(catchError(this.eh.handleError));   }    getCustomer(id: string): Observable<Customer> {     return this.http.get<Customer>($  {this.url}/$  {id})       .pipe(catchError(this.eh.handleError));   } }

@Injectable({   providedIn: 'root' }) export class DeliveryLeadTimeService {   private url: string = $  {environment.apiUrl}/api/delivery_lead_times;    constructor(private http: HttpClient, private eh: HttpErrorHandler) { }    getDeliveryLeadTimes(): Observable<DeliveryLeadTime[]> {     return this.http.get<DeliveryLeadTime[]>(this.url)       .pipe(catchError(this.eh.handleError));   } }

@Injectable({   providedIn: 'root' }) export class LineItemService {   private url: string = $  {environment.apiUrl}/api/line_items;    constructor(private http: HttpClient, private eh: HttpErrorHandler) { }    createLineItem(lineItem: LineItem): Observable<LineItem> {     return this.http.post<LineItem>(this.url, lineItem)       .pipe(catchError(this.eh.handleError));   }    getLineItem(id: string): Observable<LineItem> {     return this.http.get<LineItem>($  {this.url}/$  {id})       .pipe(catchError(this.eh.handleError));   }    updateLineItem(id: string, quantity: number): Observable<LineItem> {     return this.http.patch<LineItem>($  {this.url}/$  {id}, { quantity: quantity })       .pipe(catchError(this.eh.handleError));   }    deleteLineItem(id: string): Observable<LineItem> {     return this.http.delete<LineItem>($  {this.url}/$  {id})       .pipe(catchError(this.eh.handleError));   } }

@Injectable({   providedIn: 'root' }) export class OrderService {   private url: string = $  {environment.apiUrl}/api/orders;    constructor(     private http: HttpClient,     private eh: HttpErrorHandler) { }    createOrder(): Observable<Order> {     return this.http.post<Order>(this.url, {})       .pipe(catchError(this.eh.handleError));   }    getOrder(id: string, orderParam: GetOrderParams): Observable<Order> {     let params = {};     if (orderParam != GetOrderParams.none) {       params = { [orderParam]: 'true' };     }      return this.http.get<Order>($  {this.url}/$  {id}, { params: params })       .pipe(catchError(this.eh.handleError));   }    updateOrder(order: Order, params: UpdateOrderParams[]): Observable<Order> {     let updateParams = [];     for (const param of params) {       updateParams.push(param.toString());     }      return this.http.patch<Order>(       $  {this.url}/$  {order.id},       order,       { params: { 'field': updateParams } }     )       .pipe(catchError(this.eh.handleError));   }    getOrderShipments(id: string): Observable<Shipment[]> {     return this.http.get<Shipment[]>($  {this.url}/$  {id}/shipments)       .pipe(catchError(this.eh.handleError));   } }

@Injectable({   providedIn: 'root' }) export class PaypalPaymentService {   private url: string = $  {environment.apiUrl}/api/paypal_payments;    constructor(private http: HttpClient, private eh: HttpErrorHandler) { }    createPaypalPayment(payment: PaypalPayment): Observable<PaypalPayment> {     return this.http.post<PaypalPayment>(this.url, payment)       .pipe(catchError(this.eh.handleError));   }    getPaypalPayment(id: string): Observable<PaypalPayment> {     return this.http.get<PaypalPayment>($  {this.url}/$  {id})       .pipe(catchError(this.eh.handleError));   }    updatePaypalPayment(id: string, paypalPayerId: string): Observable<PaypalPayment> {     return this.http.patch<PaypalPayment>(       $  {this.url}/$  {id},       { paypalPayerId: paypalPayerId }     )       .pipe(catchError(this.eh.handleError));   } }

@Injectable({   providedIn: 'root' }) export class ShipmentService {   private url: string = $  {environment.apiUrl}/api/shipments;    constructor(private http: HttpClient, private eh: HttpErrorHandler) { }    getShipment(id: string): Observable<Shipment> {     return this.http.get<Shipment>($  {this.url}/$  {id})       .pipe(catchError(this.eh.handleError));   }    updateShipment(id: string, shippingMethodId: string): Observable<Shipment> {     return this.http.patch<Shipment>(       $  {this.url}/$  {id},       { shippingMethodId: shippingMethodId }     )       .pipe(catchError(this.eh.handleError));   } }

@Injectable({   providedIn: 'root' }) export class SkuService {   private url: string = $  {environment.apiUrl}/api/skus;    constructor(private http: HttpClient, private eh: HttpErrorHandler) { }    getSku(id: string): Observable<Sku> {     return this.http.get<Sku>($  {this.url}/$  {id})       .pipe(catchError(this.eh.handleError));   }    getSkus(page: number, pageSize: number): Observable<Sku[]> {     return this.http.get<Sku[]>(       this.url,       {         params: {           'page': page.toString(),           'pageSize': pageSize.toString()         }       })       .pipe(catchError(this.eh.handleError));   } }

ng g m core ng g g core/guards/empty-cart ng g s core/header/header ng g interceptor core/interceptors/options for comp in header error not-found; do ng g c "core/$  {comp}"; done for serv in authentication session; do ng g s "core/authentication/$  {serv}"; done

@NgModule({   declarations: [HeaderComponent, NotFoundComponent, ErrorComponent],   imports: [     RouterModule.forChild([       { path: '404', component: NotFoundComponent },       { path: 'error', component: ErrorComponent },       { path: '**', redirectTo: '/404' }     ]),     MatBadgeModule,     SharedModule   ],   exports: [HeaderComponent] }) export class CoreModule { }

@Injectable({   providedIn: 'root' }) export class AuthenticationService {   private url: string = $  {environment.apiUrl}/oauth/token;    constructor(private http: HttpClient, private eh: HttpErrorHandler) { }    getClientSession(): Observable<object> {     return this.http.post<object>(       this.url,       { grantType: 'client_credentials' })       .pipe(catchError(this.eh.handleError));   }    login(email: string, password: string): Observable<object> {     return this.http.post<object>(       this.url,       { username: email, password: password, grantType: 'password' })       .pipe(catchError(this.eh.handleError));   } }

@Injectable({   providedIn: 'root' }) export class SessionService {   private url: string = $  {environment.apiUrl}/session;   private isLoggedIn = new BehaviorSubject(false);    loggedInStatus = this.isLoggedIn.asObservable();    constructor(private http: HttpClient, private eh: HttpErrorHandler) { }    setLoggedInStatus(status: boolean) {     this.isLoggedIn.next(status);   }    isCustomerLoggedIn(): Observable<{ message: string }> {     return this.http.get<{ message: string }>($  {this.url}/customer/status)       .pipe(catchError(this.eh.handleError));   }    logout(): Observable<{ message: string }> {     return this.http.get<{ message: string }>($  {this.url}/destroy)       .pipe(catchError(this.eh.handleError));   } }

@Injectable({   providedIn: 'root' }) export class HeaderService {   private headerButtonsVisibility = new BehaviorSubject(true);    showHeaderButtons = this.headerButtonsVisibility.asObservable();    constructor() { }    setHeaderButtonsVisibility(visible: boolean) {     this.headerButtonsVisibility.next(visible);   } }

<app-simple-page title="An error occurred" subtitle="There was a problem fetching your page" buttonText="GO TO HOME" icon="report" [centerText]="true" route="/"> </app-simple-page>

<app-simple-page title="404: Page not found" buttonText="GO TO HOME" icon="search" subtitle="The requested page could not be found" [centerText]="true" route="/"></app-simple-page>

@UntilDestroy({ checkProperties: true }) @Component({   selector: 'app-header',   templateUrl: './header.component.html',   styleUrls: ['./header.component.css'] }) export class HeaderComponent implements OnInit {   cartAmount: number = 0;   isLoggedIn: boolean = false;   showButtons: boolean = true;    constructor(     private session: SessionService,     private snackBar: MatSnackBar,     private cart: CartService,     private header: HeaderService,     private auth: AuthenticationService   ) { }    ngOnInit() {     this.session.isCustomerLoggedIn()       .subscribe(         () => {           this.isLoggedIn = true;           this.session.setLoggedInStatus(true);         }       );      this.session.loggedInStatus.subscribe(status => this.isLoggedIn = status);      this.header.showHeaderButtons.subscribe(visible => this.showButtons = visible);      this.cart.cartValue$  .subscribe(cart => this.cartAmount = cart.itemCount);   }    logout() {     concat(       this.session.logout(),       this.auth.getClientSession()     ).subscribe(       () => {         this.snackBar.open('You have been logged out.', 'Close', { duration: 4000 });         this.session.setLoggedInStatus(false);       },       err => this.snackBar.open('There was a problem logging you out.', 'Close', { duration: 4000 })     );   } }

<div id="header-container">     <div id="left-half" routerLink="/">         <h1><span id="lime-text">Lime</span><span id="store-text">Store</span></h1>     </div>     <div id="right-half">         <div id="button-container" ngIf="showButtons">             <button mat-icon-button color="primary" aria-label="shopping cart">                 <mat-icon [matBadge]="cartAmount" matBadgeColor="accent" aria-label="shopping cart" routerLink="/cart">shopping_cart</mat-icon>             </button>             <button mat-icon-button color="primary" aria-label="login" ngIf="!isLoggedIn">                 <mat-icon aria-label="login" matTooltip="login" routerLink="/login">login</mat-icon>             </button>             <button mat-icon-button color="primary" aria-label="logout" *ngIf="isLoggedIn" (click)="logout()">                 <mat-icon aria-label="logout" matTooltip="logout">logout</mat-icon>             </button>         </div>     </div> </div>

@Injectable({   providedIn: 'root' }) export class EmptyCartGuard implements CanActivate {   constructor(private cart: CartService, private router: Router) { }    canActivate(     route: ActivatedRouteSnapshot,     state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {     if (this.cart.orderId) {       if (this.cart.itemCount > 0) {         return true;       }     }      return this.router.parseUrl('/empty');   } }

@Injectable() export class OptionsInterceptor implements HttpInterceptor {    constructor() { }    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {     request = request.clone({       headers: request.headers.set('Content-Type', 'application/json'),       withCredentials: true     });      return next.handle(request);   } }

@UntilDestroy({ checkProperties: true }) @Component({   selector: 'app-product-list',   templateUrl: './product-list.component.html',   styleUrls: ['./product-list.component.css'] }) export class ProductListComponent implements OnInit {   cols = 4;   length = 0;   pageIndex = 0;   pageSize = 20;   pageSizeOptions: number[] = [5, 10, 20];    pageEvent!: PageEvent | void;    products: Sku[] = [];    constructor(     private breakpointObserver: BreakpointObserver,     private skus: SkuService,     private router: Router,     private header: HeaderService) { }    ngOnInit() {     this.getProducts(1, 20);     this.header.setHeaderButtonsVisibility(true);      this.breakpointObserver.observe([       Breakpoints.Handset,       Breakpoints.Tablet,       Breakpoints.Web     ]).subscribe(result => {       if (result.matches) {         if (result.breakpoints['(max-width: 599.98px) and (orientation: portrait)'] || result.breakpoints['(max-width: 599.98px) and (orientation: landscape)']) {           this.cols = 1;         }         else if (result.breakpoints['(min-width: 1280px) and (orientation: portrait)'] || result.breakpoints['(min-width: 1280px) and (orientation: landscape)']) {           this.cols = 4;         } else {           this.cols = 3;         }       }     });   }    private getProducts(page: number, pageSize: number) {     this.skus.getSkus(page, pageSize)       .subscribe(         skus => {           this.products = skus;           this.length = skus[0].__collectionMeta.recordCount;         },         err => this.router.navigateByUrl('/error')       );   }    getNextPage(event: PageEvent) {     this.getProducts(event.pageIndex + 1, event.pageSize);   }    trackSkus(index: number, item: Sku) {     return $  {item.id}-$  {index};   } }

<mat-grid-list cols="{{cols}}" rowHeight="400px" gutterSize="20px" class="grid-layout">     <mat-grid-tile *ngFor="let product of products; trackBy: trackSkus">         <mat-card>             <img id="card-image" mat-card-image src="{{product.imageUrl}}" alt="product photo">             <mat-card-content>                 <mat-card-title matTooltip="{{product.name}}">{{product.name |wordWrap:35}}</mat-card-title>                 <mat-card-subtitle>{{product.prices[0].compareAtAmountFloat | currency:'EUR'}}</mat-card-subtitle>             </mat-card-content>             <mat-card-actions>                 <button mat-flat-button color="primary" [routerLink]="['/product', product.id]">                     View                 </button>             </mat-card-actions>         </mat-card>     </mat-grid-tile> </mat-grid-list> <mat-paginator [length]="length" [pageIndex]="pageIndex" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" (page)="pageEvent = getNextPage($  event)"> </mat-paginator>

@UntilDestroy({ checkProperties: true }) @Component({   selector: 'app-product',   templateUrl: './product.component.html',   styleUrls: ['./product.component.css'] }) export class ProductComponent implements OnInit {   id: string = '';   product!: Sku;   quantity: number = 0;    constructor(     private route: ActivatedRoute,     private skus: SkuService,     private location: Location,     private router: Router,     private header: HeaderService,     private orders: OrderService,     private lineItems: LineItemService,     private cart: CartService,     private snackBar: MatSnackBar   ) { }    ngOnInit() {     this.route.paramMap       .pipe(         mergeMap(params => {           const id = params.get('id')           this.id = id ? id : '';            return this.skus.getSku(this.id);         }),         tap((sku) => {           this.product = sku;         })       ).subscribe({         error: (err) => this.router.navigateByUrl('/error')       });      this.header.setHeaderButtonsVisibility(true);   }    addItemToCart() {     if (this.quantity > 0) {       if (this.cart.orderId == '') {         this.orders.createOrder()           .pipe(             mergeMap((order: Order) => {               this.cart.orderId = order.id || '';                return this.lineItems.createLineItem({                 orderId: order.id,                 name: this.product.name,                 imageUrl: this.product.imageUrl,                 quantity: this.quantity,                 skuCode: this.product.code               });             })           )           .subscribe(             () => {               this.cart.incrementItemCount(this.quantity);               this.showSuccessSnackBar();             },             err => this.showErrorSnackBar()           );       } else {         this.lineItems.createLineItem({           orderId: this.cart.orderId,           name: this.product.name,           imageUrl: this.product.imageUrl,           quantity: this.quantity,           skuCode: this.product.code         }).subscribe(           () => {             this.cart.incrementItemCount(this.quantity);             this.showSuccessSnackBar();           },           err => this.showErrorSnackBar()         );       }     } else {       this.snackBar.open('Select a quantity greater than 0.', 'Close', { duration: 8000 });     }   }    setQuantity(no: number) {     this.quantity = no;   }    goBack() {     this.location.back();   }    private showSuccessSnackBar() {     this.snackBar.open('Item successfully added to cart.', 'Close', { duration: 8000 });   }    private showErrorSnackBar() {     this.snackBar.open('Failed to add your item to the cart.', 'Close', { duration: 8000 });   } }

<div id="container">     <mat-card *ngIf="product" class="product-card">         <img mat-card-image src="{{product.imageUrl}}" alt="Photo of a product">         <mat-card-content>             <mat-card-title>{{product.name}}</mat-card-title>             <mat-card-subtitle>{{product.prices[0].compareAtAmountFloat | currency:'EUR'}}</mat-card-subtitle>             <p>                 {{product.description}}             </p>         </mat-card-content>         <mat-card-actions>             <app-item-quantity [quantity]="quantity" [maxValue]="10" (setQuantityEvent)="setQuantity($  event)"></app-item-quantity>             <button mat-raised-button color="accent" (click)="addItemToCart()">                 <mat-icon>add_shopping_cart</mat-icon>                 Add to cart             </button>             <button mat-raised-button color="primary" (click)="goBack()">                 <mat-icon>storefront</mat-icon>                 Continue shopping             </button>         </mat-card-actions>     </mat-card> </div>

@UntilDestroy({ checkProperties: true }) @Component({   selector: 'app-signup',   templateUrl: './signup.component.html',   styleUrls: ['./signup.component.css'] }) export class SignupComponent implements OnInit {   signupForm = this.fb.group({     firstName: ['', Validators.required],     lastName: ['', Validators.required],     email: ['', [Validators.required, Validators.email]],     password: ['', [Validators.required, Validators.minLength(8)]],     confirmedPassword: ['', [Validators.required]]   }, { validators: this.matchPasswords });    @ViewChild(FormGroupDirective) sufDirective: FormGroupDirective | undefined;    constructor(     private customer: CustomerService,     private fb: FormBuilder,     private snackBar: MatSnackBar,     private router: Router,     private header: HeaderService   ) { }    ngOnInit() {     this.header.setHeaderButtonsVisibility(false);   }    matchPasswords(signupGroup: AbstractControl): ValidationErrors | null {     const password = signupGroup.get('password')?.value;     const confirmedPassword = signupGroup.get('confirmedPassword')?.value;      return password == confirmedPassword ? null : { differentPasswords: true };   }    get password() { return this.signupForm.get('password'); }    get confirmedPassword() { return this.signupForm.get('confirmedPassword'); }    signup() {     const customer = this.signupForm.value;      this.customer.createCustomer(       customer.email,       customer.password,       customer.firstName,       customer.lastName     ).subscribe(       () => {         this.signupForm.reset();         this.sufDirective?.resetForm();          this.snackBar.open('Account successfully created. You will be redirected in 5 seconds.', 'Close', { duration: 5000 });          setTimeout(() => this.router.navigateByUrl('/'), 6000);       },       err => this.snackBar.open('There was a problem creating your account.', 'Close', { duration: 5000 })     );   } }

<form id="container" [formGroup]="signupForm" (ngSubmit)="signup()">     <h1 class="mat-display-3">Create Account</h1>     <mat-form-field appearance="outline">         <mat-label>First Name</mat-label>         <input matInput formControlName="firstName">         <mat-icon matPrefix>portrait</mat-icon>     </mat-form-field>     <mat-form-field appearance="outline">         <mat-label>Last Name</mat-label>         <input matInput formControlName="lastName">         <mat-icon matPrefix>portrait</mat-icon>     </mat-form-field>     <mat-form-field appearance="outline">         <mat-label>Email</mat-label>         <input matInput formControlName="email" type="email">         <mat-icon matPrefix>alternate_email</mat-icon>     </mat-form-field>     <mat-form-field appearance="outline">         <mat-label>Password</mat-label>         <input matInput formControlName="password" type="password">         <mat-icon matPrefix>vpn_key</mat-icon>     </mat-form-field>     <mat-form-field appearance="outline">         <mat-label>Confirm Password</mat-label>         <input matInput formControlName="confirmedPassword" type="password">         <mat-icon matPrefix>vpn_key</mat-icon>     </mat-form-field>     <div ngIf="confirmedPassword?.invalid && (confirmedPassword?.dirty || confirmedPassword?.touched)">         <mat-error ngIf="signupForm.hasError('differentPasswords')">             Your passwords do not match.         </mat-error>     </div>     <div ngIf="password?.invalid && (password?.dirty || password?.touched)">         <mat-error ngIf="password?.hasError('minlength')">             Your password should be at least 8 characters.         </mat-error>     </div>     <button mat-flat-button color="primary" [disabled]="!signupForm.valid">Sign Up</button> </form>

<form id="container" [formGroup]="loginForm" (ngSubmit)="login()">     <h1 class="mat-display-3">Login</h1>     <mat-form-field appearance="outline">         <mat-label>Email</mat-label>         <input matInput type="email" formControlName="email" required>         <mat-icon matPrefix>alternate_email</mat-icon>     </mat-form-field>     <mat-form-field appearance="outline">         <mat-label>Password</mat-label>         <input matInput type="password" formControlName="password" required>         <mat-icon matPrefix>vpn_key</mat-icon>     </mat-form-field>     <button mat-flat-button color="primary" [disabled]="!loginForm.valid">Login</button>     <p id="newAccount" class="mat-h3">Not registered yet? <a id="newAccountLink" routerLink="/signup">Create an account.</a></p> </form>

@NgModule({   declarations: [SummaryComponent, CodesComponent, EmptyComponent],   imports: [     RouterModule.forChild([       {         path: '', canActivate: [EmptyCartGuard], children: [           { path: 'cart', component: SummaryComponent },           { path: 'codes', component: CodesComponent }         ]       },       { path: 'empty', component: EmptyComponent }     ]),     MatDividerModule,     MatFormFieldModule,     MatInputModule,     MatMenuModule,     ReactiveFormsModule,     SharedModule   ] }) export class CartModule { }

@UntilDestroy({ checkProperties: true }) @Component({   selector: 'app-codes',   templateUrl: './codes.component.html',   styleUrls: ['./codes.component.css'] }) export class CodesComponent {   couponCode = new FormControl('');   giftCardCode = new FormControl('');    @ViewChild(FormControlDirective) codesDirective: FormControlDirective | undefined;    constructor(     private cart: CartService,     private order: OrderService,     private snackBar: MatSnackBar   ) { }    private updateOrder(order: Order, params: UpdateOrderParams[], codeType: string) {     this.order.updateOrder(order, params)       .subscribe(         () => {           this.snackBar.open(Successfully added $  {codeType} code., 'Close', { duration: 8000 });           this.couponCode.reset();           this.giftCardCode.reset();           this.codesDirective?.reset();         },         err => this.snackBar.open(There was a problem adding your $  {codeType} code., 'Close', { duration: 8000 })       );   }    addCoupon() {     this.updateOrder({ id: this.cart.orderId, couponCode: this.couponCode.value }, [UpdateOrderParams.couponCode], 'coupon');   }    addGiftCard() {     this.updateOrder({ id: this.cart.orderId, giftCardCode: this.giftCardCode.value }, [UpdateOrderParams.giftCardCode], 'gift card');   }  }

<div id="container">     <app-title title="Redeem a code" subtitle="Enter a coupon code or gift card" [centerText]="true"></app-title>     <div class="input-row">         <mat-form-field appearance="outline">             <mat-label>Coupon Code</mat-label>             <input matInput [formControl]="couponCode" required>             <mat-icon matPrefix>card_giftcard</mat-icon>         </mat-form-field>         <button class="redeem" mat-flat-button color="accent" [disabled]="couponCode.invalid" (click)="addCoupon()">Redeem</button>     </div>     <div class="input-row">         <mat-form-field appearance="outline">             <mat-label>Gift Card Code</mat-label>             <input matInput [formControl]="giftCardCode" required>             <mat-icon matPrefix>redeem</mat-icon>         </mat-form-field>         <button class="redeem" mat-flat-button color="accent" [disabled]="giftCardCode.invalid" (click)="addGiftCard()">Redeem</button>     </div>     <button color="primary" mat-flat-button routerLink="/cart">         <mat-icon>shopping_cart</mat-icon>         CONTINUE TO CART     </button> </div>

<app-simple-page title="Your cart is empty" subtitle="There is currently nothing in your cart. Head to the home page to add items." buttonText="GO TO HOME PAGE" icon="shopping_basket" [centerText]="true" route="/"> </app-simple-page>

@UntilDestroy({ checkProperties: true }) @Component({   selector: 'app-summary',   templateUrl: './summary.component.html',   styleUrls: ['./summary.component.css'] }) export class SummaryComponent implements OnInit {   order: Order = {};    summary: { name: string, amount: string | undefined, id: string }[] = [];    constructor(     private orders: OrderService,     private lineItems: LineItemService,     private cart: CartService,     private snackBar: MatSnackBar,     private router: Router   ) { }    ngOnInit() {     this.orders.getOrder(this.cart.orderId, GetOrderParams.cart)       .subscribe(         order => this.processOrder(order),         err => this.showOrderError('retrieving your cart')       );   }    private processOrder(order: Order) {     this.order = order;      this.summary = [       { name: 'Subtotal', amount: order.formattedSubtotalAmount, id: 'subtotal' },       { name: 'Discount', amount: order.formattedDiscountAmount, id: 'discount' },       { name: 'Taxes (included)', amount: order.formattedTotalTaxAmount, id: 'taxes' },       { name: 'Shipping', amount: order.formattedShippingAmount, id: 'shipping' },       { name: 'Gift Card', amount: order.formattedGiftCardAmount, id: 'gift-card' }     ];   }    private showOrderError(msg: string) {     this.snackBar.open(There was a problem $  {msg}., 'Close', { duration: 8000 });   }    checkout() {     this.router.navigateByUrl('/customer');   }    deleteLineItem(id: string) {     this.lineItems.deleteLineItem(id)       .pipe(         mergeMap(() => this.orders.getOrder(this.cart.orderId, GetOrderParams.cart))       ).subscribe(         order => {           this.processOrder(order);           this.cart.itemCount = order.skusCount || this.cart.itemCount;           this.snackBar.open(Item successfully removed from cart., 'Close', { duration: 8000 })         },         err => this.showOrderError('deleting your order')       );   } }

<div class="container" ngIf="order">     <h3 id="order-id">Order #{{order.number}} ({{order.skusCount}} items)</h3>     <div class="line-item" ngFor="let item of order.lineItems">         <div id="product-details">             <img ngIf="item.imageUrl" class="image-xs" src="{{item.imageUrl}}" alt="product photo">             <div ngIf="!item.imageUrl" class="image-xs no-image"></div>             <div id="line-details">                 <div>{{item.name}}</div>                 <div> {{item.formattedUnitAmount }} </div>             </div>         </div>         <div id="product-config">             <app-item-quantity [quantity]="item.quantity || 0" [disabled]="true"></app-item-quantity>             <div class="itemTotal"> {{item.formattedTotalAmount }} </div>             <button mat-icon-button color="warn" (click)="deleteLineItem(item.id || '')">                 <mat-icon>clear</mat-icon>         </button>         </div>     </div>     <mat-divider></mat-divider>     <div class="costSummary">         <div class="costItem" *ngFor="let item of summary" [id]="item.id">             <h3 class="costLabel">{{item.name}}</h3>             <p> {{item.amount }} </p>         </div>     </div>     <mat-divider></mat-divider>     <div class="costSummary">         <div class="costItem" id="total">             <h2 id="totalLabel">Total</h2>             <h2> {{order.formattedTotalAmountWithTaxes}} </h2>         </div>     </div>     <div id="checkout-button">         <button color="accent" mat-flat-button routerLink="/codes">         <mat-icon>redeem</mat-icon>         ADD GIFT CARD/COUPON     </button>         <button color="primary" mat-flat-button (click)="checkout()">         <mat-icon>point_of_sale</mat-icon>         CHECKOUT     </button>     </div> </div>

@NgModule({   declarations: [     CustomerComponent,     AddressComponent,     BillingAddressComponent,     ShippingAddressComponent,     ShippingMethodsComponent,     PaymentComponent,     PlaceOrderComponent,     AddressListComponent,     CountrySelectComponent,     CancelPaymentComponent   ],   imports: [     RouterModule.forChild([       {         path: '', canActivate: [EmptyCartGuard], children: [           { path: 'billing-address', component: BillingAddressComponent },           { path: 'cancel-payment', component: CancelPaymentComponent },           { path: 'customer', component: CustomerComponent },           { path: 'payment', component: PaymentComponent },           { path: 'place-order', component: PlaceOrderComponent },           { path: 'shipping-address', component: ShippingAddressComponent },           { path: 'shipping-methods', component: ShippingMethodsComponent }         ]       }     ]),     MatCardModule,     MatCheckboxModule,     MatDividerModule,     MatInputModule,     MatMenuModule,     MatRadioModule,     ReactiveFormsModule,     SharedModule   ] }) export class CheckoutModule { }

<button id="country-select" mat-stroked-button [matMenuTriggerFor]="countryMenu">     {{country}}     <mat-icon>expand_more</mat-icon> </button> <mat-menu #countryMenu="matMenu">     <button *ngFor="let cnt of countries" (click)="setCountry(cnt)" mat-menu-item>{{cnt.name}}</button> </mat-menu>

@Component({   selector: 'app-address',   templateUrl: './address.component.html',   styleUrls: ['./address.component.css'] }) export class AddressComponent {   @Input() buttonText: string = '';   @Input() showTitle?: boolean = false;    @Output() createAddress = new EventEmitter<Address>();    @Input() checkboxText: string = '';   @Output() isCheckboxChecked = new EventEmitter<boolean>();    countryCode: string = '';    addressForm = this.fb.group({     firstName: [''],     lastName: [''],     line1: [''],     city: [''],     zipCode: [''],     stateCode: [''],     phone: ['']   });    @ViewChild(FormGroupDirective) afDirective: FormGroupDirective | undefined;    constructor(private fb: FormBuilder) { }    setCountryCode(code: string) {     this.countryCode = code;   }    addAddress() {     this.createAddress.emit({       firstName: this.addressForm.get('firstName')?.value,       lastName: this.addressForm.get('lastName')?.value,       line1: this.addressForm.get('line1')?.value,       city: this.addressForm.get('city')?.value,       zipCode: this.addressForm.get('zipCode')?.value,       stateCode: this.addressForm.get('stateCode')?.value || 'N/A',       countryCode: this.countryCode,       phone: this.addressForm.get('phone')?.value     });   }    setCheckboxValue(change: MatCheckboxChange) {     if (this.isCheckboxChecked) {       this.isCheckboxChecked.emit(change.checked);     }   } }

<form id="container" [formGroup]="addressForm">     <p class="mat-headline" *ngIf="showTitle">Or add a new address</p>     <div class="row">         <mat-form-field appearance="outline">             <mat-label>First Name</mat-label>             <input matInput formControlName="firstName">         </mat-form-field>         <mat-form-field appearance="outline">             <mat-label>Last Name</mat-label>             <input matInput formControlName="lastName">         </mat-form-field>     </div>     <div class="row">         <mat-form-field appearance="outline">             <mat-label>Address</mat-label>             <input matInput formControlName="line1">         </mat-form-field>         <mat-form-field appearance="outline">             <mat-label>City</mat-label>             <input matInput formControlName="city">         </mat-form-field>     </div>     <div class="row">         <mat-form-field appearance="outline">             <mat-label>State Code</mat-label>             <input matInput formControlName="stateCode">         </mat-form-field>         <mat-form-field appearance="outline">             <mat-label>Zip Code</mat-label>             <input matInput formControlName="zipCode">         </mat-form-field>     </div>     <div class="row">         <mat-form-field appearance="outline">             <mat-label>Phone</mat-label>             <input matInput formControlName="phone">         </mat-form-field>         <app-country-select (setCountryEvent)="setCountryCode($  event)"></app-country-select>     </div>     <mat-checkbox color="accent" (change)="setCheckboxValue($  event)">         {{checkboxText}}     </mat-checkbox>     <button id="submit-button" mat-flat-button color="primary" (click)="addAddress()">         {{buttonText}}     </button> </form>

@Component({   selector: 'app-address-list',   templateUrl: './address-list.component.html',   styleUrls: ['./address-list.component.css'] }) export class AddressListComponent implements OnInit {   addresses: CustomerAddress[] = [];    @Output() setAddressEvent = new EventEmitter<string>();    constructor(     private session: SessionService,     private customerAddresses: CustomerAddressService,     private snackBar: MatSnackBar   ) { }    ngOnInit() {     this.session.loggedInStatus       .pipe(         mergeMap(           status => iif(() => status, this.customerAddresses.getCustomerAddresses())         ))       .subscribe(         addresses => {           if (addresses.length) {             this.addresses = addresses           }         },         err => this.snackBar.open('There was a problem getting your existing addresses.', 'Close', { duration: 8000 })       );   }    setAddress(change: MatRadioChange) {     this.setAddressEvent.emit(change.value);   } }

<div id="container">     <p class="mat-headline">Pick an existing address</p>     <mat-error ngIf="!addresses.length">You have no existing addresses</mat-error>     <mat-radio-group ngIf="addresses.length" class="addresses" (change)="setAddress($  event)">         <mat-card class="address" *ngFor="let address of addresses">             <mat-radio-button [value]="address.address?.id" color="primary">                 <p>{{address.address?.firstName}} {{address.address?.lastName}},</p>                 <p>{{address.address?.line1}},</p>                 <p>{{address.address?.city}},</p>                 <p>{{address.address?.zipCode}},</p>                 <p>{{address.address?.stateCode}}, {{address.address?.countryCode}}</p>                 <p>{{address.address?.phone}}</p>             </mat-radio-button>         </mat-card>     </mat-radio-group> </div>

@UntilDestroy({ checkProperties: true }) @Component({   selector: 'app-customer',   templateUrl: './customer.component.html',   styleUrls: ['./customer.component.css'] }) export class CustomerComponent implements OnInit {   email = new FormControl('', [Validators.required, Validators.email]);    constructor(     private orders: OrderService,     private customers: CustomerService,     private cart: CartService,     private router: Router,     private snackBar: MatSnackBar   ) { }    ngOnInit() {     this.customers.getCurrentCustomer()       .subscribe(         customer => this.email.setValue(customer.email)       );   }    addCustomerEmail() {     this.orders.updateOrder(       { id: this.cart.orderId, customerEmail: this.email.value },       [UpdateOrderParams.customerEmail])       .subscribe(         () => this.router.navigateByUrl('/billing-address'),         err => this.snackBar.open('There was a problem adding your email to the order.', 'Close', { duration: 8000 })       );   } }

<div id="container">     <app-title no="1" title="Customer" subtitle="Billing information and shipping address"></app-title>     <mat-form-field appearance="outline">         <mat-label>Email</mat-label>         <input matInput [formControl]="email" required>         <mat-icon matPrefix>alternate_email</mat-icon>     </mat-form-field>     <button mat-flat-button color="primary" [disabled]="email.invalid" (click)="addCustomerEmail()">         PROCEED TO BILLING ADDRESS     </button> </div>

@UntilDestroy({ checkProperties: true }) @Component({   selector: 'app-billing-address',   templateUrl: './billing-address.component.html',   styleUrls: ['./billing-address.component.css'] }) export class BillingAddressComponent implements OnInit {   showAddresses: boolean = false;   sameShippingAddressAsBilling: boolean = false;   selectedCustomerAddressId: string = '';    constructor(     private addresses: AddressService,     private snackBar: MatSnackBar,     private session: SessionService,     private orders: OrderService,     private cart: CartService,     private router: Router,     private customerAddresses: CustomerAddressService) { }    ngOnInit() {     this.session.loggedInStatus       .subscribe(         status => this.showAddresses = status       );   }    updateBillingAddress(address: Address) {     if (this.showAddresses && this.selectedCustomerAddressId) {       this.cloneAddress();     } else if (address.firstName && address.lastName && address.line1 && address.city && address.zipCode && address.stateCode && address.countryCode && address.phone) {       this.createAddress(address);     }     else {       this.snackBar.open('Check your address. Some fields are missing.', 'Close');     }   }    setCustomerAddress(customerAddressId: string) {     this.selectedCustomerAddressId = customerAddressId;   }    setSameShippingAddressAsBilling(change: boolean) {     this.sameShippingAddressAsBilling = change;   }    private createAddress(address: Address) {     this.addresses.createAddress(address)       .pipe(         concatMap(           address => {             const update = this.updateOrderObservable({               id: this.cart.orderId,               billingAddressId: address.id             }, [UpdateOrderParams.billingAddress]);              if (this.showAddresses) {               return combineLatest([update, this.customerAddresses.createCustomerAddress(address.id || '', '')]);             } else {               return update;             }           }))       .subscribe(         () => this.showSuccessSnackBar(),         err => this.showErrorSnackBar()       );   }    private cloneAddress() {     this.updateOrderObservable({       id: this.cart.orderId,       billingAddressCloneId: this.selectedCustomerAddressId     }, [UpdateOrderParams.billingAddressClone])       .subscribe(         () => this.showSuccessSnackBar(),         err => this.showErrorSnackBar()       );   }    private updateOrderObservable(order: Order, updateParams: UpdateOrderParams[]): Observable<any> {     return iif(() => this.sameShippingAddressAsBilling,       concat([         this.orders.updateOrder(order, updateParams),         this.orders.updateOrder(order, [UpdateOrderParams.shippingAddressSameAsBilling])       ]),       this.orders.updateOrder(order, updateParams)     );   }    private showErrorSnackBar() {     this.snackBar.open('There was a problem creating your address.', 'Close', { duration: 8000 });   }    private navigateTo(path: string) {     setTimeout(() => this.router.navigateByUrl(path), 4000);   }    private showSuccessSnackBar() {     this.snackBar.open('Billing address successfully added. Redirecting...', 'Close', { duration: 3000 });     if (this.sameShippingAddressAsBilling) {       this.navigateTo('/shipping-methods');     } else {       this.navigateTo('/shipping-address');     }   } }

<app-title no="2" title="Billing Address" subtitle="Address to bill charges to"></app-title> <app-address-list ngIf="showAddresses" (setAddressEvent)="setCustomerAddress($  event)"></app-address-list> <mat-divider ngIf="showAddresses"></mat-divider> <app-address [showTitle]="showAddresses" buttonText="PROCEED TO NEXT STEP" checkboxText="Ship to the same address" (isCheckboxChecked)="setSameShippingAddressAsBilling($  event)" (createAddress)="updateBillingAddress($  event)"></app-address>

@UntilDestroy({ checkProperties: true }) @Component({   selector: 'app-shipping-address',   templateUrl: './shipping-address.component.html',   styleUrls: ['./shipping-address.component.css'] }) export class ShippingAddressComponent implements OnInit {   showAddresses: boolean = false;   sameBillingAddressAsShipping: boolean = false;   selectedCustomerAddressId: string = '';    constructor(     private addresses: AddressService,     private snackBar: MatSnackBar,     private session: SessionService,     private orders: OrderService,     private cart: CartService,     private router: Router,     private customerAddresses: CustomerAddressService) { }    ngOnInit() {     this.session.loggedInStatus       .subscribe(         status => this.showAddresses = status       );   }    updateShippingAddress(address: Address) {     if (this.showAddresses && this.selectedCustomerAddressId) {       this.cloneAddress();     } else if (address.firstName && address.lastName && address.line1 && address.city && address.zipCode && address.stateCode && address.countryCode && address.phone) {       this.createAddress(address);     }     else {       this.snackBar.open('Check your address. Some fields are missing.', 'Close');     }   }    setCustomerAddress(customerAddressId: string) {     this.selectedCustomerAddressId = customerAddressId;   }    setSameBillingAddressAsShipping(change: boolean) {     this.sameBillingAddressAsShipping = change;   }    private createAddress(address: Address) {     this.addresses.createAddress(address)       .pipe(         concatMap(           address => {             const update = this.updateOrderObservable({               id: this.cart.orderId,               shippingAddressId: address.id             }, [UpdateOrderParams.shippingAddress]);              if (this.showAddresses) {               return combineLatest([update, this.customerAddresses.createCustomerAddress(address.id || '', '')]);             } else {               return update;             }           }))       .subscribe(         () => this.showSuccessSnackBar(),         err => this.showErrorSnackBar()       );   }    private cloneAddress() {     this.updateOrderObservable({       id: this.cart.orderId,       shippingAddressCloneId: this.selectedCustomerAddressId     }, [UpdateOrderParams.shippingAddressClone])       .subscribe(         () => this.showSuccessSnackBar(),         err => this.showErrorSnackBar()       );   }    private updateOrderObservable(order: Order, updateParams: UpdateOrderParams[]): Observable<any> {     return iif(() => this.sameBillingAddressAsShipping,       concat([         this.orders.updateOrder(order, updateParams),         this.orders.updateOrder(order, [UpdateOrderParams.billingAddressSameAsShipping])       ]),       this.orders.updateOrder(order, updateParams)     );   }    private showErrorSnackBar() {     this.snackBar.open('There was a problem creating your address.', 'Close', { duration: 8000 });   }    private showSuccessSnackBar() {     this.snackBar.open('Shipping address successfully added. Redirecting...', 'Close', { duration: 3000 });      setTimeout(() => this.router.navigateByUrl('/shipping-methods'), 4000);   } }

<app-title no="3" title="Shipping Address" subtitle="Address to ship package to"></app-title> <app-address-list ngIf="showAddresses" (setAddressEvent)="setCustomerAddress($  event)"></app-address-list> <mat-divider ngIf="showAddresses"></mat-divider> <app-address [showTitle]="showAddresses" buttonText="PROCEED TO SHIPPING METHODS" checkboxText="Bill to the same address" (isCheckboxChecked)="setSameBillingAddressAsShipping($  event)" (createAddress)="updateShippingAddress($  event)"></app-address>

@UntilDestroy({ checkProperties: true }) @Component({   selector: 'app-shipping-methods',   templateUrl: './shipping-methods.component.html',   styleUrls: ['./shipping-methods.component.css'] }) export class ShippingMethodsComponent implements OnInit {   shipments: Shipment[] | undefined = [];   shipmentsForm: FormGroup = this.fb.group({});    constructor(     private orders: OrderService,     private dlts: DeliveryLeadTimeService,     private cart: CartService,     private router: Router,     private fb: FormBuilder,     private shipments: ShipmentService,     private snackBar: MatSnackBar   ) { }    ngOnInit() {     combineLatest([       this.orders.getOrder(this.cart.orderId, GetOrderParams.shipments),       this.dlts.getDeliveryLeadTimes()     ]).subscribe(       ([lineItems, deliveryLeadTimes]) => {         let li: LineItem;         let lt: DeliveryLeadTime[];          this.shipments = lineItems.shipments?.map((shipment) => {           if (shipment.id) {             this.shipmentsForm.addControl(shipment.id, new FormControl('', Validators.required));           }            if (shipment.lineItems) {             shipment.lineItems = shipment.lineItems.map(item => {               li = this.findItem(lineItems, item.skuCode || '');               item.imageUrl = li.imageUrl;               item.name = li.name;               return item;             });           }            if (shipment.availableShippingMethods) {             lt = this.findLocationLeadTime(deliveryLeadTimes, shipment);             shipment.availableShippingMethods = shipment.availableShippingMethods?.map(               method => {                 method.deliveryLeadTime = this.findMethodLeadTime(lt, method);                 return method;               });           }            return shipment;         });       },       err => this.router.navigateByUrl('/error')     );   }    setShipmentMethods() {     const shipmentsFormValue = this.shipmentsForm.value;      combineLatest(Object.keys(shipmentsFormValue).map(       key => this.shipments.updateShipment(key, shipmentsFormValue[key])     )).subscribe(       () => {         this.snackBar.open('Your shipments have been updated with a shipping method.', 'Close', { duration: 3000 });         setTimeout(() => this.router.navigateByUrl('/payment'), 4000);       },       err => this.snackBar.open('There was a problem adding shipping methods to your shipments.', 'Close', { duration: 5000 })     );   }     private findItem(lineItems: LineItem[], skuCode: string): LineItem {     return lineItems.filter((item) => item.skuCode == skuCode)[0];   }    private findLocationLeadTime(times: DeliveryLeadTime[], shipment: Shipment): DeliveryLeadTime[] {     return times.filter((dlTime) => dlTime?.stockLocation?.id == shipment?.stockLocation?.id);   }    private findMethodLeadTime(times: DeliveryLeadTime[], method: ShippingMethod): DeliveryLeadTime {     return times.filter((dlTime) => dlTime?.shippingMethod?.id == method?.id)[0];   } }

<form id="container" [formGroup]="shipmentsForm">     <app-title no="4" title="Shipping Methods" subtitle="How to ship your packages"></app-title>     <div class="shipment-container" ngFor="let shipment of shipments; let j = index; let isLast = last">         <h1>Shipment {{j+1}} of {{shipments?.length}}</h1>         <div class="row" ngFor="let item of shipment.lineItems">             <img class="image-xs" [src]="item.imageUrl" alt="product photo">             <div id="shipment-details">                 <h4 id="item-name">{{item.name}}</h4>                 <p>{{item.skuCode}}</p>             </div>             <div id="quantity-section">                 <p id="quantity-label">Quantity: </p>{{item.quantity}}             </div>         </div>         <mat-radio-group [formControlName]="shipment?.id || j">             <mat-radio-button ngFor="let method of shipment.availableShippingMethods" [value]="method.id">                 <div class="radio-button">                     <p>{{method.name}}</p>                     <div>                         <p class="radio-label">Cost:</p>                         <p> {{method.formattedPriceAmount}}</p>                     </div>                     <div>                         <p class="radio-label">Timeline:</p>                         <p> Available in {{method.deliveryLeadTime?.minDays}}-{{method.deliveryLeadTime?.maxDays}} days</p>                     </div>                 </div>             </mat-radio-button>         </mat-radio-group>         <mat-divider ngIf="!isLast"></mat-divider>     </div>     <button mat-flat-button color="primary" [disabled]="shipmentsForm.invalid" (click)="setShipmentMethods()">PROCEED TO PAYMENT</button> </form>

@UntilDestroy({ checkProperties: true }) @Component({   selector: 'app-payment',   templateUrl: './payment.component.html',   styleUrls: ['./payment.component.css'] }) export class PaymentComponent implements OnInit {   approvalUrl: string = '';    constructor(     private orders: OrderService,     private cart: CartService,     private router: Router,     private payments: PaypalPaymentService   ) { }    ngOnInit() {     const orderId = this.cart.orderId;      this.orders.getOrder(orderId, GetOrderParams.paymentSource)       .pipe(         concatMap((order: Order) => {           const paymentSourceId = order.paymentSource?.id;            const paymentMethod = order.availablePaymentMethods?.filter(             (method) => method.paymentSourceType == 'paypal_payments'           )[0];            return iif(             () => paymentSourceId ? true : false,             this.payments.getPaypalPayment(paymentSourceId || ''),             this.orders.updateOrder({               id: orderId,               paymentMethodId: paymentMethod?.id             }, [UpdateOrderParams.paymentMethod])               .pipe(concatMap(                 order => this.payments.createPaypalPayment({                   orderId: orderId,                   cancelUrl: $  {environment.clientUrl}/cancel-payment,                   returnUrl: $  {environment.clientUrl}/place-order                 })               ))           );         }))       .subscribe(         paypalPayment => this.approvalUrl = paypalPayment?.approvalUrl || '',         err => this.router.navigateByUrl('/error')       );   }    navigateToPaypal() {     window.location.href = this.approvalUrl;   } }

<app-simple-page number="5" title="Payment" subtitle="Pay for your order" buttonText="PROCEED TO PAY WITH PAYPAL" icon="point_of_sale" (buttonEvent)="navigateToPaypal()" [buttonDisabled]="approvalUrl.length ? false : true"></app-simple-page>

<app-simple-page title="Payment cancelled" subtitle="Your Paypal payment has been cancelled" icon="money_off" buttonText="GO TO HOME" [centerText]="true" route="/"></app-simple-page>

@UntilDestroy({ checkProperties: true }) @Component({   selector: 'app-place-order',   templateUrl: './place-order.component.html',   styleUrls: ['./place-order.component.css'] }) export class PlaceOrderComponent implements OnInit {   disableButton = true;    constructor(     private route: ActivatedRoute,     private router: Router,     private payments: PaypalPaymentService,     private orders: OrderService,     private cart: CartService,     private snackBar: MatSnackBar   ) { }    ngOnInit() {     this.route.queryParams       .pipe(         concatMap(params => {           const payerId = params['PayerID'];           const orderId = this.cart.orderId;            return iif(             () => payerId.length > 0,             this.orders.getOrder(orderId, GetOrderParams.paymentSource)               .pipe(                 concatMap(order => {                   const paymentSourceId = order.paymentSource?.id || '';                    return iif(                     () => paymentSourceId ? paymentSourceId.length > 0 : false,                     this.payments.updatePaypalPayment(paymentSourceId, payerId)                   );                 })               )           );         }))       .subscribe(         () => this.disableButton = false,         () => this.router.navigateByUrl('/error')       );   }    placeOrder() {     this.disableButton = true;      this.orders.updateOrder({       id: this.cart.orderId,       place: true     }, [UpdateOrderParams.place])       .subscribe(         () => {           this.snackBar.open('Your order has been successfully placed.', 'Close', { duration: 3000 });           this.cart.clearCart();           setTimeout(() => this.router.navigateByUrl('/'), 4000);         },         () => {           this.snackBar.open('There was a problem placing your order.', 'Close', { duration: 8000 });           this.disableButton = false;         }       );   } }

<app-simple-page title="Finalize Order" subtitle="Complete your order" [number]="'6'" icon="shopping_bag" buttonText="PLACE YOUR ORDER" (buttonEvent)="placeOrder()" [buttonDisabled]="disableButton"></app-simple-page>

@NgModule({   declarations: [     AppComponent   ],   imports: [     BrowserModule,     AppRoutingModule,     HttpClientModule,     BrowserAnimationsModule,     AuthModule,     ProductsModule,     CartModule,     CheckoutModule,     CoreModule   ],   providers: [     {       provide: HTTP_INTERCEPTORS,       useClass: OptionsInterceptor,       multi: true     },     {       provide: APP_INITIALIZER,       useFactory: (http: HttpClient) => () => http.post<object>(         $  {environment.apiUrl}/oauth/token,         { 'grantType': 'client_credentials' },         { withCredentials: true }),       multi: true,       deps: [HttpClient]     }   ],   bootstrap: [AppComponent] }) export class AppModule { }

@NgModule({   declarations: [SimplePageComponent, TitleComponent, WordWrapPipe, ItemQuantityComponent],   imports: [CommonModule, MatIconModule, MatButtonModule, MatTooltipModule, MatMenuModule, RouterModule],   exports: [     CommonModule,     ItemQuantityComponent,     MatButtonModule,     MatIconModule,     MatSnackBarModule,     MatTooltipModule,     SimplePageComponent,     TitleComponent,     WordWrapPipe   ] }) export class SharedModule { }

<button mat-stroked-button [matMenuTriggerFor]="menu" [disabled]="disabled">     {{quantity}}     <mat-icon ngIf="!disabled">expand_more</mat-icon> </button> <mat-menu #menu="matMenu">     <button ngFor="let no of values" (click)="setQuantity(no)" mat-menu-item>{{no}}</button> </mat-menu>

<div id="container">     <app-title no="{{number}}" title="{How To Build An E-Commerce Site With Angular 11, Commerce Layer And Paypal}" subtitle="{{subtitle}}" [centerText]="centerText"></app-title>     <div *ngIf="icon" id="icon-container">         <mat-icon color="primary" class="icon">{{icon}}</mat-icon>     </div>     <button mat-flat-button color="primary" (click)="buttonClicked()" [disabled]="buttonDisabled">         {{buttonText}}     </button> </div>

@Injectable({   providedIn: 'root' }) export class HttpErrorHandler {    constructor() { }    handleError(err: HttpErrorResponse): Observable {     let displayMessage = '';      if (err.error instanceof ErrorEvent) {       displayMessage = Client-side error: $  {err.error.message};     } else {       displayMessage = Server-side error: $  {err.message};     }      return throwError(displayMessage);   } }

@Injectable({   providedIn: 'root' }) export class AddressService {   private url: string = $  {environment.apiUrl}/api/addresses;    constructor(private http: HttpClient, private eh: HttpErrorHandler) { }    createAddress(address: Address): Observable<Address> {     return this.http.post<Address>(this.url, address)       .pipe(catchError(this.eh.handleError));   }    getAddress(id: string): Observable<Address> {     return this.http.get<Address>($  {this.url}/$  {id})       .pipe(catchError(this.eh.handleError));   } }

@Injectable({   providedIn: 'root' }) export class CartService {   private cart = new BehaviorSubject({     orderId: this.orderId,     itemCount: this.itemCount   });    cartValue$   = this.cart.asObservable();    constructor(private storage: LocalStorageService) { }    get orderId(): string {     const id = this.storage.getItem('order-id');     return id ? id : '';   }    set orderId(id: string) {     this.storage.addItem('order-id', id);     this.cart.next({ orderId: id, itemCount: this.itemCount });   }    get itemCount(): number {     const itemCount = this.storage.getItem('item-count');      return itemCount ? parseInt(itemCount) : 0;   }    set itemCount(amount: number) {     this.storage.addItem('item-count', amount.toString());     this.cart.next({ orderId: this.orderId, itemCount: amount });   }    incrementItemCount(amount: number) {     this.itemCount = this.itemCount + amount;   }    decrementItemCount(amount: number) {     this.itemCount = this.itemCount - amount;   }    clearCart() {     this.storage.deleteItem('item-count');     this.cart.next({ orderId: '', itemCount: 0 });   } }

@Injectable({   providedIn: 'root' }) export class CountryService {    constructor(private http: HttpClient) { }    getCountries(): Observable<Country[]> {     return this.http.get<Country[]>('./../../../assets/json/country-codes.json');   } }

@Injectable({   providedIn: 'root' }) export class CustomerAddressService {   private url: string = $  {environment.apiUrl}/api/customer_addresses;    constructor(private http: HttpClient, private eh: HttpErrorHandler) { }    createCustomerAddress(addressId: string, customerId: string): Observable<CustomerAddress> {     return this.http.post<CustomerAddress>(this.url, {       addressId: addressId, customerId: customerId     })       .pipe(catchError(this.eh.handleError));   }    getCustomerAddresses(): Observable<CustomerAddress[]> {     return this.http.get<CustomerAddress[]>($  {this.url})       .pipe(catchError(this.eh.handleError));   }    getCustomerAddress(id: string): Observable<CustomerAddress> {     return this.http.get<CustomerAddress>($  {this.url}/$  {id})       .pipe(catchError(this.eh.handleError));   } }

@Injectable({   providedIn: 'root' }) export class CustomerService {   private url: string = $  {environment.apiUrl}/api/customers;    constructor(private http: HttpClient, private eh: HttpErrorHandler) { }    createCustomer(email: string, password: string, firstName: string, lastName: string): Observable<Customer> {     return this.http.post<Customer>(this.url, {       email: email,       password: password,       firstName: firstName,       lastName: lastName     })       .pipe(catchError(this.eh.handleError));   }    getCurrentCustomer(): Observable<Customer> {     return this.http.get<Customer>($  {this.url}/current)       .pipe(catchError(this.eh.handleError));   }    getCustomer(id: string): Observable<Customer> {     return this.http.get<Customer>($  {this.url}/$  {id})       .pipe(catchError(this.eh.handleError));   } }

@Injectable({   providedIn: 'root' }) export class DeliveryLeadTimeService {   private url: string = $  {environment.apiUrl}/api/delivery_lead_times;    constructor(private http: HttpClient, private eh: HttpErrorHandler) { }    getDeliveryLeadTimes(): Observable<DeliveryLeadTime[]> {     return this.http.get<DeliveryLeadTime[]>(this.url)       .pipe(catchError(this.eh.handleError));   } }

@Injectable({   providedIn: 'root' }) export class LineItemService {   private url: string = $  {environment.apiUrl}/api/line_items;    constructor(private http: HttpClient, private eh: HttpErrorHandler) { }    createLineItem(lineItem: LineItem): Observable<LineItem> {     return this.http.post<LineItem>(this.url, lineItem)       .pipe(catchError(this.eh.handleError));   }    getLineItem(id: string): Observable<LineItem> {     return this.http.get<LineItem>($  {this.url}/$  {id})       .pipe(catchError(this.eh.handleError));   }    updateLineItem(id: string, quantity: number): Observable<LineItem> {     return this.http.patch<LineItem>($  {this.url}/$  {id}, { quantity: quantity })       .pipe(catchError(this.eh.handleError));   }    deleteLineItem(id: string): Observable<LineItem> {     return this.http.delete<LineItem>($  {this.url}/$  {id})       .pipe(catchError(this.eh.handleError));   } }

@Injectable({   providedIn: 'root' }) export class OrderService {   private url: string = $  {environment.apiUrl}/api/orders;    constructor(     private http: HttpClient,     private eh: HttpErrorHandler) { }    createOrder(): Observable<Order> {     return this.http.post<Order>(this.url, {})       .pipe(catchError(this.eh.handleError));   }    getOrder(id: string, orderParam: GetOrderParams): Observable<Order> {     let params = {};     if (orderParam != GetOrderParams.none) {       params = { [orderParam]: 'true' };     }      return this.http.get<Order>($  {this.url}/$  {id}, { params: params })       .pipe(catchError(this.eh.handleError));   }    updateOrder(order: Order, params: UpdateOrderParams[]): Observable<Order> {     let updateParams = [];     for (const param of params) {       updateParams.push(param.toString());     }      return this.http.patch<Order>(       $  {this.url}/$  {order.id},       order,       { params: { 'field': updateParams } }     )       .pipe(catchError(this.eh.handleError));   }    getOrderShipments(id: string): Observable<Shipment[]> {     return this.http.get<Shipment[]>($  {this.url}/$  {id}/shipments)       .pipe(catchError(this.eh.handleError));   } }

@Injectable({   providedIn: 'root' }) export class PaypalPaymentService {   private url: string = $  {environment.apiUrl}/api/paypal_payments;    constructor(private http: HttpClient, private eh: HttpErrorHandler) { }    createPaypalPayment(payment: PaypalPayment): Observable<PaypalPayment> {     return this.http.post<PaypalPayment>(this.url, payment)       .pipe(catchError(this.eh.handleError));   }    getPaypalPayment(id: string): Observable<PaypalPayment> {     return this.http.get<PaypalPayment>($  {this.url}/$  {id})       .pipe(catchError(this.eh.handleError));   }    updatePaypalPayment(id: string, paypalPayerId: string): Observable<PaypalPayment> {     return this.http.patch<PaypalPayment>(       $  {this.url}/$  {id},       { paypalPayerId: paypalPayerId }     )       .pipe(catchError(this.eh.handleError));   } }

@Injectable({   providedIn: 'root' }) export class ShipmentService {   private url: string = $  {environment.apiUrl}/api/shipments;    constructor(private http: HttpClient, private eh: HttpErrorHandler) { }    getShipment(id: string): Observable<Shipment> {     return this.http.get<Shipment>($  {this.url}/$  {id})       .pipe(catchError(this.eh.handleError));   }    updateShipment(id: string, shippingMethodId: string): Observable<Shipment> {     return this.http.patch<Shipment>(       $  {this.url}/$  {id},       { shippingMethodId: shippingMethodId }     )       .pipe(catchError(this.eh.handleError));   } }

@Injectable({   providedIn: 'root' }) export class SkuService {   private url: string = $  {environment.apiUrl}/api/skus;    constructor(private http: HttpClient, private eh: HttpErrorHandler) { }    getSku(id: string): Observable<Sku> {     return this.http.get<Sku>($  {this.url}/$  {id})       .pipe(catchError(this.eh.handleError));   }    getSkus(page: number, pageSize: number): Observable<Sku[]> {     return this.http.get<Sku[]>(       this.url,       {         params: {           'page': page.toString(),           'pageSize': pageSize.toString()         }       })       .pipe(catchError(this.eh.handleError));   } }

ng g m core ng g g core/guards/empty-cart ng g s core/header/header ng g interceptor core/interceptors/options for comp in header error not-found; do ng g c "core/$  {comp}"; done for serv in authentication session; do ng g s "core/authentication/$  {serv}"; done

@NgModule({   declarations: [HeaderComponent, NotFoundComponent, ErrorComponent],   imports: [     RouterModule.forChild([       { path: '404', component: NotFoundComponent },       { path: 'error', component: ErrorComponent },       { path: '**', redirectTo: '/404' }     ]),     MatBadgeModule,     SharedModule   ],   exports: [HeaderComponent] }) export class CoreModule { }

@Injectable({   providedIn: 'root' }) export class AuthenticationService {   private url: string = $  {environment.apiUrl}/oauth/token;    constructor(private http: HttpClient, private eh: HttpErrorHandler) { }    getClientSession(): Observable<object> {     return this.http.post<object>(       this.url,       { grantType: 'client_credentials' })       .pipe(catchError(this.eh.handleError));   }    login(email: string, password: string): Observable<object> {     return this.http.post<object>(       this.url,       { username: email, password: password, grantType: 'password' })       .pipe(catchError(this.eh.handleError));   } }

@Injectable({   providedIn: 'root' }) export class SessionService {   private url: string = $  {environment.apiUrl}/session;   private isLoggedIn = new BehaviorSubject(false);    loggedInStatus = this.isLoggedIn.asObservable();    constructor(private http: HttpClient, private eh: HttpErrorHandler) { }    setLoggedInStatus(status: boolean) {     this.isLoggedIn.next(status);   }    isCustomerLoggedIn(): Observable<{ message: string }> {     return this.http.get<{ message: string }>($  {this.url}/customer/status)       .pipe(catchError(this.eh.handleError));   }    logout(): Observable<{ message: string }> {     return this.http.get<{ message: string }>($  {this.url}/destroy)       .pipe(catchError(this.eh.handleError));   } }

@Injectable({   providedIn: 'root' }) export class HeaderService {   private headerButtonsVisibility = new BehaviorSubject(true);    showHeaderButtons = this.headerButtonsVisibility.asObservable();    constructor() { }    setHeaderButtonsVisibility(visible: boolean) {     this.headerButtonsVisibility.next(visible);   } }

<app-simple-page title="An error occurred" subtitle="There was a problem fetching your page" buttonText="GO TO HOME" icon="report" [centerText]="true" route="/"> </app-simple-page>

<app-simple-page title="404: Page not found" buttonText="GO TO HOME" icon="search" subtitle="The requested page could not be found" [centerText]="true" route="/"></app-simple-page>

@UntilDestroy({ checkProperties: true }) @Component({   selector: 'app-header',   templateUrl: './header.component.html',   styleUrls: ['./header.component.css'] }) export class HeaderComponent implements OnInit {   cartAmount: number = 0;   isLoggedIn: boolean = false;   showButtons: boolean = true;    constructor(     private session: SessionService,     private snackBar: MatSnackBar,     private cart: CartService,     private header: HeaderService,     private auth: AuthenticationService   ) { }    ngOnInit() {     this.session.isCustomerLoggedIn()       .subscribe(         () => {           this.isLoggedIn = true;           this.session.setLoggedInStatus(true);         }       );      this.session.loggedInStatus.subscribe(status => this.isLoggedIn = status);      this.header.showHeaderButtons.subscribe(visible => this.showButtons = visible);      this.cart.cartValue$  .subscribe(cart => this.cartAmount = cart.itemCount);   }    logout() {     concat(       this.session.logout(),       this.auth.getClientSession()     ).subscribe(       () => {         this.snackBar.open('You have been logged out.', 'Close', { duration: 4000 });         this.session.setLoggedInStatus(false);       },       err => this.snackBar.open('There was a problem logging you out.', 'Close', { duration: 4000 })     );   } }

<div id="header-container">     <div id="left-half" routerLink="/">         <h1><span id="lime-text">Lime</span><span id="store-text">Store</span></h1>     </div>     <div id="right-half">         <div id="button-container" ngIf="showButtons">             <button mat-icon-button color="primary" aria-label="shopping cart">                 <mat-icon [matBadge]="cartAmount" matBadgeColor="accent" aria-label="shopping cart" routerLink="/cart">shopping_cart</mat-icon>             </button>             <button mat-icon-button color="primary" aria-label="login" ngIf="!isLoggedIn">                 <mat-icon aria-label="login" matTooltip="login" routerLink="/login">login</mat-icon>             </button>             <button mat-icon-button color="primary" aria-label="logout" *ngIf="isLoggedIn" (click)="logout()">                 <mat-icon aria-label="logout" matTooltip="logout">logout</mat-icon>             </button>         </div>     </div> </div>

@Injectable({   providedIn: 'root' }) export class EmptyCartGuard implements CanActivate {   constructor(private cart: CartService, private router: Router) { }    canActivate(     route: ActivatedRouteSnapshot,     state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {     if (this.cart.orderId) {       if (this.cart.itemCount > 0) {         return true;       }     }      return this.router.parseUrl('/empty');   } }

@Injectable() export class OptionsInterceptor implements HttpInterceptor {    constructor() { }    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {     request = request.clone({       headers: request.headers.set('Content-Type', 'application/json'),       withCredentials: true     });      return next.handle(request);   } }

@UntilDestroy({ checkProperties: true }) @Component({   selector: 'app-product-list',   templateUrl: './product-list.component.html',   styleUrls: ['./product-list.component.css'] }) export class ProductListComponent implements OnInit {   cols = 4;   length = 0;   pageIndex = 0;   pageSize = 20;   pageSizeOptions: number[] = [5, 10, 20];    pageEvent!: PageEvent | void;    products: Sku[] = [];    constructor(     private breakpointObserver: BreakpointObserver,     private skus: SkuService,     private router: Router,     private header: HeaderService) { }    ngOnInit() {     this.getProducts(1, 20);     this.header.setHeaderButtonsVisibility(true);      this.breakpointObserver.observe([       Breakpoints.Handset,       Breakpoints.Tablet,       Breakpoints.Web     ]).subscribe(result => {       if (result.matches) {         if (result.breakpoints['(max-width: 599.98px) and (orientation: portrait)'] || result.breakpoints['(max-width: 599.98px) and (orientation: landscape)']) {           this.cols = 1;         }         else if (result.breakpoints['(min-width: 1280px) and (orientation: portrait)'] || result.breakpoints['(min-width: 1280px) and (orientation: landscape)']) {           this.cols = 4;         } else {           this.cols = 3;         }       }     });   }    private getProducts(page: number, pageSize: number) {     this.skus.getSkus(page, pageSize)       .subscribe(         skus => {           this.products = skus;           this.length = skus[0].__collectionMeta.recordCount;         },         err => this.router.navigateByUrl('/error')       );   }    getNextPage(event: PageEvent) {     this.getProducts(event.pageIndex + 1, event.pageSize);   }    trackSkus(index: number, item: Sku) {     return $  {item.id}-$  {index};   } }

<mat-grid-list cols="{{cols}}" rowHeight="400px" gutterSize="20px" class="grid-layout">     <mat-grid-tile *ngFor="let product of products; trackBy: trackSkus">         <mat-card>             <img id="card-image" mat-card-image src="{{product.imageUrl}}" alt="product photo">             <mat-card-content>                 <mat-card-title matTooltip="{{product.name}}">{{product.name |wordWrap:35}}</mat-card-title>                 <mat-card-subtitle>{{product.prices[0].compareAtAmountFloat | currency:'EUR'}}</mat-card-subtitle>             </mat-card-content>             <mat-card-actions>                 <button mat-flat-button color="primary" [routerLink]="['/product', product.id]">                     View                 </button>             </mat-card-actions>         </mat-card>     </mat-grid-tile> </mat-grid-list> <mat-paginator [length]="length" [pageIndex]="pageIndex" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" (page)="pageEvent = getNextPage($  event)"> </mat-paginator>

@UntilDestroy({ checkProperties: true }) @Component({   selector: 'app-product',   templateUrl: './product.component.html',   styleUrls: ['./product.component.css'] }) export class ProductComponent implements OnInit {   id: string = '';   product!: Sku;   quantity: number = 0;    constructor(     private route: ActivatedRoute,     private skus: SkuService,     private location: Location,     private router: Router,     private header: HeaderService,     private orders: OrderService,     private lineItems: LineItemService,     private cart: CartService,     private snackBar: MatSnackBar   ) { }    ngOnInit() {     this.route.paramMap       .pipe(         mergeMap(params => {           const id = params.get('id')           this.id = id ? id : '';            return this.skus.getSku(this.id);         }),         tap((sku) => {           this.product = sku;         })       ).subscribe({         error: (err) => this.router.navigateByUrl('/error')       });      this.header.setHeaderButtonsVisibility(true);   }    addItemToCart() {     if (this.quantity > 0) {       if (this.cart.orderId == '') {         this.orders.createOrder()           .pipe(             mergeMap((order: Order) => {               this.cart.orderId = order.id || '';                return this.lineItems.createLineItem({                 orderId: order.id,                 name: this.product.name,                 imageUrl: this.product.imageUrl,                 quantity: this.quantity,                 skuCode: this.product.code               });             })           )           .subscribe(             () => {               this.cart.incrementItemCount(this.quantity);               this.showSuccessSnackBar();             },             err => this.showErrorSnackBar()           );       } else {         this.lineItems.createLineItem({           orderId: this.cart.orderId,           name: this.product.name,           imageUrl: this.product.imageUrl,           quantity: this.quantity,           skuCode: this.product.code         }).subscribe(           () => {             this.cart.incrementItemCount(this.quantity);             this.showSuccessSnackBar();           },           err => this.showErrorSnackBar()         );       }     } else {       this.snackBar.open('Select a quantity greater than 0.', 'Close', { duration: 8000 });     }   }    setQuantity(no: number) {     this.quantity = no;   }    goBack() {     this.location.back();   }    private showSuccessSnackBar() {     this.snackBar.open('Item successfully added to cart.', 'Close', { duration: 8000 });   }    private showErrorSnackBar() {     this.snackBar.open('Failed to add your item to the cart.', 'Close', { duration: 8000 });   } }

<div id="container">     <mat-card *ngIf="product" class="product-card">         <img mat-card-image src="{{product.imageUrl}}" alt="Photo of a product">         <mat-card-content>             <mat-card-title>{{product.name}}</mat-card-title>             <mat-card-subtitle>{{product.prices[0].compareAtAmountFloat | currency:'EUR'}}</mat-card-subtitle>             <p>                 {{product.description}}             </p>         </mat-card-content>         <mat-card-actions>             <app-item-quantity [quantity]="quantity" [maxValue]="10" (setQuantityEvent)="setQuantity($  event)"></app-item-quantity>             <button mat-raised-button color="accent" (click)="addItemToCart()">                 <mat-icon>add_shopping_cart</mat-icon>                 Add to cart             </button>             <button mat-raised-button color="primary" (click)="goBack()">                 <mat-icon>storefront</mat-icon>                 Continue shopping             </button>         </mat-card-actions>     </mat-card> </div>

@UntilDestroy({ checkProperties: true }) @Component({   selector: 'app-signup',   templateUrl: './signup.component.html',   styleUrls: ['./signup.component.css'] }) export class SignupComponent implements OnInit {   signupForm = this.fb.group({     firstName: ['', Validators.required],     lastName: ['', Validators.required],     email: ['', [Validators.required, Validators.email]],     password: ['', [Validators.required, Validators.minLength(8)]],     confirmedPassword: ['', [Validators.required]]   }, { validators: this.matchPasswords });    @ViewChild(FormGroupDirective) sufDirective: FormGroupDirective | undefined;    constructor(     private customer: CustomerService,     private fb: FormBuilder,     private snackBar: MatSnackBar,     private router: Router,     private header: HeaderService   ) { }    ngOnInit() {     this.header.setHeaderButtonsVisibility(false);   }    matchPasswords(signupGroup: AbstractControl): ValidationErrors | null {     const password = signupGroup.get('password')?.value;     const confirmedPassword = signupGroup.get('confirmedPassword')?.value;      return password == confirmedPassword ? null : { differentPasswords: true };   }    get password() { return this.signupForm.get('password'); }    get confirmedPassword() { return this.signupForm.get('confirmedPassword'); }    signup() {     const customer = this.signupForm.value;      this.customer.createCustomer(       customer.email,       customer.password,       customer.firstName,       customer.lastName     ).subscribe(       () => {         this.signupForm.reset();         this.sufDirective?.resetForm();          this.snackBar.open('Account successfully created. You will be redirected in 5 seconds.', 'Close', { duration: 5000 });          setTimeout(() => this.router.navigateByUrl('/'), 6000);       },       err => this.snackBar.open('There was a problem creating your account.', 'Close', { duration: 5000 })     );   } }

<form id="container" [formGroup]="signupForm" (ngSubmit)="signup()">     <h1 class="mat-display-3">Create Account</h1>     <mat-form-field appearance="outline">         <mat-label>First Name</mat-label>         <input matInput formControlName="firstName">         <mat-icon matPrefix>portrait</mat-icon>     </mat-form-field>     <mat-form-field appearance="outline">         <mat-label>Last Name</mat-label>         <input matInput formControlName="lastName">         <mat-icon matPrefix>portrait</mat-icon>     </mat-form-field>     <mat-form-field appearance="outline">         <mat-label>Email</mat-label>         <input matInput formControlName="email" type="email">         <mat-icon matPrefix>alternate_email</mat-icon>     </mat-form-field>     <mat-form-field appearance="outline">         <mat-label>Password</mat-label>         <input matInput formControlName="password" type="password">         <mat-icon matPrefix>vpn_key</mat-icon>     </mat-form-field>     <mat-form-field appearance="outline">         <mat-label>Confirm Password</mat-label>         <input matInput formControlName="confirmedPassword" type="password">         <mat-icon matPrefix>vpn_key</mat-icon>     </mat-form-field>     <div ngIf="confirmedPassword?.invalid && (confirmedPassword?.dirty || confirmedPassword?.touched)">         <mat-error ngIf="signupForm.hasError('differentPasswords')">             Your passwords do not match.         </mat-error>     </div>     <div ngIf="password?.invalid && (password?.dirty || password?.touched)">         <mat-error ngIf="password?.hasError('minlength')">             Your password should be at least 8 characters.         </mat-error>     </div>     <button mat-flat-button color="primary" [disabled]="!signupForm.valid">Sign Up</button> </form>

<form id="container" [formGroup]="loginForm" (ngSubmit)="login()">     <h1 class="mat-display-3">Login</h1>     <mat-form-field appearance="outline">         <mat-label>Email</mat-label>         <input matInput type="email" formControlName="email" required>         <mat-icon matPrefix>alternate_email</mat-icon>     </mat-form-field>     <mat-form-field appearance="outline">         <mat-label>Password</mat-label>         <input matInput type="password" formControlName="password" required>         <mat-icon matPrefix>vpn_key</mat-icon>     </mat-form-field>     <button mat-flat-button color="primary" [disabled]="!loginForm.valid">Login</button>     <p id="newAccount" class="mat-h3">Not registered yet? <a id="newAccountLink" routerLink="/signup">Create an account.</a></p> </form>

@NgModule({   declarations: [SummaryComponent, CodesComponent, EmptyComponent],   imports: [     RouterModule.forChild([       {         path: '', canActivate: [EmptyCartGuard], children: [           { path: 'cart', component: SummaryComponent },           { path: 'codes', component: CodesComponent }         ]       },       { path: 'empty', component: EmptyComponent }     ]),     MatDividerModule,     MatFormFieldModule,     MatInputModule,     MatMenuModule,     ReactiveFormsModule,     SharedModule   ] }) export class CartModule { }

@UntilDestroy({ checkProperties: true }) @Component({   selector: 'app-codes',   templateUrl: './codes.component.html',   styleUrls: ['./codes.component.css'] }) export class CodesComponent {   couponCode = new FormControl('');   giftCardCode = new FormControl('');    @ViewChild(FormControlDirective) codesDirective: FormControlDirective | undefined;    constructor(     private cart: CartService,     private order: OrderService,     private snackBar: MatSnackBar   ) { }    private updateOrder(order: Order, params: UpdateOrderParams[], codeType: string) {     this.order.updateOrder(order, params)       .subscribe(         () => {           this.snackBar.open(Successfully added $  {codeType} code., 'Close', { duration: 8000 });           this.couponCode.reset();           this.giftCardCode.reset();           this.codesDirective?.reset();         },         err => this.snackBar.open(There was a problem adding your $  {codeType} code., 'Close', { duration: 8000 })       );   }    addCoupon() {     this.updateOrder({ id: this.cart.orderId, couponCode: this.couponCode.value }, [UpdateOrderParams.couponCode], 'coupon');   }    addGiftCard() {     this.updateOrder({ id: this.cart.orderId, giftCardCode: this.giftCardCode.value }, [UpdateOrderParams.giftCardCode], 'gift card');   }  }

<div id="container">     <app-title title="Redeem a code" subtitle="Enter a coupon code or gift card" [centerText]="true"></app-title>     <div class="input-row">         <mat-form-field appearance="outline">             <mat-label>Coupon Code</mat-label>             <input matInput [formControl]="couponCode" required>             <mat-icon matPrefix>card_giftcard</mat-icon>         </mat-form-field>         <button class="redeem" mat-flat-button color="accent" [disabled]="couponCode.invalid" (click)="addCoupon()">Redeem</button>     </div>     <div class="input-row">         <mat-form-field appearance="outline">             <mat-label>Gift Card Code</mat-label>             <input matInput [formControl]="giftCardCode" required>             <mat-icon matPrefix>redeem</mat-icon>         </mat-form-field>         <button class="redeem" mat-flat-button color="accent" [disabled]="giftCardCode.invalid" (click)="addGiftCard()">Redeem</button>     </div>     <button color="primary" mat-flat-button routerLink="/cart">         <mat-icon>shopping_cart</mat-icon>         CONTINUE TO CART     </button> </div>

<app-simple-page title="Your cart is empty" subtitle="There is currently nothing in your cart. Head to the home page to add items." buttonText="GO TO HOME PAGE" icon="shopping_basket" [centerText]="true" route="/"> </app-simple-page>

@UntilDestroy({ checkProperties: true }) @Component({   selector: 'app-summary',   templateUrl: './summary.component.html',   styleUrls: ['./summary.component.css'] }) export class SummaryComponent implements OnInit {   order: Order = {};    summary: { name: string, amount: string | undefined, id: string }[] = [];    constructor(     private orders: OrderService,     private lineItems: LineItemService,     private cart: CartService,     private snackBar: MatSnackBar,     private router: Router   ) { }    ngOnInit() {     this.orders.getOrder(this.cart.orderId, GetOrderParams.cart)       .subscribe(         order => this.processOrder(order),         err => this.showOrderError('retrieving your cart')       );   }    private processOrder(order: Order) {     this.order = order;      this.summary = [       { name: 'Subtotal', amount: order.formattedSubtotalAmount, id: 'subtotal' },       { name: 'Discount', amount: order.formattedDiscountAmount, id: 'discount' },       { name: 'Taxes (included)', amount: order.formattedTotalTaxAmount, id: 'taxes' },       { name: 'Shipping', amount: order.formattedShippingAmount, id: 'shipping' },       { name: 'Gift Card', amount: order.formattedGiftCardAmount, id: 'gift-card' }     ];   }    private showOrderError(msg: string) {     this.snackBar.open(There was a problem $  {msg}., 'Close', { duration: 8000 });   }    checkout() {     this.router.navigateByUrl('/customer');   }    deleteLineItem(id: string) {     this.lineItems.deleteLineItem(id)       .pipe(         mergeMap(() => this.orders.getOrder(this.cart.orderId, GetOrderParams.cart))       ).subscribe(         order => {           this.processOrder(order);           this.cart.itemCount = order.skusCount || this.cart.itemCount;           this.snackBar.open(Item successfully removed from cart., 'Close', { duration: 8000 })         },         err => this.showOrderError('deleting your order')       );   } }

<div class="container" ngIf="order">     <h3 id="order-id">Order #{{order.number}} ({{order.skusCount}} items)</h3>     <div class="line-item" ngFor="let item of order.lineItems">         <div id="product-details">             <img ngIf="item.imageUrl" class="image-xs" src="{{item.imageUrl}}" alt="product photo">             <div ngIf="!item.imageUrl" class="image-xs no-image"></div>             <div id="line-details">                 <div>{{item.name}}</div>                 <div> {{item.formattedUnitAmount }} </div>             </div>         </div>         <div id="product-config">             <app-item-quantity [quantity]="item.quantity || 0" [disabled]="true"></app-item-quantity>             <div class="itemTotal"> {{item.formattedTotalAmount }} </div>             <button mat-icon-button color="warn" (click)="deleteLineItem(item.id || '')">                 <mat-icon>clear</mat-icon>         </button>         </div>     </div>     <mat-divider></mat-divider>     <div class="costSummary">         <div class="costItem" *ngFor="let item of summary" [id]="item.id">             <h3 class="costLabel">{{item.name}}</h3>             <p> {{item.amount }} </p>         </div>     </div>     <mat-divider></mat-divider>     <div class="costSummary">         <div class="costItem" id="total">             <h2 id="totalLabel">Total</h2>             <h2> {{order.formattedTotalAmountWithTaxes}} </h2>         </div>     </div>     <div id="checkout-button">         <button color="accent" mat-flat-button routerLink="/codes">         <mat-icon>redeem</mat-icon>         ADD GIFT CARD/COUPON     </button>         <button color="primary" mat-flat-button (click)="checkout()">         <mat-icon>point_of_sale</mat-icon>         CHECKOUT     </button>     </div> </div>

@NgModule({   declarations: [     CustomerComponent,     AddressComponent,     BillingAddressComponent,     ShippingAddressComponent,     ShippingMethodsComponent,     PaymentComponent,     PlaceOrderComponent,     AddressListComponent,     CountrySelectComponent,     CancelPaymentComponent   ],   imports: [     RouterModule.forChild([       {         path: '', canActivate: [EmptyCartGuard], children: [           { path: 'billing-address', component: BillingAddressComponent },           { path: 'cancel-payment', component: CancelPaymentComponent },           { path: 'customer', component: CustomerComponent },           { path: 'payment', component: PaymentComponent },           { path: 'place-order', component: PlaceOrderComponent },           { path: 'shipping-address', component: ShippingAddressComponent },           { path: 'shipping-methods', component: ShippingMethodsComponent }         ]       }     ]),     MatCardModule,     MatCheckboxModule,     MatDividerModule,     MatInputModule,     MatMenuModule,     MatRadioModule,     ReactiveFormsModule,     SharedModule   ] }) export class CheckoutModule { }

<button id="country-select" mat-stroked-button [matMenuTriggerFor]="countryMenu">     {{country}}     <mat-icon>expand_more</mat-icon> </button> <mat-menu #countryMenu="matMenu">     <button *ngFor="let cnt of countries" (click)="setCountry(cnt)" mat-menu-item>{{cnt.name}}</button> </mat-menu>

@Component({   selector: 'app-address',   templateUrl: './address.component.html',   styleUrls: ['./address.component.css'] }) export class AddressComponent {   @Input() buttonText: string = '';   @Input() showTitle?: boolean = false;    @Output() createAddress = new EventEmitter<Address>();    @Input() checkboxText: string = '';   @Output() isCheckboxChecked = new EventEmitter<boolean>();    countryCode: string = '';    addressForm = this.fb.group({     firstName: [''],     lastName: [''],     line1: [''],     city: [''],     zipCode: [''],     stateCode: [''],     phone: ['']   });    @ViewChild(FormGroupDirective) afDirective: FormGroupDirective | undefined;    constructor(private fb: FormBuilder) { }    setCountryCode(code: string) {     this.countryCode = code;   }    addAddress() {     this.createAddress.emit({       firstName: this.addressForm.get('firstName')?.value,       lastName: this.addressForm.get('lastName')?.value,       line1: this.addressForm.get('line1')?.value,       city: this.addressForm.get('city')?.value,       zipCode: this.addressForm.get('zipCode')?.value,       stateCode: this.addressForm.get('stateCode')?.value || 'N/A',       countryCode: this.countryCode,       phone: this.addressForm.get('phone')?.value     });   }    setCheckboxValue(change: MatCheckboxChange) {     if (this.isCheckboxChecked) {       this.isCheckboxChecked.emit(change.checked);     }   } }

<form id="container" [formGroup]="addressForm">     <p class="mat-headline" *ngIf="showTitle">Or add a new address</p>     <div class="row">         <mat-form-field appearance="outline">             <mat-label>First Name</mat-label>             <input matInput formControlName="firstName">         </mat-form-field>         <mat-form-field appearance="outline">             <mat-label>Last Name</mat-label>             <input matInput formControlName="lastName">         </mat-form-field>     </div>     <div class="row">         <mat-form-field appearance="outline">             <mat-label>Address</mat-label>             <input matInput formControlName="line1">         </mat-form-field>         <mat-form-field appearance="outline">             <mat-label>City</mat-label>             <input matInput formControlName="city">         </mat-form-field>     </div>     <div class="row">         <mat-form-field appearance="outline">             <mat-label>State Code</mat-label>             <input matInput formControlName="stateCode">         </mat-form-field>         <mat-form-field appearance="outline">             <mat-label>Zip Code</mat-label>             <input matInput formControlName="zipCode">         </mat-form-field>     </div>     <div class="row">         <mat-form-field appearance="outline">             <mat-label>Phone</mat-label>             <input matInput formControlName="phone">         </mat-form-field>         <app-country-select (setCountryEvent)="setCountryCode($  event)"></app-country-select>     </div>     <mat-checkbox color="accent" (change)="setCheckboxValue($  event)">         {{checkboxText}}     </mat-checkbox>     <button id="submit-button" mat-flat-button color="primary" (click)="addAddress()">         {{buttonText}}     </button> </form>

@Component({   selector: 'app-address-list',   templateUrl: './address-list.component.html',   styleUrls: ['./address-list.component.css'] }) export class AddressListComponent implements OnInit {   addresses: CustomerAddress[] = [];    @Output() setAddressEvent = new EventEmitter<string>();    constructor(     private session: SessionService,     private customerAddresses: CustomerAddressService,     private snackBar: MatSnackBar   ) { }    ngOnInit() {     this.session.loggedInStatus       .pipe(         mergeMap(           status => iif(() => status, this.customerAddresses.getCustomerAddresses())         ))       .subscribe(         addresses => {           if (addresses.length) {             this.addresses = addresses           }         },         err => this.snackBar.open('There was a problem getting your existing addresses.', 'Close', { duration: 8000 })       );   }    setAddress(change: MatRadioChange) {     this.setAddressEvent.emit(change.value);   } }

<div id="container">     <p class="mat-headline">Pick an existing address</p>     <mat-error ngIf="!addresses.length">You have no existing addresses</mat-error>     <mat-radio-group ngIf="addresses.length" class="addresses" (change)="setAddress($  event)">         <mat-card class="address" *ngFor="let address of addresses">             <mat-radio-button [value]="address.address?.id" color="primary">                 <p>{{address.address?.firstName}} {{address.address?.lastName}},</p>                 <p>{{address.address?.line1}},</p>                 <p>{{address.address?.city}},</p>                 <p>{{address.address?.zipCode}},</p>                 <p>{{address.address?.stateCode}}, {{address.address?.countryCode}}</p>                 <p>{{address.address?.phone}}</p>             </mat-radio-button>         </mat-card>     </mat-radio-group> </div>

@UntilDestroy({ checkProperties: true }) @Component({   selector: 'app-customer',   templateUrl: './customer.component.html',   styleUrls: ['./customer.component.css'] }) export class CustomerComponent implements OnInit {   email = new FormControl('', [Validators.required, Validators.email]);    constructor(     private orders: OrderService,     private customers: CustomerService,     private cart: CartService,     private router: Router,     private snackBar: MatSnackBar   ) { }    ngOnInit() {     this.customers.getCurrentCustomer()       .subscribe(         customer => this.email.setValue(customer.email)       );   }    addCustomerEmail() {     this.orders.updateOrder(       { id: this.cart.orderId, customerEmail: this.email.value },       [UpdateOrderParams.customerEmail])       .subscribe(         () => this.router.navigateByUrl('/billing-address'),         err => this.snackBar.open('There was a problem adding your email to the order.', 'Close', { duration: 8000 })       );   } }

<div id="container">     <app-title no="1" title="Customer" subtitle="Billing information and shipping address"></app-title>     <mat-form-field appearance="outline">         <mat-label>Email</mat-label>         <input matInput [formControl]="email" required>         <mat-icon matPrefix>alternate_email</mat-icon>     </mat-form-field>     <button mat-flat-button color="primary" [disabled]="email.invalid" (click)="addCustomerEmail()">         PROCEED TO BILLING ADDRESS     </button> </div>

@UntilDestroy({ checkProperties: true }) @Component({   selector: 'app-billing-address',   templateUrl: './billing-address.component.html',   styleUrls: ['./billing-address.component.css'] }) export class BillingAddressComponent implements OnInit {   showAddresses: boolean = false;   sameShippingAddressAsBilling: boolean = false;   selectedCustomerAddressId: string = '';    constructor(     private addresses: AddressService,     private snackBar: MatSnackBar,     private session: SessionService,     private orders: OrderService,     private cart: CartService,     private router: Router,     private customerAddresses: CustomerAddressService) { }    ngOnInit() {     this.session.loggedInStatus       .subscribe(         status => this.showAddresses = status       );   }    updateBillingAddress(address: Address) {     if (this.showAddresses && this.selectedCustomerAddressId) {       this.cloneAddress();     } else if (address.firstName && address.lastName && address.line1 && address.city && address.zipCode && address.stateCode && address.countryCode && address.phone) {       this.createAddress(address);     }     else {       this.snackBar.open('Check your address. Some fields are missing.', 'Close');     }   }    setCustomerAddress(customerAddressId: string) {     this.selectedCustomerAddressId = customerAddressId;   }    setSameShippingAddressAsBilling(change: boolean) {     this.sameShippingAddressAsBilling = change;   }    private createAddress(address: Address) {     this.addresses.createAddress(address)       .pipe(         concatMap(           address => {             const update = this.updateOrderObservable({               id: this.cart.orderId,               billingAddressId: address.id             }, [UpdateOrderParams.billingAddress]);              if (this.showAddresses) {               return combineLatest([update, this.customerAddresses.createCustomerAddress(address.id || '', '')]);             } else {               return update;             }           }))       .subscribe(         () => this.showSuccessSnackBar(),         err => this.showErrorSnackBar()       );   }    private cloneAddress() {     this.updateOrderObservable({       id: this.cart.orderId,       billingAddressCloneId: this.selectedCustomerAddressId     }, [UpdateOrderParams.billingAddressClone])       .subscribe(         () => this.showSuccessSnackBar(),         err => this.showErrorSnackBar()       );   }    private updateOrderObservable(order: Order, updateParams: UpdateOrderParams[]): Observable<any> {     return iif(() => this.sameShippingAddressAsBilling,       concat([         this.orders.updateOrder(order, updateParams),         this.orders.updateOrder(order, [UpdateOrderParams.shippingAddressSameAsBilling])       ]),       this.orders.updateOrder(order, updateParams)     );   }    private showErrorSnackBar() {     this.snackBar.open('There was a problem creating your address.', 'Close', { duration: 8000 });   }    private navigateTo(path: string) {     setTimeout(() => this.router.navigateByUrl(path), 4000);   }    private showSuccessSnackBar() {     this.snackBar.open('Billing address successfully added. Redirecting...', 'Close', { duration: 3000 });     if (this.sameShippingAddressAsBilling) {       this.navigateTo('/shipping-methods');     } else {       this.navigateTo('/shipping-address');     }   } }

<app-title no="2" title="Billing Address" subtitle="Address to bill charges to"></app-title> <app-address-list ngIf="showAddresses" (setAddressEvent)="setCustomerAddress($  event)"></app-address-list> <mat-divider ngIf="showAddresses"></mat-divider> <app-address [showTitle]="showAddresses" buttonText="PROCEED TO NEXT STEP" checkboxText="Ship to the same address" (isCheckboxChecked)="setSameShippingAddressAsBilling($  event)" (createAddress)="updateBillingAddress($  event)"></app-address>

@UntilDestroy({ checkProperties: true }) @Component({   selector: 'app-shipping-address',   templateUrl: './shipping-address.component.html',   styleUrls: ['./shipping-address.component.css'] }) export class ShippingAddressComponent implements OnInit {   showAddresses: boolean = false;   sameBillingAddressAsShipping: boolean = false;   selectedCustomerAddressId: string = '';    constructor(     private addresses: AddressService,     private snackBar: MatSnackBar,     private session: SessionService,     private orders: OrderService,     private cart: CartService,     private router: Router,     private customerAddresses: CustomerAddressService) { }    ngOnInit() {     this.session.loggedInStatus       .subscribe(         status => this.showAddresses = status       );   }    updateShippingAddress(address: Address) {     if (this.showAddresses && this.selectedCustomerAddressId) {       this.cloneAddress();     } else if (address.firstName && address.lastName && address.line1 && address.city && address.zipCode && address.stateCode && address.countryCode && address.phone) {       this.createAddress(address);     }     else {       this.snackBar.open('Check your address. Some fields are missing.', 'Close');     }   }    setCustomerAddress(customerAddressId: string) {     this.selectedCustomerAddressId = customerAddressId;   }    setSameBillingAddressAsShipping(change: boolean) {     this.sameBillingAddressAsShipping = change;   }    private createAddress(address: Address) {     this.addresses.createAddress(address)       .pipe(         concatMap(           address => {             const update = this.updateOrderObservable({               id: this.cart.orderId,               shippingAddressId: address.id             }, [UpdateOrderParams.shippingAddress]);              if (this.showAddresses) {               return combineLatest([update, this.customerAddresses.createCustomerAddress(address.id || '', '')]);             } else {               return update;             }           }))       .subscribe(         () => this.showSuccessSnackBar(),         err => this.showErrorSnackBar()       );   }    private cloneAddress() {     this.updateOrderObservable({       id: this.cart.orderId,       shippingAddressCloneId: this.selectedCustomerAddressId     }, [UpdateOrderParams.shippingAddressClone])       .subscribe(         () => this.showSuccessSnackBar(),         err => this.showErrorSnackBar()       );   }    private updateOrderObservable(order: Order, updateParams: UpdateOrderParams[]): Observable<any> {     return iif(() => this.sameBillingAddressAsShipping,       concat([         this.orders.updateOrder(order, updateParams),         this.orders.updateOrder(order, [UpdateOrderParams.billingAddressSameAsShipping])       ]),       this.orders.updateOrder(order, updateParams)     );   }    private showErrorSnackBar() {     this.snackBar.open('There was a problem creating your address.', 'Close', { duration: 8000 });   }    private showSuccessSnackBar() {     this.snackBar.open('Shipping address successfully added. Redirecting...', 'Close', { duration: 3000 });      setTimeout(() => this.router.navigateByUrl('/shipping-methods'), 4000);   } }

<app-title no="3" title="Shipping Address" subtitle="Address to ship package to"></app-title> <app-address-list ngIf="showAddresses" (setAddressEvent)="setCustomerAddress($  event)"></app-address-list> <mat-divider ngIf="showAddresses"></mat-divider> <app-address [showTitle]="showAddresses" buttonText="PROCEED TO SHIPPING METHODS" checkboxText="Bill to the same address" (isCheckboxChecked)="setSameBillingAddressAsShipping($  event)" (createAddress)="updateShippingAddress($  event)"></app-address>

@UntilDestroy({ checkProperties: true }) @Component({   selector: 'app-shipping-methods',   templateUrl: './shipping-methods.component.html',   styleUrls: ['./shipping-methods.component.css'] }) export class ShippingMethodsComponent implements OnInit {   shipments: Shipment[] | undefined = [];   shipmentsForm: FormGroup = this.fb.group({});    constructor(     private orders: OrderService,     private dlts: DeliveryLeadTimeService,     private cart: CartService,     private router: Router,     private fb: FormBuilder,     private shipments: ShipmentService,     private snackBar: MatSnackBar   ) { }    ngOnInit() {     combineLatest([       this.orders.getOrder(this.cart.orderId, GetOrderParams.shipments),       this.dlts.getDeliveryLeadTimes()     ]).subscribe(       ([lineItems, deliveryLeadTimes]) => {         let li: LineItem;         let lt: DeliveryLeadTime[];          this.shipments = lineItems.shipments?.map((shipment) => {           if (shipment.id) {             this.shipmentsForm.addControl(shipment.id, new FormControl('', Validators.required));           }            if (shipment.lineItems) {             shipment.lineItems = shipment.lineItems.map(item => {               li = this.findItem(lineItems, item.skuCode || '');               item.imageUrl = li.imageUrl;               item.name = li.name;               return item;             });           }            if (shipment.availableShippingMethods) {             lt = this.findLocationLeadTime(deliveryLeadTimes, shipment);             shipment.availableShippingMethods = shipment.availableShippingMethods?.map(               method => {                 method.deliveryLeadTime = this.findMethodLeadTime(lt, method);                 return method;               });           }            return shipment;         });       },       err => this.router.navigateByUrl('/error')     );   }    setShipmentMethods() {     const shipmentsFormValue = this.shipmentsForm.value;      combineLatest(Object.keys(shipmentsFormValue).map(       key => this.shipments.updateShipment(key, shipmentsFormValue[key])     )).subscribe(       () => {         this.snackBar.open('Your shipments have been updated with a shipping method.', 'Close', { duration: 3000 });         setTimeout(() => this.router.navigateByUrl('/payment'), 4000);       },       err => this.snackBar.open('There was a problem adding shipping methods to your shipments.', 'Close', { duration: 5000 })     );   }     private findItem(lineItems: LineItem[], skuCode: string): LineItem {     return lineItems.filter((item) => item.skuCode == skuCode)[0];   }    private findLocationLeadTime(times: DeliveryLeadTime[], shipment: Shipment): DeliveryLeadTime[] {     return times.filter((dlTime) => dlTime?.stockLocation?.id == shipment?.stockLocation?.id);   }    private findMethodLeadTime(times: DeliveryLeadTime[], method: ShippingMethod): DeliveryLeadTime {     return times.filter((dlTime) => dlTime?.shippingMethod?.id == method?.id)[0];   } }

<form id="container" [formGroup]="shipmentsForm">     <app-title no="4" title="Shipping Methods" subtitle="How to ship your packages"></app-title>     <div class="shipment-container" ngFor="let shipment of shipments; let j = index; let isLast = last">         <h1>Shipment {{j+1}} of {{shipments?.length}}</h1>         <div class="row" ngFor="let item of shipment.lineItems">             <img class="image-xs" [src]="item.imageUrl" alt="product photo">             <div id="shipment-details">                 <h4 id="item-name">{{item.name}}</h4>                 <p>{{item.skuCode}}</p>             </div>             <div id="quantity-section">                 <p id="quantity-label">Quantity: </p>{{item.quantity}}             </div>         </div>         <mat-radio-group [formControlName]="shipment?.id || j">             <mat-radio-button ngFor="let method of shipment.availableShippingMethods" [value]="method.id">                 <div class="radio-button">                     <p>{{method.name}}</p>                     <div>                         <p class="radio-label">Cost:</p>                         <p> {{method.formattedPriceAmount}}</p>                     </div>                     <div>                         <p class="radio-label">Timeline:</p>                         <p> Available in {{method.deliveryLeadTime?.minDays}}-{{method.deliveryLeadTime?.maxDays}} days</p>                     </div>                 </div>             </mat-radio-button>         </mat-radio-group>         <mat-divider ngIf="!isLast"></mat-divider>     </div>     <button mat-flat-button color="primary" [disabled]="shipmentsForm.invalid" (click)="setShipmentMethods()">PROCEED TO PAYMENT</button> </form>

@UntilDestroy({ checkProperties: true }) @Component({   selector: 'app-payment',   templateUrl: './payment.component.html',   styleUrls: ['./payment.component.css'] }) export class PaymentComponent implements OnInit {   approvalUrl: string = '';    constructor(     private orders: OrderService,     private cart: CartService,     private router: Router,     private payments: PaypalPaymentService   ) { }    ngOnInit() {     const orderId = this.cart.orderId;      this.orders.getOrder(orderId, GetOrderParams.paymentSource)       .pipe(         concatMap((order: Order) => {           const paymentSourceId = order.paymentSource?.id;            const paymentMethod = order.availablePaymentMethods?.filter(             (method) => method.paymentSourceType == 'paypal_payments'           )[0];            return iif(             () => paymentSourceId ? true : false,             this.payments.getPaypalPayment(paymentSourceId || ''),             this.orders.updateOrder({               id: orderId,               paymentMethodId: paymentMethod?.id             }, [UpdateOrderParams.paymentMethod])               .pipe(concatMap(                 order => this.payments.createPaypalPayment({                   orderId: orderId,                   cancelUrl: $  {environment.clientUrl}/cancel-payment,                   returnUrl: $  {environment.clientUrl}/place-order                 })               ))           );         }))       .subscribe(         paypalPayment => this.approvalUrl = paypalPayment?.approvalUrl || '',         err => this.router.navigateByUrl('/error')       );   }    navigateToPaypal() {     window.location.href = this.approvalUrl;   } }

<app-simple-page number="5" title="Payment" subtitle="Pay for your order" buttonText="PROCEED TO PAY WITH PAYPAL" icon="point_of_sale" (buttonEvent)="navigateToPaypal()" [buttonDisabled]="approvalUrl.length ? false : true"></app-simple-page>

<app-simple-page title="Payment cancelled" subtitle="Your Paypal payment has been cancelled" icon="money_off" buttonText="GO TO HOME" [centerText]="true" route="/"></app-simple-page>

@UntilDestroy({ checkProperties: true }) @Component({   selector: 'app-place-order',   templateUrl: './place-order.component.html',   styleUrls: ['./place-order.component.css'] }) export class PlaceOrderComponent implements OnInit {   disableButton = true;    constructor(     private route: ActivatedRoute,     private router: Router,     private payments: PaypalPaymentService,     private orders: OrderService,     private cart: CartService,     private snackBar: MatSnackBar   ) { }    ngOnInit() {     this.route.queryParams       .pipe(         concatMap(params => {           const payerId = params['PayerID'];           const orderId = this.cart.orderId;            return iif(             () => payerId.length > 0,             this.orders.getOrder(orderId, GetOrderParams.paymentSource)               .pipe(                 concatMap(order => {                   const paymentSourceId = order.paymentSource?.id || '';                    return iif(                     () => paymentSourceId ? paymentSourceId.length > 0 : false,                     this.payments.updatePaypalPayment(paymentSourceId, payerId)                   );                 })               )           );         }))       .subscribe(         () => this.disableButton = false,         () => this.router.navigateByUrl('/error')       );   }    placeOrder() {     this.disableButton = true;      this.orders.updateOrder({       id: this.cart.orderId,       place: true     }, [UpdateOrderParams.place])       .subscribe(         () => {           this.snackBar.open('Your order has been successfully placed.', 'Close', { duration: 3000 });           this.cart.clearCart();           setTimeout(() => this.router.navigateByUrl('/'), 4000);         },         () => {           this.snackBar.open('There was a problem placing your order.', 'Close', { duration: 8000 });           this.disableButton = false;         }       );   } }

<app-simple-page title="Finalize Order" subtitle="Complete your order" [number]="'6'" icon="shopping_bag" buttonText="PLACE YOUR ORDER" (buttonEvent)="placeOrder()" [buttonDisabled]="disableButton"></app-simple-page>

@NgModule({   declarations: [     AppComponent   ],   imports: [     BrowserModule,     AppRoutingModule,     HttpClientModule,     BrowserAnimationsModule,     AuthModule,     ProductsModule,     CartModule,     CheckoutModule,     CoreModule   ],   providers: [     {       provide: HTTP_INTERCEPTORS,       useClass: OptionsInterceptor,       multi: true     },     {       provide: APP_INITIALIZER,       useFactory: (http: HttpClient) => () => http.post<object>(         $  {environment.apiUrl}/oauth/token,         { 'grantType': 'client_credentials' },         { withCredentials: true }),       multi: true,       deps: [HttpClient]     }   ],   bootstrap: [AppComponent] }) export class AppModule { }

@NgModule({   declarations: [SimplePageComponent, TitleComponent, WordWrapPipe, ItemQuantityComponent],   imports: [CommonModule, MatIconModule, MatButtonModule, MatTooltipModule, MatMenuModule, RouterModule],   exports: [     CommonModule,     ItemQuantityComponent,     MatButtonModule,     MatIconModule,     MatSnackBarModule,     MatTooltipModule,     SimplePageComponent,     TitleComponent,     WordWrapPipe   ] }) export class SharedModule { }

<button mat-stroked-button [matMenuTriggerFor]="menu" [disabled]="disabled">     {{quantity}}     <mat-icon ngIf="!disabled">expand_more</mat-icon> </button> <mat-menu #menu="matMenu">     <button ngFor="let no of values" (click)="setQuantity(no)" mat-menu-item>{{no}}</button> </mat-menu>

<div id="container">     <app-title no="{{number}}" title="{How To Build An E-Commerce Site With Angular 11, Commerce Layer And Paypal}" subtitle="{{subtitle}}" [centerText]="centerText"></app-title>     <div *ngIf="icon" id="icon-container">         <mat-icon color="primary" class="icon">{{icon}}</mat-icon>     </div>     <button mat-flat-button color="primary" (click)="buttonClicked()" [disabled]="buttonDisabled">         {{buttonText}}     </button> </div>

@Injectable({   providedIn: 'root' }) export class HttpErrorHandler {    constructor() { }    handleError(err: HttpErrorResponse): Observable {     let displayMessage = '';      if (err.error instanceof ErrorEvent) {       displayMessage = Client-side error: $  {err.error.message};     } else {       displayMessage = Server-side error: $  {err.message};     }      return throwError(displayMessage);   } }

@Injectable({   providedIn: 'root' }) export class AddressService {   private url: string = $  {environment.apiUrl}/api/addresses;    constructor(private http: HttpClient, private eh: HttpErrorHandler) { }    createAddress(address: Address): Observable<Address> {     return this.http.post<Address>(this.url, address)       .pipe(catchError(this.eh.handleError));   }    getAddress(id: string): Observable<Address> {     return this.http.get<Address>($  {this.url}/$  {id})       .pipe(catchError(this.eh.handleError));   } }

@Injectable({   providedIn: 'root' }) export class CartService {   private cart = new BehaviorSubject({     orderId: this.orderId,     itemCount: this.itemCount   });    cartValue$   = this.cart.asObservable();    constructor(private storage: LocalStorageService) { }    get orderId(): string {     const id = this.storage.getItem('order-id');     return id ? id : '';   }    set orderId(id: string) {     this.storage.addItem('order-id', id);     this.cart.next({ orderId: id, itemCount: this.itemCount });   }    get itemCount(): number {     const itemCount = this.storage.getItem('item-count');      return itemCount ? parseInt(itemCount) : 0;   }    set itemCount(amount: number) {     this.storage.addItem('item-count', amount.toString());     this.cart.next({ orderId: this.orderId, itemCount: amount });   }    incrementItemCount(amount: number) {     this.itemCount = this.itemCount + amount;   }    decrementItemCount(amount: number) {     this.itemCount = this.itemCount - amount;   }    clearCart() {     this.storage.deleteItem('item-count');     this.cart.next({ orderId: '', itemCount: 0 });   } }

@Injectable({   providedIn: 'root' }) export class CountryService {    constructor(private http: HttpClient) { }    getCountries(): Observable<Country[]> {     return this.http.get<Country[]>('./../../../assets/json/country-codes.json');   } }

@Injectable({   providedIn: 'root' }) export class CustomerAddressService {   private url: string = $  {environment.apiUrl}/api/customer_addresses;    constructor(private http: HttpClient, private eh: HttpErrorHandler) { }    createCustomerAddress(addressId: string, customerId: string): Observable<CustomerAddress> {     return this.http.post<CustomerAddress>(this.url, {       addressId: addressId, customerId: customerId     })       .pipe(catchError(this.eh.handleError));   }    getCustomerAddresses(): Observable<CustomerAddress[]> {     return this.http.get<CustomerAddress[]>($  {this.url})       .pipe(catchError(this.eh.handleError));   }    getCustomerAddress(id: string): Observable<CustomerAddress> {     return this.http.get<CustomerAddress>($  {this.url}/$  {id})       .pipe(catchError(this.eh.handleError));   } }

@Injectable({   providedIn: 'root' }) export class CustomerService {   private url: string = $  {environment.apiUrl}/api/customers;    constructor(private http: HttpClient, private eh: HttpErrorHandler) { }    createCustomer(email: string, password: string, firstName: string, lastName: string): Observable<Customer> {     return this.http.post<Customer>(this.url, {       email: email,       password: password,       firstName: firstName,       lastName: lastName     })       .pipe(catchError(this.eh.handleError));   }    getCurrentCustomer(): Observable<Customer> {     return this.http.get<Customer>($  {this.url}/current)       .pipe(catchError(this.eh.handleError));   }    getCustomer(id: string): Observable<Customer> {     return this.http.get<Customer>($  {this.url}/$  {id})       .pipe(catchError(this.eh.handleError));   } }

@Injectable({   providedIn: 'root' }) export class DeliveryLeadTimeService {   private url: string = $  {environment.apiUrl}/api/delivery_lead_times;    constructor(private http: HttpClient, private eh: HttpErrorHandler) { }    getDeliveryLeadTimes(): Observable<DeliveryLeadTime[]> {     return this.http.get<DeliveryLeadTime[]>(this.url)       .pipe(catchError(this.eh.handleError));   } }

@Injectable({   providedIn: 'root' }) export class LineItemService {   private url: string = $  {environment.apiUrl}/api/line_items;    constructor(private http: HttpClient, private eh: HttpErrorHandler) { }    createLineItem(lineItem: LineItem): Observable<LineItem> {     return this.http.post<LineItem>(this.url, lineItem)       .pipe(catchError(this.eh.handleError));   }    getLineItem(id: string): Observable<LineItem> {     return this.http.get<LineItem>($  {this.url}/$  {id})       .pipe(catchError(this.eh.handleError));   }    updateLineItem(id: string, quantity: number): Observable<LineItem> {     return this.http.patch<LineItem>($  {this.url}/$  {id}, { quantity: quantity })       .pipe(catchError(this.eh.handleError));   }    deleteLineItem(id: string): Observable<LineItem> {     return this.http.delete<LineItem>($  {this.url}/$  {id})       .pipe(catchError(this.eh.handleError));   } }

@Injectable({   providedIn: 'root' }) export class OrderService {   private url: string = $  {environment.apiUrl}/api/orders;    constructor(     private http: HttpClient,     private eh: HttpErrorHandler) { }    createOrder(): Observable<Order> {     return this.http.post<Order>(this.url, {})       .pipe(catchError(this.eh.handleError));   }    getOrder(id: string, orderParam: GetOrderParams): Observable<Order> {     let params = {};     if (orderParam != GetOrderParams.none) {       params = { [orderParam]: 'true' };     }      return this.http.get<Order>($  {this.url}/$  {id}, { params: params })       .pipe(catchError(this.eh.handleError));   }    updateOrder(order: Order, params: UpdateOrderParams[]): Observable<Order> {     let updateParams = [];     for (const param of params) {       updateParams.push(param.toString());     }      return this.http.patch<Order>(       $  {this.url}/$  {order.id},       order,       { params: { 'field': updateParams } }     )       .pipe(catchError(this.eh.handleError));   }    getOrderShipments(id: string): Observable<Shipment[]> {     return this.http.get<Shipment[]>($  {this.url}/$  {id}/shipments)       .pipe(catchError(this.eh.handleError));   } }

@Injectable({   providedIn: 'root' }) export class PaypalPaymentService {   private url: string = $  {environment.apiUrl}/api/paypal_payments;    constructor(private http: HttpClient, private eh: HttpErrorHandler) { }    createPaypalPayment(payment: PaypalPayment): Observable<PaypalPayment> {     return this.http.post<PaypalPayment>(this.url, payment)       .pipe(catchError(this.eh.handleError));   }    getPaypalPayment(id: string): Observable<PaypalPayment> {     return this.http.get<PaypalPayment>($  {this.url}/$  {id})       .pipe(catchError(this.eh.handleError));   }    updatePaypalPayment(id: string, paypalPayerId: string): Observable<PaypalPayment> {     return this.http.patch<PaypalPayment>(       $  {this.url}/$  {id},       { paypalPayerId: paypalPayerId }     )       .pipe(catchError(this.eh.handleError));   } }

@Injectable({   providedIn: 'root' }) export class ShipmentService {   private url: string = $  {environment.apiUrl}/api/shipments;    constructor(private http: HttpClient, private eh: HttpErrorHandler) { }    getShipment(id: string): Observable<Shipment> {     return this.http.get<Shipment>($  {this.url}/$  {id})       .pipe(catchError(this.eh.handleError));   }    updateShipment(id: string, shippingMethodId: string): Observable<Shipment> {     return this.http.patch<Shipment>(       $  {this.url}/$  {id},       { shippingMethodId: shippingMethodId }     )       .pipe(catchError(this.eh.handleError));   } }

@Injectable({   providedIn: 'root' }) export class SkuService {   private url: string = $  {environment.apiUrl}/api/skus;    constructor(private http: HttpClient, private eh: HttpErrorHandler) { }    getSku(id: string): Observable<Sku> {     return this.http.get<Sku>($  {this.url}/$  {id})       .pipe(catchError(this.eh.handleError));   }    getSkus(page: number, pageSize: number): Observable<Sku[]> {     return this.http.get<Sku[]>(       this.url,       {         params: {           'page': page.toString(),           'pageSize': pageSize.toString()         }       })       .pipe(catchError(this.eh.handleError));   } }

ng g m core ng g g core/guards/empty-cart ng g s core/header/header ng g interceptor core/interceptors/options for comp in header error not-found; do ng g c "core/$  {comp}"; done for serv in authentication session; do ng g s "core/authentication/$  {serv}"; done

@NgModule({   declarations: [HeaderComponent, NotFoundComponent, ErrorComponent],   imports: [     RouterModule.forChild([       { path: '404', component: NotFoundComponent },       { path: 'error', component: ErrorComponent },       { path: '**', redirectTo: '/404' }     ]),     MatBadgeModule,     SharedModule   ],   exports: [HeaderComponent] }) export class CoreModule { }

@Injectable({   providedIn: 'root' }) export class AuthenticationService {   private url: string = $  {environment.apiUrl}/oauth/token;    constructor(private http: HttpClient, private eh: HttpErrorHandler) { }    getClientSession(): Observable<object> {     return this.http.post<object>(       this.url,       { grantType: 'client_credentials' })       .pipe(catchError(this.eh.handleError));   }    login(email: string, password: string): Observable<object> {     return this.http.post<object>(       this.url,       { username: email, password: password, grantType: 'password' })       .pipe(catchError(this.eh.handleError));   } }

@Injectable({   providedIn: 'root' }) export class SessionService {   private url: string = $  {environment.apiUrl}/session;   private isLoggedIn = new BehaviorSubject(false);    loggedInStatus = this.isLoggedIn.asObservable();    constructor(private http: HttpClient, private eh: HttpErrorHandler) { }    setLoggedInStatus(status: boolean) {     this.isLoggedIn.next(status);   }    isCustomerLoggedIn(): Observable<{ message: string }> {     return this.http.get<{ message: string }>($  {this.url}/customer/status)       .pipe(catchError(this.eh.handleError));   }    logout(): Observable<{ message: string }> {     return this.http.get<{ message: string }>($  {this.url}/destroy)       .pipe(catchError(this.eh.handleError));   } }

@Injectable({   providedIn: 'root' }) export class HeaderService {   private headerButtonsVisibility = new BehaviorSubject(true);    showHeaderButtons = this.headerButtonsVisibility.asObservable();    constructor() { }    setHeaderButtonsVisibility(visible: boolean) {     this.headerButtonsVisibility.next(visible);   } }

<app-simple-page title="An error occurred" subtitle="There was a problem fetching your page" buttonText="GO TO HOME" icon="report" [centerText]="true" route="/"> </app-simple-page>

<app-simple-page title="404: Page not found" buttonText="GO TO HOME" icon="search" subtitle="The requested page could not be found" [centerText]="true" route="/"></app-simple-page>

@UntilDestroy({ checkProperties: true }) @Component({   selector: 'app-header',   templateUrl: './header.component.html',   styleUrls: ['./header.component.css'] }) export class HeaderComponent implements OnInit {   cartAmount: number = 0;   isLoggedIn: boolean = false;   showButtons: boolean = true;    constructor(     private session: SessionService,     private snackBar: MatSnackBar,     private cart: CartService,     private header: HeaderService,     private auth: AuthenticationService   ) { }    ngOnInit() {     this.session.isCustomerLoggedIn()       .subscribe(         () => {           this.isLoggedIn = true;           this.session.setLoggedInStatus(true);         }       );      this.session.loggedInStatus.subscribe(status => this.isLoggedIn = status);      this.header.showHeaderButtons.subscribe(visible => this.showButtons = visible);      this.cart.cartValue$  .subscribe(cart => this.cartAmount = cart.itemCount);   }    logout() {     concat(       this.session.logout(),       this.auth.getClientSession()     ).subscribe(       () => {         this.snackBar.open('You have been logged out.', 'Close', { duration: 4000 });         this.session.setLoggedInStatus(false);       },       err => this.snackBar.open('There was a problem logging you out.', 'Close', { duration: 4000 })     );   } }

<div id="header-container">     <div id="left-half" routerLink="/">         <h1><span id="lime-text">Lime</span><span id="store-text">Store</span></h1>     </div>     <div id="right-half">         <div id="button-container" ngIf="showButtons">             <button mat-icon-button color="primary" aria-label="shopping cart">                 <mat-icon [matBadge]="cartAmount" matBadgeColor="accent" aria-label="shopping cart" routerLink="/cart">shopping_cart</mat-icon>             </button>             <button mat-icon-button color="primary" aria-label="login" ngIf="!isLoggedIn">                 <mat-icon aria-label="login" matTooltip="login" routerLink="/login">login</mat-icon>             </button>             <button mat-icon-button color="primary" aria-label="logout" *ngIf="isLoggedIn" (click)="logout()">                 <mat-icon aria-label="logout" matTooltip="logout">logout</mat-icon>             </button>         </div>     </div> </div>

@Injectable({   providedIn: 'root' }) export class EmptyCartGuard implements CanActivate {   constructor(private cart: CartService, private router: Router) { }    canActivate(     route: ActivatedRouteSnapshot,     state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {     if (this.cart.orderId) {       if (this.cart.itemCount > 0) {         return true;       }     }      return this.router.parseUrl('/empty');   } }

@Injectable() export class OptionsInterceptor implements HttpInterceptor {    constructor() { }    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {     request = request.clone({       headers: request.headers.set('Content-Type', 'application/json'),       withCredentials: true     });      return next.handle(request);   } }

@UntilDestroy({ checkProperties: true }) @Component({   selector: 'app-product-list',   templateUrl: './product-list.component.html',   styleUrls: ['./product-list.component.css'] }) export class ProductListComponent implements OnInit {   cols = 4;   length = 0;   pageIndex = 0;   pageSize = 20;   pageSizeOptions: number[] = [5, 10, 20];    pageEvent!: PageEvent | void;    products: Sku[] = [];    constructor(     private breakpointObserver: BreakpointObserver,     private skus: SkuService,     private router: Router,     private header: HeaderService) { }    ngOnInit() {     this.getProducts(1, 20);     this.header.setHeaderButtonsVisibility(true);      this.breakpointObserver.observe([       Breakpoints.Handset,       Breakpoints.Tablet,       Breakpoints.Web     ]).subscribe(result => {       if (result.matches) {         if (result.breakpoints['(max-width: 599.98px) and (orientation: portrait)'] || result.breakpoints['(max-width: 599.98px) and (orientation: landscape)']) {           this.cols = 1;         }         else if (result.breakpoints['(min-width: 1280px) and (orientation: portrait)'] || result.breakpoints['(min-width: 1280px) and (orientation: landscape)']) {           this.cols = 4;         } else {           this.cols = 3;         }       }     });   }    private getProducts(page: number, pageSize: number) {     this.skus.getSkus(page, pageSize)       .subscribe(         skus => {           this.products = skus;           this.length = skus[0].__collectionMeta.recordCount;         },         err => this.router.navigateByUrl('/error')       );   }    getNextPage(event: PageEvent) {     this.getProducts(event.pageIndex + 1, event.pageSize);   }    trackSkus(index: number, item: Sku) {     return $  {item.id}-$  {index};   } }

<mat-grid-list cols="{{cols}}" rowHeight="400px" gutterSize="20px" class="grid-layout">     <mat-grid-tile *ngFor="let product of products; trackBy: trackSkus">         <mat-card>             <img id="card-image" mat-card-image src="{{product.imageUrl}}" alt="product photo">             <mat-card-content>                 <mat-card-title matTooltip="{{product.name}}">{{product.name |wordWrap:35}}</mat-card-title>                 <mat-card-subtitle>{{product.prices[0].compareAtAmountFloat | currency:'EUR'}}</mat-card-subtitle>             </mat-card-content>             <mat-card-actions>                 <button mat-flat-button color="primary" [routerLink]="['/product', product.id]">                     View                 </button>             </mat-card-actions>         </mat-card>     </mat-grid-tile> </mat-grid-list> <mat-paginator [length]="length" [pageIndex]="pageIndex" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" (page)="pageEvent = getNextPage($  event)"> </mat-paginator>

@UntilDestroy({ checkProperties: true }) @Component({   selector: 'app-product',   templateUrl: './product.component.html',   styleUrls: ['./product.component.css'] }) export class ProductComponent implements OnInit {   id: string = '';   product!: Sku;   quantity: number = 0;    constructor(     private route: ActivatedRoute,     private skus: SkuService,     private location: Location,     private router: Router,     private header: HeaderService,     private orders: OrderService,     private lineItems: LineItemService,     private cart: CartService,     private snackBar: MatSnackBar   ) { }    ngOnInit() {     this.route.paramMap       .pipe(         mergeMap(params => {           const id = params.get('id')           this.id = id ? id : '';            return this.skus.getSku(this.id);         }),         tap((sku) => {           this.product = sku;         })       ).subscribe({         error: (err) => this.router.navigateByUrl('/error')       });      this.header.setHeaderButtonsVisibility(true);   }    addItemToCart() {     if (this.quantity > 0) {       if (this.cart.orderId == '') {         this.orders.createOrder()           .pipe(             mergeMap((order: Order) => {               this.cart.orderId = order.id || '';                return this.lineItems.createLineItem({                 orderId: order.id,                 name: this.product.name,                 imageUrl: this.product.imageUrl,                 quantity: this.quantity,                 skuCode: this.product.code               });             })           )           .subscribe(             () => {               this.cart.incrementItemCount(this.quantity);               this.showSuccessSnackBar();             },             err => this.showErrorSnackBar()           );       } else {         this.lineItems.createLineItem({           orderId: this.cart.orderId,           name: this.product.name,           imageUrl: this.product.imageUrl,           quantity: this.quantity,           skuCode: this.product.code         }).subscribe(           () => {             this.cart.incrementItemCount(this.quantity);             this.showSuccessSnackBar();           },           err => this.showErrorSnackBar()         );       }     } else {       this.snackBar.open('Select a quantity greater than 0.', 'Close', { duration: 8000 });     }   }    setQuantity(no: number) {     this.quantity = no;   }    goBack() {     this.location.back();   }    private showSuccessSnackBar() {     this.snackBar.open('Item successfully added to cart.', 'Close', { duration: 8000 });   }    private showErrorSnackBar() {     this.snackBar.open('Failed to add your item to the cart.', 'Close', { duration: 8000 });   } }

<div id="container">     <mat-card *ngIf="product" class="product-card">         <img mat-card-image src="{{product.imageUrl}}" alt="Photo of a product">         <mat-card-content>             <mat-card-title>{{product.name}}</mat-card-title>             <mat-card-subtitle>{{product.prices[0].compareAtAmountFloat | currency:'EUR'}}</mat-card-subtitle>             <p>                 {{product.description}}             </p>         </mat-card-content>         <mat-card-actions>             <app-item-quantity [quantity]="quantity" [maxValue]="10" (setQuantityEvent)="setQuantity($  event)"></app-item-quantity>             <button mat-raised-button color="accent" (click)="addItemToCart()">                 <mat-icon>add_shopping_cart</mat-icon>                 Add to cart             </button>             <button mat-raised-button color="primary" (click)="goBack()">                 <mat-icon>storefront</mat-icon>                 Continue shopping             </button>         </mat-card-actions>     </mat-card> </div>

@UntilDestroy({ checkProperties: true }) @Component({   selector: 'app-signup',   templateUrl: './signup.component.html',   styleUrls: ['./signup.component.css'] }) export class SignupComponent implements OnInit {   signupForm = this.fb.group({     firstName: ['', Validators.required],     lastName: ['', Validators.required],     email: ['', [Validators.required, Validators.email]],     password: ['', [Validators.required, Validators.minLength(8)]],     confirmedPassword: ['', [Validators.required]]   }, { validators: this.matchPasswords });    @ViewChild(FormGroupDirective) sufDirective: FormGroupDirective | undefined;    constructor(     private customer: CustomerService,     private fb: FormBuilder,     private snackBar: MatSnackBar,     private router: Router,     private header: HeaderService   ) { }    ngOnInit() {     this.header.setHeaderButtonsVisibility(false);   }    matchPasswords(signupGroup: AbstractControl): ValidationErrors | null {     const password = signupGroup.get('password')?.value;     const confirmedPassword = signupGroup.get('confirmedPassword')?.value;      return password == confirmedPassword ? null : { differentPasswords: true };   }    get password() { return this.signupForm.get('password'); }    get confirmedPassword() { return this.signupForm.get('confirmedPassword'); }    signup() {     const customer = this.signupForm.value;      this.customer.createCustomer(       customer.email,       customer.password,       customer.firstName,       customer.lastName     ).subscribe(       () => {         this.signupForm.reset();         this.sufDirective?.resetForm();          this.snackBar.open('Account successfully created. You will be redirected in 5 seconds.', 'Close', { duration: 5000 });          setTimeout(() => this.router.navigateByUrl('/'), 6000);       },       err => this.snackBar.open('There was a problem creating your account.', 'Close', { duration: 5000 })     );   } }

<form id="container" [formGroup]="signupForm" (ngSubmit)="signup()">     <h1 class="mat-display-3">Create Account</h1>     <mat-form-field appearance="outline">         <mat-label>First Name</mat-label>         <input matInput formControlName="firstName">         <mat-icon matPrefix>portrait</mat-icon>     </mat-form-field>     <mat-form-field appearance="outline">         <mat-label>Last Name</mat-label>         <input matInput formControlName="lastName">         <mat-icon matPrefix>portrait</mat-icon>     </mat-form-field>     <mat-form-field appearance="outline">         <mat-label>Email</mat-label>         <input matInput formControlName="email" type="email">         <mat-icon matPrefix>alternate_email</mat-icon>     </mat-form-field>     <mat-form-field appearance="outline">         <mat-label>Password</mat-label>         <input matInput formControlName="password" type="password">         <mat-icon matPrefix>vpn_key</mat-icon>     </mat-form-field>     <mat-form-field appearance="outline">         <mat-label>Confirm Password</mat-label>         <input matInput formControlName="confirmedPassword" type="password">         <mat-icon matPrefix>vpn_key</mat-icon>     </mat-form-field>     <div ngIf="confirmedPassword?.invalid && (confirmedPassword?.dirty || confirmedPassword?.touched)">         <mat-error ngIf="signupForm.hasError('differentPasswords')">             Your passwords do not match.         </mat-error>     </div>     <div ngIf="password?.invalid && (password?.dirty || password?.touched)">         <mat-error ngIf="password?.hasError('minlength')">             Your password should be at least 8 characters.         </mat-error>     </div>     <button mat-flat-button color="primary" [disabled]="!signupForm.valid">Sign Up</button> </form>

<form id="container" [formGroup]="loginForm" (ngSubmit)="login()">     <h1 class="mat-display-3">Login</h1>     <mat-form-field appearance="outline">         <mat-label>Email</mat-label>         <input matInput type="email" formControlName="email" required>         <mat-icon matPrefix>alternate_email</mat-icon>     </mat-form-field>     <mat-form-field appearance="outline">         <mat-label>Password</mat-label>         <input matInput type="password" formControlName="password" required>         <mat-icon matPrefix>vpn_key</mat-icon>     </mat-form-field>     <button mat-flat-button color="primary" [disabled]="!loginForm.valid">Login</button>     <p id="newAccount" class="mat-h3">Not registered yet? <a id="newAccountLink" routerLink="/signup">Create an account.</a></p> </form>

@NgModule({   declarations: [SummaryComponent, CodesComponent, EmptyComponent],   imports: [     RouterModule.forChild([       {         path: '', canActivate: [EmptyCartGuard], children: [           { path: 'cart', component: SummaryComponent },           { path: 'codes', component: CodesComponent }         ]       },       { path: 'empty', component: EmptyComponent }     ]),     MatDividerModule,     MatFormFieldModule,     MatInputModule,     MatMenuModule,     ReactiveFormsModule,     SharedModule   ] }) export class CartModule { }

@UntilDestroy({ checkProperties: true }) @Component({   selector: 'app-codes',   templateUrl: './codes.component.html',   styleUrls: ['./codes.component.css'] }) export class CodesComponent {   couponCode = new FormControl('');   giftCardCode = new FormControl('');    @ViewChild(FormControlDirective) codesDirective: FormControlDirective | undefined;    constructor(     private cart: CartService,     private order: OrderService,     private snackBar: MatSnackBar   ) { }    private updateOrder(order: Order, params: UpdateOrderParams[], codeType: string) {     this.order.updateOrder(order, params)       .subscribe(         () => {           this.snackBar.open(Successfully added $  {codeType} code., 'Close', { duration: 8000 });           this.couponCode.reset();           this.giftCardCode.reset();           this.codesDirective?.reset();         },         err => this.snackBar.open(There was a problem adding your $  {codeType} code., 'Close', { duration: 8000 })       );   }    addCoupon() {     this.updateOrder({ id: this.cart.orderId, couponCode: this.couponCode.value }, [UpdateOrderParams.couponCode], 'coupon');   }    addGiftCard() {     this.updateOrder({ id: this.cart.orderId, giftCardCode: this.giftCardCode.value }, [UpdateOrderParams.giftCardCode], 'gift card');   }  }

<div id="container">     <app-title title="Redeem a code" subtitle="Enter a coupon code or gift card" [centerText]="true"></app-title>     <div class="input-row">         <mat-form-field appearance="outline">             <mat-label>Coupon Code</mat-label>             <input matInput [formControl]="couponCode" required>             <mat-icon matPrefix>card_giftcard</mat-icon>         </mat-form-field>         <button class="redeem" mat-flat-button color="accent" [disabled]="couponCode.invalid" (click)="addCoupon()">Redeem</button>     </div>     <div class="input-row">         <mat-form-field appearance="outline">             <mat-label>Gift Card Code</mat-label>             <input matInput [formControl]="giftCardCode" required>             <mat-icon matPrefix>redeem</mat-icon>         </mat-form-field>         <button class="redeem" mat-flat-button color="accent" [disabled]="giftCardCode.invalid" (click)="addGiftCard()">Redeem</button>     </div>     <button color="primary" mat-flat-button routerLink="/cart">         <mat-icon>shopping_cart</mat-icon>         CONTINUE TO CART     </button> </div>

<app-simple-page title="Your cart is empty" subtitle="There is currently nothing in your cart. Head to the home page to add items." buttonText="GO TO HOME PAGE" icon="shopping_basket" [centerText]="true" route="/"> </app-simple-page>

@UntilDestroy({ checkProperties: true }) @Component({   selector: 'app-summary',   templateUrl: './summary.component.html',   styleUrls: ['./summary.component.css'] }) export class SummaryComponent implements OnInit {   order: Order = {};    summary: { name: string, amount: string | undefined, id: string }[] = [];    constructor(     private orders: OrderService,     private lineItems: LineItemService,     private cart: CartService,     private snackBar: MatSnackBar,     private router: Router   ) { }    ngOnInit() {     this.orders.getOrder(this.cart.orderId, GetOrderParams.cart)       .subscribe(         order => this.processOrder(order),         err => this.showOrderError('retrieving your cart')       );   }    private processOrder(order: Order) {     this.order = order;      this.summary = [       { name: 'Subtotal', amount: order.formattedSubtotalAmount, id: 'subtotal' },       { name: 'Discount', amount: order.formattedDiscountAmount, id: 'discount' },       { name: 'Taxes (included)', amount: order.formattedTotalTaxAmount, id: 'taxes' },       { name: 'Shipping', amount: order.formattedShippingAmount, id: 'shipping' },       { name: 'Gift Card', amount: order.formattedGiftCardAmount, id: 'gift-card' }     ];   }    private showOrderError(msg: string) {     this.snackBar.open(There was a problem $  {msg}., 'Close', { duration: 8000 });   }    checkout() {     this.router.navigateByUrl('/customer');   }    deleteLineItem(id: string) {     this.lineItems.deleteLineItem(id)       .pipe(         mergeMap(() => this.orders.getOrder(this.cart.orderId, GetOrderParams.cart))       ).subscribe(         order => {           this.processOrder(order);           this.cart.itemCount = order.skusCount || this.cart.itemCount;           this.snackBar.open(Item successfully removed from cart., 'Close', { duration: 8000 })         },         err => this.showOrderError('deleting your order')       );   } }

<div class="container" ngIf="order">     <h3 id="order-id">Order #{{order.number}} ({{order.skusCount}} items)</h3>     <div class="line-item" ngFor="let item of order.lineItems">         <div id="product-details">             <img ngIf="item.imageUrl" class="image-xs" src="{{item.imageUrl}}" alt="product photo">             <div ngIf="!item.imageUrl" class="image-xs no-image"></div>             <div id="line-details">                 <div>{{item.name}}</div>                 <div> {{item.formattedUnitAmount }} </div>             </div>         </div>         <div id="product-config">             <app-item-quantity [quantity]="item.quantity || 0" [disabled]="true"></app-item-quantity>             <div class="itemTotal"> {{item.formattedTotalAmount }} </div>             <button mat-icon-button color="warn" (click)="deleteLineItem(item.id || '')">                 <mat-icon>clear</mat-icon>         </button>         </div>     </div>     <mat-divider></mat-divider>     <div class="costSummary">         <div class="costItem" *ngFor="let item of summary" [id]="item.id">             <h3 class="costLabel">{{item.name}}</h3>             <p> {{item.amount }} </p>         </div>     </div>     <mat-divider></mat-divider>     <div class="costSummary">         <div class="costItem" id="total">             <h2 id="totalLabel">Total</h2>             <h2> {{order.formattedTotalAmountWithTaxes}} </h2>         </div>     </div>     <div id="checkout-button">         <button color="accent" mat-flat-button routerLink="/codes">         <mat-icon>redeem</mat-icon>         ADD GIFT CARD/COUPON     </button>         <button color="primary" mat-flat-button (click)="checkout()">         <mat-icon>point_of_sale</mat-icon>         CHECKOUT     </button>     </div> </div>

@NgModule({   declarations: [     CustomerComponent,     AddressComponent,     BillingAddressComponent,     ShippingAddressComponent,     ShippingMethodsComponent,     PaymentComponent,     PlaceOrderComponent,     AddressListComponent,     CountrySelectComponent,     CancelPaymentComponent   ],   imports: [     RouterModule.forChild([       {         path: '', canActivate: [EmptyCartGuard], children: [           { path: 'billing-address', component: BillingAddressComponent },           { path: 'cancel-payment', component: CancelPaymentComponent },           { path: 'customer', component: CustomerComponent },           { path: 'payment', component: PaymentComponent },           { path: 'place-order', component: PlaceOrderComponent },           { path: 'shipping-address', component: ShippingAddressComponent },           { path: 'shipping-methods', component: ShippingMethodsComponent }         ]       }     ]),     MatCardModule,     MatCheckboxModule,     MatDividerModule,     MatInputModule,     MatMenuModule,     MatRadioModule,     ReactiveFormsModule,     SharedModule   ] }) export class CheckoutModule { }

<button id="country-select" mat-stroked-button [matMenuTriggerFor]="countryMenu">     {{country}}     <mat-icon>expand_more</mat-icon> </button> <mat-menu #countryMenu="matMenu">     <button *ngFor="let cnt of countries" (click)="setCountry(cnt)" mat-menu-item>{{cnt.name}}</button> </mat-menu>

@Component({   selector: 'app-address',   templateUrl: './address.component.html',   styleUrls: ['./address.component.css'] }) export class AddressComponent {   @Input() buttonText: string = '';   @Input() showTitle?: boolean = false;    @Output() createAddress = new EventEmitter<Address>();    @Input() checkboxText: string = '';   @Output() isCheckboxChecked = new EventEmitter<boolean>();    countryCode: string = '';    addressForm = this.fb.group({     firstName: [''],     lastName: [''],     line1: [''],     city: [''],     zipCode: [''],     stateCode: [''],     phone: ['']   });    @ViewChild(FormGroupDirective) afDirective: FormGroupDirective | undefined;    constructor(private fb: FormBuilder) { }    setCountryCode(code: string) {     this.countryCode = code;   }    addAddress() {     this.createAddress.emit({       firstName: this.addressForm.get('firstName')?.value,       lastName: this.addressForm.get('lastName')?.value,       line1: this.addressForm.get('line1')?.value,       city: this.addressForm.get('city')?.value,       zipCode: this.addressForm.get('zipCode')?.value,       stateCode: this.addressForm.get('stateCode')?.value || 'N/A',       countryCode: this.countryCode,       phone: this.addressForm.get('phone')?.value     });   }    setCheckboxValue(change: MatCheckboxChange) {     if (this.isCheckboxChecked) {       this.isCheckboxChecked.emit(change.checked);     }   } }

<form id="container" [formGroup]="addressForm">     <p class="mat-headline" *ngIf="showTitle">Or add a new address</p>     <div class="row">         <mat-form-field appearance="outline">             <mat-label>First Name</mat-label>             <input matInput formControlName="firstName">         </mat-form-field>         <mat-form-field appearance="outline">             <mat-label>Last Name</mat-label>             <input matInput formControlName="lastName">         </mat-form-field>     </div>     <div class="row">         <mat-form-field appearance="outline">             <mat-label>Address</mat-label>             <input matInput formControlName="line1">         </mat-form-field>         <mat-form-field appearance="outline">             <mat-label>City</mat-label>             <input matInput formControlName="city">         </mat-form-field>     </div>     <div class="row">         <mat-form-field appearance="outline">             <mat-label>State Code</mat-label>             <input matInput formControlName="stateCode">         </mat-form-field>         <mat-form-field appearance="outline">             <mat-label>Zip Code</mat-label>             <input matInput formControlName="zipCode">         </mat-form-field>     </div>     <div class="row">         <mat-form-field appearance="outline">             <mat-label>Phone</mat-label>             <input matInput formControlName="phone">         </mat-form-field>         <app-country-select (setCountryEvent)="setCountryCode($  event)"></app-country-select>     </div>     <mat-checkbox color="accent" (change)="setCheckboxValue($  event)">         {{checkboxText}}     </mat-checkbox>     <button id="submit-button" mat-flat-button color="primary" (click)="addAddress()">         {{buttonText}}     </button> </form>

@Component({   selector: 'app-address-list',   templateUrl: './address-list.component.html',   styleUrls: ['./address-list.component.css'] }) export class AddressListComponent implements OnInit {   addresses: CustomerAddress[] = [];    @Output() setAddressEvent = new EventEmitter<string>();    constructor(     private session: SessionService,     private customerAddresses: CustomerAddressService,     private snackBar: MatSnackBar   ) { }    ngOnInit() {     this.session.loggedInStatus       .pipe(         mergeMap(           status => iif(() => status, this.customerAddresses.getCustomerAddresses())         ))       .subscribe(         addresses => {           if (addresses.length) {             this.addresses = addresses           }         },         err => this.snackBar.open('There was a problem getting your existing addresses.', 'Close', { duration: 8000 })       );   }    setAddress(change: MatRadioChange) {     this.setAddressEvent.emit(change.value);   } }

<div id="container">     <p class="mat-headline">Pick an existing address</p>     <mat-error ngIf="!addresses.length">You have no existing addresses</mat-error>     <mat-radio-group ngIf="addresses.length" class="addresses" (change)="setAddress($  event)">         <mat-card class="address" *ngFor="let address of addresses">             <mat-radio-button [value]="address.address?.id" color="primary">                 <p>{{address.address?.firstName}} {{address.address?.lastName}},</p>                 <p>{{address.address?.line1}},</p>                 <p>{{address.address?.city}},</p>                 <p>{{address.address?.zipCode}},</p>                 <p>{{address.address?.stateCode}}, {{address.address?.countryCode}}</p>                 <p>{{address.address?.phone}}</p>             </mat-radio-button>         </mat-card>     </mat-radio-group> </div>

@UntilDestroy({ checkProperties: true }) @Component({   selector: 'app-customer',   templateUrl: './customer.component.html',   styleUrls: ['./customer.component.css'] }) export class CustomerComponent implements OnInit {   email = new FormControl('', [Validators.required, Validators.email]);    constructor(     private orders: OrderService,     private customers: CustomerService,     private cart: CartService,     private router: Router,     private snackBar: MatSnackBar   ) { }    ngOnInit() {     this.customers.getCurrentCustomer()       .subscribe(         customer => this.email.setValue(customer.email)       );   }    addCustomerEmail() {     this.orders.updateOrder(       { id: this.cart.orderId, customerEmail: this.email.value },       [UpdateOrderParams.customerEmail])       .subscribe(         () => this.router.navigateByUrl('/billing-address'),         err => this.snackBar.open('There was a problem adding your email to the order.', 'Close', { duration: 8000 })       );   } }

<div id="container">     <app-title no="1" title="Customer" subtitle="Billing information and shipping address"></app-title>     <mat-form-field appearance="outline">         <mat-label>Email</mat-label>         <input matInput [formControl]="email" required>         <mat-icon matPrefix>alternate_email</mat-icon>     </mat-form-field>     <button mat-flat-button color="primary" [disabled]="email.invalid" (click)="addCustomerEmail()">         PROCEED TO BILLING ADDRESS     </button> </div>

@UntilDestroy({ checkProperties: true }) @Component({   selector: 'app-billing-address',   templateUrl: './billing-address.component.html',   styleUrls: ['./billing-address.component.css'] }) export class BillingAddressComponent implements OnInit {   showAddresses: boolean = false;   sameShippingAddressAsBilling: boolean = false;   selectedCustomerAddressId: string = '';    constructor(     private addresses: AddressService,     private snackBar: MatSnackBar,     private session: SessionService,     private orders: OrderService,     private cart: CartService,     private router: Router,     private customerAddresses: CustomerAddressService) { }    ngOnInit() {     this.session.loggedInStatus       .subscribe(         status => this.showAddresses = status       );   }    updateBillingAddress(address: Address) {     if (this.showAddresses && this.selectedCustomerAddressId) {       this.cloneAddress();     } else if (address.firstName && address.lastName && address.line1 && address.city && address.zipCode && address.stateCode && address.countryCode && address.phone) {       this.createAddress(address);     }     else {       this.snackBar.open('Check your address. Some fields are missing.', 'Close');     }   }    setCustomerAddress(customerAddressId: string) {     this.selectedCustomerAddressId = customerAddressId;   }    setSameShippingAddressAsBilling(change: boolean) {     this.sameShippingAddressAsBilling = change;   }    private createAddress(address: Address) {     this.addresses.createAddress(address)       .pipe(         concatMap(           address => {             const update = this.updateOrderObservable({               id: this.cart.orderId,               billingAddressId: address.id             }, [UpdateOrderParams.billingAddress]);              if (this.showAddresses) {               return combineLatest([update, this.customerAddresses.createCustomerAddress(address.id || '', '')]);             } else {               return update;             }           }))       .subscribe(         () => this.showSuccessSnackBar(),         err => this.showErrorSnackBar()       );   }    private cloneAddress() {     this.updateOrderObservable({       id: this.cart.orderId,       billingAddressCloneId: this.selectedCustomerAddressId     }, [UpdateOrderParams.billingAddressClone])       .subscribe(         () => this.showSuccessSnackBar(),         err => this.showErrorSnackBar()       );   }    private updateOrderObservable(order: Order, updateParams: UpdateOrderParams[]): Observable<any> {     return iif(() => this.sameShippingAddressAsBilling,       concat([         this.orders.updateOrder(order, updateParams),         this.orders.updateOrder(order, [UpdateOrderParams.shippingAddressSameAsBilling])       ]),       this.orders.updateOrder(order, updateParams)     );   }    private showErrorSnackBar() {     this.snackBar.open('There was a problem creating your address.', 'Close', { duration: 8000 });   }    private navigateTo(path: string) {     setTimeout(() => this.router.navigateByUrl(path), 4000);   }    private showSuccessSnackBar() {     this.snackBar.open('Billing address successfully added. Redirecting...', 'Close', { duration: 3000 });     if (this.sameShippingAddressAsBilling) {       this.navigateTo('/shipping-methods');     } else {       this.navigateTo('/shipping-address');     }   } }

<app-title no="2" title="Billing Address" subtitle="Address to bill charges to"></app-title> <app-address-list ngIf="showAddresses" (setAddressEvent)="setCustomerAddress($  event)"></app-address-list> <mat-divider ngIf="showAddresses"></mat-divider> <app-address [showTitle]="showAddresses" buttonText="PROCEED TO NEXT STEP" checkboxText="Ship to the same address" (isCheckboxChecked)="setSameShippingAddressAsBilling($  event)" (createAddress)="updateBillingAddress($  event)"></app-address>

@UntilDestroy({ checkProperties: true }) @Component({   selector: 'app-shipping-address',   templateUrl: './shipping-address.component.html',   styleUrls: ['./shipping-address.component.css'] }) export class ShippingAddressComponent implements OnInit {   showAddresses: boolean = false;   sameBillingAddressAsShipping: boolean = false;   selectedCustomerAddressId: string = '';    constructor(     private addresses: AddressService,     private snackBar: MatSnackBar,     private session: SessionService,     private orders: OrderService,     private cart: CartService,     private router: Router,     private customerAddresses: CustomerAddressService) { }    ngOnInit() {     this.session.loggedInStatus       .subscribe(         status => this.showAddresses = status       );   }    updateShippingAddress(address: Address) {     if (this.showAddresses && this.selectedCustomerAddressId) {       this.cloneAddress();     } else if (address.firstName && address.lastName && address.line1 && address.city && address.zipCode && address.stateCode && address.countryCode && address.phone) {       this.createAddress(address);     }     else {       this.snackBar.open('Check your address. Some fields are missing.', 'Close');     }   }    setCustomerAddress(customerAddressId: string) {     this.selectedCustomerAddressId = customerAddressId;   }    setSameBillingAddressAsShipping(change: boolean) {     this.sameBillingAddressAsShipping = change;   }    private createAddress(address: Address) {     this.addresses.createAddress(address)       .pipe(         concatMap(           address => {             const update = this.updateOrderObservable({               id: this.cart.orderId,               shippingAddressId: address.id             }, [UpdateOrderParams.shippingAddress]);              if (this.showAddresses) {               return combineLatest([update, this.customerAddresses.createCustomerAddress(address.id || '', '')]);             } else {               return update;             }           }))       .subscribe(         () => this.showSuccessSnackBar(),         err => this.showErrorSnackBar()       );   }    private cloneAddress() {     this.updateOrderObservable({       id: this.cart.orderId,       shippingAddressCloneId: this.selectedCustomerAddressId     }, [UpdateOrderParams.shippingAddressClone])       .subscribe(         () => this.showSuccessSnackBar(),         err => this.showErrorSnackBar()       );   }    private updateOrderObservable(order: Order, updateParams: UpdateOrderParams[]): Observable<any> {     return iif(() => this.sameBillingAddressAsShipping,       concat([         this.orders.updateOrder(order, updateParams),         this.orders.updateOrder(order, [UpdateOrderParams.billingAddressSameAsShipping])       ]),       this.orders.updateOrder(order, updateParams)     );   }    private showErrorSnackBar() {     this.snackBar.open('There was a problem creating your address.', 'Close', { duration: 8000 });   }    private showSuccessSnackBar() {     this.snackBar.open('Shipping address successfully added. Redirecting...', 'Close', { duration: 3000 });      setTimeout(() => this.router.navigateByUrl('/shipping-methods'), 4000);   } }

<app-title no="3" title="Shipping Address" subtitle="Address to ship package to"></app-title> <app-address-list ngIf="showAddresses" (setAddressEvent)="setCustomerAddress($  event)"></app-address-list> <mat-divider ngIf="showAddresses"></mat-divider> <app-address [showTitle]="showAddresses" buttonText="PROCEED TO SHIPPING METHODS" checkboxText="Bill to the same address" (isCheckboxChecked)="setSameBillingAddressAsShipping($  event)" (createAddress)="updateShippingAddress($  event)"></app-address>

@UntilDestroy({ checkProperties: true }) @Component({   selector: 'app-shipping-methods',   templateUrl: './shipping-methods.component.html',   styleUrls: ['./shipping-methods.component.css'] }) export class ShippingMethodsComponent implements OnInit {   shipments: Shipment[] | undefined = [];   shipmentsForm: FormGroup = this.fb.group({});    constructor(     private orders: OrderService,     private dlts: DeliveryLeadTimeService,     private cart: CartService,     private router: Router,     private fb: FormBuilder,     private shipments: ShipmentService,     private snackBar: MatSnackBar   ) { }    ngOnInit() {     combineLatest([       this.orders.getOrder(this.cart.orderId, GetOrderParams.shipments),       this.dlts.getDeliveryLeadTimes()     ]).subscribe(       ([lineItems, deliveryLeadTimes]) => {         let li: LineItem;         let lt: DeliveryLeadTime[];          this.shipments = lineItems.shipments?.map((shipment) => {           if (shipment.id) {             this.shipmentsForm.addControl(shipment.id, new FormControl('', Validators.required));           }            if (shipment.lineItems) {             shipment.lineItems = shipment.lineItems.map(item => {               li = this.findItem(lineItems, item.skuCode || '');               item.imageUrl = li.imageUrl;               item.name = li.name;               return item;             });           }            if (shipment.availableShippingMethods) {             lt = this.findLocationLeadTime(deliveryLeadTimes, shipment);             shipment.availableShippingMethods = shipment.availableShippingMethods?.map(               method => {                 method.deliveryLeadTime = this.findMethodLeadTime(lt, method);                 return method;               });           }            return shipment;         });       },       err => this.router.navigateByUrl('/error')     );   }    setShipmentMethods() {     const shipmentsFormValue = this.shipmentsForm.value;      combineLatest(Object.keys(shipmentsFormValue).map(       key => this.shipments.updateShipment(key, shipmentsFormValue[key])     )).subscribe(       () => {         this.snackBar.open('Your shipments have been updated with a shipping method.', 'Close', { duration: 3000 });         setTimeout(() => this.router.navigateByUrl('/payment'), 4000);       },       err => this.snackBar.open('There was a problem adding shipping methods to your shipments.', 'Close', { duration: 5000 })     );   }     private findItem(lineItems: LineItem[], skuCode: string): LineItem {     return lineItems.filter((item) => item.skuCode == skuCode)[0];   }    private findLocationLeadTime(times: DeliveryLeadTime[], shipment: Shipment): DeliveryLeadTime[] {     return times.filter((dlTime) => dlTime?.stockLocation?.id == shipment?.stockLocation?.id);   }    private findMethodLeadTime(times: DeliveryLeadTime[], method: ShippingMethod): DeliveryLeadTime {     return times.filter((dlTime) => dlTime?.shippingMethod?.id == method?.id)[0];   } }

<form id="container" [formGroup]="shipmentsForm">     <app-title no="4" title="Shipping Methods" subtitle="How to ship your packages"></app-title>     <div class="shipment-container" ngFor="let shipment of shipments; let j = index; let isLast = last">         <h1>Shipment {{j+1}} of {{shipments?.length}}</h1>         <div class="row" ngFor="let item of shipment.lineItems">             <img class="image-xs" [src]="item.imageUrl" alt="product photo">             <div id="shipment-details">                 <h4 id="item-name">{{item.name}}</h4>                 <p>{{item.skuCode}}</p>             </div>             <div id="quantity-section">                 <p id="quantity-label">Quantity: </p>{{item.quantity}}             </div>         </div>         <mat-radio-group [formControlName]="shipment?.id || j">             <mat-radio-button ngFor="let method of shipment.availableShippingMethods" [value]="method.id">                 <div class="radio-button">                     <p>{{method.name}}</p>                     <div>                         <p class="radio-label">Cost:</p>                         <p> {{method.formattedPriceAmount}}</p>                     </div>                     <div>                         <p class="radio-label">Timeline:</p>                         <p> Available in {{method.deliveryLeadTime?.minDays}}-{{method.deliveryLeadTime?.maxDays}} days</p>                     </div>                 </div>             </mat-radio-button>         </mat-radio-group>         <mat-divider ngIf="!isLast"></mat-divider>     </div>     <button mat-flat-button color="primary" [disabled]="shipmentsForm.invalid" (click)="setShipmentMethods()">PROCEED TO PAYMENT</button> </form>

@UntilDestroy({ checkProperties: true }) @Component({   selector: 'app-payment',   templateUrl: './payment.component.html',   styleUrls: ['./payment.component.css'] }) export class PaymentComponent implements OnInit {   approvalUrl: string = '';    constructor(     private orders: OrderService,     private cart: CartService,     private router: Router,     private payments: PaypalPaymentService   ) { }    ngOnInit() {     const orderId = this.cart.orderId;      this.orders.getOrder(orderId, GetOrderParams.paymentSource)       .pipe(         concatMap((order: Order) => {           const paymentSourceId = order.paymentSource?.id;            const paymentMethod = order.availablePaymentMethods?.filter(             (method) => method.paymentSourceType == 'paypal_payments'           )[0];            return iif(             () => paymentSourceId ? true : false,             this.payments.getPaypalPayment(paymentSourceId || ''),             this.orders.updateOrder({               id: orderId,               paymentMethodId: paymentMethod?.id             }, [UpdateOrderParams.paymentMethod])               .pipe(concatMap(                 order => this.payments.createPaypalPayment({                   orderId: orderId,                   cancelUrl: $  {environment.clientUrl}/cancel-payment,                   returnUrl: $  {environment.clientUrl}/place-order                 })               ))           );         }))       .subscribe(         paypalPayment => this.approvalUrl = paypalPayment?.approvalUrl || '',         err => this.router.navigateByUrl('/error')       );   }    navigateToPaypal() {     window.location.href = this.approvalUrl;   } }

<app-simple-page number="5" title="Payment" subtitle="Pay for your order" buttonText="PROCEED TO PAY WITH PAYPAL" icon="point_of_sale" (buttonEvent)="navigateToPaypal()" [buttonDisabled]="approvalUrl.length ? false : true"></app-simple-page>

<app-simple-page title="Payment cancelled" subtitle="Your Paypal payment has been cancelled" icon="money_off" buttonText="GO TO HOME" [centerText]="true" route="/"></app-simple-page>

@UntilDestroy({ checkProperties: true }) @Component({   selector: 'app-place-order',   templateUrl: './place-order.component.html',   styleUrls: ['./place-order.component.css'] }) export class PlaceOrderComponent implements OnInit {   disableButton = true;    constructor(     private route: ActivatedRoute,     private router: Router,     private payments: PaypalPaymentService,     private orders: OrderService,     private cart: CartService,     private snackBar: MatSnackBar   ) { }    ngOnInit() {     this.route.queryParams       .pipe(         concatMap(params => {           const payerId = params['PayerID'];           const orderId = this.cart.orderId;            return iif(             () => payerId.length > 0,             this.orders.getOrder(orderId, GetOrderParams.paymentSource)               .pipe(                 concatMap(order => {                   const paymentSourceId = order.paymentSource?.id || '';                    return iif(                     () => paymentSourceId ? paymentSourceId.length > 0 : false,                     this.payments.updatePaypalPayment(paymentSourceId, payerId)                   );                 })               )           );         }))       .subscribe(         () => this.disableButton = false,         () => this.router.navigateByUrl('/error')       );   }    placeOrder() {     this.disableButton = true;      this.orders.updateOrder({       id: this.cart.orderId,       place: true     }, [UpdateOrderParams.place])       .subscribe(         () => {           this.snackBar.open('Your order has been successfully placed.', 'Close', { duration: 3000 });           this.cart.clearCart();           setTimeout(() => this.router.navigateByUrl('/'), 4000);         },         () => {           this.snackBar.open('There was a problem placing your order.', 'Close', { duration: 8000 });           this.disableButton = false;         }       );   } }

<app-simple-page title="Finalize Order" subtitle="Complete your order" [number]="'6'" icon="shopping_bag" buttonText="PLACE YOUR ORDER" (buttonEvent)="placeOrder()" [buttonDisabled]="disableButton"></app-simple-page>

@NgModule({   declarations: [     AppComponent   ],   imports: [     BrowserModule,     AppRoutingModule,     HttpClientModule,     BrowserAnimationsModule,     AuthModule,     ProductsModule,     CartModule,     CheckoutModule,     CoreModule   ],   providers: [     {       provide: HTTP_INTERCEPTORS,       useClass: OptionsInterceptor,       multi: true     },     {       provide: APP_INITIALIZER,       useFactory: (http: HttpClient) => () => http.post<object>(         $  {environment.apiUrl}/oauth/token,         { 'grantType': 'client_credentials' },         { withCredentials: true }),       multi: true,       deps: [HttpClient]     }   ],   bootstrap: [AppComponent] }) export class AppModule { }

@NgModule({   declarations: [SimplePageComponent, TitleComponent, WordWrapPipe, ItemQuantityComponent],   imports: [CommonModule, MatIconModule, MatButtonModule, MatTooltipModule, MatMenuModule, RouterModule],   exports: [     CommonModule,     ItemQuantityComponent,     MatButtonModule,     MatIconModule,     MatSnackBarModule,     MatTooltipModule,     SimplePageComponent,     TitleComponent,     WordWrapPipe   ] }) export class SharedModule { }

<button mat-stroked-button [matMenuTriggerFor]="menu" [disabled]="disabled">     {{quantity}}     <mat-icon ngIf="!disabled">expand_more</mat-icon> </button> <mat-menu #menu="matMenu">     <button ngFor="let no of values" (click)="setQuantity(no)" mat-menu-item>{{no}}</button> </mat-menu>

<div id="container">     <app-title no="{{number}}" title="{How To Build An E-Commerce Site With Angular 11, Commerce Layer And Paypal}" subtitle="{{subtitle}}" [centerText]="centerText"></app-title>     <div *ngIf="icon" id="icon-container">         <mat-icon color="primary" class="icon">{{icon}}</mat-icon>     </div>     <button mat-flat-button color="primary" (click)="buttonClicked()" [disabled]="buttonDisabled">         {{buttonText}}     </button> </div>

@Injectable({   providedIn: 'root' }) export class HttpErrorHandler {    constructor() { }    handleError(err: HttpErrorResponse): Observable {     let displayMessage = '';      if (err.error instanceof ErrorEvent) {       displayMessage = Client-side error: $  {err.error.message};     } else {       displayMessage = Server-side error: $  {err.message};     }      return throwError(displayMessage);   } }

@Injectable({   providedIn: 'root' }) export class AddressService {   private url: string = $  {environment.apiUrl}/api/addresses;    constructor(private http: HttpClient, private eh: HttpErrorHandler) { }    createAddress(address: Address): Observable<Address> {     return this.http.post<Address>(this.url, address)       .pipe(catchError(this.eh.handleError));   }    getAddress(id: string): Observable<Address> {     return this.http.get<Address>($  {this.url}/$  {id})       .pipe(catchError(this.eh.handleError));   } }

@Injectable({   providedIn: 'root' }) export class CartService {   private cart = new BehaviorSubject({     orderId: this.orderId,     itemCount: this.itemCount   });    cartValue$   = this.cart.asObservable();    constructor(private storage: LocalStorageService) { }    get orderId(): string {     const id = this.storage.getItem('order-id');     return id ? id : '';   }    set orderId(id: string) {     this.storage.addItem('order-id', id);     this.cart.next({ orderId: id, itemCount: this.itemCount });   }    get itemCount(): number {     const itemCount = this.storage.getItem('item-count');      return itemCount ? parseInt(itemCount) : 0;   }    set itemCount(amount: number) {     this.storage.addItem('item-count', amount.toString());     this.cart.next({ orderId: this.orderId, itemCount: amount });   }    incrementItemCount(amount: number) {     this.itemCount = this.itemCount + amount;   }    decrementItemCount(amount: number) {     this.itemCount = this.itemCount - amount;   }    clearCart() {     this.storage.deleteItem('item-count');     this.cart.next({ orderId: '', itemCount: 0 });   } }

@Injectable({   providedIn: 'root' }) export class CountryService {    constructor(private http: HttpClient) { }    getCountries(): Observable<Country[]> {     return this.http.get<Country[]>('./../../../assets/json/country-codes.json');   } }

@Injectable({   providedIn: 'root' }) export class CustomerAddressService {   private url: string = $  {environment.apiUrl}/api/customer_addresses;    constructor(private http: HttpClient, private eh: HttpErrorHandler) { }    createCustomerAddress(addressId: string, customerId: string): Observable<CustomerAddress> {     return this.http.post<CustomerAddress>(this.url, {       addressId: addressId, customerId: customerId     })       .pipe(catchError(this.eh.handleError));   }    getCustomerAddresses(): Observable<CustomerAddress[]> {     return this.http.get<CustomerAddress[]>($  {this.url})       .pipe(catchError(this.eh.handleError));   }    getCustomerAddress(id: string): Observable<CustomerAddress> {     return this.http.get<CustomerAddress>($  {this.url}/$  {id})       .pipe(catchError(this.eh.handleError));   } }

@Injectable({   providedIn: 'root' }) export class CustomerService {   private url: string = $  {environment.apiUrl}/api/customers;    constructor(private http: HttpClient, private eh: HttpErrorHandler) { }    createCustomer(email: string, password: string, firstName: string, lastName: string): Observable<Customer> {     return this.http.post<Customer>(this.url, {       email: email,       password: password,       firstName: firstName,       lastName: lastName     })       .pipe(catchError(this.eh.handleError));   }    getCurrentCustomer(): Observable<Customer> {     return this.http.get<Customer>($  {this.url}/current)       .pipe(catchError(this.eh.handleError));   }    getCustomer(id: string): Observable<Customer> {     return this.http.get<Customer>($  {this.url}/$  {id})       .pipe(catchError(this.eh.handleError));   } }

@Injectable({   providedIn: 'root' }) export class DeliveryLeadTimeService {   private url: string = $  {environment.apiUrl}/api/delivery_lead_times;    constructor(private http: HttpClient, private eh: HttpErrorHandler) { }    getDeliveryLeadTimes(): Observable<DeliveryLeadTime[]> {     return this.http.get<DeliveryLeadTime[]>(this.url)       .pipe(catchError(this.eh.handleError));   } }

@Injectable({   providedIn: 'root' }) export class LineItemService {   private url: string = $  {environment.apiUrl}/api/line_items;    constructor(private http: HttpClient, private eh: HttpErrorHandler) { }    createLineItem(lineItem: LineItem): Observable<LineItem> {     return this.http.post<LineItem>(this.url, lineItem)       .pipe(catchError(this.eh.handleError));   }    getLineItem(id: string): Observable<LineItem> {     return this.http.get<LineItem>($  {this.url}/$  {id})       .pipe(catchError(this.eh.handleError));   }    updateLineItem(id: string, quantity: number): Observable<LineItem> {     return this.http.patch<LineItem>($  {this.url}/$  {id}, { quantity: quantity })       .pipe(catchError(this.eh.handleError));   }    deleteLineItem(id: string): Observable<LineItem> {     return this.http.delete<LineItem>($  {this.url}/$  {id})       .pipe(catchError(this.eh.handleError));   } }

@Injectable({   providedIn: 'root' }) export class OrderService {   private url: string = $  {environment.apiUrl}/api/orders;    constructor(     private http: HttpClient,     private eh: HttpErrorHandler) { }    createOrder(): Observable<Order> {     return this.http.post<Order>(this.url, {})       .pipe(catchError(this.eh.handleError));   }    getOrder(id: string, orderParam: GetOrderParams): Observable<Order> {     let params = {};     if (orderParam != GetOrderParams.none) {       params = { [orderParam]: 'true' };     }      return this.http.get<Order>($  {this.url}/$  {id}, { params: params })       .pipe(catchError(this.eh.handleError));   }    updateOrder(order: Order, params: UpdateOrderParams[]): Observable<Order> {     let updateParams = [];     for (const param of params) {       updateParams.push(param.toString());     }      return this.http.patch<Order>(       $  {this.url}/$  {order.id},       order,       { params: { 'field': updateParams } }     )       .pipe(catchError(this.eh.handleError));   }    getOrderShipments(id: string): Observable<Shipment[]> {     return this.http.get<Shipment[]>($  {this.url}/$  {id}/shipments)       .pipe(catchError(this.eh.handleError));   } }

@Injectable({   providedIn: 'root' }) export class PaypalPaymentService {   private url: string = $  {environment.apiUrl}/api/paypal_payments;    constructor(private http: HttpClient, private eh: HttpErrorHandler) { }    createPaypalPayment(payment: PaypalPayment): Observable<PaypalPayment> {     return this.http.post<PaypalPayment>(this.url, payment)       .pipe(catchError(this.eh.handleError));   }    getPaypalPayment(id: string): Observable<PaypalPayment> {     return this.http.get<PaypalPayment>($  {this.url}/$  {id})       .pipe(catchError(this.eh.handleError));   }    updatePaypalPayment(id: string, paypalPayerId: string): Observable<PaypalPayment> {     return this.http.patch<PaypalPayment>(       $  {this.url}/$  {id},       { paypalPayerId: paypalPayerId }     )       .pipe(catchError(this.eh.handleError));   } }

@Injectable({   providedIn: 'root' }) export class ShipmentService {   private url: string = $  {environment.apiUrl}/api/shipments;    constructor(private http: HttpClient, private eh: HttpErrorHandler) { }    getShipment(id: string): Observable<Shipment> {     return this.http.get<Shipment>($  {this.url}/$  {id})       .pipe(catchError(this.eh.handleError));   }    updateShipment(id: string, shippingMethodId: string): Observable<Shipment> {     return this.http.patch<Shipment>(       $  {this.url}/$  {id},       { shippingMethodId: shippingMethodId }     )       .pipe(catchError(this.eh.handleError));   } }

@Injectable({   providedIn: 'root' }) export class SkuService {   private url: string = $  {environment.apiUrl}/api/skus;    constructor(private http: HttpClient, private eh: HttpErrorHandler) { }    getSku(id: string): Observable<Sku> {     return this.http.get<Sku>($  {this.url}/$  {id})       .pipe(catchError(this.eh.handleError));   }    getSkus(page: number, pageSize: number): Observable<Sku[]> {     return this.http.get<Sku[]>(       this.url,       {         params: {           'page': page.toString(),           'pageSize': pageSize.toString()         }       })       .pipe(catchError(this.eh.handleError));   } }

ng g m core ng g g core/guards/empty-cart ng g s core/header/header ng g interceptor core/interceptors/options for comp in header error not-found; do ng g c "core/$  {comp}"; done for serv in authentication session; do ng g s "core/authentication/$  {serv}"; done

@NgModule({   declarations: [HeaderComponent, NotFoundComponent, ErrorComponent],   imports: [     RouterModule.forChild([       { path: '404', component: NotFoundComponent },       { path: 'error', component: ErrorComponent },       { path: '**', redirectTo: '/404' }     ]),     MatBadgeModule,     SharedModule   ],   exports: [HeaderComponent] }) export class CoreModule { }

@Injectable({   providedIn: 'root' }) export class AuthenticationService {   private url: string = $  {environment.apiUrl}/oauth/token;    constructor(private http: HttpClient, private eh: HttpErrorHandler) { }    getClientSession(): Observable<object> {     return this.http.post<object>(       this.url,       { grantType: 'client_credentials' })       .pipe(catchError(this.eh.handleError));   }    login(email: string, password: string): Observable<object> {     return this.http.post<object>(       this.url,       { username: email, password: password, grantType: 'password' })       .pipe(catchError(this.eh.handleError));   } }

@Injectable({   providedIn: 'root' }) export class SessionService {   private url: string = $  {environment.apiUrl}/session;   private isLoggedIn = new BehaviorSubject(false);    loggedInStatus = this.isLoggedIn.asObservable();    constructor(private http: HttpClient, private eh: HttpErrorHandler) { }    setLoggedInStatus(status: boolean) {     this.isLoggedIn.next(status);   }    isCustomerLoggedIn(): Observable<{ message: string }> {     return this.http.get<{ message: string }>($  {this.url}/customer/status)       .pipe(catchError(this.eh.handleError));   }    logout(): Observable<{ message: string }> {     return this.http.get<{ message: string }>($  {this.url}/destroy)       .pipe(catchError(this.eh.handleError));   } }

@Injectable({   providedIn: 'root' }) export class HeaderService {   private headerButtonsVisibility = new BehaviorSubject(true);    showHeaderButtons = this.headerButtonsVisibility.asObservable();    constructor() { }    setHeaderButtonsVisibility(visible: boolean) {     this.headerButtonsVisibility.next(visible);   } }

<app-simple-page title="An error occurred" subtitle="There was a problem fetching your page" buttonText="GO TO HOME" icon="report" [centerText]="true" route="/"> </app-simple-page>

<app-simple-page title="404: Page not found" buttonText="GO TO HOME" icon="search" subtitle="The requested page could not be found" [centerText]="true" route="/"></app-simple-page>

@UntilDestroy({ checkProperties: true }) @Component({   selector: 'app-header',   templateUrl: './header.component.html',   styleUrls: ['./header.component.css'] }) export class HeaderComponent implements OnInit {   cartAmount: number = 0;   isLoggedIn: boolean = false;   showButtons: boolean = true;    constructor(     private session: SessionService,     private snackBar: MatSnackBar,     private cart: CartService,     private header: HeaderService,     private auth: AuthenticationService   ) { }    ngOnInit() {     this.session.isCustomerLoggedIn()       .subscribe(         () => {           this.isLoggedIn = true;           this.session.setLoggedInStatus(true);         }       );      this.session.loggedInStatus.subscribe(status => this.isLoggedIn = status);      this.header.showHeaderButtons.subscribe(visible => this.showButtons = visible);      this.cart.cartValue$  .subscribe(cart => this.cartAmount = cart.itemCount);   }    logout() {     concat(       this.session.logout(),       this.auth.getClientSession()     ).subscribe(       () => {         this.snackBar.open('You have been logged out.', 'Close', { duration: 4000 });         this.session.setLoggedInStatus(false);       },       err => this.snackBar.open('There was a problem logging you out.', 'Close', { duration: 4000 })     );   } }

<div id="header-container">     <div id="left-half" routerLink="/">         <h1><span id="lime-text">Lime</span><span id="store-text">Store</span></h1>     </div>     <div id="right-half">         <div id="button-container" ngIf="showButtons">             <button mat-icon-button color="primary" aria-label="shopping cart">                 <mat-icon [matBadge]="cartAmount" matBadgeColor="accent" aria-label="shopping cart" routerLink="/cart">shopping_cart</mat-icon>             </button>             <button mat-icon-button color="primary" aria-label="login" ngIf="!isLoggedIn">                 <mat-icon aria-label="login" matTooltip="login" routerLink="/login">login</mat-icon>             </button>             <button mat-icon-button color="primary" aria-label="logout" *ngIf="isLoggedIn" (click)="logout()">                 <mat-icon aria-label="logout" matTooltip="logout">logout</mat-icon>             </button>         </div>     </div> </div>

@Injectable({   providedIn: 'root' }) export class EmptyCartGuard implements CanActivate {   constructor(private cart: CartService, private router: Router) { }    canActivate(     route: ActivatedRouteSnapshot,     state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {     if (this.cart.orderId) {       if (this.cart.itemCount > 0) {         return true;       }     }      return this.router.parseUrl('/empty');   } }

@Injectable() export class OptionsInterceptor implements HttpInterceptor {    constructor() { }    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {     request = request.clone({       headers: request.headers.set('Content-Type', 'application/json'),       withCredentials: true     });      return next.handle(request);   } }

@UntilDestroy({ checkProperties: true }) @Component({   selector: 'app-product-list',   templateUrl: './product-list.component.html',   styleUrls: ['./product-list.component.css'] }) export class ProductListComponent implements OnInit {   cols = 4;   length = 0;   pageIndex = 0;   pageSize = 20;   pageSizeOptions: number[] = [5, 10, 20];    pageEvent!: PageEvent | void;    products: Sku[] = [];    constructor(     private breakpointObserver: BreakpointObserver,     private skus: SkuService,     private router: Router,     private header: HeaderService) { }    ngOnInit() {     this.getProducts(1, 20);     this.header.setHeaderButtonsVisibility(true);      this.breakpointObserver.observe([       Breakpoints.Handset,       Breakpoints.Tablet,       Breakpoints.Web     ]).subscribe(result => {       if (result.matches) {         if (result.breakpoints['(max-width: 599.98px) and (orientation: portrait)'] || result.breakpoints['(max-width: 599.98px) and (orientation: landscape)']) {           this.cols = 1;         }         else if (result.breakpoints['(min-width: 1280px) and (orientation: portrait)'] || result.breakpoints['(min-width: 1280px) and (orientation: landscape)']) {           this.cols = 4;         } else {           this.cols = 3;         }       }     });   }    private getProducts(page: number, pageSize: number) {     this.skus.getSkus(page, pageSize)       .subscribe(         skus => {           this.products = skus;           this.length = skus[0].__collectionMeta.recordCount;         },         err => this.router.navigateByUrl('/error')       );   }    getNextPage(event: PageEvent) {     this.getProducts(event.pageIndex + 1, event.pageSize);   }    trackSkus(index: number, item: Sku) {     return $  {item.id}-$  {index};   } }

<mat-grid-list cols="{{cols}}" rowHeight="400px" gutterSize="20px" class="grid-layout">     <mat-grid-tile *ngFor="let product of products; trackBy: trackSkus">         <mat-card>             <img id="card-image" mat-card-image src="{{product.imageUrl}}" alt="product photo">             <mat-card-content>                 <mat-card-title matTooltip="{{product.name}}">{{product.name |wordWrap:35}}</mat-card-title>                 <mat-card-subtitle>{{product.prices[0].compareAtAmountFloat | currency:'EUR'}}</mat-card-subtitle>             </mat-card-content>             <mat-card-actions>                 <button mat-flat-button color="primary" [routerLink]="['/product', product.id]">                     View                 </button>             </mat-card-actions>         </mat-card>     </mat-grid-tile> </mat-grid-list> <mat-paginator [length]="length" [pageIndex]="pageIndex" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" (page)="pageEvent = getNextPage($  event)"> </mat-paginator>

@UntilDestroy({ checkProperties: true }) @Component({   selector: 'app-product',   templateUrl: './product.component.html',   styleUrls: ['./product.component.css'] }) export class ProductComponent implements OnInit {   id: string = '';   product!: Sku;   quantity: number = 0;    constructor(     private route: ActivatedRoute,     private skus: SkuService,     private location: Location,     private router: Router,     private header: HeaderService,     private orders: OrderService,     private lineItems: LineItemService,     private cart: CartService,     private snackBar: MatSnackBar   ) { }    ngOnInit() {     this.route.paramMap       .pipe(         mergeMap(params => {           const id = params.get('id')           this.id = id ? id : '';            return this.skus.getSku(this.id);         }),         tap((sku) => {           this.product = sku;         })       ).subscribe({         error: (err) => this.router.navigateByUrl('/error')       });      this.header.setHeaderButtonsVisibility(true);   }    addItemToCart() {     if (this.quantity > 0) {       if (this.cart.orderId == '') {         this.orders.createOrder()           .pipe(             mergeMap((order: Order) => {               this.cart.orderId = order.id || '';                return this.lineItems.createLineItem({                 orderId: order.id,                 name: this.product.name,                 imageUrl: this.product.imageUrl,                 quantity: this.quantity,                 skuCode: this.product.code               });             })           )           .subscribe(             () => {               this.cart.incrementItemCount(this.quantity);               this.showSuccessSnackBar();             },             err => this.showErrorSnackBar()           );       } else {         this.lineItems.createLineItem({           orderId: this.cart.orderId,           name: this.product.name,           imageUrl: this.product.imageUrl,           quantity: this.quantity,           skuCode: this.product.code         }).subscribe(           () => {             this.cart.incrementItemCount(this.quantity);             this.showSuccessSnackBar();           },           err => this.showErrorSnackBar()         );       }     } else {       this.snackBar.open('Select a quantity greater than 0.', 'Close', { duration: 8000 });     }   }    setQuantity(no: number) {     this.quantity = no;   }    goBack() {     this.location.back();   }    private showSuccessSnackBar() {     this.snackBar.open('Item successfully added to cart.', 'Close', { duration: 8000 });   }    private showErrorSnackBar() {     this.snackBar.open('Failed to add your item to the cart.', 'Close', { duration: 8000 });   } }

<div id="container">     <mat-card *ngIf="product" class="product-card">         <img mat-card-image src="{{product.imageUrl}}" alt="Photo of a product">         <mat-card-content>             <mat-card-title>{{product.name}}</mat-card-title>             <mat-card-subtitle>{{product.prices[0].compareAtAmountFloat | currency:'EUR'}}</mat-card-subtitle>             <p>                 {{product.description}}             </p>         </mat-card-content>         <mat-card-actions>             <app-item-quantity [quantity]="quantity" [maxValue]="10" (setQuantityEvent)="setQuantity($  event)"></app-item-quantity>             <button mat-raised-button color="accent" (click)="addItemToCart()">                 <mat-icon>add_shopping_cart</mat-icon>                 Add to cart             </button>             <button mat-raised-button color="primary" (click)="goBack()">                 <mat-icon>storefront</mat-icon>                 Continue shopping             </button>         </mat-card-actions>     </mat-card> </div>

@UntilDestroy({ checkProperties: true }) @Component({   selector: 'app-signup',   templateUrl: './signup.component.html',   styleUrls: ['./signup.component.css'] }) export class SignupComponent implements OnInit {   signupForm = this.fb.group({     firstName: ['', Validators.required],     lastName: ['', Validators.required],     email: ['', [Validators.required, Validators.email]],     password: ['', [Validators.required, Validators.minLength(8)]],     confirmedPassword: ['', [Validators.required]]   }, { validators: this.matchPasswords });    @ViewChild(FormGroupDirective) sufDirective: FormGroupDirective | undefined;    constructor(     private customer: CustomerService,     private fb: FormBuilder,     private snackBar: MatSnackBar,     private router: Router,     private header: HeaderService   ) { }    ngOnInit() {     this.header.setHeaderButtonsVisibility(false);   }    matchPasswords(signupGroup: AbstractControl): ValidationErrors | null {     const password = signupGroup.get('password')?.value;     const confirmedPassword = signupGroup.get('confirmedPassword')?.value;      return password == confirmedPassword ? null : { differentPasswords: true };   }    get password() { return this.signupForm.get('password'); }    get confirmedPassword() { return this.signupForm.get('confirmedPassword'); }    signup() {     const customer = this.signupForm.value;      this.customer.createCustomer(       customer.email,       customer.password,       customer.firstName,       customer.lastName     ).subscribe(       () => {         this.signupForm.reset();         this.sufDirective?.resetForm();          this.snackBar.open('Account successfully created. You will be redirected in 5 seconds.', 'Close', { duration: 5000 });          setTimeout(() => this.router.navigateByUrl('/'), 6000);       },       err => this.snackBar.open('There was a problem creating your account.', 'Close', { duration: 5000 })     );   } }

<form id="container" [formGroup]="signupForm" (ngSubmit)="signup()">     <h1 class="mat-display-3">Create Account</h1>     <mat-form-field appearance="outline">         <mat-label>First Name</mat-label>         <input matInput formControlName="firstName">         <mat-icon matPrefix>portrait</mat-icon>     </mat-form-field>     <mat-form-field appearance="outline">         <mat-label>Last Name</mat-label>         <input matInput formControlName="lastName">         <mat-icon matPrefix>portrait</mat-icon>     </mat-form-field>     <mat-form-field appearance="outline">         <mat-label>Email</mat-label>         <input matInput formControlName="email" type="email">         <mat-icon matPrefix>alternate_email</mat-icon>     </mat-form-field>     <mat-form-field appearance="outline">         <mat-label>Password</mat-label>         <input matInput formControlName="password" type="password">         <mat-icon matPrefix>vpn_key</mat-icon>     </mat-form-field>     <mat-form-field appearance="outline">         <mat-label>Confirm Password</mat-label>         <input matInput formControlName="confirmedPassword" type="password">         <mat-icon matPrefix>vpn_key</mat-icon>     </mat-form-field>     <div ngIf="confirmedPassword?.invalid && (confirmedPassword?.dirty || confirmedPassword?.touched)">         <mat-error ngIf="signupForm.hasError('differentPasswords')">             Your passwords do not match.         </mat-error>     </div>     <div ngIf="password?.invalid && (password?.dirty || password?.touched)">         <mat-error ngIf="password?.hasError('minlength')">             Your password should be at least 8 characters.         </mat-error>     </div>     <button mat-flat-button color="primary" [disabled]="!signupForm.valid">Sign Up</button> </form>

<form id="container" [formGroup]="loginForm" (ngSubmit)="login()">     <h1 class="mat-display-3">Login</h1>     <mat-form-field appearance="outline">         <mat-label>Email</mat-label>         <input matInput type="email" formControlName="email" required>         <mat-icon matPrefix>alternate_email</mat-icon>     </mat-form-field>     <mat-form-field appearance="outline">         <mat-label>Password</mat-label>         <input matInput type="password" formControlName="password" required>         <mat-icon matPrefix>vpn_key</mat-icon>     </mat-form-field>     <button mat-flat-button color="primary" [disabled]="!loginForm.valid">Login</button>     <p id="newAccount" class="mat-h3">Not registered yet? <a id="newAccountLink" routerLink="/signup">Create an account.</a></p> </form>

@NgModule({   declarations: [SummaryComponent, CodesComponent, EmptyComponent],   imports: [     RouterModule.forChild([       {         path: '', canActivate: [EmptyCartGuard], children: [           { path: 'cart', component: SummaryComponent },           { path: 'codes', component: CodesComponent }         ]       },       { path: 'empty', component: EmptyComponent }     ]),     MatDividerModule,     MatFormFieldModule,     MatInputModule,     MatMenuModule,     ReactiveFormsModule,     SharedModule   ] }) export class CartModule { }

@UntilDestroy({ checkProperties: true }) @Component({   selector: 'app-codes',   templateUrl: './codes.component.html',   styleUrls: ['./codes.component.css'] }) export class CodesComponent {   couponCode = new FormControl('');   giftCardCode = new FormControl('');    @ViewChild(FormControlDirective) codesDirective: FormControlDirective | undefined;    constructor(     private cart: CartService,     private order: OrderService,     private snackBar: MatSnackBar   ) { }    private updateOrder(order: Order, params: UpdateOrderParams[], codeType: string) {     this.order.updateOrder(order, params)       .subscribe(         () => {           this.snackBar.open(Successfully added $  {codeType} code., 'Close', { duration: 8000 });           this.couponCode.reset();           this.giftCardCode.reset();           this.codesDirective?.reset();         },         err => this.snackBar.open(There was a problem adding your $  {codeType} code., 'Close', { duration: 8000 })       );   }    addCoupon() {     this.updateOrder({ id: this.cart.orderId, couponCode: this.couponCode.value }, [UpdateOrderParams.couponCode], 'coupon');   }    addGiftCard() {     this.updateOrder({ id: this.cart.orderId, giftCardCode: this.giftCardCode.value }, [UpdateOrderParams.giftCardCode], 'gift card');   }  }

<div id="container">     <app-title title="Redeem a code" subtitle="Enter a coupon code or gift card" [centerText]="true"></app-title>     <div class="input-row">         <mat-form-field appearance="outline">             <mat-label>Coupon Code</mat-label>             <input matInput [formControl]="couponCode" required>             <mat-icon matPrefix>card_giftcard</mat-icon>         </mat-form-field>         <button class="redeem" mat-flat-button color="accent" [disabled]="couponCode.invalid" (click)="addCoupon()">Redeem</button>     </div>     <div class="input-row">         <mat-form-field appearance="outline">             <mat-label>Gift Card Code</mat-label>             <input matInput [formControl]="giftCardCode" required>             <mat-icon matPrefix>redeem</mat-icon>         </mat-form-field>         <button class="redeem" mat-flat-button color="accent" [disabled]="giftCardCode.invalid" (click)="addGiftCard()">Redeem</button>     </div>     <button color="primary" mat-flat-button routerLink="/cart">         <mat-icon>shopping_cart</mat-icon>         CONTINUE TO CART     </button> </div>

<app-simple-page title="Your cart is empty" subtitle="There is currently nothing in your cart. Head to the home page to add items." buttonText="GO TO HOME PAGE" icon="shopping_basket" [centerText]="true" route="/"> </app-simple-page>

@UntilDestroy({ checkProperties: true }) @Component({   selector: 'app-summary',   templateUrl: './summary.component.html',   styleUrls: ['./summary.component.css'] }) export class SummaryComponent implements OnInit {   order: Order = {};    summary: { name: string, amount: string | undefined, id: string }[] = [];    constructor(     private orders: OrderService,     private lineItems: LineItemService,     private cart: CartService,     private snackBar: MatSnackBar,     private router: Router   ) { }    ngOnInit() {     this.orders.getOrder(this.cart.orderId, GetOrderParams.cart)       .subscribe(         order => this.processOrder(order),         err => this.showOrderError('retrieving your cart')       );   }    private processOrder(order: Order) {     this.order = order;      this.summary = [       { name: 'Subtotal', amount: order.formattedSubtotalAmount, id: 'subtotal' },       { name: 'Discount', amount: order.formattedDiscountAmount, id: 'discount' },       { name: 'Taxes (included)', amount: order.formattedTotalTaxAmount, id: 'taxes' },       { name: 'Shipping', amount: order.formattedShippingAmount, id: 'shipping' },       { name: 'Gift Card', amount: order.formattedGiftCardAmount, id: 'gift-card' }     ];   }    private showOrderError(msg: string) {     this.snackBar.open(There was a problem $  {msg}., 'Close', { duration: 8000 });   }    checkout() {     this.router.navigateByUrl('/customer');   }    deleteLineItem(id: string) {     this.lineItems.deleteLineItem(id)       .pipe(         mergeMap(() => this.orders.getOrder(this.cart.orderId, GetOrderParams.cart))       ).subscribe(         order => {           this.processOrder(order);           this.cart.itemCount = order.skusCount || this.cart.itemCount;           this.snackBar.open(Item successfully removed from cart., 'Close', { duration: 8000 })         },         err => this.showOrderError('deleting your order')       );   } }

<div class="container" ngIf="order">     <h3 id="order-id">Order #{{order.number}} ({{order.skusCount}} items)</h3>     <div class="line-item" ngFor="let item of order.lineItems">         <div id="product-details">             <img ngIf="item.imageUrl" class="image-xs" src="{{item.imageUrl}}" alt="product photo">             <div ngIf="!item.imageUrl" class="image-xs no-image"></div>             <div id="line-details">                 <div>{{item.name}}</div>                 <div> {{item.formattedUnitAmount }} </div>             </div>         </div>         <div id="product-config">             <app-item-quantity [quantity]="item.quantity || 0" [disabled]="true"></app-item-quantity>             <div class="itemTotal"> {{item.formattedTotalAmount }} </div>             <button mat-icon-button color="warn" (click)="deleteLineItem(item.id || '')">                 <mat-icon>clear</mat-icon>         </button>         </div>     </div>     <mat-divider></mat-divider>     <div class="costSummary">         <div class="costItem" *ngFor="let item of summary" [id]="item.id">             <h3 class="costLabel">{{item.name}}</h3>             <p> {{item.amount }} </p>         </div>     </div>     <mat-divider></mat-divider>     <div class="costSummary">         <div class="costItem" id="total">             <h2 id="totalLabel">Total</h2>             <h2> {{order.formattedTotalAmountWithTaxes}} </h2>         </div>     </div>     <div id="checkout-button">         <button color="accent" mat-flat-button routerLink="/codes">         <mat-icon>redeem</mat-icon>         ADD GIFT CARD/COUPON     </button>         <button color="primary" mat-flat-button (click)="checkout()">         <mat-icon>point_of_sale</mat-icon>         CHECKOUT     </button>     </div> </div>

@NgModule({   declarations: [     CustomerComponent,     AddressComponent,     BillingAddressComponent,     ShippingAddressComponent,     ShippingMethodsComponent,     PaymentComponent,     PlaceOrderComponent,     AddressListComponent,     CountrySelectComponent,     CancelPaymentComponent   ],   imports: [     RouterModule.forChild([       {         path: '', canActivate: [EmptyCartGuard], children: [           { path: 'billing-address', component: BillingAddressComponent },           { path: 'cancel-payment', component: CancelPaymentComponent },           { path: 'customer', component: CustomerComponent },           { path: 'payment', component: PaymentComponent },           { path: 'place-order', component: PlaceOrderComponent },           { path: 'shipping-address', component: ShippingAddressComponent },           { path: 'shipping-methods', component: ShippingMethodsComponent }         ]       }     ]),     MatCardModule,     MatCheckboxModule,     MatDividerModule,     MatInputModule,     MatMenuModule,     MatRadioModule,     ReactiveFormsModule,     SharedModule   ] }) export class CheckoutModule { }

<button id="country-select" mat-stroked-button [matMenuTriggerFor]="countryMenu">     {{country}}     <mat-icon>expand_more</mat-icon> </button> <mat-menu #countryMenu="matMenu">     <button *ngFor="let cnt of countries" (click)="setCountry(cnt)" mat-menu-item>{{cnt.name}}</button> </mat-menu>

@Component({   selector: 'app-address',   templateUrl: './address.component.html',   styleUrls: ['./address.component.css'] }) export class AddressComponent {   @Input() buttonText: string = '';   @Input() showTitle?: boolean = false;    @Output() createAddress = new EventEmitter<Address>();    @Input() checkboxText: string = '';   @Output() isCheckboxChecked = new EventEmitter<boolean>();    countryCode: string = '';    addressForm = this.fb.group({     firstName: [''],     lastName: [''],     line1: [''],     city: [''],     zipCode: [''],     stateCode: [''],     phone: ['']   });    @ViewChild(FormGroupDirective) afDirective: FormGroupDirective | undefined;    constructor(private fb: FormBuilder) { }    setCountryCode(code: string) {     this.countryCode = code;   }    addAddress() {     this.createAddress.emit({       firstName: this.addressForm.get('firstName')?.value,       lastName: this.addressForm.get('lastName')?.value,       line1: this.addressForm.get('line1')?.value,       city: this.addressForm.get('city')?.value,       zipCode: this.addressForm.get('zipCode')?.value,       stateCode: this.addressForm.get('stateCode')?.value || 'N/A',       countryCode: this.countryCode,       phone: this.addressForm.get('phone')?.value     });   }    setCheckboxValue(change: MatCheckboxChange) {     if (this.isCheckboxChecked) {       this.isCheckboxChecked.emit(change.checked);     }   } }

<form id="container" [formGroup]="addressForm">     <p class="mat-headline" *ngIf="showTitle">Or add a new address</p>     <div class="row">         <mat-form-field appearance="outline">             <mat-label>First Name</mat-label>             <input matInput formControlName="firstName">         </mat-form-field>         <mat-form-field appearance="outline">             <mat-label>Last Name</mat-label>             <input matInput formControlName="lastName">         </mat-form-field>     </div>     <div class="row">         <mat-form-field appearance="outline">             <mat-label>Address</mat-label>             <input matInput formControlName="line1">         </mat-form-field>         <mat-form-field appearance="outline">             <mat-label>City</mat-label>             <input matInput formControlName="city">         </mat-form-field>     </div>     <div class="row">         <mat-form-field appearance="outline">             <mat-label>State Code</mat-label>             <input matInput formControlName="stateCode">         </mat-form-field>         <mat-form-field appearance="outline">             <mat-label>Zip Code</mat-label>             <input matInput formControlName="zipCode">         </mat-form-field>     </div>     <div class="row">         <mat-form-field appearance="outline">             <mat-label>Phone</mat-label>             <input matInput formControlName="phone">         </mat-form-field>         <app-country-select (setCountryEvent)="setCountryCode($  event)"></app-country-select>     </div>     <mat-checkbox color="accent" (change)="setCheckboxValue($  event)">         {{checkboxText}}     </mat-checkbox>     <button id="submit-button" mat-flat-button color="primary" (click)="addAddress()">         {{buttonText}}     </button> </form>

@Component({   selector: 'app-address-list',   templateUrl: './address-list.component.html',   styleUrls: ['./address-list.component.css'] }) export class AddressListComponent implements OnInit {   addresses: CustomerAddress[] = [];    @Output() setAddressEvent = new EventEmitter<string>();    constructor(     private session: SessionService,     private customerAddresses: CustomerAddressService,     private snackBar: MatSnackBar   ) { }    ngOnInit() {     this.session.loggedInStatus       .pipe(         mergeMap(           status => iif(() => status, this.customerAddresses.getCustomerAddresses())         ))       .subscribe(         addresses => {           if (addresses.length) {             this.addresses = addresses           }         },         err => this.snackBar.open('There was a problem getting your existing addresses.', 'Close', { duration: 8000 })       );   }    setAddress(change: MatRadioChange) {     this.setAddressEvent.emit(change.value);   } }

<div id="container">     <p class="mat-headline">Pick an existing address</p>     <mat-error ngIf="!addresses.length">You have no existing addresses</mat-error>     <mat-radio-group ngIf="addresses.length" class="addresses" (change)="setAddress($  event)">         <mat-card class="address" *ngFor="let address of addresses">             <mat-radio-button [value]="address.address?.id" color="primary">                 <p>{{address.address?.firstName}} {{address.address?.lastName}},</p>                 <p>{{address.address?.line1}},</p>                 <p>{{address.address?.city}},</p>                 <p>{{address.address?.zipCode}},</p>                 <p>{{address.address?.stateCode}}, {{address.address?.countryCode}}</p>                 <p>{{address.address?.phone}}</p>             </mat-radio-button>         </mat-card>     </mat-radio-group> </div>

@UntilDestroy({ checkProperties: true }) @Component({   selector: 'app-customer',   templateUrl: './customer.component.html',   styleUrls: ['./customer.component.css'] }) export class CustomerComponent implements OnInit {   email = new FormControl('', [Validators.required, Validators.email]);    constructor(     private orders: OrderService,     private customers: CustomerService,     private cart: CartService,     private router: Router,     private snackBar: MatSnackBar   ) { }    ngOnInit() {     this.customers.getCurrentCustomer()       .subscribe(         customer => this.email.setValue(customer.email)       );   }    addCustomerEmail() {     this.orders.updateOrder(       { id: this.cart.orderId, customerEmail: this.email.value },       [UpdateOrderParams.customerEmail])       .subscribe(         () => this.router.navigateByUrl('/billing-address'),         err => this.snackBar.open('There was a problem adding your email to the order.', 'Close', { duration: 8000 })       );   } }

<div id="container">     <app-title no="1" title="Customer" subtitle="Billing information and shipping address"></app-title>     <mat-form-field appearance="outline">         <mat-label>Email</mat-label>         <input matInput [formControl]="email" required>         <mat-icon matPrefix>alternate_email</mat-icon>     </mat-form-field>     <button mat-flat-button color="primary" [disabled]="email.invalid" (click)="addCustomerEmail()">         PROCEED TO BILLING ADDRESS     </button> </div>

@UntilDestroy({ checkProperties: true }) @Component({   selector: 'app-billing-address',   templateUrl: './billing-address.component.html',   styleUrls: ['./billing-address.component.css'] }) export class BillingAddressComponent implements OnInit {   showAddresses: boolean = false;   sameShippingAddressAsBilling: boolean = false;   selectedCustomerAddressId: string = '';    constructor(     private addresses: AddressService,     private snackBar: MatSnackBar,     private session: SessionService,     private orders: OrderService,     private cart: CartService,     private router: Router,     private customerAddresses: CustomerAddressService) { }    ngOnInit() {     this.session.loggedInStatus       .subscribe(         status => this.showAddresses = status       );   }    updateBillingAddress(address: Address) {     if (this.showAddresses && this.selectedCustomerAddressId) {       this.cloneAddress();     } else if (address.firstName && address.lastName && address.line1 && address.city && address.zipCode && address.stateCode && address.countryCode && address.phone) {       this.createAddress(address);     }     else {       this.snackBar.open('Check your address. Some fields are missing.', 'Close');     }   }    setCustomerAddress(customerAddressId: string) {     this.selectedCustomerAddressId = customerAddressId;   }    setSameShippingAddressAsBilling(change: boolean) {     this.sameShippingAddressAsBilling = change;   }    private createAddress(address: Address) {     this.addresses.createAddress(address)       .pipe(         concatMap(           address => {             const update = this.updateOrderObservable({               id: this.cart.orderId,               billingAddressId: address.id             }, [UpdateOrderParams.billingAddress]);              if (this.showAddresses) {               return combineLatest([update, this.customerAddresses.createCustomerAddress(address.id || '', '')]);             } else {               return update;             }           }))       .subscribe(         () => this.showSuccessSnackBar(),         err => this.showErrorSnackBar()       );   }    private cloneAddress() {     this.updateOrderObservable({       id: this.cart.orderId,       billingAddressCloneId: this.selectedCustomerAddressId     }, [UpdateOrderParams.billingAddressClone])       .subscribe(         () => this.showSuccessSnackBar(),         err => this.showErrorSnackBar()       );   }    private updateOrderObservable(order: Order, updateParams: UpdateOrderParams[]): Observable<any> {     return iif(() => this.sameShippingAddressAsBilling,       concat([         this.orders.updateOrder(order, updateParams),         this.orders.updateOrder(order, [UpdateOrderParams.shippingAddressSameAsBilling])       ]),       this.orders.updateOrder(order, updateParams)     );   }    private showErrorSnackBar() {     this.snackBar.open('There was a problem creating your address.', 'Close', { duration: 8000 });   }    private navigateTo(path: string) {     setTimeout(() => this.router.navigateByUrl(path), 4000);   }    private showSuccessSnackBar() {     this.snackBar.open('Billing address successfully added. Redirecting...', 'Close', { duration: 3000 });     if (this.sameShippingAddressAsBilling) {       this.navigateTo('/shipping-methods');     } else {       this.navigateTo('/shipping-address');     }   } }

<app-title no="2" title="Billing Address" subtitle="Address to bill charges to"></app-title> <app-address-list ngIf="showAddresses" (setAddressEvent)="setCustomerAddress($  event)"></app-address-list> <mat-divider ngIf="showAddresses"></mat-divider> <app-address [showTitle]="showAddresses" buttonText="PROCEED TO NEXT STEP" checkboxText="Ship to the same address" (isCheckboxChecked)="setSameShippingAddressAsBilling($  event)" (createAddress)="updateBillingAddress($  event)"></app-address>

@UntilDestroy({ checkProperties: true }) @Component({   selector: 'app-shipping-address',   templateUrl: './shipping-address.component.html',   styleUrls: ['./shipping-address.component.css'] }) export class ShippingAddressComponent implements OnInit {   showAddresses: boolean = false;   sameBillingAddressAsShipping: boolean = false;   selectedCustomerAddressId: string = '';    constructor(     private addresses: AddressService,     private snackBar: MatSnackBar,     private session: SessionService,     private orders: OrderService,     private cart: CartService,     private router: Router,     private customerAddresses: CustomerAddressService) { }    ngOnInit() {     this.session.loggedInStatus       .subscribe(         status => this.showAddresses = status       );   }    updateShippingAddress(address: Address) {     if (this.showAddresses && this.selectedCustomerAddressId) {       this.cloneAddress();     } else if (address.firstName && address.lastName && address.line1 && address.city && address.zipCode && address.stateCode && address.countryCode && address.phone) {       this.createAddress(address);     }     else {       this.snackBar.open('Check your address. Some fields are missing.', 'Close');     }   }    setCustomerAddress(customerAddressId: string) {     this.selectedCustomerAddressId = customerAddressId;   }    setSameBillingAddressAsShipping(change: boolean) {     this.sameBillingAddressAsShipping = change;   }    private createAddress(address: Address) {     this.addresses.createAddress(address)       .pipe(         concatMap(           address => {             const update = this.updateOrderObservable({               id: this.cart.orderId,               shippingAddressId: address.id             }, [UpdateOrderParams.shippingAddress]);              if (this.showAddresses) {               return combineLatest([update, this.customerAddresses.createCustomerAddress(address.id || '', '')]);             } else {               return update;             }           }))       .subscribe(         () => this.showSuccessSnackBar(),         err => this.showErrorSnackBar()       );   }    private cloneAddress() {     this.updateOrderObservable({       id: this.cart.orderId,       shippingAddressCloneId: this.selectedCustomerAddressId     }, [UpdateOrderParams.shippingAddressClone])       .subscribe(         () => this.showSuccessSnackBar(),         err => this.showErrorSnackBar()       );   }    private updateOrderObservable(order: Order, updateParams: UpdateOrderParams[]): Observable<any> {     return iif(() => this.sameBillingAddressAsShipping,       concat([         this.orders.updateOrder(order, updateParams),         this.orders.updateOrder(order, [UpdateOrderParams.billingAddressSameAsShipping])       ]),       this.orders.updateOrder(order, updateParams)     );   }    private showErrorSnackBar() {     this.snackBar.open('There was a problem creating your address.', 'Close', { duration: 8000 });   }    private showSuccessSnackBar() {     this.snackBar.open('Shipping address successfully added. Redirecting...', 'Close', { duration: 3000 });      setTimeout(() => this.router.navigateByUrl('/shipping-methods'), 4000);   } }

<app-title no="3" title="Shipping Address" subtitle="Address to ship package to"></app-title> <app-address-list ngIf="showAddresses" (setAddressEvent)="setCustomerAddress($  event)"></app-address-list> <mat-divider ngIf="showAddresses"></mat-divider> <app-address [showTitle]="showAddresses" buttonText="PROCEED TO SHIPPING METHODS" checkboxText="Bill to the same address" (isCheckboxChecked)="setSameBillingAddressAsShipping($  event)" (createAddress)="updateShippingAddress($  event)"></app-address>

@UntilDestroy({ checkProperties: true }) @Component({   selector: 'app-shipping-methods',   templateUrl: './shipping-methods.component.html',   styleUrls: ['./shipping-methods.component.css'] }) export class ShippingMethodsComponent implements OnInit {   shipments: Shipment[] | undefined = [];   shipmentsForm: FormGroup = this.fb.group({});    constructor(     private orders: OrderService,     private dlts: DeliveryLeadTimeService,     private cart: CartService,     private router: Router,     private fb: FormBuilder,     private shipments: ShipmentService,     private snackBar: MatSnackBar   ) { }    ngOnInit() {     combineLatest([       this.orders.getOrder(this.cart.orderId, GetOrderParams.shipments),       this.dlts.getDeliveryLeadTimes()     ]).subscribe(       ([lineItems, deliveryLeadTimes]) => {         let li: LineItem;         let lt: DeliveryLeadTime[];          this.shipments = lineItems.shipments?.map((shipment) => {           if (shipment.id) {             this.shipmentsForm.addControl(shipment.id, new FormControl('', Validators.required));           }            if (shipment.lineItems) {             shipment.lineItems = shipment.lineItems.map(item => {               li = this.findItem(lineItems, item.skuCode || '');               item.imageUrl = li.imageUrl;               item.name = li.name;               return item;             });           }            if (shipment.availableShippingMethods) {             lt = this.findLocationLeadTime(deliveryLeadTimes, shipment);             shipment.availableShippingMethods = shipment.availableShippingMethods?.map(               method => {                 method.deliveryLeadTime = this.findMethodLeadTime(lt, method);                 return method;               });           }            return shipment;         });       },       err => this.router.navigateByUrl('/error')     );   }    setShipmentMethods() {     const shipmentsFormValue = this.shipmentsForm.value;      combineLatest(Object.keys(shipmentsFormValue).map(       key => this.shipments.updateShipment(key, shipmentsFormValue[key])     )).subscribe(       () => {         this.snackBar.open('Your shipments have been updated with a shipping method.', 'Close', { duration: 3000 });         setTimeout(() => this.router.navigateByUrl('/payment'), 4000);       },       err => this.snackBar.open('There was a problem adding shipping methods to your shipments.', 'Close', { duration: 5000 })     );   }     private findItem(lineItems: LineItem[], skuCode: string): LineItem {     return lineItems.filter((item) => item.skuCode == skuCode)[0];   }    private findLocationLeadTime(times: DeliveryLeadTime[], shipment: Shipment): DeliveryLeadTime[] {     return times.filter((dlTime) => dlTime?.stockLocation?.id == shipment?.stockLocation?.id);   }    private findMethodLeadTime(times: DeliveryLeadTime[], method: ShippingMethod): DeliveryLeadTime {     return times.filter((dlTime) => dlTime?.shippingMethod?.id == method?.id)[0];   } }

<form id="container" [formGroup]="shipmentsForm">     <app-title no="4" title="Shipping Methods" subtitle="How to ship your packages"></app-title>     <div class="shipment-container" ngFor="let shipment of shipments; let j = index; let isLast = last">         <h1>Shipment {{j+1}} of {{shipments?.length}}</h1>         <div class="row" ngFor="let item of shipment.lineItems">             <img class="image-xs" [src]="item.imageUrl" alt="product photo">             <div id="shipment-details">                 <h4 id="item-name">{{item.name}}</h4>                 <p>{{item.skuCode}}</p>             </div>             <div id="quantity-section">                 <p id="quantity-label">Quantity: </p>{{item.quantity}}             </div>         </div>         <mat-radio-group [formControlName]="shipment?.id || j">             <mat-radio-button ngFor="let method of shipment.availableShippingMethods" [value]="method.id">                 <div class="radio-button">                     <p>{{method.name}}</p>                     <div>                         <p class="radio-label">Cost:</p>                         <p> {{method.formattedPriceAmount}}</p>                     </div>                     <div>                         <p class="radio-label">Timeline:</p>                         <p> Available in {{method.deliveryLeadTime?.minDays}}-{{method.deliveryLeadTime?.maxDays}} days</p>                     </div>                 </div>             </mat-radio-button>         </mat-radio-group>         <mat-divider ngIf="!isLast"></mat-divider>     </div>     <button mat-flat-button color="primary" [disabled]="shipmentsForm.invalid" (click)="setShipmentMethods()">PROCEED TO PAYMENT</button> </form>

@UntilDestroy({ checkProperties: true }) @Component({   selector: 'app-payment',   templateUrl: './payment.component.html',   styleUrls: ['./payment.component.css'] }) export class PaymentComponent implements OnInit {   approvalUrl: string = '';    constructor(     private orders: OrderService,     private cart: CartService,     private router: Router,     private payments: PaypalPaymentService   ) { }    ngOnInit() {     const orderId = this.cart.orderId;      this.orders.getOrder(orderId, GetOrderParams.paymentSource)       .pipe(         concatMap((order: Order) => {           const paymentSourceId = order.paymentSource?.id;            const paymentMethod = order.availablePaymentMethods?.filter(             (method) => method.paymentSourceType == 'paypal_payments'           )[0];            return iif(             () => paymentSourceId ? true : false,             this.payments.getPaypalPayment(paymentSourceId || ''),             this.orders.updateOrder({               id: orderId,               paymentMethodId: paymentMethod?.id             }, [UpdateOrderParams.paymentMethod])               .pipe(concatMap(                 order => this.payments.createPaypalPayment({                   orderId: orderId,                   cancelUrl: $  {environment.clientUrl}/cancel-payment,                   returnUrl: $  {environment.clientUrl}/place-order                 })               ))           );         }))       .subscribe(         paypalPayment => this.approvalUrl = paypalPayment?.approvalUrl || '',         err => this.router.navigateByUrl('/error')       );   }    navigateToPaypal() {     window.location.href = this.approvalUrl;   } }

<app-simple-page number="5" title="Payment" subtitle="Pay for your order" buttonText="PROCEED TO PAY WITH PAYPAL" icon="point_of_sale" (buttonEvent)="navigateToPaypal()" [buttonDisabled]="approvalUrl.length ? false : true"></app-simple-page>

<app-simple-page title="Payment cancelled" subtitle="Your Paypal payment has been cancelled" icon="money_off" buttonText="GO TO HOME" [centerText]="true" route="/"></app-simple-page>

@UntilDestroy({ checkProperties: true }) @Component({   selector: 'app-place-order',   templateUrl: './place-order.component.html',   styleUrls: ['./place-order.component.css'] }) export class PlaceOrderComponent implements OnInit {   disableButton = true;    constructor(     private route: ActivatedRoute,     private router: Router,     private payments: PaypalPaymentService,     private orders: OrderService,     private cart: CartService,     private snackBar: MatSnackBar   ) { }    ngOnInit() {     this.route.queryParams       .pipe(         concatMap(params => {           const payerId = params['PayerID'];           const orderId = this.cart.orderId;            return iif(             () => payerId.length > 0,             this.orders.getOrder(orderId, GetOrderParams.paymentSource)               .pipe(                 concatMap(order => {                   const paymentSourceId = order.paymentSource?.id || '';                    return iif(                     () => paymentSourceId ? paymentSourceId.length > 0 : false,                     this.payments.updatePaypalPayment(paymentSourceId, payerId)                   );                 })               )           );         }))       .subscribe(         () => this.disableButton = false,         () => this.router.navigateByUrl('/error')       );   }    placeOrder() {     this.disableButton = true;      this.orders.updateOrder({       id: this.cart.orderId,       place: true     }, [UpdateOrderParams.place])       .subscribe(         () => {           this.snackBar.open('Your order has been successfully placed.', 'Close', { duration: 3000 });           this.cart.clearCart();           setTimeout(() => this.router.navigateByUrl('/'), 4000);         },         () => {           this.snackBar.open('There was a problem placing your order.', 'Close', { duration: 8000 });           this.disableButton = false;         }       );   } }

<app-simple-page title="Finalize Order" subtitle="Complete your order" [number]="'6'" icon="shopping_bag" buttonText="PLACE YOUR ORDER" (buttonEvent)="placeOrder()" [buttonDisabled]="disableButton"></app-simple-page>

@NgModule({   declarations: [     AppComponent   ],   imports: [     BrowserModule,     AppRoutingModule,     HttpClientModule,     BrowserAnimationsModule,     AuthModule,     ProductsModule,     CartModule,     CheckoutModule,     CoreModule   ],   providers: [     {       provide: HTTP_INTERCEPTORS,       useClass: OptionsInterceptor,       multi: true     },     {       provide: APP_INITIALIZER,       useFactory: (http: HttpClient) => () => http.post<object>(         $  {environment.apiUrl}/oauth/token,         { 'grantType': 'client_credentials' },         { withCredentials: true }),       multi: true,       deps: [HttpClient]     }   ],   bootstrap: [AppComponent] }) export class AppModule { }

@NgModule({   declarations: [SimplePageComponent, TitleComponent, WordWrapPipe, ItemQuantityComponent],   imports: [CommonModule, MatIconModule, MatButtonModule, MatTooltipModule, MatMenuModule, RouterModule],   exports: [     CommonModule,     ItemQuantityComponent,     MatButtonModule,     MatIconModule,     MatSnackBarModule,     MatTooltipModule,     SimplePageComponent,     TitleComponent,     WordWrapPipe   ] }) export class SharedModule { }

<button mat-stroked-button [matMenuTriggerFor]="menu" [disabled]="disabled">     {{quantity}}     <mat-icon ngIf="!disabled">expand_more</mat-icon> </button> <mat-menu #menu="matMenu">     <button ngFor="let no of values" (click)="setQuantity(no)" mat-menu-item>{{no}}</button> </mat-menu>

<div id="container">     <app-title no="{{number}}" title="{How To Build An E-Commerce Site With Angular 11, Commerce Layer And Paypal}" subtitle="{{subtitle}}" [centerText]="centerText"></app-title>     <div *ngIf="icon" id="icon-container">         <mat-icon color="primary" class="icon">{{icon}}</mat-icon>     </div>     <button mat-flat-button color="primary" (click)="buttonClicked()" [disabled]="buttonDisabled">         {{buttonText}}     </button> </div>

@Injectable({   providedIn: 'root' }) export class HttpErrorHandler {    constructor() { }    handleError(err: HttpErrorResponse): Observable {     let displayMessage = '';      if (err.error instanceof ErrorEvent) {       displayMessage = Client-side error: $  {err.error.message};     } else {       displayMessage = Server-side error: $  {err.message};     }      return throwError(displayMessage);   } }

@Injectable({   providedIn: 'root' }) export class AddressService {   private url: string = $  {environment.apiUrl}/api/addresses;    constructor(private http: HttpClient, private eh: HttpErrorHandler) { }    createAddress(address: Address): Observable<Address> {     return this.http.post<Address>(this.url, address)       .pipe(catchError(this.eh.handleError));   }    getAddress(id: string): Observable<Address> {     return this.http.get<Address>($  {this.url}/$  {id})       .pipe(catchError(this.eh.handleError));   } }

@Injectable({   providedIn: 'root' }) export class CartService {   private cart = new BehaviorSubject({     orderId: this.orderId,     itemCount: this.itemCount   });    cartValue$   = this.cart.asObservable();    constructor(private storage: LocalStorageService) { }    get orderId(): string {     const id = this.storage.getItem('order-id');     return id ? id : '';   }    set orderId(id: string) {     this.storage.addItem('order-id', id);     this.cart.next({ orderId: id, itemCount: this.itemCount });   }    get itemCount(): number {     const itemCount = this.storage.getItem('item-count');      return itemCount ? parseInt(itemCount) : 0;   }    set itemCount(amount: number) {     this.storage.addItem('item-count', amount.toString());     this.cart.next({ orderId: this.orderId, itemCount: amount });   }    incrementItemCount(amount: number) {     this.itemCount = this.itemCount + amount;   }    decrementItemCount(amount: number) {     this.itemCount = this.itemCount - amount;   }    clearCart() {     this.storage.deleteItem('item-count');     this.cart.next({ orderId: '', itemCount: 0 });   } }

@Injectable({   providedIn: 'root' }) export class CountryService {    constructor(private http: HttpClient) { }    getCountries(): Observable<Country[]> {     return this.http.get<Country[]>('./../../../assets/json/country-codes.json');   } }

@Injectable({   providedIn: 'root' }) export class CustomerAddressService {   private url: string = $  {environment.apiUrl}/api/customer_addresses;    constructor(private http: HttpClient, private eh: HttpErrorHandler) { }    createCustomerAddress(addressId: string, customerId: string): Observable<CustomerAddress> {     return this.http.post<CustomerAddress>(this.url, {       addressId: addressId, customerId: customerId     })       .pipe(catchError(this.eh.handleError));   }    getCustomerAddresses(): Observable<CustomerAddress[]> {     return this.http.get<CustomerAddress[]>($  {this.url})       .pipe(catchError(this.eh.handleError));   }    getCustomerAddress(id: string): Observable<CustomerAddress> {     return this.http.get<CustomerAddress>($  {this.url}/$  {id})       .pipe(catchError(this.eh.handleError));   } }

@Injectable({   providedIn: 'root' }) export class CustomerService {   private url: string = $  {environment.apiUrl}/api/customers;    constructor(private http: HttpClient, private eh: HttpErrorHandler) { }    createCustomer(email: string, password: string, firstName: string, lastName: string): Observable<Customer> {     return this.http.post<Customer>(this.url, {       email: email,       password: password,       firstName: firstName,       lastName: lastName     })       .pipe(catchError(this.eh.handleError));   }    getCurrentCustomer(): Observable<Customer> {     return this.http.get<Customer>($  {this.url}/current)       .pipe(catchError(this.eh.handleError));   }    getCustomer(id: string): Observable<Customer> {     return this.http.get<Customer>($  {this.url}/$  {id})       .pipe(catchError(this.eh.handleError));   } }

@Injectable({   providedIn: 'root' }) export class DeliveryLeadTimeService {   private url: string = $  {environment.apiUrl}/api/delivery_lead_times;    constructor(private http: HttpClient, private eh: HttpErrorHandler) { }    getDeliveryLeadTimes(): Observable<DeliveryLeadTime[]> {     return this.http.get<DeliveryLeadTime[]>(this.url)       .pipe(catchError(this.eh.handleError));   } }

@Injectable({   providedIn: 'root' }) export class LineItemService {   private url: string = $  {environment.apiUrl}/api/line_items;    constructor(private http: HttpClient, private eh: HttpErrorHandler) { }    createLineItem(lineItem: LineItem): Observable<LineItem> {     return this.http.post<LineItem>(this.url, lineItem)       .pipe(catchError(this.eh.handleError));   }    getLineItem(id: string): Observable<LineItem> {     return this.http.get<LineItem>($  {this.url}/$  {id})       .pipe(catchError(this.eh.handleError));   }    updateLineItem(id: string, quantity: number): Observable<LineItem> {     return this.http.patch<LineItem>($  {this.url}/$  {id}, { quantity: quantity })       .pipe(catchError(this.eh.handleError));   }    deleteLineItem(id: string): Observable<LineItem> {     return this.http.delete<LineItem>($  {this.url}/$  {id})       .pipe(catchError(this.eh.handleError));   } }

@Injectable({   providedIn: 'root' }) export class OrderService {   private url: string = $  {environment.apiUrl}/api/orders;    constructor(     private http: HttpClient,     private eh: HttpErrorHandler) { }    createOrder(): Observable<Order> {     return this.http.post<Order>(this.url, {})       .pipe(catchError(this.eh.handleError));   }    getOrder(id: string, orderParam: GetOrderParams): Observable<Order> {     let params = {};     if (orderParam != GetOrderParams.none) {       params = { [orderParam]: 'true' };     }      return this.http.get<Order>($  {this.url}/$  {id}, { params: params })       .pipe(catchError(this.eh.handleError));   }    updateOrder(order: Order, params: UpdateOrderParams[]): Observable<Order> {     let updateParams = [];     for (const param of params) {       updateParams.push(param.toString());     }      return this.http.patch<Order>(       $  {this.url}/$  {order.id},       order,       { params: { 'field': updateParams } }     )       .pipe(catchError(this.eh.handleError));   }    getOrderShipments(id: string): Observable<Shipment[]> {     return this.http.get<Shipment[]>($  {this.url}/$  {id}/shipments)       .pipe(catchError(this.eh.handleError));   } }

@Injectable({   providedIn: 'root' }) export class PaypalPaymentService {   private url: string = $  {environment.apiUrl}/api/paypal_payments;    constructor(private http: HttpClient, private eh: HttpErrorHandler) { }    createPaypalPayment(payment: PaypalPayment): Observable<PaypalPayment> {     return this.http.post<PaypalPayment>(this.url, payment)       .pipe(catchError(this.eh.handleError));   }    getPaypalPayment(id: string): Observable<PaypalPayment> {     return this.http.get<PaypalPayment>($  {this.url}/$  {id})       .pipe(catchError(this.eh.handleError));   }    updatePaypalPayment(id: string, paypalPayerId: string): Observable<PaypalPayment> {     return this.http.patch<PaypalPayment>(       $  {this.url}/$  {id},       { paypalPayerId: paypalPayerId }     )       .pipe(catchError(this.eh.handleError));   } }

@Injectable({   providedIn: 'root' }) export class ShipmentService {   private url: string = $  {environment.apiUrl}/api/shipments;    constructor(private http: HttpClient, private eh: HttpErrorHandler) { }    getShipment(id: string): Observable<Shipment> {     return this.http.get<Shipment>($  {this.url}/$  {id})       .pipe(catchError(this.eh.handleError));   }    updateShipment(id: string, shippingMethodId: string): Observable<Shipment> {     return this.http.patch<Shipment>(       $  {this.url}/$  {id},       { shippingMethodId: shippingMethodId }     )       .pipe(catchError(this.eh.handleError));   } }

@Injectable({   providedIn: 'root' }) export class SkuService {   private url: string = $  {environment.apiUrl}/api/skus;    constructor(private http: HttpClient, private eh: HttpErrorHandler) { }    getSku(id: string): Observable<Sku> {     return this.http.get<Sku>($  {this.url}/$  {id})       .pipe(catchError(this.eh.handleError));   }    getSkus(page: number, pageSize: number): Observable<Sku[]> {     return this.http.get<Sku[]>(       this.url,       {         params: {           'page': page.toString(),           'pageSize': pageSize.toString()         }       })       .pipe(catchError(this.eh.handleError));   } }

ng g m core ng g g core/guards/empty-cart ng g s core/header/header ng g interceptor core/interceptors/options for comp in header error not-found; do ng g c "core/$  {comp}"; done for serv in authentication session; do ng g s "core/authentication/$  {serv}"; done

@NgModule({   declarations: [HeaderComponent, NotFoundComponent, ErrorComponent],   imports: [     RouterModule.forChild([       { path: '404', component: NotFoundComponent },       { path: 'error', component: ErrorComponent },       { path: '**', redirectTo: '/404' }     ]),     MatBadgeModule,     SharedModule   ],   exports: [HeaderComponent] }) export class CoreModule { }

@Injectable({   providedIn: 'root' }) export class AuthenticationService {   private url: string = $  {environment.apiUrl}/oauth/token;    constructor(private http: HttpClient, private eh: HttpErrorHandler) { }    getClientSession(): Observable<object> {     return this.http.post<object>(       this.url,       { grantType: 'client_credentials' })       .pipe(catchError(this.eh.handleError));   }    login(email: string, password: string): Observable<object> {     return this.http.post<object>(       this.url,       { username: email, password: password, grantType: 'password' })       .pipe(catchError(this.eh.handleError));   } }

@Injectable({   providedIn: 'root' }) export class SessionService {   private url: string = $  {environment.apiUrl}/session;   private isLoggedIn = new BehaviorSubject(false);    loggedInStatus = this.isLoggedIn.asObservable();    constructor(private http: HttpClient, private eh: HttpErrorHandler) { }    setLoggedInStatus(status: boolean) {     this.isLoggedIn.next(status);   }    isCustomerLoggedIn(): Observable<{ message: string }> {     return this.http.get<{ message: string }>($  {this.url}/customer/status)       .pipe(catchError(this.eh.handleError));   }    logout(): Observable<{ message: string }> {     return this.http.get<{ message: string }>($  {this.url}/destroy)       .pipe(catchError(this.eh.handleError));   } }

@Injectable({   providedIn: 'root' }) export class HeaderService {   private headerButtonsVisibility = new BehaviorSubject(true);    showHeaderButtons = this.headerButtonsVisibility.asObservable();    constructor() { }    setHeaderButtonsVisibility(visible: boolean) {     this.headerButtonsVisibility.next(visible);   } }

<app-simple-page title="An error occurred" subtitle="There was a problem fetching your page" buttonText="GO TO HOME" icon="report" [centerText]="true" route="/"> </app-simple-page>

<app-simple-page title="404: Page not found" buttonText="GO TO HOME" icon="search" subtitle="The requested page could not be found" [centerText]="true" route="/"></app-simple-page>

@UntilDestroy({ checkProperties: true }) @Component({   selector: 'app-header',   templateUrl: './header.component.html',   styleUrls: ['./header.component.css'] }) export class HeaderComponent implements OnInit {   cartAmount: number = 0;   isLoggedIn: boolean = false;   showButtons: boolean = true;    constructor(     private session: SessionService,     private snackBar: MatSnackBar,     private cart: CartService,     private header: HeaderService,     private auth: AuthenticationService   ) { }    ngOnInit() {     this.session.isCustomerLoggedIn()       .subscribe(         () => {           this.isLoggedIn = true;           this.session.setLoggedInStatus(true);         }       );      this.session.loggedInStatus.subscribe(status => this.isLoggedIn = status);      this.header.showHeaderButtons.subscribe(visible => this.showButtons = visible);      this.cart.cartValue$  .subscribe(cart => this.cartAmount = cart.itemCount);   }    logout() {     concat(       this.session.logout(),       this.auth.getClientSession()     ).subscribe(       () => {         this.snackBar.open('You have been logged out.', 'Close', { duration: 4000 });         this.session.setLoggedInStatus(false);       },       err => this.snackBar.open('There was a problem logging you out.', 'Close', { duration: 4000 })     );   } }

<div id="header-container">     <div id="left-half" routerLink="/">         <h1><span id="lime-text">Lime</span><span id="store-text">Store</span></h1>     </div>     <div id="right-half">         <div id="button-container" ngIf="showButtons">             <button mat-icon-button color="primary" aria-label="shopping cart">                 <mat-icon [matBadge]="cartAmount" matBadgeColor="accent" aria-label="shopping cart" routerLink="/cart">shopping_cart</mat-icon>             </button>             <button mat-icon-button color="primary" aria-label="login" ngIf="!isLoggedIn">                 <mat-icon aria-label="login" matTooltip="login" routerLink="/login">login</mat-icon>             </button>             <button mat-icon-button color="primary" aria-label="logout" *ngIf="isLoggedIn" (click)="logout()">                 <mat-icon aria-label="logout" matTooltip="logout">logout</mat-icon>             </button>         </div>     </div> </div>

@Injectable({   providedIn: 'root' }) export class EmptyCartGuard implements CanActivate {   constructor(private cart: CartService, private router: Router) { }    canActivate(     route: ActivatedRouteSnapshot,     state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {     if (this.cart.orderId) {       if (this.cart.itemCount > 0) {         return true;       }     }      return this.router.parseUrl('/empty');   } }

@Injectable() export class OptionsInterceptor implements HttpInterceptor {    constructor() { }    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {     request = request.clone({       headers: request.headers.set('Content-Type', 'application/json'),       withCredentials: true     });      return next.handle(request);   } }

@UntilDestroy({ checkProperties: true }) @Component({   selector: 'app-product-list',   templateUrl: './product-list.component.html',   styleUrls: ['./product-list.component.css'] }) export class ProductListComponent implements OnInit {   cols = 4;   length = 0;   pageIndex = 0;   pageSize = 20;   pageSizeOptions: number[] = [5, 10, 20];    pageEvent!: PageEvent | void;    products: Sku[] = [];    constructor(     private breakpointObserver: BreakpointObserver,     private skus: SkuService,     private router: Router,     private header: HeaderService) { }    ngOnInit() {     this.getProducts(1, 20);     this.header.setHeaderButtonsVisibility(true);      this.breakpointObserver.observe([       Breakpoints.Handset,       Breakpoints.Tablet,       Breakpoints.Web     ]).subscribe(result => {       if (result.matches) {         if (result.breakpoints['(max-width: 599.98px) and (orientation: portrait)'] || result.breakpoints['(max-width: 599.98px) and (orientation: landscape)']) {           this.cols = 1;         }         else if (result.breakpoints['(min-width: 1280px) and (orientation: portrait)'] || result.breakpoints['(min-width: 1280px) and (orientation: landscape)']) {           this.cols = 4;         } else {           this.cols = 3;         }       }     });   }    private getProducts(page: number, pageSize: number) {     this.skus.getSkus(page, pageSize)       .subscribe(         skus => {           this.products = skus;           this.length = skus[0].__collectionMeta.recordCount;         },         err => this.router.navigateByUrl('/error')       );   }    getNextPage(event: PageEvent) {     this.getProducts(event.pageIndex + 1, event.pageSize);   }    trackSkus(index: number, item: Sku) {     return $  {item.id}-$  {index};   } }

<mat-grid-list cols="{{cols}}" rowHeight="400px" gutterSize="20px" class="grid-layout">     <mat-grid-tile *ngFor="let product of products; trackBy: trackSkus">         <mat-card>             <img id="card-image" mat-card-image src="{{product.imageUrl}}" alt="product photo">             <mat-card-content>                 <mat-card-title matTooltip="{{product.name}}">{{product.name |wordWrap:35}}</mat-card-title>                 <mat-card-subtitle>{{product.prices[0].compareAtAmountFloat | currency:'EUR'}}</mat-card-subtitle>             </mat-card-content>             <mat-card-actions>                 <button mat-flat-button color="primary" [routerLink]="['/product', product.id]">                     View                 </button>             </mat-card-actions>         </mat-card>     </mat-grid-tile> </mat-grid-list> <mat-paginator [length]="length" [pageIndex]="pageIndex" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" (page)="pageEvent = getNextPage($  event)"> </mat-paginator>

@UntilDestroy({ checkProperties: true }) @Component({   selector: 'app-product',   templateUrl: './product.component.html',   styleUrls: ['./product.component.css'] }) export class ProductComponent implements OnInit {   id: string = '';   product!: Sku;   quantity: number = 0;    constructor(     private route: ActivatedRoute,     private skus: SkuService,     private location: Location,     private router: Router,     private header: HeaderService,     private orders: OrderService,     private lineItems: LineItemService,     private cart: CartService,     private snackBar: MatSnackBar   ) { }    ngOnInit() {     this.route.paramMap       .pipe(         mergeMap(params => {           const id = params.get('id')           this.id = id ? id : '';            return this.skus.getSku(this.id);         }),         tap((sku) => {           this.product = sku;         })       ).subscribe({         error: (err) => this.router.navigateByUrl('/error')       });      this.header.setHeaderButtonsVisibility(true);   }    addItemToCart() {     if (this.quantity > 0) {       if (this.cart.orderId == '') {         this.orders.createOrder()           .pipe(             mergeMap((order: Order) => {               this.cart.orderId = order.id || '';                return this.lineItems.createLineItem({                 orderId: order.id,                 name: this.product.name,                 imageUrl: this.product.imageUrl,                 quantity: this.quantity,                 skuCode: this.product.code               });             })           )           .subscribe(             () => {               this.cart.incrementItemCount(this.quantity);               this.showSuccessSnackBar();             },             err => this.showErrorSnackBar()           );       } else {         this.lineItems.createLineItem({           orderId: this.cart.orderId,           name: this.product.name,           imageUrl: this.product.imageUrl,           quantity: this.quantity,           skuCode: this.product.code         }).subscribe(           () => {             this.cart.incrementItemCount(this.quantity);             this.showSuccessSnackBar();           },           err => this.showErrorSnackBar()         );       }     } else {       this.snackBar.open('Select a quantity greater than 0.', 'Close', { duration: 8000 });     }   }    setQuantity(no: number) {     this.quantity = no;   }    goBack() {     this.location.back();   }    private showSuccessSnackBar() {     this.snackBar.open('Item successfully added to cart.', 'Close', { duration: 8000 });   }    private showErrorSnackBar() {     this.snackBar.open('Failed to add your item to the cart.', 'Close', { duration: 8000 });   } }

<div id="container">     <mat-card *ngIf="product" class="product-card">         <img mat-card-image src="{{product.imageUrl}}" alt="Photo of a product">         <mat-card-content>             <mat-card-title>{{product.name}}</mat-card-title>             <mat-card-subtitle>{{product.prices[0].compareAtAmountFloat | currency:'EUR'}}</mat-card-subtitle>             <p>                 {{product.description}}             </p>         </mat-card-content>         <mat-card-actions>             <app-item-quantity [quantity]="quantity" [maxValue]="10" (setQuantityEvent)="setQuantity($  event)"></app-item-quantity>             <button mat-raised-button color="accent" (click)="addItemToCart()">                 <mat-icon>add_shopping_cart</mat-icon>                 Add to cart             </button>             <button mat-raised-button color="primary" (click)="goBack()">                 <mat-icon>storefront</mat-icon>                 Continue shopping             </button>         </mat-card-actions>     </mat-card> </div>

@UntilDestroy({ checkProperties: true }) @Component({   selector: 'app-signup',   templateUrl: './signup.component.html',   styleUrls: ['./signup.component.css'] }) export class SignupComponent implements OnInit {   signupForm = this.fb.group({     firstName: ['', Validators.required],     lastName: ['', Validators.required],     email: ['', [Validators.required, Validators.email]],     password: ['', [Validators.required, Validators.minLength(8)]],     confirmedPassword: ['', [Validators.required]]   }, { validators: this.matchPasswords });    @ViewChild(FormGroupDirective) sufDirective: FormGroupDirective | undefined;    constructor(     private customer: CustomerService,     private fb: FormBuilder,     private snackBar: MatSnackBar,     private router: Router,     private header: HeaderService   ) { }    ngOnInit() {     this.header.setHeaderButtonsVisibility(false);   }    matchPasswords(signupGroup: AbstractControl): ValidationErrors | null {     const password = signupGroup.get('password')?.value;     const confirmedPassword = signupGroup.get('confirmedPassword')?.value;      return password == confirmedPassword ? null : { differentPasswords: true };   }    get password() { return this.signupForm.get('password'); }    get confirmedPassword() { return this.signupForm.get('confirmedPassword'); }    signup() {     const customer = this.signupForm.value;      this.customer.createCustomer(       customer.email,       customer.password,       customer.firstName,       customer.lastName     ).subscribe(       () => {         this.signupForm.reset();         this.sufDirective?.resetForm();          this.snackBar.open('Account successfully created. You will be redirected in 5 seconds.', 'Close', { duration: 5000 });          setTimeout(() => this.router.navigateByUrl('/'), 6000);       },       err => this.snackBar.open('There was a problem creating your account.', 'Close', { duration: 5000 })     );   } }

<form id="container" [formGroup]="signupForm" (ngSubmit)="signup()">     <h1 class="mat-display-3">Create Account</h1>     <mat-form-field appearance="outline">         <mat-label>First Name</mat-label>         <input matInput formControlName="firstName">         <mat-icon matPrefix>portrait</mat-icon>     </mat-form-field>     <mat-form-field appearance="outline">         <mat-label>Last Name</mat-label>         <input matInput formControlName="lastName">         <mat-icon matPrefix>portrait</mat-icon>     </mat-form-field>     <mat-form-field appearance="outline">         <mat-label>Email</mat-label>         <input matInput formControlName="email" type="email">         <mat-icon matPrefix>alternate_email</mat-icon>     </mat-form-field>     <mat-form-field appearance="outline">         <mat-label>Password</mat-label>         <input matInput formControlName="password" type="password">         <mat-icon matPrefix>vpn_key</mat-icon>     </mat-form-field>     <mat-form-field appearance="outline">         <mat-label>Confirm Password</mat-label>         <input matInput formControlName="confirmedPassword" type="password">         <mat-icon matPrefix>vpn_key</mat-icon>     </mat-form-field>     <div ngIf="confirmedPassword?.invalid && (confirmedPassword?.dirty || confirmedPassword?.touched)">         <mat-error ngIf="signupForm.hasError('differentPasswords')">             Your passwords do not match.         </mat-error>     </div>     <div ngIf="password?.invalid && (password?.dirty || password?.touched)">         <mat-error ngIf="password?.hasError('minlength')">             Your password should be at least 8 characters.         </mat-error>     </div>     <button mat-flat-button color="primary" [disabled]="!signupForm.valid">Sign Up</button> </form>

<form id="container" [formGroup]="loginForm" (ngSubmit)="login()">     <h1 class="mat-display-3">Login</h1>     <mat-form-field appearance="outline">         <mat-label>Email</mat-label>         <input matInput type="email" formControlName="email" required>         <mat-icon matPrefix>alternate_email</mat-icon>     </mat-form-field>     <mat-form-field appearance="outline">         <mat-label>Password</mat-label>         <input matInput type="password" formControlName="password" required>         <mat-icon matPrefix>vpn_key</mat-icon>     </mat-form-field>     <button mat-flat-button color="primary" [disabled]="!loginForm.valid">Login</button>     <p id="newAccount" class="mat-h3">Not registered yet? <a id="newAccountLink" routerLink="/signup">Create an account.</a></p> </form>

@NgModule({   declarations: [SummaryComponent, CodesComponent, EmptyComponent],   imports: [     RouterModule.forChild([       {         path: '', canActivate: [EmptyCartGuard], children: [           { path: 'cart', component: SummaryComponent },           { path: 'codes', component: CodesComponent }         ]       },       { path: 'empty', component: EmptyComponent }     ]),     MatDividerModule,     MatFormFieldModule,     MatInputModule,     MatMenuModule,     ReactiveFormsModule,     SharedModule   ] }) export class CartModule { }

@UntilDestroy({ checkProperties: true }) @Component({   selector: 'app-codes',   templateUrl: './codes.component.html',   styleUrls: ['./codes.component.css'] }) export class CodesComponent {   couponCode = new FormControl('');   giftCardCode = new FormControl('');    @ViewChild(FormControlDirective) codesDirective: FormControlDirective | undefined;    constructor(     private cart: CartService,     private order: OrderService,     private snackBar: MatSnackBar   ) { }    private updateOrder(order: Order, params: UpdateOrderParams[], codeType: string) {     this.order.updateOrder(order, params)       .subscribe(         () => {           this.snackBar.open(Successfully added $  {codeType} code., 'Close', { duration: 8000 });           this.couponCode.reset();           this.giftCardCode.reset();           this.codesDirective?.reset();         },         err => this.snackBar.open(There was a problem adding your $  {codeType} code., 'Close', { duration: 8000 })       );   }    addCoupon() {     this.updateOrder({ id: this.cart.orderId, couponCode: this.couponCode.value }, [UpdateOrderParams.couponCode], 'coupon');   }    addGiftCard() {     this.updateOrder({ id: this.cart.orderId, giftCardCode: this.giftCardCode.value }, [UpdateOrderParams.giftCardCode], 'gift card');   }  }

<div id="container">     <app-title title="Redeem a code" subtitle="Enter a coupon code or gift card" [centerText]="true"></app-title>     <div class="input-row">         <mat-form-field appearance="outline">             <mat-label>Coupon Code</mat-label>             <input matInput [formControl]="couponCode" required>             <mat-icon matPrefix>card_giftcard</mat-icon>         </mat-form-field>         <button class="redeem" mat-flat-button color="accent" [disabled]="couponCode.invalid" (click)="addCoupon()">Redeem</button>     </div>     <div class="input-row">         <mat-form-field appearance="outline">             <mat-label>Gift Card Code</mat-label>             <input matInput [formControl]="giftCardCode" required>             <mat-icon matPrefix>redeem</mat-icon>         </mat-form-field>         <button class="redeem" mat-flat-button color="accent" [disabled]="giftCardCode.invalid" (click)="addGiftCard()">Redeem</button>     </div>     <button color="primary" mat-flat-button routerLink="/cart">         <mat-icon>shopping_cart</mat-icon>         CONTINUE TO CART     </button> </div>

<app-simple-page title="Your cart is empty" subtitle="There is currently nothing in your cart. Head to the home page to add items." buttonText="GO TO HOME PAGE" icon="shopping_basket" [centerText]="true" route="/"> </app-simple-page>

@UntilDestroy({ checkProperties: true }) @Component({   selector: 'app-summary',   templateUrl: './summary.component.html',   styleUrls: ['./summary.component.css'] }) export class SummaryComponent implements OnInit {   order: Order = {};    summary: { name: string, amount: string | undefined, id: string }[] = [];    constructor(     private orders: OrderService,     private lineItems: LineItemService,     private cart: CartService,     private snackBar: MatSnackBar,     private router: Router   ) { }    ngOnInit() {     this.orders.getOrder(this.cart.orderId, GetOrderParams.cart)       .subscribe(         order => this.processOrder(order),         err => this.showOrderError('retrieving your cart')       );   }    private processOrder(order: Order) {     this.order = order;      this.summary = [       { name: 'Subtotal', amount: order.formattedSubtotalAmount, id: 'subtotal' },       { name: 'Discount', amount: order.formattedDiscountAmount, id: 'discount' },       { name: 'Taxes (included)', amount: order.formattedTotalTaxAmount, id: 'taxes' },       { name: 'Shipping', amount: order.formattedShippingAmount, id: 'shipping' },       { name: 'Gift Card', amount: order.formattedGiftCardAmount, id: 'gift-card' }     ];   }    private showOrderError(msg: string) {     this.snackBar.open(There was a problem $  {msg}., 'Close', { duration: 8000 });   }    checkout() {     this.router.navigateByUrl('/customer');   }    deleteLineItem(id: string) {     this.lineItems.deleteLineItem(id)       .pipe(         mergeMap(() => this.orders.getOrder(this.cart.orderId, GetOrderParams.cart))       ).subscribe(         order => {           this.processOrder(order);           this.cart.itemCount = order.skusCount || this.cart.itemCount;           this.snackBar.open(Item successfully removed from cart., 'Close', { duration: 8000 })         },         err => this.showOrderError('deleting your order')       );   } }

<div class="container" ngIf="order">     <h3 id="order-id">Order #{{order.number}} ({{order.skusCount}} items)</h3>     <div class="line-item" ngFor="let item of order.lineItems">         <div id="product-details">             <img ngIf="item.imageUrl" class="image-xs" src="{{item.imageUrl}}" alt="product photo">             <div ngIf="!item.imageUrl" class="image-xs no-image"></div>             <div id="line-details">                 <div>{{item.name}}</div>                 <div> {{item.formattedUnitAmount }} </div>             </div>         </div>         <div id="product-config">             <app-item-quantity [quantity]="item.quantity || 0" [disabled]="true"></app-item-quantity>             <div class="itemTotal"> {{item.formattedTotalAmount }} </div>             <button mat-icon-button color="warn" (click)="deleteLineItem(item.id || '')">                 <mat-icon>clear</mat-icon>         </button>         </div>     </div>     <mat-divider></mat-divider>     <div class="costSummary">         <div class="costItem" *ngFor="let item of summary" [id]="item.id">             <h3 class="costLabel">{{item.name}}</h3>             <p> {{item.amount }} </p>         </div>     </div>     <mat-divider></mat-divider>     <div class="costSummary">         <div class="costItem" id="total">             <h2 id="totalLabel">Total</h2>             <h2> {{order.formattedTotalAmountWithTaxes}} </h2>         </div>     </div>     <div id="checkout-button">         <button color="accent" mat-flat-button routerLink="/codes">         <mat-icon>redeem</mat-icon>         ADD GIFT CARD/COUPON     </button>         <button color="primary" mat-flat-button (click)="checkout()">         <mat-icon>point_of_sale</mat-icon>         CHECKOUT     </button>     </div> </div>

@NgModule({   declarations: [     CustomerComponent,     AddressComponent,     BillingAddressComponent,     ShippingAddressComponent,     ShippingMethodsComponent,     PaymentComponent,     PlaceOrderComponent,     AddressListComponent,     CountrySelectComponent,     CancelPaymentComponent   ],   imports: [     RouterModule.forChild([       {         path: '', canActivate: [EmptyCartGuard], children: [           { path: 'billing-address', component: BillingAddressComponent },           { path: 'cancel-payment', component: CancelPaymentComponent },           { path: 'customer', component: CustomerComponent },           { path: 'payment', component: PaymentComponent },           { path: 'place-order', component: PlaceOrderComponent },           { path: 'shipping-address', component: ShippingAddressComponent },           { path: 'shipping-methods', component: ShippingMethodsComponent }         ]       }     ]),     MatCardModule,     MatCheckboxModule,     MatDividerModule,     MatInputModule,     MatMenuModule,     MatRadioModule,     ReactiveFormsModule,     SharedModule   ] }) export class CheckoutModule { }

<button id="country-select" mat-stroked-button [matMenuTriggerFor]="countryMenu">     {{country}}     <mat-icon>expand_more</mat-icon> </button> <mat-menu #countryMenu="matMenu">     <button *ngFor="let cnt of countries" (click)="setCountry(cnt)" mat-menu-item>{{cnt.name}}</button> </mat-menu>

@Component({   selector: 'app-address',   templateUrl: './address.component.html',   styleUrls: ['./address.component.css'] }) export class AddressComponent {   @Input() buttonText: string = '';   @Input() showTitle?: boolean = false;    @Output() createAddress = new EventEmitter<Address>();    @Input() checkboxText: string = '';   @Output() isCheckboxChecked = new EventEmitter<boolean>();    countryCode: string = '';    addressForm = this.fb.group({     firstName: [''],     lastName: [''],     line1: [''],     city: [''],     zipCode: [''],     stateCode: [''],     phone: ['']   });    @ViewChild(FormGroupDirective) afDirective: FormGroupDirective | undefined;    constructor(private fb: FormBuilder) { }    setCountryCode(code: string) {     this.countryCode = code;   }    addAddress() {     this.createAddress.emit({       firstName: this.addressForm.get('firstName')?.value,       lastName: this.addressForm.get('lastName')?.value,       line1: this.addressForm.get('line1')?.value,       city: this.addressForm.get('city')?.value,       zipCode: this.addressForm.get('zipCode')?.value,       stateCode: this.addressForm.get('stateCode')?.value || 'N/A',       countryCode: this.countryCode,       phone: this.addressForm.get('phone')?.value     });   }    setCheckboxValue(change: MatCheckboxChange) {     if (this.isCheckboxChecked) {       this.isCheckboxChecked.emit(change.checked);     }   } }

<form id="container" [formGroup]="addressForm">     <p class="mat-headline" *ngIf="showTitle">Or add a new address</p>     <div class="row">         <mat-form-field appearance="outline">             <mat-label>First Name</mat-label>             <input matInput formControlName="firstName">         </mat-form-field>         <mat-form-field appearance="outline">             <mat-label>Last Name</mat-label>             <input matInput formControlName="lastName">         </mat-form-field>     </div>     <div class="row">         <mat-form-field appearance="outline">             <mat-label>Address</mat-label>             <input matInput formControlName="line1">         </mat-form-field>         <mat-form-field appearance="outline">             <mat-label>City</mat-label>             <input matInput formControlName="city">         </mat-form-field>     </div>     <div class="row">         <mat-form-field appearance="outline">             <mat-label>State Code</mat-label>             <input matInput formControlName="stateCode">         </mat-form-field>         <mat-form-field appearance="outline">             <mat-label>Zip Code</mat-label>             <input matInput formControlName="zipCode">         </mat-form-field>     </div>     <div class="row">         <mat-form-field appearance="outline">             <mat-label>Phone</mat-label>             <input matInput formControlName="phone">         </mat-form-field>         <app-country-select (setCountryEvent)="setCountryCode($  event)"></app-country-select>     </div>     <mat-checkbox color="accent" (change)="setCheckboxValue($  event)">         {{checkboxText}}     </mat-checkbox>     <button id="submit-button" mat-flat-button color="primary" (click)="addAddress()">         {{buttonText}}     </button> </form>

@Component({   selector: 'app-address-list',   templateUrl: './address-list.component.html',   styleUrls: ['./address-list.component.css'] }) export class AddressListComponent implements OnInit {   addresses: CustomerAddress[] = [];    @Output() setAddressEvent = new EventEmitter<string>();    constructor(     private session: SessionService,     private customerAddresses: CustomerAddressService,     private snackBar: MatSnackBar   ) { }    ngOnInit() {     this.session.loggedInStatus       .pipe(         mergeMap(           status => iif(() => status, this.customerAddresses.getCustomerAddresses())         ))       .subscribe(         addresses => {           if (addresses.length) {             this.addresses = addresses           }         },         err => this.snackBar.open('There was a problem getting your existing addresses.', 'Close', { duration: 8000 })       );   }    setAddress(change: MatRadioChange) {     this.setAddressEvent.emit(change.value);   } }

<div id="container">     <p class="mat-headline">Pick an existing address</p>     <mat-error ngIf="!addresses.length">You have no existing addresses</mat-error>     <mat-radio-group ngIf="addresses.length" class="addresses" (change)="setAddress($  event)">         <mat-card class="address" *ngFor="let address of addresses">             <mat-radio-button [value]="address.address?.id" color="primary">                 <p>{{address.address?.firstName}} {{address.address?.lastName}},</p>                 <p>{{address.address?.line1}},</p>                 <p>{{address.address?.city}},</p>                 <p>{{address.address?.zipCode}},</p>                 <p>{{address.address?.stateCode}}, {{address.address?.countryCode}}</p>                 <p>{{address.address?.phone}}</p>             </mat-radio-button>         </mat-card>     </mat-radio-group> </div>

@UntilDestroy({ checkProperties: true }) @Component({   selector: 'app-customer',   templateUrl: './customer.component.html',   styleUrls: ['./customer.component.css'] }) export class CustomerComponent implements OnInit {   email = new FormControl('', [Validators.required, Validators.email]);    constructor(     private orders: OrderService,     private customers: CustomerService,     private cart: CartService,     private router: Router,     private snackBar: MatSnackBar   ) { }    ngOnInit() {     this.customers.getCurrentCustomer()       .subscribe(         customer => this.email.setValue(customer.email)       );   }    addCustomerEmail() {     this.orders.updateOrder(       { id: this.cart.orderId, customerEmail: this.email.value },       [UpdateOrderParams.customerEmail])       .subscribe(         () => this.router.navigateByUrl('/billing-address'),         err => this.snackBar.open('There was a problem adding your email to the order.', 'Close', { duration: 8000 })       );   } }

<div id="container">     <app-title no="1" title="Customer" subtitle="Billing information and shipping address"></app-title>     <mat-form-field appearance="outline">         <mat-label>Email</mat-label>         <input matInput [formControl]="email" required>         <mat-icon matPrefix>alternate_email</mat-icon>     </mat-form-field>     <button mat-flat-button color="primary" [disabled]="email.invalid" (click)="addCustomerEmail()">         PROCEED TO BILLING ADDRESS     </button> </div>

@UntilDestroy({ checkProperties: true }) @Component({   selector: 'app-billing-address',   templateUrl: './billing-address.component.html',   styleUrls: ['./billing-address.component.css'] }) export class BillingAddressComponent implements OnInit {   showAddresses: boolean = false;   sameShippingAddressAsBilling: boolean = false;   selectedCustomerAddressId: string = '';    constructor(     private addresses: AddressService,     private snackBar: MatSnackBar,     private session: SessionService,     private orders: OrderService,     private cart: CartService,     private router: Router,     private customerAddresses: CustomerAddressService) { }    ngOnInit() {     this.session.loggedInStatus       .subscribe(         status => this.showAddresses = status       );   }    updateBillingAddress(address: Address) {     if (this.showAddresses && this.selectedCustomerAddressId) {       this.cloneAddress();     } else if (address.firstName && address.lastName && address.line1 && address.city && address.zipCode && address.stateCode && address.countryCode && address.phone) {       this.createAddress(address);     }     else {       this.snackBar.open('Check your address. Some fields are missing.', 'Close');     }   }    setCustomerAddress(customerAddressId: string) {     this.selectedCustomerAddressId = customerAddressId;   }    setSameShippingAddressAsBilling(change: boolean) {     this.sameShippingAddressAsBilling = change;   }    private createAddress(address: Address) {     this.addresses.createAddress(address)       .pipe(         concatMap(           address => {             const update = this.updateOrderObservable({               id: this.cart.orderId,               billingAddressId: address.id             }, [UpdateOrderParams.billingAddress]);              if (this.showAddresses) {               return combineLatest([update, this.customerAddresses.createCustomerAddress(address.id || '', '')]);             } else {               return update;             }           }))       .subscribe(         () => this.showSuccessSnackBar(),         err => this.showErrorSnackBar()       );   }    private cloneAddress() {     this.updateOrderObservable({       id: this.cart.orderId,       billingAddressCloneId: this.selectedCustomerAddressId     }, [UpdateOrderParams.billingAddressClone])       .subscribe(         () => this.showSuccessSnackBar(),         err => this.showErrorSnackBar()       );   }    private updateOrderObservable(order: Order, updateParams: UpdateOrderParams[]): Observable<any> {     return iif(() => this.sameShippingAddressAsBilling,       concat([         this.orders.updateOrder(order, updateParams),         this.orders.updateOrder(order, [UpdateOrderParams.shippingAddressSameAsBilling])       ]),       this.orders.updateOrder(order, updateParams)     );   }    private showErrorSnackBar() {     this.snackBar.open('There was a problem creating your address.', 'Close', { duration: 8000 });   }    private navigateTo(path: string) {     setTimeout(() => this.router.navigateByUrl(path), 4000);   }    private showSuccessSnackBar() {     this.snackBar.open('Billing address successfully added. Redirecting...', 'Close', { duration: 3000 });     if (this.sameShippingAddressAsBilling) {       this.navigateTo('/shipping-methods');     } else {       this.navigateTo('/shipping-address');     }   } }

<app-title no="2" title="Billing Address" subtitle="Address to bill charges to"></app-title> <app-address-list ngIf="showAddresses" (setAddressEvent)="setCustomerAddress($  event)"></app-address-list> <mat-divider ngIf="showAddresses"></mat-divider> <app-address [showTitle]="showAddresses" buttonText="PROCEED TO NEXT STEP" checkboxText="Ship to the same address" (isCheckboxChecked)="setSameShippingAddressAsBilling($  event)" (createAddress)="updateBillingAddress($  event)"></app-address>

@UntilDestroy({ checkProperties: true }) @Component({   selector: 'app-shipping-address',   templateUrl: './shipping-address.component.html',   styleUrls: ['./shipping-address.component.css'] }) export class ShippingAddressComponent implements OnInit {   showAddresses: boolean = false;   sameBillingAddressAsShipping: boolean = false;   selectedCustomerAddressId: string = '';    constructor(     private addresses: AddressService,     private snackBar: MatSnackBar,     private session: SessionService,     private orders: OrderService,     private cart: CartService,     private router: Router,     private customerAddresses: CustomerAddressService) { }    ngOnInit() {     this.session.loggedInStatus       .subscribe(         status => this.showAddresses = status       );   }    updateShippingAddress(address: Address) {     if (this.showAddresses && this.selectedCustomerAddressId) {       this.cloneAddress();     } else if (address.firstName && address.lastName && address.line1 && address.city && address.zipCode && address.stateCode && address.countryCode && address.phone) {       this.createAddress(address);     }     else {       this.snackBar.open('Check your address. Some fields are missing.', 'Close');     }   }    setCustomerAddress(customerAddressId: string) {     this.selectedCustomerAddressId = customerAddressId;   }    setSameBillingAddressAsShipping(change: boolean) {     this.sameBillingAddressAsShipping = change;   }    private createAddress(address: Address) {     this.addresses.createAddress(address)       .pipe(         concatMap(           address => {             const update = this.updateOrderObservable({               id: this.cart.orderId,               shippingAddressId: address.id             }, [UpdateOrderParams.shippingAddress]);              if (this.showAddresses) {               return combineLatest([update, this.customerAddresses.createCustomerAddress(address.id || '', '')]);             } else {               return update;             }           }))       .subscribe(         () => this.showSuccessSnackBar(),         err => this.showErrorSnackBar()       );   }    private cloneAddress() {     this.updateOrderObservable({       id: this.cart.orderId,       shippingAddressCloneId: this.selectedCustomerAddressId     }, [UpdateOrderParams.shippingAddressClone])       .subscribe(         () => this.showSuccessSnackBar(),         err => this.showErrorSnackBar()       );   }    private updateOrderObservable(order: Order, updateParams: UpdateOrderParams[]): Observable<any> {     return iif(() => this.sameBillingAddressAsShipping,       concat([         this.orders.updateOrder(order, updateParams),         this.orders.updateOrder(order, [UpdateOrderParams.billingAddressSameAsShipping])       ]),       this.orders.updateOrder(order, updateParams)     );   }    private showErrorSnackBar() {     this.snackBar.open('There was a problem creating your address.', 'Close', { duration: 8000 });   }    private showSuccessSnackBar() {     this.snackBar.open('Shipping address successfully added. Redirecting...', 'Close', { duration: 3000 });      setTimeout(() => this.router.navigateByUrl('/shipping-methods'), 4000);   } }

<app-title no="3" title="Shipping Address" subtitle="Address to ship package to"></app-title> <app-address-list ngIf="showAddresses" (setAddressEvent)="setCustomerAddress($  event)"></app-address-list> <mat-divider ngIf="showAddresses"></mat-divider> <app-address [showTitle]="showAddresses" buttonText="PROCEED TO SHIPPING METHODS" checkboxText="Bill to the same address" (isCheckboxChecked)="setSameBillingAddressAsShipping($  event)" (createAddress)="updateShippingAddress($  event)"></app-address>

@UntilDestroy({ checkProperties: true }) @Component({   selector: 'app-shipping-methods',   templateUrl: './shipping-methods.component.html',   styleUrls: ['./shipping-methods.component.css'] }) export class ShippingMethodsComponent implements OnInit {   shipments: Shipment[] | undefined = [];   shipmentsForm: FormGroup = this.fb.group({});    constructor(     private orders: OrderService,     private dlts: DeliveryLeadTimeService,     private cart: CartService,     private router: Router,     private fb: FormBuilder,     private shipments: ShipmentService,     private snackBar: MatSnackBar   ) { }    ngOnInit() {     combineLatest([       this.orders.getOrder(this.cart.orderId, GetOrderParams.shipments),       this.dlts.getDeliveryLeadTimes()     ]).subscribe(       ([lineItems, deliveryLeadTimes]) => {         let li: LineItem;         let lt: DeliveryLeadTime[];          this.shipments = lineItems.shipments?.map((shipment) => {           if (shipment.id) {             this.shipmentsForm.addControl(shipment.id, new FormControl('', Validators.required));           }            if (shipment.lineItems) {             shipment.lineItems = shipment.lineItems.map(item => {               li = this.findItem(lineItems, item.skuCode || '');               item.imageUrl = li.imageUrl;               item.name = li.name;               return item;             });           }            if (shipment.availableShippingMethods) {             lt = this.findLocationLeadTime(deliveryLeadTimes, shipment);             shipment.availableShippingMethods = shipment.availableShippingMethods?.map(               method => {                 method.deliveryLeadTime = this.findMethodLeadTime(lt, method);                 return method;               });           }            return shipment;         });       },       err => this.router.navigateByUrl('/error')     );   }    setShipmentMethods() {     const shipmentsFormValue = this.shipmentsForm.value;      combineLatest(Object.keys(shipmentsFormValue).map(       key => this.shipments.updateShipment(key, shipmentsFormValue[key])     )).subscribe(       () => {         this.snackBar.open('Your shipments have been updated with a shipping method.', 'Close', { duration: 3000 });         setTimeout(() => this.router.navigateByUrl('/payment'), 4000);       },       err => this.snackBar.open('There was a problem adding shipping methods to your shipments.', 'Close', { duration: 5000 })     );   }     private findItem(lineItems: LineItem[], skuCode: string): LineItem {     return lineItems.filter((item) => item.skuCode == skuCode)[0];   }    private findLocationLeadTime(times: DeliveryLeadTime[], shipment: Shipment): DeliveryLeadTime[] {     return times.filter((dlTime) => dlTime?.stockLocation?.id == shipment?.stockLocation?.id);   }    private findMethodLeadTime(times: DeliveryLeadTime[], method: ShippingMethod): DeliveryLeadTime {     return times.filter((dlTime) => dlTime?.shippingMethod?.id == method?.id)[0];   } }

<form id="container" [formGroup]="shipmentsForm">     <app-title no="4" title="Shipping Methods" subtitle="How to ship your packages"></app-title>     <div class="shipment-container" ngFor="let shipment of shipments; let j = index; let isLast = last">         <h1>Shipment {{j+1}} of {{shipments?.length}}</h1>         <div class="row" ngFor="let item of shipment.lineItems">             <img class="image-xs" [src]="item.imageUrl" alt="product photo">             <div id="shipment-details">                 <h4 id="item-name">{{item.name}}</h4>                 <p>{{item.skuCode}}</p>             </div>             <div id="quantity-section">                 <p id="quantity-label">Quantity: </p>{{item.quantity}}             </div>         </div>         <mat-radio-group [formControlName]="shipment?.id || j">             <mat-radio-button ngFor="let method of shipment.availableShippingMethods" [value]="method.id">                 <div class="radio-button">                     <p>{{method.name}}</p>                     <div>                         <p class="radio-label">Cost:</p>                         <p> {{method.formattedPriceAmount}}</p>                     </div>                     <div>                         <p class="radio-label">Timeline:</p>                         <p> Available in {{method.deliveryLeadTime?.minDays}}-{{method.deliveryLeadTime?.maxDays}} days</p>                     </div>                 </div>             </mat-radio-button>         </mat-radio-group>         <mat-divider ngIf="!isLast"></mat-divider>     </div>     <button mat-flat-button color="primary" [disabled]="shipmentsForm.invalid" (click)="setShipmentMethods()">PROCEED TO PAYMENT</button> </form>

@UntilDestroy({ checkProperties: true }) @Component({   selector: 'app-payment',   templateUrl: './payment.component.html',   styleUrls: ['./payment.component.css'] }) export class PaymentComponent implements OnInit {   approvalUrl: string = '';    constructor(     private orders: OrderService,     private cart: CartService,     private router: Router,     private payments: PaypalPaymentService   ) { }    ngOnInit() {     const orderId = this.cart.orderId;      this.orders.getOrder(orderId, GetOrderParams.paymentSource)       .pipe(         concatMap((order: Order) => {           const paymentSourceId = order.paymentSource?.id;            const paymentMethod = order.availablePaymentMethods?.filter(             (method) => method.paymentSourceType == 'paypal_payments'           )[0];            return iif(             () => paymentSourceId ? true : false,             this.payments.getPaypalPayment(paymentSourceId || ''),             this.orders.updateOrder({               id: orderId,               paymentMethodId: paymentMethod?.id             }, [UpdateOrderParams.paymentMethod])               .pipe(concatMap(                 order => this.payments.createPaypalPayment({                   orderId: orderId,                   cancelUrl: $  {environment.clientUrl}/cancel-payment,                   returnUrl: $  {environment.clientUrl}/place-order                 })               ))           );         }))       .subscribe(         paypalPayment => this.approvalUrl = paypalPayment?.approvalUrl || '',         err => this.router.navigateByUrl('/error')       );   }    navigateToPaypal() {     window.location.href = this.approvalUrl;   } }

<app-simple-page number="5" title="Payment" subtitle="Pay for your order" buttonText="PROCEED TO PAY WITH PAYPAL" icon="point_of_sale" (buttonEvent)="navigateToPaypal()" [buttonDisabled]="approvalUrl.length ? false : true"></app-simple-page>

<app-simple-page title="Payment cancelled" subtitle="Your Paypal payment has been cancelled" icon="money_off" buttonText="GO TO HOME" [centerText]="true" route="/"></app-simple-page>

@UntilDestroy({ checkProperties: true }) @Component({   selector: 'app-place-order',   templateUrl: './place-order.component.html',   styleUrls: ['./place-order.component.css'] }) export class PlaceOrderComponent implements OnInit {   disableButton = true;    constructor(     private route: ActivatedRoute,     private router: Router,     private payments: PaypalPaymentService,     private orders: OrderService,     private cart: CartService,     private snackBar: MatSnackBar   ) { }    ngOnInit() {     this.route.queryParams       .pipe(         concatMap(params => {           const payerId = params['PayerID'];           const orderId = this.cart.orderId;            return iif(             () => payerId.length > 0,             this.orders.getOrder(orderId, GetOrderParams.paymentSource)               .pipe(                 concatMap(order => {                   const paymentSourceId = order.paymentSource?.id || '';                    return iif(                     () => paymentSourceId ? paymentSourceId.length > 0 : false,                     this.payments.updatePaypalPayment(paymentSourceId, payerId)                   );                 })               )           );         }))       .subscribe(         () => this.disableButton = false,         () => this.router.navigateByUrl('/error')       );   }    placeOrder() {     this.disableButton = true;      this.orders.updateOrder({       id: this.cart.orderId,       place: true     }, [UpdateOrderParams.place])       .subscribe(         () => {           this.snackBar.open('Your order has been successfully placed.', 'Close', { duration: 3000 });           this.cart.clearCart();           setTimeout(() => this.router.navigateByUrl('/'), 4000);         },         () => {           this.snackBar.open('There was a problem placing your order.', 'Close', { duration: 8000 });           this.disableButton = false;         }       );   } }

<app-simple-page title="Finalize Order" subtitle="Complete your order" [number]="'6'" icon="shopping_bag" buttonText="PLACE YOUR ORDER" (buttonEvent)="placeOrder()" [buttonDisabled]="disableButton"></app-simple-page>

@NgModule({   declarations: [     AppComponent   ],   imports: [     BrowserModule,     AppRoutingModule,     HttpClientModule,     BrowserAnimationsModule,     AuthModule,     ProductsModule,     CartModule,     CheckoutModule,     CoreModule   ],   providers: [     {       provide: HTTP_INTERCEPTORS,       useClass: OptionsInterceptor,       multi: true     },     {       provide: APP_INITIALIZER,       useFactory: (http: HttpClient) => () => http.post<object>(         $  {environment.apiUrl}/oauth/token,         { 'grantType': 'client_credentials' },         { withCredentials: true }),       multi: true,       deps: [HttpClient]     }   ],   bootstrap: [AppComponent] }) export class AppModule { }

@NgModule({   declarations: [SimplePageComponent, TitleComponent, WordWrapPipe, ItemQuantityComponent],   imports: [CommonModule, MatIconModule, MatButtonModule, MatTooltipModule, MatMenuModule, RouterModule],   exports: [     CommonModule,     ItemQuantityComponent,     MatButtonModule,     MatIconModule,     MatSnackBarModule,     MatTooltipModule,     SimplePageComponent,     TitleComponent,     WordWrapPipe   ] }) export class SharedModule { }

<button mat-stroked-button [matMenuTriggerFor]="menu" [disabled]="disabled">     {{quantity}}     <mat-icon ngIf="!disabled">expand_more</mat-icon> </button> <mat-menu #menu="matMenu">     <button ngFor="let no of values" (click)="setQuantity(no)" mat-menu-item>{{no}}</button> </mat-menu>

<div id="container">     <app-title no="{{number}}" title="{How To Build An E-Commerce Site With Angular 11, Commerce Layer And Paypal}" subtitle="{{subtitle}}" [centerText]="centerText"></app-title>     <div *ngIf="icon" id="icon-container">         <mat-icon color="primary" class="icon">{{icon}}</mat-icon>     </div>     <button mat-flat-button color="primary" (click)="buttonClicked()" [disabled]="buttonDisabled">         {{buttonText}}     </button> </div>

@Injectable({   providedIn: 'root' }) export class HttpErrorHandler {    constructor() { }    handleError(err: HttpErrorResponse): Observable {     let displayMessage = '';      if (err.error instanceof ErrorEvent) {       displayMessage = Client-side error: $  {err.error.message};     } else {       displayMessage = Server-side error: $  {err.message};     }      return throwError(displayMessage);   } }

@Injectable({   providedIn: 'root' }) export class AddressService {   private url: string = $  {environment.apiUrl}/api/addresses;    constructor(private http: HttpClient, private eh: HttpErrorHandler) { }    createAddress(address: Address): Observable<Address> {     return this.http.post<Address>(this.url, address)       .pipe(catchError(this.eh.handleError));   }    getAddress(id: string): Observable<Address> {     return this.http.get<Address>($  {this.url}/$  {id})       .pipe(catchError(this.eh.handleError));   } }

@Injectable({   providedIn: 'root' }) export class CartService {   private cart = new BehaviorSubject({     orderId: this.orderId,     itemCount: this.itemCount   });    cartValue$   = this.cart.asObservable();    constructor(private storage: LocalStorageService) { }    get orderId(): string {     const id = this.storage.getItem('order-id');     return id ? id : '';   }    set orderId(id: string) {     this.storage.addItem('order-id', id);     this.cart.next({ orderId: id, itemCount: this.itemCount });   }    get itemCount(): number {     const itemCount = this.storage.getItem('item-count');      return itemCount ? parseInt(itemCount) : 0;   }    set itemCount(amount: number) {     this.storage.addItem('item-count', amount.toString());     this.cart.next({ orderId: this.orderId, itemCount: amount });   }    incrementItemCount(amount: number) {     this.itemCount = this.itemCount + amount;   }    decrementItemCount(amount: number) {     this.itemCount = this.itemCount - amount;   }    clearCart() {     this.storage.deleteItem('item-count');     this.cart.next({ orderId: '', itemCount: 0 });   } }

@Injectable({   providedIn: 'root' }) export class CountryService {    constructor(private http: HttpClient) { }    getCountries(): Observable<Country[]> {     return this.http.get<Country[]>('./../../../assets/json/country-codes.json');   } }

@Injectable({   providedIn: 'root' }) export class CustomerAddressService {   private url: string = $  {environment.apiUrl}/api/customer_addresses;    constructor(private http: HttpClient, private eh: HttpErrorHandler) { }    createCustomerAddress(addressId: string, customerId: string): Observable<CustomerAddress> {     return this.http.post<CustomerAddress>(this.url, {       addressId: addressId, customerId: customerId     })       .pipe(catchError(this.eh.handleError));   }    getCustomerAddresses(): Observable<CustomerAddress[]> {     return this.http.get<CustomerAddress[]>($  {this.url})       .pipe(catchError(this.eh.handleError));   }    getCustomerAddress(id: string): Observable<CustomerAddress> {     return this.http.get<CustomerAddress>($  {this.url}/$  {id})       .pipe(catchError(this.eh.handleError));   } }

@Injectable({   providedIn: 'root' }) export class CustomerService {   private url: string = $  {environment.apiUrl}/api/customers;    constructor(private http: HttpClient, private eh: HttpErrorHandler) { }    createCustomer(email: string, password: string, firstName: string, lastName: string): Observable<Customer> {     return this.http.post<Customer>(this.url, {       email: email,       password: password,       firstName: firstName,       lastName: lastName     })       .pipe(catchError(this.eh.handleError));   }    getCurrentCustomer(): Observable<Customer> {     return this.http.get<Customer>($  {this.url}/current)       .pipe(catchError(this.eh.handleError));   }    getCustomer(id: string): Observable<Customer> {     return this.http.get<Customer>($  {this.url}/$  {id})       .pipe(catchError(this.eh.handleError));   } }

@Injectable({   providedIn: 'root' }) export class DeliveryLeadTimeService {   private url: string = $  {environment.apiUrl}/api/delivery_lead_times;    constructor(private http: HttpClient, private eh: HttpErrorHandler) { }    getDeliveryLeadTimes(): Observable<DeliveryLeadTime[]> {     return this.http.get<DeliveryLeadTime[]>(this.url)       .pipe(catchError(this.eh.handleError));   } }

@Injectable({   providedIn: 'root' }) export class LineItemService {   private url: string = $  {environment.apiUrl}/api/line_items;    constructor(private http: HttpClient, private eh: HttpErrorHandler) { }    createLineItem(lineItem: LineItem): Observable<LineItem> {     return this.http.post<LineItem>(this.url, lineItem)       .pipe(catchError(this.eh.handleError));   }    getLineItem(id: string): Observable<LineItem> {     return this.http.get<LineItem>($  {this.url}/$  {id})       .pipe(catchError(this.eh.handleError));   }    updateLineItem(id: string, quantity: number): Observable<LineItem> {     return this.http.patch<LineItem>($  {this.url}/$  {id}, { quantity: quantity })       .pipe(catchError(this.eh.handleError));   }    deleteLineItem(id: string): Observable<LineItem> {     return this.http.delete<LineItem>($  {this.url}/$  {id})       .pipe(catchError(this.eh.handleError));   } }

@Injectable({   providedIn: 'root' }) export class OrderService {   private url: string = $  {environment.apiUrl}/api/orders;    constructor(     private http: HttpClient,     private eh: HttpErrorHandler) { }    createOrder(): Observable<Order> {     return this.http.post<Order>(this.url, {})       .pipe(catchError(this.eh.handleError));   }    getOrder(id: string, orderParam: GetOrderParams): Observable<Order> {     let params = {};     if (orderParam != GetOrderParams.none) {       params = { [orderParam]: 'true' };     }      return this.http.get<Order>($  {this.url}/$  {id}, { params: params })       .pipe(catchError(this.eh.handleError));   }    updateOrder(order: Order, params: UpdateOrderParams[]): Observable<Order> {     let updateParams = [];     for (const param of params) {       updateParams.push(param.toString());     }      return this.http.patch<Order>(       $  {this.url}/$  {order.id},       order,       { params: { 'field': updateParams } }     )       .pipe(catchError(this.eh.handleError));   }    getOrderShipments(id: string): Observable<Shipment[]> {     return this.http.get<Shipment[]>($  {this.url}/$  {id}/shipments)       .pipe(catchError(this.eh.handleError));   } }

@Injectable({   providedIn: 'root' }) export class PaypalPaymentService {   private url: string = $  {environment.apiUrl}/api/paypal_payments;    constructor(private http: HttpClient, private eh: HttpErrorHandler) { }    createPaypalPayment(payment: PaypalPayment): Observable<PaypalPayment> {     return this.http.post<PaypalPayment>(this.url, payment)       .pipe(catchError(this.eh.handleError));   }    getPaypalPayment(id: string): Observable<PaypalPayment> {     return this.http.get<PaypalPayment>($  {this.url}/$  {id})       .pipe(catchError(this.eh.handleError));   }    updatePaypalPayment(id: string, paypalPayerId: string): Observable<PaypalPayment> {     return this.http.patch<PaypalPayment>(       $  {this.url}/$  {id},       { paypalPayerId: paypalPayerId }     )       .pipe(catchError(this.eh.handleError));   } }

@Injectable({   providedIn: 'root' }) export class ShipmentService {   private url: string = $  {environment.apiUrl}/api/shipments;    constructor(private http: HttpClient, private eh: HttpErrorHandler) { }    getShipment(id: string): Observable<Shipment> {     return this.http.get<Shipment>($  {this.url}/$  {id})       .pipe(catchError(this.eh.handleError));   }    updateShipment(id: string, shippingMethodId: string): Observable<Shipment> {     return this.http.patch<Shipment>(       $  {this.url}/$  {id},       { shippingMethodId: shippingMethodId }     )       .pipe(catchError(this.eh.handleError));   } }

@Injectable({   providedIn: 'root' }) export class SkuService {   private url: string = $  {environment.apiUrl}/api/skus;    constructor(private http: HttpClient, private eh: HttpErrorHandler) { }    getSku(id: string): Observable<Sku> {     return this.http.get<Sku>($  {this.url}/$  {id})       .pipe(catchError(this.eh.handleError));   }    getSkus(page: number, pageSize: number): Observable<Sku[]> {     return this.http.get<Sku[]>(       this.url,       {         params: {           'page': page.toString(),           'pageSize': pageSize.toString()         }       })       .pipe(catchError(this.eh.handleError));   } }

ng g m core ng g g core/guards/empty-cart ng g s core/header/header ng g interceptor core/interceptors/options for comp in header error not-found; do ng g c "core/$  {comp}"; done for serv in authentication session; do ng g s "core/authentication/$  {serv}"; done

@NgModule({   declarations: [HeaderComponent, NotFoundComponent, ErrorComponent],   imports: [     RouterModule.forChild([       { path: '404', component: NotFoundComponent },       { path: 'error', component: ErrorComponent },       { path: '**', redirectTo: '/404' }     ]),     MatBadgeModule,     SharedModule   ],   exports: [HeaderComponent] }) export class CoreModule { }

@Injectable({   providedIn: 'root' }) export class AuthenticationService {   private url: string = $  {environment.apiUrl}/oauth/token;    constructor(private http: HttpClient, private eh: HttpErrorHandler) { }    getClientSession(): Observable<object> {     return this.http.post<object>(       this.url,       { grantType: 'client_credentials' })       .pipe(catchError(this.eh.handleError));   }    login(email: string, password: string): Observable<object> {     return this.http.post<object>(       this.url,       { username: email, password: password, grantType: 'password' })       .pipe(catchError(this.eh.handleError));   } }

@Injectable({   providedIn: 'root' }) export class SessionService {   private url: string = $  {environment.apiUrl}/session;   private isLoggedIn = new BehaviorSubject(false);    loggedInStatus = this.isLoggedIn.asObservable();    constructor(private http: HttpClient, private eh: HttpErrorHandler) { }    setLoggedInStatus(status: boolean) {     this.isLoggedIn.next(status);   }    isCustomerLoggedIn(): Observable<{ message: string }> {     return this.http.get<{ message: string }>($  {this.url}/customer/status)       .pipe(catchError(this.eh.handleError));   }    logout(): Observable<{ message: string }> {     return this.http.get<{ message: string }>($  {this.url}/destroy)       .pipe(catchError(this.eh.handleError));   } }

@Injectable({   providedIn: 'root' }) export class HeaderService {   private headerButtonsVisibility = new BehaviorSubject(true);    showHeaderButtons = this.headerButtonsVisibility.asObservable();    constructor() { }    setHeaderButtonsVisibility(visible: boolean) {     this.headerButtonsVisibility.next(visible);   } }

<app-simple-page title="An error occurred" subtitle="There was a problem fetching your page" buttonText="GO TO HOME" icon="report" [centerText]="true" route="/"> </app-simple-page>

<app-simple-page title="404: Page not found" buttonText="GO TO HOME" icon="search" subtitle="The requested page could not be found" [centerText]="true" route="/"></app-simple-page>

@UntilDestroy({ checkProperties: true }) @Component({   selector: 'app-header',   templateUrl: './header.component.html',   styleUrls: ['./header.component.css'] }) export class HeaderComponent implements OnInit {   cartAmount: number = 0;   isLoggedIn: boolean = false;   showButtons: boolean = true;    constructor(     private session: SessionService,     private snackBar: MatSnackBar,     private cart: CartService,     private header: HeaderService,     private auth: AuthenticationService   ) { }    ngOnInit() {     this.session.isCustomerLoggedIn()       .subscribe(         () => {           this.isLoggedIn = true;           this.session.setLoggedInStatus(true);         }       );      this.session.loggedInStatus.subscribe(status => this.isLoggedIn = status);      this.header.showHeaderButtons.subscribe(visible => this.showButtons = visible);      this.cart.cartValue$  .subscribe(cart => this.cartAmount = cart.itemCount);   }    logout() {     concat(       this.session.logout(),       this.auth.getClientSession()     ).subscribe(       () => {         this.snackBar.open('You have been logged out.', 'Close', { duration: 4000 });         this.session.setLoggedInStatus(false);       },       err => this.snackBar.open('There was a problem logging you out.', 'Close', { duration: 4000 })     );   } }

<div id="header-container">     <div id="left-half" routerLink="/">         <h1><span id="lime-text">Lime</span><span id="store-text">Store</span></h1>     </div>     <div id="right-half">         <div id="button-container" ngIf="showButtons">             <button mat-icon-button color="primary" aria-label="shopping cart">                 <mat-icon [matBadge]="cartAmount" matBadgeColor="accent" aria-label="shopping cart" routerLink="/cart">shopping_cart</mat-icon>             </button>             <button mat-icon-button color="primary" aria-label="login" ngIf="!isLoggedIn">                 <mat-icon aria-label="login" matTooltip="login" routerLink="/login">login</mat-icon>             </button>             <button mat-icon-button color="primary" aria-label="logout" *ngIf="isLoggedIn" (click)="logout()">                 <mat-icon aria-label="logout" matTooltip="logout">logout</mat-icon>             </button>         </div>     </div> </div>

@Injectable({   providedIn: 'root' }) export class EmptyCartGuard implements CanActivate {   constructor(private cart: CartService, private router: Router) { }    canActivate(     route: ActivatedRouteSnapshot,     state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {     if (this.cart.orderId) {       if (this.cart.itemCount > 0) {         return true;       }     }      return this.router.parseUrl('/empty');   } }

@Injectable() export class OptionsInterceptor implements HttpInterceptor {    constructor() { }    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {     request = request.clone({       headers: request.headers.set('Content-Type', 'application/json'),       withCredentials: true     });      return next.handle(request);   } }

@UntilDestroy({ checkProperties: true }) @Component({   selector: 'app-product-list',   templateUrl: './product-list.component.html',   styleUrls: ['./product-list.component.css'] }) export class ProductListComponent implements OnInit {   cols = 4;   length = 0;   pageIndex = 0;   pageSize = 20;   pageSizeOptions: number[] = [5, 10, 20];    pageEvent!: PageEvent | void;    products: Sku[] = [];    constructor(     private breakpointObserver: BreakpointObserver,     private skus: SkuService,     private router: Router,     private header: HeaderService) { }    ngOnInit() {     this.getProducts(1, 20);     this.header.setHeaderButtonsVisibility(true);      this.breakpointObserver.observe([       Breakpoints.Handset,       Breakpoints.Tablet,       Breakpoints.Web     ]).subscribe(result => {       if (result.matches) {         if (result.breakpoints['(max-width: 599.98px) and (orientation: portrait)'] || result.breakpoints['(max-width: 599.98px) and (orientation: landscape)']) {           this.cols = 1;         }         else if (result.breakpoints['(min-width: 1280px) and (orientation: portrait)'] || result.breakpoints['(min-width: 1280px) and (orientation: landscape)']) {           this.cols = 4;         } else {           this.cols = 3;         }       }     });   }    private getProducts(page: number, pageSize: number) {     this.skus.getSkus(page, pageSize)       .subscribe(         skus => {           this.products = skus;           this.length = skus[0].__collectionMeta.recordCount;         },         err => this.router.navigateByUrl('/error')       );   }    getNextPage(event: PageEvent) {     this.getProducts(event.pageIndex + 1, event.pageSize);   }    trackSkus(index: number, item: Sku) {     return $  {item.id}-$  {index};   } }

<mat-grid-list cols="{{cols}}" rowHeight="400px" gutterSize="20px" class="grid-layout">     <mat-grid-tile *ngFor="let product of products; trackBy: trackSkus">         <mat-card>             <img id="card-image" mat-card-image src="{{product.imageUrl}}" alt="product photo">             <mat-card-content>                 <mat-card-title matTooltip="{{product.name}}">{{product.name |wordWrap:35}}</mat-card-title>                 <mat-card-subtitle>{{product.prices[0].compareAtAmountFloat | currency:'EUR'}}</mat-card-subtitle>             </mat-card-content>             <mat-card-actions>                 <button mat-flat-button color="primary" [routerLink]="['/product', product.id]">                     View                 </button>             </mat-card-actions>         </mat-card>     </mat-grid-tile> </mat-grid-list> <mat-paginator [length]="length" [pageIndex]="pageIndex" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" (page)="pageEvent = getNextPage($  event)"> </mat-paginator>

@UntilDestroy({ checkProperties: true }) @Component({   selector: 'app-product',   templateUrl: './product.component.html',   styleUrls: ['./product.component.css'] }) export class ProductComponent implements OnInit {   id: string = '';   product!: Sku;   quantity: number = 0;    constructor(     private route: ActivatedRoute,     private skus: SkuService,     private location: Location,     private router: Router,     private header: HeaderService,     private orders: OrderService,     private lineItems: LineItemService,     private cart: CartService,     private snackBar: MatSnackBar   ) { }    ngOnInit() {     this.route.paramMap       .pipe(         mergeMap(params => {           const id = params.get('id')           this.id = id ? id : '';            return this.skus.getSku(this.id);         }),         tap((sku) => {           this.product = sku;         })       ).subscribe({         error: (err) => this.router.navigateByUrl('/error')       });      this.header.setHeaderButtonsVisibility(true);   }    addItemToCart() {     if (this.quantity > 0) {       if (this.cart.orderId == '') {         this.orders.createOrder()           .pipe(             mergeMap((order: Order) => {               this.cart.orderId = order.id || '';                return this.lineItems.createLineItem({                 orderId: order.id,                 name: this.product.name,                 imageUrl: this.product.imageUrl,                 quantity: this.quantity,                 skuCode: this.product.code               });             })           )           .subscribe(             () => {               this.cart.incrementItemCount(this.quantity);               this.showSuccessSnackBar();             },             err => this.showErrorSnackBar()           );       } else {         this.lineItems.createLineItem({           orderId: this.cart.orderId,           name: this.product.name,           imageUrl: this.product.imageUrl,           quantity: this.quantity,           skuCode: this.product.code         }).subscribe(           () => {             this.cart.incrementItemCount(this.quantity);             this.showSuccessSnackBar();           },           err => this.showErrorSnackBar()         );       }     } else {       this.snackBar.open('Select a quantity greater than 0.', 'Close', { duration: 8000 });     }   }    setQuantity(no: number) {     this.quantity = no;   }    goBack() {     this.location.back();   }    private showSuccessSnackBar() {     this.snackBar.open('Item successfully added to cart.', 'Close', { duration: 8000 });   }    private showErrorSnackBar() {     this.snackBar.open('Failed to add your item to the cart.', 'Close', { duration: 8000 });   } }

<div id="container">     <mat-card *ngIf="product" class="product-card">         <img mat-card-image src="{{product.imageUrl}}" alt="Photo of a product">         <mat-card-content>             <mat-card-title>{{product.name}}</mat-card-title>             <mat-card-subtitle>{{product.prices[0].compareAtAmountFloat | currency:'EUR'}}</mat-card-subtitle>             <p>                 {{product.description}}             </p>         </mat-card-content>         <mat-card-actions>             <app-item-quantity [quantity]="quantity" [maxValue]="10" (setQuantityEvent)="setQuantity($  event)"></app-item-quantity>             <button mat-raised-button color="accent" (click)="addItemToCart()">                 <mat-icon>add_shopping_cart</mat-icon>                 Add to cart             </button>             <button mat-raised-button color="primary" (click)="goBack()">                 <mat-icon>storefront</mat-icon>                 Continue shopping             </button>         </mat-card-actions>     </mat-card> </div>

@UntilDestroy({ checkProperties: true }) @Component({   selector: 'app-signup',   templateUrl: './signup.component.html',   styleUrls: ['./signup.component.css'] }) export class SignupComponent implements OnInit {   signupForm = this.fb.group({     firstName: ['', Validators.required],     lastName: ['', Validators.required],     email: ['', [Validators.required, Validators.email]],     password: ['', [Validators.required, Validators.minLength(8)]],     confirmedPassword: ['', [Validators.required]]   }, { validators: this.matchPasswords });    @ViewChild(FormGroupDirective) sufDirective: FormGroupDirective | undefined;    constructor(     private customer: CustomerService,     private fb: FormBuilder,     private snackBar: MatSnackBar,     private router: Router,     private header: HeaderService   ) { }    ngOnInit() {     this.header.setHeaderButtonsVisibility(false);   }    matchPasswords(signupGroup: AbstractControl): ValidationErrors | null {     const password = signupGroup.get('password')?.value;     const confirmedPassword = signupGroup.get('confirmedPassword')?.value;      return password == confirmedPassword ? null : { differentPasswords: true };   }    get password() { return this.signupForm.get('password'); }    get confirmedPassword() { return this.signupForm.get('confirmedPassword'); }    signup() {     const customer = this.signupForm.value;      this.customer.createCustomer(       customer.email,       customer.password,       customer.firstName,       customer.lastName     ).subscribe(       () => {         this.signupForm.reset();         this.sufDirective?.resetForm();          this.snackBar.open('Account successfully created. You will be redirected in 5 seconds.', 'Close', { duration: 5000 });          setTimeout(() => this.router.navigateByUrl('/'), 6000);       },       err => this.snackBar.open('There was a problem creating your account.', 'Close', { duration: 5000 })     );   } }

<form id="container" [formGroup]="signupForm" (ngSubmit)="signup()">     <h1 class="mat-display-3">Create Account</h1>     <mat-form-field appearance="outline">         <mat-label>First Name</mat-label>         <input matInput formControlName="firstName">         <mat-icon matPrefix>portrait</mat-icon>     </mat-form-field>     <mat-form-field appearance="outline">         <mat-label>Last Name</mat-label>         <input matInput formControlName="lastName">         <mat-icon matPrefix>portrait</mat-icon>     </mat-form-field>     <mat-form-field appearance="outline">         <mat-label>Email</mat-label>         <input matInput formControlName="email" type="email">         <mat-icon matPrefix>alternate_email</mat-icon>     </mat-form-field>     <mat-form-field appearance="outline">         <mat-label>Password</mat-label>         <input matInput formControlName="password" type="password">         <mat-icon matPrefix>vpn_key</mat-icon>     </mat-form-field>     <mat-form-field appearance="outline">         <mat-label>Confirm Password</mat-label>         <input matInput formControlName="confirmedPassword" type="password">         <mat-icon matPrefix>vpn_key</mat-icon>     </mat-form-field>     <div ngIf="confirmedPassword?.invalid && (confirmedPassword?.dirty || confirmedPassword?.touched)">         <mat-error ngIf="signupForm.hasError('differentPasswords')">             Your passwords do not match.         </mat-error>     </div>     <div ngIf="password?.invalid && (password?.dirty || password?.touched)">         <mat-error ngIf="password?.hasError('minlength')">             Your password should be at least 8 characters.         </mat-error>     </div>     <button mat-flat-button color="primary" [disabled]="!signupForm.valid">Sign Up</button> </form>

<form id="container" [formGroup]="loginForm" (ngSubmit)="login()">     <h1 class="mat-display-3">Login</h1>     <mat-form-field appearance="outline">         <mat-label>Email</mat-label>         <input matInput type="email" formControlName="email" required>         <mat-icon matPrefix>alternate_email</mat-icon>     </mat-form-field>     <mat-form-field appearance="outline">         <mat-label>Password</mat-label>         <input matInput type="password" formControlName="password" required>         <mat-icon matPrefix>vpn_key</mat-icon>     </mat-form-field>     <button mat-flat-button color="primary" [disabled]="!loginForm.valid">Login</button>     <p id="newAccount" class="mat-h3">Not registered yet? <a id="newAccountLink" routerLink="/signup">Create an account.</a></p> </form>

@NgModule({   declarations: [SummaryComponent, CodesComponent, EmptyComponent],   imports: [     RouterModule.forChild([       {         path: '', canActivate: [EmptyCartGuard], children: [           { path: 'cart', component: SummaryComponent },           { path: 'codes', component: CodesComponent }         ]       },       { path: 'empty', component: EmptyComponent }     ]),     MatDividerModule,     MatFormFieldModule,     MatInputModule,     MatMenuModule,     ReactiveFormsModule,     SharedModule   ] }) export class CartModule { }

@UntilDestroy({ checkProperties: true }) @Component({   selector: 'app-codes',   templateUrl: './codes.component.html',   styleUrls: ['./codes.component.css'] }) export class CodesComponent {   couponCode = new FormControl('');   giftCardCode = new FormControl('');    @ViewChild(FormControlDirective) codesDirective: FormControlDirective | undefined;    constructor(     private cart: CartService,     private order: OrderService,     private snackBar: MatSnackBar   ) { }    private updateOrder(order: Order, params: UpdateOrderParams[], codeType: string) {     this.order.updateOrder(order, params)       .subscribe(         () => {           this.snackBar.open(Successfully added $  {codeType} code., 'Close', { duration: 8000 });           this.couponCode.reset();           this.giftCardCode.reset();           this.codesDirective?.reset();         },         err => this.snackBar.open(There was a problem adding your $  {codeType} code., 'Close', { duration: 8000 })       );   }    addCoupon() {     this.updateOrder({ id: this.cart.orderId, couponCode: this.couponCode.value }, [UpdateOrderParams.couponCode], 'coupon');   }    addGiftCard() {     this.updateOrder({ id: this.cart.orderId, giftCardCode: this.giftCardCode.value }, [UpdateOrderParams.giftCardCode], 'gift card');   }  }

<div id="container">     <app-title title="Redeem a code" subtitle="Enter a coupon code or gift card" [centerText]="true"></app-title>     <div class="input-row">         <mat-form-field appearance="outline">             <mat-label>Coupon Code</mat-label>             <input matInput [formControl]="couponCode" required>             <mat-icon matPrefix>card_giftcard</mat-icon>         </mat-form-field>         <button class="redeem" mat-flat-button color="accent" [disabled]="couponCode.invalid" (click)="addCoupon()">Redeem</button>     </div>     <div class="input-row">         <mat-form-field appearance="outline">             <mat-label>Gift Card Code</mat-label>             <input matInput [formControl]="giftCardCode" required>             <mat-icon matPrefix>redeem</mat-icon>         </mat-form-field>         <button class="redeem" mat-flat-button color="accent" [disabled]="giftCardCode.invalid" (click)="addGiftCard()">Redeem</button>     </div>     <button color="primary" mat-flat-button routerLink="/cart">         <mat-icon>shopping_cart</mat-icon>         CONTINUE TO CART     </button> </div>

<app-simple-page title="Your cart is empty" subtitle="There is currently nothing in your cart. Head to the home page to add items." buttonText="GO TO HOME PAGE" icon="shopping_basket" [centerText]="true" route="/"> </app-simple-page>

@UntilDestroy({ checkProperties: true }) @Component({   selector: 'app-summary',   templateUrl: './summary.component.html',   styleUrls: ['./summary.component.css'] }) export class SummaryComponent implements OnInit {   order: Order = {};    summary: { name: string, amount: string | undefined, id: string }[] = [];    constructor(     private orders: OrderService,     private lineItems: LineItemService,     private cart: CartService,     private snackBar: MatSnackBar,     private router: Router   ) { }    ngOnInit() {     this.orders.getOrder(this.cart.orderId, GetOrderParams.cart)       .subscribe(         order => this.processOrder(order),         err => this.showOrderError('retrieving your cart')       );   }    private processOrder(order: Order) {     this.order = order;      this.summary = [       { name: 'Subtotal', amount: order.formattedSubtotalAmount, id: 'subtotal' },       { name: 'Discount', amount: order.formattedDiscountAmount, id: 'discount' },       { name: 'Taxes (included)', amount: order.formattedTotalTaxAmount, id: 'taxes' },       { name: 'Shipping', amount: order.formattedShippingAmount, id: 'shipping' },       { name: 'Gift Card', amount: order.formattedGiftCardAmount, id: 'gift-card' }     ];   }    private showOrderError(msg: string) {     this.snackBar.open(There was a problem $  {msg}., 'Close', { duration: 8000 });   }    checkout() {     this.router.navigateByUrl('/customer');   }    deleteLineItem(id: string) {     this.lineItems.deleteLineItem(id)       .pipe(         mergeMap(() => this.orders.getOrder(this.cart.orderId, GetOrderParams.cart))       ).subscribe(         order => {           this.processOrder(order);           this.cart.itemCount = order.skusCount || this.cart.itemCount;           this.snackBar.open(Item successfully removed from cart., 'Close', { duration: 8000 })         },         err => this.showOrderError('deleting your order')       );   } }

<div class="container" ngIf="order">     <h3 id="order-id">Order #{{order.number}} ({{order.skusCount}} items)</h3>     <div class="line-item" ngFor="let item of order.lineItems">         <div id="product-details">             <img ngIf="item.imageUrl" class="image-xs" src="{{item.imageUrl}}" alt="product photo">             <div ngIf="!item.imageUrl" class="image-xs no-image"></div>             <div id="line-details">                 <div>{{item.name}}</div>                 <div> {{item.formattedUnitAmount }} </div>             </div>         </div>         <div id="product-config">             <app-item-quantity [quantity]="item.quantity || 0" [disabled]="true"></app-item-quantity>             <div class="itemTotal"> {{item.formattedTotalAmount }} </div>             <button mat-icon-button color="warn" (click)="deleteLineItem(item.id || '')">                 <mat-icon>clear</mat-icon>         </button>         </div>     </div>     <mat-divider></mat-divider>     <div class="costSummary">         <div class="costItem" *ngFor="let item of summary" [id]="item.id">             <h3 class="costLabel">{{item.name}}</h3>             <p> {{item.amount }} </p>         </div>     </div>     <mat-divider></mat-divider>     <div class="costSummary">         <div class="costItem" id="total">             <h2 id="totalLabel">Total</h2>             <h2> {{order.formattedTotalAmountWithTaxes}} </h2>         </div>     </div>     <div id="checkout-button">         <button color="accent" mat-flat-button routerLink="/codes">         <mat-icon>redeem</mat-icon>         ADD GIFT CARD/COUPON     </button>         <button color="primary" mat-flat-button (click)="checkout()">         <mat-icon>point_of_sale</mat-icon>         CHECKOUT     </button>     </div> </div>

@NgModule({   declarations: [     CustomerComponent,     AddressComponent,     BillingAddressComponent,     ShippingAddressComponent,     ShippingMethodsComponent,     PaymentComponent,     PlaceOrderComponent,     AddressListComponent,     CountrySelectComponent,     CancelPaymentComponent   ],   imports: [     RouterModule.forChild([       {         path: '', canActivate: [EmptyCartGuard], children: [           { path: 'billing-address', component: BillingAddressComponent },           { path: 'cancel-payment', component: CancelPaymentComponent },           { path: 'customer', component: CustomerComponent },           { path: 'payment', component: PaymentComponent },           { path: 'place-order', component: PlaceOrderComponent },           { path: 'shipping-address', component: ShippingAddressComponent },           { path: 'shipping-methods', component: ShippingMethodsComponent }         ]       }     ]),     MatCardModule,     MatCheckboxModule,     MatDividerModule,     MatInputModule,     MatMenuModule,     MatRadioModule,     ReactiveFormsModule,     SharedModule   ] }) export class CheckoutModule { }

<button id="country-select" mat-stroked-button [matMenuTriggerFor]="countryMenu">     {{country}}     <mat-icon>expand_more</mat-icon> </button> <mat-menu #countryMenu="matMenu">     <button *ngFor="let cnt of countries" (click)="setCountry(cnt)" mat-menu-item>{{cnt.name}}</button> </mat-menu>

@Component({   selector: 'app-address',   templateUrl: './address.component.html',   styleUrls: ['./address.component.css'] }) export class AddressComponent {   @Input() buttonText: string = '';   @Input() showTitle?: boolean = false;    @Output() createAddress = new EventEmitter<Address>();    @Input() checkboxText: string = '';   @Output() isCheckboxChecked = new EventEmitter<boolean>();    countryCode: string = '';    addressForm = this.fb.group({     firstName: [''],     lastName: [''],     line1: [''],     city: [''],     zipCode: [''],     stateCode: [''],     phone: ['']   });    @ViewChild(FormGroupDirective) afDirective: FormGroupDirective | undefined;    constructor(private fb: FormBuilder) { }    setCountryCode(code: string) {     this.countryCode = code;   }    addAddress() {     this.createAddress.emit({       firstName: this.addressForm.get('firstName')?.value,       lastName: this.addressForm.get('lastName')?.value,       line1: this.addressForm.get('line1')?.value,       city: this.addressForm.get('city')?.value,       zipCode: this.addressForm.get('zipCode')?.value,       stateCode: this.addressForm.get('stateCode')?.value || 'N/A',       countryCode: this.countryCode,       phone: this.addressForm.get('phone')?.value     });   }    setCheckboxValue(change: MatCheckboxChange) {     if (this.isCheckboxChecked) {       this.isCheckboxChecked.emit(change.checked);     }   } }

<form id="container" [formGroup]="addressForm">     <p class="mat-headline" *ngIf="showTitle">Or add a new address</p>     <div class="row">         <mat-form-field appearance="outline">             <mat-label>First Name</mat-label>             <input matInput formControlName="firstName">         </mat-form-field>         <mat-form-field appearance="outline">             <mat-label>Last Name</mat-label>             <input matInput formControlName="lastName">         </mat-form-field>     </div>     <div class="row">         <mat-form-field appearance="outline">             <mat-label>Address</mat-label>             <input matInput formControlName="line1">         </mat-form-field>         <mat-form-field appearance="outline">             <mat-label>City</mat-label>             <input matInput formControlName="city">         </mat-form-field>     </div>     <div class="row">         <mat-form-field appearance="outline">             <mat-label>State Code</mat-label>             <input matInput formControlName="stateCode">         </mat-form-field>         <mat-form-field appearance="outline">             <mat-label>Zip Code</mat-label>             <input matInput formControlName="zipCode">         </mat-form-field>     </div>     <div class="row">         <mat-form-field appearance="outline">             <mat-label>Phone</mat-label>             <input matInput formControlName="phone">         </mat-form-field>         <app-country-select (setCountryEvent)="setCountryCode($  event)"></app-country-select>     </div>     <mat-checkbox color="accent" (change)="setCheckboxValue($  event)">         {{checkboxText}}     </mat-checkbox>     <button id="submit-button" mat-flat-button color="primary" (click)="addAddress()">         {{buttonText}}     </button> </form>

@Component({   selector: 'app-address-list',   templateUrl: './address-list.component.html',   styleUrls: ['./address-list.component.css'] }) export class AddressListComponent implements OnInit {   addresses: CustomerAddress[] = [];    @Output() setAddressEvent = new EventEmitter<string>();    constructor(     private session: SessionService,     private customerAddresses: CustomerAddressService,     private snackBar: MatSnackBar   ) { }    ngOnInit() {     this.session.loggedInStatus       .pipe(         mergeMap(           status => iif(() => status, this.customerAddresses.getCustomerAddresses())         ))       .subscribe(         addresses => {           if (addresses.length) {             this.addresses = addresses           }         },         err => this.snackBar.open('There was a problem getting your existing addresses.', 'Close', { duration: 8000 })       );   }    setAddress(change: MatRadioChange) {     this.setAddressEvent.emit(change.value);   } }

<div id="container">     <p class="mat-headline">Pick an existing address</p>     <mat-error ngIf="!addresses.length">You have no existing addresses</mat-error>     <mat-radio-group ngIf="addresses.length" class="addresses" (change)="setAddress($  event)">         <mat-card class="address" *ngFor="let address of addresses">             <mat-radio-button [value]="address.address?.id" color="primary">                 <p>{{address.address?.firstName}} {{address.address?.lastName}},</p>                 <p>{{address.address?.line1}},</p>                 <p>{{address.address?.city}},</p>                 <p>{{address.address?.zipCode}},</p>                 <p>{{address.address?.stateCode}}, {{address.address?.countryCode}}</p>                 <p>{{address.address?.phone}}</p>             </mat-radio-button>         </mat-card>     </mat-radio-group> </div>

@UntilDestroy({ checkProperties: true }) @Component({   selector: 'app-customer',   templateUrl: './customer.component.html',   styleUrls: ['./customer.component.css'] }) export class CustomerComponent implements OnInit {   email = new FormControl('', [Validators.required, Validators.email]);    constructor(     private orders: OrderService,     private customers: CustomerService,     private cart: CartService,     private router: Router,     private snackBar: MatSnackBar   ) { }    ngOnInit() {     this.customers.getCurrentCustomer()       .subscribe(         customer => this.email.setValue(customer.email)       );   }    addCustomerEmail() {     this.orders.updateOrder(       { id: this.cart.orderId, customerEmail: this.email.value },       [UpdateOrderParams.customerEmail])       .subscribe(         () => this.router.navigateByUrl('/billing-address'),         err => this.snackBar.open('There was a problem adding your email to the order.', 'Close', { duration: 8000 })       );   } }

<div id="container">     <app-title no="1" title="Customer" subtitle="Billing information and shipping address"></app-title>     <mat-form-field appearance="outline">         <mat-label>Email</mat-label>         <input matInput [formControl]="email" required>         <mat-icon matPrefix>alternate_email</mat-icon>     </mat-form-field>     <button mat-flat-button color="primary" [disabled]="email.invalid" (click)="addCustomerEmail()">         PROCEED TO BILLING ADDRESS     </button> </div>

@UntilDestroy({ checkProperties: true }) @Component({   selector: 'app-billing-address',   templateUrl: './billing-address.component.html',   styleUrls: ['./billing-address.component.css'] }) export class BillingAddressComponent implements OnInit {   showAddresses: boolean = false;   sameShippingAddressAsBilling: boolean = false;   selectedCustomerAddressId: string = '';    constructor(     private addresses: AddressService,     private snackBar: MatSnackBar,     private session: SessionService,     private orders: OrderService,     private cart: CartService,     private router: Router,     private customerAddresses: CustomerAddressService) { }    ngOnInit() {     this.session.loggedInStatus       .subscribe(         status => this.showAddresses = status       );   }    updateBillingAddress(address: Address) {     if (this.showAddresses && this.selectedCustomerAddressId) {       this.cloneAddress();     } else if (address.firstName && address.lastName && address.line1 && address.city && address.zipCode && address.stateCode && address.countryCode && address.phone) {       this.createAddress(address);     }     else {       this.snackBar.open('Check your address. Some fields are missing.', 'Close');     }   }    setCustomerAddress(customerAddressId: string) {     this.selectedCustomerAddressId = customerAddressId;   }    setSameShippingAddressAsBilling(change: boolean) {     this.sameShippingAddressAsBilling = change;   }    private createAddress(address: Address) {     this.addresses.createAddress(address)       .pipe(         concatMap(           address => {             const update = this.updateOrderObservable({               id: this.cart.orderId,               billingAddressId: address.id             }, [UpdateOrderParams.billingAddress]);              if (this.showAddresses) {               return combineLatest([update, this.customerAddresses.createCustomerAddress(address.id || '', '')]);             } else {               return update;             }           }))       .subscribe(         () => this.showSuccessSnackBar(),         err => this.showErrorSnackBar()       );   }    private cloneAddress() {     this.updateOrderObservable({       id: this.cart.orderId,       billingAddressCloneId: this.selectedCustomerAddressId     }, [UpdateOrderParams.billingAddressClone])       .subscribe(         () => this.showSuccessSnackBar(),         err => this.showErrorSnackBar()       );   }    private updateOrderObservable(order: Order, updateParams: UpdateOrderParams[]): Observable<any> {     return iif(() => this.sameShippingAddressAsBilling,       concat([         this.orders.updateOrder(order, updateParams),         this.orders.updateOrder(order, [UpdateOrderParams.shippingAddressSameAsBilling])       ]),       this.orders.updateOrder(order, updateParams)     );   }    private showErrorSnackBar() {     this.snackBar.open('There was a problem creating your address.', 'Close', { duration: 8000 });   }    private navigateTo(path: string) {     setTimeout(() => this.router.navigateByUrl(path), 4000);   }    private showSuccessSnackBar() {     this.snackBar.open('Billing address successfully added. Redirecting...', 'Close', { duration: 3000 });     if (this.sameShippingAddressAsBilling) {       this.navigateTo('/shipping-methods');     } else {       this.navigateTo('/shipping-address');     }   } }

<app-title no="2" title="Billing Address" subtitle="Address to bill charges to"></app-title> <app-address-list ngIf="showAddresses" (setAddressEvent)="setCustomerAddress($  event)"></app-address-list> <mat-divider ngIf="showAddresses"></mat-divider> <app-address [showTitle]="showAddresses" buttonText="PROCEED TO NEXT STEP" checkboxText="Ship to the same address" (isCheckboxChecked)="setSameShippingAddressAsBilling($  event)" (createAddress)="updateBillingAddress($  event)"></app-address>

@UntilDestroy({ checkProperties: true }) @Component({   selector: 'app-shipping-address',   templateUrl: './shipping-address.component.html',   styleUrls: ['./shipping-address.component.css'] }) export class ShippingAddressComponent implements OnInit {   showAddresses: boolean = false;   sameBillingAddressAsShipping: boolean = false;   selectedCustomerAddressId: string = '';    constructor(     private addresses: AddressService,     private snackBar: MatSnackBar,     private session: SessionService,     private orders: OrderService,     private cart: CartService,     private router: Router,     private customerAddresses: CustomerAddressService) { }    ngOnInit() {     this.session.loggedInStatus       .subscribe(         status => this.showAddresses = status       );   }    updateShippingAddress(address: Address) {     if (this.showAddresses && this.selectedCustomerAddressId) {       this.cloneAddress();     } else if (address.firstName && address.lastName && address.line1 && address.city && address.zipCode && address.stateCode && address.countryCode && address.phone) {       this.createAddress(address);     }     else {       this.snackBar.open('Check your address. Some fields are missing.', 'Close');     }   }    setCustomerAddress(customerAddressId: string) {     this.selectedCustomerAddressId = customerAddressId;   }    setSameBillingAddressAsShipping(change: boolean) {     this.sameBillingAddressAsShipping = change;   }    private createAddress(address: Address) {     this.addresses.createAddress(address)       .pipe(         concatMap(           address => {             const update = this.updateOrderObservable({               id: this.cart.orderId,               shippingAddressId: address.id             }, [UpdateOrderParams.shippingAddress]);              if (this.showAddresses) {               return combineLatest([update, this.customerAddresses.createCustomerAddress(address.id || '', '')]);             } else {               return update;             }           }))       .subscribe(         () => this.showSuccessSnackBar(),         err => this.showErrorSnackBar()       );   }    private cloneAddress() {     this.updateOrderObservable({       id: this.cart.orderId,       shippingAddressCloneId: this.selectedCustomerAddressId     }, [UpdateOrderParams.shippingAddressClone])       .subscribe(         () => this.showSuccessSnackBar(),         err => this.showErrorSnackBar()       );   }    private updateOrderObservable(order: Order, updateParams: UpdateOrderParams[]): Observable<any> {     return iif(() => this.sameBillingAddressAsShipping,       concat([         this.orders.updateOrder(order, updateParams),         this.orders.updateOrder(order, [UpdateOrderParams.billingAddressSameAsShipping])       ]),       this.orders.updateOrder(order, updateParams)     );   }    private showErrorSnackBar() {     this.snackBar.open('There was a problem creating your address.', 'Close', { duration: 8000 });   }    private showSuccessSnackBar() {     this.snackBar.open('Shipping address successfully added. Redirecting...', 'Close', { duration: 3000 });      setTimeout(() => this.router.navigateByUrl('/shipping-methods'), 4000);   } }

<app-title no="3" title="Shipping Address" subtitle="Address to ship package to"></app-title> <app-address-list ngIf="showAddresses" (setAddressEvent)="setCustomerAddress($  event)"></app-address-list> <mat-divider ngIf="showAddresses"></mat-divider> <app-address [showTitle]="showAddresses" buttonText="PROCEED TO SHIPPING METHODS" checkboxText="Bill to the same address" (isCheckboxChecked)="setSameBillingAddressAsShipping($  event)" (createAddress)="updateShippingAddress($  event)"></app-address>

@UntilDestroy({ checkProperties: true }) @Component({   selector: 'app-shipping-methods',   templateUrl: './shipping-methods.component.html',   styleUrls: ['./shipping-methods.component.css'] }) export class ShippingMethodsComponent implements OnInit {   shipments: Shipment[] | undefined = [];   shipmentsForm: FormGroup = this.fb.group({});    constructor(     private orders: OrderService,     private dlts: DeliveryLeadTimeService,     private cart: CartService,     private router: Router,     private fb: FormBuilder,     private shipments: ShipmentService,     private snackBar: MatSnackBar   ) { }    ngOnInit() {     combineLatest([       this.orders.getOrder(this.cart.orderId, GetOrderParams.shipments),       this.dlts.getDeliveryLeadTimes()     ]).subscribe(       ([lineItems, deliveryLeadTimes]) => {         let li: LineItem;         let lt: DeliveryLeadTime[];          this.shipments = lineItems.shipments?.map((shipment) => {           if (shipment.id) {             this.shipmentsForm.addControl(shipment.id, new FormControl('', Validators.required));           }            if (shipment.lineItems) {             shipment.lineItems = shipment.lineItems.map(item => {               li = this.findItem(lineItems, item.skuCode || '');               item.imageUrl = li.imageUrl;               item.name = li.name;               return item;             });           }            if (shipment.availableShippingMethods) {             lt = this.findLocationLeadTime(deliveryLeadTimes, shipment);             shipment.availableShippingMethods = shipment.availableShippingMethods?.map(               method => {                 method.deliveryLeadTime = this.findMethodLeadTime(lt, method);                 return method;               });           }            return shipment;         });       },       err => this.router.navigateByUrl('/error')     );   }    setShipmentMethods() {     const shipmentsFormValue = this.shipmentsForm.value;      combineLatest(Object.keys(shipmentsFormValue).map(       key => this.shipments.updateShipment(key, shipmentsFormValue[key])     )).subscribe(       () => {         this.snackBar.open('Your shipments have been updated with a shipping method.', 'Close', { duration: 3000 });         setTimeout(() => this.router.navigateByUrl('/payment'), 4000);       },       err => this.snackBar.open('There was a problem adding shipping methods to your shipments.', 'Close', { duration: 5000 })     );   }     private findItem(lineItems: LineItem[], skuCode: string): LineItem {     return lineItems.filter((item) => item.skuCode == skuCode)[0];   }    private findLocationLeadTime(times: DeliveryLeadTime[], shipment: Shipment): DeliveryLeadTime[] {     return times.filter((dlTime) => dlTime?.stockLocation?.id == shipment?.stockLocation?.id);   }    private findMethodLeadTime(times: DeliveryLeadTime[], method: ShippingMethod): DeliveryLeadTime {     return times.filter((dlTime) => dlTime?.shippingMethod?.id == method?.id)[0];   } }

<form id="container" [formGroup]="shipmentsForm">     <app-title no="4" title="Shipping Methods" subtitle="How to ship your packages"></app-title>     <div class="shipment-container" ngFor="let shipment of shipments; let j = index; let isLast = last">         <h1>Shipment {{j+1}} of {{shipments?.length}}</h1>         <div class="row" ngFor="let item of shipment.lineItems">             <img class="image-xs" [src]="item.imageUrl" alt="product photo">             <div id="shipment-details">                 <h4 id="item-name">{{item.name}}</h4>                 <p>{{item.skuCode}}</p>             </div>             <div id="quantity-section">                 <p id="quantity-label">Quantity: </p>{{item.quantity}}             </div>         </div>         <mat-radio-group [formControlName]="shipment?.id || j">             <mat-radio-button ngFor="let method of shipment.availableShippingMethods" [value]="method.id">                 <div class="radio-button">                     <p>{{method.name}}</p>                     <div>                         <p class="radio-label">Cost:</p>                         <p> {{method.formattedPriceAmount}}</p>                     </div>                     <div>                         <p class="radio-label">Timeline:</p>                         <p> Available in {{method.deliveryLeadTime?.minDays}}-{{method.deliveryLeadTime?.maxDays}} days</p>                     </div>                 </div>             </mat-radio-button>         </mat-radio-group>         <mat-divider ngIf="!isLast"></mat-divider>     </div>     <button mat-flat-button color="primary" [disabled]="shipmentsForm.invalid" (click)="setShipmentMethods()">PROCEED TO PAYMENT</button> </form>

@UntilDestroy({ checkProperties: true }) @Component({   selector: 'app-payment',   templateUrl: './payment.component.html',   styleUrls: ['./payment.component.css'] }) export class PaymentComponent implements OnInit {   approvalUrl: string = '';    constructor(     private orders: OrderService,     private cart: CartService,     private router: Router,     private payments: PaypalPaymentService   ) { }    ngOnInit() {     const orderId = this.cart.orderId;      this.orders.getOrder(orderId, GetOrderParams.paymentSource)       .pipe(         concatMap((order: Order) => {           const paymentSourceId = order.paymentSource?.id;            const paymentMethod = order.availablePaymentMethods?.filter(             (method) => method.paymentSourceType == 'paypal_payments'           )[0];            return iif(             () => paymentSourceId ? true : false,             this.payments.getPaypalPayment(paymentSourceId || ''),             this.orders.updateOrder({               id: orderId,               paymentMethodId: paymentMethod?.id             }, [UpdateOrderParams.paymentMethod])               .pipe(concatMap(                 order => this.payments.createPaypalPayment({                   orderId: orderId,                   cancelUrl: $  {environment.clientUrl}/cancel-payment,                   returnUrl: $  {environment.clientUrl}/place-order                 })               ))           );         }))       .subscribe(         paypalPayment => this.approvalUrl = paypalPayment?.approvalUrl || '',         err => this.router.navigateByUrl('/error')       );   }    navigateToPaypal() {     window.location.href = this.approvalUrl;   } }

<app-simple-page number="5" title="Payment" subtitle="Pay for your order" buttonText="PROCEED TO PAY WITH PAYPAL" icon="point_of_sale" (buttonEvent)="navigateToPaypal()" [buttonDisabled]="approvalUrl.length ? false : true"></app-simple-page>

<app-simple-page title="Payment cancelled" subtitle="Your Paypal payment has been cancelled" icon="money_off" buttonText="GO TO HOME" [centerText]="true" route="/"></app-simple-page>

@UntilDestroy({ checkProperties: true }) @Component({   selector: 'app-place-order',   templateUrl: './place-order.component.html',   styleUrls: ['./place-order.component.css'] }) export class PlaceOrderComponent implements OnInit {   disableButton = true;    constructor(     private route: ActivatedRoute,     private router: Router,     private payments: PaypalPaymentService,     private orders: OrderService,     private cart: CartService,     private snackBar: MatSnackBar   ) { }    ngOnInit() {     this.route.queryParams       .pipe(         concatMap(params => {           const payerId = params['PayerID'];           const orderId = this.cart.orderId;            return iif(             () => payerId.length > 0,             this.orders.getOrder(orderId, GetOrderParams.paymentSource)               .pipe(                 concatMap(order => {                   const paymentSourceId = order.paymentSource?.id || '';                    return iif(                     () => paymentSourceId ? paymentSourceId.length > 0 : false,                     this.payments.updatePaypalPayment(paymentSourceId, payerId)                   );                 })               )           );         }))       .subscribe(         () => this.disableButton = false,         () => this.router.navigateByUrl('/error')       );   }    placeOrder() {     this.disableButton = true;      this.orders.updateOrder({       id: this.cart.orderId,       place: true     }, [UpdateOrderParams.place])       .subscribe(         () => {           this.snackBar.open('Your order has been successfully placed.', 'Close', { duration: 3000 });           this.cart.clearCart();           setTimeout(() => this.router.navigateByUrl('/'), 4000);         },         () => {           this.snackBar.open('There was a problem placing your order.', 'Close', { duration: 8000 });           this.disableButton = false;         }       );   } }

<app-simple-page title="Finalize Order" subtitle="Complete your order" [number]="'6'" icon="shopping_bag" buttonText="PLACE YOUR ORDER" (buttonEvent)="placeOrder()" [buttonDisabled]="disableButton"></app-simple-page>

@NgModule({   declarations: [     AppComponent   ],   imports: [     BrowserModule,     AppRoutingModule,     HttpClientModule,     BrowserAnimationsModule,     AuthModule,     ProductsModule,     CartModule,     CheckoutModule,     CoreModule   ],   providers: [     {       provide: HTTP_INTERCEPTORS,       useClass: OptionsInterceptor,       multi: true     },     {       provide: APP_INITIALIZER,       useFactory: (http: HttpClient) => () => http.post<object>(         $  {environment.apiUrl}/oauth/token,         { 'grantType': 'client_credentials' },         { withCredentials: true }),       multi: true,       deps: [HttpClient]     }   ],   bootstrap: [AppComponent] }) export class AppModule { }

@NgModule({   declarations: [SimplePageComponent, TitleComponent, WordWrapPipe, ItemQuantityComponent],   imports: [CommonModule, MatIconModule, MatButtonModule, MatTooltipModule, MatMenuModule, RouterModule],   exports: [     CommonModule,     ItemQuantityComponent,     MatButtonModule,     MatIconModule,     MatSnackBarModule,     MatTooltipModule,     SimplePageComponent,     TitleComponent,     WordWrapPipe   ] }) export class SharedModule { }

<button mat-stroked-button [matMenuTriggerFor]="menu" [disabled]="disabled">     {{quantity}}     <mat-icon ngIf="!disabled">expand_more</mat-icon> </button> <mat-menu #menu="matMenu">     <button ngFor="let no of values" (click)="setQuantity(no)" mat-menu-item>{{no}}</button> </mat-menu>

<div id="container">     <app-title no="{{number}}" title="{How To Build An E-Commerce Site With Angular 11, Commerce Layer And Paypal}" subtitle="{{subtitle}}" [centerText]="centerText"></app-title>     <div *ngIf="icon" id="icon-container">         <mat-icon color="primary" class="icon">{{icon}}</mat-icon>     </div>     <button mat-flat-button color="primary" (click)="buttonClicked()" [disabled]="buttonDisabled">         {{buttonText}}     </button> </div>

@Injectable({   providedIn: 'root' }) export class HttpErrorHandler {    constructor() { }    handleError(err: HttpErrorResponse): Observable {     let displayMessage = '';      if (err.error instanceof ErrorEvent) {       displayMessage = Client-side error: $  {err.error.message};     } else {       displayMessage = Server-side error: $  {err.message};     }      return throwError(displayMessage);   } }

@Injectable({   providedIn: 'root' }) export class AddressService {   private url: string = $  {environment.apiUrl}/api/addresses;    constructor(private http: HttpClient, private eh: HttpErrorHandler) { }    createAddress(address: Address): Observable<Address> {     return this.http.post<Address>(this.url, address)       .pipe(catchError(this.eh.handleError));   }    getAddress(id: string): Observable<Address> {     return this.http.get<Address>($  {this.url}/$  {id})       .pipe(catchError(this.eh.handleError));   } }

@Injectable({   providedIn: 'root' }) export class CartService {   private cart = new BehaviorSubject({     orderId: this.orderId,     itemCount: this.itemCount   });    cartValue$   = this.cart.asObservable();    constructor(private storage: LocalStorageService) { }    get orderId(): string {     const id = this.storage.getItem('order-id');     return id ? id : '';   }    set orderId(id: string) {     this.storage.addItem('order-id', id);     this.cart.next({ orderId: id, itemCount: this.itemCount });   }    get itemCount(): number {     const itemCount = this.storage.getItem('item-count');      return itemCount ? parseInt(itemCount) : 0;   }    set itemCount(amount: number) {     this.storage.addItem('item-count', amount.toString());     this.cart.next({ orderId: this.orderId, itemCount: amount });   }    incrementItemCount(amount: number) {     this.itemCount = this.itemCount + amount;   }    decrementItemCount(amount: number) {     this.itemCount = this.itemCount - amount;   }    clearCart() {     this.storage.deleteItem('item-count');     this.cart.next({ orderId: '', itemCount: 0 });   } }

@Injectable({   providedIn: 'root' }) export class CountryService {    constructor(private http: HttpClient) { }    getCountries(): Observable<Country[]> {     return this.http.get<Country[]>('./../../../assets/json/country-codes.json');   } }

@Injectable({   providedIn: 'root' }) export class CustomerAddressService {   private url: string = $  {environment.apiUrl}/api/customer_addresses;    constructor(private http: HttpClient, private eh: HttpErrorHandler) { }    createCustomerAddress(addressId: string, customerId: string): Observable<CustomerAddress> {     return this.http.post<CustomerAddress>(this.url, {       addressId: addressId, customerId: customerId     })       .pipe(catchError(this.eh.handleError));   }    getCustomerAddresses(): Observable<CustomerAddress[]> {     return this.http.get<CustomerAddress[]>($  {this.url})       .pipe(catchError(this.eh.handleError));   }    getCustomerAddress(id: string): Observable<CustomerAddress> {     return this.http.get<CustomerAddress>($  {this.url}/$  {id})       .pipe(catchError(this.eh.handleError));   } }

@Injectable({   providedIn: 'root' }) export class CustomerService {   private url: string = $  {environment.apiUrl}/api/customers;    constructor(private http: HttpClient, private eh: HttpErrorHandler) { }    createCustomer(email: string, password: string, firstName: string, lastName: string): Observable<Customer> {     return this.http.post<Customer>(this.url, {       email: email,       password: password,       firstName: firstName,       lastName: lastName     })       .pipe(catchError(this.eh.handleError));   }    getCurrentCustomer(): Observable<Customer> {     return this.http.get<Customer>($  {this.url}/current)       .pipe(catchError(this.eh.handleError));   }    getCustomer(id: string): Observable<Customer> {     return this.http.get<Customer>($  {this.url}/$  {id})       .pipe(catchError(this.eh.handleError));   } }

@Injectable({   providedIn: 'root' }) export class DeliveryLeadTimeService {   private url: string = $  {environment.apiUrl}/api/delivery_lead_times;    constructor(private http: HttpClient, private eh: HttpErrorHandler) { }    getDeliveryLeadTimes(): Observable<DeliveryLeadTime[]> {     return this.http.get<DeliveryLeadTime[]>(this.url)       .pipe(catchError(this.eh.handleError));   } }

@Injectable({   providedIn: 'root' }) export class LineItemService {   private url: string = $  {environment.apiUrl}/api/line_items;    constructor(private http: HttpClient, private eh: HttpErrorHandler) { }    createLineItem(lineItem: LineItem): Observable<LineItem> {     return this.http.post<LineItem>(this.url, lineItem)       .pipe(catchError(this.eh.handleError));   }    getLineItem(id: string): Observable<LineItem> {     return this.http.get<LineItem>($  {this.url}/$  {id})       .pipe(catchError(this.eh.handleError));   }    updateLineItem(id: string, quantity: number): Observable<LineItem> {     return this.http.patch<LineItem>($  {this.url}/$  {id}, { quantity: quantity })       .pipe(catchError(this.eh.handleError));   }    deleteLineItem(id: string): Observable<LineItem> {     return this.http.delete<LineItem>($  {this.url}/$  {id})       .pipe(catchError(this.eh.handleError));   } }

@Injectable({   providedIn: 'root' }) export class OrderService {   private url: string = $  {environment.apiUrl}/api/orders;    constructor(     private http: HttpClient,     private eh: HttpErrorHandler) { }    createOrder(): Observable<Order> {     return this.http.post<Order>(this.url, {})       .pipe(catchError(this.eh.handleError));   }    getOrder(id: string, orderParam: GetOrderParams): Observable<Order> {     let params = {};     if (orderParam != GetOrderParams.none) {       params = { [orderParam]: 'true' };     }      return this.http.get<Order>($  {this.url}/$  {id}, { params: params })       .pipe(catchError(this.eh.handleError));   }    updateOrder(order: Order, params: UpdateOrderParams[]): Observable<Order> {     let updateParams = [];     for (const param of params) {       updateParams.push(param.toString());     }      return this.http.patch<Order>(       $  {this.url}/$  {order.id},       order,       { params: { 'field': updateParams } }     )       .pipe(catchError(this.eh.handleError));   }    getOrderShipments(id: string): Observable<Shipment[]> {     return this.http.get<Shipment[]>($  {this.url}/$  {id}/shipments)       .pipe(catchError(this.eh.handleError));   } }

@Injectable({   providedIn: 'root' }) export class PaypalPaymentService {   private url: string = $  {environment.apiUrl}/api/paypal_payments;    constructor(private http: HttpClient, private eh: HttpErrorHandler) { }    createPaypalPayment(payment: PaypalPayment): Observable<PaypalPayment> {     return this.http.post<PaypalPayment>(this.url, payment)       .pipe(catchError(this.eh.handleError));   }    getPaypalPayment(id: string): Observable<PaypalPayment> {     return this.http.get<PaypalPayment>($  {this.url}/$  {id})       .pipe(catchError(this.eh.handleError));   }    updatePaypalPayment(id: string, paypalPayerId: string): Observable<PaypalPayment> {     return this.http.patch<PaypalPayment>(       $  {this.url}/$  {id},       { paypalPayerId: paypalPayerId }     )       .pipe(catchError(this.eh.handleError));   } }

@Injectable({   providedIn: 'root' }) export class ShipmentService {   private url: string = $  {environment.apiUrl}/api/shipments;    constructor(private http: HttpClient, private eh: HttpErrorHandler) { }    getShipment(id: string): Observable<Shipment> {     return this.http.get<Shipment>($  {this.url}/$  {id})       .pipe(catchError(this.eh.handleError));   }    updateShipment(id: string, shippingMethodId: string): Observable<Shipment> {     return this.http.patch<Shipment>(       $  {this.url}/$  {id},       { shippingMethodId: shippingMethodId }     )       .pipe(catchError(this.eh.handleError));   } }

@Injectable({   providedIn: 'root' }) export class SkuService {   private url: string = $  {environment.apiUrl}/api/skus;    constructor(private http: HttpClient, private eh: HttpErrorHandler) { }    getSku(id: string): Observable<Sku> {     return this.http.get<Sku>($  {this.url}/$  {id})       .pipe(catchError(this.eh.handleError));   }    getSkus(page: number, pageSize: number): Observable<Sku[]> {     return this.http.get<Sku[]>(       this.url,       {         params: {           'page': page.toString(),           'pageSize': pageSize.toString()         }       })       .pipe(catchError(this.eh.handleError));   } }

ng g m core ng g g core/guards/empty-cart ng g s core/header/header ng g interceptor core/interceptors/options for comp in header error not-found; do ng g c "core/$  {comp}"; done for serv in authentication session; do ng g s "core/authentication/$  {serv}"; done

@NgModule({   declarations: [HeaderComponent, NotFoundComponent, ErrorComponent],   imports: [     RouterModule.forChild([       { path: '404', component: NotFoundComponent },       { path: 'error', component: ErrorComponent },       { path: '**', redirectTo: '/404' }     ]),     MatBadgeModule,     SharedModule   ],   exports: [HeaderComponent] }) export class CoreModule { }

@Injectable({   providedIn: 'root' }) export class AuthenticationService {   private url: string = $  {environment.apiUrl}/oauth/token;    constructor(private http: HttpClient, private eh: HttpErrorHandler) { }    getClientSession(): Observable<object> {     return this.http.post<object>(       this.url,       { grantType: 'client_credentials' })       .pipe(catchError(this.eh.handleError));   }    login(email: string, password: string): Observable<object> {     return this.http.post<object>(       this.url,       { username: email, password: password, grantType: 'password' })       .pipe(catchError(this.eh.handleError));   } }

@Injectable({   providedIn: 'root' }) export class SessionService {   private url: string = $  {environment.apiUrl}/session;   private isLoggedIn = new BehaviorSubject(false);    loggedInStatus = this.isLoggedIn.asObservable();    constructor(private http: HttpClient, private eh: HttpErrorHandler) { }    setLoggedInStatus(status: boolean) {     this.isLoggedIn.next(status);   }    isCustomerLoggedIn(): Observable<{ message: string }> {     return this.http.get<{ message: string }>($  {this.url}/customer/status)       .pipe(catchError(this.eh.handleError));   }    logout(): Observable<{ message: string }> {     return this.http.get<{ message: string }>($  {this.url}/destroy)       .pipe(catchError(this.eh.handleError));   } }

@Injectable({   providedIn: 'root' }) export class HeaderService {   private headerButtonsVisibility = new BehaviorSubject(true);    showHeaderButtons = this.headerButtonsVisibility.asObservable();    constructor() { }    setHeaderButtonsVisibility(visible: boolean) {     this.headerButtonsVisibility.next(visible);   } }

<app-simple-page title="An error occurred" subtitle="There was a problem fetching your page" buttonText="GO TO HOME" icon="report" [centerText]="true" route="/"> </app-simple-page>

<app-simple-page title="404: Page not found" buttonText="GO TO HOME" icon="search" subtitle="The requested page could not be found" [centerText]="true" route="/"></app-simple-page>

@UntilDestroy({ checkProperties: true }) @Component({   selector: 'app-header',   templateUrl: './header.component.html',   styleUrls: ['./header.component.css'] }) export class HeaderComponent implements OnInit {   cartAmount: number = 0;   isLoggedIn: boolean = false;   showButtons: boolean = true;    constructor(     private session: SessionService,     private snackBar: MatSnackBar,     private cart: CartService,     private header: HeaderService,     private auth: AuthenticationService   ) { }    ngOnInit() {     this.session.isCustomerLoggedIn()       .subscribe(         () => {           this.isLoggedIn = true;           this.session.setLoggedInStatus(true);         }       );      this.session.loggedInStatus.subscribe(status => this.isLoggedIn = status);      this.header.showHeaderButtons.subscribe(visible => this.showButtons = visible);      this.cart.cartValue$  .subscribe(cart => this.cartAmount = cart.itemCount);   }    logout() {     concat(       this.session.logout(),       this.auth.getClientSession()     ).subscribe(       () => {         this.snackBar.open('You have been logged out.', 'Close', { duration: 4000 });         this.session.setLoggedInStatus(false);       },       err => this.snackBar.open('There was a problem logging you out.', 'Close', { duration: 4000 })     );   } }

<div id="header-container">     <div id="left-half" routerLink="/">         <h1><span id="lime-text">Lime</span><span id="store-text">Store</span></h1>     </div>     <div id="right-half">         <div id="button-container" ngIf="showButtons">             <button mat-icon-button color="primary" aria-label="shopping cart">                 <mat-icon [matBadge]="cartAmount" matBadgeColor="accent" aria-label="shopping cart" routerLink="/cart">shopping_cart</mat-icon>             </button>             <button mat-icon-button color="primary" aria-label="login" ngIf="!isLoggedIn">                 <mat-icon aria-label="login" matTooltip="login" routerLink="/login">login</mat-icon>             </button>             <button mat-icon-button color="primary" aria-label="logout" *ngIf="isLoggedIn" (click)="logout()">                 <mat-icon aria-label="logout" matTooltip="logout">logout</mat-icon>             </button>         </div>     </div> </div>

@Injectable({   providedIn: 'root' }) export class EmptyCartGuard implements CanActivate {   constructor(private cart: CartService, private router: Router) { }    canActivate(     route: ActivatedRouteSnapshot,     state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {     if (this.cart.orderId) {       if (this.cart.itemCount > 0) {         return true;       }     }      return this.router.parseUrl('/empty');   } }

@Injectable() export class OptionsInterceptor implements HttpInterceptor {    constructor() { }    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {     request = request.clone({       headers: request.headers.set('Content-Type', 'application/json'),       withCredentials: true     });      return next.handle(request);   } }

@UntilDestroy({ checkProperties: true }) @Component({   selector: 'app-product-list',   templateUrl: './product-list.component.html',   styleUrls: ['./product-list.component.css'] }) export class ProductListComponent implements OnInit {   cols = 4;   length = 0;   pageIndex = 0;   pageSize = 20;   pageSizeOptions: number[] = [5, 10, 20];    pageEvent!: PageEvent | void;    products: Sku[] = [];    constructor(     private breakpointObserver: BreakpointObserver,     private skus: SkuService,     private router: Router,     private header: HeaderService) { }    ngOnInit() {     this.getProducts(1, 20);     this.header.setHeaderButtonsVisibility(true);      this.breakpointObserver.observe([       Breakpoints.Handset,       Breakpoints.Tablet,       Breakpoints.Web     ]).subscribe(result => {       if (result.matches) {         if (result.breakpoints['(max-width: 599.98px) and (orientation: portrait)'] || result.breakpoints['(max-width: 599.98px) and (orientation: landscape)']) {           this.cols = 1;         }         else if (result.breakpoints['(min-width: 1280px) and (orientation: portrait)'] || result.breakpoints['(min-width: 1280px) and (orientation: landscape)']) {           this.cols = 4;         } else {           this.cols = 3;         }       }     });   }    private getProducts(page: number, pageSize: number) {     this.skus.getSkus(page, pageSize)       .subscribe(         skus => {           this.products = skus;           this.length = skus[0].__collectionMeta.recordCount;         },         err => this.router.navigateByUrl('/error')       );   }    getNextPage(event: PageEvent) {     this.getProducts(event.pageIndex + 1, event.pageSize);   }    trackSkus(index: number, item: Sku) {     return $  {item.id}-$  {index};   } }

<mat-grid-list cols="{{cols}}" rowHeight="400px" gutterSize="20px" class="grid-layout">     <mat-grid-tile *ngFor="let product of products; trackBy: trackSkus">         <mat-card>             <img id="card-image" mat-card-image src="{{product.imageUrl}}" alt="product photo">             <mat-card-content>                 <mat-card-title matTooltip="{{product.name}}">{{product.name |wordWrap:35}}</mat-card-title>                 <mat-card-subtitle>{{product.prices[0].compareAtAmountFloat | currency:'EUR'}}</mat-card-subtitle>             </mat-card-content>             <mat-card-actions>                 <button mat-flat-button color="primary" [routerLink]="['/product', product.id]">                     View                 </button>             </mat-card-actions>         </mat-card>     </mat-grid-tile> </mat-grid-list> <mat-paginator [length]="length" [pageIndex]="pageIndex" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" (page)="pageEvent = getNextPage($  event)"> </mat-paginator>

@UntilDestroy({ checkProperties: true }) @Component({   selector: 'app-product',   templateUrl: './product.component.html',   styleUrls: ['./product.component.css'] }) export class ProductComponent implements OnInit {   id: string = '';   product!: Sku;   quantity: number = 0;    constructor(     private route: ActivatedRoute,     private skus: SkuService,     private location: Location,     private router: Router,     private header: HeaderService,     private orders: OrderService,     private lineItems: LineItemService,     private cart: CartService,     private snackBar: MatSnackBar   ) { }    ngOnInit() {     this.route.paramMap       .pipe(         mergeMap(params => {           const id = params.get('id')           this.id = id ? id : '';            return this.skus.getSku(this.id);         }),         tap((sku) => {           this.product = sku;         })       ).subscribe({         error: (err) => this.router.navigateByUrl('/error')       });      this.header.setHeaderButtonsVisibility(true);   }    addItemToCart() {     if (this.quantity > 0) {       if (this.cart.orderId == '') {         this.orders.createOrder()           .pipe(             mergeMap((order: Order) => {               this.cart.orderId = order.id || '';                return this.lineItems.createLineItem({                 orderId: order.id,                 name: this.product.name,                 imageUrl: this.product.imageUrl,                 quantity: this.quantity,                 skuCode: this.product.code               });             })           )           .subscribe(             () => {               this.cart.incrementItemCount(this.quantity);               this.showSuccessSnackBar();             },             err => this.showErrorSnackBar()           );       } else {         this.lineItems.createLineItem({           orderId: this.cart.orderId,           name: this.product.name,           imageUrl: this.product.imageUrl,           quantity: this.quantity,           skuCode: this.product.code         }).subscribe(           () => {             this.cart.incrementItemCount(this.quantity);             this.showSuccessSnackBar();           },           err => this.showErrorSnackBar()         );       }     } else {       this.snackBar.open('Select a quantity greater than 0.', 'Close', { duration: 8000 });     }   }    setQuantity(no: number) {     this.quantity = no;   }    goBack() {     this.location.back();   }    private showSuccessSnackBar() {     this.snackBar.open('Item successfully added to cart.', 'Close', { duration: 8000 });   }    private showErrorSnackBar() {     this.snackBar.open('Failed to add your item to the cart.', 'Close', { duration: 8000 });   } }

<div id="container">     <mat-card *ngIf="product" class="product-card">         <img mat-card-image src="{{product.imageUrl}}" alt="Photo of a product">         <mat-card-content>             <mat-card-title>{{product.name}}</mat-card-title>             <mat-card-subtitle>{{product.prices[0].compareAtAmountFloat | currency:'EUR'}}</mat-card-subtitle>             <p>                 {{product.description}}             </p>         </mat-card-content>         <mat-card-actions>             <app-item-quantity [quantity]="quantity" [maxValue]="10" (setQuantityEvent)="setQuantity($  event)"></app-item-quantity>             <button mat-raised-button color="accent" (click)="addItemToCart()">                 <mat-icon>add_shopping_cart</mat-icon>                 Add to cart             </button>             <button mat-raised-button color="primary" (click)="goBack()">                 <mat-icon>storefront</mat-icon>                 Continue shopping             </button>         </mat-card-actions>     </mat-card> </div>

@UntilDestroy({ checkProperties: true }) @Component({   selector: 'app-signup',   templateUrl: './signup.component.html',   styleUrls: ['./signup.component.css'] }) export class SignupComponent implements OnInit {   signupForm = this.fb.group({     firstName: ['', Validators.required],     lastName: ['', Validators.required],     email: ['', [Validators.required, Validators.email]],     password: ['', [Validators.required, Validators.minLength(8)]],     confirmedPassword: ['', [Validators.required]]   }, { validators: this.matchPasswords });    @ViewChild(FormGroupDirective) sufDirective: FormGroupDirective | undefined;    constructor(     private customer: CustomerService,     private fb: FormBuilder,     private snackBar: MatSnackBar,     private router: Router,     private header: HeaderService   ) { }    ngOnInit() {     this.header.setHeaderButtonsVisibility(false);   }    matchPasswords(signupGroup: AbstractControl): ValidationErrors | null {     const password = signupGroup.get('password')?.value;     const confirmedPassword = signupGroup.get('confirmedPassword')?.value;      return password == confirmedPassword ? null : { differentPasswords: true };   }    get password() { return this.signupForm.get('password'); }    get confirmedPassword() { return this.signupForm.get('confirmedPassword'); }    signup() {     const customer = this.signupForm.value;      this.customer.createCustomer(       customer.email,       customer.password,       customer.firstName,       customer.lastName     ).subscribe(       () => {         this.signupForm.reset();         this.sufDirective?.resetForm();          this.snackBar.open('Account successfully created. You will be redirected in 5 seconds.', 'Close', { duration: 5000 });          setTimeout(() => this.router.navigateByUrl('/'), 6000);       },       err => this.snackBar.open('There was a problem creating your account.', 'Close', { duration: 5000 })     );   } }

<form id="container" [formGroup]="signupForm" (ngSubmit)="signup()">     <h1 class="mat-display-3">Create Account</h1>     <mat-form-field appearance="outline">         <mat-label>First Name</mat-label>         <input matInput formControlName="firstName">         <mat-icon matPrefix>portrait</mat-icon>     </mat-form-field>     <mat-form-field appearance="outline">         <mat-label>Last Name</mat-label>         <input matInput formControlName="lastName">         <mat-icon matPrefix>portrait</mat-icon>     </mat-form-field>     <mat-form-field appearance="outline">         <mat-label>Email</mat-label>         <input matInput formControlName="email" type="email">         <mat-icon matPrefix>alternate_email</mat-icon>     </mat-form-field>     <mat-form-field appearance="outline">         <mat-label>Password</mat-label>         <input matInput formControlName="password" type="password">         <mat-icon matPrefix>vpn_key</mat-icon>     </mat-form-field>     <mat-form-field appearance="outline">         <mat-label>Confirm Password</mat-label>         <input matInput formControlName="confirmedPassword" type="password">         <mat-icon matPrefix>vpn_key</mat-icon>     </mat-form-field>     <div ngIf="confirmedPassword?.invalid && (confirmedPassword?.dirty || confirmedPassword?.touched)">         <mat-error ngIf="signupForm.hasError('differentPasswords')">             Your passwords do not match.         </mat-error>     </div>     <div ngIf="password?.invalid && (password?.dirty || password?.touched)">         <mat-error ngIf="password?.hasError('minlength')">             Your password should be at least 8 characters.         </mat-error>     </div>     <button mat-flat-button color="primary" [disabled]="!signupForm.valid">Sign Up</button> </form>

<form id="container" [formGroup]="loginForm" (ngSubmit)="login()">     <h1 class="mat-display-3">Login</h1>     <mat-form-field appearance="outline">         <mat-label>Email</mat-label>         <input matInput type="email" formControlName="email" required>         <mat-icon matPrefix>alternate_email</mat-icon>     </mat-form-field>     <mat-form-field appearance="outline">         <mat-label>Password</mat-label>         <input matInput type="password" formControlName="password" required>         <mat-icon matPrefix>vpn_key</mat-icon>     </mat-form-field>     <button mat-flat-button color="primary" [disabled]="!loginForm.valid">Login</button>     <p id="newAccount" class="mat-h3">Not registered yet? <a id="newAccountLink" routerLink="/signup">Create an account.</a></p> </form>

@NgModule({   declarations: [SummaryComponent, CodesComponent, EmptyComponent],   imports: [     RouterModule.forChild([       {         path: '', canActivate: [EmptyCartGuard], children: [           { path: 'cart', component: SummaryComponent },           { path: 'codes', component: CodesComponent }         ]       },       { path: 'empty', component: EmptyComponent }     ]),     MatDividerModule,     MatFormFieldModule,     MatInputModule,     MatMenuModule,     ReactiveFormsModule,     SharedModule   ] }) export class CartModule { }

@UntilDestroy({ checkProperties: true }) @Component({   selector: 'app-codes',   templateUrl: './codes.component.html',   styleUrls: ['./codes.component.css'] }) export class CodesComponent {   couponCode = new FormControl('');   giftCardCode = new FormControl('');    @ViewChild(FormControlDirective) codesDirective: FormControlDirective | undefined;    constructor(     private cart: CartService,     private order: OrderService,     private snackBar: MatSnackBar   ) { }    private updateOrder(order: Order, params: UpdateOrderParams[], codeType: string) {     this.order.updateOrder(order, params)       .subscribe(         () => {           this.snackBar.open(Successfully added $  {codeType} code., 'Close', { duration: 8000 });           this.couponCode.reset();           this.giftCardCode.reset();           this.codesDirective?.reset();         },         err => this.snackBar.open(There was a problem adding your $  {codeType} code., 'Close', { duration: 8000 })       );   }    addCoupon() {     this.updateOrder({ id: this.cart.orderId, couponCode: this.couponCode.value }, [UpdateOrderParams.couponCode], 'coupon');   }    addGiftCard() {     this.updateOrder({ id: this.cart.orderId, giftCardCode: this.giftCardCode.value }, [UpdateOrderParams.giftCardCode], 'gift card');   }  }

<div id="container">     <app-title title="Redeem a code" subtitle="Enter a coupon code or gift card" [centerText]="true"></app-title>     <div class="input-row">         <mat-form-field appearance="outline">             <mat-label>Coupon Code</mat-label>             <input matInput [formControl]="couponCode" required>             <mat-icon matPrefix>card_giftcard</mat-icon>         </mat-form-field>         <button class="redeem" mat-flat-button color="accent" [disabled]="couponCode.invalid" (click)="addCoupon()">Redeem</button>     </div>     <div class="input-row">         <mat-form-field appearance="outline">             <mat-label>Gift Card Code</mat-label>             <input matInput [formControl]="giftCardCode" required>             <mat-icon matPrefix>redeem</mat-icon>         </mat-form-field>         <button class="redeem" mat-flat-button color="accent" [disabled]="giftCardCode.invalid" (click)="addGiftCard()">Redeem</button>     </div>     <button color="primary" mat-flat-button routerLink="/cart">         <mat-icon>shopping_cart</mat-icon>         CONTINUE TO CART     </button> </div>

<app-simple-page title="Your cart is empty" subtitle="There is currently nothing in your cart. Head to the home page to add items." buttonText="GO TO HOME PAGE" icon="shopping_basket" [centerText]="true" route="/"> </app-simple-page>

@UntilDestroy({ checkProperties: true }) @Component({   selector: 'app-summary',   templateUrl: './summary.component.html',   styleUrls: ['./summary.component.css'] }) export class SummaryComponent implements OnInit {   order: Order = {};    summary: { name: string, amount: string | undefined, id: string }[] = [];    constructor(     private orders: OrderService,     private lineItems: LineItemService,     private cart: CartService,     private snackBar: MatSnackBar,     private router: Router   ) { }    ngOnInit() {     this.orders.getOrder(this.cart.orderId, GetOrderParams.cart)       .subscribe(         order => this.processOrder(order),         err => this.showOrderError('retrieving your cart')       );   }    private processOrder(order: Order) {     this.order = order;      this.summary = [       { name: 'Subtotal', amount: order.formattedSubtotalAmount, id: 'subtotal' },       { name: 'Discount', amount: order.formattedDiscountAmount, id: 'discount' },       { name: 'Taxes (included)', amount: order.formattedTotalTaxAmount, id: 'taxes' },       { name: 'Shipping', amount: order.formattedShippingAmount, id: 'shipping' },       { name: 'Gift Card', amount: order.formattedGiftCardAmount, id: 'gift-card' }     ];   }    private showOrderError(msg: string) {     this.snackBar.open(There was a problem $  {msg}., 'Close', { duration: 8000 });   }    checkout() {     this.router.navigateByUrl('/customer');   }    deleteLineItem(id: string) {     this.lineItems.deleteLineItem(id)       .pipe(         mergeMap(() => this.orders.getOrder(this.cart.orderId, GetOrderParams.cart))       ).subscribe(         order => {           this.processOrder(order);           this.cart.itemCount = order.skusCount || this.cart.itemCount;           this.snackBar.open(Item successfully removed from cart., 'Close', { duration: 8000 })         },         err => this.showOrderError('deleting your order')       );   } }

<div class="container" ngIf="order">     <h3 id="order-id">Order #{{order.number}} ({{order.skusCount}} items)</h3>     <div class="line-item" ngFor="let item of order.lineItems">         <div id="product-details">             <img ngIf="item.imageUrl" class="image-xs" src="{{item.imageUrl}}" alt="product photo">             <div ngIf="!item.imageUrl" class="image-xs no-image"></div>             <div id="line-details">                 <div>{{item.name}}</div>                 <div> {{item.formattedUnitAmount }} </div>             </div>         </div>         <div id="product-config">             <app-item-quantity [quantity]="item.quantity || 0" [disabled]="true"></app-item-quantity>             <div class="itemTotal"> {{item.formattedTotalAmount }} </div>             <button mat-icon-button color="warn" (click)="deleteLineItem(item.id || '')">                 <mat-icon>clear</mat-icon>         </button>         </div>     </div>     <mat-divider></mat-divider>     <div class="costSummary">         <div class="costItem" *ngFor="let item of summary" [id]="item.id">             <h3 class="costLabel">{{item.name}}</h3>             <p> {{item.amount }} </p>         </div>     </div>     <mat-divider></mat-divider>     <div class="costSummary">         <div class="costItem" id="total">             <h2 id="totalLabel">Total</h2>             <h2> {{order.formattedTotalAmountWithTaxes}} </h2>         </div>     </div>     <div id="checkout-button">         <button color="accent" mat-flat-button routerLink="/codes">         <mat-icon>redeem</mat-icon>         ADD GIFT CARD/COUPON     </button>         <button color="primary" mat-flat-button (click)="checkout()">         <mat-icon>point_of_sale</mat-icon>         CHECKOUT     </button>     </div> </div>

@NgModule({   declarations: [     CustomerComponent,     AddressComponent,     BillingAddressComponent,     ShippingAddressComponent,     ShippingMethodsComponent,     PaymentComponent,     PlaceOrderComponent,     AddressListComponent,     CountrySelectComponent,     CancelPaymentComponent   ],   imports: [     RouterModule.forChild([       {         path: '', canActivate: [EmptyCartGuard], children: [           { path: 'billing-address', component: BillingAddressComponent },           { path: 'cancel-payment', component: CancelPaymentComponent },           { path: 'customer', component: CustomerComponent },           { path: 'payment', component: PaymentComponent },           { path: 'place-order', component: PlaceOrderComponent },           { path: 'shipping-address', component: ShippingAddressComponent },           { path: 'shipping-methods', component: ShippingMethodsComponent }         ]       }     ]),     MatCardModule,     MatCheckboxModule,     MatDividerModule,     MatInputModule,     MatMenuModule,     MatRadioModule,     ReactiveFormsModule,     SharedModule   ] }) export class CheckoutModule { }

<button id="country-select" mat-stroked-button [matMenuTriggerFor]="countryMenu">     {{country}}     <mat-icon>expand_more</mat-icon> </button> <mat-menu #countryMenu="matMenu">     <button *ngFor="let cnt of countries" (click)="setCountry(cnt)" mat-menu-item>{{cnt.name}}</button> </mat-menu>

@Component({   selector: 'app-address',   templateUrl: './address.component.html',   styleUrls: ['./address.component.css'] }) export class AddressComponent {   @Input() buttonText: string = '';   @Input() showTitle?: boolean = false;    @Output() createAddress = new EventEmitter<Address>();    @Input() checkboxText: string = '';   @Output() isCheckboxChecked = new EventEmitter<boolean>();    countryCode: string = '';    addressForm = this.fb.group({     firstName: [''],     lastName: [''],     line1: [''],     city: [''],     zipCode: [''],     stateCode: [''],     phone: ['']   });    @ViewChild(FormGroupDirective) afDirective: FormGroupDirective | undefined;    constructor(private fb: FormBuilder) { }    setCountryCode(code: string) {     this.countryCode = code;   }    addAddress() {     this.createAddress.emit({       firstName: this.addressForm.get('firstName')?.value,       lastName: this.addressForm.get('lastName')?.value,       line1: this.addressForm.get('line1')?.value,       city: this.addressForm.get('city')?.value,       zipCode: this.addressForm.get('zipCode')?.value,       stateCode: this.addressForm.get('stateCode')?.value || 'N/A',       countryCode: this.countryCode,       phone: this.addressForm.get('phone')?.value     });   }    setCheckboxValue(change: MatCheckboxChange) {     if (this.isCheckboxChecked) {       this.isCheckboxChecked.emit(change.checked);     }   } }

<form id="container" [formGroup]="addressForm">     <p class="mat-headline" *ngIf="showTitle">Or add a new address</p>     <div class="row">         <mat-form-field appearance="outline">             <mat-label>First Name</mat-label>             <input matInput formControlName="firstName">         </mat-form-field>         <mat-form-field appearance="outline">             <mat-label>Last Name</mat-label>             <input matInput formControlName="lastName">         </mat-form-field>     </div>     <div class="row">         <mat-form-field appearance="outline">             <mat-label>Address</mat-label>             <input matInput formControlName="line1">         </mat-form-field>         <mat-form-field appearance="outline">             <mat-label>City</mat-label>             <input matInput formControlName="city">         </mat-form-field>     </div>     <div class="row">         <mat-form-field appearance="outline">             <mat-label>State Code</mat-label>             <input matInput formControlName="stateCode">         </mat-form-field>         <mat-form-field appearance="outline">             <mat-label>Zip Code</mat-label>             <input matInput formControlName="zipCode">         </mat-form-field>     </div>     <div class="row">         <mat-form-field appearance="outline">             <mat-label>Phone</mat-label>             <input matInput formControlName="phone">         </mat-form-field>         <app-country-select (setCountryEvent)="setCountryCode($  event)"></app-country-select>     </div>     <mat-checkbox color="accent" (change)="setCheckboxValue($  event)">         {{checkboxText}}     </mat-checkbox>     <button id="submit-button" mat-flat-button color="primary" (click)="addAddress()">         {{buttonText}}     </button> </form>

@Component({   selector: 'app-address-list',   templateUrl: './address-list.component.html',   styleUrls: ['./address-list.component.css'] }) export class AddressListComponent implements OnInit {   addresses: CustomerAddress[] = [];    @Output() setAddressEvent = new EventEmitter<string>();    constructor(     private session: SessionService,     private customerAddresses: CustomerAddressService,     private snackBar: MatSnackBar   ) { }    ngOnInit() {     this.session.loggedInStatus       .pipe(         mergeMap(           status => iif(() => status, this.customerAddresses.getCustomerAddresses())         ))       .subscribe(         addresses => {           if (addresses.length) {             this.addresses = addresses           }         },         err => this.snackBar.open('There was a problem getting your existing addresses.', 'Close', { duration: 8000 })       );   }    setAddress(change: MatRadioChange) {     this.setAddressEvent.emit(change.value);   } }

<div id="container">     <p class="mat-headline">Pick an existing address</p>     <mat-error ngIf="!addresses.length">You have no existing addresses</mat-error>     <mat-radio-group ngIf="addresses.length" class="addresses" (change)="setAddress($  event)">         <mat-card class="address" *ngFor="let address of addresses">             <mat-radio-button [value]="address.address?.id" color="primary">                 <p>{{address.address?.firstName}} {{address.address?.lastName}},</p>                 <p>{{address.address?.line1}},</p>                 <p>{{address.address?.city}},</p>                 <p>{{address.address?.zipCode}},</p>                 <p>{{address.address?.stateCode}}, {{address.address?.countryCode}}</p>                 <p>{{address.address?.phone}}</p>             </mat-radio-button>         </mat-card>     </mat-radio-group> </div>

@UntilDestroy({ checkProperties: true }) @Component({   selector: 'app-customer',   templateUrl: './customer.component.html',   styleUrls: ['./customer.component.css'] }) export class CustomerComponent implements OnInit {   email = new FormControl('', [Validators.required, Validators.email]);    constructor(     private orders: OrderService,     private customers: CustomerService,     private cart: CartService,     private router: Router,     private snackBar: MatSnackBar   ) { }    ngOnInit() {     this.customers.getCurrentCustomer()       .subscribe(         customer => this.email.setValue(customer.email)       );   }    addCustomerEmail() {     this.orders.updateOrder(       { id: this.cart.orderId, customerEmail: this.email.value },       [UpdateOrderParams.customerEmail])       .subscribe(         () => this.router.navigateByUrl('/billing-address'),         err => this.snackBar.open('There was a problem adding your email to the order.', 'Close', { duration: 8000 })       );   } }

<div id="container">     <app-title no="1" title="Customer" subtitle="Billing information and shipping address"></app-title>     <mat-form-field appearance="outline">         <mat-label>Email</mat-label>         <input matInput [formControl]="email" required>         <mat-icon matPrefix>alternate_email</mat-icon>     </mat-form-field>     <button mat-flat-button color="primary" [disabled]="email.invalid" (click)="addCustomerEmail()">         PROCEED TO BILLING ADDRESS     </button> </div>

@UntilDestroy({ checkProperties: true }) @Component({   selector: 'app-billing-address',   templateUrl: './billing-address.component.html',   styleUrls: ['./billing-address.component.css'] }) export class BillingAddressComponent implements OnInit {   showAddresses: boolean = false;   sameShippingAddressAsBilling: boolean = false;   selectedCustomerAddressId: string = '';    constructor(     private addresses: AddressService,     private snackBar: MatSnackBar,     private session: SessionService,     private orders: OrderService,     private cart: CartService,     private router: Router,     private customerAddresses: CustomerAddressService) { }    ngOnInit() {     this.session.loggedInStatus       .subscribe(         status => this.showAddresses = status       );   }    updateBillingAddress(address: Address) {     if (this.showAddresses && this.selectedCustomerAddressId) {       this.cloneAddress();     } else if (address.firstName && address.lastName && address.line1 && address.city && address.zipCode && address.stateCode && address.countryCode && address.phone) {       this.createAddress(address);     }     else {       this.snackBar.open('Check your address. Some fields are missing.', 'Close');     }   }    setCustomerAddress(customerAddressId: string) {     this.selectedCustomerAddressId = customerAddressId;   }    setSameShippingAddressAsBilling(change: boolean) {     this.sameShippingAddressAsBilling = change;   }    private createAddress(address: Address) {     this.addresses.createAddress(address)       .pipe(         concatMap(           address => {             const update = this.updateOrderObservable({               id: this.cart.orderId,               billingAddressId: address.id             }, [UpdateOrderParams.billingAddress]);              if (this.showAddresses) {               return combineLatest([update, this.customerAddresses.createCustomerAddress(address.id || '', '')]);             } else {               return update;             }           }))       .subscribe(         () => this.showSuccessSnackBar(),         err => this.showErrorSnackBar()       );   }    private cloneAddress() {     this.updateOrderObservable({       id: this.cart.orderId,       billingAddressCloneId: this.selectedCustomerAddressId     }, [UpdateOrderParams.billingAddressClone])       .subscribe(         () => this.showSuccessSnackBar(),         err => this.showErrorSnackBar()       );   }    private updateOrderObservable(order: Order, updateParams: UpdateOrderParams[]): Observable<any> {     return iif(() => this.sameShippingAddressAsBilling,       concat([         this.orders.updateOrder(order, updateParams),         this.orders.updateOrder(order, [UpdateOrderParams.shippingAddressSameAsBilling])       ]),       this.orders.updateOrder(order, updateParams)     );   }    private showErrorSnackBar() {     this.snackBar.open('There was a problem creating your address.', 'Close', { duration: 8000 });   }    private navigateTo(path: string) {     setTimeout(() => this.router.navigateByUrl(path), 4000);   }    private showSuccessSnackBar() {     this.snackBar.open('Billing address successfully added. Redirecting...', 'Close', { duration: 3000 });     if (this.sameShippingAddressAsBilling) {       this.navigateTo('/shipping-methods');     } else {       this.navigateTo('/shipping-address');     }   } }

<app-title no="2" title="Billing Address" subtitle="Address to bill charges to"></app-title> <app-address-list ngIf="showAddresses" (setAddressEvent)="setCustomerAddress($  event)"></app-address-list> <mat-divider ngIf="showAddresses"></mat-divider> <app-address [showTitle]="showAddresses" buttonText="PROCEED TO NEXT STEP" checkboxText="Ship to the same address" (isCheckboxChecked)="setSameShippingAddressAsBilling($  event)" (createAddress)="updateBillingAddress($  event)"></app-address>

@UntilDestroy({ checkProperties: true }) @Component({   selector: 'app-shipping-address',   templateUrl: './shipping-address.component.html',   styleUrls: ['./shipping-address.component.css'] }) export class ShippingAddressComponent implements OnInit {   showAddresses: boolean = false;   sameBillingAddressAsShipping: boolean = false;   selectedCustomerAddressId: string = '';    constructor(     private addresses: AddressService,     private snackBar: MatSnackBar,     private session: SessionService,     private orders: OrderService,     private cart: CartService,     private router: Router,     private customerAddresses: CustomerAddressService) { }    ngOnInit() {     this.session.loggedInStatus       .subscribe(         status => this.showAddresses = status       );   }    updateShippingAddress(address: Address) {     if (this.showAddresses && this.selectedCustomerAddressId) {       this.cloneAddress();     } else if (address.firstName && address.lastName && address.line1 && address.city && address.zipCode && address.stateCode && address.countryCode && address.phone) {       this.createAddress(address);     }     else {       this.snackBar.open('Check your address. Some fields are missing.', 'Close');     }   }    setCustomerAddress(customerAddressId: string) {     this.selectedCustomerAddressId = customerAddressId;   }    setSameBillingAddressAsShipping(change: boolean) {     this.sameBillingAddressAsShipping = change;   }    private createAddress(address: Address) {     this.addresses.createAddress(address)       .pipe(         concatMap(           address => {             const update = this.updateOrderObservable({               id: this.cart.orderId,               shippingAddressId: address.id             }, [UpdateOrderParams.shippingAddress]);              if (this.showAddresses) {               return combineLatest([update, this.customerAddresses.createCustomerAddress(address.id || '', '')]);             } else {               return update;             }           }))       .subscribe(         () => this.showSuccessSnackBar(),         err => this.showErrorSnackBar()       );   }    private cloneAddress() {     this.updateOrderObservable({       id: this.cart.orderId,       shippingAddressCloneId: this.selectedCustomerAddressId     }, [UpdateOrderParams.shippingAddressClone])       .subscribe(         () => this.showSuccessSnackBar(),         err => this.showErrorSnackBar()       );   }    private updateOrderObservable(order: Order, updateParams: UpdateOrderParams[]): Observable<any> {     return iif(() => this.sameBillingAddressAsShipping,       concat([         this.orders.updateOrder(order, updateParams),         this.orders.updateOrder(order, [UpdateOrderParams.billingAddressSameAsShipping])       ]),       this.orders.updateOrder(order, updateParams)     );   }    private showErrorSnackBar() {     this.snackBar.open('There was a problem creating your address.', 'Close', { duration: 8000 });   }    private showSuccessSnackBar() {     this.snackBar.open('Shipping address successfully added. Redirecting...', 'Close', { duration: 3000 });      setTimeout(() => this.router.navigateByUrl('/shipping-methods'), 4000);   } }

<app-title no="3" title="Shipping Address" subtitle="Address to ship package to"></app-title> <app-address-list ngIf="showAddresses" (setAddressEvent)="setCustomerAddress($  event)"></app-address-list> <mat-divider ngIf="showAddresses"></mat-divider> <app-address [showTitle]="showAddresses" buttonText="PROCEED TO SHIPPING METHODS" checkboxText="Bill to the same address" (isCheckboxChecked)="setSameBillingAddressAsShipping($  event)" (createAddress)="updateShippingAddress($  event)"></app-address>

@UntilDestroy({ checkProperties: true }) @Component({   selector: 'app-shipping-methods',   templateUrl: './shipping-methods.component.html',   styleUrls: ['./shipping-methods.component.css'] }) export class ShippingMethodsComponent implements OnInit {   shipments: Shipment[] | undefined = [];   shipmentsForm: FormGroup = this.fb.group({});    constructor(     private orders: OrderService,     private dlts: DeliveryLeadTimeService,     private cart: CartService,     private router: Router,     private fb: FormBuilder,     private shipments: ShipmentService,     private snackBar: MatSnackBar   ) { }    ngOnInit() {     combineLatest([       this.orders.getOrder(this.cart.orderId, GetOrderParams.shipments),       this.dlts.getDeliveryLeadTimes()     ]).subscribe(       ([lineItems, deliveryLeadTimes]) => {         let li: LineItem;         let lt: DeliveryLeadTime[];          this.shipments = lineItems.shipments?.map((shipment) => {           if (shipment.id) {             this.shipmentsForm.addControl(shipment.id, new FormControl('', Validators.required));           }            if (shipment.lineItems) {             shipment.lineItems = shipment.lineItems.map(item => {               li = this.findItem(lineItems, item.skuCode || '');               item.imageUrl = li.imageUrl;               item.name = li.name;               return item;             });           }            if (shipment.availableShippingMethods) {             lt = this.findLocationLeadTime(deliveryLeadTimes, shipment);             shipment.availableShippingMethods = shipment.availableShippingMethods?.map(               method => {                 method.deliveryLeadTime = this.findMethodLeadTime(lt, method);                 return method;               });           }            return shipment;         });       },       err => this.router.navigateByUrl('/error')     );   }    setShipmentMethods() {     const shipmentsFormValue = this.shipmentsForm.value;      combineLatest(Object.keys(shipmentsFormValue).map(       key => this.shipments.updateShipment(key, shipmentsFormValue[key])     )).subscribe(       () => {         this.snackBar.open('Your shipments have been updated with a shipping method.', 'Close', { duration: 3000 });         setTimeout(() => this.router.navigateByUrl('/payment'), 4000);       },       err => this.snackBar.open('There was a problem adding shipping methods to your shipments.', 'Close', { duration: 5000 })     );   }     private findItem(lineItems: LineItem[], skuCode: string): LineItem {     return lineItems.filter((item) => item.skuCode == skuCode)[0];   }    private findLocationLeadTime(times: DeliveryLeadTime[], shipment: Shipment): DeliveryLeadTime[] {     return times.filter((dlTime) => dlTime?.stockLocation?.id == shipment?.stockLocation?.id);   }    private findMethodLeadTime(times: DeliveryLeadTime[], method: ShippingMethod): DeliveryLeadTime {     return times.filter((dlTime) => dlTime?.shippingMethod?.id == method?.id)[0];   } }

<form id="container" [formGroup]="shipmentsForm">     <app-title no="4" title="Shipping Methods" subtitle="How to ship your packages"></app-title>     <div class="shipment-container" ngFor="let shipment of shipments; let j = index; let isLast = last">         <h1>Shipment {{j+1}} of {{shipments?.length}}</h1>         <div class="row" ngFor="let item of shipment.lineItems">             <img class="image-xs" [src]="item.imageUrl" alt="product photo">             <div id="shipment-details">                 <h4 id="item-name">{{item.name}}</h4>                 <p>{{item.skuCode}}</p>             </div>             <div id="quantity-section">                 <p id="quantity-label">Quantity: </p>{{item.quantity}}             </div>         </div>         <mat-radio-group [formControlName]="shipment?.id || j">             <mat-radio-button ngFor="let method of shipment.availableShippingMethods" [value]="method.id">                 <div class="radio-button">                     <p>{{method.name}}</p>                     <div>                         <p class="radio-label">Cost:</p>                         <p> {{method.formattedPriceAmount}}</p>                     </div>                     <div>                         <p class="radio-label">Timeline:</p>                         <p> Available in {{method.deliveryLeadTime?.minDays}}-{{method.deliveryLeadTime?.maxDays}} days</p>                     </div>                 </div>             </mat-radio-button>         </mat-radio-group>         <mat-divider ngIf="!isLast"></mat-divider>     </div>     <button mat-flat-button color="primary" [disabled]="shipmentsForm.invalid" (click)="setShipmentMethods()">PROCEED TO PAYMENT</button> </form>

@UntilDestroy({ checkProperties: true }) @Component({   selector: 'app-payment',   templateUrl: './payment.component.html',   styleUrls: ['./payment.component.css'] }) export class PaymentComponent implements OnInit {   approvalUrl: string = '';    constructor(     private orders: OrderService,     private cart: CartService,     private router: Router,     private payments: PaypalPaymentService   ) { }    ngOnInit() {     const orderId = this.cart.orderId;      this.orders.getOrder(orderId, GetOrderParams.paymentSource)       .pipe(         concatMap((order: Order) => {           const paymentSourceId = order.paymentSource?.id;            const paymentMethod = order.availablePaymentMethods?.filter(             (method) => method.paymentSourceType == 'paypal_payments'           )[0];            return iif(             () => paymentSourceId ? true : false,             this.payments.getPaypalPayment(paymentSourceId || ''),             this.orders.updateOrder({               id: orderId,               paymentMethodId: paymentMethod?.id             }, [UpdateOrderParams.paymentMethod])               .pipe(concatMap(                 order => this.payments.createPaypalPayment({                   orderId: orderId,                   cancelUrl: $  {environment.clientUrl}/cancel-payment,                   returnUrl: $  {environment.clientUrl}/place-order                 })               ))           );         }))       .subscribe(         paypalPayment => this.approvalUrl = paypalPayment?.approvalUrl || '',         err => this.router.navigateByUrl('/error')       );   }    navigateToPaypal() {     window.location.href = this.approvalUrl;   } }

<app-simple-page number="5" title="Payment" subtitle="Pay for your order" buttonText="PROCEED TO PAY WITH PAYPAL" icon="point_of_sale" (buttonEvent)="navigateToPaypal()" [buttonDisabled]="approvalUrl.length ? false : true"></app-simple-page>

<app-simple-page title="Payment cancelled" subtitle="Your Paypal payment has been cancelled" icon="money_off" buttonText="GO TO HOME" [centerText]="true" route="/"></app-simple-page>

@UntilDestroy({ checkProperties: true }) @Component({   selector: 'app-place-order',   templateUrl: './place-order.component.html',   styleUrls: ['./place-order.component.css'] }) export class PlaceOrderComponent implements OnInit {   disableButton = true;    constructor(     private route: ActivatedRoute,     private router: Router,     private payments: PaypalPaymentService,     private orders: OrderService,     private cart: CartService,     private snackBar: MatSnackBar   ) { }    ngOnInit() {     this.route.queryParams       .pipe(         concatMap(params => {           const payerId = params['PayerID'];           const orderId = this.cart.orderId;            return iif(             () => payerId.length > 0,             this.orders.getOrder(orderId, GetOrderParams.paymentSource)               .pipe(                 concatMap(order => {                   const paymentSourceId = order.paymentSource?.id || '';                    return iif(                     () => paymentSourceId ? paymentSourceId.length > 0 : false,                     this.payments.updatePaypalPayment(paymentSourceId, payerId)                   );                 })               )           );         }))       .subscribe(         () => this.disableButton = false,         () => this.router.navigateByUrl('/error')       );   }    placeOrder() {     this.disableButton = true;      this.orders.updateOrder({       id: this.cart.orderId,       place: true     }, [UpdateOrderParams.place])       .subscribe(         () => {           this.snackBar.open('Your order has been successfully placed.', 'Close', { duration: 3000 });           this.cart.clearCart();           setTimeout(() => this.router.navigateByUrl('/'), 4000);         },         () => {           this.snackBar.open('There was a problem placing your order.', 'Close', { duration: 8000 });           this.disableButton = false;         }       );   } }

<app-simple-page title="Finalize Order" subtitle="Complete your order" [number]="'6'" icon="shopping_bag" buttonText="PLACE YOUR ORDER" (buttonEvent)="placeOrder()" [buttonDisabled]="disableButton"></app-simple-page>

@NgModule({   declarations: [     AppComponent   ],   imports: [     BrowserModule,     AppRoutingModule,     HttpClientModule,     BrowserAnimationsModule,     AuthModule,     ProductsModule,     CartModule,     CheckoutModule,     CoreModule   ],   providers: [     {       provide: HTTP_INTERCEPTORS,       useClass: OptionsInterceptor,       multi: true     },     {       provide: APP_INITIALIZER,       useFactory: (http: HttpClient) => () => http.post<object>(         $  {environment.apiUrl}/oauth/token,         { 'grantType': 'client_credentials' },         { withCredentials: true }),       multi: true,       deps: [HttpClient]     }   ],   bootstrap: [AppComponent] }) export class AppModule { }