@salla.sa/twilight-components
Version:
Salla Web Component
655 lines (647 loc) • 41.1 kB
JavaScript
/*!
* Crafted with ❤ by Salla
*/
import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
import { a as anime } from './anime.es.js';
import { I as IconArrowLeft } from './arrow-left.js';
import { C as Cancel } from './cancel.js';
import { d as defineCustomElement$b } from './salla-button2.js';
import { d as defineCustomElement$a } from './salla-datetime-picker2.js';
import { d as defineCustomElement$9 } from './salla-file-upload2.js';
import { d as defineCustomElement$8 } from './salla-list-tile2.js';
import { d as defineCustomElement$7 } from './salla-loading2.js';
import { d as defineCustomElement$6 } from './salla-modal2.js';
import { d as defineCustomElement$5 } from './salla-placeholder2.js';
import { d as defineCustomElement$4 } from './salla-skeleton2.js';
import { d as defineCustomElement$3 } from './salla-slider2.js';
import { d as defineCustomElement$2 } from './salla-tel-input2.js';
var Images = `<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<title>images</title>
<path d="M22.667 29.333h-13.333c-3.676 0-6.667-2.991-6.667-6.667v-13.333c0-0.737-0.597-1.333-1.333-1.333s-1.333 0.596-1.333 1.333v13.333c0 5.145 4.187 9.333 9.333 9.333h13.333c0.736 0 1.333-0.596 1.333-1.333s-0.597-1.333-1.333-1.333zM22.667 5.333c-2.205 0-4 1.795-4 4s1.795 4 4 4 4-1.795 4-4-1.795-4-4-4zM22.667 10.667c-0.735 0-1.333-0.597-1.333-1.333s0.599-1.333 1.333-1.333 1.333 0.597 1.333 1.333-0.599 1.333-1.333 1.333zM25.333 0h-13.333c-3.676 0-6.667 2.991-6.667 6.667v13.333c0 1.055 0.268 2.040 0.707 2.927 0.039 0.099 0.088 0.188 0.151 0.277 1.137 2.053 3.301 3.463 5.809 3.463h13.333c3.676 0 6.667-2.991 6.667-6.667v-13.333c0-3.676-2.991-6.667-6.667-6.667zM12 24c-1.244 0-2.344-0.583-3.077-1.476l5.721-7.047 6.629 8.523zM29.333 20c0 2.205-1.795 4-4 4h-0.68l-8.933-11.485c-0.251-0.32-0.633-0.511-1.039-0.515h-0.015c-0.401 0-0.781 0.181-1.035 0.492l-5.632 6.935v-12.76c0-2.205 1.795-4 4-4h13.333c2.205 0 4 1.795 4 4z"></path>
</svg>
`;
var GiftSharing = `<!-- 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>gift-sharing</title>
<path d="M5 32h-4c-0.552 0-1-0.448-1-1v0-14c0-0.552 0.448-1 1-1v0h4c0.552 0 1 0.448 1 1v0 14c0 0.552-0.448 1-1 1v0zM2 30h2v-12h-2zM19.32 30h-14.32v-2h14.32c0.693-0.005 1.329-0.242 1.837-0.637l-0.007 0.005 8.45-6.568c0.216-0.16 0.365-0.402 0.399-0.679l0-0.005c0.005-0.036 0.007-0.077 0.007-0.119 0-0.226-0.078-0.434-0.209-0.599l0.002 0.002c-0.16-0.216-0.401-0.364-0.677-0.399l-0.005-0.001c-0.034-0.004-0.073-0.007-0.113-0.007-0.227 0-0.436 0.078-0.601 0.208l0.002-0.002-7.126 5.526c-1.003 0.793-2.285 1.273-3.68 1.274h-6.6v-2h6.6c0.926-0.001 1.777-0.32 2.45-0.852l-0.008 0.006 7.126-5.526c0.492-0.39 1.122-0.625 1.807-0.625 0.135 0 0.268 0.009 0.398 0.027l-0.015-0.002c0.824 0.102 1.534 0.524 2.011 1.137l0.005 0.007c0.39 0.494 0.625 1.127 0.625 1.814 0 0.136-0.009 0.27-0.027 0.402l0.002-0.015c-0.106 0.819-0.529 1.523-1.141 1.995l-0.007 0.005-8.458 6.578c-0.834 0.649-1.894 1.043-3.047 1.050h-0.002zM11 26c-0.552 0-1-0.448-1-1s0.448-1 1-1v0c2.406-0.004 4.415-1.703 4.894-3.967l0.006-0.033h-10.9c-0.552 0-1-0.448-1-1s0.448-1 1-1v0h12c0.552 0 1 0.448 1 1v0c0 3.866-3.134 7-7 7v0zM24 12h-16c-1.105 0-2-0.895-2-2v0-2c0-1.105 0.895-2 2-2v0h16c1.105 0 2 0.895 2 2v0 2c0 1.105-0.895 2-2 2v0zM24 10v0zM8 8v2h16v-2zM23 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 1v0zM9 16c-0.552 0-1-0.448-1-1v0-4c0-0.552 0.448-1 1-1s1 0.448 1 1v0 4c0 0.552-0.448 1-1 1v0zM16 16c-0.552 0-1-0.448-1-1v0-8c0-0.552 0.448-1 1-1s1 0.448 1 1v0 8c0 0.552-0.448 1-1 1v0zM16 8c-0.552-0-1-0.448-1-1 0-0.077 0.009-0.151 0.025-0.223l-0.001 0.007c0.314-1.849 0.963-3.5 1.887-4.961l-0.033 0.055c0.539-0.521 1.274-0.842 2.084-0.842 1.657 0 3 1.343 3 3 0 0.81-0.321 1.545-0.843 2.085l0.001-0.001c-1.405 0.891-3.056 1.541-4.824 1.845l-0.080 0.011c-0.065 0.015-0.139 0.024-0.216 0.024h-0zM19 3c-0.001 0-0.001 0-0.002 0-0.276 0-0.525 0.112-0.706 0.292l0-0c-0.391 0.669-0.703 1.444-0.897 2.264l-0.011 0.058c0.878-0.205 1.653-0.517 2.363-0.93l-0.041 0.022c0.18-0.181 0.292-0.43 0.292-0.706 0-0.551-0.446-0.999-0.998-1h-0zM16 8c-0.077-0-0.151-0.009-0.223-0.025l0.007 0.001c-1.848-0.315-3.499-0.965-4.959-1.888l0.055 0.032c-0.521-0.539-0.842-1.274-0.842-2.084 0-1.657 1.343-3 3-3 0.81 0 1.545 0.321 2.085 0.843l-0.001-0.001c0.891 1.405 1.541 3.056 1.845 4.824l0.011 0.080c0.015 0.066 0.024 0.141 0.024 0.218 0 0.552-0.448 1-1 1-0.001 0-0.001 0-0.002 0h0zM13 3c-0.001 0-0.001 0-0.002 0-0.552 0-1 0.448-1 1 0 0.277 0.112 0.527 0.294 0.708l0 0c0.669 0.391 1.444 0.703 2.264 0.897l0.058 0.011c-0.205-0.878-0.517-1.653-0.93-2.363l0.022 0.041c-0.181-0.181-0.43-0.293-0.706-0.294h-0z"></path>
</svg>
`;
var Alert = `<!-- 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>alert</title>
<path d="M16 13.333c-0.736 0-1.333 0.597-1.333 1.333v8c0 0.736 0.597 1.333 1.333 1.333s1.333-0.597 1.333-1.333v-8c0-0.736-0.597-1.333-1.333-1.333zM16 9.327c-0.736 0-1.333 0.604-1.333 1.34s0.597 1.333 1.333 1.333 1.333-0.597 1.333-1.333v-0.013c0-0.736-0.597-1.327-1.333-1.327zM27.313 4.687c-6.237-6.237-16.389-6.239-22.628 0-6.237 6.239-6.237 16.389 0 22.628 3.119 3.119 7.216 4.679 11.313 4.679s8.195-1.559 11.313-4.679c6.24-6.239 6.24-16.391 0.001-22.628zM25.428 25.428c-5.199 5.197-13.657 5.197-18.857 0-5.197-5.199-5.197-13.659 0-18.857 5.199-5.197 13.659-5.197 18.857 0 5.199 5.2 5.199 13.659 0 18.857z"></path>
</svg>
`;
const sallaGiftingCss = ".s-gifting-steps-wrapper{transition:0.2s cubic-bezier(0.55, 0, 0.1, 1) 0s}.s-gifting-select{background-image:url(\"data:image/svg+xml;utf8,<svg version='1.1' fill='gray' xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><title>keyboard_arrow_down</title><path d='M9.875 11.104l6.125 6.125 6.125-6.125 1.875 1.875-8 8-8-8z'></path></svg>\");background-size:24px;background-repeat:no-repeat;background-position:99%;appearance:none}[dir=rtl] .s-gifting-select{background-position:5px}.s-gifting-widget-vertical .s-list-tile-item [slot=title]{display:flex;align-items:center;gap:1.5rem}.s-gifting-widget-vertical .s-list-tile-item-content{width:100%}";
const SallaGifting$1 = /*@__PURE__*/ proxyCustomElement(class SallaGifting extends HTMLElement {
constructor() {
super();
this.__registerHost();
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.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';
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.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();
});
}
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}`);
setTimeout(() => {
let currentStepHeight = currentStep.offsetHeight;
if (newHeight) {
this.stepsWrapper.style.height = `${newHeight}px`;
}
else {
this.stepsWrapper.style.height = currentStepHeight + additionSpace + 'px';
}
}, 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');
});
}
}, '-=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.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');
}
handleReceiverCity(event) {
this.receiverCity = event.target.value;
this.clearError('receiver.city_id');
}
async handleCountryChange(event) {
const countryId = event.target.value;
this.selectedCountryId = countryId;
this.clearError('receiver.country');
// Find the selected country and store its country_code
const selectedCountry = this.gift?.countries?.find(country => country.id == countryId);
this.selectedCountryCode = selectedCountry?.country_code;
if (!countryId || this.gift?.countries?.length === 0) {
this.gift = { ...this.gift, cities: [] };
this.receiverCity = undefined;
this.selectedCountryCode = undefined;
return;
}
this.loadingCities = true;
this.gift = { ...this.gift, cities: [] };
this.receiverCity = undefined;
try {
const response = await salla.api.request(`shipping/cities?for_branch=0&country_id=${countryId}`);
if (response && response.data) {
this.gift = { ...this.gift, cities: response.data };
}
}
catch (error) {
console.error('Error fetching cities:', error);
}
finally {
this.loadingCities = false;
}
}
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.physicalProducts ? [
{ key: 'receiver.country', value: this.selectedCountryId, label: this.receiverCountryFieldLabel },
{ 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.physicalProducts && this.selectedCountryCode ? { country_code: this.selectedCountryCode } : {}),
...(this.receiverCity && this.physicalProducts ? { 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);
});
}
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: 'ba5575020df2e6e1d72eadc5c15ffa2629a7e0f0' }, h("salla-list-tile", { key: '2be6a003eb1881b35001d184fe4e7d8b3a48bcc2', class: this.generateClass() }, h("div", { key: 'c1c9762462177aac3571c72608921fb3a71e0c1e', slot: "title" }, this.vertical ? h("span", { innerHTML: GiftSharing }) : '', h("h3", { key: '6d25fe0684792b2b18c48b23c3a78fe1f428d371' }, !!this.widgetTitle ? this.widgetTitle : this.sectionTitle)), h("div", { key: '8943aeec88dd610d159b3ee09e7cf784bfb85057', slot: "subtitle" }, h("div", { key: '7e93b7590c04431344d940965f851e6c21565921' }, !!this.widgetSubtitle ? this.widgetSubtitle : this.sectionSubtitle)), h("div", { key: '0b4c0390853b20e1cc1dcd63215d639f6da28d5b', slot: "action" }, h("salla-button", { key: '8597cbcfecfe87c4057a0712e78cf5c3ccea9b89', color: "primary", fill: "outline", width: "wide", class: "s-gifting-widget-action", onClick: () => this.handleGiftButtonClick() }, h("slot", { key: '48ee9b4c7fd63ae5d49acf137fb429292ade8fd7', name: "widget-btn-content" }, h("div", { key: '05681d9d1f8f99b0c8ac722fc4c49a0b7c9dfb7d', class: "s-gifting-widget-action-content" }, h("span", { key: '4c22063c0d47096166363bbf458ec2b57615bc6c', innerHTML: GiftSharing }), " \u00A0", h("span", { key: '2688bf6e45d28f6696e8581d745626ac749b30c6' }, this.sectionBtnText)))))), h("salla-modal", { key: '338ce16bd3c615b5a97d8bf09d1bd1fa6388194e', id: this.hostId, isLoading: true, class: "s-gifting-modal", width: "sm", ref: modal => this.modal = modal }, h("div", { key: '33662376e8979c321fce3d2c01060881439bb652', slot: "loading" }, h("div", { key: 'ae3173d44990f7c2f41206f9ecd63dc1b30c2a1e', class: "s-gifting-skeleton" }, h("div", { key: 'dcab87f7a921763c0a52d122c2eb5b87aca41792', class: "s-gifting-modal-header" }, h("salla-skeleton", { key: 'c41d6ced2a82554aeb7e36986111832bef6f1f0f', type: 'circle', height: '5rem', width: '5rem' }), h("h2", { key: 'cbf4e6c3eccc896f4b2675f5877df055d5b884be', class: "s-gifting-modal-title" }, h("div", { key: '544134f67bdac37775af422cac9688c7975b0c4b', class: "s-gifting-modal-badge-wrapper" }, h("salla-skeleton", { key: '62d175f4b42d24ded6f87f3af700af35febe108f', height: '15px', width: '150px' })))), h("div", { key: '7dc39034234bfb0e57cbbc2c395a639cd383a77b', class: "s-gifting-skeleton-content" }, h("salla-skeleton", { key: '5d73d76103a98cd477f4604c3408b6071434c2f5', height: '10px', width: '150px' }), h("salla-skeleton", { key: '477ee6bf604e799336e7c45f119cfcdbc23cb0ed', height: '230px' }), h("salla-skeleton", { key: 'b8c51be1f614081b900465e1445d726be5bb3d48', height: '10px', width: '150px' }), h("salla-skeleton", { key: '6dae16f42decbd267fa03b7a71103a32fe30e2b1', height: '30px' }), h("salla-skeleton", { key: '1b077b2a03c438446a0a9c115e2b61377fcbd542', height: '40px' })))), h("slot", { key: 'fb0253f4ca6c6e4cafd0c8496e94d0e6da37d748', 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.errors && this.errors['sender_name'] ? "s-form-group s-form-has-error anime-item opacity-0" : "s-form-group anime-item opacity-0" }, 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.errors && this.errors['receiver.name'] ? "s-form-group s-form-has-error anime-item opacity-0" : "s-form-group anime-item opacity-0" }, 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.errors && this.errors['receiver.mobile'] ? "s-form-group s-form-has-error anime-item opacity-0" : "s-form-group anime-item opacity-0" }, 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.physicalProducts &&
h("div", null, h("div", { class: this.errors && this.errors['receiver.country'] ? "s-form-group s-form-has-error anime-item opacity-0" : "s-form-group anime-item opacity-0" }, h("label", { class: "s-form-label" }, this.receiverCountryFieldLabel), h("select", { name: "country", class: "s-form-control", onChange: (event) => this.handleCountryChange(event), required: true }, h("option", { value: "" }, this.selectCountry), this.gift?.countries?.map((country) => (h("option", { value: country.id }, country.name)))), this.errors && this.errors['receiver.country'] ?
h("span", { class: "s-gifting-error" }, this.errors['receiver.country']) : ''), h("div", { class: this.errors && this.errors['receiver.city_id'] ? "s-form-group s-form-has-error anime-item opacity-0" : "s-form-group anime-item opacity-0" }, h("label", { class: "s-form-label" }, this.receiverCityFieldLabel), h("select", { name: "city", "aria-label": salla.lang.get('blocks.buy_as_gift.select_city'), class: "s-form-control", onChange: (event) => this.handleReceiverCity(event), disabled: this.loadingCities }, h("option", { value: "", selected: true }, this.loadingCities ? salla.lang.get('common.elements.loading') : this.selectCity), this.gift?.cities?.map((city) => (h("option", { value: city.id }, city.name)))), this.errors && this.errors['receiver.city_id'] ?
h("span", { class: "s-gifting-error" }, this.errors['receiver.city_id']) : ''), h("div", { class: "s-gifting-info anime-item opacity-0" }, h("span", { innerHTML: Alert }), h("span", null, this.selectCityInfo))), !this.physicalProducts && h("div", { class: "anime-item opacity-0" }, 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: "s-gifting-step-two-footer anime-item opacity-0" }, h("a", { href: "#!", innerHTML: IconArrowLeft, onClick: (e) => this.goToStep1(e) }), h("salla-button", { onClick: () => this.submitForm(), color: "primary", width: 'wide' }, h("span", null, this.sendGift)))))
], h("slot", { key: '8b69297ac7f9a527c12325a64a267825ea5ee48b', name: "footer" })))
];
}
static get style() { return sallaGiftingCss; }
}, [4, "salla-gifting", {
"productId": [2, "product-id"],
"widgetTitle": [1, "widget-title"],
"widgetSubtitle": [1, "widget-subtitle"],
"physicalProducts": [4, "physical-products"],
"vertical": [4],
"formSelector": [1025, "form-selector"],
"sectionTitle": [32],
"sectionSubtitle": [32],
"sectionBtnText": [32],
"giftDetails": [32],
"selectImageForYourGift": [32],
"selectImageOrUpload": [32],
"selectGiftMessage": [32],
"giftCustomText": [32],
"textId": [32],
"incorrectGiftText": [32],
"nextStep": [32],
"senderNameLabel": [32],
"receiverNameFieldLabel": [32],
"receiverMobileFieldLabel": [32],
"receiverCountryFieldLabel": [32],
"ksa": [32],
"selectCountry": [32],
"selectCity": [32],
"selectCityInfo": [32],
"receiverCityFieldLabel": [32],
"receiverEmailFieldLabel": [32],
"emailPlaceholder": [32],
"sendLater": [32],
"selectSendDateAndTime": [32],
"canNotEditOrderAfterSelectDate": [32],
"sendGift": [32],
"donationRequired": [32],
"currentStep": [32],
"showCalendar": [32],
"showGiftText": [32],
"currentLang": [32],
"parentClass": [32],
"errors": [32],
"gift": [32],
"selectedGiftTextOption": [32],
"selectedCountryId": [32],
"selectedCountryCode": [32],
"loadingCities": [32],
"parsedFormData": [32],
"showTextArea": [32],
"selectedImage": [32],
"uploadedImage": [32],
"selectedText": [32],
"senderName": [32],
"errorMessage": [32],
"hasError": [32],
"quantity": [32],
"deliveryDate": [32],
"timeZone": [32],
"receiverName": [32],
"receiverMobile": [32],
"receiverCountryCode": [32],
"receiverEmail": [32],
"hostId": [32],
"receiverCity": [32],
"open": [64],
"close": [64],
"goToStep2": [64]
}]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["salla-gifting", "salla-button", "salla-datetime-picker", "salla-file-upload", "salla-list-tile", "salla-loading", "salla-modal", "salla-placeholder", "salla-skeleton", "salla-slider", "salla-tel-input"];
components.forEach(tagName => { switch (tagName) {
case "salla-gifting":
if (!customElements.get(tagName)) {
customElements.define(tagName, SallaGifting$1);
}
break;
case "salla-button":
if (!customElements.get(tagName)) {
defineCustomElement$b();
}
break;
case "salla-datetime-picker":
if (!customElements.get(tagName)) {
defineCustomElement$a();
}
break;
case "salla-file-upload":
if (!customElements.get(tagName)) {
defineCustomElement$9();
}
break;
case "salla-list-tile":
if (!customElements.get(tagName)) {
defineCustomElement$8();
}
break;
case "salla-loading":
if (!customElements.get(tagName)) {
defineCustomElement$7();
}
break;
case "salla-modal":
if (!customElements.get(tagName)) {
defineCustomElement$6();
}
break;
case "salla-placeholder":
if (!customElements.get(tagName)) {
defineCustomElement$5();
}
break;
case "salla-skeleton":
if (!customElements.get(tagName)) {
defineCustomElement$4();
}
break;
case "salla-slider":
if (!customElements.get(tagName)) {
defineCustomElement$3();
}
break;
case "salla-tel-input":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
} });
}
defineCustomElement$1();
const SallaGifting = SallaGifting$1;
const defineCustomElement = defineCustomElement$1;
export { SallaGifting, defineCustomElement };