diff --git a/paybutton/dev/demo/index.html b/paybutton/dev/demo/index.html index afd423eb..6c32d22d 100644 --- 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="{"palette":{"primary": "#9d00ff","secondary": "#FFF", "tertiary": "#000"}}" 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 index 28e51269..47a807dc 100644 --- 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,7 +241,7 @@ 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"); @@ -249,7 +249,6 @@ 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 index d6f3fea3..77858dc1 100644 --- 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 index 0c5a3c3e..0998679c 100644 --- 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 index e4b466cb..52a85d5b 100644 --- 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 index dad06a80..e5798b93 100644 --- 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,7 +691,7 @@ export const Widget: React.FunctionComponent<WidgetProps> = props => { <> <Typography className={classes.copyText} - style={{ marginBottom: '0.61rem' }} + style={{ marginBottom: '0.61rem', ...blurCSS}} > {goalText} <strong> {currency}</strong> @@ -693,6 +699,7 @@ export const Widget: React.FunctionComponent<WidgetProps> = props => { <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>