@qite/tide-booking-component 1.3.1 → 1.3.3

package/src/booking-wizard/features/confirmation/confirmation.tsx

@@ -1,97 +1,97 @@
-import React, { useContext } from "react";
-import {
-  selectBookingNumber,
-  selectBookingQueryString,
-  selectTranslations,
-} from "../booking/selectors";
-
-import Message from "../../components/message";
-import SettingsContext from "../../settings-context";
-import { navigate } from "@reach/router";
-import { useSelector } from "react-redux";
-import Icon from "../../components/icon";
-import { useAppDispatch } from "../../store";
-import { setCurrentStep } from "../booking/booking-slice";
-import { OPTIONS_FORM_STEP } from "../booking/constants";
-import { format } from "../../../shared/utils/localization-util";
-
-interface ConfirmationProps {}
-
-const Confirmation: React.FC<ConfirmationProps> = () => {
-  const dispatch = useAppDispatch();
-  const settings = useContext(SettingsContext);
-
-  const bookingNumber = useSelector(selectBookingNumber);
-  const bookingQueryString = useSelector(selectBookingQueryString);
-
-  if (!bookingNumber) {
-    if (settings.skipRouter) {
-      dispatch(setCurrentStep(OPTIONS_FORM_STEP));
-    } else {
-      navigate(
-        `${settings.basePath}${settings.error.pathSuffix}?${bookingQueryString}`
-      );
-    }
-  }
-
-  const translations = useSelector(selectTranslations);
-  const encodedMailSubject = encodeURI(translations.CONFIRMATION.MAIL_SUBJECT);
-
-  const titleText = settings.isOffer
-    ? format(translations.CONFIRMATION.TITLE_TEXT_OFFER, [bookingNumber])
-    : format(translations.CONFIRMATION.TITLE_TEXT_BOOKING, [bookingNumber]);
-
-  return (
-    <div className="form form__booking--message" id="booking--confirmation">
-      <div className="form__region">
-        <div className="form__row">
-          <div className="form__group">
-            <Message
-              type="success"
-              title={titleText}
-              actionComponent={
-                <div className="sm">
-                  <a
-                    href={`tel://${settings.companyContactPhone}`}
-                    className="sm__icon"
-                  >
-                    <Icon name="tel" />
-                  </a>
-                  <a
-                    href={`mailto://${settings.companyContactEmail}`}
-                    className="sm__icon"
-                  >
-                    <Icon name="mail" />
-                  </a>
-                  <a href="/" className="sm__icon">
-                    <Icon name="home" />
-                  </a>
-                </div>
-              }
-            >
-              <p>
-                {translations.CONFIRMATION.MESSAGE_TEXT1}
-                <br />
-                {settings.isOffer
-                  ? translations.CONFIRMATION.MESSAGE_TEXT2_OFFER
-                  : translations.CONFIRMATION.MESSAGE_TEXT2_BOOKING}
-              </p>
-              <p>
-                {translations.CONFIRMATION.QUESTIONS_TEXT1}{" "}
-                <a
-                  href={`mailto:${settings.companyContactEmail}?subject=${encodedMailSubject}`}
-                  title={translations.CONFIRMATION.QUESTIONS_ALT}
-                >
-                  {translations.CONFIRMATION.QUESTIONS_TEXT2}
-                </a>
-                {translations.CONFIRMATION.QUESTIONS_TEXT3}
-              </p>
-            </Message>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default Confirmation;
+import React, { useContext } from "react";
+import {
+  selectBookingNumber,
+  selectBookingQueryString,
+  selectTranslations,
+} from "../booking/selectors";
+
+import Message from "../../components/message";
+import SettingsContext from "../../settings-context";
+import { navigate } from "@reach/router";
+import { useSelector } from "react-redux";
+import Icon from "../../components/icon";
+import { useAppDispatch } from "../../store";
+import { setCurrentStep } from "../booking/booking-slice";
+import { OPTIONS_FORM_STEP } from "../booking/constants";
+import { format } from "../../../shared/utils/localization-util";
+
+interface ConfirmationProps {}
+
+const Confirmation: React.FC<ConfirmationProps> = () => {
+  const dispatch = useAppDispatch();
+  const settings = useContext(SettingsContext);
+
+  const bookingNumber = useSelector(selectBookingNumber);
+  const bookingQueryString = useSelector(selectBookingQueryString);
+
+  if (!bookingNumber) {
+    if (settings.skipRouter) {
+      dispatch(setCurrentStep(OPTIONS_FORM_STEP));
+    } else {
+      navigate(
+        `${settings.basePath}${settings.error.pathSuffix}?${bookingQueryString}`
+      );
+    }
+  }
+
+  const translations = useSelector(selectTranslations);
+  const encodedMailSubject = encodeURI(translations.CONFIRMATION.MAIL_SUBJECT);
+
+  const titleText = settings.isOffer
+    ? format(translations.CONFIRMATION.TITLE_TEXT_OFFER, [bookingNumber])
+    : format(translations.CONFIRMATION.TITLE_TEXT_BOOKING, [bookingNumber]);
+
+  return (
+    <div className="form form__booking--message" id="booking--confirmation">
+      <div className="form__region">
+        <div className="form__row">
+          <div className="form__group">
+            <Message
+              type="success"
+              title={titleText}
+              actionComponent={
+                <div className="sm">
+                  <a
+                    href={`tel://${settings.companyContactPhone}`}
+                    className="sm__icon"
+                  >
+                    <Icon name="tel" />
+                  </a>
+                  <a
+                    href={`mailto://${settings.companyContactEmail}`}
+                    className="sm__icon"
+                  >
+                    <Icon name="mail" />
+                  </a>
+                  <a href="/" className="sm__icon">
+                    <Icon name="home" />
+                  </a>
+                </div>
+              }
+            >
+              <p>
+                {translations.CONFIRMATION.MESSAGE_TEXT1}
+                <br />
+                {settings.isOffer
+                  ? translations.CONFIRMATION.MESSAGE_TEXT2_OFFER
+                  : translations.CONFIRMATION.MESSAGE_TEXT2_BOOKING}
+              </p>
+              <p>
+                {translations.CONFIRMATION.QUESTIONS_TEXT1}{" "}
+                <a
+                  href={`mailto:${settings.companyContactEmail}?subject=${encodedMailSubject}`}
+                  title={translations.CONFIRMATION.QUESTIONS_ALT}
+                >
+                  {translations.CONFIRMATION.QUESTIONS_TEXT2}
+                </a>
+                {translations.CONFIRMATION.QUESTIONS_TEXT3}
+              </p>
+            </Message>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Confirmation;

package/src/booking-wizard/features/error/error.tsx

@@ -1,78 +1,78 @@
-import Message from "../../components/message";
-import React from "react";
-import SettingsContext from "../../settings-context";
-import { setIsRetry } from "../booking/booking-slice";
-import { useContext } from "react";
-import { useSelector } from "react-redux";
-import { navigate } from "@reach/router";
-import { useAppDispatch } from "../../store";
-import {
-  selectBookingQueryString,
-  selectTranslations,
-} from "../booking/selectors";
-
-interface ErrorProps {}
-
-const Error: React.FC<ErrorProps> = () => {
-  const dispatch = useAppDispatch();
-
-  const settings = useContext(SettingsContext);
-  const bookingQueryString = useSelector(selectBookingQueryString);
-
-  const tryAgainUrl = `${settings.basePath}?${bookingQueryString}`;
-
-  const handleClick: React.MouseEventHandler<HTMLAnchorElement> = (e) => {
-    e.preventDefault();
-
-    if (settings.skipRouter) {
-      window.location.reload();
-    } else {
-      dispatch(setIsRetry(true));
-      navigate(tryAgainUrl);
-    }
-  };
-
-  const translations = useSelector(selectTranslations);
-
-  return (
-    <div className="form form__booking--message">
-      <div className="form__region">
-        <div className="form__row">
-          <div className="form__group">
-            <Message
-              type="error"
-              title="Er liep iets mis..."
-              actionComponent={
-                <a
-                  onClick={handleClick}
-                  title={translations.ERROR.TRY_AGAIN}
-                  className="cta"
-                >
-                  {translations.ERROR.TRY_AGAIN}
-                </a>
-              }
-            >
-              <p>
-                {translations.ERROR.MESSAGE_TEXT1}
-                <br />
-                {translations.ERROR.MESSAGE_TEXT2}
-              </p>
-              <p>
-                {translations.ERROR.ERROR_TEXT1}
-                <a
-                  href={`mailto:${settings.companyContactEmail}?subject=Boeking%20mislukt`}
-                  title={translations.ERROR.ERROR_ALT}
-                >
-                  {translations.ERROR.ERROR_TEXT2}
-                </a>
-                {translations.ERROR.ERROR_TEXT3}
-              </p>
-            </Message>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default Error;
+import Message from "../../components/message";
+import React from "react";
+import SettingsContext from "../../settings-context";
+import { setIsRetry } from "../booking/booking-slice";
+import { useContext } from "react";
+import { useSelector } from "react-redux";
+import { navigate } from "@reach/router";
+import { useAppDispatch } from "../../store";
+import {
+  selectBookingQueryString,
+  selectTranslations,
+} from "../booking/selectors";
+
+interface ErrorProps {}
+
+const Error: React.FC<ErrorProps> = () => {
+  const dispatch = useAppDispatch();
+
+  const settings = useContext(SettingsContext);
+  const bookingQueryString = useSelector(selectBookingQueryString);
+
+  const tryAgainUrl = `${settings.basePath}?${bookingQueryString}`;
+
+  const handleClick: React.MouseEventHandler<HTMLAnchorElement> = (e) => {
+    e.preventDefault();
+
+    if (settings.skipRouter) {
+      window.location.reload();
+    } else {
+      dispatch(setIsRetry(true));
+      navigate(tryAgainUrl);
+    }
+  };
+
+  const translations = useSelector(selectTranslations);
+
+  return (
+    <div className="form form__booking--message">
+      <div className="form__region">
+        <div className="form__row">
+          <div className="form__group">
+            <Message
+              type="error"
+              title="Er liep iets mis..."
+              actionComponent={
+                <a
+                  onClick={handleClick}
+                  title={translations.ERROR.TRY_AGAIN}
+                  className="cta"
+                >
+                  {translations.ERROR.TRY_AGAIN}
+                </a>
+              }
+            >
+              <p>
+                {translations.ERROR.MESSAGE_TEXT1}
+                <br />
+                {translations.ERROR.MESSAGE_TEXT2}
+              </p>
+              <p>
+                {translations.ERROR.ERROR_TEXT1}
+                <a
+                  href={`mailto:${settings.companyContactEmail}?subject=Boeking%20mislukt`}
+                  title={translations.ERROR.ERROR_ALT}
+                >
+                  {translations.ERROR.ERROR_TEXT2}
+                </a>
+                {translations.ERROR.ERROR_TEXT3}
+              </p>
+            </Message>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Error;