@open-tender/utils
Version:
A library of utils for use with Open Tender applications that utilize our cloud-based Order API.
148 lines (147 loc) • 4.97 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.useSignUpForm = exports.notificationChannelFields = void 0;
const react_1 = require("react");
const utils_1 = require("../utils");
const initState = {
first_name: '',
last_name: '',
email: '',
phone: ''
};
exports.notificationChannelFields = [
{
label: 'Email',
name: 'EMAIL',
type: 'checkbox'
},
{
label: 'SMS / Text',
name: 'SMS',
type: 'checkbox'
},
{
label: 'Push Notifications',
name: 'PUSH',
type: 'checkbox'
}
];
const useSignUpForm = (loading, error, signUp, callback, checkConfig, hidePassword = false, optionalFields, notificationChannels, passwordRequirements, tpls) => {
const submitRef = (0, react_1.useRef)(null);
const [data, setData] = (0, react_1.useState)(initState);
const [comms, setComms] = (0, react_1.useState)([]);
const [errors, setErrors] = (0, react_1.useState)({});
const [submitting, setSubmitting] = (0, react_1.useState)(false);
const { displayed, required } = checkConfig || {};
const hasPunchh = tpls === 'PUNCHH';
const companyDisplayed = displayed && displayed.customer.includes('company');
const companyRequired = required && required.customer.includes('company');
const showCompany = companyDisplayed || companyRequired;
const toRemove = [];
if (!showCompany)
toRemove.push('company');
if (hidePassword)
toRemove.push('password');
if (optionalFields && !optionalFields.includes('birth_date'))
toRemove.push('birth_date');
const allFields = [
{
label: 'First Name',
name: 'first_name',
type: 'text',
required: true
},
{
label: 'Last Name',
name: 'last_name',
type: 'text',
required: true
},
{
label: 'Email',
name: 'email',
type: 'email',
required: true,
autoComplete: 'email'
},
{
label: `Password${passwordRequirements || ''}`,
name: 'password',
type: 'password',
required: true,
autoComplete: 'new-password'
},
{ label: 'Phone', name: 'phone', type: 'tel', required: true },
{
label: 'Company',
name: 'company',
type: 'text',
required: companyRequired
},
{
label: 'Birth Date (mm/dd/yyyy)',
name: 'birth_date',
type: 'tel',
required: hasPunchh
}
];
const fields = allFields.filter(i => !toRemove.includes(i.name));
const notificationFields = exports.notificationChannelFields.filter(i => notificationChannels === null || notificationChannels === void 0 ? void 0 : notificationChannels.includes(i.name));
(0, react_1.useEffect)(() => {
return () => {
setData(initState);
setErrors({});
};
}, []);
(0, react_1.useEffect)(() => {
if (loading === 'idle') {
setSubmitting(false);
if (error) {
const errs = (0, utils_1.makeFormErrors)(error);
if (errs.birth_date) {
errs.birth_date =
'Invalid date. Please enter in mm/dd/yyyy format or leave blank.';
}
setErrors(errs);
}
}
}, [loading, error]);
const handleChange = (name, value) => {
const inputValue = name === 'phone'
? (0, utils_1.makePhone)((value !== null && value !== void 0 ? value : ''))
: name === 'birth_date'
? (0, utils_1.makeBirthDate)(value)
: value;
setData(Object.assign(Object.assign({}, data), { [name]: inputValue }));
};
const handleComms = (name, value) => {
const other = comms.filter(i => i !== name);
const updated = value ? [...other, name] : other;
setComms(updated);
};
const handleSubmit = (evt) => {
var _a, _b;
evt === null || evt === void 0 ? void 0 : evt.preventDefault();
setErrors({});
setSubmitting(true);
const values = Object.assign(Object.assign({}, data), { communications: comms });
if (values.birth_date) {
values.birth_date = (0, utils_1.slashesToDashes)(values.birth_date);
}
signUp(values, callback);
((_a = submitRef.current) === null || _a === void 0 ? void 0 : _a.blur) && ((_b = submitRef.current) === null || _b === void 0 ? void 0 : _b.blur());
};
return {
submitRef,
data,
comms,
errors,
submitting,
fields,
notificationFields,
handleChange,
handleComms,
handleSubmit
};
};
exports.useSignUpForm = useSignUpForm;