@teddy-dev/frontend 1.0.1

package/algolia/algolia-loader.js

@@ -0,0 +1,56 @@
+await loadComponent('./components/mc-element.js', false);
+await loadComponent('./res/mc-shopify.js', false);
+
+class AlgoliaLoader extends McElement {
+  template;
+  
+  connectedCallback() {
+    this.template = this.innerHTML;  
+    if(window.lastAlgoliaResponse) this.onLoad({detail: window.lastAlgoliaResponse});
+    window.addEventListener('algolia-search-complete', this.onLoad.bind(this));
+    this.addEventListener('click', this.onClick.bind(this));
+
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach(entry => {
+        if(entry.isIntersecting) {
+          this.onClick();
+        }
+      });
+    }, { rootMargin: '300px' });
+
+    observer.observe(this);
+  }
+
+  onClick = (e) => {
+    e?.preventDefault();
+    window.dispatchEvent(new CustomEvent('algolia-load-more'));
+  }
+
+  onLoad = (e) => {
+    const data = e.detail;
+    console.log('algolia-search-complete', data);
+
+    if(!data) {
+      console.log('AlgoliaLoader onLoad: no data'); return;
+    }
+    if(data.page == undefined) {
+      console.log('AlgoliaLoader onLoad: no page'); return;
+    }
+    if(data.page+1 >= data.nbPages) {
+      console.log('AlgoliaLoader onLoad: no more pages');
+      this.deactivate(); return;
+    }
+
+    console.log('AlgoliaLoader onLoad: updating', data);
+    const shown = data.hitsPerPage * (data.page + 1);
+    const total = data.nbHits;
+
+    this.innerHTML = this.template.replace('${shown}', shown).replace('${total}', total);
+    this.activate();    
+  }
+}
+
+if (!customElements.get('algolia-loader')) {
+  customElements.define('algolia-loader', AlgoliaLoader);
+}
+window.AlgoliaLoader = AlgoliaLoader;

package/algolia/algolia-search.js

