Split simulator POS and wrapper

packages/pos/drivers/printer/simulation.js

@@ -43,7 +43,7 @@ export function setup(Printer) {
       });
 
       /** Fire endPrinting if no Virtual POS found */
-      if (!View.getPOS() || window.innerWidth <= 480) {
+      if (!View.getInstance() || window.innerWidth <= 480) {
         setTimeout(() => HardwareManager.fire('endPrinting'), 1000);
       }
       return;

packages/pos/simulator/view/manager.js

@@ -1,4 +1,4 @@
-import POSConstructor from './pos/POS.html';
+import ViewWrapper from './pos/Wrapper.html';
 import EventTarget from '../libs/EventTarget.js';
 import extend from '../../extend.js';
 
@@ -9,7 +9,7 @@ import * as $Printer from '../../drivers/printer/simulation.js';
 
 const View = extend({}, EventTarget());
 
-let POS;
+let instance;
 let panels = {};
 
 View.addPanel = (driver, panel) => {
@@ -20,21 +20,22 @@ View.addPanel = (driver, panel) => {
     [namespace]: { namespace, panel },
   };
 
-  if (POS) {
-    POS.refs.controlPanel.set({ panels });
+  if (instance) {
+    instance.refs.controlPanel.set({ panels });
   }
 };
+
 View.addPanel($Printer, PrinterPanel);
 View.addPanel($Http, HttpPanel);
 
-View.showPOS = () => {
-  if (!POS) {
-    POS = new POSConstructor({ target: document.body });
-    POS.refs.controlPanel.set({ panels });
+View.show = () => {
+  if (!instance) {
+    instance = new ViewWrapper({ target: document.body });
+    instance.refs.controlPanel.set({ panels });
   }
-  return POS;
+  return instance;
 };
 
-View.getPOS = () => POS;
+View.getInstance = () => instance;
 
 export default View;

packages/pos/simulator/view/pos/hardware/CreditCard.html → packages/pos/simulator/view/pos/Card.html

@@ -7,19 +7,13 @@
   ></div>
 
 <script>
-  import { HardwareManager } from '../../../index.js';
-  import Payment from '../../../../api/payment.js';
+  import { HardwareManager } from '../../index.js';
+  import Payment from '../../../api/payment.js';
 
   export default {
     data() {
       return {
         isCardInserted: false,
-        cardInfo: {
-          brand: 'Master',
-          type: 'debit',
-          pan: '52189300000000',
-          cardholdername: 'JOÃO ROCHA',
-        },
       };
     },
     methods: {
@@ -62,7 +56,7 @@
     left: 45px;
     top: 780px;
     z-index: 1;
-    background-image: url(../assets/creditcard.png);
+    background-image: url(./assets/creditcard.png);
     cursor: pointer;
     transition: transform 0.3s ease, filter 0.3s ease;
     filter: drop-shadow(8px 8px 2px rgba(0, 0, 0, 0.5));

packages/pos/simulator/view/pos/POS.html

@@ -1,104 +1,35 @@
-{#if _browserEngine === 'webkit'}
-  <div class="wrapper">
-    <div class="container">
-      <div class="pos-wrapper">
-        <div class="shadow"></div>
-        <div class="pos">
-          <Printer ref:printer />
-          <Screen ref:screen>
-            <Launcher />
-          </Screen>
-          <Keypad ref:keypad />
-        </div>
-      </div>
-      <Card ref:card />
-    </div>
-  </div>
-{:else}
-  <div class="engine-alert">
-    Para um rápido desenvolvimento mais fiel ao ambiente do State, é recomendado o uso do <strong><a href="https://www.google.com/chrome/" target="_blank">Chrome</a></strong> como navegador.
-  </div>
-  <div id="app-root">
-    <slot></slot>
-  </div>
-{/if}
 
-<ControlPanel ref:controlPanel />
+<div class="pos-wrapper">
+  <div class="shadow"></div>
+  <div class="pos">
+    <Printer ref:printer />
+      <Screen ref:screen>
+        <slot></slot>
+      </Screen>
+    <Keypad ref:keypad />
+  </div>
+</div>
 
 <script>
   export default {
     components: {
       Printer: './hardware/Printer.html',
       Keypad: './hardware/Keypad.html',
       Screen: './hardware/Screen.html',
-      Card: './hardware/CreditCard.html',
-      ControlPanel: './ControlPanel.html',
-      Launcher: './Launcher.html',
-    },
-    data() {
-      return {
-        _browserEngine: 'webkit',
-      };
-    },
-    oncreate() {
-      /**
-       * Remove the 'app-root' id from the body, since
-       * its replaced by the 'app-root' inside the <Screen />
-       * */
-      document.body.removeAttribute('id');
-
-      /**
-       * Detect if we're running on a webkit environment.
-       * We check for `edge` because it fakes one.
-       */
-      const _browserEngine =
-        'WebkitAppearance' in document.documentElement.style &&
-        !/edge/i.test(navigator.userAgent)
-          ? 'webkit'
-          : 'other';
-
-      /**
-       * Set the render engine to a body attribute
-       * to make our css a bit smarter since we depend heavily on webkit.
-       * */
-      document.documentElement.setAttribute('engine', _browserEngine);
-      document.documentElement.setAttribute('virtual-pos', '');
-      this.set({ _browserEngine });
     },
   };
 </script>
 
 <style type="text/postcss">
-  @import './style.pcss';
-
   @media (max-width: 400px) {
-    :global(body),
-    .wrapper,
-    .container,
     .pos-wrapper,
     .pos {
       height: 100%;
     }
-
-    :global(body) {
-      @extend %hide-scrollbar;
-    }
   }
 
   @media (min-width: 401px) {
-    .wrapper {
-      display: flex;
-      height: 100vh;
-      width: 100%;
-      align-items: center;
-      justify-content: center;
-      background-image: url(./assets/wood.jpg);
-      background-size: cover;
-      overflow: hidden;
-    }
-
-    .container {
-      display: flex;
+    .pos-wrapper {
       position: relative;
     }
 
@@ -133,37 +64,4 @@
       }
     }
   }
-
-  .engine-alert {
-    position: static;
-    z-index: 100000;
-    width: 100%;
-    padding: 10px 75px;
-    background-color: #bf4130;
-    color: #fff;
-    font-size: 16px;
-    text-align: center;
-    animation: 2s ease-in-out blink infinite;
-    pointer-events: none;
-
-    a {
-      text-decoration: underline;
-      color: #fff;
-      pointer-events: auto;
-    }
-  }
-
-  @keyframes blink {
-    0% {
-      opacity: 0.4;
-    }
-
-    50% {
-      opacity: 0.9;
-    }
-
-    100% {
-      opacity: 0.4;
-    }
-  }
 </style>

packages/pos/simulator/view/pos/Wrapper.html

@@ -0,0 +1,117 @@
+{#if ENGINE === 'webkit'}
+  <div class="container">
+    <div style="position: relative;">
+      <POS ref:POS>
+        <Launcher />
+      </POS>
+      <Card ref:card />
+    </div>
+  </div>
+{:else}
+  <div class="engine-alert">
+    Para um rápido desenvolvimento mais fiel ao ambiente do POS, é recomendado o uso do <strong><a href="https://www.google.com/chrome/" target="_blank">Chrome</a></strong> como navegador.
+  </div>
+  <div id="app-root"></div>
+{/if}
+
+<ControlPanel ref:controlPanel />
+
+<script>
+  /**
+   * Detect if we're running on a webkit environment.
+   * We check for `edge` because it fakes one.
+   */
+  const ENGINE =
+    'WebkitAppearance' in document.documentElement.style &&
+    !/edge/i.test(navigator.userAgent)
+      ? 'webkit'
+      : 'other';
+
+  export default {
+    components: {
+      POS: './POS.html',
+      Card: './Card.html',
+      Launcher: './apps/Launcher.html',
+      ControlPanel: './ControlPanel.html',
+    },
+    helpers: {
+      ENGINE,
+    },
+    oncreate() {
+      /**
+       * Remove the 'app-root' id from the body, since
+       * its replaced by the 'app-root' inside the <Screen />
+       * */
+      document.body.removeAttribute('id');
+      document.documentElement.setAttribute('virtual-pos', '');
+
+      /**
+       * Set the render engine to the html attribute
+       * to make our css a bit smarter since we depend heavily on webkit.
+       * */
+      document.documentElement.setAttribute('engine', ENGINE);
+    },
+  };
+</script>
+
+<style type="text/postcss">
+  @import '@mamba/styles/colors.pcss';
+  @import './style.pcss';
+
+  @media (max-width: 400px) {
+    :global(body),
+    .container {
+      height: 100%;
+    }
+
+    :global(body) {
+      @extend %hide-scrollbar;
+    }
+  }
+
+  @media (min-width: 401px) {
+    .container {
+      display: flex;
+      height: 100vh;
+      width: 100%;
+      align-items: center;
+      justify-content: center;
+      background-image: url(./assets/wood.jpg);
+      background-size: cover;
+      overflow: hidden;
+    }
+  }
+
+  .engine-alert {
+    position: static;
+    z-index: 100000;
+    width: 100%;
+    padding: 10px 75px;
+    background-color: #bf4130;
+    color: #fff;
+    font-size: 16px;
+    text-align: center;
+    animation: 2s ease-in-out blink infinite;
+    pointer-events: none;
+
+    a {
+      text-decoration: underline;
+      color: #fff;
+      pointer-events: auto;
+    }
+  }
+
+  @keyframes blink {
+    0% {
+      opacity: 0.4;
+    }
+
+    50% {
+      opacity: 0.9;
+    }
+
+    100% {
+      opacity: 0.4;
+    }
+  }
+</style>

packages/pos/simulator/view/pos/Launcher.html → packages/pos/simulator/view/pos/apps/Launcher.html

@@ -44,10 +44,10 @@
 {/if}
 
 <script>
-  import { AppManager, System } from '../../index.js';
-  import { warn } from '../../libs/utils.js';
-  import Card from '../../../api/card.js';
-  import SignalListener from '../../../SignalListener.html';
+  import { AppManager, System } from '../../../index.js';
+  import { warn } from '../../../libs/utils.js';
+  import Card from '../../../../api/card.js';
+  import SignalListener from '../../../../SignalListener.html';
 
   const STATES = {
     LOCKSCREEN: 0,

packages/webpack/virtual-files/index.browser.js

@@ -9,7 +9,7 @@ const manifest = {
 };
 
 /** Show the Virtual POS before installing and opening the app */
-View.showPOS();
+View.show();
 
 /** Install the app on the mamba simulator */
 AppManager.installApp({ manifest, RootComponent });

tools/rollup/config.component.watch.js

@@ -60,11 +60,7 @@ export default {
     image({
       limit: 10 * 1024, // inline files < 10k, copy files > 10k
       emitFiles: true, // defaults to true
-      include: [
-        fromWorkspace('**/*.{png,jpg,svg,bmp}'),
-        fromProject('node_modules', '**', '*.{png,jpg,svg,bmp}'),
-        fromProject('**', 'node_modules', '**', '*.{png,jpg,svg,bmp}'),
-      ],
+      include: [fromProject('**/*.{png,jpg,svg,bmp}')],
     }),
     replace({
       __NODE_ENV__: JSON.stringify(process.env.NODE_ENV),