@achyutlabsau/vue-payment-gateway 0.2.0 → 0.2.2

package/README.md

@@ -1,141 +1,141 @@
-# Vue Payment Gateway
-
-A Vue.js payment gateway library to handle payments with ease.
-
-## Installation
-
-To install the library, run the following command:
-
-```bash
-npm install @achyutlabsau/vue-payment-gateway
-```
-
-## Plugin Initialization
-
-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:
-
-```javascript
-import VuePaymentGateway from "@achyutlabsau/vue-payment-gateway";
-
-app.use(VuePaymentGateway, {
-  productName: "Pratham Respos", // Name of your product
-  productVersion: "3.3.0", // Version of your product
-  productVendorName: "Achyutlabs", // Name of the product vendor
-  posId: "unique-pos-id", // Unique identifier for the POS system
-  posRegisterId: "pos-register-id", // Unique identifier for the POS register
-  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
-  environment: "development", // Set environment to 'development' or 'production'
-});
-```
-
-> **Note:** Replace the placeholder values with the actual details of your POS system, product, and Tyro API key.
-
-## 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.
-
-### Using Tyro
-
-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
-import { useSmartPay } from "@achyutlabsau/vue-payment-gateway/smartpay";
-
-const smartPay = useSmartPay();
-
-// Example usage
-await smartPay.processPayment(amount, options);
-```
-
-### Using Linkly
-
-To use the Linkly payment gateway, import and initialize it as shown below:
-
-```javascript
-import { useLinkly } from "@achyutlabsau/vue-payment-gateway/linkly";
-
-const linkly = useLinkly();
-
-// Example usage
-await linkly.processPayment(amount, options);
-```
-
-## Payment Method API
-
-Each payment provider (Tyro, SmartPay, Linkly) provides methods to process payments. Here are some of the most commonly used methods:
-
-### `processPayment(amount: number, options?: object)`
-
-Processes a payment for the specified amount.
-
-**Parameters:**
-
-- `amount`: The amount to be charged.
-- `options`: (Optional) Additional options for the payment.
-
-### `cancelPayment()`
-
-Cancels an ongoing payment.
-
-### `getStatus()`
-
-Gets the status of the current payment transaction.
-
-> **Note:** The methods may differ slightly between Tyro, SmartPay, and Linkly. Refer to the official documentation of each payment provider for more details.
-
-## Environment Configuration
-
-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.
-
-```javascript
-app.use(VuePaymentGateway, {
-  ...
-  environment: "production", // Set to 'production' in a live environment
-});
-```
-
-## Example Usage
-
-Here’s a complete example of how you might use the payment gateway to process a payment with Tyro:
-
-```javascript
-import { useTyro } from "@achyutlabsau/vue-payment-gateway/tyro";
-
-const tyro = useTyro();
-
-async function handlePayment() {
-  try {
-    const paymentResult = await tyro.processPayment(100, { currency: "USD" });
-    console.log("Payment successful:", paymentResult);
-  } catch (error) {
-    console.error("Payment failed:", error);
-  }
-}
-```
-
-## 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.
-
-## 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.
+# Vue Payment Gateway
+
+A Vue.js payment gateway library to handle payments with ease.
+
+## Installation
+
+To install the library, run the following command:
+
+```bash
+npm install @achyutlabsau/vue-payment-gateway
+```
+
+## Plugin Initialization
+
+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:
+
+```javascript
+import VuePaymentGateway from "@achyutlabsau/vue-payment-gateway";
+
+app.use(VuePaymentGateway, {
+  productName: "Pratham Respos", // Name of your product
+  productVersion: "3.3.0", // Version of your product
+  productVendorName: "Achyutlabs", // Name of the product vendor
+  posId: "unique-pos-id", // Unique identifier for the POS system
+  posRegisterId: "pos-register-id", // Unique identifier for the POS register
+  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
+  environment: "development", // Set environment to 'development' or 'production'
+});
+```
+
+> **Note:** Replace the placeholder values with the actual details of your POS system, product, and Tyro API key.
+
+## 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.
+
+### Using Tyro
+
+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
+import { useSmartPay } from "@achyutlabsau/vue-payment-gateway/smartpay";
+
+const smartPay = useSmartPay();
+
+// Example usage
+await smartPay.processPayment(amount, options);
+```
+
+### Using Linkly
+
+To use the Linkly payment gateway, import and initialize it as shown below:
+
+```javascript
+import { useLinkly } from "@achyutlabsau/vue-payment-gateway/linkly";
+
+const linkly = useLinkly();
+
+// Example usage
+await linkly.processPayment(amount, options);
+```
+
+## Payment Method API
+
+Each payment provider (Tyro, SmartPay, Linkly) provides methods to process payments. Here are some of the most commonly used methods:
+
+### `processPayment(amount: number, options?: object)`
+
+Processes a payment for the specified amount.
+
+**Parameters:**
+
+- `amount`: The amount to be charged.
+- `options`: (Optional) Additional options for the payment.
+
+### `cancelPayment()`
+
+Cancels an ongoing payment.
+
+### `getStatus()`
+
+Gets the status of the current payment transaction.
+
+> **Note:** The methods may differ slightly between Tyro, SmartPay, and Linkly. Refer to the official documentation of each payment provider for more details.
+
+## Environment Configuration
+
+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.
+
+```javascript
+app.use(VuePaymentGateway, {
+  ...
+  environment: "production", // Set to 'production' in a live environment
+});
+```
+
+## Example Usage
+
+Here’s a complete example of how you might use the payment gateway to process a payment with Tyro:
+
+```javascript
+import { useTyro } from "@achyutlabsau/vue-payment-gateway/tyro";
+
+const tyro = useTyro();
+
+async function handlePayment() {
+  try {
+    const paymentResult = await tyro.processPayment(100, { currency: "USD" });
+    console.log("Payment successful:", paymentResult);
+  } catch (error) {
+    console.error("Payment failed:", error);
+  }
+}
+```
+
+## 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.
+
+## 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.

