Feat: Auto-close parameter and success animation reset

docs/README.md

@@ -102,7 +102,8 @@ Example using JavaScript to generate a PayButton:
     wsBaseUrl: 'http://localhost:5000',
     apiBaseUrl: 'http://localhost:3000'
     disableAltpayment: true,
-    contributionOffset: 10
+    contributionOffset: 10,
+    autoClose: true
   };
 
   PayButton.render(document.getElementById('my_button'), config);
@@ -983,6 +984,33 @@ contributionOffset = 10
 ```
 <!-- tabs:end -->
 
+## auto-close
+
+> **The ‘autoClose’ parameter automatically closes the payment dialog after a payment is received.**
+
+?> This parameter is optional. Default value is true. Possible values are true or false.
+**Example:**
+<!-- tabs:start -->
+
+#### ** HTML **
+
+```html
+auto-close="false"
+```
+
+#### ** JavaScript **
+
+```javascript
+autoClose: false
+```
+
+#### ** React **
+
+```react
+autoClose = false
+```
+<!-- tabs:end -->
+
 # Contribute
 
 PayButton is a community-driven open-source initiative. Contributions from the community are _crucial_ to the success of the project.

docs/_sidebar.md

@@ -29,6 +29,7 @@
   - [api-base-url](/?id=api-base-url)
   - [disable-altpayment](/?id=disable-altpayment)
   - [contribution-offset](/?id=contribution-offset)
+  - [auto-close](/?id=auto-close)
 - [Contribute](/?id=contribute)
   - [Developer Quick Start](/?id=developer-quick-start)
     - [Getting Started](/?id=getting-started)

docs/zh-cn/README.md

@@ -979,6 +979,34 @@ contribution-offset: 10
 contributionOffset = 10
 ```
 <!-- tabs:end -->
+
+## auto-close
+
+> **‘autoClose’ 收到付款后，参数会自动关闭付款对话框**
+
+?> 此参数为可选参数。默认值为 true。可能的值为 true 或 false。
+**Example:**
+<!-- tabs:start -->
+
+#### ** HTML **
+
+```html
+auto-close="false"
+```
+
+#### ** JavaScript **
+
+```javascript
+autoClose: false
+```
+
+#### ** React **
+
+```react
+autoClose = false
+```
+<!-- tabs:end -->
+
 # 贡献
 
 PayButton是一个社群主导的开放源代码促进会。此项目的成功关键在于对社群的贡献。

docs/zh-cn/_sidebar.md

@@ -28,6 +28,7 @@
   - [api-base-url](/zh-cn/?id=api-base-url)
   - [disable-altpayment](/zh-cn/?id=disable-altpayment)
   - [contribution-offset](/zh-cn/?id=contribution-offset)
+  - [auto-close](/zh-cn/?id=auto-close)
 - [贡献](/zh-cn/?id=贡献)
   - [开发人员快速入门](/zh-cn/?id=开发人员快速入门)
     - [入门](/zh-cn/?id=入门)

docs/zh-tw/README.md

