@teddy-dev/frontend 1.0.1

package/loyalty/teddy-loyalty-create.js

@@ -0,0 +1,40 @@
+await loadComponent('./components/mc-element.js', false);
+await loadComponent('./auth/teddy-auth.js', false);
+
+class TeddyLoyaltyCreate extends McElement {
+
+  connectedCallback() {
+    this.addEventListener('click', this.createCard.bind(this));
+  }
+
+  createCard = () => {
+    const script = this.querySelector('script');
+    if(!script) {
+      console.error('No script tag found inside teddy-loyalty-create component');
+      return;
+    }
+
+    const json = JSON.parse(script.innerText);
+    json.sessionId = TeddyAuth.getSessionId();
+    axios({
+      method: 'POST',
+      url: theme.apis.loyalty.create,
+      data: json,
+      headers: {
+        "Ocp-Apim-Subscription-Key":"0936a98c9baa4aa1a2787657e151b44a"
+      }
+    })
+    .then(response => {
+      location.reload();
+    })
+    .catch(e => {
+      console.error('Error creating loyalty card: ', e);
+      alert(theme.t.errors.generic);
+    });
+  }
+  
+}
+if (!window.customElements.get('teddy-loyalty-create')) {
+  window.customElements.define('teddy-loyalty-create', TeddyLoyaltyCreate);
+}
+window.TeddyLoyaltyCreate = TeddyLoyaltyCreate;

package/loyalty/teddy-loyalty-redeem.js

@@ -0,0 +1,38 @@
+await loadComponent('./components/mc-form.js', false);
+await loadComponent('./components/mc-form-success.js', false);
+await loadComponent('./res/mc-events.js', false);
+
+class TeddyLoyaltyRedeem extends McForm {
+
+  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('TeddyLoyaltyRedeem: 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("TeddyLoyaltyRedeem.error", message, e);
+    this.errors.showError(message);
+  }
+
+  success = ({ data }) => {
+    console.log('Redemption successful', data);
+    if (!data.success) {
+      this.error(data);
+      return;
+    }
+
+    this.errors.clear();
+    const success = this.querySelector('mc-form-success');
+    if(!success) return;
+    success.showMessage(theme.t.success.redeem || 'Redemption successful!');
+  }
+
+}
+
+if (!customElements.get('teddy-loyalty-redeem')) {
+  customElements.define('teddy-loyalty-redeem', TeddyLoyaltyRedeem);
+}
+window.TeddyLoyaltyRedeem = TeddyLoyaltyRedeem;

package/loyalty/teddy-loyalty.js

