From 980cfdb07dcb9499684e2f378f4f77d07761c047 Mon Sep 17 00:00:00 2001
From: Dave Brudner <dbrudne1@gmail.com>
Date: Wed, 29 Jan 2020 19:40:26 -0600
Subject: [PATCH] Updates <CheckoutPricing /> demo for
 useCheckoutPricing#singleInputs

---
 demo/public/index.html       |   5 +-
 demo/src/checkout-pricing.js | 103 ++++++++++++++++++++++++++++++++---
 2 files changed, 100 insertions(+), 8 deletions(-)

diff --git a/demo/public/index.html b/demo/public/index.html
index f7c62ce..1c2214c 100644
--- a/demo/public/index.html
+++ b/demo/public/index.html
@@ -23,7 +23,7 @@
         margin: 20px 0;
         padding: 0;
       }
-      h2 {
+      h2, h3 {
         color: #555;
         padding: 0;
         margin: 0;
@@ -31,6 +31,9 @@
         font-weight: 400;
         margin-bottom: 0.5em;
       }
+      h3 {
+        font-size: 1em;
+      }
       p {
         font-size: 0.8em;
       }
diff --git a/demo/src/checkout-pricing.js b/demo/src/checkout-pricing.js
index fd52358..e1e3c8d 100644
--- a/demo/src/checkout-pricing.js
+++ b/demo/src/checkout-pricing.js
@@ -15,24 +15,43 @@ function CheckoutPricingForm () {
   const [recurlyError, setRecurlyError] = useState(null);
   const [plan, setPlan] = useState('');
   const [quantity, setQuantity] = useState('');
+  const [coupon, setCoupon] = useState('');
+  const [giftCard, setGiftCard] = useState('');
+  const [currency, setCurrency] = useState('');
+  const [billingCountry, setBillingCountry] = useState('');
+  const [billingPostalCode, setBillingPostalCode] = useState('');
+  const [billingVatNumber, setBillingVatNumber] = useState('');
+  const [shippingCountry, setShippingCountry] = useState('');
+  const [shippingPostalCode, setShippingPostalCode] = useState('');
+  const [shippingVatNumber, setShippingVatNumber] = useState('');
   const [{ price, loading }, setPricing] = useCheckoutPricing({}, setRecurlyError);
+  const showPrice = price && price.now && !recurlyError
 
   function updatePlan (e) {
     const plan = e.target.value;
     setRecurlyError(null);
     setPlan(plan);
-    setPricing(prev => ({ ...prev, subscriptions: [{ plan, quantity }] }));
   };
 
   function updateQuantity (e) {
     const quantity = e.target.value;
     setRecurlyError(null);
-    setQuantity(() => quantity);
-    setPricing(prev => ({ ...prev, subscriptions: [{ plan, quantity }] }));
+    setQuantity(quantity);
+  };
+
+  function handleSubmit (e) {
+    e.preventDefault();
+    const address = {
+      billingCountry,
+      billingPostalCode,
+      billingVatNumber,
+    };
+    setRecurlyError(null);
+    setPricing({ subscriptions: [{ plan, quantity }], coupon, giftCard, address });
   };
 
   return (
-    <div className="DemoSection">
+    <form onSubmit={handleSubmit} className="DemoSection">
       <div>
         <select value={plan} onChange={updatePlan}>
           <option value="">Select a plan</option>
@@ -48,10 +67,80 @@ function CheckoutPricingForm () {
           min="0"
         />
       </div>
-      <div style={{ marginTop: '15px', visibility: loading ? "hidden" : "" }}>
-        {recurlyError ? <span style={{ color: 'red' }}>{recurlyError.message}</span> : ''}
-        {price && price.now && !recurlyError ? <span>Subtotal: ${price.now.subtotal}</span> : ''}
+      <div style={{ marginTop: '10px' }}>
+        <input
+          type="text"
+          value={coupon}
+          onChange={e => setCoupon(e.target.value)}
+          placeholder="Coupon"
+        />
+        <input
+          type="text"
+          value={giftCard}
+          onChange={e => setGiftCard(e.target.value)}
+          placeholder="Gift card"
+        />
+        <input
+          type="text"
+          value={currency}
+          onChange={e => setCurrency(e.target.value)}
+          placeholder="Currency"
+        />
       </div>
+      <div style={{ marginTop: '10px' }}>
+        <h3>Billing address</h3>
+        <input
+          type="text"
+          value={billingCountry}
+          onChange={e => setBillingCountry(e.target.value)}
+          placeholder="Country"
+        />
+        <input
+          type="text"
+          value={billingPostalCode}
+          onChange={e => setBillingPostalCode(e.target.value)}
+          placeholder="Postal code"
+        />
+        <input
+          type="text"
+          value={billingVatNumber}
+          onChange={e => setBillingVatNumber(e.target.value)}
+          placeholder="Vat number"
+        />
+      </div>
+      <div style={{ marginTop: '10px' }}>
+        <h3>Shipping address</h3>
+        <input
+          type="text"
+          value={shippingCountry}
+          onChange={e => setShippingCountry(e.target.value)}
+          placeholder="Country"
+        />
+        <input
+          type="text"
+          value={shippingPostalCode}
+          onChange={e => setShippingPostalCode(e.target.value)}
+          placeholder="Postal code"
+        />
+        <input
+          type="text"
+          value={shippingVatNumber}
+          onChange={e => setShippingVatNumber(e.target.value)}
+          placeholder="Vat number"
+        />
+      </div>
+      <div style={{ marginTop: '15px' }}>
+        {recurlyError ? <span style={{ color: 'red' }}>{recurlyError.message}</span> : ''}
+        {showPrice ? (
+          <span>
+            {"Subtotal: "}
+            <span style={{ visibility: loading ? 'hidden' : '' }}>
+              ${price.now.subtotal}
+            </span>
+          </span>
+        ) : null}
     </div>
+      <button>Submit</button>
+    </form>
   );
 };