@teddy-dev/frontend 1.0.1

package/bantoa/bantoa-stylemix.js

@@ -0,0 +1,43 @@
+await loadComponent('./res/mc-events.js', false); 
+await loadComponent('./components/mc-element.js', false);
+await loadComponent('./bantoa/bantoa.js', false);
+
+class BantoaStylemix extends McElement {
+  connectedCallback() {
+    if(!this.dataset.position || !this.dataset.items){
+      console.error("BantoaStylemix: No position or items found in the element.");
+      return;
+    }
+    this.render();
+  }
+
+  render = () => {
+    if(!this.dataset.position || !this.dataset.items){
+      console.error("BantoaStylemix: No position or items found in the element.");
+      return;
+    }
+    if(!window.isBantoaLoaded) {
+      console.warn("BantoaSearch: Bantoa tracker is not loaded.");
+      window.addEventListener(MCEVENTS.BANTOA_LOADED, () => this.render());
+      return;
+    }
+    const settings = {
+      position: this.dataset.position,
+      items: this.dataset.items.split(','),
+      selector: this.getSelector(),
+      max_outfit: parseInt(this.dataset.maxOutfit) || 6,
+      min_outfit: parseInt(this.dataset.minOutfit) || 1,
+      layout: this.dataset.layout || 'moodboard',
+      filterOnlyCurrentSeason: this.dataset.filterOnlyCurrentSeason === 'true',
+      orderByCurrentSeason: this.dataset.orderByCurrentSeason === 'true',
+      type: this.dataset.type == 'both' ? ['ai', 'human'] : (this.dataset.type != undefined ? [this.dataset.type] : ['ai', 'human'])
+    };
+    console.log("BantoaStylemix: Rendering outfit with settings", settings);
+    bnt_r_ai('render', 'outfit', settings);
+  }
+}
+
+if (!customElements.get('bantoa-stylemix')) {
+  customElements.define('bantoa-stylemix', BantoaStylemix);
+}
+window.BantoaStylemix = BantoaStylemix;

package/bantoa/bantoa.js

@@ -0,0 +1,21 @@
+await loadComponent('./res/mc-events.js', false); 
+
+class Bantoa {
+
+  init = (apikey) => {
+    window.bantoaKey = apikey;
+    const self = this;
+    !function(t,n,e,a,c,o,r,s){t.BantoaTrackerObject=c,t[c]=t[c]||function(){(t[c].q=t[c].q||[]).push(arguments)},
+    t[o]=t[o]||function(){(t[o].q=t[o].q||[]).push(arguments)},
+    r=n.createElement(e),s=n.getElementsByTagName(e)[0],r.async=1, r.onload=self.started, r.src=a,s.parentNode.insertBefore(r,s)}
+    (window,document,"script","https://www.bantoa.com/bantoa.tk.min.js?apikey="+apikey,"bnt_t","bnt_r_ai");
+  }
+
+  started = () => {
+    window.isBantoaLoaded = true;
+    McShopify.customEvent(MCEVENTS.BANTOA_LOADED);
+    console.log("Bantoa tracker initialized");
+  }
+}
+window.isBantoaLoaded = false;
+window.Bantoa = Bantoa;

package/cart/teddy-cart-controller.js

