feat: implement account policy page

src/_components/modals/AdvancedSettings.vue

@@ -32,7 +32,7 @@
           label="name"
         >
           <template v-slot:selected-option="option">
-            <span>Domain: {{ option.name }}</span>
+            <span>{{messages.field_label_network_domain}}: {{ option.name }}</span>
           </template>
         </v-select>
       </div>
@@ -47,7 +47,7 @@
         >
           <template v-slot:selected-option="option">
             <span>
-              Location: {{ option.name }}
+              {{messages.field_label_region}}: {{ option.name }}
               {{ regionDistance(option.uuid) }}
             </span>
           </template>
@@ -66,7 +66,7 @@
           label="label"
         >
           <template v-slot:selected-option="option">
-            <span>Language: {{ option.label }}</span>
+            <span>{{messages.field_label_locale}}: {{ option.label }}</span>
           </template>
         </v-select>
       </div>
@@ -82,7 +82,7 @@
           name="timezone"
         >
           <template v-slot:selected-option="option">
-            <span>Time Zone: {{ option.timezoneDescription }}</span>
+            <span>{{messages.field_label_timezone}}: {{ option.timezoneDescription }}</span>
           </template>
         </v-select>
       </div>
@@ -96,7 +96,7 @@
           label="localName"
         >
           <template v-slot:selected-option="option">
-            <span>Footprint: {{ option.localName }}</span>
+            <span>{{messages.field_label_footprint}}: {{ option.localName }}</span>
           </template>
         </v-select>
       </div>
@@ -106,7 +106,7 @@
           :options="sshKeys"
         >
           <template v-slot:selected-option="option">
-            <span>SSH Key: {{ option.name }}</span>
+            <span>{{messages.field_label_network_ssh_key}}: {{ option.name }}</span>
           </template>
           <template v-slot:option="option">
             {{ option.name }}

src/_components/shared/Input.vue

@@ -1,6 +1,11 @@
 <!-- Copyright (c) 2020 Bubble, Inc. All rights reserved. For personal (non-commercial) use, see license: https://getbubblenow.com/bubble-license/ -->
 <template>
-  <input v-bind="$attrs" v-model="content" @input="handleInput()" class="form-input"/>
+  <input
+    v-bind="$attrs"
+    v-model="content"
+    @input="handleInput()"
+    class="form-input"
+  />
 </template>
 
 <style lang="scss" scoped></style>
