From babfea5e4750bc2bb2e322d1f60e8011edcb59df Mon Sep 17 00:00:00 2001
From: Le Deng <z00382545@z00382545-mac.local>
Date: Sat, 11 Mar 2017 07:37:09 -0500
Subject: [PATCH] latest

---
 bookstore-api/.idea/workspace.xml             | 259 ++++++++----------
 .../bookstore/resource/CheckoutResource.java  |  84 ++++++
 .../orderConfirmationEmailTemplate.html       | 125 +++++++++
 .../bookstore/resource/CheckoutResource.class | Bin 0 -> 5003 bytes
 .../orderConfirmationEmailTemplate.html       | 125 +++++++++
 store-front/src/app/app.module.ts             |   8 +-
 store-front/src/app/app.routing.ts            |   6 +
 .../order-summary/order-summary.component.css |   0
 .../order-summary.component.html              |  45 +++
 .../order-summary.component.spec.ts           |  28 ++
 .../order-summary/order-summary.component.ts  |  18 ++
 .../app/components/order/order.component.html |  11 +-
 .../app/components/order/order.component.ts   |  41 ++-
 .../shopping-cart.component.html              |   2 +-
 store-front/src/app/models/billing-address.ts |   1 +
 store-front/src/app/models/payment.ts         |   1 -
 .../src/app/models/shipping-address.ts        |   3 +
 .../src/app/services/checkout.service.spec.ts |  16 ++
 .../src/app/services/checkout.service.ts      |  32 +++
 19 files changed, 641 insertions(+), 164 deletions(-)
 create mode 100644 bookstore-api/src/main/java/com/bookstore/resource/CheckoutResource.java
 create mode 100644 bookstore-api/src/main/resources/templates/orderConfirmationEmailTemplate.html
 create mode 100644 bookstore-api/target/classes/com/bookstore/resource/CheckoutResource.class
 create mode 100644 bookstore-api/target/classes/templates/orderConfirmationEmailTemplate.html
 create mode 100644 store-front/src/app/components/order-summary/order-summary.component.css
 create mode 100644 store-front/src/app/components/order-summary/order-summary.component.html
 create mode 100644 store-front/src/app/components/order-summary/order-summary.component.spec.ts
 create mode 100644 store-front/src/app/components/order-summary/order-summary.component.ts
 create mode 100644 store-front/src/app/services/checkout.service.spec.ts
 create mode 100644 store-front/src/app/services/checkout.service.ts

diff --git a/bookstore-api/.idea/workspace.xml b/bookstore-api/.idea/workspace.xml
index 67f1462..7edefab 100644
--- a/bookstore-api/.idea/workspace.xml
+++ b/bookstore-api/.idea/workspace.xml
@@ -16,21 +16,11 @@
   <component name="ExecutionTargetManager" SELECTED_TARGET="default_target" />
   <component name="FileEditorManager">
     <leaf SIDE_TABS_SIZE_LIMIT_KEY="300">
-      <file leaf-file-name="UserResource.java" pinned="false" current-in-tab="false">
-        <entry file="file://$PROJECT_DIR$/src/main/java/com/bookstore/resource/UserResource.java">
+      <file leaf-file-name="CheckoutResource.java" pinned="false" current-in-tab="true">
+        <entry file="file://$PROJECT_DIR$/src/main/java/com/bookstore/resource/CheckoutResource.java">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="2400">
-              <caret line="187" column="0" lean-forward="false" selection-start-line="187" selection-start-column="0" selection-end-line="188" selection-end-column="0" />
-              <folding />
-            </state>
-          </provider>
-        </entry>
-      </file>
-      <file leaf-file-name="ShippingResource.java" pinned="false" current-in-tab="false">
-        <entry file="file://$PROJECT_DIR$/src/main/java/com/bookstore/resource/ShippingResource.java">
-          <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="143">
-              <caret line="49" column="4" lean-forward="false" selection-start-line="49" selection-start-column="4" selection-end-line="57" selection-end-column="5" />
+            <state relative-caret-position="333">
+              <caret line="56" column="60" lean-forward="false" selection-start-line="56" selection-start-column="60" selection-end-line="56" selection-end-column="60" />
               <folding>
                 <element signature="imports" expanded="true" />
               </folding>
@@ -38,83 +28,31 @@
           </provider>
         </entry>
       </file>
-      <file leaf-file-name="PaymentResource.java" pinned="false" current-in-tab="false">
-        <entry file="file://$PROJECT_DIR$/src/main/java/com/bookstore/resource/PaymentResource.java">
-          <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="563">
-              <caret line="113" column="30" lean-forward="false" selection-start-line="113" selection-start-column="30" selection-end-line="113" selection-end-column="30" />
-              <folding />
-            </state>
-          </provider>
-        </entry>
-      </file>
-      <file leaf-file-name="Payment.java" pinned="false" current-in-tab="true">
+      <file leaf-file-name="Payment.java" pinned="false" current-in-tab="false">
         <entry file="file://$PROJECT_DIR$/src/main/java/com/bookstore/domain/Payment.java">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="-52">
+            <state relative-caret-position="183">
               <caret line="23" column="35" lean-forward="true" selection-start-line="23" selection-start-column="35" selection-end-line="23" selection-end-column="35" />
               <folding />
             </state>
           </provider>
         </entry>
       </file>
-      <file leaf-file-name="UserPayment.java" pinned="false" current-in-tab="false">
-        <entry file="file://$PROJECT_DIR$/src/main/java/com/bookstore/domain/UserPayment.java">
-          <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="150">
-              <caret line="25" column="35" lean-forward="true" selection-start-line="25" selection-start-column="35" selection-end-line="25" selection-end-column="35" />
-              <folding />
-            </state>
-          </provider>
-        </entry>
-      </file>
-      <file leaf-file-name="BookResource.java" pinned="false" current-in-tab="false">
-        <entry file="file://$PROJECT_DIR$/src/main/java/com/bookstore/resource/BookResource.java">
-          <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="180">
-              <caret line="124" column="0" lean-forward="true" selection-start-line="124" selection-start-column="0" selection-end-line="124" selection-end-column="0" />
-              <folding />
-            </state>
-          </provider>
-        </entry>
-      </file>
-      <file leaf-file-name="ShoppingCartResource.java" pinned="false" current-in-tab="false">
-        <entry file="file://$PROJECT_DIR$/src/main/java/com/bookstore/resource/ShoppingCartResource.java">
-          <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="293">
-              <caret line="90" column="5" lean-forward="true" selection-start-line="90" selection-start-column="5" selection-end-line="90" selection-end-column="5" />
-              <folding>
-                <element signature="imports" expanded="true" />
-              </folding>
-            </state>
-          </provider>
-        </entry>
-      </file>
-      <file leaf-file-name="Order.java" pinned="false" current-in-tab="false">
-        <entry file="file://$PROJECT_DIR$/src/main/java/com/bookstore/domain/Order.java">
-          <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="165">
-              <caret line="22" column="4" lean-forward="true" selection-start-line="22" selection-start-column="4" selection-end-line="27" selection-end-column="34" />
-              <folding />
-            </state>
-          </provider>
-        </entry>
-      </file>
       <file leaf-file-name="BillingAddress.java" pinned="false" current-in-tab="false">
         <entry file="file://$PROJECT_DIR$/src/main/java/com/bookstore/domain/BillingAddress.java">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="300">
