@notabene/javascript-sdk 2.0.0-next.6 → 2.0.0-next.8

package/dist/notabene.js

@@ -1,11 +1,11 @@
-var l = Object.defineProperty;
-var u = (s, e, t) => e in s ? l(s, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[e] = t;
-var o = (s, e, t) => u(s, typeof e != "symbol" ? e + "" : e, t);
-var h = /* @__PURE__ */ ((s) => (s.COMPLETE = "complete", s.RESIZE = "resize", s.RESULT = "result", s.READY = "ready", s.INVALID = "invalid", s.MODAL = "openModal", s.ERROR = "error", s.CLOSE = "closeModal", s.CANCEL = "cancel", s))(h || {}), c = /* @__PURE__ */ ((s) => (s.UPDATE = "update", s.REQUEST_RESPONSE = "requestResponse", s))(c || {});
-class f {
+var d = Object.defineProperty;
+var c = (r, e, t) => e in r ? d(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t;
+var n = (r, e, t) => c(r, typeof e != "symbol" ? e + "" : e, t);
+var h = /* @__PURE__ */ ((r) => (r.COMPLETE = "complete", r.RESIZE = "resize", r.RESULT = "result", r.READY = "ready", r.INVALID = "invalid", r.MODAL = "openModal", r.ERROR = "error", r.CLOSE = "closeModal", r.CANCEL = "cancel", r))(h || {}), l = /* @__PURE__ */ ((r) => (r.UPDATE = "update", r.REQUEST_RESPONSE = "requestResponse", r))(l || {});
+class m {
   constructor() {
-    o(this, "listeners", /* @__PURE__ */ new Map());
-    o(this, "port");
+    n(this, "listeners", /* @__PURE__ */ new Map());
+    n(this, "port");
     this.handleMessage = this.handleMessage.bind(this);
   }
   setPort(e) {
@@ -15,36 +15,36 @@ class f {
     this.listeners.has(e) || this.listeners.set(e, /* @__PURE__ */ new Set()), this.listeners.get(e).add(t);
   }
   off(e, t) {
-    const r = this.listeners.get(e);
-    r && (r.delete(t), r.size === 0 && this.listeners.delete(e));
+    const s = this.listeners.get(e);
+    s && (s.delete(t), s.size === 0 && this.listeners.delete(e));
   }
   handleMessage(e) {
     console.log("received message", e.data);
     const t = e.data;
     if (typeof t == "object" && t !== null && "type" in t) {
-      const r = t.type, i = this.listeners.get(r);
-      i && i.forEach((n) => n(t));
+      const s = t.type, o = this.listeners.get(s);
+      o && o.forEach((i) => i(t));
     }
   }
   // Method to send messages through the port
   send(e) {
-    if (!this.port)
-      throw new Error("No port set");
-    this.port.postMessage(e);
+    this.port && this.port.postMessage(e);
   }
 }
-class m {
+class u {
+  // private popup?: HTMLElement;
   constructor(e, t) {
-    o(this, "_url");
-    o(this, "_value");
-    o(this, "_errors", []);
-    o(this, "iframe");
-    o(this, "eventManager");
-    o(this, "ready", !1);
-    this._url = e, this._value = t, this.eventManager = new f(), this.on(h.INVALID, (r) => {
-      r.type === h.INVALID && (this._errors = r.errors, this._value = r.value);
-    }), this.on(h.RESIZE, (r) => {
-      r.type === h.RESIZE && this.iframe && (this.iframe.style.height = `${r.height}px`);
+    n(this, "_url");
+    n(this, "_value");
+    n(this, "_errors", []);
+    n(this, "iframe");
+    n(this, "eventManager");
+    n(this, "ready", !1);
+    n(this, "modal");
+    this._url = e, this._value = t, this.eventManager = new m(), this.on(h.INVALID, (s) => {
+      s.type === h.INVALID && (this._errors = s.errors, this._value = s.value);
+    }), this.on(h.RESIZE, (s) => {
+      s.type === h.RESIZE && this.iframe && (this.iframe.style.height = `${s.height}px`);
     });
   }
   get url() {
@@ -60,14 +60,16 @@ class m {
     document.location.href = this.url;
   }
   mount(e) {
-    var r, i;
-    this.iframe = document.createElement("iframe"), this.iframe.src = this.url, this.iframe.style.width = "100%", this.iframe.style.height = "100px", this.iframe.style.border = "none", this.iframe.style.overflow = "hidden", window.addEventListener("message", (n) => {
-      var a, d;
-      n.source === ((a = this.iframe) == null ? void 0 : a.contentWindow) && (console.log("received message from iframe", n.data), (d = this.eventManager) == null || d.setPort(n.ports[0]), this.ready = !0);
-    });
     const t = document.querySelector(e);
     if (!t) throw new Error(`parentID ${e} not found`);
-    t.appendChild(this.iframe), (i = (r = this.iframe) == null ? void 0 : r.contentWindow) == null || i.focus();
+    this.embed(t);
+  }
+  embed(e) {
+    var t, s;
+    this.iframe = document.createElement("iframe"), this.iframe.src = this.url, this.iframe.style.width = "100%", this.iframe.style.height = "100px", this.iframe.style.border = "none", this.iframe.style.overflow = "hidden", this.iframe.setAttribute("allowtransparency", "true"), this.iframe.style.backgroundColor = "transparent", e.appendChild(this.iframe), window.addEventListener("message", (o) => {
+      var i, a;
+      o.source === ((i = this.iframe) == null ? void 0 : i.contentWindow) && (console.log("received message from iframe", o.data), (a = this.eventManager) == null || a.setPort(o.ports[0]), this.ready = !0);
+    }), (s = (t = this.iframe) == null ? void 0 : t.contentWindow) == null || s.focus();
   }
   send(e) {
     this.eventManager.send(e);
@@ -79,109 +81,87 @@ class m {
     this.eventManager.off(e, t);
   }
   update(e) {
-    this._value = e, this.send({ type: c.UPDATE, value: e });
+    this._value = e, this.send({ type: l.UPDATE, value: e });
   }
   completion() {
     return new Promise((e, t) => {
-      this.on(h.COMPLETE, (r) => {
-        e(r.response);
-      }), this.on("error", (r) => {
-        t(new Error(r.message));
+      this.closeModal(), this.on(h.COMPLETE, (s) => {
+        e(s.response);
+      }), this.on("error", (s) => {
+        t(new Error(s.message));
       });
     });
   }
+  // popup(): void {
+  //   this.popup = document.createElement('div');
+  //   this.popup.style;
+  // }
+  openModal() {
+    this.modal && this.closeModal(), this.modal = document.createElement("dialog"), document.body.appendChild(this.modal), this.embed(this.modal), this.modal.show(), this.modal.addEventListener("click", () => {
+      this.closeModal();
+    });
+  }
+  closeModal() {
+    var e;
+    this.modal && (console.log("closeModal"), (e = this.modal) == null || e.close(), this.modal.remove(), this.modal = void 0);
+  }
 }
-function p(s) {
-  return Object.entries(s).map(([e, t]) => {
+function f(r) {
+  return Object.entries(r).map(([e, t]) => {
     if (!(e && t)) return;
-    const r = encodeURIComponent(e), i = encodeURIComponent(
+    const s = encodeURIComponent(e), o = encodeURIComponent(
       typeof t == "object" ? JSON.stringify(t) : t
     );
-    return `${r}=${i}`;
+    return `${s}=${o}`;
   }).filter((e) => !!e).join("&");
 }
-class g {
+class E {
   constructor(e) {
-    o(this, "nodeUrl");
-    o(this, "authToken");
-    o(this, "uxUrl");
-    o(this, "theme");
-    o(this, "dictionary");
-    this.uxUrl = e.uxUrl || "https://connect.notabene.id", this.nodeUrl = e.nodeUrl, this.authToken = e.authToken, this.theme = e.theme, this.dictionary = e.dictionary;
-  }
-  componentUrl(e, t, r, i) {
-    const n = new URL(this.uxUrl);
-    n.pathname = e;
-    const a = p({
+    n(this, "nodeUrl");
+    n(this, "authToken");
+    n(this, "uxUrl");
+    n(this, "theme");
+    n(this, "locale");
+    this.uxUrl = e.uxUrl || "https://connect.notabene.id", this.nodeUrl = e.nodeUrl, this.authToken = e.authToken, this.theme = e.theme, this.locale = e.locale;
+  }
+  componentUrl(e, t, s, o) {
+    const i = new URL(this.uxUrl);
+    i.pathname = e;
+    const a = f({
       authToken: this.authToken,
       value: t,
-      configuration: r
+      configuration: s
     });
-    return n.hash = a, this.nodeUrl && n.searchParams.set("nodeUrl", this.nodeUrl), this.theme && n.searchParams.set("theme", JSON.stringify(this.theme)), this.dictionary && n.searchParams.set("dictionary", JSON.stringify(this.dictionary)), i && (i.callback && n.searchParams.set("callback_url", i.callback), i.redirectUri && n.searchParams.set("redirect_uri", i.redirectUri)), n.toString();
+    return i.hash = a, this.nodeUrl && i.searchParams.set("nodeUrl", this.nodeUrl), this.theme && i.searchParams.set("theme", JSON.stringify(this.theme)), this.locale && i.searchParams.set("locale", this.locale), o && (o.callback && i.searchParams.set("callback_url", o.callback), o.redirectUri && i.searchParams.set("redirect_uri", o.redirectUri)), i.toString();
   }
-  createComponent(e, t, r, i) {
-    return new m(
-      this.componentUrl(e, t, r, i),
+  createComponent(e, t, s, o) {
+    return new u(
+      this.componentUrl(e, t, s, o),
       t
     );
   }
-  createWithdrawalAssist(e, t, r) {
-    return this.createComponent("withdrawal-assist", e, t, r);
+  createWithdrawalAssist(e, t, s) {
+    return this.createComponent("withdrawal-assist", e, t, s);
+  }
+  createDepositAssist(e, t, s) {
+    return this.createComponent("deposit-assist", e, t, s);
+  }
+  createConnect(e, t, s) {
+    return this.createComponent("connect", e, t, s);
+  }
+  createDepositRequest(e, t, s) {
+    return this.createComponent("deposit-request", e, t, s);
   }
   decodeFragmentToObject(e) {
     return e.slice(1).split("&").reduce(
-      (r, i) => {
-        const [n, a] = i.split("=");
-        return r[decodeURIComponent(n)] = decodeURIComponent(a), r;
+      (s, o) => {
+        const [i, a] = o.split("=");
+        return s[decodeURIComponent(i)] = decodeURIComponent(a), s;
       },
       {}
     );
   }
-  // private openModal(url: string): void {
-  //   if (this.modal) {
-  //     this.closeModal();
-  //   }
-  //   this.modal = document.createElement('div');
-  //   this.modal.style.position = 'fixed';
-  //   this.modal.style.top = '0';
-  //   this.modal.style.left = '0';
-  //   this.modal.style.width = '100%';
-  //   this.modal.style.height = '100%';
-  //   this.modal.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
-  //   this.modal.style.display = 'flex';
-  //   this.modal.style.justifyContent = 'center';
-  //   this.modal.style.alignItems = 'center';
-  //   const iframe = document.createElement('iframe');
-  //   iframe.src = url;
-  //   iframe.setAttribute('allowtransparency', 'true');
-  //   // iframe.allowtransparency = true;
-  //   iframe.style.backgroundColor = 'transparent';
-  //   iframe.style.width = '90%';
-  //   iframe.style.height = '90%';
-  //   iframe.style.border = 'none';
-  //   iframe.style.overflow = 'hidden';
-  //   this.modal.appendChild(iframe);
-  //   document.body.appendChild(this.modal);
-  //   this.modal.addEventListener('click', () => {
-  //     console.log('click');
-  //     this.closeModal();
-  //   });
-  //   document.addEventListener('keydown', ({ key }) => {
-  //     console.log(`key: ${key}`);
-  //     if (key === 'Escape') {
-  //       console.log('esc');
-  //       this.closeModal();
-  //     }
-  //   });
-  // }
-  // private closeModal(): void {
-  //   if (this.modal) {
-  //     console.log('this.closeModal');
-  //     this.modal.remove();
-  //     this.modal = undefined;
-  //   }
-  // }
 }
 export {
-  g as default
+  E as default
 };

package/package.json

@@ -9,7 +9,7 @@
   },
   "author": "Notabene <developers@notabene.id>",
   "license": "MIT",
-  "version": "2.0.0-next.6",
+  "version": "2.0.0-next.8",
   "source": "src/notabene.ts",
   "main": "dist/notabene.js",
   "types": "dist/notabene.d.ts",

package/src/__tests__/notabene.test.ts

@@ -2,6 +2,7 @@ import { fc, test } from '@fast-check/vitest';
 import { describe } from 'vitest';
 import { abitraryCallbackOptions, arbitraryComponent } from '../arbitraries';
 import Notabene from '../notabene';
+import { arbitraryLocale } from '../utils/arbitraries';
 
 describe('Notabene', () => {
   describe('defaults', () => {
@@ -28,6 +29,33 @@ describe('Notabene', () => {
     );
   });
 
+  describe('locale', () => {
+    test.prop([
+      fc.string({ minLength: 3 }),
+      fc.webUrl(),
+      arbitraryComponent(),
+      fc.object(),
+      arbitraryLocale(),
+    ])(
+      'Should set the correct values',
+      (authToken, nodeUrl, component, value, locale) => {
+        const notabene = new Notabene({
+          nodeUrl,
+          authToken,
+          locale,
+        });
+        const url = new URL(notabene.componentUrl(component, value));
+        return (
+          url.hash ===
+            `#authToken=${encodeURIComponent(authToken)}&value=${encodeURIComponent(JSON.stringify(value))}` &&
+          url.searchParams.get('nodeUrl') === nodeUrl &&
+          url.searchParams.get('locale') === locale &&
+          url.pathname === `/${component}`
+        );
+      },
+    );
+  });
+
   describe('minimal', () => {
     test.prop([arbitraryComponent(), fc.object()])(
       'Should set the correct values',

package/src/components/EmbeddedComponent.ts

@@ -23,6 +23,8 @@ export default class EmbeddedComponent {
   private iframe?: HTMLIFrameElement;
   private eventManager: MessageEventManager;
   private ready = false;
+  private modal?: HTMLDialogElement;
+  // private popup?: HTMLElement;
 
   constructor(url: string, value: Partial<Transaction>) {
     this._url = url;
@@ -58,14 +60,23 @@ export default class EmbeddedComponent {
   }
 
   mount(parentId: string) {
+    const parent = document.querySelector(parentId);
+    if (!parent) throw new Error(`parentID ${parentId} not found`);
+    this.embed(parent);
+  }
+
+  embed(parent: Element) {
     this.iframe = document.createElement('iframe');
     this.iframe.src = this.url;
     this.iframe.style.width = '100%';
     this.iframe.style.height = '100px';
     this.iframe.style.border = 'none';
     this.iframe.style.overflow = 'hidden';
+    this.iframe.setAttribute('allowtransparency', 'true');
+    this.iframe.style.backgroundColor = 'transparent';
+    parent.appendChild(this.iframe);
 
-    window.addEventListener('message', (event) => {
+    window.addEventListener('message', (event: MessageEvent) => {
       if (event.source !== this.iframe?.contentWindow) {
         return;
       }
@@ -74,9 +85,6 @@ export default class EmbeddedComponent {
       this.ready = true;
     });
 
-    const parent = document.querySelector(parentId);
-    if (!parent) throw new Error(`parentID ${parentId} not found`);
-    parent.appendChild(this.iframe);
     this.iframe?.contentWindow?.focus();
   }
 
@@ -99,6 +107,7 @@ export default class EmbeddedComponent {
 
   completion(): Promise<TransactionResponse> {
     return new Promise((resolve, reject) => {
+      this.closeModal();
       this.on(CMType.COMPLETE, (message) => {
         resolve((message as any).response);
       });
@@ -107,4 +116,60 @@ export default class EmbeddedComponent {
       });
     });
   }
+
+  // popup(): void {
+  //   this.popup = document.createElement('div');
+  //   this.popup.style;
+  // }
+
+  openModal(): void {
+    if (this.modal) {
+      this.closeModal();
+    }
+    this.modal = document.createElement('dialog');
+    // this.modal.style.maxWidth = '600px';
+    // this.modal.style.border = 'none !important';
+    // this.modal.style.background = 'transparent';
+    // this.modal.style.flexDirection = 'column';
+    // this.modal.style.alignItems = 'end';
+    // const close = document.createElement('button');
+    // close.innerText = 'X';
+    // close.style.fontSize = '1rem';
+    // close.style.padding = '0.25rem 0.5rem';
+    // close.style.display = 'block';
+    // close.style.background = 'white';
+    // close.style.color = '#aaa';
+    // close.style.border = '#aaa';
+    // close.addEventListener('click', () => this.closeModal());
+    // this.modal.appendChild(close);
+    // this.modal.css;
+    // this.modal.style.position = 'fixed';
+    // this.modal.style.bottom = '0';
+    // this.modal.style.left = '0';
+    // this.modal.style.right = '0';
+    // this.modal.style.top = '0';
+    // this.modal.style.left = '0';
+    // this.modal.style.width = '100%';
+    // this.modal.style.height = '100%';
+    // this.modal.style.backgroundColor = 'transparent';
+    // this.modal.style.display = 'flex';
+    // this.modal.style.justifyContent = 'center';
+    // this.modal.style.alignItems = 'center';
+    document.body.appendChild(this.modal);
+    this.embed(this.modal);
+    this.modal.show();
+    this.modal.addEventListener('click', () => {
+      // console.log('click');
+      this.closeModal();
+    });
+  }
+
+  private closeModal(): void {
+    if (this.modal) {
+      console.log('closeModal');
+      this.modal?.close();
+      this.modal.remove();
+      this.modal = undefined;
+    }
+  }
 }

package/src/ivms/types.ts

@@ -120,22 +120,38 @@ export type DateAndPlaceOfBirth = {
  * Address
  */
 export type Address = {
-  addressType?: AddressTypeCode;
-  department?: string; //Max50Text
-  subDepartment?: string; //Max70Text
-  streetName?: string; //Max70Text
-  buildingNumber?: string; //Max16Text
-  buildingName?: string; //Max35Text
-  floor?: string; //Max70Text
-  postBox?: string; //Max16Text
-  room?: string; //Max70Text
-  postCode?: string; //Max16Text
-  townName?: string; //Max35Text
-  townLocationName?: string; //Max35Text
-  districtName?: string; //Max35Text
-  countrySubDivision?: string; //Max35Text
-  addressLine?: string[]; //Max35Text max 7 items in array
-  country?: string; //CountryCode (^[A-Z]= {2}$)
+  /** Identifies the nature of the address. */
+  addressType: AddressTypeCode;
+  /** Identification of a division of a large organisation or building. */
+  department?: string;
+  /** Identification of a sub-division of a large organisation or building. */
+  subDepartment?: string;
+  /** Name of a street or thoroughfare. */
+  streetName?: string;
+  /** Number that identifies the position of a building on a street. */
+  buildingNumber?: string;
+  /** Name of the building or house. */
+  buildingName?: string;
+  /** Floor or storey within a building. */
+  floor?: string;
+  /** Numbered box in a post office. */
+  postBox?: string;
+  /** Building room number. */
+  room?: string;
+  /** Identifier consisting of a group of letters and/or numbers that is added to a postal address to assist the sorting of mail. */
+  postcode?: string;
+  /** Name of a built-up area, with defined boundaries, and a local government. */
+  townName: string;
+  /** Specific location name within the town. */
+  townLocationName?: string;
+  /** Identifies a subdivision within a country subdivision. */
+  districtName?: string;
+  /** Identifies a subdivision of a country such as state, region, province. */
+  countrySubDivision?: string;
+  /** Information that locates and identifies a specific address, presented in free format text. */
+  addressLine?: string[];
+  /** Nation with its own government. */
+  country: string;
 };
 
 /**
@@ -173,12 +189,18 @@ export type NaturalPersonName = {
  * NaturalPerson
  */
 export type NaturalPerson = {
-  name?: NaturalPersonName[];
+  /** The distinct words used as identification for an individual. */
+  name: NaturalPersonName;
+  /** The particulars of a location at which a person may be communicated with. */
   geographicAddress?: Address[];
+  /** A distinct identifier used by governments to uniquely identify a natural person. */
   nationalIdentification?: NationalIdentification;
-  customerIdentification?: string; //Max50Text
+  /** A distinct identifier that uniquely identifies the person to the institution in context. */
+  customerIdentification?: string;
+  /** Date and place of birth of a person. */
   dateAndPlaceOfBirth?: DateAndPlaceOfBirth;
-  countryOfResidence?: string; //CountryCode (^[A-Z]{2}$)
+  /** Country in which a person resides (the place of a person's home). */
+  countryOfResidence?: string;
 };
 
 /**
@@ -195,8 +217,10 @@ export type LocalLegalPersonNameID = {
  * LegalPersonNameID
  */
 export type LegalPersonNameID = {
-  legalPersonName?: string; //Max100Text
-  legalPersonNameIdentifierType?: LegalPersonNameTypeCode;
+  /** Name by which the legal person is known. */
+  legalPersonName: string;
+  /** The nature of the name specified. */
+  legalPersonNameIdentifierType: LegalPersonNameTypeCode;
 };
 
 /**
@@ -204,7 +228,7 @@ export type LegalPersonNameID = {
  * LegalPersonName
  */
 export type LegalPersonName = {
-  nameIdentifier?: LegalPersonNameID[];
+  nameIdentifier: LegalPersonNameID[];
   localNameIdentifier?: LocalLegalPersonNameID[];
   phoneticNameIdentifier?: LocalLegalPersonNameID[];
 };
@@ -214,11 +238,16 @@ export type LegalPersonName = {
  * LegalPerson
  */
 export type LegalPerson = {
-  name?: LegalPersonName;
+  /** The name of the legal person. */
+  name: LegalPersonName;
+  /** The address of the legal person. */
   geographicAddress?: Address[];
-  customerNumber?: string; //Max50Text
+  /** A distinct identifier that uniquely identifies the person to the institution in context. */
+  customerNumber?: string;
+  /** A distinct identifier used by governments to uniquely identify a legal person. */
   nationalIdentification?: NationalIdentification;
-  countryOfRegistration?: string; //CountryCode (^[A-Z]{2}$);
+  /** The country in which the legal person is registered. */
+  countryOfRegistration?: string;
 };
 
 /**
@@ -285,9 +314,21 @@ export type TransferPath = {
  * 6.7
  * Data describing the contents of the payload.
  */
-export type PayloadMetadata = {
-  transferPath?: TransliterationMethodCode[];
-};
+export interface PayloadMetadata {
+  /** The method used to map from a national system of writing to Latin script. */
+  transliterationMethod?: TransliterationMethodCode[];
+  /** The version of IVMS 101 to which the payload complies. */
+  payloadVersion: PayloadVersionCode;
+}
+/**
+ * The version of IVMS 101 to which the payload complies.
+ */
+export enum PayloadVersionCode {
+  /** Published May 2020 */
+  V101 = '101',
+  /** Published August 2023 */
+  V101_2023 = '101.2023',
+}
 
 /**
  * IVMS101 definition