fix: disable behavior

PayButton · Nov 25, 2024 · 775a9ac · 775a9ac
1 parent e26445e
commit 775a9ac
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 23 deletions.
diff --git a/paybutton/dev/demo/index.html b/paybutton/dev/demo/index.html
@@ -71,7 +71,12 @@
       api-base-url="http://localhost:3000"></div>
     <div class="paybutton" to="qpfx6l0x85kc5qaah4wx9nahezcgqefnss2sp0cy06"></div>
     <div class="dialogbutton btn purple">
-      <button onclick="PayButton.openDialog({ to: 'bitcoincash:qrmm7edwuj4jf7tnvygjyztyy0a0qxvl7q9ayphulp' })">
+      <button onclick="PayButton.openDialog({ to: 'bitcoincash:qrmm7edwuj4jf7tnvygjyztyy0a0qxvl7q9ayphulp', disabled: true })">
+        open payment dialog disabled
+      </button>
+    </div>
+    <div class="dialogbutton btn">
+      <button onclick="PayButton.openDialog({ to: 'bitcoincash:qrmm7edwuj4jf7tnvygjyztyy0a0qxvl7q9ayphulp', disabled: false })">
         open payment dialog
       </button>
     </div>
@@ -105,6 +110,7 @@
         currency="SAT" detect-payment="true"></div>
       <br />
     </div>
+    <div id="paybutton-generator" class="paybutton-widget" to="ecash:qrmm7edwuj4jf7tnvygjyztyy0a0qxvl7quss2vxek" text="Donate" success-text="Payment Successful!" theme="{&quot;palette&quot;:{&quot;primary&quot;: &quot;#9d00ff&quot;,&quot;secondary&quot;: &quot;#FFF&quot;, &quot;tertiary&quot;: &quot;#000&quot;}}" animation="slide" editable="false" disable-payment-id="false" random-satoshis="false" hide-toasts="false" disable-enforce-focus="false" disabled="true" enable-altpayment="false" amount="letras"></div>
   </div>
 
   <script>
