@jupiterdo/sdk 0.1.0

package/dist/index.umd.js

@@ -0,0 +1,613 @@
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
+    typeof define === 'function' && define.amd ? define(['exports'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Jupiter = {}));
+})(this, (function (exports) { 'use strict';
+
+    /******************************************************************************
+    Copyright (c) Microsoft Corporation.
+
+    Permission to use, copy, modify, and/or distribute this software for any
+    purpose with or without fee is hereby granted.
+
+    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+    PERFORMANCE OF THIS SOFTWARE.
+    ***************************************************************************** */
+    /* global Reflect, Promise, SuppressedError, Symbol, Iterator */
+
+
+    function __awaiter(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());
+        });
+    }
+
+    typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+        var e = new Error(message);
+        return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+    };
+
+    /**
+     * API base URLs for different environments
+     */
+    const API_URLS = {
+        production: "https://api.jupiter.do",
+        sandbox: "https://api-sandbox.jupiter.do",
+        localhost: "http://localhost:8000",
+    };
+    /**
+     * App URLs for different environments
+     */
+    const APP_URLS = {
+        production: "https://jupiter.do",
+        sandbox: "https://sandbox.jupiter.do",
+        localhost: "http://localhost:3000",
+    };
+
+    /**
+     * API client for communicating with Jupiter backend
+     */
+    class JupiterAPI {
+        constructor(config) {
+            this.apiKey = config.apiKey;
+            this.baseUrl = API_URLS[config.environment || "production"];
+        }
+        createPaymentLink(amount, referenceId) {
+            return __awaiter(this, void 0, void 0, function* () {
+                var _a;
+                let response;
+                try {
+                    response = yield fetch(`${this.baseUrl}/sdk/link/`, {
+                        method: "POST",
+                        headers: {
+                            "Content-Type": "application/json",
+                            Authorization: `Bearer ${this.apiKey}`,
+                        },
+                        body: JSON.stringify({
+                            amount,
+                            reference_id: referenceId,
+                        }),
+                    });
+                }
+                catch (error) {
+                    // Handle network errors
+                    throw {
+                        code: "NETWORK_ERROR",
+                        message: error instanceof Error ? error.message : "Unknown error",
+                    };
+                }
+                if (!response.ok) {
+                    const error = yield response.json().catch(() => ({}));
+                    throw {
+                        code: error.code || `HTTP_${response.status}`,
+                        message: error.detail ||
+                            ((_a = error.amount) === null || _a === void 0 ? void 0 : _a[0]) ||
+                            `API error: ${response.status} ${response.statusText}`,
+                        details: error,
+                    };
+                }
+                return response.json();
+            });
+        }
+    }
+
+    const MODAL_STYLES = `
+  /* Animations */
+  @keyframes jupiter-fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
+
+  @keyframes jupiter-fadeOut {
+    from { opacity: 1; }
+    to { opacity: 0; }
+  }
+
+  @keyframes jupiter-fadeInZoom {
+    from {
+      opacity: 0;
+      transform: translate(-50%, -50%) scale(0.95);
+    }
+    to {
+      opacity: 1;
+      transform: translate(-50%, -50%) scale(1);
+    }
+  }
+
+  @keyframes jupiter-fadeOutZoom {
+    from {
+      opacity: 1;
+      transform: translate(-50%, -50%) scale(1);
+    }
+    to {
+      opacity: 0;
+      transform: translate(-50%, -50%) scale(0.95);
+    }
+  }
+
+  @keyframes jupiter-slideInFromRight {
+    from { transform: translateX(100%); }
+    to { transform: translateX(0); }
+  }
+
+  @keyframes jupiter-slideOutToRight {
+    from { transform: translateX(0); }
+    to { transform: translateX(100%); }
+  }
+
+  /* Overlay */
+  .jupiter-modal-overlay {
+    position: fixed;
+    inset: 0;
+    z-index: 9999;
+    background-color: rgba(0, 0, 0, 0.5);
+    display: none;
+  }
+
+  .jupiter-modal-overlay.open {
+    display: block;
+    animation: jupiter-fadeIn 0.2s ease-out;
+  }
+
+  .jupiter-modal-overlay.closing {
+    animation: jupiter-fadeOut 0.2s ease-out;
+  }
+
+  /* Container */
+  .jupiter-modal-container {
+    display: none;
+    position: relative;
+    border-radius: 0.625rem;
+    overflow: hidden;
+    background-color: oklch(0.145 0 0);
+    
+  }
+
+  .jupiter-modal-container.open {
+    display: flex;
+    flex-direction: column;
+  }
+
+  /* Container - Mobile */
+  @media (max-width: 767px) {
+    .jupiter-modal-container {
+      border-radius: 0;
+    }
+
+    .jupiter-modal-container.open {
+      position: fixed;
+      inset: 0;
+      z-index: 10000;
+      animation: jupiter-slideInFromRight 0.5s ease-out;
+    }
+
+    .jupiter-modal-container.closing {
+      animation: jupiter-slideOutToRight 0.3s ease-out;
+    }
+
+    .jupiter-modal-overlay {
+      pointer-events: none;
+    }
+  }
+
+  /* Container - Desktop */
+  @media (min-width: 768px) {
+    .jupiter-modal-container.open {
+      position: fixed;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      z-index: 10000;
+      width: calc(100% - 2rem);
+      max-width: 440px;
+      max-height: calc(100vh - 4rem);
+      padding: 18px;
+      animation: jupiter-fadeInZoom 0.2s ease-out;
+    }
+
+    .jupiter-modal-container.closing {
+      animation: jupiter-fadeOutZoom 0.2s ease-out;
+    }
+  }
+
+  /* Close Button */
+  .jupiter-modal-close {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    opacity: 0.7;
+    transition: opacity 0.2s;
+    padding: 0.25rem;
+    border-radius: 0.25rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 10001;
+  }
+
+  .jupiter-modal-close:hover {
+    opacity: 1;
+  }
+
+  /* Iframe - Mobile */
+  @media (max-width: 767px) {
+    .jupiter-modal-iframe {
+      width: 100%;
+      height: 100%;
+      flex: 1;
+      border: none;
+    }
+  }
+
+  /* Iframe - Desktop */
+  @media (min-width: 768px) {
+    .jupiter-modal-iframe {
+      width: 100%;
+      height: 600px;
+      border: none;
+    }
+  }
+
+  /* Loading Skeleton */
+  .jupiter-modal-skeleton {
+    position: absolute;
+    inset: 0;
+    background-color: #1a1a1a;
+    padding: 1.5rem;
+    padding-top: 32px;
+    display: flex;
+    flex-direction: column;
+    gap: 32px;
+    z-index: 1;
+  }
+
+  .jupiter-modal-skeleton.hidden {
+    display: none;
+  }
+
+  @media (min-width: 768px) {
+    .jupiter-modal-skeleton {
+      height: 600px;
+    }
+  }
+
+  .jupiter-skeleton-item {
+    background-color: #2a2a2a;
+    border-radius: 0.5rem;
+    animation: skeleton-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  }
+
+  @keyframes skeleton-pulse {
+    0%, 100% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.5;
+    }
+  }
+`;
+    const SKELETON_HTML = `
+  <div style="display: flex; gap: 12px;">
+    <div class="jupiter-skeleton-item" style="width: 48px; height: 48px; border-radius: 50%;"></div>
+    <div >
+        <p class="jupiter-skeleton-item" style="width: 180px; height: 20px; border-radius: 12px; margin-bottom: 8px"></p>
+        <p class="jupiter-skeleton-item" style="width: 100px; height: 16px; border-radius: 12px"></p>
+    </div>
+  </div>
+  <div style="display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 12px">
+    <p class="jupiter-skeleton-item" style="width: 80px; height: 28px; border-radius: 18px"></p>
+    <p class="jupiter-skeleton-item" style="width: 220px; height: 40px; border-radius: 24px"></p>
+  </div>
+  <div style="height:2px background-color: #e5e7eb;"></div>
+  <div class="jupiter-skeleton-item" style="width: 300px; height: 28px; align-self: center; border-radius: 18px"></div>
+  <div style="display: flex; flex-direction: column; gap: 12px; justify-content: center; align-items: center;">
+    <div class="jupiter-skeleton-item" style="width: 375px; height: 64px; border-radius: calc(infinity * 1px)"></div>
+    <div class="jupiter-skeleton-item" style="width: 375px; height: 64px; border-radius: calc(infinity * 1px)"></div>
+    <div class="jupiter-skeleton-item" style="width: 375px; height: 64px; border-radius: calc(infinity * 1px)"></div>
+  </div>
+`;
+    class Modal {
+        constructor() {
+            this.isOpen = false;
+            this.overlay = null;
+            this.container = null;
+            this.closeButton = null;
+            this.iframe = null;
+            this.skeleton = null;
+            this.initialized = false;
+            this.onCloseCallback = null;
+            this.messageHandler = null;
+        }
+        static getInstance() {
+            if (!Modal.instance) {
+                Modal.instance = new Modal();
+            }
+            return Modal.instance;
+        }
+        injectStyles() {
+            if (document.getElementById("jupiter-modal-styles")) {
+                return;
+            }
+            const style = document.createElement("style");
+            style.id = "jupiter-modal-styles";
+            style.textContent = MODAL_STYLES;
+            document.head.appendChild(style);
+        }
+        initializeElements() {
+            if (this.initialized) {
+                return;
+            }
+            this.injectStyles();
+            // Create overlay
+            this.overlay = document.createElement("div");
+            this.overlay.className = "jupiter-modal-overlay";
+            this.overlay.addEventListener("click", (e) => {
+                if (e.target === this.overlay) {
+                    this.close();
+                }
+            });
+            document.body.appendChild(this.overlay);
+            // Create container
+            this.container = document.createElement("div");
+            this.container.className = "jupiter-modal-container";
+            // Create close button
+            this.closeButton = document.createElement("button");
+            this.closeButton.className = "jupiter-modal-close";
+            this.closeButton.setAttribute("aria-label", "Close");
+            this.closeButton.innerHTML = `
+      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M18 6 6 18"></path>
+        <path d="m6 6 12 12"></path>
+      </svg>
+    `;
+            this.closeButton.addEventListener("click", (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                this.close();
+            });
+            this.container.appendChild(this.closeButton);
+            // Create skeleton
+            this.skeleton = document.createElement("div");
+            this.skeleton.className = "jupiter-modal-skeleton hidden";
+            this.skeleton.innerHTML = SKELETON_HTML;
+            this.container.appendChild(this.skeleton);
+            // Add container to body
+            document.body.appendChild(this.container);
+            this.initialized = true;
+        }
+        showModal(url) {
+            // Show skeleton loader
+            this.skeleton.classList.remove("hidden");
+            // Create iframe (hidden initially)
+            this.iframe = document.createElement("iframe");
+            this.iframe.className = "jupiter-modal-iframe";
+            this.iframe.src = url;
+            this.iframe.setAttribute("allow", "payment");
+            this.iframe.style.opacity = "0";
+            this.container.appendChild(this.iframe);
+            // Show iframe and hide skeleton once loaded
+            this.iframe.addEventListener("load", () => {
+                if (this.iframe && this.skeleton) {
+                    this.skeleton.classList.add("hidden");
+                    this.iframe.style.opacity = "1";
+                    this.iframe.style.transition = "opacity 0.3s ease-out";
+                }
+            }, { once: true });
+            // Show overlay and container
+            this.overlay.classList.add("open");
+            this.container.classList.add("open");
+            // Prevent body scroll when modal is open
+            document.body.style.overflow = "hidden";
+        }
+        hideModal() {
+            var _a, _b, _c, _d;
+            // Remove open class first, then add closing class
+            (_a = this.overlay) === null || _a === void 0 ? void 0 : _a.classList.remove("open");
+            (_b = this.container) === null || _b === void 0 ? void 0 : _b.classList.remove("open");
+            (_c = this.overlay) === null || _c === void 0 ? void 0 : _c.classList.add("closing");
+            (_d = this.container) === null || _d === void 0 ? void 0 : _d.classList.add("closing");
+            // Remove classes and iframe after animation completes
+            setTimeout(() => {
+                var _a, _b;
+                (_a = this.overlay) === null || _a === void 0 ? void 0 : _a.classList.remove("closing");
+                (_b = this.container) === null || _b === void 0 ? void 0 : _b.classList.remove("closing");
+                // Restore body scroll
+                document.body.style.overflow = "";
+                // Remove iframe
+                if (this.iframe) {
+                    this.iframe.remove();
+                    this.iframe = null;
+                }
+            }, 300);
+        }
+        open(url, onClose, onMessage) {
+            // If already open, do nothing
+            if (this.isOpen) {
+                return;
+            }
+            this.isOpen = true;
+            this.onCloseCallback = onClose || null;
+            // Set up message listener if callback provided
+            if (onMessage) {
+                this.messageHandler = onMessage;
+                window.addEventListener("message", this.messageHandler);
+            }
+            this.initializeElements();
+            this.showModal(url);
+        }
+        close() {
+            if (!this.isOpen) {
+                return;
+            }
+            this.isOpen = false;
+            this.hideModal();
+            // Remove message listener if it exists
+            if (this.messageHandler) {
+                window.removeEventListener("message", this.messageHandler);
+                this.messageHandler = null;
+            }
+            // Call onClose callback if provided
+            if (this.onCloseCallback) {
+                this.onCloseCallback();
+                this.onCloseCallback = null;
+            }
+        }
+        destroy() {
+            this.close();
+            // Wait for close animation to complete before removing elements
+            setTimeout(() => {
+                var _a, _b;
+                (_a = this.overlay) === null || _a === void 0 ? void 0 : _a.remove();
+                (_b = this.container) === null || _b === void 0 ? void 0 : _b.remove();
+                this.overlay = null;
+                this.container = null;
+                this.closeButton = null;
+                this.iframe = null;
+                this.skeleton = null;
+                this.initialized = false;
+                Modal.instance = null;
+            }, 350);
+        }
+        static destroyInstance() {
+            if (Modal.instance) {
+                Modal.instance.destroy();
+            }
+        }
+    }
+    Modal.instance = null;
+
+    /**
+     * Main Jupiter SDK class
+     */
+    class Jupiter {
+        /**
+         * Initialize the Jupiter SDK
+         *
+         * @param config - Configuration options
+         *
+         * @example
+         * ```js
+         * const jupiter = new Jupiter({
+         *   apiKey: 'jup_prod-xxxxx',
+         *   environment: 'production'
+         * });
+         * ```
+         */
+        constructor(config) {
+            this.isInUse = false;
+            // Validate API key
+            if (!config.apiKey) {
+                throw {
+                    code: "INVALID_CONFIG",
+                    message: "apiKey is required",
+                };
+            }
+            // Set configuration
+            this.environment = config.environment || "production";
+            this.api = new JupiterAPI(config);
+        }
+        /**
+         * Authorize a payment amount and open loan application flow
+         *
+         * @example
+         * ```js
+         * jupiter.authorize({
+         *   amount: 100000, // $1,000.00 in cents
+         *   referenceId: "order_12345",
+         *   onComplete: ({ loanId, status, referenceId }) => {
+         *     console.log('Loan', loanId, 'is', status);
+         *   },
+         *   onCancel: () => console.log('User cancelled'),
+         *   onError: (error) => console.error(error)
+         * });
+         * ```
+         */
+        authorize({ amount, referenceId, onComplete, onCancel, onError, modalTimeout, }) {
+            // Prevent multiple concurrent authorizations
+            if (this.isInUse) {
+                return;
+            }
+            // Validate inputs (throw immediately, don't call onError)
+            if (typeof amount !== "number" || amount <= 0) {
+                throw {
+                    code: "INVALID_AMOUNT",
+                    message: "Amount must be a positive number in cents",
+                };
+            }
+            if (referenceId && referenceId.length > 255) {
+                throw {
+                    code: "INVALID_REFERENCE_ID",
+                    message: "Reference ID must be 255 characters or less",
+                };
+            }
+            this.isInUse = true;
+            // Handle API call asynchronously internally
+            this.api
+                .createPaymentLink(amount, referenceId)
+                .then((paymentLink) => {
+                const paymentUrl = `${APP_URLS[this.environment]}/pay/${paymentLink.slug}`;
+                // Track if authorization was completed via message
+                let wasCompleted = false;
+                const modal = Modal.getInstance();
+                modal.open(paymentUrl, 
+                // onClose
+                () => {
+                    this.isInUse = false;
+                    // If modal closes without completion message, treat as cancel
+                    if (!wasCompleted) {
+                        onCancel();
+                    }
+                }, 
+                // onMessage
+                (event) => {
+                    if (event.origin !== new URL(APP_URLS[this.environment]).origin) {
+                        return;
+                    }
+                    if (event.data.type === "jupiter_loan_status") {
+                        wasCompleted = true;
+                        setTimeout(() => {
+                            modal.close();
+                        }, modalTimeout !== null && modalTimeout !== void 0 ? modalTimeout : 5000);
+                        this.isInUse = false;
+                        onComplete({
+                            loanId: event.data.loanId,
+                            status: event.data.status,
+                        });
+                    }
+                });
+            })
+                .catch((error) => {
+                this.isInUse = false;
+                onError(error);
+            });
+        }
+    }
+
+    /**
+     * Jupiter JavaScript SDK
+     *
+     * @packageDocumentation
+     */
+    // For UMD build - expose on window object
+    if (typeof window !== "undefined") {
+        window.Jupiter = Jupiter;
+        window.JupiterModal = Modal;
+    }
+
+    exports.Jupiter = Jupiter;
+    exports.Modal = Modal;
+
+}));
+//# sourceMappingURL=index.umd.js.map