@@ -0,0 +1,163 @@
+import '../res/mc-events.js';
+await loadComponent('./components/mc-element.js', false);
+await loadComponent('./auth/teddy-auth.js', false);
+await loadComponent('./res/mc-shopify.js', false);
+
+class TeddyCartController extends McElement {
+  cartData;
+  cartLines = [];
+
+  // chiamata di associazione del carrello
+  associateCart = (customerId) => {
+    if(!customerId) {
+      throw new Error("TeddyCartController: No customer ID provided");
+    }
+    this.cartData = null;
+    this.cartLines = [];
+
+    const options = {
+      data: {
+        device: 'web'
+      }
+    };
+    if(theme.apis.cart.dev) {
+      options.method = 'GET';
+      options.url = `${Shopify.routes.root}?section_id=test-cart-response`;
+    } else {
+      options.method = 'POST';
+      options.url = theme.apis.cart.associate.replace('{userId}', customerId);
+    }
+    console.log("TeddyCartController: Associating cart with options:", options);
+    return axios(options).then(r => {
+      this.cartData = this.getData(r);
+      if(!this.cartData) {
+        throw new Error("TeddyCartController: No cart data found after association");
+      }
+      return this.cartData;
+    });
+  }
+
+  applyPromo = (data) => {    
+    this.cartData = null;
+    this.cartLines = [];
+
+    const options = {
+      data: data
+    };
+    if(theme.apis.cart.dev) {
+      options.method = 'GET';
+      options.url = `${Shopify.routes.root}?section_id=test-cart-response`;
+    } else {
+      options.method = 'POST';
+      options.url = theme.apis.cart.apply;
+      options.headers = {
+        "Ocp-Apim-Subscription-Key": "0936a98c9baa4aa1a2787657e151b44a",
+        "Content-Type": "application/json"
+      }
+    }
+    
+    return axios(options).then(r => {
+      this.cartData = this.getData(r);
+      if(!this.cartData) {
+        throw new Error("TeddyCartController: No cart data found after applying promo");
+      }
+      window.blackbox = this.cartData;
+      return this.cartData;
+    });
+  }
+
+  setAttributes = (attributes) => {
+    McShopify.updateCart({
+      data: {
+        attributes: {
+          _discounts: JSON.stringify(attributes)
+        }
+      }
+    });
+  }
+
+  setAttributes =  (attributes) => {
+    if(!attributes) { console.error('TeddyCartController.updateCart: Devi passare almeno uno dei parametri form, formData o data'); return; }
+    if(typeof attributes !== 'object') { console.error('TeddyCartController.updateCart: Il parametro attributes deve essere un oggetto'); return; }
+
+    const config = {
+      url: `${Shopify.routes.root}cart/update.js`,
+      method: 'post',
+      data: {
+        attributes: {
+          _discounts: JSON.stringify(attributes)
+        }
+      }
+    };
+
+    return axios(config).then(r => {
+      if(r.data.items_changelog?.added?.length > 0){ //se ci sono elementi rimossi
+        McShopify.customEvent(MCEVENTS.CART_UPDATED, r.data);
+        McShopify.customEvent(MCEVENTS.CART_REMOVED, r.data);
+      }
+      if(r.data.items_changelog?.removed?.length > 0){ //se ci sono elementi aggiunti
+        McShopify.customEvent(MCEVENTS.CART_UPDATED, r.data);
+        McShopify.customEvent(MCEVENTS.CART_ADDED, r.data);
+      }
+      return r.data;
+    }).catch(e => {
+      McShopify.customEvent(MCEVENTS.CART_ERROR, e);
+    });
+  }
+
+  getAttributes = (data, sent) => {
+    console.log("TeddyCartController.getAttributes: Retrieving attributes", sent);
+    return  {
+      session_id: TeddyAuth.getSessionId(),
+      actuals: {
+        coupon_code: sent.cart.promoCode,
+        gift_card_code: "",
+        gift_card_usage: 0,
+        fidelity_points: 0
+      },
+      shipping: {
+        isFreeShipping: data.cart.totals.freeShipping,
+        labels: []
+      },
+      cart_lines: data.cart.items.map(item => {
+        const skuItem = sent.cart.items.find(i => i.barcode === item.barcode);
+        return {
+          sku: skuItem.skuCode || "",
+          discount_price: [
+            {
+              qty: skuItem.quantity || 1,
+              unit_price: item.originalPrice,
+              discount_price: item.discount,
+              labels: item.appliedPromotions.map((d) => d.name) || [],
+            }
+          ]
+        };
+      })
+    };
+  }
+
+  // ottiene i dati del carrello dalla risposta dell'associazione e dell'applicazione della promo
+  getData = (response) => {
+    let data = response.data?.data || response.data;
+    if(theme.apis.cart.dev) {
+      const doc = McUtils.getDocument(data);
+      data = JSON.parse(doc.querySelector('div').textContent);
+    }
+    if(!response.data.success){
+      throw new Error("CartController: Error in cart data response", {
+        cause: data
+      });
+    }
+    if(!data || !data.cart?.items) {
+      throw new Error("CartController: No items found in cart data", {
+        cause: data
+      });
+    } 
+    return data;
+  }
+  
+}
+if (!customElements.get('teddy-cart-controller')) {
+    customElements.define('teddy-cart-controller', TeddyCartController);
+}
+window.TeddyCartController = TeddyCartController;

