@memberstack/dom 1.1.0 → 1.2.0

package/lib/constants/endpoint.d.ts

@@ -1,4 +1,4 @@
 export declare const endpoints: {
-    parentOrigin: string;
-    loaderScript: string;
+    clientEndpoint: string;
+    hostedUI: string;
 };

package/lib/constants/endpoint.js

@@ -2,8 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.endpoints = void 0;
 exports.endpoints = {
-    parentOrigin: "https://ui.memberstack.com",
-    loaderScript: "https://ui.memberstack.com/loader.cjs.production.min.js",
-    // parentOrigin: "http://localhost:3000",
-    // loaderScript: "http://localhost:3000/loader.cjs.production.min.js",
+    clientEndpoint: "http://dev-api.memberstack.com/new-client",
+    hostedUI: "https://ui-20210107.vercel.app"
 };

package/lib/methods/dom/methods.d.ts

@@ -13,5 +13,5 @@ export declare type OpenModalParams = {
 export declare const load: (props: {
     publicKey: string;
 }) => void;
-export declare const openModal: (props: OpenModalParams & DOMConfig) => Promise<void>;
+export declare const openModal: (props: OpenModalParams & DOMConfig) => Promise<HTMLIFrameElement>;
 export declare const hideModal: () => void;

package/lib/methods/dom/methods.js

@@ -35,6 +35,22 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
         if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
     }
 };
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.hideModal = exports.openModal = exports.load = void 0;
 var window_1 = require("../../constants/window");
@@ -42,7 +58,6 @@ var endpoint_1 = require("../../constants/endpoint");
 var cookies_1 = require("../../utils/cookies");
 var persistence_1 = require("../../auth/persistence");
 var logger_1 = require("../../utils/logger");
-var script_1 = require("./script");
 var isBrowser = typeof window !== "undefined";
 var isInitialized = function () {
     if (!isBrowser)
@@ -53,17 +68,6 @@ var isInitialized = function () {
     }
     return true;
 };
