email.js

email.js

interface ErrorNoteProps {
    text: string;
}

const ErrorNote: React.FC<ErrorNoteProps> = ({text}) => (
    <span className="errorNote">
        {text}
    </span>
);

const Finish: React.FC = () => (
    <div className="finish success">
        <h2>
            ✓
        </h2>

        <div className="texts successText">
            <h1>
                출시 소식 받아보기 완료
            </h1>

            <p>
                출시 소식을 이메일로 받아보실 수 있습니다.
            </p>
        </div>
    </div>
);

const getPayload = (email) => {
    const url = new URL(location.href);
    const params = new URLSearchParams(url.search);

    return {
        email,
        utm: [params.get('utm_content'), params.get('utm_source'), params.get('utm_medium')].join('/'),
    };
};

interface FormProps {
    type: string;
}

const Form: React.FC<FormProps> = ({type}) => {
    const [error, setError] = React.useState(null);
    const [loading, setLoading] = React.useState('init');
    const errorMessage = {
        'emailInvalid': '올바른 형식의 이메일을 적어주세요.',
        'sendError':  '서버 에러로 이메일 전송에 실패 했습니다.다시 시도해주세요.'
    };
    const inputRef = React.createRef();
    const requestSubscribe = (payload) =>  {
        const subscribeUrl = 'https://e6ntpta4yd.execute-api.ap-northeast-2.amazonaws.com/dev/subscribe/';
        fetch(subscribeUrl, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(payload)
        }).then((res) => {
            if (res.ok) {
                setLoading('finish');
            } else {
                setError('sendError');
                setLoading('init');
            }
        }).catch((e) => {
            setError('sendError');
            setLoading('init');
        });
    };
    const handleClick = (e) => {
        e.preventDefault();
        const email = inputRef.current.value;

        const valid = /[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/.test(email);
        if (email === '' || !valid) {
            setError('emailInvalid');
        } else {
            setError(null)
            setLoading('loading');
            requestSubscribe(
                {
                    ...getPayload(inputRef.current.value),
                    position: type,
                }
            );
        }
    };

    let emailClassName = '';

    if (error !== null && 'error') {
        emailClassName = 'error';
    } else if (loading === 'loading') {
        emailClassName = 'success';
    }

    return (
        <React.Fragment>
            {loading === 'finish' && <Finish />}
            {loading !== 'finish' && (
                <form id='form'>
                    <div className="email">
                        <label for="email">
                            <span>이메일</span>
                            <span className="required">*</span>
                        </label>

                        <input type="text" className={emailClassName} id="email" name='email' placeholder="이메일 주소" ref={inputRef} />

                        {error !== null && errorMessage[error] !== undefined && (
                            <ErrorNote text={errorMessage[error]} />
                        )}

                        <button type="submit" id="submit" onClick={handleClick}>
                            {loading === 'init' && (
                                <span>
                                    출시 소식 받아보기
                                </span>
                            )}

                            {loading === 'loading' && (
                                <div className="loader">
                                    전송중
                                </div>
                            )}
                        </button>
                    </div>
                </form>
            )}
        </React.Fragment>
    );
};

const insertAfter = (id, targetElement) => {
    const appendElem = document.createElement('div');
    appendElem.setAttribute('id', id);
    targetElement.parentElement.insertBefore(appendElem, targetElement.nextSibling);

    ReactDOM.render(<Form type={id} />, appendElem);
};

window.onload = () => {
    insertAfter('bottom', document.querySelector('div[data-block-id="5c4b65ad-a3ab-4752-9e3d-4a555eaa3185"]'));
    insertAfter('top', document.querySelector('div[data-block-id="416b3d3c-2526-48d5-b6d6-af166dd38424"]'));
};