[ENGAGE-2378] - Configure logic to separate weni framework and opinionated

package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "cross-env NODE_ENV=development rspack server",
+    "dev": "cross-env NODE_ENV=development rspack dev --port 3002",
     "build": "cross-env NODE_ENV=production rspack build",
     "test": "vitest",
     "test:ui": "vitest --ui",
@@ -15,10 +15,7 @@
     "@rspack/core": "^1.1.5",
     "@sentry/browser": "^8.42.0",
     "@sentry/integrations": "^5.29.2",
-    "@vitejs/plugin-vue": "^5.1.4",
-    "@vitejs/plugin-vue-jsx": "^4.0.1",
-    "@vue/web-component-wrapper": "^1.2.0",
-    "@weni/unnnic-system": "^2.14.2",
+    "@weni/unnnic-system": "^2.18.0",
     "axios": "^1.7.9",
     "cross-env": "^7.0.3",
     "dompurify": "^3.1.6",
@@ -33,14 +30,12 @@
     "marked": "^14.0.0",
     "moment-timezone": "^0.5.33",
     "pdfmake": "^0.2.4",
+    "pinia": "^2.3.0",
     "qrcode.vue": "^3.4.1",
     "rck-image": "^1.0.0",
     "sass-loader": "^16.0.4",
-    "v-click-outside": "^3.1.2",
     "v3-infinite-loading": "^1.3.2",
-    "vite": "^5.3.4",
-    "vite-svg-loader": "^5.1.0",
-    "vue": "3.5.6",
+    "vue": "3.5.11",
     "vue-debounce": "^2.6.0",
     "vue-i18n": "^10.0.1",
     "vue-loader": "^17.4.2",
