@amwaljs/magento-react-button 0.1.0

package/README.md

@@ -0,0 +1,216 @@
+# Amwal Magento React Button
+
+A React component for integrating Amwal checkout functionality with Magento. This component provides a seamless checkout experience that works in conjunction with the Amwal Magento API Backend.
+
+## Prerequisites
+
+Before using this component, ensure you have the [Amwal Magento Backend](https://docs.amwal.tech/docs/magento-installation) installed and configured.
+
+## Installation
+
+Install the React component in your project:
+
+```bash
+npm install @amwaljs/magento-react-button
+```
+
+## Basic Usage
+
+### Import the Component
+
+```javascript
+import AmwalMagentoReactButton from '@amwaljs/magento-react-button'
+```
+
+### Product Page Implementation
+
+For product pages, you'll need to handle adding items to cart before checkout:
+
+```javascript
+const ProductPage = () => {
+  const submitAddToCart = async (): Promise<void> => {
+    if (!formSelector) return
+    
+    const cartForm = document.querySelector(formSelector)
+    if (cartForm == null) throw new Error('Product form not found')
+    
+    const formURL = cartForm.getAttribute('action') ?? window.location.href
+    if (!formURL) throw new Error('Product form URL not found')
+    
+    await fetch(formURL, {
+      method: 'POST',
+      body: new FormData(cartForm as HTMLFormElement),
+      headers: {
+        'X-Requested-With': 'XMLHttpRequest'
+      }
+    })
+  }
+
+  return (
+    <AmwalMagentoReactButton
+      triggerContext="product-page"
+      locale="en"
+      preCheckoutTask={submitAddToCart}
+      extraHeaders={{
+        'x-access-token': 'your-access-token'
+      }}
+      buttonId="amwal-checkout-product"
+      redirectURL="/checkout/success"
+    />
+  )
+}
+```
+
+### Cart/Mini-Cart Implementation
+
+For cart or mini-cart pages, omit the `preCheckoutTask` since items are already in the cart:
+
+```javascript
+const CartPage = () => {
+  return (
+    <AmwalMagentoReactButton
+      triggerContext="cart-page"
+      locale="en"
+      buttonId="amwal-checkout-cart"
+      overrideCartId={cartId}
+      redirectURL="/checkout/success"
+    />
+  )
+}
+```
+
+## API Reference
+
+### Component Properties
+
+#### Required Properties
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `triggerContext` | `string` | Context where the button is instantiated. Values: `product-page`, `cart-page`, `mini-cart`, `regular-checkout`, etc. |
+| `buttonId` | `string` | Unique identifier for the button element. Required when multiple buttons exist on the same page. |
+
+#### Optional Properties
+
+##### Localization & Configuration
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| `locale` | `string` | `"en"` | The locale for rendering the button text and interface. |
+| `baseUrl` | `string` | `"/rest/V1"` | Base URL for the Magento backend API endpoints. |
+| `extraHeaders` | `Record<string, string>` | `{}` | Additional headers to include in API requests (e.g., authentication tokens). |
+| `debug` | `boolean` | `false` | Enable debug logging in the browser console. |
+
+##### Cart & Checkout Behavior
+| Property | Type | Description |
+|----------|------|-------------|
+| `overrideCartId` | `string` | Provide a specific cart ID instead of using the default session cart. |
+| `emptyCartOnCancellation` | `boolean` | Whether to empty the cart when the user cancels checkout. |
+
+##### Callback Functions
+| Property | Type | Description |
+|----------|------|-------------|
+| `preCheckoutTask` | `() => Promise<string \| undefined>` | Async function executed before checkout (e.g., add to cart). Can return a new cart ID. |
+| `onSuccessTask` | `(info: ISuccessInfo) => Promise<void>` | Async function executed after successful transaction. |
+| `onCancelTask` | `() => Promise<void>` | Async function executed when user cancels checkout. |
+
+##### Navigation & Redirects
+| Property | Type | Description |
+|----------|------|-------------|
+| `redirectURL` | `string` | URL to redirect to after successful checkout (only if `performSuccessRedirection` is not provided). |
+| `performSuccessRedirection` | `(orderId: string, incrementId: string) => void` | Custom function to handle post-checkout redirection with order details. |
+
+## Advanced Usage
+
+### Custom Success Handling
+
+```javascript
+const handleSuccess = async (info) => {
+  console.log('Order completed:', info)
+  // Custom success logic here
+}
+
+const handleCustomRedirect = (orderId, incrementId) => {
+  window.location.href = `/order/success/${incrementId}`
+}
+
+<AmwalMagentoReactButton
+  triggerContext="cart-page"
+  buttonId="amwal-checkout-advanced"
+  onSuccessTask={handleSuccess}
+  performSuccessRedirection={handleCustomRedirect}
+  debug={true}
+/>
+```
+
+### With Authentication Headers
+
+```javascript
+<AmwalMagentoReactButton
+  triggerContext="product-page"
+  buttonId="amwal-checkout-auth"
+  extraHeaders={{
+    'Authorization': 'Bearer your-jwt-token',
+    'X-Customer-ID': 'customer-id'
+  }}
+  baseUrl="/custom/api/v1"
+/>
+```
+
+## TypeScript Support
+
+This component is written in TypeScript and includes type definitions. The `ISuccessInfo` interface provides type safety for success callbacks:
+
+```typescript
+interface ISuccessInfo {
+  orderId: string
+  incrementId: string
+  // Additional success information
+}
+```
+
+## Troubleshooting
+
+### Common Issues
+
+#### Button Not Rendering
+- Ensure the Amwal Magento Backend is properly installed and configured
+- Check that the `buttonId` is unique on the page
+- Verify API endpoints are accessible from your frontend
+
+#### Checkout Not Working
+- Confirm `triggerContext` matches your implementation context
+- For product pages, ensure `preCheckoutTask` successfully adds items to cart
+- Check browser console for errors when `debug` is enabled
+
+#### Authentication Errors
+- Verify `extraHeaders` contain valid authentication tokens
+- Ensure your Magento backend accepts the provided headers
+- Check API permissions for the authenticated user
+
+### Debug Mode
+
+Enable debug mode to get detailed console logging:
+
+```javascript
+<AmwalMagentoReactButton
+  triggerContext="cart-page"
+  buttonId="amwal-checkout-debug"
+  debug={true}
+/>
+```
+
+## Browser Compatibility
+
+This component supports modern browsers with ES2017+ features:
+- Chrome 60+
+- Firefox 55+
+- Safari 10.1+
+- Edge 79+
+
+## License
+
+This component is licensed under the same terms as the Amwal Magento extension.
+
+## Support
+
+For support and documentation, visit [Amwal Documentation](https://docs.amwal.tech/) or contact the Amwal support team.

package/dist/cjs/AmwalMagentoReactButton.d.ts

@@ -0,0 +1,22 @@
+import { type ISuccessInfo } from './IAmwalButtonConfig';
+interface AmwalMagentoReactButtonProps {
+    triggerContext: string;
+    locale?: string;
+    scopeCode?: string;
+    productId?: string;
+    buttonId?: string;
+    preCheckoutTask?: () => Promise<string | undefined>;
+    onSuccessTask?: (Info: ISuccessInfo) => Promise<void>;
+    onCancelTask?: () => Promise<void>;
+    emptyCartOnCancellation?: boolean;
+    baseUrl?: string;
+    extraHeaders?: Record<string, string>;
+    overrideCartId?: string;
+    redirectURL?: string;
+    performSuccessRedirection?: (orderId: string, IncrementId: string) => void;
+    debug?: boolean;
+    applePayCheckout?: boolean;
+    paymentMethod?: string;
+}
+declare const AmwalMagentoReactButton: ({ triggerContext, locale, scopeCode, productId, buttonId, preCheckoutTask, onSuccessTask, onCancelTask, emptyCartOnCancellation, baseUrl, extraHeaders, overrideCartId, redirectURL, performSuccessRedirection, debug, applePayCheckout, paymentMethod }: AmwalMagentoReactButtonProps) => JSX.Element;
+export default AmwalMagentoReactButton;

package/dist/cjs/AmwalMagentoReactButton.js

@@ -0,0 +1,402 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var checkout_button_react_1 = require("@amwaljs/checkout-button-react");
+var react_1 = __importDefault(require("react"));
+var AmwalMagentoReactButton = function (_a) {
+    var triggerContext = _a.triggerContext, locale = _a.locale, scopeCode = _a.scopeCode, productId = _a.productId, buttonId = _a.buttonId, preCheckoutTask = _a.preCheckoutTask, onSuccessTask = _a.onSuccessTask, onCancelTask = _a.onCancelTask, _b = _a.emptyCartOnCancellation, emptyCartOnCancellation = _b === void 0 ? triggerContext === 'product-listing-page' || triggerContext === 'product-detail-page' || triggerContext === 'product-list-widget' || triggerContext === 'amwal-widget' : _b, _c = _a.baseUrl, baseUrl = _c === void 0 ? scopeCode ? "/rest/".concat(scopeCode, "/V1") : '/rest/V1' : _c, extraHeaders = _a.extraHeaders, overrideCartId = _a.overrideCartId, _d = _a.redirectURL, redirectURL = _d === void 0 ? '/checkout/onepage/success' : _d, _e = _a.performSuccessRedirection, performSuccessRedirection = _e === void 0 ? function () { window.location.href = redirectURL; } : _e, debug = _a.debug, applePayCheckout = _a.applePayCheckout, _f = _a.paymentMethod, paymentMethod = _f === void 0 ? 'amwal_payments' : _f;
+    var buttonRef = react_1.default.useRef(null);
+    var _g = react_1.default.useState(undefined), config = _g[0], setConfig = _g[1];
+    var _h = react_1.default.useState(0), amount = _h[0], setAmount = _h[1];
+    var _j = react_1.default.useState(0), taxes = _j[0], setTaxes = _j[1];
+    var _k = react_1.default.useState(0), discount = _k[0], setDiscount = _k[1];
+    var _l = react_1.default.useState(0), fees = _l[0], setFees = _l[1];
+    var _m = react_1.default.useState(''), feesDescription = _m[0], setFeesDescription = _m[1];
+    var _o = react_1.default.useState(undefined), cartId = _o[0], setCartId = _o[1];
+    var _p = react_1.default.useState([]), shippingMethods = _p[0], setShippingMethods = _p[1];
+    var _q = react_1.default.useState(undefined), placedOrderId = _q[0], setPlacedOrderId = _q[1];
+    var _r = react_1.default.useState(false), finishedUpdatingOrder = _r[0], setFinishedUpdatingOrder = _r[1];
+    var _s = react_1.default.useState(false), receivedSuccess = _s[0], setReceivedSuccess = _s[1];
+    var _t = react_1.default.useState(undefined), refIdData = _t[0], setRefIdData = _t[1];
+    var _u = react_1.default.useState(false), triggerPreCheckoutAck = _u[0], setTriggerPreCheckoutAck = _u[1];
+    var _v = react_1.default.useState(undefined), IncrementId = _v[0], setIncrementId = _v[1];
+    var paymentMethodLabels = {
+        amwal_payments: 'Quick Checkout',
+        amwal_payments_apple_pay: 'Pay with Apple Pay',
+        amwal_payments_bank_installments: 'Bank Installments'
+    };
+    var applyButtonConfig = function (data) {
+        var _a, _b, _c;
+        setConfig(data);
+        setAmount(data.amount);
+        setDiscount((_a = data.discount) !== null && _a !== void 0 ? _a : 0);
+        setTaxes((_b = data.tax) !== null && _b !== void 0 ? _b : 0);
+        setFees((_c = data.fees) !== null && _c !== void 0 ? _c : 0);
+        if (data.cart_id)
+            setCartId(data.cart_id);
+    };
+    react_1.default.useEffect(function () {
+        var initalRefIdData = {
+            identifier: '100',
+            customer_id: '0',
+            timestamp: Date.now()
+        };
+        setRefIdData(initalRefIdData);
+        fetch("".concat(baseUrl, "/amwal/button/cart"), {
+            method: 'POST',
+            headers: __assign(__assign({}, extraHeaders), { 'Content-Type': 'application/json', 'X-Requested-With': 'XMLHttpRequest' }),
+            body: JSON.stringify({
+                refIdData: initalRefIdData,
+                triggerContext: triggerContext,
+                cartId: overrideCartId !== null && overrideCartId !== void 0 ? overrideCartId : cartId,
+                productId: productId,
+                locale: locale
+            })
+        })
+            .then(function (response) { return __awaiter(void 0, void 0, void 0, function () {
+            var data;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, response.json()];
+                    case 1:
+                        data = _a.sent();
+                        if (!response.ok)
+                            throw new Error(data);
+                        return [2 /*return*/, data];
+                }
+            });
+        }); })
+            .then(function (data) { applyButtonConfig(data); })
+            .catch(function (err) { console.error(err); });
+    }, []);
+    var getQuote = function (addressData) { return __awaiter(void 0, void 0, void 0, function () {
+        var response, data, quote, subtotal;
+        var _a;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0: return [4 /*yield*/, fetch("".concat(baseUrl, "/amwal/get-quote"), {
+                        method: 'POST',
+                        headers: __assign(__assign({}, extraHeaders), { 'Content-Type': 'application/json', 'X-Requested-With': 'XMLHttpRequest' }),
+                        body: JSON.stringify({
+                            ref_id: config === null || config === void 0 ? void 0 : config.ref_id,
+                            address_data: addressData,
+                            is_pre_checkout: false,
+                            trigger_context: triggerContext,
+                            ref_id_data: refIdData,
+                            order_items: [],
+                            cartId: overrideCartId !== null && overrideCartId !== void 0 ? overrideCartId : cartId,
+                            productId: productId
+                        })
+                    })];
+                case 1:
+                    response = _b.sent();
+                    return [4 /*yield*/, response.json()];
+                case 2:
+                    data = _b.sent();
+                    if (!response.ok)
+                        throw new Error((_a = data.message) !== null && _a !== void 0 ? _a : response.statusText);
+                    if (data instanceof Array && data.length > 0) {
+                        quote = data[0];
+                        setCartId(quote.cart_id);
+                        subtotal = parseFloat(quote.amount) -
+                            parseFloat(quote.tax_amount) -
+                            parseFloat(quote.shipping_amount) +
+                            parseFloat(quote.discount_amount);
+                        setAmount(subtotal);
+                        setTaxes(quote.tax_amount);
+                        setDiscount(quote.discount_amount);
+                        setFees(quote.additional_fee_amount);
+                        setFeesDescription(quote.additional_fee_description);
+                        setShippingMethods(Object.entries(quote.available_rates).map(function (_a) {
+                            var id = _a[0], rate = _a[1];
+                            return {
+                                id: id,
+                                label: rate.carrier_title,
+                                price: rate.price
+                            };
+                        }));
+                        return [2 /*return*/, quote];
+                    }
+                    throw new Error("Unexpected get-quote result ".concat(JSON.stringify(data)));
+            }
+        });
+    }); };
+    var handleAmwalAddressUpdate = function (event) {
+        getQuote(event.detail)
+            .catch(function (err) {
+            var _a;
+            (_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.dispatchEvent(new CustomEvent('amwalAddressTriggerError', {
+                detail: {
+                    description: err === null || err === void 0 ? void 0 : err.toString(),
+                    error: err === null || err === void 0 ? void 0 : err.toString()
+                }
+            }));
+            console.error(err);
+        });
+    };
+    react_1.default.useEffect(function () {
+        var _a;
+        (_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.dispatchEvent(new Event('amwalAddressAck'));
+    }, [shippingMethods]);
+    var completeOrder = function (amwalOrderId) {
+        fetch("".concat(baseUrl, "/amwal/pay-order"), {
+            method: 'POST',
+            headers: __assign(__assign({}, extraHeaders), { 'Content-Type': 'application/json', 'X-Requested-With': 'XMLHttpRequest' }),
+            body: JSON.stringify({
+                order_id: placedOrderId,
+                amwal_order_id: amwalOrderId
+            })
+        })
+            .then(function (response) {
+            if (!response.ok)
+                return;
+            window.dispatchEvent(new CustomEvent('cartUpdateNeeded'));
+            if (onSuccessTask) {
+                onSuccessTask({ order_id: placedOrderId, amwal_transaction_id: amwalOrderId })
+                    .catch(function (err) {
+                    console.error(err);
+                })
+                    .finally(function () {
+                    setFinishedUpdatingOrder(true);
+                });
+            }
+            else {
+                setFinishedUpdatingOrder(true);
+            }
+        })
+            .catch(function (err) {
+            console.error(err);
+        });
+    };
+    var handleAmwalDismissed = function (event) {
+        var _a;
+        if (!event.detail.orderId)
+            return;
+        if (event.detail.paymentSuccessful) {
+            if (placedOrderId) {
+                completeOrder(event.detail.orderId);
+            }
+        }
+        else if (onCancelTask) {
+            onCancelTask()
+                .catch(function (err) {
+                console.error(err);
+            });
+        }
+        else if (emptyCartOnCancellation) {
+            (_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.setAttribute('disabled', 'true');
+            fetch("".concat(baseUrl, "/amwal/clean-quote"), {
+                method: 'POST',
+                headers: __assign(__assign({}, extraHeaders), { 'X-Requested-With': 'XMLHttpRequest' })
+            }).finally(function () {
+                var _a;
+                (_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.removeAttribute('disabled');
+                window.dispatchEvent(new CustomEvent('cartUpdateNeeded'));
+            });
+        }
+    };
+    var handleUpdateOrderOnPaymentsuccess = function (event) {
+        completeOrder(event.detail.orderId);
+    };
+    var handleAmwalCheckoutSuccess = function (_event) {
+        setReceivedSuccess(true); // coordinate with the updateOrderOnPaymentsuccess event
+    };
+    react_1.default.useEffect(function () {
+        var _a;
+        if (finishedUpdatingOrder && receivedSuccess) {
+            if (placedOrderId && IncrementId) {
+                (_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.dismissModal().finally(function () {
+                    performSuccessRedirection(placedOrderId, IncrementId);
+                });
+            }
+            else {
+                console.error('Unexpected state. placedOrderId is undefined after finished updating order and receiving success');
+            }
+        }
+    }, [finishedUpdatingOrder, receivedSuccess]);
+    var asyncHandleAmwalPrePayTrigger = function (event) { return __awaiter(void 0, void 0, void 0, function () {
+        var response, data;
+        var _a, _b, _c, _d;
+        return __generator(this, function (_e) {
+            switch (_e.label) {
+                case 0: return [4 /*yield*/, fetch("".concat(baseUrl, "/amwal/place-order"), {
+                        method: 'POST',
+                        headers: __assign(__assign({}, extraHeaders), { 'Content-Type': 'application/json', 'X-Requested-With': 'XMLHttpRequest' }),
+                        body: JSON.stringify({
+                            ref_id: config === null || config === void 0 ? void 0 : config.ref_id,
+                            address_data: event.detail,
+                            cartId: overrideCartId !== null && overrideCartId !== void 0 ? overrideCartId : cartId,
+                            amwal_order_id: event.detail.id,
+                            ref_id_data: refIdData,
+                            trigger_context: triggerContext,
+                            has_amwal_address: !(triggerContext === 'regular-checkout'),
+                            card_bin: event.detail.card_bin,
+                            payment_method: paymentMethod
+                        })
+                    })];
+                case 1:
+                    response = _e.sent();
+                    return [4 /*yield*/, response.json()];
+                case 2:
+                    data = _e.sent();
+                    if (response.ok) {
+                        setPlacedOrderId(data.entity_id);
+                        setIncrementId(data.increment_id);
+                        (_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.dispatchEvent(new CustomEvent('amwalPrePayTriggerAck', {
+                            detail: __assign(__assign({ order_id: data.entity_id, order_total_amount: data.total_due }, (data.discount_description && { card_bin_additional_discount_message: data.discount_description })), (((_b = data.extension_attributes) === null || _b === void 0 ? void 0 : _b.amwal_card_bin_additional_discount) && { card_bin_additional_discount: data.extension_attributes.amwal_card_bin_additional_discount }))
+                        }));
+                    }
+                    else {
+                        (_c = buttonRef.current) === null || _c === void 0 ? void 0 : _c.dispatchEvent(new CustomEvent('amwalPrePayTriggerError', {
+                            detail: {
+                                description: "".concat((_d = data.message) !== null && _d !== void 0 ? _d : data).concat(data.parameters ? " ".concat(data.parameters.join(', ')) : '')
+                            }
+                        }));
+                    }
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    var handleAmwalPrePayTrigger = function (event) {
+        asyncHandleAmwalPrePayTrigger(event)
+            .catch(function (err) {
+            var _a;
+            console.error(err);
+            (_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.dispatchEvent(new CustomEvent('amwalPrePayTriggerError', {
+                detail: {
+                    description: err === null || err === void 0 ? void 0 : err.toString()
+                }
+            }));
+        });
+    };
+    var handleAmwalPreCheckoutTrigger = function (_event) {
+        var getConfig = function (preCheckoutCartId) { return __awaiter(void 0, void 0, void 0, function () {
+            var _a;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0: return [4 /*yield*/, fetch("".concat(baseUrl, "/amwal/button/cart"), {
+                            method: 'POST',
+                            headers: __assign(__assign({}, extraHeaders), { 'Content-Type': 'application/json', 'X-Requested-With': 'XMLHttpRequest' }),
+                            body: JSON.stringify({
+                                refIdData: refIdData,
+                                triggerContext: triggerContext,
+                                locale: locale,
+                                cartId: (_a = preCheckoutCartId !== null && preCheckoutCartId !== void 0 ? preCheckoutCartId : overrideCartId) !== null && _a !== void 0 ? _a : cartId
+                            })
+                        })];
+                    case 1: return [2 /*return*/, _b.sent()];
+                }
+            });
+        }); };
+        var preCheckoutPromise = (preCheckoutTask != null)
+            ? preCheckoutTask().then(function (preCheckoutCartId) { return __awaiter(void 0, void 0, void 0, function () {
+                var response;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, getConfig(preCheckoutCartId)];
+                        case 1:
+                            response = _a.sent();
+                            if (preCheckoutCartId) {
+                                setCartId(preCheckoutCartId);
+                            }
+                            return [2 /*return*/, response];
+                    }
+                });
+            }); })
+            : getConfig();
+        preCheckoutPromise
+            .then(function (response) { return __awaiter(void 0, void 0, void 0, function () {
+            var data;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, response.json()];
+                    case 1:
+                        data = _a.sent();
+                        if (!response.ok)
+                            throw new Error(data);
+                        return [2 /*return*/, data];
+                }
+            });
+        }); })
+            .then(function (data) {
+            applyButtonConfig(data);
+            setTriggerPreCheckoutAck(true);
+        })
+            .catch(function (err) {
+            var _a;
+            console.error(err);
+            (_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.dispatchEvent(new CustomEvent('amwalPrePayTriggerError', {
+                detail: {
+                    description: err === null || err === void 0 ? void 0 : err.toString()
+                }
+            }));
+        });
+    };
+    react_1.default.useEffect(function () {
+        var _a, _b;
+        if (triggerPreCheckoutAck) {
+            (_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.dispatchEvent(new CustomEvent('amwalPreCheckoutTriggerAck', {
+                detail: {
+                    order_content: config === null || config === void 0 ? void 0 : config.order_content,
+                    order_position: triggerContext,
+                    plugin_version: 'Magento ' + ((_b = config === null || config === void 0 ? void 0 : config.plugin_version) !== null && _b !== void 0 ? _b : '')
+                }
+            }));
+            setTriggerPreCheckoutAck(false);
+        }
+    }, [triggerPreCheckoutAck]);
+    return (config != null)
+        ? (0, jsx_runtime_1.jsx)(checkout_button_react_1.AmwalCheckoutButton, { ref: buttonRef, id: buttonId, amount: amount, taxes: taxes, discount: discount, fees: fees, feesDescription: feesDescription, shippingMethods: shippingMethods, merchantId: config.merchant_id, countryCode: config.country_code, darkMode: config.dark_mode, emailRequired: config.email_required, addressRequired: applePayCheckout ? false : config.address_required, refId: config.ref_id, label: paymentMethodLabels[paymentMethod] || 'Quick Checkout', showPaymentBrands: config.show_payment_brands, initialEmail: config.initial_email, initialPhoneNumber: config.initial_phone, initialAddress: config.initial_address, allowedAddressCities: config.allowed_address_cities, allowedAddressStates: config.allowed_address_states, allowedAddressCountries: JSON.stringify(config.allowed_address_countries), addressHandshake: true, sendExtraAddressFields: true, onAmwalAddressUpdate: handleAmwalAddressUpdate, onAmwalDismissed: handleAmwalDismissed, onAmwalCheckoutSuccess: handleAmwalCheckoutSuccess, enablePrePayTrigger: config.enable_pre_pay_trigger, onAmwalPrePayTrigger: handleAmwalPrePayTrigger, enablePreCheckoutTrigger: config.enable_pre_checkout_trigger, onAmwalPreCheckoutTrigger: handleAmwalPreCheckoutTrigger, onUpdateOrderOnPaymentsuccess: handleUpdateOrderOnPaymentsuccess, postcodeOptionalCountries: JSON.stringify(config.post_code_optional_countries), initialFirstName: config.initial_first_name, initialLastName: config.initial_last_name, showDiscountRibbon: config.show_discount_ribbon, installmentOptionsUrl: config.installment_options_url, locale: locale, debug: debug, onlyShowBankInstallment: paymentMethod === 'amwal_payments_bank_installments', enableAppleCheckout: applePayCheckout, timelineStyle: config.timeline_style, footerMessage: config.footer_message, apiUrl: config.api_url, payUrl: config.pay_url })
+        : (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
+};
+exports.default = AmwalMagentoReactButton;

package/dist/cjs/IAmwalButtonConfig.d.ts

@@ -0,0 +1,49 @@
+import { type CitySpecs, type IAddress, type StateSpecs } from '@amwaljs/checkout-button';
+import { type CountryCode } from 'libphonenumber-js';
+export interface IAmwalButtonConfig {
+    merchant_id: string;
+    amount: number;
+    discount?: number;
+    fees?: number;
+    tax?: number;
+    country_code: CountryCode;
+    dark_mode: 'on' | 'off' | 'auto';
+    email_required: boolean;
+    address_required: boolean;
+    address_handshake: boolean;
+    ref_id: string;
+    label: 'Quick Checkout' | 'Pay with Apple Pay';
+    disabled: boolean;
+    show_payment_brands: boolean;
+    enable_pre_checkout_trigger: boolean;
+    enable_pre_pay_trigger: boolean;
+    id: string;
+    allowed_address_states: Record<string, StateSpecs>;
+    allowed_address_cities: Record<string, CitySpecs>;
+    allowed_address_countries: string[];
+    post_code_optional_countries: string[];
+    initial_address: IAddress;
+    initial_email: string;
+    initial_phone: string;
+    plugin_version: string;
+    initial_first_name: string;
+    initial_last_name: string;
+    installment_options_url: string;
+    cart_id: string;
+    show_discount_ribbon: boolean;
+    order_content: string[];
+    enable_bank_installments: boolean;
+    timeline_style: 'default' | 'simple';
+    footer_message: string;
+    api_url: string;
+    pay_url: string;
+}
+export interface IRefIdData {
+    identifier: string;
+    customer_id: string;
+    timestamp: number;
+}
+export interface ISuccessInfo {
+    order_id?: string;
+    amwal_transaction_id: string;
+}

package/dist/cjs/IAmwalButtonConfig.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cjs/index.d.ts

@@ -0,0 +1,2 @@
+import AmwalMagentoReactButton from './AmwalMagentoReactButton';
+export default AmwalMagentoReactButton;

package/dist/cjs/index.js

@@ -0,0 +1,7 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var AmwalMagentoReactButton_1 = __importDefault(require("./AmwalMagentoReactButton"));
+exports.default = AmwalMagentoReactButton_1.default;

package/dist/esm/AmwalMagentoReactButton.d.ts

@@ -0,0 +1,22 @@
+import { type ISuccessInfo } from './IAmwalButtonConfig';
+interface AmwalMagentoReactButtonProps {
+    triggerContext: string;
+    locale?: string;
+    scopeCode?: string;
+    productId?: string;
+    buttonId?: string;
+    preCheckoutTask?: () => Promise<string | undefined>;
+    onSuccessTask?: (Info: ISuccessInfo) => Promise<void>;
+    onCancelTask?: () => Promise<void>;
+    emptyCartOnCancellation?: boolean;
+    baseUrl?: string;
+    extraHeaders?: Record<string, string>;
+    overrideCartId?: string;
+    redirectURL?: string;
+    performSuccessRedirection?: (orderId: string, IncrementId: string) => void;
+    debug?: boolean;
+    applePayCheckout?: boolean;
+    paymentMethod?: string;
+}
+declare const AmwalMagentoReactButton: ({ triggerContext, locale, scopeCode, productId, buttonId, preCheckoutTask, onSuccessTask, onCancelTask, emptyCartOnCancellation, baseUrl, extraHeaders, overrideCartId, redirectURL, performSuccessRedirection, debug, applePayCheckout, paymentMethod }: AmwalMagentoReactButtonProps) => JSX.Element;
+export default AmwalMagentoReactButton;

package/dist/esm/AmwalMagentoReactButton.js

@@ -0,0 +1,397 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { AmwalCheckoutButton } from '@amwaljs/checkout-button-react';
+import React from 'react';
+var AmwalMagentoReactButton = function (_a) {
+    var triggerContext = _a.triggerContext, locale = _a.locale, scopeCode = _a.scopeCode, productId = _a.productId, buttonId = _a.buttonId, preCheckoutTask = _a.preCheckoutTask, onSuccessTask = _a.onSuccessTask, onCancelTask = _a.onCancelTask, _b = _a.emptyCartOnCancellation, emptyCartOnCancellation = _b === void 0 ? triggerContext === 'product-listing-page' || triggerContext === 'product-detail-page' || triggerContext === 'product-list-widget' || triggerContext === 'amwal-widget' : _b, _c = _a.baseUrl, baseUrl = _c === void 0 ? scopeCode ? "/rest/".concat(scopeCode, "/V1") : '/rest/V1' : _c, extraHeaders = _a.extraHeaders, overrideCartId = _a.overrideCartId, _d = _a.redirectURL, redirectURL = _d === void 0 ? '/checkout/onepage/success' : _d, _e = _a.performSuccessRedirection, performSuccessRedirection = _e === void 0 ? function () { window.location.href = redirectURL; } : _e, debug = _a.debug, applePayCheckout = _a.applePayCheckout, _f = _a.paymentMethod, paymentMethod = _f === void 0 ? 'amwal_payments' : _f;
+    var buttonRef = React.useRef(null);
+    var _g = React.useState(undefined), config = _g[0], setConfig = _g[1];
+    var _h = React.useState(0), amount = _h[0], setAmount = _h[1];
+    var _j = React.useState(0), taxes = _j[0], setTaxes = _j[1];
+    var _k = React.useState(0), discount = _k[0], setDiscount = _k[1];
+    var _l = React.useState(0), fees = _l[0], setFees = _l[1];
+    var _m = React.useState(''), feesDescription = _m[0], setFeesDescription = _m[1];
+    var _o = React.useState(undefined), cartId = _o[0], setCartId = _o[1];
+    var _p = React.useState([]), shippingMethods = _p[0], setShippingMethods = _p[1];
+    var _q = React.useState(undefined), placedOrderId = _q[0], setPlacedOrderId = _q[1];
+    var _r = React.useState(false), finishedUpdatingOrder = _r[0], setFinishedUpdatingOrder = _r[1];
+    var _s = React.useState(false), receivedSuccess = _s[0], setReceivedSuccess = _s[1];
+    var _t = React.useState(undefined), refIdData = _t[0], setRefIdData = _t[1];
+    var _u = React.useState(false), triggerPreCheckoutAck = _u[0], setTriggerPreCheckoutAck = _u[1];
+    var _v = React.useState(undefined), IncrementId = _v[0], setIncrementId = _v[1];
+    var paymentMethodLabels = {
+        amwal_payments: 'Quick Checkout',
+        amwal_payments_apple_pay: 'Pay with Apple Pay',
+        amwal_payments_bank_installments: 'Bank Installments'
+    };
+    var applyButtonConfig = function (data) {
+        var _a, _b, _c;
+        setConfig(data);
+        setAmount(data.amount);
+        setDiscount((_a = data.discount) !== null && _a !== void 0 ? _a : 0);
+        setTaxes((_b = data.tax) !== null && _b !== void 0 ? _b : 0);
+        setFees((_c = data.fees) !== null && _c !== void 0 ? _c : 0);
+        if (data.cart_id)
+            setCartId(data.cart_id);
+    };
+    React.useEffect(function () {
+        var initalRefIdData = {
+            identifier: '100',
+            customer_id: '0',
+            timestamp: Date.now()
+        };
+        setRefIdData(initalRefIdData);
+        fetch("".concat(baseUrl, "/amwal/button/cart"), {
+            method: 'POST',
+            headers: __assign(__assign({}, extraHeaders), { 'Content-Type': 'application/json', 'X-Requested-With': 'XMLHttpRequest' }),
+            body: JSON.stringify({
+                refIdData: initalRefIdData,
+                triggerContext: triggerContext,
+                cartId: overrideCartId !== null && overrideCartId !== void 0 ? overrideCartId : cartId,
+                productId: productId,
+                locale: locale
+            })
+        })
+            .then(function (response) { return __awaiter(void 0, void 0, void 0, function () {
+            var data;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, response.json()];
+                    case 1:
+                        data = _a.sent();
+                        if (!response.ok)
+                            throw new Error(data);
+                        return [2 /*return*/, data];
+                }
+            });
+        }); })
+            .then(function (data) { applyButtonConfig(data); })
+            .catch(function (err) { console.error(err); });
+    }, []);
+    var getQuote = function (addressData) { return __awaiter(void 0, void 0, void 0, function () {
+        var response, data, quote, subtotal;
+        var _a;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0: return [4 /*yield*/, fetch("".concat(baseUrl, "/amwal/get-quote"), {
+                        method: 'POST',
+                        headers: __assign(__assign({}, extraHeaders), { 'Content-Type': 'application/json', 'X-Requested-With': 'XMLHttpRequest' }),
+                        body: JSON.stringify({
+                            ref_id: config === null || config === void 0 ? void 0 : config.ref_id,
+                            address_data: addressData,
+                            is_pre_checkout: false,
+                            trigger_context: triggerContext,
+                            ref_id_data: refIdData,
+                            order_items: [],
+                            cartId: overrideCartId !== null && overrideCartId !== void 0 ? overrideCartId : cartId,
+                            productId: productId
+                        })
+                    })];
+                case 1:
+                    response = _b.sent();
+                    return [4 /*yield*/, response.json()];
+                case 2:
+                    data = _b.sent();
+                    if (!response.ok)
+                        throw new Error((_a = data.message) !== null && _a !== void 0 ? _a : response.statusText);
+                    if (data instanceof Array && data.length > 0) {
+                        quote = data[0];
+                        setCartId(quote.cart_id);
+                        subtotal = parseFloat(quote.amount) -
+                            parseFloat(quote.tax_amount) -
+                            parseFloat(quote.shipping_amount) +
+                            parseFloat(quote.discount_amount);
+                        setAmount(subtotal);
+                        setTaxes(quote.tax_amount);
+                        setDiscount(quote.discount_amount);
+                        setFees(quote.additional_fee_amount);
+                        setFeesDescription(quote.additional_fee_description);
+                        setShippingMethods(Object.entries(quote.available_rates).map(function (_a) {
+                            var id = _a[0], rate = _a[1];
+                            return {
+                                id: id,
+                                label: rate.carrier_title,
+                                price: rate.price
+                            };
+                        }));
+                        return [2 /*return*/, quote];
+                    }
+                    throw new Error("Unexpected get-quote result ".concat(JSON.stringify(data)));
+            }
+        });
+    }); };
+    var handleAmwalAddressUpdate = function (event) {
+        getQuote(event.detail)
+            .catch(function (err) {
+            var _a;
+            (_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.dispatchEvent(new CustomEvent('amwalAddressTriggerError', {
+                detail: {
+                    description: err === null || err === void 0 ? void 0 : err.toString(),
+                    error: err === null || err === void 0 ? void 0 : err.toString()
+                }
+            }));
+            console.error(err);
+        });
+    };
+    React.useEffect(function () {
+        var _a;
+        (_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.dispatchEvent(new Event('amwalAddressAck'));
+    }, [shippingMethods]);
+    var completeOrder = function (amwalOrderId) {
+        fetch("".concat(baseUrl, "/amwal/pay-order"), {
+            method: 'POST',
+            headers: __assign(__assign({}, extraHeaders), { 'Content-Type': 'application/json', 'X-Requested-With': 'XMLHttpRequest' }),
+            body: JSON.stringify({
+                order_id: placedOrderId,
+                amwal_order_id: amwalOrderId
+            })
+        })
+            .then(function (response) {
+            if (!response.ok)
+                return;
+            window.dispatchEvent(new CustomEvent('cartUpdateNeeded'));
+            if (onSuccessTask) {
+                onSuccessTask({ order_id: placedOrderId, amwal_transaction_id: amwalOrderId })
+                    .catch(function (err) {
+                    console.error(err);
+                })
+                    .finally(function () {
+                    setFinishedUpdatingOrder(true);
+                });
+            }
+            else {
+                setFinishedUpdatingOrder(true);
+            }
+        })
+            .catch(function (err) {
+            console.error(err);
+        });
+    };
+    var handleAmwalDismissed = function (event) {
+        var _a;
+        if (!event.detail.orderId)
+            return;
+        if (event.detail.paymentSuccessful) {
+            if (placedOrderId) {
+                completeOrder(event.detail.orderId);
+            }
+        }
+        else if (onCancelTask) {
+            onCancelTask()
+                .catch(function (err) {
+                console.error(err);
+            });
+        }
+        else if (emptyCartOnCancellation) {
+            (_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.setAttribute('disabled', 'true');
+            fetch("".concat(baseUrl, "/amwal/clean-quote"), {
+                method: 'POST',
+                headers: __assign(__assign({}, extraHeaders), { 'X-Requested-With': 'XMLHttpRequest' })
+            }).finally(function () {
+                var _a;
+                (_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.removeAttribute('disabled');
+                window.dispatchEvent(new CustomEvent('cartUpdateNeeded'));
+            });
+        }
+    };
+    var handleUpdateOrderOnPaymentsuccess = function (event) {
+        completeOrder(event.detail.orderId);
+    };
+    var handleAmwalCheckoutSuccess = function (_event) {
+        setReceivedSuccess(true); // coordinate with the updateOrderOnPaymentsuccess event
+    };
+    React.useEffect(function () {
+        var _a;
+        if (finishedUpdatingOrder && receivedSuccess) {
+            if (placedOrderId && IncrementId) {
+                (_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.dismissModal().finally(function () {
+                    performSuccessRedirection(placedOrderId, IncrementId);
+                });
+            }
+            else {
+                console.error('Unexpected state. placedOrderId is undefined after finished updating order and receiving success');
+            }
+        }
+    }, [finishedUpdatingOrder, receivedSuccess]);
+    var asyncHandleAmwalPrePayTrigger = function (event) { return __awaiter(void 0, void 0, void 0, function () {
+        var response, data;
+        var _a, _b, _c, _d;
+        return __generator(this, function (_e) {
+            switch (_e.label) {
+                case 0: return [4 /*yield*/, fetch("".concat(baseUrl, "/amwal/place-order"), {
+                        method: 'POST',
+                        headers: __assign(__assign({}, extraHeaders), { 'Content-Type': 'application/json', 'X-Requested-With': 'XMLHttpRequest' }),
+                        body: JSON.stringify({
+                            ref_id: config === null || config === void 0 ? void 0 : config.ref_id,
+                            address_data: event.detail,
+                            cartId: overrideCartId !== null && overrideCartId !== void 0 ? overrideCartId : cartId,
+                            amwal_order_id: event.detail.id,
+                            ref_id_data: refIdData,
+                            trigger_context: triggerContext,
+                            has_amwal_address: !(triggerContext === 'regular-checkout'),
+                            card_bin: event.detail.card_bin,
+                            payment_method: paymentMethod
+                        })
+                    })];
+                case 1:
+                    response = _e.sent();
+                    return [4 /*yield*/, response.json()];
+                case 2:
+                    data = _e.sent();
+                    if (response.ok) {
+                        setPlacedOrderId(data.entity_id);
+                        setIncrementId(data.increment_id);
+                        (_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.dispatchEvent(new CustomEvent('amwalPrePayTriggerAck', {
+                            detail: __assign(__assign({ order_id: data.entity_id, order_total_amount: data.total_due }, (data.discount_description && { card_bin_additional_discount_message: data.discount_description })), (((_b = data.extension_attributes) === null || _b === void 0 ? void 0 : _b.amwal_card_bin_additional_discount) && { card_bin_additional_discount: data.extension_attributes.amwal_card_bin_additional_discount }))
+                        }));
+                    }
+                    else {
+                        (_c = buttonRef.current) === null || _c === void 0 ? void 0 : _c.dispatchEvent(new CustomEvent('amwalPrePayTriggerError', {
+                            detail: {
+                                description: "".concat((_d = data.message) !== null && _d !== void 0 ? _d : data).concat(data.parameters ? " ".concat(data.parameters.join(', ')) : '')
+                            }
+                        }));
+                    }
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    var handleAmwalPrePayTrigger = function (event) {
+        asyncHandleAmwalPrePayTrigger(event)
+            .catch(function (err) {
+            var _a;
+            console.error(err);
+            (_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.dispatchEvent(new CustomEvent('amwalPrePayTriggerError', {
+                detail: {
+                    description: err === null || err === void 0 ? void 0 : err.toString()
+                }
+            }));
+        });
+    };
+    var handleAmwalPreCheckoutTrigger = function (_event) {
+        var getConfig = function (preCheckoutCartId) { return __awaiter(void 0, void 0, void 0, function () {
+            var _a;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0: return [4 /*yield*/, fetch("".concat(baseUrl, "/amwal/button/cart"), {
+                            method: 'POST',
+                            headers: __assign(__assign({}, extraHeaders), { 'Content-Type': 'application/json', 'X-Requested-With': 'XMLHttpRequest' }),
+                            body: JSON.stringify({
+                                refIdData: refIdData,
+                                triggerContext: triggerContext,
+                                locale: locale,
+                                cartId: (_a = preCheckoutCartId !== null && preCheckoutCartId !== void 0 ? preCheckoutCartId : overrideCartId) !== null && _a !== void 0 ? _a : cartId
+                            })
+                        })];
+                    case 1: return [2 /*return*/, _b.sent()];
+                }
+            });
+        }); };
+        var preCheckoutPromise = (preCheckoutTask != null)
+            ? preCheckoutTask().then(function (preCheckoutCartId) { return __awaiter(void 0, void 0, void 0, function () {
+                var response;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, getConfig(preCheckoutCartId)];
+                        case 1:
+                            response = _a.sent();
+                            if (preCheckoutCartId) {
+                                setCartId(preCheckoutCartId);
+                            }
+                            return [2 /*return*/, response];
+                    }
+                });
+            }); })
+            : getConfig();
+        preCheckoutPromise
+            .then(function (response) { return __awaiter(void 0, void 0, void 0, function () {
+            var data;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, response.json()];
+                    case 1:
+                        data = _a.sent();
+                        if (!response.ok)
+                            throw new Error(data);
+                        return [2 /*return*/, data];
+                }
+            });
+        }); })
+            .then(function (data) {
+            applyButtonConfig(data);
+            setTriggerPreCheckoutAck(true);
+        })
+            .catch(function (err) {
+            var _a;
+            console.error(err);
+            (_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.dispatchEvent(new CustomEvent('amwalPrePayTriggerError', {
+                detail: {
+                    description: err === null || err === void 0 ? void 0 : err.toString()
+                }
+            }));
+        });
+    };
+    React.useEffect(function () {
+        var _a, _b;
+        if (triggerPreCheckoutAck) {
+            (_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.dispatchEvent(new CustomEvent('amwalPreCheckoutTriggerAck', {
+                detail: {
+                    order_content: config === null || config === void 0 ? void 0 : config.order_content,
+                    order_position: triggerContext,
+                    plugin_version: 'Magento ' + ((_b = config === null || config === void 0 ? void 0 : config.plugin_version) !== null && _b !== void 0 ? _b : '')
+                }
+            }));
+            setTriggerPreCheckoutAck(false);
+        }
+    }, [triggerPreCheckoutAck]);
+    return (config != null)
+        ? _jsx(AmwalCheckoutButton, { ref: buttonRef, id: buttonId, amount: amount, taxes: taxes, discount: discount, fees: fees, feesDescription: feesDescription, shippingMethods: shippingMethods, merchantId: config.merchant_id, countryCode: config.country_code, darkMode: config.dark_mode, emailRequired: config.email_required, addressRequired: applePayCheckout ? false : config.address_required, refId: config.ref_id, label: paymentMethodLabels[paymentMethod] || 'Quick Checkout', showPaymentBrands: config.show_payment_brands, initialEmail: config.initial_email, initialPhoneNumber: config.initial_phone, initialAddress: config.initial_address, allowedAddressCities: config.allowed_address_cities, allowedAddressStates: config.allowed_address_states, allowedAddressCountries: JSON.stringify(config.allowed_address_countries), addressHandshake: true, sendExtraAddressFields: true, onAmwalAddressUpdate: handleAmwalAddressUpdate, onAmwalDismissed: handleAmwalDismissed, onAmwalCheckoutSuccess: handleAmwalCheckoutSuccess, enablePrePayTrigger: config.enable_pre_pay_trigger, onAmwalPrePayTrigger: handleAmwalPrePayTrigger, enablePreCheckoutTrigger: config.enable_pre_checkout_trigger, onAmwalPreCheckoutTrigger: handleAmwalPreCheckoutTrigger, onUpdateOrderOnPaymentsuccess: handleUpdateOrderOnPaymentsuccess, postcodeOptionalCountries: JSON.stringify(config.post_code_optional_countries), initialFirstName: config.initial_first_name, initialLastName: config.initial_last_name, showDiscountRibbon: config.show_discount_ribbon, installmentOptionsUrl: config.installment_options_url, locale: locale, debug: debug, onlyShowBankInstallment: paymentMethod === 'amwal_payments_bank_installments', enableAppleCheckout: applePayCheckout, timelineStyle: config.timeline_style, footerMessage: config.footer_message, apiUrl: config.api_url, payUrl: config.pay_url })
+        : _jsx(_Fragment, {});
+};
+export default AmwalMagentoReactButton;

package/dist/esm/IAmwalButtonConfig.d.ts

@@ -0,0 +1,49 @@
+import { type CitySpecs, type IAddress, type StateSpecs } from '@amwaljs/checkout-button';
+import { type CountryCode } from 'libphonenumber-js';
+export interface IAmwalButtonConfig {
+    merchant_id: string;
+    amount: number;
+    discount?: number;
+    fees?: number;
+    tax?: number;
+    country_code: CountryCode;
+    dark_mode: 'on' | 'off' | 'auto';
+    email_required: boolean;
+    address_required: boolean;
+    address_handshake: boolean;
+    ref_id: string;
+    label: 'Quick Checkout' | 'Pay with Apple Pay';
+    disabled: boolean;
+    show_payment_brands: boolean;
+    enable_pre_checkout_trigger: boolean;
+    enable_pre_pay_trigger: boolean;
+    id: string;
+    allowed_address_states: Record<string, StateSpecs>;
+    allowed_address_cities: Record<string, CitySpecs>;
+    allowed_address_countries: string[];
+    post_code_optional_countries: string[];
+    initial_address: IAddress;
+    initial_email: string;
+    initial_phone: string;
+    plugin_version: string;
+    initial_first_name: string;
+    initial_last_name: string;
+    installment_options_url: string;
+    cart_id: string;
+    show_discount_ribbon: boolean;
+    order_content: string[];
+    enable_bank_installments: boolean;
+    timeline_style: 'default' | 'simple';
+    footer_message: string;
+    api_url: string;
+    pay_url: string;
+}
+export interface IRefIdData {
+    identifier: string;
+    customer_id: string;
+    timestamp: number;
+}
+export interface ISuccessInfo {
+    order_id?: string;
+    amwal_transaction_id: string;
+}

package/dist/esm/IAmwalButtonConfig.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/index.d.ts

@@ -0,0 +1,2 @@
+import AmwalMagentoReactButton from './AmwalMagentoReactButton';
+export default AmwalMagentoReactButton;

package/dist/esm/index.js

@@ -0,0 +1,2 @@
+import AmwalMagentoReactButton from './AmwalMagentoReactButton';
+export default AmwalMagentoReactButton;

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@amwaljs/magento-react-button",
+  "sideEffects": false,
+  "version": "0.1.0",
+  "description": "Amwal Magento Headless React Button",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/amwal-tech/amwal-magento"
+  },
+  "scripts": {
+    "build": "npm run clean && npm run compile",
+    "clean": "rm -rf dist",
+    "compile:cjs": "tsc --project tsconfig.cjs.json",
+    "compile:esm": "tsc --project tsconfig.esm.json",
+    "compile": "npm run compile:cjs && npm run compile:esm",
+    "rollup": "rollup -c"
+  },
+  "main": "./dist/cjs/index.js",
+  "module": "./dist/esm/index.js",
+  "types": "./dist/esm/index.d.ts",
+  "files": [
+    "dist/"
+  ],
+  "devDependencies": {
+    "@types/react": "^18.2.15",
+    "@typescript-eslint/eslint-plugin": "^5.62.0",
+    "eslint": "^8.45.0",
+    "eslint-config-standard-with-typescript": "^37.0.0",
+    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-n": "^16.0.1",
+    "eslint-plugin-promise": "^6.1.1",
+    "eslint-plugin-react": "^7.33.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "typescript": "^5.1.6"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-dom": "*"
+  },
+  "dependencies": {
+    "@amwaljs/checkout-button": "^0.2.9",
+    "@amwaljs/checkout-button-react": "^0.2.9"
+  }
+}