Generate fake customer information (#96)

* Add Faker.js CDN script

* Add generate button

* Add faker typings

* Add script to generate fake user data

* Change button to span.

* Use minified Faker.js

package.json

@@ -28,6 +28,7 @@
     "stripe": "^6.28.0"
   },
   "devDependencies": {
+    "@types/faker": "^4.1.5",
     "ngrok": "^3.2.3"
   }
 }

public/index.html

@@ -26,7 +26,7 @@
         <div id="payment-request-button"></div>
       </div>
       <form id="payment-form" method="POST" action="/orders">
-        <p class="instruction">Complete your shipping and payment details below</p>
+        <p class="instruction"><span>Complete</span>/<span id="generate">generate</span> your shipping and payment details below</p>
         <section>
           <h2>Shipping &amp; Billing Information</h2>
           <fieldset class="with-state">
@@ -179,7 +179,7 @@ <h2>Payment Information</h2>
             <p class="notice">Click the button below to generate a QR code for WeChat.</p>
           </div>
         </section>
-        <button type="submit">Pay</button>
+        <button class="payment-button" type="submit">Pay</button>
       </form>
       <div id="card-errors" class="element-errors"></div>
       <div id="iban-errors" class="element-errors"></div>
@@ -250,8 +250,11 @@ <h1>Order Summary</h1>
   <!-- Stripe.js v3 for Elements -->
   <script src="https://js.stripe.com/v3/"></script>
   <!-- Library to render QR codes -->
-  <script src="https://cdn.rawgit.com/davidshimjs/qrcodejs/gh-pages/qrcode.min.js"></script>
+  <script src="https://cdn.rawgit.com/davidshimjs/qrcodejs/gh-pages/qrcode.min.js" integrity="sha384-3zSEDfvllQohrq0PHL1fOXJuC/jSOO34H46t6UQfobFOmxE5BpjjaIJY5F2/bMnU" crossorigin="anonymous"></script>
+  <!-- Library for generating fake user information -->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/Faker/3.1.0/faker.min.js" integrity="sha384-PlFzuf6GOlJNxLuosezJ/jwndIVZ2hWI/AmvYQtBzstOdLtcUe6DPSI4LsqwiN1y" crossorigin="anonymous"></script>
   <!-- App -->
+  <script src="/javascripts/generate.js"></script>
   <script src="/javascripts/store.js"></script>
   <script src="/javascripts/payments.js"></script>
 </body>

public/javascripts/generate.js

@@ -0,0 +1,16 @@
+/**
+ * @type {Faker.FakerStatic}
+ */
+const faker = window.faker;
+const generateInputTrigger = document.getElementById('generate');
+
+const {name, address, internet} = faker;
+
+generateInputTrigger.addEventListener('click', () => {
+  document.getElementsByName('name')[0].value = `${name.firstName()} ${name.lastName()}`;
+  document.getElementsByName('email')[0].value = internet.email();
+  document.getElementsByName('address')[0].value = `${address.streetAddress()}`;
+  document.getElementsByName('city')[0].value = `${address.city()}`;
+  document.getElementsByName('state')[0].value = `${address.state()}`;
+  document.getElementsByName('postal_code')[0].value = `${address.zipCode()}`;
+});

public/javascripts/payments.js

@@ -223,8 +223,7 @@
     // Display the Pay button by mounting the Element in the DOM.
     paymentRequestButton.mount('#payment-request-button');
     // Replace the instruction.
-    document.querySelector('.instruction').innerText =
-      'Or enter your shipping and payment details below';
+    document.querySelector('.instruction span').innerText = 'Or enter';
     // Show the payment request section.
     document.getElementById('payment-request').classList.add('visible');
   }
@@ -779,7 +778,7 @@
   // Select the default country from the config on page load.
   let country = config.country;
   // Override it if a valid country is passed as a URL parameter.
-  var urlParams = new URLSearchParams(window.location.search);
+  const urlParams = new URLSearchParams(window.location.search);
   let countryParam = urlParams.get('country')
     ? urlParams.get('country').toUpperCase()
     : config.country;

public/stylesheets/store.css

@@ -202,6 +202,15 @@ p.tip {
   background: url(/images/tip.svg) left center no-repeat;
 }
 
+span#generate {
+  cursor: pointer;
+  color: #525f7f;
+  text-decoration: underline;
+}
+span#generate:hover {
+  text-decoration: none;
+}
+
 .field {
   flex: 1;
   padding: 0 15px;