@@ -9,7 +14,7 @@
 export default {
   props: {
     value: {
-      type: String,
+      type: String | Number,
       default: '',
     },
   },
@@ -21,7 +26,7 @@ export default {
   watch: {
     value(v) {
       this.content = v;
-    }
+    },
   },
   methods: {
     handleInput(e) {

src/_pages/main/account/Bills.vue

@@ -0,0 +1,176 @@
+<!-- Copyright (c) 2020 Bubble, Inc. All rights reserved. For personal (non-commercial) use, see license: https://getbubblenow.com/bubble-license/ -->
+<template>
+  <div>
+    <h1 class="text-center white-text form-title">
+      {{ messages.title_bills }}
+      <span v-if="this.me === false"> - {{ this.userId }}</span>
+    </h1>
+
+    <div v-if="billFocus" class="bubble-form">
+      <div>
+        {{ messages.label_bill_period_start }}: {{ billFocus.periodStart }}
+      </div>
+      <div>{{ messages.label_bill_period_end }}: {{ billFocus.periodEnd }}</div>
+      <div>
+        {{ messages.label_bill_plan }}:
+        {{ messages['plan_name_' + billFocus.planObject.name] }}
+      </div>
+      <div>
+        {{ messages.label_bill_status }}:
+        {{ messages['bill_status_' + billFocus.status] }}
+      </div>
+      <div>
+        {{ messages.label_bill_total }}:
+        {{
+          messages.label_bill_total_format.parseExpression({
+            messages: messages,
+            ...billFocus,
+            totalMajorUnits: billFocus.total / 100,
+            totalMinorUnits: billFocus.total % 100,
+          })
+        }}
+      </div>
+
+      <table border="1">
+        <thead>
+          <tr>
+            <td>{{ messages.label_payment_type }}</td>
+            <td>{{ messages.label_payment_method }}</td>
+            <td>{{ messages.label_payment_status }}</td>
+            <td>{{ messages.label_payment_amount }}</td>
+            <td>{{ messages.label_payment_action }}</td>
+          </tr>
+        </thead>
+        <tbody v-if="billFocus.payments">
+          <tr v-for="(payment, key) in billFocus.payments" :key="key">
+            <td>
+              {{
+                messages[
+                  'payment_method_' +
+                    payment.paymentMethodObject.paymentMethodType
+                ]
+              }}
+            </td>
+            <td v-if="payment.paymentMethodObject.promotion">
+              {{
+                messages[
+                  'label_promotion_' +
+                    payment.paymentMethodObject.maskedPaymentInfo
+                ]
+              }}
+            </td>
+            <td v-else>{{ payment.paymentMethodObject.maskedPaymentInfo }}</td>
+            <td>{{ messages['payment_status_' + payment.status] }}</td>
+            <td>
+              {{
+                messages.label_payment_amount_format.parseExpression({
+                  messages: messages,
+                  ...payment,
+                  amountMajorUnits: payment.amount / 100,
+                  amountMinorUnits: payment.amount % 100,
+                })
+              }}
+            </td>
+            <td>
+              {{ messages['payment_type_' + payment.type] }}
+            </td>
+          </tr>
+        </tbody>
+      </table>
+
+      <button @click="showBillDetail(null)">
+        {{ messages.button_label_close_bill_detail }}
+      </button>
+    </div>
+
+    <div v-else class="bubble-form">
+      <table border="1">
+        <thead>
+          <tr>
+            <td>{{ messages.label_bill_period }}</td>
+            <td>{{ messages.label_bill_plan }}</td>
+            <td>{{ messages.label_bill_status }}</td>
+            <td>{{ messages.label_bill_total }}</td>
+          </tr>
+        </thead>
+        <tbody v-if="bills">
+          <tr
+            v-for="(bill, key) in bills"
+            @click="showBillDetail(bill)"
+            :key="key"
+          >
+            <td>{{ bill.periodStart }}</td>
+            <td>{{ messages['plan_name_' + bill.planObject.name] }}</td>
+            <td>{{ messages['bill_status_' + bill.status] }}</td>
+            <td>
+              {{
+                messages.label_bill_total_format.parseExpression({
+                  messages: messages,
+                  ...bill,
+                  totalMajorUnits: bill.total / 100,
+                  totalMinorUnits: bill.total % 100,
+                })
+              }}
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@import '../../../_scss/components/form';
+</style>
+
+<script>
+import { mapState, mapActions, mapGetters } from 'vuex';
+import { util } from '~/_helpers';
+
+export default {
+  data() {
+    return {
+      me: null,
+      userId: null,
+      linkPrefix: null,
+      currentUser: util.currentUser(),
+      billFocus: null,
+    };
+  },
+  computed: {
+    ...mapState('system', ['messages']),
+    ...mapState('bills', ['bills', 'bill']),
+  },
+  methods: {
+    ...mapActions('bills', ['getAllBillsByAccount', 'getBillByAccountAndId']),
+    ...mapGetters('bills', ['loading']),
+    showBillDetail(bill) {
+      this.billFocus = bill;
+      if (bill !== null) {
+        this.getBillByAccountAndId({
+          userId: this.userId,
+          billId: bill.uuid,
+          messages: this.messages,
+          errors: this.errors,
+        });
+      }
+    },
+  },
+  watch: {
+    bill(b) {
+      if (b) {
+        this.billFocus = b;
+      }
+    },
+  },
+  created() {
+    if (util.validateAccount(this)) {
+      this.getAllBillsByAccount({
+        userId: this.userId,
+        messages: this.messages,
+        errors: this.errors,
+      });
+    }
+  },
+};
+</script>

src/_router/index.js

@@ -108,6 +108,14 @@ export const router = new Router({
                   path: 'me/payment',
                   component: () => import('~/_pages/main/account/PaymentMethods'),
                 },
+                {
+                  path: 'me/bills',
+                  component: () => import('~/_pages/main/account/Bills'),
+                },
+                {
+                  path: 'me/policy',
+                  component: () => import('~/_pages/main/account/Policy'),
+                },
               ],
             },
             {

webpack.config.js

@@ -51,7 +51,7 @@ module.exports = (env) => ({
     publicPath: '/',
     proxy: env && !!env.server && {
       '/api': env.server,
-    },
+    } || null,
   },
   output: {
     publicPath: '/',