Merge pull request #432 from PayButton/feat/enable-altpayment-prop

feat:enable altpayment prop

docs/README.md

@@ -889,6 +889,33 @@ apiBaseUrl: 'https://paybutton.org'
 apiBaseUrl = "https://paybutton.org"
 ```
 
+## enable-altpayment
+
+> **The ‘enableAltpayment’ parameter controls wether altpayment logic is active or not.**
+
+?> This parameter is optional. Default value is false. Possible values are true or false.
+
+**Example:**
+<!-- tabs:start -->
+
+#### ** HTML **
+
+```html
+enable-altpayment="true"
+```
+
+#### ** JavaScript **
+
+```javascript
+enableAltpayment: 'true'
+```
+
+#### ** React **
+
+```react
+enableAltpayment = "true"
+```
+
 <!-- tabs:end -->
 
 # Contribute

docs/_sidebar.md

@@ -27,6 +27,7 @@
   - [disabled](/?id=disabled)
   - [ws-base-url](/?id=ws-base-url)
   - [api-base-url](/?id=api-base-url)
+  - [enable-altpayment](/?id=enable-altpayment)
 - [Contribute](/?id=contribute)
   - [Developer Quick Start](/?id=developer-quick-start)
     - [Getting Started](/?id=getting-started)

docs/zh-cn/README.md

@@ -888,6 +888,32 @@ apiBaseUrl: 'https://paybutton.org'
 apiBaseUrl = "https://paybutton.org"
 ```
 
+## enable-altpayment
+
+> **“enableAltpayment” 参数控制是否启用备用支付逻辑。**
+
+?> 该参数为可选项，默认值为 false。可选值为 true 或 false。
+
+**Example:**
+<!-- tabs:start -->
+
+#### ** HTML **
+
+```html
+enable-altpayment="true"
+```
+
+#### ** JavaScript **
+
+```javascript
+enableAltpayment: 'true'
+```
+
+#### ** React **
+
+```react
+enableAltpayment = "true"
+```
 <!-- tabs:end -->
 
 # 贡献

docs/zh-cn/_sidebar.md

@@ -24,8 +24,9 @@
   - [hide-toasts](/zh-cn/?id=hide-toasts)
   - [disable-enforce-focus](/zh-cn/?id=disable-enforce-focus)
   - [disabled](/zh-cn/?id=disabled)
-  - [ws-base-url](/?id=ws-base-url)
-  - [api-base-url](/?id=api-base-url)
+  - [ws-base-url](/zh-cn/?id=ws-base-url)
+  - [api-base-url](/zh-cn/?id=api-base-url)
+  - [enable-altpayment](/zh-cn/?id=enable-altpayment)
 - [贡献](/zh-cn/?id=贡献)
   - [开发人员快速入门](/zh-cn/?id=开发人员快速入门)
     - [入门](/zh-cn/?id=入门)

docs/zh-tw/README.md

@@ -887,6 +887,32 @@ apiBaseUrl: 'https://paybutton.org'
 apiBaseUrl = "https://paybutton.org"
 ```
 
+## enable-altpayment
+
+> **“enableAltpayment” 參數控制是否啟用替代付款邏輯。**
+
+?> 該參數為可選項，預設值為 false。可選值為 true 或 false。
+
+**Example:**
+<!-- tabs:start -->
+
+#### ** HTML **
+
+```html
+enable-altpayment="true"
+```
+
+#### ** JavaScript **
+
+```javascript
+enableAltpayment: 'true'
+```
+
+#### ** React **
+
+```react
+enableAltpayment = "true"
+``
 <!-- tabs:end -->
 
 # 貢獻

docs/zh-tw/_sidebar.md

@@ -24,8 +24,9 @@
   - [hide-toasts](/zh-tw/?id=hide-toasts)
   - [disable-enforce-focus](/zh-tw/?id=disable-enforce-focus)
   - [disabled](/zh-tw/?id=disabled)
