https://ru-digital.de/build/routes/contact-CHYBS4CQ.js

1import {
2  Ie,
3  _t
4} from "/build/_shared/chunk-C3KA4SO6.js";
5import {
6  ErrorBoundary
7} from "/build/_shared/chunk-Y6OIBGDA.js";
8import "/build/_shared/chunk-P4WFY3UR.js";
9import "/build/_shared/chunk-VIU3M2OR.js";
10import {
11  Form,
12  init_esm,
13  useActionData,
14  useLoaderData,
15  useSubmit,
16  useTransition
17} from "/build/_shared/chunk-46RNFGVL.js";
18import {
19  React,
20  __toESM,
21  init_react,
22  require_react
23} from "/build/_shared/chunk-BNRLY3XL.js";
24
25// browser-route-module:routes/contact.tsx?browser
26init_react();
27

28// app/routes/contact.tsx
29init_react();
30init_esm();
31

32// app/hooks/use_remix_submit.tsx
33init_react();
34var import_react = __toESM(require_react());
35init_esm();
36var useRemixSubmit = ({
37  onError,
38  onSuccess
39} = {}) => {
40  const submit = useSubmit();
41  const [transitionLog, setTransitionLog] = import_react.default.useState(["idle"]);
42  const transition = useTransition();
43  const loaderData = useLoaderData();
44  const actionData = useActionData();
45  const [transitionType, setTransitionType] = import_react.default.useState();
46  import_react.default.useEffect(() => {
47    const hasFinishedSubmission = transitionLog.length === 2 && transition.state === "idle";
48    const shouldAppendTransitionLog = transitionLog.length < 3 && transition.state === "loading";
49    const shouldResetTransitionLog = transitionLog.length === 2 && transition.state === "idle";
50    if (shouldAppendTransitionLog) {
51      setTransitionLog([...transitionLog, "loading"]);
52    }
53    if (shouldResetTransitionLog) {
54      setTransitionLog(["idle"]);
55    }
56    if (onSuccess && ((loaderData == null ? void 0 : loaderData.success) || (actionData == null ? void 0 : actionData.success)) && hasFinishedSubmission) {
57      const data = transitionType === "loaderSubmission" ? loaderData : actionData;
58      onSuccess(data);
59    }
60    if (onError && (!(loaderData == null ? void 0 : loaderData.success) || !(actionData == null ? void 0 : actionData.success)) && hasFinishedSubmission) {
61      const data = transitionType === "loaderSubmission" ? loaderData : actionData;
62      onError(data);
63    }
64  }, [transition.state]);
65  import_react.default.useEffect(() => {
66    if (transition.type === "actionSubmission") {
67      setTransitionType("actionSubmission");
68    } else if (transition.type === "loaderSubmission") {
69      setTransitionType("loaderSubmission");
70    }
71  }, [transition.state]);
72  return { submit, transition };
73};
74