+            <state relative-caret-position="75">
               <caret line="21" column="39" lean-forward="true" selection-start-line="21" selection-start-column="39" selection-end-line="21" selection-end-column="39" />
               <folding />
             </state>
           </provider>
         </entry>
       </file>
-      <file leaf-file-name="CartItem.java" pinned="false" current-in-tab="false">
-        <entry file="file://$PROJECT_DIR$/src/main/java/com/bookstore/domain/CartItem.java">
+      <file leaf-file-name="ShippingAddress.java" pinned="false" current-in-tab="false">
+        <entry file="file://$PROJECT_DIR$/src/main/java/com/bookstore/domain/ShippingAddress.java">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="420">
-              <caret line="33" column="15" lean-forward="false" selection-start-line="33" selection-start-column="15" selection-end-line="33" selection-end-column="15" />
+            <state relative-caret-position="15">
+              <caret line="24" column="0" lean-forward="true" selection-start-line="24" selection-start-column="0" selection-end-line="24" selection-end-column="0" />
               <folding />
             </state>
           </provider>
@@ -125,8 +63,8 @@
   <component name="FileTemplateManagerImpl">
     <option name="RECENT_TEMPLATES">
       <list>
-        <option value="HTML File" />
         <option value="Class" />
+        <option value="HTML File" />
       </list>
     </option>
   </component>
@@ -189,6 +127,8 @@
         <option value="$PROJECT_DIR$/src/main/java/com/bookstore/domain/Order.java" />
         <option value="$PROJECT_DIR$/src/main/java/com/bookstore/resource/ShippingResource.java" />
         <option value="$PROJECT_DIR$/src/main/java/com/bookstore/resource/PaymentResource.java" />
+        <option value="$PROJECT_DIR$/src/main/resources/templates/orderConfirmationEmailTemplate.html" />
+        <option value="$PROJECT_DIR$/src/main/java/com/bookstore/resource/CheckoutResource.java" />
       </list>
     </option>
   </component>
@@ -276,6 +216,32 @@
               <option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.PsiDirectoryNode" />
             </PATH_ELEMENT>
           </PATH>
+          <PATH>
+            <PATH_ELEMENT>
+              <option name="myItemId" value="bookstore-api" />
+              <option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.ProjectViewProjectNode" />
+            </PATH_ELEMENT>
+            <PATH_ELEMENT>
+              <option name="myItemId" value="bookstore-api" />
+              <option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.PsiDirectoryNode" />
+            </PATH_ELEMENT>
+            <PATH_ELEMENT>
+              <option name="myItemId" value="src" />
+              <option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.PsiDirectoryNode" />
+            </PATH_ELEMENT>
+            <PATH_ELEMENT>
+              <option name="myItemId" value="main" />
+              <option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.PsiDirectoryNode" />
+            </PATH_ELEMENT>
+            <PATH_ELEMENT>
+              <option name="myItemId" value="resources" />
+              <option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.PsiDirectoryNode" />
+            </PATH_ELEMENT>
+            <PATH_ELEMENT>
+              <option name="myItemId" value="templates" />
+              <option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.PsiDirectoryNode" />
+            </PATH_ELEMENT>
+          </PATH>
           <PATH>
             <PATH_ELEMENT>
               <option name="myItemId" value="bookstore-api" />
@@ -988,12 +954,12 @@
       <workItem from="1488378219247" duration="650000" />
       <workItem from="1488461561430" duration="18419000" />
       <workItem from="1488731165185" duration="30270000" />
-      <workItem from="1489159532831" duration="4800000" />
+      <workItem from="1489159532831" duration="8291000" />
     </task>
     <servers />
   </component>
   <component name="TimeTrackingManager">
-    <option name="totallyTimeSpent" value="97082000" />
+    <option name="totallyTimeSpent" value="100573000" />
   </component>
   <component name="ToolWindowManager">
     <frame x="72" y="23" width="1280" height="797" extended-state="0" />
@@ -1017,7 +983,7 @@
       <window_info id="Image Layers" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="5" side_tool="false" content_ui="tabs" />
       <window_info id="Capture Analysis" active="false" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="7" side_tool="false" content_ui="tabs" />
       <window_info id="Version Control" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.32907802" sideWeight="0.5" order="8" side_tool="false" content_ui="tabs" />
-      <window_info id="Run" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.32624114" sideWeight="0.5" order="2" side_tool="false" content_ui="tabs" />
+      <window_info id="Run" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="true" show_stripe_button="true" weight="0.32624114" sideWeight="0.5" order="2" side_tool="false" content_ui="tabs" />
       <window_info id="Spring" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.32907802" sideWeight="0.5" order="9" side_tool="false" content_ui="tabs" />
       <window_info id="Terminal" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="10" side_tool="false" content_ui="tabs" />
       <window_info id="Project" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="true" show_stripe_button="true" weight="0.32229403" sideWeight="0.5" order="0" side_tool="false" content_ui="combo" />
@@ -1040,7 +1006,7 @@
   </component>
   <component name="XDebuggerManager">
     <breakpoint-manager>
-      <option name="time" value="9" />
+      <option name="time" value="18" />
     </breakpoint-manager>
     <watches-manager />
   </component>
@@ -1049,22 +1015,6 @@
     <option name="FILTER_TARGETS" value="false" />
   </component>
   <component name="editorHistoryManager">
