@achyutlabsau/vue-payment-gateway 0.19.0 → 1.0.0-beta.1

package/README.md

@@ -1,22 +1,42 @@
 # Vue Payment Gateway
 
-A Vue.js payment gateway library to handle payments with ease.
+**@achyutlabsau/vue-payment-gateway** is a Vue 3 library that provides unified integration with multiple payment
+terminal providers — in-store EFTPOS terminals and cloud-based payment APIs — behind a small, consistent Vue
+composable API per provider.
+
+Full documentation, including a step-by-step guide, install options reference, and per-gateway details, lives in the
+[docs site](https://achyut-labs.github.io/al-pay-npm-pkg/) (or run `npm run docs:dev` locally). This README is a
+quick-reference summary.
+
+## Supported Providers
+
+| Provider           | Type                     | Composable / Entry                 |
+| ------------------ | ------------------------ | ---------------------------------- |
+| **Tyro**           | In-store EFTPOS (iframe) | `useTyro` (`/tyro`)                |
+| **Linkly**         | In-store (Linkly Cloud)  | `useLinkly` (`/linkly`)            |
+| **SmartPay**       | In-store (cloud polling) | `useSmartPay` (`/smartpay`)        |
+| **Till Payments**  | In-store (REST intents)  | `useTillPayment` (`/till-payment`) |
+| **MX51 SPI**       | In-store (SPI, events)   | `useMX51` (`/mx51`)                |
+| **ANZ Worldline**  | In-store (TimAPI / WASM) | `timApi` (`/worldline`)            |
+| **Valpay (Adyen)** | Cloud Terminal API       | `useValpay` (`/valpay`)            |
 
 ## Installation
 
-To install the library, run the following command:
-
 ```bash
 npm install @achyutlabsau/vue-payment-gateway
 ```
 
-## Plugin Initialization
+Peer dependencies your app must also install: `@vueuse/core`, `@vueuse/rxjs`, `axios`, `dayjs`, `dexie`, `quasar`,
+`uuid`, `vue`. See [Installation](docs/installation.md) for versions and full setup.
 
-To use the payment gateway, you need to initialize the plugin in your Vue app. Here’s an example of how to set it up:
+## Plugin Initialization
 
-```javascript
+```ts
+import { createApp } from "vue";
 import VuePaymentGateway from "@achyutlabsau/vue-payment-gateway";
 
+const app = createApp(App);
+
 app.use(VuePaymentGateway, {
   currencyCode: "AUD",
   productName: "Pratham Respos", // Name of your product
@@ -27,142 +47,144 @@ app.use(VuePaymentGateway, {
   posRegisterName: "register-name", // Name of the POS register
   posBusinessName: "business name", // Name of the business using the POS system
   tyroApiKey: "tyro-api-key", // API key for Tyro integration
-  valpayApiKey: "valpay-api-key", // API key for Valpay (Adyen) integration
-  environment: "development", // Set environment to 'development' or 'production'
+  environment: "development", // "development" | "production"
+  onReceiptPrint: (receipt, type) => {
+    // Unified across every provider — see docs/features/receipts.md
+  },
 });
+
+app.mount("#app");
 ```
 
-> **Note:** Replace the placeholder values with the actual details of your POS system, product, and Tyro API key.
+> Only set the credentials for the providers you actually use — see the [Install Options Reference](docs/installation.md#install-options-reference).
 
 ## Using the Payment Gateway
 
-This library supports multiple payment providers, such as Tyro, SmartPay, and Linkly. Here’s how to use them in your application.
+Provider composables are **not** identical — method names mirror each vendor's own terminology rather than being
+forced into one generic shape, because the underlying protocols differ (event-driven SPI vs. cloud polling vs. an
+iframe SDK). SmartPay, Till Payments and Valpay have converged on a shared `PaymentTerminal` contract
+(`pair` / `unpair` / `isPaired` / `purchase` / `refund`); Tyro, Linkly, MX51 and Worldline still expose their own
+surface. See [Transaction Processing](docs/features/transactions.md) for the full per-provider reference, and
+[migration-v1.md](docs/migration-v1.md) if you're upgrading from a pre-1.0 release.
 
-### Using Tyro
+### SmartPay, Till Payments, Valpay (shared contract)
 
-To use the Tyro payment gateway, import and initialize it as shown below:
-
-```javascript
-import { useTyro } from "@achyutlabsau/vue-payment-gateway/tyro";
-
-const tyro = useTyro();
-
-// Example usage
-await tyro.processPayment(amount, options);
-```
-
-### Using SmartPay
-
-To use the SmartPay payment gateway, import and initialize it as shown below:
-
-```javascript
+```ts
 import { useSmartPay } from "@achyutlabsau/vue-payment-gateway/smartpay";
 
-const smartPay = useSmartPay();
-
-// Example usage
-await smartPay.processPayment(amount, options);
-```
-
-### Using Linkly
+const smartpay = useSmartPay();
 
-To use the Linkly payment gateway, import and initialize it as shown below:
+await smartpay.pair({ pairingCode: "123456" });
+smartpay.isPaired(); // boolean
 
-```javascript
-import { useLinkly } from "@achyutlabsau/vue-payment-gateway/linkly";
+const res = await smartpay.purchase(1000); // $10.00, amounts are in cents
+// res.success, res.status, res.amount, res.tipAmount, res.maskedCard, res.cardScheme, res.receipts
 
-const linkly = useLinkly();
-
-// Example usage
-await linkly.processPayment(amount, options);
+await smartpay.refund(1000);
+smartpay.unpair();
 ```
 
-### Using Valpay (Adyen)
+`useTillPayment()` and `useValpay()` follow the same `pair`/`unpair`/`isPaired`/`purchase`/`refund` shape and both
+resolve with the same `PaymentResult`. Till and Valpay additionally support **referenced (linked) refunds** via
+`refund(cents, { originalTransactionId })`.
 
-To use the Valpay (Adyen Terminal API) payment gateway, import and initialize it as shown below:
+### Tyro
 
-```javascript
-import { useValpay } from "@achyutlabsau/vue-payment-gateway/valpay";
+```ts
+import { useTyro } from "@achyutlabsau/vue-payment-gateway/tyro";
 
-const valpay = useValpay();
+const tyro = useTyro();
 
-// Get connected terminals
-const { success, terminals } = await valpay.getConnectedTerminals();
+await tyro.pairTyro(merchantId, terminalId);
 
-// Process a payment
-const result = await valpay.processPayment(
-  10050, // Amount in minor units (100.50)
-  "AUD", // Currency code
-  "V400m-324688179", // Terminal ID (POIID)
-  "transaction-12345", // Transaction ID
-  "POSSystemID12345", // Sale ID
-);
+const res = await tyro.initiateTyroPurchase({ integratedReceipt: true, amount: "1000" }, receiptCallback);
+// res.result is a TyroTransactionStatus, e.g. "APPROVED"
 
-// Cancel an ongoing payment
-const cancelResult = await valpay.cancelPayment("MerchantAbort");
+await tyro.initiateTyroRefund({ integratedReceipt: true, amount: "1000" }, receiptCallback);
 ```
 
-## Payment Method API
+### Linkly
 
-Each payment provider (Tyro, SmartPay, Linkly) provides methods to process payments. Here are some of the most commonly used methods:
+```ts
+import { useLinkly, ReceiptAutoPrint } from "@achyutlabsau/vue-payment-gateway/linkly";
 
-### `processPayment(amount: number, options?: object)`
+const linkly = useLinkly();
 
-Processes a payment for the specified amount.
+await linkly.pairPinpad({ username, password, pairCode: "123456" });
 
-**Parameters:**
+const res = await linkly.initiatePurchase({
+  AmtPurchase: 1000,
+  ReceiptAutoPrint: ReceiptAutoPrint.ReturnToPOS,
+});
 
-- `amount`: The amount to be charged.
-- `options`: (Optional) Additional options for the payment.
+// Referenced (linked) refund — pass the original purchase's RFN:
+await linkly.initiateRefund({
+  AmtPurchase: 1000,
+  ReceiptAutoPrint: ReceiptAutoPrint.ReturnToPOS,
+  referenceNumber: rfn,
+});
+```
 
-### `cancelPayment()`
+### MX51 SPI
 
-Cancels an ongoing payment.
+MX51 is event-driven: `initiatePurchase`/`initiateRefund` start the flow but resolve with `void`. Subscribe to the
+`TxFlowStateChanged` document event (or use the bundled `TransactionDialog`) to observe the outcome. See
+[Transaction Processing](docs/features/transactions.md#mx51-spi).
 
-### `getStatus()`
+### ANZ Worldline (TimAPI)
 
-Gets the status of the current payment transaction.
+Worldline is driven directly through the `timApi` instance rather than a composable:
 
-> **Note:** The methods may differ slightly between Tyro, SmartPay, and Linkly. Refer to the official documentation of each payment provider for more details.
+```ts
+import { timApi } from "@achyutlabsau/vue-payment-gateway/worldline";
 
-## Environment Configuration
+timApi.actionPurchase(1000); // cents
+timApi.actionRefund(1000); // unreferenced (standalone) refund
+timApi.actionRefund(1000, lastTransactionSeq); // referenced (linked) refund
+```
 
-The environment can be set to either `development` or `production`. Make sure to use `development` during testing and switch to `production` in a live environment to ensure security and proper tracking.
+## Checking Pairing Status
 
-```javascript
-app.use(VuePaymentGateway, {
-  ...
-  environment: "production", // Set to 'production' in a live environment
-});
-```
+```ts
+import { isPaymentGatewayConnected, PaymentGateways } from "@achyutlabsau/vue-payment-gateway";
 
-## Example Usage
+isPaymentGatewayConnected(PaymentGateways.Linkly); // reads linkly.pairConfig from localStorage
+```
 
-Here’s a complete example of how you might use the payment gateway to process a payment with Tyro:
+## Logging
 
-```javascript
-import { useTyro } from "@achyutlabsau/vue-payment-gateway/tyro";
+Every provider logs through one shared, IndexedDB-backed logger (`./logger` subpath) — persistent across reloads,
+attributable to a gateway, correlated by transaction, and with secrets/PANs redacted centrally. See
+[Logging](docs/features/logging.md) for configuration, the `LogViewer` component, and how to query/export logs.
 
-const tyro = useTyro();
+## Shared Utilities
 
-async function handlePayment() {
-  try {
-    const paymentResult = await tyro.processPayment(100, { currency: "USD" });
-    console.log("Payment successful:", paymentResult);
-  } catch (error) {
-    console.error("Payment failed:", error);
-  }
-}
+```ts
+import {
+  toCents,
+  toMajorUnits,
+  formatCents,
+  maskPan,
+  normalizeCardScheme,
+  CardScheme,
+} from "@achyutlabsau/vue-payment-gateway/utils";
 ```
 
+Available from the root entry too, alongside `generateTransactionId()`, `setState()`, and `setCurrencyCode()`.
+
 ## Troubleshooting
 
-- **Environment Issues**: Make sure `environment` is set correctly (`development` or `production`).
-- **Invalid API Key**: Ensure the Tyro API key is valid and correctly set in the configuration.
-- **Payment Processing Issues**: Check if the payment provider's service is online and available.
+- **"Plugin not initialized" errors** — provider composables throw if called before `app.use(VuePaymentGateway, …)`
+  has run. Call `use*` inside components/handlers, not at module load time.
+- **Environment issues** — make sure `environment` is set correctly (`"development"` or `"production"`); it selects
+  each provider's SDK/endpoint URLs.
+- **Invalid API key** — confirm the provider's API key/merchant credentials are set in the plugin options.
+- **Diagnosing a failed transaction** — check the [Logging](docs/features/logging.md) guide; every gateway's request,
+  response and retry history is queryable through `logger.query()` or the `LogViewer` component.
 
 ## Additional Resources
 
-For more details and usage examples, refer to the official documentation or support channels provided by [Achyutlabs](https://achyutlabs.com/).
-
-With this guide, you should be able to set up and use the Vue Payment Gateway efficiently to handle payments with Tyro, SmartPay, and Linkly integrations.
+- [Full documentation](docs/index.md)
+- [Changelog](CHANGELOG.md)
+- [Migration guide (pre-1.0 → v1)](docs/migration-v1.md)
+- [Achyutlabs](https://achyutlabs.com/)

package/dist/PBtn-B_JOD69N.js

@@ -0,0 +1,38 @@
+import { createBlock as e, defineComponent as t, openBlock as n, reactive as r, ref as i, unref as a } from "vue";
+import { QBtn as o } from "quasar";
+//#region src/plugin/state.ts
+var s = /* @__PURE__ */ function(e) {
+	return e.Tyro = "tyro", e.TillPayment = "till-instore", e.MX51 = "mx51-spi", e.Linkly = "linkly", e.SmartPay = "smartpay", e.ANZ = "anz-instore", e.ADYEN = "adyen-instore", e;
+}({}), c = r({
+	productName: "",
+	productVersion: "",
+	productVendorName: "",
+	posId: "",
+	posRegisterId: "",
+	posRegisterName: "",
+	posBusinessName: "",
+	tyroApiKey: "",
+	tillPaymentApiKey: "",
+	tillPaymentMerchantId: "",
+	mx51DeviceApiKey: "",
+	apiBaseUrl: ""
+}), l = i("AUD"), u = i("production"), d = i(!1), f = (e) => {
+	e.productName && (c.productName = e.productName), e.productVersion && (c.productVersion = e.productVersion), e.productVendorName && (c.productVendorName = e.productVendorName), e.posId && (c.posId = e.posId), e.posRegisterId && (c.posRegisterId = e.posRegisterId), e.posRegisterName && (c.posRegisterName = e.posRegisterName), e.posBusinessName && (c.posBusinessName = e.posBusinessName), e.tyroApiKey && (c.tyroApiKey = e.tyroApiKey), e.tillPaymentApiKey && (c.tillPaymentApiKey = e.tillPaymentApiKey), e.tillPaymentMerchantId && (c.tillPaymentMerchantId = e.tillPaymentMerchantId), e.mx51DeviceApiKey && (c.mx51DeviceApiKey = e.mx51DeviceApiKey), e.apiBaseUrl && (c.apiBaseUrl = e.apiBaseUrl);
+}, p = (e) => l.value = e, m = (e) => u.value = e, h = () => {
+	if (d.value) return !0;
+	throw Error("[Vue Payment Gateway] Plugin is not initialized.");
+}, g = /* @__PURE__ */ t({
+	__name: "PBtn",
+	setup(t) {
+		return (t, r) => (n(), e(a(o), {
+			label: "Cancel",
+			color: "primary",
+			size: "16px",
+			class: "!py-2.5",
+			unelevated: "",
+			ripple: !1
+		}));
+	}
+});
+//#endregion
+export { u as a, m as c, l as i, f as l, s as n, d as o, h as r, p as s, g as t, c as u };

package/dist/PairInstructions-CzbeFfD_.js

@@ -0,0 +1,45 @@
+import { t as e } from "./PBtn-B_JOD69N.js";
+import { Fragment as t, createBlock as n, createElementBlock as r, createElementVNode as i, createVNode as a, defineComponent as o, openBlock as s, renderList as c, toDisplayString as l, unref as u, withCtx as d } from "vue";
+import { QCard as f, QIcon as p } from "quasar";
+//#region node_modules/@quasar/extras/exports/mdi-v7/index.js
+var m = "M2,6H4V18H2V6M5,6H6V18H5V6M7,6H10V18H7V6M11,6H12V18H11V6M14,6H16V18H14V6M17,6H20V18H17V6M21,6H22V18H21V6Z", h = "M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z", g = "M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z", _ = "M3 6H21V4H3C1.9 4 1 4.9 1 6V18C1 19.1 1.9 20 3 20H7V18H3V6M13 12H9V13.78C8.39 14.33 8 15.11 8 16C8 16.89 8.39 17.67 9 18.22V20H13V18.22C13.61 17.67 14 16.88 14 16S13.61 14.33 13 13.78V12M11 17.5C10.17 17.5 9.5 16.83 9.5 16S10.17 14.5 11 14.5 12.5 15.17 12.5 16 11.83 17.5 11 17.5M22 8H16C15.5 8 15 8.5 15 9V19C15 19.5 15.5 20 16 20H22C22.5 20 23 19.5 23 19V9C23 8.5 22.5 8 22 8M21 18H17V10H21V18Z", v = "M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z", y = "M3.9,12C3.9,10.29 5.29,8.9 7,8.9H11V7H7A5,5 0 0,0 2,12A5,5 0 0,0 7,17H11V15.1H7C5.29,15.1 3.9,13.71 3.9,12M8,13H16V11H8V13M17,7H13V8.9H17C18.71,8.9 20.1,10.29 20.1,12C20.1,13.71 18.71,15.1 17,15.1H13V17H17A5,5 0 0,0 22,12A5,5 0 0,0 17,7Z", b = "M17.65,6.35C16.2,4.9 14.21,4 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20C15.73,20 18.84,17.45 19.73,14H17.65C16.83,16.33 14.61,18 12,18A6,6 0 0,1 6,12A6,6 0 0,1 12,6C13.66,6 15.14,6.69 16.22,7.78L13,11H20V4L17.65,6.35Z", x = { class: "mb-8 space-y-4" }, S = { class: "flex items-center justify-center" }, C = { class: "mb-8 space-y-4" }, w = { class: "h-8 w-8 bg-gray-100 font-semibold dark:bg-gray-700 flex shrink-0 items-center justify-center rounded-full" }, T = { class: "text-gray-700 dark:text-gray-200" }, E = { class: "mb-6 space-x-3 rounded-lg bg-amber-50 p-4 text-base dark:bg-slate-700 flex items-start" }, D = { class: "flex justify-end" }, O = /* @__PURE__ */ o({
+	__name: "PairInstructions",
+	props: { steps: {} },
+	emits: ["next"],
+	setup(o) {
+		return (m, h) => (s(), n(u(f), {
+			class: "rounded-lg p-6",
+			flat: "",
+			bordered: ""
+		}, {
+			default: d(() => [
+				i("div", x, [
+					i("div", S, [a(u(p), {
+						name: u(_),
+						size: "4rem",
+						class: "text-primary"
+					}, null, 8, ["name"])]),
+					h[1] ||= i("h2", { class: "text-2xl !font-medium text-center" }, "Terminal Setup Instructions", -1),
+					h[2] ||= i("p", { class: "text-base text-gray-600 dark:text-gray-200 text-center" }, " Please follow these steps to pair your terminal ", -1)
+				]),
+				i("ul", C, [(s(!0), r(t, null, c(o.steps, (e, t) => (s(), r("li", {
+					key: t,
+					class: "space-x-3 text-base flex flex-nowrap items-center"
+				}, [i("span", w, l(t + 1), 1), i("span", T, l(e), 1)]))), 128))]),
+				i("div", E, [a(u(p), {
+					name: u(v),
+					size: "md",
+					class: "mt-0.5 text-amber-500 dark:text-white"
+				}, null, 8, ["name"]), h[3] ||= i("div", { class: "flex-1" }, [i("div", { class: "font-medium text-amber-800 dark:text-white" }, "Important Note"), i("div", { class: "text-amber-700 dark:text-gray-300" }, " Please refer to your terminal guide for the most up-to-date instructions. ")], -1)]),
+				i("div", D, [a(e, {
+					"icon-right": "chevron_right",
+					label: "Next",
+					onClick: h[0] ||= (e) => m.$emit("next")
+				})])
+			]),
+			_: 1
+		}));
+	}
+});
+//#endregion
+export { y as a, g as i, m as n, b as o, h as r, O as t };

package/dist/core-ExhZA5wz.js

@@ -0,0 +1,215 @@
+import { t as e } from "./PBtn-B_JOD69N.js";
+import { createBlock as t, createCommentVNode as n, createElementVNode as r, createVNode as i, defineComponent as a, openBlock as o, resolveDirective as s, toDisplayString as c, unref as l, withCtx as u, withDirectives as d } from "vue";
+import { Dialog as f, QCard as p, QCardSection as m, QDialog as h, QSpinnerHourglass as g, useDialogPluginComponent as _ } from "quasar";
+//#region src/core/types.ts
+var v = /* @__PURE__ */ function(e) {
+	return e.Approved = "approved", e.Declined = "declined", e.Cancelled = "cancelled", e.Failed = "failed", e.Timeout = "timeout", e;
+}({});
+function y(e) {
+	return {
+		transactionId: null,
+		amount: null,
+		tipAmount: null,
+		surchargeAmount: null,
+		maskedCard: null,
+		cardScheme: null,
+		receipts: {},
+		raw: null,
+		...e,
+		success: e.status === "approved"
+	};
+}
+//#endregion
+//#region src/components/PairDialog.vue?vue&type=script&setup=true&lang.ts
+var b = { class: "text-lg font-semibold text-gray-500 text-center uppercase" }, x = { class: "!mt-2 text-base text-gray-800 dark:text-gray-300 text-center" }, S = { class: "!mt-2 text-base text-gray-800 dark:text-gray-300 text-center" }, C = /* @__PURE__ */ a({
+	__name: "PairDialog",
+	props: {
+		message: {},
+		title: {},
+		cancelPairing: { type: Function }
+	},
+	emits: [..._.emits],
+	setup(a) {
+		let { dialogRef: f, onDialogHide: v } = _();
+		return (_, y) => {
+			let C = s("close-popup");
+			return o(), t(l(h), {
+				ref_key: "dialogRef",
+				ref: f,
+				onHide: l(v),
+				persistent: ""
+			}, {
+				default: u(() => [i(l(p), { class: "q-dialog-plugin px-6 py-3" }, {
+					default: u(() => [a.title === "INPROGRESS" ? (o(), t(l(m), {
+						key: 0,
+						class: "text-center"
+					}, {
+						default: u(() => [
+							i(l(g), {
+								color: "amber",
+								size: "3rem",
+								class: "!mb-4"
+							}),
+							r("div", b, c(a.message), 1),
+							i(e, {
+								label: "Cancel",
+								onClick: a.cancelPairing,
+								color: "primary",
+								outline: "",
+								class: "!mt-6 !w-full"
+							}, null, 8, ["onClick"])
+						]),
+						_: 1
+					})) : a.title === "SUCCESS" ? (o(), t(l(m), { key: 1 }, {
+						default: u(() => [
+							y[0] ||= r("div", { class: "text-lg font-semibold text-green-500 text-center uppercase" }, "Success!", -1),
+							r("div", x, c(a.message), 1),
+							d(i(e, {
+								label: "OK",
+								color: "primary",
+								outline: "",
+								class: "!mt-6 !w-full"
+							}, null, 512), [[C]])
+						]),
+						_: 1
+					})) : a.title === "FAILED" ? (o(), t(l(m), { key: 2 }, {
+						default: u(() => [
+							y[1] ||= r("div", { class: "text-lg font-semibold text-red-500 text-center uppercase" }, "Failed!", -1),
+							r("div", S, c(a.message), 1),
+							d(i(e, {
+								label: "OK",
+								color: "primary",
+								outline: "",
+								class: "!mt-6 !w-full"
+							}, null, 512), [[C]])
+						]),
+						_: 1
+					})) : n("", !0)]),
+					_: 1
+				})]),
+				_: 1
+			}, 8, ["onHide"]);
+		};
+	}
+}), w = { class: "text-lg font-semibold text-gray-500 text-center uppercase" }, T = { class: "text-lg font-semibold text-gray-500 text-center uppercase" }, E = { class: "text-lg font-semibold text-gray-500 text-center uppercase" }, D = /* @__PURE__ */ a({
+	__name: "TransactionDialog",
+	props: {
+		message: {},
+		title: {},
+		cancelTxn: { type: Function }
+	},
+	emits: [..._.emits],
+	setup(a) {
+		let { dialogRef: f, onDialogHide: g } = _();
+		return (_, v) => {
+			let y = s("close-popup");
+			return o(), t(l(h), {
+				ref_key: "dialogRef",
+				ref: f,
+				onHide: l(g),
+				persistent: ""
+			}, {
+				default: u(() => [i(l(p), { class: "q-dialog-plugin px-6 py-3" }, {
+					default: u(() => [a.title === "INPROGRESS" ? (o(), t(l(m), { key: 0 }, {
+						default: u(() => [r("div", w, c(a.message), 1), i(e, {
+							label: "Cancel",
+							onClick: a.cancelTxn,
+							color: "primary",
+							outline: "",
+							class: "!mt-6 !w-full"
+						}, null, 8, ["onClick"])]),
+						_: 1
+					})) : a.title === "SUCCESS" ? (o(), t(l(m), { key: 1 }, {
+						default: u(() => [r("div", T, c(a.message), 1), d(i(e, {
+							label: "OK",
+							color: "primary",
+							outline: "",
+							class: "!mt-6 !w-full"
+						}, null, 512), [[y]])]),
+						_: 1
+					})) : a.title === "FAILED" ? (o(), t(l(m), { key: 2 }, {
+						default: u(() => [r("div", E, c(a.message), 1), d(i(e, {
+							label: "OK",
+							color: "primary",
+							outline: "",
+							class: "!mt-6 !w-full"
+						}, null, 512), [[y]])]),
+						_: 1
+					})) : n("", !0)]),
+					_: 1
+				})]),
+				_: 1
+			}, 8, ["onHide"]);
+		};
+	}
+});
+//#endregion
+//#region src/core/dialog.ts
+function O(e) {
+	let t = e.successHideDelay ?? 1e3, n = f.create({
+		component: D,
+		componentProps: {
+			title: "INPROGRESS",
+			message: e.message,
+			cancelTxn: () => e.onCancel?.()
+		}
+	}), r = (e) => n.update({
+		title: "INPROGRESS",
+		message: e
+	}), i = (e = "Transaction Accepted!") => {
+		n.update({
+			title: "SUCCESS",
+			message: e
+		}), setTimeout(() => n.hide(), t);
+	}, a = (e = "Transaction Failed!") => n.update({
+		title: "FAILED",
+		message: e
+	});
+	return {
+		progress: r,
+		success: i,
+		failed: a,
+		settle: (e, t) => {
+			e === v.Approved ? i(t) : a(t);
+		},
+		hide: () => n.hide(),
+		hideAfter: (e = t) => {
+			setTimeout(() => n.hide(), e);
+		}
+	};
+}
+function k(e = {}) {
+	let { message: t = "Pairing in progress...", onCancel: n, successHideDelay: r = 3e3 } = typeof e == "string" ? { message: e } : e, i = f.create({
+		component: C,
+		componentProps: {
+			title: "INPROGRESS",
+			message: t,
+			cancelPairing: () => n?.()
+		}
+	}), a = (e) => i.update({
+		title: "INPROGRESS",
+		message: e
+	}), o = (e = r) => {
+		setTimeout(() => i.hide(), e);
+	}, s = (e = "Paired successfully!") => {
+		i.update({
+			title: "SUCCESS",
+			message: e
+		}), o();
+	}, c = (e = "Pairing failed!") => i.update({
+		title: "FAILED",
+		message: e
+	});
+	return {
+		progress: a,
+		success: s,
+		failed: c,
+		settle: (e, t) => {
+			e === "inProgress" ? a(t ?? "") : e === "success" ? s(t) : c(t);
+		},
+		hide: () => i.hide(),
+		hideAfter: o
+	};
+}
+//#endregion
+export { y as i, O as n, v as r, k as t };