@coras-io/embed 0.1.0

package/dist/components/transfer-modal/transfer-modal.component.js

@@ -0,0 +1,297 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, LitElement, nothing } from "lit";
+import { property, state } from "lit/decorators.js";
+import { localized, msg } from "@lit/localize";
+import styles from "./transfer-modal.styles.js";
+import "../button/button.js";
+import "../dialog/dialog.js";
+import "../otp/otp.js";
+import { fireInternalEvent } from "../../core/events.js";
+/**
+ * A modal dialog for verifying payments via SMS OTP.
+ *
+ * Opens when an SMS verification code has been sent. Displays the payment
+ * amount, masked phone number, and an OTP input field. The user enters
+ * the code to confirm the payment.
+ *
+ * @fires mfa-code-submitted - When user submits the OTP code
+ * @fires mfa-resend-requested - When user requests a new code
+ * @fires transfer-cancelled - When user closes or cancels the verification
+ */
+let CorasTransferModal = class CorasTransferModal extends LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Whether the modal is open
+         */
+        this.open = false;
+        /**
+         * Payment amount to display (e.g., "74.23")
+         */
+        this.amount = "0";
+        /**
+         * Masked phone number where the SMS was sent (e.g., "******7611")
+         */
+        this.maskedPhone = "";
+        /**
+         * Current modal state
+         */
+        this.modalState = "mfa-verification";
+        /**
+         * Locale for number formatting
+         */
+        this.locale = "en-US";
+        /**
+         * Base URL for assets (icons, logos)
+         */
+        this.assetsURL = "";
+        /**
+         * MFA verification error message
+         */
+        this.mfaError = "";
+        /**
+         * Whether MFA verification is in progress
+         */
+        this.mfaLoading = false;
+        this.otpValue = "";
+        this._resendCountdown = 0;
+        this._resendTimerId = null;
+    }
+    static { this.styles = styles; }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this._clearResendTimer();
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.has("modalState")) {
+            const prevState = changedProperties.get("modalState");
+            if (this.modalState === "mfa-verification" &&
+                prevState !== "mfa-verification") {
+                this.otpValue = "";
+                const otpElement = this.renderRoot.querySelector("#mfa-otp");
+                if (otpElement) {
+                    otpElement.value = "";
+                }
+                setTimeout(() => this._startResendTimer(), 0);
+            }
+            if (this.modalState !== "mfa-verification" &&
+                prevState === "mfa-verification") {
+                this._clearResendTimer();
+            }
+        }
+        if (changedProperties.has("open")) {
+            if (this.open && this.modalState === "mfa-verification") {
+                this.otpValue = "";
+                setTimeout(() => this._startResendTimer(), 0);
+            }
+            if (!this.open) {
+                this.otpValue = "";
+                this._clearResendTimer();
+            }
+        }
+    }
+    _startResendTimer() {
+        this._clearResendTimer();
+        this._resendCountdown = 60;
+        this._resendTimerId = setInterval(() => {
+            this._resendCountdown--;
+            if (this._resendCountdown <= 0) {
+                this._clearResendTimer();
+            }
+        }, 1000);
+    }
+    _clearResendTimer() {
+        if (this._resendTimerId !== null) {
+            clearInterval(this._resendTimerId);
+            this._resendTimerId = null;
+        }
+        this._resendCountdown = 0;
+    }
+    formatAmount(amount) {
+        const num = parseFloat(amount);
+        if (isNaN(num))
+            return "0";
+        return new Intl.NumberFormat(this.locale).format(num);
+    }
+    handleCancel() {
+        this.otpValue = "";
+        this._clearResendTimer();
+        fireInternalEvent(this, "transfer-cancelled", {});
+    }
+    handleMfaCodeSubmit() {
+        if (this.otpValue.length < 6)
+            return;
+        fireInternalEvent(this, "mfa-code-submitted", { code: this.otpValue });
+    }
+    handleMfaResend() {
+        this.otpValue = "";
+        this._startResendTimer();
+        fireInternalEvent(this, "mfa-resend-requested", {});
+    }
+    handleOtpInput() {
+        const otpElement = this.renderRoot.querySelector("#mfa-otp");
+        if (otpElement && otpElement.value !== undefined) {
+            this.otpValue = otpElement.value;
+        }
+    }
+    handleOtpComplete(e) {
+        this.otpValue = e.detail.code || "";
+        this.handleMfaCodeSubmit();
+    }
+    handleDialogClosed() {
+        this.handleCancel();
+    }
+    getModalTitle() {
+        if (this.modalState === "loading") {
+            return msg("Confirming payment...");
+        }
+        return msg("Verify your payment");
+    }
+    renderMfaContent() {
+        return html `
+      <div class="mfa-state">
+        <div class="payment-summary">
+          <div class="payment-amount">
+            ${this.formatAmount(this.amount)}
+            ${this.assetsURL
+            ? html `<img
+                  class="fida-logo"
+                  src="${this.assetsURL}/payment/fida.svg"
+                  alt="FIDA"
+                />`
+            : nothing}
+          </div>
+        </div>
+
+        <p class="mfa-instruction">
+          ${this.maskedPhone
+            ? msg(html `A verification code has been sent to
+                  <strong>${this.maskedPhone}</strong>. Enter the 6-digit code
+                  below to confirm your payment.`)
+            : msg("A verification code has been sent to your registered phone number. Enter the 6-digit code below to confirm your payment.")}
+        </p>
+
+        <div class="mfa-otp-container">
+          <coras-otp
+            id="mfa-otp"
+            length="6"
+            ?disabled=${this.mfaLoading}
+            @otp-completed=${this.handleOtpComplete}
+            @input=${this.handleOtpInput}
+          ></coras-otp>
+        </div>
+
+        ${this.mfaError
+            ? html `<div class="error-message mfa-error">${this.mfaError}</div>`
+            : nothing}
+
+        <p class="mfa-disclaimer">
+          ${msg("By confirming, the FIDA tokens will be transferred from your wallet to complete this payment.")}
+        </p>
+      </div>
+    `;
+    }
+    renderMfaFooter() {
+        const resendDisabled = this._resendCountdown > 0 || this.mfaLoading;
+        const resendLabel = this._resendCountdown > 0
+            ? msg(html `Resend code (${this._resendCountdown}s)`)
+            : msg("Resend code");
+        return html `
+      <div class="mfa-footer">
+        <button
+          class="resend-link"
+          @click=${this.handleMfaResend}
+          ?disabled=${resendDisabled}
+        >
+          ${resendLabel}
+        </button>
+        <coras-button
+          @click=${this.handleMfaCodeSubmit}
+          ?disabled=${this.mfaLoading || this.otpValue.length < 6}
+          ?loading=${this.mfaLoading}
+        >
+          ${this.mfaLoading ? msg("Confirming...") : msg("Confirm")}
+        </coras-button>
+      </div>
+    `;
+    }
+    renderLoadingContent() {
+        return html `
+      <div class="loading-state">
+        <div class="loading-spinner"></div>
+        <p class="loading-text">${msg("Confirming your payment...")}</p>
+        <p class="loading-text">
+          ${msg("Please wait while the transaction is being processed.")}
+        </p>
+      </div>
+    `;
+    }
+    renderContent() {
+        if (this.modalState === "loading") {
+            return this.renderLoadingContent();
+        }
+        return this.renderMfaContent();
+    }
+    renderFooter() {
+        if (this.modalState === "loading") {
+            return nothing;
+        }
+        return this.renderMfaFooter();
+    }
+    render() {
+        const isLoading = this.modalState === "loading";
+        return html `
+      <coras-dialog
+        ?open=${this.open}
+        label=${this.getModalTitle()}
+        .preventClose=${isLoading || this.mfaLoading}
+        .showCloseButton=${!isLoading && !this.mfaLoading}
+        @dialog-closed=${this.handleDialogClosed}
+      >
+        <h2 slot="header" class="modal-title">${this.getModalTitle()}</h2>
+        ${this.renderContent()}
+        <div slot="footer" class="modal-footer">${this.renderFooter()}</div>
+      </coras-dialog>
+    `;
+    }
+};
+__decorate([
+    property({ type: Boolean, reflect: true })
+], CorasTransferModal.prototype, "open", void 0);
+__decorate([
+    property({ type: String })
+], CorasTransferModal.prototype, "amount", void 0);
+__decorate([
+    property({ type: String, attribute: "masked-phone" })
+], CorasTransferModal.prototype, "maskedPhone", void 0);
+__decorate([
+    property({ type: String, attribute: "modal-state", reflect: true })
+], CorasTransferModal.prototype, "modalState", void 0);
+__decorate([
+    property({ type: String })
+], CorasTransferModal.prototype, "locale", void 0);
+__decorate([
+    property({ type: String, attribute: "assets-url" })
+], CorasTransferModal.prototype, "assetsURL", void 0);
+__decorate([
+    property({ type: String, attribute: "mfa-error" })
+], CorasTransferModal.prototype, "mfaError", void 0);
+__decorate([
+    property({ type: Boolean, attribute: "mfa-loading" })
+], CorasTransferModal.prototype, "mfaLoading", void 0);
+__decorate([
+    state()
+], CorasTransferModal.prototype, "otpValue", void 0);
+__decorate([
+    state()
+], CorasTransferModal.prototype, "_resendCountdown", void 0);
+CorasTransferModal = __decorate([
+    localized()
+], CorasTransferModal);
+export { CorasTransferModal };

