@salla.sa/twilight-components
Version:
Salla Web Component
91 lines (90 loc) • 8.66 kB
JavaScript
/*!
* Crafted with ❤ by Salla
*/
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.canHideName = salla.config.get('store.settings.rating.can_customer_hide_name');
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');
if (!this.isNotifiable || !this.isHiddenName) {
salla.event.on('profile::info.fetched', res => {
this.isHiddenName = res.data.is_hidden_name;
this.isNotifiable = res.data.is_notifiable;
});
}
});
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');
});
}
toggleSetting(setting, event) {
salla.profile.updateSettings({ name: setting, value: event.target.checked });
}
capitalizeText(str) {
return str.charAt(0).toUpperCase() + str.slice(1);
}
openDeactivateModal() {
this.confirmationModal.setTitle(this.capitalizeText(this.deactivateAccount));
this.confirmationModal.open();
}
async deleteAccount() {
await salla.profile.delete().finally(() => this.confirmationModal.close());
}
render() {
return (h(Host, { key: '57752922b2235fa8fd47d23e9be20be308a05f9b', class: "s-user-settings-wrapper" }, this.canHideName && h("div", { key: '90350bb7f41f00111432b61c8579d75a5b5ced55', class: "s-user-settings-section" }, h("salla-list-tile", { key: '12cbd1a2493fb4a4d1e7ac612938fe24bac6e24d' }, h("div", { key: '67f204dca1444cece1182f53f1953064dc6068a0', slot: "icon", class: "s-user-settings-section-icon" }, h("span", { key: '6d29b2e7198fab58b992677677cf08e2c1bf9966', innerHTML: UserCancel })), h("div", { key: '8b722b04117c3e5d7a592df0b728f07299c9b1a4', slot: "title", class: "s-user-settings-section-title" }, this.capitalizeText(this.hideMyName)), h("div", { key: 'f46dcf6961b4dfe095c35689f255b1247e7dc1f8', slot: "subtitle", class: "s-user-settings-section-subtitle" }, this.capitalizeText(this.hideMyNameDesc)), h("div", { key: '60464113b7ce1b2a083340215802c78aff7ceb50', slot: 'action', class: "s-user-settings-section-action" }, h("label", { key: '350b7197b3bd766f55997c41d04c70258baaf088', class: "s-toggle" }, h("input", { key: '1dea7f08a1cdfb1c21d8cdaf05eb43f61e797a1d', class: "s-toggle-input", checked: this.isHiddenName, onChange: (e) => this.toggleSetting('is_hidden_name', e), type: "checkbox" }), h("div", { key: '944fbcd07280b482f429497dce640fac1f0cfd91', class: "s-toggle-switcher" }))))), h("div", { key: '8a479b9df759fc51d2a2f5fba1ba299a575e6a0f', class: "s-user-settings-section" }, h("salla-list-tile", { key: '6648c3fced6be40915956b7971029ec31cdaadf2' }, h("div", { key: '704af53886d7f7308637664290a3d7cbdfcc31cc', slot: "icon", class: "s-user-settings-section-icon" }, h("span", { key: 'e3ddfc8c7550e6b28db5813bf0e87d0af58a2bf2', innerHTML: Bullhorn })), h("div", { key: 'b60e0750ed81f1f0da5fceed4c3a571fca3bc2ab', slot: "title", class: "s-user-settings-section-title" }, this.capitalizeText(this.promotionalMsgs)), h("div", { key: 'a766705fb45e01046b8f896caee99c18299eaa41', slot: "subtitle", class: "s-user-settings-section-subtitle" }, this.capitalizeText(this.promotionalMsgsDesc)), h("div", { key: '788d8c57dede1241ed293769b2a6dab8bfd4f6bf', slot: 'action', class: "s-user-settings-section-action" }, h("label", { key: 'bf8d527945c0f2114be7659bbf6ef2aae231f0d9', class: "s-toggle" }, h("input", { key: '43f76c3b27b1958f10a76e3525fde2269de93317', class: "s-toggle-input", checked: this.isNotifiable, onChange: (e) => this.toggleSetting('is_notifiable', e), type: "checkbox" }), h("div", { key: '7a5ea9a24669e9b2becb88b64a638e78f8c8e3bc', class: "s-toggle-switcher" }))))), h("div", { key: '6680b01b52f2153e5fa4ba002aceb69b342554c6', class: "s-user-settings-section s-user-settings-section-deactivate-user" }, h("salla-list-tile", { key: '69a9e59a5d4259c47acce4410c6539ce4ba4a49b' }, h("div", { key: '5eeb3d0e5973ec389757a36f9888b1ccedd12f8c', slot: "icon", class: "s-user-settings-section-icon" }, h("span", { key: '1e787a58f65f52acec9bd159e6fbae08a77715d0', innerHTML: UserOff })), h("div", { key: 'b4e08ff95767f82d126e44010ab54afedb34b565', slot: "title", class: "s-user-settings-section-title" }, this.capitalizeText(this.deactivateAccount)), h("div", { key: 'd3d67a431ee30599197889e3caaa6ba939eb711c', slot: "subtitle", class: "s-user-settings-section-subtitle" }, this.capitalizeText(this.deactivateDesc)), h("div", { key: 'a46cb8e089dfe2f54809bf0c76c1b400af79c83d', slot: 'action', class: "s-user-settings-section-action" }, h("salla-button", { key: 'b0634bdd3d7be1cd315598f3e46c979eaef1b54a', fill: "outline", color: "danger", shape: "btn", size: "medium", width: "normal", onClick: () => this.openDeactivateModal() }, this.capitalizeText(this.deactivateAccount))))), h("salla-modal", { key: 'c9b45ac4da317114bcef34b45246dd3c162b36b1', width: "sm", subTitle: this.capitalizeText(this.sorryForLeavingText), ref: modal => this.confirmationModal = modal }, h("span", { key: '2ab0e74ea53827a085cd0a805c5d8a7911b6ac74', slot: 'icon', class: "s-user-settings-confirmation-icon", innerHTML: UserOff }), h("div", { key: 'b11e615ee719521503bc190cc175f3e348b2e65a', class: "s-user-settings-confirmation" }, h("div", { key: '3cf4d7aa592a11d2b41fe5029e1d9b978b922d57', class: "s-user-settings-confirmation-warning" }, this.capitalizeText(this.warningText)), h("div", { key: '2a2f0ce558453c52faf7fa294701a62f9760afa7', class: "s-user-settings-confirmation-actions" }, h("salla-button", { key: '14c0911198f273704bef176e28fea00b930a9387', width: "wide", onClick: () => this.confirmationModal.close() }, this.capitalizeText(this.keepAccount)), h("salla-button", { key: 'd3d5c88f6f0a73c490e12767246799b214a74ce1', fill: 'outline', loading: this.buttonLoading, width: "wide", onClick: () => this.deleteAccount() }, this.capitalizeText(this.deactivateAccount)))))));
}
static get is() { return "salla-user-settings"; }
static get originalStyleUrls() {
return {
"$": ["salla-user-settings.scss"]
};
}
static get styleUrls() {
return {
"$": ["salla-user-settings.css"]
};
}
static get states() {
return {
"deactivateAccount": {},
"promotionalMsgs": {},
"hideMyName": {},
"hideMyNameDesc": {},
"deactivateDesc": {},
"promotionalMsgsDesc": {},
"sorryForLeavingText": {},
"warningText": {},
"keepAccount": {},
"buttonLoading": {},
"canHideName": {},
"isHiddenName": {},
"isNotifiable": {}
};
}
}
//# sourceMappingURL=salla-user-settings.js.map