@salla.sa/twilight-components
Version:
Salla Web Component
192 lines (182 loc) • 15.8 kB
JavaScript
/*!
* Crafted with ❤ by Salla
*/
import { r as registerInstance, h, H as Host, a as getElement } from './index-Dbv0I4re.js';
import { P as PendingOrdersIcon } from './cart-DY4LZmNP.js';
import { I as ImageIcon } from './image-C-tzSDxw.js';
var informationIcon = `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.99935 18.3332C5.39697 18.3332 1.66602 14.6022 1.66602 9.99984C1.66602 5.39746 5.39697 1.6665 9.99935 1.6665C14.6017 1.6665 18.3327 5.39746 18.3327 9.99984C18.3327 14.6022 14.6017 18.3332 9.99935 18.3332ZM9.99935 16.6665C13.6813 16.6665 16.666 13.6818 16.666 9.99984C16.666 6.31794 13.6813 3.33317 9.99935 3.33317C6.31745 3.33317 3.33268 6.31794 3.33268 9.99984C3.33268 13.6818 6.31745 16.6665 9.99935 16.6665ZM9.16602 5.83317H10.8327V7.49984H9.16602V5.83317ZM9.16602 9.1665H10.8327V14.1665H9.16602V9.1665Z" fill="#417AC8"/>
</svg>
`;
const sallaAlertCss = ":host{display:block}";
const SallaAlert = class {
constructor(hostRef) {
registerInstance(this, hostRef);
/** Variant theme */
this.variant = 'info';
}
renderIcon() {
const type = this.icon || this.variant;
if (type === 'none')
return null;
switch (type) {
case 'success':
return (h("svg", { viewBox: "0 0 24 24", width: "20", height: "20", fill: "currentColor" }, h("path", { d: "M9 16.2l-3.5-3.5L4 14.2l5 5 11-11-1.5-1.5z" })));
case 'warning':
return (h("svg", { viewBox: "0 0 24 24", width: "20", height: "20", fill: "currentColor" }, h("path", { d: "M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" })));
case 'error':
return (h("svg", { viewBox: "0 0 24 24", width: "20", height: "20", fill: "currentColor" }, h("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 \n 10 10 10-4.48 10-10S17.52 2 12 2zm5 \n 13.59L15.59 17 12 13.41 8.41 17 \n 7 15.59 10.59 12 7 8.41 8.41 7 \n 12 10.59 15.59 7 17 8.41 13.41 \n 12 17 15.59z" })));
default:
return h("span", { innerHTML: informationIcon });
}
}
render() {
return (h(Host, { key: '3b5dd808399eeda5d930454542cd41cca26b0cc3', class: `s-alert-wrapper s-alert-${this.variant}` }, h("span", { key: '4f58234774d1afc790fb83bff983ca9366faa349', class: "s-alert-icon" }, this.renderIcon()), h("span", { key: '10eb3f87e6e77dcc5406a24f866feee1cc1f46ef', class: "s-alert-text" }, this.message, h("slot", { key: '3656e15aeb25fb7285e88f694c090bad3b32dfbd' }))));
}
};
SallaAlert.style = sallaAlertCss;
var infoIcon = `<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<title>info</title>
<path d="M16 13.333c-0.737 0-1.333 0.596-1.333 1.333v9.333c0 0.737 0.596 1.333 1.333 1.333s1.333-0.596 1.333-1.333v-9.333c0-0.737-0.596-1.333-1.333-1.333zM16 7.987c-0.737 0-1.333 0.596-1.333 1.333v0.013c0 0.737 0.596 1.327 1.333 1.327s1.333-0.603 1.333-1.34-0.596-1.333-1.333-1.333zM16 0c-8.823 0-16 7.177-16 16s7.177 16 16 16 16-7.177 16-16-7.177-16-16-16zM16 29.333c-7.352 0-13.333-5.981-13.333-13.333s5.981-13.333 13.333-13.333 13.333 5.981 13.333 13.333-5.981 13.333-13.333 13.333z"></path>
</svg>
`;
var moneyIcon = `<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<title>money-card</title>
<path d="M17.333 14.667h-2.667c-0.736 0-1.333-0.599-1.333-1.333s0.597-1.333 1.333-1.333h4c0.737 0 1.333-0.597 1.333-1.333s-0.596-1.333-1.333-1.333h-1.333v-1.333c0-0.736-0.596-1.333-1.333-1.333s-1.333 0.597-1.333 1.333v1.333c-2.205 0-4 1.795-4 4s1.795 4 4 4h2.667c0.736 0 1.333 0.597 1.333 1.333s-0.597 1.333-1.333 1.333h-4c-0.737 0-1.333 0.596-1.333 1.333s0.596 1.333 1.333 1.333h1.333v1.333c0 0.737 0.596 1.333 1.333 1.333s1.333-0.596 1.333-1.333v-1.333c2.205 0 4-1.795 4-4s-1.795-4-4-4zM28 2.667h-24c-2.205 0-4 1.795-4 4v18.667c0 2.205 1.795 4 4 4h24c2.205 0 4-1.795 4-4v-18.667c0-2.205-1.795-4-4-4zM29.333 25.333c0 0.736-0.597 1.333-1.333 1.333h-24c-0.736 0-1.333-0.597-1.333-1.333v-18.667c0-0.735 0.597-1.333 1.333-1.333h24c0.736 0 1.333 0.599 1.333 1.333z"></path>
</svg>
`;
var checkCircleIcon = `<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<title>check-circle</title>
<path d="M19.557 11.26l-4.593 6.891-2.891-1.927c-0.616-0.411-1.441-0.243-1.849 0.369-0.409 0.612-0.244 1.441 0.369 1.849l4 2.667c0.228 0.152 0.485 0.224 0.739 0.224 0.431 0 0.855-0.208 1.111-0.593l5.333-8c0.409-0.612 0.244-1.441-0.369-1.849-0.616-0.411-1.443-0.243-1.849 0.369zM16 0c-8.823 0-16 7.177-16 16s7.177 16 16 16 16-7.177 16-16-7.177-16-16-16zM16 29.333c-7.352 0-13.333-5.981-13.333-13.333s5.981-13.333 13.333-13.333 13.333 5.981 13.333 13.333-5.981 13.333-13.333 13.333z"></path>
</svg>
`;
const sallaBottomAlertCss = ":host{display:block}";
const SallaBottomAlert = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.storeId = salla.config.get('store.id');
this.template = salla.config.get('store.template');
this.loading = false;
this.templateData = {};
this.defaultMessage = salla.lang.getWithDefault('common.elements.store_is_available_for_purchase', 'هذا المتجر تطويري ومتاح للشراء من');
this.defaultActionLabel = salla.lang.get('common.elements.know_more');
this.storeFeatures = salla.lang.get('common.elements.store_features');
this.storeDetails = salla.lang.get('common.elements.store_details');
this.storePrice = salla.lang.getWithDefault('common.elements.store_price', 'سعر المتجر');
this.storePriceDetails = salla.lang.getWithDefault('common.elements.store_price_details', 'السعر يشمل');
this.theDeveloper = salla.lang.get('common.elements.the_developer');
this.templateInformation = salla.lang.get('common.elements.template_information');
this.buyTheTemplate = salla.lang.get('common.elements.buy_the_template');
this.isRtl = salla.config.get('theme.is_rtl', true);
this.storeName = salla.config.get('store.name');
this.salla = salla.lang.getWithDefault('common.elements.salla', 'سلة');
this.readyStores = salla.lang.getWithDefault('common.elements.ready_stores', 'المتاجر الجاهزة');
this.moreDetailsLabel = salla.lang.getWithDefault('common.elements.more_details', 'تفاصيل أكثر');
/**
* Alert Type
* */
this.type = 'popup';
salla.lang.onLoaded(() => {
this.defaultMessage = salla.lang.get('common.elements.experimental_and_available_store');
this.defaultActionLabel = salla.lang.get('common.elements.know_more');
this.storeFeatures = salla.lang.get('common.elements.store_features');
this.storeDetails = salla.lang.get('common.elements.store_details');
this.templateInformation = salla.lang.get('common.elements.template_information');
this.buyTheTemplate = salla.lang.get('common.elements.buy_the_template');
salla.helpers.setNested(salla.lang.messages['ar.trans'], 'common.elements.more_details', 'تفاصيل أكثر');
salla.helpers.setNested(salla.lang.messages['en.trans'], 'common.elements.more_details', 'More Details');
salla.helpers.setNested(salla.lang.messages['ar.trans'], 'common.elements.store_price', 'سعر المتجر');
salla.helpers.setNested(salla.lang.messages['en.trans'], 'common.elements.store_price', 'Store Price');
salla.helpers.setNested(salla.lang.messages['ar.trans'], 'common.elements.the_developer', 'المطور');
salla.helpers.setNested(salla.lang.messages['en.trans'], 'common.elements.the_developer', 'the developer');
salla.helpers.setNested(salla.lang.messages['ar.trans'], 'common.elements.store_price_details', 'السعر يشمل');
salla.helpers.setNested(salla.lang.messages['en.trans'], 'common.elements.store_price_details', 'Price Includes');
salla.helpers.setNested(salla.lang.messages['ar.trans'], 'common.elements.salla', 'سلة');
salla.helpers.setNested(salla.lang.messages['en.trans'], 'common.elements.salla', 'Salla');
salla.helpers.setNested(salla.lang.messages['ar.trans'], 'common.elements.store_is_available_for_purchase', 'هذا المتجر تطويري ومتاح للشراء من');
salla.helpers.setNested(salla.lang.messages['en.trans'], 'common.elements.store_is_available_for_purchase', 'This ready store is available for purchase from');
salla.helpers.setNested(salla.lang.messages['ar.trans'], 'common.elements.ready_stores', 'المتاجر الجاهزة');
salla.helpers.setNested(salla.lang.messages['en.trans'], 'common.elements.ready_stores', 'Ready Stores');
setTimeout(() => {
this.storePrice = salla.lang.get('common.elements.store_price');
this.theDeveloper = salla.lang.get('common.elements.the_developer');
this.storePriceDetails = salla.lang.getWithDefault('common.elements.store_price_details', 'السعر يشمل');
this.salla = salla.lang.getWithDefault('common.elements.salla', 'سلة');
this.defaultMessage = salla.lang.getWithDefault('common.elements.store_is_available_for_purchase', 'هذا المتجر تطويري ومتاح للشراء من');
this.readyStores = salla.lang.getWithDefault('common.elements.ready_stores', 'المتاجر الجاهزة');
// Initialize moreDetailsLabel after translations loaded
this.moreDetailsLabel = salla.lang.getWithDefault('common.elements.more_details', 'More Details');
}, 100);
});
}
componentDidLoad() {
// Fetch template data on mount if there's a template
if (this.template &&
typeof this.template === 'object' &&
Object.keys(this.template).length > 0) {
this.fetchTemplateData();
}
}
open() {
return this.drawer.open();
}
fetchTemplateData() {
if (Object.keys(this.templateData).length) {
return;
}
this.loading = true;
return salla.api
.request(`/store/template`, {}, 'get', { 'Store-Identifier': this.storeId })
.then(res => {
this.templateData = res.data;
this.loading = false;
})
.catch(() => {
this.loading = false;
});
}
handleAction() {
if (this.type === 'link') {
window.location.href = this.actionUrl;
}
if (this.type === 'popup') {
this.open();
}
}
popup() {
return (h("salla-drawer", { class: "s-bottom-alert-modal", ref: drawer => (this.drawer = drawer), "no-padding": true, onLoad: () => {
if (this.drawer && Object.keys(this.templateData).length) {
this.drawer.setTitle(this.storeDetails + ' ' + this.storeName);
}
} }, Object.keys(this.templateData).length
? [
h("div", { class: "s-bottom-alert-modal-inner s-scrollbar" }, h("div", { class: { 's-bottom-alert-modal-content': true } }, this.templateData?.features
? [
h("div", { class: "s-bottom-alert-modal-content-title" }, h("i", { innerHTML: ImageIcon, class: "s-bottom-alert-modal-content-icon" }), h("span", null, this.storeFeatures)),
h("div", { class: "s-bottom-alert-modal-content-features", innerHTML: this.templateData?.features }),
]
: ''), h("div", { class: {
's-bottom-alert-modal-content': true,
's-bottom-alert-modal-content-extra-padding': this.templateData?.price,
} }, this.templateData?.features
? [
h("div", { class: "s-bottom-alert-modal-content-title" }, h("i", { innerHTML: moneyIcon, class: "s-bottom-alert-modal-content-icon" }), h("span", null, this.storePriceDetails)),
h("div", { class: "s-bottom-alert-modal-content-price-details" }, this.templateData?.price_details?.items.map(item => (h("div", { class: "s-bottom-alert-modal-content-price-details-item" }, h("i", { innerHTML: checkCircleIcon, class: "s-bottom-alert-modal-content-price-details-item-icon" }), h("span", { class: "s-bottom-alert-modal-content-price-details-item-name" }, item.name), h("span", { class: "s-bottom-alert-modal-content-price-details-item-price", innerHTML: salla.money(item.price) }))))),
]
: ''), this.templateData?.link ? (h("div", { class: "s-bottom-alert-modal-content-footer" }, h("salla-button", { color: "primary", size: "medium", width: "wide", href: this.templateData?.link }, h("i", { innerHTML: PendingOrdersIcon }), this.buyTheTemplate))) : ('')),
]
: ''));
}
render() {
const hasTemplate = this.template && typeof this.template === 'object' && Object.keys(this.template).length > 0;
return (h(Host, { key: 'e5f273d72875760e30d99d419b247137583bc450', class: `s-bottom-alert-wrapper ${hasTemplate ? 's-bottom-alert-wrapper-with-template' : ''}` }, hasTemplate && (h("div", { key: '1db37d7c67aae449f41a9a3ed83489b2a0653cef', class: "s-bottom-alert-logo-section" }, h("img", { key: '18701cd3d807042b4d852f283d43a6855282f791', src: "https://cdn.salla.network/images/logo/logo-light.svg", alt: "Salla", class: "s-bottom-alert-logo" }), h("span", { key: '66bb3f9b3c00aee5c2694d5ddb142e753ae7fa1a', class: "s-bottom-alert-logo-text" }, this.readyStores))), h("div", { key: '01d47c9ec38370b83bdb3fdc29291f55e1b3aa42', class: "s-bottom-alert-content" }, h("div", { key: '5380873bf9d393c0fa18da196e1bfb675a8c9c9b', class: "flex items-center gap-2" }, h("div", { key: '882382de35a7c9a767e2eb90305c8a973d01ac21', class: "s-bottom-alert-icon" }, this.icon ? h("i", { class: this.icon }) : h("i", { innerHTML: infoIcon })), h("div", { key: 'dfbaa427fd4e8b755a479e0b5459422e44a95f59', class: "s-bottom-alert-message" }, this.message ? (this.message) : hasTemplate ? (h("span", { class: "flex flex-wrap items-center gap-1" }, this.defaultMessage, h("span", { class: {
's-bottom-alert-message-highlight': true,
}, "aria-label": "Developer" }, this.salla), h("span", { innerHTML: salla.money(this.template.price) }))) : (this.defaultMessage))), this.type !== 'banner' && (h("div", { key: '327ef4b5ecdab7d994418c033a78c2531eb28de5', class: hasTemplate ? 's-bottom-alert-actions-group' : 's-bottom-alert-action' }, hasTemplate ? (this.loading ? (h("salla-loading", { size: "20" })) : (h("div", { class: "s-bottom-alert-actions-group-container" }, h("a", { class: "s-bottom-alert-action-link", onClick: () => this.handleAction() }, this.actionLabel || this.moreDetailsLabel), this.templateData?.link ? (h("button", { type: "button", class: "s-bottom-alert-action-purchase-button", onClick: () => window.open(this.templateData?.link, '_blank') }, this.buyTheTemplate)) : null))) : (h("salla-button", { href: this.actionUrl, size: "medium", onClick: () => this.handleAction(), width: "normal" }, this.actionLabel || this.defaultActionLabel)))), this.type === 'popup' && this.popup())));
}
get host() { return getElement(this); }
};
SallaBottomAlert.style = sallaBottomAlertCss;
export { SallaAlert as salla_alert, SallaBottomAlert as salla_bottom_alert };