@visma-swno/customer-onboarding-wizard 1.0.0 → 1.0.2

package/README.md

@@ -24,9 +24,11 @@ npm install @visma-swno/customer-onboarding-wizard
 ```html
 <vsn-customer-onboarding-wizard 
   baseUrl="https://api.example.com"
-  taskId="task-12345"
   customerId="customer-67890"
-  locale="en-GB">
+  taskId="task-12345"
+  locale="en-GB"
+  step="welcome"
+  adminUrl="https://admin.example.com/customer/user-access">
 </vsn-customer-onboarding-wizard>
 ```
 

package/dist/button-styles.css.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Shared button styles for all wizard step components.
+ * Include in `static styles` alongside `designTokens`.
+ */
+export declare const buttonStyles: import('lit').CSSResult;

package/dist/components/customer-onboarding-wizard/customer-onboarding-wizard.d.ts

@@ -0,0 +1,98 @@
+import { LitElement } from 'lit';
+import { SupportedLocale } from '../../core/i18n.service';
+export declare class CustomerOnboardingWizard extends LitElement {
+    locale: SupportedLocale;
+    baseUrl: string;
+    adminUrl: string;
+    taskId: string;
+    customerId: string;
+    step: 'welcome' | 'company' | 'administrators' | 'partner-access' | 'complete';
+    private static readonly stepMap;
+    private userName;
+    private currentUserProfile;
+    private currentStep;
+    private completedSteps;
+    private errorState;
+    private customerInfo;
+    private visible;
+    private i18n;
+    private httpService;
+    private errorMessageListener;
+    private get steps();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * Set up listener for error-message events from HttpService
+     * Listens on component element for instance-scoped events
+     */
+    private setupErrorMessageListener;
+    /**
+     * Remove error-message listener on component disconnect
+     */
+    private removeErrorMessageListener;
+    /**
+     * Dismiss error message manually
+     */
+    private dismissError;
+    /**
+     * Initialize component with authentication token from host application
+     */
+    private initializeWithAuth;
+    /**
+     * Request authentication token from host application
+     * Host must listen to 'request-token' event and provide token via callback
+     * @returns Promise that resolves with the authentication token
+     */
+    private requestAuthToken;
+    /**
+     * Load user profile from API and set userName
+     * userName is populated from getUserProfile() API call
+     * Falls back to default 'User' if request fails
+     */
+    private loadUserProfile;
+    /**
+     * Load customer info from API
+     * customerInfo is populated from getCustomerInfo() API call
+     * Falls back to null if request fails or customerId is not provided
+     */
+    private loadCustomerInfo;
+    /**
+     * Update authentication token
+     * Call this method from host application to update token (e.g., after refresh)
+     * @param token - New OAuth2 access token
+     */
+    updateToken(token: string | null): void;
+    willUpdate(changedProperties: Map<string, any>): void;
+    static styles: import('lit').CSSResult[];
+    /**
+     * Load data required for the given step number.
+     * Called in two scenarios:
+     *  1. On initial load — from `initializeWithAuth()` after the auth token is set,
+     *     using the `currentStep` derived from the `step` property (direct navigation).
+     *  2. On user navigation — from `handleStartSetup()` when entering step 1.
+     *
+     * When adding data requirements for future steps (e.g. administrators for step 2),
+     * add the corresponding fetch call here with the appropriate step guard.
+     */
+    private loadDataForStep;
+    private handleStartSetup;
+    private handleNext;
+    private handleComplete;
+    private handleSaveAndClose;
+    private handleEditCustomer;
+    private navigate;
+    private handleClose;
+    private getStepClass;
+    private getLineSegmentClass;
+    private renderStepIndicators;
+    render(): import('lit-html').TemplateResult<1>;
+    /**
+     * Render error banner if there's an error message
+     */
+    private renderErrorBanner;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'vsn-customer-onboarding-wizard': CustomerOnboardingWizard;
+    }
+}

package/dist/components/customer-onboarding-wizard/wizard-step-complete.d.ts

@@ -0,0 +1,18 @@
+import { LitElement } from 'lit';
+import { Translations } from '../../core/i18n.service';
+/**
+ * Completion Screen Component
+ * Displays success message and summary after completing onboarding wizard
+ */
+export declare class WizardStepComplete extends LitElement {
+    translations: Translations;
+    static styles: import('lit').CSSResult[];
+    private handleClose;
+    private handleGoToAdmin;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'wizard-step-complete': WizardStepComplete;
+    }
+}