package/cart/teddy-cart-customer.js

@@ -0,0 +1,86 @@
+import '../res/mc-events.js';
+await loadComponent('./res/mc-shopify.js', false);
+await loadComponent('./cart/teddy-cart-controller.js', false);
+
+class TeddyCartCustomer extends McElement {
+  static RETRY_LIMIT = 3;
+  retryCount = 0;
+
+  connectedCallback() {
+    this.init();
+  }
+
+  init = () => {
+    this.controller = document.createElement('teddy-cart-controller');
+    customElements.whenDefined('teddy-cart-controller').then(() => {
+      this.setLogged();
+    });
+  }
+
+  startAssociation = () => {
+    this.restrict();
+    this.controller.associateCart(this.dataset.logged)
+    .then(r => {
+      console.log("TeddyCartCustomer: Cart associated successfully", r);
+      return this.controller.findLines();
+    })
+    .then(r => {
+      console.log("TeddyCartCustomer: Lines found successfully", r);
+      return this.controller.clearCart();
+    })
+    .then(r => {
+      console.log("TeddyCartCustomer: Cart cleared successfully", r);
+      return this.controller.addAndUpdateCart();
+    })
+    .catch(e => {
+      if(this.retryCount > TeddyCartCustomer.RETRY_LIMIT) {
+        console.error("TeddyCartCustomer: Error associating cart after retries", e);
+        this.retryCount = 0;
+        return;
+      }
+      console.warn("TeddyCartCustomer: Retrying cart association", e);
+      this.retryCount++;
+      this.startAssociation();
+    })
+    .finally(() => {
+      this.release();
+    });
+  }
+
+  restrict = () => {
+    window.onbeforeunload = function (e) {
+      var message = theme.t.errors.logging_in,
+      e = e || window.event;
+      if (e) {
+        e.returnValue = message;
+      }
+      return message;
+    };
+  }
+
+  release = () => {
+    window.onbeforeunload = null;
+  }
+
+  // imposta il cliente loggato nel localStorage e lancia l'evento di login/logout
+  setLogged = () => {
+    if(this.dataset.logged) {
+      if(!localStorage.getItem('customer')) {
+        console.log('Customer logged in:', this.dataset.logged);
+        this.startAssociation();
+        McShopify.customEvent(MCEVENTS.LOGIN, {customer: this.dataset.logged});
+      }
+      localStorage.setItem('customer', this.dataset.logged);
+    } else {
+      if(localStorage.getItem('customer')) {
+        McShopify.customEvent(MCEVENTS.LOGOUT, {customer: localStorage.getItem('customer')});
+      }
+      localStorage.removeItem('customer');
+    }
+  }
+}
+
+if (!customElements.get('teddy-cart-customer')) {
+    customElements.define('teddy-cart-customer', TeddyCartCustomer);
+}
+window.TeddyCartCustomer = TeddyCartCustomer;

package/cart/teddy-cart-discounts.js

