@artaio/arta-browser 2.22.0 → 2.23.1

package/dist/index.d.ts

@@ -3,10 +3,17 @@ import './components/Modal/index.css';
 import './components/TrackingDrawer/index.css';
 import Estimate from './estimate';
 import Tracking from './tracking';
+import Pay from './pay';
+import InfoModal from './infoModal';
 export * from './arta';
 export * from './estimate';
 export * from './tracking';
-export { Estimate, Tracking };
+export { Estimate, Tracking, Pay, InfoModal };
+export { monthlyEstimate } from './monthlyEstimate';
+export type { InfoInput, InfoConfig, PartialInfoConfig, InfoFullConfig, } from './infoConfig';
+export type { MonthlyEstimate, MonthlyEstimateInput } from './monthlyEstimate';
+export type { PayInput, PayCallbacks, PayCompletion, PayCompletionStatus, PayCloseEvent, PayCloseReason, PayError, PayPosition, PayConfig, PartialPayConfig, PayFullConfig, } from './payConfig';
+export type { PayInboundMessage, PayOutboundMessage } from './messaging';
 export * from './MetadataTypes';
 export type { EstimateConfig, EstimateBody, PartialEstimateConfig, } from './estimateConfig';
 export type { TrackingConfig, PartialTrackingConfig } from './trackingConfig';

package/dist/index.js

@@ -5,6 +5,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var arta = require('./arta.js');
 var estimate = require('./estimate.js');
 var tracking = require('./tracking.js');