package/dist/components/transfer-modal/transfer-modal.d.ts

@@ -0,0 +1,8 @@
+import { CorasTransferModal } from "./transfer-modal.component.js";
+export * from "./transfer-modal.component.js";
+export default CorasTransferModal;
+declare global {
+    interface HTMLElementTagNameMap {
+        "coras-transfer-modal": CorasTransferModal;
+    }
+}

package/dist/components/transfer-modal/transfer-modal.js

@@ -0,0 +1,6 @@
+import { CorasTransferModal } from "./transfer-modal.component.js";
+export * from "./transfer-modal.component.js";
+export default CorasTransferModal;
+if (!customElements.get("coras-transfer-modal")) {
+    customElements.define("coras-transfer-modal", CorasTransferModal);
+}

package/dist/components/transfer-modal/transfer-modal.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

package/dist/components/transfer-modal/transfer-modal.styles.js

@@ -0,0 +1,141 @@
+import { css } from "lit";
+export default css `
+  :host {
+    display: contents;
+  }
+
+  .modal-title {
+    font-size: 1.25rem;
+    font-weight: 600;
+    color: var(--coras-color-text-primary, var(--coras-color-neutral-900));
+    margin: 0;
+  }
+
+  .modal-footer {
+    display: flex;
+    gap: 0.75rem;
+  }
+
+  .error-message {
+    background: var(--coras-color-error-surface, #fef2f2);
+    color: var(--coras-color-error, #dc2626);
+    padding: 0.75rem 1rem;
+    border-radius: var(--coras-radius-md, 8px);
+    font-size: 0.875rem;
+    margin-bottom: 1rem;
+  }
+
+  .loading-state {
+    text-align: center;
+    padding: 2rem 0;
+  }
+
+  .loading-spinner {
+    width: 40px;
+    height: 40px;
+    border: 3px solid var(--coras-color-border, #e0e0e0);
+    border-top-color: var(--coras-color-primary, #0052ff);
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+    margin: 0 auto 1rem;
+  }
+
+  @keyframes spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  .loading-text {
+    color: var(--coras-color-text-secondary, #666666);
+    font-size: 0.875rem;
+  }
+
+  /* MFA Verification State */
+  .mfa-state {
+    text-align: center;
+    padding: 0.5rem 0;
+  }
+
+  /* Payment summary block */
+  .payment-summary {
+    margin-bottom: 1rem;
+  }
+
+  .payment-amount {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    font-size: 2rem;
+    font-weight: 700;
+    color: var(--coras-color-text-primary, var(--coras-color-neutral-900));
+    line-height: 1.2;
+  }
+
+  .fida-logo {
+    width: 1.75rem;
+    height: 1.75rem;
+  }
+
+  .mfa-instruction {
+    color: var(--coras-color-text-secondary, #666666);
+    font-size: 0.875rem;
+    line-height: 1.5;
+    margin-bottom: 1.5rem;
+  }
+
+  .mfa-instruction strong {
+    color: var(--coras-color-text-primary, var(--coras-color-neutral-900));
+  }
+
+  .mfa-otp-container {
+    display: flex;
+    justify-content: center;
+    margin-bottom: 1rem;
+  }
+
+  .mfa-error {
+    margin-top: 1rem;
+    margin-bottom: 0;
+  }
+
+  .mfa-disclaimer {
+    font-size: 0.75rem;
+    color: var(--coras-color-text-secondary, #666666);
+    line-height: 1.4;
+    margin-top: 1rem;
+    margin-bottom: 0;
+  }
+
+  .mfa-footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    gap: 0.75rem;
+  }
+
+  .mfa-footer coras-button {
+    min-width: 120px;
+  }
+
+  .resend-link {
+    background: none;
+    border: none;
+    color: var(--coras-color-primary, #0052ff);
+    font-size: 0.875rem;
+    cursor: pointer;
+    text-decoration: underline;
+    padding: 0;
+  }
+
+  .resend-link:hover {
+    color: var(--coras-color-primary-hover, #0040cc);
+  }
+
+  .resend-link:disabled {
+    color: var(--coras-color-text-disabled, #999999);
+    cursor: not-allowed;
+  }
+`;

package/dist/containers/basket/basket.component.d.ts

@@ -0,0 +1,25 @@
+import { LitElement } from "lit";
+import "../../components/basket/basket.js";
+import "../../components/basket-empty/basket-empty.js";
+import "../../components/basket-item/basket-item.js";
+import "../../components/basket-item-ticket/basket-item-ticket.js";
+import "../../components/button/button.js";
+import "../../contexts/basket/basket.js";
+import type { SupportedCurrencies, SupportedLocales } from "../../core/types/index.js";
+export declare class CorasBasket extends LitElement {
+    expanded: boolean;
+    checkout: boolean;
+    locale: SupportedLocales;
+    currency: SupportedCurrencies;
+    assetsURL: string;
+    private basket;
+    connectedCallback(): Promise<void>;
+    private getFormattedPrice;
+    private handleCheckout;
+    private handleRemoveItem;
+    private renderCheckoutButton;
+    private renderTickets;
+    private getSeatInfo;
+    private renderBasketItems;
+    render(): import("lit").TemplateResult<1>;
+}