package/dist/components/customer-onboarding-wizard/wizard-step-welcome.d.ts

@@ -0,0 +1,19 @@
+import { LitElement } from 'lit';
+import { Translations } from '../../core/i18n.service';
+/**
+ * Welcome Step Component
+ * Displays welcome message with user name and setup description
+ */
+export declare class WizardStepWelcome extends LitElement {
+    userName: string;
+    translations: Translations;
+    static styles: import('lit').CSSResult[];
+    private handleStartSetup;
+    private handleSaveAndClose;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'wizard-step-welcome': WizardStepWelcome;
+    }
+}

package/dist/components/customer-onboarding-wizard/wizard-step1-company.d.ts

@@ -0,0 +1,46 @@
+import { LitElement } from 'lit';
+import { Translations, SupportedLocale } from '../../core/i18n.service';
+import { CustomerInfo } from '../../core/http.service';
+/**
+ * Company Step Component
+ * Displays customer company information including contact, subscriptions, and partner details
+ */
+export declare class WizardStep1Company extends LitElement {
+    translations: Translations;
+    locale: SupportedLocale;
+    customerInfo: CustomerInfo | null;
+    private editingContact;
+    private countryDropdownOpen;
+    private fieldErrors;
+    private editName;
+    private editAddress1;
+    private editAddress2;
+    private editPostalCode;
+    private editCity;
+    private editCountryCode;
+    private editWebUrl;
+    private editContactEmail;
+    private localCustomer;
+    static styles: import('lit').CSSResult[];
+    private getCountryLabel;
+    private handleNext;
+    private handleSaveAndClose;
+    private handleEditContact;
+    private handleSaveChanges;
+    private handleCancelEdit;
+    private validateField;
+    private clearFieldError;
+    private validateForm;
+    private toggleCountryDropdown;
+    private selectCountry;
+    private handleCountryFocusOut;
+    private handleCountryKeydown;
+    protected updated(changedProperties: Map<PropertyKey, unknown>): void;
+    private handleStepKeydown;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'wizard-step1-company': WizardStep1Company;
+    }
+}

package/dist/components/customer-onboarding-wizard/wizard-step2-administrators.d.ts

@@ -0,0 +1,57 @@
+import { LitElement } from 'lit';
+import { Translations, SupportedLocale } from '../../core/i18n.service';
+import { HttpService, UserProfile } from '../../core/http.service';
+/**
+ * Administrators Step Component
+ * Manages administrator user accounts for the customer
+ */
+export declare class WizardStep2Administrators extends LitElement {
+    translations: Translations;
+    httpService: HttpService | null;
+    customerId: string;
+    locale: SupportedLocale;
+    currentUser: UserProfile | null;
+    private existingAdmins;
+    private isLoadingAdmins;
+    private rows;
+    private nextId;
+    private lookingUpIds;
+    private isConfirming;
+    private rowErrors;
+    private _loadSequence;
+    protected updated(changedProperties: Map<string, unknown>): void;
+    private sortAdmins;
+    private loadExistingAdmins;
+    private get hasOpenRow();
+    private get validAdminCount();
+    private get canConfirm();
+    private get canAddMore();
+    private get confirmButtonLabel();
+    private addRow;
+    private removeRow;
+    private doneRow;
+    private editRow;
+    private updateRowEmail;
+    private updateFirstName;
+    private updateLastName;
+    private setRowFieldError;
+    private clearRowFieldError;
+    private validateRowEmail;
+    private validateRowRequiredField;
+    private validateAllRows;
+    private lookupUser;
+    private handleConfirm;
+    private handleSaveAndClose;
+    static styles: import('lit').CSSResult[];
+    private renderExistingAdminRow;
+    private renderLookupRow;
+    private renderFoundRow;
+    private renderNotFoundRow;
+    private renderAdminRow;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'wizard-step2-administrators': WizardStep2Administrators;
+    }
+}

package/dist/components/customer-onboarding-wizard/wizard-step3-partner-access.d.ts

