@mrfylke/contact-form 0.1.3

package/lib/journey-info/journeyInfoStateMachine.js

@@ -0,0 +1,160 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.journeyInfoStateMachine = void 0;
+exports.createJourneyInfoStateMachine = createJourneyInfoStateMachine;
+const xstate_1 = require("xstate");
+const utils_1 = require("../utils");
+const validation_1 = require("../validation");
+const events_1 = require("./events");
+const setInputsToValidate = (context) => {
+    const { firstName, lastName, email, question } = context;
+    return {
+        question,
+        firstName,
+        lastName,
+        email,
+    };
+};
+function createJourneyInfoStateMachine(onSubmit, paths) {
+    const successPath = paths?.successPath ?? '/contact/success';
+    const errorPath = paths?.errorPath ?? '/contact/error';
+    return (0, xstate_1.setup)({
+        types: {
+            context: {},
+            events: events_1.journeyInfoFormEvents,
+        },
+        guards: {
+            isFormValid: ({ context }) => {
+                const inputsToValidate = setInputsToValidate(context);
+                const errors = (0, validation_1.commonInputValidator)(inputsToValidate);
+                return Object.keys(errors).length === 0;
+            },
+        },
+        actions: {
+            navigateToErrorPage: () => {
+                window.location.href = errorPath;
+            },
+            navigateToSuccessPage: () => {
+                window.location.href = successPath;
+            },
+            clearValidationErrors: (0, xstate_1.assign)({ errorMessages: {} }),
+            setValidationErrors: (0, xstate_1.assign)(({ context, event }) => {
+                if (event.type === 'SUBMIT') {
+                    const inputsToValidate = setInputsToValidate(context);
+                    const errors = (0, validation_1.commonInputValidator)(inputsToValidate);
+                    return {
+                        firstIncorrectErrorMessage: (0, utils_1.findFirstErrorMessage)(event.orderedFormFieldNames, errors),
+                        errorMessages: { ...errors },
+                    };
+                }
+                return context;
+            }),
+            scrollToFirstErrorMessage: (0, xstate_1.assign)(({ context }) => {
+                (0, utils_1.scrollToFirstErrorMessage)(context.firstIncorrectErrorMessage);
+                return context;
+            }),
+            setSubmissionError: (0, xstate_1.assign)({
+                hasSubmissionError: () => true,
+            }),
+            clearSubmissionError: (0, xstate_1.assign)({
+                hasSubmissionError: () => undefined,
+            }),
+            onInputChange: (0, xstate_1.assign)(({ context, event }) => {
+                if (event.type === 'ON_INPUT_CHANGE') {
+                    const { inputName, value } = event;
+                    context.errorMessages[inputName] = [];
+                    return {
+                        ...context,
+                        [inputName]: value,
+                        hasSubmissionError: undefined,
+                    };
+                }
+                return context;
+            }),
+        },
+        actors: {
+            submit: (0, xstate_1.fromPromise)(async ({ input }) => {
+                const base64EncodedAttachments = await (0, utils_1.convertFilesToBase64)(input.attachments || []);
+                const state = {
+                    ...input,
+                    attachments: base64EncodedAttachments,
+                };
+                const response = await onSubmit('journeyInfo', state);
+                if (!response.ok)
+                    throw new Error('Failed to call API');
+                return response.ok;
+            }),
+        },
+    }).createMachine({
+        id: 'journeyInfoStateMachine',
+        initial: 'editing',
+        context: {
+            errorMessages: {},
+        },
+        on: {
+            ON_INPUT_CHANGE: {
+                actions: 'onInputChange',
+            },
+            SUBMIT: { target: '#validating' },
+        },
+        states: {
+            editing: {
+                initial: 'selectJourneyInfoForm',
+                states: {
+                    selectJourneyInfoForm: {},
+                    journeyInfo: {
+                        id: 'journeyInfo',
+                        exit: 'clearValidationErrors',
+                    },
+                    history: {
+                        type: 'history',
+                        history: 'deep',
+                    },
+                },
+            },
+            validating: {
+                id: 'validating',
+                always: [
+                    {
+                        guard: 'isFormValid',
+                        target: '#submitting',
+                    },
+                    {
+                        actions: ['setValidationErrors', 'scrollToFirstErrorMessage'],
+                        target: 'editing.history',
+                    },
+                ],
+            },
+            submitting: {
+                id: 'submitting',
+                invoke: {
+                    src: 'submit',
+                    input: ({ context }) => ({
+                        attachments: context.attachments,
+                        firstName: context.firstName,
+                        lastName: context.lastName,
+                        email: context.email,
+                        question: context.question,
+                    }),
+                    onDone: {
+                        target: 'success',
+                    },
+                    onError: {
+                        target: 'editing.history',
+                        actions: 'setSubmissionError',
+                    },
+                },
+            },
+            success: {
+                entry: 'navigateToSuccessPage',
+                type: 'final',
+            },
+        },
+    });
+}
+exports.journeyInfoStateMachine = createJourneyInfoStateMachine(async (data) => {
+    return fetch('/api/contact/journey-info', {
+        method: 'POST',
+        body: JSON.stringify(data),
+    });
+});

