);
}
return ;
}
// Shared across every LINE button/auto-login check on the page — liff.init() must
// resolve exactly once before ANY liff.* call (isLoggedIn/login/getIDToken all throw
// otherwise), so every caller awaits this same promise instead of racing their own init.
let _liffInitPromise = null;
function ensureLiffInit() {
if (!window.LINE_LIFF_ID || !window.liff) return Promise.reject(new Error('LIFF SDK not available'));
if (!_liffInitPromise) _liffInitPromise = window.liff.init({ liffId: window.LINE_LIFF_ID });
return _liffInitPromise;
}
function CustLineButton({ onIdToken, disabled, variant, label, onError }) {
async function handleClick() {
if (disabled) return;
try {
await ensureLiffInit();
if (!window.liff.isLoggedIn()) {
window.liff.login();
return;
}
const idToken = window.liff.getIDToken();
if (idToken) onIdToken(idToken);
} catch (e) {
console.error('SVLM: LINE login failed', e);
if (onError) onError(e);
}
}
if (variant === 'bar') {
return } label={label} disabled={disabled} onClick={handleClick} />;
}
return (
L
);
}
let appleSdkPromise;
function loadAppleSdk() {
if (window.AppleID) return Promise.resolve();
if (!appleSdkPromise) appleSdkPromise = new Promise((resolve, reject) => {
const script = document.createElement('script');
script.src = 'https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js';
script.onload = resolve;
script.onerror = () => { script.remove(); appleSdkPromise = null; reject(new Error('Apple SDK unavailable')); };
document.head.appendChild(script);
});
return appleSdkPromise;
}
function CustAppleButton({ label, disabled, onLogin, onError }) {
const [ready, setReady] = useState(null);
const [attempt, setAttempt] = useState(0);
useEffect(() => {
let active = true;
setReady(null);
SvlmApi.appleConfig().then(async config => {
if (!config.enabled || !active) return;
await loadAppleSdk();
const challenge = await SvlmApi.appleChallenge();
if (active) setReady({ config, challenge, expires: Date.now() + 290000 });
}).catch(() => { /* Remain disabled until configured and available. */ });
return () => { active = false; };
}, [attempt]);
async function signIn() {
if (!ready || disabled) return;
if (Date.now() >= ready.expires) {
setAttempt(v => v + 1);
onError();
return;
}
const { config, challenge } = ready;
setReady(null);
try {
// Initialize and open directly in the click handler to preserve popup activation.
window.AppleID.auth.init({ clientId: config.clientId, redirectURI: config.redirectURI,
scope: 'name email', state: challenge.challengeId, nonce: challenge.nonceHash, usePopup: true });
const response = await window.AppleID.auth.signIn();
if (response.authorization?.state !== challenge.challengeId) throw new Error('Invalid state');
const name = [response.user?.name?.firstName, response.user?.name?.lastName]
.filter(v => typeof v === 'string').join(' ').trim().slice(0, 100) || undefined;
await SvlmApi.customerLoginApple(response.authorization.id_token, challenge.challengeId, name);
onLogin();
} catch (err) {
if (err?.error !== 'popup_closed_by_user' && err?.error !== 'user_cancelled_authorize') onError();
setAttempt(v => v + 1);
}
}
return } label={label} disabled={disabled || !ready} onClick={signIn} />;
}
let facebookSdkPromise;
function loadFacebookSdk(appId) {
if (window.FB) return Promise.resolve(window.FB);
if (!facebookSdkPromise) facebookSdkPromise = new Promise((resolve, reject) => {
window.fbAsyncInit = () => {
window.FB.init({ appId, cookie: true, xfbml: false, version: 'v19.0' });
resolve(window.FB);
};
const script = document.createElement('script');
script.src = 'https://connect.facebook.net/en_US/sdk.js';
script.onerror = () => { script.remove(); facebookSdkPromise = null; reject(new Error('Facebook SDK unavailable')); };
document.head.appendChild(script);
});
return facebookSdkPromise;
}
// Facebook has no ID-token concept — FB.login() hands back a short-lived user
// access token, which the backend verifies live against Facebook's own APIs
// (see AuthService.loginWithFacebook), not a signature we check here.
function CustFacebookButton({ label, disabled, onLogin, onError }) {
const [ready, setReady] = useState(false);
useEffect(() => {
let active = true;
SvlmApi.facebookConfig().then(async config => {
if (!config.enabled || !active) return;
await loadFacebookSdk(config.appId);
if (active) setReady(true);
}).catch(() => { /* Remain disabled until configured and available. */ });
return () => { active = false; };
}, []);
function signIn() {
if (!ready || disabled) return;
window.FB.login(response => {
const accessToken = response?.authResponse?.accessToken;
if (!accessToken) {
if (response?.status !== 'unknown') onError();
return;
}
onLogin(accessToken);
}, { scope: 'public_profile,email' });
}
return } label={label} disabled={disabled || !ready} onClick={signIn} />;
}
function CustLogin({ lang, onToggleLang, onLogin }) {
const t = CUST_DICT;
const [view, setView] = useState('menu'); // 'menu' | 'signin' | 'signup'
const [agreed, setAgreed] = useState(true);
const [showTermsModal, setShowTermsModal] = useState(true);
const [showPassword, setShowPassword] = useState(false);
const [remember, setRemember] = useState(true);
const [step, setStep] = useState('phone'); // signup OTP step: 'phone' | 'code'
const [phone, setPhone] = useState('');
const [code, setCode] = useState('');
const [password, setPassword] = useState('');
const [devHint, setDevHint] = useState('');
const [error, setError] = useState('');
const [busy, setBusy] = useState(false);
// LIFF login is a full-page redirect — on the bounce back, liff.init()
// resolves already logged in, so finish the login automatically instead
// of making the customer press the LINE button a second time.
useEffect(() => {
let cancelled = false;
ensureLiffInit().then(() => {
if (cancelled || !window.liff.isLoggedIn()) return;
const idToken = window.liff.getIDToken();
if (idToken) submitLine(idToken);
}).catch(e => {
if (cancelled) return;
console.error('SVLM: LIFF init failed', e);
setError(e && e.message ? `LIFF init: ${e.message}` : t.login_error[lang]);
});
return () => { cancelled = true; };
}, []);
async function submitPhone() {
if (!phone.trim() || busy) return;
setError('');
setBusy(true);
try {
const res = await SvlmApi.requestOtp(phone.trim());
setDevHint(res && res.devCode ? ('Dev code: ' + res.devCode) : '');
setStep('code');
} catch (err) {
setError(t.login_error[lang]);
} finally {
setBusy(false);
}
}
async function submitCode() {
if (!code.trim() || busy) return;
setError('');
setBusy(true);
try {
await SvlmApi.customerVerifyOtp(phone.trim(), code.trim());
onLogin();
} catch (err) {
setError(t.login_error[lang]);
} finally {
setBusy(false);
}
}
// "Mobile No. or email" on the sign-in card — the backend only accepts a
// phone for password login today, so this submits the field as-is; a real
// email typed here fails the same way it would against the API directly,
// rather than silently pretending email login works.
async function submitPassword() {
if (!phone.trim() || !password.trim() || busy) return;
setError('');
setBusy(true);
try {
await SvlmApi.customerLoginPassword(phone.trim(), password);
onLogin();
} catch (err) {
setError((err && err.message) || t.login_error[lang]);
} finally {
setBusy(false);
}
}
async function submitGoogle(idToken) {
if (!idToken || busy) return;
setError('');
setBusy(true);
try {
await SvlmApi.customerLoginGoogle(idToken);
onLogin();
} catch (err) {
setError(t.login_error[lang]);
} finally {
setBusy(false);
}
}
async function submitLine(idToken) {
if (!idToken || busy) return;
setError('');
setBusy(true);
try {
await SvlmApi.customerLoginLine(idToken);
onLogin();
} catch (err) {
setError((err && err.message) || t.login_error[lang]);
} finally {
setBusy(false);
}
}
async function submitFacebook(accessToken) {
if (!accessToken || busy) return;
setError('');
setBusy(true);
try {
await SvlmApi.customerLoginFacebook(accessToken);
onLogin();
} catch (err) {
setError(t.login_error[lang]);
} finally {
setBusy(false);
}
}
const TermsModal = () => (
!showTermsModal ? null : (
);
}
// view === 'signup' — reuses the same phone+OTP endpoints as the rest of the
// app; verifying a new number here logs the customer straight in, same as
// "Sign in" would for an existing one, matching the reference's single Next step.
return (
);
}
/* ---------------- Header banner (Ops-managed, up to 5, 1774x887) ---------------- */
function CustHeaderBanner({ banners }) {
const [index, setIndex] = useState(0);
useEffect(() => {
if (banners.length < 2) return;
const id = setInterval(() => setIndex(i => (i + 1) % banners.length), 4500);
return () => clearInterval(id);
}, [banners.length]);
if (!banners.length) return null;
const b = banners[index] || banners[0];
return (
// height:0 + paddingBottom:'50%' (the classic pre-aspect-ratio hack) instead of
// aspectRatio: '2/1' directly — this box's only in-flow content is position:absolute
// children, so as a flex item inside a column flex container it has no intrinsic
// content height for aspect-ratio to resolve against and collapses to 0px tall,
// silently hiding the banner even though the promotion data loads correctly.
