feat: Ability for the logged in user to create a new account (#985)

Co-authored-by: Divyesh <dkothari@box8.in>
Co-authored-by: Pranav Raj S <pranav@thoughtwoot.com>

app/javascript/dashboard/components/layout/Sidebar.vue

@@ -34,7 +34,7 @@
           class="dropdown-pane top"
         >
           <ul class="vertical dropdown menu">
-            <li v-if="currentUser.accounts.length > 1">
+            <li v-if="showChangeAccountOption">
               <button
                 class="button clear change-accounts--button"
                 @click="changeAccount"
@@ -94,6 +94,58 @@
           </label>
         </a>
       </div>
+      <div
+        v-if="globalConfig.createNewAccountFromDashboard"
+        class="modal-footer delete-item"
+      >
+        <button
+          class="button success large expanded nice"
+          @click="createAccount"
+        >
+          {{ $t('CREATE_ACCOUNT.NEW_ACCOUNT') }}
+        </button>
+      </div>
+    </woot-modal>
+
+    <woot-modal
+      :show="showCreateAccountModal"
+      :on-close="onCloseCreate"
+      class="account-selector--modal"
+    >
+      <div class="column content-box">
+        <woot-modal-header
+          :header-title="$t('CREATE_ACCOUNT.NEW_ACCOUNT')"
+          :header-content="$t('CREATE_ACCOUNT.SELECTOR_SUBTITLE')"
+        />
+
+        <form class="row" @submit.prevent="addAccount()">
+          <div class="medium-12 columns">
+            <label :class="{ error: $v.accountName.$error }">
+              {{ $t('CREATE_ACCOUNT.FORM.NAME.LABEL') }}
+              <input
+                v-model.trim="accountName"
+                type="text"
+                :placeholder="$t('CREATE_ACCOUNT.FORM.NAME.PLACEHOLDER')"
+                @input="$v.accountName.$touch"
+              />
+            </label>
+          </div>
+          <div class="modal-footer  medium-12 columns">
+            <div class="medium-12 columns">
+              <woot-submit-button
+                :disabled="
+                  $v.accountName.$invalid ||
+                    $v.accountName.$invalid ||
+                    uiFlags.isCreating
+                "
+                :button-text="$t('CREATE_ACCOUNT.FORM.SUBMIT')"
+                :loading="uiFlags.isCreating"
+                button-class="large expanded"
+              />
+            </div>
+          </div>
+        </form>
+      </div>
     </woot-modal>
   </aside>
 </template>
@@ -108,13 +160,16 @@ import SidebarItem from './SidebarItem';
 import { frontendURL } from '../../helper/URLHelper';
 import Thumbnail from '../widgets/Thumbnail';
 import { getSidebarItems } from '../../i18n/default-sidebar';
+import { required, minLength } from 'vuelidate/lib/validators';
+import alertMixin from 'shared/mixins/alertMixin';
+// import accountMixin from '../../../../../mixins/account';
 
 export default {
   components: {
     SidebarItem,
     Thumbnail,
   },
-  mixins: [clickaway, adminMixin],
+  mixins: [clickaway, adminMixin, alertMixin],
   props: {
     route: {
       type: String,
@@ -125,8 +180,18 @@ export default {
     return {
       showOptionsMenu: false,
       showAccountModal: false,
+      showCreateAccountModal: false,
+      accountName: '',
+      vertical: 'bottom',
+      horizontal: 'center',
     };
   },
+  validations: {
+    accountName: {
+      required,
+      minLength: minLength(1),
+    },
+  },
   computed: {
     ...mapGetters({
       currentUser: 'getCurrentUser',
@@ -134,8 +199,15 @@ export default {
       inboxes: 'inboxes/getInboxes',
       accountId: 'getCurrentAccountId',
       currentRole: 'getCurrentRole',
+      uiFlags: 'agents/getUIFlags',
       accountLabels: 'labels/getLabelsOnSidebar',
     }),
+    showChangeAccountOption() {
+      if (this.globalConfig.createNewAccountFromDashboard) {
+        return true;
+      }
+      return this.currentUser.accounts.length > 1;
+    },
     sidemenuItems() {
       return getSidebarItems(this.accountId);
     },
@@ -230,6 +302,29 @@ export default {
     onClose() {
       this.showAccountModal = false;
     },
+    createAccount() {
+      this.showAccountModal = false;
+      this.showCreateAccountModal = true;
+    },
+    onCloseCreate() {
+      this.showCreateAccountModal = false;
+    },
+    async addAccount() {
+      try {
+        const account_id = await this.$store.dispatch('accounts/create', {
+          account_name: this.accountName,
+        });
+        this.onClose();
+        this.showAlert(this.$t('CREATE_ACCOUNT.API.SUCCESS_MESSAGE'));
+        window.location = `/app/accounts/${account_id}/dashboard`;
+      } catch (error) {
+        if (error.response.status === 422) {
+          this.showAlert(this.$t('CREATE_ACCOUNT.API.EXIST_MESSAGE'));
+        } else {
+          this.showAlert(this.$t('CREATE_ACCOUNT.API.ERROR_MESSAGE'));
+        }
+      }
+    },
   },
 };
 </script>