@@ -0,0 +1,222 @@
+const {createApp} = await import('../res/mc-vue.js');
+await loadComponent('./components/mc-element.js', false);
+
+class AlgoliaSearch extends McElement {
+  connectedCallback() {
+    console.log('AlgoliaSearch init');
+    this.init();
+  }
+
+  init = () => {
+    const cmp = this;
+
+    if(!cmp.dataset.apiKey || !cmp.dataset.appId) {
+      console.error('AlgoliaSearch: apiKey or appId not defined');
+      return;
+    }
+    if(!cmp.dataset.productsIndex && !cmp.dataset.suggestionsIndex && !cmp.dataset.collectionsIndex) {
+      console.error('AlgoliaSearch: at least one of productsIndex, suggestionsIndex or collectionsIndex must be defined');
+      return;
+    }
+
+    const app = createApp({
+      delimiters: ['${', '}'], // setta i delimitatori di vue, altrimenti se usiamo gli standard va in conflitto con liquid
+      data: () => {
+        return {
+          loading: false,
+          query: '',
+          products: [],
+          suggestions: [],
+          collections: [],
+          queryProductIndex: -1,
+          querySuggestionIndex: -1,
+          queryCollectionIndex: -1
+        }
+      },
+      methods: {
+
+        search() {
+          if (this.query.length < 3) {
+            this.loading = false;
+            this.products = [];
+            this.suggestions = [];
+            this.collections = [];
+            return;
+          }
+
+          this.loading = true;
+          axios({
+            method: 'post',
+            url: `https://${cmp.dataset.appId}.algolia.net/1/indexes/*/queries`,
+            headers: {
+              "content-type": "application/json",
+              "x-algolia-api-key": cmp.dataset.apiKey,
+              "x-algolia-application-id": cmp.dataset.appId
+            },
+            data: this.getRequest()
+          }).then((response) => {
+            this.onSuccess(response);
+          }).catch((error) => {
+            this.onError(error);
+          }).finally(() => {
+            this.loading = false;
+          });
+        },
+
+        getRequest() {
+          const requests = [];
+          if(cmp.dataset.productsIndex === undefined || cmp.dataset.productsIndex.length == 0){
+            this.queryProductIndex = -1;
+            console.warn('AlgoliaSearch: productsIndex not defined, products search disabled');
+          }
+          if(cmp.dataset.suggestionsIndex === undefined || cmp.dataset.suggestionsIndex.length == 0){
+            this.querySuggestionIndex = -1;
+            console.warn('AlgoliaSearch: suggestionsIndex not defined, suggestions search disabled');
+          }
+          if(cmp.dataset.collectionsIndex === undefined || cmp.dataset.collectionsIndex.length == 0){
+            this.queryCollectionIndex = -1;
+            console.warn('AlgoliaSearch: collectionsIndex not defined, collections search disabled');
+          }
+
+          if(cmp.dataset.suggestionsIndex !== undefined) {
+            requests.push({
+              indexName: cmp.dataset.suggestionsIndex,
+              query: this.query,
+              distinct: true,
+              attributesToHighlight: [],
+              attributesToSnippet: [],
+              hitsPerPage: parseInt(cmp.dataset.suggestionsMax) || 4,
+              page: 0,
+              attributesToRetrieve: ["query"],
+              facets: ["*"]
+            });
+            this.querySuggestionIndex = requests.length - 1;
+          }
+          if(cmp.dataset.productsIndex !== undefined) {
+            requests.push({
+              indexName: cmp.dataset.productsIndex,
+              query: this.query,
+              attributesToRetrieve: ["handle"],
+              distinct: true,
+              attributesToHighlight: [],
+              attributesToSnippet: [],
+              hitsPerPage: parseInt(cmp.dataset.productsMax) || 4,
+              page: 0,
+              facets: ["*"]
+            });
+            this.queryProductIndex = requests.length - 1;
+          }
+          if(cmp.dataset.collectionsIndex !== undefined) {
+            requests.push({
+              indexName: cmp.dataset.collectionsIndex,
+              attributesToRetrieve: ["url", "path"],
+              query: this.query,
+              distinct: true,
+              attributesToHighlight: [],
+              attributesToSnippet: [],
+              hitsPerPage: parseInt(cmp.dataset.collectionsMax) || 4,
+              page: 0,
+              facets: ["*"]
+            });
+            this.queryCollectionIndex = requests.length - 1;
+          }
+          return {requests};
+        },
+
+        onSuccess(response) {
+          if(!response.data.results) {
+            this.onError('No results');
+            return;
+          }
+          
+          this.mapProducts(response);
+          this.mapSuggestions(response);
+          this.mapCollections(response);
+        },
+
+        mapProducts(response) {
+          if(this.queryProductIndex < 0) {
+            this.products = [];
+            return;
+          }
+          const hits = response.data.results[this.queryProductIndex]?.hits;
+          if(!hits) {
+            this.products = [];
+            return;
+          }
+          this.products = hits.filter(hit => hit.handle != undefined && hit.handle != null);
+        },
+
+        mapSuggestions(response) {
+          if(this.querySuggestionIndex < 0) {
+            this.suggestions = [];
+            return;
+          }
+          const hits = response.data.results[this.querySuggestionIndex]?.hits;
+          if(!hits) {
+            this.suggestions = [];
+            return;
+          }
+
+          this.suggestions = hits.map(hit => {
+            if(!hit.query) {
+              return null;
+            }
+            return {
+              query: hit.query,
+              title: hit.query.replace(new RegExp(this.query, 'gi'), match => `<strong>${match}</strong>`)
+            };
+          }).filter(s => s != null);
+        },
+
+        mapCollections(response) {
+          if(this.queryCollectionIndex < 0) {
+            this.collections = [];
+            return;
+          }
+          const hits = response.data.results[this.queryCollectionIndex]?.hits;
+          if(!hits) {
+            this.collections = [];
+            return;
+          }
+          this.collections = hits.map(hit => {
+            if(!hit.url || !hit.path) {
+              console.warn('AlgoliaSearch: collection hit without url or path', hit);
+              return null;
+            }
+            return {
+              url: hit.url,
+              path: hit.path,
+              title: hit.path.replace(new RegExp(this.query, 'gi'), match => `<strong>${match}</strong>`)
+            };
+          }).filter(c => c != null);
+        },
+
+        onError(error) {
+          this.products = [];
+          this.suggestions = [];
+          this.collections = [];
+          console.error('AlgoliaSearch error', error);
+        },
+
+        suggest(suggestion) {
+          this.query = suggestion;
+          this.search();
+        }
+      },
+      computed: {
+        showResults() {
+          return this.products.length > 0 || this.suggestions.length > 0 || this.collections.length > 0;
+        }
+
+      }
+    });
+    app.config.compilerOptions.isCustomElement = tag => tag.includes('-'); // per evitare che vue vada in conflitto con i custom element
+    app.mount(this);
+  }
+}
+
+if (!customElements.get('algolia-search')) {
+  customElements.define('algolia-search', AlgoliaSearch);
+}
+window.AlgoliaSearch = AlgoliaSearch;

