Add an option to hide the send button in the widget

docs/README.md

@@ -825,19 +825,48 @@ randomSatoshis = true
 #### ** HTML **
 
 ```html
-disabled="true"
+hide-toasts="true"
 ```
 
 #### ** JavaScript **
 
 ```javascript
-disabled: true
+hideToasts: true
 ```
 
 #### ** React **
 
 ```react
-disabled = true
+hideToasts = true
+```
+
+<!-- tabs:end -->
+
+## hide-send-button
+
+> **The ‘hide-send-button’ parameter specifies whether or not the 'Send with XEC/BCH' button should be hidden.
+
+?> This parameter is optional. Default value is false. Possible values are true or false.
+
+**Example:**
+<!-- tabs:start -->
+
+#### ** HTML **
+
+```html
+hide-send-button="true"
+```
+
+#### ** JavaScript **
+
+```javascript
+hideSendButton: true
+```
+
+#### ** React **
+
+```react
+hideSendButton = true
 ```
 
 <!-- tabs:end -->

docs/zh-cn/README.md

@@ -792,23 +792,50 @@ randomSatoshis = true
 #### ** HTML **
 
 ```html
-disabled="true"
+hide-toasts="true"
 ```
 
 #### ** JavaScript **
 
 ```javascript
-disabled: true
+hideToasts: true
 ```
 
 #### ** React **
 
 ```react
-disabled = true
+hideToasts = true
 ```
 
 <!-- tabs:end -->
 
+## hide-send-button
+
+> **参数'hide-send-button'指定是否隐藏'使用 XEC/BCH 发送'按钮。**
+
+?> 此参数是可选的。默认值为false。可能的值为true或false。
+
+**示例:**
+<!-- tabs:start -->
+
+#### ** HTML **
+
+```html
+hide-send-button="true"
+```
+
+#### ** JavaScript **
+
+```javascript
+hideSendButton: true
+```
+
+#### ** React **
+
+```react
+hideSendButton = true
+```
+
 <!-- tabs:end -->
 
 ## disable-enforce-focus

docs/zh-tw/README.md

@@ -792,19 +792,48 @@ randomSatoshis = true
 #### ** HTML **
 
 ```html
-disabled="true"
+hide-toasts="true"
 ```
 
 #### ** JavaScript **
 
 ```javascript
-disabled: true
+hideToasts: true
 ```
 
 #### ** React **
 
 ```react
-disabled = true
+hideToasts = true
+```
+
+<!-- tabs:end -->
+
+## hide-send-button
+
+> **參數'hide-send-button'指定是否隱藏'使用 XEC/BCH 發送'按鈕。**
+
+?> 此參數是可選的。默認值為false。可能的值為true或false。
+
+**範例:**
+<!-- tabs:start -->
+
+#### ** HTML **
+
+```html
+hide-send-button="true"
+```
+
+#### ** JavaScript **
+
+```javascript
+hideSendButton: true
+```
+
+#### ** React **
+
+```react
+hideSendButton = true
 ```
 
 <!-- tabs:end -->

paybutton/dev/demo/paybutton-generator.html

@@ -175,6 +175,11 @@
                 false-value="false">
               <label for="disable-altpayment">Disable Altpayment</label>
             </div>
+            <div class="form-input toggle">
+              <input type="checkbox" id="hide-send-button" v-model="paybuttonProps.hideSendButton" true-value="true"
+                false-value="false">
+              <label for="hide-send-button">Hide Send Button</label>
+            </div>
           </div>
           <div>
             <div class="form-input toggle">
@@ -228,6 +233,7 @@
             :on-success="mySuccessFuction"
             :on-transaction="myTransactionFuction"
             :disable-altpayment="paybuttonProps.disableAltpayment"
+            :hide-send-button="paybuttonProps.hideSendButton"
             :transaction-text="paybuttonProps.transactionText"
             :auto-close="paybuttonProps.autoClose"
             :op-return="paybuttonProps.opReturn">
