feat: One off campaign UI (#2621)

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(),
+};