add stripe stuff, including passing jest tests and a successful deplo…

…yment of a firebase cloud function. Had to add skipLibCheck : true to main tsconfig.ts file for success per cypress-io/cypress#1087
Atticus29 · Oct 1, 2019 · 07dcb3c · 07dcb3c
1 parent 596bbd8
commit 07dcb3c
Show file tree

Hide file tree

Showing 16 changed files with 1,229 additions and 502 deletions.
diff --git a/.firebaserc b/.firebaserc
@@ -0,0 +1,5 @@
+{
+  "projects": {
+    "default": "datajitsu"
+  }
+}
diff --git a/firebase.json b/firebase.json
@@ -0,0 +1,23 @@
+{
+  "functions": {
+    "predeploy": [
+      "npm --prefix \"$RESOURCE_DIR\" run lint",
+      "npm --prefix \"$RESOURCE_DIR\" run build"
+    ],
+    "source": "functions"
+  },
+  "hosting": {
+    "public": "public",
+    "ignore": [
+      "firebase.json",
+      "**/.*",
+      "**/node_modules/**"
+    ],
+    "rewrites": [
+      {
+        "source": "**",
+        "destination": "/index.html"
+      }
+    ]
+  }
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -39,6 +39,7 @@
     "ng-starrating": "^1.0.7",
     "ngx-youtube-player": "7.1.1",
     "rxjs": "^6.0.0",
+    "stripe": "^7.9.1",
     "zone.js": "^0.9.1"
   },
   "devDependencies": {

diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Welcome to Firebase Hosting</title>
+
+    <!-- update the version number as needed -->
+    <script defer src="/__/firebase/7.0.0/firebase-app.js"></script>
+    <!-- include only the Firebase features as you need -->
+    <script defer src="/__/firebase/7.0.0/firebase-auth.js"></script>
+    <script defer src="/__/firebase/7.0.0/firebase-database.js"></script>
+    <script defer src="/__/firebase/7.0.0/firebase-messaging.js"></script>
+    <script defer src="/__/firebase/7.0.0/firebase-storage.js"></script>
+    <!-- initialize the SDK after all desired features are loaded -->
+    <script defer src="/__/firebase/init.js"></script>
+
+    <style media="screen">
+      body { background: #ECEFF1; color: rgba(0,0,0,0.87); font-family: Roboto, Helvetica, Arial, sans-serif; margin: 0; padding: 0; }
+      #message { background: white; max-width: 360px; margin: 100px auto 16px; padding: 32px 24px; border-radius: 3px; }
+      #message h2 { color: #ffa100; font-weight: bold; font-size: 16px; margin: 0 0 8px; }
+      #message h1 { font-size: 22px; font-weight: 300; color: rgba(0,0,0,0.6); margin: 0 0 16px;}
+      #message p { line-height: 140%; margin: 16px 0 24px; font-size: 14px; }
+      #message a { display: block; text-align: center; background: #039be5; text-transform: uppercase; text-decoration: none; color: white; padding: 16px; border-radius: 4px; }
+      #message, #message a { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); }
+      #load { color: rgba(0,0,0,0.4); text-align: center; font-size: 13px; }
+      @media (max-width: 600px) {
+        body, #message { margin-top: 0; background: white; box-shadow: none; }
+        body { border-top: 16px solid #ffa100; }
+      }
+    </style>
+  </head>
+  <body>
+    <div id="message">
+      <h2>Welcome</h2>
+      <h1>Firebase Hosting Setup Complete</h1>
+      <p>You're seeing this because you've successfully setup Firebase Hosting. Now it's time to go build something extraordinary!</p>
+      <a target="_blank" href="https://firebase.google.com/docs/hosting/">Open Hosting Documentation</a>
+    </div>
+    <p id="load">Firebase SDK Loading&hellip;</p>
+
+    <script>
+      document.addEventListener('DOMContentLoaded', function() {
+        // // 🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥
+        // // The Firebase SDK is initialized and available here!
+        //
+        // firebase.auth().onAuthStateChanged(user => { });
+        // firebase.database().ref('/path/to/ref').on('value', snapshot => { });
+        // firebase.messaging().requestPermission().then(() => { });
+        // firebase.storage().ref('/path/to/ref').getDownloadURL().then(() => { });
+        //
+        // // 🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥
+
+        try {
+          let app = firebase.app();
+          let features = ['auth', 'database', 'messaging', 'storage'].filter(feature => typeof app[feature] === 'function');
+          document.getElementById('load').innerHTML = `Firebase SDK loaded with ${features.join(', ')}`;
+        } catch (e) {
+          console.error(e);
+          document.getElementById('load').innerHTML = 'Error loading the Firebase SDK, check the console.';
+        }
+      });
+    </script>
+  </body>
+</html>
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -96,6 +96,7 @@ import { IndividualMatchDataDisplayComponent } from './individual-match-data-dis
 import { WinDrawDirective } from './win-draw.directive';
 import { FlaggedAnnotationDirective } from './flagged-annotation.directive';
 import { AdvantageDirective } from './advantage.directive';
+import { StripeComponent } from './stripe/stripe.component';
 
 
 export const firebaseConfig = {
@@ -140,7 +141,8 @@ export const firebaseConfig = {
     IndividualMatchDataDisplayComponent,
     WinDrawDirective,
     FlaggedAnnotationDirective,
-    AdvantageDirective
+    AdvantageDirective,
+    StripeComponent
   ],
   imports: [
     AngularFireDatabaseModule,

diff --git a/src/app/faq/faq.component.html b/src/app/faq/faq.component.html
@@ -20,7 +20,7 @@ <h2>Frequenty Asked Questions</h2>
     <a (click)="navigateToVideoInNeedOfAnnotation()">make {{localNumberOfCurrentAnnotationsNeeded}} annotations on a video</a>
     . All annotations earn a user {{localNumberOfPointsToAwardForAnnotation}} points. Reputation points expire on a monthly basis.
   </li>
-  <li>Alternatively, users can <a routerLink="./payment">purchase reputations points with a monthly subscription costing {{localMonthlyCost}}</a></li>
+  <li>Alternatively, users can <a routerLink="/payment">purchase reputations points with a monthly subscription costing {{localMonthlyCost}}</a></li>
 </div>
 <div class="">
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

diff --git a/src/app/faq/faq.component.ts b/src/app/faq/faq.component.ts
@@ -19,7 +19,7 @@ export class FaqComponent extends BaseComponent implements OnInit {
   private localNumberOfPointsToAwardForAnnotation: number = constants.numberOfPointsToAwardForAnnotation;
   private localNumberOfFlagsAnAnnotationNeedsBeforeReptuationDeduction: number = constants.numberOfFlagsAnAnnotationNeedsBeforeReptuationDeduction;
   private localNumberOfPointsToDeductForBadAnnotation: number = constants.numberOfPointsToDeductForBadAnnotation;
-  private localMinimumAnnotationRatingAVideoFlaggedAsRemovedNeedsToPreventUserDeduction: number = constants.minimumAnnotationRatingAVideoFlaggedAsRemovedNeedsToPreventUserDeduction;
+  private localMinimumAnnotationRatingAVideoFlaggedAsRemovedNeedsToPreventUserDeduction: number = constants.numberOfFlagsAnAnnotationNeedsBeforeReptuationDeduction;
 
   constructor(public ngZone: NgZone, private db: DatabaseService, private router: Router) {
     super();

diff --git a/src/app/moves.ts b/src/app/moves.ts
@@ -9,6 +9,7 @@ export var allCurrentMoves ={
     "Knee Slice",
     "Back Step",
     "Over Under Pass",
+    "Butterfly Guard Pass",
     "Double Under Pass",
     "Toreando Pass",
     "Guard Pass from Berimbolo or Inverted Position",

diff --git a/src/app/payment/payment.component.html b/src/app/payment/payment.component.html
@@ -1 +1 @@
-<p>payment works!</p>
+<app-stripe></app-stripe>
diff --git a/src/app/stripe/stripe.component.html b/src/app/stripe/stripe.component.html
@@ -0,0 +1,32 @@
+<h3>Default Stripe Form</h3>
+
+<button (click)="openCheckout()" class="btn waves-effect waves-light">Purchase a Monthly Subscription to {{localTitle}}</button>
+
+<form action="" method="POST" id="payment-form" (submit)="getToken()">
+  <span class="payment-message">{{message}}</span>
+
+  <div class="form-row">
+    <label>
+      <span>Card Number</span>
+      <input [(ngModel)]="cardNumber" name="card-number" type="text" size="20" data-stripe="number">
+    </label>
+  </div>
+
+  <div class="form-row">
+    <label>
+      <span>Expiration (MM/YY)</span>
+      <input [(ngModel)]="expiryMonth" name="expiry-month" type="text" size="2" data-stripe="exp_month">
+    </label>
+    <span> / </span>
+    <input [(ngModel)]="expiryYear" name="expiry-year" type="text" size="2" data-stripe="exp_year">
+  </div>
+
+  <div class="form-row">
+    <label>
+      <span>CVC</span>
+      <input [(ngModel)]="cvc" name="cvc" type="text" size="4" data-stripe="cvc">
+    </label>
+  </div>
+
+  <input type="submit" value="Submit Payment">
+</form>
diff --git a/src/app/stripe/stripe.component.scss b/src/app/stripe/stripe.component.scss
@@ -0,0 +1,3 @@
+#payment-form{
+  margin: 2em;
+}
diff --git a/src/app/stripe/stripe.component.spec.ts b/src/app/stripe/stripe.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { StripeComponent } from './stripe.component';
+
+describe('StripeComponent', () => {
+  let component: StripeComponent;
+  let fixture: ComponentFixture<StripeComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ StripeComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(StripeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/stripe/stripe.component.ts b/src/app/stripe/stripe.component.ts
@@ -0,0 +1,36 @@
+import { Component, OnInit } from '@angular/core';
+import { masterStripeConfig } from '../api-keys';
+import { constants } from '../constants';
+
+@Component({
+  selector: 'app-stripe',
+  templateUrl: './stripe.component.html',
+  styleUrls: ['./stripe.component.scss'],
+})
+export class StripeComponent implements OnInit {
+  private localTitle = constants.title;
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+  openCheckout() {
+  var handler = (<any>window).StripeCheckout.configure({
+      key: masterStripeConfig.publicApiTestKey,
+      locale: 'auto',
+      token: function (token: any) {
+        // You can access the token ID with `token.id`.
+        // Get the token ID to your server-side code for use.
+      }
+    });
+
+    handler.open({
+      name: this.localTitle + ' Subscription',
+      description: 'Monthly',
+      amount: 200
+    });
+
+  }
+
+}
diff --git a/src/index.html b/src/index.html
@@ -7,6 +7,11 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
   <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+  <script src="https://checkout.stripe.com/checkout.js"></script>
+  <script type="text/javascript" src="https://js.stripe.com/v2/"></script>
+  <script type="text/javascript">
+    Stripe.setPublishableKey('pk_test_NKyjLSwnMosdX0mIgQaRRHbS');
+  </script>
 </head>
 <body>
   <app-root>Loading...</app-root>

diff --git a/tsconfig.json b/tsconfig.json
@@ -18,6 +18,7 @@
       "es2017",
       "dom"
     ],
-    "types": ["firebase", "node", "cypress"]
+    "types": ["firebase", "node", "cypress"],
+    "skipLibCheck": true
   }
 }