(() => {
let elBusinessNo = document.querySelector('[name="사업자등록번호"]');
let elRegNoChecked = document.querySelector('[name="regNoChecked" ]');
let elbtnChkRegNo = document.querySelector('#btnChkRegNo' );
const url = new URL(location.href);
const joinType = url.searchParams.get('type');
const { pageHelper, EventManager, constants, utils } = ShopbySkin;
if (utils.isSignedIn()) {
if (!document.referrer || location.href === document.referrer) {
history.back();
return;
}
utils.moveTo({
url: document.referrer,
});
}
const signUpFormHelper = pageHelper.signUpFormHelper();
const containerEl = document.querySelector(`[shopby-helper-key="sign-up-form"]`);
const profileExtraInformationEl = document.querySelector('profile-extra-information');
signUpFormHelper.initialize({
helperKey: 'sign-up-form',
});
const flattenRequest = (helper) => {
const {
profileBasicInformation,
profileNicknameInformation,
profileEmailInformation,
profileSmsInformation,
profileCertification,
profileOptionalInformation,
termsInformation,
profileExtraInformation,
} = helper.getState();
const businessName = document.querySelector('[name=매장명]').value;
const registrationNo = elBusinessNo.value;
const selectedCustomTerms = termsInformation?.customTerms.filter(({ checked }) => !!checked).map((term) => term.id);
const data = ( 'shop' == joinType )
? {
businessName,
registrationNo,
...profileBasicInformation,
...profileEmailInformation,
...profileSmsInformation,
...profileCertification,
...profileOptionalInformation,
extraInfo: profileExtraInformation?.extraInfoContents,
nickname: profileNicknameInformation?.nickname,
joinTermsAgreements: termsInformation?.terms,
customTermsNos: selectedCustomTerms,
}
: {
...profileBasicInformation,
...profileEmailInformation,
...profileSmsInformation,
...profileCertification,
...profileOptionalInformation,
extraInfo: profileExtraInformation?.extraInfoContents,
nickname: profileNicknameInformation?.nickname,
joinTermsAgreements: termsInformation?.terms,
customTermsNos: selectedCustomTerms,
}
;
return data;
};
const checkInvalidProfileForm = (request) => {
// eslint-disable-next-line complexity
const errors = Object.keys(utils.changeProfileFormVerifyMap)?.map((key) => {
const value = request?.[key]?.value ?? '';
switch (key) {
case 'memberId':
return {
...utils.changeProfileFormVerifyMap?.[key]({
value,
isDuplicated: request?.memberId?.isDuplicate,
isDormantMemberId: !!request?.isRecentlyExitedMember,
}),
field: key,
};
case 'passwordConfirm':
return {
...utils.changeProfileFormVerifyMap?.[key]({ value, comparisonValue: request?.password?.value }),
field: key,
};
case 'memberName':
return {
...utils.changeProfileFormVerifyMap?.[key]({ value, isRequired: request?.memberName?.isRequired }),
field: key,
};
case 'nickname':
return {
...utils.changeProfileFormVerifyMap?.[key]({
value,
isDuplicated: request?.nickname?.isDuplicate,
isRequired: request?.nickname?.isRequired,
}),
field: key,
};
case 'email':
return {
...utils.changeProfileFormVerifyMap?.[key]({
value,
isDuplicated: request?.email?.isDuplicate,
isRequired: request?.email?.isRequired,
}),
field: key,
};
case 'mobileNo':
case 'telephoneNo':
return {
...utils.changeProfileFormVerifyMap?.[key]({ value, isRequired: request?.[key]?.isRequired }),
field: key,
};
case 'detailAddress':
return {
...utils.changeProfileFormVerifyMap?.[key]({
value,
zipCode: request?.zipCd,
isRequired: request?.detailAddress?.isRequired,
}),
field: key,
};
case 'birthday':
case 'sex':
return {
...utils.changeProfileFormVerifyMap?.[key]({ value, isRequired: request?.[key]?.isRequired }),
field: key,
};
case 'extraInfo':
return { ...utils.changeProfileFormVerifyMap?.[key](request.extraInfo), field: key };
case 'joinTermsAgreements':
return { ...utils.changeProfileFormVerifyMap?.[key](request.joinTermsAgreements), field: key };
default:
return {
...utils.changeProfileFormVerifyMap?.[key]({ value, isRequired: request?.[key]?.isRequired }),
field: key,
};
}
});
return errors.filter((error) => !error.isValid);
};
// eslint-disable-next-line complexity
const checkCertificatedValidation = (request) => {
const invalidEmail = request?.emailCertificationStatus === 'INITIAL';
const invalidSmsInternalCertification = request?.smsCertificationStatus === 'INITIAL';
const invalidSmsExternalAuthentication = request?.smsCertificationStatus === 'SMS_AUTHENTICATION' && !request?.ci;
if (invalidEmail || invalidSmsInternalCertification || invalidSmsExternalAuthentication) {
EventManager.fire('MODAL_ALERT_OPEN', {
noticeType: 'CAUTION',
message: `${invalidEmail ? '이메일 인증을 진행해 주세요.' : '휴대폰 인증을 진행해 주세요.'}`,
onClose: () => {
utils.handleFocusEvent({ containerEl, fields: invalidEmail ? 'email' : 'mobileNo' });
},
});
return false;
}
const message = request.certificatedNumber?.length ? '인증을 진행해주세요.' : '인증번호를 입력해주세요.';
if (request.certificated && (!request.certificated.value || !request.certificated.isValid)) {
EventManager.fire('MODAL_ALERT_OPEN', {
noticeType: 'CAUTION',
message: `${request.certificated.message ?? message}`,
onClose: () => {
utils.handleFocusEvent({ containerEl, fields: 'certificatedNumber' });
},
});
return false;
}
return true;
};
const CLICK_EVENT_HANDLER_MAP = {
// eslint-disable-next-line complexity
EMAIL_CERTIFICATION: async (helper) => {
const { profileEmailInformation } = helper.getState();
const isInvalidEmail = profileEmailInformation?.email.value === '@' || !profileEmailInformation?.email.isValid;
if (isInvalidEmail) {
EventManager.fire('MODAL_ALERT_OPEN', {
noticeType: 'CAUTION',
message: `${profileEmailInformation?.email.message ?? '이메일을 입력해주세요.'}`,
});
return;
}
if (profileEmailInformation?.emailCertificationStatus === 'INITIAL') {
await helper.sendCertificationCode(profileEmailInformation.email.value, 'EMAIL');
EventManager.fire('MODAL_ALERT_OPEN', {
noticeType: 'SUCCESS',
message: '인증번호가 발송되었습니다.',
});
} else {
EventManager.fire('MODAL_CONFIRM_OPEN', {
noticeType: 'WARNING',
message: '인증번호를 재발송하시겠습니까?',
onConfirm: async () => {
await helper.sendCertificationCode(profileEmailInformation.email.value, 'EMAIL');
EventManager.fire('MODAL_ALERT_OPEN', {
noticeType: 'SUCCESS',
message: '인증번호가 발송되었습니다.',
});
},
});
}
},
// eslint-disable-next-line complexity
SMS_CERTIFICATION: async (helper) => {
const { profileSmsInformation } = helper.getState();
const isInvalidMobileNo = !profileSmsInformation?.mobileNo.value || !profileSmsInformation?.mobileNo.isValid;
if (isInvalidMobileNo) {
EventManager.fire('MODAL_ALERT_OPEN', {
noticeType: 'CAUTION',
message: `${profileSmsInformation?.mobileNo.message ?? '휴대폰 번호를 입력해주세요.'}`,
});
return;
}
if (profileSmsInformation?.smsCertificationStatus === 'INITIAL') {
await helper.sendCertificationCode(profileSmsInformation.mobileNo.value, 'SMS');
EventManager.fire('MODAL_ALERT_OPEN', {
noticeType: 'SUCCESS',
message: '인증번호가 발송되었습니다.',
});
} else {
EventManager.fire('MODAL_CONFIRM_OPEN', {
noticeType: 'WARNING',
message: '인증번호를 재발송하시겠습니까?',
onConfirm: async () => {
await helper.sendCertificationCode(profileSmsInformation.mobileNo.value, 'SMS');
EventManager.fire('MODAL_ALERT_OPEN', {
noticeType: 'SUCCESS',
message: '인증번호가 발송되었습니다.',
});
},
});
}
},
AUTHENTICATION_BY_PHONE: () => {
EventManager.fire('OPEN_LAYER_MODAL', {
name: 'kcp-sms-authentication',
data: { type: 'JOIN_TIME' },
onClose: ({ reason, state }) => {
if (reason === 'DID_SUBMIT') {
ShopbySkin.EventManager.fire('SUCCESS_AUTHENTICATION_SMS', state);
}
},
});
},
SEARCH_ZIP_CODE: () => {
EventManager.fire('OPEN_LAYER_MODAL', {
modalAddClass: 'search-zip-code full-modal',
name: 'page-zip-code',
onClose: ({ reason, state }) => {
if (reason === 'DID_SUBMIT') {
ShopbySkin.EventManager.fire('SELECT_ZIP_CODE', {
moduleKey: 'profile-optional-information',
state,
});
}
},
});
},
SHOW_TERM_DETAIL: ({ elTarget, helper }) => {
const { termsInformation } = helper.getState();
if (!termsInformation) {
return;
}
const mergedTerms = [...termsInformation.terms, ...termsInformation.customTerms];
const selectedTerm = mergedTerms.find((term) => elTarget.getAttribute('shopby-term-id') === term.id.toString());
EventManager.fire('OPEN_LAYER_MODAL', {
name: 'term-detail',
data: selectedTerm,
});
},
// eslint-disable-next-line complexity
SUBMIT: async (helper) => {
const idRegex = /^(?=.*[a-zA-Z])(?=.*\d)/;
if ( false === idRegex.test( document.querySelector('input[name="member-id"]' ).value ) ) {
alert("아이디는 영문과 숫자가 모두 포함되어야 합니다.");
return false;
}
if ( 'shop' == joinType ) {
if ( !document.querySelector('.extra-info [name=매장명]').value ) {
alert("매장명을 입력해주십시오.");
document.querySelector('.extra-info [name=매장명]').focus();
return false;
}
else
if ( !document.querySelector('.extra-info [name=사업자등록번호]').value ) {
alert("사업자등록번호를 입력해주십시오.");
document.querySelector('.extra-info [name=사업자등록번호]').focus();
return false;
}
else
if ( 'y' != elRegNoChecked.value ) {
alert('사업자 등록번호를 인증해주세요.');
elBusinessNo.focus();
return false;
}
else
if ( !document.querySelector('.extra-info [shopby-extra-info-no="411"] .image-file-uploader__images li') ) {
alert("사업자등록증을 업로드해주십시오.");
return false;
}
else
if ( !document.querySelector('.extra-info [shopby-extra-info-no="408"] .image-file-uploader__images li') ) {
alert("사업장 입증 자료를 업로드해주십시오.");
return false;
}
}
await profileExtraInformationEl?.refetchConfigMemberExtraInfo();
const flattedRequest = flattenRequest(helper);
const invalidRequest = checkInvalidProfileForm(flattedRequest);
if (invalidRequest?.length) {
const [error] = invalidRequest;
EventManager.fire('MODAL_ALERT_OPEN', {
noticeType: 'CAUTION',
message: `${error.message}`,
onClose: () => {
utils.handleFocusEvent({ containerEl, fields: error.field });
EventManager.fire('INVALID_PROFILE_FORM', {
data: invalidRequest,
});
},
});
return;
}
if (!checkCertificatedValidation(flattedRequest)) {
return;
}
const { data } = await helper.submit(flattedRequest);
EventManager.fire('MODAL_ALERT_OPEN', {
noticeType: 'SUCCESS',
message: '회원가입이 완료되었습니다.',
onClose: () => {
if (data.memberStatus === 'PENDING') {
utils.moveTo({ url: constants.PAGE.SIGN_UP_PENDING, replace: true, });
} else {
utils.moveTo({ url: constants.PAGE.SIGN_UP_COMPLETE, replace: true, });
}
},
});
/*
if ( 'shop' == joinType ) {
putProfileGrades(data, (result)=>{
EventManager.fire('MODAL_ALERT_OPEN', {
noticeType: 'SUCCESS',
message: '회원가입이 완료되었습니다.',
onClose: () => {
if (data.memberStatus === 'PENDING') {
utils.moveTo({ url: constants.PAGE.SIGN_UP_PENDING, replace: true, });
} else {
utils.moveTo({ url: constants.PAGE.SIGN_UP_COMPLETE, replace: true, });
}
},
});
});
}
else {
EventManager.fire('MODAL_ALERT_OPEN', {
noticeType: 'SUCCESS',
message: '회원가입이 완료되었습니다.',
onClose: () => {
if (data.memberStatus === 'PENDING') {
utils.moveTo({ url: constants.PAGE.SIGN_UP_PENDING, replace: true, });
} else {
utils.moveTo({ url: constants.PAGE.SIGN_UP_COMPLETE, replace: true, });
}
},
});
}
*/
},
HANDLE_DELETE_IMAGE_BTN_CLICK: (_, event) => {
event.preventDefault();
EventManager.fire('MODAL_CONFIRM_OPEN', {
noticeType: 'WARNING',
message: '첨부파일을 삭제하시겠습니까?',
onConfirm: () => {
const extraInfoNo = event.target.closest('[shopby-extra-info-no]').getAttribute('shopby-extra-info-no');
profileExtraInformationEl.deleteImage(extraInfoNo);
},
});
},
};
const clickEventListener = (event) => {
const { target } = event;
const action = target.getAttribute('shopby-action');
if (action === 'SHOW_TERM_DETAIL') {
CLICK_EVENT_HANDLER_MAP[action]?.({
helper: signUpFormHelper,
elTarget: target,
});
} else {
CLICK_EVENT_HANDLER_MAP[action]?.(signUpFormHelper, event);
}
};
containerEl.addEventListener('click', clickEventListener);
EventManager.fire('MYAPP:PROXY_REGISTER', {
proxyFnKey: 'signUpFormProxy',
applyProxy: (proxyFn) => {
signUpFormHelper.submit = proxyFn(signUpFormHelper.submit);
},
});
const putProfileGrades = ( data , callback ) => {
const url = "https://vx-gateway.vx-mall.com/api/profile/grades";
const payload = {
gradeNo: 93748,
memberNo: data.memberNo,
memberId: data.memberId,
};
fetch(url, {
method : "POST" ,
body : JSON.stringify(payload) ,
})
.then(response => {
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
return response.json();
})
.then(data => {
callback(true, '');
})
.catch(error => {
callback(false, error)
});
}
setTimeout(()=>{
if ( 'mall' == joinType ) {
document.querySelector('.extra-info').style.display = 'none';
}
}, 500);
const changeHandler = ({target}) => {
target.value = target.value.replace(/[^0-9]/g, "");
if ( 10 != target.value.length ) {
target.value = target.value.substr(0, 10);
}
elRegNoChecked.value = 'n';
target.innerHTML = "인증";
elbtnChkRegNo.disabled = false;
}
const clickHandler = ({target}) => {
const businessNo = elBusinessNo.value;
if ( 10 != businessNo.length ) {
alert('사업자등록번호를 정확히 입력해주세요.');
elRegNoChecked.value = 'n';
return;
}
fetch('https://vx-gateway.vx-mall.com/check_reg_no?regNo=' + businessNo)
.then((res)=>res.json())
.then((data)=>{
if ( true === data?.result ) {
elRegNoChecked.value = 'y';
target.innerHTML = "인증 완료";
target.disabled = true;
}
else {
alert("사업자등록번호를 조회할 수 없습니다.\r\n사업자등록번호를 정확히 입력해주세요.");
elRegNoChecked.value = 'n';
target.innerHTML = "인증";
target.disabled = false;
}
})
}
const interval = setInterval(()=>{
elBusinessNo = document.querySelector('[name="사업자등록번호"]');
elRegNoChecked = document.querySelector('[name="regNoChecked" ]');
elbtnChkRegNo = document.querySelector('#btnChkRegNo' );
if ( elBusinessNo && elRegNoChecked && elbtnChkRegNo ) {
document.querySelectorAll('.extra-info .sign-up-form__title span').forEach((v)=>{
v.classList.add('dot');
v.classList.add('dot--r-must');
});
elBusinessNo .removeEventListener('change' , changeHandler );
elbtnChkRegNo .removeEventListener('click' , clickHandler );
elBusinessNo .addEventListener ('change' , changeHandler );
elbtnChkRegNo .addEventListener ('click' , clickHandler );
}
}, 500);
})();