package/lib/layouts/contact-form-container.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react';
+export type ContactFormContainerProps = {
+    /** Header component - host app must provide this */
+    header: ReactNode;
+    /** Footer component - host app must provide this */
+    footer: ReactNode;
+    children: ReactNode;
+};
+export declare function ContactFormContainer({ header, footer, children, }: ContactFormContainerProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=contact-form-container.d.ts.map

package/lib/layouts/contact-form-container.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"contact-form-container.d.ts","sourceRoot":"","sources":["../../src/layouts/contact-form-container.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,MAAM,MAAM,yBAAyB,GAAG;IACpC,oDAAoD;IACpD,MAAM,EAAE,SAAS,CAAC;IAClB,oDAAoD;IACpD,MAAM,EAAE,SAAS,CAAC;IAClB,QAAQ,EAAE,SAAS,CAAC;CACvB,CAAC;AAEF,wBAAgB,oBAAoB,CAAC,EACjC,MAAM,EACN,MAAM,EACN,QAAQ,GACX,EAAE,yBAAyB,2CAS3B"}

package/lib/layouts/contact-form-container.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ContactFormContainer = ContactFormContainer;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const container_module_css_1 = __importDefault(require("./container.module.css"));
+function ContactFormContainer({ header, footer, children, }) {
+    // Header and footer are required - host app must provide them
+    return ((0, jsx_runtime_1.jsxs)("div", { className: container_module_css_1.default.wrapper, children: [header, (0, jsx_runtime_1.jsx)("main", { className: container_module_css_1.default.main, children: children }), footer] }));
+}

package/lib/layouts/contact-form-footer.d.ts

@@ -0,0 +1,5 @@
+export type ContactFormFooterProps = {
+    withoutSettings?: boolean;
+};
+export declare function ContactFormFooter({ withoutSettings }: ContactFormFooterProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=contact-form-footer.d.ts.map

package/lib/layouts/contact-form-footer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"contact-form-footer.d.ts","sourceRoot":"","sources":["../../src/layouts/contact-form-footer.tsx"],"names":[],"mappings":"AAOA,MAAM,MAAM,sBAAsB,GAAG;IACjC,eAAe,CAAC,EAAE,OAAO,CAAC;CAC7B,CAAC;AAUF,wBAAgB,iBAAiB,CAAC,EAAE,eAAuB,EAAE,EAAE,sBAAsB,2CA8LpF"}

package/lib/layouts/contact-form-footer.js

@@ -0,0 +1,59 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ContactFormFooter = ContactFormFooter;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const translations_1 = require("../translations");
+const language_context_1 = require("../translations/language-context");
+const theme_1 = require("../modules/theme");
+const config_1 = require("../modules/config");
+const footer_module_css_1 = __importDefault(require("./footer.module.css"));
+function getAccentColor(theme) {
+    const accent = theme?.color?.background?.accent;
+    const accent4 = accent?.[4];
+    if (accent4?.foreground?.primary)
+        return accent4.foreground.primary;
+    const neutral = theme?.color?.background?.neutral;
+    return neutral?.[0]?.foreground?.primary ?? 'inherit';
+}
+function ContactFormFooter({ withoutSettings = false }) {
+    const { t, language } = (0, translations_1.useTranslation)();
+    const { isDarkMode, toggleDarkmode, theme, isThemeForced } = (0, theme_1.useTheme)();
+    const { org, layout } = (0, config_1.useContactFormConfig)();
+    const { setLanguage } = (0, language_context_1.useLanguageSettings)();
+    const footerUrls = layout?.footerUrls;
+    const footerLinksOverride = layout?.footerLinksOverride;
+    const buttonStyle = { color: getAccentColor(theme), borderColor: getAccentColor(theme) };
+    const basePath = layout?.basePath ?? '/contact';
+    const supportHref = footerUrls?.help ?? basePath;
+    // Group override links by section if section is provided
+    const groupedOverrideLinks = footerLinksOverride ? footerLinksOverride.reduce((acc, link) => {
+        const section = link.section || 'default';
+        if (!acc[section])
+            acc[section] = [];
+        acc[section].push(link);
+        return acc;
+    }, {}) : null;
+    return ((0, jsx_runtime_1.jsx)("footer", { className: footer_module_css_1.default.footer, children: (0, jsx_runtime_1.jsxs)("div", { className: footer_module_css_1.default.footer__content, children: [(0, jsx_runtime_1.jsxs)("div", { className: footer_module_css_1.default.footer__top, children: [footerLinksOverride ? (
+                        // Render override links, grouped by section
+                        Object.entries(groupedOverrideLinks).map(([sectionKey, links]) => ((0, jsx_runtime_1.jsxs)("section", { className: footer_module_css_1.default.footer__section, children: [sectionKey !== 'default' && ((0, jsx_runtime_1.jsx)("h3", { className: footer_module_css_1.default.footer__title, children: sectionKey })), (0, jsx_runtime_1.jsx)("ul", { className: footer_module_css_1.default.footer__linkList, children: links.map((link, index) => ((0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)("a", { href: link.href, target: "_blank", rel: "noreferrer", children: t(link.label) }) }, index))) })] }, sectionKey)))) : (
+                        // Standard behavior: fixed sections
+                        (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("section", { className: footer_module_css_1.default.footer__section, children: [(0, jsx_runtime_1.jsx)("h3", { className: footer_module_css_1.default.footer__title, children: t(translations_1.ModuleText.Layout.base.footer.sections.general.header) }), (0, jsx_runtime_1.jsx)("ul", { className: footer_module_css_1.default.footer__linkList, children: footerUrls?.tickets && ((0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)("a", { href: footerUrls.tickets, target: "_blank", rel: "noreferrer", children: t(translations_1.ModuleText.Layout.base.footer.sections.general.ticketPricesPageLink) }) })) })] }), (0, jsx_runtime_1.jsxs)("section", { className: footer_module_css_1.default.footer__section, children: [(0, jsx_runtime_1.jsx)("h3", { className: footer_module_css_1.default.footer__title, children: t(translations_1.ModuleText.Layout.base.footer.sections.contact.header) }), (0, jsx_runtime_1.jsx)("ul", { className: footer_module_css_1.default.footer__linkList, children: (0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)("a", { href: supportHref, children: t(translations_1.ModuleText.Layout.base.footer.sections.general.supportPageLink) }) }) })] })] })), !withoutSettings && ((0, jsx_runtime_1.jsxs)("section", { className: footer_module_css_1.default.footer__section, children: [(0, jsx_runtime_1.jsx)("h3", { className: footer_module_css_1.default.footer__title, children: t(!isThemeForced
+                                        ? translations_1.ModuleText.Layout.base.footer.sections.settings.header
+                                        : translations_1.ModuleText.Layout.base.footer.sections.settings.forcedThemeHeader) }), (0, jsx_runtime_1.jsxs)("ul", { className: footer_module_css_1.default.footer__linkList, children: [language !== translations_1.Language.Norwegian && ((0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)("button", { className: footer_module_css_1.default.buttonLink, onClick: () => setLanguage(translations_1.Language.Norwegian), style: buttonStyle, children: t(translations_1.ModuleText.Layout.base.footer.sections.settings.setLanguage.norsk) }) })), language !== translations_1.Language.English && ((0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)("button", { className: footer_module_css_1.default.buttonLink, onClick: () => setLanguage(translations_1.Language.English), style: buttonStyle, children: t(translations_1.ModuleText.Layout.base.footer.sections.settings.setLanguage.english) }) })), language !== translations_1.Language.Nynorsk && ((0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)("button", { className: footer_module_css_1.default.buttonLink, onClick: () => setLanguage(translations_1.Language.Nynorsk), style: buttonStyle, children: t(translations_1.ModuleText.Layout.base.footer.sections.settings.setLanguage.nynorsk) }) })), !isThemeForced && ((0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)("button", { className: footer_module_css_1.default.buttonLink, style: buttonStyle, onClick: () => toggleDarkmode(!isDarkMode), children: isDarkMode
+                                                    ? t(translations_1.ModuleText.Layout.base.footer.sections.settings.toggleLightMode)
+                                                    : t(translations_1.ModuleText.Layout.base.footer.sections.settings.toggleDarkMode) }) }))] }), (0, jsx_runtime_1.jsx)("p", { className: footer_module_css_1.default.footer__cookieWarning, children: t(!isThemeForced
+                                        ? translations_1.ModuleText.Layout.base.footer.sections.settings.cookiesWarning
+                                        : translations_1.ModuleText.Layout.base.footer.sections.settings.languageCookiesWarning) })] }))] }), (0, jsx_runtime_1.jsx)("hr", {}), (0, jsx_runtime_1.jsxs)("section", { className: footer_module_css_1.default.footer__bottomLinks, children: [footerLinksOverride ? (
+                        // When override is set, bottom links come from override (filter by section if needed)
+                        // For now, render all override links that don't have a section or have section='bottom'
+                        (() => {
+                            const bottomLinks = footerLinksOverride.filter(link => !link.section || link.section === 'bottom');
+                            return bottomLinks.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: footer_module_css_1.default.footer__bottomLinks__mid, children: bottomLinks.map((link, index) => ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [index > 0 && (0, jsx_runtime_1.jsx)("span", { "aria-hidden": "true", children: "\u2022" }), (0, jsx_runtime_1.jsx)("a", { href: link.href, target: "_blank", rel: "noreferrer", children: t(link.label) })] }, index))) }));
+                        })()) : (
+                        // Standard behavior: privacy and accessibility from footerUrls
+                        (footerUrls?.privacy || footerUrls?.accessibility) && ((0, jsx_runtime_1.jsxs)("div", { className: footer_module_css_1.default.footer__bottomLinks__mid, children: [footerUrls?.privacy && ((0, jsx_runtime_1.jsx)("a", { href: footerUrls.privacy, target: "_blank", rel: "noreferrer", children: t(translations_1.ModuleText.Layout.base.footer.bottomLinks.privacy) })), footerUrls?.privacy && footerUrls?.accessibility && ((0, jsx_runtime_1.jsx)("span", { "aria-hidden": "true", children: "\u2022" })), footerUrls?.accessibility && ((0, jsx_runtime_1.jsx)("a", { href: footerUrls.accessibility, target: "_blank", rel: "noreferrer", children: t(translations_1.ModuleText.Layout.base.footer.bottomLinks.accessibilityStatement) }))] }))), org.logo && ((0, jsx_runtime_1.jsx)("img", { className: footer_module_css_1.default.footer__orgLogo, src: org.logo.accentBar ?? org.logo.srcDark ?? org.logo.src, alt: org.logo.alt }))] })] }) }));
+}

