jlengrand/adyen-web
1
0
Fork 0
mirror of https://github.com/jlengrand/adyen-web.git synced 2026-03-10 08:01:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: redesign for the QR loader component (#2359)

Browse Source
This commit is contained in:
Yu Long
2023-10-18 14:30:27 +02:00
committed by GitHub
parent 3aa5cd661b
commit 16b7bc68b2
3 changed files with 16 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/happy-pianos-appear.md Normal file
View File

@@ -0,0 +1,5 @@
---
'@adyen/adyen-web': patch
---
UX improvement for the `QRLoader` component - the QR loader shows amount and redirect button before the QR code image.

1
packages/lib/src/components/internal/QRLoader/QRLoader.scss
View File

@@ -79,7 +79,6 @@
}
.adyen-checkout__qr-loader__app-link {
margin-top: 16px;
display: none;
}

21
packages/lib/src/components/internal/QRLoader/QRLoader.tsx
View File

@@ -191,6 +191,17 @@ class QRLoader extends Component<QRLoaderProps, QRLoaderState> {
>
{brandLogo && <img src={brandLogo} alt={brandName} className="adyen-checkout__qr-loader__brand-logo" />}
{amount && amount.value && amount.currency && (
<div className="adyen-checkout__qr-loader__payment_amount">{i18n.amount(amount.value, amount.currency)}</div>
)}
{url && (
<div className="adyen-checkout__qr-loader__app-link">
<Button classNameModifiers={['qr-loader']} onClick={() => this.redirectToApp(url)} label={i18n.get('openApp')} />
<ContentSeparator />
</div>
)}
{/* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */}
<div ref={qrSubtitleRef} tabIndex={0} className="adyen-checkout__qr-loader__subtitle">
{i18n.get(this.props.introduction)}
@@ -204,10 +215,6 @@ class QRLoader extends Component<QRLoaderProps, QRLoaderState> {
}}
/>
{amount && amount.value && amount.currency && (
<div className="adyen-checkout__qr-loader__payment_amount">{i18n.amount(amount.value, amount.currency)}</div>
)}
<div className="adyen-checkout__qr-loader__progress">
<span className="adyen-checkout__qr-loader__percentage" style={{ width: `${this.state.percentage}%` }} />
</div>
@@ -234,12 +241,6 @@ class QRLoader extends Component<QRLoaderProps, QRLoaderState> {
/>
</div>
)}
{url && (
<div className="adyen-checkout__qr-loader__app-link">
<ContentSeparator />
<Button classNameModifiers={['qr-loader']} onClick={() => this.redirectToApp(url)} label={i18n.get('openApp')} />
</div>
)}
</div>
);
}