@open-tender/utils
Version:
A library of utils for use with Open Tender applications that utilize our cloud-based Order API.
104 lines (103 loc) • 4.09 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.useProfileForm = void 0;
const react_1 = require("react");
const utils_1 = require("../utils");
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: 'Phone', name: 'phone', type: 'tel', required: true },
{ label: 'Company', name: 'company', type: 'text' },
{ label: 'Birth Date (mm/dd/yyyy)', name: 'birth_date', type: 'tel' }
];
const makePayload = (fields, data) => {
if (!data)
return null;
const rest = fields.reduce((obj, i) => (Object.assign(Object.assign({}, obj), { [i.name]: data[i.name] })), {});
rest.birth_date = data.birth_date ? (0, utils_1.slashesToDashes)(data.birth_date) : null;
return rest;
};
const useProfileForm = (profile, loading, error, update, callback, optionalFields, disabledFields) => {
const submitRef = (0, react_1.useRef)(null);
const [data, setData] = (0, react_1.useState)(profile);
const isSubmitting = (0, react_1.useRef)(false);
const [errors, setErrors] = (0, react_1.useState)({});
const toRemove = (0, react_1.useMemo)(() => {
const removed = [];
if (optionalFields && !optionalFields.includes('birth_date'))
removed.push('birth_date');
return removed;
}, [optionalFields]);
// const fields = allFields.filter((i) => !toRemove.includes(i.name))
const fields = (0, react_1.useMemo)(() => {
return allFields
.filter(i => !toRemove.includes(i.name))
.map(i => (Object.assign(Object.assign({}, i), { disabled: disabledFields === null || disabledFields === void 0 ? void 0 : disabledFields.includes(i.name) })));
}, [toRemove, disabledFields]);
(0, react_1.useEffect)(() => {
if (loading === 'idle' && isSubmitting.current) {
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);
}
else if (callback) {
const payload = makePayload(fields, data);
if (payload)
callback(payload);
}
isSubmitting.current = false;
}
}, [loading, error, callback, fields, data]);
(0, react_1.useEffect)(() => {
if (profile)
setData(profile);
}, [profile]);
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;
if (data)
setData(Object.assign(Object.assign({}, data), { [name]: inputValue }));
};
// const handleRadio = (name: string, value: string) => {
// if (data) setData({ ...data, [name]: value })
// }
const handleSubmit = (evt) => {
var _a, _b;
evt === null || evt === void 0 ? void 0 : evt.preventDefault();
if (!data)
return;
setErrors({});
isSubmitting.current = true;
const payload = makePayload(fields, data);
if (payload)
update(payload);
((_a = submitRef.current) === null || _a === void 0 ? void 0 : _a.blur) && ((_b = submitRef.current) === null || _b === void 0 ? void 0 : _b.blur());
};
return {
submitRef,
// accepts_marketing,
// order_notifications,
data,
errors,
submitting: isSubmitting.current,
fields,
handleChange,
// handleRadio,
handleSubmit
};
};
exports.useProfileForm = useProfileForm;