package/lib/layouts/contact-form-header.d.ts

@@ -0,0 +1,9 @@
+export type ContactFormHeaderProps = {
+    /** Override home page URL for the "Go to X" button. Uses layout.footerUrls.homePage when not set. */
+    homeUrl?: {
+        href: string;
+        name: string;
+    };
+};
+export declare function ContactFormHeader({ homeUrl }: ContactFormHeaderProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=contact-form-header.d.ts.map

package/lib/layouts/contact-form-header.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"contact-form-header.d.ts","sourceRoot":"","sources":["../../src/layouts/contact-form-header.tsx"],"names":[],"mappings":"AASA,MAAM,MAAM,sBAAsB,GAAG;IACjC,qGAAqG;IACrG,OAAO,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;CAC5C,CAAC;AAoBF,wBAAgB,iBAAiB,CAAC,EAAE,OAAO,EAAE,EAAE,sBAAsB,2CA6DpE"}

package/lib/layouts/contact-form-header.js

@@ -0,0 +1,45 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ContactFormHeader = ContactFormHeader;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const link_1 = __importDefault(require("next/link"));
+const translations_1 = require("../translations");
+const config_1 = require("../modules/config");
+const theme_1 = require("../modules/theme");
+const button_1 = require("../components/button");
+const translations_2 = require("../translations");
+const header_module_css_1 = __importDefault(require("./header.module.css"));
+function getAccentContrastColor(theme) {
+    const accent = theme?.color?.background?.accent;
+    const accent4 = accent?.[4];
+    if (accent4 && typeof accent4 === 'object' && 'foreground' in accent4) {
+        const fg = accent4.foreground?.primary;
+        if (fg) {
+            return {
+                background: accent4.background ?? 'transparent',
+                foreground: { primary: fg, secondary: fg, disabled: fg },
+            };
+        }
+    }
+    return {
+        background: 'transparent',
+        foreground: { primary: 'currentColor', secondary: 'currentColor', disabled: 'currentColor' },
+    };
+}
+function ContactFormHeader({ homeUrl }) {
+    const { t } = (0, translations_1.useTranslation)();
+    const { org, layout } = (0, config_1.useContactFormConfig)();
+    const { theme } = (0, theme_1.useTheme)();
+    const accentColor = getAccentContrastColor(theme);
+    // Use override links if provided, otherwise fall back to standard behavior
+    const headerLinks = layout?.headerLinksOverride;
+    const standardHome = homeUrl ?? layout?.footerUrls?.homePage;
+    return ((0, jsx_runtime_1.jsx)("header", { className: header_module_css_1.default.pageHeader, children: (0, jsx_runtime_1.jsxs)("div", { className: header_module_css_1.default.pageHeader__content, children: [(0, jsx_runtime_1.jsx)("h1", { className: header_module_css_1.default.pageHeader__logo, children: (0, jsx_runtime_1.jsx)(link_1.default, { href: layout?.basePath ?? '/contact', className: header_module_css_1.default.pageHeader__logoLink, "data-testid": "homeButton", children: org.logo ? ((0, jsx_runtime_1.jsx)("img", { className: header_module_css_1.default.pageHeader__logoImg, src: org.logo.accentBar ?? org.logo.srcDark ?? org.logo.src, alt: org.logo.alt })) : ((0, jsx_runtime_1.jsx)("span", { children: org.name })) }) }), headerLinks ? (
+                // Render override links
+                headerLinks.map((link, index) => ((0, jsx_runtime_1.jsx)(button_1.ButtonLink, { href: link.href, title: t(link.label), mode: "secondary", backgroundColor: accentColor, radiusSize: "circular", size: "pill", aProps: { target: '_blank', rel: 'noreferrer' } }, index)))) : (
+                // Standard behavior: single optional home link
+                standardHome && ((0, jsx_runtime_1.jsx)(button_1.ButtonLink, { href: standardHome.href, title: t(translations_2.CommonText.Layout.homeLink(standardHome.name)), mode: "secondary", backgroundColor: accentColor, radiusSize: "circular", size: "pill", aProps: { target: '_blank', rel: 'noreferrer' } })))] }) }));
+}

