hexa-shop-prod

src/app/app-routing.module.ts

@@ -1,24 +1,18 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
-import { HomeComponent } from './home-section/home/home.component';
-import { NavBarComponent } from './shared/components/nav-bar/nav-bar.component';
-import { FooterComponent } from './shared/components/footer/footer.component';
+import { MainPageComponent } from './home-section/main-page/main-page.component';
 
-const routes: Routes = [
-
+export const routes: Routes = [
   {
-    path: 'nav', component: NavBarComponent
+    path: '',
+    // loadChildren: () => import('/home/cheruiyot/clotours/src/app/home-section/home.module').then (m => m.HomeModule)
+    component: MainPageComponent,
+    pathMatch: 'full',
   },
-  {
-    path: 'footer', component: FooterComponent
-  },
-  {
-    path: '', component: HomeComponent
-  }
 ];
 
 @NgModule({
   imports: [RouterModule.forRoot(routes)],
-  exports: [RouterModule]
+  exports: [RouterModule],
 })
-export class AppRoutingModule { }
+export class AppRoutingModule {}

src/app/app.component.html

@@ -1,4 +1,3 @@
-<app-nav-bar></app-nav-bar>
+<!-- <app-nav-bar></app-nav-bar> -->
 <router-outlet></router-outlet>
-<app-footer></app-footer>
-<!-- <app-item-quantity></app-item-quantity> -->
+<!-- <app-footer></app-footer> -->

src/app/app.module.ts

@@ -4,8 +4,7 @@ import { BrowserModule } from '@angular/platform-browser';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 
-import { HomeComponent } from './home-section/home/home.component';
-import { HomeModule } from './home-section/home/home.module';
+import { HomeModule } from './home-section/home.module';
 
 import { ProductsModule } from './features/products/products.module';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@@ -18,19 +17,18 @@ import { MatSelectModule } from '@angular/material/select';
 import { MatSidenavModule } from '@angular/material/sidenav'; 
 import { MatToolbarModule } from '@angular/material/toolbar'; 
 import { MatListModule } from '@angular/material/list';
-import { HomeRoutingModule } from './home-section/home/home-routing.module';
+import { HomeRoutingModule } from './home-section/home-routing.module';
 import { SharedModule } from './shared/shared.module';
 import { CartModule } from './features/cart/cart.module';
 import { DataModule } from './data/data.module';
 import { CheckoutModule } from './features/checkout/checkout.module';
 import { AuthModule } from './features/auth/auth.module';
-import { CurrencyPipe } from '@angular/common';
+import { HttpClientModule } from '@angular/common/http';
 
 
 @NgModule({
   declarations: [
-    AppComponent,
-    HomeComponent
+    AppComponent
   ],
   imports: [
     BrowserModule,
@@ -52,9 +50,9 @@ import { CurrencyPipe } from '@angular/common';
     DataModule,
     CheckoutModule,
     AuthModule,
-
+    HttpClientModule
   ],
-  providers: [{ provide: LOCALE_ID, useValue: 'en-US' }, CurrencyPipe],
+  providers: [{ provide: LOCALE_ID, useValue: 'en-US' }],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

src/app/core/core.module.ts

@@ -1,43 +1,21 @@
 import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { HeaderComponent } from './components/header/header.component';
 import { ErrorComponent } from './components/error/error.component';
 import { NotFoundComponent } from './components/not-found/not-found.component';
 import { RouterModule } from '@angular/router';
 import { SharedModule } from '../shared/shared.module';
 
-
-
-// @NgModule({
-//   declarations: [
-//     HeaderComponent,
-//     ErrorComponent,
-//     NotFoundComponent
-//   ],
-//   imports: [
-//     CommonModule,
-//     RouterModule.forChild([
-//       { path: '404', component: NotFoundComponent },
-//       { path: 'error', component: ErrorComponent },
-//       { path: '**', redirectTo: '/404' }
-//     ]
-//   }),
-
-// export class CoreModule { }
-
 @NgModule({
-  declarations: [HeaderComponent, NotFoundComponent, ErrorComponent],
+  declarations: [NotFoundComponent, ErrorComponent],
   imports: [
     RouterModule.forChild([
       { path: '404', component: NotFoundComponent },
       { path: 'error', component: ErrorComponent },
       { path: '**', redirectTo: '/404' }
     ]),
-    // MatBadgeModule,
     SharedModule
   ],
   exports: [
-    HeaderComponent,
+
   ]
 })
 export class CoreModule { }

src/app/features/cart/cart/cart.component.css

@@ -0,0 +1,29 @@
+.nav {
+  margin-bottom: 10%;
+}
+
+.cart {
+  height: auto;
+}
+
+.totals {
+  margin-top: 5%;
+  margin-bottom: 10%;
+}
+
+.item-image {
+  height: 20%;
+  width: 20%;
+}
+
+@media (max-width: 1024px) {
+  .nav {
+    margin-bottom: 20%;
+  }
+}
+
+@media (max-width: 768px) {
+  .nav {
+    margin-bottom: 30%;
+  }
+}

src/app/features/cart/cart/cart.component.html

@@ -0,0 +1,71 @@
+<app-nav-bar class="nav"></app-nav-bar>
+<div class="container cart">
+  <h1>Cart</h1>
+  <div class="row">
+    <table class="table">
+      <thead>
+        <tr>
+          <th scope="col"></th>
+          <th scope="col">Product</th>
+          <th scope="col">Price</th>
+          <th scope="col">Quantity</th>
+        </tr>
+      </thead>
+      <tbody *ngFor="let entry of items | keyvalue">
+        <tr>
+          <th scope="row">
+            <img [src]="entry.value.item.imageUrl" alt="product.name" />
+          </th>
+          <td>
+            <span> {{ entry.value.item.name }}</span>
+          </td>
+          <td>
+            <span> {{ entry.value.item.price | currency }}</span>
+          </td>
+          <td>
+            <span> {{ entry.value.quantity }}</span>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+
+    <h3>Subtotal Cost: {{ calculateSubtotal() | currency }}</h3>
+
+    <div>
+      <form [formGroup]="checkoutForm" (ngSubmit)="onSubmit()">
+        <div>
+          <label for="name"> Name </label>
+          <input id="name" type="text" formControlName="name" />
+        </div>
+
+        <div>
+          <label for="address"> Address </label>
+          <input id="address" type="text" formControlName="address" />
+        </div>
+
+        <div>
+          <label for="shipping"> Shipping options</label>
+          <select
+            id="shipping"
+            formControlName="shipping"
+            (change)="onShippingChange()"
+          >
+            <option
+              *ngFor="let option of shippingOptions"
+              [value]="option.type"
+            >
+              {{ option.type }}: {{ option.price | currency }}
+            </option>
+          </select>
+        </div>
+
+        <h3>Shipping Cost: {{ shippingCost | currency }}</h3>
+
+        <h3>Total Cost: {{ totalCost | currency }}</h3>
+
+        <button class="button" type="submit">Proceed to checkout</button>
+      </form>
+    </div>
+  </div>
+</div>
+<app-footer class="footer"></app-footer>

src/app/features/products/pages/tours/tours.component.spec.ts → src/app/features/cart/cart/cart.component.spec.ts

@@ -1,16 +1,16 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { ToursComponent } from './tours.component';
+import { CartComponent } from './cart.component';
 
-describe('ToursComponent', () => {
-  let component: ToursComponent;
-  let fixture: ComponentFixture<ToursComponent>;
+describe('CartComponent', () => {
+  let component: CartComponent;
+  let fixture: ComponentFixture<CartComponent>;
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [ToursComponent]
+      declarations: [CartComponent]
     });
-    fixture = TestBed.createComponent(ToursComponent);
+    fixture = TestBed.createComponent(CartComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });