npm - swell-js - Versions diffs - 5.1.3 → 5.3.0 - Mend

@@ -3,21 +3,310 @@ import { getCookie, setCookie } from './cookie.mjs';
 import cacheApi from './cache.mjs';
 import methods$3 from './cart.mjs';
 import methods$4 from './account.mjs';
+import { k as isFunction, l as loadScript, b as isObject, v as vaultRequest, n as isEmpty, d as defaultMethods, z as trimEnd, A as setOptions, B as utils, C as trimStart, D as trimBoth, t as toSnake, E as stringifyQuery, q as base64Encode, i as isServer, a as toCamel } from './index.a227b03d.mjs';
+import 'qs';
+import 'deepmerge';
+import 'fast-case';
 import methods$5 from './products.mjs';
 import methods$6 from './categories.mjs';
 import methods$7 from './attributes.mjs';
 import methods$8 from './subscriptions.mjs';
-import { d as defaultMethods, z as trimEnd, A as setOptions, B as utils, C as trimStart, D as trimBoth, t as toSnake, E as stringifyQuery, q as base64Encode, i as isServer, a as toCamel } from './index.3c15c4d3.mjs';
 import methods$9 from './content.mjs';
 import methods$a from './settings.mjs';
 import PaymentController from './payment.mjs';
 import methods$b from './locale.mjs';
 import methods$c from './currency.mjs';
-import 'qs';
 import './find.18f1ac6d.mjs';
 import './round.577a8441.mjs';
