@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: 'd49fe1cc125040388326a346cf6349cdff3e8827', class: "s-user-settings-wrapper" }, this.canHideName && h("div", { key: '4f6227afbf0f1a9ac4ae6c0404c04de65ef2c22d', class: "s-user-settings-section" }, h("salla-list-tile", { key: 'd084e7c978e0f41b8997299690e1b419f1dcecea' }, h("div", { key: '732f09a315529dd23a690ec2e2db2ca157f30b3f', slot: "icon", class: "s-user-settings-section-icon" }, h("span", { key: '57854cdcd75e9bdf261cc10108b9dd03ba886c9a', innerHTML: UserCancel })), h("div", { key: '4d42778a9a52a6a539f9c84103a4e35ab10eadce', slot: "title", class: "s-user-settings-section-title" }, this.capitalizeText(this.hideMyName)), h("div", { key: '45ea0bf9bbc5d055e50de279ed21c77f69194a83', slot: "subtitle", class: "s-user-settings-section-subtitle" }, this.capitalizeText(this.hideMyNameDesc)), h("div", { key: 'addf60ce92d9bd5d7307af22f8e08ca627f52692', slot: 'action', class: "s-user-settings-section-action" }, h("label", { key: 'db9bfdd607f9578349051126893fcd77eccc8aea', class: "s-toggle" }, h("input", { key: '5c56ac1adffc24c7d1190251713d99214ef242e3', class: "s-toggle-input", checked: this.isHiddenName, onChange: (e) => this.toggleSetting('is_hidden_name', e), type: "checkbox" }), h("div", { key: '5f275e5c3517a6df99e781537ac17135d54b5d9a', class: "s-toggle-switcher" }))))), h("div", { key: '0cb50e709e0dbc49f769b4f107002eadadb41c32', class: "s-user-settings-section" }, h("salla-list-tile", { key: 'f710c59a481aedca13fb36d003ddb5b71905771f' }, h("div", { key: 'b8e81786c8cea4cc36d81ad4e5a53381fea20ed4', slot: "icon", class: "s-user-settings-section-icon" }, h("span", { key: 'b4b3b36769c216f4981fcebec511e33461e703d5', innerHTML: Bullhorn })), h("div", { key: 'a5a9271e04367bbc512656176bf7b9c59855c497', slot: "title", class: "s-user-settings-section-title" }, this.capitalizeText(this.promotionalMsgs)), h("div", { key: 'f7191566d7fea659a0d080f7680ace28f74fc5e1', slot: "subtitle", class: "s-user-settings-section-subtitle" }, this.capitalizeText(this.promotionalMsgsDesc)), h("div", { key: 'edaed3be64edc7e98640d33ae57112e8586e3354', slot: 'action', class: "s-user-settings-section-action" }, h("label", { key: '9a444d833c61719f65200b6a16ce8bf47406b84f', class: "s-toggle" }, h("input", { key: 'bd18d96449c3eb4d6b263bc5cbf7a9b8d639bd6d', class: "s-toggle-input", checked: this.isNotifiable, onChange: (e) => this.toggleSetting('is_notifiable', e), type: "checkbox" }), h("div", { key: '5742974d46ab2e1084f85d3902ead64a4d2340e3', class: "s-toggle-switcher" }))))), h("div", { key: 'cd920209f8188531735c0a12b40f290ffafd31ab', class: "s-user-settings-section s-user-settings-section-deactivate-user" }, h("salla-list-tile", { key: '49ea382b58e36475794f8e80e41caf7db938ddc4' }, h("div", { key: '7cb1d0abc1c178862111e49804cb750ddd01aea3', slot: "icon", class: "s-user-settings-section-icon" }, h("span", { key: 'de51a80143d6b44ec3ad1f6422e769e57432dd9e', innerHTML: UserOff })), h("div", { key: '1a00838952cac6c3fafe29b9e7e32f5ed3126f30', slot: "title", class: "s-user-settings-section-title" }, this.capitalizeText(this.deactivateAccount)), h("div", { key: 'f4b2794e0dd8a036ce404b7243986b7ba5a63340', slot: "subtitle", class: "s-user-settings-section-subtitle" }, this.capitalizeText(this.deactivateDesc)), h("div", { key: '72cb29457621699ed1449cdd52eb5151023637ab', slot: 'action', class: "s-user-settings-section-action" }, h("salla-button", { key: 'aba35845332da5f0da393078e06a0e0498bf2d28', fill: "outline", color: "danger", shape: "btn", size: "medium", width: "normal", onClick: () => this.openDeactivateModal() }, this.capitalizeText(this.deactivateAccount))))), h("salla-modal", { key: '4fd811fbbc6e7fcc1a6a8d23e8bfa05b7499dcbc', width: "sm", subTitle: this.capitalizeText(this.sorryForLeavingText), ref: modal => this.confirmationModal = modal }, h("span", { key: '712fe566292404c42aa79970978f03fb23b4d2ab', slot: 'icon', class: "s-user-settings-confirmation-icon", innerHTML: UserOff }), h("div", { key: '69ce40edbcaf775e33d62a3e242e5fcc9cce3cef', class: "s-user-settings-confirmation" }, h("div", { key: 'f71c23f124449b12ad7db1f523ca3b80b5c50a2b', class: "s-user-settings-confirmation-warning" }, this.capitalizeText(this.warningText)), h("div", { key: '6995699f126fb98cc6271a0f476dd6b4f53cfd3c', class: "s-user-settings-confirmation-actions" }, h("salla-button", { key: 'f45563215e757ee3b172622c346cd40fca1a79a6', width: "wide", onClick: () => this.confirmationModal.close() }, this.capitalizeText(this.keepAccount)), h("salla-button", { key: '1ba83fc0690f0a10176008bb2470759878471cee', 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": {}
};
}
}