@@ -183,11 +189,12 @@
 
     var config = {
       to: 'bitcoincash:qpfx6l0x85kc5qaah4wx9nahezcgqefnss2sp0cy06',
-      amount: '0.01',
+      amount: 'letras',
       currency: 'CAD',
       goalAmount: 25,
       text: 'Send (1 cent)',
       hoverText: 'For testing!!!',
+
       theme: {
         palette: {
           primary: '#040404',

diff --git a/paybutton/dev/demo/paybutton-generator.html b/paybutton/dev/demo/paybutton-generator.html
@@ -154,9 +154,9 @@
               <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"
+              <input type="checkbox" id="enable-altpayment" v-model="paybuttonProps.enableAltpayment" true-value="true"
                 false-value="false">
-              <label for="disabled">Enable Altpayment</label>
+              <label for="enable-altpayment">Enable Altpayment</label>
             </div>
           </div>
           <div>
@@ -241,15 +241,14 @@
             onSuccess: mySuccessFuction,
             onTransaction: myTransactionFuction
           });
-          const paybuttonType = ref("paybutton-widget");
+          const paybuttonType = ref("paybutton");
           const updateProps = () => {
             const loadingOverlay = document.getElementById("loading-overlay");
             const paybuttonGenerator = document.getElementById("paybutton-generator");
 
 
             loadingOverlay.style.display = "flex";
             paybuttonGenerator.hidden = true
-
             setTimeout(() => {
               paybuttonGenerator.hidden = false
               switch (paybuttonType.value) {

diff --git a/paybutton/src/index.tsx b/paybutton/src/index.tsx
@@ -121,13 +121,22 @@ function renderDialogButton(dialogbuttonExists: boolean): void {
 function openDialog(props: PaymentDialogProps): void {
   const container = document.createElement('div');
   document.body.appendChild(container);
-  const onClose = (success?: boolean, paymentId?:string) => {
+  const onClose = (success?: boolean, paymentId?: string) => {
     if (props.onClose !== undefined) {
-      props.onClose(success, paymentId)
+      props.onClose(success, paymentId);
     }
-    container.remove()
+    container.remove();
+  };
+
+  if (props.disabled) {
+    const buttonElement = document.activeElement;
+    if (buttonElement && buttonElement.tagName === 'BUTTON') {
+      buttonElement.textContent = 'Unavailable';
+    }
+    container.remove();
+  } else {
+    render(<PaymentDialog container={container} onClose={onClose} {...props} />, container);
   }
-  render(<PaymentDialog container={container} onClose={onClose} {...props} />, container)
 }
 
 function renderButtons(paybuttonExists: boolean): void {

diff --git a/react/lib/components/BarChart/BarChart.tsx b/react/lib/components/BarChart/BarChart.tsx
@@ -1,14 +1,19 @@
 import React, { useEffect, useState, CSSProperties } from 'react';
+import { isPropsTrue } from '../../util';
 
 export interface BarChartProps {
   value: number;
   color: string;
+  disabled: boolean;
 }
 
 export const BarChart = (props: BarChartProps): React.ReactElement => {
-  const { value, color } = props;
+  const { value, color, disabled } = props;
   const [barWidth, setBarWidth] = useState(0);
 
+
+  const blurCSS = isPropsTrue(disabled) ? { filter: 'blur(5px)' } : {};
+
   const containerStyle: CSSProperties = {
     width: '100%',
     marginBottom: '20px',
@@ -41,7 +46,7 @@ export const BarChart = (props: BarChartProps): React.ReactElement => {
   return (
     <div style={containerStyle}>
       <div style={barHolder}>
-        <div style={{ ...bar, width: `${barWidth}%` }} />
+        <div style={{ ...bar, width: `${barWidth}%`, ...blurCSS}} />
       </div>
     </div>
   );

diff --git a/react/lib/components/Button/Button.tsx b/react/lib/components/Button/Button.tsx
@@ -68,6 +68,10 @@ const useStyles = makeStyles({
       margin: -2,
       color: '#00000044 !important',
     },
+    '&:disabled span': {
+      filter: 'blur(2px)',
+      color: 'rgba(0, 0, 0, 0.5)',
+    },
   }),
 });
 

diff --git a/react/lib/components/Widget/Widget.tsx b/react/lib/components/Widget/Widget.tsx
@@ -126,6 +126,10 @@ const useStyles = makeStyles({
     color: `${theme.palette.tertiary} !important`,
     textShadow:
     '#fff -2px 0 1px, #fff 0 -2px 1px, #fff 0 2px 1px, #fff 2px 0 1px !important',
+    '&:disabled span': {
+      filter: 'blur(2px)',
+      color: 'rgba(0, 0, 0, 0.5)',
+    },
   }),
   text: ({ theme }: StyleProps) => ({
     fontSize: '0.9rem !important',
@@ -625,15 +629,17 @@ export const Widget: React.FunctionComponent<WidgetProps> = props => {
           py={1}
           textAlign="center"
         >
-          {errorMsg ? (
-            <Typography className={classes.error}>
-              {errorMsg}
-            </Typography>
-          ) : (
-            <Typography className={classes.text}>
-              {loading ? 'Loading...' : success ? successText : text}
-            </Typography>
-          )}
+          <Typography className={errorMsg ? classes.error : classes.text}>
+          {errorMsg 
+            ? errorMsg 
+            : disabled 
+            ? 'Not yet ready for payment' 
+            : loading 
+            ? 'Loading...' 
+            : success 
+            ? successText 
+            : text}
+        </Typography>
         </Box>
         <Box
           display="flex"
@@ -685,14 +691,15 @@ export const Widget: React.FunctionComponent<WidgetProps> = props => {
                     <>
                       <Typography
                         className={classes.copyText}
-                        style={{ marginBottom: '0.61rem' }}
+                        style={{ marginBottom: '0.61rem', ...blurCSS}}
                       >
                         {goalText}
                         <strong>&nbsp;{currency}</strong>
                       </Typography>
                       <BarChart
                         color={theme.palette.primary}
                         value={Math.round(goalPercent)}
+                        disabled={disabled}
                       />
                     </>
                   )}
@@ -766,7 +773,7 @@ export const Widget: React.FunctionComponent<WidgetProps> = props => {
                     text={widgetButtonText}
                     hoverText={hoverText}
                     onClick={handleButtonClick}
-                    disabled={disabled}
+                    disabled={isPropsTrue(disabled)}
                     animation={animation}
                   />
                 </Box>