@salla.sa/twilight-components
Version:
Salla Web Component
955 lines (954 loc) • 48.2 kB
JavaScript
/*!
* Crafted with ❤ by Salla
*/
import anime from "animejs";
import { h } from "@stencil/core";
import Images from "../../assets/svg/images.svg";
import LeftArrow from "../../assets/svg/arrow-left.svg";
import Cancel from "../../assets/svg/cancel.svg";
import GiftSharing from "../../assets/svg/gift-sharing.svg";
import Alert from "../../assets/svg/alert.svg";
/**
* @slot widget-btn-content - Used to customize widget button content.
*/
export class SallaGifting {
constructor() {
this.defaultEvent = "gifting:open";
this.selectImageForYourGift = salla.lang.get('blocks.buy_as_gift.select_image_or_upload');
this.currentStep = 1;
this.showCalendar = false;
this.showGiftText = false;
this.currentLang = '';
this.parentClass = "is-current-step-1";
this.errors = {};
this.gift = undefined;
this.selectedGiftTextOption = undefined;
this.selectedCountryId = undefined;
this.selectedCountryCode = undefined;
this.loadingCities = false;
this.loadingRegions = false;
this.regions = [];
this.selectedRegionId = undefined;
this.isKSA = false;
this.selectedCountry = null;
this.selectedRegion = null;
this.displayedCities = [];
this.selectedCity = null;
this.searchingCities = false;
this.enableCityAjaxSearch = false;
this.citySearchQuery = '';
this.step2Animated = false;
this.citySearchTimer = null;
this.citySearchCounter = 0;
this.locationRequestCounter = 0;
this.showTextArea = false;
/// Gift Form Data
this.selectedImage = undefined;
this.uploadedImage = undefined;
this.selectedText = undefined;
this.hasError = false;
this.timeZone = null;
this.receiverCountryCode = salla.config.get('store.scope.countries')?.[0] || salla.config.get('store.store_country') || 'SA';
this.hostId = `salla-gifting-${Math.random().toString(36).slice(2, 10)}`;
/**
* The form selector to be used to get the form data
*/
this.formSelector = 'form.product-form, form.form--product-options';
this.handleCitySearch = (query) => {
this.citySearchQuery = query;
if (!this.enableCityAjaxSearch)
return;
if (this.citySearchTimer)
clearTimeout(this.citySearchTimer);
const requestId = ++this.citySearchCounter;
this.citySearchTimer = setTimeout(async () => {
this.searchingCities = true;
try {
const cities = await this.fetchCities(query);
if (requestId === this.citySearchCounter) {
this.displayedCities = cities;
}
}
catch (e) {
if (requestId === this.citySearchCounter) {
this.displayedCities = [];
}
}
finally {
if (requestId === this.citySearchCounter) {
this.searchingCities = false;
}
}
}, SallaGifting.CITY_SEARCH_DEBOUNCE_MS);
};
this.handleCitySelected = (city) => {
this.selectedCity = city;
this.receiverCity = String(city.id);
this.clearError('receiver.city_id');
};
this.handleCityDropdownClosed = () => {
this.citySearchQuery = '';
if (this.citySearchTimer) {
clearTimeout(this.citySearchTimer);
this.citySearchTimer = null;
}
++this.citySearchCounter;
this.displayedCities = this.gift?.cities ?? [];
this.searchingCities = false;
};
this.handleCountryDropdownClosed = () => { };
this.handleRegionDropdownClosed = () => { };
salla.lang.onLoaded(() => {
this.selectImageOrUpload = salla.lang.get('blocks.buy_as_gift.select_image_or_upload');
this.selectImageForYourGift = salla.lang.get('blocks.buy_as_gift.select_image_for_your_gift');
this.sectionTitle = salla.lang.get('blocks.buy_as_gift.gift_the_one_you_love');
this.sectionSubtitle = salla.lang.get('blocks.buy_as_gift.gift_the_one_you_love_message');
this.sectionBtnText = salla.lang.get('blocks.buy_as_gift.send_as_a_gift');
this.giftDetails = salla.lang.get('blocks.buy_as_gift.gift_details');
this.selectGiftMessage = salla.lang.get('blocks.buy_as_gift.select_gift_message');
this.giftCustomText = salla.lang.get('blocks.buy_as_gift.gift_custom_text');
this.textId = salla.lang.get('blocks.buy_as_gift.text_id');
this.incorrectGiftText = salla.lang.get('blocks.buy_as_gift.incorrect_gift_text');
this.nextStep = salla.lang.get('blocks.buy_as_gift.next_step');
this.senderNameLabel = salla.lang.get('blocks.buy_as_gift.sender_name');
this.receiverNameFieldLabel = salla.lang.get('blocks.buy_as_gift.receiver_name');
this.receiverMobileFieldLabel = salla.lang.get('blocks.buy_as_gift.receiver_mobile');
this.receiverCountryFieldLabel = salla.lang.get('blocks.buy_as_gift.receiver_country');
this.ksa = salla.lang.get('pages.checkout.ksa');
this.selectCity = salla.lang.get('pages.checkout.select_city');
this.selectCountry = salla.lang.get('pages.checkout.select_country');
this.selectCityInfo = salla.lang.get('blocks.buy_as_gift.city_info');
this.receiverCityFieldLabel = salla.lang.get('blocks.buy_as_gift.receiver_city');
this.receiverRegionFieldLabel = salla.lang.get('blocks.buy_as_gift.receiver_region') || salla.lang.get('pages.checkout.region');
this.selectRegion = salla.lang.get('pages.checkout.select_region');
this.receiverEmailFieldLabel = salla.lang.get('blocks.buy_as_gift.receiver_email');
this.emailPlaceholder = salla.lang.get('common.elements.email_placeholder');
this.sendLater = salla.lang.get('blocks.buy_as_gift.send_later');
this.selectSendDateAndTime = salla.lang.get('blocks.buy_as_gift.select_send_date_and_time');
this.canNotEditOrderAfterSelectDate = salla.lang.get('blocks.buy_as_gift.can_not_edit_order_after_select_date');
this.sendGift = salla.lang.get('blocks.buy_as_gift.send_gift');
this.donationRequired = salla.lang.get('pages.products.donation_amount_required');
this.currentLang = salla.lang.locale;
});
salla.event.on(this.defaultEvent, () => {
this.open();
});
}
isPhysical() {
return this.physicalProducts || this.physical;
}
componentDidLoad() {
salla.event.product.onPriceUpdated(() => {
const quantityInput = document.querySelector(`.s-quantity-input-input`);
// @ts-ignore
this.quantity = quantityInput?.value;
});
}
getFormDataFromForm() {
if (!this.formSelector)
return null;
const form = document.querySelector(this.formSelector);
if (!form)
return null;
return new FormData(form);
}
mergeObjectToFormData(obj, formData, namespace) {
for (let property in obj) {
if (!obj.hasOwnProperty(property) || obj[property] === undefined || obj[property] === null)
continue;
const formKey = namespace ? `${namespace}[${property}]` : property;
if (typeof obj[property] === 'object' && obj[property] !== null && !(obj[property] instanceof File)) {
this.mergeObjectToFormData(obj[property], formData, formKey);
}
else {
formData.set(formKey, obj[property]);
}
}
return formData;
}
/**
* Show / Open the gifting modal window
*/
async open() {
if (salla.config.isGuest()) {
salla.api.auth.setAfterLoginEvent(this.defaultEvent);
salla.event.dispatch('login::open', { withoutReload: true });
return;
}
await this.modal.open();
// Determine the appropriate method to call based on the `physicalProducts` flag
const giftDetailsMethod = this.productId ? () => salla.product.getGiftProductDetails(this.productId) : () => salla.cart.getGiftCartDetails();
return await salla.api.withoutNotifier(giftDetailsMethod)
.then((response) => {
this.gift = response.data;
this.senderName = this.gift.sender_name;
})
.catch(e => {
this.hasError = true;
this.errorMessage = e.response?.data?.error?.message || e.response?.data;
})
.finally(() => this.modal.stopLoading());
}
/**
*
* Hide / close the gifting modal window
*/
async close() {
return this.modal.close();
}
/**
* Update the modal height based on the changes on the inner elements height for a specific step OR just a pass a new fixed height
*/
async setWrapperHeight(asStep = 1, delay = 250, additionSpace = 0, newHeight = 0) {
let currentStep = document.querySelector(`#${this.hostId} .gift-step-${asStep}`);
const updateHeight = () => {
let currentStepHeight = currentStep.offsetHeight;
if (newHeight) {
this.stepsWrapper.style.height = `${newHeight}px`;
}
else {
this.stepsWrapper.style.height = currentStepHeight + additionSpace + 'px';
}
};
if (this.step2Animated && asStep === 2) {
requestAnimationFrame(updateHeight);
}
else {
setTimeout(updateHeight, delay);
}
}
toggleCalendar() {
this.showCalendar = !this.showCalendar;
this.setWrapperHeight(2, 150, 0);
}
toggleGiftText(event) {
this.textSelect?.classList.remove('s-form-has-error');
let dataID = event.target.children[event.target.selectedIndex].getAttribute('data-id');
let customID = dataID == "custom";
this.showGiftText = customID;
if (dataID) {
this.selectedGiftTextOption = dataID;
customID ? this.selectedText = undefined : this.selectedText = event.target.value;
this.setWrapperHeight(1, 150, 5);
}
else {
// empty textarea value
this.textArea.value = '';
this.selectedText = undefined;
this.selectedGiftTextOption = undefined;
this.setWrapperHeight(1, 150, -15);
}
}
/**
*
* Go to the step 2
*/
async goToStep2() {
if (!this.selectedGiftTextOption) {
this.textSelect.classList.add('s-form-has-error');
this.customTextArea.classList.remove('s-form-has-error');
return;
}
else if (this.selectedGiftTextOption == 'custom' && !this.selectedText) {
this.textSelect.classList.remove('s-form-has-error');
this.customTextArea.classList.add('s-form-has-error');
return;
}
else {
this.textSelect.classList.remove('s-form-has-error');
this.customTextArea.classList.remove('s-form-has-error');
}
this.setWrapperHeight(2, 600, 0);
let stepNextAnime = new anime.timeline();
stepNextAnime.add({
targets: this.step1Elems.querySelectorAll(`#${this.hostId} .anime-item`),
opacity: [1, 0],
translateX: [0, 50],
delay: anime.stagger(70),
// easing: 'easeOutExpo',
duration: 1200,
})
.add({
targets: '.gift-step-2',
translateX: ['-110%', 0],
opacity: [0, 1],
}, '-=1800')
.add({
targets: this.step2Elems.querySelectorAll(`#${this.hostId} .anime-item`),
opacity: [0, 1],
translateX: [-50, 0],
delay: anime.stagger(70),
duration: 1200,
complete: () => {
this.step2Elems.querySelectorAll(`#${this.hostId} .anime-item`).forEach(item => {
item.classList.remove('opacity-0');
item.removeAttribute('style');
});
this.step2Animated = true;
}
}, '-=1200');
this.currentStep = 2;
this.parentClass = `is-current-step-${this.currentStep}`;
}
/**
*
* Go to the step 1
*/
goToStep1(e) {
e.preventDefault();
let stepBackAnime = new anime.timeline({
autoplay: false,
});
stepBackAnime.add({
targets: this.step2Elems.querySelectorAll(`#${this.hostId} .anime-item`),
opacity: [1, 0],
translateX: [0, -50],
delay: anime.stagger(70),
// easing: 'easeOutExpo',
duration: 1200,
})
.add({
targets: '.gift-step-1',
translateX: ['110%', 0],
opacity: [0, 1],
}, '-=1800')
.add({
targets: this.step1Elems.querySelectorAll(`#${this.hostId} .anime-item`),
opacity: [0, 1],
translateX: [50, 0],
delay: anime.stagger(70),
duration: 1200,
complete: () => {
this.step1Elems.querySelectorAll(`#${this.hostId} .anime-item`).forEach(item => {
item.classList.remove('opacity-0');
item.removeAttribute('style');
});
}
}, '-=1200');
stepBackAnime.play();
this.step2Animated = false;
this.setWrapperHeight(1, 600, 0);
this.currentStep = 1;
this.parentClass = `is-current-step-${this.currentStep}`;
}
getFilepondPlaceholder() {
return `<div class="s-gifting-filepond-placeholder"><span class="s-gifting-filepond-placeholder-icon">${Images}</span><p class="s-gifting-filepond-placeholder-text">${this.selectImageOrUpload ? this.selectImageOrUpload : ''}</p></div>`;
}
setPreview(image) {
this.uploader?.classList.add('has-bg');
var bg = document.querySelector(`#${this.hostId}.filepond-bg`) ? document.querySelector(`#${this.hostId} .filepond-bg`) : document.createElement('div');
bg.classList.add('filepond-bg');
bg.classList.remove('s-hidden');
bg.style.backgroundImage = "url('" + image.url + "')";
this.uploader?.querySelector('.filepond--root')?.appendChild(bg);
this.uploadedImage = image.url;
if (!!this.gift && this.gift.gift_images.length) {
this.setWrapperHeight(1, 150, 0);
}
}
removePreview() {
this.uploader.classList.remove('has-bg');
let bg = document.querySelector(`#${this.hostId} .filepond-bg`);
bg.removeAttribute('style');
bg.classList.add('s-hidden');
this.handleRemoveImage();
}
handleTextAreaChange(event) {
this.selectedText = event.target.value;
this.customTextArea.classList.remove('s-form-has-error');
}
clearError(key) {
if (this.errors?.[key]) {
const { [key]: _, ...rest } = this.errors;
this.errors = rest;
}
}
handleSenderName(event) {
this.senderName = event.target.value;
this.clearError('sender_name');
}
handleReceiverName(event) {
this.receiverName = event.target.value;
this.clearError('receiver.name');
}
resetCityState() {
if (this.citySearchTimer) {
clearTimeout(this.citySearchTimer);
this.citySearchTimer = null;
}
++this.citySearchCounter;
this.gift = { ...this.gift, cities: [] };
this.displayedCities = [];
this.receiverCity = undefined;
this.selectedCity = null;
this.citySearchQuery = '';
this.searchingCities = false;
this.enableCityAjaxSearch = false;
}
setInitialCities(cities) {
this.gift = { ...this.gift, cities };
this.displayedCities = cities;
this.enableCityAjaxSearch = cities.length >= SallaGifting.CITY_AJAX_THRESHOLD;
}
async fetchCities(query = '') {
if (!this.selectedCountryId)
return [];
if (this.isKSA && !this.selectedRegionId)
return [];
const params = [
'for_branch=0',
`country_id=${this.selectedCountryId}`,
];
if (this.isKSA && this.selectedRegionId) {
params.push(`region_id=${this.selectedRegionId}`);
}
if (query?.trim()) {
params.push(`query=${encodeURIComponent(query.trim())}`);
}
const response = await salla.api.request(`shipping/cities?${params.join('&')}`);
return response?.data ?? [];
}
async handleCountrySelected(country) {
const countryId = country?.id;
this.selectedCountry = country ?? null;
this.selectedCountryId = countryId;
this.selectedCountryCode = country?.country_code;
this.isKSA = country?.country_code === 'SA';
this.clearError('receiver.country');
// Reset region and city; bump request counter so in-flight loads from a
// previous country/region selection get discarded when they resolve.
this.regions = [];
this.selectedRegionId = undefined;
this.selectedRegion = null;
this.resetCityState();
const requestId = ++this.locationRequestCounter;
if (!countryId) {
this.selectedCountryCode = undefined;
this.isKSA = false;
this.setWrapperHeight(2, 0, 0);
return;
}
if (this.isKSA) {
// For KSA, fetch regions first
this.loadingRegions = true;
this.setWrapperHeight(2, 0, 0);
try {
const response = await salla.api.request(`shipping/countries/${countryId}/regions`);
if (requestId !== this.locationRequestCounter)
return;
if (response && response.data) {
this.regions = response.data;
}
}
catch (error) {
if (requestId !== this.locationRequestCounter)
return;
console.error('Error fetching regions:', error);
}
finally {
if (requestId === this.locationRequestCounter) {
this.loadingRegions = false;
this.setWrapperHeight(2, 0, 0);
}
}
}
else {
// For non-KSA, fetch cities directly
this.loadingCities = true;
this.setWrapperHeight(2, 0, 0);
try {
const cities = await this.fetchCities();
if (requestId !== this.locationRequestCounter)
return;
this.setInitialCities(cities);
}
catch (error) {
if (requestId !== this.locationRequestCounter)
return;
console.error('Error fetching cities:', error);
}
finally {
if (requestId === this.locationRequestCounter) {
this.loadingCities = false;
}
}
}
}
async handleRegionSelected(region) {
const regionId = region?.id;
this.selectedRegion = region ?? null;
this.selectedRegionId = regionId;
this.clearError('receiver.region');
// Reset city when region changes; bump request counter so any earlier
// in-flight city fetch (for a previous region) is discarded on resolve.
this.resetCityState();
const requestId = ++this.locationRequestCounter;
if (!regionId)
return;
this.loadingCities = true;
try {
const cities = await this.fetchCities();
if (requestId !== this.locationRequestCounter)
return;
this.setInitialCities(cities);
}
catch (error) {
if (requestId !== this.locationRequestCounter)
return;
console.error('Error fetching cities:', error);
}
finally {
if (requestId === this.locationRequestCounter) {
this.loadingCities = false;
this.setWrapperHeight(2, 0, 0);
}
}
}
handleUploadImage(img) {
this.uploadedImage = img;
if (!!this.gift && this.gift.gift_images.length) {
this.setWrapperHeight(1, 150, 0);
}
}
handleRemoveImage() {
this.uploadedImage = '';
if (!!this.gift && this.gift.gift_images.length) {
this.setWrapperHeight(1, 150, 0);
}
}
// private handleReceiverEmail(event) {
// this.receiverEmail = event.target.value;
// }
handlePhoneInputChange(event) {
let phone = event.detail;
this.receiverMobile = phone.number;
this.receiverCountryCode = phone.country_code;
this.clearError('receiver.mobile');
}
handleDateTimePicker(event) {
this.deliveryDate = event.detail;
}
getCalendarClasses() {
return {
"s-form-group": true,
"anime-item": true,
"s-gifting-calendar": true,
"shown": this.showCalendar,
"hide": !this.showCalendar,
"s-form-has-error": !!this.errors && this.errors['deliver_at']
};
}
async submitForm() {
// @ts-ignore
const donatingAmount = (document.querySelector(`#donating-amount`))?.value;
this.calendarFormGroup.classList.remove('s-form-has-error');
if (!!this.errors) {
this.errors = {};
this.setWrapperHeight(2, 150, 0);
}
if (this.showCalendar && !this.deliveryDate) {
this.calendarFormGroup.classList.add('s-form-has-error');
return;
}
// Validate required fields
const requiredFields = [
{ key: 'sender_name', value: this.senderName, label: this.senderNameLabel },
{ key: 'receiver.name', value: this.receiverName, label: this.receiverNameFieldLabel },
{ key: 'receiver.mobile', value: this.receiverMobile, label: this.receiverMobileFieldLabel },
...(this.isPhysical() ? [
{ key: 'receiver.country', value: this.selectedCountryId, label: this.receiverCountryFieldLabel },
...(this.isKSA ? [{ key: 'receiver.region', value: this.selectedRegionId, label: this.receiverRegionFieldLabel }] : []),
{ key: 'receiver.city_id', value: this.receiverCity, label: this.receiverCityFieldLabel },
] : []),
];
const validationErrors = {};
requiredFields.forEach(({ key, value, label }) => {
if (!value) {
validationErrors[key] = salla.lang.get('common.errors.field_required', { attribute: label });
}
});
if (Object.keys(validationErrors).length) {
this.errors = validationErrors;
this.setWrapperHeight(2, 150, 0);
return;
}
const giftPayload = {
text: this.selectedText,
sender_name: this.senderName,
quantity: this.quantity,
deliver_at: this.showCalendar ? this.deliveryDate : null,
image_url: this.uploadedImage ?? this.selectedImage,
donation_amount: donatingAmount ? donatingAmount : null,
receiver: {
name: this.receiverName,
mobile_country_code: this.receiverCountryCode,
mobile: this.receiverMobile,
...(this.isPhysical() && this.selectedCountryCode ? { country_code: this.selectedCountryCode } : {}),
...(this.isPhysical() && this.selectedRegionId ? { region_id: this.selectedRegionId } : {}),
...(this.receiverCity && this.isPhysical() ? { city_id: this.receiverCity } : {})
},
has_apple_pay: salla.helpers.hasApplePay(),
};
let formData;
if (this.productId && this.formSelector) {
formData = this.getFormDataFromForm() || new FormData();
formData = this.mergeObjectToFormData(giftPayload, formData);
}
const addGiftMethod = this.productId
? () => salla.product.addProductGiftToCart(this.productId, formData, true)
: () => salla.cart.addCartGiftToCart(giftPayload, true);
return await addGiftMethod()
.then(() => this.modal.close())
.catch((e) => {
if (e.response && e.response.status == 422) {
this.errors = e.response.data.error.fields;
}
else {
console.log(e);
}
this.setWrapperHeight(2, 150, 0);
});
}
step2ItemClass(extra = '') {
const base = `anime-item${this.step2Animated ? '' : ' opacity-0'}`;
return extra ? `${extra} ${base}` : base;
}
generateClass() {
return {
"s-gifting-widget": true,
"s-gifting-widget-vertical": !!this.vertical,
"s-gifting-widget-horizontal": !this.vertical
};
}
async handleGiftButtonClick() {
if (!!this.productId && this.formSelector) {
const form = document.querySelector(this.formSelector);
if (!form) {
console.error('SallaGifting:: Form not found in the document!');
return;
}
if (!(form instanceof HTMLFormElement)) {
console.error('SallaGifting:: The specified selector does not correspond to a form tag!');
return;
}
if (!form.reportValidity()) {
console.error('SallaGifting:: Form is not valid!');
salla.error(salla.lang.get('common.messages.required_fields'));
return;
}
}
const optionsElement = document.querySelector(`salla-product-options[product-id="${this.productId}"]`);
if (optionsElement && !(await optionsElement.reportValidity())) {
salla.error(salla.lang.get('common.messages.required_fields'));
return;
}
this.open();
}
render() {
return [
h("div", { key: 'db700f9ec96a6974f3b815bb017ebe97ae8fe5c0' }, h("salla-list-tile", { key: '1e2fd1c0b375c85fcd4af1ea071c36879e6913c5', class: this.generateClass() }, h("div", { key: 'a9d02c933bc13bf8765e7e91ce08b2c9495954e5', slot: "title" }, this.vertical ? h("span", { innerHTML: GiftSharing }) : '', h("h3", { key: '56bd850368806c6ed5770ea5f6b0339749a77dfa' }, !!this.widgetTitle ? this.widgetTitle : this.sectionTitle)), h("div", { key: 'fbb4940fd3e3578f2f5a479d9d44be8dfbda7e43', slot: "subtitle" }, h("div", { key: 'fb7e8532984fbfc6fd61c55a6d44d7cdbb4bc9a2' }, !!this.widgetSubtitle ? this.widgetSubtitle : this.sectionSubtitle)), h("div", { key: '04f27f1ddbfa0b06be111b6c3176fbda5ea6d43a', slot: "action" }, h("salla-button", { key: 'fe71a1a773e5275ede7d1b3ea535c330688028b7', color: "primary", fill: "outline", width: "wide", class: "s-gifting-widget-action", onClick: () => this.handleGiftButtonClick() }, h("slot", { key: 'd62127d30254df2d8add55e0e1dbcfefb686e359', name: "widget-btn-content" }, h("div", { key: '5ddbb695af142baf3bb6986627f97a7a7607eb31', class: "s-gifting-widget-action-content" }, h("span", { key: '7820fb6abd9d7a9c1035c0f80191a3ff2a4c5fe8', innerHTML: GiftSharing }), " \u00A0", h("span", { key: '2cfc69862d3d087375efaed3bcec0ff0c1587989' }, this.sectionBtnText)))))), h("salla-modal", { key: '32c19391248ba6186f43fea59493171079e7bf07', id: this.hostId, isLoading: true, class: "s-gifting-modal", width: "sm", ref: modal => this.modal = modal }, h("div", { key: 'e4b5829416314f25793158dae0c530b8057b4085', slot: "loading" }, h("div", { key: '6ee873add5868f105b7ec7291c2a8c8fc033c588', class: "s-gifting-skeleton" }, h("div", { key: '40aae38f8b2d62b434394811a3ef6d8bc00f6f32', class: "s-gifting-modal-header" }, h("salla-skeleton", { key: 'a652cd74a16d0db662ea4a518ebfab366a3c3899', type: 'circle', height: '5rem', width: '5rem' }), h("h2", { key: 'edb4a1477893246e98207aeba7bfb5af686f20b9', class: "s-gifting-modal-title" }, h("div", { key: '83ef942b15450cc59ad32d8c5b3ba43a32bcb29c', class: "s-gifting-modal-badge-wrapper" }, h("salla-skeleton", { key: 'd9041c777a2fa0aa7ffc752958c7441916a02f85', height: '15px', width: '150px' })))), h("div", { key: 'fe3bb9dad01becba87486c4886037fd67b059919', class: "s-gifting-skeleton-content" }, h("salla-skeleton", { key: '08bd8304b66264b70f6df68e64da3560a1f75461', height: '10px', width: '150px' }), h("salla-skeleton", { key: 'bbea0d7ff0c846897af2ef5d3696b252a2f4e662', height: '230px' }), h("salla-skeleton", { key: '8cb1fde02e31a1accabd2e26409983e7ba56eeb1', height: '10px', width: '150px' }), h("salla-skeleton", { key: 'f80a986b953278bac41505506adf8d611566a167', height: '30px' }), h("salla-skeleton", { key: 'f7eccce69b619de385872642e1fb62b2cf6c3082', height: '40px' })))), h("slot", { key: 'd299e46040193b441f8171d05e0048849e3df8d5', name: "header" }), !!this.hasError ?
h("salla-placeholder", { alignment: "center" }, h("span", { slot: "title" }, this.errorMessage || salla.lang.get('common.errors.empty_results')), h("span", { slot: "description" }, " "))
:
[
h("div", { class: "s-gifting-modal-header" }, h("span", { class: "s-gifting-modal-icon" }, h("span", { innerHTML: GiftSharing })), h("h2", { class: "s-gifting-modal-title" }, h("div", { class: "s-gifting-modal-badge-wrapper" }, h("div", { class: "s-gifting-modal-badge" }, h("span", null, h("span", null, this.currentStep), "/2")), h("span", null, this.giftDetails)))),
h("div", { class: "s-gifting-steps-wrapper " + this.parentClass, ref: el => this.stepsWrapper = el }, h("div", { class: "s-gifting-step-one gift-step-1", ref: el => this.step1Elems = el }, h("div", { class: "s-gifting-modal-uploader-title anime-item" }, this.selectImageForYourGift), h("div", { class: "s-gifting-modal-uploader anime-item", ref: el => this.uploader = el }, h("span", { class: "s-gifting-remove-preview", onClick: () => this.removePreview(), innerHTML: Cancel }), this.selectImageOrUpload && h("salla-file-upload", { "instant-upload": true, name: "image_url", url: salla.url.api(salla.product.api.getUrl('giftImage')), onUploaded: event => this.handleUploadImage(event.detail), labelIdle: this.getFilepondPlaceholder(), onRemoved: () => this.handleRemoveImage() })), h("div", { class: "anime-item" }, !this.uploadedImage && !!this.gift && !!this.gift.gift_images && this.gift.gift_images.length > 0 ?
h("salla-slider", { id: "gifting-slider", loop: false, "controls-outer": true, class: "s-gifting-slider", type: "carousel" }, h("div", { slot: "items" }, this.gift && this.gift.gift_images ?
this.gift?.gift_images.map((item) => h("a", { class: "s-gifting-clickable s-gifting-image", onClick: () => this.setPreview(item) }, h("img", { style: { "width": "120px" }, src: item.url, alt: `${item.id}` }))) : ''))
: ""), h("div", { class: "anime-item" }, h("div", { class: "s-form-group s-gifting-selectText", ref: el => this.textSelect = el }, h("select", { id: "gift-text-selection", name: "gift-text-selection", class: "s-form-control s-gifting-select", onChange: e => this.toggleGiftText(e) }, h("option", { "data-id": null, selected: true }, this.selectGiftMessage), this.gift && this.gift.gift_texts ?
this.gift?.gift_texts.map((txt) => h("option", { "data-id": txt.id, value: txt.text, key: txt.id }, txt.text)) : '', h("option", { "data-id": "custom" }, this.giftCustomText))), h("div", { class: this.showGiftText ? "s-form-group s-gifting-textarea shown" : "s-form-group s-gifting-textarea hide", ref: (el) => this.customTextArea = el }, h("label", { htmlFor: "gift-custom-text", class: "s-form-label" }, this.giftCustomText), h("div", { class: "mt-1" }, h("textarea", { onInput: (event) => this.handleTextAreaChange(event), rows: 4, ref: (el) => this.textArea = el, name: "gift-custom-text", id: "gift-custom-text", class: "s-form-control" })))), h("div", { class: "anime-item" }, h("salla-button", { color: "primary", width: "wide", onClick: () => this.goToStep2() }, h("span", null, this.nextStep)))), h("div", { class: "s-gifting-step-two gift-step-2", ref: el => this.step2Elems = el }, h("div", { class: this.step2ItemClass(this.errors?.['sender_name'] ? 's-form-group s-form-has-error' : 's-form-group') }, h("label", { htmlFor: "sender_name", class: "s-form-label" }, this.senderNameLabel), h("input", { type: "text", class: "s-form-control", name: "sender_name", id: "sender_name", value: this.senderName, onInput: (event) => this.handleSenderName(event), placeholder: "" }), this.errors && this.errors['sender_name'] ?
h("span", { class: "s-gifting-error" }, this.errors['sender_name']) : ''), h("div", { class: this.step2ItemClass(this.errors?.['receiver.name'] ? 's-form-group s-form-has-error' : 's-form-group') }, h("label", { htmlFor: "receiver_name", class: "s-form-label" }, this.receiverNameFieldLabel), h("input", { type: "text", class: "s-form-control", name: "receiver_name", id: "receiver_name", value: "", onInput: (event) => this.handleReceiverName(event), placeholder: "" }), this.errors && this.errors['receiver.name'] ?
h("span", { class: "s-gifting-error" }, this.errors['receiver.name']) : ''), h("div", { class: this.step2ItemClass(this.errors?.['receiver.mobile'] ? 's-form-group s-form-has-error' : 's-form-group') }, h("label", { class: "s-form-label" }, this.receiverMobileFieldLabel), h("salla-tel-input", { class: "s-gifting-tel-input", phone: this.receiverMobile, countryCode: this.receiverCountryCode, onPhoneEntered: (e) => this.handlePhoneInputChange(e) }), this.errors && this.errors['receiver.mobile'] ?
h("span", { class: "s-gifting-error" }, this.errors['receiver.mobile']) : ''), this.isPhysical() &&
h("div", { class: this.step2ItemClass(this.errors?.['receiver.country'] ? 's-form-group s-form-has-error' : 's-form-group') }, h("label", { class: "s-form-label", htmlFor: `${this.hostId}-country` }, this.receiverCountryFieldLabel), h("salla-searchable-dropdown", { placeholder: this.selectCountry, items: this.gift?.countries ?? [], selectedItem: this.selectedCountry, disabled: !this.gift?.countries?.length, required: true, inputId: `${this.hostId}-country`, searchable: false, keepParentScroll: true, onItemSelected: (e) => this.handleCountrySelected(e.detail), onDropdownClosed: () => this.handleCountryDropdownClosed() }), this.errors && this.errors['receiver.country'] ?
h("span", { class: "s-gifting-error" }, this.errors['receiver.country']) : ''), this.isPhysical() && this.isKSA &&
h("div", { class: this.step2ItemClass(this.errors?.['receiver.region'] ? 's-form-group s-form-has-error' : 's-form-group') }, h("label", { class: "s-form-label", htmlFor: `${this.hostId}-region` }, this.receiverRegionFieldLabel), h("salla-searchable-dropdown", { placeholder: this.selectRegion, items: this.regions ?? [], selectedItem: this.selectedRegion, loading: this.loadingRegions, disabled: this.loadingRegions || !this.regions?.length, required: true, inputId: `${this.hostId}-region`, searchable: false, keepParentScroll: true, onItemSelected: (e) => this.handleRegionSelected(e.detail), onDropdownClosed: () => this.handleRegionDropdownClosed() }), this.errors && this.errors['receiver.region'] ?
h("span", { class: "s-gifting-error" }, this.errors['receiver.region']) : ''), this.isPhysical() &&
h("div", { class: this.step2ItemClass(this.errors?.['receiver.city_id'] ? 's-form-group s-form-has-error' : 's-form-group') }, h("label", { class: "s-form-label", htmlFor: `${this.hostId}-city` }, this.receiverCityFieldLabel), h("salla-searchable-dropdown", { placeholder: this.selectCity, items: this.displayedCities, selectedItem: this.selectedCity, loading: this.loadingCities, searching: this.searchingCities, disabled: this.loadingCities || (this.isKSA && !this.selectedRegionId), required: true, inputId: `${this.hostId}-city`, searchQuery: this.citySearchQuery, clientSearch: !this.enableCityAjaxSearch, dropUp: true, keepParentScroll: true, onItemSelected: (e) => this.handleCitySelected(e.detail), onSearchInput: (e) => this.handleCitySearch(e.detail), onDropdownClosed: () => this.handleCityDropdownClosed() }), this.errors && this.errors['receiver.city_id'] ?
h("span", { class: "s-gifting-error" }, this.errors['receiver.city_id']) : ''), this.isPhysical() &&
h("div", { class: this.step2ItemClass('s-gifting-info') }, h("span", { innerHTML: Alert }), h("span", null, this.selectCityInfo)), !this.isPhysical() && h("div", { class: this.step2ItemClass() }, h("label", { class: "s-gifting-schedule s-gifting-clickable", htmlFor: `schedule-${this.hostId}` }, h("input", { type: "checkbox", name: 'schedule', id: `schedule-${this.hostId}`, onChange: () => this.toggleCalendar(), class: "s-checkbox" }), h("span", { class: "s-form-label" }, " ", this.sendLater, " "))), h("div", { class: this.getCalendarClasses(), ref: (el) => this.calendarFormGroup = el }, h("label", { class: "s-form-label" }, this.selectSendDateAndTime), h("salla-datetime-picker", { value: this.deliveryDate, placeholder: this.selectSendDateAndTime, "enable-time": true, "date-format": "Y-m-d h:i K", onPicked: (event) => this.handleDateTimePicker(event) }), h("span", { class: "s-gifting-calendar-hint" }, this.canNotEditOrderAfterSelectDate)), h("div", { class: this.step2ItemClass('s-gifting-step-two-footer') }, h("a", { href: "#!", innerHTML: LeftArrow, onClick: (e) => this.goToStep1(e) }), h("salla-button", { onClick: () => this.submitForm(), color: "primary", width: 'wide' }, h("span", null, this.sendGift)))))
], h("slot", { key: 'bd8cd1628ed4282b177f0ddcd5fb93289c47b4d6', name: "footer" })))
];
}
static get is() { return "salla-gifting"; }
static get originalStyleUrls() {
return {
"$": ["salla-gifting.scss"]
};
}
static get styleUrls() {
return {
"$": ["salla-gifting.css"]
};
}
static get properties() {
return {
"productId": {
"type": "number",
"attribute": "product-id",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The product id for which the gifting system is required."
},
"getter": false,
"setter": false,
"reflect": false
},
"widgetTitle": {
"type": "string",
"attribute": "widget-title",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Widget title"
},
"getter": false,
"setter": false,
"reflect": false
},
"widgetSubtitle": {
"type": "string",
"attribute": "widget-subtitle",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Widget subtitle"
},
"getter": false,
"setter": false,
"reflect": false
},
"physicalProducts": {
"type": "boolean",
"attribute": "physical-products",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Is Physical products"
},
"getter": false,
"setter": false,
"reflect": false
},
"physical": {
"type": "boolean",
"attribute": "physical",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Is Physical products (alias of `physicalProducts` for themes passing `physical`)"
},
"getter": false,
"setter": false,
"reflect": false
},
"vertical": {
"type": "boolean",
"attribute": "vertical",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Is Vertical widget"
},
"getter": false,
"setter": false,
"reflect": false
},
"formSelector": {
"type": "string",
"attribute": "form-selector",
"mutable": true,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The form selector to be used to get the form data"
},
"getter": false,
"setter": false,
"reflect": false,
"defaultValue": "'form.product-form, form.form--product-options'"
}
};
}
static get states() {
return {
"sectionTitle": {},
"sectionSubtitle": {},
"sectionBtnText": {},
"giftDetails": {},
"selectImageForYourGift": {},
"selectImageOrUpload": {},
"selectGiftMessage": {},
"giftCustomText": {},
"textId": {},
"incorrectGiftText": {},
"nextStep": {},
"senderNameLabel": {},
"receiverNameFieldLabel": {},
"receiverMobileFieldLabel": {},
"receiverCountryFieldLabel": {},
"ksa": {},
"selectCountry": {},
"selectCity": {},
"selectCityInfo": {},
"receiverCityFieldLabel": {},
"receiverRegionFieldLabel": {},
"selectRegion": {},
"receiverEmailFieldLabel": {},
"emailPlaceholder": {},
"sendLater": {},
"selectSendDateAndTime": {},
"canNotEditOrderAfterSelectDate": {},
"sendGift": {},
"donationRequired": {},
"currentStep": {},
"showCalendar": {},
"showGiftText": {},
"currentLang": {},
"parentClass": {},
"errors": {},
"gift": {},
"selectedGiftTextOption": {},
"selectedCountryId": {},
"selectedCountryCode": {},
"loadingCities": {},
"loadingRegions": {},
"regions": {},
"selectedRegionId": {},
"isKSA": {},
"selectedCountry": {},
"selectedRegion": {},
"displayedCities": {},
"selectedCity": {},
"searchingCities": {},
"enableCityAjaxSearch": {},
"citySearchQuery": {},
"parsedFormData": {},
"showTextArea": {},
"selectedImage": {},
"uploadedImage": {},
"selectedText": {},
"senderName": {},
"errorMessage": {},
"hasError": {},
"quantity": {},
"deliveryDate": {},
"timeZone": {},
"receiverName": {},
"receiverMobile": {},
"receiverCountryCode": {},
"receiverEmail": {},
"hostId": {},
"receiverCity": {}
};
}
static get methods() {
return {
"open": {
"complexType": {
"signature": "() => Promise<any>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
}
},
"return": "Promise<any>"
},
"docs": {
"text": "Show / Open the gifting modal window",
"tags": []
}
},
"close": {
"complexType": {
"signature": "() => Promise<HTMLElement>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
},
"HTMLElement": {
"location": "global",
"id": "global::HTMLElement"
}
},
"return": "Promise<HTMLElement>"
},
"docs": {
"text": "\nHide / close the gifting modal window",
"tags": []
}
},
"goToStep2": {
"complexType": {
"signature": "() => Promise<void>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "\nGo to the step 2",
"tags": []
}
}
};
}
}
SallaGifting.CITY_AJAX_THRESHOLD = 400;
SallaGifting.CITY_SEARCH_DEBOUNCE_MS = 100;