@fremtind/jkl-feedback-react/build/esm/questions/ContactQuestion.js

Jøkul react feedback component

var __defProp = Object.defineProperty;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues = (a, b) => {
  for (var prop in b || (b = {}))
    if (__hasOwnProp.call(b, prop))
      __defNormalProp(a, prop, b[prop]);
  if (__getOwnPropSymbols)
    for (var prop of __getOwnPropSymbols(b)) {
      if (__propIsEnum.call(b, prop))
        __defNormalProp(a, prop, b[prop]);
    }
  return a;
};
import { PrimaryButton, TertiaryButton } from "@fremtind/jkl-button-react";
import { TextInput } from "@fremtind/jkl-text-input-react";
import {
  isValidEpost,
  isValidTelefonnummer
} from "@fremtind/jkl-validators-util";
import React, {
  useEffect,
  useRef,
  useState
} from "react";
import { useFeedbackContext } from "../feedbackContext";
import { FeedbackSuccess } from "../FeedbackSuccess";
const validateEmail = (email) => {
  if (!email || email === "") {
    return "Du m\xE5 oppgi e-postadresse for at vi kan kontakte deg";
  }
  if (!isValidEpost(email)) {
    return "Skriv inn en gyldig e-postadresse";
  }
  return;
};
const validatePhone = (phone) => {
  if (!phone || phone === "") {
    return "Du m\xE5 oppgi telefonnummer for at vi kan kontakte deg";
  }
  if (!isValidTelefonnummer(phone)) {
    return "Skriv inn et gyldig telefonnummer";
  }
  return;
};
const defaultSuccessMessage = {
  title: "Takk for tiden din!",
  children: "Neste gang vi gjennomf\xF8rer intervjuer og tester kan det hende vi tar kontakt med deg. Dine innspill hjelper oss med \xE5 gj\xF8re nettsidene bedre for deg og alle andre som bruker dem."
};
const ContactQuestion = ({
  label = "Kan vi kontakte deg for flere innspill?",
  sendButtonLabel = "Sett meg p\xE5 lista!",
  withPhone = false,
  onSubmit,
  successMessage = defaultSuccessMessage,
  children
}) => {
  const [email, setEmail] = useState("");
  const [phone, setPhone] = useState("");
  const [errors, setErrors] = useState(
    {}
  );
  const emailRef = useRef(null);
  const phoneRef = useRef(null);
  const [shouldValidate, setShouldValidate] = useState(false);
  const [noThanks, setNoThanks] = useState(false);
  const { contactSubmitted, setContactSubmitted, landmarkLabel } = useFeedbackContext();
  const ChildrenWrapper = typeof children === "string" ? "p" : "div";
  const validate = (email2, phone2) => {
    const emailError = validateEmail(email2);
    const phoneError = validatePhone(phone2);
    setErrors({ email: emailError, phone: phoneError });
    return { emailError, phoneError };
  };
  useEffect(() => {
    if (shouldValidate) {
      const { emailError, phoneError } = validate(email, phone);
      if (!emailError && (!withPhone || !phoneError)) {
        setShouldValidate(false);
      }
    }
  }, [email, phone, shouldValidate, withPhone]);
  const handleChange = (consumer) => (e) => consumer(e.target.value);
  const handleSubmit = (e) => {
    var _a, _b;
    e.preventDefault();
    const { emailError, phoneError } = validate(email, phone);
    if (emailError) {
      setShouldValidate(true);
      (_a = emailRef.current) == null ? void 0 : _a.focus();
      return;
    }
    if (withPhone && phoneError) {
      setShouldValidate(true);
      (_b = phoneRef.current) == null ? void 0 : _b.focus();
      return;
    }
    onSubmit({ email, phone: withPhone ? phone : void 0 });
    setContactSubmitted(true);
  };
  if (noThanks) {
    return null;
  }
  if (contactSubmitted) {
    return /* @__PURE__ */ React.createElement(FeedbackSuccess, __spreadValues({}, successMessage));
  }
  return /* @__PURE__ */ React.createElement(
    "form",
    {
      className: "jkl-spacing-xl--top",
      onSubmit: handleSubmit,
      "aria-label": landmarkLabel
    },
    /* @__PURE__ */ React.createElement("p", { className: "jkl-heading-4 jkl-spacing-xs--bottom" }, label),
    children && /* @__PURE__ */ React.createElement(ChildrenWrapper, { className: "jkl-body" }, children),
    /* @__PURE__ */ React.createElement(
      TextInput,
      {
        ref: emailRef,
        className: "jkl-spacing-l--top",
        label: "E-post",
        labelProps: { variant: "small" },
        autoComplete: "email",
        name: "email",
        value: email,
        onChange: handleChange(setEmail),
        errorLabel: errors.email
      }
    ),
    withPhone && /* @__PURE__ */ React.createElement(
      TextInput,
      {
        ref: phoneRef,
        className: "jkl-spacing-l--top",
        label: "Telefonnummer",
        labelProps: { variant: "small" },
        autoComplete: "tel",
        name: "phone",
        value: phone,
        onChange: handleChange(setPhone),
        errorLabel: errors.phone
      }
    ),
    /* @__PURE__ */ React.createElement("div", { className: "jkl-spacing-xl--top" }, /* @__PURE__ */ React.createElement(PrimaryButton, { type: "submit", className: "jkl-spacing-xl--right" }, sendButtonLabel), /* @__PURE__ */ React.createElement(TertiaryButton, { onClick: () => setNoThanks(true) }, "Nei takk"))
  );
};
export {
  ContactQuestion
};
//# sourceMappingURL=ContactQuestion.js.map