Merge pull request #1488 from aziontech/uxe-3281-review-billing-pages

[UXE-3281] chore: review content in Billing pages
aziontech · Jul 16, 2024 · 29f551d · 29f551d
2 parents 7121331 + b3c554d
commit 29f551d
Show file tree

Hide file tree

Showing 7 changed files with 27 additions and 28 deletions.
diff --git a/src/templates/add-payment-method-block/index.vue b/src/templates/add-payment-method-block/index.vue
@@ -181,7 +181,7 @@
                     id="cardholder-name"
                     v-model="cardholderName"
                     class="p-component p-inputtext"
-                    placeholder="Morgana Johann"
+                    placeholder="Jhon Doe"
                   />
                 </div>
                 <div class="flex flex-col sm:max-w-xs w-full gap-2">
@@ -208,7 +208,7 @@
                 </div>
                 <div class="flex flex-col sm:max-w-xs w-full gap-2">
                   <LabelBlock
-                    label="Security Code (CVC)"
+                    label="Security Code (CVC/CVV)"
                     :isRequired="true"
                   />
                   <div
@@ -219,8 +219,7 @@
               </div>
               <div class="flex flex-col sm:max-w-lg w-full gap-2">
                 <InlineMessage severity="info"
-                  >This is a sensitive data is handled by a PCI Compliant payment
-                  partner.</InlineMessage
+                  >Sensitive data is handled by a PCI-compliant payment partner.</InlineMessage
                 >
               </div>
             </form>

diff --git a/src/views/Billing/BillsView.vue b/src/views/Billing/BillsView.vue
@@ -18,7 +18,7 @@
           <span class="font-medium text-color text-sm">{{ currentInvoice.billingPeriod }}</span>
         </div>
         <div class="flex justify-between">
-          <span class="text-color-secondary text-sm">Products Charges</span>
+          <span class="text-color-secondary text-sm">Product Charges</span>
           <span class="text-color text-sm"
             ><span class="text-color-secondary text-sm"
               ><span class="text-color-secondary text-sm">$</span></span
@@ -60,7 +60,7 @@
     >
       <div class="p-3 md:p-6 flex flex-col gap-4">
         <div class="flex justify-between">
-          <span class="font-medium text-lg text-color">Your Service Plan</span>
+          <span class="font-medium text-lg text-color">Service Plan</span>
           <PrimeButton
             icon="pi pi-arrow-up-right"
             outlined
@@ -97,7 +97,7 @@
         <div class="flex justify-between">
           <span class="text-color-secondary text-sm">Payment Currency</span>
           <span class="font-medium text-color text-sm"
-            >Dollar USD (<span class="text-color-secondary text-sm">$</span>)</span
+            >USD (<span class="text-color-secondary text-sm">$</span>)</span
           >
         </div>
         <div class="flex justify-between">
@@ -111,11 +111,11 @@
 
       <div class="p-3 md:p-6 border-t surface-border flex flex-col gap-4">
         <p class="text-sm text-color-secondary">
-          Consumptions made up to the last day of the month will be included in this invoice. Change
+          This invoice includes all consumption up to the last day of the month. Change
           <span
             @click="goToPayment"
             class="text-[var(--text-color-link)] cursor-pointer"
-            >payment methods.</span
+            >payment method.</span
           >
         </p>
       </div>
@@ -132,12 +132,12 @@
     :listService="props.listPaymentHistoryService"
     @on-load-data="handleLoadData"
     :actions="actionsRow"
-    emptyListMessage="No payment history found."
+    emptyListMessage="No payment activity found."
   />
   <EmptyResultsBlock
     v-else
-    title="No payment history has been added"
-    description="No payment history is available at the moment. Please check back later."
+    title="No payment activity has been recorded"
+    description="Add a payment method and start using services and products to view your activity."
     :inTabs="true"
     :documentationService="props.documentPaymentHistoryService"
   >
