FUI - Validation summary

src/apim.runtime.module.ts

@@ -103,6 +103,7 @@ import { SignInRuntimeModule } from "./components/users/signin/signin.runtime.mo
 import { SignInSocialRuntimeModule } from "./components/users/signin-social/signinSocial.runtime.module";
 import { ProfileRuntimeModule } from "./components/users/profile/profile.runtime.module";
 import { SubscriptionsRuntimeModule } from "./components/users/subscriptions/subscriptions.runtime.module";
+import { ValidationSummaryRuntimeModule } from "./components/users/validation-summary/validationSummary.runtime.module";
 
 export class ApimRuntimeModule implements IInjectorModule {
     public register(injector: IInjector): void {
@@ -194,6 +195,7 @@ export class ApimRuntimeModule implements IInjectorModule {
         injector.bindModule(new SignInSocialRuntimeModule());
         injector.bindModule(new ProfileRuntimeModule());
         injector.bindModule(new SubscriptionsRuntimeModule());
+        injector.bindModule(new ValidationSummaryRuntimeModule());
 
         if (process.env.NODE_ENV === staticDataEnvironment) {
             injector.bind("httpClient", StaticDataHttpClient);

src/components/users/validation-summary/ko/validationSummary.html

@@ -1 +1,7 @@
-<validation-summary></validation-summary>
+<!-- ko if: isRedesignEnabled -->
+<fui-validation-summary></fui-validation-summary>
+<!-- /ko -->
+
+<!-- ko ifnot: isRedesignEnabled -->
+<validation-summary></validation-summary>
+<!-- /ko -->

src/components/users/validation-summary/ko/validationSummaryViewModel.ts

@@ -9,8 +9,10 @@ import { StyleModel } from "@paperbits/common/styles";
 })
 export class ValidationSummaryViewModel {
     public readonly styles: ko.Observable<StyleModel>;
+    public readonly isRedesignEnabled: ko.Observable<boolean>;
 
     constructor() {
         this.styles = ko.observable<StyleModel>();
+        this.isRedesignEnabled = ko.observable<boolean>();
     }
 }

src/components/users/validation-summary/ko/validationSummaryViewModelBinder.ts

@@ -1,19 +1,28 @@
 import { StyleCompiler } from "@paperbits/common/styles";
 import { ViewModelBinder, WidgetState } from "@paperbits/common/widgets";
+import { ISiteService } from "@paperbits/common/sites/ISiteService";
 import { ValidationSummaryModel } from "../validationSummaryModel";
 import { ValidationSummaryViewModel } from "./validationSummaryViewModel";
+import { isRedesignEnabledSetting } from "../../../../constants";
 
 
 export class ValidationSummaryViewModelBinder implements ViewModelBinder<ValidationSummaryModel, ValidationSummaryViewModel> {
-    constructor(private readonly styleCompiler: StyleCompiler) { }
+    constructor(
+        private readonly styleCompiler: StyleCompiler,
+        private readonly siteService: ISiteService,
+    ) { }
 
     public stateToInstance(state: WidgetState, componentInstance: ValidationSummaryViewModel): void {
         componentInstance.styles(state.styles);
+
+        componentInstance.isRedesignEnabled(state.isRedesignEnabled);
     }
 
     public async modelToState(model: ValidationSummaryModel, state: WidgetState): Promise<void> {
         if (model.styles) {
             state.styles = await this.styleCompiler.getStyleModelAsync(model.styles);
         }
+
+        state.isRedesignEnabled = !!(await this.siteService.getSetting(isRedesignEnabledSetting));
     }
-}
+}

src/components/users/validation-summary/react/ValidationSummaryRuntime.tsx

@@ -0,0 +1,72 @@
+import * as React from "react";
+import { useCallback, useEffect, useState } from "react";
+import {
+    FluentProvider,
+    MessageBar,
+    MessageBarBody,
+} from "@fluentui/react-components";
+import { Resolve } from "@paperbits/react/decorators";
+import { EventManager } from "@paperbits/common/events";
+import * as Constants from "../../../../constants";
+import { onValidationErrors } from "../constants";
+import { ValidationReport } from "../../../../contracts/validationReport";
+
+export const selector = "fui-validation-summary";
+
+type ValidationSummaryRuntimeProps = {};
+type ValidationSummaryRuntimeFCProps = ValidationSummaryRuntimeProps & {
+    eventManager: EventManager;
+};
+
+const errorGroups: Record<string, string[]> = {};
+
+const ProductSubscribeRuntimeFC = ({
+    eventManager,
+}: ValidationSummaryRuntimeFCProps) => {
+    const [errorMsgs, setErrorMsgs] = useState<string[]>([]);
+
+    const showValidationSummary = useCallback((event: ValidationReport) => {
+        errorGroups[event.source] = event.errors;
+        const errorSum = [];
+        Object.values(errorGroups).forEach((curGroup) => {
+            curGroup.forEach((error) => errorSum.push(error));
+        });
+        setErrorMsgs(errorSum);
+
+        document.getElementsByTagName(selector)[0]?.scrollIntoView();
+    }, []);
+
+    useEffect(() => {
+        eventManager.addEventListener(onValidationErrors, showValidationSummary);
+        return () =>
+            eventManager.removeEventListener(onValidationErrors, showValidationSummary);
+    }, [showValidationSummary]);
+
+    if (!errorMsgs.length) return <></>;
+
+    return (
+        <>
+            {errorMsgs.map((msg) => (
+                <MessageBar key={msg} intent="error" style={{ marginBottom: "1rem" }}>
+                    <MessageBarBody>{msg}</MessageBarBody>
+                </MessageBar>
+            ))}
+        </>
+    );
+};
+
+export class ValidationSummaryRuntime extends React.Component<ValidationSummaryRuntimeProps> {
+    @Resolve("eventManager")
+    public eventManager: EventManager;
+
+    render() {
+        return (
+            <FluentProvider theme={Constants.fuiTheme}>
+                <ProductSubscribeRuntimeFC
+                    {...this.props}
+                    eventManager={this.eventManager}
+                />
+            </FluentProvider>
+        );
+    }
+}

src/components/users/validation-summary/validationSummary.runtime.module.ts

@@ -0,0 +1,10 @@
+import { IInjector, IInjectorModule } from "@paperbits/common/injection";
+import { registerCustomElement } from "@paperbits/react/customElements";
+import { selector, ValidationSummaryRuntime } from "./react/ValidationSummaryRuntime";
+
+export class ValidationSummaryRuntimeModule implements IInjectorModule {
+    public register(injector: IInjector): void {
+        injector.bind("ValidationSummaryRuntimeModule", ValidationSummaryRuntime);
+        registerCustomElement(ValidationSummaryRuntime, selector, injector);
+    }
+}

src/themes/website/styles/widgets/fui/fluentui.scss

@@ -57,6 +57,7 @@ fui-product-subscribe-runtime,
 fui-product-subscriptions-runtime,
 fui-signin-runtime,
 fui-profile-runtime,
-fui-subscriptions-runtime {
+fui-subscriptions-runtime,
+fui-validation-summary {
     width: 100%;
 }