package/auth/teddy-auth-login.js

@@ -0,0 +1,29 @@
+await loadComponent('./auth/teddy-auth.js', false);
+
+class TeddyAuthLogin extends TeddyAuth {
+
+  // formatto i dati per il payload sovrascrivendo il metodo getData
+  getData = () => {
+    const formData = new FormData(this.form);
+
+    this.data = {};
+    
+    Array.from(formData.entries()).forEach(([key, value]) => {
+      this.data[key] = value;
+    });
+    this.data.sessionId = this.getSessionId();
+    this.data.mergeCart = true;
+    this.data.callingSystem = 6;
+    console.log('TeddyAuthLogin.getData', this.data);
+  }
+
+  success = (response) => {
+    this.multipassSuccess(response);
+  }
+  
+}
+
+if (!customElements.get('teddy-auth-login')) {
+  customElements.define('teddy-auth-login', TeddyAuthLogin);
+}
+window.TeddyAuthLogin = TeddyAuthLogin;

package/auth/teddy-auth-profile.js

@@ -0,0 +1,58 @@
+await loadComponent('./auth/teddy-auth.js', false);
+await loadComponent('./components/mc-form-success.js', false);
+
+class TeddyAuthProfile extends TeddyAuth {
+
+  // formatto i dati per il payload sovrascrivendo il metodo getData
+  getData = () => {
+    const formData = new FormData(this.form);
+
+    this.data = {};    
+    Array.from(formData.entries()).forEach(([key, value]) => {
+      if(key == 'birthday' && this.data?.dayOfBirth == undefined){
+        this.data.dayOfBirth = `${new Date(value).getDate()}`.padStart(2, '0');
+        this.data.monthOfBirth = `${(new Date(value).getMonth() + 1)}`.padStart(2, '0');
+        this.data.yearOfBirth = `${new Date(value).getFullYear()}`;
+      } 
+      else if(key.includes('.')) {
+        const [parent, child] = key.split('.');
+        this.data[parent] = this.data[parent] || {};
+        this.data[parent][child] = value == 'true';
+      } else {
+        if(value === 'true') value = true;
+        if(value === 'false') value = false;
+        this.data[key] = value;
+      }
+    });
+
+    this.data.preferences = this.data.preferences || {};
+    this.data.preferences.newsletter = this.data.preferences.newsletter || false;
+    this.data.preferences.sms = this.data.preferences.sms || false;
+    this.data.preferences.profiling = this.data.preferences.profiling || false;
+
+    this.data.callingSystem = 6;
+    this.data.sessionId = this.getSessionId();
+    console.log('TeddyAuthProfile.getData', this.data);
+  }
+
+  success = (response) => {
+    const data = response.data;
+    if(!data.success){
+      this.error(data);
+      return;
+    }
+    const success = this.querySelector('mc-form-success');
+    if(!success) return;
+    if(!theme.t.success.profile_updated) {
+      console.error('Profile updated message not found');
+      return;
+    }
+    success.showMessage(theme.t.success.profile_updated);
+  }
+  
+}
+
+if (!customElements.get('teddy-auth-profile')) {
+  customElements.define('teddy-auth-profile', TeddyAuthProfile);
+}
+window.TeddyAuthProfile = TeddyAuthProfile;

package/auth/teddy-auth-register.js

@@ -0,0 +1,52 @@
+await loadComponent('./auth/teddy-auth.js', false);
+
+class TeddyAuthRegister extends TeddyAuth {
+
+  // formatto i dati per il payload sovrascrivendo il metodo getData
+  getData = () => {
+    const formData = new FormData(this.form);
+
+    this.data = {};
+    
+    Array.from(formData.entries()).forEach(([key, value]) => {
+      if(key == 'birthday' && this.data?.dayOfBirth == undefined){
+        this.data.dayOfBirth = `${new Date(value).getDate()}`.padStart(2, '0');
+        this.data.monthOfBirth = `${(new Date(value).getMonth() + 1)}`.padStart(2, '0');
+        this.data.yearOfBirth = `${new Date(value).getFullYear()}`;
+      } 
+      else if (key == 'authSMSNotification' || key == 'authEmailNotification' || key == 'authDataProfiling') {
+        // Convert boolean values to string
+        this.data[key] = value == 1;
+      }
+      else {
+        this.data[key] = value;
+      }
+    });
+    if(this.data.authSMSNotification === undefined) {
+      this.data.authSMSNotification = false;
+    }
+    if(this.data.authEmailNotification === undefined) {
+      this.data.authEmailNotification = false;
+    }
+    if(this.data.authDataProfiling === undefined) {
+      this.data.authDataProfiling = false;
+    }
+    if(this.data.importantDate === undefined) {
+      this.data.importantDate = '';
+    }
+    this.data.requestLoyaltyCard = true;
+    this.data.sessionId = this.getSessionId();
+    this.data.callingSystem = 6;
+    console.log('TeddyAuthRegister.getData', this.data);
+  }
+
+  success = (response) => {
+    this.multipassSuccess(response);
+  }
+  
+}
+
+if (!customElements.get('teddy-auth-register')) {
+  customElements.define('teddy-auth-register', TeddyAuthRegister);
+}
+window.TeddyAuthRegister = TeddyAuthRegister;