@@ -260,6 +266,7 @@
             hideToasts: false,
             disableEnforceFocus: false,
             disableAltpayment: false,
+            hideSendButton: false,
             contributionOffset: undefined,
             opReturn:undefined,
             transactiontext: '',

paybutton/src/index.tsx

@@ -82,6 +82,7 @@ const allowedProps = [
   'currency',
   'displayCurrency',
   'hideToasts',
+  'hideSendButton',
   'hoverText',
   'onSuccess',
   'onTransaction',

react/lib/components/PayButton/PayButton.tsx

@@ -55,6 +55,7 @@ export interface PayButtonProps extends ButtonProps {
   autoClose?: boolean | number | string;
   disableAltpayment?:boolean
   contributionOffset?:number
+  hideSendButton?: boolean;
   size?: ButtonSize;
   sizeScaleAlreadyApplied?: boolean;
   donationAddress?: string;
@@ -89,6 +90,7 @@ export const PayButton = ({
   autoClose = false,
   disableAltpayment,
   contributionOffset,
+  hideSendButton,
   size = 'md',
   sizeScaleAlreadyApplied = false,
   donationRate = DEFAULT_DONATION_RATE,
@@ -435,6 +437,7 @@ export const PayButton = ({
         hoverText={hoverText}
         disableAltpayment={disableAltpayment}
         contributionOffset={contributionOffset}
+        hideSendButton={hideSendButton}
         autoClose={autoClose}
         useAltpayment={useAltpayment}
         setUseAltpayment={setUseAltpayment}

react/lib/components/PaymentDialog/PaymentDialog.tsx

@@ -38,6 +38,7 @@ export interface PaymentDialogProps extends ButtonProps {
   apiBaseUrl?: string;
   disableAltpayment?: boolean;
   contributionOffset?: number;
+  hideSendButton?: boolean;
   useAltpayment: boolean
   setUseAltpayment: Function;
   txsSocket?: Socket;
@@ -99,6 +100,7 @@ export const PaymentDialog = ({
   hoverText,
   disableAltpayment,
   contributionOffset,
+  hideSendButton,
   autoClose = true,
   useAltpayment,
   setUseAltpayment,
@@ -231,6 +233,7 @@ export const PaymentDialog = ({
           hoverText={hoverText}
           disableAltpayment={disableAltpayment}
           contributionOffset={contributionOffset}
+          hideSendButton={hideSendButton}
           useAltpayment={useAltpayment}
           setUseAltpayment={setUseAltpayment}
           setTxsSocket={setTxsSocket}

react/lib/components/Widget/Widget.tsx

@@ -115,6 +115,7 @@ export interface WidgetProps {
   newTxText?: string;
   transactionText?: string;
   convertedCurrencyObj?: CurrencyObject;
+  hideSendButton?: boolean;
   setConvertedCurrencyObj?: Function;
   setPaymentId?: Function;
 }
@@ -203,6 +204,7 @@ export const Widget: React.FunctionComponent<WidgetProps> = props => {
     donationRate = DEFAULT_DONATION_RATE,
     setConvertedCurrencyObj = () => {},
     setPaymentId,
+    hideSendButton,
   } = props;
   const [loading, setLoading] = useState(true);
   const [draftAmount, setDraftAmount] = useState<string>("")
@@ -1347,7 +1349,7 @@ export const Widget: React.FunctionComponent<WidgetProps> = props => {
               </Box>
             ) : null}
 
-            {success ? null : (
+            {success || hideSendButton ? null : (
               <Box pt={2} flex={1} sx={classes.button_container}>
                 {
                   // Use createElement to avoid JSX element-type incompatibility from duplicate React types

react/lib/components/Widget/WidgetContainer.tsx

@@ -57,6 +57,7 @@ export interface WidgetContainerProps
   donationAddress?: string
   donationRate?: number
   convertedCurrencyObj?: CurrencyObject;
+  hideSendButton?: boolean;
 }
 
 const snackbarOptionsSuccess: OptionsObject = {
@@ -141,6 +142,7 @@ export const WidgetContainer: React.FunctionComponent<WidgetContainerProps> =
       donationRate,
       convertedCurrencyObj,
       setConvertedCurrencyObj,
+      hideSendButton,
       ...widgetProps
     } = props;
     const [internalCurrencyObj, setInternalCurrencyObj] = useState<CurrencyObject>();
@@ -426,6 +428,7 @@ export const WidgetContainer: React.FunctionComponent<WidgetContainerProps> =
           convertedCurrencyObj={convertedCurrencyObj}
           setConvertedCurrencyObj={setConvertedCurrencyObj}
           setPaymentId={setThisPaymentId}
+          hideSendButton={hideSendButton}
         />
       </React.Fragment>
     );

react/lib/tests/components/PayButton.test.tsx

@@ -469,3 +469,102 @@ describe('PayButton – UI shows updated amount + QR after reopen', () => {
   )
 })
 
+describe('PayButton – hideSendButton in dialog', () => {
+  test.each(CRYPTO_CASES)(
+    'send button is hidden in dialog when hideSendButton=true (%s)',
+    async ({ currency, address }) => {
+      const user = userEvent.setup()
+
+      render(
+        <PayButton
+          to={address}
+          amount={5}
+          currency={currency as any}
+          hideSendButton={true}
+        />
+      )
+
+      // Open the dialog
+      await user.click(screen.getByRole('button', { name: /donate/i }))
+
+      await waitFor(() => {
+        const { createPayment } = require('../../util');
+        expect(createPayment).toHaveBeenCalledTimes(1)
+      })
+
+      // Wait for dialog to fully render
+      await waitFor(() => {
+        expect(screen.queryByText(/loading/i)).toBeNull()
+      })
+
+      // The send button should not be present in the dialog
+      const sendButton = screen.queryByRole('button', { name: /send with.*wallet/i })
+      expect(sendButton).toBeNull()
+    }
+  )
+
+  test.each(CRYPTO_CASES)(
+    'send button is visible in dialog when hideSendButton=false (%s)',
+    async ({ currency, address }) => {
+      const user = userEvent.setup()
+
+      render(
+        <PayButton
+          to={address}
+          amount={5}
+          currency={currency as any}
+          hideSendButton={false}
+        />
+      )
+
+      // Open the dialog
+      await user.click(screen.getByRole('button', { name: /donate/i }))
+
+      await waitFor(() => {
+        const { createPayment } = require('../../util');
+        expect(createPayment).toHaveBeenCalledTimes(1)
+      })
+
+      // Wait for dialog to fully render
+      await waitFor(() => {
+        expect(screen.queryByText(/loading/i)).toBeNull()
+      })
+
+      // The send button should be present in the dialog
+      const sendButton = await screen.findByRole('button', { name: /send with.*wallet/i })
+      expect(sendButton).toBeTruthy()
+    }
+  )
+
+  test.each(CRYPTO_CASES)(
+    'send button is visible by default (hideSendButton undefined) (%s)',
+    async ({ currency, address }) => {
+      const user = userEvent.setup()
+
+      render(
+        <PayButton
+          to={address}
+          amount={5}
+          currency={currency as any}
+        />
+      )
+
+      // Open the dialog
+      await user.click(screen.getByRole('button', { name: /donate/i }))
+
+      await waitFor(() => {
+        const { createPayment } = require('../../util');
+        expect(createPayment).toHaveBeenCalledTimes(1)
+      })
+
+      // Wait for dialog to fully render
+      await waitFor(() => {
+        expect(screen.queryByText(/loading/i)).toBeNull()
+      })
+
+      // The send button should be present in the dialog
+      const sendButton = await screen.findByRole('button', { name: /send with.*wallet/i })
+      expect(sendButton).toBeTruthy()
+    }
+  )
+})