Issue - review order button - stripe (#47)

* added stripecomplete state, status of button checks the state to see if the fields complete

* bump version

* change field to form

Author: owensmooth

dist/bundle.js

@@ -46668,6 +46668,7 @@ function (_Component) {
         errors: Object.assign(this.state.errors, stripe_fields_defineProperty({}, fieldName, errorMessage)),
         dataAvailable: Object.assign(this.state.dataAvailable, stripe_fields_defineProperty({}, fieldName, !e.empty))
       });
+      e.complete ? this.props.setStripeFormComplete(true) : this.props.setStripeFormComplete(false);
       this.checkDataValidity();
     }
   }, {
@@ -46727,10 +46728,10 @@ function stripe_payment_createClass(Constructor, protoProps, staticProps) { if (
 
 function stripe_payment_possibleConstructorReturn(self, call) { if (call && (stripe_payment_typeof(call) === "object" || typeof call === "function")) { return call; } return stripe_payment_assertThisInitialized(self); }
 
-function stripe_payment_assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
 function stripe_payment_getPrototypeOf(o) { stripe_payment_getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return stripe_payment_getPrototypeOf(o); }
 
+function stripe_payment_assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
 function stripe_payment_inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) stripe_payment_setPrototypeOf(subClass, superClass); }
 
 function stripe_payment_setPrototypeOf(o, p) { stripe_payment_setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return stripe_payment_setPrototypeOf(o, p); }
@@ -46752,11 +46753,15 @@ function (_Component) {
     stripe_payment_classCallCheck(this, StripePayment);
 
     _this = stripe_payment_possibleConstructorReturn(this, stripe_payment_getPrototypeOf(StripePayment).call(this, props));
+    _this.state = {
+      stripeFormComplete: false
+    };
     _this.AddressBook = component_mapping('AddressBook');
     _this.AddressForm = component_mapping('AddressForm');
     _this.Button = component_mapping('Button');
     _this.Checkbox = component_mapping('Checkbox');
     _this.StripeWrapper = component_mapping('StripeWrapper');
+    _this.setStripeFormComplete = _this.setStripeFormComplete.bind(stripe_payment_assertThisInitialized(_this));
     return _this;
   }
 
@@ -46771,14 +46776,21 @@ function (_Component) {
         "aria-label": "Review Your Order",
         className: "c-address-form__button o-button--sml",
         label: "Review Your Order",
-        status: this.props.nextStepAvailable() ? 'positive' : 'disabled',
+        status: this.state.stripeFormComplete ? 'positive' : 'disabled',
         type: "primary",
-        disabled: !this.props.nextStepAvailable(),
+        disabled: !this.state.stripeFormComplete,
         onClick: function onClick() {
           return _this2.props.nextSection('complete');
         }
       }));
     }