@@ -0,0 +1,36 @@
+import { LitElement } from 'lit';
+import { Translations } from '../../core/i18n.service';
+import { HttpService } from '../../core/http.service';
+/**
+ * Partner Access Step Component
+ * Loads consultants from the partner and lets the user select which ones
+ * should have access to this customer's account.
+ */
+export declare class WizardStep3PartnerAccess extends LitElement {
+    translations: Translations;
+    httpService: HttpService | null;
+    customerId: string;
+    partnerId: string;
+    partnerName: string;
+    private consultants;
+    private isLoading;
+    private isConfirming;
+    private selectedIds;
+    private searchTerm;
+    private _loadSequence;
+    protected updated(changedProperties: Map<string, unknown>): void;
+    private loadConsultants;
+    private get filteredConsultants();
+    private get confirmButtonLabel();
+    private toggleConsultant;
+    private handleConfirm;
+    private handleSaveAndClose;
+    private renderConsultantRow;
+    static styles: import('lit').CSSResult[];
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'wizard-step3-partner-access': WizardStep3PartnerAccess;
+    }
+}

package/dist/core/http.service.d.ts

@@ -0,0 +1,221 @@
+/**
+ * Structured HTTP error with a numeric status code.
+ * Thrown by HttpService.request() for all non-2xx responses so callers
+ * can branch on `error.status` instead of parsing error message strings.
+ */
+export declare class HttpError extends Error {
+    readonly status: number;
+    constructor(status: number, statusText: string);
+}
+export interface RequestConfig {
+    method?: 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH';
+    headers?: Record<string, string>;
+    body?: any;
+    timeout?: number;
+    /**
+     * HTTP status codes for which the error-message event should NOT be emitted.
+     * Use for expected non-success responses (e.g. 404 = user not found).
+     */
+    suppressErrorStatuses?: number[];
+}
+export interface UserProfile {
+    firstName: string;
+    lastName: string;
+    email: string;
+}
+export interface CustomerInfo {
+    customer: {
+        customerId: string;
+        name: string;
+        organizationNumber: string;
+        address1: string;
+        address2: string;
+        postalCode: string;
+        city: string;
+        countryCode: string;
+        webUrl: string;
+        contactEmail: string;
+    };
+    subscriptions: string[];
+    partner: {
+        partnerId: string;
+        name: string;
+    };
+}
+export interface Administrator {
+    email: string;
+    firstName: string;
+    lastName: string;
+}
+export interface AdministratorsResponse {
+    content: Administrator[];
+    totalNumberOfRecords: number;
+}
+export interface AddAdministratorRequest {
+    email: string;
+    firstName: string;
+    lastName: string;
+    languageCode?: string;
+}
+export interface UserByEmailResponse {
+    email: string;
+    firstName: string;
+    lastName: string;
+}
+export interface Consultant {
+    id: string;
+    email: string;
+    firstName: string;
+    lastName: string;
+}
+export interface ConsultantsResponse {
+    content: Consultant[];
+    totalNumberOfRecords: number;
+}
+/**
+ * Request body for PUT /api/v1/customers/{customerId}
+ * Field names follow the API schema (not the internal CustomerInfo shape)
+ */
+export interface EditCustomerRequest {
+    name: string;
+    organizationNumber?: string;
+    address1?: string;
+    address2?: string;
+    postalCode?: string;
+    city?: string;
+    countryCode?: string;
+    telephone?: string;
+    emailAddress?: string;
+    webAddress?: string;
+}
+/**
+ * HTTP Error event detail
+ * Dispatched when authentication/authorization fails (401, 403)
+ */
+export interface HttpErrorDetail {
+    status: number;
+    statusText: string;
+    message: string;
+    endpoint: string;
+    method: string;
+    /**
+     * Callback to retry the failed request
+     * Host application can refresh token, then call retry()
+     */
+    retry: () => Promise<any>;
+}
+/**
+ * Error Message event detail
+ * Dispatched for validation errors, server errors, and network errors
+ * Component will display these errors internally
+ */
+export interface ErrorMessageDetail {
+    status: number;
+    errorKey: 'invalidRequest' | 'validationError' | 'notFound' | 'serverError' | 'requestTimeout' | 'networkError' | 'requestFailed';
+    endpoint: string;
+    method: string;
+}
+export declare class HttpService {
+    private baseUrl;
+    private defaultHeaders;
+    private authToken;
+    private eventTarget;
+    constructor(baseUrl: string, defaultHeaders?: Record<string, string>, eventTarget?: EventTarget);
+    /**
+     * Set the authentication token for all subsequent requests
+     * @param token - OAuth2 access token (from sessionStorage)
+     */
+    setAuthToken(token: string | null): void;
+    /**
+     * Get current authentication token
+     */
+    getAuthToken(): string | null;
+    /**
+     * Emit HTTP error event for authentication/authorization errors
+     * Only emits for 401 (Unauthorized) and 403 (Forbidden)
+     * @param status - HTTP status code (401 or 403)
+     * @param statusText - HTTP status text
+     * @param endpoint - API endpoint that failed
+     * @param method - HTTP method
+     * @param retryFn - Function to retry the request
+     */
+    private emitHttpError;
+    /**
+     * Emit error message event for internal error handling
+     * Emitted for validation errors (400, 422), not-found errors (404), server errors (5xx), and network errors
+     * Component will display these errors in its UI
+     * @param status - HTTP status code or 0 for network errors
+     * @param errorKey - Translation key for the emitted error
+     * @param endpoint - API endpoint that failed
+     * @param method - HTTP method
+     */
+    private emitErrorMessage;
+    request<T>(endpoint: string, config?: RequestConfig): Promise<T>;
+    /**
+     * Get error key based on status code for i18n translation
+     */
+    private getErrorKey;
+    get<T>(endpoint: string, headers?: Record<string, string>): Promise<T>;
+    post<T>(endpoint: string, body: any, headers?: Record<string, string>): Promise<T>;
+    put<T>(endpoint: string, body: any, headers?: Record<string, string>): Promise<T>;
+    delete<T>(endpoint: string, headers?: Record<string, string>): Promise<T>;
+    getUserProfile(): Promise<UserProfile>;
+    /**
+     * Get customer info for a customer
+     * @param customerId - The customer ID
+     * @returns Promise with customer, subscriptions, and partner information
+     */
+    getCustomerInfo(customerId: string): Promise<CustomerInfo>;
+    /**
+     * Get administrators for a customer
+     * @param customerId - The customer ID
+     * @returns Promise with paginated list of administrators
+     */
+    getAdministrators(customerId: string): Promise<AdministratorsResponse>;
+    /**
+     * Edit customer details (name, address, contact info)
+     * PUT /api/v1/customers/{customerId}
+     * @param customerId - The customer ID
+     * @param data - Fields to update
+     * @returns Promise with the parsed response body from the API
+     */
+    editCustomer(customerId: string, data: EditCustomerRequest): Promise<unknown>;
+    /**
+     * Save onboarding progress for a task
+     * @param taskId - The onboarding task ID
+     * @param step - The current step name
+     */
+    saveProgress(taskId: string, step: 'welcome' | 'company' | 'administrators' | 'partner-access'): Promise<void>;
+    /**
+     * Delete an onboarding task after completion
+     * @param taskId - The onboarding task ID
+     */
+    deleteTask(taskId: string): Promise<void>;
+    /**
+     * Look up a user by email address.
+     * Returns null when the user does not exist (404), without triggering the
+     * error banner — a missing user is a valid business outcome here.
+     * @param email - The email address to look up
+     */
+    getUserByEmail(email: string): Promise<UserByEmailResponse | null>;
+    /**
+     * Add administrators to a customer account
+     * POST /api/v1/onboarding/customers/{customerId}/administrators
+     * @param customerId - The customer ID
+     * @param admins - Array of administrator data (email, firstName, lastName, languageCode)
+     */
+    addCustomerAdministrators(customerId: string, admins: AddAdministratorRequest[]): Promise<unknown>;
+    /**
+     * Get consultants for a partner
+     * @param partnerId - The partner ID
+     * @returns Promise with paginated list of consultants
+     */
+    getPartnerConsultants(partnerId: string): Promise<ConsultantsResponse>;
+    /**
+     * Add consultants to a customer
+     * @param customerId - The customer ID
+     * @param consultants - Array of consultant data
+     */
+    addCustomerConsultants(customerId: string, consultants: Consultant[]): Promise<unknown>;
+    patch<T>(endpoint: string, body: any, headers?: Record<string, string>): Promise<T>;
+}