@@ -0,0 +1,214 @@
+import '../res/mc-events.js';
+const {createApp} = await import('../res/mc-vue.js');
+await loadComponent('./components/mc-element.js', false);
+await loadComponent('./auth/teddy-auth.js', false);
+
+class TeddyLoyalty extends McElement {
+
+  connectedCallback() {
+    const observer = new IntersectionObserver(
+      (entries, obs) => {
+        entries.forEach(entry => {
+          if (entry.isIntersecting) {
+            // L'elemento è nella viewport
+            this.init();
+            obs.unobserve(this); // Osserva solo la prima volta
+          }
+        });
+      },
+      { threshold: 0.1 }
+    );
+    observer.observe(this);
+  }
+
+  init = async () => {
+    const cmp = this;
+
+    const app = createApp({
+      delimiters: ['${', '}'], // setta i delimitatori di vue, altrimenti se usiamo gli standard va in conflitto con liquid
+      data: () => {
+        return {
+          loading: true,
+          info: window.loyalty?.loyalty?.info || null,
+          promotions: window.loyalty?.loyalty?.promotions || [],
+          page: 1,
+          limit: cmp.dataset.limit || 10,
+          movements: window.loyalty?.loyalty?.movements || [],
+          data: window.loyalty || null,
+          error: false,
+          levels: theme.loyalty?.map((e, i) => {
+            return {
+              ...e,
+              index: i
+            };
+          }) || [],
+        }
+      },
+      methods: {
+        getData() {
+          this.loading = true;
+          window.loyaltyLoading = true;
+          axios({
+            url: theme.apis.loyalty.info.replace('{customerId}', cmp.dataset.customer),
+            method: 'POST',
+            data: this.params(),
+            headers: {
+              "Ocp-Apim-Subscription-Key": "0936a98c9baa4aa1a2787657e151b44a",
+            }
+          }).then(r => {
+            this.onSuccess(r.data);
+          }).catch(e => {
+            this.onError();
+          }).finally(() => {
+            this.loading = false;
+            window.loyaltyLoading = false;
+          });
+        },
+
+        onSuccess(data) {
+          console.log('Loyalty data fetched successfully', data);
+          if(!data.success){
+            this.onError();
+            return;
+          }
+
+          window.loyalty = data.data;
+          this.setData();
+        },
+
+        onError() {
+          window.loyalty = null;
+          this.error = true;
+          this.data = null;
+          this.info = null;
+          this.promotions = [];
+          this.movements = [];
+          this.setData();
+        },
+
+        params(all = true) {
+          return {
+            brand: cmp.dataset.brand,
+            market: cmp.dataset.market,
+            callingSystem: 6,
+            sessionId: TeddyAuth.getSessionId(),
+            cardNumber: cmp.dataset.card
+          };
+        },
+
+        checkData() {
+          if (window.loyaltyLoading) {
+            setTimeout(() => {
+              this.checkData();
+            }, 100);
+            return; // se è in loading non facciamo nulla
+          }
+          if (window.loyalty && window.loyalty.loyalty) {
+            this.setData(window.loyalty);
+            this.loading = false;
+            return;
+          }
+
+          this.getData();
+        },
+
+        setData() {
+          if (!window.loyalty || !window.loyalty.info) {
+            console.warn('No loyalty data found');
+            this.onError();
+            return;
+          }
+          this.data = window.loyalty;
+          this.info = this.data?.info || null;
+          this.promotions = this.data?.promotions || [];
+          this.movements = this.data?.movements || {};
+
+          console.log('loyalty data', this.data);
+
+          if (!this.info) {
+            console.warn('No loyalty info found');
+            return;
+          }
+          this.info.tier = { ...this.info.tier, ...this.levels.find(level => level.code == this.info.tier.current) }
+          console.log('loyalty info', this.info);
+
+        },
+
+        addPage() {
+          this.loading = true;
+          window.loyaltyLoading = true;
+          axios({
+            url: theme.apis.loyalty.info.replace('{customerId}', cmp.dataset.customer),
+            method: 'GET',
+            params: this.params(false)
+          }).then(r => {
+            const oldItems = this.movements.items || [];
+            const newItems = r.data.loyalty.movements.items || [];
+
+            const updatedItems = [...oldItems, ...newItems];
+
+            this.movements = {
+              ...r.data.loyalty.movements,
+              items: updatedItems
+            };
+
+            console.log('loyalty movements', this.movements);
+          }).catch(e => {
+            console.error('Error fetching loyalty data', e);
+            window.loyalty = null;
+            this.setData();
+          }).finally(() => {
+            this.loading = false;
+            window.loyaltyLoading = false;
+          });
+        },
+
+        next() {
+          if (!this.movements) return;
+          if (!this.movements.pagination) return;
+          if (this.movements.pagination.hasNext) {
+            this.page++;
+            this.addPage();
+          }
+        }
+      },
+      computed: {
+        progress() {
+          const myTier = this.levels.find(level => level.code == this.info.tier.current)?.index || 0;
+          return myTier / (this.levels.length-1) * 100;
+        },
+
+        progressHalf() {
+          const myTier = this.levels.find(level => level.code == this.info.tier.current)?.index || 0;
+          return (myTier / (this.levels.length-1) * 100) - (100 / (this.levels.length-1) / 2);
+        },
+
+        movementsByDate() {
+          if (!this.movements) return [];
+          const grouped = this.movements.reduce((acc, item) => {
+            const date = new Date(item.date).toLocaleDateString(`${Shopify.locale}-${Shopify.country}`, { year: 'numeric', month: 'numeric', day: 'numeric' });
+            if (!acc[date]) acc[date] = [];
+            acc[date].push(item);
+            return acc;
+          }, {});
+          const obj = Object.entries(grouped).map(([date, items]) => ({ date, items }));
+          console.log('movements by date', obj);
+          return obj;
+        }
+      },
+      mounted() {
+        this.checkData();
+        console.log('Loyalty component mounted', this.data);
+      }
+    });
+    app.config.compilerOptions.isCustomElement = tag => tag.includes('-'); // per evitare che vue vada in conflitto con i custom element
+    app.mount(this);
+  }
+
+
+}
+
+if (!customElements.get('teddy-loyalty')) {
+  customElements.define('teddy-loyalty', TeddyLoyalty);
+}
+window.TeddyLoyalty = TeddyLoyalty;