+  }, {
+    key: "setStripeFormComplete",
+    value: function setStripeFormComplete(value) {
+      this.setState({
+        stripeFormComplete: value
+      });
+    }
   }, {
     key: "render",
     value: function render() {
@@ -46808,7 +46820,8 @@ function (_Component) {
         billingAddress: checkout.billingAddress,
         cardTokenRequested: cardTokenRequested,
         onCardTokenReceived: onCardTokenReceived,
-        setCardErrors: setCardErrors
+        setCardErrors: setCardErrors,
+        setStripeFormComplete: this.setStripeFormComplete
       }), external_react_default.a.createElement("div", {
         className: "o-form__input-group"
       }, external_react_default.a.createElement("label", null, "Billing address *")), external_react_default.a.createElement(this.Checkbox, {
@@ -46924,14 +46937,16 @@ function (_Component) {
           billingAddress = _this$props.billingAddress,
           cardTokenRequested = _this$props.cardTokenRequested,
           onCardTokenReceived = _this$props.onCardTokenReceived,
-          setCardErrors = _this$props.setCardErrors;
+          setCardErrors = _this$props.setCardErrors,
+          setStripeFormComplete = _this$props.setStripeFormComplete;
       return external_react_default.a.createElement(react_stripe_elements_es["StripeProvider"], {
         apiKey: stripeApiKey
       }, external_react_default.a.createElement(react_stripe_elements_es["Elements"], null, external_react_default.a.createElement(this.StripeFields, {
         billingAddress: billingAddress,
         cardTokenRequested: cardTokenRequested,
         onCardTokenReceived: onCardTokenReceived,
-        setCardErrors: setCardErrors
+        setCardErrors: setCardErrors,
+        setStripeFormComplete: setStripeFormComplete
       })));
     }
   }, {

dist/scss/60_components/_c-header.scss

@@ -92,7 +92,7 @@
   top: 0;
   left: -100vw;
   right: -100vw;
-  max-width: 1200px;
+  max-width: $global-body-max-width;
   margin: auto;
   background: transparent;
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shiftcommerce/shift-react-components",
-  "version": "0.12.2",
+  "version": "0.12.3",
   "main": "dist/bundle.js",
   "license": "MIT",
   "scripts": {

src/components/checkout/stripe-fields.js

@@ -48,6 +48,9 @@ class StripeFields extends Component {
       errors: Object.assign(this.state.errors, { [fieldName]: errorMessage }),
       dataAvailable: Object.assign(this.state.dataAvailable, { [fieldName]: !e.empty })
     })
+
+    e.complete ? this.props.setStripeFormComplete(true) : this.props.setStripeFormComplete(false)
+
     this.checkDataValidity()
   }
 

src/components/checkout/stripe-payment.js

@@ -9,11 +9,16 @@ class StripePayment extends Component {
   constructor (props) {
     super(props)
 
+    this.state = {
+      stripeFormComplete: false
+    }
+
     this.AddressBook = componentMapping('AddressBook')
     this.AddressForm = componentMapping('AddressForm')
     this.Button = componentMapping('Button')
     this.Checkbox = componentMapping('Checkbox')
     this.StripeWrapper = componentMapping('StripeWrapper')
+    this.setStripeFormComplete = this.setStripeFormComplete.bind(this)
   }
 
   renderFormSubmitButton () {
@@ -23,15 +28,21 @@ class StripePayment extends Component {
           aria-label='Review Your Order'
           className='c-address-form__button o-button--sml'
           label='Review Your Order'
-          status={(this.props.nextStepAvailable() ? 'positive' : 'disabled')}
+          status={( this.state.stripeFormComplete ? 'positive' : 'disabled')}
           type='primary'
-          disabled={!this.props.nextStepAvailable()}
+          disabled={!this.state.stripeFormComplete}
           onClick={() => this.props.nextSection('complete')}
         />
       </div>
     )
   }
 
+  setStripeFormComplete (value) {
+    this.setState({
+      stripeFormComplete: value
+    })
+  }
+
   render () {
     const {
       addressBook,
@@ -62,6 +73,7 @@ class StripePayment extends Component {
               cardTokenRequested={cardTokenRequested}
               onCardTokenReceived={onCardTokenReceived}
               setCardErrors={setCardErrors}
+              setStripeFormComplete={this.setStripeFormComplete}
             />
 
             <div className='o-form__input-group'>

src/components/checkout/stripe-wrapper.js

@@ -19,7 +19,8 @@ class StripeWrapper extends Component {
       billingAddress,
       cardTokenRequested,
       onCardTokenReceived,
-      setCardErrors
+      setCardErrors,
+      setStripeFormComplete
     } = this.props
 
     return (
@@ -30,6 +31,7 @@ class StripeWrapper extends Component {
             cardTokenRequested={cardTokenRequested}
             onCardTokenReceived={onCardTokenReceived}
             setCardErrors={setCardErrors}
+            setStripeFormComplete={setStripeFormComplete}
           />
         </Elements>
       </StripeProvider>