-    <entry file="file://$PROJECT_DIR$/src/main/java/com/bookstore/resource/BookResource.java">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="0">
-          <caret line="0" column="0" lean-forward="false" selection-start-line="0" selection-start-column="0" selection-end-line="0" selection-end-column="0" />
-          <folding />
-        </state>
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/src/main/java/com/bookstore/config/SecurityConfig.java">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="375">
-          <caret line="37" column="21" lean-forward="true" selection-start-line="37" selection-start-column="21" selection-end-line="37" selection-end-column="21" />
-          <folding />
-        </state>
-      </provider>
-    </entry>
     <entry file="file://$PROJECT_DIR$/src/main/java/com/bookstore/service/impl/OrderServiceImpl.java">
       <provider selected="true" editor-type-id="text-editor">
         <state relative-caret-position="193">
@@ -1094,13 +1044,6 @@
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/main/java/com/bookstore/domain/ShippingAddress.java">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="165">
-          <caret line="12" column="0" lean-forward="true" selection-start-line="12" selection-start-column="0" selection-end-line="12" selection-end-column="0" />
-        </state>
-      </provider>
-    </entry>
     <entry file="file://$PROJECT_DIR$/src/main/java/com/bookstore/domain/User.java">
       <provider selected="true" editor-type-id="text-editor">
         <state relative-caret-position="135">
@@ -1220,14 +1163,6 @@
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/main/java/com/bookstore/utility/MailConstructor.java">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="345">
-          <caret line="37" column="176" lean-forward="false" selection-start-line="37" selection-start-column="176" selection-end-line="37" selection-end-column="176" />
-          <folding />
-        </state>
-      </provider>
-    </entry>
     <entry file="file://$PROJECT_DIR$/src/main/java/com/bookstore/domain/ShoppingCart.java">
       <provider selected="true" editor-type-id="text-editor">
         <state relative-caret-position="248">
@@ -1434,14 +1369,6 @@
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/main/java/com/bookstore/resource/UserResource.java">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="2400">
-          <caret line="187" column="0" lean-forward="false" selection-start-line="187" selection-start-column="0" selection-end-line="188" selection-end-column="0" />
-          <folding />
-        </state>
-      </provider>
-    </entry>
     <entry file="file://$PROJECT_DIR$/src/main/java/com/bookstore/resource/BookResource.java">
       <provider selected="true" editor-type-id="text-editor">
         <state relative-caret-position="180">
@@ -1458,38 +1385,12 @@
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/main/java/com/bookstore/resource/ShoppingCartResource.java">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="293">
-          <caret line="90" column="5" lean-forward="true" selection-start-line="90" selection-start-column="5" selection-end-line="90" selection-end-column="5" />
-          <folding>
-            <element signature="imports" expanded="true" />
-          </folding>
-        </state>
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/src/main/java/com/bookstore/domain/Order.java">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="165">
-          <caret line="22" column="4" lean-forward="true" selection-start-line="22" selection-start-column="4" selection-end-line="27" selection-end-column="34" />
-          <folding />
-        </state>
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/src/main/java/com/bookstore/domain/BillingAddress.java">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="300">
-          <caret line="21" column="39" lean-forward="true" selection-start-line="21" selection-start-column="39" selection-end-line="21" selection-end-column="39" />
-          <folding />
-        </state>
-      </provider>
-    </entry>
     <entry file="file://$PROJECT_DIR$/src/main/java/com/bookstore/resource/ShippingResource.java">
       <provider selected="true" editor-type-id="text-editor">
         <state relative-caret-position="143">
           <caret line="49" column="4" lean-forward="false" selection-start-line="49" selection-start-column="4" selection-end-line="57" selection-end-column="5" />
           <folding>
-            <element signature="imports" expanded="true" />
+            <element signature="imports" expanded="false" />
           </folding>
         </state>
       </provider>
@@ -1510,13 +1411,81 @@
         </state>
       </provider>
     </entry>
+    <entry file="file://$PROJECT_DIR$/src/main/java/com/bookstore/resource/ShoppingCartResource.java">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="293">
+          <caret line="90" column="5" lean-forward="true" selection-start-line="90" selection-start-column="5" selection-end-line="90" selection-end-column="5" />
+          <folding>
+            <element signature="imports" expanded="false" />
+          </folding>
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/src/main/java/com/bookstore/utility/MailConstructor.java">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="293">
+          <caret line="43" column="21" lean-forward="true" selection-start-line="43" selection-start-column="21" selection-end-line="43" selection-end-column="21" />
+          <folding />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/src/main/java/com/bookstore/resource/UserResource.java">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="548">
+          <caret line="223" column="0" lean-forward="false" selection-start-line="223" selection-start-column="0" selection-end-line="224" selection-end-column="0" />
+          <folding />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/src/main/java/com/bookstore/domain/Order.java">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="45">
+          <caret line="34" column="0" lean-forward="true" selection-start-line="34" selection-start-column="0" selection-end-line="34" selection-end-column="0" />
+          <folding />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/src/main/resources/templates/orderConfirmationEmailTemplate.html">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="1890">
+          <caret line="124" column="7" lean-forward="false" selection-start-line="124" selection-start-column="7" selection-end-line="124" selection-end-column="7" />
+          <folding />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/src/main/java/com/bookstore/domain/ShippingAddress.java">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="15">
+          <caret line="24" column="0" lean-forward="true" selection-start-line="24" selection-start-column="0" selection-end-line="24" selection-end-column="0" />
+          <folding />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/src/main/java/com/bookstore/domain/BillingAddress.java">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="75">
+          <caret line="21" column="39" lean-forward="true" selection-start-line="21" selection-start-column="39" selection-end-line="21" selection-end-column="39" />
+          <folding />
+        </state>
+      </provider>
+    </entry>
     <entry file="file://$PROJECT_DIR$/src/main/java/com/bookstore/domain/Payment.java">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="-52">
+        <state relative-caret-position="183">
           <caret line="23" column="35" lean-forward="true" selection-start-line="23" selection-start-column="35" selection-end-line="23" selection-end-column="35" />
           <folding />
         </state>
       </provider>
     </entry>
+    <entry file="file://$PROJECT_DIR$/src/main/java/com/bookstore/resource/CheckoutResource.java">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="333">
+          <caret line="56" column="60" lean-forward="false" selection-start-line="56" selection-start-column="60" selection-end-line="56" selection-end-column="60" />
+          <folding>
+            <element signature="imports" expanded="true" />
+          </folding>
+        </state>
+      </provider>
+    </entry>
   </component>
 </project>
