Added currency and paypal stuff

src/app/app.component.ts

@@ -14,7 +14,7 @@ import {LocalStorage} from 'webstorage-decorators';
 })
 export class AppComponent implements OnInit {
   @LocalStorage({defaultValue: []})
-  cart: {id: string; item: string; price: number; quantity: number}[];
+  cart: {id: string; item: string; price: number; currency: 'CAD' | 'USD'; quantity: number}[];
 
   categories;
   user;
@@ -29,8 +29,10 @@ export class AppComponent implements OnInit {
     this.categories = this.db.collection('categories').valueChanges();
   }
 
-  addToCart(id: string, item: string, price: number, quantity: number) {
-    this.cart = [{id: id, item: item, price: Number(price), quantity: Number(quantity)}].concat(this.cart);
+  addToCart(id: string, item: string, price: number, currency: 'CAD' | 'USD', quantity: number) {
+    this.cart = [{id: id, item: item, price: Number(price), currency: currency, quantity: Number(quantity)}].concat(
+      this.cart
+    );
   }
 
   cartItemCount() {

src/app/store/cart/cart.component.html

@@ -14,26 +14,18 @@
         <tr *ngFor="let item of cart; let i = index">
           <td>{{i + 1}}</td>
           <td>
-            <a [routerLink]="['/products', item.item]">{{item.item}}</a>
+            <a [routerL ink]="['/products', item.item]">{{item.item}}</a>
           </td>
           <td>{{item.quantity}}</td>
-          <td>{{item.price | currency}}</td>
-          <td>
-            <mat-icon class="curs-pointer" (click)="remove(i)">delete</mat-icon>
+          <td>{{item.currency}} {{item.price | currency}}</td>
+          <td (click)="remove(i)" style="width: 50px">
+            <button mat-icon-button>
+              <mat-icon>delete</mat-icon>
+            </button>
           </td>
         </tr>
       </tbody>
     </table>
-    <div class="float-right">
-      <table>
-        <tr>
-          <td>
-            <strong>Sub Total:</strong>
-          </td>
-          <td class="pl-3">{{total() | currency}}</td>
-        </tr>
-      </table>
-      <button mat-raised-button class="float-right mt-3" color="primary" (click)="checkout()" [disabled]="total() <= 0">Checkout</button>
-    </div>
+    <div id="paypal-button" class="float-right mt-3"></div>
   </mat-card>
 </div>

src/app/store/cart/cart.component.ts

@@ -10,7 +10,7 @@ import {Router} from '../../../../node_modules/@angular/router';
 })
 export class CartComponent {
   @LocalStorage({defaultValue: []})
-  cart: {id: string; item: string; price: number; quantity: number}[];
+  cart: {id: string; item: string; price: number; curency: 'CAD' | 'USD'; quantity: number}[];
 
   address1: string;
   address2: string;
@@ -20,17 +20,32 @@ export class CartComponent {
 
   constructor(private http: Http, private router: Router) {}
 
-  async checkout() {
-    let cart = this.cart.map(row => {
-      return {id: row.id, quantity: row.quantity};
-    });
-    let link = await this.http
-      .post('https://us-central1-fhsons-7e90b.cloudfunctions.net/checkout', {cart: cart})
-      .toPromise();
-    window.location.href = link.url;
+  ngOnInit() {
+    if (this.cart.length > 0) {
+      window['paypal'].Button.render(
+        {
+          env: 'sandbox',
+          client: {
+            sandbox: 'AejQ8-4hWWWhg1gYKbcuimT8Nf6-wutpEfYBHDDXiEXdujwJzHt6szwtmXBe2d3zW9d3khb3TgQBZUUJ',
+            live: 'AUhKVWkqvpzRBg0n_IFPMNi9QAl4JCXuWzc04BERDpBdG5ixFH1SimU85I9YSaksqKNCFjp_fOd4OAdd'
+          },
+          style: {size: 'medium', color: 'blue', shape: 'pill'},
+          payment: function(data, actions) {
+            return actions.payment.create({transactions: [{amount: {total: 0.01, currency: 'CAD'}}]});
+          },
+          onAuthorize: function(data, actions) {
+            return actions.payment.execute().then(function() {
+              window.alert('Thank you for your purchase!');
+            });
+          }
+        },
+        '#paypal-button'
+      );
+    }
   }
 
   remove(i: number) {
+    console.log('fire');
     let c = this.cart;
     c.splice(i, 1);
     this.cart = c;

src/app/store/products/products.component.html

@@ -7,7 +7,7 @@
                     <mat-form-field class="mr-1" style="width: 40px">
                         <input #quantity matInput type="number" value="1" min="1">
                     </mat-form-field>
-                    <button mat-raised-button color="primary" [disabled]="quantity.value < 1" (click)="app.addToCart(product.id, product.name, product.price, quantity.value)">
+                    <button mat-raised-button color="primary" [disabled]="quantity.value < 1" (click)="app.addToCart(product.id, product.name, product.price, product.currency, quantity.value)">
                         <mat-icon>add_shopping_cart</mat-icon> Buy
                     </button>
                 </div>

src/index.html

@@ -16,12 +16,13 @@
 
   <link rel="icon" type="image/png" href="assets/img/logo.png">
   <link rel="manifest" href="manifest.json">
+  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css">
 
+  <script src="https://www.paypalobjects.com/api/checkout.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/bootstrap.min.js"></script>
-  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" integrity="sha384-O8whS3fhG2OnA5Kas0Y9l3cfpmYjapjI0E4theH4iuMD+pLhbf6JI0jIMfYcK3yZ" crossorigin="anonymous">
 
   <!-- Global site tag (gtag.js) - Google Analytics -->
   <script>