feat(commerce): adds mvp navigation mocked

src/api/solutions.ts

@@ -0,0 +1,73 @@
+import { i18n } from '@/locales';
+
+function sleep(timeInMs) {
+  return new Promise((resolve) => {
+    setTimeout(resolve, timeInMs);
+  });
+}
+
+export default {
+  async listIntegratedByCategory({ category }) {
+    await sleep(500);
+
+    return [
+      // {
+      //   id: 'abandoned_cart',
+      //   title: i18n.global.t('solutions.abandoned_cart.title'),
+      //   description: i18n.global.t(
+      //     'solutions.abandoned_cart.description',
+      //   ),
+      // },
+    ];
+  },
+
+  async listByCategory({ category }) {
+    await sleep(500);
+
+    if (category === 'active') {
+      return [
+        {
+          id: 'abandoned_cart',
+          title: i18n.global.t('solutions.abandoned_cart.title'),
+          description: i18n.global.t('solutions.abandoned_cart.description'),
+        },
+        {
+          id: 'order_status',
+          title: i18n.global.t('solutions.order_status.title'),
+          description: i18n.global.t('solutions.order_status.description'),
+        },
+        {
+          id: 'recurring_purchase',
+          title: i18n.global.t('solutions.recurring_purchase.title'),
+          description: i18n.global.t(
+            'solutions.recurring_purchase.description',
+          ),
+        },
+      ];
+    } else if (category === 'passive') {
+      return [
+        {
+          id: 'order_status_passive',
+          title: i18n.global.t('solutions.order_status_passive.title'),
+          description: i18n.global.t(
+            'solutions.order_status_passive.description',
+          ),
+        },
+        {
+          id: 'refer_and_win',
+          title: i18n.global.t('solutions.refer_and_win.title'),
+          description: i18n.global.t('solutions.refer_and_win.description'),
+          globals: [
+            'VTEX API App Key',
+            'VTEX API App Token',
+            'VTEX API App Key MD',
+            'VTEX API App Token MD',
+            'URL API Vtex',
+          ],
+        },
+      ];
+    } else {
+      return [];
+    }
+  },
+};

src/components/Drawer.vue

@@ -16,8 +16,8 @@
         <header class="drawer__header">
           <Header
             :title="title"
-            icon="business_messages"
-            iconScheme="aux-orange-500"
+            :icon="icon"
+            :iconScheme="iconScheme"
             fontFamily="secondary"
             fontSize="title-md"
           />
@@ -53,6 +53,8 @@ import { onUnmounted, watch } from 'vue';
 const props = defineProps<{
   isOpen: boolean;
   title: string;
+  icon: string;
+  iconScheme: string;
 }>();
 
 const emit = defineEmits<{

src/components/solutions/DrawerSolution.vue

@@ -71,12 +71,19 @@ import SelectSmart from '@/components/SelectSmart.vue';
 import { ref, useTemplateRef } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useAlertStore } from '@/stores/Alert';
+import { useSolutionsStore } from '@/stores/Solutions';
 import { useRouter } from 'vue-router';
 
+const props = defineProps<{
+  id: string;
+  category: 'activeNotifications' | 'passiveService';
+}>();
+
 const { t } = useI18n();
 
 const router = useRouter();
 const alertStore = useAlertStore();
+const solutionsStore = useSolutionsStore();
 
 const drawerRef = useTemplateRef('drawer');
 
