feat: ⚡ new portal web for qr scan

2026-04-17 19:26:23 +00:00 · 2023-01-09 18:37:58 +01:00
parent 4e0d33c6bb
commit 3de5f4b77a
39 changed files with 2054 additions and 303 deletions
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -29,7 +29,7 @@ jobs:
              run: yarn install --immutable --network-timeout 300000

            - name: Build Package
-              run: yarn build
+              run: yarn build:full

            - name: Build Eslint rules
              run: yarn lint:fix
--- a/.github/workflows/releases-dev.yml
+++ b/.github/workflows/releases-dev.yml
@@ -27,7 +27,7 @@ jobs:
              run: yarn install --immutable --network-timeout 300000

            - name: Build Package
-              run: yarn build
+              run: yarn build:full

            - name: Release @bot-whatsapp/bot
              run: yarn node ./scripts/release.js --name=bot --version=  --token="${{ secrets.NPM_TOKEN }}"
--- a/.github/workflows/releases.yml
+++ b/.github/workflows/releases.yml
@@ -31,7 +31,7 @@ jobs:
              run: yarn install --immutable --network-timeout 300000

            - name: Build Package
-              run: yarn build
+              run: yarn build:full

            - name: Release @bot-whatsapp/bot
              run: yarn node ./scripts/release.js --name=bot --version="${{ steps.vars.outputs.tag }}" --token="${{ secrets.NPM_TOKEN }}"
--- a/package.json
+++ b/package.json
@@ -13,12 +13,15 @@
        "contexts:rollup": "rollup --config ./packages/contexts/rollup-contexts.config.js",
        "database:rollup": "rollup --config ./packages/database/rollup-database.config.js",
        "create-bot-whatsapp:rollup": "rollup --config ./packages/create-bot-whatsapp/rollup-create.config.js",
+        "portal:rollup": "rollup --config ./packages/portal/rollup-portal.config.js",
        "format:check": "prettier --check ./packages",
        "format:write": "prettier --write ./packages",
        "fmt.staged": "pretty-quick --staged",
        "lint:check": "eslint ./packages",
        "lint:fix": "eslint --fix ./packages",
-        "build": "yarn run cli:rollup && yarn run bot:rollup && yarn run provider:rollup && yarn run database:rollup && yarn run contexts:rollup && yarn run create-bot-whatsapp:rollup",
+        "build:portal-web": "cd ./packages/portal/ && yarn run build.types && yarn run build.client && yarn run build.server && yarn run lint --fix",
+        "build:full": "yarn run build:portal-web && yarn run cli:rollup && yarn run bot:rollup && yarn run provider:rollup && yarn run database:rollup && yarn run contexts:rollup && yarn run create-bot-whatsapp:rollup && yarn run portal:rollup",
+        "build": "yarn run cli:rollup && yarn run bot:rollup && yarn run provider:rollup && yarn run database:rollup && yarn run contexts:rollup && yarn run create-bot-whatsapp:rollup && yarn run portal:rollup",
        "copy.lib": "node ./scripts/move.js",
        "test.unit": "node ./node_modules/uvu/bin.js packages test",
        "test.coverage": "node ./node_modules/c8/bin/c8.js npm run test.unit",
@@ -39,6 +42,7 @@
        "packages/database",
        "packages/provider",
        "packages/contexts",