\ No newline at end of file
diff --git a/bookstore-api/src/main/java/com/bookstore/resource/CheckoutResource.java b/bookstore-api/src/main/java/com/bookstore/resource/CheckoutResource.java
new file mode 100644
index 0000000..21e3569
--- /dev/null
+++ b/bookstore-api/src/main/java/com/bookstore/resource/CheckoutResource.java
@@ -0,0 +1,84 @@
+package com.bookstore.resource;
+
+import com.bookstore.domain.*;
+import com.bookstore.service.*;
+import com.bookstore.utility.MailConstructor;
+import com.bookstore.utility.USConstants;
+import com.fasterxml.jackson.databind.ObjectMapper;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.http.HttpStatus;
+import org.springframework.http.ResponseEntity;
+import org.springframework.mail.javamail.JavaMailSender;
+import org.springframework.ui.Model;
+import org.springframework.web.bind.annotation.*;
+
+import java.security.Principal;
+import java.time.LocalDate;
+import java.util.*;
+
+/**
+ * Created by z00382545 on 3/10/17.
+ */
+
+@RestController
+@RequestMapping("/checkout")
+public class CheckoutResource {
+
+    @Autowired
+    private JavaMailSender mailSender;
+
+    @Autowired
+    private UserService userService;
+
+    @Autowired
+    private CartItemService cartItemService;
+
+    @Autowired
+    private OrderService orderService;
+
+    @Autowired
+    private ShoppingCartService shoppingCartService;
+
+    @Autowired
+    private MailConstructor mailConstructor;
+
+    @RequestMapping(value = "/checkout", method = RequestMethod.POST)
+    public ResponseEntity checkoutPost(
+            @RequestBody HashMap<String, Object> mapper,
+            Principal principal
+    ) {
+        ObjectMapper om = new ObjectMapper();
+
+        ShippingAddress shippingAddress = om.convertValue(mapper.get("shippingAddress"), ShippingAddress.class);
+
+        BillingAddress billingAddress = om.convertValue(mapper.get("billingAddress"), BillingAddress.class);
+
+        Payment payment = om.convertValue(mapper.get("payment"), Payment.class);
+        String shippingMethod = (String) mapper.get("shippingMethod");
+
+
+        ShoppingCart shoppingCart = userService.findByUsername(principal.getName()).getShoppingCart();
+
+        List<CartItem> cartItemList = cartItemService.findByShoppingCart(shoppingCart);
+
+        User user = userService.findByUsername(principal.getName());
+
+        Order order = orderService.createOrder(shoppingCart, shippingAddress, billingAddress, payment, shippingMethod, user);
+
+        mailSender.send(mailConstructor.constructOrderConfirmationEmail(user, order, Locale.ENGLISH));
+
+        shoppingCartService.clearShoppingCart(shoppingCart);
+
+        LocalDate today = LocalDate.now();
+        LocalDate estimatedDeliveryDate;
+
+        if (shippingMethod.equals("groundShipping")) {
+            estimatedDeliveryDate = today.plusDays(5);
+        } else {
+            estimatedDeliveryDate = today.plusDays(3);
+        }
+
+        return new ResponseEntity("Order Checkout Successful!", HttpStatus.OK);
+
+    }
+}
diff --git a/bookstore-api/src/main/resources/templates/orderConfirmationEmailTemplate.html b/bookstore-api/src/main/resources/templates/orderConfirmationEmailTemplate.html
new file mode 100644
index 0000000..89ecbd8
--- /dev/null
+++ b/bookstore-api/src/main/resources/templates/orderConfirmationEmailTemplate.html
@@ -0,0 +1,125 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
+<head>
+    <link href="/css/bootstrap.min.css" rel="stylesheet"/>
+    <link href="/css/non-responsive.css" rel="stylesheet"/>
+
+    <!-- Bootstrap Dropdown Hover CSS -->
+    <link href="/css/animate.min.css" rel="stylesheet"/>
+    <link href="/css/bootstrap-dropdownhover.min.css" rel="stylesheet"/>
+
+    <link href="/css/font-awesome.min.css" rel="stylesheet"/>
+
+    <link href="/css/style.css" rel="stylesheet"/>
+
+    <style>
+        table {
+            border-collapse: collapse;
+        }
+
+        table, th, td {
+            border: 1px solid black;
+        }
+    </style>
+</head>
+<body>
+<p>Dear <span th:text="${user.firstName}"></span>,</p>
+<br/>
+<p>Thank you for shopping from our book store. We hope you had a good time with our service!</p>
+<p>Your order number is: <strong>#<span th:text="${order.id}"></span></strong>. Here is your order detail:</p>
+<h2>Order Detail for purchase #<span th:text="${order.id}"></span></h2>
+<hr/>
+
+<table>
+    <tr>
+        <th>Billing Details</th>
+        <th>Payment Information</th>
+        <th>Shipping Address</th>
+    </tr>
+    <tr>
+        <td>
+            <span th:text="${order.billingAddress.billingAddressName}"></span><br/>
+            <span th:text="${order.billingAddress.billingAddressStreet1}+' '+${order.billingAddress.billingAddressStreet2}"></span><br/>
+            <span th:text="${order.billingAddress.billingAddressCity}"></span><br/>
+            <span th:text="${order.billingAddress.billingAddressState}"></span><br/>
+            <span th:text="${order.billingAddress.billingAddressZipcode}"></span><br/>
+        </td>
+        <td>
+            <span th:text="${order.payment.holderName}">Card Name</span><br/>
+            Visa<br/>
+            <span th:text="${order.payment.cardNumber}">Card Number</span><br/>
+            <span>Exp Date:</span> <span
+                th:text="${order.payment.expiryMonth}"></span>/<span
+                th:text="${order.payment.expiryYear}"></span><br/>
+        </td>
+        <td>
+            <span th:text="${order.shippingAddress.shippingAddressName}">David Peere:</span><br/>
+            <span th:text="${order.shippingAddress.shippingAddressStreet1}+' '+${order.shippingAddress.shippingAddressStreet2}"></span><br/>
+            <span th:text="${order.shippingAddress.shippingAddressCity}"></span><br/>
+            <span th:text="${order.shippingAddress.shippingAddressState}"></span><br/>
+            <span th:text="${order.shippingAddress.shippingAddressZipcode}"></span><br/>
+        </td>
+    </tr>
+</table>
+
+<h3><strong>Order summary</strong></h3>
+<table>
+    <thead>
+    <tr>
+        <td><strong>Item Name</strong></td>
+        <td class="text-center"><strong>Item Price</strong></td>
+        <td class="text-center"><strong>Item Quantity</strong>
+        </td>
+        <td class="text-right"><strong>Total</strong></td>
+    </tr>
+    </thead>
+    <tbody>
+    <tr th:each="cartItem : ${cartItemList}">
+        <td><span data-th-text="${cartItem.book.title}"></span>
+        </td>
+        <td data-th-text="${cartItem.book.ourPrice}"
+            class="text-center">
+        </td>
+        <td data-th-text="${cartItem.qty}" class="text-center">
+
+        </td>
+        <td data-th-text="${cartItem.subtotal}"
+            class="text-right">
+        </td>
+    </tr>
+    <tr>
+        <td class="highrow"></td>
+        <td class="highrow"></td>
+        <td class="highrow text-center">
+            <strong>Subtotal</strong></td>
+        <td data-th-text="${order.orderTotal}"
+            class="highrow text-right">
+        </td>
+    </tr>
+    <tr>
+        <td class="emptyrow"></td>
+        <td class="emptyrow"></td>
+        <td class="emptyrow text-center"><strong>Tax</strong>
+        </td>
+        <td data-th-text="${#numbers.formatDecimal(order.orderTotal*0.06, 0, 2)}"
+            class="emptyrow text-right">
+        </td>
+    </tr>
+    <tr>
+        <td class="emptyrow"><i
+                class="fa fa-barcode iconbig"></i></td>
+        <td class="emptyrow"></td>
+        <td class="emptyrow text-center"><strong>Total</strong>
+        </td>
+        <td th:with="total=${order.orderTotal+order.orderTotal*0.06}"
+            data-th-text="${#numbers.formatDecimal(total, 0, 2)}"
+            class="emptyrow text-right">
+        </td>
+    </tr>
+    </tbody>
+</table>
+<br/>
+<p>Best,</p>
+<p>Le's Bookstore</p>
+</body>
+</html>
\ No newline at end of file
diff --git a/bookstore-api/target/classes/com/bookstore/resource/CheckoutResource.class b/bookstore-api/target/classes/com/bookstore/resource/CheckoutResource.class
new file mode 100644
index 0000000000000000000000000000000000000000..7423619ee4c641d9e130cc38bf4f2929459d4f6b
GIT binary patch
literal 5003
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
Hena#>w#4g{

