@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: '35629ae7a818db4d058b5de6a4ad7a2410fd769a', class: "s-user-settings-wrapper" }, this.canHideName && h("div", { key: '088ff650127df0e6e4fda37dc9769ebe7a050cfa', class: "s-user-settings-section" }, h("salla-list-tile", { key: 'dc71e681761440cb875d3de11b3d1a13def55a5c' }, h("div", { key: '44b1c2e02b981712467b5d494e1d8e8c30cefc5d', slot: "icon", class: "s-user-settings-section-icon" }, h("span", { key: 'cb4f89d7f81526be268ac7ac7cf407f458eee32a', innerHTML: UserCancel })), h("div", { key: '2be07d40cd1b2082e08f391d43f6fb292e707c51', slot: "title", class: "s-user-settings-section-title" }, this.capitalizeText(this.hideMyName)), h("div", { key: 'ab4702331a6b59f974794e1c6f95505541273db7', slot: "subtitle", class: "s-user-settings-section-subtitle" }, this.capitalizeText(this.hideMyNameDesc)), h("div", { key: '92615b95a6f669e4925a17b6a11ef9146d182d62', slot: 'action', class: "s-user-settings-section-action" }, h("label", { key: 'd99cd97d0baf75c75fc8e2ba6fd403109295658f', class: "s-toggle" }, h("input", { key: '52997c851e7ffff021d267d9cc839d19a1b940b9', class: "s-toggle-input", checked: this.isHiddenName, onChange: (e) => this.toggleSetting('is_hidden_name', e), type: "checkbox" }), h("div", { key: 'f2418d8595800b8e2af231aab82714137bad4e5c', class: "s-toggle-switcher" }))))), h("div", { key: 'ca9641927d0c2e09345078a16e06445f1961d05d', class: "s-user-settings-section" }, h("salla-list-tile", { key: '55075a73c15fda0fb94291e41d528b066d2a808d' }, h("div", { key: '20e5894110f485f2ed75fdc6f0d54b647d1d4a48', slot: "icon", class: "s-user-settings-section-icon" }, h("span", { key: 'c616fe981cd2a7ceb8090c44fe353b5504f5b0e1', innerHTML: Bullhorn })), h("div", { key: 'c1dc47211d07cc1ea25e2ce284f460c2eb6d4f7b', slot: "title", class: "s-user-settings-section-title" }, this.capitalizeText(this.promotionalMsgs)), h("div", { key: '185e058888078b556a359acb6cc1ae080f01ad81', slot: "subtitle", class: "s-user-settings-section-subtitle" }, this.capitalizeText(this.promotionalMsgsDesc)), h("div", { key: 'f54597f7f3c9126c57d34a5aba3ccd84752efbea', slot: 'action', class: "s-user-settings-section-action" }, h("label", { key: '3386b76fc2d590b3a3734716429a8317a80fcc0b', class: "s-toggle" }, h("input", { key: 'd2d9ce3f8e3110715d84e9b407b878e341567fc6', class: "s-toggle-input", checked: this.isNotifiable, onChange: (e) => this.toggleSetting('is_notifiable', e), type: "checkbox" }), h("div", { key: '267b474fb32cbabdf53ff8fd2fe69df87875819d', class: "s-toggle-switcher" }))))), h("div", { key: '80d86e89c87bceddddd461faeede4dfc8f4b3301', class: "s-user-settings-section s-user-settings-section-deactivate-user" }, h("salla-list-tile", { key: 'b95c175905cde9d4fae8487d1a85329db890873f' }, h("div", { key: '1e32b08bceb6bf299ea1e59545d7c539cb2ddce1', slot: "icon", class: "s-user-settings-section-icon" }, h("span", { key: 'f1322819a6f07dff92f9956c0149b173f283407e', innerHTML: UserOff })), h("div", { key: '5d2ddaf6c03c8809f7e86b33fa421e73d048957e', slot: "title", class: "s-user-settings-section-title" }, this.capitalizeText(this.deactivateAccount)), h("div", { key: '0578e54cc49334ad081641b2ccd5b98d81e547ed', slot: "subtitle", class: "s-user-settings-section-subtitle" }, this.capitalizeText(this.deactivateDesc)), h("div", { key: '30d6697be785def178352999d437f67798a03ed5', slot: 'action', class: "s-user-settings-section-action" }, h("salla-button", { key: 'b0ecec87180902892081999d0c96da33cda58d26', fill: "outline", color: "danger", shape: "btn", size: "medium", width: "normal", onClick: () => this.openDeactivateModal() }, this.capitalizeText(this.deactivateAccount))))), h("salla-modal", { key: 'b2015afb2f495f080d6757a57408ccd3e823b1ed', width: "sm", subTitle: this.capitalizeText(this.sorryForLeavingText), ref: modal => this.confirmationModal = modal }, h("span", { key: 'e9391b722fe6c23853664cd5558c289e7fff427a', slot: 'icon', class: "s-user-settings-confirmation-icon", innerHTML: UserOff }), h("div", { key: 'fffaa51055598f66f479e90676649eac4a06148c', class: "s-user-settings-confirmation" }, h("div", { key: '2d7044a63ada034d44de97a875903967de4fa7f0', class: "s-user-settings-confirmation-warning" }, this.capitalizeText(this.warningText)), h("div", { key: 'f79c44b10a20b187c4f5a849b7e40c3c71eb0194', class: "s-user-settings-confirmation-actions" }, h("salla-button", { key: 'b41c685894464f38f8a590482532a46851702ee7', width: "wide", onClick: () => this.confirmationModal.close() }, this.capitalizeText(this.keepAccount)), h("salla-button", { key: '3520e6c0bd7475a6ad3b004ec0a20c3993ebb45f', 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": {}
};
}
}