@soyio/soyio-widget 2.11.2 → 2.12.0

package/README.md

@@ -253,7 +253,7 @@ The **`auth_request`** is a process where, using a previously created `auth_requ
 
   // Widget configuration
   const widgetConfig = {
-    request: "authentication",
+    request: "authentication_request",
     configProps: {
       authRequestId: "<auth request id>",
       customColor: "<custom color>",
@@ -498,3 +498,117 @@ To use the `SoyioTypes` in your project, import it directly from the `@soyio/soy
 ```javascript
 import type { SoyioTypes } from "@soyio/soyio-widget";
 ```
+
+## Server Side Rendering (SSR)
+
+This package is not directly compatible with SSR because of `post-robot`, but there are workarounds that allow you to use it without disrupting the build process. Below are examples on popular SSR frameworks.
+
+### Next.js
+
+
+```tsx
+'use client'
+
+import { useMemo, useEffect, useState } from "react";
+
+export default function PrivacyCenterBox() {
+	const privacyCenterOptions = useMemo(() => ({
+		companyId: 'com_lalala',
+		// ... other options
+		onEvent: () => {}
+	}), []);
+
+	const [privacyCenter, setPrivacyCenter] = useState(null);
+
+	useEffect(() => {
+		async function mountPrivacyCenter() {
+			if (privacyCenter) return;
+
+			const { PrivacyCenterBox } = await import('@soyio/soyio-widget');
+			const privacyCenterBox = new PrivacyCenterBox(privacyCenterOptions);
+			privacyCenterBox.mount("#privacy-center-box");
+
+			setPrivacyCenter(privacyCenterBox);
+		}
+		mountPrivacyCenter();
+
+		return () => privacyCenter?.unmount();
+	}, [privacyCenterOptions, privacyCenter]);
+
+	return (
+		<div>
+			<h1>Hello World</h1>
+			<div id="privacy-center-box"></div>
+		</div>
+	);
+}
+
+```
+
+### Gatsby
+
+```tsx
+// PrivacyCenterBox.tsx
+
+import React, { useEffect, useState, useMemo } from "react";
+
+export default function PrivacyCenterBox({ onReady }) {
+	const [privacyCenter, setPrivacyCenter] = useState(null);
+
+	const privacyCenterOptions = useMemo(() => ({
+		// other options...
+		companyId: process.env.SOYIO_COMPANY_ID || 'com_lalala',
+		onEvent: () => {}
+	}), [onReady]);
+
+	useEffect(() => {
+		async function mountPrivacyCenter() {
+			if (privacyCenter) return;
+
+			const { PrivacyCenterBox } = await import('@soyio/soyio-widget');
+			const privacyCenterBox = new PrivacyCenterBox(privacyCenterOptions);
+			privacyCenterBox.mount("#privacy-center-box");
+
+			setPrivacyCenter(privacyCenterBox);
+		}
+		mountPrivacyCenter();
+
+		return () => privacyCenter?.unmount();
+	}, [privacyCenterOptions, privacyCenter]);
+
+	return (<div id="privacy-center-box"></div>)
+}
+
+```
+
+Then use `React.lazy` and `React.Suspense` when declaring that component elsewhere.
+
+```tsx
+// AnotherComponent.tsx
+
+import React, { useState, useCallback, useEffect } from "react";
+
+const PrivacyCenterBox = React.lazy(() => import('yourPathTo/PrivacyCenterBox'));
+
+export default function PrivacyCenterContainer() {
+	const [isClient, setIsClient] = useState(false);
+
+	useEffect(() => setIsClient(true), []);
+
+	const onReady = useCallback(() => setIsPrivacyCenterLoading(false), []);
+
+	return (
+		<div>
+		  {isClient && 
+		  <React.Suspense fallback={
+			<div>
+				Loading...
+			</div>
+		  }>
+			<PrivacyCenterBox onReady={onReady} />
+		  </React.Suspense>
+		  }
+		</div>
+	)
+}
+```

package/dist/index.d.ts

