feat: Add snooze, reopen option to bulk actions (#4831)

Co-authored-by: Pranav Raj S <pranav@chatwoot.com>
2022-06-13 12:14:27 +05:30 · 2022-06-13 12:14:27 +05:30 · 2198930185
commit 2198930185
parent aa903a5da9
9 changed files with 331 additions and 71 deletions
--- a/app/javascript/dashboard/assets/scss/_utility-helpers.scss
+++ b/app/javascript/dashboard/assets/scss/_utility-helpers.scss
@ -60,3 +60,9 @@
  text-overflow: ellipsis;
  white-space: nowrap;
 }
+
+.flex-between {
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+}
--- a/app/javascript/dashboard/components/ChatList.vue
+++ b/app/javascript/dashboard/components/ChatList.vue
@ -84,7 +84,18 @@
    <p v-if="!chatListLoading && !conversationList.length" class="content-box">
      {{ $t('CHAT_LIST.LIST.404') }}
    </p>
-
+    <conversation-bulk-actions
+      v-if="selectedConversations.length"
+      :conversations="selectedConversations"
+      :all-conversations-selected="allConversationsSelected"
+      :selected-inboxes="uniqueInboxes"
+      :show-open-action="allSelectedConversationsStatus('open')"
+      :show-resolved-action="allSelectedConversationsStatus('resolved')"
+      :show-snoozed-action="allSelectedConversationsStatus('snoozed')"
+      @select-all-conversations="selectAllConversations"
+      @assign-agent="onAssignAgent"
+      @update-conversations="onUpdateConversations"
+    />
    <div ref="activeConversation" class="conversations-list">
      <conversation-card
        v-for="chat in conversationList"
@ -114,11 +125,7 @@
      </woot-button>

      <p
-        v-if="
-          conversationList.length &&
-            hasCurrentPageEndReached &&
-            !chatListLoading
-        "
+        v-if="showEndOfListMessage"
        class="text-center text-muted end-of-list-text"
      >
        {{ $t('CHAT_LIST.EOF') }}
@ -136,16 +143,6 @@
        @applyFilter="onApplyFilter"
      />
    </woot-modal>
-
-    <conversation-bulk-actions
-      v-if="selectedConversations.length"
-      :conversations="selectedConversations"
-      :all-conversations-selected="allConversationsSelected"
-      :selected-inboxes="uniqueInboxes"
-      @select-all-conversations="selectAllConversations"
-      @assign-agent="onAssignAgent"
-      @resolve-conversations="onResolveConversations"
-    />
  </div>
 </template>

@ -164,7 +161,7 @@ import advancedFilterTypes from './widgets/conversation/advancedFilterItems';
 import filterQueryGenerator from '../helper/filterQueryGenerator.js';
 import AddCustomViews from 'dashboard/routes/dashboard/customviews/AddCustomViews';
 import DeleteCustomViews from 'dashboard/routes/dashboard/customviews/DeleteCustomViews.vue';
-import ConversationBulkActions from './widgets/conversation/conversationBulkActions/Actions.vue';
+import ConversationBulkActions from './widgets/conversation/conversationBulkActions/Index.vue';
 import alertMixin from 'shared/mixins/alertMixin';

 import {
@ -252,6 +249,13 @@ export default {
      }
      return {};
    },