-  - [ws-base-url](/?id=ws-base-url)
-  - [api-base-url](/?id=api-base-url)
+  - [ws-base-url](/zh-tw/?id=ws-base-url)
+  - [api-base-url](/zh-tw/?id=api-base-url)
+  - [enable-altpayment](/zh-tw/?id=enable-altpayment)
 - [貢獻](/zh-tw/?id=貢獻)
   - [開發人員快速入門](/zh-tw/?id=開發人員快速入門)
     - [入門](/zh-tw/?id=入門)

paybutton/dev/demo/index.html

@@ -38,7 +38,7 @@
       currency="BCH" text="Purchase" on-transaction="myTransactionFunction"></div>
 
     <div class="paybutton" to="ecash:qrmm7edwuj4jf7tnvygjyztyy0a0qxvl7quss2vxek" goal-amount="2500.05" currency="USD"
-      text="Donate (other dev)" on-success="mySuccessFunction" on-transaction="myTransactionFunction"></div>
+      text="Donate (other dev)" on-success="mySuccessFunction" on-transaction="myTransactionFunction" enable-altpayment="false"></div>
 
     <div class="paybutton" to="ecash:qrmm7edwuj4jf7tnvygjyztyy0a0qxvl7quss2vxek" goal-amount="2500000.05"
       on-close="myClose" on-open="myOpen" amount="50" currency="USD" text="Random Sats" random-satoshis="true"
@@ -82,7 +82,7 @@
       <div id="the_widget" class="paybutton-widget" to="ecash:qrmm7edwuj4jf7tnvygjyztyy0a0qxvl7quss2vxek"
         goal-amount="500000" hover-text="BLARG" amount="1000.69" success-text="WOW!" text="Purchase"
         on-success="mySuccessFunction" editable="true" on-transaction="myTransactionFunction"
-        theme='{ "palette": { "primary": "#F18F01", "secondary": "#C3F3FD", "tertiary": "#2E4057"} }'></div>
+        theme='{ "palette": { "primary": "#F18F01", "secondary": "#C3F3FD", "tertiary": "#2E4057"} }' enable-altpayment="true"></div>
       <div class="btn">
         <button onclick="buttonClick()">Switch up widget!</button>
       </div>

paybutton/dev/demo/paybutton-generator.html

@@ -135,6 +135,11 @@
                 false-value="false">
               <label for="random-satoshis">Random Satoshis</label>
             </div>
+            <div class="form-input toggle">
+              <input type="checkbox" id="disabled" v-model="paybuttonProps.enableAltpayment" true-value="true"
+                false-value="false">
+              <label for="disabled">Enable Altpayment</label>
+            </div>
           </div>
           <div>
             <div class="form-input toggle">
@@ -180,7 +185,8 @@
             :disable-enforce-focus="paybuttonProps.disableEnforceFocus"
             :disabled="paybuttonProps.disabled"
             :on-success="mySuccessFuction"
-            :on-transaction="myTransactionFuction">
+            :on-transaction="myTransactionFuction"
+            :enable-altpayment="paybuttonProps.enableAltpayment">
           </div>
         </div>
       </div>
@@ -209,6 +215,7 @@
             randomSatoshis: false,
             hideToasts: false,
             disableEnforceFocus: false,
+            enableAltpayment: false,
             onSuccess: mySuccessFuction,
             onTransaction: myTransactionFuction
           });

paybutton/src/index.tsx

