@salla.sa/twilight-components
Version:
Salla Web Component
241 lines (238 loc) • 14.5 kB
JavaScript
/*!
* Crafted with ❤ by Salla
*/
import { r as registerInstance, h, a as getElement } from './index-Dbv0I4re.js';
const SallaLocalizationModal = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.languageNames = {
"ar": "العربية",
"en": "English",
"sq": "shqip",
"hy": "հայերէն",
"bg": "български",
"zh": "汉语",
"hr": "hrvatski",
"cs": "čeština",
"da": "dansk",
"nl": "dutch",
"et": "eesti keel",
"fi": "suomen kieli",
"fr": "Français",
"de": "Deutsch",
"el": "Ελληνικά",
"hi": "हिन्दी",
"hu": "magyar",
//we know it's `id` as ISO 639-1 but we are using `ind` as ISO 639-2 on our system as key to avoid conflicts with `id` attribute
"ind": "bahasa Indonesia",
"ga": "Gaeilge",
"it": "Italiano",
"ja": "日本語",
"ko": "한국어",
"lv": "latviešu",
"mt": "Maltese",
"fa": "فارسی",
"pl": "Polish",
"pt": "português",
"ro": "română",
"ru": "русский",
"sl": "slovenščina",
"es": "Español",
"sv": "svenska",
"tl": "Tagalog (Filipino)",
"tr": "Türkçe",
"uk": "украї́нська",
"ur": "اُردُو",
"ms": "Bahasa Malaysia",
};
this.currenciesList = {
SAR: { en: "Saudi Riyal", ar: "ريال سعودي", symbol: "ر.س" },
USD: { en: "US Dollar", ar: "دولار أمريكي", symbol: "$" },
EUR: { en: "Euro", ar: "يورو", symbol: "€" },
AED: { en: "UAE Dirham", ar: "درهم اماراتي", symbol: "د.إ" },
KWD: { en: "Kuwaiti Dinar", ar: "دينار كويتي", symbol: "د.ك" },
BHD: { en: "Bahraini Dinar", ar: "دينار بحريني", symbol: "د.ب" },
QAR: { en: "Qatari Riyal", ar: "ريال قطري", symbol: "ر.ق" },
OMR: { en: "Omani Rial", ar: "ريال عماني", symbol: "ر.ع" },
AUD: { en: "Australian Dollar", ar: "دولار استرالي", symbol: "$" },
CAD: { en: "Canadian Dollar", ar: "دولار كندي", symbol: "$" },
CNY: { en: "Renminbi", ar: "رنمينبي", symbol: "¥" },
EGP: { en: "Egyptian Pound", ar: "جنيه مصري", symbol: "ج.م" },
GBP: { en: "Pound Sterling", ar: "جنيه استرليني", symbol: "£" },
IDR: { en: "Indonesian Rupiah", ar: "روبية إندونيسية", symbol: "Rp" },
INR: { en: "Indian Rupee", ar: "روبية هندية", symbol: "₹" },
JPY: { en: "Japanese Yen", ar: "ين ياباني", symbol: "¥" },
MYR: { en: "Malaysian Ringgit", ar: "رينغيت ماليزي", symbol: "RM" },
PKR: { en: "Pakistani Rupee", ar: "روبية باكستانية", symbol: "Rs." },
SEK: { en: "Swedish Krona", ar: "كرونة سويدية", symbol: "kr" },
SGD: { en: "Singapore Dollar", ar: "دولار سنغافوري", symbol: "$" },
TRY: { en: "Turkish Lira", ar: "ليرة تركية", symbol: "₺" },
IQD: { en: "Iraqi Dinar", ar: "دينار عراقي", symbol: "د.ع" },
LBP: { en: "Lebanese Pound", ar: "ليرة لبنانية", symbol: "ل.ل" },
MRO: { en: "Mauritanian Ouguiya", ar: "أوقية موريتانية", symbol: "UM" },
SDG: { en: "Sudanese Pound", ar: "جنيه سوداني", symbol: "SDG" },
SYP: { en: "Syrian Pound", ar: "ليرة سورية", symbol: "ل.س" },
TND: { en: "Tunisian Dinar", ar: "دينار تونسي", symbol: "د.ت" },
JOD: { en: "Jordanian Dinar", ar: "دينار أردني", symbol: "JOD" },
DZD: { en: "Algerian Dinar", ar: "دينار جزائري", symbol: "دج" },
MAD: { en: "Moroccan Dirham", ar: "درهم مغربي", symbol: "د.م." },
LYD: { en: "Libyan Dinar", ar: "دينار ليبي", symbol: "LD" },
YER: { en: "Yemeni Riyal", ar: "ريال يمني", symbol: "ر.ي" }
};
//here we will used the currency code instead of the symbol when current language is not arabic
this.arabicCurrencies = ["SAR", "AED", "KWD", "BHD", "QAR", "OMR", "EGP", "IQD", "LBP", "SYP", "TND", "DZD", "MAD", "YER"];
this.languages = [];
this.currencies = [];
this.hasError = false;
/**
* To show the trigger button or not
*/
this.showTrigger = false;
/**
* letting developer to insert his own slot like:
* <salla-localization>
* <div slot="language">...{name}....</div>
* <div slot="currency">...{name}....</div>
* </salla-localization>
* Because scoped templates not supported in stencil );
* we made a workaround to pass language & currency attributes, then replace names in rendering
*/
this.languageSlot = this.host.querySelector('[slot="language"]')?.innerHTML || '<label class="s-localization-modal-label" for="lang-{code}"><span>{name}</span></label>';
this.currencySlot = this.host.querySelector('[slot="currency"]')?.innerHTML || '<label class="s-localization-modal-label" for="currency-{code}"><span>{name}</span><small class="s-localization-modal-currency">{symbol}</small></label>';
}
async componentWillLoad() {
await Salla.onReady();
await Salla.lang.onLoaded();
Salla.event.on('localization::open', () => this.open());
if (!this.language) {
this.language = Salla.config.get('user.language_code');
}
if (!this.currency) {
this.currency = Salla.config.get('user.currency_code');
}
}
/**
* open the component
*/
async open() {
this.modal.open();
return await Salla.api.withoutNotifier(() => this.getLanguages())
.then(() => this.getCurrencies())
.then(() => {
if (this.languages.length < 2 && this.currencies.length < 2) {
this.modal.close();
}
})
.catch(e => {
console.log(e);
this.hasError = true;
this.errorMessage = e.response?.data?.error?.message || e.response?.data;
})
.finally(() => this.modal.stopLoading());
}
/**
* Hide the component
*/
async close() {
return this.modal.close();
}
getCurrency(currencyCode) {
return this.currenciesList[currencyCode || this.currency] || { en: "Saudi Riyal", ar: "ريال سعودي", symbol: "ر.س" };
}
getLanguageName() {
return this.languageNames[this.language] || this.language || '';
}
getCurrencySymbol(currencyCode) {
currencyCode = currencyCode || this.currency;
if (currencyCode === 'SAR') {
return '<i class="sicon-sar"></i>';
}
if (this.language === 'ar' || !this.arabicCurrencies.includes(currencyCode)) {
return this.getCurrency(currencyCode).symbol;
}
return currencyCode;
}
getCurrencyName(currencyCode) {
return this.language === 'ar' ? this.getCurrency(currencyCode).ar : this.getCurrency(currencyCode).en;
}
async getLanguages() {
return this.languages.length > 1 ? null : await Salla.config.languages().then(data => this.languages = data);
}
async getCurrencies() {
return this.currencies.length > 1 ? null : await Salla.config.currencies().then(data => this.currencies = Object.values(data || {}));
}
onChangeCurrency(event) {
this.currency = event.target.value;
}
onChangeLanguage(event) {
this.language = event.target.value;
}
/**
* Change currency and language to the selected ones.
*/
async submit() {
let url;
this.btn.load()
.then(() => {
if (!this.currency) {
Salla.log('There is no currency!');
return;
}
if (this.currency === Salla.config.get('user.currency_code', 'SAR')) {
return;
}
url = window.location.href;
return Salla.currency.api.change(this.currency);
})
.then(() => {
if (this.language !== Salla.config.get('user.language_code', 'ar')) {
url = Salla.helpers.addParamToUrl('lang', this.language);
}
})
.then(() => {
Salla.cookie.set('s-lang', this.language);
Salla.cookie.set('s-curr', this.currency);
})
.then(() => this.btn.stop())
.then(() => this.close())
.then(() => {
if (url) {
window.location.href = url.replace(`/${Salla.config.get('user.language_code')}/`, `/${this.language}/`);
}
});
}
render() {
return [
this.showTrigger
? h("button", { type: "button", onClick: () => this.open(), class: "s-localization-modal-trigger-btn" }, h("span", null, this.getLanguageName()), h("span", { class: "s-localization-modal-trigger-separator" }, "|"), " ", h("span", { innerHTML: this.getCurrencySymbol() }))
: '',
h("salla-modal", { key: '8b26a4e0224a049aee503c06ec288eb2dcbd00db', isLoading: true, class: "s-hidden", ref: modal => this.modal = modal, width: "xs" }, h("div", { key: 'b28c8375f6491ad8fab684dab4d203a9d23fd417', slot: 'loading' }, h("div", { key: '26967b5d8accc26b75aa0a361506341b00cc1ef7', class: "s-localization-modal-skeleton" }, h("salla-skeleton", { key: 'a97f5ceee4c1173030ec29781ee6571c50e02865', width: '25%', height: '15px' }), h("div", { key: '51edca3871e46c692b89651281e94b1716f3cade', class: "s-localization-modal-skeleton-content" }, [...Array(4)].map(() => h("div", { class: "s-localization-modal-skeleton-item" }, h("div", { class: "s-localization-modal-skeleton-item-flex" }, h("salla-skeleton", { type: 'circle', height: '16px', width: '16px' }), h("salla-skeleton", { height: '10px', width: '100px' })), h("salla-skeleton", { height: '15px', width: '20px' })))), h("salla-skeleton", { key: '5e8e3fb5c956be5a681025c7cfce59648dcc75e7', width: '25%', height: '15px' }), h("div", { key: 'd16e6d8bed9300337f84bad366e2731799363fb2', class: "s-localization-modal-skeleton-content" }, [...Array(4)].map(() => h("div", { class: "s-localization-modal-skeleton-item" }, h("div", { class: "s-localization-modal-skeleton-item-flex" }, h("salla-skeleton", { type: 'circle', height: '16px', width: '16px' }), h("salla-skeleton", { height: '10px', width: '100px' })), h("salla-skeleton", { height: '15px', width: '20px' })))), h("salla-skeleton", { key: '952633850a514afbf702d8e6afe30470ff201673', height: '40px', width: '100%' }))), !!this.hasError ?
h("salla-placeholder", { alignment: "center" }, h("span", { slot: "description" }, this.errorMessage)) :
h("div", { class: "s-localization-modal-inner" }, this.languages.length > 1 ?
h("div", { class: "s-localization-modal-section" }, h("label", { class: "s-localization-modal-title" }, Salla.lang.get('common.titles.language')), h("div", { class: "s-localization-modal-section-inner" }, this.languages.length < 6 ?
this.languages.map(lang => h("div", { class: "s-localization-modal-item" }, h("input", { class: "s-localization-modal-input", type: "radio", checked: this.language == lang.iso_code, onChange: () => this.language = lang.iso_code, name: "language", id: 'lang-' + lang.code.toLowerCase(), value: lang.code }), h("div", { class: "s-localization-modal-label-slot", id: "language-slot", innerHTML: this.languageSlot
.replace(/\{name\}/g, lang.name)
.replace(/\{code\}/g, lang.code)
.replace(/\{country_code\}/g, lang.country_code) }))) :
h("select", { class: "s-localization-modal-select", name: "language", onChange: e => this.onChangeLanguage(e) }, this.languages.map(lang => h("option", { value: lang.code, selected: this.language == lang.code }, lang.name)))))
: '', this.currencies.length > 1 ?
h("div", { class: "s-localization-modal-section" }, h("label", { class: "s-localization-modal-title" }, Salla.lang.get('common.titles.currency')), h("div", { class: "s-localization-modal-section-inner" }, this.currencies.length < 6 ?
this.currencies.map(currency => h("div", { class: "s-localization-modal-item" }, h("input", { class: "s-localization-modal-input", type: "radio", name: "currency", checked: this.currency == currency.code, onChange: () => this.currency = currency.code, id: 'currency-' + currency.code, value: currency.code }), h("div", { class: "s-localization-modal-label-slot", id: "currency-slot", innerHTML: this.currencySlot
.replace(/\{name\}/g, this.getCurrencyName(currency.code))
.replace(/\{code\}/g, currency.code)
.replace(/\{symbol\}/g, this.getCurrencySymbol(currency.code))
.replace(/\{country_code\}/g, currency.country_code) }))) :
h("select", { class: "s-localization-modal-select", name: "currency", onChange: e => this.onChangeCurrency(e) }, this.currencies.map(currency => h("option", { value: currency.code, selected: this.currency == currency.code }, currency.name)))))
: '', h("salla-button", { width: "wide", ref: btn => this.btn = btn, onClick: () => this.submit() }, Salla.lang.get('common.elements.ok'))))
];
}
/**
* to reduce dom levels we will move slot data into the parent dom
*/
componentDidRender() {
this.host.querySelectorAll('#currency-slot').forEach(el => el.replaceWith(el.firstChild));
this.host.querySelectorAll('#language-slot').forEach(el => el.replaceWith(el.firstChild));
}
get host() { return getElement(this); }
};
export { SallaLocalizationModal as salla_localization_modal };