package/auth/teddy-auth-reset.js

@@ -0,0 +1,39 @@
+await loadComponent('./auth/teddy-auth.js', false);
+await loadComponent('./components/mc-form-success.js', false);
+
+class TeddyAuthReset extends TeddyAuth {
+
+  // formatto i dati per il payload sovrascrivendo il metodo getData
+  getData = () => {
+    const formData = new FormData(this.form);
+
+    this.data = {};    
+    Array.from(formData.entries()).forEach(([key, value]) => {
+      this.data[key] = value;
+    });
+    this.data.callingSystem = "6";
+    this.data.sessionId = this.getSessionId();
+    console.log('TeddyAuthReset.getData', this.data);
+  }
+
+  success = (response) => {
+    const data = response.data;
+    if(!data.success){
+      this.error(data);
+      return;
+    }
+    const success = this.querySelector('mc-form-success');
+    if(!success) return;
+    if(!theme.t.success.password_changed) {
+      console.error('Password changed message not found');
+      return;
+    }
+    success.showMessage(theme.t.success.password_changed);
+  }
+  
+}
+
+if (!customElements.get('teddy-auth-reset')) {
+  customElements.define('teddy-auth-reset', TeddyAuthReset);
+}
+window.TeddyAuthReset = TeddyAuthReset;

package/auth/teddy-auth.js

@@ -0,0 +1,92 @@
+import '../res/mc-events.js';
+await loadComponent('./components/mc-loader.js', false);
+await loadComponent('./components/mc-form.js', false);
+await loadComponent('./res/mc-utils.js', false);
+await loadComponent('./res/mc-events.js', false);
+
+class TeddyAuth extends McForm {
+
+  connectedCallback() {
+    this.init();
+    this.addEventListener(MCEVENTS.FORM_SUBMIT, this.onSubmit.bind(this));
+    this.addEventListener(MCEVENTS.FORM_COMPLETED, this.onComplete.bind(this));
+  }
+
+  onSubmit = () => {
+    const loader = this.querySelector('mc-loader');
+    if(loader) {
+      loader.activate();
+    }
+  }
+
+  onComplete = () => {
+    const loader = this.querySelector('mc-loader');
+    if(loader) {
+      loader.deactivate();
+    }
+  }
+
+  // ottengo il sessionId dalla localStorage o lo genero se non esiste
+  getSessionId = () => {
+    return TeddyAuth.getSessionId();
+  }
+
+  // ottengo il sessionId dalla localStorage o lo genero se non esiste
+  static getSessionId = () => {
+    if(localStorage.getItem('sessionId') === null) {
+      localStorage.setItem('sessionId', TeddyAuth.generateSessionId());
+    }
+    return localStorage.getItem('sessionId');
+  }
+
+  // genero un ID di sessione unico e sicuro
+  static generateSessionId = (length = 24) => {
+    const charset = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+    let result = ''; 
+    const cryptoObj = window.crypto || window.msCrypto; // supporto IE11
+
+    if (cryptoObj && cryptoObj.getRandomValues) {
+      const randomValues = new Uint32Array(length);
+      cryptoObj.getRandomValues(randomValues);
+      for (let i = 0; i < length; i++) {
+        result += charset[randomValues[i] % charset.length];
+      }
+    } else {
+      // fallback meno sicuro
+      for (let i = 0; i < length; i++) {
+        result += charset[Math.floor(Math.random() * charset.length)];
+      }
+    }
+
+    return result;
+  }
+
+  error = (e) => {
+    McShopify.customEvent(MCEVENTS.FORM_ERROR, e, this);
+    let message = theme.t.errors.generic || 'An error occurred';
+    if(!theme?.t?.errors?.idm) {
+      console.error('TeddyAuth: Missing theme.t.errors.idm translation');
+      this.errors.showError(message);
+      return;
+    }
+    message = theme.t.errors.idm[e.error?.code] || theme.t.errors.idm[e.status] || theme.t.errors.idm.default || message;
+    console.error("TeddyAuth.error", message, e);
+    this.errors.showError(message);
+  }
+
+  multipassSuccess = (response) => {
+    const data = response.data;
+    console.log('TeddyAuth.multipassSuccess', data);
+    if(!data.success || data.error != undefined || !data.data?.multipassUrl) {
+      this.error(data);
+      return;
+    }
+    location.href = data.data.multipassUrl;
+  }
+  
+}
+
+if (!customElements.get('teddy-auth')) {
+  customElements.define('teddy-auth', TeddyAuth);
+}
+window.TeddyAuth = TeddyAuth;