75// app/routes/contact.tsx
76var import_react4 = __toESM(require_react());
77function contact_default() {
78  var _a, _b, _c, _d, _e, _f, _g, _h, _i;
79  const actionData = useActionData();
80  const onOpen = (text) => {
81    return _t.success(text);
82  };
83  const { submit, transition } = useRemixSubmit({
84    onSuccess: () => onOpen("Vielen Dank f\xFCr Deine Nachricht. Wir melden uns bei Dir.")
85  });
86  let isAdding = transition.state === "submitting";
87  let formRef = (0, import_react4.useRef)(null);
88  let taskInputRef = (0, import_react4.useRef)(null);
89  (0, import_react4.useEffect)(() => {
90    var _a2, _b2;
91    if (!isAdding) {
92      (_a2 = formRef.current) == null ? void 0 : _a2.reset();
93      (_b2 = taskInputRef.current) == null ? void 0 : _b2.focus();
94    }
95  }, [isAdding]);
96  return /* @__PURE__ */ React.createElement("div", {
97    className: "mx-auto flex flex-col justify-center px-4 pb-10 md:px-1"
98  }, /* @__PURE__ */ React.createElement("div", {
99    className: "flex items-center justify-center pb-8 md:max-w-6xl lg:mx-auto"
100  }, /* @__PURE__ */ React.createElement("div", {
101    className: "w-screen py-6"
102  }, /* @__PURE__ */ React.createElement("div", {
103    className: "max-w-4xl py-4"
104  }, /* @__PURE__ */ React.createElement("h1", {
105    className: "text-2xl font-bold text-black"
106  }, "Kontaktformular"), /* @__PURE__ */ React.createElement("p", {
107    className: "textsm py-2 text-tagsFontColor md:text-base"
108  }, "Du hast eine Frage zur Nutzung von ru-digital, eine Idee zur Weiterentwicklung? Dir ist ein Fehler aufgefallen? Wir freuen uns \xFCber eine Nachricht von Dir!")), /* @__P

108URE__ */ React.createElement("div", {
109    className: "mt-4 max-w-4xl"
110  }, /* @__PURE__ */ React.createElement(Form, {
111    method: "post",
112    onSubmit: () => submit({ type: "submit" }),
113    ref: formRef
114  }, /* @__PURE__ */ React.createElement("div", {
115    className: "grid grid-cols-6 gap-6"
116  }, /* @__PURE__ */ React.createElement("div", {
117    className: "col-span-6 sm:col-span-3"
118  }, /* @__PURE__ */ React.createElement("input", {
119    placeholder: "Name",
120    "aria-invalid": Boolean((_a = actionData == null ? void 0 : actionData.formErrors) == null ? void 0 : _a.name),
121    "aria-errormessage": ((_b = actionData == null ? void 0 : actionData.formErrors) == null ? void 0 : _b.name) ? "name-error" : void 0,
122    type: "text",
123    name: "name",
124    id: "name",
125    autoComplete: "given-name",
126    className: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-orange-500 focus:ring-orange-500 sm:text-sm"
127  }), ((_c = actionData == null ? void 0 : actionData.formErrors) == null ? void 0 : _c.name) ? /* @__PURE__ */ React.createElement("p", {
128    className: "mr-2 text-red-500",
129    id: "name-error",
130    role: "alert"
131  }, actionData.formErrors.name) : null), /* @__PURE__ */ React.createElement("div", {
132    className: "col-span-6 sm:col-span-3"
133  }, /* @__PURE__ */ React.createElement("input", {
134    "aria-invalid": Boolean((_d = actionData == null ? void 0 : actionData.formErrors) == null ? void 0 : _d.email),
135    "aria-errormessage": ((_e = actionData == null ? void 0 : actionData.formErrors) == null ? void 0 : _e.email) ? "name-error" : void 0,
136    type: "email",
137    name: "email",
138    id: "email",
139    placeholder: "E-Mail Adresse",
140    autoComplete: "email",
141    className: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-orange-500 focus:ring-orange-500 sm:text-sm"
142  }), ((_f = actionData == null ? void 0 : actionData.formErrors) == null ? void 0 : _f.email) ? /* @__PURE__ */ React.createElement("p", {
143    className: "mr-2 text-red-500",
144    id: "email-error",
145    role: "alert"
146  }, actionData.formErrors.email) : null), /* @__PURE__ */ React.createElement("div", {
147    className: "col-span-6 mt-6"
148  }, /* @__PURE__ */ React.createElement("textarea", {
149    "aria-invalid": Boolean((_g = actionData == null ? void 0 : actionData.fieldErrors) == null ? void 0 : _g.body),
150    "aria-errormessage": ((_h = actionData == null ? void 0 : actionData.fieldErrors) == null ? void 0 : _h.body) ? "content-error" : void 0,
151    id: "body",
152    name: "body",
153    rows: 3,
154    key: "textarea",
155    className: "block h-auto w-full rounded-md border border-gray-300 shadow-sm focus:border-orange-500 focus:ring-orange-500 sm:text-sm lg:h-80",
156    placeholder: "Ihre Nachricht an uns\u2026",
157    defaultValue: ""
158  }), ((_i = actionData == null ? void 0 : actionData.formErrors) == null ? void 0 : _i.body) ? /* @__PURE__ */ React.createElement("p", {
159    className: "mr-2 text-red-500",
160    id: "content-error",
161    role: "alert"
162  }

162, actionData.formErrors.body) : null)), /* @__PURE__ */ React.createElement("div", {
163    className: "px-4 py-8 text-center sm:px-6"
164  }, /* @__PURE__ */ React.createElement("button", {
165    type: "submit",
166    name: "action",
167    value: "send",
168    className: "inline-flex justify-center rounded-md border border-transparent bg-yellow-400 py-2 px-4 text-sm font-medium text-gray-700 shadow-sm  hover:bg-yellow-600 focus:outline-none focus:ring-2 focus:ring-offset-2"
169  }, transition.state === "loading" ? "Sending...." : "Anfrage senden")))))), /* @__PURE__ */ React.createElement(Ie, {
170    position: "top-right",
171    reverseOrder: false,
172    toastOptions: { className: "text-sm", duration: 9e3 }
173  }));
174}
175var ErrorBoundary2 = ({ error }) => {
176  console.error(error);
177  return /* @__PURE__ */ React.createElement(ErrorBoundary, {
178    error
179  });
180};
181export {
182  ErrorBoundary2 as ErrorBoundary,
183  contact_default as default
184};
185//# sourceMappingURL=/build/routes/contact-CHYBS4CQ.js.map