// QReward — External partner window flows (simulated out-of-app browser) // Used by: Linked accounts (QUALIA / partner OAuth) and LifeCard application. // Renders distinct browser chrome to signal the user has left QReward. const { useState: xS, useEffect: xE } = React; // One-time CSS if (typeof document !== 'undefined' && !document.getElementById('ext-flow-css')) { const s = document.createElement('style'); s.id = 'ext-flow-css'; s.textContent = ` .extov { position: absolute; inset: 0; z-index: 9999; display: flex; flex-direction: column; } .extov.desktop { position: fixed; background: rgba(10,15,30,0.55); backdrop-filter: blur(3px); align-items: center; justify-content: center; padding: 32px; animation: extFade 200ms ease; } .extov.mobile { animation: extUp 320ms cubic-bezier(0.2,0.85,0.25,1); } @keyframes extFade { from { opacity: 0; } to { opacity: 1; } } @keyframes extUp { from { transform: translateY(100%); } to { transform: translateY(0); } } @keyframes extWin { from { opacity: 0; transform: translateY(14px) scale(0.985); } to { opacity: 1; transform: translateY(0) scale(1); } } /* ---- browser window (desktop) ---- */ .extwin { width: 100%; max-width: 940px; height: min(86vh, 720px); background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 40px 90px rgba(0,0,0,0.45); display: flex; flex-direction: column; animation: extWin 260ms cubic-bezier(0.2,0.8,0.2,1); } [data-theme="dark"] .extwin { background: #16181d; } .extwin-chrome { background: #dee1e6; padding: 10px 14px 0; flex-shrink: 0; } [data-theme="dark"] .extwin-chrome { background: #2a2d33; } .extwin-tabsrow { display: flex; align-items: center; gap: 10px; } .extwin-lights { display: flex; gap: 8px; padding-right: 6px; } .extwin-lights span { width: 12px; height: 12px; border-radius: 50%; } .extwin-tab { background: #fff; border-radius: 9px 9px 0 0; padding: 9px 16px; font-size: 13px; font-weight: 500; color: #3c4043; display: flex; align-items: center; gap: 8px; max-width: 240px; box-shadow: 0 -1px 2px rgba(0,0,0,0.04); } [data-theme="dark"] .extwin-tab { background: #16181d; color: #e3e3e3; } .extwin-toolbar { display: flex; align-items: center; gap: 12px; padding: 9px 14px; background: #fff; border-bottom: 1px solid #e4e6ea; } [data-theme="dark"] .extwin-toolbar { background: #16181d; border-color: #2a2d33; } .extwin-navbtns { display: flex; gap: 4px; color: #5f6368; } .extwin-omnibox { flex: 1; height: 36px; border-radius: 999px; background: #f1f3f4; display: flex; align-items: center; gap: 8px; padding: 0 14px; font-size: 13px; color: #3c4043; } [data-theme="dark"] .extwin-omnibox { background: #292b30; color: #cdd0d4; } .extwin-body { flex: 1; overflow-y: auto; background: #fff; } [data-theme="dark"] .extwin-body { background: #1b1d22; } /* ---- browser (mobile safari) ---- */ .extsafari { flex: 1; display: flex; flex-direction: column; background: #f2f2f7; } [data-theme="dark"] .extsafari { background: #1c1c1e; } .extsafari-top { padding: 52px 14px 10px; background: #f9f9fb; border-bottom: 1px solid rgba(0,0,0,0.08); flex-shrink: 0; } [data-theme="dark"] .extsafari-top { background: #2c2c2e; border-color: rgba(255,255,255,0.08); } .extsafari-omnibox { height: 40px; border-radius: 11px; background: #e9e9ec; display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 14px; color: #3c3c43; position: relative; } [data-theme="dark"] .extsafari-omnibox { background: #1c1c1e; color: #dcdcdc; } .extsafari-close { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--brand-600); font-weight: 600; font-size: 14px; } .extsafari-reload { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: #8e8e93; } .extsafari-body { flex: 1; overflow-y: auto; } .extsafari-tabbar { height: 48px; background: #f9f9fb; border-top: 1px solid rgba(0,0,0,0.08); display: flex; align-items: center; justify-content: space-around; padding-bottom: 6px; flex-shrink: 0; color: var(--brand-600); } [data-theme="dark"] .extsafari-tabbar { background: #2c2c2e; border-color: rgba(255,255,255,0.08); } .extsafari-tabbar svg { color: var(--brand-600); } .extsafari-tabbar .dim { color: #c5c5c7; } /* ---- partner page content ---- */ .pp { min-height: 100%; background: #fff; color: #1a1a1a; } [data-theme="dark"] .pp { background: #1b1d22; color: #f0f0f2; } .pp-band { padding: 26px 28px; color: #fff; position: relative; overflow: hidden; } .pp-band-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.08) 1px, transparent 1px); background-size: 26px 26px; mask-image: radial-gradient(circle at 30% 20%, #000, transparent 75%); } .pp-logo { width: 50px; height: 50px; border-radius: 13px; background: rgba(255,255,255,0.16); backdrop-filter: blur(6px); display: grid; place-items: center; font-weight: 800; font-size: 24px; position: relative; margin-bottom: 14px; border: 1px solid rgba(255,255,255,0.25); } .pp-band h1 { font-size: 21px; font-weight: 700; letter-spacing: -0.01em; position: relative; } .pp-band p { font-size: 13px; opacity: 0.9; margin-top: 5px; position: relative; line-height: 1.5; } .pp-oauth { display: flex; align-items: center; gap: 9px; margin-top: 16px; padding: 10px 13px; background: rgba(255,255,255,0.13); border: 1px solid rgba(255,255,255,0.2); border-radius: 11px; font-size: 12px; position: relative; } .pp-oauth .av { width: 26px; height: 26px; border-radius: 7px; background: #fff; display: grid; place-items: center; font-family: Georgia, serif; font-style: italic; font-weight: 700; } .pp-form { padding: 24px 28px 32px; max-width: 460px; } .pp-field { margin-bottom: 16px; } .pp-label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 7px; color: #333; } [data-theme="dark"] .pp-label { color: #cdced2; } .pp-input { width: 100%; height: 46px; padding: 0 14px; border: 1.5px solid #d4d7dd; border-radius: 10px; font-size: 15px; outline: none; background: #fff; color: #1a1a1a; transition: border-color 140ms; } [data-theme="dark"] .pp-input { background: #25272d; border-color: #3a3d44; color: #f0f0f2; } .pp-input:focus { border-color: var(--pp-accent, #7c3aed); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pp-accent, #7c3aed) 18%, transparent); } .pp-input.err { border-color: #e23b3b; } .pp-affix { position: relative; } .pp-affix button { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: #8a8a8a; } .pp-err { font-size: 12px; color: #e23b3b; margin-top: 6px; display: flex; align-items: center; gap: 4px; } .pp-btn { width: 100%; height: 50px; border-radius: 11px; color: #fff; font-size: 16px; font-weight: 700; background: var(--pp-accent, #7c3aed); display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 6px; transition: filter 120ms; } .pp-btn:disabled { opacity: 0.45; } .pp-btn:not(:disabled):active { filter: brightness(0.94); } .pp-row { display: flex; gap: 12px; } .pp-row > * { flex: 1; } .pp-foot { display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 12px; color: #8a8a8a; padding: 8px 28px 26px; } .pp-link { color: var(--pp-accent, #7c3aed); font-weight: 600; } .pp-check { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.5; color: #444; cursor: pointer; } [data-theme="dark"] .pp-check { color: #c2c4c9; } .pp-cbox { width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid #c4c7cd; flex-shrink: 0; display: grid; place-items: center; } .pp-cbox.on { background: var(--pp-accent, #7c3aed); border-color: var(--pp-accent, #7c3aed); } .pp-select { width: 100%; height: 46px; padding: 0 12px; border: 1.5px solid #d4d7dd; border-radius: 10px; font-size: 15px; background: #fff; color: #1a1a1a; outline: none; } [data-theme="dark"] .pp-select { background: #25272d; border-color: #3a3d44; color: #f0f0f2; } /* verified / redirect states */ .pp-result { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 60px 32px; min-height: 100%; } .pp-badge { width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 22px; position: relative; } .pp-badge.ok { background: #e7f9ee; } [data-theme="dark"] .pp-badge.ok { background: rgba(22,163,74,0.16); } .pp-badge-ring { position: absolute; inset: 0; border-radius: 50%; border: 3px solid #16a34a; animation: ringPop 500ms cubic-bezier(0.2,0.8,0.2,1); } @keyframes ringPop { from { transform: scale(0.5); opacity: 0; } to { transform: scale(1); opacity: 1; } } .pp-tick { animation: tickPop 460ms cubic-bezier(0.2,0.8,0.2,1) 120ms both; } @keyframes tickPop { from { transform: scale(0); } to { transform: scale(1); } } .pp-spin { width: 22px; height: 22px; border: 2.5px solid rgba(0,0,0,0.12); border-top-color: var(--pp-accent, #7c3aed); border-radius: 50%; animation: spin 700ms linear infinite; } .pp-securenote { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #8a8a8a; justify-content: center; padding: 0 28px 10px; } `; document.head.appendChild(s); } // Browser chrome wrapper const ExtBrowser = ({ variant = 'mobile', url, onClose, children }) => { if (variant === 'desktop') { return (
{ if (e.target === e.currentTarget) onClose(); }}>
{url.split('/')[0]}
https://{url}
{children}
); } return (
{url.split('/')[0]}
{children}
); }; // ===== Partner OAuth link flow (QUALIA / Rakuten / any source) ===== const PartnerLinkFlow = ({ lang, variant, partner, onComplete, onClose }) => { const accent = partner.color || '#7c3aed'; const [stage, setStage] = xS('login'); // login | verifying | done const [mid, setMid] = xS(''); const [pw, setPw] = xS(''); const [showPw, setShowPw] = xS(false); const [err, setErr] = xS(''); const submit = () => { if (!mid.trim() || !pw.trim()) { setErr(lang === 'jp' ? '会員IDとパスワードを入力してください' : 'Enter your Member ID and password'); return; } if (pw.toLowerCase() === 'wrong') { setErr(lang === 'jp' ? '会員IDまたはパスワードが正しくありません' : 'Incorrect Member ID or password'); return; } setErr(''); setStage('verifying'); setTimeout(() => setStage('done'), 1700); }; xE(() => { if (stage === 'done') { const t = setTimeout(onComplete, 1900); return () => clearTimeout(t); } }, [stage]); const url = partner.domain || 'id.qualia.co.jp/oauth/authorize'; return (
{stage === 'login' && <>
{partner.letter}

{lang === 'jp' ? `${partner.name} にサインイン` : `Sign in to ${partner.name}`}

{lang === 'jp' ? 'QReward との連携を承認するため、会員情報でサインインしてください。' : 'Sign in with your member credentials to authorize linking with QReward.'}

r
{lang === 'jp' ? 'QReward がアカウント連携をリクエストしています' : 'QReward is requesting to link your account'}
{ setMid(e.target.value); setErr(''); }} placeholder={lang === 'jp' ? '会員IDを入力' : 'e.g. QL-4821093'} autoFocus />
{ setPw(e.target.value); setErr(''); }} placeholder="••••••••" />
{err &&
{err}
}
{lang === 'jp' ? 'パスワードをお忘れですか？' : 'Forgot password?'}
{lang === 'jp' ? `${partner.name} の安全なページです · QReward はパスワードを保存しません` : `Secured by ${partner.name} · QReward never sees your password`}
} {stage === 'verifying' && (
{lang === 'jp' ? '認証しています…' : 'Verifying your credentials…'}
{partner.name} {lang === 'jp' ? '会員IDを確認中' : 'is confirming your Member ID'}
)} {stage === 'done' && (
{lang === 'jp' ? '認証されました' : 'Verified'}
{lang === 'jp' ? `会員ID ${mid || 'QL-4821093'} を確認` : `Member ID ${mid || 'QL-4821093'} confirmed`}
{lang === 'jp' ? 'QReward に戻っています…' : 'Redirecting back to QReward…'}
)}
); }; // ===== LifeCard application flow ===== const LifeCardApplyFlow = ({ lang, variant, onComplete, onClose }) => { const accent = '#0284c7'; const [stage, setStage] = xS('form'); // form | submitting | done const [f, setF] = xS({ name: '', kana: '', dob: '', email: '', income: '', employ: '' }); const [consent, setConsent] = xS(false); const set = (k, v) => setF(p => ({ ...p, [k]: v })); const valid = f.name && f.email.includes('@') && f.dob && f.income && f.employ && consent; const submit = () => { setStage('submitting'); setTimeout(() => setStage('done'), 1900); }; xE(() => { if (stage === 'done') { const t = setTimeout(onComplete, 2100); return () => clearTimeout(t); } }, [stage]); return (
{stage === 'form' && <>
L

{lang === 'jp' ? 'LifeCard クレジットカード申請' : 'LifeCard Credit Card Application'}

{lang === 'jp' ? 'QReward 経由でお申し込みいただけます。以下の情報をご入力ください。' : 'Referred by QReward. Please complete the secure application below.'}

set('name', e.target.value)} placeholder={lang === 'jp' ? '田中 ギリ' : 'Giri Tanaka'} />
set('kana', e.target.value)} placeholder={lang === 'jp' ? 'タナカ ギリ' : 'タナカ ギリ'} />
set('dob', e.target.value)} />
set('email', e.target.value)} placeholder="you@example.com" />
{lang === 'jp' ? 'LifeCard の安全なページです' : 'Secured by LifeCard · TLS encrypted'}
} {stage === 'submitting' && (
{lang === 'jp' ? '申請を送信しています…' : 'Submitting your application…'}
{lang === 'jp' ? 'LifeCard が受付処理中です' : 'LifeCard is processing your request'}
)} {stage === 'done' && (
{lang === 'jp' ? '申請を受け付けました' : 'Application received'}
{lang === 'jp' ? '審査結果は QReward に反映されます。' : 'Your result will appear in QReward once LifeCard completes its review.'}
{lang === 'jp' ? 'QReward に戻っています…' : 'Redirecting back to QReward…'}
)}
); }; // small color shade helper function shade(hex, amt) { const h = hex.replace('#', ''); const n = parseInt(h.length === 3 ? h.split('').map(c => c + c).join('') : h, 16); let r = (n >> 16) + amt, g = ((n >> 8) & 255) + amt, b = (n & 255) + amt; r = Math.max(0, Math.min(255, r)); g = Math.max(0, Math.min(255, g)); b = Math.max(0, Math.min(255, b)); return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1); } Object.assign(window, { ExtBrowser, PartnerLinkFlow, LifeCardApplyFlow });