Updates <CheckoutPricing /> demo for useCheckoutPricing#adjustments

recurly · Jan 30, 2020 · b5f1fd1 · b5f1fd1
1 parent 9fb9997
commit b5f1fd1
Showing 1 changed file with 53 additions and 25 deletions.
diff --git a/demo/src/checkout-pricing.js b/demo/src/checkout-pricing.js
@@ -14,44 +14,72 @@ export function CheckoutPricing () {
 function CheckoutPricingForm () {
   const [recurlyError, setRecurlyError] = useState(null);
   const [plan, setPlan] = useState('');
-  const [quantity, setQuantity] = useState('');
+  const [planQuantity, setPlanQuantity] = useState('');
+  const [itemCode, setItemCode] = useState('');
+  const [itemQuantity, setItemQuantity] = useState('');
   const [{ price, loading }, setPricing] = useCheckoutPricing({}, setRecurlyError);
 
   function updatePlan (e) {
     const plan = e.target.value;
     setRecurlyError(null);
     setPlan(plan);
-    setPricing(prev => ({ ...prev, subscriptions: [{ plan, quantity }] }));
+    setPricing(prev => ({ ...prev, subscriptions: [{ plan, quantity: planQuantity }] }));
   };
 
-  function updateQuantity (e) {
-    const quantity = e.target.value;
+  function updatePlanQuantity (e) {
+    const planQuantity = e.target.value;
     setRecurlyError(null);
-    setQuantity(() => quantity);
-    setPricing(prev => ({ ...prev, subscriptions: [{ plan, quantity }] }));
+    setPlanQuantity(planQuantity);
+    setPricing(prev => ({ ...prev, subscriptions: [{ plan, quantity: planQuantity }] }));
   };
 
+  function handleSubmit(e) {
+    e.preventDefault();
+    setPricing({
+      subscriptions: [{ plan, quantity: planQuantity }],
+      adjustments: [{ itemCode, quantity: itemQuantity }],
+    });
+  }
+
   return (
     <div className="DemoSection">
-      <div>
-        <select value={plan} onChange={updatePlan}>
-          <option value="">Select a plan</option>
-          <option value="basic">Basic</option>
-          <option value="advanced">Advanced</option>
-          <option value="error">Error</option>
-        </select>
-        <input
-          type="number"
-          value={quantity}
-          onChange={updateQuantity}
-          placeholder="Quantity"
-          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>
+      <form onSubmit={handleSubmit}>
+        <div>
+          <select value={plan} onChange={updatePlan}>
+            <option value="">Select a plan</option>
+            <option value="basic">Basic</option>
+            <option value="advanced">Advanced</option>
+            <option value="error">Error</option>
+          </select>
+          <input
+            type="number"
+            value={planQuantity}
+            onChange={updatePlanQuantity}
+            placeholder="Quantity"
+            min="0"
+          />
+          <div style={{ marginTop: '15px' }}>
+            <input
+              type="text"
+              value={itemCode}
+              onChange={e => setItemCode(e.target.value)}
+              placeholder="Item code"
+            />
+            <input
+              type="number"
+              onChange={itemQuantity}
+              onChange={e => setItemQuantity(e.target.value)}
+              placeholder="Quantity"
+              min="0"
+            />
+          </div>
+        </div>
+        <div style={{ marginTop: '15px' }}>
+          {recurlyError ? <span style={{ color: 'red' }}>{recurlyError.message}</span> : ''}
+          {price && price.now && !recurlyError ? <span>Subtotal: ${price.now.subtotal}</span> : ''}
+        </div>
+        <button>Calculate subtotal</button>
+      </form>
     </div>
   );
 };