@soyio/soyio-widget 2.21.0 → 2.22.0

package/README.md

@@ -20,6 +20,7 @@
 - [Consent Request Box](#consent-request-box)
 - [Privacy Center](#privacy-center)
 - [Disclosure Request](#disclosure-request)
+- [Disclosure Request Box](#disclosure-request-box)
 - [Signature Attempt](#signature-attempt)
 - [Auth Request](#auth-request)
 - [Appearance](#appearance)
@@ -366,6 +367,41 @@ The `onEvent` callback is designed to handle various events that occur during wi
 - **`onEvent`**: A callback function triggered upon event occurrences, used for capturing and logging event-related data.
 - **`customColor`**: A hex code string that specifies the base color of the interface.
 
+## Disclosure Request Box
+
+Use `DisclosureRequestBox` when you want to keep the disclosure flow inside your page, without popup windows.
+
+This embedded API currently supports disclosure flows created in advance (existing disclosure requests only).
+
+```html
+<div id="embedded-disclosure"></div>
+
+<script>
+  import { DisclosureRequestBox } from "@soyio/soyio-widget";
+
+  const widget = new DisclosureRequestBox({
+    disclosureRequestId: "<disclosure request id>",
+    customColor: "#0F172A", // Optional
+    onEvent: (event) => {
+      console.log("DisclosureRequestBox event:", event);
+    },
+    onReady: () => {
+      console.log("DisclosureRequestBox is ready");
+    },
+    minHeight: "640px", // Optional
+    height: "720px", // Optional
+    isSandbox: true, // Optional
+  });
+
+  widget.mount("#embedded-disclosure");
+
+  // Optional cleanup
+  // widget.unmount();
+</script>
+```
+
+Passkey registration and passkey authentication are handled through a temporary popup tunnel and then return control to the embedded iframe flow.
+
 ## Signature Attempt
 
 > 📖 [Integration Guide](https://docs.soyio.id/docs/integration-guide/signature/introduction)

package/dist/index.d.ts

@@ -16,15 +16,15 @@ declare type AuthRequestProps = {
     customColor?: string;
 };
 
-declare type BaseConfig = {
-    onEvent: (event: Record<string, unknown>) => void;
+declare type BaseConfig<TEvent = Record<string, unknown>> = {
+    onEvent: (event: TEvent) => void;
     onReady?: () => void;
     isSandbox?: boolean;
     appearance?: SoyioAppearance;
     developmentUrl?: string;
 };
 
-declare abstract class BaseIframeBox<T extends BaseConfig> {
+declare abstract class BaseIframeBox<TEvent, T extends BaseConfig<TEvent>> {
     protected iframe: HTMLIFrameElement | null;
     protected wrapper: HTMLDivElement | null;
     protected skeleton: ISkeletonView | null;
@@ -58,7 +58,7 @@ declare const CLOSED_EVENT = "WIDGET_CLOSED";
 
 export { configSchema }
 
-export declare class ConsentBox extends BaseIframeBox<ConsentConfig> {
+export declare class ConsentBox extends BaseIframeBox<Record<string, unknown>, ConsentConfig> {
     readonly defaultIframePrefix = "consent-box";
     readonly defaultIframeCSSConfig: IframeCSSConfig;
     private state;
@@ -185,6 +185,72 @@ declare type CSSProperties = {
 
 declare type DataSubject = 'anonymous_user' | 'citizen_voter' | 'commuter' | 'consultant' | 'customer' | 'employee' | 'job_applicant' | 'next_of_kin' | 'passenger' | 'patient' | 'prospect' | 'shareholder' | 'supplier_vendor' | 'trainee' | 'visitor';
 
+export declare class DisclosureRequestBox extends BaseIframeBox<DisclosureRequestBoxEvent, DisclosureRequestBoxConfig> {
+    readonly defaultIframePrefix = "disclosure-request-box";
+    private passkeyPopupWindow;
+    private popupListener;
+    private isReadyCallbackFired;
+    iframeUrl(): string;
+    mount(selector: string): Promise<this>;
+    unmount(): void;
+    protected setupListeners(): Promise<void>;
+    protected handleIframeReady(): Promise<void>;
+    private notifyReady;
+    private triggerEvent;
+    private mountPopupListener;
+    private removePopupListener;
+    private handleInfoEvent;
+    private notifyPasskeyEvent;
+    private notifyPasskeyRegistered;
+    private notifyPasskeyAuthenticated;
+    private openPasskeyRegistrationPopup;
+    private openPasskeyAuthenticationPopup;
+}
+
+declare type DisclosureRequestBoxConfig = DisclosureRequestBoxProps & {
+    onEvent: (data: DisclosureRequestBoxEvent) => void;
+    onReady?: () => void;
+    isSandbox?: boolean;
+    developmentUrl?: string;
+} & DisclosureRequestBoxSizing;
+
+declare type DisclosureRequestBoxEvent = EventData | DisclosureRequestBoxPasskeyRequiredEvent | DisclosureRequestBoxPasskeyAuthenticationRequiredEvent | DisclosureRequestBoxPasskeyRegisteredEvent | DisclosureRequestBoxPasskeyAuthenticatedEvent;
+
+declare type DisclosureRequestBoxPasskeyAuthenticatedEvent = {
+    eventName: 'PASSKEY_AUTHENTICATED';
+    type: 'PASSKEY_AUTHENTICATED';
+    identifier: string;
+};
+
+declare type DisclosureRequestBoxPasskeyAuthenticationRequiredEvent = {
+    eventName: 'PASSKEY_AUTHENTICATION_REQUIRED';
+    type: 'PASSKEY_AUTHENTICATION_REQUIRED';
+    requestableToken: string;
+};
+
+declare type DisclosureRequestBoxPasskeyRegisteredEvent = {
+    eventName: 'PASSKEY_REGISTERED';
+    type: 'PASSKEY_REGISTERED';
+    identifier: string;
+};
+
+declare type DisclosureRequestBoxPasskeyRequiredEvent = {
+    eventName: 'PASSKEY_REQUIRED';
+    type: 'PASSKEY_REQUIRED';
+    sessionToken: string;
+    companyId: `com_${string}`;
+};
+
+declare type DisclosureRequestBoxProps = {
+    disclosureRequestId: `dreq_${string}`;
+    customColor?: string;
+};
+
+declare type DisclosureRequestBoxSizing = {
+    height?: string;
+    minHeight?: string;
+};
+
 declare type DisclosureRequestConfig = {
     request: 'disclosure';
     configProps: DisclosureRequestProps;
@@ -245,7 +311,7 @@ declare type NewDisclosureRequestProps = {
     customColor?: string;
 };
 
-export declare class PrivacyCenterBox extends BaseIframeBox<PrivacyCenterConfig> {
+export declare class PrivacyCenterBox extends BaseIframeBox<Record<string, unknown>, PrivacyCenterConfig> {
     readonly defaultIframePrefix = "privacy-center";
     protected readonly _uniqueIdentifier = "privacy-center";
     readonly defaultIframeCSSConfig: IframeCSSConfig;
@@ -462,7 +528,15 @@ declare namespace SoyioTypes {
         DisclosureRequestConfig,
         SignatureRequestConfig,
         AuthRequestConfig,
-        RequestConfig
+        RequestConfig,
+        DisclosureRequestBoxPasskeyAuthenticatedEvent,
+        DisclosureRequestBoxPasskeyAuthenticationRequiredEvent,
+        DisclosureRequestBoxEvent,
+        DisclosureRequestBoxProps,
+        DisclosureRequestBoxPasskeyRegisteredEvent,
+        DisclosureRequestBoxPasskeyRequiredEvent,
+        DisclosureRequestBoxSizing,
+        DisclosureRequestBoxConfig
     }
 }
 export { SoyioTypes }
@@ -476,10 +550,18 @@ declare namespace SoyioTypes_2 {
         SignatureAttemptProps,
         AuthRequestProps,
         EventData,
+        DisclosureRequestBoxPasskeyRequiredEvent,
+        DisclosureRequestBoxPasskeyAuthenticationRequiredEvent,
+        DisclosureRequestBoxPasskeyRegisteredEvent,
+        DisclosureRequestBoxPasskeyAuthenticatedEvent,
+        DisclosureRequestBoxEvent,
         DisclosureRequestConfig,
         SignatureRequestConfig,
         AuthRequestConfig,
-        RequestConfig
+        RequestConfig,
+        DisclosureRequestBoxProps,
+        DisclosureRequestBoxSizing,
+        DisclosureRequestBoxConfig
     }
 }