Updates <CheckoutPricing /> demo for useCheckoutPricing#singleInputs

recurly · Jan 30, 2020 · 980cfdb · 980cfdb
1 parent 48bbab2
commit 980cfdb
Show file tree

Hide file tree

Showing 2 changed files with 100 additions and 8 deletions.
diff --git a/demo/public/index.html b/demo/public/index.html
@@ -23,14 +23,17 @@
         margin: 20px 0;
         padding: 0;
       }
-      h2 {
+      h2, h3 {
         color: #555;
         padding: 0;
         margin: 0;
         font-size: 1.2em;
         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
@@ -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>
   );
 };