@mrfylke/contact-form 0.1.3

package/lib/ticket-control/index.js

@@ -0,0 +1,53 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const translations_1 = require("../translations");
+const react_1 = require("@xstate/react");
+const react_2 = require("react");
+const config_1 = require("../modules/config");
+const ticket_control_form_machine_1 = require("./ticket-control-form-machine");
+const contact_module_css_1 = __importDefault(require("../contact.module.css"));
+const button_1 = require("../components/button");
+const feeComplaintForm_1 = __importDefault(require("./forms/feeComplaintForm"));
+const feedbackForm_1 = __importDefault(require("./forms/feedbackForm"));
+const postponePayment_1 = __importDefault(require("./forms/postponePayment"));
+const components_1 = require("../components");
+const utils_1 = require("../utils");
+const error_message_1 = __importDefault(require("../components/error-message/error-message"));
+const TicketControlPageContent = () => {
+    const { t } = (0, translations_1.useTranslation)();
+    const apiConfig = (0, config_1.useApiConfig)();
+    const { formSchemaOverrides, layout } = (0, config_1.useContactFormConfig)();
+    const successPath = layout?.successPath ?? (layout?.basePath ? `${layout.basePath}/success` : '/contact/success');
+    const errorPath = layout?.errorPath ?? (layout?.basePath ? `${layout.basePath}/error` : '/contact/error');
+    const machine = (0, react_2.useMemo)(() => (0, ticket_control_form_machine_1.createTicketControlFormMachine)(apiConfig.onSubmit, {
+        successPath,
+        errorPath,
+    }), [apiConfig.onSubmit, successPath, errorPath]);
+    const [state, send] = (0, react_1.useMachine)(machine);
+    const displaySubmitButton = (state.context.formType === 'feeComplaint' &&
+        state.context.agreesSecondAgreement) ||
+        (state.context.formType && state.context.formType !== 'feeComplaint');
+    // Filter form types based on overrides
+    const enabledFormTypes = (0, react_2.useMemo)(() => {
+        const allTypes = Object.values(ticket_control_form_machine_1.FormType);
+        const override = formSchemaOverrides?.ticketControl?.enabledFormTypes;
+        if (!override)
+            return allTypes;
+        return allTypes.filter((type) => override.includes(type));
+    }, [formSchemaOverrides]);
+    const onSubmit = async (e) => {
+        e.preventDefault();
+        send({ type: 'SUBMIT', orderedFormFieldNames: (0, utils_1.findOrderFormFields)(e) });
+    };
+    return ((0, jsx_runtime_1.jsxs)("form", { onSubmit: onSubmit, className: contact_module_css_1.default.form, children: [(0, jsx_runtime_1.jsx)(components_1.Fieldset, { title: t(translations_1.PageText.Contact.ticketControl.title), children: (0, jsx_runtime_1.jsx)("ul", { className: contact_module_css_1.default.form_options__list, children: enabledFormTypes.map((formType) => ((0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)(components_1.Radio, { label: t(translations_1.PageText.Contact.ticketControl[formType].description), checked: state.matches({ editing: formType }), onChange: () => {
+                                send({
+                                    type: 'SELECT_FORM_TYPE',
+                                    formType: formType,
+                                });
+                            } }) }, formType))) }) }), state.matches({ editing: 'feeComplaint' }) && ((0, jsx_runtime_1.jsx)(feeComplaintForm_1.default, { state: state, send: send })), state.matches({ editing: 'feedback' }) && ((0, jsx_runtime_1.jsx)(feedbackForm_1.default, { state: state, send: send })), state.matches({ editing: 'postponePayment' }) && ((0, jsx_runtime_1.jsx)(postponePayment_1.default, { state: state, send: send })), state.context.hasSubmissionError && ((0, jsx_runtime_1.jsx)(error_message_1.default, { message: t(translations_1.PageText.Contact.error.info), id: "submission-error" })), displaySubmitButton && ((0, jsx_runtime_1.jsx)(button_1.Button, { title: t(translations_1.PageText.Contact.submit), mode: 'interactive_0--bordered', buttonProps: { type: 'submit' }, state: state.matches('submitting') ? 'loading' : undefined, className: contact_module_css_1.default.submitButton }))] }));
+};
+exports.default = TicketControlPageContent;