literal 0
HcmV?d00001

diff --git a/bookstore-api/target/classes/templates/orderConfirmationEmailTemplate.html b/bookstore-api/target/classes/templates/orderConfirmationEmailTemplate.html
new file mode 100644
index 0000000..89ecbd8
--- /dev/null
+++ b/bookstore-api/target/classes/templates/orderConfirmationEmailTemplate.html
@@ -0,0 +1,125 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
+<head>
+    <link href="/css/bootstrap.min.css" rel="stylesheet"/>
+    <link href="/css/non-responsive.css" rel="stylesheet"/>
+
+    <!-- Bootstrap Dropdown Hover CSS -->
+    <link href="/css/animate.min.css" rel="stylesheet"/>
+    <link href="/css/bootstrap-dropdownhover.min.css" rel="stylesheet"/>
+
+    <link href="/css/font-awesome.min.css" rel="stylesheet"/>
+
+    <link href="/css/style.css" rel="stylesheet"/>
+
+    <style>
+        table {
+            border-collapse: collapse;
+        }
+
+        table, th, td {
+            border: 1px solid black;
+        }
+    </style>
+</head>
+<body>
+<p>Dear <span th:text="${user.firstName}"></span>,</p>
+<br/>
+<p>Thank you for shopping from our book store. We hope you had a good time with our service!</p>
+<p>Your order number is: <strong>#<span th:text="${order.id}"></span></strong>. Here is your order detail:</p>
+<h2>Order Detail for purchase #<span th:text="${order.id}"></span></h2>
+<hr/>
+
+<table>
+    <tr>
+        <th>Billing Details</th>
+        <th>Payment Information</th>
+        <th>Shipping Address</th>
+    </tr>
+    <tr>
+        <td>
+            <span th:text="${order.billingAddress.billingAddressName}"></span><br/>
+            <span th:text="${order.billingAddress.billingAddressStreet1}+' '+${order.billingAddress.billingAddressStreet2}"></span><br/>
+            <span th:text="${order.billingAddress.billingAddressCity}"></span><br/>
+            <span th:text="${order.billingAddress.billingAddressState}"></span><br/>
+            <span th:text="${order.billingAddress.billingAddressZipcode}"></span><br/>
+        </td>
+        <td>
+            <span th:text="${order.payment.holderName}">Card Name</span><br/>
+            Visa<br/>
+            <span th:text="${order.payment.cardNumber}">Card Number</span><br/>
+            <span>Exp Date:</span> <span
+                th:text="${order.payment.expiryMonth}"></span>/<span
+                th:text="${order.payment.expiryYear}"></span><br/>
+        </td>
+        <td>
+            <span th:text="${order.shippingAddress.shippingAddressName}">David Peere:</span><br/>
+            <span th:text="${order.shippingAddress.shippingAddressStreet1}+' '+${order.shippingAddress.shippingAddressStreet2}"></span><br/>
+            <span th:text="${order.shippingAddress.shippingAddressCity}"></span><br/>
+            <span th:text="${order.shippingAddress.shippingAddressState}"></span><br/>
+            <span th:text="${order.shippingAddress.shippingAddressZipcode}"></span><br/>
+        </td>
+    </tr>
+</table>
+
+<h3><strong>Order summary</strong></h3>
+<table>
+    <thead>
+    <tr>
+        <td><strong>Item Name</strong></td>
+        <td class="text-center"><strong>Item Price</strong></td>
+        <td class="text-center"><strong>Item Quantity</strong>
+        </td>
+        <td class="text-right"><strong>Total</strong></td>
+    </tr>
+    </thead>
+    <tbody>
+    <tr th:each="cartItem : ${cartItemList}">
+        <td><span data-th-text="${cartItem.book.title}"></span>
+        </td>
+        <td data-th-text="${cartItem.book.ourPrice}"
+            class="text-center">
+        </td>
+        <td data-th-text="${cartItem.qty}" class="text-center">
+
+        </td>
+        <td data-th-text="${cartItem.subtotal}"
+            class="text-right">
+        </td>
+    </tr>
+    <tr>
+        <td class="highrow"></td>
+        <td class="highrow"></td>
+        <td class="highrow text-center">
+            <strong>Subtotal</strong></td>
+        <td data-th-text="${order.orderTotal}"
+            class="highrow text-right">
+        </td>
+    </tr>
+    <tr>
+        <td class="emptyrow"></td>
+        <td class="emptyrow"></td>
+        <td class="emptyrow text-center"><strong>Tax</strong>
+        </td>
+        <td data-th-text="${#numbers.formatDecimal(order.orderTotal*0.06, 0, 2)}"
+            class="emptyrow text-right">
+        </td>
+    </tr>
+    <tr>
+        <td class="emptyrow"><i
+                class="fa fa-barcode iconbig"></i></td>
+        <td class="emptyrow"></td>
+        <td class="emptyrow text-center"><strong>Total</strong>
+        </td>
+        <td th:with="total=${order.orderTotal+order.orderTotal*0.06}"
+            data-th-text="${#numbers.formatDecimal(total, 0, 2)}"
+            class="emptyrow text-right">
+        </td>
+    </tr>
+    </tbody>
+</table>
+<br/>
+<p>Best,</p>
+<p>Le's Bookstore</p>
+</body>
+</html>
\ No newline at end of file
diff --git a/store-front/src/app/app.module.ts b/store-front/src/app/app.module.ts
index 90463fa..cb624a1 100644
--- a/store-front/src/app/app.module.ts
+++ b/store-front/src/app/app.module.ts
@@ -20,6 +20,7 @@ import { PaymentService } from './services/payment.service';
 import { ShippingService } from './services/shipping.service';
 import { BookService } from './services/book.service';
 import { CartService } from './services/cart.service';