@@ -0,0 +1,55 @@
+await loadComponent('./components/mc-element.js', false);
+await loadComponent('./res/mc-events.js', false);
+await loadComponent('./res/mc-utils.js', false);
+
+class TeddyCartDiscounts extends McElement {
+  #wrapperTemplate;
+  #discountTemplate;
+
+  connectedCallback() {
+    this.#wrapperTemplate = this.querySelector('template[name="wrapper"]').innerHTML;
+    this.#discountTemplate = this.querySelector('template[name="discount"]').innerHTML;
+    this.innerHTML = '';
+
+    this.render();
+    window.addEventListener(MCEVENTS.PROMO_APPLIED, this.render.bind(this));
+  }
+
+  render = () => {
+    if(!window.blackbox){
+      console.warn('TeddyCartDiscounts: blackbox object not found');
+      this.innerHTML = '';
+      return;
+    }
+    console.log('TeddyCartDiscounts: rendering discounts', window.blackbox);
+    if(!blackbox.appliedPromotions || blackbox.appliedPromotions.length === 0){
+      this.innerHTML = '';
+      return;
+    }
+
+    this.innerHTML = this.#wrapperTemplate;
+    const listContainer = this.querySelector('[data-list]');
+    if(!listContainer){
+      console.warn('TeddyCartDiscounts: list container not found');
+      this.innerHTML = '';
+      return;
+    }
+
+    const promoList = [];
+    blackbox.appliedPromotions.forEach(promo => {
+      const discountHTML = this.#discountTemplate
+        .replace('{title}', promo.name)
+        .replace('{amount}', McUtils.money(promo.discount*100))
+        .replace('{automatic}', promo.automatic ? 'true' : 'false');
+      promoList.push(discountHTML);
+    });
+
+    listContainer.innerHTML = promoList.join('');
+  }
+  
+}
+
+if (!customElements.get('teddy-cart-discounts')) {
+  customElements.define('teddy-cart-discounts', TeddyCartDiscounts);
+}
+window.TeddyCartDiscounts = TeddyCartDiscounts;

package/cart/teddy-cart-promo-apply.js

@@ -0,0 +1,24 @@
+import '../res/mc-events.js';
+await loadComponent('./res/mc-shopify.js', false);
+await loadComponent('./auth/teddy-auth.js', false);
+await loadComponent('./cart/teddy-cart-controller.js', false);
+await loadComponent('./cart/teddy-cart-promo.js', false);
+
+class TeddyCartPromoApply extends TeddyCartPromo {
+
+  connectedCallback() {
+    this.controller = document.createElement('teddy-cart-controller');
+    customElements.whenDefined('teddy-cart-controller').then(() => {
+      this.addEventListener('click', (e) => {
+        e.preventDefault();
+        this.startPromo();
+      });
+    });
+  }
+
+}
+
+if (!customElements.get('teddy-cart-promo-apply')) {
+    customElements.define('teddy-cart-promo-apply', TeddyCartPromoApply);
+}
+window.TeddyCartPromoApply = TeddyCartPromoApply;

package/cart/teddy-cart-promo-error.js

@@ -0,0 +1,38 @@
+import '../res/mc-events.js';
+await loadComponent('./components/mc-element.js', false);
+
+class TeddyCartPromoError extends McElement {
+
+  connectedCallback() {
+    window.addEventListener(MCEVENTS.PROMO_ERROR, (e) => {
+      this.onError(e);
+    });
+    window.addEventListener(MCEVENTS.PROMO_APPLY, () => {
+      this.deactivate();
+    });
+  }
+
+  onError = (e) => {
+    if(!e?.detail){
+      console.warn('TeddyCartPromoError: No error details provided');
+      this.deactivate();
+      return;
+    }
+    if(!theme?.t?.errors?.bb) {
+      console.error('TeddyAuth: Missing theme.t.errors.bb translation');
+      this.activate();
+      return;
+    }
+
+    const error = e.detail;
+    console.log('TeddyCartPromoError: Promo error received', error);
+    this.innerText = theme.t.errors.bb[error.error?.message] || theme.t.errors.bb[error.status] || theme.t.errors.bb.default || theme.t.errors.generic || 'An error occurred';
+    this.activate();
+  }
+}
+
+if (!customElements.get('teddy-cart-promo-error')) {
+  customElements.define('teddy-cart-promo-error', TeddyCartPromoError);
+}
+
+window.TeddyCartPromoError = TeddyCartPromoError;

package/cart/teddy-cart-promo-loading.js