package/lib/ticket-control/ticket-control-form-machine.d.ts

@@ -0,0 +1,277 @@
+import { Line } from '../server/journey-planner/validators';
+import { InputErrorMessages } from '../validation';
+import { TransportModeType } from '../types';
+import type { FormSchemaName } from '../modules/config/types';
+export declare enum FormType {
+    FeeComplaint = "feeComplaint",
+    Feedback = "feedback",
+    PostponePayment = "postponePayment"
+}
+type SubmitInput = {
+    feeNumber?: string;
+    appPhoneNumber?: string;
+    customerNumber?: string;
+    travelCardNumber?: string;
+    firstName?: string;
+    lastName?: string;
+    address?: string;
+    postalCode?: string;
+    city?: string;
+    email?: string;
+    phoneNumber?: string;
+    bankAccountNumber?: string;
+    IBAN?: string;
+    SWIFT?: string;
+    attachments?: File[];
+    transportMode?: string;
+    lineName?: string;
+    fromStop?: string;
+    toStop?: string;
+    dateOfTicketControl?: string;
+    timeOfTicketControl?: string;
+    feedback?: string;
+    invoiceNumber?: string;
+};
+export type TicketControlContextProps = {
+    feeNumber?: string;
+    appPhoneNumber?: string;
+    customerNumber?: string;
+    travelCardNumber?: string;
+    firstName?: string;
+    lastName?: string;
+    address?: string;
+    postalCode?: string;
+    city?: string;
+    email?: string;
+    phoneNumber?: string;
+    bankAccountNumber?: string;
+    IBAN?: string;
+    SWIFT?: string;
+    attachments?: File[];
+    transportMode?: TransportModeType | undefined;
+    line?: Line | undefined;
+    fromStop?: Line['quays'][0] | undefined;
+    toStop?: Line['quays'][0] | undefined;
+    dateOfTicketControl?: string;
+    timeOfTicketControl?: string;
+    feedback?: string;
+    invoiceNumber?: string;
+    formType?: FormType;
+    agreesFirstAgreement: boolean;
+    agreesSecondAgreement: boolean;
+    isAppTicketStorageMode: boolean;
+    hasInternationalBankAccount: boolean;
+    errorMessages: InputErrorMessages;
+    firstErrorMessage?: string;
+    hasSubmissionError?: boolean;
+};
+export type MachinePaths = {
+    successPath: string;
+    errorPath: string;
+};
+export declare function createTicketControlFormMachine(onSubmit: (schemaName: FormSchemaName, state: Record<string, unknown>) => Promise<Response>, paths?: MachinePaths): import("xstate").StateMachine<TicketControlContextProps, {
+    type: "VALIDATE";
+} | {
+    type: "ON_INPUT_CHANGE";
+    inputName: "address" | "attachments" | "bankAccountNumber" | "city" | "date" | "email" | "firstName" | "feedback" | "IBAN" | "lastName" | "phoneNumber" | "postalCode" | "SWIFT" | "toStop" | "fromStop" | "plannedDepartureTime";
+    value: any;
+} | {
+    type: "ON_TRANSPORTMODE_CHANGE";
+    value: TransportModeType;
+} | {
+    type: "ON_LINE_CHANGE";
+    value: Line | undefined;
+} | {
+    type: "ON_INPUT_CHANGE";
+    inputName: "formType" | "feeNumber" | "invoiceNumber" | "appPhoneNumber" | "customerNumber" | "travelCardNumber" | "isAppTicketStorageMode" | "agreesFirstAgreement" | "agreesSecondAgreement" | "hasInternationalBankAccount" | "dateOfTicketControl" | "timeOfTicketControl";
+    value: string | boolean;
+} | {
+    type: "SELECT_FORM_TYPE";
+    formType: FormType;
+} | {
+    type: "SUBMIT";
+    orderedFormFieldNames: string[];
+}, {
+    [x: string]: import("xstate").ActorRefFromLogic<import("xstate").PromiseActorLogic<true, SubmitInput, import("xstate").EventObject>> | undefined;
+}, {
+    src: "submit";
+    logic: import("xstate").PromiseActorLogic<true, SubmitInput, import("xstate").EventObject>;
+    id: string | undefined;
+}, {
+    type: "navigateToErrorPage";
+    params: unknown;
+} | {
+    type: "navigateToSuccessPage";
+    params: unknown;
+} | {
+    type: "clearValidationErrors";
+    params: unknown;
+} | {
+    type: "setValidationErrors";
+    params: unknown;
+} | {
+    type: "scrollToFirstErrorMessage";
+    params: unknown;
+} | {
+    type: "setSubmissionError";
+    params: unknown;
+} | {
+    type: "clearSubmissionError";
+    params: unknown;
+} | {
+    type: "onInputChange";
+    params: unknown;
+} | {
+    type: "onTransportModeChange";
+    params: unknown;
+} | {
+    type: "onLineChange";
+    params: unknown;
+}, {
+    type: "isFormValid";
+    params: unknown;
+} | {
+    type: "isFeeComplaintForm";
+    params: unknown;
+} | {
+    type: "isFeedbackForm";
+    params: unknown;
+} | {
+    type: "isPostponePaymentForm";
+    params: unknown;
+}, never, "success" | "validating" | "submitting" | "formHandler" | {
+    editing: "feeComplaint" | "postponePayment" | "feedback" | "selectFormType";
+}, string, import("xstate").NonReducibleUnknown, import("xstate").NonReducibleUnknown, import("xstate").EventObject, import("xstate").MetaObject, {
+    id: "ticketControlForm";
+    states: {
+        readonly formHandler: {
+            id: "formTypeHandler";
+        };
+        readonly editing: {
+            states: {
+                readonly selectFormType: {};
+                readonly feeComplaint: {
+                    id: "feeComplaint";
+                };
+                readonly feedback: {
+                    id: "feedback";
+                };
+                readonly postponePayment: {
+                    id: "postponePayment";
+                };
+                readonly history: {};
+            };
+        };
+        readonly validating: {
+            id: "validating";
+        };
+        readonly submitting: {
+            id: "submitting";
+        };
+        readonly success: {};
+    };
+}>;
+export declare const ticketControlFormMachine: import("xstate").StateMachine<TicketControlContextProps, {
+    type: "VALIDATE";
+} | {
+    type: "ON_INPUT_CHANGE";
+    inputName: "address" | "attachments" | "bankAccountNumber" | "city" | "date" | "email" | "firstName" | "feedback" | "IBAN" | "lastName" | "phoneNumber" | "postalCode" | "SWIFT" | "toStop" | "fromStop" | "plannedDepartureTime";
+    value: any;
+} | {
+    type: "ON_TRANSPORTMODE_CHANGE";
+    value: TransportModeType;
+} | {
+    type: "ON_LINE_CHANGE";
+    value: Line | undefined;
+} | {
+    type: "ON_INPUT_CHANGE";
+    inputName: "formType" | "feeNumber" | "invoiceNumber" | "appPhoneNumber" | "customerNumber" | "travelCardNumber" | "isAppTicketStorageMode" | "agreesFirstAgreement" | "agreesSecondAgreement" | "hasInternationalBankAccount" | "dateOfTicketControl" | "timeOfTicketControl";
+    value: string | boolean;
+} | {
+    type: "SELECT_FORM_TYPE";
+    formType: FormType;
+} | {
+    type: "SUBMIT";
+    orderedFormFieldNames: string[];
+}, {
+    [x: string]: import("xstate").ActorRefFromLogic<import("xstate").PromiseActorLogic<true, SubmitInput, import("xstate").EventObject>> | undefined;
+}, {
+    src: "submit";
+    logic: import("xstate").PromiseActorLogic<true, SubmitInput, import("xstate").EventObject>;
+    id: string | undefined;
+}, {
+    type: "navigateToErrorPage";
+    params: unknown;
+} | {
+    type: "navigateToSuccessPage";
+    params: unknown;
+} | {
+    type: "clearValidationErrors";
+    params: unknown;
+} | {
+    type: "setValidationErrors";
+    params: unknown;
+} | {
+    type: "scrollToFirstErrorMessage";
+    params: unknown;
+} | {
+    type: "setSubmissionError";
+    params: unknown;
+} | {
+    type: "clearSubmissionError";
+    params: unknown;
+} | {
+    type: "onInputChange";
+    params: unknown;
+} | {
+    type: "onTransportModeChange";
+    params: unknown;
+} | {
+    type: "onLineChange";
+    params: unknown;
+}, {
+    type: "isFormValid";
+    params: unknown;
+} | {
+    type: "isFeeComplaintForm";
+    params: unknown;
+} | {
+    type: "isFeedbackForm";
+    params: unknown;
+} | {
+    type: "isPostponePaymentForm";
+    params: unknown;
+}, never, "success" | "validating" | "submitting" | "formHandler" | {
+    editing: "feeComplaint" | "postponePayment" | "feedback" | "selectFormType";
+}, string, import("xstate").NonReducibleUnknown, import("xstate").NonReducibleUnknown, import("xstate").EventObject, import("xstate").MetaObject, {
+    id: "ticketControlForm";
+    states: {
+        readonly formHandler: {
+            id: "formTypeHandler";
+        };
+        readonly editing: {
+            states: {
+                readonly selectFormType: {};
+                readonly feeComplaint: {
+                    id: "feeComplaint";
+                };
+                readonly feedback: {
+                    id: "feedback";
+                };
+                readonly postponePayment: {
+                    id: "postponePayment";
+                };
+                readonly history: {};
+            };
+        };
+        readonly validating: {
+            id: "validating";
+        };
+        readonly submitting: {
+            id: "submitting";
+        };
+        readonly success: {};
+    };
+}>;
+export {};
+//# sourceMappingURL=ticket-control-form-machine.d.ts.map