package/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "@teddy-dev/frontend",
+  "version": "1.0.1",
+  "description": "Utility js per temi ict shopify",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "publish:store": "node scripts/publish-store.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ICT-Sviluppo/npm-teddy.git"
+  },
+  "author": "martina piangerelli",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/ICT-Sviluppo/npm-teddy/issues"
+  },
+  "homepage": "https://github.com/ICT-Sviluppo/npm-teddy#readme"
+}

package/res/mc-events.js

@@ -0,0 +1,43 @@
+const MCEVENTS = {
+  COOKIE_CONSENT: 'mc:cookie:consent',              //Evento emesso quando l'utente accetta o non accetta i cookie
+  COOKIE_CLOSED: 'mc:cookie:closed',                //Evento emesso quando l'utente chiude il banner dei cookie
+  CART_ADDED: 'mc:cart:added',                      //Evento emesso quando un prodotto viene aggiunto al carrello
+  CART_UPDATED: 'mc:cart:updated',                  //Evento emesso quando il carrello viene aggiornato
+  CART_REMOVED: 'mc:cart:removed',                  //Evento emesso quando un prodotto viene rimosso dal carrello
+  CART_ERROR: 'mc:cart:error',                  //Evento emesso quando un prodotto viene rimosso dal carrello
+  SEARCH: 'mc:search',        //Evento emesso quando viene effettuata una ricerca
+  SEARCH_ERROR: 'mc:search:error',                         //Evento emesso quando viene effettuata una ricerca
+  WISHLIST_ADDED: 'mc:wishlist:added',         // Evento custom: prodotto aggiunto
+  WISHLIST_CHANGED: 'mc:wishlist:changed',     // Evento custom: prodotto modificato
+  WISHLIST_REMOVED: 'mc:wishlist:removed',     // Evento custom: prodotto rimosso
+  WISHLIST_ERROR: 'mc:wishlist:error',               // Evento custom: errore
+  WISHLIST_CLEARED: 'mc:wishlist:cleared',               // Evento custom: errore
+  WISHLIST_SAVED: 'mc:wishlist:saved',               // Evento custom: errore
+  INPUT_VALID: 'mc:input:valid',                      // Evento custom: input valido
+  INPUT_ERROR: 'mc:input:error',                      // Evento custom: input con errore
+  FORM_SUBMIT: 'mc:form:submit',                  // Evento custom: form inviato
+  FORM_SUCCESS: 'mc:form:success',                // Evento custom: form inviato con successo
+  FORM_ERROR: 'mc:form:error',                    // Evento custom: errore nel form
+  FORM_COMPLETED: 'mc:form:completed',              // Evento custom: form completato
+  FORM_VALIDATE: 'mc:form:validate',              // Evento custom: form validato
+  EL_ACTIVATED: 'mc:el:activated',                // Evento custom: elemento attivato
+  EL_DEACTIVATED: 'mc:el:deactivated',            // Evento custom: elemento disattivato
+  PLACES_LOCATED: 'mc:places:located',                // Evento custom: geolocalizzazione riuscita
+  PLACES_CHANGE: 'mc:places:change',                  // Evento custom: cambio posto selezionato
+  QUANTITY_CHANGED: 'mc:quantity:changed',          // Evento custom: quantità cambiata
+  LOGIN: 'mc:login',                          // Evento custom: login effettuato
+  LOGOUT: 'mc:logout',                        // Evento custom: logout effettuato
+  VARIANTS_FOUND: 'mc:variants:found',                // Evento custom: varianti trovate
+  PROMO_APPLIED: 'mc:promo:applied',                // Evento custom: promozione applicata
+  CART_ASSOCIATED: 'mc:cart:associated',                // Evento custom: carrello associato
+  CART_READY: 'mc:cart:ready',                    // Evento custom: carrello pronto
+  ATTRIBUTES_UPDATED: 'mc:attributes:updated',              // Evento custom: attributi aggiornati
+  FORM_AUTOSUBMIT: 'mc:form:autosubmit',
+  PROMO_ERROR: 'mc:promo:error',
+  PROMO_APPLIED: 'mc:promo:applied',
+  PROMO_COMPLETED: 'mc:promo:completed',
+  PROMO_APPLY: 'mc:promo:apply',
+  BANTOA_LOADED: 'mc:bantoa:loaded',
+};
+window.MCEVENTS = MCEVENTS; // Esporta l'oggetto MCEVENTS nel contesto globale
+export default MCEVENTS;