@@ -0,0 +1,20 @@
+import '../res/mc-events.js';
+await loadComponent('./components/mc-loader.js', false);
+
+class TeddyCartPromoLoading extends McLoader {
+
+  connectedCallback() {
+    window.addEventListener(MCEVENTS.PROMO_APPLY, () => {
+      this.activate();
+    });
+    window.addEventListener(MCEVENTS.PROMO_COMPLETED, () => {
+      this.deactivate();
+    });
+  }
+}
+
+if (!customElements.get('teddy-cart-promo-loading')) {
+  customElements.define('teddy-cart-promo-loading', TeddyCartPromoLoading);
+}
+
+window.TeddyCartPromoLoading = TeddyCartPromoLoading;

package/cart/teddy-cart-promo.js

@@ -0,0 +1,96 @@
+import '../res/mc-events.js';
+await loadComponent('./res/mc-shopify.js', false);
+await loadComponent('./auth/teddy-auth.js', false);
+await loadComponent('./cart/teddy-cart-controller.js', false);
+
+class TeddyCartPromo extends McElement {
+  static RETRY_LIMIT = 3;
+  retryCount = 0;
+  controller;
+
+  connectedCallback() {
+    this.controller = document.createElement('teddy-cart-controller');
+    customElements.whenDefined('teddy-cart-controller').then(() => {
+      this.startPromo();
+      
+      window.addEventListener(MCEVENTS.CART_UPDATED, () => {
+        this.startPromo();
+      });
+    });
+  }
+
+  startPromo = () => {
+    McShopify.customEvent(MCEVENTS.PROMO_APPLY);
+    const data = this.getData();
+    this.controller.applyPromo(data)
+    .then(r => {
+      return this.controller.getAttributes(r, data);
+    })
+    .then(r => {
+      return this.controller.setAttributes(r);
+    })
+    .then(r => {
+      console.log('TeddyCartPromo: Promo applied successfully', r);
+      McShopify.customEvent(MCEVENTS.PROMO_APPLIED, r);
+    })
+    .catch(e => {
+      if(!e.cause?.error){
+        this.retry(e); return;
+      }
+      
+      McShopify.customEvent(MCEVENTS.PROMO_ERROR, e.cause);
+    })
+    .finally(() => {
+      McShopify.customEvent(MCEVENTS.PROMO_COMPLETED);
+    });
+  }
+
+  retry = (e) => {
+    if(this.retryCount > TeddyCartPromo.RETRY_LIMIT) {
+      console.error("TeddyCartPromo: Error associating cart after retries", e);
+      this.retryCount = 0;
+      McShopify.customEvent(MCEVENTS.PROMO_ERROR, e);
+      return;
+    }
+    console.warn("TeddyCartPromo: Retrying cart association", e);
+    this.retryCount++;
+    this.startPromo();
+  }
+
+  getData = () => {
+    const form = this.querySelector('form') || document.getElementById(this.getAttribute('form')) || this.closest('teddy-cart-promo').querySelector('form');
+    if(!form) {
+      console.error("TeddyCartPromo: Form not found");
+      return;
+    }
+    const formdata = new FormData(form);
+    const data = McForm.formDataToObject(formdata);
+
+    this.data = {
+      callingSystem: 6,
+      sessionId: TeddyAuth.getSessionId(),
+      cart: {
+        items: []
+      }
+    };
+
+    if(!data.brand) { console.error("TeddyCartPromo: Brand not found"); return; }
+    if(!data.market) { console.error("TeddyCartPromo: Market not found"); return; }
+    if(!data.items || data.items.length === 0) { console.error("TeddyCartPromo: Items not found"); return; }
+
+    this.data.brand = data.brand;
+    this.data.market = data.market;
+    this.data.cart.items = data.items.map(item => {
+      return {...item, price: Number(item.price), quantity: Number(item.quantity)};
+    });
+    this.data.cart.loyaltyCardBarcode = data.loyaltyCardBarcode;
+    this.data.cart.promoCode = data.promoCode;
+    return this.data;
+  }
+
+}
+
+if (!customElements.get('teddy-cart-promo')) {
+    customElements.define('teddy-cart-promo', TeddyCartPromo);
+}
+window.TeddyCartPromo = TeddyCartPromo;

