import { Component , OnInit } from '@angular/core' ; import { FormGroup , FormBuilder } from '@angular/forms' ; import { CartItem } from '../../common/cart-item' ; import { CartService } from '../../services/cart.service' ; import { Country } from "src/app/common/country" ; import { State } from "src/app/common/state" ; import { CheckoutService } from "src/app/services/checkout.service" ; @ Component ( { selector : 'app-checkout' , templateUrl : './checkout.component.html' , styleUrls : [ './checkout.component.css' ] } ) export class CheckoutComponent implements OnInit { cartItems : CartItem [ ] = [ ] ; totalPrice : number = 0 ; totalQuantity : number = 0 ; checkoutFormGroup : FormGroup ; creditCardYears : number [ ] = [ ] ; creditCardMonths : number [ ] = [ ] ; countries : Country [ ] = [ ] ; shippingAddressStates : State [ ] = [ ] ; billingAddressStates : State [ ] = [ ] ; constructor ( private formBuilder , private _cartService , private _checkoutService ) { } ngOnInit ( ) { this . cartDetails ( ) ; this . checkoutFormGroup = this . formBuilder . group ( { customer : this . formBuilder . group ( { firstName : [ '' ] , lastName : [ '' ] , email : [ '' ] } ) , shippingAddress : this . formBuilder . group ( { street : [ '' ] , city : [ '' ] , state : [ '' ] , country : [ '' ] , zipcode : [ '' ] } ) , billingAddress : this . formBuilder . group ( { street : [ '' ] , city : [ '' ] , state : [ '' ] , country : [ '' ] , zipcode : [ '' ] } ) , creditCard : this . formBuilder . group ( { cardType : [ '' ] , nameOnCard : [ '' ] , cardNumber : [ '' ] , cvv : [ '' ] , expirationMonth : [ '' ] , expirationYear : [ '' ] } ) , } ) ; const startMonth = new Date ( ) . getMonth ( ) + 1 ; console . log ( "startMonth: " + startMonth ) ; this . _checkoutService . getCreditCardMonths ( startMonth ) . subscribe ( data => { this . creditCardMonths = data ; } ) ; this . _checkoutService . getCreditCardYears ( ) . subscribe ( data => { this . creditCardYears = data ; } ) ; this . _checkoutService . getCountries ( ) . subscribe ( data => { this . countries = data ; } ) ; } cartDetails ( ) { this . cartItems = this . _cartService . cartItems ; this . _cartService . totalPrice . subscribe ( data => this . totalPrice = data ) ; this . _cartService . totalQuantity . subscribe ( data => this . totalQuantity = data ) ; this . _cartService . calculateTotalPrice ( ) ; } onSubmit ( ) { console . log ( 'Purchase the books' ) ; console . log ( this . checkoutFormGroup . get ( 'customer' ) . value ) ; console . log ( "Emial is" , this . checkoutFormGroup . get ( 'customer' ) . value . email ) ; } copyShippingAddressToBillingAddress ( event ) { if ( event . target . checked ) { this . checkoutFormGroup . controls . billingAddress . setValue ( this . checkoutFormGroup . controls . shippingAddress . value ) ; } else { this . checkoutFormGroup . controls . billingAddress . reset ( ) ; } } handleMonthsAndYears ( ) { const creditCardFormGroup = this . checkoutFormGroup . get ( 'creditCard' ) ; const currentYear = new Date ( ) . getFullYear ( ) ; const selectedYear = Number ( creditCardFormGroup . value . expirationYear ) ; let startMonth ; if ( currentYear === selectedYear ) { startMonth = new Date ( ) . getMonth ( ) + 1 ; } else { startMonth = 1 ; } this . _checkoutService . getCreditCardMonths ( startMonth ) . subscribe ( data => { this . creditCardMonths = data ; } ) ; } getStates ( formGroupName ) { const formGroup = this . checkoutFormGroup . get ( formGroupName ) ; const countryCode = formGroup . value . country . code ; const countryName = formGroup . value . country . name ; console . log ( `{formGroupName} country code: ${ countryCode }` ) ; console . log ( `{formGroupName} country name: ${ countryName }` ) ; this . _checkoutService . getStates ( countryCode ) . subscribe ( data => { if ( formGroupName === 'shippingAddress' ) { this . shippingAddressStates = data ; } else { this . billingAddressStates = data ; } formGroup . get ( 'state' ) . setValue ( data [ 0 ] ) ; } ) ; } }