@open-tender/utils
Version:
A library of utils for use with Open Tender applications that utilize our cloud-based Order API.
121 lines (120 loc) • 4.82 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.useOneTimePasscodeForm = void 0;
const tslib_1 = require("tslib");
const react_1 = require("react");
const utils_1 = require("../utils");
const useOneTimePasscodeForm = (otpSent, loading, error, includeRecaptcha, submit, callback) => {
const submitRef = (0, react_1.useRef)(null);
const inputRef = (0, react_1.useRef)(null);
const recaptchaRef = (0, react_1.useRef)(null);
const [data, setData] = (0, react_1.useState)({
identifier: '',
one_time_passcode: ''
});
const [errors, setErrors] = (0, react_1.useState)({});
const [submitting, setSubmitting] = (0, react_1.useState)(false);
const toRemove = otpSent ? ['identifier'] : ['one_time_passcode'];
const allFields = [
{
label: 'Phone number or email address',
name: 'identifier',
type: 'text',
required: true
},
{
label: 'One Time Passcode',
name: 'one_time_passcode',
type: 'number',
required: true
}
];
const fields = allFields.filter(i => !toRemove.includes(i.name));
(0, react_1.useEffect)(() => {
var _a, _b;
if (loading === 'idle' && submitting) {
setSubmitting(false);
if (error) {
if (recaptchaRef.current)
recaptchaRef.current.reset();
const errs = (0, utils_1.makeFormErrors)(error);
if (errs.form.includes('not found')) {
errs.form =
'Account not found. Please double check your phone or email and try again.';
}
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 (callback && otpSent) {
setErrors({});
callback();
}
else {
setErrors({});
}
}
}, [loading, error, callback, submitting, otpSent]);
const handleChange = (name, value) => {
if (name !== 'identifier') {
setData(Object.assign(Object.assign({}, data), { [name]: value }));
}
else if (typeof value === 'string') {
const inputValue = /[a-zA-Z]/g.test(value)
? value
: (0, utils_1.makePhone)(value !== null && value !== void 0 ? value : '');
setData(Object.assign(Object.assign({}, data), { [name]: inputValue }));
}
};
const handleSubmit = (evt) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
var _a, _b, _c, _d, _e;
evt === null || evt === void 0 ? void 0 : evt.preventDefault();
const { identifier, one_time_passcode } = data;
const values = /[a-zA-Z]/g.test(identifier)
? { email: identifier }
: { phone: identifier };
if (includeRecaptcha) {
try {
const isEnterpriseRecaptcha = ((_a = recaptchaRef.current) === null || _a === void 0 ? void 0 : _a.props.size) === 'invisible';
const token = isEnterpriseRecaptcha
? yield ((_b = recaptchaRef.current) === null || _b === void 0 ? void 0 : _b.executeAsync())
: (_c = recaptchaRef.current) === null || _c === void 0 ? void 0 : _c.getValue();
if (!token) {
setSubmitting(false);
setErrors({
form: 'Please complete the recaptcha before submitting'
});
}
else {
otpSent
? submit({ one_time_passcode, recaptcha_token: token })
: submit(Object.assign(Object.assign({}, values), { recaptcha_token: token }));
setSubmitting(true);
}
}
catch (err) {
setSubmitting(false);
setErrors({
form: 'Please complete the recaptcha before submitting'
});
}
}
else {
otpSent ? submit({ one_time_passcode }) : submit(values);
setSubmitting(true);
}
((_d = submitRef.current) === null || _d === void 0 ? void 0 : _d.blur) && ((_e = submitRef.current) === null || _e === void 0 ? void 0 : _e.blur());
});
return {
submitRef,
inputRef,
recaptchaRef,
fields,
data,
errors,
setErrors,
submitting,
handleChange,
handleSubmit
};
};
exports.useOneTimePasscodeForm = useOneTimePasscodeForm;