Merge f82fb5e into 0888d75

demo/public/index.html

@@ -45,6 +45,7 @@
         box-sizing: border-box;
         outline: 0;
         padding: 0 8px 0 8px;
+        width: 140px;
       }
       button {
         background: #99c4c7;

demo/src/checkout-pricing.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { Elements, RecurlyProvider, useCheckoutPricing } from '@recurly/react-recurly';
 
 export function CheckoutPricing () {
@@ -13,152 +13,151 @@ export function CheckoutPricing () {
 
 function CheckoutPricingForm () {
   const [recurlyError, setRecurlyError] = useState(null);
-  const [plan, setPlan] = useState('');
-  const [planQuantity, setPlanQuantity] = useState('');
-  const [itemCode, setItemCode] = useState('');
-  const [itemQuantity, setItemQuantity] = 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 [pricingFormState, setPricingFormState] = useState({
+    plan: '',
+    planQuantity: '',
+    itemCode: '',
+    itemQuantity: '',
+    coupon: '',
+    giftCard: '',
+    currency: '',
+    billingCountry: '',
+    billingPostalCode: '',
+    billingVatNumber: '',
+    shippingCountry: '',
+    shippingPostalCode: '',
+    shippingVatNumber: '',
+  });
+
+  const [{ price, loading }, setPricing] = useCheckoutPricing(null, setRecurlyError);
   const showPrice = !loading && !recurlyError;
 
-  function updatePlan (e) {
-    const plan = e.target.value;
-    setPlan(plan);
+  function handleChange (name, value) {
+    const newState = { ...pricingFormState, [name]: value };
+    setPricingFormState(newState);
   };
 
-  function updatePlanQuantity (e) {
-    const planQuantity = e.target.value;
-    setPlanQuantity(planQuantity);
-  };
+  useEffect(() => {
+    setRecurlyError(null);
 
-  function handleSubmit (e) {
-    e.preventDefault();
+    const subscriptions = [{
+      plan: pricingFormState.plan,
+      quantity: pricingFormState.planQuantity
+    }];
+    const adjustments = [{
+      itemCode: pricingFormState.itemCode,
+      quantity: pricingFormState.itemQuantity
+    }];
     const address = {
-      billingCountry,
-      billingPostalCode,
-      billingVatNumber,
+      country: pricingFormState.billingCountry,
+      postal_code: pricingFormState.billingPostalCode,
+    };
+    const shippingAddress = {
+      country: pricingFormState.shippingCountry,
+      postal_code: pricingFormState.shippingPostalCode,
     };
-    setRecurlyError(null);
-    setPricing({
-      subscriptions: [{ plan, quantity: planQuantity }],
-      adjustments: [{ itemCode, quantity: itemQuantity }],
-      coupon,
-      giftCard,
-      address
-    });
-  };
+
+    setPricing({ ...pricingFormState, subscriptions, adjustments, address, shippingAddress });
+  }, [pricingFormState, setPricing]);
 
   return (
-    <form onSubmit={handleSubmit} className="DemoSection">
+    <div className="DemoSection">
       <div>
-        <select value={plan} onChange={updatePlan}>
+        <h3>Subscription</h3>
+        <select value={pricingFormState.plan} onChange={e => handleChange('plan', e.target.value)}>
           <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}
+          value={pricingFormState.planQuantity}
+          onChange={e => handleChange('planQuantity', e.target.value)}
           placeholder="Plan quantity"
           min="0"
         />
+        <select
+          type="text"
+          value={pricingFormState.currency}
+          onChange={e => handleChange('currency', e.target.value)}
+          placeholder="Currency"
+        >
+          <option value="USD">USD</option>
+          <option value="JPY">JPY</option>
+        </select>
       </div>
       <div style={{ marginTop: '10px' }}>
+        <h3>Item/adjustments</h3>
         <input
           type="text"
-          value={itemCode}
-          onChange={e => setItemCode(e.target.value)}
+          value={pricingFormState.itemCode}
+          onChange={e => handleChange('itemCode', e.target.value)}
           placeholder="Item code"
         />
         <input
           type="number"
-          onChange={e => setItemQuantity(e.target.value)}
+          value={pricingFormState.itemQuantity}
+          onChange={e => handleChange('itemQuantity', e.target.value)}
           placeholder="Quantity"
           min="0"
         />
       </div>
       <div style={{ marginTop: '10px' }}>
+        <h3>Coupon and giftcard</h3>
         <input
           type="text"
-          value={coupon}
-          onChange={e => setCoupon(e.target.value)}
+          value={pricingFormState.coupon}
+          onChange={e => handleChange('coupon', e.target.value)}
           placeholder="Coupon"
-          />
+        />
         <input
           type="text"
-          value={giftCard}
-          onChange={e => setGiftCard(e.target.value)}
+          value={pricingFormState.giftCard}
+          onChange={e => handleChange('giftCard', 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)}
+          value={pricingFormState.billingCountry}
+          onChange={e => handleChange('billingCountry', e.target.value)}
           placeholder="Country"
         />
         <input
           type="text"
-          value={billingPostalCode}
-          onChange={e => setBillingPostalCode(e.target.value)}
+          value={pricingFormState.billingPostalCode}
+          onChange={e => handleChange('billingPostalCode', 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)}
+          value={pricingFormState.shippingCountry}
+          onChange={e => handleChange('shippingCountry', e.target.value)}
           placeholder="Country"
         />
         <input
           type="text"
-          value={shippingPostalCode}
-          onChange={e => setShippingPostalCode(e.target.value)}
+          value={pricingFormState.shippingPostalCode}
+          onChange={e => handleChange('shippingPostalCode', e.target.value)}
           placeholder="Postal code"
         />
-        <input
-          type="text"
-          value={shippingVatNumber}
-          onChange={e => setShippingVatNumber(e.target.value)}
-          placeholder="Vat number"
-        />
       </div>
       <div style={{ marginTop: '10px' }}>
         {recurlyError ? <span style={{ color: 'red' }}>{recurlyError.message}</span> : ''}
         {showPrice ? (
           <span>
             {'Subtotal: '}
-            <span style={{ visibility: loading ? 'hidden' : '' }}>${price.now.subtotal}</span>
+            <span>{`${price.currency.symbol}${price.now.subtotal}`}</span>
           </span>
         ) : null}
+        {loading && 'Loading'}
       </div>
-      <button>Submit</button>
-    </form>
+    </div>
   );
 };

lib/use-checkout-pricing.js

@@ -42,10 +42,10 @@ import cloneDeep from 'lodash/cloneDeep';
  * @param {function} handleError
  * @returns {useCheckoutPricingInstance} useCheckoutPricingInstance
  */
-export default function useCheckoutPricing(initialInputs = {}, handleError = throwError) {
+export default function useCheckoutPricing(initialInputs, handleError = throwError) {
   const recurly = useRecurly();
   const [loading, setLoading] = useState(true);
-  const [input, setInput] = useState(initialInputs);
+  const [input, setInput] = useState(initialInputs || {});
   const [pricing, setPricing] = useState(recurly.Pricing.Checkout());
 
   useEffect(() => {
@@ -77,10 +77,10 @@ export default function useCheckoutPricing(initialInputs = {}, handleError = thr
       return adjustments
         .reduce((checkoutPricing, adjustment) => {
           if (adjustment.itemCode) {
-            return checkoutPricing.adjustment(adjustment);
+            return checkoutPricing.adjustment(adjustment).catch(handleError);
           }
           return checkoutPricing;
-        }, checkoutPricing).catch(handleError);
+        }, checkoutPricing)
     };
 
     function addRestInputs(restInputs, checkoutPricing) {
@@ -98,6 +98,10 @@ export default function useCheckoutPricing(initialInputs = {}, handleError = thr
     function addSubscriptions(subscriptions, checkoutPricing) {
       const { subscriptionPricings } = subscriptions.reduce(
         ({ checkoutPricing, subscriptionPricings }, { plan, tax, addons = [], quantity }) => {
+          if (!plan) {
+            return { checkoutPricing, subscriptionPricings }
+          }
+
           let subscriptionPricing = recurly.Pricing.Subscription().plan(plan, { quantity });
 
           if (addons.length) {
@@ -130,13 +134,13 @@ export default function useCheckoutPricing(initialInputs = {}, handleError = thr
     };
   }, [input, handleError, recurly.Pricing]);
 
-  const output = {
+  const pricingState = {
     price: (pricing && cloneDeep(pricing.price)) || {},
     pricing,
     loading,
   };
 
-  return [output, setInput];
+  return [pricingState, setInput];
 };
 
 function throwError(err) {