@@ -90,6 +97,10 @@ function close() {
 function save() {
   close();
 
+  solutionsStore.integrate({
+    id: props.id,
+  });
+
   alertStore.add({
     type: 'success',
     text: t('solutions.integrate.status.created'),

src/components/solutions/SolutionsGroup.vue

@@ -12,6 +12,7 @@
         :key="index"
         :title="solution.title"
         :description="solution.description"
+        :options="getOptionsBySolution(solution)"
         @add="openIntegrateSolutionModal(solution)"
       />
     </section>
@@ -25,9 +26,49 @@
     />
 
     <DrawerSolution
+      :id="solutionToIntegrate.solution?.id || ''"
       v-model:isOpen="isOpen"
       :title="solutionToIntegrate.solution?.title || ''"
+      :category="category"
+      :icon="icon"
+      :iconScheme="iconScheme"
     />
+
+    <UnnnicModalDialog
+      v-model="solutionToDisintegrate.isOpen"
+      class="modal-disable-solution"
+      type="warning"
+      :showCloseIcon="true"
+      :title="
+        $t('solutions.disable.confirmation.title', {
+          name: solutionToDisintegrate.solution?.title,
+        })
+      "
+      showActionsDivider
+      :secondaryButtonProps="{
+        text: $t('common.cancel'),
+      }"
+      :primaryButtonProps="{
+        text: $t('common.confirm'),
+      }"
+      @secondary-button-click="solutionToDisintegrate.isOpen = false"
+      @primary-button-click="disintegrate"
+    >
+      <I18nT
+        keypath="solutions.disable.confirmation.description.container"
+        tag="p"
+        scope="global"
+        class="modal-disable-solution__description"
+      >
+        <b>
+          {{
+            $t('solutions.disable.confirmation.description.0', {
+              name: solutionToDisintegrate.solution?.title,
+            })
+          }}
+        </b>
+      </I18nT>
+    </UnnnicModalDialog>
   </section>
 </template>
 
@@ -38,9 +79,12 @@ import Header from '@/components/Header.vue';
 import SolutionCard from '@/components/solutions/SolutionCard.vue';
 import ModalIntegrate from '@/components/solutions/ModalIntegrate.vue';
 import DrawerSolution from '@/components/solutions/DrawerSolution.vue';
+import { useSolutionsStore } from '@/stores/Solutions';
 
 const { t } = useI18n();
 
+const solutionsStore = useSolutionsStore();
+
 const isOpen = ref(false);
 
 type Solution = {
@@ -53,12 +97,25 @@ defineProps<{
   title: string;
   icon: string;
   iconScheme: string;
+  category: 'activeNotifications' | 'passiveService';
   solutions: Solution[];
 }>();
 
+const solutionToDisintegrate = reactive<{
+  isOpen: boolean;
+  solution: null | {
+    id: string;
+    title: string;
+  };
+}>({
+  isOpen: false,
+  solution: null,
+});
+
 const solutionToIntegrate = reactive<{
   isOpen: boolean;
   solution: null | {
+    id: string;
     title: string;
     description: string;
     tip: string;
@@ -68,15 +125,61 @@ const solutionToIntegrate = reactive<{
   solution: null,
 });
 
+function getOptionsBySolution(solution) {
+  const integrated = [
+    solutionsStore.integrated.activeNotifications.data,
+    solutionsStore.integrated.passiveService.data,
+  ].flat();
+
+  if (integrated.some((integrated) => integrated.id === solution.id)) {
+    return [
+      {
+        icon: 'visibility',
+        title: t('solutions.actions.see_details'),
+      },
+      {
+        icon: 'settings',
+        title: t('solutions.actions.settings'),
+      },
+      {
+        type: 'separator',
+      },
+      {
+        icon: 'do_not_disturb_on',
+        title: t('solutions.actions.disable_solution'),
+        scheme: 'aux-red-500',
+        onClick: openDisable.bind(this, solution),
+      },
+    ];
+  } else {
+    return undefined;
+  }
+}
+
 function openIntegrateSolutionModal(solution: Solution) {
   solutionToIntegrate.isOpen = true;
 
   solutionToIntegrate.solution = {
+    id: solution.id,
     title: t(`solutions.${solution.id}.title`),
     description: t(`solutions.${solution.id}.description`),
     tip: t(`solutions.${solution.id}.tip`),
   };
 }
+
+function openDisable(solution) {
+  solutionToDisintegrate.isOpen = true;
+
+  solutionToDisintegrate.solution = solution;
+}
+
+function disintegrate() {
+  solutionToDisintegrate.isOpen = false;
+
+  solutionsStore.disintegrate({ id: solutionToDisintegrate.solution?.id });
+
+  solutionToDisintegrate.solution = null;
+}
 </script>
 
 <style lang="scss" scoped>

src/components/solutions/SolutionsGroupSkeletonLoading.vue

@@ -0,0 +1,48 @@
+<template>
+  <section class="solutions__group">
+    <header class="solutions__header">
+      <UnnnicSkeletonLoading
+        width="40px"
+        height="40px"
+      />
+
+      <UnnnicSkeletonLoading
+        width="180px"
+        height="28px"
+      />
+    </header>
+
+    <section class="solutions__list">
+      <UnnnicSkeletonLoading
+        v-for="i in 4"
+        :key="i"
+        height="162px"
+      />
+    </section>
+  </section>
+</template>
+
+<style lang="scss" scoped>
+.solutions {
+  &__group {
+    display: flex;
+    flex-direction: column;
+    row-gap: $unnnic-spacing-sm;
+  }
+
+  &__header {
+    display: flex;
+    align-items: center;
+    column-gap: $unnnic-spacing-sm;
+  }
+
+  &__list {
+    display: grid;
+    grid-template-columns: repeat(
+      auto-fill,
+      minmax(15.625 * $unnnic-font-size, 1fr)
+    );
+    gap: $unnnic-spacing-sm;
+  }
+}
+</style>