+import { CheckoutService } from './services/checkout.service';
 
 import { MyAccountComponent } from './components/my-account/my-account.component';
 import { MyProfileComponent } from './components/my-profile/my-profile.component';
@@ -27,6 +28,7 @@ import { BookListComponent } from './components/book-list/book-list.component';
 import { BookDetailComponent } from './components/book-detail/book-detail.component';
 import { ShoppingCartComponent } from './components/shopping-cart/shopping-cart.component';
 import { OrderComponent } from './components/order/order.component';
+import { OrderSummaryComponent } from './components/order-summary/order-summary.component';
 
 @NgModule({
   declarations: [
@@ -39,7 +41,8 @@ import { OrderComponent } from './components/order/order.component';
     BookListComponent,
     BookDetailComponent,
     ShoppingCartComponent,
-    OrderComponent
+    OrderComponent,
+    OrderSummaryComponent
   ],
   imports: [
     BrowserModule,
@@ -55,7 +58,8 @@ import { OrderComponent } from './components/order/order.component';
     PaymentService,
     ShippingService,
     BookService,
-    CartService
+    CartService,
+    CheckoutService
   ],
   bootstrap: [AppComponent]
 })
diff --git a/store-front/src/app/app.routing.ts b/store-front/src/app/app.routing.ts
index 65eb5dc..c88bada 100644
--- a/store-front/src/app/app.routing.ts
+++ b/store-front/src/app/app.routing.ts
@@ -11,6 +11,8 @@ import {BookListComponent} from './components/book-list/book-list.component';
 import {BookDetailComponent} from './components/book-detail/book-detail.component';
 import {ShoppingCartComponent} from './components/shopping-cart/shopping-cart.component';
 import {OrderComponent} from './components/order/order.component';
