@salla.sa/twilight-components 1.0.18 → 1.0.20
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/twilight-components/{index-8966d27f.js → index-799f93d3.js} +1 -1
- package/dist/twilight-components/index-9c087700.js +3010 -0
- package/dist/twilight-components/index.esm.js +3 -3
- package/dist/twilight-components/salla-branches.entry.js +1 -1
- package/dist/twilight-components/salla-button.entry.js +1 -1
- package/dist/twilight-components/salla-localization.entry.js +1 -1
- package/dist/twilight-components/{salla-login-b92c73dc.js → salla-login-57b18c2c.js} +2 -6
- package/dist/twilight-components/{salla-login-7c25f64b.js → salla-login-663f8d42.js} +14 -7
- package/dist/twilight-components/salla-login.entry.js +2 -2
- package/dist/twilight-components/salla-modal.entry.js +1 -1
- package/dist/twilight-components/salla-offer.entry.js +38 -9
- package/dist/twilight-components/salla-product-availability.entry.js +1 -1
- package/dist/twilight-components/salla-rating.entry.js +30 -69
- package/dist/twilight-components/{salla-search-69f2d9c1.js → salla-search-25757808.js} +1 -1
- package/dist/twilight-components/salla-search-30fec1e8.js +79 -0
- package/dist/twilight-components/salla-search.entry.js +2 -2
- package/dist/twilight-components/salla-tel-input.entry.js +1417 -0
- package/dist/twilight-components/salla-verify.entry.js +1 -1
- package/dist/twilight-components/twilight-components.esm.js +2 -2
- package/dist/types/components/salla-login/salla-login.d.ts +0 -1
- package/dist/types/components/salla-offer/offer-schema.d.ts +47 -0
- package/dist/types/components/salla-offer/salla-offer.d.ts +13 -48
- package/dist/types/components/salla-rating/order-feedback-response.d.ts +62 -0
- package/dist/types/components/salla-rating/salla-rating.d.ts +15 -18
- package/dist/types/components/salla-tel-input/salla-tel-input.d.ts +4 -0
- package/dist/types/components.d.ts +15 -10
- package/package.json +2 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { S as SallaLogin } from './salla-login-
|
|
2
|
-
export { S as SallaSearch } from './salla-search-
|
|
3
|
-
import './index-
|
|
1
|
+
export { S as SallaLogin } from './salla-login-57b18c2c.js';
|
|
2
|
+
export { S as SallaSearch } from './salla-search-30fec1e8.js';
|
|
3
|
+
import './index-9c087700.js';
|
|
4
4
|
import './Helper-d07ebbc7.js';
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { r as registerInstance, h, e as Host, g as getElement } from './index-
|
|
1
|
+
import { r as registerInstance, h, e as Host, g as getElement } from './index-9c087700.js';
|
|
2
2
|
import { H as Helper } from './Helper-d07ebbc7.js';
|
|
3
3
|
|
|
4
4
|
const sallaButtonCss = ":host{display:block}";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { r as registerInstance, h, g as getElement } from './index-
|
|
1
|
+
import { r as registerInstance, h, g as getElement } from './index-9c087700.js';
|
|
2
2
|
import { H as Helper } from './Helper-d07ebbc7.js';
|
|
3
3
|
|
|
4
4
|
const sallaLoginCss = "salla-verify{display:block}";
|
|
@@ -6,9 +6,6 @@ const sallaLoginCss = "salla-verify{display:block}";
|
|
|
6
6
|
const SallaLogin = class {
|
|
7
7
|
constructor(hostRef) {
|
|
8
8
|
registerInstance(this, hostRef);
|
|
9
|
-
this.inputChanged = (event) => {
|
|
10
|
-
console.log('input changed: ', event.target.value);
|
|
11
|
-
};
|
|
12
9
|
this.regType = 'sms';
|
|
13
10
|
this.isLoginByMail = true;
|
|
14
11
|
this.loginTypeTitle = salla.lang.get('blocks.header.select_login_way');
|
|
@@ -59,7 +56,6 @@ const SallaLogin = class {
|
|
|
59
56
|
setTimeout(() => { this.host.querySelector('.s-login-wrapper').setAttribute('style', 'height:' + (tab === null || tab === void 0 ? void 0 : tab.scrollHeight) + 'px'); });
|
|
60
57
|
if ([this.tab2, this.tab3].includes(tab)) {
|
|
61
58
|
this.regType = tab === this.tab2 ? 'sms' : 'email';
|
|
62
|
-
this.backText = this.regType == 'sms' ? 'تغيير رقم الهاتف' : 'تغيير البريد';
|
|
63
59
|
}
|
|
64
60
|
let isRegistrationTab = tab == this.tab5;
|
|
65
61
|
this.modal.setTitle(isRegistrationTab ? salla.lang.get('common.titles.registration') : this.title);
|
|
@@ -117,7 +113,7 @@ const SallaLogin = class {
|
|
|
117
113
|
render() {
|
|
118
114
|
return (h("salla-modal", { id: "salla-login", title: this.title, ref: modal => this.modal = modal, width: "xs" }, h("div", { class: "s-login-wrapper" }, this.isLoginByMail ?
|
|
119
115
|
h("div", { class: "s-login-tab", ref: tab => this.tab1 = tab }, h("p", { class: "s-login-sub-title" }, this.loginTypeTitle), h("a", { href: "#", class: "s-login-main-btn", onClick: () => this.showTab(this.tab2) }, h("i", { class: "s-login-main-btn-icon sicon-phone" }), h("span", { class: "s-login-main-btn-text" }, this.smsLabel), h("i", { class: "main-btn-arrow sicon-keyboard_arrow_left" })), h("a", { href: "#", class: "s-login-main-btn", onClick: () => this.showTab(this.tab3) }, h("i", { class: "s-login-main-btn-icon sicon-mail" }), h("span", { class: "s-login-main-btn-text" }, this.emailLabel), h("i", { class: "main-btn-arrow sicon-keyboard_arrow_left" })))
|
|
120
|
-
: '', h("div", { class: "s-login-tab", ref: tab => this.tab2 = tab }, h("label", { class: "s-login-label" }, this.mobileLabel), h("input", { onChange: () => this.loginBySMS(), type: "tel", ref: el => this.mobile = el, onInput: this.typing, placeholder: "5xx xxx xxx", class: "s-login-input tel-input s-ltr" }), h("span", { class: "s-login-error-message" }), h("salla-button", { wide: true, onClick: () => this.loginBySMS() }, this.enterText), this.isLoginByMail ? h("a", { href: "#", onClick: () => this.showTab(this.tab3), class: "s-login-link" }, this.byEmailText) : ''), this.isLoginByMail ?
|
|
116
|
+
: '', h("div", { class: "s-login-tab", ref: tab => this.tab2 = tab }, h("label", { class: "s-login-label" }, this.mobileLabel), h("salla-tel-input", null), h("input", { onChange: () => this.loginBySMS(), type: "tel", ref: el => this.mobile = el, onInput: this.typing, placeholder: "5xx xxx xxx", class: "s-login-input tel-input s-ltr" }), h("span", { class: "s-login-error-message" }), h("salla-button", { wide: true, onClick: () => this.loginBySMS() }, this.enterText), this.isLoginByMail ? h("a", { href: "#", onClick: () => this.showTab(this.tab3), class: "s-login-link" }, this.byEmailText) : ''), this.isLoginByMail ?
|
|
121
117
|
h("div", { class: "s-login-tab", ref: tab => this.tab3 = tab }, h("label", { class: "s-login-label" }, this.emailLabel), h("input", { onChange: () => this.loginByEmail(), type: "email", ref: el => this.email = el, onInput: this.typing, placeholder: "your@email.com", class: "s-login-input s-ltr" }), h("span", { class: "s-login-error-message" }), h("salla-button", { wide: true, onClick: () => this.loginByEmail() }, this.enterText), h("a", { href: "#", onClick: () => this.showTab(this.tab2), class: "s-login-link" }, this.bySMSText)) : '', h("salla-verify", { "without-modal": true, ref: tab => this.tab4 = tab, autoReload: false, "back-text": this.backText }), h("div", { ref: tab => this.tab5 = tab }, h("label", { class: "s-login-label" }, salla.lang.get('blocks.header.your_name')), h("input", { type: "text", class: "s-login-input", ref: el => this.firstName = el, placeholder: salla.lang.get('pages.profile.first_name') }), h("label", { class: "s-login-label" }, salla.lang.get('pages.profile.last_name')), h("input", { type: "text", class: "s-login-input", ref: el => this.lastName = el, placeholder: salla.lang.get('pages.profile.last_name') }), h("div", { ref: el => this.regMobileBlock = el }, h("label", { class: "s-login-label" }, this.mobileLabel), h("input", { type: "tel", ref: el => this.regMobile = el, onInput: this.typing, placeholder: "5xx xxx xxx", class: "s-login-input s-ltr" }), h("span", { class: "s-login-error-message" })), h("div", { ref: el => this.regEmailBlock = el }, h("label", { class: "s-login-label" }, this.emailLabel), h("input", { type: "email", ref: el => this.regEmail = el, onInput: this.typing, placeholder: "your@email.com", class: "s-login-input s-ltr" }), h("span", { class: "s-login-error-message" })), h("salla-button", { wide: true, onClick: () => this.newUser() }, salla.lang.get('blocks.header.register'))))));
|
|
122
118
|
}
|
|
123
119
|
get host() { return getElement(this); }
|
|
@@ -1,10 +1,13 @@
|
|
|
1
|
-
import { r as registerInstance, h, g as getElement } from './index-
|
|
1
|
+
import { r as registerInstance, h, g as getElement } from './index-799f93d3.js';
|
|
2
2
|
import { H as Helper } from './Helper-d07ebbc7.js';
|
|
3
3
|
|
|
4
|
+
const sallaLoginCss = "salla-verify{display:block}";
|
|
5
|
+
|
|
4
6
|
const SallaLogin = class {
|
|
5
7
|
constructor(hostRef) {
|
|
6
8
|
registerInstance(this, hostRef);
|
|
7
9
|
this.regType = 'sms';
|
|
10
|
+
this.isLoginByMail = true;
|
|
8
11
|
this.loginTypeTitle = salla.lang.get('blocks.header.select_login_way');
|
|
9
12
|
this.loginText = salla.lang.get('blocks.header.login');
|
|
10
13
|
this.smsLabel = salla.lang.get('blocks.header.sms');
|
|
@@ -40,14 +43,17 @@ const SallaLogin = class {
|
|
|
40
43
|
}
|
|
41
44
|
window.location.reload();
|
|
42
45
|
}
|
|
43
|
-
|
|
44
|
-
this.showTab(this.
|
|
46
|
+
onbackClicked() {
|
|
47
|
+
this.regType == 'sms' ? this.showTab(this.tab2) : this.showTab(this.tab3);
|
|
45
48
|
}
|
|
46
49
|
async show() {
|
|
50
|
+
this.showTab(this.isLoginByMail ? this.tab1 : this.tab2);
|
|
47
51
|
return this.modal.show();
|
|
48
52
|
}
|
|
49
53
|
showTab(tab) {
|
|
50
54
|
[this.tab1, this.tab2, this.tab3, this.tab4, this.tab5].map(el => Helper.toggleElement(el, 'visible', 'hidden', () => el == tab));
|
|
55
|
+
setTimeout(() => { [this.tab1, this.tab2, this.tab3, this.tab4, this.tab5].map(el => Helper.toggleElement(el, 's-login-active', 's-login-unactive', () => el == tab)); }, 200);
|
|
56
|
+
setTimeout(() => { this.host.querySelector('.s-login-wrapper').setAttribute('style', 'height:' + (tab === null || tab === void 0 ? void 0 : tab.scrollHeight) + 'px'); });
|
|
51
57
|
if ([this.tab2, this.tab3].includes(tab)) {
|
|
52
58
|
this.regType = tab === this.tab2 ? 'sms' : 'email';
|
|
53
59
|
}
|
|
@@ -105,12 +111,13 @@ const SallaLogin = class {
|
|
|
105
111
|
}));
|
|
106
112
|
}
|
|
107
113
|
render() {
|
|
108
|
-
return (h("salla-modal", { id: "salla-login", title: this.title, ref: modal => this.modal = modal, width: "xs" }, h("div", { class: "s-login-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
114
|
+
return (h("salla-modal", { id: "salla-login", title: this.title, ref: modal => this.modal = modal, width: "xs" }, h("div", { class: "s-login-wrapper" }, this.isLoginByMail ?
|
|
115
|
+
h("div", { class: "s-login-tab", ref: tab => this.tab1 = tab }, h("p", { class: "s-login-sub-title" }, this.loginTypeTitle), h("a", { href: "#", class: "s-login-main-btn", onClick: () => this.showTab(this.tab2) }, h("i", { class: "s-login-main-btn-icon sicon-phone" }), h("span", { class: "s-login-main-btn-text" }, this.smsLabel), h("i", { class: "main-btn-arrow sicon-keyboard_arrow_left" })), h("a", { href: "#", class: "s-login-main-btn", onClick: () => this.showTab(this.tab3) }, h("i", { class: "s-login-main-btn-icon sicon-mail" }), h("span", { class: "s-login-main-btn-text" }, this.emailLabel), h("i", { class: "main-btn-arrow sicon-keyboard_arrow_left" })))
|
|
116
|
+
: '', h("div", { class: "s-login-tab", ref: tab => this.tab2 = tab }, h("label", { class: "s-login-label" }, this.mobileLabel), h("salla-tel-input", null), h("input", { onChange: () => this.loginBySMS(), type: "tel", ref: el => this.mobile = el, onInput: this.typing, placeholder: "5xx xxx xxx", class: "s-login-input tel-input s-ltr" }), h("span", { class: "s-login-error-message" }), h("salla-button", { wide: true, onClick: () => this.loginBySMS() }, this.enterText), this.isLoginByMail ? h("a", { href: "#", onClick: () => this.showTab(this.tab3), class: "s-login-link" }, this.byEmailText) : ''), this.isLoginByMail ?
|
|
117
|
+
h("div", { class: "s-login-tab", ref: tab => this.tab3 = tab }, h("label", { class: "s-login-label" }, this.emailLabel), h("input", { onChange: () => this.loginByEmail(), type: "email", ref: el => this.email = el, onInput: this.typing, placeholder: "your@email.com", class: "s-login-input s-ltr" }), h("span", { class: "s-login-error-message" }), h("salla-button", { wide: true, onClick: () => this.loginByEmail() }, this.enterText), h("a", { href: "#", onClick: () => this.showTab(this.tab2), class: "s-login-link" }, this.bySMSText)) : '', h("salla-verify", { "without-modal": true, ref: tab => this.tab4 = tab, autoReload: false, "back-text": this.backText }), h("div", { ref: tab => this.tab5 = tab }, h("label", { class: "s-login-label" }, salla.lang.get('blocks.header.your_name')), h("input", { type: "text", class: "s-login-input", ref: el => this.firstName = el, placeholder: salla.lang.get('pages.profile.first_name') }), h("label", { class: "s-login-label" }, salla.lang.get('pages.profile.last_name')), h("input", { type: "text", class: "s-login-input", ref: el => this.lastName = el, placeholder: salla.lang.get('pages.profile.last_name') }), h("div", { ref: el => this.regMobileBlock = el }, h("label", { class: "s-login-label" }, this.mobileLabel), h("input", { type: "tel", ref: el => this.regMobile = el, onInput: this.typing, placeholder: "5xx xxx xxx", class: "s-login-input s-ltr" }), h("span", { class: "s-login-error-message" })), h("div", { ref: el => this.regEmailBlock = el }, h("label", { class: "s-login-label" }, this.emailLabel), h("input", { type: "email", ref: el => this.regEmail = el, onInput: this.typing, placeholder: "your@email.com", class: "s-login-input s-ltr" }), h("span", { class: "s-login-error-message" })), h("salla-button", { wide: true, onClick: () => this.newUser() }, salla.lang.get('blocks.header.register'))))));
|
|
112
118
|
}
|
|
113
119
|
get host() { return getElement(this); }
|
|
114
120
|
};
|
|
121
|
+
SallaLogin.style = sallaLoginCss;
|
|
115
122
|
|
|
116
123
|
export { SallaLogin as S };
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
export { S as salla_login } from './salla-login-
|
|
2
|
-
import './index-
|
|
1
|
+
export { S as salla_login } from './salla-login-57b18c2c.js';
|
|
2
|
+
import './index-9c087700.js';
|
|
3
3
|
import './Helper-d07ebbc7.js';
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { r as registerInstance, f as createEvent, h, e as Host, g as getElement } from './index-
|
|
1
|
+
import { r as registerInstance, f as createEvent, h, e as Host, g as getElement } from './index-9c087700.js';
|
|
2
2
|
import { H as Helper } from './Helper-d07ebbc7.js';
|
|
3
3
|
|
|
4
4
|
const SallaModal = class {
|
|
@@ -1,9 +1,15 @@
|
|
|
1
|
-
import { r as registerInstance, h, g as getElement } from './index-
|
|
1
|
+
import { r as registerInstance, h, g as getElement } from './index-9c087700.js';
|
|
2
|
+
import { H as Helper } from './Helper-d07ebbc7.js';
|
|
2
3
|
|
|
3
4
|
const SallaOffer = class {
|
|
4
5
|
constructor(hostRef) {
|
|
5
6
|
registerInstance(this, hostRef);
|
|
7
|
+
var _a, _b, _c;
|
|
6
8
|
this.offer = null;
|
|
9
|
+
Helper.setHost(this.host);
|
|
10
|
+
this.headerSlot = ((_a = Helper.getElement('[slot="header"]')) === null || _a === void 0 ? void 0 : _a.innerHTML) || '<b class="s-offer-title">{name}</b><h3 class="s-offer-subtitle">{message}</h3>';
|
|
11
|
+
this.categorySlot = ((_b = Helper.getElement('[slot="category"]')) === null || _b === void 0 ? void 0 : _b.innerHTML) || '<i class="s-offer-badge-icon sicon-tag"></i><span class="s-offer-badge-text">{name}</span>';
|
|
12
|
+
this.productSlot = ((_c = Helper.getElement('[slot="product"]')) === null || _c === void 0 ? void 0 : _c.innerHTML) || this.defaultProductSlot();
|
|
7
13
|
salla.offer.event.onExisted(data => {
|
|
8
14
|
//TODO:: use the best, should we hide the offer by product Id or Offer id🤔
|
|
9
15
|
if (salla.localStore.get('remember-offer-' + data.offer.offer_id)) {
|
|
@@ -14,29 +20,52 @@ const SallaOffer = class {
|
|
|
14
20
|
});
|
|
15
21
|
}
|
|
16
22
|
async show(productId) {
|
|
17
|
-
this.modal.show()
|
|
23
|
+
return this.modal.show()
|
|
18
24
|
.then(() => salla.api.offer.details(productId))
|
|
19
25
|
//TODO:: make sure there is only one offer
|
|
20
|
-
.then(response => this.offer = response.data[0])
|
|
21
|
-
.then(() => console.log(this.offer));
|
|
26
|
+
.then(response => this.offer = response.data[0]);
|
|
22
27
|
}
|
|
23
28
|
rememberMe(event) {
|
|
24
29
|
salla.localStore.set('remember-offer-' + this.offer.id, event.target.checked);
|
|
25
30
|
}
|
|
31
|
+
addItem() {
|
|
32
|
+
// this here, is sallaButton
|
|
33
|
+
this['load']();
|
|
34
|
+
return salla.cart.api
|
|
35
|
+
.quickAdd(this['dataset'].id)
|
|
36
|
+
.finally(() => this['stop']());
|
|
37
|
+
}
|
|
38
|
+
defaultProductSlot() {
|
|
39
|
+
return '<a href={url} class="s-offer-product-image"><img class="s-offer-product-img" src="{image}" /></a>' +
|
|
40
|
+
'<div class="s-offer-product-info">' +
|
|
41
|
+
' <a href={url} class="s-offer-product-name">{name}</a>' +
|
|
42
|
+
' <div class="s-offer-product-price">{price}</div>' +
|
|
43
|
+
'</div>';
|
|
44
|
+
}
|
|
26
45
|
render() {
|
|
27
46
|
var _a, _b;
|
|
28
47
|
return h("salla-modal", { ref: modal => this.modal = modal, "is-loading": this.offer === null }, this.offer !== null
|
|
29
|
-
? [h("div", { class: "s-offer-header"
|
|
48
|
+
? [h("div", { class: "s-offer-header", innerHTML: this.headerSlot
|
|
49
|
+
.replace(/\{name\}/g, this.offer.name)
|
|
50
|
+
.replace(/\{message\}/g, this.offer.message) }),
|
|
30
51
|
h("div", { class: "s-offer-body" }, ((_a = this.offer.get.categories) === null || _a === void 0 ? void 0 : _a.length) > 0
|
|
31
|
-
? this.offer.get.categories.map(category => h("a", { href: category.urls.customer, class: "s-offer-badge"
|
|
32
|
-
|
|
33
|
-
|
|
52
|
+
? this.offer.get.categories.map(category => h("a", { href: category.urls.customer, class: "s-offer-badge", innerHTML: this.categorySlot
|
|
53
|
+
.replace(/\{name\}/g, category.name)
|
|
54
|
+
.replace(/\{url\}/g, category.urls.customer) }))
|
|
55
|
+
: (_b = this.offer.get.products) === null || _b === void 0 ? void 0 : _b.map(product => h("div", { class: "s-offer-product", id: 'product_' + product.id, innerHTML: this.productSlot
|
|
56
|
+
.replace(/\{name\}/g, product.name)
|
|
57
|
+
.replace(/\{url\}/g, product.url)
|
|
58
|
+
.replace(/\{image\}/g, product.thumbnail)
|
|
59
|
+
.replace(/\{price\}/g, product.has_special_price
|
|
60
|
+
? salla.money(product.sale_price) + '<span class="s-offer-product-old-price">' + salla.money(product.regular_price) + '</span>'
|
|
61
|
+
: salla.money(product.price)) }, h("salla-button", { "btn-style": 'outline-primary', "data-id": product.id, onClick: this.addItem }, salla.lang.get('pages.cart.add_to_cart'))))),
|
|
62
|
+
h("div", { class: "s-offer-footer", slot: "footer" }, this.offer.expiry_date ?
|
|
34
63
|
h("p", { class: "s-offer-expiry" }, salla.lang.get('pages.products.offer_expires_in'), " ", this.offer.expiry_date)
|
|
35
64
|
: '', h("label", { class: "s-offer-remember-label" }, h("input", { type: "checkbox", onChange: e => this.rememberMe(e), class: "s-offer-remember-input" }), "\u00A0 ", salla.lang.get('common.remember_my_choice'))),
|
|
36
65
|
] : '');
|
|
37
66
|
}
|
|
38
67
|
componentDidRender() {
|
|
39
|
-
//todo::
|
|
68
|
+
//todo:: know from where there is hidden attributes to the doms🤔
|
|
40
69
|
//todo:: add animation
|
|
41
70
|
this.modal.querySelectorAll('[hidden]').forEach(el => el.removeAttribute('hidden'));
|
|
42
71
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { r as registerInstance, h, e as Host, g as getElement } from './index-
|
|
1
|
+
import { r as registerInstance, h, e as Host, g as getElement } from './index-9c087700.js';
|
|
2
2
|
import { H as Helper } from './Helper-d07ebbc7.js';
|
|
3
3
|
|
|
4
4
|
const SallaProductAvailability = class {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { r as registerInstance, h, e as Host, g as getElement } from './index-
|
|
1
|
+
import { r as registerInstance, h, e as Host, g as getElement } from './index-9c087700.js';
|
|
2
2
|
import { H as Helper } from './Helper-d07ebbc7.js';
|
|
3
3
|
|
|
4
4
|
const sallaRatingCss = ":host{display:block}.unicode{unicode-bidi:plaintext}";
|
|
@@ -6,87 +6,41 @@ const sallaRatingCss = ":host{display:block}.unicode{unicode-bidi:plaintext}";
|
|
|
6
6
|
const SallaRating = class {
|
|
7
7
|
constructor(hostRef) {
|
|
8
8
|
registerInstance(this, hostRef);
|
|
9
|
-
this.order = {
|
|
10
|
-
shipping: { id: 5622 },
|
|
11
|
-
products: [
|
|
12
|
-
{
|
|
13
|
-
"title": "ميكروفون عالى الجودة",
|
|
14
|
-
"image": "https://salla-dev.s3.eu-central-1.amazonaws.com/Mvyk/pMdEEyMVpZFj4L1Hrdm2g48AuiSx0TrKULBiOnPo.jpg",
|
|
15
|
-
"price": "10,978.00 ر.س",
|
|
16
|
-
"qty": "2",
|
|
17
|
-
"totalBefore": "1120 ر.س",
|
|
18
|
-
"discount": "-5%",
|
|
19
|
-
"total": "1064 ر.س",
|
|
20
|
-
"id": "2314513454",
|
|
21
|
-
"getOptimusRouteKey": "7351233357"
|
|
22
|
-
},
|
|
23
|
-
{
|
|
24
|
-
"title": "ميكروفون عالى الجودة",
|
|
25
|
-
"image": "https://salla-dev.s3.eu-central-1.amazonaws.com/Mvyk/pMdEEyMVpZFj4L1Hrdm2g48AuiSx0TrKULBiOnPo.jpg",
|
|
26
|
-
"price": "10,978.00 ر.س",
|
|
27
|
-
"qty": "2",
|
|
28
|
-
"totalBefore": "1120 ر.س",
|
|
29
|
-
"discount": "-5%",
|
|
30
|
-
"total": "1064 ر.س",
|
|
31
|
-
"id": "2314513454",
|
|
32
|
-
"getOptimusRouteKey": "7351233357"
|
|
33
|
-
},
|
|
34
|
-
{
|
|
35
|
-
"title": "ساعة ذكية بنظام اندرويد",
|
|
36
|
-
"image": "https://salla-dev.s3.eu-central-1.amazonaws.com/Mvyk/T4kTqYNuPAZmPMLw1bx92RnjVMZyFszVXOUZQsFJ.jpg",
|
|
37
|
-
"price": "10,978.00 ر.س",
|
|
38
|
-
"qty": "2",
|
|
39
|
-
"totalBefore": "1120 ر.س",
|
|
40
|
-
"discount": "-5%",
|
|
41
|
-
"total": "1064 ر.س",
|
|
42
|
-
"id": "679822376",
|
|
43
|
-
"getOptimusRouteKey": "73233357"
|
|
44
|
-
}
|
|
45
|
-
],
|
|
46
|
-
storeLogo: "https://salla-dev.s3.eu-central-1.amazonaws.com/Mvyk/X3NKcY7nhaFQlR7kBBHvfDpMY48cerunKrmDA1gi.png",
|
|
47
|
-
shippingLogo: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcScPt4R6KaKDldrXb-9pUljFwL3m6A72BhN6p1qZJKprwC6VbCWC_8ASZgiJAoL_l7DepM&usqp=CAU"
|
|
48
|
-
};
|
|
49
9
|
/**
|
|
50
10
|
* Set to true to display store rating step
|
|
51
|
-
|
|
11
|
+
*/
|
|
52
12
|
this.isStoreRating = false;
|
|
53
13
|
/**
|
|
54
14
|
* Set to true to display products rating step
|
|
55
|
-
|
|
15
|
+
*/
|
|
56
16
|
this.isProductsRating = false;
|
|
57
17
|
/**
|
|
58
18
|
* Set to true to display shipping rating step
|
|
59
|
-
|
|
19
|
+
*/
|
|
60
20
|
this.isShippingRating = false;
|
|
61
21
|
this.ratingChain = Promise.resolve();
|
|
62
22
|
this.stepsCount = 0;
|
|
63
23
|
Helper.setHost(this.host);
|
|
24
|
+
salla.event.on('rating::show', () => this.show());
|
|
64
25
|
}
|
|
65
26
|
async show() {
|
|
66
|
-
return this.modal.show()
|
|
27
|
+
return this.modal.show()
|
|
28
|
+
.then(() => salla.feedback.api.order(salla.get('page.id')))
|
|
29
|
+
.then(res => this.order = res.data)
|
|
30
|
+
.then(() => this.modal.setTitle(salla.lang.get('pages.rating.rate_order') + ' <span class="unicode">(#' + this.order.id + ')</span>'))
|
|
31
|
+
.then(() => this.modal.stopLoading())
|
|
32
|
+
.then(() => this.stepsCount = [this.order.testimonials_enabled, this.order.products_enabled, this.order.shipping_enabled].filter(enabled => enabled).length)
|
|
33
|
+
.then(() => setTimeout(() => this.initiateRating(), 100));
|
|
67
34
|
}
|
|
68
35
|
async hide() {
|
|
69
36
|
return this.modal.hide();
|
|
70
37
|
}
|
|
71
|
-
componentWillLoad() {
|
|
72
|
-
this.stepsCount = [this.isStoreRating, this.isProductsRating, this.isShippingRating].filter(item => item).length;
|
|
73
|
-
// this.getData();
|
|
74
|
-
}
|
|
75
|
-
componentDidRender() {
|
|
76
|
-
this.show();
|
|
77
|
-
this.initiateRating();
|
|
78
|
-
}
|
|
79
38
|
initiateRating() {
|
|
80
39
|
this.handleWizard();
|
|
81
40
|
this.handleSubmitRating();
|
|
82
41
|
this.starsRating();
|
|
83
42
|
this.highlightSelectedStars();
|
|
84
43
|
}
|
|
85
|
-
// getdata
|
|
86
|
-
// private getData() {
|
|
87
|
-
// salla.api.order.endpointsMethods.details = 'get'
|
|
88
|
-
// salla.order.api.details(salla.config.page.id).then(data => console.log(''));
|
|
89
|
-
// }
|
|
90
44
|
// handle wizard
|
|
91
45
|
handleWizard() {
|
|
92
46
|
let index = 0, steps = this.host.querySelectorAll(".s-rating-step"), dots = this.host.querySelectorAll(".s-rating-step-dot"), nextBtnText = this.host.querySelector('#next-btn .s-button-text');
|
|
@@ -139,7 +93,7 @@ const SallaRating = class {
|
|
|
139
93
|
clearInterval(timeToClose);
|
|
140
94
|
}
|
|
141
95
|
}, 1000);
|
|
142
|
-
// Hide steps and show thanks msg
|
|
96
|
+
// Hide steps and show thanks msg
|
|
143
97
|
Helper.toggle('.s-rating-step', 's-rating-hidden', 's-rating-active', () => true);
|
|
144
98
|
this.host.querySelector('.s-rating-footer').classList.add('s-rating-unvisiable');
|
|
145
99
|
Helper.toggleElement(thankYouView, 's-rating-unactive', 's-rating-hidden', () => true);
|
|
@@ -147,7 +101,7 @@ const SallaRating = class {
|
|
|
147
101
|
this.setModalHeight(thankYouView);
|
|
148
102
|
}));
|
|
149
103
|
}
|
|
150
|
-
// handle star rating
|
|
104
|
+
// handle star rating
|
|
151
105
|
starsRating() {
|
|
152
106
|
let selectedClasses = ['selected'];
|
|
153
107
|
// Listen for form submissions
|
|
@@ -269,25 +223,32 @@ const SallaRating = class {
|
|
|
269
223
|
throw new Error(errorMsg);
|
|
270
224
|
}
|
|
271
225
|
}
|
|
272
|
-
// render
|
|
273
|
-
render() {
|
|
274
|
-
return (h(Host, null, h("salla-modal", { class: "hidden", "modal-width": "w-[800px]", ref: modal => this.modal = modal, title: salla.lang.get('pages.rating.rate_order') + ' <span class="unicode">(#' + this.orderId + ')</span>' }, h("div", { class: "s-rating-wrapper " }, this.isStoreRating && this.renderStoreRating(), this.isProductsRating && this.renderProductsRating(), this.isShippingRating && this.renderShippingRating(), this.renderThanksView()), h("div", { class: "s-rating-footer" }, h("button", { id: "prev-btn", class: "s-rating-btn s-rating-unvisiable" }, salla.lang.get('pages.order.rating_prev')), this.stepsCount > 1 ?
|
|
275
|
-
h("ul", { class: "s-rating-dots" }, [0, 1, 2].slice(0, this.stepsCount).map(index => h("li", { class: `${index == 0 ? 's-rating-bg-primary' : 's-rating-bg-gray'} s-rating-step-dot` }))) : '', h("salla-button", { id: "next-btn", ref: nextBtn => this.nextBtn = nextBtn }, "\u0627\u0644\u062A\u0627\u0644\u064A")))));
|
|
276
|
-
}
|
|
277
226
|
renderStoreRating() {
|
|
278
|
-
return (h("section", { class: "s-rating-step", "data-type": "store", "data-step-name": salla.lang.get('pages.rating.rate') + ' ' + salla.lang.get('pages.rating.store') }, h("div", { class: "rating-outer-form s-rating-step-wrap", "data-stars-error": salla.lang.get('pages.rating.rate_store_stars') }, h("input", { type: "hidden", name: "order_id", value: this.
|
|
227
|
+
return (h("section", { class: "s-rating-step", "data-type": "store", "data-step-name": salla.lang.get('pages.rating.rate') + ' ' + salla.lang.get('pages.rating.store') }, h("div", { class: "rating-outer-form s-rating-step-wrap", "data-stars-error": salla.lang.get('pages.rating.rate_store_stars') }, h("input", { type: "hidden", name: "order_id", value: this.order.id }), h("input", { type: "hidden", name: "type", value: "store" }), h("div", { class: "s-rating-rounded-icon" }, h("img", { src: salla.get('store.logo'), alt: "store name", class: "s-rating-store-logo" })), h("h2", { class: "s-rating-title" }, salla.lang.get('pages.rating.rate_the_store')), h("div", { class: "s-rating-stars-company" }, " ", this.getStarsRating('large')), h("textarea", { id: "storeReview", name: "comment", class: "s-rating-comment", placeholder: salla.lang.get('pages.rating.write_store_rate') }), h("small", { class: "s-rating-validation-msg" }))));
|
|
279
228
|
}
|
|
280
229
|
renderShippingRating() {
|
|
281
|
-
return (h("section", { class: "s-rating-step", "data-type": "shipping", "data-step-name": salla.lang.get('pages.rating.rate') + ' ' + salla.lang.get('pages.rating.shipping') }, h("div", { class: "rating-outer-form s-rating-step-wrap", "data-stars-error": salla.lang.get('pages.rating.rate_shipping_stars') }, h("input", { type: "hidden", name: "order_id", value: this.
|
|
230
|
+
return (h("section", { class: "s-rating-step", "data-type": "shipping", "data-step-name": salla.lang.get('pages.rating.rate') + ' ' + salla.lang.get('pages.rating.shipping') }, h("div", { class: "rating-outer-form s-rating-step-wrap", "data-stars-error": salla.lang.get('pages.rating.rate_shipping_stars') }, h("input", { type: "hidden", name: "order_id", value: this.order.id }), h("input", { type: "hidden", name: "shipping_company_id", value: this.order.shipping.company.id }), h("input", { type: "hidden", name: "type", value: "shipping" }), h("div", { class: "s-rating-rounded-icon" }, h("img", { src: this.order.shipping.company.logo, alt: "company name", class: "s-rating-shipping-logo" })), h("h2", { class: "s-rating-title" }, " ", salla.lang.get('pages.rating.rate_shipping') + ' ' + this.order.shipping.company.name), h("div", { class: "s-rating-stars-company" }, " ", this.getStarsRating('large')), h("textarea", { id: "shippingReview", name: "comment", class: "s-rating-comment", placeholder: salla.lang.get('pages.rating.write_shipping_rate') }), h("small", { class: "s-rating-validation-msg" }))));
|
|
282
231
|
}
|
|
283
232
|
renderProductsRating() {
|
|
284
|
-
return (h("section", { class: "s-rating-step", "data-type": "product", "data-step-name": salla.lang.get('pages.rating.rate') + ' ' + salla.lang.get('pages.rating.products') }, this.order.products.map((item, index) => h("div", { class: "rating-outer-form s-rating-product", "data-stars-error": salla.lang.get('pages.
|
|
233
|
+
return (h("section", { class: "s-rating-step", "data-type": "product", "data-step-name": salla.lang.get('pages.rating.rate') + ' ' + salla.lang.get('pages.rating.products') }, this.order.products.map((item, index) => h("div", { class: "rating-outer-form s-rating-product", "data-stars-error": salla.lang.get('pages.rating.rate_product_stars') }, h("img", { src: item.product.thumbnail, alt: item.product.name, class: "s-rating-product-img" }), h("div", { class: "s-rating-product-details" }, h("h3", { class: "s-rating-product-title" }, " ", item.product.name), h("div", { class: "s-rating-stars-product" }, " ", this.getStarsRating('small')), h("input", { type: "hidden", name: "order_id", value: this.order.id }), h("input", { type: "hidden", name: `products[${index}][product_id]`, value: item.product.id }), h("input", { type: "hidden", name: "type", value: "products" }), h("textarea", { "data-product-id": item.product.id, name: `products[${index}][comment]`, id: `productReview_${item.product.id}`, class: "s-rating-comment", placeholder: salla.lang.get('pages.rating.write_product_rate') }), h("small", { class: "s-rating-validation-msg" }))))));
|
|
285
234
|
}
|
|
286
235
|
renderThanksView() {
|
|
287
236
|
return (h("div", { class: "s-rating-thanks s-rating-hidden" }, h("span", { class: "s-rating-thanks-icon sicon-check-circle2" }), h("h3", { class: "s-rating-thanks-title" }, salla.lang.get('pages.rating.thanks')), h("div", { class: "s-rating-thanks-msg", innerHTML: this.thanksMsg }), h("a", { href: "#!", onClick: () => this.hide(), class: "s-rating-thanks-btn" }, "\u0639\u0648\u062F\u0629 \u0625\u0644\u064A \u062A\u0641\u0627\u0635\u064A\u0644 \u0627\u0644\u0637\u0644\u0628"), h("time", { class: "s-rating-thanks-time" })));
|
|
288
237
|
}
|
|
289
238
|
getStarsRating(size) {
|
|
290
|
-
return (h("form", { class: "s-rating-stars-element" }, h("input", { type: "hidden", class: "rating_hidden_input", name: "rating", value: "" }), [1, 2, 3, 4, 5].map(
|
|
239
|
+
return (h("form", { class: "s-rating-stars-element" }, h("input", { type: "hidden", class: "rating_hidden_input", name: "rating", value: "" }), [1, 2, 3, 4, 5].map(star => h("button", { type: "submit", class: `s-rating-btn-star s-rating-btn-star-` + size, "data-star": star }, h("i", { class: "sicon-star2" })))));
|
|
240
|
+
}
|
|
241
|
+
// render
|
|
242
|
+
render() {
|
|
243
|
+
return (h(Host, null, h("salla-modal", { isLoading: true, width: "md", ref: modal => this.modal = modal }, this.order
|
|
244
|
+
? [h("div", { class: "s-rating-wrapper " }, this.order.testimonials_enabled && this.renderStoreRating(), this.order.products_enabled && this.renderProductsRating(), this.order.shipping_enabled && this.renderShippingRating(), this.renderThanksView()),
|
|
245
|
+
h("div", { class: "s-rating-footer" }, h("button", { id: "prev-btn", class: "s-rating-btn s-rating-unvisiable" }, salla.lang.get('common.elements.back')), this.stepsCount > 1 ?
|
|
246
|
+
h("ul", { class: "s-rating-dots" }, [0, 1, 2].slice(0, this.stepsCount).map(index => h("li", { class: `${index == 0 ? 's-rating-bg-primary' : 's-rating-bg-gray'} s-rating-step-dot` }))) : '', h("salla-button", { id: "next-btn", ref: nextBtn => this.nextBtn = nextBtn }, "\u0627\u0644\u062A\u0627\u0644\u064A")),]
|
|
247
|
+
: '')));
|
|
248
|
+
}
|
|
249
|
+
componentDidRender() {
|
|
250
|
+
//todo:: know from where there is hidden attributes to the doms🤔
|
|
251
|
+
this.modal.querySelectorAll('[hidden]').forEach(el => el.removeAttribute('hidden'));
|
|
291
252
|
}
|
|
292
253
|
get host() { return getElement(this); }
|
|
293
254
|
};
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
import { r as registerInstance, h, e as Host, g as getElement } from './index-9c087700.js';
|
|
2
|
+
import { H as Helper } from './Helper-d07ebbc7.js';
|
|
3
|
+
|
|
4
|
+
const SallaSearch = class {
|
|
5
|
+
constructor(hostRef) {
|
|
6
|
+
registerInstance(this, hostRef);
|
|
7
|
+
var _a, _b;
|
|
8
|
+
this.results = [];
|
|
9
|
+
/**
|
|
10
|
+
* Override search placeholder.
|
|
11
|
+
*/
|
|
12
|
+
this.placeholder = salla.lang.get('blocks.header.search_placeholder');
|
|
13
|
+
/**
|
|
14
|
+
* Override no results error message.
|
|
15
|
+
*/
|
|
16
|
+
this.noResultsText = salla.lang.get('common.elements.no_options');
|
|
17
|
+
Helper.setHost(this.host);
|
|
18
|
+
this.buttonSlot = ((_a = Helper.getElement('[slot="button"]')) === null || _a === void 0 ? void 0 : _a.innerHTML) || '<i class="sicon-search"></i>';
|
|
19
|
+
this.productSlot = ((_b = Helper.getElement('[slot="product"]')) === null || _b === void 0 ? void 0 : _b.innerHTML) || this.getDefaultProductSlot();
|
|
20
|
+
}
|
|
21
|
+
onModalClose() {
|
|
22
|
+
Helper.getElement('.s-search-input').value = '';
|
|
23
|
+
this.results = [];
|
|
24
|
+
this.afterSearching();
|
|
25
|
+
}
|
|
26
|
+
getDefaultProductSlot() {
|
|
27
|
+
return '<a target="_blank" href={url} class="s-search-product-image-container">' +
|
|
28
|
+
' <img class="s-search-product-image" src="{image}" alt="{name}"/>' +
|
|
29
|
+
'</a>' +
|
|
30
|
+
'<div class="s-search-product-details">' +
|
|
31
|
+
' <div class="s-search-product-name">{name}</div> <div class="s-search-product-price">{price}</div>' +
|
|
32
|
+
'</div>';
|
|
33
|
+
}
|
|
34
|
+
//todo:: reset data when closing
|
|
35
|
+
search(e) {
|
|
36
|
+
Helper.hideElement(this.noResults);
|
|
37
|
+
if (e.target.value.length === 0) {
|
|
38
|
+
this.results = [];
|
|
39
|
+
this.afterSearching();
|
|
40
|
+
return;
|
|
41
|
+
}
|
|
42
|
+
if (e.target.value.length <= 2) {
|
|
43
|
+
return;
|
|
44
|
+
}
|
|
45
|
+
//run loading spinner or stop it
|
|
46
|
+
Helper.toggleElement(this.searchIcon, 's-search-spinner-loader', 'sicon-search', () => true);
|
|
47
|
+
salla.search.api.search(e.target.value)
|
|
48
|
+
.then(response => this.results = response.results)
|
|
49
|
+
.catch(err => err !== 'Query Same As Previous!' ? this.results = [] : null)
|
|
50
|
+
.finally(() => this.afterSearching(/*isEmpty*/ false));
|
|
51
|
+
}
|
|
52
|
+
afterSearching(isEmpty = true) {
|
|
53
|
+
this.noResults.style.display = isEmpty || this.results.length > 0 ? 'none' : 'block';
|
|
54
|
+
Helper.toggleElement(this.container, 's-search-container-open', 'no-results', () => this.results.length)
|
|
55
|
+
.toggleElement(this.searchIcon, 's-search-spinner-loader', 'sicon-search', () => false); //stop searching anime
|
|
56
|
+
salla.search.api.previousQuery = ''; //avoid having error 'Query Same As Previous' after reopen modal;
|
|
57
|
+
}
|
|
58
|
+
render() {
|
|
59
|
+
var _a;
|
|
60
|
+
return (h(Host, { class: "s-search" }, h("button", { onClick: () => this.modal.show(), class: "s-search-button", innerHTML: this.buttonSlot }), h("salla-modal", { ref: modal => this.modal = modal }, h("div", { class: "s-search-container", slot: "body", ref: container => this.container = container }, h("input", { class: "s-search-input", type: "text", placeholder: this.placeholder, onInput: e => this.search(e) }), h("span", { class: "s-search-icon" }, h("i", { class: "sicon-search", ref: el => this.searchIcon = el })), h("div", { class: "s-search-results" }, (_a = this.results) === null || _a === void 0 ? void 0 :
|
|
61
|
+
_a.map(item => {
|
|
62
|
+
var _a;
|
|
63
|
+
return h("div", { class: "s-search-product", innerHTML: this.productSlot
|
|
64
|
+
.replace(/\{name\}/g, item.title)
|
|
65
|
+
.replace(/\{price\}/g, (_a = item.price) === null || _a === void 0 ? void 0 : _a.after) //todo:: get discounted price too
|
|
66
|
+
.replace(/\{url\}/g, item.url)
|
|
67
|
+
.replace(/\{image\}/g, item.thumb) });
|
|
68
|
+
}), h("p", { ref: el => this.noResults = el, class: "s-search-no-results" }, this.noResultsText))))));
|
|
69
|
+
}
|
|
70
|
+
/**
|
|
71
|
+
* Run it one time after load
|
|
72
|
+
*/
|
|
73
|
+
componentDidLoad() {
|
|
74
|
+
this.afterSearching();
|
|
75
|
+
}
|
|
76
|
+
get host() { return getElement(this); }
|
|
77
|
+
};
|
|
78
|
+
|
|
79
|
+
export { SallaSearch as S };
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
export { S as salla_search } from './salla-search-
|
|
2
|
-
import './index-
|
|
1
|
+
export { S as salla_search } from './salla-search-30fec1e8.js';
|
|
2
|
+
import './index-9c087700.js';
|
|
3
3
|
import './Helper-d07ebbc7.js';
|