package/bantoa/bantoa-product.js

@@ -0,0 +1,64 @@
+await loadComponent('./res/mc-events.js', false); 
+await loadComponent('./components/mc-element.js', false);
+
+class BantoaProduct extends McElement {
+  connectedCallback() {
+    console.log("BantoaProduct: Connected", this.id);
+    if(!this.dataset.sku) {
+      console.error("BantoaProduct: No SKU found in the element.");
+      return;
+    }
+    if(!this.dataset.position){
+      console.error("BantoaProduct: No position found in the element.");
+      return;
+    }
+    if(window.isBantoaLoaded)
+      this.init();
+    window.addEventListener(MCEVENTS.BANTOA_LOADED, this.init.bind(this));
+  }
+
+  checkExists = () => {
+    axios({
+      url: `https://api.bantoa.com/api/visual?apikey=${bantoaKey}&onlycheckexist=1&code=${this.dataset.sku}&tm=1751548151`,
+      method: 'get',
+    }).then(r => {
+      if(r.data.productexist == 'ok'){
+        this.classList.remove('d-none');
+      }
+    })
+    .catch(e => {
+      console.error("BantoaProduct: Error checking product existence", e);
+    });
+  }
+
+  init = () => {
+    this.addEventListener('click', this.openViewer.bind(this));
+    this.checkExists();
+  }
+
+  openViewer = () => {
+    if(!window.isBantoaLoaded) {
+      console.warn("BantoaProduct: Bantoa tracker is not loaded.");
+      return;
+    }
+    const data = {
+	    item: this.dataset.sku,
+	    quality: '0.75',
+	    max_results: 100,
+	    min_results: 1,
+	    position: this.dataset.position,
+    };
+    if(this.dataset.variant){
+      data.filter = {
+        sizes: this.dataset.variant
+      };
+    }
+    console.log("BantoaProduct: Opening viewer with data", data);
+    bnt_r_ai('visual', 'modal', data);
+  }
+}
+
+if (!customElements.get('bantoa-product')) {
+  customElements.define('bantoa-product', BantoaProduct);
+}
+window.BantoaProduct = BantoaProduct;

package/bantoa/bantoa-search.js

@@ -0,0 +1,46 @@
+await loadComponent('./res/mc-events.js', false); 
+await loadComponent('./components/mc-element.js', false);
+await loadComponent('./bantoa/bantoa.js', false);
+
+class BantoaSearch extends McElement {
+  connectedCallback() {
+    if(!this.dataset.position){
+      console.error("BantoaSearch: No position found in the element.");
+      return;
+    }
+    this.addEventListener('click', this.openViewer.bind(this));
+    const url = new URL(window.location.href);
+    if(url.searchParams.has("bantoa")){
+      this.openViewer(this);
+    }
+  }
+
+  addParameterToUrl(){
+    const url = new URL(window.location.href);
+    url.searchParams.append("bantoa", "bantoa");
+    window.history.pushState({}, '', url)
+  }
+
+  openViewer = () => {
+    if(!window.isBantoaLoaded) {
+      console.warn("BantoaSearch: Bantoa tracker is not loaded.");
+      window.addEventListener(MCEVENTS.BANTOA_LOADED, () => this.openViewer());
+      return;
+    }
+    bnt_r_ai('visual', 'modal', {
+	    quality: '0.75',
+	    max_results: 100,
+	    min_results: 1,
+	    position: this.dataset.position,
+	  });
+    const url = new URL(window.location.href);
+    if(!url.searchParams.has("bantoa")){
+      this.addParameterToUrl();
+    }
+  }
+}
+
+if (!customElements.get('bantoa-search')) {
+  customElements.define('bantoa-search', BantoaSearch);
+}
+window.BantoaSearch = BantoaSearch;