@salla.sa/twilight-components
Version:
Salla Web Component
220 lines (219 loc) • 14.8 kB
JavaScript
/*!
* Crafted with ❤ by Salla
*/
import { h } from "@stencil/core";
import { closeModals, formattedPointsJsx } from "./functions";
import SIGift from "../../assets/svg/gift.svg";
import SICart2 from "../../assets/svg/cart2.svg";
import SIStore from "../../assets/svg/store.svg";
import SIUserAdd from "../../assets/svg/user-add.svg";
import SIChatConversationAlt from "../../assets/svg/chat-conversation-alt.svg";
import SILink1 from "../../assets/svg/link1.svg";
import SIUser from "../../assets/svg/user.svg";
import SIMail from "../../assets/svg/mail.svg";
import SICalendar from "../../assets/svg/calendar.svg";
import SIiPhoneX from "../../assets/svg/iphone-x.svg";
import SILocation from "../../assets/svg/location.svg";
import SIMapLocation from "../../assets/svg/map-location.svg";
import SIShipping from "../../assets/svg/shipping.svg";
/**
* Dashboard sicons:
* share - sicon-share-alt
* order from store - sicon-shopping-basket
* rate order - sicon-chat-conversation-alt
* order from app - sicon-iphone-x
* first order - sicon-add-to-cart
* pos - sicon-store
* fill profile - sicon-user-add
*/
const sicons = {
'FIRST_ORDER_STORE_FOR_UNIT': h("span", { innerHTML: SICart2 }),
'FIRST_ORDER_STORE_FIX_AMOUNT': h("span", { innerHTML: SICart2 }),
'ORDER_FROM_APP_FOR_UNIT': h("span", { innerHTML: SICart2 }),
'ORDER_FROM_APP_FIX_AMOUNT': h("span", { innerHTML: SICart2 }),
'CONDITION_RATING_SHIPPING_STORE': h("span", { innerHTML: SIStore }),
'CONDITION_RATING_PRODUCT': h("span", { innerHTML: SIChatConversationAlt }),
'CONDITION_RATING_SHIPPING_COMPANY': h("span", { innerHTML: SIShipping }),
'CONDITION_COMPLETE_PERSONAL_INFORMATION_BIRTHDAY': h("span", { innerHTML: SICalendar }),
'CONDITION_COMPLETE_PERSONAL_INFORMATION_EMAIL': h("span", { innerHTML: SIMail }),
'CONDITION_COMPLETE_PERSONAL_INFORMATION_MOBILE': h("span", { innerHTML: SIiPhoneX }),
'CONDITION_COMPLETE_PERSONAL_INFORMATION_GENDER': h("span", { innerHTML: SIUser }),
'CONDITION_BUY_FROM_STORE_FOR_UNIT': h("span", { innerHTML: SICart2 }),
'CONDITION_BUY_FROM_STORE_FIX_AMOUNT': h("span", { innerHTML: SICart2 }),
'order_from_pos_1': h("span", { innerHTML: SIiPhoneX }),
'order_from_pos_2': h("span", { innerHTML: SILocation }),
'buy_from_pos_1': h("span", { innerHTML: SIMapLocation }),
'buy_from_pos_2': h("span", { innerHTML: SIiPhoneX }),
'CONDITION_BUY_FROM_POS_FOR_UNIT': h("span", { innerHTML: SIiPhoneX }),
'CONDITION_BUY_FROM_POS_FIX_AMOUNT': h("span", { innerHTML: SIiPhoneX }),
'affiliate_link_1': h("span", { innerHTML: SILink1 }),
'affiliate_link_2': h("span", { innerHTML: SIUserAdd }),
'affiliate_link_3': h("span", { innerHTML: SICart2 }),
'CONDITION_AFFILIATE_LINK': h("span", { innerHTML: SILink1 }),
};
export class SallaLoyaltyPoint {
async handleShareAction(e, point, successText) {
const isDesktop = window.matchMedia('(min-width: 1024px)').matches;
// only on mobile/tablet devices
if ('share' in navigator && !isDesktop) {
try {
await navigator.share({
title: document.title,
url: point.url,
});
return;
}
catch (error) { }
}
const el = e.target;
const oldTextContent = el.textContent;
const temporaryTextContent = successText;
// fallback to clipboard
if ('clipboard' in navigator) {
try {
await navigator.clipboard.writeText(point.url);
el.textContent = temporaryTextContent;
setTimeout(() => {
el.textContent = oldTextContent;
}, 5000);
return;
}
catch (error) { }
}
// fallback to textarea
const textarea = document.createElement('textarea');
textarea.value = point.url;
textarea.style.opacity = '0';
this.host.appendChild(textarea);
textarea.focus();
textarea.select();
try {
const success = document.execCommand('copy');
if (!success) {
throw new Error('Failed to copy URL to clipboard');
}
el.textContent = temporaryTextContent;
setTimeout(() => {
el.textContent = oldTextContent;
}, 5000);
}
catch (error) { }
this.host.removeChild(textarea);
}
handleAction(e, point) {
e.stopPropagation();
if (point.is_completed) {
e.preventDefault();
return;
}
switch (point.type) {
case 'profile':
case 'rating': {
if (!salla.config.isUser()) {
e.preventDefault();
closeModals(() => salla.event.dispatch('login::open'));
return;
}
return;
}
case 'share': {
if (!salla.config.isUser()) {
e.preventDefault();
closeModals(() => salla.event.dispatch('login::open'));
return;
}
e.preventDefault();
this.handleShareAction(e, point, salla.lang.get('pages.loyalty_program.copied'));
return;
}
default: {
// all other types are handled the default way (e.g. navigate to a URL)
}
}
}
getSubHeading(point) {
switch (point.type) {
case 'share':
return (h("div", { class: "s-loyalty-program-point-subheading" }, h("h2", null, salla.lang.get('pages.loyalty_program.how_to_start')), h("p", null, salla.lang.get('pages.loyalty_program.three_simple_steps'))));
case 'pos':
return (h("div", { class: "s-loyalty-program-point-subheading" }, h("h2", null, salla.lang.get('pages.loyalty_program.how_to_start')), h("p", null, salla.lang.get('pages.loyalty_program.two_simple_steps'))));
default:
return '';
}
}
getTrailingContent(point) {
switch (point.type) {
case 'first_order':
case 'profile':
return h("p", { class: "s-loyalty-program-points-completed-note" }, salla.lang.get('pages.loyalty_program.one_time_points'));
default:
return point.is_completed ? h("p", { class: "s-loyalty-program-points-completed-note" }, salla.lang.get('pages.loyalty_program.one_time_points')) : '';
}
}
render() {
return (h("div", { key: '1a96a88716d9fa2b3e8aac4864a025824c48d36a' }, h("div", { key: '13bc00fa473bfb16b272d751b45ad7384db0fc43', onClick: () => closeModals(() => this.modal.open()), class: "s-loyalty-program-point-wrapper" }, h("div", { key: 'a7d6d5f9692c7454d6bd9aa350c4934ec1704002', class: "s-loyalty-program-circle-base s-loyalty-program-circle-size-sm s-loyalty-program-circle-variant-fill" }, h("span", { key: '2e26922099bbc8d1d46d48d807f09b195868a262', class: this.point.icon })), h("div", { key: 'ea7c80d9fd595d1e319fb9840cfa7dc439ad2bbb', class: "s-loyalty-program-points-badge-mobile" }, h("salla-badge", { key: '76c01bd0380e5729989ae4b748d7e59f334b40b8', size: "xs", bg: "transparent" }, h("span", { key: 'b459db33b3926952415e2ac6a9b383a53467bc7f', innerHTML: SIGift }), formattedPointsJsx(this.point))), h("div", { key: '528f5f6e1c36c637b69684d95ec304f9c129400e', class: "s-loyalty-program-points-badge-desktop" }, h("salla-badge", { key: '9360900b49e9b122c3de07ad08de0cc0e8eccec4', size: "sm", bg: "transparent" }, h("span", { key: '7786c402cb6b946f9fd6402e1d066ad58ae4c0d4', innerHTML: SIGift }), formattedPointsJsx(this.point))), h("p", { key: 'e6e4e93f0cdbd7dfd0dc39f279cac0bbb9ca4fa8', class: "s-loyalty-program-point-description" }, this.point.name), this.point.is_completed ?
h("a", { class: {
's-loyalty-program-points-action': true,
's-loyalty-program-points-action-completed': this.point.is_completed,
's-loyalty-program-points-action-incomplete': !this.point.is_completed,
} }, salla.lang.get('pages.loyalty_program.completed'))
: h("a", { href: this.point.url, onClick: e => this.handleAction(e, this.point), class: {
's-loyalty-program-points-action': true,
's-loyalty-program-points-action-completed': this.point.is_completed,
's-loyalty-program-points-action-incomplete': !this.point.is_completed,
} }, this.point.description)), h("salla-modal", { key: '1b4bbdf4a31b15a05de6e82eaba7e41623bb7926', ref: modal => this.modal = modal, class: "s-loyalty-program-point-modal s-loyalty-program-modal", width: window.matchMedia('(min-width: 768px)').matches ? 'md' : 'sm', noPadding: true }, h("div", { key: 'dd47de6d728d0e242ba907df2ad5efac90eca3bc', class: "s-loyalty-program-points-modal-header" }, h("h1", { key: '5b683091ac479ada36a8a653379973399ef7a9e9', class: "s-loyalty-program-points-modal-info" }, this.point.name)), h("div", { key: '76a05aedcc3b13f44709e369bf16c9c992689406', class: "s-loyalty-program-modal-scrollable-content" }, h("div", { key: 'a71c0eb9f39a103728974e687dfcb9be5d8d9be7', class: "s-loyalty-program-points-modal-main" }, h("div", { key: 'de83e494131791cae7df3782489be5f1d2ffcb4d', class: "s-loyalty-program-circle-base s-loyalty-program-circle-size-xl s-loyalty-program-circle-variant-fill" }, h("span", { key: '2c8faf8db0b4984d0c9319e18343e41d9a6d0d26', class: this.point.icon })), h("salla-badge", { key: 'b29e2f350840663bb36dff05124aa58a3c774640', size: "sm", bg: "light" }, h("span", { key: '0d6cc163f3b14710bca60c5e4fb9c602ff8416a1', innerHTML: SIGift }), h("span", { key: 'a9ddb1a5ed1c69e0c2017691f67d360f189d4b37', class: "s-loyalty-program-points-badge-points" }, formattedPointsJsx(this.point)))), this.getSubHeading(this.point), h("div", { key: '3327f05f80fec2ddceed0e6f230f0a99020445cc', class: "s-loyalty-program-points-modal-details" }, h("div", { key: 'd5505b3ab399f5d0b668c02bbf441eee33b4a1b2', class: "s-loyalty-program-points-chains-wrapper" }, h("ul", { key: 'dc9b64ad5795e87a12ffd104c5d6bbbade1c2a2e', class: "s-loyalty-program-points-chain-list" }, !!this.point.steps && Object.keys(this.point.steps).length > 0
? Object.values(this.point.steps).map((step, idx) => {
const stepsArray = Object.values(this.point.steps);
const isLastItem = idx === stepsArray.length - 1;
return (h("li", { class: "s-loyalty-program-points-chain-item" }, h("div", { class: "s-loyalty-program-points-chain-icon" }, h("div", { class: "s-loyalty-program-circle-base s-loyalty-program-circle-size-xs s-loyalty-program-circle-variant-outline-primary" }, sicons[step.key]), !isLastItem && h("div", { class: "s-loyalty-program-points-chain-line" })), h("div", { class: "s-loyalty-program-points-chain-content" }, h("salla-badge", { size: "xs", color: "primary-900", bg: "primary-100" }, h("span", null, salla.lang.get(`pages.loyalty_program.step_${idx + 1}`))), h("p", { class: "s-loyalty-program-points-chain-description" }, step.title || step.name))));
})
: this.point.conditions?.map((condition, idx) => {
const isLastItem = idx === this.point.conditions.length - 1;
return (h("li", { class: "s-loyalty-program-points-chain-item" }, h("div", { class: "s-loyalty-program-points-chain-icon" }, h("div", { class: "s-loyalty-program-circle-base s-loyalty-program-circle-size-xs s-loyalty-program-circle-variant-outline-primary" }, sicons[condition.key]), !isLastItem && h("div", { class: "s-loyalty-program-points-chain-line" })), h("div", { class: "s-loyalty-program-points-chain-content" }, h("salla-badge", { size: "xs", color: "primary-900", bg: "primary-100" }, h("span", { innerHTML: SIGift }), formattedPointsJsx(condition.points ?? 0)), h("p", { class: "s-loyalty-program-points-chain-description" }, condition.name))));
}))), this.getTrailingContent(this.point)), !this.point.branches?.length ? '' : h("div", { class: "s-loyalty-program-points-modal-list" }, h("div", { class: "s-loyalty-program-point-details-branches" }, h("h2", null, salla.lang.get('pages.loyalty_program.branches')), h("p", null, salla.lang.get('pages.loyalty_program.shop_from_branches'))), h("div", { class: "s-loyalty-program-points-modal-list-wrapper" }, h("ul", null, this.point.branches.map((branch) => (h("li", { class: "s-loyalty-program-points-modal-list-item" }, h("p", null, branch.name), h("salla-badge", { size: "sm", bg: "transparent" }, h("span", { innerHTML: SIGift }), h("a", { href: branch.location ? `https://www.google.com/maps?q=${branch.location.lat},${branch.location.lon}` : '#', target: "_blank", rel: "noopener noreferrer" }, branch.address_description))))))))), h("div", { key: '685d0de853bd3becf1c10529768a5952b6365517', class: "s-loyalty-program-points-modal-action" }, h("a", { key: '806543e483c0872139ee395ee9ba2dbe27061564', href: this.point.url, onClick: (e) => (e.stopPropagation(), this.handleAction(e, this.point)), class: {
's-loyalty-program-points-action': true,
's-loyalty-program-points-action-completed': this.point.is_completed,
's-loyalty-program-points-action-incomplete': !this.point.is_completed,
} }, this.point.is_completed ? salla.lang.get('pages.loyalty_program.completed') : this.point.description)))));
}
static get is() { return "salla-loyalty-point"; }
static get originalStyleUrls() {
return {
"$": ["salla-loyalty-program.scss"]
};
}
static get styleUrls() {
return {
"$": ["salla-loyalty-program.css"]
};
}
static get properties() {
return {
"point": {
"type": "unknown",
"attribute": "point",
"mutable": false,
"complexType": {
"original": "Point",
"resolved": "Point",
"references": {
"Point": {
"location": "import",
"path": "./interfaces",
"id": "src/components/salla-loyalty-program/interfaces.ts::Point"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false
}
};
}
static get elementRef() { return "host"; }
}