@opexa/portal-components 0.0.819 → 0.0.821
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import Image from 'next/image';
|
|
3
3
|
import { useBoolean } from 'usehooks-ts';
|
|
4
4
|
import { AlertCircleIcon } from '../../../../icons/AlertCircleIcon.js';
|
|
@@ -26,12 +26,15 @@ export function QrCodeGenerated() {
|
|
|
26
26
|
: 'Single Use QR Code',
|
|
27
27
|
} }), _jsx(AlertDialog.Description, { className: "mt-xs px-3", children: confirm.value
|
|
28
28
|
? 'Closing this window will cancel your current deposit. Do you want to continue?'
|
|
29
|
-
: 'Scan the QR code below with your banking app, or upload it to complete your deposit.' }), !confirm.value && (_jsx("div", { className: "mx-auto mt-xl w-[14.125rem] rounded-xl bg-bg-primary-alt p-6", children: _jsxs(QrCode.Root, { value: context.deposit?.qrCode ?? '',
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
29
|
+
: 'Scan the QR code below with your banking app, or upload it to complete your deposit.' }), !confirm.value && (_jsx("div", { className: "mx-auto mt-xl w-[14.125rem] rounded-xl bg-bg-primary-alt p-6", children: _jsxs(QrCode.Root, { value: context.deposit?.qrCode ?? '', encoding: {
|
|
30
|
+
ecc: 'H',
|
|
31
|
+
boostEcc: true,
|
|
32
|
+
}, children: [_jsxs("div", { className: "relative", children: [_jsx(QrCode.Frame, { className: "mx-auto size-[10rem] rounded-[0.25rem] border border-border-primary bg-white", children: _jsx(QrCode.Pattern, {}) }), _jsx(QrCode.Overlay, { className: "bg-white p-0.5", children: _jsx(Image, { src: qrphIcon, alt: "", className: "size-8", width: 40, height: 40 }) })] }), _jsxs(QrCode.DownloadTrigger, { type: "button", fileName: `QRPH-${Date.now()}.jpg`, mimeType: "image/jpeg", className: "mx-auto mt-5 flex w-fit items-center gap-1 font-semibold text-button-tertiary-fg", children: [_jsx(ArrowCircleDownIcon, { className: "size-5" }), "Download QR Code"] })] }) })), confirm.value && (_jsxs("div", { className: "mt-4xl flex gap-lg", children: [_jsx(Button, { variant: "outline", onClick: confirm.setFalse, children: "Go back" }), _jsx(Button, { onClick: () => {
|
|
33
|
+
context.reset();
|
|
34
|
+
setTimeout(() => {
|
|
35
|
+
confirm.setFalse();
|
|
36
|
+
}, 2);
|
|
37
|
+
}, children: "Continue" })] })), !confirm.value && _jsx(Instruction, {})] }) })] }) }));
|
|
35
38
|
}
|
|
36
39
|
function Instruction() {
|
|
37
40
|
return (_jsxs(AlertDialog.Root, { lazyMount: true, closeOnEscape: false, closeOnInteractOutside: false, children: [_jsxs("p", { className: "mt-lg text-center text-text-tertiary-600 text-xs", children: ["Need help using the QR Code?", ' ', _jsx(AlertDialog.Trigger, { className: "text-text-brand", children: "See instructions" })] }), _jsxs(Portal, { children: [_jsx(AlertDialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+3)]" }), _jsx(AlertDialog.Positioner, { className: "!z-[calc(var(--z-dialog)+4)]", children: _jsxs(AlertDialog.Content, { children: [_jsx(AlertDialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsx("div", { className: "mx-auto flex size-12 items-center justify-center rounded-full bg-bg-brand-secondary", children: _jsx(QrCode02Icon, { className: "size-6 text-text-featured-icon-light-brand" }) }), _jsx(AlertDialog.Title, { className: "mt-xl", children: "How to Use the QR Code for Payment" }), _jsx(AlertDialog.Description, { className: "mt-xl px-3", children: "Follow these simple steps to complete your\u00A0transaction:" }), _jsx("div", { className: "mt-4 text-sm text-text-tertiary-600", children: _jsxs("ol", { className: "list-decimal pl-4", children: [_jsx("li", { className: "marker:font-mono marker:text-sm", children: "Open your preferred banking or EMI mobile app and select 'Transfer Money' or 'Pay via QR.'" }), _jsx("li", { className: "marker:font-mono marker:text-sm", children: "Scan or upload the generated QR Ph code. If prompted by the app, enter the amount to be sent." }), _jsx("li", { className: "marker:font-mono marker:text-sm", children: "Proceed with the transfer or payment." })] }) })] }) })] })] }));
|