feat: disable CreditCardSubmitButton

docs/components/CreditCardSubmitButton.md

@@ -2,11 +2,15 @@
 id:CreditCardSubmitButton
 title:CreditCardSubmitButton
 ---
+
 Renders a button that will create a card nonce using Square's SqPaymentForm JS library and calls
 `onCardNonceResponseReceived` afterwards.
 
 When accepting credit card payments, you **must** have this component inside your `SquarePaymentForm`.
+
 ## Props
-|Name|Type|Description|Default Value|
-|---|---|---|---|
-|children|React.ReactNode|Input field label||
+
+| Name     | Type            | Description         | Default Value |
+| -------- | --------------- | ------------------- | ------------- |
+| children | React.ReactNode | children components |               |
+| disabled | Boolean         | disable button      | false         |

src/components/CreditCardSubmitButton.tsx

@@ -3,9 +3,10 @@ import React, { useContext } from 'react';
 import Context from './Context';
 
 interface Props {
-  /** Input field label */
   children?: React.ReactNode;
+  disabled?: boolean;
 }
+
 /**
  * Renders a button that will create a card nonce using Square's SqPaymentForm JS library and calls
  * `onCardNonceResponseReceived` afterwards.
@@ -15,8 +16,12 @@ interface Props {
 export const CreditCardSubmitButton: React.FC<Props> = (props: Props) => {
   const context = useContext(Context);
   return (
-    <button className="sq-creditcard" onClick={context.onCreateNonce}>
+    <button disabled={props.disabled} className="sq-creditcard" onClick={context.onCreateNonce}>
       {props.children ? props.children : 'Pay'}
     </button>
   );
 };
+
+CreditCardSubmitButton.defaultProps = {
+  disabled: false,
+};

src/components/__tests__/CreditCardSubmitButton.test.tsx

@@ -44,4 +44,16 @@ describe('CreditCardPostalCodeInput', () => {
       expect(wrapper.find('button').text()).to.eql(test);
     });
   });
+
+  describe('disabled', () => {
+    it('should not be disabled by default', () => {
+      const wrapper = mount(<CreditCardSubmitButton />);
+      expect(wrapper.find('button').prop('disabled')).to.eql(false);
+    });
+
+    it('can be disabled', () => {
+      const wrapper = mount(<CreditCardSubmitButton disabled />);
+      expect(wrapper.find('button').prop('disabled')).to.eql(true);
+    });
+  });
 });