Feat/disable sound prop

docs/README.md

@@ -1011,6 +1011,33 @@ autoClose = false
 ```
 <!-- tabs:end -->
 
+## disable-sound
+
+> **The ‘disableSound’ parameter mutes the sound played when a transaction is successful.**
+
+?> This parameter is optional. Default value is false. Possible values are true or false.
+**Example:**
+<!-- tabs:start -->
+
+#### ** HTML **
+
+```html
+disable-sound="false"
+```
+
+#### ** JavaScript **
+
+```javascript
+disableSound: false
+```
+
+#### ** React **
+
+```react
+disableSound = 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/zh-cn/README.md

@@ -1007,6 +1007,34 @@ autoClose = false
 ```
 <!-- tabs:end -->
 
+## disable-sound
+
+> **“disableSound”参数会在交易成功时静音原本播放的声音。**
+
+?>此参数为可选。默认值为 false。可接受的值为 true 或 false。
+
+**Example:**
+<!-- tabs:start -->
+
+#### ** HTML **
+
+```html
+disable-sound="false"
+```
+
+#### ** JavaScript **
+
+```javascript
+disableSound: false
+```
+
+#### ** React **
+
+```react
+disableSound = false
+```
+<!-- tabs:end -->
+
 # 贡献
 
 PayButton是一个社群主导的开放源代码促进会。此项目的成功关键在于对社群的贡献。

docs/zh-tw/README.md

@@ -1006,6 +1006,34 @@ autoClose = false
 ```
 <!-- tabs:end -->
 
+## disable-sound
+
+> **「disableSound」參數會在交易成功時靜音原本播放的聲音。**
+
+?>此參數為選填。預設值為 false。可接受的值為 true 或 false。
+
+**Example:**
+<!-- tabs:start -->
+
+#### ** HTML **
+
+```html
+disable-sound="false"
+```
+
+#### ** JavaScript **
+
+```javascript
+disableSound: false
+```
+
+#### ** React **
+
+```react
+disableSound = false
+```
+<!-- tabs:end -->
+
 # 貢獻
 
 PayButton是一個社區主導的開放源代碼促進會。此項目的成功關鍵在於對社區的貢獻。

paybutton/src/index.tsx

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

react/lib/components/PayButton/PayButton.tsx

@@ -46,6 +46,7 @@ export interface PayButtonProps extends ButtonProps {
   disableAltpayment?: boolean
   contributionOffset?: number
   autoClose?: boolean
+  disableSound?: boolean
 }
 
 export const PayButton = (props: PayButtonProps): React.ReactElement => {
@@ -60,7 +61,6 @@ export const PayButton = (props: PayButtonProps): React.ReactElement => {
   const priceRef = useRef<number>(price);
   const cryptoAmountRef = useRef<string | undefined>(cryptoAmount);
 
-
   const {
     to,
     opReturn,
@@ -83,7 +83,8 @@ export const PayButton = (props: PayButtonProps): React.ReactElement => {
     apiBaseUrl,
     disableAltpayment,
     contributionOffset,
-    autoClose
+    autoClose,
+    disableSound,
   } = Object.assign({}, PayButton.defaultProps, props);
 
   const [paymentId] = useState(!disablePaymentId ? generatePaymentId(8) : undefined);
@@ -240,6 +241,7 @@ export const PayButton = (props: PayButtonProps): React.ReactElement => {
         disableAltpayment={disableAltpayment}
         contributionOffset={contributionOffset}
         autoClose={autoClose}
+        disableSound={disableSound}
       />
       {errorMsg && (
         <p

react/lib/components/PaymentDialog/PaymentDialog.tsx

@@ -36,7 +36,8 @@ export interface PaymentDialogProps extends ButtonProps {
   apiBaseUrl?: string;
   disableAltpayment?: boolean;
   contributionOffset?: number;
-  autoClose?: boolean
+  autoClose?: boolean;
+  disableSound?: boolean;
 }
 
 export const PaymentDialog = (
@@ -74,7 +75,8 @@ export const PaymentDialog = (
     hoverText,
     disableAltpayment,
     contributionOffset,
-    autoClose
+    autoClose,
+    disableSound,
   } = Object.assign({}, PaymentDialog.defaultProps, props);
 
   const handleWidgetClose = (): void => {
@@ -154,6 +156,7 @@ export const PaymentDialog = (
           hoverText={hoverText}
           disableAltpayment={disableAltpayment}
           contributionOffset={contributionOffset}
+          disableSound={disableSound}
           foot={success && (
             <ButtonComponent
               onClick={handleWidgetClose}

react/lib/components/Widget/WidgetContainer.tsx

@@ -16,7 +16,8 @@ import {
   isValidCurrency,
   resolveNumber,
   shouldTriggerOnSuccess,
-  getCurrencyObject
+  getCurrencyObject,
+  isPropsTrue
 } from '../../util';
 
 import Widget, { WidgetProps } from './Widget';
@@ -46,6 +47,7 @@ export interface WidgetContainerProps
   successText?: string;
   disableAltpayment?: boolean
   contributionOffset?: number
+  disableSound?: boolean
 }
 
 const snackbarOptions: OptionsObject = {
@@ -106,6 +108,7 @@ export const WidgetContainer: React.FunctionComponent<WidgetContainerProps> =
       hoverText,
       disableAltpayment,
       contributionOffset,
+      disableSound,
       ...widgetProps
     } = props;
 
@@ -148,7 +151,7 @@ export const WidgetContainer: React.FunctionComponent<WidgetContainerProps> =
         if (altpaymentShift) {
           const shiftStatus = await paymentClient.getPaymentStatus(altpaymentShift.id)
           if (shiftStatus.status === 'settled') {
-            if (sound) txSound.play().catch(() => {});
+            if (sound && !isPropsTrue(disableSound)) txSound.play().catch(() => {});
             onSuccess?.(transaction);
             setShiftCompleted(true)
           }
@@ -170,7 +173,7 @@ export const WidgetContainer: React.FunctionComponent<WidgetContainerProps> =
               randomSatoshis,
             ),
           )) {
-            if (sound) {
+            if (sound && !isPropsTrue(disableSound)) {
               txSound.play().catch(() => {});
             }