import { r as registerInstance, h, H as Host } from './index-25e5af33.js';
import { a as apiFetch } from './index-824c562b.js';
import { s as speak } from './index-c5a96d53.js';
import { s as state, V as VERIFYING, b as VERIFIED, a as CODE_EXPIRED, U as UNVERIFIED, r as resetUser } from './store-02394e82.js';
import { s as state$1 } from './mutations-2cf25d6d.js';
import { b as isRateLimited } from './util-dfbf863e.js';
import './add-query-args-0e2a8393.js';
import './remove-query-args-938c53ea.js';
import './index-18f5a1bc.js';
import './utils-f84b2118.js';
import './google-a86aa761.js';
import './currency-a0c9bff4.js';
import './store-b1758b00.js';
import './price-1ff6aa07.js';

const scAvatarCss = ":host{display:inline-block;--sc-avatar-size:3rem}.avatar{display:inline-flex;align-items:center;justify-content:center;position:relative;width:var(--sc-avatar-size);height:var(--sc-avatar-size);background-color:var(--sc-color-gray-400);font-family:var(--sc-font-sans);font-size:calc(var(--sc-avatar-size) * 0.5);font-weight:var(--sc-font-weight-normal);color:var(--sc-color-white);user-select:none;vertical-align:middle}.avatar--circle,.avatar--circle .avatar__image{border-radius:var(--sc-border-radius-circle)}.avatar--rounded,.avatar--rounded .avatar__image{border-radius:var(--sc-border-radius-medium)}.avatar--square{border-radius:0}.avatar__icon{display:flex;align-items:center;justify-content:center;position:absolute;top:0;left:0;width:100%;height:100%}.avatar__initials{line-height:1;text-transform:uppercase}.avatar__image{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;overflow:hidden}";
const ScAvatarStyle0 = scAvatarCss;

const ScAvatar = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.hasError = false;
        this.image = '';
        this.label = '';
        this.initials = '';
        this.loading = 'eager';
        this.shape = 'circle';
    }
    handleImageChange() {
        // Reset the error when a new image is provided
        this.hasError = false;
    }
    render() {
        return (h("div", { key: 'c3ae175c3e5fab4e091775817968b6056b7570c2', part: "base", class: {
                'avatar': true,
                'avatar--circle': this.shape === 'circle',
                'avatar--rounded': this.shape === 'rounded',
                'avatar--square': this.shape === 'square',
            }, role: "img", "aria-label": this.label }, this.initials ? (h("div", { part: "initials", class: "avatar__initials" }, this.initials)) : (h("div", { part: "icon", class: "avatar__icon", "aria-hidden": "true" }, h("slot", { name: "icon" }, h("sl-icon", { name: "person-fill", library: "system" })))), this.image && !this.hasError && h("img", { key: '68cf666d77b2eeff3f26c5da99bad503ece29c5a', part: "image", class: "avatar__image", src: this.image, loading: this.loading, alt: "", onError: () => (this.hasError = true) })));
    }
    static get watchers() { return {
        "image": ["handleImageChange"]
    }; }
};
ScAvatar.style = ScAvatarStyle0;