-var hasIFrame = function () {
-    var initialized = isInitialized();
-    if (!initialized)
-        return false;
-    var iframe = document.querySelector("iframe[id=\"_ms-iframe\"]");
-    if (!iframe) {
-        console.warn("iFrame has not been loaded yet.");
-        return false;
-    }
-    return true;
-};
 var load = function (props) {
     var _a;
     if (isInitialized()) {
@@ -71,34 +75,126 @@ var load = function (props) {
     }
 };
 exports.load = load;
-var openModal = function (props) { return __awaiter(void 0, void 0, void 0, function () {
+var getAppId = function (publicKey) { return __awaiter(void 0, void 0, void 0, function () {
+    var res, json, e_1;
+    var _a, _b;
+    return __generator(this, function (_c) {
+        switch (_c.label) {
+            case 0:
+                if (typeof window === "undefined")
+                    return [2 /*return*/, null];
+                if (window === null || window === void 0 ? void 0 : window["__MS-APPID"]) {
+                    return [2 /*return*/, window["__MS-APPID"]];
+                }
+                if (!publicKey)
+                    return [2 /*return*/, null];
+                _c.label = 1;
+            case 1:
+                _c.trys.push([1, 4, , 5]);
+                return [4 /*yield*/, fetch(endpoint_1.endpoints.clientEndpoint + "/app", {
+                        headers: {
+                            "x-api-key": publicKey,
+                        },
+                    })];
+            case 2:
+                res = _c.sent();
+                return [4 /*yield*/, res.json()];
+            case 3:
+                json = _c.sent();
+                if (json.code)
+                    throw json;
+                window["__MS-APPID"] = (_a = json.data) === null || _a === void 0 ? void 0 : _a.id;
+                return [2 /*return*/, (_b = json.data) === null || _b === void 0 ? void 0 : _b.id];
+            case 4:
+                e_1 = _c.sent();
+                throw e_1;
+            case 5: return [2 /*return*/];
+        }
+    });
+}); };
+var TYPE_PARAMS = {
+    LOGIN: "login",
+    SIGNUP: "signup",
+    FORGOT_PASSWORD: "sendResetEmail",
+};
+var createLink = function (query) {
+    var _a = query.planId, planId = _a === void 0 ? "" : _a, _b = query.appId, appId = _b === void 0 ? "" : _b, _c = query.page, page = _c === void 0 ? "" : _c, _d = query.priceId, priceId = _d === void 0 ? "" : _d, _e = query.pk, pk = _e === void 0 ? "" : _e, _f = query.hideNav, hideNav = _f === void 0 ? "" : _f;
+    var queryParams = Object.keys({ priceId: priceId, pk: pk, hideNav: hideNav })
+        .map(function (key) { return query[key] && encodeURIComponent(key) + "=" + encodeURIComponent(query[key]); })
+        .filter(function (x) { return x; })
+        .join("&");
+    var baseUrl = endpoint_1.endpoints.hostedUI + "/" + (appId || "") + (page ? "/" + page : "") + (planId ? (page === "signup" ? "/" + planId : "?planId=" + planId) : "");
+    return "" + baseUrl + (baseUrl.includes("?planId") ? "&" : "?") + queryParams;
+};
+var showLoader = function () {
+    var cssEl = document.createElement("style");
+    var css = ".ms__loader { width: 100%; height: 100%; overflow: hidden; position: absolute; top: 0; left: 0; display: flex; justify-content: center; align-items: center; } #msLoader path { fill: #007ace; }";
+    cssEl.appendChild(document.createTextNode(css));
+    document.head.appendChild(cssEl);
+    var loaderHTML = '<?xml version="1.0"?><div class="ms__loader"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="msLoader" x="0px" y="0px" width="40px" height="40px" viewBox="0 0 50 50" style="enable-background: new 0 0 50 50;" xml:space="preserve"><path fill="#000" d="M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z"><animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.6s" repeatCount="indefinite"/></path></svg></div>';
+    var div = document.createElement("div");
+    div.setAttribute("data-ms-loader", "true");
+    div.innerHTML = loaderHTML;
+    document.body.appendChild(div);
+};
+var hideLoader = function () {
     var _a;
-    return __generator(this, function (_b) {
-        switch (_b.label) {
+    (_a = document.querySelector("[data-ms-loader]")) === null || _a === void 0 ? void 0 : _a.remove();
+};
+var openModal = function (props) { return __awaiter(void 0, void 0, void 0, function () {
+    var appId, page, link, div, iframe, iframestyles;
+    var _a, _b;
+    return __generator(this, function (_c) {
+        switch (_c.label) {
             case 0:
                 (0, logger_1.log)("call openModal()");
-                return [4 /*yield*/, script_1.hostedUIReady.isReady];
+                showLoader();
+                return [4 /*yield*/, getAppId(props.publicKey)];
             case 1:
-                _b.sent();
-                if (hasIFrame()) {
-                    (_a = window[window_1.Window.MSDOM]) === null || _a === void 0 ? void 0 : _a.show(props.type, props.params);
-                    window.addEventListener("message", function (e) {
-                        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-                        if (e.origin === endpoint_1.endpoints.parentOrigin) {
-                            if (e.data.type === "CLOSE") {
-                                return (0, exports.hideModal)();
-                            }
-                            if ((_b = (_a = e.data) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.member) {
-                                (0, persistence_1.setPersistedMember)((_c = e.data) === null || _c === void 0 ? void 0 : _c.data.member, props.persistence);
-                            }
-                            if (props.useCookie && ((_f = (_e = (_d = e.data) === null || _d === void 0 ? void 0 : _d.data) === null || _e === void 0 ? void 0 : _e.tokens) === null || _f === void 0 ? void 0 : _f.accessToken)) {
-                                (0, cookies_1.setMemberCookie)(e.data.data.tokens.accessToken);
-                            }
-                            (_h = (_g = props.options) === null || _g === void 0 ? void 0 : _g.onCompleted) === null || _h === void 0 ? void 0 : _h.call(_g, (_j = e.data) === null || _j === void 0 ? void 0 : _j.data);
-                        }
-                    });
-                }
-                return [2 /*return*/];
+                appId = _c.sent();
+                page = TYPE_PARAMS[props.type];
+                link = createLink({
+                    pk: props.publicKey,
+                    planId: (_a = props.params) === null || _a === void 0 ? void 0 : _a.planId,
+                    priceId: (_b = props.params) === null || _b === void 0 ? void 0 : _b.priceId,
+                    appId: appId,
+                    page: page,
+                });
+                div = document.createElement("div");
+                div.setAttribute("data-ms-iframe", "true");
+                iframe = document.createElement("iframe");
+                iframestyles = {
+                    height: "100vh",
+                    width: "100vw",
+                    position: "absolute",
+                    top: 0,
+                    bottom: 0,
+                    border: "none",
+                };
+                Object.entries(iframestyles).map(function (_a) {
+                    var _b = __read(_a, 2), attr = _b[0], value = _b[1];
+                    iframe.style[attr] = value;
+                });
+                iframe.setAttribute("src", link);
+                iframe.addEventListener("load", function () {
+                    hideLoader();
+                });
+                div.append(iframe);
+                document.body.appendChild(div);
+                window.addEventListener("message", function (e) {
+                    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+                    if (e.data.type === "CLOSE") {
+                        return (0, exports.hideModal)();
+                    }
+                    if ((_b = (_a = e.data) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.member) {
+                        (0, persistence_1.setPersistedMember)((_c = e.data) === null || _c === void 0 ? void 0 : _c.data.member, props.persistence);
+                    }
+                    if (props.useCookie && ((_f = (_e = (_d = e.data) === null || _d === void 0 ? void 0 : _d.data) === null || _e === void 0 ? void 0 : _e.tokens) === null || _f === void 0 ? void 0 : _f.accessToken)) {
+                        (0, cookies_1.setMemberCookie)(e.data.data.tokens.accessToken);
+                    }
+                    (_h = (_g = props.options) === null || _g === void 0 ? void 0 : _g.onCompleted) === null || _h === void 0 ? void 0 : _h.call(_g, (_j = e.data) === null || _j === void 0 ? void 0 : _j.data);
+                });
+                return [2 /*return*/, iframe];
         }
     });
 }); };
@@ -106,8 +202,7 @@ exports.openModal = openModal;
 var hideModal = function () {
     var _a;
     (0, logger_1.log)("call hideModal()");
-    if (hasIFrame()) {
-        (_a = window[window_1.Window.MSDOM]) === null || _a === void 0 ? void 0 : _a.hide();
-    }
+    (_a = document.querySelector("[data-ms-iframe]")) === null || _a === void 0 ? void 0 : _a.remove();
+    hideLoader();
 };
 exports.hideModal = hideModal;

package/lib/methods/dom/script.d.ts

@@ -1,11 +1,3 @@
 export declare function initialize(props: {
     publicKey: string;
 }): Promise<any>;
-export declare class HostedUI {
-    private __globalResolver;
-    private __isReady;
-    constructor();
-    get isReady(): Promise<void>;
-    resolve(): void;
-}
-export declare const hostedUIReady: HostedUI;

package/lib/methods/dom/script.js

@@ -36,81 +36,15 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     }
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.hostedUIReady = exports.HostedUI = exports.initialize = void 0;
-var endpoint_1 = require("../../constants/endpoint");
-var window_1 = require("../../constants/window");
-var logger_1 = require("../../utils/logger");
+exports.initialize = void 0;
 var isBrowser = typeof window !== "undefined";
-var SCRIPT_URL = endpoint_1.endpoints.loaderScript;
-var SCRIPT_URL_REGEX = new RegExp(SCRIPT_URL);
-var getScript = function () {
-    var existingScript = document.querySelector("script[src^=\"" + SCRIPT_URL + "\"]");
-    if (existingScript && SCRIPT_URL_REGEX.test(existingScript.src)) {
-        return existingScript;
-    }
-    var script = document.createElement("script");
-    script.src = SCRIPT_URL;
-    script.defer = true;
-    script.crossOrigin = "true";
-    if (!document.body) {
-        throw new Error("Memberstack requires a <body> element.");
-    }
-    document.body.appendChild(script);
-    (0, logger_1.log)("Appending script to load parent hosted UI");
-    return script;
-};
 function initialize(props) {
     return __awaiter(this, void 0, void 0, function () {
-        var script;
-        var _this = this;
         return __generator(this, function (_a) {
             if (!isBrowser)
                 return [2 /*return*/, null];
-            script = getScript();
-            (0, logger_1.log)("Add script event listener for load");
-            script.addEventListener("load", function () { return __awaiter(_this, void 0, void 0, function () {
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0:
-                            (0, logger_1.log)("Hosted UI parent script loaded");
-                            if (!window[window_1.Window.MSDOM]) return [3 /*break*/, 2];
-                            (0, logger_1.log)("Call MSDOM load function, pass public key");
-                            return [4 /*yield*/, window[window_1.Window.MSDOM].load({ publicKey: props.publicKey })];
-                        case 1:
-                            _a.sent();
-                            exports.hostedUIReady.resolve();
-                            console.info("\x1b[36m%s\x1b[0m", "Memberstack has been initialized");
-                            return [3 /*break*/, 3];
-                        case 2:
-                            console.warn("Could not initialize Memberstack.");
-                            _a.label = 3;
-                        case 3: return [2 /*return*/];
-                    }
-                });
-            }); });
             return [2 /*return*/];
         });
     });
 }
 exports.initialize = initialize;
-var HostedUI = /** @class */ (function () {
-    function HostedUI() {
-        var _this = this;
-        this.__isReady = new Promise(function (resolve) {
-            _this.__globalResolver = resolve;
-        });
-    }
-    Object.defineProperty(HostedUI.prototype, "isReady", {
-        get: function () {
-            return this.__isReady;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    HostedUI.prototype.resolve = function () {
-        this.__globalResolver();
-    };
-    return HostedUI;
-}());
-exports.HostedUI = HostedUI;
-exports.hostedUIReady = new HostedUI();

package/lib/methods/index.d.ts

@@ -8,6 +8,7 @@ declare global {
     }
 }
 export declare type DOMConfig = ClientConfig & {
+    publicKey: string;
     persistence?: Persistence;
     useCookie: boolean;
     debug?: boolean;

package/lib/methods/index.js

@@ -47,7 +47,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var persistence_1 = require("../auth/persistence");
 var proxy_1 = __importDefault(require("../utils/proxy"));
 var DOM = __importStar(require("./dom/methods"));
-var script_1 = require("./dom/script");
 var client_1 = require("./client");
 var interceptor_1 = require("../utils/interceptor");
 var logger_1 = require("../utils/logger");
@@ -64,7 +63,7 @@ var withScript = function (fn) {
     return function (props) {
         var config = __assign({ persistence: persistence_1.Persistence.LOCAL, useCookie: true }, props);
         (0, logger_1.log)("Calling Function that initializes hosted UI script");
-        (0, script_1.initialize)({ publicKey: props.publicKey });
+        //initialize({ publicKey: props.publicKey });
         return fn(config);
     };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@memberstack/dom",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "main": "./lib/index.js",
   "files": [
     "lib/**/*"
@@ -8,12 +8,13 @@
   "author": "Lydia Hallie",
   "license": "MIT",
   "dependencies": {
-    "@memberstack/client": "^1.3.1",
+    "@memberstack/client": "^1.4.0",
     "js-cookie": "^3.0.1"
   },
   "scripts": {
     "prepublishOnly": "npx tsc",
-    "watch": "npx tsc -w",
-    "clean": "rm -rf node_modules"
+    "watch": "tsc-watch --onSuccess 'yarn replace:vars:local'",
+    "clean": "rm -rf node_modules",
+    "replace:vars:local": "ts-node utils/replaceDynamicVars -development"
   }
 }