@@ -98,7 +98,8 @@ const allowedProps = [
   'goalAmount',
   'editable',
   'wsBaseUrl',
-  'apiBaseUrl'
+  'apiBaseUrl',
+  'enableAltpayment'
 ];
 
 const requiredProps = [

react/lib/components/PayButton/PayButton.tsx

@@ -43,6 +43,7 @@ export interface PayButtonProps extends ButtonProps {
   onClose?: (success?: boolean, paymentId?:string) => void;
   wsBaseUrl?: string;
   apiBaseUrl?: string;
+  enableAltpayment?:boolean
 }
 
 export const PayButton = (props: PayButtonProps): React.ReactElement => {
@@ -78,6 +79,7 @@ export const PayButton = (props: PayButtonProps): React.ReactElement => {
     editable,
     wsBaseUrl,
     apiBaseUrl,
+    enableAltpayment
   } = Object.assign({}, PayButton.defaultProps, props);
 
   const [paymentId] = useState(!disablePaymentId ? generatePaymentId(8) : undefined);
@@ -231,6 +233,7 @@ export const PayButton = (props: PayButtonProps): React.ReactElement => {
         wsBaseUrl={wsBaseUrl}
         apiBaseUrl={apiBaseUrl}
         hoverText={hoverText}
+        enableAltpayment={enableAltpayment}
       />
       {errorMsg && (
         <p

react/lib/components/PaymentDialog/PaymentDialog.tsx

@@ -35,6 +35,7 @@ export interface PaymentDialogProps extends ButtonProps {
   onTransaction?: (transaction: Transaction) => void;
   wsBaseUrl?: string;
   apiBaseUrl?: string;
+  enableAltpayment?: boolean
 }
 
 export const PaymentDialog = (
@@ -69,7 +70,8 @@ export const PaymentDialog = (
     container,
     wsBaseUrl,
     apiBaseUrl,
-    hoverText
+    hoverText,
+    enableAltpayment
   } = Object.assign({}, PaymentDialog.defaultProps, props);
 
   const handleWidgetClose = (): void => {
@@ -139,17 +141,14 @@ export const PaymentDialog = (
           wsBaseUrl={wsBaseUrl}
           apiBaseUrl={apiBaseUrl}
           hoverText={hoverText}
-          foot={
-            success && (
-              <ButtonComponent
-                onClick={handleWidgetClose}
-                text="Close"
-                hoverText="Close"
-                disabled={disabled}
-              />
-            )
-          }
-        />
+          enableAltpayment={enableAltpayment}
+          foot={success && (
+            <ButtonComponent
+              onClick={handleWidgetClose}
+              text="Close"
+              hoverText="Close"
+              disabled={disabled} />
+          )}        />
       </Dialog>
     </ThemeProvider>
   );

react/lib/components/Widget/Widget.tsx

@@ -78,6 +78,7 @@ export interface WidgetProps {
   setUseAltpayment: Function;
   shiftCompleted: boolean
   setShiftCompleted: Function;
+  enableAltpayment?: boolean
 }
 
 interface StyleProps {
@@ -169,6 +170,7 @@ export const Widget: React.FunctionComponent<WidgetProps> = props => {
     setUseAltpayment,
     shiftCompleted,
     setShiftCompleted,
+    enableAltpayment,
   } = Object.assign({}, Widget.defaultProps, props);
 
   const [loading, setLoading] = useState(true);
@@ -747,13 +749,15 @@ export const Widget: React.FunctionComponent<WidgetProps> = props => {
                   />
                 </Box>
               )}
+              {isPropsTrue(enableAltpayment) && (
               <Box py={1}>
                 <Typography>
                   {
                     (isAboveMinimumAltpaymentUSDAmount || altpaymentEditable)   && <a onClick={tradeWithAltpayment}>Don't have any {addressType}?</a>
                   }
                 </Typography>
               </Box>
+              )}
             </>
           }
           {foot && (

react/lib/components/Widget/WidgetContainer.tsx

@@ -44,6 +44,7 @@ export interface WidgetContainerProps
   wsBaseUrl?: string;
   apiBaseUrl?: string;
   successText?: string;
+  enableAltpayment?: boolean
 }
 
 const snackbarOptions: OptionsObject = {
@@ -102,6 +103,7 @@ export const WidgetContainer: React.FunctionComponent<WidgetContainerProps> =
       apiBaseUrl,
       successText,
       hoverText,
+      enableAltpayment,
       ...widgetProps
     } = props;
 
@@ -275,6 +277,7 @@ export const WidgetContainer: React.FunctionComponent<WidgetContainerProps> =
           setUseAltpayment={setUseAltpayment}
           shiftCompleted={shiftCompleted}
           setShiftCompleted={setShiftCompleted}
+          enableAltpayment={enableAltpayment}
         />
       </React.Fragment>
     );