@@ -212,7 +212,7 @@
     },
     {
       field: 'invoiceNumber',
-      header: 'invoice ID',
+      header: 'Invoice ID',
       filterPath: 'invoiceNumber.content',
       sortField: 'invoiceNumber.content',
       type: 'component',
@@ -237,7 +237,7 @@
     },
     {
       field: 'amount',
-      header: 'Transactions Amount'
+      header: 'Amount'
     },
     {
       field: 'status',

diff --git a/src/views/Billing/Drawer/index.vue b/src/views/Billing/Drawer/index.vue
@@ -62,7 +62,7 @@
     :schema="validationSchema"
     :initialValues="initialValues"
     @onSuccess="handleCreateCredit"
-    title="Add credit to your account"
+    title="Add Credit"
   >
     <template #formFields="{ disabledFields, closeDrawer }">
       <FormFieldsCreateCredit
@@ -76,7 +76,7 @@
         @onCancel="closeDrawer"
         @onSubmit="onSubmit"
         inDrawer
-        primaryActionLabel="Add credit"
+        primaryActionLabel="Add Credit"
         :loading="isSubmitting"
       />
     </template>

diff --git a/src/views/Billing/FormFields/FormFieldsCreateCredit.vue b/src/views/Billing/FormFields/FormFieldsCreateCredit.vue
@@ -52,7 +52,7 @@
 <template>
   <FormHorizontal
     :isDrawer="true"
-    title="Amount"
+    title="Credit Amount"
   >
     <template #inputs>
       <div class="flex gap-6 max-sm:flex-col">
@@ -99,7 +99,7 @@
             for="field-card"
             class="text-color text-base font-medium leading-5 flex gap-1 align-items-center"
           >
-            Paying with
+            Payment method
           </label>
           <div class="p-inputgroup h-fit">
             <div class="p-inputgroup-addon">
@@ -113,22 +113,22 @@
             />
           </div>
           <small class="text-xs text-color-secondary font-normal leading-5">
-            Default Payment Method
+            Default payment method selected.
           </small>
         </div>
       </div>
       <InlineMessage
         severity="info"
         class="text-sm"
       >
-        Consumptions made up to the last day of the month will be included in this invoice. Change
+        The credit balance will be included in the monthly invoices, along with all consumption up
+        to the last day of the month. Change
         <PrimeButton
-          label="Payment Method"
+          label="payment method"
           link
           class="p-0"
           @click="goToPaymentMethod"
-        />
-        .
+        />.
       </InlineMessage>
     </template>
   </FormHorizontal>

diff --git a/src/views/Billing/InvoiceDetailsView.vue b/src/views/Billing/InvoiceDetailsView.vue
@@ -46,7 +46,7 @@
           <span class="font-medium text-color text-sm">{{ invoiceData.billingPeriod }}</span>
         </div>
         <div class="flex justify-between">
-          <span class="text-color-secondary text-sm">Products Charges</span>
+          <span class="text-color-secondary text-sm">Product Charges</span>
           <span class="text-color text-sm">
             <span class="text-color-secondary text-sm">$</span>
             {{ invoiceData.productChanges }}</span

diff --git a/src/views/Billing/PaymentListView.vue b/src/views/Billing/PaymentListView.vue
@@ -26,15 +26,15 @@
       <div class="flex gap-4">
         <PrimeButton
           icon="pi pi-plus"
-          label="Add Credit"
+          label="Credit"
           @click="openCreateCreditDrawer"
           outlined
         />
         <PrimeButton
           icon="pi pi-plus"
           severity="secondary"
           @click="openDrawerCreatePaymentMethod"
-          label="Add Payment Method"
+          label="Payment Method"
         />
       </div>
     </template>
@@ -125,7 +125,7 @@
     },
     {
       field: 'cardExpiration',
-      header: 'Expires in',
+      header: 'Expiration Date',
       sortField: 'expiringDateByOrder',
       filterPath: 'expiringDateSearch',
       type: 'component',

diff --git a/src/views/Billing/TabsView.vue b/src/views/Billing/TabsView.vue
@@ -71,7 +71,7 @@
           <Tag
             severity="secondary"
             icon="pi pi-refresh"
-            value="Last Updated - MM/DD/2023 02:32 PM"
+            value="Last Updated: MM/DD/2023 02:32 PM"
           />
         </template>
       </PageHeadingBlock>