mkfashion-sdk 2.3.5 → 2.3.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mkfashion-sdk",
-  "version": "2.3.5",
+  "version": "2.3.8",
   "description": "SDK para integrar o provador virtual mKFashion com suporte a Wake Commerce",
   "main": "src/mkfashion.js",
   "scripts": {

package/src/mkfashion.js

@@ -33,6 +33,8 @@ const mkfashion = {
   _config: null,
   _lastCartData: null,
   _lastCartProductData: null,  // cache completo do produto (para getProduct)
+  _lastConfig: null,           // config do ultimo open (para reutilizar iframe)
+  _container: null,
   _escHandler: null,
   _messageHandler: null,
 
@@ -96,22 +98,35 @@ const mkfashion = {
       height: options.height || 800
     }
 
-    this._setupMessageListener()
-    this._openModal()
+    // Reutiliza modal/iframe existente se ja foi criado para o mesmo produto
+    if (this._modal && this._iframe && this._lastConfig &&
+        this._lastConfig.projectId === projectId &&
+        this._lastConfig.identifier === identifier) {
+      this._showModal()
+      this._setupMessageListener()
+    } else {
+      // Destroi modal anterior se existir (produto diferente)
+      if (this._modal) {
+        this._removeMessageListener()
+        this._destroyModal()
+      }
+      this._setupMessageListener()
+      this._openModal()
+    }
+    this._lastConfig = { projectId, identifier }
 
     this._isOpen = true
     this._log('Aberto', this._config)
   },
 
-  /** Fecha o modal do provador virtual */
+  /** Fecha o modal do provador virtual (esconde sem destruir a sessao) */
   close() {
     if (!this._isOpen) {
       this._log('Ja esta fechado')
       return
     }
 
-    this._removeMessageListener()
-    this._closeModal()
+    this._hideModal()
     this._triggerCallback('onClose')
     this._isOpen = false
     this._log('Fechado')
@@ -183,8 +198,8 @@ const mkfashion = {
   /** Fecha modal, remove listeners, limpa cache e reseta callbacks */
   destroy() {
     this.close()
-    this._iframe = null
-    this._modal = null
+    this._removeMessageListener()
+    this._destroyModal()
     this._config = null
     this._lastCartData = null
     this._lastCartProductData = null
@@ -236,7 +251,7 @@ const mkfashion = {
     this._log('Verificando disponibilidade', { projectId: resolved, identifier })
 
     try {
-      const url = `${this.apiUrl}/availability/${resolved}/${identifier}`
+      const url = `${this.apiUrl}/availability/${resolved}/${encodeURIComponent(identifier)}`
       const response = await fetch(url)
 
       if (!response.ok) {
@@ -326,14 +341,14 @@ const mkfashion = {
     this._log('Buscando produto', { projectId: resolved, identifier })
 
     try {
-      const url = `${this.apiUrl}/products/${resolved}/${identifier}`
+      const url = `${this.apiUrl}/products/${resolved}/${encodeURIComponent(identifier)}`
       const response = await fetch(url)
 
       if (!response.ok) {
         // Fallback: tenta com productId do config caso caller tenha passado variantSku
         if (response.status === 404 && this._config?.identifier && this._config.identifier !== identifier) {
           this._log(`Identifier ${identifier} não encontrado, tentando com productId: ${this._config.identifier}`)
-          const fallbackUrl = `${this.apiUrl}/products/${resolved}/${this._config.identifier}`
+          const fallbackUrl = `${this.apiUrl}/products/${resolved}/${encodeURIComponent(this._config.identifier)}`
           const fallbackResponse = await fetch(fallbackUrl)
           if (fallbackResponse.ok) {
             const data = await fallbackResponse.json()
@@ -394,7 +409,7 @@ const mkfashion = {
   },
 
   _buildUrl() {
-    return `${this.appUrl}/${this._config.projectId}/${this._config.identifier}`
+    return `${this.appUrl}/${this._config.projectId}/${encodeURIComponent(this._config.identifier)}`
   },
 
   _openModal() {
@@ -515,18 +530,19 @@ const mkfashion = {
     document.addEventListener('keydown', this._escHandler)
   },
 
-  _closeModal() {
+  /** Esconde o modal sem remover do DOM (preserva sessao do iframe) */
+  _hideModal() {
     if (!this._modal) return
 
     this._modal.style.opacity = '0'
-    this._iframe.style.transform = 'scale(0.95)'
+    if (this._container) {
+      this._container.style.transform = 'scale(0.95)'
+    }
 
     setTimeout(() => {
-      if (this._modal && this._modal.parentNode) {
-        this._modal.parentNode.removeChild(this._modal)
+      if (this._modal) {
+        this._modal.style.display = 'none'
       }
-      this._modal = null
-      this._iframe = null
     }, 300)
 
     if (this._escHandler) {
@@ -534,6 +550,44 @@ const mkfashion = {
     }
   },
 
+  /** Mostra o modal que estava escondido */
+  _showModal() {
+    if (!this._modal) return
+
+    this._modal.style.display = 'flex'
+
+    requestAnimationFrame(() => {
+      this._modal.style.opacity = '1'
+      if (this._container) {
+        this._container.style.transform = 'scale(1)'
+      }
+    })
+
+    this._escHandler = (e) => {
+      if (e.key === 'Escape') {
+        this.close()
+      }
+    }
+    document.addEventListener('keydown', this._escHandler)
+  },
+
+  /** Remove o modal do DOM completamente (usado por destroy) */
+  _destroyModal() {
+    if (!this._modal) return
+
+    if (this._modal.parentNode) {
+      this._modal.parentNode.removeChild(this._modal)
+    }
+    this._modal = null
+    this._iframe = null
+    this._container = null
+    this._lastConfig = null
+
+    if (this._escHandler) {
+      document.removeEventListener('keydown', this._escHandler)
+    }
+  },
+
   _createIframe() {
     const { width, height } = this._config
     const iframe = document.createElement('iframe')