@salla.sa/twilight-components
Version:
Salla Web Component
90 lines (89 loc) • 8.61 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: '7ebde1b251239daf505e3ed7460d8bd21eefcb1c', class: "s-user-settings-wrapper" }, this.canHideName && h("div", { key: 'ba44ce4314ef6df6a85227e5f7db5428f63c0dde', class: "s-user-settings-section" }, h("salla-list-tile", { key: 'ae83ddc78aa668dc44ae9c32001d401b051c6503' }, h("div", { key: 'da59b1543b7d0352505db2146579183abc57d4ac', slot: "icon", class: "s-user-settings-section-icon" }, h("span", { key: '95999a4a02fe57158473d64847d2ad861b79384c', innerHTML: UserCancel })), h("div", { key: '416e8c839f0ee9c89ca725829594c75c7baa7b49', slot: "title", class: "s-user-settings-section-title" }, this.capitalizeText(this.hideMyName)), h("div", { key: '798935472d17bc427990eb0d4cb1f3172ef7c244', slot: "subtitle", class: "s-user-settings-section-subtitle" }, this.capitalizeText(this.hideMyNameDesc)), h("div", { key: 'bd455f1375fa73e4dde76075f4e18dd55a7ae859', slot: 'action', class: "s-user-settings-section-action" }, h("label", { key: '9148274bf7a0faccbe282531107882c072e4e918', class: "s-toggle" }, h("input", { key: 'ed079fe4e696edb5ca1e3ef2ff594a787a2030c4', class: "s-toggle-input", checked: this.isHiddenName, onChange: (e) => this.toggleSetting('is_hidden_name', e), type: "checkbox" }), h("div", { key: '1ab8d7680e75a743ab7c92bc533dd3466e00d6bc', class: "s-toggle-switcher" }))))), h("div", { key: 'e2beb47cd5983c0d499b44d24e2abdfd7d3bc932', class: "s-user-settings-section" }, h("salla-list-tile", { key: '15dc8a7e21faeaedb6a8b12093959d0dca89cc6a' }, h("div", { key: '2e2633ced498512feaf9af090eb2554190a6601c', slot: "icon", class: "s-user-settings-section-icon" }, h("span", { key: 'c25d328af60bdb56af88a5783ebed45a9ab662d5', innerHTML: Bullhorn })), h("div", { key: '26a2262d700f6326acfd23455c36ccb0bbc30c90', slot: "title", class: "s-user-settings-section-title" }, this.capitalizeText(this.promotionalMsgs)), h("div", { key: '5a86ab74e912a2eb8ef618c8c2a0fce9635e21ab', slot: "subtitle", class: "s-user-settings-section-subtitle" }, this.capitalizeText(this.promotionalMsgsDesc)), h("div", { key: 'fce21eb942724cd3e662d1fa28998dd569800807', slot: 'action', class: "s-user-settings-section-action" }, h("label", { key: '2d5c5fe21af1b7b4618d568aac807477377456b9', class: "s-toggle" }, h("input", { key: '6141b9aee3d7f08c1614e18622734c985f00698d', class: "s-toggle-input", checked: this.isNotifiable, onChange: (e) => this.toggleSetting('is_notifiable', e), type: "checkbox" }), h("div", { key: 'bb1d05fa73a6a2683fd13bbfcfda9c6da33eec5c', class: "s-toggle-switcher" }))))), h("div", { key: '725a865983025acca1fc7e38aa8ca242977e0cec', class: "s-user-settings-section s-user-settings-section-deactivate-user" }, h("salla-list-tile", { key: 'f78022f0df1fa056218cc04f634020c91e13a1de' }, h("div", { key: '0e64bb2523b466f01c73392104f433ede50d5511', slot: "icon", class: "s-user-settings-section-icon" }, h("span", { key: '96a246978ddc161debca6a33ca9b33c76a28c671', innerHTML: UserOff })), h("div", { key: '1b9e41414830b0d08524517959a316c410b0263e', slot: "title", class: "s-user-settings-section-title" }, this.capitalizeText(this.deactivateAccount)), h("div", { key: '23baf125e4c2f93185ce23c0e75b1cdf8218bddf', slot: "subtitle", class: "s-user-settings-section-subtitle" }, this.capitalizeText(this.deactivateDesc)), h("div", { key: 'c8d12d145ebc670fd43843682983c3a7ee9fd2c2', slot: 'action', class: "s-user-settings-section-action" }, h("salla-button", { key: '94eede53889d66f641dd24492c38d2350b0901c8', fill: "outline", color: "danger", shape: "btn", size: "medium", width: "normal", onClick: () => this.openDeactivateModal() }, this.capitalizeText(this.deactivateAccount))))), h("salla-modal", { key: '6e6132d1d2fef544b5c504c66bc8dd84aba2a3a4', width: "sm", subTitle: this.capitalizeText(this.sorryForLeavingText), ref: modal => this.confirmationModal = modal }, h("span", { key: '914742e0cb4b2b089e56c7139f2cbd4c677da85c', slot: 'icon', class: "s-user-settings-confirmation-icon", innerHTML: UserOff }), h("div", { key: '1980c63604f16ea75fafa9f3889ca29441a02e42', class: "s-user-settings-confirmation" }, h("div", { key: '82deb3934516d6132dcc006b7fde1937838b201b', class: "s-user-settings-confirmation-warning" }, this.capitalizeText(this.warningText)), h("div", { key: '7219b0aec0f4e3c6a269f476623929d1d993a754', class: "s-user-settings-confirmation-actions" }, h("salla-button", { key: '6e5421e168e6c2b1fd04842b98e57e9bfd13c018', width: "wide", onClick: () => this.confirmationModal.close() }, this.capitalizeText(this.keepAccount)), h("salla-button", { key: 'b44fa27e4afee3cadb52c39286f6130d1f6eb2a8', 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": {}
};
}
}