+import { OrderSummaryComponent } from './components/order-summary/order-summary.component';
+
 
 const appRoutes: Routes = [
   {
@@ -45,6 +47,10 @@ const appRoutes: Routes = [
   {
     path: 'order',
     component: OrderComponent
+  },
+  {
+    path: 'orderSummary',
+    component: OrderSummaryComponent
   }
 ];
 
diff --git a/store-front/src/app/components/order-summary/order-summary.component.css b/store-front/src/app/components/order-summary/order-summary.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/store-front/src/app/components/order-summary/order-summary.component.html b/store-front/src/app/components/order-summary/order-summary.component.html
new file mode 100644
index 0000000..82ef69c
--- /dev/null
+++ b/store-front/src/app/components/order-summary/order-summary.component.html
@@ -0,0 +1,45 @@
+<div class="container">
+    <div class="row">
+        <div class="col-xs-8">
+            <h2 class="section-headline"><span>Order Summary</span></h2>
+        </div>
+        <div class="col-xs-4">
+            <a href="#"><img src="{{serverPath}}/image/logo.png" class="img-responsive" /></a>
+        </div>
+    </div>
+    <hr style="position: absolute; width:100%; height:6px; background-color: #333; z-index: -1; margin-top: -80px;" />
+    <img class="img-responsive" src="{{serverPath}}/image/wood.png" style="margin-top: -75px;" />
+    <div class="row" style="margin-top: 120px;">
+        <div class="col-xs-12">
+            <div class="alert alert-success">
+                <h3><i class="fa fa-check" aria-hidden="true" style="color: limegreen"></i> Thank you, your order has
+                    been placed.</h3>
+                <h4>
+                    The estimated delivery date is <span>{{estimatedDeliveryDate}}</span></h4>
+            </div>
+            <h3>List of Items</h3>
+
+            <div class="row " *ngFor="let cartItem of cartItemList ">
+                <hr/>
+                <div class="col-xs-2 ">
+                    <a md-button (click)="onSelect(cartItem.book)"><img class="img-responsive shelf-book" src="{{serverPath}}/image/book/{{cartItem.book.id}}.png" style="width:70px;" /></a>
+                </div>
+                <div class="col-xs-6 ">
+                    <a class="pointer" (click)="onSelect(cartItem.book)"><h4>{{cartItem.book.title}}</h4></a>
+                    <p *ngIf="cartItem.book.inStockNumber > 10" style="color: green;">In Stock</p>
+                    <p *ngIf="cartItem.book.inStockNumber < 10 && cartItem.book.inStockNumber > 0" style="color: green;"> Only <span>{{cartItem.book.inStockNumber}}</span> In Stock
+                    </p>
+                    <p style="color: darkred;" *ngIf="cartItem.book.inStockNumber==0">Product Unavailable</p>
+                </div>
+                <div class="col-xs-2 ">
+                    <h5 style="color: #db3208; font-size: large;">$<span [ngClass]="{'text-strike': cartItem.book.inStockNumber == 0 }"
+                                                                             >{{cartItem.book.ourPrice}}</span>
+                        </h5>
+                </div>
+                <div class="col-xs-2 text-center ">
+                    <h5 style="font-size: large ">{{cartItem.qty}}</h5>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/store-front/src/app/components/order-summary/order-summary.component.spec.ts b/store-front/src/app/components/order-summary/order-summary.component.spec.ts
new file mode 100644
index 0000000..e4b34ab
--- /dev/null
+++ b/store-front/src/app/components/order-summary/order-summary.component.spec.ts
@@ -0,0 +1,28 @@
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { OrderSummaryComponent } from './order-summary.component';
+
+describe('OrderSummaryComponent', () => {
+  let component: OrderSummaryComponent;
+  let fixture: ComponentFixture<OrderSummaryComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ OrderSummaryComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(OrderSummaryComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/store-front/src/app/components/order-summary/order-summary.component.ts b/store-front/src/app/components/order-summary/order-summary.component.ts
new file mode 100644
index 0000000..e30a500
--- /dev/null
+++ b/store-front/src/app/components/order-summary/order-summary.component.ts
@@ -0,0 +1,18 @@
+import { Component, OnInit } from '@angular/core';
+import {AppConst} from '../../constants/app-const';
+
+
+@Component({
+  selector: 'app-order-summary',
+  templateUrl: './order-summary.component.html',
+  styleUrls: ['./order-summary.component.css']
+})
+export class OrderSummaryComponent implements OnInit {
+  private serverPath = AppConst.serverPath;
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/store-front/src/app/components/order/order.component.html b/store-front/src/app/components/order/order.component.html
index 2d9175d..851cafc 100644
--- a/store-front/src/app/components/order/order.component.html
+++ b/store-front/src/app/components/order/order.component.html
@@ -1,7 +1,7 @@
 <div class="container">
     <div class="row">
         <div class="col-xs-8">
-            <h2 class="section-headline"><span>Shopping Cart</span></h2>
+            <h2 class="section-headline"><span>Checkout</span></h2>
         </div>
         <div class="col-xs-4">
             <a href="#"><img src="{{serverPath}}/image/logo.png" class="img-responsive" /></a>
@@ -294,16 +294,17 @@
                             </div>
                             <div class="panel-body ">
                                 <h4>Choose your shipping method:</h4>
-                                <div class="radio ">
+                                <div class="radio">
                                     <label>
-                                        <input type="radio" name="shippingMethod " value="groundShipping " checked="checked " /> Ground Shipping
+                                        <input type="radio" name="shippingMethod" value="groundShipping" [(ngModel)]="shippingMethod" /> Ground Shipping
                                     </label>
                                 </div>
-                                <div class="radio ">
+                                <div class="radio">
                                     <label>
-                                        <input type="radio" name="shippingMethod " value="premiumShipping " /> Premium Shipping
+                                        <input type="radio" name="shippingMethod" value="premiumShipping" [(ngModel)]="shippingMethod" /> Premium Shipping
                                     </label>
                                 </div>
+                                
                                 <div class="row ">
                                     <div class="col-xs-8 ">
                                         <h4>Products</h4></div>
diff --git a/store-front/src/app/components/order/order.component.ts b/store-front/src/app/components/order/order.component.ts
index 9238e34..0717bed 100644
--- a/store-front/src/app/components/order/order.component.ts
+++ b/store-front/src/app/components/order/order.component.ts
@@ -5,6 +5,7 @@ import {Router} from "@angular/router";
 import {CartService} from '../../services/cart.service';
 import {ShippingService} from '../../services/shipping.service';
 import {PaymentService} from '../../services/payment.service';
+import {CheckoutService} from '../../services/checkout.service';
 import {CartItem} from '../../models/cart-item';
 import {ShoppingCart} from '../../models/shopping-cart';
 import {ShippingAddress} from '../../models/shipping-address';
@@ -14,6 +15,7 @@ import {UserBilling} from '../../models/user-billing';
 import {UserShipping} from '../../models/user-shipping';
 import {Payment} from '../../models/payment';
 
+
 @Component({
   selector: 'app-order',
   templateUrl: './order.component.html',
@@ -38,12 +40,14 @@ export class OrderComponent implements OnInit {
   private emptyShippingList: boolean = true;
   private emptyPaymentList: boolean = true;
   private stateList: string[] = [];
+  private shippingMethod:string;
 
   constructor(
   	private router:Router, 
   	private cartService: CartService, 
   	private shippingService: ShippingService,
-  	private paymentService: PaymentService
+  	private paymentService: PaymentService,
+  	private checkoutService: CheckoutService
   	) { }
 
   onSelect(book:Book) {
@@ -87,26 +91,26 @@ export class OrderComponent implements OnInit {
 
   setPaymentMethod(userPayment: UserPayment) {
   	this.payment.type = userPayment.type;
-  	this.payment.cardName = userPayment.cardName;
   	this.payment.cardNumber = userPayment.cardNumber;
   	this.payment.expiryMonth = userPayment.expiryMonth;
   	this.payment.expiryYear = userPayment.expiryYear;
   	this.payment.cvc = userPayment.cvc;
   	this.payment.holderName = userPayment.holderName;
   	this.payment.defaultPayment = userPayment.defaultPayment;
-  	this.payment.billingAddress.billingAddressName = userPayment.userBilling.userBillingName;
-  	this.payment.billingAddress.billingAddressStreet1 = userPayment.userBilling.userBillingStreet1;
-  	this.payment.billingAddress.billingAddressStreet2 = userPayment.userBilling.userBillingStreet2;
-  	this.payment.billingAddress.billingAddressCity = userPayment.userBilling.userBillingCity;
-  	this.payment.billingAddress.billingAddressState = userPayment.userBilling.userBillingState;
-  	this.payment.billingAddress.billingAddressCountry = userPayment.userBilling.userBillingCountry;
-  	this.payment.billingAddress.billingAddressZipcode = userPayment.userBilling.userBillingZipcode;
+  	this.billingAddress.billingAddressName = userPayment.userBilling.userBillingName;
+  	this.billingAddress.billingAddressStreet1 = userPayment.userBilling.userBillingStreet1;
+  	this.billingAddress.billingAddressStreet2 = userPayment.userBilling.userBillingStreet2;
+  	this.billingAddress.billingAddressCity = userPayment.userBilling.userBillingCity;
+  	this.billingAddress.billingAddressState = userPayment.userBilling.userBillingState;
+  	this.billingAddress.billingAddressCountry = userPayment.userBilling.userBillingCountry;
+  	this.billingAddress.billingAddressZipcode = userPayment.userBilling.userBillingZipcode;
   }
 
   setBillingAsShipping(checked:boolean){
   	console.log("same as shipping")
 
   	if(checked) {
+  	this.billingAddress.billingAddressName = this.shippingAddress.shippingAddressName;
   	this.billingAddress.billingAddressStreet1 = this.shippingAddress.shippingAddressStreet1;
   	this.billingAddress.billingAddressStreet2 = this.shippingAddress.shippingAddressStreet2;
   	this.billingAddress.billingAddressCity = this.shippingAddress.shippingAddressCity;
@@ -114,6 +118,7 @@ export class OrderComponent implements OnInit {
   	this.billingAddress.billingAddressCountry = this.shippingAddress.shippingAddressCountry;
   	this.billingAddress.billingAddressZipcode = this.shippingAddress.shippingAddressZipcode;
   } else {
+  	this.billingAddress.billingAddressName = "";
   	this.billingAddress.billingAddressStreet1 = "";
   	this.billingAddress.billingAddressStreet2 = "";
   	this.billingAddress.billingAddressCity = "";
@@ -123,7 +128,23 @@ export class OrderComponent implements OnInit {
   }
   }
 
+  onSubmit(){
+  	this.checkoutService.checkout(
+  			this.shippingAddress,
+  			this.billingAddress,
+  			this.payment,
+  			this.shippingMethod
+  		).subscribe(
+      res=>{
+          console.log(res.text());
+        },
+        error=>{
+          console.log(error.text());
+        }
+    );
 
+  	this.router.navigate(['/orderSummary']);
+  }
 
   ngOnInit() {
   	this.getCartItemList();
@@ -165,12 +186,12 @@ export class OrderComponent implements OnInit {
     	this.stateList.push(s);
     }
 
-    this.payment.billingAddress = this.billingAddress;
     this.payment.type="";
     this.payment.expiryMonth="";
     this.payment.expiryYear="";
     this.billingAddress.billingAddressState="";
     this.shippingAddress.shippingAddressState="";
+    this.shippingMethod="groundShipping";
   }
 
 
diff --git a/store-front/src/app/components/shopping-cart/shopping-cart.component.html b/store-front/src/app/components/shopping-cart/shopping-cart.component.html
index 71df3bd..03ad33e 100644
--- a/store-front/src/app/components/shopping-cart/shopping-cart.component.html
+++ b/store-front/src/app/components/shopping-cart/shopping-cart.component.html
@@ -1,7 +1,7 @@
 <div class="container" style="margin-top: 20px;">
     <div class="row">
         <div class="col-xs-8">
-            <h2 class="section-headline"><span>Checkout</span></h2>
+            <h2 class="section-headline"><span>Shopping Cart</span></h2>
         </div>
         <div class="col-xs-4">
             <a href="#"><img src="{{serverPath}}/image/logo.png" class="img-responsive" /></a>
diff --git a/store-front/src/app/models/billing-address.ts b/store-front/src/app/models/billing-address.ts
index 6d21f01..27ad9f2 100644
--- a/store-front/src/app/models/billing-address.ts
+++ b/store-front/src/app/models/billing-address.ts
@@ -7,4 +7,5 @@ export class BillingAddress {
     public billingAddressState:string;
     public billingAddressCountry:string;
     public billingAddressZipcode:string;
+    public order: Order;
 }
diff --git a/store-front/src/app/models/payment.ts b/store-front/src/app/models/payment.ts
index d7832ac..63d3978 100644
--- a/store-front/src/app/models/payment.ts
+++ b/store-front/src/app/models/payment.ts
@@ -3,7 +3,6 @@ import {BillingAddress} from './billing-address';
 export class Payment {
 	public id: number;
     public type: string;
-    public cardName: string;
     public cardNumber: string;
     public expiryMonth: string;
     public expiryYear: string;
diff --git a/store-front/src/app/models/shipping-address.ts b/store-front/src/app/models/shipping-address.ts
index d10392a..6c3693c 100644
--- a/store-front/src/app/models/shipping-address.ts
+++ b/store-front/src/app/models/shipping-address.ts
@@ -1,3 +1,5 @@
+import {Order} from "./order";
+
 export class ShippingAddress {
     public id:number;
     public shippingAddressName:string;
@@ -7,4 +9,5 @@ export class ShippingAddress {
     public shippingAddressState:string;
     public shippingAddressCountry:string;
     public shippingAddressZipcode:string;
+    public order:Order;
 }
diff --git a/store-front/src/app/services/checkout.service.spec.ts b/store-front/src/app/services/checkout.service.spec.ts
new file mode 100644
index 0000000..dc932b8
--- /dev/null
+++ b/store-front/src/app/services/checkout.service.spec.ts
@@ -0,0 +1,16 @@
+/* tslint:disable:no-unused-variable */
+
+import { TestBed, async, inject } from '@angular/core/testing';
+import { CheckoutService } from './checkout.service';
+
+describe('CheckoutService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [CheckoutService]
+    });
+  });
+
+  it('should ...', inject([CheckoutService], (service: CheckoutService) => {
+    expect(service).toBeTruthy();
+  }));
+});
diff --git a/store-front/src/app/services/checkout.service.ts b/store-front/src/app/services/checkout.service.ts
new file mode 100644
index 0000000..c5d241f
--- /dev/null
+++ b/store-front/src/app/services/checkout.service.ts
@@ -0,0 +1,32 @@
+import { Injectable } from '@angular/core';
+import {Headers, Http} from "@angular/http";
+import {AppConst} from '../constants/app-const';
+import {ShippingAddress} from '../models/shipping-address';
+import {BillingAddress} from '../models/billing-address';
+import {Payment} from '../models/payment';
+
+@Injectable()
+export class CheckoutService {
+
+  constructor(private http: Http) { }
+
+  checkout(
+  		shippingAddress:ShippingAddress,
+  		billingAddress:BillingAddress,
+  		payment:Payment,
+  		shippingMethod:string
+  	) {
+    let url = AppConst.serverPath+"/checkout/checkout";
+    let order = {
+    	"shippingAddress" : shippingAddress,
+    	"billingAddress" : billingAddress,
+    	"payment" : payment,
+    	"shippingMethod" : shippingMethod
+    }
+    let tokenHeader = new Headers ({
+      'x-auth-token' : localStorage.getItem("xAuthToken")
+    });
+    return this.http.post(url, order, {headers : tokenHeader});
+  }
+
+}