From b1efcde495179ec4c3fa5eaa7bbe78e7872eb9cc Mon Sep 17 00:00:00 2001
From: Pranav Raj S <pranav@chatwoot.com>
Date: Fri, 8 Apr 2022 18:25:08 +0530
Subject: [PATCH] feat: Remove duplicate Switch Component (#4427)

---
 .../components/buttons/ToggleButton.vue       | 66 -------------
 .../dashboard/components/ui/Switch.vue        | 98 +++++++++++--------
 .../dashboard/settings/automation/Index.vue   |  9 +-
 .../reports/components/FilterSelector.vue     |  4 +-
 .../reports/components/ReportFilters.vue      |  8 +-
 5 files changed, 67 insertions(+), 118 deletions(-)
 delete mode 100644 app/javascript/dashboard/components/buttons/ToggleButton.vue

diff --git a/app/javascript/dashboard/components/buttons/ToggleButton.vue b/app/javascript/dashboard/components/buttons/ToggleButton.vue
deleted file mode 100644
index 8d80ccd94..000000000
--- a/app/javascript/dashboard/components/buttons/ToggleButton.vue
+++ /dev/null
@@ -1,66 +0,0 @@
-<template>
-  <button
-    type="button"
-    class="toggle-button"
-    :class="{ active }"
-    role="switch"
-    :aria-checked="active.toString()"
-    @click="onClick"
-  >
-    <span aria-hidden="true" :class="{ active }"></span>
-  </button>
-</template>
-
-<script>
-export default {
-  props: {
-    active: { type: Boolean, default: false },
-  },
-  methods: {
-    onClick(e) {
-      this.$emit('click', e);
-    },
-  },
-};
-</script>
-<style lang="scss" scoped>
-.toggle-button {
-  --toggle-button-box-shadow: rgb(255, 255, 255) 0px 0px 0px 0px,
-    rgba(59, 130, 246, 0.5) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px,
-    rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
-  background-color: var(--s-200);
-  border-radius: var(--border-radius-large);
-  border: 2px solid transparent;
-  cursor: pointer;
-  display: flex;
-  flex-shrink: 0;
-  height: 19px;
-  position: relative;
-  transition-duration: 200ms;
-  transition-property: background-color;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  width: 34px;
-
-  &.active {
-    background-color: var(--w-500);
-  }
-
-  span {
-    --space-one-point-five: 1.5rem;
-    background-color: var(--white);
-    border-radius: 100%;
-    box-shadow: var(--toggle-button-box-shadow);
-    display: inline-block;
-    height: var(--space-one-point-five);
-    transform: translate(0, 0);
-    transition-duration: 200ms;
-    transition-property: transform;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    width: var(--space-one-point-five);
-
-    &.active {
-      transform: translate(var(--space-one-point-five), var(--space-zero));
-    }
-  }
-}
-</style>
diff --git a/app/javascript/dashboard/components/ui/Switch.vue b/app/javascript/dashboard/components/ui/Switch.vue
index 98755a91b..b0bc32881 100644
--- a/app/javascript/dashboard/components/ui/Switch.vue
+++ b/app/javascript/dashboard/components/ui/Switch.vue
@@ -1,54 +1,66 @@
 <template>
-  <label class="switch" :class="classObject">
-    <input
-      :id="id"
-      v-model="value"
-      class="switch-input"
-      :name="name"
-      :disabled="disabled"
-      type="checkbox"
-    />
-    <div class="switch-paddle" :for="name">
-      <span class="show-for-sr">on off</span>
-    </div>
-  </label>
+  <button
+    type="button"
+    class="toggle-button"
+    :class="{ active: value }"
+    role="switch"
+    :aria-checked="value.toString()"
+    @click="onClick"
+  >
+    <span aria-hidden="true" :class="{ active: value }"></span>
+  </button>
 </template>
 
 <script>
 export default {
   props: {
-    disabled: Boolean,
-    type: { type: String, default: '' },
-    size: { type: String, default: '' },
-    checked: Boolean,
-    name: { type: String, default: '' },
-    id: { type: String, default: '' },
+    value: { type: Boolean, default: false },
   },
-  data() {
-    return {
-      value: null,
-    };
-  },
-  computed: {
-    classObject() {
-      const { type, size, value } = this;
-      return {
-        [`is-${type}`]: type,
-        [`${size}`]: size,
-        checked: value,
-      };
+  methods: {
+    onClick() {
+      this.$emit('input', !this.value);
     },
   },
-  watch: {
-    value(val) {
-      this.$emit('input', val);
-    },
-  },
-  beforeMount() {
-    this.value = this.checked;
-  },
-  mounted() {
-    this.$emit('input', (this.value = !!this.checked));
-  },
 };
 </script>
+<style lang="scss" scoped>
+.toggle-button {
+  --toggle-button-box-shadow: rgb(255, 255, 255) 0px 0px 0px 0px,
+    rgba(59, 130, 246, 0.5) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px,
+    rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
+  background-color: var(--s-200);
+  border-radius: var(--border-radius-large);
+  border: 2px solid transparent;
+  cursor: pointer;
+  display: flex;
+  flex-shrink: 0;
+  height: 19px;
+  position: relative;
+  transition-duration: 200ms;
+  transition-property: background-color;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  width: 34px;
+
+  &.active {
+    background-color: var(--w-500);
+  }
+
+  span {
+    --space-one-point-five: 1.5rem;
+    background-color: var(--white);
+    border-radius: 100%;
+    box-shadow: var(--toggle-button-box-shadow);
+    display: inline-block;
+    height: var(--space-one-point-five);
+    transform: translate(0, 0);
+    transition-duration: 200ms;
+    transition-property: transform;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    width: var(--space-one-point-five);
+
+    &.active {
+      transform: translate(var(--space-one-point-five), var(--space-zero));
+    }
+  }
+}
+</style>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/automation/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/automation/Index.vue
index 5157c4dfc..f028933cb 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/automation/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/automation/Index.vue
@@ -34,9 +34,9 @@
               <td>{{ automation.name }}</td>
               <td>{{ automation.description }}</td>
               <td>
-                <toggle-button
-                  :active="automation.active"
-                  @click="toggleAutomation(automation, automation.active)"
+                <woot-switch
+                  :value="automation.active"
+                  @input="toggleAutomation(automation, automation.active)"
                 />
               </td>
               <td>{{ readableTime(automation.created_on) }}</td>
@@ -131,12 +131,11 @@ import AddAutomationRule from './AddAutomationRule.vue';
 import EditAutomationRule from './EditAutomationRule.vue';
 import alertMixin from 'shared/mixins/alertMixin';
 import timeMixin from 'dashboard/mixins/time';
-import ToggleButton from 'dashboard/components/buttons/ToggleButton';
+
 export default {
   components: {
     AddAutomationRule,
     EditAutomationRule,
-    ToggleButton,
   },
   mixins: [alertMixin, timeMixin],
   data() {
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/FilterSelector.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/FilterSelector.vue
index 87a422be0..cadf4078e 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/FilterSelector.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/FilterSelector.vue
@@ -62,7 +62,9 @@
       />
     </div>
     <div class="small-12 medium-3 business-hours">
-      <span class="business-hours-text">{{ $t('REPORT.BUSINESS_HOURS') }}</span>
+      <span class="business-hours-text margin-right-small">
+        {{ $t('REPORT.BUSINESS_HOURS') }}
+      </span>
       <span>
         <woot-switch v-model="businessHoursSelected" />
       </span>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportFilters.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportFilters.vue
index 89d1fd4a9..0bfeae8a1 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportFilters.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportFilters.vue
@@ -146,9 +146,11 @@
       />
     </div>
     <div class="small-12 medium-3 business-hours">
-      <span class="business-hours-text">{{ $t('REPORT.BUSINESS_HOURS') }}</span>
-      <span>
-        <woot-switch v-model="businessHoursSelected" />
+      <span class="business-hours-text margin-right-small">
+        {{ $t('REPORT.BUSINESS_HOURS') }}
+        <span>
+          <woot-switch v-model="businessHoursSelected" />
+        </span>
       </span>
     </div>
   </div>