feat(my-history): add modal to confirm disable history queries

package.json

@@ -25,7 +25,7 @@
   },
   "dependencies": {
     "@empathyco/x-adapter": "^8.0.0-alpha.3",
-    "@empathyco/x-components": "^3.0.0-alpha.130",
+    "@empathyco/x-components": "^3.0.0-alpha.132",
     "@empathyco/x-adapter-platform": "^1.0.0-alpha.25",
     "@empathyco/x-deep-merge": "^1.3.0-alpha.19",
     "@empathyco/x-types": "^10.0.0-alpha.27",

src/App.vue

@@ -5,7 +5,7 @@
     <DeviceDetector @DeviceProvided="$setLocaleDevice" :breakpoints="breakpoints" />
     <Tagging />
     <UrlHandler env="env" />
-    <XModal v-if="isOpen" :openEvents="openEvents" />
+    <XModal v-if="isOpen" :openEvents="openEvents" :closeEvents="closeEvents" />
   </div>
 </template>
 
@@ -37,11 +37,8 @@
       desktop: Number.POSITIVE_INFINITY
     };
     protected isOpen = false;
-    protected openEvents: XEvent[] = [
-      'UserClickedOpenEventsModal',
-      'UserOpenXProgrammatically',
-      'UserClickedOpenX'
-    ];
+    protected openEvents: XEvent[] = ['UserOpenXProgrammatically', 'UserClickedOpenX'];
+    protected closeEvents: XEvent[] = ['UserClickedCloseX'];
 
     @XOn((component: Vue) => (component as Layer).openEvents)
     open(): void {

src/components/desktop/desktop.vue

@@ -69,6 +69,7 @@
       >
         <DesktopMyHistoryAside />
       </BaseIdModal>
+      <MyHistoryConfirmDisableModal />
     </template>
 
     <template #scroll-to-top>
@@ -101,10 +102,12 @@
   import SearchBox from '../search-box.vue';
   import HasSearchedMixin from '../has-searched.mixin';
   import DesktopMyHistoryAside from '../my-history/desktop-my-history-aside.vue';
+  import MyHistoryConfirmDisableModal from '../my-history/my-history-confirm-disable-modal.vue';
   import DesktopToolbar from './desktop-toolbar.vue';
 
   @Component({
     components: {
+      MyHistoryConfirmDisableModal,
       BaseVariableColumnGrid,
       BaseIdModal,
       CartIcon,

src/components/mobile/mobile.vue

@@ -74,6 +74,7 @@
       >
         <MobileMyHistoryAside />
       </BaseIdModal>
+      <MyHistoryConfirmDisableModal class="x-layout__aside--extra x-background--transparent" />
     </template>
   </SingleColumnLayout>
 </template>
@@ -98,12 +99,14 @@
   import SearchBox from '../search-box.vue';
   import HasSearchedMixin from '../has-searched.mixin';
   import MobileMyHistoryAside from '../my-history/mobile-my-history-aside.vue';
+  import MyHistoryConfirmDisableModal from '../my-history/my-history-confirm-disable-modal.vue';
   import MobileCloseAside from './mobile-close-aside.vue';
   import MobileOpenAside from './mobile-open-aside.vue';
   import MobileToolbar from './mobile-toolbar.vue';
 
   @Component({
     components: {
+      MyHistoryConfirmDisableModal,
       ArrowLeftIcon,
       BaseIdModal,
       BaseIdModalOpen,
@@ -132,10 +135,22 @@
 </script>
 <style lang="scss">
   .x-mobile {
-    .x-modal__content {
-      background-color: var(--x-color-base-transparent) !important;
+    .x-modal {
+      &__content {
+        background-color: var(--x-color-base-transparent) !important;
+      }
+      &.x-layout__aside:not(.x-layout__aside--extra) {
+        .x-modal__content {
+          height: calc(100% - 64px) !important;
+          top: 64px;
+          position: fixed;
+          border-top-right-radius: 16px;
+          border-top-left-radius: 16px;
+        }
+      }
     }
-    .x-layout__aside {
+
+    .x-layout__aside:not(.x-background--transparent) {
       .x-modal__content {
         background-color: var(--x-color-base-neutral-100) !important;
       }

src/components/my-history/custom-my-history.vue

@@ -4,7 +4,7 @@
       v-if="$x.device === 'desktop'"
       class="x-list x-background--neutral-10 x-list--align-center"
     >
-      <MyHistoryIcon v-if="isMyHistoryEnabled" />
+      <MyHistoryIcon v-if="areHistoryQueriesEnabled" />
       <MyHistoryIconBw v-else />
     </div>
     <div class="x-list x-list__item--expand" :class="{ 'x-scroll': $x.device === 'desktop' }">
@@ -14,7 +14,7 @@
         :class="$x.device === 'desktop' ? 'x-list--align-center' : 'x-list--align-end'"
       >
         <MyHistoryIcon
-          v-if="isMyHistoryEnabled"
+          v-if="areHistoryQueriesEnabled"
           :class="{ 'x-margin--right-05': $x.device === 'mobile' }"
         />
         <MyHistoryIconBw v-else :class="{ 'x-margin--right-05': $x.device === 'mobile' }" />
@@ -33,8 +33,32 @@
           class="x-list x-list--gap-05 x-title3 x-font-color--neutral-35"
         ></div>
       </div>
+      <div
+        class="
+          x-padding--top-06 x-padding--bottom-07
+          x-list x-list--horizontal x-list--align-center
+          x-border-color--neutral-95
+          x-border-width--top-01
+        "
+        :class="$x.device === 'desktop' ? 'x-padding--07' : 'x-padding--05'"
+      >
+        <div class="x-list__item x-list__item--expand x-list x-list--gap-02">
+          <span class="x-title3 x-font-weight--bold">{{ $t('myHistory.switch.title') }}</span>
+          <span class="x-font-color--neutral-35">
+            {{
+              areHistoryQueriesEnabled
+                ? $t('myHistory.switch.disable')
+                : $t('myHistory.switch.enable')
+            }}
+          </span>
+        </div>
+        <HistoryQueriesSwitch />
+      </div>
       <div class="x-list x-list__item--expand x-border-color--neutral-95 x-border-width--top-01">
-        <MyHistory v-if="isMyHistoryEnabled && $x.fullHistoryQueries.length" :animation="animation">
+        <MyHistory
+          v-if="areHistoryQueriesEnabled && $x.fullHistoryQueries.length"
+          :animation="animation"
+        >
           <template #date="{ date }">
             <div
               class="
@@ -70,7 +94,7 @@
         <div v-else class="x-list x-list--align-center x-list__item--expand">
           <NoHistoryIcon
             class="x-flex-no-shrink"
-            :class="{ 'x-no-history-icon--bw': !isMyHistoryEnabled }"
+            :class="{ 'x-no-history-icon--bw': !areHistoryQueriesEnabled }"
           />
           <span
             class="
@@ -90,9 +114,14 @@
 </template>
 
 <script lang="ts">
-  import { CrossTinyIcon, HistoryIcon, StaggeredFadeAndSlide } from '@empathyco/x-components';
-  import { MyHistory } from '@empathyco/x-components/history-queries';
-  import { Component, Prop, Vue } from 'vue-property-decorator';
+  import {
+    CrossTinyIcon,
+    HistoryIcon,
+    StaggeredFadeAndSlide,
+    State
+  } from '@empathyco/x-components';
+  import { MyHistory, HistoryQueriesSwitch } from '@empathyco/x-components/history-queries';
+  import { Component, Vue } from 'vue-property-decorator';
   import MyHistoryIcon from './my-history-icon.vue';
   import MyHistoryIconBw from './my-history-icon-bw.vue';
   import NoHistoryIcon from './no-history-icon.vue';
@@ -104,14 +133,15 @@
       MyHistory,
       MyHistoryIcon,
       MyHistoryIconBw,
-      NoHistoryIcon
+      NoHistoryIcon,
+      HistoryQueriesSwitch
     }
   })
   export default class CustomMyHistory extends Vue {
     protected animation = StaggeredFadeAndSlide;
 
-    @Prop({ default: true })
-    public isMyHistoryEnabled!: boolean;
+    @State('historyQueries', 'isEnabled')
+    public areHistoryQueriesEnabled!: boolean;
   }
 </script>
 

src/components/my-history/my-history-confirm-disable-modal.vue

@@ -0,0 +1,81 @@
+<template>
+  <BaseEventsModal
+    @focusin.native.stop
+    class="x-my-history-confirm-disable-modal x-layout__aside"
+    :eventsToOpenModal="eventsToOpenModal"
+    :eventsToCloseModal="eventsToCloseModal"
+  >
+    <div
+      class="
+        x-my-history-confirm-disable-modal-content
+        x-background--neutral-100
+        x-list x-list--gap-05
+      "
+      :class="
+        $x.device === 'mobile'
+          ? 'x-padding--06 x-padding--bottom-03 x-border-radius--03'
+          : 'x-padding--10'
+      "
+    >
+      <h1 class="x-title3 x-text--bold">{{ $t('myHistory.confirmDisableModal.title') }}</h1>
+      <span class="x-font-color--neutral-35">
+        {{ $t('myHistory.confirmDisableModal.message') }}
+      </span>
+      <div
+        class="x-list x-list--horizontal"
+        :class="$x.device === 'mobile' ? 'x-list--justify-end' : 'x-list--justify-center'"
+      >
+        <BaseEventButton
+          class="x-button x-button--ghost x-font-color--neutral-35"
+          :events="dismissEvents"
+        >
+          {{ $t('myHistory.confirmDisableModal.dismiss') }}
+        </BaseEventButton>
+        <BaseEventButton class="x-button x-button--ghost" :events="confirmEvents">
+          {{ $t('myHistory.confirmDisableModal.confirm') }}
+        </BaseEventButton>
+      </div>
+    </div>
+  </BaseEventsModal>
+</template>
+
+<script lang="ts">
+  import Vue from 'vue';
+  import { Component } from 'vue-property-decorator';
+  import { BaseEventsModal, BaseEventButton } from '@empathyco/x-components';
+
+  @Component({
+    components: {
+      BaseEventsModal,
+      BaseEventButton
+    }
+  })
+  export default class MyHistoryConfirmDisableModal extends Vue {
+    protected eventsToOpenModal = ['UserClickedDisableHistoryQueries'];
+    protected eventsToCloseModal = [
+      'UserClickedConfirmDisableHistoryQueries',
+      'UserClickedDismissDisableHistoryQueries'
+    ];
+    protected dismissEvents = { UserClickedDismissDisableHistoryQueries: undefined };
+    protected confirmEvents = { UserClickedConfirmDisableHistoryQueries: undefined };
+  }
+</script>
+
+<style lang="scss">
+  .x-my-history-confirm-disable-modal {
+    --x-size-width-layout-aside: 100%;
+    &-content {
+      box-sizing: border-box;
+      max-width: 332px;
+    }
+    .x-modal__content {
+      justify-content: center;
+      align-items: center;
+    }
+  }
+  .x-mobile {
+    .x-my-history-confirm-disable-modal-content {
+      max-width: 296px;
+    }
+  }
+</style>