@open-tender/utils
Version:
A library of utils for use with Open Tender applications that utilize our cloud-based Order API.
209 lines (208 loc) • 8.24 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.useSignUpGuestForm = void 0;
const tslib_1 = require("tslib");
const react_1 = require("react");
const utils_1 = require("../utils");
const useSignUpForm_1 = require("./useSignUpForm");
const initialData = {
first_name: '',
last_name: '',
phone: '',
email: '',
password: ''
};
const useSignUpGuestForm = (email, guest, loading, error, guestErrors, signUp, submitGuest, tpls, notificationChannels = [], includeRecaptcha, getRecaptchaToken, includeLoginRecaptcha, getLoginRecaptchaToken, require_home_store) => {
const submitRef = (0, react_1.useRef)(null);
const inputRef = (0, react_1.useRef)(null);
const initData = Object.assign(Object.assign(Object.assign({}, initialData), guest), { email });
const [data, setData] = (0, react_1.useState)(initData);
const [comms, setComms] = (0, react_1.useState)([]);
const [errors, setErrors] = (0, react_1.useState)({});
const [submitting, setSubmitting] = (0, react_1.useState)(false);
const { guestData, guestIncomplete } = (0, utils_1.checkGuestData)(data, email);
const hasThanx = tpls === 'THANX';
const hasPunchh = tpls === 'PUNCHH';
const isIncomplete = hasThanx
? guestIncomplete
: Object.values(data).filter(i => !i).length > 0;
const isLoading = loading === 'pending';
const disabled = isIncomplete || isLoading;
const guestDisabled = guestIncomplete || isLoading;
const toRemove = [];
if (!hasPunchh)
toRemove.push('birth_date');
if (hasThanx)
toRemove.push('password');
const allFields = [
{
label: 'Email',
name: 'email',
type: 'email',
required: true,
disabled: true
},
{
label: 'First Name',
name: 'first_name',
type: 'text',
required: true
},
{
label: 'Last Name',
name: 'last_name',
type: 'text',
required: true
},
{ label: 'Phone', name: 'phone', type: 'tel', required: true },
{
label: 'Birth Date (mm/dd/yyyy)',
name: 'birth_date',
type: 'tel',
required: false
},
{
label: 'Password',
name: 'password',
type: 'password',
autoComplete: 'new-password'
}
];
const fields = allFields.filter(i => !toRemove.includes(i.name));
const notificationFields = useSignUpForm_1.notificationChannelFields.filter(i => notificationChannels === null || notificationChannels === void 0 ? void 0 : notificationChannels.includes(i.name));
const handleChange = (name, value) => {
const val = name === 'phone'
? (0, utils_1.makePhone)(value)
: name === 'birth_date'
? (0, utils_1.makeBirthDate)(value)
: value;
setData(Object.assign(Object.assign({}, data), { [name]: val }));
};
const validateRequiredFields = (values) => {
var _a, _b, _c, _d, _e;
const validationErrors = {};
// Check non-optional fields from CustomerCreate
if (!((_a = values.first_name) === null || _a === void 0 ? void 0 : _a.trim())) {
validationErrors.first_name = 'First name is required';
}
if (!((_b = values.last_name) === null || _b === void 0 ? void 0 : _b.trim())) {
validationErrors.last_name = 'Last name is required';
}
if (!((_c = values.email) === null || _c === void 0 ? void 0 : _c.trim())) {
validationErrors.email = 'Email is required';
}
if (!((_d = values.phone) === null || _d === void 0 ? void 0 : _d.trim())) {
validationErrors.phone = 'Phone is required';
}
// Check password if not Thanx (password is removed for Thanx)
if (!((_e = values.password) === null || _e === void 0 ? void 0 : _e.trim())) {
validationErrors.password = 'Password is required';
}
return validationErrors;
};
const handleSubmit = (evt) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
var _a, _b, _c;
evt === null || evt === void 0 ? void 0 : evt.preventDefault();
if (!disabled) {
setErrors({});
const values = Object.assign(Object.assign({}, data), { email, communications: comms });
if (values.birth_date) {
values.birth_date = (0, utils_1.slashesToDashes)(values.birth_date);
}
// Validate required fields
const validationErrors = validateRequiredFields(values);
if (require_home_store && !data.home_store) {
validationErrors.home_store = 'Please select a home store';
}
// If there are validation errors, set them and return early
if (Object.keys(validationErrors).length > 0) {
setErrors(validationErrors);
return;
}
const loginToken = includeLoginRecaptcha
? (_a = (yield (getLoginRecaptchaToken === null || getLoginRecaptchaToken === void 0 ? void 0 : getLoginRecaptchaToken()))) !== null && _a !== void 0 ? _a : undefined
: undefined;
if (includeRecaptcha) {
try {
const token = yield (getRecaptchaToken === null || getRecaptchaToken === void 0 ? void 0 : getRecaptchaToken());
if (!token) {
setErrors({
form: 'Please complete the recaptcha before submitting'
});
}
else {
setSubmitting(true);
signUp(values, token, loginToken);
}
}
catch (err) {
setErrors({
form: 'Please complete the recaptcha before submitting'
});
}
}
else {
setSubmitting(true);
signUp(values, undefined, loginToken);
}
((_b = submitRef.current) === null || _b === void 0 ? void 0 : _b.blur) && ((_c = submitRef.current) === null || _c === void 0 ? void 0 : _c.blur());
}
});
const handleGuest = () => {
if (!guestDisabled) {
setErrors({});
setSubmitting(true);
submitGuest(Object.assign(Object.assign({}, guestData), { email }));
}
};
const handleComms = (name, value) => {
const other = comms.filter(i => i !== name);
const updated = value ? [...other, name] : other;
setComms(updated);
};
const resetState = (0, react_1.useCallback)(() => {
var _a, _b;
if (loading !== 'idle' || !submitting)
return;
if (error) {
const errs = (0, utils_1.makeFormErrors)(error);
if (errs.form.includes('parameters')) {
errs.form = 'There are one or more errors below';
}
setErrors(errs);
((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus) && ((_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.focus());
}
else if (guestErrors) {
setErrors(guestErrors);
}
setSubmitting(false);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [loading, error, guestErrors]);
(0, react_1.useEffect)(() => {
resetState();
}, [resetState]);
(0, react_1.useEffect)(() => {
return () => {
setData(Object.assign(Object.assign({}, initialData), { email: '' }));
setErrors({});
};
}, []);
return {
submitRef,
inputRef,
fields,
notificationFields,
data,
comms,
errors,
disabled,
guestDisabled,
submitting,
handleChange,
handleSubmit,
handleGuest,
handleComms,
resetState
};
};
exports.useSignUpGuestForm = useSignUpGuestForm;