+        "packages/portal",
        "packages/docs"
    ],
    "keywords": [
--- a/packages/portal/.eslintignore
+++ b/packages/portal/.eslintignore
@@ -0,0 +1,33 @@
+**/*.log
+**/.DS_Store
+*.
+.vscode/settings.json
+.history
+.yarn
+bazel-*
+bazel-bin
+bazel-out
+bazel-qwik
+bazel-testlogs
+dist
+dist-dev
+lib
+lib-types
+etc
+external
+node_modules
+temp
+tsc-out
+tsdoc-metadata.json
+target
+output
+rollup.config.js
+build
+.cache
+.vscode
+.rollup.cache
+dist
+tsconfig.tsbuildinfo
+vite.config.ts
+*.spec.tsx
+*.spec.ts
--- a/packages/portal/.eslintrc.cjs
+++ b/packages/portal/.eslintrc.cjs
@@ -0,0 +1,41 @@
+module.exports = {
+  root: true,
+  env: {
+    browser: true,
+    es2021: true,
+    node: true,
+  },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:qwik/recommended',
+  ],
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    tsconfigRootDir: __dirname,
+    project: ['./tsconfig.json'],
+    ecmaVersion: 2021,
+    sourceType: 'module',
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+  plugins: ['@typescript-eslint'],
+  rules: {
+    '@typescript-eslint/no-explicit-any': 'off',
+    '@typescript-eslint/explicit-module-boundary-types': 'off',
+    '@typescript-eslint/no-inferrable-types': 'off',
+    '@typescript-eslint/no-non-null-assertion': 'off',
+    '@typescript-eslint/no-empty-interface': 'off',
+    '@typescript-eslint/no-namespace': 'off',
+    '@typescript-eslint/no-empty-function': 'off',
+    '@typescript-eslint/no-this-alias': 'off',
+    '@typescript-eslint/ban-types': 'off',
+    '@typescript-eslint/ban-ts-comment': 'off',
+    'prefer-spread': 'off',
+    'no-case-declarations': 'off',
+    'no-console': 'off',
+    '@typescript-eslint/no-unused-vars': ['error'],
+    '@typescript-eslint/consistent-type-imports': 'warn',
+  },
+};
--- a/packages/portal/.gitignore
+++ b/packages/portal/.gitignore
@@ -0,0 +1,38 @@
+# Build
+/dist
+/lib
+/lib-types
+/server
+
+# Development
+node_modules
+
+# Cache
+.cache
+.mf
+.vscode
+.rollup.cache
+tsconfig.tsbuildinfo
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+# Editor
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+# Yarn
+.yarn/*
+!.yarn/releases
--- a/packages/portal/.prettierignore
+++ b/packages/portal/.prettierignore
@@ -0,0 +1,6 @@
+# Files Prettier should not format
+**/*.log
+**/.DS_Store
+*.
+dist
+node_modules
--- a/packages/portal/README.md
+++ b/packages/portal/README.md
@@ -0,0 +1,71 @@
+# Qwik City App ⚡️
+
+- [Qwik Docs](https://qwik.builder.io/)
+- [Discord](https://qwik.builder.io/chat)
+- [Qwik GitHub](https://github.com/BuilderIO/qwik)
+- [@QwikDev](https://twitter.com/QwikDev)
+- [Vite](https://vitejs.dev/)
+
+---
+
+## Project Structure
+
+This project is using Qwik with [QwikCity](https://qwik.builder.io/qwikcity/overview/). QwikCity is just a extra set of tools on top of Qwik to make it easier to build a full site, including directory-based routing, layouts, and more.
+
+Inside your project, you'll see the following directory structure:
+
+```
+├── public/
+│   └── ...
+└── src/
+    ├── components/
+    │   └── ...
+    └── routes/
+        └── ...
+```
+
+- `src/routes`: Provides the directory based routing, which can include a hierarchy of `layout.tsx` layout files, and an `index.tsx` file as the page. Additionally, `index.ts` files are endpoints. Please see the [routing docs](https://qwik.builder.io/qwikcity/routing/overview/) for more info.
+
+- `src/components`: Recommended directory for components.
+
+- `public`: Any static assets, like images, can be placed in the public directory. Please see the [Vite public directory](https://vitejs.dev/guide/assets.html#the-public-directory) for more info.
+
+## Add Integrations and deployment
+
+Use the `npm run qwik add` command to add additional integrations. Some examples of integrations include: Cloudflare, Netlify or Express server, and the [Static Site Generator (SSG)](https://qwik.builder.io/qwikcity/static-site-generation/static-site-config/).
+
+```shell
+npm run qwik add # or `yarn qwik add`
+```
+
+## Development
+
+Development mode uses [Vite's development server](https://vitejs.dev/). During development, the `dev` command will server-side render (SSR) the output.
+
+```shell
+npm start # or `yarn start`
+```
+
+> Note: during dev mode, Vite may request a significant number of `.js` files. This does not represent a Qwik production build.
+
+## Preview
+
+The preview command will create a production build of the client modules, a production build of `src/entry.preview.tsx`, and run a local server. The preview server is only for convenience to locally preview a production build, and it should not be used as a production server.
+
+```shell
+npm run preview # or `yarn preview`
+```
+
+## Production
+
+The production build will generate client and server modules by running both client and server build commands. Additionally, the build command will use Typescript to run a type check on the source code.
+
+```shell
+npm run build # or `yarn build`
+```
+
+## Static Site Generator (Node.js)
+
+```
+npm run build.server
+```
--- a/packages/portal/adaptors/static/vite.config.ts
+++ b/packages/portal/adaptors/static/vite.config.ts
@@ -0,0 +1,19 @@
+import { staticAdaptor } from '@builder.io/qwik-city/adaptors/static/vite'
+import { extendConfig } from '@builder.io/qwik-city/vite'
+import baseConfig from '../../vite.config'
+
+export default extendConfig(baseConfig, () => {
+    return {
+        build: {
+            ssr: true,
+            rollupOptions: {
+                input: ['@qwik-city-plan'],
+            },
+        },
+        plugins: [
+            staticAdaptor({
+                origin: 'https://bot-whatsapp.netlify.app',
+            }),
+        ],
+    }
+})
--- a/packages/portal/package.json
+++ b/packages/portal/package.json
@@ -0,0 +1,48 @@
+{
+    "name": "@bot-whatsapp/portal",
+    "version": "0.0.1-alpha.0",
+    "description": "Portal WEB para escanear QR",
+    "main": "./lib/portal.http.cjs",
+    "scripts": {
+        "build": "qwik build",
+        "build.client": "vite build",
+        "build.preview": "vite build --ssr src/entry.preview.tsx",
+        "build.server": "vite build -c adaptors/static/vite.config.ts",
+        "build.types": "tsc --incremental --noEmit",
+        "deploy": "echo 'Run \"npm run qwik add\" to install a server adaptor'",
+        "dev": "vite --mode ssr",
+        "dev.debug": "node --inspect-brk ./node_modules/vite/bin/vite.js --mode ssr --force",
+        "fmt": "prettier --write .",
+        "fmt.check": "prettier --check .",
+        "lint": "eslint \"src/**/*.ts*\"",
+        "preview": "qwik build preview && vite preview --open",
+        "start": "vite --open --mode ssr",
+        "qwik": "qwik"
+    },
+    "files": [
+        "./dist/*",
+        "./lib/portal.http.cjs"
+    ],
+    "devDependencies": {
+        "@builder.io/qwik": "0.16.2",
+        "@builder.io/qwik-city": "0.0.128",
+        "@types/eslint": "8.4.10",
+        "@types/node": "^18.11.18",
+        "@types/node-fetch": "latest",
+        "@typescript-eslint/eslint-plugin": "5.48.0",
+        "@typescript-eslint/parser": "5.48.0",
+        "eslint": "8.31.0",
+        "eslint-plugin-qwik": "0.16.2",
+        "node-fetch": "3.3.0",
+        "prettier": "2.8.1",
+        "typescript": "4.9.4",
+        "undici": "5.14.0",
+        "vite": "4.0.3",
+        "vite-tsconfig-paths": "3.5.0"
+    },
+    "dependencies": {
+        "kleur": "^4.1.5",
+        "polka": "^0.5.2",
+        "serve-static": "^1.13.1"
+    }
+}
--- a/packages/portal/portal.http.js
+++ b/packages/portal/portal.http.js
@@ -0,0 +1,56 @@
+const { join } = require('path')
+const { createReadStream, existsSync } = require('fs')
+const { bgYellow, cyan } = require('kleur')
+const polka = require('polka')
+
+const HTTP_PORT = process.env.PORT || 3000
+const QR_FILE = process.env.QR_FILE ?? 'qr.png'
+const PUBLIC_URL =
+    process.env.PUBLIC_URL ??
+    process.env.RAILWAY_STATIC_URL ??
+    'http://localhost'
+
+const dir = [join(__dirname, 'dist'), join(__dirname, '..', 'dist')].find((i) =>
+    existsSync(i)
+)
+const serve = require('serve-static')(dir)
+
+/**
+ * Iniciamos Portal WEB para escanear QR
+ * @param {port:3000, publicSite:'http://mistio.com', qrFile:'qr.png', dir:__dirname}
+ */
+const start = (
+    { port, publicSite, qrFile } = {
+        port: HTTP_PORT,
+        publicSite: PUBLIC_URL,
+        qrFile: QR_FILE,
+    }
+) => {
+    polka()
+        .use(serve)
+        .get(qrFile, (_, res) => {
+            const qrSource = [
+                join(process.cwd(), qrFile),
+                join(__dirname, '..', qrFile),
+                join(__dirname, qrFile),
+            ].find((i) => existsSync(i))
+
+            const qrMark = [
+                join(__dirname, 'dist', 'water-mark.png'),
+                join(__dirname, '..', 'dist', 'water-mark.png'),
+            ].find((i) => existsSync(i))
+            const fileStream = createReadStream(qrSource ?? qrMark)
+            res.writeHead(200, { 'Content-Type': 'image/png' })
+            fileStream.pipe(res)
+        })
+        .listen(port, () => {
+            console.log(``)
+            console.log(bgYellow(`🚩 ESCANEAR QR 🚩`))
+            console.log(cyan(`Existen varias maneras de escanear el QR code`))
+            console.log(cyan(`- Se ha creado un archivo /qr.png`))
+            console.log(cyan(`- Tambien puedes visitar ${publicSite}:${port}`))
+            console.log(``)
+        })
+}
+
+module.exports = start
--- a/packages/portal/public/favicon.svg
+++ b/packages/portal/public/favicon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 500 500"><g clip-path="url(#a)"><circle cx="250" cy="250" r="250" fill="#fff"/><path fill="#18B6F6" d="m367.87 418.45-61.17-61.18-.94.13v-.67L175.7 227.53l32.05-31.13L188.9 87.73 99.56 199.09c-15.22 15.42-18.03 40.51-7.08 59.03l55.83 93.11a46.82 46.82 0 0 0 40.73 22.81l27.65-.27 151.18 44.68Z"/><path fill="#AC7EF4" d="m401.25 196.94-12.29-22.81-6.41-11.67-2.54-4.56-.26.26-33.66-58.63a47.07 47.07 0 0 0-41.27-23.75l-29.51.8-88.01.28a47.07 47.07 0 0 0-40.33 23.34L93.4 207l95.76-119.54L314.7 226.19l-22.3 22.67 13.35 108.54.13-.26v.26h-.26l.26.27 10.42 10.2 50.62 49.78c2.13 2 5.6-.4 4.13-2.96l-31.25-61.85 54.5-101.3 1.73-2c.67-.81 1.33-1.62 1.87-2.42a46.8 46.8 0 0 0 3.34-50.18Z"/><path fill="#fff" d="M315.1 225.65 189.18 87.6l17.9 108.14L175 227l130.5 130.27-11.75-108.14 21.37-23.48Z"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h500v500H0z"/></clipPath></defs></svg>
--- a/packages/portal/public/manifest.json
+++ b/packages/portal/public/manifest.json
@@ -0,0 +1,9 @@
+{
+    "$schema": "https://json.schemastore.org/web-manifest-combined.json",
+    "name": "qwik-project-name",
+    "short_name": "Welcome to Qwik",
+    "start_url": ".",
+    "display": "standalone",
+    "background_color": "#fff",
+    "description": "A Qwik project app."
+}
--- a/packages/portal/public/robots.txt
+++ b/packages/portal/public/robots.txt
--- a/packages/portal/public/water-mark.png
+++ b/packages/portal/public/water-mark.png
--- a/packages/portal/rollup-portal.config.js
+++ b/packages/portal/rollup-portal.config.js
@@ -0,0 +1,13 @@
+const banner = require('../../config/banner.rollup.json')
+const { join } = require('path')
+const commonjs = require('@rollup/plugin-commonjs')
+
+module.exports = {
+    input: join(__dirname, 'portal.http.js'),
+    output: {
+        banner: banner['banner.output'].join(''),
+        file: join(__dirname, 'lib', 'portal.http.cjs'),
+        format: 'cjs',
+    },
+    plugins: [commonjs()],
+}
--- a/packages/portal/src/components/header/header.css
+++ b/packages/portal/src/components/header/header.css
@@ -0,0 +1,36 @@
+header {
+    display: flex;
+    background: white;
+}
+
+header .logo a {
+    display: inline-block;
+    padding: 10px 10px 7px 20px;
+    text-decoration: none;
+}
+
+header ul {
+    margin: 0;
+    padding: 3px 10px 0 0;
+    list-style: none;
+    flex: 1;
+    text-align: right;
+}
+
+header li {
+    display: inline-block;
+    margin: 0;
+    padding: 0;
+}
+
+header li a {
+    display: inline-block;
+    padding: 15px 10px;
+    text-decoration: none;
+    color: #1a1a1a;
+    font-weight: 500;
+}
+
+header li a:hover {
+    text-decoration: underline;
+}
--- a/packages/portal/src/components/header/header.tsx
+++ b/packages/portal/src/components/header/header.tsx
@@ -0,0 +1,47 @@
+import { component$, useStylesScoped$ } from '@builder.io/qwik'
+import { BotLogo } from '../icons/bot'
+import styles from './header.css?inline'
+
+export default component$(() => {
+    useStylesScoped$(styles)
+
+    return (
+        <header>
+            <div class="logo">
+                <a
+                    href="https://github.com/codigoencasa/bot-whatsapp"
+                    target="_blank"
+                    title="qwik"
+                >
+                    <BotLogo />
+                </a>
+            </div>
+            <ul>
+                <li>
+                    <a
+                        href="https://github.com/codigoencasa/bot-whatsapp"
+                        target="_blank"
+                    >
+                        Docs
+                    </a>
+                </li>
+                <li>
+                    <a
+                        href="https://github.com/codigoencasa/bot-whatsapp/tree/main/starters/apps"
+                        target="_blank"
+                    >
+                        Examples
+                    </a>
+                </li>
+                <li>
+                    <a
+                        href="https://www.youtube.com/watch?v=1u0TTbjK5bo&list=PL_WGMLcL4jzViIlmyDZPnhAdkc8RXGkFh"
+                        target="_blank"
+                    >
+                        Tutorials
+                    </a>
+                </li>
+            </ul>
+        </header>
+    )
+})
--- a/packages/portal/src/components/icons/bot.css
+++ b/packages/portal/src/components/icons/bot.css
@@ -0,0 +1,12 @@
+.logo {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+    align-content: center;
+    color: #1a1a1a;
+}
+
+.logo h1 {
+    font-size: 1.5rem;
+    margin: 0;
+}
--- a/packages/portal/src/components/icons/bot.tsx
+++ b/packages/portal/src/components/icons/bot.tsx
--- a/packages/portal/src/components/icons/qwik.tsx
+++ b/packages/portal/src/components/icons/qwik.tsx
@@ -0,0 +1,38 @@
+export const QwikLogo = () => (
+    <svg
+        width="100"
+        height="35"
+        viewBox="0 0 167 53"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <path
+            d="M81.9545 46.5859H75.5513V35.4045C73.4363 36.8579 71.0496 37.5749 68.4884 37.5749C65.0151 37.5749 62.4344 36.6253 60.8239 34.6487C59.2134 32.6915 58.3984 29.2034 58.3984 24.2231C58.3984 19.1266 59.3492 15.5997 61.2702 13.5456C63.23 11.4721 66.3734 10.4644 70.7004 10.4644C74.7946 10.4644 78.5201 11.0264 81.9545 12.131V46.5859ZM75.5513 16.278C74.096 15.8323 72.4661 15.6191 70.7004 15.6191C68.5272 15.6191 66.9749 16.1811 66.1017 17.3244C65.2479 18.4871 64.7823 20.6962 64.7823 23.9712C64.7823 27.0524 65.1897 29.1065 66.0435 30.2304C66.8973 31.335 68.3719 31.897 70.5452 31.897C73.3781 31.897 75.5513 30.7343 75.5513 29.2809V16.278Z"
+            fill="black"
+        />
+        <path
+            d="M91.133 11.1426C93.4033 17.4406 95.3242 23.7386 96.993 30.0948C99.205 23.5836 101.087 17.2856 102.542 11.1426H108.15C110.265 17.4406 112.031 23.7386 113.447 30.0948C115.97 23.196 117.949 16.8787 119.404 11.1426H125.71C123.033 20.173 120.064 28.777 116.785 36.8966H109.256C108.402 32.3039 107.044 26.7617 105.22 20.1536C104.056 25.2889 102.445 30.8893 100.33 36.8966H92.8018C90.2793 27.5174 87.5434 18.9522 84.6328 11.1426H91.133Z"
+            fill="black"
+        />
+        <path
+            d="M132.832 7.55758C129.999 7.55758 129.203 6.85996 129.203 3.97257C129.203 1.39523 130.018 0.794495 132.832 0.794495C135.665 0.794495 136.46 1.39523 136.46 3.97257C136.46 6.85996 135.665 7.55758 132.832 7.55758ZM129.649 11.1426H136.053V36.8966H129.649V11.1426Z"
+            fill="black"
+        />
+        <path
+            d="M166.303 11.1426C161.763 17.5956 158.581 21.5295 156.815 22.9441C158.27 23.8937 162.17 28.8933 167.002 36.916H159.628C153.613 27.7887 150.742 23.8549 149.325 23.2542V36.916H142.922V0H149.325V23.2348C150.78 22.169 153.963 18.1382 158.872 11.1426H166.303Z"
+            fill="black"
+        />
+        <path
+            d="M40.973 52.5351L32.0861 43.6985L31.9503 43.7179V43.621L13.0511 24.9595L17.708 20.4637L14.9721 4.76715L1.99103 20.8513C-0.220992 23.0798 -0.628467 26.7036 0.962635 29.3778L9.07337 42.8265C10.3152 44.9 12.566 46.1402 14.9915 46.1208L19.0081 46.082L40.973 52.5351Z"
+            fill="#18B6F6"
+        />
+        <path
+            d="M45.8232 20.5411L44.038 17.2468L43.1066 15.5609L42.738 14.902L42.6992 14.9408L37.8094 6.47238C36.587 4.34075 34.2974 3.02301 31.8137 3.04239L27.5255 3.15865L14.7384 3.19741C12.313 3.21679 10.101 4.49577 8.87853 6.56927L1.09766 21.9945L15.0101 4.72831L33.2496 24.7656L30.0091 28.0406L31.9495 43.7178L31.9689 43.679V43.7178H31.9301L31.9689 43.7565L33.4824 45.2293L40.8364 52.4187C41.1469 52.7094 41.6514 52.3606 41.4379 51.9924L36.8975 43.0589L44.8142 28.4282L45.0664 28.1375C45.1634 28.0212 45.2604 27.905 45.3381 27.7887C46.8904 25.6764 47.1038 22.8472 45.8232 20.5411Z"
+            fill="#AC7EF4"
+        />
+        <path
+            d="M33.3076 24.6882L15.0099 4.74774L17.61 20.3668L12.9531 24.882L31.9105 43.6985L30.203 28.0794L33.3076 24.6882Z"
+            fill="white"
+        />
+    </svg>
+)
--- a/packages/portal/src/components/qr/qr.css
+++ b/packages/portal/src/components/qr/qr.css
@@ -0,0 +1,12 @@
+div img {
+    display: block;
+    background-color: #f0f0f0;
+    width: 350px;
+    height: 350px;
+    object-fit: contain;
+    border-radius: 10px;
+}
+div {
+    display: flex;
+    justify-content: center;
+}
--- a/packages/portal/src/components/qr/qr.tsx
+++ b/packages/portal/src/components/qr/qr.tsx
@@ -0,0 +1,35 @@
+import {
+    component$,
+    useClientEffect$,
+    useStore,
+    useStylesScoped$,
+} from '@builder.io/qwik'
+import { useLocation } from '@builder.io/qwik-city'
+import style from './qr.css?inline'
+
+export const QR = component$(() => {
+    useStylesScoped$(style)
+    const state = useStore({
+        count: 0,
+    })
+
+    useClientEffect$(() => {
+        setInterval(() => {
+            state.count++
+        }, 800)
+    })
+
+    const location = useLocation()
+    const qrImage = location.query?.qr ?? 'qr.png'
+
+    return (
+        <div>
+            <img
+                width={350}
+                height={350}
+                src={qrImage + '?time=' + state.count}
+                alt="QR"
+            />
+        </div>
+    )
+})
--- a/packages/portal/src/components/router-head/router-head.tsx
+++ b/packages/portal/src/components/router-head/router-head.tsx
@@ -0,0 +1,32 @@
+import { component$ } from '@builder.io/qwik'
+import { useDocumentHead, useLocation } from '@builder.io/qwik-city'
+
+export const RouterHead = component$(() => {
+    const head = useDocumentHead()
+    const loc = useLocation()
+
+    return (
+        <>
+            <title>{head.title}</title>
+
+            <link rel="canonical" href={loc.href} />
+            <meta
+                name="viewport"
+                content="width=device-width, initial-scale=1.0"
+            />
+            <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+
+            {head.meta.map((m) => (
+                <meta {...m} />
+            ))}
+
+            {head.links.map((l) => (
+                <link {...l} />
+            ))}
+
+            {head.styles.map((s) => (
+                <style {...s.props} dangerouslySetInnerHTML={s.style} />
+            ))}
+        </>
+    )
+})
--- a/packages/portal/src/entry.dev.tsx
+++ b/packages/portal/src/entry.dev.tsx
@@ -0,0 +1,18 @@
+/*
+ * WHAT IS THIS FILE?
+ *
+ * Development entry point using only client-side modules:
+ * - Do not use this mode in production!
+ * - No SSR
+ * - No portion of the application is pre-rendered on the server.
+ * - All of the application is running eagerly in the browser.
+ * - More code is transferred to the browser than in SSR mode.
+ * - Optimizer/Serialization/Deserialization code is not exercised!
+ */
+import type { RenderOptions } from '@builder.io/qwik'
+import { render } from '@builder.io/qwik'
+import Root from './root'
+
+export default function (opts: RenderOptions) {
+    return render(document, <Root />, opts)
+}
--- a/packages/portal/src/entry.preview.tsx
+++ b/packages/portal/src/entry.preview.tsx
@@ -0,0 +1,20 @@
+/*
+ * WHAT IS THIS FILE?
+ *
+ * It's the bundle entry point for `npm run preview`.
+ * That is, serving your app built in production mode.
+ *
+ * Feel free to modify this file, but don't remove it!
+ *
+ * Learn more about Vite's preview command:
+ * - https://vitejs.dev/config/preview-options.html#preview-options
+ *
+ */
+import { createQwikCity } from '@builder.io/qwik-city/middleware/node'
+import render from './entry.ssr'
+import qwikCityPlan from '@qwik-city-plan'
+
+/**
+ * The default export is the QwikCity adaptor used by Vite preview.
+ */
+export default createQwikCity({ render, qwikCityPlan })
--- a/packages/portal/src/entry.ssr.tsx
+++ b/packages/portal/src/entry.ssr.tsx
@@ -0,0 +1,28 @@
+/**
+ * WHAT IS THIS FILE?
+ *
+ * SSR entry point, in all cases the application is render outside the browser, this
+ * entry point will be the common one.
+ *
+ * - Server (express, cloudflare...)
+ * - npm run start
+ * - npm run preview
+ * - npm run build
+ *
+ */
+import type { RenderToStreamOptions } from '@builder.io/qwik/server'
+import { renderToStream } from '@builder.io/qwik/server'
+import { manifest } from '@qwik-client-manifest'
+import Root from './root'
+
+export default function (opts: RenderToStreamOptions) {
+    return renderToStream(<Root />, {
+        manifest,
+        ...opts,
+        // Use container attributes to set attributes on the html tag.
+        containerAttributes: {
+            lang: 'en-us',
+            ...opts.containerAttributes,
+        },
+    })
+}
--- a/packages/portal/src/global.css
+++ b/packages/portal/src/global.css
@@ -0,0 +1,125 @@
+/**
+ * WHAT IS THIS FILE?
+ *
+ * Globally applied styles. No matter which components are in the page or matching route,
+ * the styles in here will be applied to the Document, without any sort of CSS scoping.
+ *
+ */
+
+:root {
+    --qwik-dark-blue: #1a1a1a;
+    --qwik-light-blue: #349713;
+    --qwik-light-purple: #73da51;
+    --qwik-dark-purple: #3f9622;
+}
+
+body {
+    background-color: #fafafa;
+    font-family: 'Inter', sans-serif, ui-sans-serif, system-ui, -apple-system,
+        BlinkMacSystemFont, sans-serif;
+    padding: 20px 20px 40px 20px;
+}
+
+main {
+    max-width: 760px;
+    margin: 0 auto;
+    background-color: white;
+    border-radius: 5px;
+    box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
+    overflow: hidden;
+}
+
+h1,
+h2 {
+    margin: 0 0 5px 0;
+}
+
+.lightning {
+    filter: hue-rotate(180deg);
+}
+
+section {
+    padding: 20px;
+}
+
+ul {
+    list-style-type: square;
+    margin: 5px 0 30px 0;
+    padding-left: 25px;
+}
+
+li {
+    padding: 8px 0;
+}
+
+li::marker {
+    color: var(--qwik-light-blue);
+}
+
+a,
+a:visited {
+    color: var(--qwik-dark-blue);
+}
+
+a:hover {
+    text-decoration: none;
+}
+
+table.commands {
+    margin: 0 0 30px 0;
+}
+
+.commands td {
+    padding: 5px;
+}
+
+.commands td:first-child {
+    white-space: nowrap;
+    padding-right: 20px;
+}
+
+code {
+    font-family: Menlo, Monaco, Courier New, monospace;
+    font-size: 0.9em;
+    background-color: rgb(224, 224, 224);
+    padding: 2px 4px;
+    border-radius: 3px;
+    border-bottom: 2px solid #bfbfbf;
+}
+
+footer {
+    padding: 15px;
+    text-align: center;
+    font-size: 0.8em;
+}
+
+footer a {
+    text-decoration: none;
+}
+
+footer a:hover {
+    text-decoration: underline;
+}
+
+a.mindblow {
+    margin: 0 auto;
+    display: block;
+    background: var(--qwik-dark-purple);
+    padding: 10px 20px;
+    border-radius: 10px;
+    border: 0;
+    color: white;
+    text-decoration: none;
+    font-size: 20px;
+    width: fit-content;
+    border-bottom: 4px solid black;
+    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'  width='40' height='48' viewport='0 0 100 100' style='fill:black;font-size:24px;'><text y='50%'>🤯</text></svg>")
+            16 0,
+        auto; /*!emojicursor.app*/
+}
+
+a.mindblow:hover {
+    border-bottom-width: 0px;
+    margin-bottom: 4px;
+    transform: translateY(4px);
+}
--- a/packages/portal/src/root.tsx
+++ b/packages/portal/src/root.tsx
@@ -0,0 +1,29 @@
+import { component$, useStyles$ } from '@builder.io/qwik'
+import { QwikCityProvider, RouterOutlet } from '@builder.io/qwik-city'
+import { RouterHead } from './components/router-head/router-head'
+
+import globalStyles from './global.css?inline'
+
+export default component$(() => {
+    /**
+     * The root of a QwikCity site always start with the <QwikCityProvider> component,
+     * immediately followed by the document's <head> and <body>.
+     *
+     * Dont remove the `<head>` and `<body>` elements.
+     */
+    useStyles$(globalStyles)
+
+    return (
+        <QwikCityProvider>
+            <head>
+                <meta charSet="utf-8" />
+                <link rel="preconnect" href="https://rsms.me/" />
+                <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
+                <RouterHead />
+            </head>
+            <body lang="en">
+                <RouterOutlet />
+            </body>
+        </QwikCityProvider>
+    )
+})
--- a/packages/portal/src/routes/index.css
+++ b/packages/portal/src/routes/index.css
@@ -0,0 +1,23 @@
+.page {
+    display: grid;
+    padding: 1rem;
+    gap: 2rem;
+}
+
+.page .qr-section.links {
+    display: flex;
+    gap: 1rem;
+    flex-wrap: wrap;
+}
+
+.page .btn-link {
+    background: white;
+    box-shadow: rgb(0 0 0 / 16%) 0px 10px 36px 0px,
+        rgb(0 0 0 / 6%) 0px 0px 0px 1px;
+    padding: 10px;
+    border-radius: 5px;
+    font-weight: 600;
+    text-decoration: none;
+    color: #1a1a1a;
+    border: solid 1px #afafaf;
+}
--- a/packages/portal/src/routes/index.tsx
+++ b/packages/portal/src/routes/index.tsx
@@ -0,0 +1,61 @@
+import { component$, useStylesScoped$ } from '@builder.io/qwik'
+import type { DocumentHead } from '@builder.io/qwik-city'
+import { QR } from '~/components/qr/qr'
+
+import style from './index.css?inline'
+
+export default component$(() => {
+    useStylesScoped$(style)
+
+    return (
+        <div class={'page'}>
+            <div class={'qr-section'}>
+                <QR />
+            </div>
+            <div class={'qr-section intructions'}>
+                <h1>Whatsapp QR</h1>
+                <p>
+                    Con esta libreria, puedes configurar respuestas
+                    automatizadas para preguntas frecuentes, recibir y responder
+                    mensajes de manera automatizada, y hacer un seguimiento de
+                    las interacciones con los clientes. <br /> Además, nuestro
+                    Chatbot se integra fácilmente con otros sistemas y
+                    herramientas que ya esté utilizando en su negocio.
+                </p>
+                <div class={'qr-section links'}>
+                    <a
+                        class={'btn-link '}
+                        target="_blank"
+                        href="https://bot-whatsapp.netlify.app/"
+                    >
+                        Ver documentación
+                    </a>
+                    <a
+                        class={'btn-link '}
+                        target="_blank"
+                        href="https://www.youtube.com/watch?v=1u0TTbjK5bo&list=PL_WGMLcL4jzViIlmyDZPnhAdkc8RXGkFh"
+                    >
+                        Ver videos
+                    </a>
+                    <a
+                        class={'btn-link '}
+                        target="_blank"
+                        href="https://opencollective.com/bot-whatsapp"
+                    >
+                        Comprar café
+                    </a>
+                </div>
+            </div>
+        </div>
+    )
+})
+
+export const head: DocumentHead = {
+    title: '🤖 Crear chatbot WhatsApp en minutos',
+    meta: [
+        {
+            name: 'description',
+            content: '🤖 Crear chatbot WhatsApp en minutos',
+        },
+    ],
+}
--- a/packages/portal/src/routes/layout.tsx
+++ b/packages/portal/src/routes/layout.tsx
@@ -0,0 +1,20 @@
+import { component$, Slot } from '@builder.io/qwik'
+import Header from '../components/header/header'
+
+export default component$(() => {
+    return (
+        <>
+            <main>
+                <Header />
+                <section>
+                    <Slot />
+                </section>
+            </main>
+            <footer>
+                <a href="https://qwik.builder.io/" target="_blank">
+                    Made with <strong>Qwik</strong>
+                </a>
+            </footer>
+        </>
+    )
+})
--- a/packages/portal/src/routes/service-worker.ts
+++ b/packages/portal/src/routes/service-worker.ts
@@ -0,0 +1,18 @@
+/*
+ * WHAT IS THIS FILE?
+ *
+ * The service-worker.ts file is used to have state of the art prefetching.
+ * https://qwik.builder.io/qwikcity/prefetching/overview/
+ *
+ * Qwik uses a service worker to speed up your site and reduce latency, ie, not used in the traditional way of offline.
+ * You can also use this file to add more functionality that runs in the service worker.
+ */
+import { setupServiceWorker } from '@builder.io/qwik-city/service-worker'
+
+setupServiceWorker()
+
+addEventListener('install', () => self.skipWaiting())
+
+addEventListener('activate', () => self.clients.claim())
+
+declare const self: ServiceWorkerGlobalScope
--- a/packages/portal/tsconfig.json
+++ b/packages/portal/tsconfig.json
@@ -0,0 +1,26 @@
+{
+    "compilerOptions": {
+        "allowJs": true,
+        "target": "ES2017",
+        "module": "ES2020",
+        "lib": ["es2020", "DOM", "WebWorker", "DOM.Iterable"],
+        "jsx": "react-jsx",
+        "jsxImportSource": "@builder.io/qwik",
+        "strict": true,
+        "forceConsistentCasingInFileNames": true,
+        "resolveJsonModule": true,
+        "moduleResolution": "node",
+        "esModuleInterop": true,
+        "skipLibCheck": true,
+        "incremental": true,
+        "isolatedModules": true,
+        "outDir": "tmp",
+        "noEmit": true,
+        "types": ["node", "vite/client"],
+        "paths": {
+            "~/*": ["./src/*"]
+        }
+    },
+    "files": ["./.eslintrc.cjs"],
+    "include": ["src"]
+}
--- a/packages/portal/vite.config.ts
+++ b/packages/portal/vite.config.ts
@@ -0,0 +1,23 @@
+import { defineConfig } from 'vite'
+import { qwikVite } from '@builder.io/qwik/optimizer'
+import { qwikCity } from '@builder.io/qwik-city/vite'
+import tsconfigPaths from 'vite-tsconfig-paths'
+
+export default defineConfig(() => {
+    return {
+        plugins: [
+            qwikCity(),
+            qwikVite({
+                entryStrategy: {
+                    type: 'single',
+                },
+            }),
+            tsconfigPaths(),
+        ],
+        preview: {
+            headers: {
+                'Cache-Control': 'public, max-age=600',
+            },
+        },
+    }
+})
--- a/packages/provider/src/web-whatsapp/index.js
+++ b/packages/provider/src/web-whatsapp/index.js
@@ -24,7 +24,14 @@ class WebWhatsappProvider extends ProviderClass {
        super()
        this.vendor = new Client({
            authStrategy: new LocalAuth(),
-            puppeteer: { headless: true, args: ['--no-sandbox', '--disable-setuid-sandbox', '--unhandled-rejections=strict'] }
+            puppeteer: {
+                headless: true,
+                args: [
+                    '--no-sandbox',
+                    '--disable-setuid-sandbox',
+                    '--unhandled-rejections=strict',
+                ],
+            },
        })

        const listEvents = this.busEvents()
--- a/scripts/move.js
+++ b/scripts/move.js
@@ -10,10 +10,20 @@ const copyLibPkg = async (pkgName, to) => {
    await fs.copy(FROM, TO)
 }

-Promise.all([
-    copyLibPkg('create-bot-whatsapp', appDir),
-    copyLibPkg('bot', appDir),
-    copyLibPkg('database', appDir),
-    copyLibPkg('provider', appDir),
-    copyLibPkg('contexts', appDir),
-]).then(() => console.log('Todas las librerías copiadas'))
+const listLib = [
+    'create-bot-whatsapp',
+    'bot',
+    'database',
+    'provider',
+    'contexts',
+    'portal',
+]
+
+const main = async () => {
+    for (const iterator of listLib) {
+        await copyLibPkg(iterator, appDir)
+        console.log(`${iterator}: Copiado ✅`)
+    }
+}
+
+main()
--- a/yarn.lock
+++ b/yarn.lock
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 500 500"><g clip-path="url(#a)"><circle cx="250" cy="250" r="250" fill="#fff"/><path fill="#18B6F6" d="m367.87 418.45-61.17-61.18-.94.13v-.67L175.7 227.53l32.05-31.13L188.9 87.73 99.56 199.09c-15.22 15.42-18.03 40.51-7.08 59.03l55.83 93.11a46.82 46.82 0 0 0 40.73 22.81l27.65-.27 151.18 44.68Z"/><path fill="#AC7EF4" d="m401.25 196.94-12.29-22.81-6.41-11.67-2.54-4.56-.26.26-33.66-58.63a47.07 47.07 0 0 0-41.27-23.75l-29.51.8-88.01.28a47.07 47.07 0 0 0-40.33 23.34L93.4 207l95.76-119.54L314.7 226.19l-22.3 22.67 13.35 108.54.13-.26v.26h-.26l.26.27 10.42 10.2 50.62 49.78c2.13 2 5.6-.4 4.13-2.96l-31.25-61.85 54.5-101.3 1.73-2c.67-.81 1.33-1.62 1.87-2.42a46.8 46.8 0 0 0 3.34-50.18Z"/><path fill="#fff" d="M315.1 225.65 189.18 87.6l17.9 108.14L175 227l130.5 130.27-11.75-108.14 21.37-23.48Z"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h500v500H0z"/></clipPath></defs></svg>