sprinque-js-sdk-wip
Version:
UI kit to implement Pay by Invoice with Sprinque
99 lines (98 loc) • 4.53 kB
JavaScript
import i18next from 'i18next';
import { BORDER_COLOR, ERROR_COLOR } from './styles';
import { VALIDATION_ERROR_CLASS_PREFIX } from './constants';
import { ADDRESS_LINE_1, BILLING_EMAIL, COUNTRY_SELECT, REG_NUMBER, USER_EMAIL, USER_PHONE, } from './selectors';
import { itiPhoneInput } from './step-2/form-listeners';
const EMAIL_REG = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
const checkIfFieldIsValid = (type, selector, shadowRoot) => {
const elem = shadowRoot.querySelector(selector);
const validationRule = {
requiredFields: Boolean(elem.value),
emails: elem.value.match(EMAIL_REG),
phones: (itiPhoneInput === null || itiPhoneInput === void 0 ? void 0 : itiPhoneInput.isValidNumber()) || false,
};
const isValid = validationRule[type];
elem.style.borderColor = isValid ? BORDER_COLOR : ERROR_COLOR;
return isValid;
};
export const getPhoneErrorMessage = (itiPhoneInput) => {
var _a, _b, _c;
if (!itiPhoneInput || !window.intlTelInputUtils)
return '';
const error = itiPhoneInput.getValidationError();
if (error === ((_a = intlTelInputUtils === null || intlTelInputUtils === void 0 ? void 0 : intlTelInputUtils.validationError) === null || _a === void 0 ? void 0 : _a.INVALID_COUNTRY_CODE)) {
return i18next.t('validation.invalidCountryCode');
}
if (error === ((_b = intlTelInputUtils === null || intlTelInputUtils === void 0 ? void 0 : intlTelInputUtils.validationError) === null || _b === void 0 ? void 0 : _b.TOO_SHORT)) {
return i18next.t('validation.phoneIsShort');
}
if (error == ((_c = intlTelInputUtils === null || intlTelInputUtils === void 0 ? void 0 : intlTelInputUtils.validationError) === null || _c === void 0 ? void 0 : _c.TOO_LONG)) {
return i18next.t('validation.phoneIsLong');
}
return i18next.t('validation.invalidPhone');
};
export const getValidationMessage = (fieldType) => {
switch (fieldType) {
case 'requiredFields':
return i18next.t('validation.fillAllFields');
case 'emails':
return i18next.t('validation.invalidEmail');
case 'phones':
return getPhoneErrorMessage(itiPhoneInput);
default:
return 'Unknown validation error';
}
};
const getValidationConfig = (isRegNumberRequired) => ({
'1': {
requiredFields: isRegNumberRequired ? [REG_NUMBER, BILLING_EMAIL] : [BILLING_EMAIL],
emails: [BILLING_EMAIL],
},
'2': {
requiredFields: [
ADDRESS_LINE_1,
//'#sp-address-line2',
'#sp-address-city',
'#sp-address-zip',
],
},
'3': {
requiredFields: ['#sp-user-name', '#sp-user-surname', USER_EMAIL, USER_PHONE],
emails: [USER_EMAIL],
phones: [USER_PHONE],
},
'4': {},
'5': {},
'6': {},
});
export const checkIfRegNumberIsRequired = (shadowRoot) => {
var _a, _b;
const selectedCountryValue = (_a = shadowRoot.querySelector(COUNTRY_SELECT)) === null || _a === void 0 ? void 0 : _a.value;
const option = shadowRoot.querySelector(`#country-${selectedCountryValue}`);
if (!option || !selectedCountryValue)
return true;
return ((_b = option === null || option === void 0 ? void 0 : option.dataset) === null || _b === void 0 ? void 0 : _b.isRegNumberRequired) === 'true';
};
export const isValidStep = (step, shadowRoot) => {
let isValid = true;
const isRegNumberRequired = checkIfRegNumberIsRequired(shadowRoot);
// iterate validation types "requiredFields", "emails"...
for (const [validationType, selectors] of Object.entries(getValidationConfig(isRegNumberRequired)[step])) {
// iterate each input
const error = selectors.find(selector => !checkIfFieldIsValid(validationType, selector, shadowRoot));
if (error) {
isValid = false;
showValidationError(step, validationType, shadowRoot);
break;
}
}
if (isValid)
hideValidationError(step, shadowRoot);
return isValid;
};
export const showValidationError = (step, validationType, shadowRoot) => {
shadowRoot.querySelector(`.${VALIDATION_ERROR_CLASS_PREFIX}${step}`).innerHTML = getValidationMessage(validationType);
};
export const hideValidationError = (step, shadowRoot) => {
shadowRoot.querySelector(`.${VALIDATION_ERROR_CLASS_PREFIX}${step}`).innerHTML = '';
};