+    showEndOfListMessage() {
+      return (
+        this.conversationList.length &&
+        this.hasCurrentPageEndReached &&
+        !this.chatListLoading
+      );
+    },
    assigneeTabItems() {
      const ASSIGNEE_TYPE_TAB_KEYS = {
        me: 'mineCount',
@ -363,8 +367,10 @@ export default {
    },
    allConversationsSelected() {
      return (
-        JSON.stringify(this.selectedConversations) ===
-        JSON.stringify(this.conversationList.map(item => item.id))
+        this.conversationList.length === this.selectedConversations.length &&
+        this.conversationList.every(el =>
+          this.selectedConversations.includes(el.id)
+        )
      );
    },
    uniqueInboxes() {
@ -592,21 +598,27 @@ export default {
        this.showAlert(this.$t('BULK_ACTION.ASSIGN_FAILED'));
      }
    },
-    async onResolveConversations() {
+    async onUpdateConversations(status) {
      try {
        await this.$store.dispatch('bulkActions/process', {
          type: 'Conversation',
          ids: this.selectedConversations,
          fields: {
-            status: 'resolved',
+            status,
          },
        });
        this.selectedConversations = [];
-        this.showAlert(this.$t('BULK_ACTION.RESOLVE_SUCCESFUL'));
-      } catch (error) {
-        this.showAlert(this.$t('BULK_ACTION.RESOLVE_FAILED'));
+        this.showAlert(this.$t('BULK_ACTION.UPDATE.UPDATE_SUCCESFUL'));
+      } catch (err) {
+        this.showAlert(this.$t('BULK_ACTION.UPDATE.UPDATE_FAILED'));
      }
    },
+    allSelectedConversationsStatus(status) {
+      if (!this.selectedConversations.length) return false;
+      return this.selectedConversations.every(item => {
+        return this.$store.getters.getConversationById(item).status === status;
+      });
+    },
  },
 };
 </script>
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue
@ -11,14 +11,13 @@
    @mouseleave="onCardLeave"
    @click="cardClick(chat)"
  >
-    <label v-if="hovered || selected" class="checkbox-wrapper">
+    <label v-if="hovered || selected" class="checkbox-wrapper" @click.stop>
      <input
        :value="selected"
        :checked="selected"
        class="checkbox"
        type="checkbox"
        @change="onSelectConversation($event.target.checked)"
-        @click.stop
      />
    </label>
    <thumbnail
--- a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/AgentSelector.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/AgentSelector.vue
@ -1,5 +1,16 @@
 <template>
  <div class="bulk-action__agents">
+    <div class="triangle">
+      <svg height="12" viewBox="0 0 24 12" width="24">
+        <path
+          d="M20 12l-8-8-12 12"
+          fill="var(--white)"
+          fill-rule="evenodd"
+          stroke="var(--s-50)"
+          stroke-width="1px"
+        />
+      </svg>
+    </div>
    <div class="header flex-between">
      <span>{{ $t('BULK_ACTION.AGENT_SELECT_LABEL') }}</span>
      <woot-button
@ -148,30 +159,30 @@ export default {
 </script>

 <style scoped lang="scss">
-.flex-between {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
 .bulk-action__agents {
-  position: absolute;
-  bottom: 40px;
-  right: var(--space-small);
-  width: 100%;
-  box-shadow: var(--shadow-dropdown-pane);
+  background-color: var(--white);
  border-radius: var(--border-radius-large);
  border: 1px solid var(--s-50);
-  background-color: var(--white);
-  width: 75%;
+  box-shadow: var(--shadow-dropdown-pane);
+  max-width: 75%;
+  position: absolute;
+  right: var(--space-small);
+  top: var(--space-larger);
+  transform-origin: top right;
+  width: auto;
+  z-index: var(--z-index-twenty);
+
  .header {
    padding: var(--space-one);
+
    span {
-      font-size: var(--font-size-default);
+      font-size: var(--font-size-small);
      font-weight: var(--font-weight-medium);
    }
  }
+
  .container {
-    height: 240px;
+    height: 24rem;
    overflow-y: auto;
    .agent__list-container {
      height: 100%;
@ -194,6 +205,14 @@ export default {
      }
    }
  }
+  .triangle {
+    display: block;
+    z-index: var(--z-index-one);
+    position: absolute;
+    top: calc(var(--space-slab) * -1);
+    right: var(--space-micro);
+    text-align: left;
+  }
 }
 ul {
  margin: 0;
--- a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/Actions.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/Actions.vue
@ -7,6 +7,7 @@
          type="checkbox"
          class="checkbox"
          :checked="allConversationsSelected"
+          :indeterminate.prop="!allConversationsSelected"
          @change="selectAll($event)"
        />
        <span>
@ -19,13 +20,13 @@
      </label>
      <div class="bulk-action__actions flex-between">
        <woot-button
-          v-tooltip="$t('BULK_ACTION.RESOLVE_TOOLTIP')"
+          v-tooltip="$t('BULK_ACTION.UPDATE.CHANGE_STATUS')"
          size="tiny"
          variant="flat"
          color-scheme="success"
-          icon="checkmark"
+          icon="repeat"
          class="margin-right-smaller"
-          @click="resolveConversations"
+          @click="toggleUpdateActions"
        />
        <woot-button
          v-tooltip="$t('BULK_ACTION.ASSIGN_AGENT_TOOLTIP')"
@ -33,10 +34,10 @@
          variant="flat"
          color-scheme="secondary"
          icon="person-assign"
-          @click="showAgentsList = true"
+          @click="toggleAgentList"
        />
      </div>
-      <transition name="menu-slide">
+      <transition name="popover-animation">
        <agent-selector
          v-if="showAgentsList"
          :selected-inboxes="selectedInboxes"
@ -45,6 +46,18 @@
          @close="showAgentsList = false"
        />
      </transition>
+      <transition name="popover-animation">
+        <update-actions
+          v-if="showUpdateActions"
+          :selected-inboxes="selectedInboxes"
+          :conversation-count="conversations.length"
+          :show-resolve="!showResolvedAction"
+          :show-reopen="!showOpenAction"
+          :show-snooze="!showSnoozedAction"
+          @update="updateConversations"
+          @close="showUpdateActions = false"
+        />
+      </transition>
    </div>
    <div v-if="allConversationsSelected" class="bulk-action__alert">
      {{ $t('BULK_ACTION.ALL_CONVERSATIONS_SELECTED_ALERT') }}
@ -54,9 +67,11 @@

 <script>
 import AgentSelector from './AgentSelector.vue';
+import UpdateActions from './UpdateActions.vue';
 export default {
  components: {
    AgentSelector,
+    UpdateActions,
  },
  props: {
    conversations: {
@ -71,15 +86,25 @@ export default {
      type: Array,
      default: () => [],
    },
+    showOpenAction: {
+      type: Boolean,
+      default: false,
+    },
+    showResolvedAction: {
+      type: Boolean,
+      default: false,
+    },
+    showSnoozedAction: {
+      type: Boolean,
+      default: false,
+    },
  },
  data() {
    return {
      showAgentsList: false,
+      showUpdateActions: false,
    };
  },
-  mounted() {
-    this.$refs.selectAllCheck.indeterminate = true;
-  },
  methods: {
    selectAll(e) {
      this.$emit('select-all-conversations', e.target.checked);
@ -87,24 +112,25 @@ export default {
    submit(agent) {
      this.$emit('assign-agent', agent);
    },
+    updateConversations(status) {
+      this.$emit('update-conversations', status);
+    },
    resolveConversations() {
      this.$emit('resolve-conversations');
    },
+    toggleUpdateActions() {
+      this.showUpdateActions = !this.showUpdateActions;
+    },
+    toggleAgentList() {
+      this.showAgentsList = !this.showAgentsList;
+    },
  },
 };
 </script>

 <style scoped lang="scss">
-.flex-between {
-  align-items: center;
-  display: flex;
-  justify-content: space-between;
-}
-
 .bulk-action__container {
-  background-color: var(--s-50);
-  border-top: 1px solid var(--s-100);
-  box-shadow: var(--shadow-bulk-action-container);
+  border-bottom: 1px solid var(--s-100);
  padding: var(--space-normal) var(--space-one);
  position: relative;
 }
@ -132,4 +158,29 @@ export default {
  margin-top: var(--space-small);
  padding: var(--space-half) var(--space-one);
 }
+
+.popover-animation-enter-active,
+.popover-animation-leave-active {
+  transition: transform ease-out 0.1s;
+}
+
+.popover-animation-enter {
+  opacity: 0;
+  transform: scale(0.95);
+}
+
+.popover-animation-enter-to {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.popover-animation-leave {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.popover-animation-leave-to {
+  opacity: 0;
+  transform: scale(0.95);
+}
 </style>
--- a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/UpdateActions.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/UpdateActions.vue
@ -0,0 +1,166 @@
+<template>
+  <div v-on-clickaway="onClose" class="actions-container">
+    <div class="triangle">
+      <svg height="12" viewBox="0 0 24 12" width="24">
+        <path
+          d="M20 12l-8-8-12 12"
+          fill="var(--white)"
+          fill-rule="evenodd"
+          stroke="var(--s-50)"
+          stroke-width="1px"
+        />
+      </svg>
+    </div>
+    <div class="header flex-between">
+      <span>{{ $t('BULK_ACTION.UPDATE.CHANGE_STATUS') }}</span>
+      <woot-button
+        size="tiny"
+        variant="clear"
+        color-scheme="secondary"
+        icon="dismiss"
+        @click="onClose"
+      />
+    </div>
+    <div class="container">
+      <woot-dropdown-menu>
+        <template v-for="action in actions">
+          <woot-dropdown-item v-if="showAction(action.key)" :key="action.key">
+            <woot-button
+              variant="clear"
+              color-scheme="secondary"
+              size="small"
+              :icon="action.icon"
+              @click="updateConversations(action.key)"
+            >
+              {{ actionLabel(action.key) }}
+            </woot-button>
+          </woot-dropdown-item>
+        </template>
+      </woot-dropdown-menu>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mixin as clickaway } from 'vue-clickaway';
+import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem.vue';
+import WootDropdownMenu from 'shared/components/ui/dropdown/DropdownMenu.vue';
+export default {
+  components: {
+    WootDropdownItem,
+    WootDropdownMenu,
+  },
+  mixins: [clickaway],
+  props: {
+    selectedInboxes: {
+      type: Array,
+      default: () => [],
+    },
+    conversationCount: {
+      type: Number,
+      default: 0,
+    },
+    showResolve: {
+      type: Boolean,
+      default: true,
+    },
+    showReopen: {
+      type: Boolean,
+      default: true,
+    },
+    showSnooze: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  data() {
+    return {
+      query: '',
+      selectedAction: null,
+      actions: [
+        {
+          icon: 'checkmark',
+          key: 'resolved',
+        },
+        {
+          icon: 'arrow-redo',
+          key: 'open',
+        },
+        {
+          icon: 'send-clock',
+          key: 'snoozed',
+        },
+      ],
+    };
+  },
+  methods: {
+    updateConversations(key) {
+      this.$emit('update', key);
+    },
+    goBack() {
+      this.selectedAgent = null;
+    },
+    onClose() {
+      this.$emit('close');
+    },
+    showAction(key) {
+      const actionsMap = {
+        resolved: this.showResolve,
+        open: this.showReopen,
+        snoozed: this.showSnooze,
+      };
+      return actionsMap[key] || false;
+    },
+    actionLabel(key) {
+      const labelsMap = {
+        resolved: this.$t('CONVERSATION.HEADER.RESOLVE_ACTION'),
+        open: this.$t('CONVERSATION.HEADER.REOPEN_ACTION'),
+        snoozed: this.$t('BULK_ACTION.UPDATE.SNOOZE_UNTIL_NEXT_REPLY'),
+      };
+      return labelsMap[key] || '';
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.actions-container {
+  background-color: var(--white);
+  border-radius: var(--border-radius-large);
+  border: 1px solid var(--s-50);
+  box-shadow: var(--shadow-dropdown-pane);
+  position: absolute;
+  right: var(--space-small);
+  top: 48px;
+  transform-origin: top right;
+  width: auto;
+  z-index: var(--z-index-twenty);
+
+  .header {
+    padding: var(--space-one);
+
+    span {
+      font-size: var(--font-size-small);
+      font-weight: var(--font-weight-medium);
+    }
+  }
+  .container {
+    padding: var(--space-one);
+    padding-top: var(--space-zero);
+  }
+
+  .triangle {
+    display: block;
+    position: absolute;
+    right: 2.8rem;
+    text-align: left;
+    top: calc(var(--space-slab) * -1);
+    z-index: var(--z-index-one);
+  }
+}
+
+ul {
+  margin: 0;
+  list-style: none;
+}
+</style>
--- a/app/javascript/dashboard/i18n/locale/en/bulkActions.json
+++ b/app/javascript/dashboard/i18n/locale/en/bulkActions.json
@ -6,12 +6,17 @@
    "GO_BACK_LABEL": "Go back",
    "ASSIGN_LABEL": "Assign",
    "ASSIGN_AGENT_TOOLTIP": "Assign Agent",
-        "RESOLVE_TOOLTIP": "Resolve",
    "ASSIGN_SUCCESFUL": "Conversations assigned successfully",
    "ASSIGN_FAILED": "Failed to assign conversations, please try again",
    "RESOLVE_SUCCESFUL": "Conversations resolved successfully",
    "RESOLVE_FAILED": "Failed to resolve conversations, please try again",
    "ALL_CONVERSATIONS_SELECTED_ALERT": "Conversations visible on this page are only selected.",
-        "AGENT_LIST_LOADING": "Loading Agents"
+    "AGENT_LIST_LOADING": "Loading Agents",
+    "UPDATE": {
+      "CHANGE_STATUS": "Change status",
+      "SNOOZE_UNTIL_NEXT_REPLY": "Snooze until next reply",
+      "UPDATE_SUCCESFUL": "Conversation status updated successfully.",
+      "UPDATE_FAILED": "Failed to update conversations, please try again"
+    }
  }
 }
--- a/app/javascript/shared/assets/stylesheets/z-index.scss
+++ b/app/javascript/shared/assets/stylesheets/z-index.scss
@ -2,6 +2,7 @@
  // z-index
  --z-index-minus: -1;
  --z-index-zero: 0;
+  --z-index-one: 1;
  --z-index-low: 10;
  --z-index-twenty: 20;
  --z-index-normal: 100;
--- a/app/javascript/shared/components/FluentIcon/dashboard-icons.json
+++ b/app/javascript/shared/components/FluentIcon/dashboard-icons.json
@ -103,6 +103,7 @@
  "power-outline": "M8.204 4.82a.75.75 0 0 1 .634 1.36A7.51 7.51 0 0 0 4.5 12.991c0 4.148 3.358 7.51 7.499 7.51s7.499-3.362 7.499-7.51a7.51 7.51 0 0 0-4.323-6.804.75.75 0 1 1 .637-1.358 9.01 9.01 0 0 1 5.186 8.162c0 4.976-4.029 9.01-9 9.01C7.029 22 3 17.966 3 12.99a9.01 9.01 0 0 1 5.204-8.17ZM12 2.496a.75.75 0 0 1 .743.648l.007.102v7.5a.75.75 0 0 1-1.493.102l-.007-.102v-7.5a.75.75 0 0 1 .75-.75Z",
  "quote-outline": "M7.5 6a2.5 2.5 0 0 1 2.495 2.336l.005.206c-.01 3.555-1.24 6.614-3.705 9.223a.75.75 0 1 1-1.09-1.03c1.64-1.737 2.66-3.674 3.077-5.859A2.5 2.5 0 1 1 7.5 6Zm9 0a2.5 2.5 0 0 1 2.495 2.336l.005.206c-.01 3.56-1.238 6.614-3.705 9.223a.75.75 0 1 1-1.09-1.03c1.643-1.738 2.662-3.672 3.078-5.859A2.5 2.5 0 1 1 16.5 6Zm-9 1.5a1 1 0 1 0 .993 1.117l.007-.124a1 1 0 0 0-1-.993Zm9 0a1 1 0 1 0 .993 1.117l.007-.124a1 1 0 0 0-1-.993Z",
  "resize-large-outline": "M6.25 4.5A1.75 1.75 0 0 0 4.5 6.25v1.5a.75.75 0 0 1-1.5 0v-1.5A3.25 3.25 0 0 1 6.25 3h1.5a.75.75 0 0 1 0 1.5h-1.5ZM19.5 6.25a1.75 1.75 0 0 0-1.75-1.75h-1.5a.75.75 0 0 1 0-1.5h1.5A3.25 3.25 0 0 1 21 6.25v1.5a.75.75 0 0 1-1.5 0v-1.5ZM19.5 17.75a1.75 1.75 0 0 1-1.75 1.75h-1.5a.75.75 0 0 0 0 1.5h1.5A3.25 3.25 0 0 0 21 17.75v-1.5a.75.75 0 0 0-1.5 0v1.5ZM4.5 17.75c0 .966.784 1.75 1.75 1.75h1.5a.75.75 0 0 1 0 1.5h-1.5A3.25 3.25 0 0 1 3 17.75v-1.5a.75.75 0 0 1 1.5 0v1.5ZM8.25 6A2.25 2.25 0 0 0 6 8.25v7.5A2.25 2.25 0 0 0 8.25 18h7.5A2.25 2.25 0 0 0 18 15.75v-7.5A2.25 2.25 0 0 0 15.75 6h-7.5ZM7.5 8.25a.75.75 0 0 1 .75-.75h7.5a.75.75 0 0 1 .75.75v7.5a.75.75 0 0 1-.75.75h-7.5a.75.75 0 0 1-.75-.75v-7.5Z",
+  "repeat-outline": "m14.712 2.289l-.087-.078a1 1 0 0 0-1.327.078l-.078.087a.999.999 0 0 0 .078 1.326l1.299 1.297H8.999l-.24.004A6.997 6.997 0 0 0 2 11.993a6.94 6.94 0 0 0 1.189 3.899a.999.999 0 0 0 1.626-1.163l-.135-.218A4.997 4.997 0 0 1 9 6.998h5.595l-1.297 1.297l-.078.087a.999.999 0 0 0 1.492 1.326l3.006-3.003l.077-.087a.999.999 0 0 0-.078-1.326l-3.005-3.003Zm6.075 5.771A.999.999 0 0 0 19 8.677c0 .209.064.402.172.561a4.997 4.997 0 0 1-4.17 7.75H9.414l1.294-1.29l.083-.096a1 1 0 0 0-.006-1.23l-.077-.088l-.095-.084a1.001 1.001 0 0 0-1.232.006l-.088.078l-3.005 3.003l-.083.095a1 1 0 0 0 .006 1.231l.077.087l3.005 3.003l.095.084a1 1 0 0 0 1.397-1.41l-.077-.087l-1.304-1.303H15l.24-.003a6.997 6.997 0 0 0 5.546-10.927v.003Z",
  "save-outline": "M3 5.75A2.75 2.75 0 0 1 5.75 3h9.964a3.25 3.25 0 0 1 2.299.952l2.035 2.035c.61.61.952 1.437.952 2.299v9.964A2.75 2.75 0 0 1 18.25 21H5.75A2.75 2.75 0 0 1 3 18.25V5.75ZM5.75 4.5c-.69 0-1.25.56-1.25 1.25v12.5c0 .69.56 1.25 1.25 1.25H6v-5.25A2.25 2.25 0 0 1 8.25 12h7.5A2.25 2.25 0 0 1 18 14.25v5.25h.25c.69 0 1.25-.56 1.25-1.25V8.286c0-.465-.184-.91-.513-1.238l-2.035-2.035a1.75 1.75 0 0 0-.952-.49V7.25a2.25 2.25 0 0 1-2.25 2.25h-4.5A2.25 2.25 0 0 1 7 7.25V4.5H5.75Zm10.75 15v-5.25a.75.75 0 0 0-.75-.75h-7.5a.75.75 0 0 0-.75.75v5.25h9Zm-8-15v2.75c0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75V4.5h-6Z",
  "search-outline": "M10 2.75a7.25 7.25 0 0 1 5.63 11.819l4.9 4.9a.75.75 0 0 1-.976 1.134l-.084-.073-4.901-4.9A7.25 7.25 0 1 1 10 2.75Zm0 1.5a5.75 5.75 0 1 0 0 11.5 5.75 5.75 0 0 0 0-11.5Z",
  "send-outline": "M5.694 12 2.299 3.272c-.236-.607.356-1.188.942-.982l.093.04 18 9a.75.75 0 0 1 .097 1.283l-.097.058-18 9c-.583.291-1.217-.244-1.065-.847l.03-.096L5.694 12 2.299 3.272 5.694 12ZM4.402 4.54l2.61 6.71h6.627a.75.75 0 0 1 .743.648l.007.102a.75.75 0 0 1-.649.743l-.101.007H7.01l-2.609 6.71L19.322 12 4.401 4.54Z",