package/dist/core/i18n.service.d.ts

@@ -0,0 +1,135 @@
+/**
+ * I18n Service
+ * Handles internationalization for the customer onboarding wizard
+ * Supported locales: da-DK, en-GB, en-US, fi-FI, nb-NO, nl-NL, sv-SE
+ */
+export type SupportedLocale = 'da-DK' | 'en-GB' | 'en-US' | 'fi-FI' | 'nb-NO' | 'nl-NL' | 'sv-SE';
+export interface Translations {
+    wizard: {
+        title: string;
+    };
+    steps: {
+        company: string;
+        administrators: string;
+        partnerAccess: string;
+        progressLabel: string;
+    };
+    welcome: {
+        greeting: string;
+        description: string;
+    };
+    company: {
+        title: string;
+        description: string;
+        placeholder: string;
+        contactLabel: string;
+        editContactLabel: string;
+        subscriptionLabel: string;
+        address2Placeholder: string;
+        saveChanges: string;
+        cancelEdit: string;
+        companyNameLabel: string;
+        organizationNumberLabel: string;
+        address1Label: string;
+        postalCodeLabel: string;
+        cityLabel: string;
+        countryLabel: string;
+        webUrlLabel: string;
+        emailLabel: string;
+        editFormLabel: string;
+        addressGroupLabel: string;
+        managePlanMessage: string;
+        fieldRequired: string;
+        emailInvalid: string;
+    };
+    administrators: {
+        title: string;
+        description: string;
+        addAdministratorButton: string;
+        addNameButton: string;
+        firstNameLabel: string;
+        lastNameLabel: string;
+        youLabel: string;
+        deleteRowLabel: string;
+        confirmSingular: string;
+        confirmPlural: string;
+        doneButton: string;
+        editButton: string;
+    };
+    partnerAccess: {
+        title: string;
+        description: string;
+        findConsultantPlaceholder: string;
+        loading: string;
+        confirmSingular: string;
+        confirmPlural: string;
+    };
+    complete: {
+        title: string;
+        message1: string;
+        message2: string;
+        goToAdminButton: string;
+    };
+    common: {
+        saveAndClose: string;
+        startSetup: string;
+        confirm: string;
+        close: string;
+        loading: string;
+        dismissError: string;
+    };
+    errors: {
+        invalidRequest: {
+            title: string;
+            message: string;
+        };
+        validationError: {
+            title: string;
+            message: string;
+        };
+        notFound: {
+            title: string;
+            message: string;
+        };
+        serverError: {
+            title: string;
+            message: string;
+        };
+        requestTimeout: {
+            title: string;
+            message: string;
+        };
+        networkError: {
+            title: string;
+            message: string;
+        };
+        requestFailed: {
+            title: string;
+            message: string;
+        };
+    };
+}
+/**
+ * I18n Service Class
+ */
+export declare class I18nService {
+    private currentLocale;
+    /**
+     * Set the current locale
+     * Returns true when the locale is supported, otherwise falls back to en-GB and returns false.
+     */
+    setLocale(locale: SupportedLocale | string): boolean;
+    /**
+     * Get the current locale
+     */
+    getLocale(): SupportedLocale;
+    /**
+     * Get translations for the current locale
+     */
+    getTranslations(): Translations;
+    /**
+     * Get a translation by key path
+     */
+    t(key: string): string;
+}
+export declare const i18n: I18nService;

