@salla.sa/twilight-components 2.14.521 → 2.14.522

package/dist/collection/components/salla-user-settings/salla-user-settings.js

@@ -3,26 +3,92 @@
  */
 import { Host, h } from "@stencil/core";
 import Bullhorn from "../../assets/svg/bullhorn.svg";
-import UserOff from "../../assets/svg/user-off.svg";
 import UserCancel from "../../assets/svg/user-cancel.svg";
 export class SallaUserSettings {
     constructor() {
-        // Texts
-        this.deactivateAccount = salla.lang.get('pages.profile.deactivate_account');
-        this.promotionalMsgs = salla.lang.get('pages.profile.promotional_messages');
-        this.hideMyName = salla.lang.get('pages.profile.hide_my_name');
-        this.hideMyNameDesc = salla.lang.get('pages.profile.hide_my_name_desc');
-        this.deactivateDesc = salla.lang.get('pages.profile.deactivate_account_description');
-        this.promotionalMsgsDesc = salla.lang.get('pages.profile.promotional_messages_description');
-        this.sorryForLeavingText = salla.lang.get('pages.profile.warning_for_deactivate');
-        this.warningText = salla.lang.get('pages.profile.sorry_for_leaving');
-        this.keepAccount = salla.lang.get('pages.profile.keep_account');
-        this.buttonLoading = false;
+        this.otpInputs = [];
+        this.deletePendingDays = null;
+        this.currentStep = 'confirm';
+        this.isDeletePending = false;
+        this.otpType = 'email';
+        this.otpHasError = false;
+        this.otpErrorMessage = '';
+        this.isSubmitting = false;
+        this.isVerifyingOtp = false;
+        this.isSwitchingChannel = false;
+        this.resendAfter = 30;
+        this.showResendLink = false;
         this.canHideName = salla.config.get('store.settings.rating.can_customer_hide_name');
+        /**
+         * Bilingual defaults for delete-account keys.
+         * Registered via `salla.lang.addBulk` only when missing, so store/central
+         * translations always take precedence.
+         */
+        this.translationDefaults = {
+            'pages.profile.delete_account': { ar: 'حذف الحساب', en: 'Delete account' },
+            'pages.profile.delete_account_description': {
+                ar: 'سيُحذف حسابك وبياناتك من المتجر نهائيًا، بما في ذلك سجل طلباتك.',
+                en: 'Your account and data will be permanently deleted from the store, including your order history.',
+            },
+            'pages.profile.delete_account_confirm_title': {
+                ar: 'هل تريد حذف حسابك؟',
+                en: 'Do you want to delete your account?',
+            },
+            'pages.profile.delete_account_warning': {
+                ar: 'بعد الحذف، ستفقد الوصول إلى بياناتك، بما في ذلك سجل الطلبات، وقائمة الأمنيات، وأي نقاط ولاء أو رصيد متاح في المحفظة.',
+                en: 'After deletion, you will lose access to your data, including order history, wishlist, and any loyalty points or wallet balance.',
+            },
+            'pages.profile.cancel': { ar: 'إلغاء', en: 'Cancel' },
+            'pages.profile.delete_account_otp_title': {
+                ar: 'تأكيد حذف الحساب',
+                en: 'Confirm account deletion',
+            },
+            'pages.profile.delete_account_otp_instruction': {
+                ar: 'للمتابعة، أدخل رمز التحقٌّق المرسل إلى:',
+                en: 'To continue, enter the verification code sent to:',
+            },
+            'pages.profile.delete_account_confirm_otp': { ar: 'تأكيد الحذف', en: 'Confirm deletion' },
+            'pages.profile.delete_account_otp_required': {
+                ar: 'يرجى إدخال رمز التحقٌّق',
+                en: 'Please enter the verification code',
+            },
+            'pages.profile.delete_account_send_via_phone': {
+                ar: 'إرسال عبر الهاتف',
+                en: 'Send via phone',
+            },
+            'pages.profile.delete_account_send_via_email': {
+                ar: 'إرسال عبر البريد الإلكتروني',
+                en: 'Send via email',
+            },
+            'pages.profile.delete_account_success_title': {
+                ar: 'أُرسل طلب حذف الحساب',
+                en: 'Account deletion request submitted',
+            },
+            'pages.profile.delete_account_success_message': {
+                ar: 'سيُحذف حسابك خلال 30 يومًا. يمكنك إلغاء الطلب بتسجيل الدخول مرة أخرى قبل اكتمال الحذف.',
+                en: 'Your account will be deleted within 30 days. You can cancel the request by signing in again before deletion is complete.',
+            },
+            'pages.profile.ok': { ar: 'موافق', en: 'OK' },
+            'pages.profile.cancel_deletion_request': {
+                ar: 'تراجع عن الحذف',
+                en: 'Withdraw deletion',
+            },
+            'pages.profile.delete_account_pending': {
+                ar: 'حسابك مجدول للحذف نهائيًا من المتجر خلال :days يومًا. يمكنك التراجع عن الحذف قبل انقضاء المدة.',
+                en: 'Your account will be deleted permanently from the store within :days days. You can withdraw the deletion before the deadline.',
+            },
+            'pages.profile.delete_request_cancelled': {
+                ar: 'تم إلغاء طلب الحذف',
+                en: 'Deletion request cancelled',
+            },
+        };
+        this.registerTranslationDefaults();
+        this.loadTranslations();
         salla.onReady(() => {
             this.isHiddenName = salla.config.get('user.is_hidden_name');
             this.isNotifiable = salla.config.get('user.is_notifiable');
             this.canHideName = salla.config.get('store.settings.rating.can_customer_hide_name');
+            this.fetchDeleteRequestStatus();
             if (!this.isNotifiable || !this.isHiddenName) {
                 salla.event.on('profile::info.fetched', res => {
                     this.isHiddenName = res.data.is_hidden_name;
@@ -31,32 +97,409 @@ export class SallaUserSettings {
             }
         });
         salla.lang.onLoaded(() => {
-            this.deactivateAccount = salla.lang.get('pages.profile.deactivate_account');
-            this.promotionalMsgs = salla.lang.get('pages.profile.promotional_messages');
-            this.hideMyName = salla.lang.get('pages.profile.hide_my_name');
-            this.hideMyNameDesc = salla.lang.get('pages.profile.hide_my_name_desc');
-            this.deactivateDesc = salla.lang.get('pages.profile.deactivate_account_description');
-            this.promotionalMsgsDesc = salla.lang.get('pages.profile.promotional_messages_description');
-            this.warningText = salla.lang.get('pages.profile.warning_for_deactivate');
-            this.sorryForLeavingText = salla.lang.get('pages.profile.sorry_for_leaving');
-            this.keepAccount = salla.lang.get('pages.profile.keep_account');
+            this.registerTranslationDefaults();
+            this.loadTranslations();
         });
     }
+    getDaysUntilExecution(executionAt) {
+        const executionMs = executionAt > 1e12 ? executionAt : executionAt * 1000;
+        return Math.max(0, Math.ceil((executionMs - Date.now()) / 86400000));
+    }
+    applyPendingMessage() {
+        const template = salla.lang.get('pages.profile.delete_account_pending');
+        this.deleteAccountPending =
+            this.deletePendingDays != null
+                ? template.replace(/:days/g, String(salla.helpers.number(this.deletePendingDays)))
+                : template;
+    }
+    async fetchDeleteRequestStatus() {
+        try {
+            const response = await salla.profile.getDeleteRequest();
+            const request = response?.data ?? null;
+            const dataRequest = request?.data_request || request;
+            const status = dataRequest?.status;
+            this.isDeletePending = status === 'pending';
+            const executionAt = dataRequest?.execution_at;
+            this.deletePendingDays =
+                executionAt != null && !Number.isNaN(Number(executionAt))
+                    ? this.getDaysUntilExecution(Number(executionAt))
+                    : null;
+            this.applyPendingMessage();
+        }
+        catch {
+            // Preserve current pending state. After OTP success we set isDeletePending
+            // optimistically; a transient GET failure must not flip the UI back to
+            // "Delete account" for a request that is already queued.
+        }
+    }
+    /**
+     * Register bilingual (ar/en) defaults without overriding existing translations.
+     */
+    registerTranslationDefaults() {
+        if (!salla?.lang?.addBulk) {
+            return;
+        }
+        const missing = Object.entries(this.translationDefaults).reduce((acc, [key, value]) => {
+            if (salla.lang.get(key) === key) {
+                acc[key] = value;
+            }
+            return acc;
+        }, {});
+        if (Object.keys(missing).length) {
+            salla.lang.addBulk(missing);
+        }
+    }
+    loadTranslations() {
+        this.deleteAccount = salla.lang.get('pages.profile.delete_account');
+        this.deleteAccountDesc = salla.lang.get('pages.profile.delete_account_description');
+        this.deleteConfirmTitle = salla.lang.get('pages.profile.delete_account_confirm_title');
+        this.deleteAccountWarning = salla.lang.get('pages.profile.delete_account_warning');
+        this.cancelLabel = salla.lang.get('pages.profile.cancel');
+        this.deleteOtpTitle = salla.lang.get('pages.profile.delete_account_otp_title');
+        this.deleteOtpInstruction = salla.lang.get('pages.profile.delete_account_otp_instruction');
+        this.deleteConfirmOtp = salla.lang.get('pages.profile.delete_account_confirm_otp');
+        this.sendViaPhone = salla.lang.get('pages.profile.delete_account_send_via_phone');
+        this.sendViaEmail = salla.lang.get('pages.profile.delete_account_send_via_email');
+        this.deleteSuccessTitle = salla.lang.get('pages.profile.delete_account_success_title');
+        this.deleteSuccessMessage = salla.lang.get('pages.profile.delete_account_success_message');
+        this.okLabel = salla.lang.get('pages.profile.ok');
+        this.cancelDeletionRequest = salla.lang.get('pages.profile.cancel_deletion_request');
+        this.applyPendingMessage();
+        this.resendAfterLabel = salla.lang.get('blocks.header.resend_after');
+        this.resendLabel = salla.lang.get('blocks.comments.submit');
+        this.promotionalMsgs = salla.lang.get('pages.profile.promotional_messages');
+        this.hideMyName = salla.lang.get('pages.profile.hide_my_name');
+        this.hideMyNameDesc = salla.lang.get('pages.profile.hide_my_name_desc');
+        this.promotionalMsgsDesc = salla.lang.get('pages.profile.promotional_messages_description');
+    }
     toggleSetting(setting, event) {
         salla.profile.updateSettings({ name: setting, value: event.target.checked });
     }
     capitalizeText(str) {
+        if (!str)
+            return '';
         return str.charAt(0).toUpperCase() + str.slice(1);
     }
-    openDeactivateModal() {
-        this.confirmationModal.setTitle(this.capitalizeText(this.deactivateAccount));
+    getOtpTarget() {
+        if (this.otpType === 'email') {
+            return salla.config.get('user.email') || '';
+        }
+        return salla.config.get('user.mobile') || '';
+    }
+    updateModalForStep() {
+        if (!this.confirmationModal)
+            return;
+        switch (this.currentStep) {
+            case 'confirm':
+                this.confirmationModal.setTitle(this.capitalizeText(this.deleteConfirmTitle));
+                break;
+            case 'otp':
+                this.confirmationModal.setTitle(this.capitalizeText(this.deleteOtpTitle));
+                break;
+            case 'success':
+                this.confirmationModal.setTitle(this.capitalizeText(this.deleteSuccessTitle));
+                break;
+        }
+    }
+    openDeleteModal() {
+        this.currentStep = 'confirm';
+        this.otpType = 'email';
+        this.resetOtpInputs();
+        this.clearResendTimer();
+        this.updateModalForStep();
         this.confirmationModal.open();
     }
-    async deleteAccount() {
-        await salla.profile.delete().finally(() => this.confirmationModal.close());
+    closeDeleteModal() {
+        this.clearResendTimer();
+        this.confirmationModal?.close();
+    }
+    goBackFromOtp() {
+        this.clearResendTimer();
+        this.resetOtpInputs();
+        this.resetOtpError();
+        this.currentStep = 'confirm';
+        this.updateModalForStep();
+    }
+    async handleModalVisibilityChanged(event) {
+        if (event.detail)
+            return;
+        this.clearResendTimer();
+        const closedAfterSuccess = this.currentStep === 'success';
+        if (closedAfterSuccess) {
+            this.isDeletePending = true;
+        }
+        this.currentStep = 'confirm';
+        this.resetOtpInputs();
+        if (closedAfterSuccess) {
+            await this.fetchDeleteRequestStatus();
+        }
+    }
+    formatResendTimer(seconds) {
+        const padded = seconds >= 10 ? `${seconds}` : `0${seconds}`;
+        return `00 : ${padded}`;
+    }
+    updateResendTimerDisplay() {
+        if (this.timerEl) {
+            this.timerEl.innerHTML = this.formatResendTimer(this.resendAfter);
+        }
+    }
+    isDeleteRequestInFlight() {
+        return this.isSubmitting || this.isSwitchingChannel || this.isVerifyingOtp;
+    }
+    async initiateDeleteRequest(source = 'confirm') {
+        // Ignore overlapping clicks/auto-retries so loading flags stay paired with one request.
+        if (this.isDeleteRequestInFlight()) {
+            return;
+        }
+        if (source === 'switch' || source === 'resend') {
+            this.isSwitchingChannel = true;
+        }
+        else {
+            this.isSubmitting = true;
+        }
+        try {
+            await salla.profile.initiateDeleteRequest(this.otpType);
+            this.currentStep = 'otp';
+            this.updateModalForStep();
+            this.resetOtpInputs();
+            this.startResendTimer();
+            // salla-verify ignores profile::verification while this delete modal is open
+            // (and when payload.request_type === 'delete_account').
+            setTimeout(() => this.otpInputs[0]?.focus(), 100);
+        }
+        catch (error) {
+            salla.notify?.error?.(error.response?.data?.error?.message || salla.lang.get('common.errors.error_occurred'));
+        }
+        finally {
+            if (source === 'switch' || source === 'resend') {
+                this.isSwitchingChannel = false;
+            }
+            else {
+                this.isSubmitting = false;
+            }
+        }
+    }
+    async switchOtpChannel() {
+        if (this.isDeleteRequestInFlight()) {
+            return;
+        }
+        this.otpType = this.otpType === 'email' ? 'mobile' : 'email';
+        await this.initiateDeleteRequest('switch');
+    }
+    async resendOtp() {
+        if (!this.showResendLink || this.isDeleteRequestInFlight())
+            return;
+        await this.initiateDeleteRequest('resend');
+    }
+    collectOtpCode() {
+        const code = salla.helpers
+            .number(this.otpInputs.map(input => input?.value || '').join(''), true)
+            .replace(/[^0-9]/g, '');
+        if (this.hiddenCodeInput) {
+            this.hiddenCodeInput.value = code;
+        }
+        return code;
+    }
+    resetOtpError() {
+        this.otpHasError = false;
+        this.otpErrorMessage = '';
+    }
+    setOtpError(message) {
+        this.otpHasError = true;
+        this.otpErrorMessage = message;
+    }
+    async verifyDeleteOtp() {
+        // Auto-fill and the confirm button can both fire — only one verify at a time.
+        if (this.isVerifyingOtp || this.isSwitchingChannel) {
+            return;
+        }
+        const code = this.collectOtpCode();
+        if (code.length < 4) {
+            this.setOtpError(salla.lang.get('pages.profile.delete_account_otp_required'));
+            this.otpInputs[code.length]?.focus();
+            return;
+        }
+        this.resetOtpError();
+        this.isVerifyingOtp = true;
+        try {
+            const response = await salla.profile.verifyDeleteRequest({ type: this.otpType, code });
+            this.deleteSuccessMessage =
+                response?.data?.message || salla.lang.get('pages.profile.delete_account_success_message');
+            this.clearResendTimer();
+            this.resetOtpInputs();
+            this.otpInputs = [];
+            this.currentStep = 'success';
+            this.updateModalForStep();
+        }
+        catch (error) {
+            this.setOtpError(error.response?.data?.error?.message || salla.lang.get('common.errors.error_occurred'));
+            this.resetOtpInputs();
+        }
+        finally {
+            this.isVerifyingOtp = false;
+        }
+    }
+    async confirmSuccess() {
+        this.isDeletePending = true;
+        this.closeDeleteModal();
+        this.currentStep = 'confirm';
+        await this.fetchDeleteRequestStatus();
+    }
+    async cancelDeleteRequest() {
+        if (this.isSubmitting) {
+            return;
+        }
+        this.isSubmitting = true;
+        try {
+            const response = await salla.profile.cancelDeleteRequest();
+            const message = response.message || salla.lang.get('pages.profile.delete_request_cancelled');
+            this.isDeletePending = false;
+            salla.notify?.success?.(message);
+        }
+        catch (error) {
+            salla.notify?.error?.(error.response?.data?.error?.message || salla.lang.get('common.errors.error_occurred'));
+        }
+        finally {
+            this.isSubmitting = false;
+        }
+    }
+    resetOtpInputs() {
+        this.otpInputs.forEach(input => {
+            if (input)
+                input.value = '';
+        });
+        if (this.hiddenCodeInput) {
+            this.hiddenCodeInput.value = '';
+        }
+    }
+    modifyNextOtpInput(el, data) {
+        el.value = data[0];
+        data = data.substring(1);
+        if (el.nextElementSibling && data.length) {
+            this.modifyNextOtpInput(el.nextElementSibling, data);
+        }
+        else if (!el.nextElementSibling && data.length === 0) {
+            el.focus();
+        }
+        else if (el.nextElementSibling && data.length === 0) {
+            el.nextElementSibling.focus();
+        }
+    }
+    splitOtpNumber(e) {
+        const data = salla.helpers.number(e.data || e.target.value || '', true).replace(/[^0-9]/g, '');
+        if (!data || data.length === 1)
+            return;
+        this.modifyNextOtpInput(e.target, data);
+    }
+    allOtpInputsFilled() {
+        return this.otpInputs.every(input => input?.value);
+    }
+    handleOtpInput(ev) {
+        this.resetOtpError();
+        ev.target.value = salla.helpers.number(ev.target.value || '', true);
+        salla.helpers.inputDigitsOnly(ev.target);
+        if (this.allOtpInputsFilled()) {
+            setTimeout(() => this.verifyDeleteOtp(), 100);
+        }
+    }
+    handleOtpKeyUp(ev) {
+        this.resetOtpError();
+        if (['Alt', 'Shift', 'Control', 'AltGraph', 'Ctrl'].includes(ev.key))
+            return;
+        const key = ev.keyCode || ev.charCode;
+        if (ev.target.value) {
+            ev.target.nextElementSibling?.focus();
+            ev.target.nextElementSibling?.select();
+        }
+        else if ([8, 46].includes(key)) {
+            ev.target.previousElementSibling?.focus();
+            ev.target.previousElementSibling?.select();
+        }
+        if (ev.target.value.length > 1) {
+            this.splitOtpNumber(ev);
+        }
+    }
+    handleOtpPaste(ev) {
+        this.resetOtpError();
+        const clipboardText = salla.helpers.number(ev.clipboardData.getData('text') || '', true);
+        const text = clipboardText.replace(/[^0-9]/g, '').substring(0, this.otpInputs.length);
+        this.otpInputs.forEach(input => (input.value = ''));
+        if (this.otpInputs[0]) {
+            this.modifyNextOtpInput(this.otpInputs[0], text);
+        }
+    }
+    handleOtpFocus(ev) {
+        if (ev.target === this.otpInputs[0])
+            return;
+        if (this.otpInputs[0]?.value === '') {
+            this.otpInputs[0].focus();
+        }
+        if (ev.target.previousElementSibling?.value === '') {
+            ev.target.previousElementSibling.focus();
+        }
+    }
+    startResendTimer() {
+        this.clearResendTimer();
+        this.resendAfter = 30;
+        this.showResendLink = false;
+        this.updateResendTimerDisplay();
+        this.resendTimerId = setInterval(() => {
+            this.resendAfter--;
+            if (this.resendAfter <= 0) {
+                this.clearResendTimer();
+                this.showResendLink = true;
+                return;
+            }
+            this.updateResendTimerDisplay();
+        }, 1000);
+    }
+    clearResendTimer() {
+        if (this.resendTimerId) {
+            clearInterval(this.resendTimerId);
+            this.resendTimerId = null;
+        }
+        this.showResendLink = false;
+    }
+    renderUserDeleteIcon() {
+        return (h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "24", height: "24", color: "currentColor", fill: "none", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("path", { d: "M14.5 8C14.5 5.23858 12.2614 3 9.5 3C6.73858 3 4.5 5.23858 4.5 8C4.5 10.7614 6.73858 13 9.5 13C12.2614 13 14.5 10.7614 14.5 8Z" }), h("path", { d: "M15.5 21L18.5 18M18.5 18L21.5 15M18.5 18L15.5 15M18.5 18L21.5 21" }), h("path", { d: "M2.5 20C2.5 16.134 5.63401 13 9.5 13C10.775 13 11.9704 13.3409 13 13.9365" })));
+    }
+    renderConfirmStep() {
+        return (h("div", { class: "s-user-settings-delete-body" }, h("p", { class: "s-user-settings-delete-warning" }, this.deleteAccountWarning), h("div", { class: "s-user-settings-delete-actions s-user-settings-delete-actions--row" }, h("salla-button", { width: "wide", fill: "outline", color: "danger", onClick: () => this.closeDeleteModal() }, this.capitalizeText(this.cancelLabel)), h("salla-button", { width: "wide", color: "primary", loading: this.isSubmitting, onClick: () => this.initiateDeleteRequest() }, this.capitalizeText(this.deleteAccount)))));
+    }
+    renderOtpStep() {
+        return (h("div", { class: "s-user-settings-delete-body" }, h("p", { class: "s-user-settings-delete-otp-instruction" }, this.deleteOtpInstruction), h("p", { class: "s-user-settings-delete-otp-target" }, this.getOtpTarget()), h("input", { type: "hidden", name: "code", maxlength: "4", ref: el => (this.hiddenCodeInput = el) }), h("div", { class: {
+                's-user-settings-delete-otp-codes': true,
+                'has-error': this.otpHasError,
+            }, dir: "ltr" }, [1, 2, 3, 4].map(i => (h("input", { type: "text", autocomplete: "one-time-code", pattern: "[0-9]*", inputmode: "numeric", maxlength: "1", id: `delete-otp-${i}`, class: {
+                's-user-settings-delete-otp-input': true,
+                's-has-error': this.otpHasError,
+            }, onInput: e => this.handleOtpInput(e), onPaste: e => this.handleOtpPaste(e), onKeyUp: e => this.handleOtpKeyUp(e), onFocus: e => this.handleOtpFocus(e), ref: el => (this.otpInputs[i - 1] = el), required: true })))), this.otpHasError && this.otpErrorMessage ? (h("span", { class: "s-user-settings-delete-otp-error" }, this.otpErrorMessage)) : (''), h("div", { class: "s-user-settings-delete-actions s-user-settings-delete-actions--stack" }, h("salla-button", { width: "wide", color: "primary", disabled: this.isSwitchingChannel, onClick: () => this.verifyDeleteOtp() }, this.capitalizeText(this.deleteConfirmOtp)), h("salla-button", { width: "wide", fill: "outline", color: "primary", disabled: this.isVerifyingOtp, onClick: () => this.switchOtpChannel() }, this.capitalizeText(this.otpType === 'email' ? this.sendViaPhone : this.sendViaEmail))), h("p", { class: "s-user-settings-delete-otp-resend", style: { display: this.showResendLink ? 'none' : 'block' } }, this.resendAfterLabel, h("b", { class: "s-user-settings-delete-otp-timer mx-1 font-bold", ref: el => (this.timerEl = el) })), h("a", { href: "#", class: "s-user-settings-delete-otp-resend-link", style: { display: this.showResendLink ? 'block' : 'none' }, onClick: e => {
+                e.preventDefault();
+                this.resendOtp();
+            } }, this.resendLabel)));
+    }
+    renderSuccessStep() {
+        return (h("div", { class: "s-user-settings-delete-body" }, h("p", { class: "s-user-settings-delete-success-body" }, this.deleteSuccessMessage), h("div", { class: "s-user-settings-delete-actions s-user-settings-delete-actions--stack" }, h("salla-button", { class: "s-user-settings-delete-success-btn", width: "wide", color: "primary", onClick: () => this.confirmSuccess() }, this.capitalizeText(this.okLabel)))));
+    }
+    renderDeleteStep() {
+        switch (this.currentStep) {
+            case 'otp':
+                return this.renderOtpStep();
+            case 'success':
+                return this.renderSuccessStep();
+            case 'confirm':
+            default:
+                return this.renderConfirmStep();
+        }
+    }
+    renderDeleteSectionAction() {
+        if (this.isDeletePending) {
+            return (h("salla-button", { fill: "outline", color: "danger", shape: "btn", size: "medium", width: "normal", loading: this.isSubmitting, onClick: () => this.cancelDeleteRequest() }, this.capitalizeText(this.cancelDeletionRequest)));
+        }
+        return (h("salla-button", { fill: "outline", color: "danger", shape: "btn", size: "medium", width: "normal", onClick: () => this.openDeleteModal() }, this.capitalizeText(this.deleteAccount)));
     }
     render() {
-        return (h(Host, { key: 'ae94c12d52ff04f41f08d4a107a35aa2bd94ee0a', class: "s-user-settings-wrapper" }, this.canHideName && h("div", { key: '5b46a680b85fc72976c5c3d4f478b64b6c1d483c', class: "s-user-settings-section" }, h("salla-list-tile", { key: 'b41bb42ea03a2ed63c7664d0b98ee045110c31d0' }, h("div", { key: '29abb43471c5160b7817f153c8968593332e7826', slot: "icon", class: "s-user-settings-section-icon" }, h("span", { key: '3fd763ac2437570eed2073acb6b57cbdd0f1cdac', innerHTML: UserCancel })), h("div", { key: 'cbff9be1b97a31a11d1b10d88d2408070047fd3b', slot: "title", class: "s-user-settings-section-title" }, this.capitalizeText(this.hideMyName)), h("div", { key: '5fd0a91c56d9b8deeed04fb52a033fe5c1ad84ee', slot: "subtitle", class: "s-user-settings-section-subtitle" }, this.capitalizeText(this.hideMyNameDesc)), h("div", { key: '81ed76bd7b69ae7b16440f131cd78905d33da607', slot: 'action', class: "s-user-settings-section-action" }, h("label", { key: 'ae98c8814636b4e6008c421b291353ba2c4b91e7', class: "s-toggle" }, h("input", { key: '0c01d7706053667e80539a0a293ea21f4304e423', class: "s-toggle-input", checked: this.isHiddenName, onChange: (e) => this.toggleSetting('is_hidden_name', e), type: "checkbox" }), h("div", { key: '31d91e01bc2a28a6cd81af024b99bd42f1a04947', class: "s-toggle-switcher" }))))), h("div", { key: '7dd3c504babb5b79d07d08c5665cd5e080cb9a4d', class: "s-user-settings-section" }, h("salla-list-tile", { key: '9573ce56a617ac5c3e64f7cd868269f7f5f991cd' }, h("div", { key: 'deb424768ebb4b1086067816f4359e5b56da6044', slot: "icon", class: "s-user-settings-section-icon" }, h("span", { key: 'db74169678f85313ef3b6c9a5ff92f8afaf012c2', innerHTML: Bullhorn })), h("div", { key: '569cc0dd9462bb606dab18116c071acb49fd8f48', slot: "title", class: "s-user-settings-section-title" }, this.capitalizeText(this.promotionalMsgs)), h("div", { key: 'fbe15f41b42ee2f98585ae29ff985cbe3b6f0ef1', slot: "subtitle", class: "s-user-settings-section-subtitle" }, this.capitalizeText(this.promotionalMsgsDesc)), h("div", { key: 'c1a4fd8a0a340a73adb9efac7c7d75534b13ce3a', slot: 'action', class: "s-user-settings-section-action" }, h("label", { key: 'fade0f4d1a9214169bb087900561afd482674a75', class: "s-toggle" }, h("input", { key: '87cf0b041a89d79b23c2dd0d929c3b14dd18fb96', class: "s-toggle-input", checked: this.isNotifiable, onChange: (e) => this.toggleSetting('is_notifiable', e), type: "checkbox" }), h("div", { key: '7812c9a8f51a7ad64172db275ac050f8b45ec6e5', class: "s-toggle-switcher" }))))), h("div", { key: '7224d14d365a9fd767e2b900dd1e30c6bee69e7e', class: "s-user-settings-section s-user-settings-section-deactivate-user" }, h("salla-list-tile", { key: 'cb61e0a146115885a36455159d808d7edbbdff5b' }, h("div", { key: 'c073c1bbca5ae9496a4116323611d15f33d68566', slot: "icon", class: "s-user-settings-section-icon" }, h("span", { key: 'ed78cb19724511219f35ed85e3d915ced708d46c', innerHTML: UserOff })), h("div", { key: 'f8a9ba483b7af0216536a130554186b722f9ad6e', slot: "title", class: "s-user-settings-section-title" }, this.capitalizeText(this.deactivateAccount)), h("div", { key: 'fd9cdf72725204e320c56b1bd6ac4cf2d77d2176', slot: "subtitle", class: "s-user-settings-section-subtitle" }, this.capitalizeText(this.deactivateDesc)), h("div", { key: '739a99cfb762cd18d91c955b218ab0d06a289a9a', slot: 'action', class: "s-user-settings-section-action" }, h("salla-button", { key: 'c2fd322ae8ff4060c21c65cfdd8b1d89bb338e3f', fill: "outline", color: "danger", shape: "btn", size: "medium", width: "normal", onClick: () => this.openDeactivateModal() }, this.capitalizeText(this.deactivateAccount))))), h("salla-modal", { key: 'f8c8a2922ffd79d2dc04a35cf964882526b6b91c', width: "sm", subTitle: this.capitalizeText(this.sorryForLeavingText), ref: modal => this.confirmationModal = modal }, h("span", { key: 'b036e50b12f521c0f623ae7afded1113b0fc20ab', slot: 'icon', class: "s-user-settings-confirmation-icon", innerHTML: UserOff }), h("div", { key: '0ae61369ece6d96056e0b461ba7a3e0104e00583', class: "s-user-settings-confirmation" }, h("div", { key: 'ef2eef33396e9eaa0c43d2196e43b61917f3c5fe', class: "s-user-settings-confirmation-warning" }, this.capitalizeText(this.warningText)), h("div", { key: '1656cb466302c11990d5e0d9833b21cb47766846', class: "s-user-settings-confirmation-actions" }, h("salla-button", { key: 'ce75f721106b103e6c7f2cfc75f8be08aba54f9c', width: "wide", onClick: () => this.confirmationModal.close() }, this.capitalizeText(this.keepAccount)), h("salla-button", { key: '006ceecf237eee2febde96ff584eb8256b820049', fill: 'outline', loading: this.buttonLoading, width: "wide", onClick: () => this.deleteAccount() }, this.capitalizeText(this.deactivateAccount)))))));
+        return (h(Host, { key: '64356c5b57d826fce8c29cc319a9762464c7fe51', class: "s-user-settings-wrapper" }, this.canHideName && (h("div", { key: '4f7b3eb703f89e4a758fca54ba1b214f6724aaea', class: "s-user-settings-section" }, h("salla-list-tile", { key: '7ad109e36b278fe81a314d51e1ab68030dd96cdc' }, h("div", { key: 'c789b7e2c541e25aaaf336e052d1986f6429da71', slot: "icon", class: "s-user-settings-section-icon" }, h("span", { key: '5d7b377aefb80139527d8814ee2c636fa9c73e0f', innerHTML: UserCancel })), h("div", { key: 'fdb9d6130ef27cffbe4e2ef06e7b9155d0d04c2b', slot: "title", class: "s-user-settings-section-title" }, this.capitalizeText(this.hideMyName)), h("div", { key: 'bd8592a487c79926355eeea25a5e1429bca0fd80', slot: "subtitle", class: "s-user-settings-section-subtitle" }, this.capitalizeText(this.hideMyNameDesc)), h("div", { key: 'cf21ed12bb38dc3a613efac6d017a72aab38780b', slot: "action", class: "s-user-settings-section-action" }, h("label", { key: '160140e25cf8e6c4556e52c0b36ba5769618b419', class: "s-toggle" }, h("input", { key: '369a694fabbd42e6c239b23c26d68f858775ffe2', class: "s-toggle-input", checked: this.isHiddenName, onChange: e => this.toggleSetting('is_hidden_name', e), type: "checkbox" }), h("div", { key: '5952ec01913ef95d888eeb3aace14123ffd3ef6f', class: "s-toggle-switcher" })))))), h("div", { key: '885355f8435759c9359a3d9eb95d5637b1c74751', class: "s-user-settings-section" }, h("salla-list-tile", { key: '93b607850b20add5384a3b28e4e58fbfcb181d53' }, h("div", { key: 'c795aabfdc6df0beb9c0bfcf73ad87625eb7f51b', slot: "icon", class: "s-user-settings-section-icon" }, h("span", { key: 'a59ede027c4466a1e84e8e8b4c649c7b418dd0a3', innerHTML: Bullhorn })), h("div", { key: 'e7af96b6f919a8be8bb126237cb3977e72a7c089', slot: "title", class: "s-user-settings-section-title" }, this.capitalizeText(this.promotionalMsgs)), h("div", { key: 'dab7b270443b6eddccd7df739c2bee82eb7706af', slot: "subtitle", class: "s-user-settings-section-subtitle" }, this.capitalizeText(this.promotionalMsgsDesc)), h("div", { key: '56a6f18c788891fe9215a57d0fcaa5cf98bd3aa5', slot: "action", class: "s-user-settings-section-action" }, h("label", { key: '1fc28780fe779099eaed7916f31cbbb681c10fe9', class: "s-toggle" }, h("input", { key: '832edd6e5b806171bb913163b7d5c19dbb0833f5', class: "s-toggle-input", checked: this.isNotifiable, onChange: e => this.toggleSetting('is_notifiable', e), type: "checkbox" }), h("div", { key: '54260d8cca19ca6914cdd3bf15093b9669fef44a', class: "s-toggle-switcher" }))))), h("div", { key: '549bae1159a55b035952a12c8dc9d2b9d660f5bf', class: "s-user-settings-section s-user-settings-section-delete-user" }, h("salla-list-tile", { key: '7969327e863cd998a120f27d61621d83ef8e57d5' }, h("div", { key: 'acf14b5e6ce76657fe0016aa63e26851e7688cd5', slot: "icon", class: "s-user-settings-section-icon" }, this.renderUserDeleteIcon()), h("div", { key: '4a38cf9d0510e784317b0eb4db2fd4589a9f71d4', slot: "title", class: "s-user-settings-section-title" }, this.capitalizeText(this.deleteAccount)), h("div", { key: '054f6a6c30f2eb9794f83a0998f20e208c7ed85a', slot: "subtitle", class: "s-user-settings-section-subtitle" }, this.capitalizeText(this.isDeletePending ? this.deleteAccountPending : this.deleteAccountDesc)), h("div", { key: '00d392a300b986d5d3e6f6711e6996df9731962d', slot: "action", class: "s-user-settings-section-action" }, this.renderDeleteSectionAction()))), h("salla-modal", { key: 'd4e8006e57d9c35267177f07b60e510ea3e53400', id: "salla-user-settings-delete-modal", width: "xs", centered: true, showBack: this.currentStep === 'otp', isClosable: this.currentStep !== 'success', iconStyle: this.currentStep === 'success' ? 'success' : undefined, onModalVisibilityChanged: e => this.handleModalVisibilityChanged(e), onModalBack: () => this.goBackFromOtp(), ref: modal => (this.confirmationModal = modal) }, this.currentStep !== 'success' ? (h("span", { slot: "icon", class: "s-user-settings-delete-icon" }, this.renderUserDeleteIcon())) : null, h("div", { key: this.currentStep, class: "s-user-settings-delete-step" }, this.renderDeleteStep()))));
     }
     static get is() { return "salla-user-settings"; }
     static get originalStyleUrls() {
@@ -71,16 +514,38 @@ export class SallaUserSettings {
     }
     static get states() {
         return {
-            "deactivateAccount": {},
+            "deleteAccount": {},
+            "deleteAccountDesc": {},
+            "deleteConfirmTitle": {},
+            "deleteAccountWarning": {},
+            "cancelLabel": {},
+            "deleteOtpTitle": {},
+            "deleteOtpInstruction": {},
+            "deleteConfirmOtp": {},
+            "sendViaPhone": {},
+            "sendViaEmail": {},
+            "deleteSuccessTitle": {},
+            "deleteSuccessMessage": {},
+            "okLabel": {},
+            "cancelDeletionRequest": {},
+            "deleteAccountPending": {},
+            "deletePendingDays": {},
+            "resendAfterLabel": {},
+            "resendLabel": {},
             "promotionalMsgs": {},
             "hideMyName": {},
             "hideMyNameDesc": {},
-            "deactivateDesc": {},
             "promotionalMsgsDesc": {},
-            "sorryForLeavingText": {},
-            "warningText": {},
-            "keepAccount": {},
-            "buttonLoading": {},
+            "currentStep": {},
+            "isDeletePending": {},
+            "otpType": {},
+            "otpHasError": {},
+            "otpErrorMessage": {},
+            "isSubmitting": {},
+            "isVerifyingOtp": {},
+            "isSwitchingChannel": {},
+            "resendAfter": {},
+            "showResendLink": {},
             "canHideName": {},
             "isHiddenName": {},
             "isNotifiable": {}

package/dist/collection/components/salla-verify/salla-verify.js

@@ -44,6 +44,14 @@ export class SallaVerify {
         //todo:: change this way, now we fire the event from the backend, we should listen to salla.profile.event.onUpdated
         salla.event.on('profile::verification', data => {
             let payload = Array.isArray(data) ? data[0] : data;
+            // Account-deletion OTP is owned by <salla-user-settings>; opening this modal
+            // (and auto-reloading) would break that flow. Prefer payload.request_type when
+            // present; fall back to the delete modal being open.
+            const isDeleteRequest = payload?.request_type === 'delete_account'
+                || document.getElementById('salla-user-settings-delete-modal')?.hasAttribute('visible');
+            if (isDeleteRequest) {
+                return;
+            }
             this.isProfileVerify = true;
             this.open(payload);
             this.title = salla.lang.get('pages.profile.verify_title') + salla.lang.get('common.elements.' + payload.type);

package/dist/collection/components/salla-wishlist-actions/salla-wishlist-actions.js

@@ -325,7 +325,7 @@ export class SallaWishlistActions {
         }
     }
     render() {
-        return (h(Host, { key: '6329ecd00f2d08cd0fc485c371e98fe7984502d0' }, h("div", { key: '6e24cd1109ae290196337fe3e1e05cfd074966a9', class: "s-wishlist-actions" }, h("div", { key: '82c29d5b203368059c7883272c36576b19bdfd2d', class: "s-wishlist-actions-bar flex items-center justify-end gap-3 mb-3" }, h("div", { key: '3f85ad6a6e72308b71d506d2fc8687672b00ea7a', class: "s-wishlist-actions-dropdown relative" }, h("salla-button", { key: '56c109a338bc9fa06aebdadb041b6587440fa71a', color: "primary", fill: "outline", type: "button", disabled: !this.hasProducts, "aria-haspopup": "true", "aria-expanded": this.menuOpen ? 'true' : 'false', onClick: () => this.toggleMenu() }, h("div", { key: 'f0cf0dc66dd8ce00ac878481bbf21662d1853eba', class: "flex flex-row justify-center items-center gap-2" }, h("svg", { key: '3b97ef84df832a0bc1198319cc63b753da915b37', version: "1.1", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 32 32", style: { width: '16px', height: '16px' } }, h("path", { key: 'e8c626812dad32a5fc3165b58ce76a5c39586f09', d: "M26.667 21.333c-1.699 0-3.196 0.812-4.173 2.052l-11.912-5.211c0.044-0.276 0.085-0.553 0.085-0.841 0-0.472-0.081-0.923-0.197-1.359l12.361-6.952c0.971 1.009 2.328 1.644 3.836 1.644 2.941 0 5.333-2.392 5.333-5.333s-2.392-5.333-5.333-5.333-5.333 2.392-5.333 5.333c0 0.472 0.081 0.923 0.197 1.359l-12.361 6.952c-0.971-1.009-2.328-1.644-3.836-1.644-2.941 0-5.333 2.392-5.333 5.333s2.392 5.333 5.333 5.333c1.699 0 3.196-0.812 4.173-2.052l11.912 5.211c-0.044 0.276-0.085 0.553-0.085 0.841 0 2.941 2.392 5.333 5.333 5.333s5.333-2.392 5.333-5.333-2.392-5.333-5.333-5.333zM26.667 2.667c1.471 0 2.667 1.196 2.667 2.667s-1.196 2.667-2.667 2.667-2.667-1.196-2.667-2.667 1.196-2.667 2.667-2.667zM5.333 20c-1.471 0-2.667-1.196-2.667-2.667s1.196-2.667 2.667-2.667 2.667 1.196 2.667 2.667-1.196 2.667-2.667 2.667zM26.667 29.333c-1.471 0-2.667-1.196-2.667-2.667s1.196-2.667 2.667-2.667 2.667 1.196 2.667 2.667-1.196 2.667-2.667 2.667z" })), this.shareLabel, h("svg", { key: '731093a2d4393fe53d63e96ecc48fcb4c4a360d2', version: "1.1", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 32 32", style: { width: '16px', height: '16px' } }, h("path", { key: 'af87c9481389b4b1e544e0ab2eac43db6c164aac', d: "M26.212 10.996c-0.556-0.484-1.396-0.428-1.881 0.127l-8.331 9.519-8.331-9.52c-0.485-0.555-1.327-0.611-1.881-0.125s-0.609 1.328-0.124 1.881l9.333 10.667c0.253 0.291 0.617 0.456 1.003 0.456s0.749-0.165 1.003-0.456l9.333-10.667c0.485-0.553 0.429-1.396-0.124-1.881z" })))), this.menuOpen && (h("ul", { key: '62ce5ade389fb563d2548fd94939f697dbc03d8a', class: "s-wishlist-actions-menu absolute z-20 mt-1 bg-white rounded-lg shadow overflow-hidden" }, h("li", { key: '7cb443687290ce4c7144b71140b68c020bb52dd4' }, h("button", { key: 'd55410bb2f164d267a9c21af2648fbef3fdc1928', type: "button", class: "s-wishlist-actions-menu-item", onClick: () => this.shareAll() }, this.shareAllLabel)), h("li", { key: 'f921f5241b0e7b7ebb228049f84dfe3996081d92' }, h("button", { key: 'dbc903542086266571c21ada73d54dab62f5a3e2', type: "button", class: "s-wishlist-actions-menu-item", onClick: () => this.shareSpecific() }, this.shareSpecificLabel))))), h("salla-social-share", { key: '0e3aec575c1b4aa4cdd5bb2c61f3cc3e90687f23', class: "s-wishlist-actions-social", ref: el => (this.socialShare = el), url: this.shareUrl, mode: "modal", modalTitle: this.shareModalTitle }, h("span", { key: 'bafce0670b980b583398b3d1a997020298e35bed', slot: "widget", class: "s-wishlist-actions-social-anchor", "aria-hidden": "true" }))), this.specificMode && (h("div", { key: '216cd3409541b0f93b26e2f2bfe256a36d0ff37b', class: "s-wishlist-actions-panel flex items-center justify-between gap-4 flex-wrap p-4 mt-3 mb-3 bg-white rounded-lg" }, h("label", { key: '4bf9a1cc508bfc87c229f69a7134bdefae0f9535', class: "s-wishlist-actions-panel-select-all flex items-center gap-2 cursor-pointer" }, h("input", { key: 'fbc39c6513eec5f4b1f281046b509c642ddce3db', type: "checkbox", class: "s-products-list-select-checkbox s-wishlist-actions-select-all", checked: this.isAllSelected, ref: el => (this.selectAllCheckbox = el), "aria-label": this.selectAllLabel, onChange: () => this.toggleSelectAll() }), h("span", { key: '02ba3b818ecb802d8976734738c8042163b6cdae', class: "s-wishlist-actions-panel-title text-sm font-bold text-gray-700" }, this.shareSpecificLabel, " (", this.selectedCount, ")")), h("div", { key: '447df46aa76c1ecb165b7680465ff6c6dfcc967d', class: "s-wishlist-actions-panel-buttons flex items-center gap-2" }, h("salla-button", { key: '36a6360b83dd07d20ca7763e2f12dc93f169c645', class: "s-wishlist-actions-cancel", color: "light", fill: "outline", type: "button", onClick: () => this.cancelSpecific() }, this.cancelLabel), h("salla-button", { key: '3aa46bcd91bf605f7715fcaa5692e4ca0e8f199e', class: "s-wishlist-actions-share", color: "primary", fill: "outline", type: "button", disabled: !this.selectedCount, loading: this.isSharing, onClick: () => this.shareSelected() }, this.shareLabel)))))));
+        return (h(Host, { key: 'de4a2a4d63c8b5564d94b8dc0fb44a8f3680b5c4' }, h("div", { key: '6b8b55564d4309018e354aa59d78759023cd80e3', class: "s-wishlist-actions" }, h("div", { key: 'd7596fe51a790b13dadcacaaa22cbb571f66baf3', class: "s-wishlist-actions-bar flex items-center justify-end gap-3 mb-3" }, h("div", { key: 'acd83930774ca11cc9e8294f694a3a7376abbf1c', class: "s-wishlist-actions-dropdown relative" }, h("salla-button", { key: '98d82f820182210e0e7ac0e8709adfcb6081475b', color: "primary", fill: "outline", type: "button", disabled: !this.hasProducts, "aria-haspopup": "true", "aria-expanded": this.menuOpen ? 'true' : 'false', onClick: () => this.toggleMenu() }, h("div", { key: '67d68071fa2292a02f20b4fd7e4c2ac484b8a757', class: "flex flex-row justify-center items-center gap-2" }, h("svg", { key: '7b711f7fe2af9fefc4d8c0d99b5f910a776deef0', version: "1.1", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 32 32", style: { width: '16px', height: '16px' } }, h("path", { key: 'ea624787c3344073a5cef9b3e487232536666ffd', d: "M26.667 21.333c-1.699 0-3.196 0.812-4.173 2.052l-11.912-5.211c0.044-0.276 0.085-0.553 0.085-0.841 0-0.472-0.081-0.923-0.197-1.359l12.361-6.952c0.971 1.009 2.328 1.644 3.836 1.644 2.941 0 5.333-2.392 5.333-5.333s-2.392-5.333-5.333-5.333-5.333 2.392-5.333 5.333c0 0.472 0.081 0.923 0.197 1.359l-12.361 6.952c-0.971-1.009-2.328-1.644-3.836-1.644-2.941 0-5.333 2.392-5.333 5.333s2.392 5.333 5.333 5.333c1.699 0 3.196-0.812 4.173-2.052l11.912 5.211c-0.044 0.276-0.085 0.553-0.085 0.841 0 2.941 2.392 5.333 5.333 5.333s5.333-2.392 5.333-5.333-2.392-5.333-5.333-5.333zM26.667 2.667c1.471 0 2.667 1.196 2.667 2.667s-1.196 2.667-2.667 2.667-2.667-1.196-2.667-2.667 1.196-2.667 2.667-2.667zM5.333 20c-1.471 0-2.667-1.196-2.667-2.667s1.196-2.667 2.667-2.667 2.667 1.196 2.667 2.667-1.196 2.667-2.667 2.667zM26.667 29.333c-1.471 0-2.667-1.196-2.667-2.667s1.196-2.667 2.667-2.667 2.667 1.196 2.667 2.667-1.196 2.667-2.667 2.667z" })), this.shareLabel, h("svg", { key: 'e282eedc748300a522d39e47447c97952e8a8373', version: "1.1", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 32 32", style: { width: '16px', height: '16px' } }, h("path", { key: 'ac4f11ce0b1401d3da483802a5ac32fe4a02c337', d: "M26.212 10.996c-0.556-0.484-1.396-0.428-1.881 0.127l-8.331 9.519-8.331-9.52c-0.485-0.555-1.327-0.611-1.881-0.125s-0.609 1.328-0.124 1.881l9.333 10.667c0.253 0.291 0.617 0.456 1.003 0.456s0.749-0.165 1.003-0.456l9.333-10.667c0.485-0.553 0.429-1.396-0.124-1.881z" })))), this.menuOpen && (h("ul", { key: 'a066397a5700f00d3b0b66403886d41b7f21358b', class: "s-wishlist-actions-menu absolute z-20 mt-1 bg-white rounded-lg shadow overflow-hidden" }, h("li", { key: 'ee40d5a36486e8573f21671ffb53aece1443db15' }, h("button", { key: 'c686ae70fa97719ea926864de4a4bf767492f0ca', type: "button", class: "s-wishlist-actions-menu-item", onClick: () => this.shareAll() }, this.shareAllLabel)), h("li", { key: '96ccd67e69dc1a2f086f19614163779d29eb0dd3' }, h("button", { key: '0cf1e565c12148c8f4fe875a2b37a78d50e8f959', type: "button", class: "s-wishlist-actions-menu-item", onClick: () => this.shareSpecific() }, this.shareSpecificLabel))))), h("salla-social-share", { key: '728c700ea2b44d766fea3f6c2e71a81c06365466', class: "s-wishlist-actions-social", ref: el => (this.socialShare = el), url: this.shareUrl, mode: "modal", modalTitle: this.shareModalTitle }, h("span", { key: '59663da21c4433cf14461a3f9553ca69e9c4fbd6', slot: "widget", class: "s-wishlist-actions-social-anchor", "aria-hidden": "true" }))), this.specificMode && (h("div", { key: 'ab6c6a841da23bb3011a6f0ea2bfb8feb3bf8d3f', class: "s-wishlist-actions-panel flex items-center justify-between gap-4 flex-wrap p-4 mt-3 mb-3 bg-white rounded-lg" }, h("label", { key: '95594e45d0a8445e77ceb58577543630f8439e9b', class: "s-wishlist-actions-panel-select-all flex items-center gap-2 cursor-pointer" }, h("input", { key: '9652181ae51b2ac2fd5a1dfe26bb4c47e824d08b', type: "checkbox", class: "s-products-list-select-checkbox s-wishlist-actions-select-all", checked: this.isAllSelected, ref: el => (this.selectAllCheckbox = el), "aria-label": this.selectAllLabel, onChange: () => this.toggleSelectAll() }), h("span", { key: '44edd31549879720fc75ae6d6750d8f0b5e263c2', class: "s-wishlist-actions-panel-title text-sm font-bold text-gray-700" }, this.shareSpecificLabel, " (", this.selectedCount, ")")), h("div", { key: 'd3f3ab61ed24868e2cff353f821406d71aa4377b', class: "s-wishlist-actions-panel-buttons flex items-center gap-2" }, h("salla-button", { key: 'c21a5e80fa4c69f9112249c86f6e17512d937b6e', class: "s-wishlist-actions-cancel", color: "light", fill: "outline", type: "button", onClick: () => this.cancelSpecific() }, this.cancelLabel), h("salla-button", { key: '1894863700ac921d131629eb21d6f38d89e29cc6', class: "s-wishlist-actions-share", color: "primary", fill: "outline", type: "button", disabled: !this.selectedCount, loading: this.isSharing, onClick: () => this.shareSelected() }, this.shareLabel)))))));
     }
     static get is() { return "salla-wishlist-actions"; }
     static get originalStyleUrls() {