@@ -1,27 +1,275 @@
-import { AuthRequestConfig } from './widget/types';
-import { AuthRequestProps } from './widget/types';
-import { ConsentBox } from './embeds/consent';
-import { ConsentConfig } from './embeds/consent/types';
-import { ConsentEvent } from './embeds/consent/types';
-import { DisclosureRequestConfig } from './widget/types';
-import { DisclosureRequestProps } from './widget/types';
-import { EventData } from './widget/types';
-import { ExistingDisclosureRequestProps } from './widget/types';
-import { ForceErrors } from './widget/types';
-import { NewDisclosureRequestProps } from './widget/types';
-import { PrivacyCenterBox } from './embeds/privacy-center';
-import { PrivacyCenterConfig } from './embeds/privacy-center/types';
-import { Request as Request_2 } from './widget/types';
-import { RequestConfig } from './widget/types';
-import { SignatureAttemptProps } from './widget/types';
-import { SignatureRequestConfig } from './widget/types';
-import { SoyioAppearance } from './embeds/appearance/types';
-import { SoyioWidget } from './widget';
-import { TooltipManager as _TooltipManager } from './embeds/base/tooltip-manager';
-
-export { ConsentBox }
-
-export { PrivacyCenterBox }
+declare type AuthRequestConfig = {
+    request: 'authentication_request';
+    configProps: AuthRequestProps;
+    onEvent: (data: EventData) => void;
+    isSandbox?: boolean;
+    developmentUrl?: string;
+};
+
+declare type AuthRequestProps = {
+    authRequestId: `authreq_${string}`;
+    customColor?: string;
+};
+
+declare type BaseConfig = {
+    onEvent: (event: Record<string, unknown>) => void;
+    onReady?: () => void;
+    isSandbox?: boolean;
+    appearance?: SoyioAppearance;
+    developmentUrl?: string;
+};
+
+declare abstract class BaseIframeBox<T extends BaseConfig> {
+    protected iframe: HTMLIFrameElement | null;
+    protected skeleton: ISkeletonView | null;
+    protected readonly options: T;
+    protected readonly appearance: SoyioAppearance | null;
+    protected readonly tooltipManager: _TooltipManager;
+    readonly defaultIframeCSSConfig: IframeCSSConfig;
+    protected Skeleton: SkeletonConstructor | null;
+    private readonly defaultUniqueId;
+    abstract readonly defaultIframePrefix: string;
+    constructor(options: T);
+    static generateUniqueId(): string;
+    get uniqueIdentifier(): string;
+    abstract iframeUrl(): string;
+    get iframeIdentifier(): string;
+    protected handleHeightChange(height: number): void;
+    protected handleIframeReady(): Promise<void>;
+    protected handleTooltipChange(tooltipState: ITooltipStateChangeEvent): void;
+    protected setupListeners(): Promise<void>;
+    mount(selector: string): Promise<this>;
+    unmount(): void;
+}
+
+declare const CLOSED_EVENT = "WIDGET_CLOSED";
+
+export declare class ConsentBox extends BaseIframeBox<ConsentConfig> {
+    readonly defaultIframePrefix = "consent-box";
+    readonly defaultIframeCSSConfig: IframeCSSConfig;
+    private state;
+    constructor(options: ConsentConfig);
+    get uniqueIdentifier(): string;
+    iframeUrl(): string;
+    protected handleStateChange(newState: ConsentState): void;
+    protected setupListeners(): Promise<void>;
+    getState(): Readonly<ConsentState>;
+}
+
+declare type ConsentCheckboxChangeEvent = {
+    eventName: 'CONSENT_CHECKBOX_CHANGE';
+    isSelected: boolean;
+    actionToken?: string;
+    identifier: string;
+};
+
+declare type ConsentConfig = BaseConfig & {
+    consentTemplateId: `constpl_${string}`;
+    actionToken?: string;
+    entityId?: `ent_${string}`;
+    context?: string;
+    optionalReconsentBehavior?: 'notice' | 'askAgain' | 'hide';
+    mandatoryReconsentBehavior?: 'notice' | 'askAgain';
+};
+
+declare type ConsentEvent = ConsentCheckboxChangeEvent;
+
+declare type ConsentState = {
+    isSelected: boolean;
+    actionToken: string | null;
+};
+
+declare type CSSProperties = {
+    appearance?: string;
+    accentColor?: string;
+    backgroundColor?: string;
+    border?: string;
+    borderBottom?: string;
+    borderBottomColor?: string;
+    borderBottomLeftRadius?: string;
+    borderBottomRightRadius?: string;
+    borderBottomStyle?: string;
+    borderBottomWidth?: string;
+    borderColor?: string;
+    borderLeft?: string;
+    borderLeftColor?: string;
+    borderLeftStyle?: string;
+    borderLeftWidth?: string;
+    borderRadius?: string;
+    borderRight?: string;
+    borderRightColor?: string;
+    borderRightStyle?: string;
+    borderRightWidth?: string;
+    borderStyle?: string;
+    borderTop?: string;
+    borderTopColor?: string;
+    borderTopLeftRadius?: string;
+    borderTopRightRadius?: string;
+    borderTopStyle?: string;
+    borderTopWidth?: string;
+    borderWidth?: string;
+    boxShadow?: string;
+    color?: string;
+    cursor?: string;
+    fill?: string;
+    fillOpacity?: number;
+    fontFamily?: string;
+    fontSize?: string;
+    fontVariant?: string;
+    fontWeight?: string | number;
+    height?: string;
+    letterSpacing?: string;
+    lineHeight?: string | number;
+    margin?: string;
+    marginBottom?: string;
+    marginLeft?: string;
+    marginRight?: string;
+    marginTop?: string;
+    opacity?: number;
+    outline?: string;
+    outlineOffset?: string;
+    padding?: string;
+    paddingBottom?: string;
+    paddingLeft?: string;
+    paddingRight?: string;
+    paddingTop?: string;
+    mozOsxFontSmoothing?: 'auto' | 'grayscale' | 'unset';
+    WebkitAppearance?: string;
+    webkitFontSmoothing?: 'auto' | 'antialiased' | 'subpixel-antialiased';
+    webkitTextFillColor?: string;
+    width?: string;
+};
+
+declare type DisclosureRequestConfig = {
+    request: 'disclosure';
+    configProps: DisclosureRequestProps;
+    onEvent: (data: EventData) => void;
+    isSandbox?: boolean;
+    developmentUrl?: string;
+};
+
+declare type DisclosureRequestProps = NewDisclosureRequestProps | ExistingDisclosureRequestProps;
+
+declare type EventData = {
+    eventName: 'IDENTITY_VALIDATED' | 'IDENTITY_AUTHENTICATED' | 'IDENTITY_SIGNATURE' | 'DENIED_CAMERA_PERMISSION' | 'REJECTED_SIGNATURE' | 'DISCLOSURE_REQUEST_SUCCESSFUL' | 'UNEXPECTED_ERROR' | 'AUTH_REQUEST_SUCCESSFUL' | typeof CLOSED_EVENT;
+    identityId: `id_${string}`;
+    userReference?: string;
+};
+
+declare type ExistingDisclosureRequestProps = {
+    companyId?: never;
+    templateId?: never;
+    disclosureRequestId: `dreq_${string}`;
+    userReference?: never;
+    userEmail?: never;
+    forceError?: ForceErrors;
+    customColor?: string;
+};
+
+declare type ForceErrors = 'facial_validation_error' | 'document_validation_error' | 'unknown_error' | 'expiration_error' | 'camera_permission_error';
+
+declare interface IBaseEventData {
+    identifier: string;
+    eventName: string;
+}
+
+declare type IframeCSSConfig = {
+    minWidth?: string;
+    maxWidth?: string;
+};
+
+declare interface ISkeletonView {
+    mount(container: HTMLElement): void;
+    hide(): void;
+}
+
+declare interface ITooltipStateChangeEvent extends IBaseEventData {
+    eventName: 'TOOLTIP_STATE_CHANGE';
+    text: string;
+    coordinates: {
+        x: number;
+        y: number;
+    };
+    isVisible: boolean;
+}
+
+declare type NewDisclosureRequestProps = {
+    companyId: `com_${string}`;
+    templateId: `dtpl_${string}`;
+    disclosureRequestId?: never;
+    userReference: string;
+    userEmail?: string;
+    forceError?: ForceErrors;
+    customColor?: string;
+};
+
+export declare class PrivacyCenterBox extends BaseIframeBox<PrivacyCenterConfig> {
+    readonly defaultIframePrefix = "privacy-center";
+    protected readonly _uniqueIdentifier = "privacy-center";
+    readonly defaultIframeCSSConfig: IframeCSSConfig;
+    get uniqueIdentifier(): string;
+    iframeUrl(): string;
+}
+
+declare type PrivacyCenterConfig = BaseConfig & {
+    companyId: `com_${string}`;
+    subjectId?: `ent_${string}`;
+};
+
+declare type Request_2 = 'disclosure' | 'signature' | 'authentication';
+
+declare type RequestConfig = DisclosureRequestConfig | SignatureRequestConfig | AuthRequestConfig;
+
+declare type SignatureAttemptProps = {
+    signatureAttemptId: `sa_${string}`;
+    forceError?: ForceErrors;
+    customColor?: string;
+};
+
+declare type SignatureRequestConfig = {
+    request: 'signature';
+    configProps: SignatureAttemptProps;
+    onEvent: (data: EventData) => void;
+    isSandbox?: boolean;
+    developmentUrl?: string;
+};
+
+declare type SkeletonConstructor = new (id: string) => ISkeletonView;
+
+declare interface SoyioAppearance {
+    theme?: SoyioTheme;
+    variables?: SoyioAppearanceVariables;
+    rules?: SoyioRule;
+}
+
+declare interface SoyioAppearanceVariables {
+    fontFamily?: string;
+    fontSizeBase?: string;
+    borderRadius?: string;
+    borderWidth?: string;
+    borderStyle?: string;
+    colorPrimary?: string;
+    colorSecondary?: string;
+    colorBackground?: string;
+    colorText?: string;
+    colorTextSecondary?: string;
+}
+
+declare type SoyioBaseRule = '.MainContainer' | '.Button' | '.Checkbox' | '.CheckboxInput' | '.CheckboxLabel';
+
+declare type SoyioElementState = '--checked';
+
+declare type SoyioPseudoClass = ':hover' | ':focus' | ':active' | ':disabled' | ':autofill' | ':focus-visible';
+
+declare type SoyioPseudoElement = '::placeholder' | '::selection';
+
+declare type SoyioRule = {
+    [K in SoyioRuleKey]?: CSSProperties;
+};
+
+declare type SoyioRuleKey = `${SoyioBaseRule}${SoyioElementState | SoyioPseudoClass | SoyioPseudoElement | ''}`;
+
+declare type SoyioTheme = 'soyio';
 
 declare namespace SoyioTypes {
     export {
@@ -45,9 +293,42 @@ declare namespace SoyioTypes {
 }
 export { SoyioTypes }
 
+declare namespace SoyioTypes_2 {
+    export {
+        ForceErrors,
+        Request_2 as Request,
+        NewDisclosureRequestProps,
+        ExistingDisclosureRequestProps,
+        DisclosureRequestProps,
+        SignatureAttemptProps,
+        AuthRequestProps,
+        EventData,
+        DisclosureRequestConfig,
+        SignatureRequestConfig,
+        AuthRequestConfig,
+        RequestConfig
+    }
+}
+
+declare class SoyioWidget {
+    #private;
+    private onEvent;
+    constructor(options: SoyioTypes_2.RequestConfig);
+}
 export { SoyioWidget }
 export default SoyioWidget;
 
-export { _TooltipManager }
+export declare class _TooltipManager {
+    private tooltipElement;
+    private tooltipContent;
+    private readonly tooltipClass;
+    private hideTimeout;
+    constructor();
+    private createTooltipElement;
+    private setupGlobalListeners;
+    show(text: string, x: number, y: number): void;
+    hide(): void;
+    destroy(): void;
+}
 
 export { }