package/dist/mx51.d.ts

@@ -4,7 +4,85 @@ import { DefineComponent } from 'vue';
 import { PublicProps } from 'vue';
 import { Spi } from '@mx51/spi-client-js';
 
-export declare const PairMX51: DefineComponent<    {}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
+/**
+ * Attempts to cancel a transaction
+ * Be subscribed to TxFlowStateChanged event to see how it goes
+ * Wait for the transaction to be finished and then see whether cancellation was successful or not
+ *
+ **/
+export declare function cancelTransaction(): void;
+
+/**
+ * Initiates a Get Transaction request
+ * Use this when you want to retrieve from one of the last 10 transactions that was processed by the Eftpos
+ * Be subscribed to TxFlowStateChanged event to get updates on the process
+ *
+ * @param posRefId - The unique identifier of the transaction you want to get
+ **/
+export declare function getTransaction(posRefId?: string): void;
+
+export declare function log(message: string, event?: any): void;
+
+export declare const PairMX51: DefineComponent<    {}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, HTMLDivElement>;
+
+/**
+ * Initiates a purchase transaction
+ * Be subscribed to TxFlowStateChanged event to get updates on the process
+ * Tip and cashout are not allowed simultaneously
+ **/
+export declare function purchase({ purchaseAmount, tipAmount, cashoutAmount, promptForCashout, surchargeAmount, }: PurchaseOptions): void;
+
+declare interface PurchaseOptions {
+    /**
+     * The Purchase amount in cents
+     */
+    purchaseAmount: number;
+    /**
+     *  The Tip amount in cents
+     */
+    tipAmount: number;
+    /**
+     *  The Cashout amount in cents
+     */
+    cashoutAmount: number;
+    /**
+     * Whether to prompt your customer for cashout on the Eftpos
+     */
+    promptForCashout: boolean;
+    /**
+     * The Surcharge amount in cents
+     */
+    surchargeAmount: number;
+}
+
+/**
+ * Initiates a refund transaction
+ * Be subscribed to TxFlowStateChanged event to get updates on the process
+ *
+ * @param posRefId - A unique identifier for your Refund
+ * @param amountCents - The amount in cents
+ * @param options - Set custom Header and Footer text for the Receipt
+ **/
+export declare function refund({ refundAmount }: {
+    refundAmount: number;
+}): void;
+
+/**
+ * Initiates a Settlement transaction
+ * Be subscribed to TxFlowStateChanged event to get updates on the process
+ *
+ * @param posRefId - A unique identifier for your Settlement
+ * @param options - Set custom Header and Footer text for the Receipt
+ **/
+export declare function settlement(): void;
+
+/**
+ * Initiates a Settlement Enquiry transaction
+ *
+ * @param posRefId - A unique identifier for your Settlement Enquiry
+ * @param options - Set custom Header and Footer text for the Receipt
+ **/
+export declare function settlementEnquiry(): void;
 
 /**
  * Instantiate the SPI library as an instance object
@@ -16,6 +94,10 @@ export declare const PairMX51: DefineComponent<    {}, {}, {}, {}, {}, Component
  **/
 export declare const spi: Spi;
 
