@salla.sa/twilight-components
Version:
Salla Web Component
316 lines (309 loc) • 20 kB
JavaScript
/*!
* Crafted with ❤ by Salla
*/
import { r as registerInstance, h, H as Host, a as getElement } from './index-BQQ2x3w_.js';
import { S as Star } from './star2-D4oPi1Ov.js';
const sallaCountDownCss = "";
const SallaCountDown = class {
constructor(hostRef) {
registerInstance(this, hostRef);
/**
* The size of the count down
* */
this.size = 'md';
/**
* The color of the count down
* */
this.color = 'dark';
/**
* The digits lang to show in the count down
* */
this.digits = 'auto';
this.daysLabel = salla.lang.getWithDefault('pages.checkout.day', 'يوم');
this.hoursLabel = salla.lang.getWithDefault('pages.checkout.hour', 'ساعة');
this.minutesLabel = salla.lang.getWithDefault('pages.checkout.minute', 'دقيقة');
this.secondsLabel = salla.lang.getWithDefault('pages.checkout.second', 'ثانية');
this.endLabel = salla.lang.getWithDefault('pages.checkout.offer_ended', 'انتهت مدة العرض');
this.invalidDate = salla.lang.getWithDefault('blocks.buy_as_gift.incorrect_date', 'الرجاء إدخال الموعد بشكل صحيح');
this.offerEnded = false;
this.days = this.number(0);
this.hours = this.number(0);
this.minutes = this.number(0);
this.seconds = this.number(0);
salla.lang.onLoaded(() => {
this.daysLabel = salla.lang.getWithDefault('pages.checkout.day', 'يوم');
this.hoursLabel = salla.lang.getWithDefault('pages.checkout.hour', 'ساعة');
this.minutesLabel = salla.lang.getWithDefault('pages.checkout.minute', 'دقيقة');
this.invalidDate = salla.lang.getWithDefault('blocks.buy_as_gift.incorrect_date', 'الرجاء إدخال الموعد بشكل صحيح');
this.secondsLabel = salla.lang.getWithDefault('pages.checkout.second', 'ثانية');
this.endLabel = salla.lang.getWithDefault('pages.checkout.offer_ended', 'انتهت مدة العرض');
});
if (this.date && this.isValidDate(this.date)) {
this.startCountDown();
}
}
/**
* End the count down
* */
async endCountDown() {
clearInterval(this.countInterval);
this.offerEnded = true;
this.days = this.number(0);
this.hours = this.number(0);
this.minutes = this.number(0);
this.seconds = this.number(0);
}
componentWillLoad() {
if (typeof this.preOrder === 'string') {
try {
this.normalizedPreOrder = JSON.parse(this.preOrder);
}
catch {
this.normalizedPreOrder = undefined;
}
}
else {
this.normalizedPreOrder = this.preOrder;
}
if (this.normalizedPreOrder?.end_date) {
this.date = this.normalizedPreOrder.end_date;
if (this.date && this.isValidDate(this.date)) {
this.startCountDown();
}
}
}
isValidDate(date) {
let dateHasDashes = date.includes('-'), dateParts = date.split(' '), testedDate;
if (dateHasDashes) {
testedDate = dateParts[0].replace(/-/g, '/');
}
else {
testedDate = dateParts[0];
}
return !isNaN(Date.parse(testedDate));
}
number(digit) {
return salla.helpers.number(digit, this.digits === 'en');
}
startCountDown() {
let countDownDate = new Date(this.date.replace(/-/g, '/'));
if (this.endOfDay || this.date.split(' ').length === 1) {
countDownDate.setHours(23, 59, 59, 999);
}
let countDownTime = countDownDate.getTime();
this.countInterval = setInterval(() => {
let now = new Date().getTime();
let distance = countDownTime - now;
this.days = this.number(Math.floor(distance / (1000 * 60 * 60 * 24)));
this.hours = this.number(Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)));
this.minutes = this.number(Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)));
this.seconds = this.number(Math.floor((distance % (1000 * 60)) / 1000));
if (distance < 0) {
this.endCountDown();
}
}, 1000);
}
renderCountDown() {
return (h("ul", { class: `s-count-down-list ${this.boxed ? 's-count-down-boxed' : ''} ${this.offerEnded ? 's-count-down-ended' : ''} s-count-down-${this.size} s-count-down-${this.color}` }, h("li", { class: "s-count-down-item" }, h("div", { class: "s-count-down-item-value" }, this.seconds), this.labeled && h("div", { class: "s-count-down-item-label" }, this.secondsLabel)), h("li", { class: "s-count-down-item" }, h("div", { class: "s-count-down-item-value" }, this.minutes), this.labeled && h("div", { class: "s-count-down-item-label" }, this.minutesLabel)), h("li", { class: "s-count-down-item" }, h("div", { class: "s-count-down-item-value" }, this.hours), this.labeled && h("div", { class: "s-count-down-item-label" }, this.hoursLabel)), h("li", { class: "s-count-down-item" }, h("div", { class: "s-count-down-item-value" }, this.days), this.labeled && h("div", { class: "s-count-down-item-label" }, this.daysLabel))));
}
renderInvalidDate() {
return h("div", { class: "s-count-down-text-center" }, this.invalidDate);
}
renderOfferEnded() {
return h("div", { class: "s-count-down-end-text" }, !!this.endText ? this.endText : this.endLabel);
}
renderPreOrderToBeAvailableOn() {
if (!this.normalizedPreOrder?.availability_date ||
!this.isValidDate(this.normalizedPreOrder?.availability_date))
return null;
return (h("div", { class: "s-count-down-info-message" }, h("i", { class: "sicon-info" }), h("span", null, salla.lang.getWithDefault('pages.products.expected_to_be', 'متوقَّع توفُّره بتاريخ:')), h("span", null, new Date(this.normalizedPreOrder?.availability_date).toLocaleDateString(salla.lang.locale, {
weekday: 'long',
year: 'numeric',
month: 'long',
day: 'numeric',
}))));
}
renderPreOrderCountDown() {
if (!this.normalizedPreOrder?.activate_countdown)
return null;
return (h("div", { class: "s-count-down-pre-order-container" }, h("p", { class: "text-sm " }, salla.lang.getWithDefault('pages.products.pre_order_ends_in', 'ينتهي الطلب المسبق خلال:')), this.renderCountDown()));
}
renderPreOrder() {
return (h("div", null, typeof this.normalizedPreOrder === 'object' &&
this.normalizedPreOrder?.availability_date &&
this.renderPreOrderToBeAvailableOn(), this.renderPreOrderCountDown()));
}
renderPrefixText() {
if (!this.prefixText)
return null;
return h("span", { class: "s-count-down-prefix-text" }, this.prefixText);
}
renderButton() {
if (!this.withButton || !this.buttonText)
return null;
return h("salla-button", { color: "primary", size: "medium", href: this.buttonHref }, this.buttonIcon ? h("i", { class: this.buttonIcon }) : null, h("span", null, this.buttonText));
}
renderContent() {
if (!this.date)
return null;
if (!this.isValidDate(this.date)) {
return this.renderInvalidDate();
}
if (this.preOrder) {
return this.renderPreOrder();
}
return this.renderCountDown();
}
render() {
return (h(Host, { key: 'de0e93d1c6bcf24dc3b07705786fb9c204bfa625', class: `s-count-down-wrapper ${this.preOrder && this.isValidDate(this.date) ? 's-count-down-pre-order' : ''} ${this.horizontal ? 's-count-down-horizontal' : ''} ${this.withButton ? 's-count-down-with-button' : ''}` }, this.renderPrefixText(), this.renderContent(), this.offerEnded && this.renderOfferEnded(), this.renderButton()));
}
};
SallaCountDown.style = sallaCountDownCss;
var Heart = `<!-- 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>heart</title>
<path d="M23.333 2.267c-3.547 0-5.779 1.605-7.333 3.061-1.555-1.456-3.787-3.061-7.333-3.061-5.955 0-8.667 5.045-8.667 9.733 0 8.503 10.147 14.735 15.513 16.841 0.156 0.061 0.321 0.092 0.487 0.092s0.331-0.031 0.487-0.092c5.367-2.107 15.513-8.339 15.513-16.841 0-4.688-2.712-9.733-8.667-9.733zM16 26.161c-5.537-2.309-13.333-7.799-13.333-14.161 0-3.517 1.856-7.067 6-7.067 2.983 0 4.656 1.451 6.384 3.203 0.5 0.508 1.399 0.508 1.899 0 1.728-1.752 3.401-3.203 6.384-3.203 4.144 0 6 3.549 6 7.067 0 6.363-7.796 11.852-13.333 14.161z"></path>
</svg>
`;
const sallaProductCardCss = ".s-product-card-image::before{font-family:\"sallaicons\";content:\"\\ec1f\" !important}.s-product-card-content-pie-svg circle{transition:stroke-dashoffset 1s linear;-webkit-transition:stroke-dashoffset 1s linear;-moz-transition:stroke-dashoffset 1s linear;-ms-transition:stroke-dashoffset 1s linear;-o-transition:stroke-dashoffset 1s linear;stroke:#E8EDF2;stroke-width:2px;stroke-linecap:round;fill:none}.s-product-card-content-pie-svg-bar{stroke:var(--color-primary) !important;stroke-dasharray:100 100;stroke-dashoffset:100}";
const SallaProductCard = class {
constructor(hostRef) {
registerInstance(this, hostRef);
// Store configs
salla.onReady(() => {
this.fitImageHeight = salla.config.get('store.settings.product.fit_type');
salla.wishlist.event.onAdded((_res, id) => this.toggleFavoriteIcon(true, id));
salla.wishlist.event.onRemoved((_res, id) => this.toggleFavoriteIcon(false, id));
this.placeholder = salla.url.asset(salla.config.get('theme.settings.placeholder'));
});
// Language
salla.lang.onLoaded(() => {
this.remained = salla.lang.get('pages.products.remained');
this.donationAmount = salla.lang.get('pages.products.donation_amount');
this.startingPrice = salla.lang.get('pages.products.starting_price');
this.addToCart = salla.lang.get('pages.cart.add_to_cart');
this.outOfStock = salla.lang.get('pages.products.out_of_stock');
});
// Parse product data
if (!this.product) {
return;
}
try {
this.productData = typeof this.product == 'object' ? this.product : JSON.parse(this.product);
}
catch (e) {
salla.log('Bad json passed via product prop');
}
}
// Private Methods
initCircleBar() {
let qty = this.productData.quantity, total = this.productData.quantity > 100 ? this.productData.quantity * 2 : 100, roundPercent = (qty / total) * 100, bar = this.pie.querySelector('.s-product-card-content-pie-svg-bar'), strokeDashOffsetValue = 100 - roundPercent;
bar.style.strokeDashoffset = strokeDashOffsetValue;
}
toggleFavoriteIcon(isAdded = true, id = null) {
if (id && id !== this.productData.id) {
return;
}
this.wishlistBtn?.classList.toggle('s-product-card-wishlist-added', isAdded);
}
isInWishlist() {
return salla.storage.get('salla::wishlist', []).includes(this.productData?.id);
}
async handleWishlistClick() {
const wasInWishlist = this.isInWishlist();
this.toggleFavoriteIcon(!wasInWishlist);
try {
await salla.wishlist.toggle(this.productData.id);
}
catch {
this.toggleFavoriteIcon(wasInWishlist);
}
}
formatDate(date) {
let d = new Date(date);
return `${d.getFullYear()}-${d.getMonth() + 1}-${d.getDate()}`;
}
getProductBadge() {
if (this.productData.promotion_title) {
return h("div", { class: "s-product-card-promotion-title" }, this.productData.promotion_title);
}
if (this.showQuantity && this.productData?.quantity) {
return h("div", { class: "s-product-card-quantity" }, this.remained, " ", salla.helpers.number(this.productData?.quantity));
}
if (this.showQuantity && this.productData?.is_out_of_stock) {
return h("div", { class: "s-product-card-out-badge" }, this.outOfStock);
}
return '';
}
getPriceFormat(price) {
if (!price || price == 0) {
return salla.config.get('store.settings.product.show_price_as_dash') ? '-' : '';
}
return salla.money(price);
}
getProductPrice() {
if (this.productData.is_on_sale) {
return h("div", { class: "s-product-card-sale-price" }, h("h4", { innerHTML: this.getPriceFormat(this.productData.sale_price) }), h("span", { innerHTML: this.getPriceFormat(this.productData?.regular_price) }));
}
if (this.productData.starting_price) {
return h("div", { class: "s-product-card-starting-price" }, h("p", null, this.startingPrice), h("h4", { innerHTML: this.getPriceFormat(this.productData?.starting_price) }));
}
return h("h4", { class: "s-product-card-price", innerHTML: this.getPriceFormat(this.productData?.price) });
}
render() {
const classes = {
's-product-card-entry': true,
's-product-card-vertical': !this.horizontal && !this.fullImage && !this.minimal,
's-product-card-horizontal': this.horizontal && !this.fullImage && !this.minimal,
's-product-card-fit-height': this.fitImageHeight && !this.isSpecial && !this.fullImage && !this.minimal,
's-product-card-special': this.isSpecial,
's-product-card-full-image': this.fullImage,
's-product-card-minimal': this.minimal,
's-product-card-compact': this.compact,
's-product-card-donation': this.productData?.donation,
's-product-card-shadow': this.shadowOnHover,
's-product-card-out-of-stock': this.productData?.is_out_of_stock,
};
const hrefProp = this.productData?.url ? { href: this.productData.url, title: `Learn more about ${this.productData?.name}` } : {};
return (h(Host, { key: 'af7d81ee7f9d8d56c5a8dd6092a57dc0e12cd6f4', id: `product-${this.productData?.id}`, class: classes }, h("div", { key: '31491a836d402261afee6c8d28b1600cc5b0b06d', class: !this.fullImage ? 's-product-card-image' : 's-product-card-image-full' }, h("a", { key: '18594836114d10d13a26b307b4dd30a399c2657f', ...hrefProp }, h("img", { key: '06ccf31c089968eec9cb87fbc8a308e178459577', class: `s-product-card-image-${salla.url.is_placeholder(this.productData?.image?.url)
? 'contain'
: this.fitImageHeight
? this.fitImageHeight
: 'cover'} lazy`, src: this.placeholder, alt: this.productData?.image?.alt || this.productData?.name, "data-src": this.productData?.image?.url || this.productData?.thumbnail }), !this.fullImage && !this.minimal ? this.getProductBadge() : ''), this.fullImage && h("a", { key: 'a03cd8723f1511ab0c80b46a121f201d4b600670', ...hrefProp, class: "s-product-card-overlay" }), !this.horizontal && !this.fullImage ?
h("salla-button", { shape: "icon", fill: "none", color: "light", loading: false, "aria-label": "Add or remove to wishlist", ref: el => this.wishlistBtn = el, class: "s-product-card-wishlist-btn animated", onClick: () => this.handleWishlistClick() }, h("span", { innerHTML: Heart })) : ''), h("div", { key: 'b918024efb5f4e650c16130045d4ac76f688c66b', class: "s-product-card-content" }, this.isSpecial && this.productData?.quantity ?
h("div", { class: "s-product-card-content-pie", ref: pie => this.pie = pie }, h("span", null, h("b", null, salla.helpers.number(this.productData?.quantity)), this.remained), h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "-2 -1 36 34", class: "s-product-card-content-pie-svg" }, h("circle", { cx: "16", cy: "16", r: "15.9155", class: "s-product-card-content-pie-svg-base" }), h("circle", { cx: "16", cy: "16", r: "15.9155", class: "s-product-card-content-pie-svg-bar" })))
: '', h("div", { key: '41b3d71085017bce419692aa01dce166b1fe31ab', class: { 's-product-card-content-main': true, 's-product-card-content-extra-padding': this.isSpecial } }, h("h3", { key: '0d1eaecd339554a1fcd1af6fd55f0edc94474d55', class: "s-product-card-content-title" }, h("a", { key: '203bf0b7fb32629982cbcce236095b8c3663b317', ...hrefProp }, this.productData?.name)), this.productData?.subtitle && !this.minimal ?
h("p", { class: "s-product-card-content-subtitle" }, this.productData?.subtitle)
: ''), this.productData?.donation && !this.minimal && !this.fullImage ?
[h("salla-progress-bar", { donation: this.productData?.donation }), h("div", { class: "s-product-card-donation-input" }, this.productData?.donation?.can_donate ?
[h("label", { htmlFor: "donation-amount" }, this.donationAmount, " ", h("span", null, "*")), h("input", { type: "text", onInput: e => {
salla.helpers.inputDigitsOnly(e.target);
this.addBtn.donatingAmount = e.target.value;
}, id: "donation-amount", name: "donating_amount", class: "s-form-control", placeholder: this.donationAmount })]
: '')]
: '', h("div", { key: 'f15e29713c258337540bc7cbb3e16339a6e319ab', class: { 's-product-card-content-sub': true, 's-product-card-content-extra-padding': this.isSpecial } }, this.getProductPrice(), this.productData?.rating?.stars && !this.minimal ?
h("div", { class: "s-product-card-rating" }, h("span", { innerHTML: Star }), h("span", null, this.productData.rating.stars))
: ''), this.isSpecial && this.productData.discount_ends
? h("salla-count-down", { date: this.formatDate(this.productData.discount_ends), "end-of-day": true, boxed: true, labeled: true })
: '', !this.hideAddBtn && !this.compact ?
h("div", { class: "s-product-card-content-footer" }, h("salla-add-product-button", { fill: "outline", width: "wide", ref: el => this.addBtn = el, "product-id": this.productData.id, "product-status": this.productData.status, "product-type": this.productData.type }, h("slot", { name: "add-to-cart-label" }, this.productData.add_to_cart_label)), this.horizontal || this.fullImage ?
h("salla-button", { shape: "icon", fill: "none", color: "light", loading: false, ref: el => this.wishlistBtn = el, "aria-label": "Add or remove to wishlist", class: "s-product-card-wishlist-btn animated", onClick: () => this.handleWishlistClick(), "data-id": "{{ product.id }}" }, h("span", { class: "text-xl", innerHTML: Heart }))
: '')
: ''), !this.hideAddBtn && this.compact ?
h("div", { class: "s-product-card-content-footer" }, h("salla-add-product-button", { ref: el => this.addBtn = el, "product-id": this.productData.id, "product-status": this.productData.status, "product-type": this.productData.type, class: "s-add-product-button-compact" }, h("slot", { name: "add-to-cart-label" }, this.productData.add_to_cart_label)))
: ''));
}
componentDidLoad() {
document.lazyLoadInstance?.update(this.host.querySelectorAll('.lazy'));
if (this.productData?.quantity && this.isSpecial) {
this.initCircleBar();
}
if (!salla.config.isGuest() && salla.storage.get('salla::wishlist', []).includes(this.productData?.id)) {
this.toggleFavoriteIcon();
}
}
static get assetsDirs() { return ["assets"]; }
get host() { return getElement(this); }
};
SallaProductCard.style = sallaProductCardCss;
export { SallaCountDown as salla_count_down, SallaProductCard as salla_product_card };