package/lib/ticket-control/ticket-control-form-machine.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ticket-control-form-machine.d.ts","sourceRoot":"","sources":["../../src/ticket-control/ticket-control-form-machine.ts"],"names":[],"mappings":"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"}

package/lib/ticket-control/ticket-control-form-machine.js

@@ -0,0 +1,262 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ticketControlFormMachine = exports.FormType = void 0;
+exports.createTicketControlFormMachine = createTicketControlFormMachine;
+const xstate_1 = require("xstate");
+const events_1 = require("./events");
+const utils_1 = require("../utils");
+const validation_1 = require("../validation");
+var FormType;
+(function (FormType) {
+    FormType["FeeComplaint"] = "feeComplaint";
+    FormType["Feedback"] = "feedback";
+    FormType["PostponePayment"] = "postponePayment";
+})(FormType || (exports.FormType = FormType = {}));
+const disagreeAgreements = (context) => {
+    return {
+        ...context,
+        agreesFirstAgreement: false,
+        agreesSecondAgreement: false,
+    };
+};
+const setInputsToValidate = (context) => {
+    // Destructure the needed fields from context
+    const { formType, firstName, lastName, email, feeNumber, feedback, phoneNumber, invoiceNumber, appPhoneNumber, customerNumber, travelCardNumber, address, postalCode, city, hasInternationalBankAccount, bankAccountNumber, IBAN, SWIFT, transportMode, line, dateOfTicketControl, timeOfTicketControl, isAppTicketStorageMode, } = context;
+    switch (formType) {
+        case FormType.FeeComplaint:
+            return {
+                feeNumber,
+                feedback,
+                firstName,
+                lastName,
+                email,
+                address,
+                postalCode,
+                city,
+                phoneNumber,
+                ...(isAppTicketStorageMode
+                    ? { appPhoneNumber, customerNumber }
+                    : { travelCardNumber }),
+                ...(hasInternationalBankAccount
+                    ? { IBAN, SWIFT }
+                    : { bankAccountNumber }),
+            };
+        case FormType.Feedback:
+            return {
+                transportMode,
+                line,
+                dateOfTicketControl,
+                timeOfTicketControl,
+                feedback,
+                firstName,
+                lastName,
+                email,
+            };
+        case FormType.PostponePayment:
+            return { feeNumber, invoiceNumber, firstName, lastName, email };
+    }
+};
+function createTicketControlFormMachine(onSubmit, paths) {
+    const successPath = paths?.successPath ?? '/contact/success';
+    const errorPath = paths?.errorPath ?? '/contact/error';
+    return (0, xstate_1.setup)({
+        types: {
+            context: {},
+            events: events_1.ticketControlFormEvents,
+        },
+        guards: {
+            isFormValid: ({ context }) => {
+                const inputsToValidate = setInputsToValidate(context);
+                const errors = (0, validation_1.commonInputValidator)(inputsToValidate);
+                return Object.keys(errors).length === 0;
+            },
+            isFeeComplaintForm: ({ event }) => event.type === 'SELECT_FORM_TYPE' &&
+                event.formType === FormType.FeeComplaint,
+            isFeedbackForm: ({ event }) => event.type === 'SELECT_FORM_TYPE' && event.formType === FormType.Feedback,
+            isPostponePaymentForm: ({ event }) => event.type === 'SELECT_FORM_TYPE' &&
+                event.formType === FormType.PostponePayment,
+        },
+        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 {
+                        firstErrorMessage: (0, utils_1.findFirstErrorMessage)(event.orderedFormFieldNames, errors),
+                        errorMessages: { ...errors },
+                    };
+                }
+                return context;
+            }),
+            scrollToFirstErrorMessage: (0, xstate_1.assign)(({ context }) => {
+                (0, utils_1.scrollToFirstErrorMessage)(context.firstErrorMessage);
+                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] = [];
+                    // Set both agreements to false if agreesFirstAgreement is set to false.
+                    if (inputName === 'agreesFirstAgreement' && !value)
+                        return {
+                            ...disagreeAgreements(context),
+                            hasSubmissionError: undefined,
+                        };
+                    if (inputName === 'hasInternationalBankAccount') {
+                        const updatedContext = (0, utils_1.setBankAccountStatusAndResetBankInformation)(context, value);
+                        return {
+                            ...updatedContext,
+                            hasSubmissionError: undefined,
+                        };
+                    }
+                    return { ...context, [inputName]: value, hasSubmissionError: undefined };
+                }
+                return context;
+            }),
+            onTransportModeChange: (0, xstate_1.assign)(({ context, event }) => {
+                if (event.type === 'ON_TRANSPORTMODE_CHANGE')
+                    return (0, utils_1.setTransportModeAndResetLineAndStops)(context, event.value);
+                return context;
+            }),
+            onLineChange: (0, xstate_1.assign)(({ context, event }) => {
+                if (event.type === 'ON_LINE_CHANGE')
+                    return (0, utils_1.setLineAndResetStops)(context, event.value);
+                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('ticketControl', state);
+                if (!response.ok)
+                    throw new Error('Failed to call API');
+                return response.ok;
+            }),
+        },
+    }).createMachine({
+        id: 'ticketControlForm',
+        initial: 'editing',
+        context: {
+            agreesFirstAgreement: false,
+            agreesSecondAgreement: false,
+            hasInternationalBankAccount: false,
+            isAppTicketStorageMode: true,
+            errorMessages: {},
+        },
+        on: {
+            ON_INPUT_CHANGE: { actions: 'onInputChange' },
+            SELECT_FORM_TYPE: { target: '#formTypeHandler' },
+            SUBMIT: { target: '#validating' },
+        },
+        states: {
+            formHandler: {
+                id: 'formTypeHandler',
+                always: [
+                    { guard: 'isFeeComplaintForm', target: `#${FormType.FeeComplaint}` },
+                    { guard: 'isFeedbackForm', target: `#${FormType.Feedback}` },
+                    {
+                        guard: 'isPostponePaymentForm',
+                        target: `#${FormType.PostponePayment}`,
+                    },
+                ],
+            },
+            editing: {
+                initial: 'selectFormType',
+                on: {
+                    ON_INPUT_CHANGE: { actions: 'onInputChange' },
+                    ON_TRANSPORTMODE_CHANGE: { actions: 'onTransportModeChange' },
+                    ON_LINE_CHANGE: { actions: 'onLineChange' },
+                },
+                states: {
+                    selectFormType: {},
+                    feeComplaint: {
+                        id: 'feeComplaint',
+                        entry: (0, xstate_1.assign)({ formType: () => FormType.FeeComplaint }),
+                        exit: 'clearValidationErrors',
+                    },
+                    feedback: {
+                        id: 'feedback',
+                        entry: (0, xstate_1.assign)({ formType: () => FormType.Feedback }),
+                        exit: 'clearValidationErrors',
+                    },
+                    postponePayment: {
+                        id: 'postponePayment',
+                        entry: (0, xstate_1.assign)({ formType: () => FormType.PostponePayment }),
+                        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 }) => ({
+                        feeNumber: context.feeNumber,
+                        appPhoneNumber: context.appPhoneNumber,
+                        customerNumber: context.customerNumber,
+                        travelCardNumber: context.travelCardNumber,
+                        firstName: context.firstName,
+                        lastName: context.lastName,
+                        address: context.address,
+                        postalCode: context.postalCode,
+                        city: context.city,
+                        email: context.email,
+                        phoneNumber: context.phoneNumber,
+                        bankAccountNumber: context.bankAccountNumber,
+                        IBAN: context.IBAN,
+                        SWIFT: context.SWIFT,
+                        feedback: context.feedback,
+                        transportMode: context.transportMode,
+                        lineName: (0, utils_1.getLineName)(context.line),
+                        fromStop: context.fromStop?.name,
+                        toStop: context.toStop?.name,
+                        dateOfTicketControl: context.dateOfTicketControl,
+                        timeOfTicketControl: context.timeOfTicketControl,
+                        invoiceNumber: context.invoiceNumber,
+                        attachments: context.attachments,
+                    }),
+                    onDone: { target: 'success' },
+                    onError: {
+                        target: 'editing.history',
+                        actions: 'setSubmissionError',
+                    },
+                },
+            },
+            success: { entry: 'navigateToSuccessPage', type: 'final' },
+        },
+    });
+}
+exports.ticketControlFormMachine = createTicketControlFormMachine(async (data) => {
+    return fetch('/api/contact/ticket-control', {
+        method: 'POST',
+        body: JSON.stringify(data),
+    });
+});

