@salla.sa/twilight-components
Version:
Salla Web Component
265 lines (260 loc) • 15.2 kB
JavaScript
/*!
* Crafted with ❤ by Salla
*/
import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
import { P as PendingOrdersIcon } from './cart.js';
import { d as defineCustomElement$6 } from './salla-button2.js';
import { d as defineCustomElement$5 } from './salla-loading2.js';
import { d as defineCustomElement$4 } from './salla-modal2.js';
import { d as defineCustomElement$3 } from './salla-product-availability2.js';
import { d as defineCustomElement$2 } from './salla-quick-buy2.js';
import { d as defineCustomElement$1 } from './salla-tel-input2.js';
var WalletIcon = `<!-- 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>full-wallet</title>
<path d="M29 12h-26c-0.668-0.008-1.284-0.226-1.787-0.59l0.009 0.006c-0.744-0.552-1.222-1.428-1.222-2.416 0-1.657 1.343-3 2.999-3h6c0.552 0 1 0.448 1 1s-0.448 1-1 1v0h-6c-0.552 0-1 0.448-1 1 0 0.326 0.156 0.616 0.397 0.798l0.002 0.002c0.167 0.12 0.374 0.194 0.599 0.2l0.001 0h26c0.552 0 1 0.448 1 1s-0.448 1-1 1v0zM27 12c-0.552 0-1-0.448-1-1v0-3h-3c-0.552 0-1-0.448-1-1s0.448-1 1-1v0h4c0.552 0 1 0.448 1 1v0 4c0 0.552-0.448 1-1 1v0zM29 30h-26c-1.657 0-3-1.343-3-3v0-18c0-0.552 0.448-1 1-1s1 0.448 1 1v0 18c0 0.552 0.448 1 1 1v0h25v-5c0-0.552 0.448-1 1-1s1 0.448 1 1v0 6c0 0.552-0.448 1-1 1v0zM29 18c-0.552 0-1-0.448-1-1v0-6c0-0.552 0.448-1 1-1s1 0.448 1 1v0 6c0 0.552-0.448 1-1 1v0zM31 24h-7c-2.209 0-4-1.791-4-4s1.791-4 4-4v0h7c0.552 0 1 0.448 1 1v0 6c0 0.552-0.448 1-1 1v0zM24 18c-1.105 0-2 0.895-2 2s0.895 2 2 2v0h6v-4zM25 12c-0.001 0-0.001 0-0.002 0-0.389 0-0.726-0.222-0.891-0.546l-0.003-0.006-3.552-7.106-2.306 1.152c-0.13 0.066-0.284 0.105-0.447 0.105-0.552 0-1-0.448-1-1 0-0.39 0.223-0.727 0.548-0.892l0.006-0.003 3.2-1.6c0.13-0.067 0.284-0.106 0.447-0.106 0.39 0 0.727 0.223 0.892 0.548l0.003 0.006 4 8c0.067 0.13 0.106 0.285 0.106 0.448 0 0.552-0.448 1-1 1v0zM21 12c-0.001 0-0.001 0-0.002 0-0.389 0-0.726-0.222-0.891-0.546l-0.003-0.006-3.552-7.106-15.104 7.552c-0.13 0.066-0.284 0.105-0.447 0.105-0.552 0-1-0.448-1-1 0-0.39 0.223-0.727 0.548-0.892l0.006-0.003 16-8c0.13-0.067 0.284-0.106 0.447-0.106 0.39 0 0.727 0.223 0.892 0.548l0.003 0.006 4 8c0.067 0.13 0.106 0.285 0.106 0.448 0 0.552-0.448 1-1 1-0.001 0-0.001 0-0.002 0h0z"></path>
</svg>
`;
const sallaAddProductButtonCss = ":host{display:block}salla-add-product-button[width=wide]{width:100%}";
const SallaAddProductButton = /*@__PURE__*/ proxyCustomElement(class SallaAddProductButton extends HTMLElement {
constructor() {
super();
this.__registerHost();
this.success = createEvent(this, "success", 7);
this.failed = createEvent(this, "failed", 7);
this.hostAttributes = {};
/**
* Product Status.Defaults to `sale`
*/
this.productStatus = 'sale';
/**
* Product type. Defaults to `product`
*/
this.productType = 'product';
this.selectedOptions = [];
this.buyNowText = salla.lang.get('pages.products.buy_now');
salla.lang.onLoaded(() => {
this.buyNowText = salla.lang.get('pages.products.buy_now');
});
}
getLabel() {
if (this.productStatus === 'sale' && this.supportStickyBar && window.innerWidth <= 768 && this.showQuickBuy && this.isApplePayActive) {
return PendingOrdersIcon;
}
if (this.productStatus === 'sale' && this.productType === 'booking') {
return salla.lang.get('pages.cart.book_now');
}
if (this.productStatus === 'sale') {
return salla.lang.get('pages.cart.add_to_cart');
}
if (this.productType !== 'donating') {
return salla.lang.get('pages.products.out_of_stock');
}
// donating
return salla.lang.get('pages.products.donation_exceed');
}
addProductToCart(event) {
var _a;
if (this.productType === 'booking') {
event.preventDefault();
return this.addBookingProduct();
}
// we want to ignore the click action when the type of button is submit a form
if (this.hostAttributes.type === 'submit') {
return false;
}
event.preventDefault();
(_a = this.btn) === null || _a === void 0 ? void 0 : _a.disable();
/**
* by default the quick add is just an alias for add item function
* but its work only when the id is the only value is passed via the object
* so we will filter the object entities to remove null and zero values in case we don't want the normal add item action
*/
const data = Object.entries({
id: this.productId,
donation_amount: this.donatingAmount,
quantity: this.quantity,
endpoint: 'quickAdd'
}).reduce((a, [k, v]) => (v ? (a[k] = v, a) : a), {});
return salla.cart.addItem(data)
.then(response => {
var _a;
this.selectedOptions = [];
(_a = this.btn) === null || _a === void 0 ? void 0 : _a.enable();
this.success.emit(response);
})
.catch(error => { var _a; this.failed.emit(error); (_a = this.btn) === null || _a === void 0 ? void 0 : _a.enable(); });
}
addBookingProduct() {
if (salla.config.isGuest()) {
salla.auth.api.setAfterLoginEvent('booking::add', this.productId);
salla.event.dispatch('login::open');
return;
}
return salla.booking.add(this.productId)
.then(resp => this.success.emit(resp))
.catch(error => this.failed.emit(error));
}
getBtnAttributes() {
for (let i = 0; i < this.host.attributes.length; i++) {
if (!['id', 'class'].includes(this.host.attributes[i].name)) {
this.hostAttributes[this.host.attributes[i].name] = this.host.attributes[i].value;
}
}
return this.hostAttributes;
}
getQuickBuyBtnAttributes() {
return Object.assign(Object.assign({}, this.getBtnAttributes()), { type: this.supportStickyBar && window.innerWidth <= 768 ? 'plain' : this.productType == 'donating' ? 'donate' : 'buy' });
}
miniCheckoutWidget() {
let storeId = salla.config.get('store.id');
if (!storeId) {
return;
}
return h("salla-mini-checkout-widget", { language: salla.lang.locale, "store-id": storeId, config: { user: salla.config.get('user') }, products: [this.productId], api: salla.config.get('store.api'), outline: true, "form-selector": "form.product-form", class: "s-add-product-button-mini-checkout" }, h("div", { slot: "widget-label", class: "s-add-product-button-mini-checkout-content" }, h("span", { innerHTML: WalletIcon }), this.buyNowText));
}
componentWillLoad() {
return salla.onReady()
.then(() => {
var _a, _b, _c;
// this to fix not added hydrated class to html element after components loaded
document.documentElement.classList.add('hydrated');
this.showQuickBuy = this.quickBuy
&& salla.config.get('store.settings.buy_now')
&& this.productStatus == 'sale'
&& this.productType !== 'booking';
this.isApplePayActive = ((_a = window.ApplePaySession) === null || _a === void 0 ? void 0 : _a.canMakePayments())
&& ((_b = salla.config.get('store.settings.payments')) === null || _b === void 0 ? void 0 : _b.includes('apple_pay'))
&& salla.config.get('store.settings.is_salla_gateway', false);
this.passedLabel = this.host.innerHTML.replace('<!---->', '').trim();
if (!!this.passedLabel && window.innerWidth >= 768) {
return (_c = this.btn) === null || _c === void 0 ? void 0 : _c.setText(this.passedLabel);
}
if (this.host.getAttribute('type') === 'submit' && this.supportStickyBar) {
window.addEventListener('resize', () => { var _a; return (_a = this.btn) === null || _a === void 0 ? void 0 : _a.setText((window.innerWidth >= 768 && !!this.passedLabel) ? this.passedLabel : this.getLabel()); });
}
});
}
render() {
var _a;
//TODO:: find a better fix, this is a patch for issue that duplicates the buttons more than twice @see the screenshot inside this folder
if ((_a = this.host.closest('.swiper-slide')) === null || _a === void 0 ? void 0 : _a.classList.contains('swiper-slide-duplicate')) {
return '';
}
if (this.hasSubscribedOptions) {
return h(Host, null, h("salla-product-availability", Object.assign({}, this.getBtnAttributes(), { "is-subscribed": true }), h("span", { class: "s-hidden" }, h("slot", null))));
}
if ((this.productStatus === 'out-and-notify' && this.channels) || this.hasOutOfStockOption) {
return h(Host, null, h("salla-product-availability", Object.assign({}, this.getBtnAttributes()), h("span", { class: "s-hidden" }, h("slot", null))));
}
return h(Host, { class: {
's-add-product-button-with-quick-buy': this.showQuickBuy,
's-add-product-button-with-sticky-bar': this.supportStickyBar,
's-add-product-button-with-apple-pay': this.showQuickBuy && this.isApplePayActive
} }, h("div", { class: {
's-add-product-button-main': this.showQuickBuy,
'w-full': !document.getElementById('fast-checkout-js') || ['financial_support', 'donating'].includes(this.productType) // This is a temporary fix until all themes fully support the fast checkout -- To be removed later
} }, h("salla-button", Object.assign({ color: this.productStatus === 'sale' ? 'primary' : 'light', type: "button", fill: this.productStatus === 'sale' ? 'solid' : 'outline', ref: el => this.btn = el, onClick: event => this.addProductToCart(event), disabled: this.productStatus !== 'sale' }, this.getBtnAttributes(), { "loader-position": "center" }), h("slot", null)), this.showQuickBuy && !!document.getElementById('fast-checkout-js') && !['financial_support', 'donating'].includes(this.productType) ? this.miniCheckoutWidget() : ''), this.showQuickBuy && this.isApplePayActive ? h("salla-quick-buy", Object.assign({}, this.getQuickBuyBtnAttributes())) : '');
}
componentDidLoad() {
if (!this.notifyOptionsAvailability) {
return;
}
salla.event.on('product-options::change', async (data) => {
var _a, _b;
if (!['thumbnail', 'color', 'single-option'].includes(data.option.type)) {
return;
}
this.hasSubscribedOptions = false;
this.selectedOptions = await ((_a = document.querySelector(`salla-product-options[product-id="${this.productId}"]`)) === null || _a === void 0 ? void 0 : _a.getSelectedOptions());
this.hasOutOfStockOption = await ((_b = document.querySelector(`salla-product-options[product-id="${this.productId}"]`)) === null || _b === void 0 ? void 0 : _b.hasOutOfStockOption());
let subscribedDetails = salla.storage.get(`product-${this.productId}-subscribed-options`);
if (!subscribedDetails && !this.subscribedOptions || !this.hasOutOfStockOption) {
return;
}
if (salla.config.isGuest()) {
const parsedSubscribedDetails = subscribedDetails ? subscribedDetails.map(ids => ids.split(',').map(id => parseInt(id))) : [];
this.hasSubscribedOptions = parsedSubscribedDetails.length > 0 && parsedSubscribedDetails.some(ids => ids.every(id => this.selectedOptions.some(option => option.id === id)));
}
else {
this.hasSubscribedOptions = this.subscribedOptions && this.subscribedOptions !== 'null' && this.subscribedOptions !== '[]' ? JSON.parse(this.subscribedOptions).some(ids => ids.every(id => this.selectedOptions.some(option => option.id === id))) : false;
}
});
}
componentDidRender() {
var _a, _b;
//if label not passed, get label
if (!!this.passedLabel && (!this.supportStickyBar || window.innerWidth >= 768)) {
// if passed label, set it
(_a = this.btn) === null || _a === void 0 ? void 0 : _a.setText(this.passedLabel);
return;
}
(_b = this.btn) === null || _b === void 0 ? void 0 : _b.setText(this.getLabel());
salla.lang.onLoaded(() => { var _a; return (_a = this.btn) === null || _a === void 0 ? void 0 : _a.setText(this.getLabel()); });
}
get host() { return this; }
static get style() { return sallaAddProductButtonCss; }
}, [4, "salla-add-product-button", {
"channels": [513],
"subscribedOptions": [1, "subscribed-options"],
"quickBuy": [1540, "quick-buy"],
"quantity": [514],
"donatingAmount": [514, "donating-amount"],
"notifyOptionsAvailability": [516, "notify-options-availability"],
"productId": [520, "product-id"],
"supportStickyBar": [516, "support-sticky-bar"],
"productStatus": [513, "product-status"],
"productType": [513, "product-type"],
"hasOutOfStockOption": [32],
"hasSubscribedOptions": [32],
"selectedOptions": [32],
"showQuickBuy": [32],
"isApplePayActive": [32],
"buyNowText": [32]
}]);
function defineCustomElement() {
if (typeof customElements === "undefined") {
return;
}
const components = ["salla-add-product-button", "salla-button", "salla-loading", "salla-modal", "salla-product-availability", "salla-quick-buy", "salla-tel-input"];
components.forEach(tagName => { switch (tagName) {
case "salla-add-product-button":
if (!customElements.get(tagName)) {
customElements.define(tagName, SallaAddProductButton);
}
break;
case "salla-button":
if (!customElements.get(tagName)) {
defineCustomElement$6();
}
break;
case "salla-loading":
if (!customElements.get(tagName)) {
defineCustomElement$5();
}
break;
case "salla-modal":
if (!customElements.get(tagName)) {
defineCustomElement$4();
}
break;
case "salla-product-availability":
if (!customElements.get(tagName)) {
defineCustomElement$3();
}
break;
case "salla-quick-buy":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
case "salla-tel-input":
if (!customElements.get(tagName)) {
defineCustomElement$1();
}
break;
} });
}
export { SallaAddProductButton as S, defineCustomElement as d };
//# sourceMappingURL=salla-add-product-button2.js.map
//# sourceMappingURL=salla-add-product-button2.js.map