package/lib/layouts/contact-page-layout.d.ts

@@ -0,0 +1,24 @@
+import { PropsWithChildren } from 'react';
+import { TranslatedString } from "../translations";
+import { MonoIcons } from "../components/icon";
+export type ContactPage = {
+    title: TranslatedString;
+    href: string;
+    icon: MonoIcons;
+};
+/**
+ * Standard contact pages (tabs) as defined in the package.
+ * This is the default list used when no overrides are provided.
+ */
+export declare const getStandardContactPages: () => ContactPage[];
+export declare const contactPages: ContactPage[];
+export type ContactPageLayoutProps = PropsWithChildren<{
+    title: string;
+    backLink?: {
+        href: string;
+        label: TranslatedString | Record<string, string>;
+    };
+}>;
+declare function ContactPageLayout({ children, backLink }: ContactPageLayoutProps): import("react/jsx-runtime").JSX.Element;
+export default ContactPageLayout;
+//# sourceMappingURL=contact-page-layout.d.ts.map

package/lib/layouts/contact-page-layout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"contact-page-layout.d.ts","sourceRoot":"","sources":["../../src/layouts/contact-page-layout.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,iBAAiB,EAA+B,MAAM,OAAO,CAAC;AAItE,OAAO,EAAW,gBAAgB,EAAiB,MAAM,iBAAiB,CAAC;AAC3E,OAAO,EAAW,SAAS,EAAC,MAAM,oBAAoB,CAAC;AAMvD,MAAM,MAAM,WAAW,GAAG;IACtB,KAAK,EAAE,gBAAgB,CAAC;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,SAAS,CAAC;CACnB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,uBAAuB,QAAO,WAAW,EAoCrD,CAAC;AAGF,eAAO,MAAM,YAAY,eAA4B,CAAC;AAetD,MAAM,MAAM,sBAAsB,GAAG,iBAAiB,CAAC;IACnD,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,gBAAgB,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;KAAE,CAAC;CACjF,CAAC,CAAC;AAEH,iBAAS,iBAAiB,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,sBAAsB,2CAiFxE;AAED,eAAe,iBAAiB,CAAC"}

