feat: Allow SaaS users to manage subscription within the dashboard (#5059)

app/javascript/dashboard/routes/dashboard/settings/billing/Index.vue

@@ -0,0 +1,116 @@
+<template>
+  <div class="columns profile--settings">
+    <woot-loading-state v-if="uiFlags.isFetchingItem" />
+    <div v-else-if="!hasABillingPlan">
+      <p>{{ $t('BILLING_SETTINGS.NO_BILLING_USER') }}</p>
+    </div>
+    <div v-else class="small-12 columns ">
+      <div class="current-plan--details">
+        <h6>{{ $t('BILLING_SETTINGS.CURRENT_PLAN.TITLE') }}</h6>
+        <div
+          v-dompurify-html="
+            formatMessage(
+              $t('BILLING_SETTINGS.CURRENT_PLAN.PLAN_NOTE', {
+                plan: planName,
+                quantity: subscribedQuantity,
+              })
+            )
+          "
+        />
+      </div>
+      <billing-item
+        :title="$t('BILLING_SETTINGS.MANAGE_SUBSCRIPTION.TITLE')"
+        :description="$t('BILLING_SETTINGS.MANAGE_SUBSCRIPTION.DESCRIPTION')"
+        :button-label="$t('BILLING_SETTINGS.MANAGE_SUBSCRIPTION.BUTTON_TXT')"
+        @click="onClickBillingPortal"
+      />
+      <billing-item
+        :title="$t('BILLING_SETTINGS.CHAT_WITH_US.TITLE')"
+        :description="$t('BILLING_SETTINGS.CHAT_WITH_US.DESCRIPTION')"
+        :button-label="$t('BILLING_SETTINGS.CHAT_WITH_US.BUTTON_TXT')"
+        button-icon="chat-multiple"
+        @click="onToggleChatWindow"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
+
+import { mapGetters } from 'vuex';
+import alertMixin from 'shared/mixins/alertMixin';
+import accountMixin from '../../../../mixins/account';
+import BillingItem from './components/BillingItem.vue';
+
+export default {
+  components: { BillingItem },
+  mixins: [accountMixin, alertMixin, messageFormatterMixin],
+  computed: {
+    ...mapGetters({
+      getAccount: 'accounts/getAccount',
+      uiFlags: 'accounts/getUIFlags',
+    }),
+    currentAccount() {
+      return this.getAccount(this.accountId) || {};
+    },
+    customAttributes() {
+      return this.currentAccount.custom_attributes || {};
+    },
+    hasABillingPlan() {
+      return !!this.planName;
+    },
+    planName() {
+      return this.customAttributes.plan_name || '';
+    },
+    subscribedQuantity() {
+      return this.customAttributes.subscribed_quantity || 0;
+    },
+  },
+  mounted() {
+    this.fetchAccountDetails();
+  },
+  methods: {
+    async fetchAccountDetails() {
+      await this.$store.dispatch('accounts/get');
+
+      if (!this.hasABillingPlan) {
+        this.$store.dispatch('accounts/subscription');
+      }
+    },
+    onClickBillingPortal() {
+      this.$store.dispatch('accounts/checkout');
+    },
+    onToggleChatWindow() {
+      if (window.$chatwoot) {
+        window.$chatwoot.toggle();
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+.manage-subscription {
+  align-items: center;
+  background: var(--white);
+  border-radius: var(--border-radius-normal);
+  border: 1px solid var(--color-border);
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: var(--space-small);
+  padding: var(--space-medium) var(--space-normal);
+}
+
+.current-plan--details {
+  border-bottom: 1px solid var(--color-border);
+  margin-bottom: var(--space-normal);
+  padding-bottom: var(--space-normal);
+}
+
+.manage-subscription {
+  .manage-subscription--description {
+    margin-bottom: 0;
+  }
+}
+</style>

app/javascript/dashboard/routes/dashboard/settings/billing/billing.routes.js

@@ -0,0 +1,26 @@
+import SettingsContent from '../Wrapper';
+import Index from './Index.vue';
+import { frontendURL } from '../../../../helper/URLHelper';
+
+export default {
+  routes: [
+    {
+      path: frontendURL('accounts/:accountId/settings/billing'),
+      roles: ['administrator'],
+      component: SettingsContent,
+      props: {
+        headerTitle: 'BILLING_SETTINGS.TITLE',
+        icon: 'credit-card-person',
+        showNewButton: false,
+      },
+      children: [
+        {
+          path: '',
+          name: 'billing_settings_index',
+          component: Index,
+          roles: ['administrator'],
+        },
+      ],
+    },
+  ],
+};

app/javascript/dashboard/routes/dashboard/settings/billing/components/BillingItem.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="manage-subscription">
+    <div>
+      <h6>{{ title }}</h6>
+      <p class="manage-subscription--description">
+        {{ description }}
+      </p>
+    </div>
+    <div>
+      <woot-button variant="smooth" :icon="buttonIcon" @click="$emit('click')">
+        {{ buttonLabel }}
+      </woot-button>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    title: {
+      type: String,
+      default: '',
+    },
+    description: {
+      type: String,
+      default: '',
+    },
+    buttonLabel: {
+      type: String,
+      default: '',
+    },
+
+    buttonIcon: {
+      type: String,
+      default: 'edit',
+    },
+  },
+};
+</script>

app/javascript/dashboard/routes/dashboard/settings/settings.routes.js

@@ -13,6 +13,7 @@ import teams from './teams/teams.routes';
 import attributes from './attributes/attributes.routes';
 import automation from './automation/automation.routes';
 import store from '../../../store';
+import billing from './billing/billing.routes';
 
 export default {
   routes: [
@@ -29,16 +30,17 @@ export default {
     },
     ...account.routes,
     ...agent.routes,
+    ...attributes.routes,
+    ...automation.routes,
+    ...billing.routes,
+    ...campaigns.routes,
     ...canned.routes,
     ...inbox.routes,
+    ...integrationapps.routes,
     ...integrations.routes,
     ...labels.routes,
     ...profile.routes,
     ...reports.routes,
     ...teams.routes,
-    ...campaigns.routes,
-    ...integrationapps.routes,
-    ...attributes.routes,
-    ...automation.routes,
   ],
 };