const scCustomerLoginCss = ":host{display:flex;flex-direction:column;gap:1em}.customer-login{box-sizing:border-box;font-family:var(--sc-input-font-family);font-weight:var(--sc-input-font-weight);letter-spacing:var(--sc-input-letter-spacing);background-color:var(--sc-input-background-color);border:solid 1px var(--sc-input-border-color, var(--sc-input-border));vertical-align:middle;box-shadow:var(--sc-input-box-shadow);transition:var(--sc-input-transition, var(--sc-transition-medium)) color, var(--sc-input-transition, var(--sc-transition-medium)) border, var(--sc-input-transition, var(--sc-transition-medium)) box-shadow;border-radius:var(--sc-input-border-radius-medium);font-size:var(--sc-font-size-small);animation:open 0.5s ease-in-out}.customer-login a{color:var(--sc-color-primary-500)}.customer-code{padding:var(--sc-input-spacing-medium)}.customer-code__sent-info{display:flex;align-items:center;gap:var(--sc-spacing-small);font-size:var(--sc-font-size-small);color:var(--sc-input-help-text-color);margin-bottom:var(--sc-spacing-x-small)}.customer-code__mail-icon{font-size:1em;flex-shrink:0}.customer-code__sent-email{font-weight:var(--sc-font-weight-semibold);color:var(--sc-input-label-color)}.customer-code__change-link{margin-left:auto;white-space:nowrap;text-decoration:none;cursor:pointer;font-size:var(--sc-font-size-small)}.customer-code__change-link:hover{text-decoration:underline}.customer-code__error{color:var(--sc-color-danger-500, red);font-size:var(--sc-font-size-x-small);margin:0}.customer-code__verifying{display:flex;align-items:center;gap:var(--sc-spacing-small);color:var(--sc-input-help-text-color);font-size:var(--sc-font-size-small);margin-bottom:var(--sc-spacing-small)}.customer-code__expired{color:var(--sc-color-danger-500, red);font-size:var(--sc-font-size-x-small);margin:0 0 var(--sc-spacing-small) 0}.customer-code__expired a{color:var(--sc-color-primary-500);text-decoration:none;cursor:pointer}.customer-code__expired a:hover{text-decoration:underline}.customer-code__footer{display:flex;justify-content:space-between;align-items:center;margin-top:var(--sc-spacing-small)}.customer-code__footer-left{display:flex;align-items:center}.customer-code__footer-right{display:flex;align-items:center}.customer-code__resend-timer{color:var(--sc-input-help-text-color);font-size:var(--sc-font-size-x-small)}.customer-code__resend-link{font-size:var(--sc-font-size-x-small);text-decoration:none;cursor:pointer}.customer-code__resend-link:hover{text-decoration:underline}.customer-code__mode-link{display:flex;align-items:center;gap:var(--sc-spacing-xx-small);font-size:var(--sc-font-size-x-small);text-decoration:none;cursor:pointer}.customer-code__mode-link:hover{text-decoration:underline}.customer-password{padding:var(--sc-input-spacing-medium)}.customer-password__error{color:var(--sc-color-danger-500, red);font-size:var(--sc-font-size-x-small);margin:var(--sc-spacing-small) 0 0 0}";
const ScCustomerLoginStyle0 = scCustomerLoginCss;