package/lib/ticketing/events.d.ts

@@ -0,0 +1,28 @@
+import { commonEvents } from '../commoneEvents';
+import { AppForm, FormCategory, WebshopForm, TravelCardForm } from './ticketingStateMachine';
+declare const ticketingSpecificFormEvents: {
+    type: "ON_INPUT_CHANGE";
+    inputName: "question" | "orderId" | "customerNumber" | "travelCardNumber" | "refundReason" | "amount" | "isInitialAgreementChecked" | "hasInternationalBankAccount" | "showInputTravelCardNumber";
+    value: string | boolean;
+} | {
+    type: "ON_SET_STATE";
+    target: FormCategory;
+} | {
+    type: "SELECT_FORM_CATEGORY";
+    formCategory: FormCategory;
+} | {
+    type: "SELECT_APP_FORM";
+    appForm: AppForm;
+} | {
+    type: "SELECT_WEBSHOP_FORM";
+    webshopForm: WebshopForm;
+} | {
+    type: "SELECT_TRAVELCARD_FORM";
+    travelCardForm: TravelCardForm;
+} | {
+    type: "SUBMIT";
+    orderedFormFieldNames: string[];
+};
+export declare const ticketingFormEvents: typeof commonEvents | typeof ticketingSpecificFormEvents;
+export {};
+//# sourceMappingURL=events.d.ts.map

