Feat/contribution offset prop

docs/README.md

@@ -918,6 +918,34 @@ enableAltpayment = "true"
 
 <!-- tabs:end -->
 
+## contribution-offset
+
+> **The ‘contributionOffset’  parameter sets an initial amount to add to the total contributions displayed, simulating prior contributions.**
+
+?> This parameter is optional. Default value is 0. Possible values are positive integers between 0 and the goal-amount.
+
+**Example:**
+<!-- tabs:start -->
+
+#### ** HTML **
+
+```html
+contribution-offset="10"
+```
+
+#### ** JavaScript **
+
+```javascript
+contribution-offset: 10
+```
+
+#### ** React **
+
+```react
+contributionOffset = 10
+```
+<!-- 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

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

docs/zh-cn/README.md

@@ -887,7 +887,7 @@ apiBaseUrl: 'https://paybutton.org'
 ```react
 apiBaseUrl = "https://paybutton.org"
 ```
-
+<!-- tabs:end -->
 ## enable-altpayment
 
 > **“enableAltpayment” 参数控制是否启用备用支付逻辑。**
@@ -916,6 +916,33 @@ enableAltpayment = "true"
 ```
 <!-- tabs:end -->
 
+## contribution-offset
+
+> **"contributionOffset" 参数用于设置一个初始金额，将其加到显示的总贡献额中，以模拟先前的贡献。**
+
+?> 此参数是可选的，默认值为 0。可能的值是介于 0 和目标金额之间的正整数。
+
+**Example:**
+<!-- tabs:start -->
+
+#### ** HTML **
+
+```html
+contribution-offset="10"
+```
+
+#### ** JavaScript **
+
+```javascript
+contribution-offset: 10
+```
+
+#### ** React **
+
+```react
+contributionOffset = 10
+```
+<!-- tabs:end -->
 # 贡献
 
 PayButton是一个社群主导的开放源代码促进会。此项目的成功关键在于对社群的贡献。

docs/zh-cn/_sidebar.md

@@ -27,6 +27,7 @@
   - [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)
+  - [contribution-offset](/zh-cn/?id=contribution-offset)
 - [贡献](/zh-cn/?id=贡献)
   - [开发人员快速入门](/zh-cn/?id=开发人员快速入门)
     - [入门](/zh-cn/?id=入门)

docs/zh-tw/README.md

@@ -912,9 +912,36 @@ enableAltpayment: 'true'
 
 ```react
 enableAltpayment = "true"