package/dist/core/icons.d.ts

@@ -0,0 +1,21 @@
+import { SVGTemplateResult } from 'lit';
+/**
+ * Icon library for the onboarding wizard
+ * All icons from Lucide (https://lucide.dev/)
+ */
+export declare const icons: {
+    circle: () => SVGTemplateResult;
+    circleDashed: () => SVGTemplateResult;
+    check: () => SVGTemplateResult;
+    circleDotDashed: () => SVGTemplateResult;
+    circleCheckBig: () => SVGTemplateResult;
+    octagonAlert: () => SVGTemplateResult;
+    x: () => SVGTemplateResult;
+    pencil: () => SVGTemplateResult;
+    info: () => SVGTemplateResult;
+    chevronDown: () => SVGTemplateResult;
+    trash: () => SVGTemplateResult;
+    userRound: () => SVGTemplateResult;
+    plus: () => SVGTemplateResult;
+    search: () => SVGTemplateResult;
+};

package/dist/design-tokens.css.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Design Tokens
+ * Auto-generated from @vsn-ux/gaia-styles/dist/design-tokens.css.
+ * Run `npm run generate:tokens` to regenerate after a @vsn-ux/gaia-styles version bump.
+ */
+export declare const designTokens: import('lit').CSSResult;

package/dist/index.css.d.ts

@@ -0,0 +1 @@
+export declare const globalStyles: import('lit').CSSResult;

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export * from './components/customer-onboarding-wizard/customer-onboarding-wizard';
+export { HttpService } from './core/http.service';
+export type { HttpErrorDetail, ErrorMessageDetail, RequestConfig, UserProfile, CustomerInfo } from './core/http.service';