+export declare const TransactionDialog: DefineComponent<    {}, {
+showDialog: (amount: number) => void;
+}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
+
 export { }
 
 

package/dist/mx51.js

@@ -1,5 +1,8 @@
-import { Spi, TransactionOptions, SuccessState, TransactionType } from "@mx51/spi-client-js";
-import { defineComponent, ref, computed, onMounted, resolveComponent, resolveDirective, openBlock, createElementBlock, Fragment, createVNode, withCtx, createElementVNode, createCommentVNode, createBlock, toDisplayString, unref, withDirectives } from "vue";
+import { Spi, TransactionOptions, SuccessState, TransactionType, SpiStatus } from "@mx51/spi-client-js";
+import { defineComponent, ref, computed, onMounted, resolveDirective, openBlock, createElementBlock, createVNode, unref, withCtx, createElementVNode, createCommentVNode, createBlock, toDisplayString, withDirectives } from "vue";
+import { QForm, QSelect, QInput, QCheckbox, QIcon, QBtn, QDialog, QCard, QCardSection, Dialog } from "quasar";
+import { useEventListener } from "@vueuse/core";
+import { v4 } from "uuid";
 const spiSettings = {
   posVendorId: "Pratham Respos",
   // your POS company name/id
@@ -17,12 +20,18 @@ const spiSettings = {
   signatureFlowOnEftpos: false
   // signature flow and receipts on terminal instead of POS
 };
-const getTenants = () => {
-  return Spi.GetAvailableTenants(
-    spiSettings.posVendorId,
-    spiSettings.deviceApiKey,
-    spiSettings.countryCode
-  );
+const getTenants = async () => {
+  try {
+    const res = await Spi.GetAvailableTenants(
+      spiSettings.posVendorId,
+      spiSettings.deviceApiKey,
+      spiSettings.countryCode
+    );
+    return res.Data;
+  } catch (error) {
+    console.warn(error);
+    return [];
+  }
 };
 const getPairingData = () => {
   try {
@@ -47,14 +56,11 @@ const spi = new Spi(
   getSecrets()
 );
 spi.SetTenantCode(pairingData.tenantCode ?? "gko");
-spi.SetPosInfo(spiSettings.posVendorId, spiSettings.posVersion);
-spi.SetDeviceApiKey(spiSettings.deviceApiKey);
 spi.SetSecureWebSockets(spiSettings.secureWebSockets);
 spi.Config.PrintMerchantCopy = spiSettings.printMerchantCopyOnEftpos;
 spi.Config.PromptForCustomerCopyOnEftpos = spiSettings.promptForCustomerCopyOnEftpos;
 spi.Config.SignatureFlowOnEftpos = spiSettings.signatureFlowOnEftpos;
-new TransactionOptions();
-spi.Start();
+const receiptOptions = new TransactionOptions();
 function log(message, event) {
   if (event) {
     spi._log.info(`${message} -> `, event);
@@ -148,33 +154,36 @@ function cancelPairing() {
   log("Pairing cancelled");
   spi.PairingCancel();
 }
-const _hoisted_1 = { class: "rounded bg-gray-100 p-3" };
-const _hoisted_2 = {
+const _hoisted_1$1 = { class: "my-6 w-full max-w-lg rounded-md bg-white p-6 shadow-md" };
+const _hoisted_2$1 = { class: "rounded bg-gray-100 p-3" };
+const _hoisted_3$1 = {
   key: 0,
   class: "flex items-center gap-1 font-semibold"
 };
-const _hoisted_3 = {
+const _hoisted_4$1 = {
   key: 1,
   class: "flex items-center gap-1 font-semibold"
 };
-const _hoisted_4 = {
+const _hoisted_5$1 = {
   key: 2,
   class: "flex items-center gap-1 font-semibold"
 };
-const _hoisted_5 = { class: "text-center font-semibold text-gray-500 uppercase" };
-const _hoisted_6 = { class: "py-3 text-center text-2xl font-semibold text-slate-700 uppercase" };
-const _hoisted_7 = { class: "text-center font-semibold text-gray-500 uppercase" };
-const _sfc_main = /* @__PURE__ */ defineComponent({
+const _hoisted_6 = { class: "text-center font-semibold text-gray-500 uppercase" };
+const _hoisted_7 = { class: "py-3 text-center text-2xl font-semibold text-slate-700 uppercase" };
+const _hoisted_8 = { class: "text-center font-semibold text-gray-500 uppercase" };
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   __name: "PairMX51",
   setup(__props) {
     const tenants = ref([]);
     const model = ref(false);
     const pairStatus = ref(spi._currentStatus);
-    const isPaired = computed(
-      () => ["PairedConnected", "PairedConnecting"].includes(pairStatus.value)
-    );
+    const isPaired = computed(() => {
+      return [SpiStatus.PairedConnected, SpiStatus.PairedConnecting].includes(
+        pairStatus.value
+      );
+    });
     const pairForm = ref({
-      posId: "TA",
+      posId: "",
       serialNumber: "",
       tenantCode: "",
       eftposAddress: "",
@@ -187,10 +196,26 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       message: "Connecting to eftpos",
       confirmationCode: ""
     });
-    document.addEventListener("StatusChanged", (e) => {
+    const onPairTerminal = () => {
+      pair(pairForm.value);
+    };
+    const onUnpairTerminal = () => {
+      unpair();
+      Dialog.create({
+        title: "Successfully Unpaired!",
+        message: "Unpair the terminal from the device menu if it remains paired."
+      });
+    };
+    onMounted(async () => {
+      const res = await getTenants();
+      if (res) {
+        tenants.value = res;
+      }
+    });
+    useEventListener(document, "StatusChanged", (e) => {
       pairStatus.value = e.detail;
     });
-    document.addEventListener("PairingFlowStateChanged", (e) => {
+    useEventListener(document, "PairingFlowStateChanged", (e) => {
       var _a, _b, _c, _d, _e, _f, _g;
       model.value = true;
       pairInfo.value.message = (_a = e == null ? void 0 : e.detail) == null ? void 0 : _a.Message;
@@ -208,37 +233,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         return;
       }
     });
-    const onPairTerminal = () => {
-      pair(pairForm.value);
-    };
-    const onUnpairTerminal = () => {
-      unpair();
-    };
-    onMounted(async () => {
-      const res = await getTenants();
-      if (res.Data) {
-        tenants.value = res.Data;
-      }
-    });
     return (_ctx, _cache) => {
-      const _component_QSelect = resolveComponent("QSelect");
-      const _component_QInput = resolveComponent("QInput");
-      const _component_QCheckbox = resolveComponent("QCheckbox");
-      const _component_q_icon = resolveComponent("q-icon");
-      const _component_q_btn = resolveComponent("q-btn");
-      const _component_QForm = resolveComponent("QForm");
-      const _component_q_card_section = resolveComponent("q-card-section");
-      const _component_q_card = resolveComponent("q-card");
-      const _component_QDialog = resolveComponent("QDialog");
       const _directive_close_popup = resolveDirective("close-popup");
-      return openBlock(), createElementBlock(Fragment, null, [
-        createVNode(_component_QForm, {
+      return openBlock(), createElementBlock("div", _hoisted_1$1, [
+        createVNode(unref(QForm), {
           onSubmit: onPairTerminal,
-          class: "my-6 w-full max-w-lg space-y-4 rounded-md bg-white p-6 shadow-md"
+          class: "space-y-4"
         }, {
           default: withCtx(() => [
-            _cache[10] || (_cache[10] = createElementVNode("div", { class: "font-sans text-lg font-semibold text-gray-600" }, " Mx 51 Terminal Pairing ", -1)),
-            createVNode(_component_QSelect, {
+            _cache[11] || (_cache[11] = createElementVNode("div", { class: "font-sans text-lg font-semibold text-gray-600" }, " Mx 51 Terminal Pairing ", -1)),
+            createVNode(unref(QSelect), {
               disable: isPaired.value,
               dense: "",
               class: "my-6",
@@ -254,68 +258,77 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               rules: [(v) => !!v || "Please select tenant"],
               hint: "Choose the Tenant"
             }, null, 8, ["disable", "modelValue", "options", "rules"]),
-            createVNode(_component_QInput, {
+            createVNode(unref(QInput), {
+              disable: isPaired.value,
+              dense: "",
+              outlined: "",
+              modelValue: pairForm.value.posId,
+              "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => pairForm.value.posId = $event),
+              label: "POS ID",
+              rules: [(v) => !!v || "POS ID is required"]
+            }, null, 8, ["disable", "modelValue", "rules"]),
+            createVNode(unref(QInput), {
               disable: isPaired.value,
               dense: "",
               outlined: "",
               modelValue: pairForm.value.serialNumber,
-              "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => pairForm.value.serialNumber = $event),
+              "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => pairForm.value.serialNumber = $event),
               label: "Serial Number",
               rules: [(v) => !!v || "Serial Number is required"],
-              hint: "Enter the Serial Number associated with the merchant"
+              hint: "Enter the Serial Number associated with the terminal"
             }, null, 8, ["disable", "modelValue", "rules"]),
-            createVNode(_component_QInput, {
+            createVNode(unref(QInput), {
               disable: isPaired.value,
               dense: "",
               outlined: "",
               modelValue: pairForm.value.eftposAddress,
-              "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => pairForm.value.eftposAddress = $event),
+              "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => pairForm.value.eftposAddress = $event),
               label: "Eftpos Address",
               rules: [(v) => !!v || "Eftpos Address is required"],
               hint: "Enter the Eftpos Address associated with the merchant"
             }, null, 8, ["disable", "modelValue", "rules"]),
             createElementVNode("div", null, [
-              createVNode(_component_QCheckbox, {
+              createVNode(unref(QCheckbox), {
                 label: "Test Mode",
                 modelValue: pairForm.value.testMode,
-                "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => pairForm.value.testMode = $event),
+                "onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => pairForm.value.testMode = $event),
                 disable: isPaired.value,
                 dense: ""
               }, null, 8, ["modelValue", "disable"])
             ]),
-            createVNode(_component_QCheckbox, {
+            createVNode(unref(QCheckbox), {
               disable: isPaired.value,
               dense: "",
               label: "Auto Address Mode",
               modelValue: pairForm.value.autoAddressResolution,
-              "onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => pairForm.value.autoAddressResolution = $event)
+              "onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => pairForm.value.autoAddressResolution = $event)
             }, null, 8, ["disable", "modelValue"]),
-            createElementVNode("div", _hoisted_1, [
-              _cache[9] || (_cache[9] = createElementVNode("div", { class: "text-sm font-medium text-gray-500" }, "Pairing Status", -1)),
-              pairStatus.value === "PairedConnected" ? (openBlock(), createElementBlock("div", _hoisted_2, [
-                createVNode(_component_q_icon, {
+            createElementVNode("div", _hoisted_2$1, [
+              _cache[10] || (_cache[10] = createElementVNode("div", { class: "text-sm font-medium text-gray-500" }, "Pairing Status", -1)),
+              pairStatus.value === unref(SpiStatus).PairedConnected ? (openBlock(), createElementBlock("div", _hoisted_3$1, [
+                createVNode(unref(QIcon), {
                   name: "check_circle",
                   size: "xs",
                   color: "green"
                 }),
-                _cache[6] || (_cache[6] = createElementVNode("div", null, "Paired and Connected", -1))
-              ])) : pairStatus.value === "Unpaired" ? (openBlock(), createElementBlock("div", _hoisted_3, [
-                createVNode(_component_q_icon, {
+                _cache[7] || (_cache[7] = createElementVNode("div", null, "Paired and Connected", -1))
+              ])) : pairStatus.value === unref(SpiStatus).Unpaired ? (openBlock(), createElementBlock("div", _hoisted_4$1, [
+                createVNode(unref(QIcon), {
                   name: "cancel",
                   size: "xs",
                   color: "red"
                 }),
-                _cache[7] || (_cache[7] = createElementVNode("div", null, "Unpaired", -1))
-              ])) : pairStatus.value === "PairedConnecting" ? (openBlock(), createElementBlock("div", _hoisted_4, [
-                createVNode(_component_q_icon, {
+                _cache[8] || (_cache[8] = createElementVNode("div", null, "Unpaired", -1))
+              ])) : pairStatus.value === unref(SpiStatus).PairedConnecting ? (openBlock(), createElementBlock("div", _hoisted_5$1, [
+                createVNode(unref(QIcon), {
                   name: "check_circle",
                   size: "xs",
                   color: "yellow-8"
                 }),
-                _cache[8] || (_cache[8] = createElementVNode("div", null, "Paired and trying to connect", -1))
+                _cache[9] || (_cache[9] = createElementVNode("div", null, "Paired and trying to connect", -1))
               ])) : createCommentVNode("", true)
             ]),
-            !isPaired.value ? (openBlock(), createBlock(_component_q_btn, {
+            !isPaired.value ? (openBlock(), createBlock(unref(QBtn), {
               key: 0,
               label: "Pair Terminal",
               type: "submit",
@@ -324,7 +337,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               unelevated: "",
               "no-caps": "",
               ripple: false
-            })) : (openBlock(), createBlock(_component_q_btn, {
+            })) : (openBlock(), createBlock(unref(QBtn), {
               key: 1,
               label: "Unpair",
               type: "button",
@@ -339,18 +352,18 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           ]),
           _: 1
         }),
-        createVNode(_component_QDialog, {
+        createVNode(unref(QDialog), {
           modelValue: model.value,
-          "onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => model.value = $event),
+          "onUpdate:modelValue": _cache[6] || (_cache[6] = ($event) => model.value = $event),
           persistent: ""
         }, {
           default: withCtx(() => [
-            createVNode(_component_q_card, { class: "w-full p-3" }, {
+            createVNode(unref(QCard), { class: "w-full p-3" }, {
               default: withCtx(() => [
-                pairInfo.value.state === "INPROGRESS" ? (openBlock(), createBlock(_component_q_card_section, { key: 0 }, {
+                pairInfo.value.state === "INPROGRESS" ? (openBlock(), createBlock(unref(QCardSection), { key: 0 }, {
                   default: withCtx(() => [
-                    createElementVNode("div", _hoisted_5, toDisplayString(pairInfo.value.message), 1),
-                    createVNode(_component_q_btn, {
+                    createElementVNode("div", _hoisted_6, toDisplayString(pairInfo.value.message), 1),
+                    createVNode(unref(QBtn), {
                       label: "Cancel",
                       onClick: unref(cancelPairing),
                       color: "primary",
@@ -362,17 +375,17 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     }, null, 8, ["onClick"])
                   ]),
                   _: 1
-                })) : pairInfo.value.state === "CONFIRMATION" ? (openBlock(), createBlock(_component_q_card_section, { key: 1 }, {
+                })) : pairInfo.value.state === "CONFIRMATION" ? (openBlock(), createBlock(unref(QCardSection), { key: 1 }, {
                   default: withCtx(() => [
-                    _cache[11] || (_cache[11] = createElementVNode("div", { class: "text-center font-semibold text-gray-500 uppercase" }, " Confirm your pairing code ", -1)),
-                    createElementVNode("div", _hoisted_6, toDisplayString(pairInfo.value.confirmationCode), 1),
-                    _cache[12] || (_cache[12] = createElementVNode("div", { class: "text-center text-sm text-gray-500" }, " Confirm the matching pairing code on the terminal ", -1))
+                    _cache[12] || (_cache[12] = createElementVNode("div", { class: "text-center font-semibold text-gray-500 uppercase" }, " Confirm your pairing code ", -1)),
+                    createElementVNode("div", _hoisted_7, toDisplayString(pairInfo.value.confirmationCode), 1),
+                    _cache[13] || (_cache[13] = createElementVNode("div", { class: "text-center text-sm text-gray-500" }, " Confirm the matching pairing code on the terminal ", -1))
                   ]),
                   _: 1
-                })) : pairInfo.value.state === "FINISHED" ? (openBlock(), createBlock(_component_q_card_section, { key: 2 }, {
+                })) : pairInfo.value.state === "FINISHED" ? (openBlock(), createBlock(unref(QCardSection), { key: 2 }, {
                   default: withCtx(() => [
-                    createElementVNode("div", _hoisted_7, toDisplayString(pairInfo.value.message), 1),
-                    withDirectives(createVNode(_component_q_btn, {
+                    createElementVNode("div", _hoisted_8, toDisplayString(pairInfo.value.message), 1),
+                    withDirectives(createVNode(unref(QBtn), {
                       label: "OK",
                       color: "primary",
                       outline: "",
@@ -392,11 +405,239 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           ]),
           _: 1
         }, 8, ["modelValue"])
-      ], 64);
+      ]);
+    };
+  }
+});
+function posRefIdGenerator(type) {
+  return (/* @__PURE__ */ new Date()).toISOString() + "-" + type + v4();
+}
+function purchase({
+  purchaseAmount,
+  tipAmount,
+  cashoutAmount,
+  promptForCashout,
+  surchargeAmount
+}) {
+  spi.AckFlowEndedAndBackToIdle();
+  spi.InitiatePurchaseTxV2(
+    posRefIdGenerator("purchase"),
+    // posRefId
+    purchaseAmount,
+    tipAmount,
+    cashoutAmount,
+    promptForCashout,
+    receiptOptions,
+    // options
+    surchargeAmount
+  );
+}
+function refund({ refundAmount }) {
+  spi.AckFlowEndedAndBackToIdle();
+  spi.InitiateRefundTx(
+    posRefIdGenerator("refund"),
+    // posRefId
+    refundAmount,
+    // amountCents
+    false,
+    receiptOptions
+    // options
+  );
+}
+function getTransaction(posRefId) {
+  if (!posRefId) {
+    spi.InitiateGetLastTx();
+  } else {
+    spi.InitiateGetTx(posRefId);
+  }
+}
+function cancelTransaction() {
+  spi.CancelTransaction();
+}
+function settlement() {
+  spi.AckFlowEndedAndBackToIdle();
+  spi.InitiateSettleTx(posRefIdGenerator("settlement"), receiptOptions);
+}
+function settlementEnquiry() {
+  spi.AckFlowEndedAndBackToIdle();
+  spi.InitiateSettlementEnquiry(
+    posRefIdGenerator("settlementEnquiry"),
+    receiptOptions
+  );
+}
+function overrideTransaction(isSuccess) {
+  if (isSuccess) {
+    spi.AckFlowEndedAndBackToIdle();
+  } else {
+    spi.AckFlowEndedAndBackToIdle();
+  }
+}
+const _hoisted_1 = { class: "text-center font-semibold text-gray-500 uppercase" };
+const _hoisted_2 = { class: "text-center font-semibold text-gray-500" };
+const _hoisted_3 = { class: "text-center font-semibold text-gray-500" };
+const _hoisted_4 = { class: "grid grid-cols-2 gap-3" };
+const _hoisted_5 = { class: "text-center font-semibold text-gray-500" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "TransactionDialog",
+  setup(__props, { expose: __expose }) {
+    const pairInfo = ref({
+      state: "INPROGRESS",
+      message: "Processing"
+    });
+    const model = ref(false);
+    const transactionAmount = ref(0);
+    document.addEventListener("TxFlowStateChanged", (e) => {
+      model.value = true;
+      if (e.detail.AttemptingToCancel) {
+        pairInfo.value.state = "AWAITING_CANCELLATION";
+        pairInfo.value.message = "Please wait";
+      }
+      if (e.detail.AwaitingSignatureCheck) ;
+      else if (e.detail.AwaitingPhoneForAuth) ;
+      else if (e.detail.Finished) {
+        switch (e.detail.Success) {
+          case SuccessState.Success:
+            pairInfo.value.state = "SUCCESS";
+            switch (e.detail.Type) {
+              case TransactionType.Purchase:
+                break;
+              case TransactionType.Refund:
+                break;
+            }
+            break;
+          case SuccessState.Failed:
+            const ResponseData = e.detail.Response.Data;
+            pairInfo.value.message = ResponseData.error_detail ?? "Failed";
+            pairInfo.value.state = "FAILED";
+            break;
+          case SuccessState.Unknown:
+            pairInfo.value.state = "MANUAL_RECOVERY";
+            break;
+        }
+      }
+    });
+    spi.TransactionUpdateMessage = (e) => {
+      pairInfo.value.message = e.Data.display_message_text;
+    };
+    const showDialog = (amount) => {
+      transactionAmount.value = amount;
+      pairInfo.value.state = "INPROGRESS";
+      pairInfo.value.message = "Processing";
+      model.value = true;
+    };
+    __expose({ showDialog });
+    return (_ctx, _cache) => {
+      const _directive_close_popup = resolveDirective("close-popup");
+      return openBlock(), createBlock(unref(QDialog), {
+        modelValue: model.value,
+        "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => model.value = $event),
+        persistent: ""
+      }, {
+        default: withCtx(() => [
+          createVNode(unref(QCard), { class: "w-96 p-3" }, {
+            default: withCtx(() => [
+              pairInfo.value.state === "INPROGRESS" ? (openBlock(), createBlock(unref(QCardSection), { key: 0 }, {
+                default: withCtx(() => [
+                  createElementVNode("div", _hoisted_1, " Purchase of $" + toDisplayString(transactionAmount.value) + " in progress... ", 1),
+                  createElementVNode("div", _hoisted_2, toDisplayString(pairInfo.value.message), 1),
+                  createVNode(unref(QBtn), {
+                    label: "Cancel",
+                    onClick: unref(cancelTransaction),
+                    color: "primary",
+                    outline: "",
+                    class: "!mt-6 !w-full",
+                    unelevated: "",
+                    "no-caps": "",
+                    ripple: false
+                  }, null, 8, ["onClick"])
+                ]),
+                _: 1
+              })) : pairInfo.value.state === "AWAITING_CANCELLATION" ? (openBlock(), createBlock(unref(QCardSection), { key: 1 }, {
+                default: withCtx(() => [
+                  _cache[3] || (_cache[3] = createElementVNode("div", { class: "text-center font-semibold text-gray-500 uppercase" }, " Attempting to cancel transaction ", -1)),
+                  createElementVNode("div", _hoisted_3, toDisplayString(pairInfo.value.message), 1)
+                ]),
+                _: 1
+              })) : pairInfo.value.state === "MANUAL_RECOVERY" ? (openBlock(), createBlock(unref(QCardSection), { key: 2 }, {
+                default: withCtx(() => [
+                  _cache[4] || (_cache[4] = createElementVNode("div", { class: "text-center font-semibold text-gray-500 uppercase" }, " Was the transaction successful ", -1)),
+                  _cache[5] || (_cache[5] = createElementVNode("div", { class: "text-center font-semibold text-gray-500" }, " Check the EFTPOS terminal ", -1)),
+                  createElementVNode("div", _hoisted_4, [
+                    createVNode(unref(QBtn), {
+                      label: "Yes",
+                      color: "primary",
+                      onClick: _cache[0] || (_cache[0] = ($event) => unref(overrideTransaction)(true)),
+                      outline: "",
+                      class: "!mt-6",
+                      unelevated: "",
+                      "no-caps": "",
+                      ripple: false
+                    }),
+                    createVNode(unref(QBtn), {
+                      label: "No",
+                      color: "primary",
+                      outline: "",
+                      onClick: _cache[1] || (_cache[1] = ($event) => unref(overrideTransaction)(false)),
+                      class: "!mt-6",
+                      unelevated: "",
+                      "no-caps": "",
+                      ripple: false
+                    })
+                  ])
+                ]),
+                _: 1
+              })) : pairInfo.value.state === "SUCCESS" ? (openBlock(), createBlock(unref(QCardSection), { key: 3 }, {
+                default: withCtx(() => [
+                  _cache[6] || (_cache[6] = createElementVNode("div", { class: "text-center font-semibold text-gray-500 uppercase" }, " Transaction Successful ", -1)),
+                  withDirectives(createVNode(unref(QBtn), {
+                    label: "OK",
+                    color: "primary",
+                    outline: "",
+                    class: "!mt-6 !w-full",
+                    unelevated: "",
+                    "no-caps": "",
+                    ripple: false
+                  }, null, 512), [
+                    [_directive_close_popup]
+                  ])
+                ]),
+                _: 1
+              })) : pairInfo.value.state === "FAILED" ? (openBlock(), createBlock(unref(QCardSection), { key: 4 }, {
+                default: withCtx(() => [
+                  _cache[7] || (_cache[7] = createElementVNode("div", { class: "text-center font-semibold text-gray-500 uppercase" }, " Transaction Failed ", -1)),
+                  createElementVNode("div", _hoisted_5, toDisplayString(pairInfo.value.message), 1),
+                  withDirectives(createVNode(unref(QBtn), {
+                    label: "OK",
+                    color: "primary",
+                    outline: "",
+                    class: "!mt-6 !w-full",
+                    unelevated: "",
+                    "no-caps": "",
+                    ripple: false
+                  }, null, 512), [
+                    [_directive_close_popup]
+                  ])
+                ]),
+                _: 1
+              })) : createCommentVNode("", true)
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      }, 8, ["modelValue"]);
     };
   }
 });
 export {
-  _sfc_main as PairMX51,
+  _sfc_main$1 as PairMX51,
+  _sfc_main as TransactionDialog,
+  cancelTransaction,
+  getTransaction,
+  log,
+  purchase,
+  refund,
+  settlement,
+  settlementEnquiry,
   spi
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@achyutlabsau/vue-payment-gateway",
   "private": false,
-  "version": "0.2.0",
+  "version": "0.2.2",
   "type": "module",
   "repository": {
     "type": "git",