-``
+```
 <!-- tabs:end -->
 
+## contribution-offset
+
+> **"contributionOffset" 參數用於設定一個初始數額，將其加至顯示的總貢獻額，以模擬先前的貢獻。**
+
+?> 此參數是可選的，預設值為 0。可能的值是介於 0 和目標金額之間的正整數。
+
+**Example:**
+<!-- tabs:start -->
+
+#### ** HTML **
+
+```html
+contribution-offset="10"
+```
+
+#### ** JavaScript **
+
+```javascript
+contribution-offset: 10
+```
+
+#### ** React **
+
+```react
+contributionOffset = 10
+```
+<!-- tabs:end -->
 # 貢獻
 
 PayButton是一個社區主導的開放源代碼促進會。此項目的成功關鍵在於對社區的貢獻。

docs/zh-tw/_sidebar.md

@@ -27,6 +27,7 @@
   - [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)
+  - [contribution-offset](/zh-tw/?id=contribution-offset)
 - [貢獻](/zh-tw/?id=貢獻)
   - [開發人員快速入門](/zh-tw/?id=開發人員快速入門)
     - [入門](/zh-tw/?id=入門)

paybutton/dev/demo/paybutton-generator.html

@@ -86,13 +86,19 @@
               <label for="amount">Amount:</label>
               <input id="amount" v-model.number="paybuttonProps.amount" type="number" step="0.01">
             </div>
+            <div class="form-input">
+              <label for="currency">Currency:</label>
+              <input id="currency" v-model="paybuttonProps.currency" type="text">
+            </div>
+          </div>
+          <div style="display: flex; justify-content: space-between; gap:10px">
             <div class="form-input">
               <label for="goalAmount">Goal Amount:</label>
               <input id="goalAmount" v-model.number="paybuttonProps.goalAmount" type="number">
             </div>
             <div class="form-input">
-              <label for="currency">Currency:</label>
-              <input id="currency" v-model="paybuttonProps.currency" type="text">
+              <label for="contributionOffset">Contribution Offset:</label>
+              <input id="contributionOffset" v-model.number="paybuttonProps.contributionOffset" type="number">
             </div>
           </div>
           <div style="display: flex; justify-content: space-between; gap:10px">
@@ -216,6 +222,7 @@
             hideToasts: false,
             disableEnforceFocus: false,
             enableAltpayment: false,
+            contributionOffset: undefined,
             onSuccess: mySuccessFuction,
             onTransaction: myTransactionFuction
           });

paybutton/src/index.tsx

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

react/lib/components/PayButton/PayButton.tsx

@@ -44,6 +44,7 @@ export interface PayButtonProps extends ButtonProps {
   wsBaseUrl?: string;
   apiBaseUrl?: string;
   enableAltpayment?:boolean
+  contributionOffset?:number
 }
 
 export const PayButton = (props: PayButtonProps): React.ReactElement => {
@@ -79,7 +80,8 @@ export const PayButton = (props: PayButtonProps): React.ReactElement => {
     editable,
     wsBaseUrl,
     apiBaseUrl,
-    enableAltpayment
+    enableAltpayment,
+    contributionOffset
   } = Object.assign({}, PayButton.defaultProps, props);
 
   const [paymentId] = useState(!disablePaymentId ? generatePaymentId(8) : undefined);
@@ -234,6 +236,7 @@ export const PayButton = (props: PayButtonProps): React.ReactElement => {
         apiBaseUrl={apiBaseUrl}
         hoverText={hoverText}
         enableAltpayment={enableAltpayment}
+        contributionOffset={contributionOffset}
       />
       {errorMsg && (
         <p

react/lib/components/PaymentDialog/PaymentDialog.tsx

@@ -35,7 +35,8 @@ export interface PaymentDialogProps extends ButtonProps {
   onTransaction?: (transaction: Transaction) => void;
   wsBaseUrl?: string;
   apiBaseUrl?: string;
-  enableAltpayment?: boolean
+  enableAltpayment?: boolean;
+  contributionOffset?:number;
 }
 
 export const PaymentDialog = (
@@ -71,7 +72,8 @@ export const PaymentDialog = (
     wsBaseUrl,
     apiBaseUrl,
     hoverText,
-    enableAltpayment
+    enableAltpayment,
+    contributionOffset
   } = Object.assign({}, PaymentDialog.defaultProps, props);
 
   const handleWidgetClose = (): void => {
@@ -142,6 +144,7 @@ export const PaymentDialog = (
           apiBaseUrl={apiBaseUrl}
           hoverText={hoverText}
           enableAltpayment={enableAltpayment}
+          contributionOffset={contributionOffset}
           foot={success && (
             <ButtonComponent
               onClick={handleWidgetClose}

react/lib/components/Widget/Widget.tsx

@@ -78,7 +78,8 @@ export interface WidgetProps {
   setUseAltpayment: Function;
   shiftCompleted: boolean
   setShiftCompleted: Function;
-  enableAltpayment?: boolean
+  enableAltpayment?: boolean;
+  contributionOffset?: number
 }
 
 interface StyleProps {
@@ -171,6 +172,7 @@ export const Widget: React.FunctionComponent<WidgetProps> = props => {
     shiftCompleted,
     setShiftCompleted,
     enableAltpayment,
+    contributionOffset
   } = Object.assign({}, Widget.defaultProps, props);
 
   const [loading, setLoading] = useState(true);
@@ -446,12 +448,16 @@ export const Widget: React.FunctionComponent<WidgetProps> = props => {
       const goal = getCurrencyObject(cleanGoalAmount, currency, false);
       if (!isFiat(currency)) {
         if (goal !== undefined) {
-          setGoalPercent((100 * progress.float) / goal.float);
-          setGoalText(`${progress.float} / ${cleanGoalAmount}`);
+          let progressFloat = progress.float;
+          if(contributionOffset !== undefined){
+            progressFloat = Number(progressFloat) + Number(contributionOffset)
+          };
+          setGoalPercent((100 * progressFloat) / goal.float);
+          setGoalText(`${progressFloat} / ${cleanGoalAmount}`);
           setLoading(false);
         }
       } else {
-        if (hasPrice) {
+        if (hasPrice) { 
           const receivedVal: number = totalReceived * price;
           const receivedText: string = formatPrice(
             receivedVal,
@@ -476,7 +482,7 @@ export const Widget: React.FunctionComponent<WidgetProps> = props => {
         setErrorMsg('Goal Value must be a number');
       }
     }
-  }, [totalReceived, currency, goalAmount, price, hasPrice]);
+  }, [totalReceived, currency, goalAmount, price, hasPrice, contributionOffset]);
 
   const handleButtonClick = () => {
     if (addressType === 'XEC') {

react/lib/components/Widget/WidgetContainer.tsx

@@ -45,6 +45,7 @@ export interface WidgetContainerProps
   apiBaseUrl?: string;
   successText?: string;
   enableAltpayment?: boolean
+  contributionOffset?: number
 }
 
 const snackbarOptions: OptionsObject = {
@@ -104,6 +105,7 @@ export const WidgetContainer: React.FunctionComponent<WidgetContainerProps> =
       successText,
       hoverText,
       enableAltpayment,
+      contributionOffset,
       ...widgetProps
     } = props;
 
@@ -278,6 +280,7 @@ export const WidgetContainer: React.FunctionComponent<WidgetContainerProps> =
           shiftCompleted={shiftCompleted}
           setShiftCompleted={setShiftCompleted}
           enableAltpayment={enableAltpayment}
+          contributionOffset={contributionOffset}
         />
       </React.Fragment>
     );