package/components/mc-btn.js

@@ -0,0 +1,38 @@
+import '../res/mc-events.js';
+await loadComponent('./components/mc-element.js', false);
+
+class McBtn extends McElement {
+
+  // oggetto di azioni possibili per il pulsante
+  actions = {
+    activate: () => this.target.activate(),
+    deactivate: () => this.target.deactivate(),
+    toggle: () => this.target.toggle()
+  }
+  
+  connectedCallback() {
+    this.init();
+  }
+
+  init = () => {
+    this.target = this.target || document.querySelector(this.dataset.target);
+    if(!this.target) { console.error(`McBtn: Target element not found for selector ${this.dataset.target}`); return; }
+
+    // posso configurare il trigger e l'azione da eseguire
+    const trigger = this.dataset.trigger || 'click';
+    const action = this.dataset.action || 'toggle';
+
+    // attivo l'azione associata al trigger
+    this.addEventListener(trigger, this.actions[action]);
+
+    // se il target è un elemento custom, registro gli eventi di attivazione e disattivazione per attivare il pulsante
+    this.target.addEventListener(MCEVENTS.EL_ACTIVATED, this.activate.bind(this));
+    this.target.addEventListener(MCEVENTS.EL_DEACTIVATED, this.deactivate.bind(this));
+  }
+
+}
+
+if (!window.customElements.get('mc-btn')) {
+  window.customElements.define('mc-btn', McBtn);
+}
+window.McBtn = McBtn;

package/components/mc-card-render.js

@@ -0,0 +1,33 @@
+await loadComponent('./res/mc-shopify.js', false);
+
+class McCardRender extends HTMLElement {
+
+  connectedCallback() {
+    if(!this.dataset.handle) {
+      console.error('McCardRender: Missing product handle in dataset.');
+      return;
+    }
+    this.render();
+  }
+  
+  render = () => {
+    const section = this.dataset.section || 'helper-product-card';
+
+    McShopify.section({
+      path: `${Shopify.routes.root}products/${this.dataset.handle}`,
+      section_id: section,
+      onSuccess: (html) => {
+        this.innerHTML = html;
+      },
+      onError: (e) => {
+        console.error('McCardRender: Error fetching product card:', e);
+      }
+    });
+  }
+
+}
+if(!customElements.get('mc-card-render')){
+  customElements.define('mc-card-render', McCardRender);
+}
+window.McCardRender = McCardRender;
+export default McCardRender;

package/components/mc-cart-counter.js

@@ -0,0 +1,14 @@
+import '../res/mc-events.js';
+await loadComponent('./components/mc-element.js', false);
+
+class McCartCounter extends McElement {
+  connectedCallback() {
+    window.addEventListener(MCEVENTS.CART_UPDATED, this.reload.bind(this));
+  }
+}
+
+if(!customElements.get('mc-cart-counter')){
+  customElements.define('mc-cart-counter', McCartCounter);
+}
+window.McCartCounter = McCartCounter;
+export default McCartCounter;

package/components/mc-cart-error.js

@@ -0,0 +1,35 @@
+import '../res/mc-events.js';
+await loadComponent('./components/mc-element.js', false);
+await loadComponent('./res/mc-shopify.js', false);  
+
+class McCartError extends McElement {
+
+  connectedCallback() {
+    setTimeout(() => {
+      window.addEventListener(MCEVENTS.CART_ERROR, this.onCartError.bind(this));
+    });
+  }
+
+  onCartError = (e) => {
+    const message = e.detail.response?.data?.message || e.detail.message;
+
+    const container = this.querySelector('[data-message]');
+    if(container) {
+      container.innerText = message;
+    }
+
+    const modal = bootstrap.Modal.getOrCreateInstance(this);
+    if(!modal) {
+      console.warn('McCartError: modal not found');
+      return;
+    }
+
+    modal.show();
+  }
+}
+
+if (!customElements.get('mc-cart-error')) {
+  customElements.define('mc-cart-error', McCartError);
+}
+
+window.McCartError = McCartError;