mkfashion-sdk 2.4.3 → 2.4.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/index.html +3 -5
  2. package/mkfashion-sdk-2.4.4.tgz +0 -0
  3. package/package.json +1 -1
  4. package/src/mkfashion.js +38 -8
  5. package/test-exit-confirmation.html +157 -0
  6. package/mkfashion-sdk-2.4.3.tgz +0 -0
package/index.html CHANGED
@@ -5,7 +5,7 @@
5
5
  <meta charset="UTF-8">
6
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
7
  <title>Provador Virtual</title>
8
- <script src="./src/mkfashion.js"></script>
8
+ <script src="https://unpkg.com/mkfashion-sdk/src/mkfashion.js"></script>
9
9
  </head>
10
10
 
11
11
  <body>
@@ -47,10 +47,8 @@
47
47
  });
48
48
  });
49
49
 
50
- mkfashion.onInteraction((payload) => {
51
- if(payload.action == "retry"){
52
- cosole.log('Interação com o botão de retry')
53
- }
50
+ mkfashion.onInteraction((data) => {
51
+ console.log(data.category, data.action)
54
52
  })
55
53
 
56
54
  mkfashion.isAvailable(projectid, identifier)
package/mkfashion-sdk-2.4.4.tgz ADDED
Binary file
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "mkfashion-sdk",
3
- "version": "2.4.3",
3
+ "version": "2.4.5",
4
4
  "description": "SDK para integrar o provador virtual mKFashion com suporte a Wake Commerce",
5
5
  "main": "src/mkfashion.js",
6
6
  "scripts": {
package/src/mkfashion.js CHANGED
@@ -17,13 +17,13 @@ const mkfashion = {
17
17
 
18
18
  // ============ CONFIGURACAO ============
19
19
 
20
- //appUrl: 'https://mkfashion.mk3dlabs.com/visualizer',
20
+ appUrl: 'https://mkfashion.mk3dlabs.com/visualizer',
21
21
  apiUrl: 'https://mkfashion-new-api.mk3dlabs.com',
22
22
  debug: false,
23
23
 
24
24
  // DEV - Descomentar para desenvolvimento local
25
- appUrl: 'http://localhost:5174/visualizer',
26
- // apiUrl: 'http://localhost:3007',
25
+ //appUrl: 'http://localhost:5174/visualizer',
26
+ //apiUrl: 'http://localhost:3007',
27
27
 
28
28
  // ============ ESTADO INTERNO ============
29
29
 
@@ -37,6 +37,7 @@ const mkfashion = {
37
37
  _container: null,
38
38
  _escHandler: null,
39
39
  _messageHandler: null,
40
+ _confirmingExit: false,
40
41
 
41
42
  _callbacks: {
42
43
  onReady: null,
@@ -130,6 +131,7 @@ const mkfashion = {
130
131
  this._hideModal()
131
132
  this._triggerCallback('onClose')
132
133
  this._isOpen = false
134
+ this._confirmingExit = false
133
135
  this._log('Fechado')
134
136
  },
135
137
 
@@ -538,19 +540,40 @@ const mkfashion = {
538
540
  })
539
541
 
540
542
  this._modal.addEventListener('click', (e) => {
541
- if (e.target === this._modal) {
542
- this.close()
543
- }
543
+ if (e.target !== this._modal) return
544
+ this._handleBackdropOrEscapeAttempt()
544
545
  })
545
546
 
546
547
  this._escHandler = (e) => {
547
548
  if (e.key === 'Escape') {
548
- this.close()
549
+ this._handleBackdropOrEscapeAttempt()
549
550
  }
550
551
  }
551
552
  document.addEventListener('keydown', this._escHandler)
552
553
  },
553
554
 
555
+ /**
556
+ * Primeira tentativa: pede confirmacao no iframe (Vue mostra modal).
557
+ * Segunda tentativa (com flag setada): atalho UX, fecha direto.
558
+ */
559
+ _handleBackdropOrEscapeAttempt() {
560
+ if (this._confirmingExit) {
561
+ this.close()
562
+ return
563
+ }
564
+ this._confirmingExit = true
565
+ this._postToIframe('show_exit_confirmation')
566
+ this._log('Confirmacao de saida solicitada ao iframe')
567
+ },
568
+
569
+ _postToIframe(action, data = {}) {
570
+ if (!this._iframe || !this._iframe.contentWindow) return
571
+ this._iframe.contentWindow.postMessage(
572
+ { source: 'mkfashion-sdk', action, data },
573
+ '*'
574
+ )
575
+ },
576
+
554
577
  /** Esconde o modal sem remover do DOM (preserva sessao do iframe) */
555
578
  _hideModal() {
556
579
  if (!this._modal) return
@@ -586,7 +609,7 @@ const mkfashion = {
586
609
 
587
610
  this._escHandler = (e) => {
588
611
  if (e.key === 'Escape') {
589
- this.close()
612
+ this._handleBackdropOrEscapeAttempt()
590
613
  }
591
614
  }
592
615
  document.addEventListener('keydown', this._escHandler)
@@ -603,6 +626,7 @@ const mkfashion = {
603
626
  this._iframe = null
604
627
  this._container = null
605
628
  this._lastConfig = null
629
+ this._confirmingExit = false
606
630
 
607
631
  if (this._escHandler) {
608
632
  document.removeEventListener('keydown', this._escHandler)
@@ -632,9 +656,15 @@ const mkfashion = {
632
656
 
633
657
  switch (action) {
634
658
  case 'close_request':
659
+ this._confirmingExit = false
635
660
  this.close()
636
661
  break
637
662
 
663
+ case 'cancel_exit_confirmation':
664
+ this._confirmingExit = false
665
+ this._log('Confirmacao de saida cancelada pelo usuario')
666
+ break
667
+
638
668
  case 'restart_request':
639
669
  this.restart()
640
670
  break
package/test-exit-confirmation.html ADDED
@@ -0,0 +1,157 @@
1
+ <!DOCTYPE html>
2
+ <html lang="pt-BR">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>[TEMP] Teste — Confirmação de saída</title>
8
+ <script src="./src/mkfashion.js"></script>
9
+ <style>
10
+ body {
11
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
12
+ max-width: 720px;
13
+ margin: 40px auto;
14
+ padding: 0 16px;
15
+ color: #1c1d1d;
16
+ }
17
+
18
+ h1 {
19
+ margin: 0 0 8px;
20
+ }
21
+
22
+ p {
23
+ color: #555;
24
+ line-height: 1.5;
25
+ }
26
+
27
+ code {
28
+ background: #f3f3f3;
29
+ padding: 2px 6px;
30
+ border-radius: 4px;
31
+ font-size: 0.9em;
32
+ }
33
+
34
+ .row {
35
+ display: flex;
36
+ gap: 12px;
37
+ flex-wrap: wrap;
38
+ margin: 24px 0;
39
+ }
40
+
41
+ button {
42
+ padding: 12px 20px;
43
+ border: none;
44
+ border-radius: 999px;
45
+ background: #1c1d1d;
46
+ color: #fff;
47
+ font-size: 14px;
48
+ font-weight: bold;
49
+ cursor: pointer;
50
+ }
51
+
52
+ button.secondary {
53
+ background: #fff;
54
+ color: #1c1d1d;
55
+ border: 1px solid #1c1d1d;
56
+ }
57
+
58
+ pre {
59
+ background: #0f0f0f;
60
+ color: #b6f7c1;
61
+ padding: 12px;
62
+ border-radius: 8px;
63
+ max-height: 240px;
64
+ overflow: auto;
65
+ font-size: 12px;
66
+ }
67
+
68
+ ul {
69
+ line-height: 1.7;
70
+ }
71
+ </style>
72
+ </head>
73
+
74
+ <body>
75
+
76
+ <h1>Teste — Confirmação de saída</h1>
77
+ <p>
78
+ SDK local apontando para <code>http://localhost:5173/visualizer/</code>.
79
+ API em produção (<code>mkfashion-new-api.mk3dlabs.com</code>).
80
+ </p>
81
+ <p><strong>O que testar:</strong></p>
82
+ <ul>
83
+ <li>Clicar no <strong>X</strong> dentro do iframe → modal "Tem certeza...?" aparece. <em>Voltar</em> cancela; <em>Sair</em> fecha o SDK.</li>
84
+ <li>Clicar <strong>fora do iframe</strong> (backdrop preto) → modal aparece. Um <strong>segundo clique</strong> no backdrop fecha direto.</li>
85
+ <li>Pressionar <strong>ESC</strong> → mesma lógica do backdrop.</li>
86
+ <li>Clicar em <em>Voltar</em>, depois clicar no backdrop de novo → modal reabre normalmente (flag resetou).</li>
87
+ <li><code>mkfashion.close()</code> programático fecha sem confirmação.</li>
88
+ </ul>
89
+
90
+ <div class="row">
91
+ <button id="btn-open">Abrir provador</button>
92
+ <button id="btn-close-prog" class="secondary">mkfashion.close() programático</button>
93
+ <button id="btn-clear-log" class="secondary">Limpar log</button>
94
+ </div>
95
+
96
+ <h3>Log de eventos do SDK</h3>
97
+ <pre id="log">aguardando...</pre>
98
+
99
+ <script>
100
+ (function () {
101
+ var projectId = '69c56d5373ecdf64df48e330';
102
+ var identifier = '000862452107';
103
+
104
+ var logEl = document.getElementById('log');
105
+ function log(label, data) {
106
+ var line = '[' + new Date().toLocaleTimeString() + '] ' + label;
107
+ if (data !== undefined) line += ' ' + JSON.stringify(data);
108
+ logEl.textContent = (logEl.textContent === 'aguardando...' ? '' : logEl.textContent) + line + '\n';
109
+ logEl.scrollTop = logEl.scrollHeight;
110
+ }
111
+
112
+ function init() {
113
+ // Aponta o iframe para o dev server local do Visualizer
114
+ mkfashion.appUrl = 'http://localhost:5173/visualizer';
115
+ mkfashion.debug = true;
116
+
117
+ mkfashion.onReady(function (data) { log('onReady', data); });
118
+ mkfashion.onClose(function () { log('onClose'); });
119
+ mkfashion.onError(function (err) { log('onError', err); });
120
+ mkfashion.onProductLoaded(function (p) { log('onProductLoaded', { name: p && p.product && p.product.name }); });
121
+ mkfashion.onGenerationComplete(function () { log('onGenerationComplete'); });
122
+ mkfashion.onInteraction(function (d) { log('interaction', { category: d.category, action: d.action }); });
123
+
124
+ document.getElementById('btn-open').onclick = function () {
125
+ log('open()', { projectId: projectId, identifier: identifier });
126
+ mkfashion.open({ projectId: projectId, identifier: identifier });
127
+ };
128
+
129
+ document.getElementById('btn-close-prog').onclick = function () {
130
+ log('mkfashion.close() programatico');
131
+ mkfashion.close();
132
+ };
133
+
134
+ document.getElementById('btn-clear-log').onclick = function () {
135
+ logEl.textContent = 'aguardando...';
136
+ };
137
+ }
138
+
139
+ function waitForSdk() {
140
+ if (typeof mkfashion !== 'undefined') {
141
+ init();
142
+ } else {
143
+ setTimeout(waitForSdk, 100);
144
+ }
145
+ }
146
+
147
+ if (document.readyState === 'loading') {
148
+ document.addEventListener('DOMContentLoaded', waitForSdk);
149
+ } else {
150
+ waitForSdk();
151
+ }
152
+ })();
153
+ </script>
154
+
155
+ </body>
156
+
157
+ </html>
package/mkfashion-sdk-2.4.3.tgz DELETED
Binary file