package/lib/ticketing/events.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"events.d.ts","sourceRoot":"","sources":["../../src/ticketing/events.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,YAAY,EAAC,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EACH,OAAO,EACP,YAAY,EACZ,WAAW,EACX,cAAc,EACjB,MAAM,yBAAyB,CAAC;AAEjC,QAAA,MAAM,2BAA2B,EAC3B;IACF,IAAI,EAAE,iBAAiB,CAAC;IACxB,SAAS,EACH,UAAU,GACV,SAAS,GACT,gBAAgB,GAChB,kBAAkB,GAClB,cAAc,GACd,QAAQ,GACR,2BAA2B,GAC3B,6BAA6B,GAC7B,2BAA2B,CAAC;IAClC,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC;CAC3B,GACK;IACF,IAAI,EAAE,cAAc,CAAC;IACrB,MAAM,EAAE,YAAY,CAAC;CACxB,GACK;IACF,IAAI,EAAE,sBAAsB,CAAC;IAC7B,YAAY,EAAE,YAAY,CAAC;CAC9B,GACK;IACF,IAAI,EAAE,iBAAiB,CAAC;IACxB,OAAO,EAAE,OAAO,CAAC;CACpB,GACK;IACF,IAAI,EAAE,qBAAqB,CAAC;IAC5B,WAAW,EAAE,WAAW,CAAC;CAC5B,GACK;IACF,IAAI,EAAE,wBAAwB,CAAC;IAC/B,cAAc,EAAE,cAAc,CAAC;CAClC,GACK;IACF,IAAI,EAAE,QAAQ,CAAC;IACf,qBAAqB,EAAE,MAAM,EAAE,CAAC;CACnC,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAC1B,OAAO,YAAY,GACnB,OAAO,2BAA2B,CAAC"}