const ScCustomerLogin = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        /** Interval timer reference for cleanup */
        this.cooldownInterval = null;
        /** Focus the active view's field after the next render (set when the mode switches). */
        this.focusAfterRender = false;
        this.mode = 'code';
        this.busy = false;
        this.codeResending = false;
        this.resendCooldown = 60;
        this.error = '';
        this.codeError = '';
        this.initialMode = 'code';
        this.password = '';
        this.codeUnavailable = false;
    }
    formatCooldown() {
        const minutes = Math.floor(this.resendCooldown / 60);
        const seconds = this.resendCooldown % 60;
        return `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
    }
    async verifyCode(code) {
        var _a, _b;
        // If not valid email and code, then return.
        if (!state.email || !code) {
            return;
        }
        try {
            this.error = '';
            state.verificationStatus = VERIFYING;
            this.busy = true;
            speak(wp.i18n.__('Verifying code...', 'surecart'), 'assertive');
            const user = (await apiFetch({
                method: 'POST',
                path: 'surecart/v1/verification_codes/verify',
                data: {
                    login: state.email,
                    code: code,
                },
            }));
            state.verificationStatus = VERIFIED;
            if (!(user === null || user === void 0 ? void 0 : user.verified)) {
                throw { message: wp.i18n.__('Verification code is not valid. Please try again.', 'surecart') };
            }
            // Update the nonce after login to prevent rest_cookie_invalid_nonce errors.
            // @ts-ignore - nonceMiddleware is set in fetch.ts but not in @wordpress/api-fetch types.
            if ((user === null || user === void 0 ? void 0 : user.nonce) && apiFetch.nonceMiddleware) {
                // @ts-ignore
                apiFetch.nonceMiddleware.nonce = user.nonce;
            }
            // Update userState and make the user as logged in user.
            state.loggedIn = true;
            state.name = (user === null || user === void 0 ? void 0 : user.name) || [(_a = user === null || user === void 0 ? void 0 : user.customer) === null || _a === void 0 ? void 0 : _a.first_name, (_b = user === null || user === void 0 ? void 0 : user.customer) === null || _b === void 0 ? void 0 : _b.last_name].filter(Boolean).join(' ') || '';
            state.avatarUrl = (user === null || user === void 0 ? void 0 : user.avatar_url) || '';
            speak(wp.i18n.__('Verification is successful. Please continue your purchase.', 'surecart'), 'assertive');
        }
        catch (e) {
            // If cooldown has elapsed, treat as expired code.
            if (this.resendCooldown <= 0) {
                state.verificationStatus = CODE_EXPIRED;
                this.error = '';
                speak(wp.i18n.__('Code expired. Please send a new code.', 'surecart'), 'assertive');
            }
            else if (isRateLimited(e)) {
                this.error = wp.i18n.__('Please wait a moment and try again.', 'surecart');
                state.verificationStatus = UNVERIFIED;
                speak(this.error, 'assertive');
            }
            else {
                if (e.code === 'not_found') {
                    this.error = wp.i18n.__('Incorrect code. Please try again.', 'surecart');
                }
                else {
                    this.error = (e === null || e === void 0 ? void 0 : e.message) || wp.i18n.__('Incorrect code. Please try again.', 'surecart');
                }
                state.verificationStatus = UNVERIFIED;
                speak(this.error, 'assertive');
            }
        }
        finally {
            this.busy = false;
        }
    }
    async resendCode() {
        try {
            this.error = '';
            this.codeResending = true;
            speak(wp.i18n.__('Sending code...', 'surecart'), 'assertive');
            await apiFetch({
                method: 'POST',
                path: 'surecart/v1/verification_codes',
                data: {
                    login: state.email,
                    checkout_mode: state$1.mode,
                },
            });
            speak(wp.i18n.__('Code sent', 'surecart'), 'assertive');
            state.verificationStatus = UNVERIFIED;
            this.startCooldown();
        }
        catch (e) {
            console.error(e);
            this.handleCodeSendError(e);
        }
        finally {
            this.codeResending = false;
        }
    }
    handleCodeSendError(error) {
        // 429: switch to password (different endpoint, no limit conflict).
        if (isRateLimited(error)) {
            this.mode = 'password';
            this.codeUnavailable = true;
            this.error = wp.i18n.__('Please sign in with your password to continue.', 'surecart');
            this.startCooldown();
            return;
        }
        ((error === null || error === void 0 ? void 0 : error.additional_errors) || []).forEach((e) => {
            if ((e === null || e === void 0 ? void 0 : e.code) === 'verification_code.email.blocked_duplicate') {
                this.error = (e === null || e === void 0 ? void 0 : e.message) || wp.i18n.__('A code was just sent to you, please wait a minute before resending.', 'surecart');
                this.startCooldown();
            }
        });
    }
    startCooldown() {
        clearInterval(this.cooldownInterval);
        this.resendCooldown = 60;
        this.cooldownInterval = setInterval(() => {
            this.resendCooldown--;
            if (this.resendCooldown <= 0) {
                clearInterval(this.cooldownInterval);
                this.cooldownInterval = null;
                speak(wp.i18n.__('You can resend the code now.', 'surecart'), 'assertive');
            }
        }, 1000);
    }
    componentWillLoad() {
        this.mode = this.initialMode;
        // initialMode='password' means the parent already 429'd on code-send.
        this.codeUnavailable = this.initialMode === 'password';
        this.startCooldown();
    }
    /** When the user switches views, focus that view's first field after it renders. */
    handleModeChange() {
        this.focusAfterRender = true;
    }
    componentDidRender() {
        var _a, _b, _c, _d;
        if (!this.focusAfterRender)
            return;
        this.focusAfterRender = false;
        // Wait for the freshly rendered child to be ready, then focus it.
        if (this.mode === 'password') {
            (_b = (_a = this.passwordInput) === null || _a === void 0 ? void 0 : _a.componentOnReady) === null || _b === void 0 ? void 0 : _b.call(_a).then(() => { var _a; return (_a = this.passwordInput) === null || _a === void 0 ? void 0 : _a.triggerFocus(); });
        }
        else {
            (_d = (_c = this.verificationCode) === null || _c === void 0 ? void 0 : _c.componentOnReady) === null || _d === void 0 ? void 0 : _d.call(_c).then(() => { var _a; return (_a = this.verificationCode) === null || _a === void 0 ? void 0 : _a.triggerFocus(); });
        }
    }
    disconnectedCallback() {
        clearInterval(this.cooldownInterval);
    }
    async loginByPassword(e) {
        e.preventDefault();
        try {
            this.error = '';
            this.busy = true;
            const { name, email, avatar_url, nonce } = (await apiFetch({
                method: 'POST',
                path: 'surecart/v1/login',
                data: {
                    login: state.email,
                    password: this.password,
                },
            }));
            // Update the nonce after login to prevent rest_cookie_invalid_nonce errors.
            // @ts-ignore - nonceMiddleware is set in fetch.ts but not in @wordpress/api-fetch types.
            if (nonce && apiFetch.nonceMiddleware) {
                // @ts-ignore
                apiFetch.nonceMiddleware.nonce = nonce;
            }
            state.loggedIn = true;
            state.verificationStatus = VERIFIED;
            state.name = name;
            state.email = email;
            state.avatarUrl = avatar_url || '';
        }
        catch (e) {
            this.error = isRateLimited(e) ? wp.i18n.__('Please wait a moment and try again.', 'surecart') : (e === null || e === void 0 ? void 0 : e.message) || wp.i18n.__('Login failed. Please try again.', 'surecart');
        }
        finally {
            this.busy = false;
        }
    }
    renderSentInfo() {
        // Don't claim a code was sent if we 429'd before it left.
        const headline = this.codeUnavailable ? wp.i18n.__('Signing in as', 'surecart') : wp.i18n.__('Code sent to', 'surecart');
        const iconName = this.codeUnavailable ? 'user' : 'mail';
        return (h("div", { class: "customer-code__sent-info" }, h("sc-icon", { name: iconName, class: "customer-code__mail-icon", "aria-hidden": "true" }), h("span", null, headline, " ", h("strong", { class: "customer-code__sent-email" }, state.email)), h("a", { href: "#", class: "customer-code__change-link", onClick: e => {
                e.preventDefault();
                resetUser();
            } }, wp.i18n.__('Change', 'surecart'))));
    }
    renderCodeFooter() {
        const isExpired = state.verificationStatus === CODE_EXPIRED;
        return (h("div", { class: "customer-code__footer" }, h("div", { class: "customer-code__footer-left" }, !isExpired && this.resendCooldown > 0 && (h("span", { class: "customer-code__resend-timer" }, wp.i18n.__('Resend code in', 'surecart'), " ", this.formatCooldown())), !isExpired && this.resendCooldown <= 0 && (h("a", { href: "#", class: "customer-code__resend-link", onClick: e => {
                e.preventDefault();
                this.resendCode();
            } }, this.codeResending ? wp.i18n.__('Sending...', 'surecart') : wp.i18n.__('Resend Code', 'surecart')))), h("div", { class: "customer-code__footer-right" }, h("a", { href: "#", class: "customer-code__mode-link", onClick: e => {
                e.preventDefault();
                this.error = '';
                this.mode = 'password';
            } }, h("sc-icon", { name: "lock", "aria-hidden": "true" }), wp.i18n.__('Use Password', 'surecart')))));
    }
    renderPasswordView() {
        return (h("div", { class: "customer-password" }, this.renderSentInfo(), h("sc-flex", { alignItems: "center" }, h("sc-input", { ref: el => (this.passwordInput = el), type: "password", style: { flex: '1' }, placeholder: wp.i18n.__('Password', 'surecart'), required: true, disabled: this.busy, onScInput: (e) => (this.password = e.target.value), onKeyDown: (e) => {
                if (e.key === 'Enter') {
                    this.loginByPassword(e);
                }
            } }), h("sc-button", { size: "medium", type: "primary", loading: this.busy, onClick: (e) => this.loginByPassword(e) }, h("sc-icon", { slot: "prefix", name: "lock" }), "\u00A0", wp.i18n.__('Login', 'surecart'))), !!(this.error || this.codeError) && h("p", { class: "customer-password__error", role: "alert", innerHTML: this.error || this.codeError }), !this.codeUnavailable && (h("div", { class: "customer-code__footer" }, h("div", { class: "customer-code__footer-left" }), h("div", { class: "customer-code__footer-right" }, h("a", { href: "#", class: "customer-code__mode-link", onClick: e => {
                e.preventDefault();
                this.error = '';
                this.mode = 'code';
            } }, h("sc-icon", { name: "key", "aria-hidden": "true" }), wp.i18n.__('Use Login Code', 'surecart')))))));
    }
    renderCodeView() {
        const isExpired = state.verificationStatus === CODE_EXPIRED;
        const isVerifying = state.verificationStatus === VERIFYING;
        return (h("div", { class: "customer-code" }, this.renderSentInfo(), h("div", null, h("sc-verification-code", { ref: el => (this.verificationCode = el), total: 6, loading: this.busy, onChange: ((value) => this.verifyCode(value)) })), isVerifying && (h("div", { class: "customer-code__verifying" }, h("sc-spinner", null), h("span", null, wp.i18n.__('Verifying...', 'surecart')))), isExpired && (h("p", { class: "customer-code__expired", role: "alert" }, wp.i18n.__('Code expired.', 'surecart'), ' ', h("a", { href: "#", onClick: e => {
                e.preventDefault();
                this.resendCode();
            } }, wp.i18n.__('Send new code', 'surecart')))), !isExpired && (!!this.error || !!this.codeError) && h("p", { class: "customer-code__error", role: "alert", innerHTML: this.error || this.codeError }), this.renderCodeFooter()));
    }
    render() {
        return (h(Host, { key: '063b56e7f7f72752fa9eb1d71385451aa677b237' }, h("div", { key: '6b011ed5411cdd3002c8ffa70585a67c5aca3694', class: "customer-login" }, this.mode === 'code' ? this.renderCodeView() : this.renderPasswordView())));
    }
    static get watchers() { return {
        "mode": ["handleModeChange"]
    }; }
};
ScCustomerLogin.style = ScCustomerLoginStyle0;

export { ScAvatar as sc_avatar, ScCustomerLogin as sc_customer_login };

//# sourceMappingURL=sc-avatar_2.entry.js.map