package/lib/layouts/contact-page-layout.js

@@ -0,0 +1,104 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.contactPages = exports.getStandardContactPages = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const layout_module_css_1 = __importDefault(require("./layout.module.css"));
+const navigation_1 = require("next/navigation");
+const link_1 = __importDefault(require("next/link"));
+const translations_1 = require("../translations");
+const icon_1 = require("../components/icon");
+const button_1 = require("../components/button");
+const typography_1 = require("../components/typography");
+const css_1 = require("../utils/css");
+const config_1 = require("../modules/config");
+/**
+ * Standard contact pages (tabs) as defined in the package.
+ * This is the default list used when no overrides are provided.
+ */
+const getStandardContactPages = () => [
+    {
+        title: translations_1.PageText.Contact.ticketControl.title,
+        href: '/contact/ticket-control',
+        icon: 'ticketing/TicketInvalid',
+    },
+    {
+        title: translations_1.PageText.Contact.refund.title,
+        href: '/contact/refund',
+        icon: 'transportation-entur/Taxi',
+    },
+    {
+        title: translations_1.PageText.Contact.modeOfTransport.title,
+        href: '/contact/means-of-transport',
+        icon: 'transportation/BusFill',
+    },
+    {
+        title: translations_1.PageText.Contact.ticketing.title,
+        href: '/contact/ticketing',
+        icon: 'devices/Phone',
+    },
+    {
+        title: translations_1.PageText.Contact.lostProperty.title,
+        href: '/contact/lost-property',
+        icon: 'actions/Support',
+    },
+    {
+        title: translations_1.PageText.Contact.groupTravel.title,
+        href: '/contact/group-travel',
+        icon: 'ticketing/TicketMultiple',
+    },
+    {
+        title: translations_1.PageText.Contact.journeyInfo.title,
+        href: '/contact/journey-info',
+        icon: 'actions/Feedback',
+    },
+];
+exports.getStandardContactPages = getStandardContactPages;
+// Keep contactPages export for backward compatibility
+exports.contactPages = (0, exports.getStandardContactPages)();
+const pagesWithoutPrivacyAndTerms = [
+    '/contact/lost-property',
+    '/contact/group-travel',
+];
+/**
+ * Extract page ID from href (e.g., '/contact/lost-property' -> 'lost-property')
+ */
+function getPageIdFromHref(href) {
+    const parts = href.split('/');
+    return parts[parts.length - 1] || '';
+}
+function ContactPageLayout({ children, backLink }) {
+    const { t } = (0, translations_1.useTranslation)();
+    const pathname = (0, navigation_1.usePathname)();
+    const { pagesOverrides } = (0, config_1.useContactFormConfig)();
+    const [selectedContactPage, setSelectedContactPage] = (0, react_1.useState)(undefined);
+    // Resolve visible pages: standard list minus hidden pages
+    const visiblePages = (0, react_1.useMemo)(() => {
+        const standard = (0, exports.getStandardContactPages)();
+        const hidePageIds = pagesOverrides?.hidePageIds || [];
+        return standard.filter((page) => {
+            const pageId = getPageIdFromHref(page.href);
+            return !hidePageIds.includes(pageId);
+        });
+    }, [pagesOverrides]);
+    (0, react_1.useEffect)(() => {
+        const activePage = visiblePages.find((contactPage) => pathname.includes(contactPage.href));
+        setSelectedContactPage(activePage);
+    }, [pathname, visiblePages]);
+    const displayPrivacyAndTerms = (contactPage) => {
+        if (!contactPage)
+            return false;
+        return !pagesWithoutPrivacyAndTerms.includes(contactPage.href);
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { className: layout_module_css_1.default.layout, children: [(0, jsx_runtime_1.jsxs)("div", { children: [backLink && ((0, jsx_runtime_1.jsx)("div", { className: layout_module_css_1.default.homeLink__container, children: (0, jsx_runtime_1.jsx)(button_1.ButtonLink, { mode: "transparent", href: backLink.href, title: t(backLink.label), icon: { left: (0, jsx_runtime_1.jsx)(icon_1.MonoIcon, { icon: "navigation/ArrowLeft" }) } }) })), (0, jsx_runtime_1.jsxs)("div", { className: layout_module_css_1.default.layout__container, children: [(0, jsx_runtime_1.jsx)(typography_1.Typo.h2, { textType: "heading__2xl", children: t(translations_1.PageText.Contact.contactPageLayout.title) }), (0, jsx_runtime_1.jsx)("nav", { className: layout_module_css_1.default.contact_page_navigator__container, children: visiblePages.map((contactPage, index) => {
+                                    const isActive = pathname.includes(contactPage.href);
+                                    return ((0, jsx_runtime_1.jsxs)(link_1.default, { shallow: true, href: contactPage.href, className: (0, css_1.andIf)({
+                                            [layout_module_css_1.default.contact_page_navigator__link]: true,
+                                            [layout_module_css_1.default.contact_page_navigator__activePage]: isActive,
+                                        }), children: [(0, jsx_runtime_1.jsx)(icon_1.MonoIcon, { size: "large", icon: contactPage.icon }), (0, jsx_runtime_1.jsx)(typography_1.Typo.p, { textType: "body__m", children: t(contactPage.title) })] }, index));
+                                }) })] })] }), children, displayPrivacyAndTerms(selectedContactPage) && ((0, jsx_runtime_1.jsx)("div", { className: layout_module_css_1.default.privacyAndTerms, children: (0, jsx_runtime_1.jsx)(typography_1.Typo.p, { textType: "body__s__strong", children: t(translations_1.PageText.Contact.contactPageLayout.privacyAndTerms) }) }))] }));
+}
+exports.default = ContactPageLayout;