package/lib/ticketing/events.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ticketingFormEvents = void 0;
+const ticketingSpecificFormEvents = {};
+exports.ticketingFormEvents = {};

package/lib/ticketing/forms/app/appAccountForm.d.ts

@@ -0,0 +1,11 @@
+import { ticketingFormEvents } from '../../events';
+import { TicketingContextType } from '../../ticketingStateMachine';
+type AppAccountFormProps = {
+    state: {
+        context: TicketingContextType;
+    };
+    send: (event: typeof ticketingFormEvents) => void;
+};
+export declare const AppAccountForm: ({ state, send }: AppAccountFormProps) => import("react/jsx-runtime").JSX.Element;
+export default AppAccountForm;
+//# sourceMappingURL=appAccountForm.d.ts.map

package/lib/ticketing/forms/app/appAccountForm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"appAccountForm.d.ts","sourceRoot":"","sources":["../../../../src/ticketing/forms/app/appAccountForm.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,mBAAmB,EAAC,MAAM,cAAc,CAAC;AACjD,OAAO,EAAC,oBAAoB,EAAC,MAAM,6BAA6B,CAAC;AAGjE,KAAK,mBAAmB,GAAG;IACvB,KAAK,EAAE;QAAE,OAAO,EAAE,oBAAoB,CAAA;KAAE,CAAC;IACzC,IAAI,EAAE,CAAC,KAAK,EAAE,OAAO,mBAAmB,KAAK,IAAI,CAAC;CACrD,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,iBAAe,mBAAmB,4CA+HhE,CAAC;AAEF,eAAe,cAAc,CAAC"}