@@ -978,6 +978,34 @@ contribution-offset: 10
 contributionOffset = 10
 ```
 <!-- tabs:end -->
+
+## auto-close
+
+> **‘autoClose’ 收到付款後，參數會自動關閉付款對話框.**
+
+?> 此參數是可選的。預設值為 true。可能的值是真或假。
+**Example:**
+<!-- tabs:start -->
+
+#### ** HTML **
+
+```html
+auto-close="false"
+```
+
+#### ** JavaScript **
+
+```javascript
+autoClose: false
+```
+
+#### ** React **
+
+```react
+autoClose = false
+```
+<!-- tabs:end -->
+
 # 貢獻
 
 PayButton是一個社區主導的開放源代碼促進會。此項目的成功關鍵在於對社區的貢獻。

docs/zh-tw/_sidebar.md

@@ -28,6 +28,7 @@
   - [api-base-url](/zh-tw/?id=api-base-url)
   - [disable-altpayment](/zh-tw/?id=disable-altpayment)
   - [contribution-offset](/zh-tw/?id=contribution-offset)
+  - [auto-close](/zh-tw/?id=auto-close)
 - [貢獻](/zh-tw/?id=貢獻)
   - [開發人員快速入門](/zh-tw/?id=開發人員快速入門)
     - [入門](/zh-tw/?id=入門)

paybutton/src/index.tsx

@@ -100,7 +100,8 @@ const allowedProps = [
   'wsBaseUrl',
   'apiBaseUrl',
   'disableAltpayment',
-  'contributionOffset'
+  'contributionOffset',
+  'autoClose'
 ];
 
 const requiredProps = [

react/lib/components/PayButton/PayButton.tsx

@@ -43,8 +43,9 @@ export interface PayButtonProps extends ButtonProps {
   onClose?: (success?: boolean, paymentId?:string) => void;
   wsBaseUrl?: string;
   apiBaseUrl?: string;
-  disableAltpayment?:boolean
-  contributionOffset?:number
+  disableAltpayment?: boolean
+  contributionOffset?: number
+  autoClose?: boolean
 }
 
 export const PayButton = (props: PayButtonProps): React.ReactElement => {
@@ -81,7 +82,8 @@ export const PayButton = (props: PayButtonProps): React.ReactElement => {
     wsBaseUrl,
     apiBaseUrl,
     disableAltpayment,
-    contributionOffset
+    contributionOffset,
+    autoClose
   } = Object.assign({}, PayButton.defaultProps, props);
 
   const [paymentId] = useState(!disablePaymentId ? generatePaymentId(8) : undefined);
@@ -237,6 +239,7 @@ export const PayButton = (props: PayButtonProps): React.ReactElement => {
         hoverText={hoverText}
         disableAltpayment={disableAltpayment}
         contributionOffset={contributionOffset}
+        autoClose={autoClose}
       />
       {errorMsg && (
         <p
@@ -263,6 +266,7 @@ const payButtonDefaultProps: PayButtonProps = {
   disableEnforceFocus: false,
   disabled: false,
   editable: false,
+  autoClose: true,
 };
 
 PayButton.defaultProps = payButtonDefaultProps;

react/lib/components/PaymentDialog/PaymentDialog.tsx

@@ -35,7 +35,8 @@ export interface PaymentDialogProps extends ButtonProps {
   wsBaseUrl?: string;
   apiBaseUrl?: string;
   disableAltpayment?: boolean;
-  contributionOffset?:number;
+  contributionOffset?: number;
+  autoClose?: boolean
 }
 
 export const PaymentDialog = (
@@ -72,7 +73,8 @@ export const PaymentDialog = (
     apiBaseUrl,
     hoverText,
     disableAltpayment,
-    contributionOffset
+    contributionOffset,
+    autoClose
   } = Object.assign({}, PaymentDialog.defaultProps, props);
 
   const handleWidgetClose = (): void => {
@@ -82,6 +84,12 @@ export const PaymentDialog = (
   const handleSuccess = (transaction: Transaction): void => {
     setSuccess(true);
     onSuccess?.(transaction);
+    setTimeout(() => {
+      setSuccess(false);
+      if (autoClose === true) {
+        handleWidgetClose();
+      }
+    }, 3000);
   };
   useEffect(() => {
     const invalidAmount = amount !== undefined && isNaN(+amount);
@@ -167,6 +175,7 @@ PaymentDialog.defaultProps = {
   disabled: false,
   editable: false,
   dialogOpen: true,
+  autoClose: true,
 };
 
 export default PaymentDialog;

react/lib/components/Widget/WidgetContainer.tsx

@@ -182,9 +182,11 @@ export const WidgetContainer: React.FunctionComponent<WidgetContainerProps> =
                 }Received ${receivedAmount} ${currencyTicker}`,
                 snackbarOptions,
               );
-
             setSuccess(true);
             onSuccess?.(transaction);
+            setTimeout(() => {
+              setSuccess(false);
+            }, 3000);
           } else {
             onTransaction?.(transaction);
           }