Merge branch 'main' of https://github.com/weni-ai/chats-webapp into f…

…ix/adjust-translations
weni-ai · Apr 1, 2024 · 0accbbb · 0accbbb
2 parents 3416946 + 90480f0
commit 0accbbb
Show file tree

Hide file tree

Showing 176 changed files with 3,456 additions and 1,488 deletions.
diff --git a/.editorconfig b/.editorconfig
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -3,27 +3,22 @@ module.exports = {
   env: {
     node: true,
   },
-  extends: ['plugin:vue/essential', '@vue/airbnb', 'plugin:prettier/recommended'],
-  plugins: ['prettier'],
+  extends: ['@weni/eslint-config/vue2'],
   parserOptions: {
     parser: '@babel/eslint-parser',
   },
   rules: {
-    'prettier/prettier': [
-      'error',
-      {
-        endOfLine: 'auto',
-      },
-    ],
     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
     'import/extensions': 'off',
     'no-shadow': 'off',
-    camelcase: 'off',
   },
   overrides: [
     {
-      files: ['**/__tests__/*.{j,t}s?(x)', '**/tests/unit/**/*.spec.{j,t}s?(x)'],
+      files: [
+        '**/__tests__/*.{j,t}s?(x)',
+        '**/tests/unit/**/*.spec.{j,t}s?(x)',
+      ],
       env: {
         jest: true,
       },

diff --git a/.github/workflows/test-and-build.yml b/.github/workflows/test-and-build.yml
@@ -0,0 +1,28 @@
+name: Run Unit Tests, Lint Files and Build Project
+on: push
+jobs:
+  lint-test-build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+      - name: Setup Node 18
+        uses: actions/setup-node@v2
+        with:
+          node-version: '18'
+      - name: Install dependencies
+        run: |
+              npm install -g yarn
+              yarn install
+      - name: Run build translations
+        run: yarn translations:build
+      - name: Run lint
+        run: yarn lint
+      - name: Run tests
+        run: yarn test:unit
+      - name: Upload coverage reports to Codecov
+        uses: codecov/codecov-action@v3
+        env:
+          CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
+      - name: Build application
+        run:  yarn build
diff --git a/.prettierrc b/.prettierrc
diff --git a/README.md b/README.md
@@ -1,12 +1,15 @@
 <div align="center">
 
-<img src="https://github.com/Ilhasoft/weni-platform/raw/main/images/logos/png/weni-396x129-color.png" width="100px" />
+<img src="https://github.com/Ilhasoft/weni-webapp/raw/main/src/assets/LogoWeniAnimada.svg" height="100" />
+
+[![Run Unit Tests, Lint Files and Build Project](https://github.com/weni-ai/chats-webapp/actions/workflows/test-and-build.yml/badge.svg?branch=main)](https://github.com/weni-ai/chats-webapp/actions/workflows/test-and-build.yml)
+[![codecov](https://codecov.io/gh/weni-ai/chats-webapp/graph/badge.svg?token=4G62T5ER2Z)](https://codecov.io/gh/weni-ai/chats-webapp)
 
 _This project is a module of [Weni](https://github.com/weni-ai) integrated inside [Weni WebApp (Connect)](https://github.com/weni-ai/weni-webapp)_
 
 <br/>
 
-# CHATS
+# Weni Chats
 
 Chats is the official human service module of the Weni platform.
 

diff --git a/package.json b/package.json
@@ -44,18 +44,19 @@
     "@vue/eslint-config-airbnb": "^6.0.0",
     "@vue/test-utils": "^1.1.3",
     "@vue/vue2-jest": "^27.0.0-alpha.2",
+    "@weni/eslint-config": "^1.0.1",
     "babel-jest": "^27.0.6",
-    "eslint": "^7.32.0",
-    "eslint-config-prettier": "^8.5.0",
+    "eslint": "^7.0.0",
+    "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-import": "^2.25.3",
     "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-vue": "^8.0.3",
+    "eslint-plugin-vue": "^9.22.0",
     "eslint-plugin-vuejs-accessibility": "^1.1.0",
     "jest": "^27.0.5",
-    "prettier": "^2.6.0",
     "sass": "^1.32.7",
     "sass-loader": "^12.0.0",
     "unified-translations": "^1.1.1",
+    "vue-eslint-parser": "^9.4.2",
     "vue-template-compiler": "^2.6.14"
   }
 }
diff --git a/src/App.vue b/src/App.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="app">
-    <router-view />
+    <RouterView />
   </div>
 </template>
 
@@ -41,7 +41,8 @@ export default {
       me: (state) => state.profile.me,
       viewedAgent: (state) => state.dashboard.viewedAgent,
       nextQuickMessages: (state) => state.chats.quickMessages.nextQuickMessages,
-      nextQuickMessagesShared: (state) => state.chats.quickMessagesShared.nextQuickMessagesShared,
+      nextQuickMessagesShared: (state) =>
+        state.chats.quickMessagesShared.nextQuickMessagesShared,
       appToken: (state) => state.config.token,
       appProject: (state) => state.config.project,
     }),
@@ -148,7 +149,9 @@ export default {
     },
 
     async onboarding() {
-      const onboarded = localStorage.getItem('CHATS_USER_ONBOARDED') || (await Profile.onboarded());
+      const onboarded =
+        localStorage.getItem('CHATS_USER_ONBOARDED') ||
+        (await Profile.onboarded());
       if (onboarded) {
         localStorage.setItem('CHATS_USER_ONBOARDED', true);
         return;

diff --git a/src/components/ModalOnBoardingChats.vue b/src/components/ModalOnBoardingChats.vue
@@ -8,7 +8,10 @@
         <div class="modal-background-color">
           <div class="content">
             <div class="on-boarding-chat">
-              <div class="slide" ref="slide">
+              <div
+                class="slide"
+                ref="slide"
+              >
                 <div
                   :style="{ width: `${100 * pages}%` }"
                   class="pages"
@@ -19,10 +22,17 @@
                   @mouseleave.self="startAutoSkip"
                 >
                   <div class="page">
-                    <div class="image" @click="redirectToSettings">
-                      <img src="@/assets/OnBoardingChats/onBoardingChatSectorImage.png" />
+                    <div
+                      class="image"
+                      @click="redirectToSettings"
+                    >
+                      <img
+                        src="@/assets/OnBoardingChats/onBoardingChatSectorImage.png"
+                      />
+                    </div>
+                    <div class="title">
+                      {{ $t('on_boarding.title_sector') }}
                     </div>
-                    <div class="title">{{ $t('on_boarding.title_sector') }}</div>
                     <div class="description">
                       <span>
                         {{ $t('on_boarding.description_sector') }}
@@ -31,24 +41,40 @@
                     </div>
                   </div>
                   <div class="page">
-                    <div class="image" @click="redirectToSettings">
-                      <img src="@/assets/OnBoardingChats/onBoardingChatRowImage.png" />
+                    <div
+                      class="image"
+                      @click="redirectToSettings"
+                    >
+                      <img
+                        src="@/assets/OnBoardingChats/onBoardingChatRowImage.png"
+                      />
+                    </div>
+                    <div class="title">
+                      {{ $t('on_boarding.title_queues') }}
+                    </div>
+                    <div class="description">
+                      {{ $t('on_boarding.description_queues') }}
                     </div>
-                    <div class="title">{{ $t('on_boarding.title_queues') }}</div>
-                    <div class="description">{{ $t('on_boarding.description_queues') }}</div>
                   </div>
                   <div class="page">
-                    <div class="image" @click="redirectToSettings">
-                      <img src="@/assets/OnBoardingChats/onBoardingChatTagsImage.png" />
+                    <div
+                      class="image"
+                      @click="redirectToSettings"
+                    >
+                      <img
+                        src="@/assets/OnBoardingChats/onBoardingChatTagsImage.png"
+                      />
                     </div>
                     <div class="title">{{ $t('on_boarding.title_tags') }}</div>
-                    <div class="description">{{ $t('on_boarding.description_tags') }}</div>
+                    <div class="description">
+                      {{ $t('on_boarding.description_tags') }}
+                    </div>
                   </div>
                 </div>
               </div>
 
               <div class="controlers">
-                <unnnic-icon
+                <UnnnicIcon
                   icon="arrow-left-1-1"
                   size="sm"
                   scheme="neutral-cleanest"
@@ -71,7 +97,7 @@
                   ></div>
                 </div>
 
-                <unnnic-icon
+                <UnnnicIcon
                   icon="arrow-right-1-1"
                   size="sm"
                   scheme="neutral-cleanest"
@@ -151,7 +177,10 @@ export default {
       this.startAutoSkip();
     },
     redirectToSettings() {
-      window.parent.postMessage({ event: 'chats:redirect', path: 'chats-settings:settings' }, '*');
+      window.parent.postMessage(
+        { event: 'chats:redirect', path: 'chats-settings:settings' },
+        '*',
+      );
     },
   },
 
@@ -256,7 +285,10 @@ export default {
         width: 0.25rem;
         height: 0.25rem;
         border-radius: 0.25rem;
-        background-color: rgba($unnnic-color-neutral-cleanest, $unnnic-opacity-level-overlay);
+        background-color: rgba(
+          $unnnic-color-neutral-cleanest,
+          $unnnic-opacity-level-overlay
+        );
         transition: all 0.5s;
 
         &.active {

diff --git a/src/components/ModalProgressBarFalse.vue b/src/components/ModalProgressBarFalse.vue
@@ -2,7 +2,11 @@
   <!-- unnnic-modal was not used due to its variation
    for mobile to be outside the design proposed here -->
   <section class="modal-progress-bar-false">
-    <unnnic-progress-bar v-model="progress" :type="type" :title="title" />
+    <UnnnicProgressBar
+      v-model="progress"
+      :type="type"
+      :title="title"
+    />
   </section>
 </template>
 

diff --git a/src/components/PreferencesBar.vue b/src/components/PreferencesBar.vue
@@ -11,19 +11,27 @@
       ref="header"
       class="header"
       @mousedown.prevent
-      @click.stop="open ? $refs['preferences-bar'].blur() : $refs['preferences-bar'].focus()"
+      @click.stop="
+        open
+          ? $refs['preferences-bar'].blur()
+          : $refs['preferences-bar'].focus()
+      "
     >
       <div class="label">
         <div class="icon">
-          <unnnic-icon size="md" icon="tune" scheme="neutral-cloudy" />
+          <UnnnicIcon
+            size="md"
+            icon="tune"
+            scheme="neutral-cloudy"
+          />
         </div>
 
         <div class="text">
           {{ $t('preferences.title') }}
         </div>
 
         <div class="status-icon">
-          <unnnic-icon
+          <UnnnicIcon
             size="md"
             :icon="open ? 'expand_less' : 'expand_more'"
             scheme="neutral-darkest"
@@ -35,38 +43,40 @@
     <div class="options-container">
       <div class="label">Status</div>
 
-      <unnnic-switch
+      <UnnnicSwitch
         :value="$store.state.config.status === 'ONLINE'"
         size="small"
-        :text-right="
-          $store.state.config.status === 'ONLINE' ? $t('status.online') : $t('status.offline')
+        :textRight="
+          $store.state.config.status === 'ONLINE'
+            ? $t('status.online')
+            : $t('status.offline')
         "
         @input="updateStatus"
         :disabled="loadingStatus"
       />
 
       <div class="label">{{ $t('preferences.notifications.title') }}</div>
 
-      <unnnic-switch
+      <UnnnicSwitch
         v-model="sound"
         size="small"
-        :text-right="$t('preferences.notifications.sound')"
+        :textRight="$t('preferences.notifications.sound')"
         @input="changeSound"
       />
 
-      <unnnic-button
+      <UnnnicButton
         @mousedown.prevent
         :text="$t('quick_messages.title')"
-        icon-left="bolt"
+        iconLeft="bolt"
         type="secondary"
         size="small"
         @click="openQuickMessage"
       />
-      <unnnic-button
+      <UnnnicButton
         @mousedown.prevent
         v-if="this.dashboard"
         text="Dashboard"
-        icon-left="bar_chart_4_bars"
+        iconLeft="bar_chart_4_bars"
         type="secondary"
         size="small"
         @click="navigate('dashboard.manager')"
@@ -101,7 +111,9 @@ export default {
   async created() {
     this.getStatus();
     this.sound = (localStorage.getItem(PREFERENCES_SOUND) || 'yes') === 'yes';
-    window.dispatchEvent(new CustomEvent(`${this.help ? 'show' : 'hide'}BottomRightOptions`));
+    window.dispatchEvent(
+      new CustomEvent(`${this.help ? 'show' : 'hide'}BottomRightOptions`),
+    );
   },
 
   methods: {
@@ -130,7 +142,9 @@ export default {
     },
 
     async getStatus() {
-      const response = await Profile.status({ projectUuid: this.$store.state.config.project });
+      const response = await Profile.status({
+        projectUuid: this.$store.state.config.project,
+      });
       this.$store.state.config.status = response.data.connection_status;
     },
 
@@ -143,7 +157,10 @@ export default {
         props: {
           text: `${this.$t('status_agent')} ${connectionStatus}`,
           icon: 'indicator',
-          scheme: connectionStatus === 'online' ? 'feedback-green' : '$unnnic-color-neutral-black',
+          scheme:
+            connectionStatus === 'online'
+              ? 'feedback-green'
+              : '$unnnic-color-neutral-black',
           closeText: 'Fechar',
           position: 'bottom-right',
         },