@fremtind/jkl-feedback-react
Version:
Jøkul react feedback component
174 lines (173 loc) • 7.24 kB
JavaScript
;
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __getProtoOf = Object.getPrototypeOf;
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;
};
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var ContactQuestion_exports = {};
__export(ContactQuestion_exports, {
ContactQuestion: () => ContactQuestion
});
module.exports = __toCommonJS(ContactQuestion_exports);
var import_jkl_button_react = require("@fremtind/jkl-button-react");
var import_jkl_text_input_react = require("@fremtind/jkl-text-input-react");
var import_jkl_validators_util = require("@fremtind/jkl-validators-util");
var import_react = __toESM(require("react"));
var import_feedbackContext = require("../feedbackContext");
var import_FeedbackSuccess = require("../FeedbackSuccess");
const validateEmail = (email) => {
if (!email || email === "") {
return "Du m\xE5 oppgi e-postadresse for at vi kan kontakte deg";
}
if (!(0, import_jkl_validators_util.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 (!(0, import_jkl_validators_util.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] = (0, import_react.useState)("");
const [phone, setPhone] = (0, import_react.useState)("");
const [errors, setErrors] = (0, import_react.useState)(
{}
);
const emailRef = (0, import_react.useRef)(null);
const phoneRef = (0, import_react.useRef)(null);
const [shouldValidate, setShouldValidate] = (0, import_react.useState)(false);
const [noThanks, setNoThanks] = (0, import_react.useState)(false);
const { contactSubmitted, setContactSubmitted, landmarkLabel } = (0, import_feedbackContext.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 };
};
(0, import_react.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__ */ import_react.default.createElement(import_FeedbackSuccess.FeedbackSuccess, __spreadValues({}, successMessage));
}
return /* @__PURE__ */ import_react.default.createElement(
"form",
{
className: "jkl-spacing-xl--top",
onSubmit: handleSubmit,
"aria-label": landmarkLabel
},
/* @__PURE__ */ import_react.default.createElement("p", { className: "jkl-heading-4 jkl-spacing-xs--bottom" }, label),
children && /* @__PURE__ */ import_react.default.createElement(ChildrenWrapper, { className: "jkl-body" }, children),
/* @__PURE__ */ import_react.default.createElement(
import_jkl_text_input_react.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__ */ import_react.default.createElement(
import_jkl_text_input_react.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__ */ import_react.default.createElement("div", { className: "jkl-spacing-xl--top" }, /* @__PURE__ */ import_react.default.createElement(import_jkl_button_react.PrimaryButton, { type: "submit", className: "jkl-spacing-xl--right" }, sendButtonLabel), /* @__PURE__ */ import_react.default.createElement(import_jkl_button_react.TertiaryButton, { onClick: () => setNoThanks(true) }, "Nei takk"))
);
};
//# sourceMappingURL=ContactQuestion.js.map