@salla.sa/twilight-components 1.0.17 → 1.0.18
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/{esm/Helper-81ac9a8c.js → twilight-components/Helper-d07ebbc7.js} +1 -1
- package/dist/twilight-components/app-globals-0f993ce5.js +3 -0
- package/dist/twilight-components/css-shim-a64b8820.js +4 -0
- package/dist/twilight-components/dom-d08ba8aa.js +73 -0
- package/dist/twilight-components/index-8966d27f.js +3010 -0
- package/dist/twilight-components/index.esm.js +4 -1
- package/dist/{esm → twilight-components}/salla-branches.entry.js +1 -1
- package/dist/twilight-components/salla-button.entry.js +75 -0
- package/dist/{esm → twilight-components}/salla-localization.entry.js +18 -16
- package/dist/{esm/salla-login-32d25ffa.js → twilight-components/salla-login-7c25f64b.js} +2 -2
- package/dist/twilight-components/salla-login-b92c73dc.js +127 -0
- package/dist/twilight-components/salla-login.entry.js +3 -0
- package/dist/twilight-components/salla-modal.entry.js +113 -0
- package/dist/twilight-components/salla-offer.entry.js +46 -0
- package/dist/{esm → twilight-components}/salla-product-availability.entry.js +2 -2
- package/dist/{esm → twilight-components}/salla-rating.entry.js +2 -2
- package/dist/{esm/salla-search-f552c487.js → twilight-components/salla-search-69f2d9c1.js} +2 -2
- package/dist/twilight-components/salla-search.entry.js +3 -0
- package/dist/{collection/components/salla-verify/salla-verify.js → twilight-components/salla-verify.entry.js} +16 -140
- package/dist/twilight-components/shadow-css-bc14d9fd.js +389 -0
- package/dist/twilight-components/twilight-components.css +3 -1
- package/dist/twilight-components/twilight-components.esm.js +125 -1
- package/dist/types/components/salla-localization/salla-localization.d.ts +2 -0
- package/dist/types/components/salla-login/salla-login.d.ts +3 -2
- package/dist/types/components/salla-offer/salla-offer.d.ts +50 -2
- package/dist/types/components/salla-verify/salla-verify.d.ts +2 -0
- package/dist/types/components.d.ts +6 -1
- package/package.json +1 -1
- package/dist/cjs/Helper-8852feaa.js +0 -23
- package/dist/cjs/index-0b5b5867.js +0 -1656
- package/dist/cjs/index.cjs.js +0 -13
- package/dist/cjs/loader.cjs.js +0 -21
- package/dist/cjs/salla-branches.cjs.entry.js +0 -92
- package/dist/cjs/salla-button_4.cjs.entry.js +0 -299
- package/dist/cjs/salla-localization.cjs.entry.js +0 -80
- package/dist/cjs/salla-login-342876b9.js +0 -118
- package/dist/cjs/salla-offer.cjs.entry.js +0 -25
- package/dist/cjs/salla-product-availability.cjs.entry.js +0 -75
- package/dist/cjs/salla-rating.cjs.entry.js +0 -300
- package/dist/cjs/salla-search-28da4616.js +0 -81
- package/dist/cjs/salla-search.cjs.entry.js +0 -11
- package/dist/cjs/twilight-components.cjs.js +0 -19
- package/dist/collection/Helpers/Helper.js +0 -19
- package/dist/collection/collection-manifest.json +0 -21
- package/dist/collection/components/generate-summary.js +0 -35
- package/dist/collection/components/salla-branches/salla-branches.css +0 -12
- package/dist/collection/components/salla-branches/salla-branches.js +0 -233
- package/dist/collection/components/salla-button/salla-button.css +0 -3
- package/dist/collection/components/salla-button/salla-button.js +0 -246
- package/dist/collection/components/salla-localization/salla-localization.js +0 -206
- package/dist/collection/components/salla-login/salla-login.js +0 -348
- package/dist/collection/components/salla-modal/salla-modal.js +0 -459
- package/dist/collection/components/salla-offer/salla-offer.js +0 -40
- package/dist/collection/components/salla-product-availability/salla-product-availability.js +0 -331
- package/dist/collection/components/salla-rating/salla-rating.css +0 -7
- package/dist/collection/components/salla-rating/salla-rating.js +0 -483
- package/dist/collection/components/salla-search/salla-search.js +0 -132
- package/dist/collection/index.js +0 -2
- package/dist/collection/interfaces/colors.js +0 -1
- package/dist/collection/interfaces/index.js +0 -2
- package/dist/collection/interfaces/ratio.js +0 -1
- package/dist/collection/plugins/tailwind-theme/generator.js +0 -62
- package/dist/collection/plugins/tailwind-theme/index.js +0 -26
- package/dist/esm/index-8b97d225.js +0 -1628
- package/dist/esm/index.js +0 -4
- package/dist/esm/loader.js +0 -17
- package/dist/esm/polyfills/core-js.js +0 -11
- package/dist/esm/polyfills/css-shim.js +0 -1
- package/dist/esm/polyfills/dom.js +0 -79
- package/dist/esm/polyfills/es5-html-element.js +0 -1
- package/dist/esm/polyfills/index.js +0 -34
- package/dist/esm/polyfills/system.js +0 -6
- package/dist/esm/salla-button_4.entry.js +0 -292
- package/dist/esm/salla-offer.entry.js +0 -21
- package/dist/esm/salla-search.entry.js +0 -3
- package/dist/esm/twilight-components.js +0 -17
- package/dist/index.cjs.js +0 -1
- package/dist/index.js +0 -1
- package/dist/twilight-components/p-33990e49.entry.js +0 -1
- package/dist/twilight-components/p-36683152.js +0 -1
- package/dist/twilight-components/p-3cfede65.entry.js +0 -1
- package/dist/twilight-components/p-648661c8.entry.js +0 -1
- package/dist/twilight-components/p-93c3ac79.js +0 -1
- package/dist/twilight-components/p-9bc28e0c.js +0 -1
- package/dist/twilight-components/p-a923a51e.entry.js +0 -1
- package/dist/twilight-components/p-bc278b0e.entry.js +0 -1
- package/dist/twilight-components/p-cb1c59a2.js +0 -1
- package/dist/twilight-components/p-fa04c4b6.entry.js +0 -1
- package/dist/twilight-components/p-fa2f0e64.entry.js +0 -1
package/dist/cjs/index.cjs.js
DELETED
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
const sallaLogin = require('./salla-login-342876b9.js');
|
|
6
|
-
const sallaSearch = require('./salla-search-28da4616.js');
|
|
7
|
-
require('./index-0b5b5867.js');
|
|
8
|
-
require('./Helper-8852feaa.js');
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
exports.SallaLogin = sallaLogin.SallaLogin;
|
|
13
|
-
exports.SallaSearch = sallaSearch.SallaSearch;
|
package/dist/cjs/loader.cjs.js
DELETED
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
const index = require('./index-0b5b5867.js');
|
|
6
|
-
|
|
7
|
-
/*
|
|
8
|
-
Stencil Client Patch Esm v2.8.1 | MIT Licensed | https://stenciljs.com
|
|
9
|
-
*/
|
|
10
|
-
const patchEsm = () => {
|
|
11
|
-
return index.promiseResolve();
|
|
12
|
-
};
|
|
13
|
-
|
|
14
|
-
const defineCustomElements = (win, options) => {
|
|
15
|
-
if (typeof window === 'undefined') return Promise.resolve();
|
|
16
|
-
return patchEsm().then(() => {
|
|
17
|
-
return index.bootstrapLazy([["salla-button_4.cjs",[[0,"salla-login",{"loginTypeTitle":[1,"login-type-title"],"loginText":[1,"login-text"],"smsLabel":[1,"sms-label"],"mobileLabel":[1,"mobile-label"],"emailLabel":[1,"email-label"],"enterText":[1,"enter-text"],"bySMSText":[1,"by-s-m-s-text"],"byEmailText":[1,"by-email-text"],"backText":[1,"back-text"],"show":[64]},[[0,"verified","onVerified"],[0,"modalClosed","onModalClose"]]],[0,"salla-verify",{"withoutModal":[4,"without-modal"],"url":[1],"by":[1],"autoReload":[4,"auto-reload"],"getCode":[64],"show":[64]}],[4,"salla-button",{"btnStyle":[513,"btn-style"],"loading":[516],"disabled":[516],"loaderPosition":[1,"loader-position"],"wide":[4],"load":[64],"stop":[64],"disable":[64],"enable":[64]}],[4,"salla-modal",{"error":[4],"success":[4],"primary":[4],"isClosable":[1028,"is-closable"],"width":[513],"visible":[516],"isLoading":[1540,"is-loading"],"subTitleFirst":[4,"sub-title-first"],"subTitle":[1,"sub-title"],"icon":[1],"imageIcon":[1,"image-icon"],"title":[32],"show":[64],"hide":[64],"setTitle":[64],"loading":[64],"stopLoading":[64]}]]],["salla-branches.cjs",[[4,"salla-branches",{"position":[1],"displayAs":[1,"display-as"],"browseProductsFrom":[1,"browse-products-from"],"branches":[16],"current":[1026],"open":[32],"selected":[32],"isOpenedBefore":[32],"show":[64],"hide":[64]}]]],["salla-localization.cjs",[[4,"salla-localization",{"languagesTitle":[1,"languages-title"],"currenciesTitle":[1,"currencies-title"],"ok":[1],"show":[64],"hide":[64],"submit":[64]}]]],["salla-product-availability.cjs",[[4,"salla-product-availability",{"channels":[1],"buttonText":[1,"button-text"],"countryCode":[1,"country-code"],"subscribeText":[1,"subscribe-text"],"cancelText":[1,"cancel-text"],"subTitle":[1,"sub-title"],"mobileLabel":[1,"mobile-label"],"emailLabel":[1,"email-label"],"mobilePlaceholder":[1,"mobile-placeholder"],"emailPlaceholder":[1,"email-placeholder"],"productId":[2,"product-id"],"subscribedMessage":[1,"subscribed-message"],"isSubscribed":[1028,"is-subscribed"],"submit":[64]}]]],["salla-rating.cjs",[[0,"salla-rating",{"orderId":[2,"order-id"],"thanksMsg":[1,"thanks-msg"],"isStoreRating":[4,"is-store-rating"],"isProductsRating":[4,"is-products-rating"],"isShippingRating":[4,"is-shipping-rating"],"show":[64],"hide":[64]}]]],["salla-offer.cjs",[[4,"salla-offer",{"show":[64]}]]],["salla-search.cjs",[[0,"salla-search",{"placeholder":[1],"noResultsText":[1,"no-results-text"],"results":[32]},[[0,"modalClosed","onModalClose"]]]]]], options);
|
|
18
|
-
});
|
|
19
|
-
};
|
|
20
|
-
|
|
21
|
-
exports.defineCustomElements = defineCustomElements;
|
|
@@ -1,92 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
const index = require('./index-0b5b5867.js');
|
|
6
|
-
|
|
7
|
-
const sallaBranchesCss = ":host{display:block}";
|
|
8
|
-
|
|
9
|
-
let engine = require('store/src/store-engine');
|
|
10
|
-
let storages = require('store/storages/sessionStorage');
|
|
11
|
-
let sessionStore = engine.createStore(storages);
|
|
12
|
-
const SallaBranches = class {
|
|
13
|
-
constructor(hostRef) {
|
|
14
|
-
index.registerInstance(this, hostRef);
|
|
15
|
-
this.open = false;
|
|
16
|
-
this.isOpenedBefore = sessionStore.get("branch-choosed-before");
|
|
17
|
-
this.displayAs = 'default';
|
|
18
|
-
this.browseProductsFrom = 'all';
|
|
19
|
-
this.branches = [
|
|
20
|
-
{ id: 1, name: 'فرع الرياض', open: true, available: true, limited: false, tag: 'متوفر' },
|
|
21
|
-
{ id: 2, name: 'فرع جدة', open: false, available: false, limited: false, tag: 'غير متوفر' },
|
|
22
|
-
{ id: 3, name: 'فرع مكة', open: true, available: true, limited: false, tag: 'متوفر' },
|
|
23
|
-
{ id: 4, name: 'فرع المدينة', open: true, available: true, limited: false, tag: 'متوفر' },
|
|
24
|
-
{ id: 5, name: 'فرع جازان', open: true, available: true, limited: true, tag: 'الكمية محدودة' }
|
|
25
|
-
];
|
|
26
|
-
this.current = 1;
|
|
27
|
-
this.currentBranch = (prop) => {
|
|
28
|
-
return this.branches.filter((el) => el.id == this.current)[0][prop];
|
|
29
|
-
};
|
|
30
|
-
this.statusColor = (branch = null) => {
|
|
31
|
-
return branch ?
|
|
32
|
-
branch.limited ? 's-branches-color-red' : branch.available ? 's-branches-color-green' : 's-branches-color-gray'
|
|
33
|
-
:
|
|
34
|
-
this.currentBranch('limited') ? 's-branches-color-red' : this.currentBranch('available') ? 's-branches-color-green' : 's-branches-color-gray';
|
|
35
|
-
};
|
|
36
|
-
this.isChoiceable = () => {
|
|
37
|
-
return (this.browseProductsFrom !== 'all' && this.position == 'single') || this.position == 'header';
|
|
38
|
-
};
|
|
39
|
-
this.formTitle = () => {
|
|
40
|
-
return this.isChoiceable() ?
|
|
41
|
-
'توفر المنتج في الفروع الآخرى'
|
|
42
|
-
: 'التسوق من فرع آخر';
|
|
43
|
-
};
|
|
44
|
-
salla.event.on('branches::show', () => this.show());
|
|
45
|
-
}
|
|
46
|
-
async show() {
|
|
47
|
-
return this.modal.show();
|
|
48
|
-
}
|
|
49
|
-
async hide() {
|
|
50
|
-
return this.modal.hide();
|
|
51
|
-
}
|
|
52
|
-
handelChange(event) {
|
|
53
|
-
this.selected = event.target.value;
|
|
54
|
-
}
|
|
55
|
-
handleSubmit() {
|
|
56
|
-
this.btn.load().then(() => {
|
|
57
|
-
setTimeout(() => location.reload(), 2000);
|
|
58
|
-
});
|
|
59
|
-
sessionStore.set("branch-choosed-before", true);
|
|
60
|
-
this.show();
|
|
61
|
-
setTimeout(() => {
|
|
62
|
-
this.current = this.selected;
|
|
63
|
-
}, 300);
|
|
64
|
-
}
|
|
65
|
-
render() {
|
|
66
|
-
return (index.h("salla-modal", { icon: "sicon-store-alt", title: "\u0641\u0631\u0639 \u0627\u0644\u0631\u064A\u0627\u0636", "sub-title": "\u0623\u0646\u062A \u0627\u0644\u0622\u0646 \u062A\u062A\u0635\u0641\u062D \u0627\u0644\u0645\u062A\u062C\u0631 \u0645\u0646", "sub-title-first": true, "is-closable": !this.isOpenedBefore && this.displayAs == 'popup' ? 'false' : 'true', ref: modal => this.modal = modal, "modal-width": "sm", id: "s-branches-modal", class: "hidden" }, index.h("h4", { class: "s-branches-title" }, this.formTitle()), this.branches.length <= 5 ?
|
|
67
|
-
index.h("div", { class: "s-branches-space-v" }, this.branches.map((branch) => index.h("div", { class: "s-branches-input-wrap" }, index.h("input", { id: this.position + '_branch_' + branch.id, disabled: !branch.open && this.isChoiceable(), name: "lang", type: "radio", value: branch.id, onChange: (event) => this.handelChange(event), class: {
|
|
68
|
-
's-branches-input': true,
|
|
69
|
-
'opacity-50': !branch.open,
|
|
70
|
-
'hidden': !this.isChoiceable()
|
|
71
|
-
}, checked: this.current == branch.id }), index.h("label", { htmlFor: this.position + '_branch_' + branch.id, class: {
|
|
72
|
-
's-branches-label': true,
|
|
73
|
-
's-branches-clickable': this.isChoiceable()
|
|
74
|
-
} }, index.h("span", { class: { 's-branches-is-closed': !branch.open } }, branch.name), this.isChoiceable() ?
|
|
75
|
-
index.h("small", { class: "s-branches-closed-badge" }, branch.open ? '' : 'مُغلق')
|
|
76
|
-
:
|
|
77
|
-
index.h("span", { class: this.statusColor(branch) }, branch.tag)))))
|
|
78
|
-
:
|
|
79
|
-
index.h("select", { class: "s-branches-select", onInput: (event) => this.handelChange(event) }, this.branches.map(branch => (index.h("option", { value: branch.id, disabled: !branch.open, selected: this.selected == branch.id }, branch.name, " ", branch.open ? '' : '- مُغلق')))), this.isChoiceable() ?
|
|
80
|
-
index.h("slot", { name: "footer" }, index.h("salla-button", { ref: btn => this.btn = btn, onClick: () => this.handleSubmit(), class: "s-branches-submit", wide: true }, salla.lang.get('common.elements.ok')))
|
|
81
|
-
: ''));
|
|
82
|
-
}
|
|
83
|
-
componentDidRender() {
|
|
84
|
-
if (!this.isOpenedBefore && this.displayAs == 'popup') {
|
|
85
|
-
this.show();
|
|
86
|
-
}
|
|
87
|
-
}
|
|
88
|
-
get host() { return index.getElement(this); }
|
|
89
|
-
};
|
|
90
|
-
SallaBranches.style = sallaBranchesCss;
|
|
91
|
-
|
|
92
|
-
exports.salla_branches = SallaBranches;
|
|
@@ -1,299 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
const index = require('./index-0b5b5867.js');
|
|
6
|
-
const Helper = require('./Helper-8852feaa.js');
|
|
7
|
-
const sallaLogin = require('./salla-login-342876b9.js');
|
|
8
|
-
|
|
9
|
-
const sallaButtonCss = ":host{display:block}";
|
|
10
|
-
|
|
11
|
-
const SallaButton = class {
|
|
12
|
-
constructor(hostRef) {
|
|
13
|
-
index.registerInstance(this, hostRef);
|
|
14
|
-
this.btnStyle = 'primary';
|
|
15
|
-
this.loading = false;
|
|
16
|
-
this.disabled = false;
|
|
17
|
-
this.loaderPosition = 'before';
|
|
18
|
-
this.wide = false;
|
|
19
|
-
this.hostAttributes = {};
|
|
20
|
-
//============= Initiate Button Attributes =============//
|
|
21
|
-
for (let i = 0; i < this.host.attributes.length; i++) {
|
|
22
|
-
this.hostAttributes[this.host.attributes[i].name] = this.host.attributes[i].value;
|
|
23
|
-
}
|
|
24
|
-
this.hostAttributes.type = this.hostAttributes.type || 'button';
|
|
25
|
-
this.hostAttributes.class += ' s-button-btn btn--has-loading'
|
|
26
|
-
+ ' s-button-' + this.btnStyle
|
|
27
|
-
+ (this.wide ? ' s-button-wide ' : '')
|
|
28
|
-
+ ' loader-' + this.loaderPosition
|
|
29
|
-
+ (this.loaderPosition == 'before' ? ' s-button-loader-after' : '');
|
|
30
|
-
delete this.hostAttributes['btn-style'];
|
|
31
|
-
delete this.hostAttributes['id'];
|
|
32
|
-
if (this.wide) {
|
|
33
|
-
this.host.classList.add('s-button-wide');
|
|
34
|
-
}
|
|
35
|
-
}
|
|
36
|
-
async load() {
|
|
37
|
-
if (this.loaderPosition == 'center')
|
|
38
|
-
this.text.classList.add('s-button-hide');
|
|
39
|
-
this.host.setAttribute('loading', '');
|
|
40
|
-
return this.host;
|
|
41
|
-
}
|
|
42
|
-
async stop() {
|
|
43
|
-
this.host.removeAttribute('loading');
|
|
44
|
-
return this.host;
|
|
45
|
-
}
|
|
46
|
-
async disable() {
|
|
47
|
-
this.host.setAttribute('disabled', '');
|
|
48
|
-
}
|
|
49
|
-
async enable() {
|
|
50
|
-
this.host.removeAttribute('disabled');
|
|
51
|
-
}
|
|
52
|
-
handleVisible(newKind, oldKind) {
|
|
53
|
-
//todo::use united styles
|
|
54
|
-
this.btn.classList.remove('btn-' + oldKind);
|
|
55
|
-
this.btn.classList.add('btn-' + newKind);
|
|
56
|
-
}
|
|
57
|
-
handleLoading(newVal) {
|
|
58
|
-
//todo::use united styles
|
|
59
|
-
Helper.Helper.toggleElement(this.btn, 'btn--is-loading', 'btn--no-loading', () => newVal);
|
|
60
|
-
}
|
|
61
|
-
render() {
|
|
62
|
-
return (
|
|
63
|
-
//TODO:: use HOST then fake button behaviours
|
|
64
|
-
index.h(index.Host, { class: "s-button-host-tag" }, index.h("button", Object.assign({ ref: btn => this.btn = btn, disabled: this.disabled }, this.hostAttributes), index.h("span", { class: "s-button-text", ref: el => this.text = el }, index.h("slot", null)), this.loading ? index.h("span", { class: {
|
|
65
|
-
//todo::use united styles
|
|
66
|
-
's-button-loader': true,
|
|
67
|
-
's-button-loader-start': this.loaderPosition === 'start',
|
|
68
|
-
's-button-loader-end': this.loaderPosition === 'end',
|
|
69
|
-
's-button-loader-center': this.loaderPosition === 'center',
|
|
70
|
-
} }) : '')));
|
|
71
|
-
}
|
|
72
|
-
get host() { return index.getElement(this); }
|
|
73
|
-
static get watchers() { return {
|
|
74
|
-
"btnStyle": ["handleVisible"],
|
|
75
|
-
"loading": ["handleLoading"]
|
|
76
|
-
}; }
|
|
77
|
-
};
|
|
78
|
-
SallaButton.style = sallaButtonCss;
|
|
79
|
-
|
|
80
|
-
const SallaModal = class {
|
|
81
|
-
constructor(hostRef) {
|
|
82
|
-
index.registerInstance(this, hostRef);
|
|
83
|
-
this.modalOpened = index.createEvent(this, "modalOpened", 7);
|
|
84
|
-
this.modalClosed = index.createEvent(this, "modalClosed", 7);
|
|
85
|
-
var _a;
|
|
86
|
-
//todo:: unite three colors (error, success, primary) in one prop
|
|
87
|
-
this.error = false;
|
|
88
|
-
this.success = false;
|
|
89
|
-
this.primary = false;
|
|
90
|
-
this.isClosable = true;
|
|
91
|
-
this.width = 'md';
|
|
92
|
-
this.visible = false;
|
|
93
|
-
this.isLoading = false;
|
|
94
|
-
this.subTitleFirst = false;
|
|
95
|
-
this.subTitle = '';
|
|
96
|
-
this.icon = '';
|
|
97
|
-
this.imageIcon = '';
|
|
98
|
-
Helper.Helper.setHost(this.host);
|
|
99
|
-
salla.event.on('modal::open', btn => btn.dataset.target == this.host.id && this.show());
|
|
100
|
-
salla.event.on('modal::close', btn => btn.dataset.target == this.host.id && this.hide());
|
|
101
|
-
this.title = this.host.title;
|
|
102
|
-
this.host.removeAttribute('title');
|
|
103
|
-
(_a = Helper.Helper.getElement('[slot=body]')) === null || _a === void 0 ? void 0 : _a.classList.add('s-modal-body', 's-modal-' + this.width);
|
|
104
|
-
}
|
|
105
|
-
handleVisible(newValue) {
|
|
106
|
-
if (!newValue) {
|
|
107
|
-
this.toggleModal(false);
|
|
108
|
-
this.modalClosed.emit();
|
|
109
|
-
return;
|
|
110
|
-
}
|
|
111
|
-
this.host.classList.remove('hidden');
|
|
112
|
-
setTimeout(() => this.toggleModal(true)); //small amont of time to running toggle After adding hidden
|
|
113
|
-
this.modalOpened.emit();
|
|
114
|
-
}
|
|
115
|
-
async show() {
|
|
116
|
-
this.host.setAttribute('visible', '');
|
|
117
|
-
return this.host;
|
|
118
|
-
}
|
|
119
|
-
async hide() {
|
|
120
|
-
this.host.removeAttribute('visible');
|
|
121
|
-
return this.host;
|
|
122
|
-
}
|
|
123
|
-
async setTitle(title) {
|
|
124
|
-
this.title = title;
|
|
125
|
-
return this.host;
|
|
126
|
-
}
|
|
127
|
-
async loading() {
|
|
128
|
-
this.isLoading = true;
|
|
129
|
-
return this.host;
|
|
130
|
-
}
|
|
131
|
-
async stopLoading() {
|
|
132
|
-
this.isLoading = false;
|
|
133
|
-
return this.host;
|
|
134
|
-
}
|
|
135
|
-
toggleModal(isOpen) {
|
|
136
|
-
Helper.Helper
|
|
137
|
-
// .toggleElement(this.host.querySelector('.s-modal-body'), 's-modal-entering', 's-modal-leaving', () => isOpen)
|
|
138
|
-
.toggleElement(this.host.querySelector('[slot=body]') || this.host, 's-modal-entering', 's-modal-leaving', () => isOpen)
|
|
139
|
-
.toggleElement(this.overlay, 's-modal-entering', 's-modal-overlay-leaving', () => isOpen)
|
|
140
|
-
//todo:: use united class names
|
|
141
|
-
.toggleElement(document.body, 'modal-is-open', 'modal-is-closed', () => isOpen);
|
|
142
|
-
if (!isOpen) {
|
|
143
|
-
setTimeout(() => this.host.classList.add('hidden'), 350);
|
|
144
|
-
}
|
|
145
|
-
}
|
|
146
|
-
closeModal() {
|
|
147
|
-
if (!this.isClosable) {
|
|
148
|
-
return;
|
|
149
|
-
}
|
|
150
|
-
this.host.removeAttribute('visible');
|
|
151
|
-
}
|
|
152
|
-
//todo:: pref for each modal
|
|
153
|
-
render() {
|
|
154
|
-
this.host.id = this.host.id || 'salla-modal';
|
|
155
|
-
return (
|
|
156
|
-
//todo:: use suitable class name instead of hidden
|
|
157
|
-
index.h(index.Host, { class: 's-modal-container hidden', "aria-modal": "true", role: "dialog" }, index.h("div", { class: "s-modal-wrapper" }, index.h("div", { class: "s-modal-overlay", ref: el => this.overlay = el, onClick: () => this.closeModal() }), index.h("span", { class: "s-modal-spacer" }, "\u200B"), index.h("slot", { name: "body" }, index.h("div", { class: 's-modal-body ' + 's-modal-' + this.width, slot: "body" }, this.isLoading
|
|
158
|
-
? index.h("span", null, "Loading...")
|
|
159
|
-
: [index.h("div", { class: { 's-modal-header': true, 's-modal-is-center': this.icon != '' || this.imageIcon != '' } }, this.isClosable ?
|
|
160
|
-
//todo:: remove cursor-pointer
|
|
161
|
-
index.h("button", { class: "s-modal-close cursor-pointer", onClick: () => this.closeModal(), type: "button" }, index.h("span", { class: "sicon-cancel" }))
|
|
162
|
-
: '', this.error || this.success || this.icon
|
|
163
|
-
? index.h("div", { class: {
|
|
164
|
-
's-modal-icon': true,
|
|
165
|
-
's-modal-bg-error': this.error,
|
|
166
|
-
's-modal-bg-success': this.success,
|
|
167
|
-
's-modal-bg-normal': !this.error && !this.success,
|
|
168
|
-
's-modal-bg-primary': this.primary
|
|
169
|
-
} }, index.h("i", { class: {
|
|
170
|
-
[this.icon]: true,
|
|
171
|
-
's-modal-text-error': this.error,
|
|
172
|
-
's-modal-text-success': this.success,
|
|
173
|
-
} }))
|
|
174
|
-
: this.imageIcon ?
|
|
175
|
-
index.h("img", { class: "s-modal-header-img", src: this.imageIcon })
|
|
176
|
-
: '', this.title || this.subTitle ?
|
|
177
|
-
index.h("div", { class: "s-modal-header-content" }, index.h("div", { class: { 's-modal-title': true, 's-modal-title-below': this.subTitleFirst }, innerHTML: this.title }), index.h("p", { class: { 's-modal-sub-title': true }, innerHTML: this.subTitle }))
|
|
178
|
-
: ''),
|
|
179
|
-
index.h("slot", null),
|
|
180
|
-
index.h("slot", { name: "footer" })
|
|
181
|
-
])))));
|
|
182
|
-
}
|
|
183
|
-
get host() { return index.getElement(this); }
|
|
184
|
-
static get watchers() { return {
|
|
185
|
-
"visible": ["handleVisible"]
|
|
186
|
-
}; }
|
|
187
|
-
};
|
|
188
|
-
|
|
189
|
-
const SallaVerify = class {
|
|
190
|
-
constructor(hostRef) {
|
|
191
|
-
index.registerInstance(this, hostRef);
|
|
192
|
-
this.verified = index.createEvent(this, "verified", 7);
|
|
193
|
-
this.url = 'profile/verify-mobile';
|
|
194
|
-
this.by = 'sms';
|
|
195
|
-
this.autoReload = true;
|
|
196
|
-
Helper.Helper.setHost(this.host);
|
|
197
|
-
if (this.withoutModal) {
|
|
198
|
-
this.modal = { show: () => '', hide: () => '' };
|
|
199
|
-
}
|
|
200
|
-
else {
|
|
201
|
-
salla.event.on('profile::verify.mobile', data => this.show(data));
|
|
202
|
-
}
|
|
203
|
-
}
|
|
204
|
-
async getCode() {
|
|
205
|
-
return this.code.value;
|
|
206
|
-
}
|
|
207
|
-
async show(data) {
|
|
208
|
-
this.data = data;
|
|
209
|
-
this.resendTimer();
|
|
210
|
-
this.otpInputs = document.querySelectorAll('.s-verify-input');
|
|
211
|
-
this.otpInputs[0].focus();
|
|
212
|
-
Helper.Helper.on('input', '.s-verify-input', e => salla.helpers.digitsOnly(e.target));
|
|
213
|
-
Helper.Helper.onKeyUp('.s-verify-input', event => {
|
|
214
|
-
var _a, _b, _c, _d;
|
|
215
|
-
let key = event.keyCode || event.charCode;
|
|
216
|
-
if (event.target.value) {
|
|
217
|
-
(_a = event.target.nextElementSibling) === null || _a === void 0 ? void 0 : _a.focus();
|
|
218
|
-
(_b = event.target.nextElementSibling) === null || _b === void 0 ? void 0 : _b.select();
|
|
219
|
-
}
|
|
220
|
-
else if ([8, 46].includes(key)) {
|
|
221
|
-
(_c = event.target.previousElementSibling) === null || _c === void 0 ? void 0 : _c.focus();
|
|
222
|
-
(_d = event.target.previousElementSibling) === null || _d === void 0 ? void 0 : _d.select();
|
|
223
|
-
}
|
|
224
|
-
this.toggleOTPSubmit();
|
|
225
|
-
});
|
|
226
|
-
Helper.Helper.on('paste', '.s-verify-input', event => {
|
|
227
|
-
let text = event.clipboardData.getData('text').toArabicDigits().replace(/[^0-9.]/g, '').replace('..', '.');
|
|
228
|
-
this.otpInputs.forEach((input, i) => input.value = text[i] || '');
|
|
229
|
-
this.toggleOTPSubmit();
|
|
230
|
-
setTimeout(() => this.otpInputs[3].focus(), 100);
|
|
231
|
-
});
|
|
232
|
-
return this.modal.show();
|
|
233
|
-
}
|
|
234
|
-
toggleOTPSubmit() {
|
|
235
|
-
let otp = [];
|
|
236
|
-
this.otpInputs.forEach(input => input.value && otp.push(input.value));
|
|
237
|
-
this.code.value = otp.join('');
|
|
238
|
-
if (otp.length === 4) {
|
|
239
|
-
this.btn.removeAttribute('disabled');
|
|
240
|
-
this.btn.click();
|
|
241
|
-
return;
|
|
242
|
-
}
|
|
243
|
-
this.btn.setAttribute('disabled', '');
|
|
244
|
-
}
|
|
245
|
-
resendTimer() {
|
|
246
|
-
Helper.Helper.showElement(this.resendMessage).hideElement(this.resend);
|
|
247
|
-
let resendAfter = 30;
|
|
248
|
-
let timerId = setInterval(() => {
|
|
249
|
-
if (resendAfter === -1) {
|
|
250
|
-
clearTimeout(timerId);
|
|
251
|
-
Helper.Helper.hideElement(this.resendMessage).showElement(this.resend);
|
|
252
|
-
}
|
|
253
|
-
else {
|
|
254
|
-
this.timer.innerHTML = `${resendAfter >= 10 ? resendAfter : '0' + resendAfter} : 00`;
|
|
255
|
-
resendAfter--;
|
|
256
|
-
}
|
|
257
|
-
}, 1000);
|
|
258
|
-
}
|
|
259
|
-
resendCode() {
|
|
260
|
-
return this.btn.stop()
|
|
261
|
-
.then(() => this.btn.disable())
|
|
262
|
-
.then(() => {
|
|
263
|
-
this.otpInputs.forEach(input => input.value = '');
|
|
264
|
-
this.otpInputs[0].focus();
|
|
265
|
-
})
|
|
266
|
-
.then(() => salla.api.auth.resend(Object.assign({ resend_by: this.by }, this.data)))
|
|
267
|
-
.then(() => this.resendTimer())
|
|
268
|
-
.catch(() => this.resendTimer());
|
|
269
|
-
}
|
|
270
|
-
submit() {
|
|
271
|
-
return this.btn.load()
|
|
272
|
-
.then(() => this.btn.disable())
|
|
273
|
-
.then(() => salla.document.api.request(this.url, Object.assign({ code: this.code.value }, this.data)))
|
|
274
|
-
.then(response => this.verified.emit(response))
|
|
275
|
-
.then(() => this.btn.stop() && this.btn.disable())
|
|
276
|
-
.then(() => this.modal.hide())
|
|
277
|
-
.then(() => this.autoReload && window.location.reload())
|
|
278
|
-
.catch(() => this.btn.stop() && this.btn.enable());
|
|
279
|
-
}
|
|
280
|
-
render() {
|
|
281
|
-
return this.withoutModal ? this.myBody() :
|
|
282
|
-
index.h("salla-modal", { id: "s-verify", ref: modal => this.modal = modal, title: salla.lang.get('pages.profile.verify_title') }, this.myBody());
|
|
283
|
-
}
|
|
284
|
-
myBody() {
|
|
285
|
-
return [
|
|
286
|
-
index.h("div", { class: "s-verify-message", innerHTML: salla.lang.get('pages.profile.verify_message') }),
|
|
287
|
-
index.h("label", { class: "s-verify-label" }, salla.lang.get('pages.profile.verify_placeholder')),
|
|
288
|
-
index.h("input", { type: "hidden", name: "code", maxlength: "4", required: true, ref: code => this.code = code }),
|
|
289
|
-
index.h("div", { class: "s-verify-codes", dir: "ltr" }, [1, 2, 3, 4].map(() => index.h("input", { type: "text", maxlength: "1", class: "s-verify-input", required: true }))),
|
|
290
|
-
index.h("div", { slot: "footer", class: "s-verify-footer" }, index.h("salla-button", { class: "s-verify-submit", disabled: true, onClick: () => this.submit(), ref: b => this.btn = b }, salla.lang.get('pages.profile.verify')), index.h("p", { class: "s-verify-resend-message", ref: el => this.resendMessage = el }, salla.lang.get('blocks.header.resend_after'), index.h("b", { class: "s-verify-timer", ref: el => this.timer = el })), index.h("a", { href: "#", class: "s-verify-resend", onClick: () => this.resendCode(), ref: el => this.resend = el }, salla.lang.get('blocks.comments.submit')))
|
|
291
|
-
];
|
|
292
|
-
}
|
|
293
|
-
get host() { return index.getElement(this); }
|
|
294
|
-
};
|
|
295
|
-
|
|
296
|
-
exports.salla_login = sallaLogin.SallaLogin;
|
|
297
|
-
exports.salla_button = SallaButton;
|
|
298
|
-
exports.salla_modal = SallaModal;
|
|
299
|
-
exports.salla_verify = SallaVerify;
|
|
@@ -1,80 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
const index = require('./index-0b5b5867.js');
|
|
6
|
-
const Helper = require('./Helper-8852feaa.js');
|
|
7
|
-
|
|
8
|
-
const SallaLocalization = class {
|
|
9
|
-
constructor(hostRef) {
|
|
10
|
-
index.registerInstance(this, hostRef);
|
|
11
|
-
var _a, _b;
|
|
12
|
-
this.language = salla.config.language || {};
|
|
13
|
-
this.currency = salla.config.currency || {};
|
|
14
|
-
this.languagesTitle = salla.lang.get('common.titles.language');
|
|
15
|
-
this.currenciesTitle = salla.lang.get('common.titles.currency');
|
|
16
|
-
this.ok = salla.lang.get('common.elements.ok');
|
|
17
|
-
Helper.Helper.setHost(this.host);
|
|
18
|
-
salla.event.on('localization::show', () => this.show());
|
|
19
|
-
/**
|
|
20
|
-
* letting developer to insert his own slot like:
|
|
21
|
-
* <salla-localization>
|
|
22
|
-
* <div slot="language">...{name}....</div>
|
|
23
|
-
* <div slot="currency">...{name}....</div>
|
|
24
|
-
* </salla-localization>
|
|
25
|
-
* Because scoped templates not supported in stencil );
|
|
26
|
-
* we made a workaround to pass language & currency attributes, then replace names in rendering
|
|
27
|
-
*/
|
|
28
|
-
this.languageSlot = ((_a = Helper.Helper.getElement('[slot="language"]')) === null || _a === void 0 ? void 0 : _a.innerHTML) || '<label class="s-localization-label" for="lang-{code}"><span>{name}</span><div class="s-localization-flag flag iti__flag iti__{country_code}"></div></label>';
|
|
29
|
-
this.currencySlot = ((_b = Helper.Helper.getElement('[slot="currency"]')) === null || _b === void 0 ? void 0 : _b.innerHTML) || '<label class="s-localization-label" for="currency-{code}"><span>{name}</span><small class="s-localization-currency">{code}</small></label>';
|
|
30
|
-
}
|
|
31
|
-
async show() {
|
|
32
|
-
return this.modal.show();
|
|
33
|
-
}
|
|
34
|
-
async hide() {
|
|
35
|
-
return this.modal.hide();
|
|
36
|
-
}
|
|
37
|
-
onChangeCurrency(event) {
|
|
38
|
-
this.currency = salla.config.currencies.filter(currency => currency.code == event.target.value)[0];
|
|
39
|
-
}
|
|
40
|
-
onChangeLanguage(event) {
|
|
41
|
-
this.language = salla.config.languages.filter(lang => lang.code == event.target.value)[0];
|
|
42
|
-
}
|
|
43
|
-
async submit() {
|
|
44
|
-
let url;
|
|
45
|
-
console.log('this.currency.code::::', this.currency, this.currency.code);
|
|
46
|
-
this.btn.load()
|
|
47
|
-
.then(() => (this.currency.code === salla.config.currency.code) || ((url = window.location.href) && salla.currency.api.change(this.currency.code)))
|
|
48
|
-
.then(() => (this.language.code === salla.config.language.code) || (url = this.language.url))
|
|
49
|
-
.then(() => this.btn.stop())
|
|
50
|
-
.then(() => this.hide())
|
|
51
|
-
.then(() => url && (window.location.href = url));
|
|
52
|
-
}
|
|
53
|
-
render() {
|
|
54
|
-
return (index.h("salla-modal", { id: "salla-localization", class: "hidden", ref: modal => this.modal = modal, "modal-width": "xs" }, index.h("div", { slot: "header" }, index.h("slot", { name: "header" })), index.h("div", { class: "s-localization-inner" }, salla.config.languages ?
|
|
55
|
-
index.h("div", { class: "s-localization-section" }, index.h("label", { class: "s-localization-title" }, this.languagesTitle), index.h("div", { class: "s-localization-section-inner" }, salla.config.languages.length < 6 ?
|
|
56
|
-
salla.config.languages.map(lang => index.h("div", { class: "s-localization-item" }, index.h("input", { class: "s-localization-input", type: "radio", checked: this.language.code == lang.code, onChange: () => this.language = lang, name: "language", id: 'lang-' + lang.code.toLowerCase(), value: lang.code }), index.h("div", { id: "language-slot", innerHTML: this.languageSlot
|
|
57
|
-
.replace(/\{name\}/g, lang.name)
|
|
58
|
-
.replace(/\{code\}/g, lang.code)
|
|
59
|
-
.replace(/\{country_code\}/g, lang.country_code) }))) :
|
|
60
|
-
index.h("select", { class: "s-branches-select", name: "currency", onChange: e => this.onChangeLanguage(e) }, salla.config.languages.map(lang => index.h("option", { value: lang.code, selected: this.language.code == lang.code }, lang.name)))))
|
|
61
|
-
: '', salla.config.currencies ?
|
|
62
|
-
index.h("div", { class: "s-localization-section" }, index.h("label", { class: "s-localization-title" }, this.currenciesTitle), index.h("div", { class: "s-localization-section-inner" }, salla.config.currencies.length < 6 ?
|
|
63
|
-
salla.config.currencies.map(currency => index.h("div", { class: "s-localization-item" }, index.h("input", { class: "s-localization-input", type: "radio", name: "currency", checked: this.currency.code == currency.code, onChange: () => this.currency = currency, id: 'currency-' + currency.code, value: currency.code }), index.h("div", { id: "currency-slot", innerHTML: this.currencySlot
|
|
64
|
-
.replace(/\{name\}/g, currency.name)
|
|
65
|
-
.replace(/\{code\}/g, currency.code)
|
|
66
|
-
.replace(/\{country_code\}/g, currency.country_code) }))) :
|
|
67
|
-
index.h("select", { class: "s-branches-select", name: "currency", onChange: e => this.onChangeCurrency(e) }, salla.config.currencies.map(currency => index.h("option", { value: currency.code, selected: this.currency.code == currency.code }, currency.name)))))
|
|
68
|
-
: ''), index.h("slot", { name: "footer" }, index.h("salla-button", { wide: true, ref: btn => this.btn = btn, onClick: () => this.submit() }, this.ok))));
|
|
69
|
-
}
|
|
70
|
-
/**
|
|
71
|
-
* to reduce dom levels we will move slot data into the parent dom
|
|
72
|
-
*/
|
|
73
|
-
componentDidRender() {
|
|
74
|
-
this.host.querySelectorAll('#currency-slot').forEach(el => el.replaceWith(el.firstChild));
|
|
75
|
-
this.host.querySelectorAll('#language-slot').forEach(el => el.replaceWith(el.firstChild));
|
|
76
|
-
}
|
|
77
|
-
get host() { return index.getElement(this); }
|
|
78
|
-
};
|
|
79
|
-
|
|
80
|
-
exports.salla_localization = SallaLocalization;
|
|
@@ -1,118 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
const index = require('./index-0b5b5867.js');
|
|
4
|
-
const Helper = require('./Helper-8852feaa.js');
|
|
5
|
-
|
|
6
|
-
const SallaLogin = class {
|
|
7
|
-
constructor(hostRef) {
|
|
8
|
-
index.registerInstance(this, hostRef);
|
|
9
|
-
this.regType = 'sms';
|
|
10
|
-
this.loginTypeTitle = salla.lang.get('blocks.header.select_login_way');
|
|
11
|
-
this.loginText = salla.lang.get('blocks.header.login');
|
|
12
|
-
this.smsLabel = salla.lang.get('blocks.header.sms');
|
|
13
|
-
this.mobileLabel = salla.lang.get('common.elements.mobile');
|
|
14
|
-
this.emailLabel = salla.lang.get('common.elements.email');
|
|
15
|
-
this.enterText = salla.lang.get('blocks.header.enter');
|
|
16
|
-
this.bySMSText = salla.lang.get('blocks.header.login_by_sms');
|
|
17
|
-
this.byEmailText = salla.lang.get('blocks.header.login_by_email');
|
|
18
|
-
this.backText = salla.lang.get('common.elements.back');
|
|
19
|
-
this.title = this.host.title || salla.lang.get('blocks.header.login');
|
|
20
|
-
this.host.removeAttribute('title');
|
|
21
|
-
salla.auth.event.onVerificationFailed(() => {
|
|
22
|
-
//
|
|
23
|
-
});
|
|
24
|
-
}
|
|
25
|
-
/**
|
|
26
|
-
* @param {CustomEvent|{details:{case:'new_customer'|'authenticated', redirect_url:string|null}}} event
|
|
27
|
-
*/
|
|
28
|
-
onVerified(event) {
|
|
29
|
-
if (!event.detail.case) {
|
|
30
|
-
console.log('verified but without case!');
|
|
31
|
-
return;
|
|
32
|
-
}
|
|
33
|
-
if (event.detail.case === "new_customer") {
|
|
34
|
-
return this.showTab(this.tab5);
|
|
35
|
-
}
|
|
36
|
-
//TODO::It looks that is this workaround🤔
|
|
37
|
-
if (salla.auth.event.getTypeActionOnVerified() !== 'redirect') {
|
|
38
|
-
return;
|
|
39
|
-
}
|
|
40
|
-
if (event.redirect_url) {
|
|
41
|
-
return window.location.href = event.redirect_url;
|
|
42
|
-
}
|
|
43
|
-
window.location.reload();
|
|
44
|
-
}
|
|
45
|
-
onModalClose() {
|
|
46
|
-
this.showTab(this.tab1);
|
|
47
|
-
}
|
|
48
|
-
async show() {
|
|
49
|
-
return this.modal.show();
|
|
50
|
-
}
|
|
51
|
-
showTab(tab) {
|
|
52
|
-
[this.tab1, this.tab2, this.tab3, this.tab4, this.tab5].map(el => Helper.Helper.toggleElement(el, 'visible', 'hidden', () => el == tab));
|
|
53
|
-
if ([this.tab2, this.tab3].includes(tab)) {
|
|
54
|
-
this.regType = tab === this.tab2 ? 'sms' : 'email';
|
|
55
|
-
}
|
|
56
|
-
let isRegistrationTab = tab == this.tab5;
|
|
57
|
-
this.modal.setTitle(isRegistrationTab ? salla.lang.get('common.titles.registration') : this.title);
|
|
58
|
-
if (!isRegistrationTab) {
|
|
59
|
-
Helper.Helper.toggleElement(this.regMobileBlock, 's-hidden', 's-block', () => this.regType === 'sms')
|
|
60
|
-
.toggleElement(this.regEmailBlock, 's-hidden', 's-block', () => this.regType === 'email');
|
|
61
|
-
}
|
|
62
|
-
return this;
|
|
63
|
-
}
|
|
64
|
-
loginByEmail() {
|
|
65
|
-
if (!Helper.Helper.isValidEmail(this.email.value)) {
|
|
66
|
-
this.email.classList.add('s-has-error');
|
|
67
|
-
this.email.nextElementSibling['innerText'] = '* ' + salla.lang.get('common.elements.email_is_valid');
|
|
68
|
-
return;
|
|
69
|
-
}
|
|
70
|
-
this.email.nextElementSibling['innerText'] = '';
|
|
71
|
-
this.email.classList.remove('s-has-error');
|
|
72
|
-
salla.auth.api.login({ type: 'email', email: this.email.value })
|
|
73
|
-
.then(() => this.showTab(this.tab4))
|
|
74
|
-
.then(() => (this.tab4.by = 'email') && (this.tab4.url = 'auth/email/verify'))
|
|
75
|
-
.then(() => this.tab4.show({ email: this.email.value }));
|
|
76
|
-
}
|
|
77
|
-
loginBySMS() {
|
|
78
|
-
if (this.mobile.value.length < 6) {
|
|
79
|
-
this.mobile.classList.add('s-has-error');
|
|
80
|
-
this.mobile.nextElementSibling['innerText'] = '* ' + salla.lang.get('mobile_app.strings.incorrect_mobile');
|
|
81
|
-
return;
|
|
82
|
-
}
|
|
83
|
-
this.mobile.nextElementSibling['innerText'] = '';
|
|
84
|
-
this.mobile.classList.remove('s-has-error');
|
|
85
|
-
salla.auth.api.login({ type: 'sms', mobile: this.mobile.value })
|
|
86
|
-
.then(() => this.showTab(this.tab4))
|
|
87
|
-
.then(() => (this.tab4.by = 'sms') && (this.tab4.url = 'auth/mobile/verify'))
|
|
88
|
-
.then(() => this.tab4.show({ mobile: this.mobile.value, country_code: 'SA' }));
|
|
89
|
-
}
|
|
90
|
-
//TODO:: if it's enter, go submit
|
|
91
|
-
typing({ target }) {
|
|
92
|
-
target.type === 'tel' && salla.helpers.digitsOnly(target);
|
|
93
|
-
target.classList.remove('s-has-error');
|
|
94
|
-
target.nextElementSibling.innerText = '';
|
|
95
|
-
}
|
|
96
|
-
newUser() {
|
|
97
|
-
this.tab4.getCode()
|
|
98
|
-
.then(code => salla.auth.api.register({
|
|
99
|
-
first_name: this.firstName.value,
|
|
100
|
-
last_name: this.lastName.value,
|
|
101
|
-
phone: this.regMobile.value || this.mobile.value,
|
|
102
|
-
email: this.regEmail.value || this.email.value,
|
|
103
|
-
country_code: '',
|
|
104
|
-
country_key: '',
|
|
105
|
-
code: code,
|
|
106
|
-
verified_by: this.regType,
|
|
107
|
-
}));
|
|
108
|
-
}
|
|
109
|
-
render() {
|
|
110
|
-
return (index.h("salla-modal", { id: "salla-login", title: this.title, ref: modal => this.modal = modal, width: "xs" }, index.h("div", { class: "s-login-tab", ref: tab => this.tab1 = tab }, index.h("p", { class: "s-login-sub-title" }, this.loginTypeTitle), index.h("a", { href: "#", class: "s-login-main-btn", onClick: () => this.showTab(this.tab2) }, index.h("i", { class: "s-login-main-btn-icon sicon-phone" }), index.h("span", { class: "s-login-main-btn-text" }, this.smsLabel), index.h("i", { class: "main-btn-arrow sicon-keyboard_arrow_left" })), index.h("a", { href: "#", class: "s-login-main-btn", onClick: () => this.showTab(this.tab3) }, index.h("i", { class: "s-login-main-btn-icon sicon-mail" }), index.h("span", { class: "s-login-main-btn-text" }, this.emailLabel), index.h("i", { class: "main-btn-arrow sicon-keyboard_arrow_left" }))), index.h("div", { class: "s-login-tab", ref: tab => this.tab2 = tab }, index.h("label", { class: "s-login-label" }, this.mobileLabel), index.h("input", { type: "tel", ref: el => this.mobile = el, onInput: this.typing, placeholder: "5xx xxx xxx", class: "s-login-input s-ltr" }), index.h("span", { class: "s-login-error-message" }), index.h("salla-button", { wide: true, onClick: () => this.loginBySMS() }, this.enterText), index.h("a", { href: "#", onClick: () => this.showTab(this.tab3), class: "s-login-link" }, this.byEmailText)), index.h("div", { class: "s-login-tab", ref: tab => this.tab3 = tab }, index.h("label", { class: "s-login-label" }, this.emailLabel), index.h("input", { type: "email", ref: el => this.email = el, onInput: this.typing, placeholder: "your@email.com", class: "s-login-input s-ltr" }), index.h("span", { class: "s-login-error-message" }), index.h("salla-button", { wide: true, onClick: () => this.loginByEmail() }, this.enterText), index.h("a", { href: "#", onClick: () => this.showTab(this.tab2), class: "s-login-link" }, this.bySMSText)), index.h("salla-verify", { "without-modal": true, ref: tab => this.tab4 = tab, autoReload: false }), index.h("div", { ref: tab => this.tab5 = tab }, index.h("label", { class: "s-login-label" }, salla.lang.get('blocks.header.your_name')), index.h("div", { class: "s-login-input-group" }, index.h("input", { type: "text", class: "s-login-input", ref: el => this.firstName = el, placeholder: salla.lang.get('pages.profile.first_name') }), index.h("input", { type: "text", class: "s-login-input", ref: el => this.lastName = el, placeholder: salla.lang.get('pages.profile.last_name') })), index.h("div", { ref: el => this.regMobileBlock = el }, index.h("label", { class: "s-login-label" }, this.mobileLabel), index.h("input", { type: "tel", ref: el => this.regMobile = el, onInput: this.typing, placeholder: "5xx xxx xxx", class: "s-login-input s-ltr" }), index.h("span", { class: "s-login-error-message" })), index.h("div", { ref: el => this.regEmailBlock = el }, index.h("label", { class: "s-login-label" }, this.emailLabel), index.h("input", { type: "email", ref: el => this.regEmail = el, onInput: this.typing, placeholder: "your@email.com", class: "s-login-input s-ltr" }), index.h("span", { class: "s-login-error-message" })), index.h("salla-button", { wide: true, onClick: () => this.newUser() }, salla.lang.get('blocks.header.register')))));
|
|
111
|
-
}
|
|
112
|
-
componentDidRender() {
|
|
113
|
-
this.showTab(this.tab1);
|
|
114
|
-
}
|
|
115
|
-
get host() { return index.getElement(this); }
|
|
116
|
-
};
|
|
117
|
-
|
|
118
|
-
exports.SallaLogin = SallaLogin;
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
const index = require('./index-0b5b5867.js');
|
|
6
|
-
|
|
7
|
-
const SallaOffer = class {
|
|
8
|
-
constructor(hostRef) {
|
|
9
|
-
index.registerInstance(this, hostRef);
|
|
10
|
-
salla.offer.event.onExisted(data => this.show(data.offer.offer_id));
|
|
11
|
-
}
|
|
12
|
-
async show(offerId) {
|
|
13
|
-
this.modal.show();
|
|
14
|
-
console.log(offerId);
|
|
15
|
-
}
|
|
16
|
-
render() {
|
|
17
|
-
return index.h("salla-modal", { ref: modal => this.modal = modal, "is-loading": true }, index.h("slot", null));
|
|
18
|
-
}
|
|
19
|
-
componentDidLoad() {
|
|
20
|
-
//
|
|
21
|
-
}
|
|
22
|
-
get host() { return index.getElement(this); }
|
|
23
|
-
};
|
|
24
|
-
|
|
25
|
-
exports.salla_offer = SallaOffer;
|