feat: One off campaign UI (chatwoot#2621)

app/javascript/dashboard/assets/scss/_date-picker.scss

@@ -0,0 +1,29 @@
+@import '~vue2-datepicker/scss/index';
+
+.mx-datepicker-popup {
+  z-index: 99999;
+}
+
+.date-picker {
+  .mx-datepicker {
+    width: 100%;
+  }
+
+  .mx-datepicker-range {
+    width: 320px;
+  }
+
+  .mx-input {
+    border: 1px solid var(--color-border);
+    border-radius: var(--border-radius-normal);
+    box-shadow: none;
+    display: flex;
+    height: 4.6rem;
+  }
+
+  .mx-input:disabled,
+  .mx-input[readonly] {
+    background-color: var(--white);
+    cursor: pointer;
+  }
+}

app/javascript/dashboard/assets/scss/_woot.scss

@@ -12,6 +12,7 @@
 @import 'foundation-settings';
 @import 'helper-classes';
 @import 'formulate';
+@import 'date-picker';
 
 @import 'foundation-sites/scss/foundation';
 @import '~bourbon/core/bourbon';

app/javascript/dashboard/components/ui/DateRangePicker.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="woot-date-range-picker">
+  <div class="date-picker">
     <date-picker
       :range="true"
       :confirm="true"
@@ -15,7 +15,6 @@
 
 <script>
 import DatePicker from 'vue2-datepicker';
-import 'vue2-datepicker/index.css';
 export default {
   components: { DatePicker },
   props: {
@@ -33,32 +32,9 @@ export default {
     },
   },
   methods: {
-    updateValue(val) {
-      this.$emit('change', val);
-    },
     handleChange(value) {
-      this.updateValue(value);
+      this.$emit('change', value);
     },
   },
 };
 </script>
-
-<style lang="scss">
-.woot-date-range-picker {
-  margin-left: var(--space-smaller);
-
-  .mx-input {
-    display: flex;
-    border: 1px solid var(--color-border);
-    border-radius: var(--border-radius-normal);
-    box-shadow: none;
-    height: 4.6rem;
-  }
-
-  .mx-input:disabled,
-  .mx-input[readonly] {
-    background-color: var(--white);
-    cursor: pointer;
-  }
-}
-</style>

app/javascript/dashboard/components/ui/DateTimePicker.vue

@@ -0,0 +1,47 @@
+<template>
+  <div class="date-picker">
+    <date-picker
+      type="datetime"
+      :confirm="true"
+      :clearable="false"
+      :editable="false"
+      :confirm-text="confirmText"
+      :placeholder="placeholder"
+      :value="value"
+      :disabled-date="disableBeforeToday"
+      @change="handleChange"
+    />
+  </div>
+</template>
+
+<script>
+import addDays from 'date-fns/addDays';
+import DatePicker from 'vue2-datepicker';
+export default {
+  components: { DatePicker },
+  props: {
+    confirmText: {
+      type: String,
+      default: '',
+    },
+    placeholder: {
+      type: String,
+      default: '',
+    },
+    value: {
+      type: Date,
+      default: () => [],
+    },
+  },
+
+  methods: {
+    handleChange(value) {
+      this.$emit('change', value);
+    },
+    disableBeforeToday(date) {
+      const yesterdayDate = addDays(new Date(), -1);
+      return date < yesterdayDate;
+    },
+  },
+};
+</script>

app/javascript/dashboard/components/ui/stories/DateRangePicker.stories.js

@@ -1,5 +1,5 @@
 import { action } from '@storybook/addon-actions';
-import WootDateRangePicker from '../DateRangePicker';
+import WootDateRangePicker from '../DateRangePicker.vue';
 
 export default {
   title: 'Components/Date Picker/Date Range Picker',
@@ -34,5 +34,5 @@ const Template = (args, { argTypes }) => ({
 export const DateRangePicker = Template.bind({});
 DateRangePicker.args = {
   onChange: action('applied'),
-  value: [new Date(), new Date()],
+  value: new Date(),
 };

app/javascript/dashboard/components/ui/stories/DateTimePicker.stories.js

@@ -0,0 +1,38 @@
+import { action } from '@storybook/addon-actions';
+import WootDateTimePicker from '../DateTimePicker.vue';
+
+export default {
+  title: 'Components/Date Picker/Date Time Picker',
+  argTypes: {
+    confirmText: {
+      defaultValue: 'Apply',
+      control: {
+        type: 'text',
+      },
+    },
+    placeholder: {
+      defaultValue: 'Select date time',
+      control: {
+        type: 'text',
+      },
+    },
+    value: {
+      control: {
+        type: 'text',
+      },
+    },
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { WootDateTimePicker },
+  template:
+    '<woot-date-time-picker v-bind="$props" @change="onChange"></woot-date-time-picker>',
+});
+
+export const DateTimePicker = Template.bind({});
+DateTimePicker.args = {
+  onChange: action('applied'),
+  value: new Date(),
+};

app/javascript/dashboard/i18n/locale/en/campaign.json

@@ -14,6 +14,17 @@
           "PLACEHOLDER": "Please enter the title of campaign",
           "ERROR": "Title is required"
         },
+        "SCHEDULED_AT": {
+          "LABEL": "Scheduled time",
+          "PLACEHOLDER": "Please select the time",
+          "CONFIRM": "Confirm",
+          "ERROR": "Scheduled time is required"
+        },
+        "AUDIENCE": {
+          "LABEL": "Audience",
+          "PLACEHOLDER": "Select the customer labels",
+          "ERROR": "Audience is required"
+        },
         "MESSAGE": {
           "LABEL": "Message",
           "PLACEHOLDER": "Please enter the message of campaign",
@@ -72,6 +83,7 @@
         "STATUS": "Status",
         "SENDER": "Sender",
         "URL": "URL",
+        "SCHEDULED_AT": "Scheduled time",
         "TIME_ON_PAGE": "Time(Seconds)",
         "CREATED_AT": "Created at"
       },
@@ -82,7 +94,9 @@
       },
       "STATUS": {
         "ENABLED": "Enabled",
-        "DISABLED": "Disabled"
+        "DISABLED": "Disabled",
+        "COMPLETED": "Completed",
+        "ACTIVE": "Active"
       },
       "SENDER": {
         "BOT": "Bot"

app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue

@@ -387,7 +387,21 @@ export default {
         ];
       }
 
-      if (this.isATwilioChannel) {
+      if (this.isATwilioSMSChannel) {
+        return [
+          ...visibleToAllChannelTabs,
+          {
+            key: 'campaign',
+            name: this.$t('INBOX_MGMT.TABS.CAMPAIGN'),
+          },
+          {
+            key: 'configuration',
+            name: this.$t('INBOX_MGMT.TABS.CONFIGURATION'),
+          },
+        ];
+      }
+
+      if (this.isATwilioWhatsappChannel) {
         return [
           ...visibleToAllChannelTabs,
           {
@@ -459,6 +473,7 @@ export default {
       this.selectedAgents = [];
       this.$store.dispatch('agents/get');
       this.$store.dispatch('teams/get');
+      this.$store.dispatch('labels/get');
       this.$store.dispatch('inboxes/get').then(() => {
         this.fetchAttachedAgents();
         this.avatarUrl = this.inbox.avatar_url;