package/lib/layouts/container.module.css

@@ -0,0 +1,15 @@
+.wrapper {
+    width: 100%;
+    min-height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+.main {
+    flex: 1;
+    min-width: 100%;
+    max-width: var(--maxPageWidth, 976px);
+    margin: 0 auto;
+    padding-bottom: 10rem;
+    box-sizing: border-box;
+}

package/lib/layouts/footer.module.css

@@ -0,0 +1,109 @@
+.footer {
+    background-color: token('color.background.accent.4.background');
+    color: token('color.background.accent.4.foreground.primary');
+}
+
+.footer__content {
+    margin: 0 auto;
+    padding: token('spacing.large');
+    max-width: var(--maxPageWidth, 976px);
+    box-sizing: border-box;
+}
+
+.footer__top {
+    display: grid;
+    gap: token('spacing.xLarge');
+    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
+}
+
+.footer__content hr {
+    border: 0;
+    border-bottom: token('border.width.slim') solid token('color.background.accent.4.foreground.primary');
+    margin: token('spacing.xLarge') 0;
+}
+
+.footer__title {
+    margin-bottom: token('spacing.small');
+    font-size: 1rem;
+    font-weight: 600;
+}
+
+.footer__section {
+    padding: token('spacing.medium') 0;
+}
+
+.footer__linkList {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+}
+
+.footer__linkList li {
+    margin-bottom: token('spacing.small');
+}
+
+.footer a {
+    text-decoration: none;
+}
+
+.footer a,
+.footer a:visited {
+    transition: opacity 100ms ease-in;
+    color: token('color.background.accent.4.foreground.primary');
+}
+
+.footer a:hover {
+    opacity: 0.75;
+}
+
+.footer__bottomLinks {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: token('spacing.medium');
+    flex-wrap: wrap;
+}
+
+.footer__bottomLinks > div:only-child {
+    margin: 0 auto;
+}
+
+.footer__bottomLinks__mid {
+    text-align: center;
+    display: flex;
+    gap: token('spacing.medium');
+}
+
+.footer__cookieWarning {
+    margin-top: token('spacing.medium');
+    font-size: 0.875rem;
+    color: token('color.background.accent.4.foreground.primary');
+}
+
+.buttonLink {
+    color: token('color.background.accent.4.foreground.primary');
+    font-size: 1rem;
+    background-color: transparent;
+    border: 0;
+    cursor: pointer;
+    transition: opacity 100ms ease-in;
+}
+
+.buttonLink:hover {
+    opacity: 0.75;
+}
+
+.footer__orgLogo {
+    height: 2.5rem;
+    width: auto;
+}
+
+@media (max-width: 650px) {
+    .footer__bottomLinks {
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+        gap: token('spacing.xLarge');
+    }
+}

package/lib/layouts/header.module.css

@@ -0,0 +1,39 @@
+.pageHeader {
+    background-color: token('color.background.accent.4.background');
+}
+
+.pageHeader__content {
+    width: 100%;
+    max-width: var(--maxPageWidth, 976px);
+    margin: 0 auto;
+    padding: token('spacing.medium');
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    box-sizing: border-box;
+}
+
+.pageHeader__logo {
+    margin: 0;
+}
+
+.pageHeader__logoLink {
+    display: flex;
+    align-items: center;
+    gap: token('spacing.medium');
+    padding: token('spacing.medium');
+    padding-left: 0;
+    color: token('color.background.accent.4.foreground.primary');
+    text-decoration: none;
+    transition: opacity 200ms ease-in-out;
+}
+
+.pageHeader__logoLink:hover,
+.pageHeader__logoLink:active {
+    opacity: 0.8;
+}
+
+.pageHeader__logoImg {
+    height: 2rem;
+    width: auto;
+}

package/lib/layouts/index.d.ts

@@ -0,0 +1,3 @@
+export { default as ContactPageLayout, type ContactPageLayoutProps, getStandardContactPages, } from './contact-page-layout';
+export { ContactFormContainer, type ContactFormContainerProps, } from './contact-form-container';
+//# sourceMappingURL=index.d.ts.map

package/lib/layouts/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/layouts/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,OAAO,IAAI,iBAAiB,EAC5B,KAAK,sBAAsB,EAC3B,uBAAuB,GAC1B,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EACH,oBAAoB,EACpB,KAAK,yBAAyB,GACjC,MAAM,0BAA0B,CAAC"}

package/lib/layouts/index.js

@@ -0,0 +1,11 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ContactFormContainer = exports.getStandardContactPages = exports.ContactPageLayout = void 0;
+var contact_page_layout_1 = require("./contact-page-layout");
+Object.defineProperty(exports, "ContactPageLayout", { enumerable: true, get: function () { return __importDefault(contact_page_layout_1).default; } });
+Object.defineProperty(exports, "getStandardContactPages", { enumerable: true, get: function () { return contact_page_layout_1.getStandardContactPages; } });
+var contact_form_container_1 = require("./contact-form-container");
+Object.defineProperty(exports, "ContactFormContainer", { enumerable: true, get: function () { return contact_form_container_1.ContactFormContainer; } });