swell-js 5.2.0 → 5.3.0

package/dist/swell.cjs

@@ -4674,6 +4674,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;
@@ -5875,6 +5886,295 @@ function methods$9(api) {
   };
 }
 
+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']);
 
@@ -6708,7 +7008,7 @@ class Payment {
    * @returns {Promise<object>}
    */
   async createIntent(data) {
-    return this._vaultRequest('post', '/intent', data);
+    return vaultRequest('post', '/intent', data);
   }
 
   /**
@@ -6718,7 +7018,7 @@ class Payment {
    * @returns {Promise<object>}
    */
   async updateIntent(data) {
-    return this._vaultRequest('put', '/intent', data);
+    return vaultRequest('put', '/intent', data);
   }
 
   /**
@@ -6728,7 +7028,7 @@ class Payment {
    * @returns {Promise<object>}
    */
   async authorizeGateway(data) {
-    return this._vaultRequest('post', '/authorization', data);
+    return vaultRequest('post', '/authorization', data);
   }
 
   /**
@@ -6812,29 +7112,6 @@ class Payment {
     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.
    *
@@ -11349,15 +11626,6 @@ class PaymentController {
   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);
     }
@@ -11904,7 +12172,7 @@ function swell(initStore = undefined, initKey, initOptions = {}) {
   const api = {};
 
   Object.assign(api, {
-    version: '5.2.0',
+    version: '5.3.0',
     options,
     request,
 
@@ -11967,6 +12235,8 @@ function swell(initStore = undefined, initKey, initOptions = {}) {
 
     account: methods$9(api),
 
+    app: new AppController(api, options),
+
     products: methods$b(api, options),
 
     categories: methods$8(api),