-import 'deepmerge';
-import 'fast-case';
+class AppComponent {
+  #preact = null;
+  #preactComponent = null;
+  #container = null;
+  constructor(app, component, api, options) {
+    this.app = app;
+    this.component = component;
+    this.api = api;
+    this.options = options;
+    this.props = {};
+  }
+  get id() {
+    return this.component.id;
+  }
+  get name() {
+    return this.component.name;
+  }
+  get extension() {
+    return this.component.values.extension;
+  }
+  get settings() {
+    return this.app.settings[this.extension];
+  }
+  get #fileData() {
+    return this.component.build_file_data;
+  }
+  render(containerId, props) {
+    const container = document.getElementById(containerId);
+    if (!container) {
+      throw new Error(`Container with ID "${containerId}" not found.`);
+    }
+    const evalFn = new Function(`${this.#fileData}\nreturn { ...Component }`);
+    const { preact, default: Component } = evalFn();
+    this.#preact = preact;
+    this.#preactComponent = Component;
+    this.#container = container;
+    return new Promise((resolve) => {
+      this.#render({
+        ...props,
+        settings: this.settings,
+        registerHandlers: this.#registerHandlers.bind(this),
+        loadLib: this.#loadLib.bind(this),
+        onReady: resolve,
+      });
+    });
+  }
+  setProps(props) {
+    this.#render(props);
+  }
+  async updateCart(data) {
+    const cart = await methods$3(this.api, this.options).update(data);
+    this.setProps({ cart });
+  }
+  getHandler(name) {
+    const handler = this.handlers?.[name];
+    return isFunction(handler) ? handler : null;
+  }
+  #registerHandlers(handlers) {
+    this.handlers = handlers;
+  }
+  #loadLib(id, src, attributes = {}) {
+    const scriptId = `${id}-${this.id}-component-lib`;
+    return loadScript(scriptId, src, attributes);
+  }
+  #setProps(props) {
+    if (!isObject(props)) {
+      throw new Error('Props must be a plain object.');
+    }
+    this.props = {
+      ...this.props,
+      ...props,
+    };
+  }
+  #render(props) {
+    const { render, h } = this.#preact;
+    this.#setProps(props);
+    render(h(this.#preactComponent, this.props), this.#container);
+  }
+}
+class AppPaymentComponent extends AppComponent {
+  constructor(app, component, api, options) {
+    super(app, component, api, options);
+  }
+  get #accountId() {
+    return this.props.cart?.account_id;
+  }
+  get #gateway() {
+    return `app_${this.app.id}_${this.extension}`;
+  }
+  render(containerId, props = {}) {
+    return super.render(containerId, {
+      ...props,
+      updateCart: this.updateCart.bind(this),
+      getIntent: this.#getIntent.bind(this),
+      createIntent: this.#createIntent.bind(this),
+    });
+  }
+  #getIntent(data) {
+    return vaultRequest('GET', '/intent', {
+      gateway: this.#gateway,
+      account_id: this.#accountId,
+      intent: data,
+    });
+  }
+  #createIntent(data) {
+    return vaultRequest('POST', '/intent', {
+      gateway: this.#gateway,
+      account_id: this.#accountId,
+      intent: data,
+    });
+  }
+}
+class App {
+  constructor(app, api, options) {
+    this.app = app;
+    this.api = api;
+    this.options = options;
+  }
+  get #components() {
+    return this.app.components?.results || [];
+  }
+  getComponent(name) {
+    if (!name) {
+      throw new Error('Component name is not provided');
+    }
+    const component = this.#components.find(
+      (component) => component.name === name,
+    );
+    if (!component) {
+      throw new Error(`Component "${name}" not found`);
+    }
+    return this.#createComponent(component);
+  }
+  getComponents(params = {}) {
+    const components = this.#filterComponents(params);
+    return components.reduce((acc, component) => {
+      acc[component.name] = this.#createComponent(component);
+      return acc;
+    }, {});
+  }
+  #filterComponents(params) {
+    if (!isObject(params) || isEmpty(params)) {
+      return this.#components;
+    }
+    const { extension, extensionType } = params;
+    if (extensionType) {
+      return this.#filterByExtensionType(extensionType);
+    }
+    if (extension) {
+      return this.#filterByExtension(extension);
+    }
+    return [];
+  }
+  #filterByExtensionType(extensionType) {
+    const extensions = this.app.extensions
+      .filter((extension) => extension.type === extensionType)
+      .map((extension) => extension.id);
+    return extensions
+      .map((extension) => this.#filterByExtension(extension))
+      .flat();
+  }
+  #filterByExtension(extension) {
+    return this.#components.filter(
+      (component) => component.values.extension === extension,
+    );
+  }
+  #createComponent(component) {
+    const { extensions } = this.app;
+    const {
+      name,
+      values: { extension: componentExtension },
+    } = component;
+    if (!componentExtension) {
+      throw new Error(
+        `The component "${name}" has no extension. Define the extension in the component's config.`,
+      );
+    }
+    const extension = extensions.find(
+      (extension) => extension.id === componentExtension,
+    );
+    if (!extension) {
+      throw new Error(
+        `The extension "${componentExtension}" of component "${name}" is not defined in "swell.json".`,
+      );
+    }
+    switch (extension.type) {
+      case 'payment':
+        return new AppPaymentComponent(
+          this.app,
+          component,
+          this.api,
+          this.options,
+        );
+      default:
+        throw new Error(`Unknown extension type "${extension.type}".`);
+    }
+  }
+}
+class AppController {
+  #apps = new Map();
+  constructor(api, options) {
+    this.api = api;
+    this.options = options;
+  }
+  async load(appId) {
+    const loadedApp = this.#apps.get(appId);
+    if (loadedApp) {
+      return loadedApp;
+    }
+    const app = await this.#getApp(appId);
+    const appInstance = new App(app, this.api, this.options);
+    this.#apps.set(appId, appInstance);
+    return appInstance;
+  }
+  async #getApp(appId) {
+    const app = await this.api.request('get', `/apps/${appId}`, undefined, {
+      expand: 'components',
+    });
+    if (isEmpty(app.extensions)) {
+      throw new Error(
+        `The app "${app.name}" has no extensions. Define the app extensions in "swell.json".`,
+      );
+    }
+    return app;
+  }
+}
 function methods$2(api) {
   const { get, list } = defaultMethods(api, '/invoices', ['list', 'get']);
@@ -157,7 +446,7 @@ function swell(initStore = undefined, initKey, initOptions = {}) {
   const api = {};
   Object.assign(api, {
-    version: '5.1.3',
+    version: '5.3.0',
     options,
     request,
@@ -220,6 +509,8 @@ function swell(initStore = undefined, initKey, initOptions = {}) {
     account: methods$4(api),
+    app: new AppController(api, options),
     products: methods$5(api, options),
     categories: methods$6(api),

@@ -1,4 +1,4 @@
-import { s as set, m as merge, a as toCamel, h as toCamelPath, j as getOptions } from './index.3c15c4d3.mjs';
+import { s as set, m as merge, a as toCamel, h as toCamelPath, j as getOptions } from './index.a227b03d.mjs';
 import { g as get } from './find.18f1ac6d.mjs';
 import 'qs';
 import './round.577a8441.mjs';

@@ -1,5 +1,5 @@
 import 'qs';
-import { c as cloneDeep } from './index.3c15c4d3.mjs';
+import { c as cloneDeep } from './index.a227b03d.mjs';
 import 'deepmerge';
 import 'fast-case';
 import { cleanProductOptions } from './products.mjs';

@@ -1654,6 +1654,17 @@ async function vaultRequest(method, url, data) {
     connectionError.status = result?.$status;
     throw connectionError;
+  } else if (result.$data.errors) {
+    const param = Object.keys(result.$data.errors)[0];
+    const err = new Error(
+      result.$data.errors[param].message || 'Unknown error',
+    );
+    err.code = 'vault_error';
+    err.status = 402;
+    err.param = param;
+    throw err;
   }
   return result.$data;

@@ -1,6 +1,6 @@
 export { default } from './api.mjs';
 import './card.mjs';
-import './index.3c15c4d3.mjs';
+import './index.a227b03d.mjs';
 import 'qs';
 import './find.18f1ac6d.mjs';
 import './round.577a8441.mjs';

swell-js 5.1.3 → 5.3.0