+var pay = require('./pay.js');
+var infoModal = require('./infoModal.js');
+var monthlyEstimate = require('./monthlyEstimate.js');
 
 const init = () => {
     window.Arta = new arta.default();
@@ -14,4 +17,7 @@ var index = window.Arta;
 
 exports.Estimate = estimate.default;
 exports.Tracking = tracking.default;
+exports.Pay = pay.default;
+exports.InfoModal = infoModal.default;
+exports.monthlyEstimate = monthlyEstimate.monthlyEstimate;
 exports.default = index;

package/dist/infoConfig.d.ts

@@ -0,0 +1,13 @@
+import { type ArtaJsFullConfig } from './arta';
+import { type PayPosition, DEFAULT_PAY_ORIGIN } from './payConfig';
+export interface InfoInput {
+    totalPrice?: number;
+}
+export interface InfoConfig {
+    position: PayPosition;
+}
+export type PartialInfoConfig = Partial<InfoConfig>;
+export interface InfoFullConfig extends InfoConfig, ArtaJsFullConfig {
+}
+export declare const getFullInfoConfig: (artaConfig: ArtaJsFullConfig, infoConfig?: PartialInfoConfig) => InfoFullConfig;
+export { DEFAULT_PAY_ORIGIN };

package/dist/infoConfig.js

@@ -0,0 +1,10 @@
+'use strict';
+
+const defaultInfoConfig = {
+    position: 'center',
+};
+const getFullInfoConfig = (artaConfig, infoConfig = {}) => {
+    return Object.assign({}, defaultInfoConfig, artaConfig, infoConfig);
+};
+
+exports.getFullInfoConfig = getFullInfoConfig;

package/dist/infoModal.d.ts

@@ -0,0 +1,29 @@
+import type { InfoFullConfig, InfoInput } from './infoConfig';
+export default class InfoModal {
+    private readonly input;
+    private readonly config;
+    isOpen: boolean;
+    private overlay;
+    private iframe;
+    private destroyed;
+    private frameShown;
+    private revealTimer;
+    private lastFrameHeight;
+    private readonly payOrigin;
+    private readonly messageListener;
+    private readonly keydownListener;
+    constructor(input: InfoInput, config: InfoFullConfig);
+    open(): void;
+    close(): void;
+    destroy(): void;
+    private mount;
+    private centerHeightPx;
+    private frameSrc;
+    private reveal;
+    private showFrame;
+    private enableFrameTransition;
+    private clearRevealTimer;
+    private handleMessage;
+    private handleResize;
+    private applyFrameHeight;
+}

package/dist/infoModal.js

@@ -0,0 +1,234 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var messaging = require('./messaging.js');
+var payConfig = require('./payConfig.js');
+
+// Arta Pay CTA info modal: a login-free marketing modal opened on demand via
+// `Arta.openArtaPayInfoModal()`. Unlike the checkout modal it has no purchase
+// request, no client token and no handshake — it mounts on `open()` and only
+// listens for the iframe's resize/close reports. The backdrop shows at once;
+// the card itself appears on the widget's first height report (or after a
+// short grace period), so it arrives at its final size instead of resizing in
+// front of the buyer. Every message is accepted only from the iframe this
+// modal created.
+const OVERLAY_ID = 'arta-pay-info-overlay';
+const FRAME_MIN_HEIGHT_PX = 240;
+const RESIZE_DEAD_BAND_PX = 2;
+const FRAME_HEIGHT_TRANSITION = 'height 0.15s ease';
+// How long the card waits for the widget's first height report before it is
+// shown at the placeholder height anyway.
+const FRAME_REVEAL_GRACE_MS = 1_000;
+const overlayBaseCss = 'box-sizing:border-box;position:fixed;inset:0;display:flex;background:rgba(17,15,16,0.55);' +
+    'z-index:2147483000;visibility:hidden;pointer-events:none;';
+const overlayPositionCss = {
+    center: 'align-items:center;justify-content:center;',
+    full_screen: 'align-items:stretch;justify-content:stretch;',
+    left: 'align-items:stretch;justify-content:flex-start;',
+    right: 'align-items:stretch;justify-content:flex-end;',
+};
+// The card starts transparent and without a height transition: the first
+// report sizes it instantly, and only visible changes animate (see
+// `showFrame`). Opacity, not `visibility`: an iframe made explicitly visible
+// would keep painting after the overlay is hidden on close, since CSS lets a
+// visible child override a hidden parent, while opacity leaves the overlay's
+// visibility in charge of both.
+const frameBaseCss = 'box-sizing:content-box;border:0;background:#fff;opacity:0;';
+// Placeholder heights for the centered card until the widget reports its own.
+// The view is taller when it carries a financing estimate (rendered only when
+// a total price is supplied), so the placeholder follows the same condition;
+// neither value has to match the widget exactly.
+const CENTER_HEIGHT_PX = 412;
+const CENTER_WITH_ESTIMATE_HEIGHT_PX = 753;
+const framePositionCss = (centerHeightPx) => ({
+    center: `width:min(576px, calc(100vw - 32px));height:min(${centerHeightPx}px, calc(100vh - 32px));` +
+        'border:1px solid #d2d2d2;border-radius:8px;' +
+        'box-shadow:0 24px 64px rgba(17,15,16,0.35);',
+    full_screen: 'width:100vw;height:100vh;',
+    left: 'width:min(460px, 100vw);height:100vh;border-right:1px solid #d2d2d2;' +
+        'box-shadow:24px 0 64px rgba(17,15,16,0.35);',
+    right: 'width:min(460px, 100vw);height:100vh;border-left:1px solid #d2d2d2;' +
+        'box-shadow:-24px 0 64px rgba(17,15,16,0.35);',
+});
+class InfoModal {
+    input;
+    config;
+    isOpen = false;
+    overlay;
+    iframe;
+    destroyed = false;
+    frameShown = false;
+    revealTimer;
+    lastFrameHeight;
+    payOrigin;
+    messageListener = (event) => this.handleMessage(event);
+    keydownListener = (event) => {
+        if (event.key === 'Escape' && this.isOpen) {
+            this.close();
+        }
+    };
+    constructor(input, config) {
+        this.input = input;
+        this.config = config;
+        this.payOrigin = config.payOrigin ?? payConfig.DEFAULT_PAY_ORIGIN;
+    }
+    open() {
+        if (this.destroyed) {
+            throw new Error('This Arta Pay info modal has been destroyed');
+        }
+        if (!this.overlay) {
+            this.mount();
+        }
+        this.reveal();
+    }
+    // Hides the overlay without tearing down the iframe, so a later `open()`
+    // shows it again instantly.
+    close() {
+        this.clearRevealTimer();
+        if (this.overlay) {
+            this.overlay.style.visibility = 'hidden';
+            this.overlay.style.pointerEvents = 'none';
+        }
+        if (this.iframe) {
+            this.iframe.style.transition = '';
+        }
+        document.removeEventListener('keydown', this.keydownListener);
+        this.isOpen = false;
+    }
+    destroy() {
+        this.close();
+        window.removeEventListener('message', this.messageListener);
+        this.overlay?.remove();
+        this.overlay = undefined;
+        this.iframe = undefined;
+        this.destroyed = true;
+    }
+    mount() {
+        if (this.destroyed || this.overlay || !document.body) {
+            return;
+        }
+        window.addEventListener('message', this.messageListener);
+        const position = this.config.position;
+        this.overlay = document.createElement('div');
+        this.overlay.id = OVERLAY_ID;
+        this.overlay.style.cssText = overlayBaseCss + overlayPositionCss[position];
+        this.overlay.addEventListener('click', (event) => {
+            if (event.target === this.overlay) {
+                this.close();
+            }
+        });
+        this.iframe = document.createElement('iframe');
+        this.iframe.style.cssText =
+            frameBaseCss + framePositionCss(this.centerHeightPx())[position];
+        this.iframe.setAttribute('title', 'Arta Pay');
+        this.iframe.src = this.frameSrc();
+        this.overlay.appendChild(this.iframe);
+        document.body.appendChild(this.overlay);
+    }
+    // The estimate is what makes the view taller, and it is rendered exactly when
+    // a total price rides the URL, so the same condition picks the opening height.
+    centerHeightPx() {
+        return this.input.totalPrice === undefined
+            ? CENTER_HEIGHT_PX
+            : CENTER_WITH_ESTIMATE_HEIGHT_PX;
+    }
+    // The public key is an identifier, not a credential; the optional total price
+    // only drives a financing estimate. Both ride the URL because the info modal
+    // has no postMessage handshake.
+    frameSrc() {
+        let src = this.payOrigin +
+            '/artapay-widget/info?pk=' +
+            encodeURIComponent(this.config.apiKey);
+        if (this.input.totalPrice !== undefined) {
+            src +=
+                '&total_price=' + encodeURIComponent(String(this.input.totalPrice));
+        }
+        return src;
+    }
+    reveal() {
+        if (!this.overlay) {
+            return;
+        }
+        this.overlay.style.visibility = 'visible';
+        this.overlay.style.pointerEvents = 'auto';
+        document.addEventListener('keydown', this.keydownListener);
+        this.isOpen = true;
+        if (this.frameShown) {
+            // Reopened: the card already has its measured height, so it shows at
+            // once and later changes animate.
+            this.enableFrameTransition();
+        }
+        else {
+            this.revealTimer = window.setTimeout(() => this.showFrame(), FRAME_REVEAL_GRACE_MS);
+        }
+    }
+    // Called on the first height report (or the grace timeout). The card is
+    // sized before it becomes visible, so the buyer never sees it resize.
+    showFrame() {
+        this.clearRevealTimer();
+        if (!this.iframe || this.frameShown) {
+            return;
+        }
+        this.frameShown = true;
+        this.iframe.style.opacity = '1';
+        this.enableFrameTransition();
+    }
+    enableFrameTransition() {
+        if (!this.iframe) {
+            return;
+        }
+        // Flush any height applied while hidden before turning the transition on,
+        // or that pending change would animate as the card appears.
+        void this.iframe.offsetHeight;
+        this.iframe.style.transition = FRAME_HEIGHT_TRANSITION;
+    }
+    clearRevealTimer() {
+        if (this.revealTimer !== undefined) {
+            window.clearTimeout(this.revealTimer);
+            this.revealTimer = undefined;
+        }
+    }
+    handleMessage(event) {
+        if (event.origin !== this.payOrigin ||
+            !this.iframe ||
+            event.source !== this.iframe.contentWindow ||
+            !messaging.isPayInboundMessage(event.data)) {
+            return;
+        }
+        const data = event.data;
+        if (data.type === 'arta-pay:resize') {
+            this.handleResize(data);
+        }
+        else if (data.type === 'arta-pay:close') {
+            this.close();
+        }
+    }
+    handleResize(data) {
+        const height = messaging.parseResizeHeight(data);
+        if (height === undefined) {
+            return;
+        }
+        // Side panels and full screen keep the whole viewport height.
+        if (this.config.position === 'center') {
+            this.applyFrameHeight(height);
+        }
+        if (this.isOpen) {
+            this.showFrame();
+        }
+    }
+    applyFrameHeight(height) {
+        if (!this.iframe) {
+            return;
+        }
+        const px = Math.max(FRAME_MIN_HEIGHT_PX, Math.round(height));
+        if (this.lastFrameHeight !== undefined &&
+            Math.abs(px - this.lastFrameHeight) < RESIZE_DEAD_BAND_PX) {
+            return;
+        }
+        this.lastFrameHeight = px;
+        this.iframe.style.height = `min(${px}px, calc(100vh - 32px))`;
+    }
+}
+
+exports.default = InfoModal;

package/dist/messaging.d.ts

@@ -0,0 +1,60 @@
+import { type PayCloseReason, type PayCompletionStatus, type PayError, type PayPosition } from './payConfig';
+export interface PayHandshakeMessage {
+    type: 'arta-pay:handshake';
+}
+export interface PayReadyMessage {
+    type: 'arta-pay:ready';
+}
+export interface PayResizeMessage {
+    type: 'arta-pay:resize';
+    height: number;
+}
+export interface PayCompleteMessage {
+    type: 'arta-pay:complete';
+    purchaseRequestId: string;
+    purchaseId?: string;
+    status: PayCompletionStatus;
+}
+export interface PayCloseMessage {
+    type: 'arta-pay:close';
+    purchaseRequestId: string;
+    reason: PayCloseReason;
+}
+export interface PayErrorMessage {
+    type: 'arta-pay:error';
+    code: string;
+    message: string;
+    recoverable: boolean;
+    requestId?: string;
+}
+export type PayInboundMessage = PayHandshakeMessage | PayReadyMessage | PayResizeMessage | PayCompleteMessage | PayCloseMessage | PayErrorMessage;
+export type PayInboundMessageType = PayInboundMessage['type'];
+export interface PayInitMessage {
+    type: 'arta-pay:init';
+    purchaseRequestId: string;
+    clientToken: string;
+    position: PayPosition;
+}
+export interface PayOpenMessage {
+    type: 'arta-pay:open';
+}
+export interface PayCloseRequestMessage {
+    type: 'arta-pay:close-request';
+}
+export type PayOutboundMessage = PayInitMessage | PayOpenMessage | PayCloseRequestMessage;
+export type PayOutboundMessageType = PayOutboundMessage['type'];
+export interface RawPayMessage {
+    type: PayInboundMessageType;
+    [key: string]: unknown;
+}
+export declare const isPayInboundMessage: (data: unknown) => data is RawPayMessage;
+export declare const parseResizeHeight: (data: unknown) => number | undefined;
+export interface ParsedCompletion {
+    purchaseRequestId?: string;
+    purchaseId?: string;
+    status: PayCompletionStatus;
+}
+export declare const parseCompletion: (data: unknown) => ParsedCompletion | undefined;
+export declare const parseError: (data: unknown) => PayError;
+export declare const parseCloseReason: (data: unknown) => PayCloseReason;
+export declare const postPayMessage: (target: Window, targetOrigin: string, message: PayOutboundMessage) => void;

package/dist/messaging.js

@@ -0,0 +1,86 @@
+'use strict';
+
+var payConfig = require('./payConfig.js');
+
+// ---------------------------------------------------------------------------
+// Parsing. Anything can arrive over postMessage, so the SDK narrows the raw
+// data on the `type` discriminator first and validates each payload
+// separately: the parsers return `undefined` (or a safe default) instead of
+// trusting the shape.
+// ---------------------------------------------------------------------------
+const INBOUND_TYPES = [
+    'arta-pay:handshake',
+    'arta-pay:ready',
+    'arta-pay:resize',
+    'arta-pay:complete',
+    'arta-pay:close',
+    'arta-pay:error',
+];
+const isRecord = (data) => typeof data === 'object' && data !== null;
+const optionalString = (value) => typeof value === 'string' && value.length > 0 ? value : undefined;
+const isPayInboundMessage = (data) => {
+    return (isRecord(data) &&
+        typeof data.type === 'string' &&
+        INBOUND_TYPES.indexOf(data.type) !== -1);
+};
+const parseResizeHeight = (data) => {
+    if (!isRecord(data)) {
+        return undefined;
+    }
+    const height = data.height;
+    return typeof height === 'number' && isFinite(height) && height > 0
+        ? height
+        : undefined;
+};
+// `undefined` for anything that is not a v2 outcome (including the v1
+// `authenticated` signal).
+const parseCompletion = (data) => {
+    if (!isRecord(data)) {
+        return undefined;
+    }
+    const status = data.status;
+    if (typeof status !== 'string' ||
+        payConfig.PAY_COMPLETION_STATUSES.indexOf(status) === -1) {
+        return undefined;
+    }
+    if (data.purchaseId !== undefined && typeof data.purchaseId !== 'string') {
+        return undefined;
+    }
+    return {
+        purchaseRequestId: optionalString(data.purchaseRequestId),
+        purchaseId: optionalString(data.purchaseId),
+        status: status,
+    };
+};
+// Never returns `undefined`: an error message with a broken payload is still
+// an error worth reporting, so malformed fields fall back to safe defaults
+// (`unknown`, non-recoverable).
+const parseError = (data) => {
+    const record = isRecord(data) ? data : {};
+    return {
+        code: optionalString(record.code) ?? 'unknown',
+        message: optionalString(record.message) ?? 'Unknown error',
+        recoverable: record.recoverable === true,
+        requestId: optionalString(record.requestId),
+    };
+};
+const parseCloseReason = (data) => {
+    if (!isRecord(data)) {
+        return 'customer';
+    }
+    const reason = data.reason;
+    return typeof reason === 'string' &&
+        payConfig.PAY_CLOSE_REASONS.indexOf(reason) !== -1
+        ? reason
+        : 'customer';
+};
+const postPayMessage = (target, targetOrigin, message) => {
+    target.postMessage(message, targetOrigin);
+};
+
+exports.isPayInboundMessage = isPayInboundMessage;
+exports.parseCloseReason = parseCloseReason;
+exports.parseCompletion = parseCompletion;
+exports.parseError = parseError;
+exports.parseResizeHeight = parseResizeHeight;
+exports.postPayMessage = postPayMessage;

package/dist/monthlyEstimate.d.ts

@@ -0,0 +1,9 @@
+export interface MonthlyEstimateInput {
+    totalPrice: number;
+    currency?: string;
+}
+export interface MonthlyEstimate {
+    amountPerMonth: number;
+    amountPerMonthCurrency: string;
+}
+export declare const monthlyEstimate: (input: MonthlyEstimateInput) => Promise<MonthlyEstimate>;

package/dist/monthlyEstimate.js

@@ -0,0 +1,35 @@
+'use strict';
+
+const MINIMUM_DEPOSIT_RATIO = 0.1;
+const FLAT_FEE_RATE = 0.125;
+const INSTALLMENT_COUNT = 9;
+// A lightweight "from $X/mo" estimate for placements and CTAs, mirroring the
+// checkout slider's math (Buyers.ArtaPay.DepositMath + FinancingPreview): the
+// minimum 10% deposit, a flat 12.5% finance charge on the financed amount, split
+// over 9 monthly payments, and rounded up to the next whole dollar as shown in
+// the interface. Computed in integer cents to avoid floating-point drift. The
+// checkout shows the buyer's exact, quoted schedule.
+//
+// Async on purpose: the rates above are a copy of the server's model, and this
+// is meant to move behind an API call so the two cannot drift. Returning a
+// promise now means that move is an implementation change rather than a
+// breaking one for callers.
+const monthlyEstimate = async (input) => {
+    const currency = input.currency || 'USD';
+    const totalCents = Math.round(input.totalPrice * 100);
+    if (!isFinite(totalCents) || totalCents <= 0) {
+        return { amountPerMonth: 0, amountPerMonthCurrency: currency };
+    }
+    const minDepositCents = Math.ceil(totalCents * MINIMUM_DEPOSIT_RATIO);
+    const financedCents = totalCents - minDepositCents;
+    const financeChargeCents = Math.round(financedCents * FLAT_FEE_RATE);
+    const principalCents = Math.round(financedCents / INSTALLMENT_COUNT);
+    const feeCents = Math.round(financeChargeCents / INSTALLMENT_COUNT);
+    const monthlyCents = principalCents + feeCents;
+    return {
+        amountPerMonth: Math.ceil(monthlyCents / 100),
+        amountPerMonthCurrency: currency,
+    };
+};
+
+exports.monthlyEstimate = monthlyEstimate;

package/dist/pay.d.ts

@@ -0,0 +1,37 @@
+import { type PayCallbacks, type PayFullConfig, type PayInput } from './payConfig';
+export default class Pay {
+    private readonly input;
+    private readonly callbacks;
+    private readonly config;
+    isReady: boolean;
+    isOpen: boolean;
+    private overlay;
+    private iframe;
+    private handshakeTimer;
+    private destroyed;
+    private completed;
+    private openWhenMounted;
+    private lastFrameHeight;
+    private readonly payOrigin;
+    private readonly messageListener;
+    private readonly keydownListener;
+    private readonly domReadyListener;
+    constructor(input: PayInput, callbacks: PayCallbacks, config: PayFullConfig);
+    open(): void;
+    close(): void;
+    destroy(): void;
+    private mount;
+    private reveal;
+    private requestClose;
+    private handleMessage;
+    private handleHandshake;
+    private handleReady;
+    private handleResize;
+    private handleComplete;
+    private handleError;
+    private handleHandshakeTimeout;
+    private abort;
+    private postToFrame;
+    private startHandshakeTimer;
+    private clearHandshakeTimer;
+}