@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: 'c667b9e42004d131f39d16dd03efa385ddd2b9ac', class: "s-user-settings-wrapper" }, this.canHideName && h("div", { key: '5e22332ecaf3c6b81fed0475aec2a8e4772486bb', class: "s-user-settings-section" }, h("salla-list-tile", { key: '79e4d6ce1bab623fd800168c09cb3ba86f30aad3' }, h("div", { key: '0f51728728348d03ef8db50b5f2b69f9ec4952f6', slot: "icon", class: "s-user-settings-section-icon" }, h("span", { key: '9f0cbeb8d631b817dd12f787f6f5a24ca808a418', innerHTML: UserCancel })), h("div", { key: '7ba18d9c03f4ab0a5f698b4ea0f7d2b45503a6ed', slot: "title", class: "s-user-settings-section-title" }, this.capitalizeText(this.hideMyName)), h("div", { key: 'b0a8da55ec8da2ea2879c32d94064d52eae49745', slot: "subtitle", class: "s-user-settings-section-subtitle" }, this.capitalizeText(this.hideMyNameDesc)), h("div", { key: '505c952f1ed44bf66678490acce7292c2262e29f', slot: 'action', class: "s-user-settings-section-action" }, h("label", { key: '3f2f0b632627b765c2e3a39442b677d563bf1d98', class: "s-toggle" }, h("input", { key: '4534f72462501533966b6364188139496c005a1e', class: "s-toggle-input", checked: this.isHiddenName, onChange: (e) => this.toggleSetting('is_hidden_name', e), type: "checkbox" }), h("div", { key: '60741493f0919e5daccc9f2219bd55e177e1969d', class: "s-toggle-switcher" }))))), h("div", { key: 'c71f9bf392857bb103f31653f464dc937cf09e6c', class: "s-user-settings-section" }, h("salla-list-tile", { key: '519d35697291b69994a49a30191e9ba3690bdbf4' }, h("div", { key: '93e58ac81a4dda528808d224d3502c2563cc839b', slot: "icon", class: "s-user-settings-section-icon" }, h("span", { key: 'ae3e3d3fb1154d4da1f57ea4f14b7de5a7e89ca6', innerHTML: Bullhorn })), h("div", { key: 'cb0549e5087b0b5bb0d29500b45443ab28a72999', slot: "title", class: "s-user-settings-section-title" }, this.capitalizeText(this.promotionalMsgs)), h("div", { key: '250806cb3b011135d52f763977a2174136c932fb', slot: "subtitle", class: "s-user-settings-section-subtitle" }, this.capitalizeText(this.promotionalMsgsDesc)), h("div", { key: '85c4e3c7a2603ff15e4f9ecfb7bc4e9d8a64f8e7', slot: 'action', class: "s-user-settings-section-action" }, h("label", { key: '614ad295ad8eb505b1a0d8cff486410de59bfda4', class: "s-toggle" }, h("input", { key: 'f90f68848e61e253226c5e88d43e5087d0e3ee20', class: "s-toggle-input", checked: this.isNotifiable, onChange: (e) => this.toggleSetting('is_notifiable', e), type: "checkbox" }), h("div", { key: 'd6b6d9e181cbf10710f5c811af295dc0910be0e2', class: "s-toggle-switcher" }))))), h("div", { key: '77b5c18198aeae7b8a7155f9b9aa3159c619d878', class: "s-user-settings-section s-user-settings-section-deactivate-user" }, h("salla-list-tile", { key: 'e3dccc871e44a8538b34fa372f4fc7ab8c6cd5ff' }, h("div", { key: '9732587e9e9ea444154ced92dbb40bac2081fd77', slot: "icon", class: "s-user-settings-section-icon" }, h("span", { key: '0c0fe5602c588cd9987cd8fa56585b6dc9967f9e', innerHTML: UserOff })), h("div", { key: 'adbb6406361307e11f448f13316bcac2daf5d328', slot: "title", class: "s-user-settings-section-title" }, this.capitalizeText(this.deactivateAccount)), h("div", { key: '4ab0342675c0b7b7ab42a849320892f3f92a3d02', slot: "subtitle", class: "s-user-settings-section-subtitle" }, this.capitalizeText(this.deactivateDesc)), h("div", { key: 'e94b080066c35a504293305dafdfc864b780c7f9', slot: 'action', class: "s-user-settings-section-action" }, h("salla-button", { key: '07cbca4fd0e27f64b1908224c749ccc88cf057bf', fill: "outline", color: "danger", shape: "btn", size: "medium", width: "normal", onClick: () => this.openDeactivateModal() }, this.capitalizeText(this.deactivateAccount))))), h("salla-modal", { key: '7f0c52d2a06efbee76fe127acf248cc15e116061', width: "sm", subTitle: this.capitalizeText(this.sorryForLeavingText), ref: modal => this.confirmationModal = modal }, h("span", { key: '2d01c4a0362bbc8616d38d758835051ee7fa0526', slot: 'icon', class: "s-user-settings-confirmation-icon", innerHTML: UserOff }), h("div", { key: '2a9317a26670ed303693694a05b8c79141d3e276', class: "s-user-settings-confirmation" }, h("div", { key: '69f933773e542e05ffed3e21ff090ccafccc520c', class: "s-user-settings-confirmation-warning" }, this.capitalizeText(this.warningText)), h("div", { key: '04aaa85ae678361c9e83c255fc74d8281d99c198', class: "s-user-settings-confirmation-actions" }, h("salla-button", { key: '5a1697c757fb09edbd26a1913e8a6203379fd42e', width: "wide", onClick: () => this.confirmationModal.close() }, this.capitalizeText(this.keepAccount)), h("salla-button", { key: '01539a48796e8acb7cde26926e2f124727319d1d', 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