@@ -49,29 +44,25 @@
     "yaml": "1"
   },
   "devDependencies": {
-    "@babel/core": "^7.12.3",
     "@babel/eslint-parser": "^7.25.9",
-    "@babel/preset-env": "^7.12.1",
+    "@babel/preset-env": "^7.26.0",
     "@stripe/stripe-js": "^4.5.0",
+    "@vitejs/plugin-vue": "^5.1.4",
+    "@vitejs/plugin-vue-jsx": "^4.0.1",
     "@vitest/coverage-v8": "^2.0.4",
     "@vitest/ui": "^2.0.4",
-    "@vue/compiler-sfc": "3.5.6",
     "@vue/test-utils": "^2.4.6",
     "@weni/eslint-config": "^1.0.4",
-    "babel-loader": "^8.1.0",
     "eslint": "^8.0.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.0.0",
     "eslint-plugin-vue": "^9.21.1",
-    "git-describe": "^4.0.4",
-    "jsdom": "^24.1.1",
+    "jsdom": "^25.0.1",
     "prettier": "^3.3.3",
     "sass": "^1.82.0",
-    "vitest": "^2.0.4",
-    "vue-eslint-parser": "^9.4.2",
-    "vue-stripe-js": "^1.0.2",
-    "webpack": "^5.97.0",
-    "webpack-cli": "^5.1.4"
+    "vite": "^5.3.4",
+    "vite-svg-loader": "^5.1.0",
+    "vue-stripe-js": "^1.0.2"
   },
   "browserslist": [
     "> 1%",

rspack.config.js

@@ -5,6 +5,7 @@ const { VueLoaderPlugin } = require('vue-loader');
 const { resolve } = require('path');
 const path = require('path');
 const dotenv = require('dotenv');
+const { dependencies } = require('./package.json');
 
 dotenv.config();
 
@@ -15,7 +16,8 @@ module.exports = defineConfig({
   context: __dirname,
   devServer: {
     historyApiFallback: true,
-    hot: true,
+    hot: false,
+    liveReload: true,
     static: {
       directory: path.join(__dirname, 'dist'),
       publicPath: '/',
@@ -35,7 +37,7 @@ module.exports = defineConfig({
     main: './src/main.js',
   },
   resolve: {
-    extensions: ['...', '.ts', '.vue'],
+    extensions: ['...', '.ts', 'js', '.vue'],
     alias: {
       '@': resolve(__dirname, 'src'),
     },
@@ -85,6 +87,30 @@ module.exports = defineConfig({
       }),
     }),
     new VueLoaderPlugin(),
+    new rspack.container.ModuleFederationPlugin({
+      name: 'host',
+      remotes: {
+        remote: 'remote@http://localhost:3001/remoteEntry.js',
+      },
+      exposes: {},
+      shared: {
+        vue: {
+          eager: true,
+          singleton: true,
+        },
+        'vue-i18n': {
+          singleton: true,
+          requiredVersion: dependencies['vue-i18n'],
+          eager: true,
+        },
+        pinia: {
+          singleton: true,
+          requiredVersion: dependencies['pinia'],
+          eager: true,
+        }
+      },
+      filename: 'remoteEntry.js',
+    }),
   ],
   optimization: {
     minimizer: [

src/components/Prototype.vue

@@ -0,0 +1,27 @@
+<script setup>
+import { defineAsyncComponent } from 'vue';
+
+const RemoteMFE = defineAsyncComponent(() => import('remote/solution-card'));
+
+const props = defineProps({
+  auth: {
+    type: Object || null,
+    default: null,
+  },
+});
+
+</script>
+
+<template>
+  <RemoteMFE 
+    v-if="!!RemoteMFE && props.auth.token && props.auth.uuid"        
+    type="remote"
+    :auth="{
+      token: `Bearer ${props.auth.token}`,
+      uuid: props.auth.uuid,
+    }"
+  />
+</template>
+
+<style scoped>
+</style>

src/components/Sidebar/Sidebar.vue

@@ -133,6 +133,7 @@ import {
 } from '@/components/orgs/orgListItem.vue';
 import brainAPI from '../../api/brain';
 import getEnv from '../../utils/env.js';
+import { PROJECT_COMMERCE } from '../../utils/constants.js';
 
 import { useStore } from 'vuex';
 import { useRoute } from 'vue-router';
@@ -262,6 +263,42 @@ watch(
 );
 
 const options = computed(() => {
+
+  const isShortOptions = [
+    [
+      {
+        label: i18n.global.t('SIDEBAR.HOME'),
+        icon: 'home',
+        viewUrl: `/projects/${get(project.value, 'uuid')}`,
+        type: 'isExactActive',
+      },
+      {
+        label: i18n.global.t('SIDEBAR.BRAIN'),
+        icon: 'neurology',
+        viewUrl: `/projects/${get(project.value, 'uuid')}/brain`,
+        tag: BrainOn.value ? i18n.global.t('SIDEBAR.ACTIVE') : null,
+        type: 'isActive',
+      },
+      {
+        label: i18n.global.t('SIDEBAR.INTEGRATIONS'),
+        icon: 'browse',
+        viewUrl: `/projects/${get(project.value, 'uuid')}/integrations`,
+        type: 'isActive',
+        disabledModal: {
+          title: i18n.global.t('SIDEBAR.modules.integrations.title'),
+          description: i18n.global.t(
+            'SIDEBAR.modules.integrations.description',
+          ),
+          image: gifIntegrations,
+        } 
+      }
+    ],
+  ];
+
+  if(project.project_type === PROJECT_COMMERCE) {
+    return isShortOptions
+  }
+
   const chatsModule = {
     label: i18n.global.t('SIDEBAR.chats'),
     icon: 'forum',

src/locales/en.json

@@ -260,7 +260,103 @@
     "intelligence": "API artificial intelligence",
     "nexus": "API nexus"
   },
+  "discovery": {
+    "title": "Discovery"
+  },
+  "integrated_solutions": {
+    "title": "Configured solutions"
+  },
+  "active_notifications": {
+    "title": "Active notifications"
+  },
+  "active_notification": {
+    "title": "Active notification"
+  },
+  "passive_support": {
+    "title": "Passive support"
+  },
+  "passive_service": {
+    "title": "Passive service"
+  },
+  "integrate_skills": {
+    "title": "Integrate commerce skills"
+  },
+  "solutions": {
+    "states": {
+      "empty": {
+        "title": "No results found",
+        "description": "Try another keyword or check the spelling"
+      }
+    },
+    "actions": {
+      "see_details": "See details",
+      "settings": "Settings",
+      "disable_solution": "Disable solution"
+    },
+    "disable": {
+      "confirmation": {
+        "title": "Disable “{name}”",
+        "description": {
+          "container": "{0} If deactivated, this tool will no longer work in your project.",
+          "0": "Do you want to deactivate the “{name}” solution?"
+        }
+      }
+    },
+    "details": {
+      "view_settings": "View settings"
+    },
+    "integrate": {
+      "help": {
+        "container": "{0} If you have any questions about how to fill in the fields below, please consult the {1}.",
+        "0": "Need help?",
+        "1": "integration documentation"
+      },
+      "button_label": "Integrate",
+      "status": {
+        "created": "Solution successfully configured",
+        "removed": "Solution successfully disabled"
+      }
+    },
+    "abandoned_cart": {
+      "title": "Abandoned cart",
+      "description": "Recover sales by reminding customers of items forgotten in the cart.",
+      "tip": "With this solution, you can increase your chances of conversion by keeping your customer close and encouraging them to complete their order."
+    },
+    "order_status": {
+      "title": "Order status",
+      "description": "Inform your customers about the progress of their orders in real time.",
+      "tip": "With this solution, it is possible to improve communication with the customer and reduce uncertainty about the purchasing process, increasing satisfaction and loyalty over time."
+    },
+    "recurring_purchase": {
+      "title": "Recurring purchase",
+      "description": "Facilitate the automatic purchase of products with a subscription solution.",
+      "tip": "With this solution, you can increase customer retention and generate recurring sales, providing an effortless shopping experience for the consumer."
+    },
+    "order_status_passive": {
+      "title": "Order status (Passive)",
+      "description": "Offer customers a practical way to check the status of their order.",
+      "tip": "With this solution, you reduce the volume of manual queries and improve transparency, allowing the customer to always feel informed and in control of the purchasing process."
+    },
+    "refer_and_win": {
+      "title": "Refer and win",
+      "description": "Encourage customers to recommend your store to friends and family with a rewards program.",
+      "tip": "With this solution, you can expand your customer base organically and increase engagement, turning satisfied consumers into active promoters of your brand."
+    }
+  },
   "common": {
+    "cancel": "Cancel",
+    "continue": "Continue",
+    "finish_and_save": "Finish and save",
+    "confirm": "Confirm",
+    "save": "Save",
+    "back": "Back",
+    "integrate": "Integrate",
+    "integrated": "Integrated",
+    "errors": {
+      "unauthorized": "You don't have permission to perform this action",
+      "internal_server_error": "Internal server error",
+      "unexpected_error": "An unexpected error has occurred"
+    },
     "see_all": "See all",
     "months": [
       "January",