(function () {
const cartComponentTemplate = document.createElement('template');
const API_BASE_URL = "https://compras.ufidelitas.ac.cr/api/v1";
const WEB_BASE_URL = "https://compras.ufidelitas.ac.cr";
const cartLinkElem = document.createElement('link');
cartLinkElem.setAttribute('rel', 'stylesheet');
cartLinkElem.setAttribute('href', `${WEB_BASE_URL}/static/shop/cart-component/css/cart-component.css`);
const courseLinkElem = document.createElement('link');
courseLinkElem.setAttribute('rel', 'stylesheet');
courseLinkElem.setAttribute('href', `${WEB_BASE_URL}/static/shop/cart-component/css/course-component.css`);
cartComponentTemplate.innerHTML = `
`;
class ShoppingCart extends HTMLElement {
constructor() {
super();
this.attachShadow({mode: 'open'});
// this.shadowRoot.appendChild(cartLinkElem);
this.shadowRoot.appendChild(cartComponentTemplate.content.cloneNode(true));
this.cartContainer = this.shadowRoot.querySelector('[cart-container]');
this.cartCounter = this.shadowRoot.querySelector('[cart-counter]');
this.cartDetailBtn = this.shadowRoot.querySelector('[cart-detail-btn]');
this.cartDetailContainer = this.shadowRoot.querySelector('[cart-detail-container]');
this.cartItemsContainer = this.shadowRoot.querySelector('[cart-items-container]');
this.cartTotal = this.shadowRoot.querySelector('[cart-total]');
this.cartDetailUrl = this.shadowRoot.querySelector('[cart-detail-url]');
}
connectedCallback() {
console.log("Conectando componente...");
this.getCart();
this.cartDetailBtn.addEventListener('click', () => {
this.cartDetailContainer.classList.toggle('show');
})
}
static get observedAttributes() {
return ['basketId'];
}
#fillCart(cart) {
this.cartCounter.innerText = cart.courses.length;
this.cartTotal.innerText = 'Total Carrito: ' + cart.total;
this.cartItemsContainer.innerHTML = '';
this.cartDetailUrl.href = `${WEB_BASE_URL}/cart/detail/?source=${this.basketId}&site=${window.location.href}`;
if (cart.courses.length == 0) {
this.cartItemsContainer.innerHTML = 'Tu carrito esta vacio';
} else {
cart.courses.forEach((course) => {
console.log(course);
let cartItem = document.createElement('div');
cartItem.classList.add('cart-item');
let courseImageDiv = document.createElement('div');
courseImageDiv.classList.add('course-image');
cartItem.appendChild(courseImageDiv);
let courseImageTag = document.createElement('img');
courseImageTag.src = course.image_url;
courseImageDiv.appendChild(courseImageTag);
let courseDetailDiv = document.createElement('div');
courseDetailDiv.classList.add('course-detail');
let courseNameDiv = document.createElement('div');
courseNameDiv.classList.add('course-name');
courseNameDiv.innerHTML = course.name;
courseDetailDiv.appendChild(courseNameDiv);
let courseInstructorDiv = document.createElement('div');
courseInstructorDiv.classList.add('course-instructor');
courseInstructorDiv.innerHTML = '--';
if (course.instructor) {
courseInstructorDiv.innerHTML = course.instructor;
}
courseDetailDiv.appendChild(courseInstructorDiv);
let coursePriceDiv = document.createElement('div');
coursePriceDiv.classList.add('course-price');
if (course.season_discount) {
coursePriceDiv.innerHTML = course.season_discount.price_discounted;
courseDetailDiv.appendChild(coursePriceDiv);
let fullPriceSmallTag = document.createElement('small');
fullPriceSmallTag.style.textDecoration = 'line-through';
fullPriceSmallTag.innerHTML = course.season_discount.full_price;
courseDetailDiv.appendChild(fullPriceSmallTag);
} else {
coursePriceDiv.innerHTML = course.course_price;
courseDetailDiv.appendChild(coursePriceDiv);
}
cartItem.appendChild(courseDetailDiv);
this.cartItemsContainer.appendChild(cartItem);
})
}
}
getCart() {
const basketCookie = this.getCookie('fideplusbasket');
if (basketCookie) {
console.log('Basket ID:', basketCookie);
const cartUrl = `${API_BASE_URL}/cart/detail/?source=${basketCookie}`;
this.basketId = basketCookie;
fetch(cartUrl)
.then((response) => response.json())
.then((data) => {
const cart = data.cart;
this.#fillCart(cart);
console.log(data);
})
.catch((error) => {
console.log(error)
})
} else {
const cartUrl = `${API_BASE_URL}/cart/detail/`;
fetch(cartUrl)
.then((response) => response.json())
.then((data) => {
console.log(data);
this.setCookie(data.basket_id);
this.basketId = data.basket_id;
const cart = data.cart;
this.#fillCart(cart);
})
.catch((error) => {
console.log(error)
})
}
}
addCourse(sheduleId, majorPlan) {
return new Promise(((resolve, reject) => {
console.log('Codigo de Curso', sheduleId);
const url = `${API_BASE_URL}/cart/add-course/?source=${this.basketId}`;
const data = {
schedule: sheduleId,
major_plan: majorPlan
}
fetch(url, {
method: 'POST',
body: JSON.stringify(data),
headers: {
'Content-Type': 'application/json'
}
})
.then((response) => {
console.log(response.ok)
if (response.ok) {
response.json()
.then((data) => {
console.log('data respondida', data)
this.#fillCart(data);
this.cartDetailContainer.classList.toggle('show');
console.log('Open Cart....');
setTimeout(() => {
this.cartDetailContainer.classList.toggle('show');
}, 5000);
resolve(true);
})
} else {
reject(false);
}
})
}));
}
setCookie(cvalue) {
const d = new Date();
d.setTime(d.getTime() + (7 * 24 * 60 * 60 * 1000));
let expires = "expires=" + d.toUTCString();
document.cookie = "fideplusbasket=" + cvalue + ";" + expires + ";path=/";
}
getCookie(cname) {
let name = cname + "=";
let decodedCookie = decodeURIComponent(document.cookie);
let ca = decodedCookie.split(';');
for (let i = 0; i < ca.length; i++) {
let c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
get basketId() {
return this.getAttribute('basketId');
}
set basketId(newValue) {
this.setAttribute('basketId', newValue);
}
}
const courseComponentTemplate = document.createElement('template');
courseComponentTemplate.innerHTML = `
`;
class CourseDetail extends HTMLElement {
constructor() {
super();
this.attachShadow({mode: 'open'});
this.shadowRoot.appendChild(courseComponentTemplate.content.cloneNode(true));
this.courseCode = this.shadowRoot.querySelector('[course-code]');
this.basket = this.shadowRoot.querySelector('[source]');
this.coursePriceTag = this.shadowRoot.querySelector('[course-price]');
this.coursePriceSingleTag = this.shadowRoot.querySelector('[course-price-single]');
this.coursePriceContainer = this.shadowRoot.querySelector('[course-price-container]');
this.courseLoaderContainer = this.shadowRoot.querySelector('[course-loader-container]');
this.coursePriceBtn = this.shadowRoot.querySelector('[course-price-btn]');
this.courseDetailContainer = this.shadowRoot.querySelector('[course-detail-container]');
}
connectedCallback() {
}
static get observedAttributes() {
return ['code', 'major-plan-slug'];
}
attributeChangedCallback(name, oldValue, newValue) {
if (name == 'code') {
let cartComponent = document.getElementsByTagName('shopping-cart')[0];
this.courseCode.value = this.code;
let courseDetailUrl = `${API_BASE_URL}/course/detail/?course_id=${this.code}&major_plan_slug=${this.majorPlanSlug}&source=${cartComponent.basketId}`;
fetch(courseDetailUrl)
.then((response) => response.json())
.then((data) => {
console.log(data);
this.schedules = data.course.available_schedules;
this.basket.value = data.basket_id;
let h5Tag = document.createElement('h5');
h5Tag.classList.add('course-price');
// let taxSmall = document.createElement('small');
// taxSmall.style.display = 'block';
// taxSmall.style.fontSize = '10px';
// taxSmall.innerHTML = 'IVA incluido';
let iconTag = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
iconTag.classList.add('icon');
iconTag.setAttribute('viewBox', '0 0 576 512');
const iconPath = document.createElementNS(
'http://www.w3.org/2000/svg',
'path'
);
iconPath.setAttribute('d', 'M504.717 320H211.572l6.545 32h268.418c15.401 0 26.816 14.301 23.403 29.319l-5.517 24.276C523.112 414.668 536 433.828 536 456c0 31.202-25.519 56.444-56.824 55.994-29.823-.429-54.35-24.631-55.155-54.447-.44-16.287 6.085-31.049 16.803-41.548H231.176C241.553 426.165 248 440.326 248 456c0 31.813-26.528 57.431-58.67 55.938-28.54-1.325-51.751-24.385-53.251-52.917-1.158-22.034 10.436-41.455 28.051-51.586L93.883 64H24C10.745 64 0 53.255 0 40V24C0 10.745 10.745 0 24 0h102.529c11.401 0 21.228 8.021 23.513 19.19L159.208 64H551.99c15.401 0 26.816 14.301 23.403 29.319l-47.273 208C525.637 312.246 515.923 320 504.717 320zM408 168h-48v-40c0-8.837-7.163-16-16-16h-16c-8.837 0-16 7.163-16 16v40h-48c-8.837 0-16 7.163-16 16v16c0 8.837 7.163 16 16 16h48v40c0 8.837 7.163 16 16 16h16c8.837 0 16-7.163 16-16v-40h48c8.837 0 16-7.163 16-16v-16c0-8.837-7.163-16-16-16z');
iconTag.appendChild(iconPath);
let giftSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
giftSvg.setAttribute('viewBox', '0 0 640 512');
giftSvg.classList.add('gift-icon');
let giftSvgPath = document.createElementNS(
'http://www.w3.org/2000/svg',
'path'
);
giftSvgPath.setAttribute('d', 'M240.6 194.1c1.9-30.8 17.3-61.2 44-79.8C279.4 103.5 268.7 96 256 96h-29.4l30.7-22c7.2-5.1 8.9-15.1 3.7-22.3l-9.3-13c-5.1-7.2-15.1-8.9-22.3-3.7l-32 22.9 11.5-30.6c3.1-8.3-1.1-17.5-9.4-20.6l-15-5.6c-8.3-3.1-17.5 1.1-20.6 9.4l-19.9 53-19.9-53.1C121 2.1 111.8-2.1 103.5 1l-15 5.6C80.2 9.7 76 19 79.2 27.2l11.5 30.6L58.6 35c-7.2-5.1-17.2-3.5-22.3 3.7l-9.3 13c-5.1 7.2-3.5 17.2 3.7 22.3l30.7 22H32c-17.7 0-32 14.3-32 32v352c0 17.7 14.3 32 32 32h168.9c-5.5-9.5-8.9-20.3-8.9-32V256c0-29.9 20.8-55 48.6-61.9zM224 480c0 17.7 14.3 32 32 32h160V384H224v96zm224 32h160c17.7 0 32-14.3 32-32v-96H448v128zm160-288h-20.4c2.6-7.6 4.4-15.5 4.4-23.8 0-35.5-27-72.2-72.1-72.2-48.1 0-75.9 47.7-87.9 75.3-12.1-27.6-39.9-75.3-87.9-75.3-45.1 0-72.1 36.7-72.1 72.2 0 8.3 1.7 16.2 4.4 23.8H256c-17.7 0-32 14.3-32 32v96h192V224h15.3l.7-.2.7.2H448v128h192v-96c0-17.7-14.3-32-32-32zm-272 0c-2.7-1.4-5.1-3-7.2-4.8-7.3-6.4-8.8-13.8-8.8-19 0-9.7 6.4-24.2 24.1-24.2 18.7 0 35.6 27.4 44.5 48H336zm199.2-4.8c-2.1 1.8-4.5 3.4-7.2 4.8h-52.6c8.8-20.3 25.8-48 44.5-48 17.7 0 24.1 14.5 24.1 24.2 0 5.2-1.5 12.6-8.8 19z')
giftSvg.appendChild(giftSvgPath);
let giftSpan = document.createElement('span');
/*let giftText = document.createElement('span');
giftText.innerText = 'EN OFERTA';
giftSpan.style.color = 'red';
giftSpan.style.width = '100%';
giftSpan.style.textAlign = 'center';
giftSpan.appendChild(giftSvg.cloneNode(true));
giftSpan.appendChild(giftText);
giftSpan.appendChild(giftSvg);*/
if (data.course.open_enrollment) {
let anchorPriceBtn = document.createElement('a');
anchorPriceBtn.href = 'javascript:void(0);';
anchorPriceBtn.classList.add('course-add-btn');
anchorPriceBtn.innerHTML = 'Agregar al Carrito';
anchorPriceBtn.addEventListener('click', () => {
const alertContainer = document.createElement('div');
alertContainer.classList.add('alert-container');
this.courseDetailContainer.appendChild(alertContainer);
let modalScheduleContainer = document.createElement('div');
modalScheduleContainer.classList.add('modal-scheduler-container');
let modalScheduleTitle = document.createElement('h5');
modalScheduleTitle.innerText = `Horarios para:`;
modalScheduleTitle.classList.add('modal-schedule-title');
modalScheduleContainer.appendChild(modalScheduleTitle);
let scheduleName = document.createElement('h4');
scheduleName.innerText = data.course.name;
scheduleName.classList.add('modal-schedule-name');
modalScheduleContainer.appendChild(scheduleName);
let scheduleSelectTag = document.createElement('select');
scheduleSelectTag.classList.add('modal-schedule-select');
this.schedules.forEach((schedule) => {
let scheduleOption = document.createElement('option');
scheduleOption.value = schedule.schedule_id;
scheduleOption.text = `${schedule.display_name} - ${schedule.schedule} - ${schedule.campus_name}`;
scheduleSelectTag.appendChild(scheduleOption);
})
modalScheduleContainer.appendChild(scheduleSelectTag);
let addScheduleBtn = document.createElement('button');
addScheduleBtn.type = 'button';
addScheduleBtn.innerText = 'Seleccionar Horario';
addScheduleBtn.classList.add('modal-add-schedule-button');
addScheduleBtn.addEventListener('click', () => {
const selectedOption = scheduleSelectTag.options[scheduleSelectTag.selectedIndex];
if (selectedOption.value) {
this.coursePriceContainer.style.display = 'none';
this.courseLoaderContainer.style.display = 'flex';
this.courseDetailContainer.removeChild(alertContainer);
cartComponent.addCourse(selectedOption.value, this.majorPlanSlug)
.then((result) => {
this.coursePriceContainer.style.display = 'flex';
this.courseLoaderContainer.style.display = 'none';
const successfullyTag = document.createElement('span');
successfullyTag.style.color = 'green';
successfullyTag.style.fontSize = 'small';
successfullyTag.style.display = 'flex';
successfullyTag.style.flexDirection = 'column';
successfullyTag.style.justifyContent = 'center';
successfullyTag.style.alignItems = 'center';
successfullyTag.style.marginTop = '10px';
successfullyTag.style.textAlign = 'center';
successfullyTag.innerHTML = ' El curso se ha agregado con éxito al carrito';
h5Tag.appendChild(successfullyTag);
setTimeout(() => {
h5Tag.removeChild(successfullyTag);
}, 5000);
})
.catch((error) => {
console.log(error);
})
.finally(() => {
this.coursePriceContainer.style.display = 'flex';
this.courseLoaderContainer.style.display = 'none';
})
} else {
alert('Debe seleccionar un horario')
}
});
modalScheduleContainer.appendChild(addScheduleBtn);
let closeModalBtn = document.createElement('button');
closeModalBtn.type = 'button';
closeModalBtn.innerHTML = '';
closeModalBtn.classList.add('modal-close-button');
closeModalBtn.addEventListener('click', () => {
console.log('Cerrando Modal')
this.courseDetailContainer.removeChild(alertContainer);
});
modalScheduleContainer.appendChild(closeModalBtn);
alertContainer.appendChild(modalScheduleContainer);
})
if (data.course.season_discount) {
h5Tag.style.display = 'flex';
h5Tag.style.flexDirection = 'column';
h5Tag.style.justifyContent = 'center';
h5Tag.style.alignItems = 'flex-start';
h5Tag.appendChild(giftSpan);
let spanPriceCourse = document.createElement('span');
spanPriceCourse.innerHTML = data.course.season_discount.price_discounted;
spanPriceCourse.style.fontWeight = 'bold';
spanPriceCourse.style.color = '#000F9F';
spanPriceCourse.style.fontSize = '1.5rem';
let spanFullPriceTag = document.createElement('span');
spanFullPriceTag.style.fontSize = '1.1rem';
spanFullPriceTag.style.textDecoration = 'line-through';
spanFullPriceTag.style.color = '#E93324';
spanFullPriceTag.innerHTML = data.course.season_discount.full_price;
/*anchorPriceBtn.appendChild(iconTag);
anchorPriceBtn.appendChild(spanPriceCourse);*/
h5Tag.appendChild(spanPriceCourse);
h5Tag.appendChild(spanFullPriceTag);
// h5Tag.appendChild(taxSmall);
let discountTextTag = document.createElement('span');
discountTextTag.style.fontSize = '1.1rem';
discountTextTag.style.color = '#00B2E3';
discountTextTag.innerHTML = `${data.course.season_discount.discount_rate}% de descuento`;
h5Tag.appendChild(discountTextTag);
/*let remainTag = document.createElement('span');
remainTag.style.display = 'flex';
remainTag.style.alignItems = 'center';
remainTag.style.fontSize = '14px';
remainTag.style.color = 'red';
remainTag.innerHTML = ` ¡Esta oferta termina en ${data.course.season_discount.remain_time}!`;
h5Tag.appendChild(remainTag);*/
/*let leftCouponsTag = document.createElement('span');
leftCouponsTag.style.display = 'flex';
leftCouponsTag.style.alignItems = 'center';
leftCouponsTag.style.fontSize = '14px';
leftCouponsTag.style.color = 'orange';
leftCouponsTag.style.marginTop = '5px';
leftCouponsTag.innerHTML = ` ¡Quedan ${data.course.season_discount.remaining_coupons} descuentos!`;
h5Tag.appendChild(leftCouponsTag);*/
let addCourseCartBtn = document.createElement('button');
addCourseCartBtn.type = 'button';
} else {
let spanPriceCourse = document.createElement('span');
spanPriceCourse.innerHTML = data.course.course_price;
spanPriceCourse.style.fontWeight = 'bold';
spanPriceCourse.style.color = '#000F9F';
spanPriceCourse.style.fontSize = '1.5rem';
h5Tag.appendChild(spanPriceCourse);
// h5Tag.appendChild(taxSmall);
}
h5Tag.appendChild(anchorPriceBtn);
} else {
let spanPriceCourse = document.createElement('span');
spanPriceCourse.innerHTML = data.course.course_price;
spanPriceCourse.style.fontWeight = 'bold';
spanPriceCourse.style.color = '#000F9F';
spanPriceCourse.style.fontSize = '1.5rem';
h5Tag.appendChild(spanPriceCourse);
// h5Tag.appendChild(taxSmall);
}
this.coursePriceContainer.appendChild(h5Tag);
// this.coursePriceContainer.style.display = 'flex';
this.courseLoaderContainer.style.display = 'none';
})
.catch(function (error) {
})
}
}
get code() {
return this.getAttribute('code');
}
set code(newValue) {
this.setAttribute('code', newValue);
}
get schedules() {
return JSON.parse(this.getAttribute('schedules'));
}
set schedules(newValue) {
this.setAttribute('schedules', JSON.stringify(newValue));
}
get majorPlanSlug() {
return this.getAttribute('major-plan-slug');
}
}
const careerComponentTemplate = document.createElement('template');
careerComponentTemplate.innerHTML = `
`;
class Career extends HTMLElement {
constructor() {
super();
this.attachShadow({mode: 'open'});
this.shadowRoot.appendChild(careerComponentTemplate.content.cloneNode(true));
this.careerCode = this.shadowRoot.querySelector('[career-code]');
this.careerDetails = this.shadowRoot.querySelector('[career-details]');
this.basket = this.shadowRoot.querySelector('[source]');
this.careerLoaderContainer = this.shadowRoot.querySelector('[career-loader-container]');this.careerContainer = this.shadowRoot.querySelector('[career-container]');
}
connectedCallback() {
}
static get observedAttributes() {
return ['code']
}
attributeChangedCallback(name, oldValue, newValue) {
if (name == 'code') {
let cartComponent = document.getElementsByTagName('shopping-cart')[0];
const careerDetailUrl = `${API_BASE_URL}/grade/career/?career_id=${this.code}&source=${cartComponent.basketId}`;
this.careerCode.value = this.code;
fetch(careerDetailUrl)
.then((response) => response.json())
.then((data) => {
console.log(data);
const priceTag = document.createElement('h5');
priceTag.classList.add('price-tag');
priceTag.innerHTML = data.format_price;
this.careerDetails.appendChild(priceTag);
if (data.is_active) {
const buyBtn = document.createElement('a');
buyBtn.classList.add('buy-btn');
buyBtn.text = 'Aquí';
buyBtn.href = `${WEB_BASE_URL}/grade/career/purchase/${data.slug}/`;
this.careerDetails.appendChild(buyBtn);
}
})
.catch(function (error) {
})
.finally(() => {
this.careerLoaderContainer.style.display = 'none';
})
}
}
get code() {
return this.getAttribute('code');
}
set code(newValue) {
this.setAttribute('code', newValue);
}
}
window.customElements.define('shopping-cart', ShoppingCart);
window.customElements.define('course-detail', CourseDetail);
window.customElements.define('career-detail', Career);
})();