swell-js 5.2.0 → 5.3.0

package/dist/swell.umd.min.js

@@ -10119,6 +10119,17 @@
 	    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;
@@ -11320,6 +11331,295 @@
 	  };
 	}
 
+	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$a(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$8(api) {
 	  const { get, list } = defaultMethods(api, '/categories', ['list', 'get']);
 
@@ -12153,7 +12453,7 @@
 	   * @returns {Promise<object>}
 	   */
 	  async createIntent(data) {
-	    return this._vaultRequest('post', '/intent', data);
+	    return vaultRequest('post', '/intent', data);
 	  }
 
 	  /**
@@ -12163,7 +12463,7 @@
 	   * @returns {Promise<object>}
 	   */
 	  async updateIntent(data) {
-	    return this._vaultRequest('put', '/intent', data);
+	    return vaultRequest('put', '/intent', data);
 	  }
 
 	  /**
@@ -12173,7 +12473,7 @@
 	   * @returns {Promise<object>}
 	   */
 	  async authorizeGateway(data) {
-	    return this._vaultRequest('post', '/authorization', data);
+	    return vaultRequest('post', '/authorization', data);
 	  }
 
 	  /**
@@ -12257,29 +12557,6 @@
 	    return { ...cart, settings: { ...settings.store } };
 	  }
 
-	  /**
-	   * Sends a Vault request.
-	   *
-	   * @param {string} method
-	   * @param {string} url
-	   * @param {object} data
-	   * @returns {Promise<object>}
-	   */
-	  async _vaultRequest(method, url, data) {
-	    const response = await vaultRequest(method, url, data);
-
-	    if (response.errors) {
-	      const param = Object.keys(response.errors)[0];
-	      const err = new Error(response.errors[param].message || 'Unknown error');
-	      err.code = 'vault_error';
-	      err.status = 402;
-	      err.param = param;
-	      throw err;
-	    }
-
-	    return response;
-	  }
-
 	  /**
 	   * Sets values for payment scripts.
 	   *
@@ -16794,15 +17071,6 @@
 	  async _vaultRequest(method, url, data) {
 	    const response = await vaultRequest(method, url, data);
 
-	    if (response.errors) {
-	      const param = Object.keys(response.errors)[0];
-	      const err = new Error(response.errors[param].message || 'Unknown error');
-	      err.code = 'vault_error';
-	      err.status = 402;
-	      err.param = param;
-	      throw err;
-	    }
-
 	    if (this.options.useCamelCase) {
 	      return toCamel(response);
 	    }
@@ -17349,7 +17617,7 @@
 	  const api = {};
 
 	  Object.assign(api, {
-	    version: '5.2.0',
+	    version: '5.3.0',
 	    options,
 	    request,
 
@@ -17412,6 +17680,8 @@
 
 	    account: methods$9(api),
 
+	    app: new AppController(api, options),
+
 	    products: methods$b(api, options),
 
 	    categories: methods$8(api),