Adding Translation Support

README.md

@@ -6,6 +6,7 @@
 [![Total Downloads](https://img.shields.io/packagist/dt/limedeck/nova-cashier-overview.svg?style=flat-square)](https://packagist.org/packages/limedeck/nova-cashier-overview)
 
 This [Nova](https://nova.laravel.com) tool lets you:
+
 - view a database subscription (subscription name is a parameter)
 - view Stripe subscription details
 - view invoices for a given subscription with a downloadable link
@@ -51,16 +52,24 @@ public function fields(Request $request)
         Subscription::make(),
 
         // if you want to display a specific subscription or multiple
-        Subscription::make('a-fancy-subscription-name'), 
+        Subscription::make('a-fancy-subscription-name'),
 
         ...
     ];
 }
 ```
 
+To translate the nova tool use:
+
+```bash
+php artisan vendor:publish --provider="LimeDeck\NovaCashierOverview\Providers\CashierOverviewServiceProvider"
+```
+
+Inside your /resources/lang/vendor/nova-cashier-overview you can create your custom translations.
+
 ### Testing
 
-``` bash
+```bash
 composer test
 ```
 

package.json

@@ -22,6 +22,7 @@
         "vue-template-compiler": "^2.5.0"
     },
     "dependencies": {
+        "moment": "^2.24.0",
         "vue": "^2.5.0"
     }
 }

resources/js/components/DatabaseDetails.vue

@@ -1,49 +1,37 @@
 <template>
-  <loading-view 
-    :loading="loading" 
-    class="w-full">
-    <display-row 
-      v-if="!subscription" 
-      class="text-70" 
-      label="Status">
-      There is no subscription available.
-    </display-row>
+  <loading-view :loading="loading" class="w-full">
+    <display-row v-if="!subscription" class="text-70" label="Status">{{
+      __('No active subscription')
+    }}</display-row>
 
-    <display-row 
-      v-if="subscription" 
-      label="Plan">
-      {{ subscription.plan }}
-    </display-row>
+    <display-row v-if="subscription" :label="__('Plan')">{{ subscription.plan }}</display-row>
 
-    <display-row 
-      v-if="subscription" 
-      label="Subscribed since">
-      {{ subscription.created_at }}
+    <display-row v-if="subscription" :label="__('Subscribed since')">
+      {{ subscription.created_at | moment(__('DD.MM.YYYY HH:mm')) }}
     </display-row>
 
-    <display-row 
-      v-if="subscription" 
-      class="remove-bottom-border" 
-      label="Status">
-      <span v-if="subscription.on_grace_period">
-        On Grace Period
-      </span>
-      <span 
-        v-if="subscription.cancelled || subscription.ends_at" 
-        class="text-danger">
-        Cancelled
-      </span>
-      <span v-if="subscription.active && !subscription.cancelled && !subscription.ends_at">
-        Active
-      </span>
+    <display-row v-if="subscription" class="remove-bottom-border" :label="__('Status')">
+      <span v-if="subscription.on_grace_period">{{ __('On Grace Period') }}</span>
+      <span v-if="subscription.cancelled || subscription.ends_at" class="text-danger">
+        {{ __('Cancelled') }}</span
+      >
+      <span v-if="subscription.active && !subscription.cancelled && !subscription.ends_at">{{
+        __('Active')
+      }}</span>
     </display-row>
   </loading-view>
 </template>
 
 <script>
 import DisplayRow from './DisplayRow';
+import moment from 'moment';
 
 export default {
+  filters: {
+    moment: function(date, format) {
+      return moment(date).format(format);
+    },
+  },
   name: 'DatabaseDetails',
 
   components: {

resources/js/components/DisplayRow.vue

@@ -1,7 +1,5 @@
 <template functional>
-  <div 
-    :class="data.staticClass" 
-    class="flex border-b border-40">
+  <div :class="data.staticClass" class="flex border-b border-40">
     <div class="w-1/4 py-4">
       <h4 class="font-normal text-80">
         {{ props.label }}

resources/js/components/InvoicesTable.vue

@@ -1,62 +1,54 @@
 <template>
   <div class="mt-8 relative">
     <div class="py-3 flex items-center border-b border-50">
-      <div class="px-3">
-        Invoices
-      </div>
+      <div class="px-3">{{ __('Invoices') }}</div>
     </div>
 
     <div class="overflow-hidden overflow-x-auto relative">
-      <table 
-        cellpadding="0" 
-        cellspacing="0" 
-        data-testid="resource-table" 
-        class="table w-full">
+      <table cellpadding="0" cellspacing="0" data-testid="resource-table" class="table w-full">
         <thead>
           <tr>
-            <th 
-              v-for="item in columns" 
-              :key="item.label" 
-              class="text-left">
-              <span class="cursor-pointer inline-flex items-center">
-                {{ item.label }}
-              </span>
+            <th class="text-left">
+              <span class="cursor-pointer inline-flex items-center">{{ __('Charge ID') }}</span>
+            </th>
+            <th class="text-left">
+              <span class="cursor-pointer inline-flex items-center">{{ __('Amount') }}</span>
+            </th>
+            <th class="text-left">
+              <span class="cursor-pointer inline-flex items-center">{{ __('Period Start') }}</span>
+            </th>
+            <th class="text-left">
+              <span class="cursor-pointer inline-flex items-center">{{ __('Period End') }}</span>
+            </th>
+            <th class="text-left">
+              <span class="cursor-pointer inline-flex items-center">{{ __('View') }}</span>
             </th>
           </tr>
         </thead>
         <tbody>
-          <tr 
-            v-for="invoice in invoices" 
-            :key="invoice.id">
+          <tr v-for="invoice in invoices" :key="invoice.id">
             <td>
-              <span class="whitespace-no-wrap text-left">
-                {{ invoice.charge_id || '-' }}
-              </span>
+              <span class="whitespace-no-wrap text-left">{{ invoice.charge_id || '-' }}</span>
             </td>
             <td>
-              <span class="whitespace-no-wrap text-left">
-                {{ invoice.total / 100 }} {{ invoice.currency }}
-              </span>
+              <span class="whitespace-no-wrap text-left"
+                >{{ invoice.total / 100 }} {{ invoice.currency }}</span
+              >
             </td>
             <td>
-              <span class="whitespace-no-wrap text-left">
-                {{ invoice.period_start }}
-              </span>
+              <span class="whitespace-no-wrap text-left">{{ invoice.period_start }}</span>
             </td>
             <td>
-              <span class="whitespace-no-wrap text-left">
-                {{ invoice.period_end }}
-              </span>
+              <span class="whitespace-no-wrap text-left">{{ invoice.period_end }}</span>
             </td>
             <td class="text-right">
               <a
                 v-if="invoice.link"
                 :href="invoice.link"
                 class="btn btn-outline text-sm"
                 target="_blank"
+                >{{ __('View') }}</a
               >
-                View
-              </a>
             </td>
           </tr>
         </tbody>
@@ -75,16 +67,6 @@ export default {
       default: () => [],
     },
   },
-
-  data: () => ({
-    columns: [
-      { label: 'Charge ID' },
-      { label: 'Amount' },
-      { label: 'From' },
-      { label: 'To' },
-      { label: 'Actions' },
-    ],
-  }),
 };
 </script>
 

resources/js/components/StripeDetails.vue

@@ -1,50 +1,34 @@
 <template>
-  <loading-view 
-    :loading="loading" 
-    class="w-full">
-    <div 
-      v-if="!subscription" 
-      class="flex py-8">
+  <loading-view :loading="loading" class="w-full">
+    <div v-if="!subscription" class="flex py-8">
       <button
         class="mx-auto btn btn-default bg-30 border-30 font-normal hover:bg-40"
         @click="$emit('manage-clicked')"
       >
-        Manage Stripe subscription
+        {{ __('Manage Stripe subscription') }}
       </button>
     </div>
 
     <div v-if="!loading && subscription">
       <heading class="mt-8 mb-4">
-        Stripe subscription management
+        {{ __('Stripe subscription management') }}
       </heading>
 
-      <display-row 
-        v-if="subscription" 
-        label="Created">
-        {{ subscription.created_at }}
+      <display-row v-if="subscription" :label="__('Created')">
+        {{ subscription.created_at | moment(__('DD.MM.YYYY HH:mm')) }}
       </display-row>
 
-      <display-row 
-        v-if="subscription" 
-        label="Plan">
-        {{ subscription.stripe_plan }}
+      <display-row v-if="subscription" :label="__('Plan')">
+        {{ __(subscription.stripe_plan) }}
       </display-row>
 
-      <display-row 
-        v-if="subscription" 
-        label="Change plan">
-        <select 
-          v-model="newPlan" 
-          class="form-control form-select">
-          <option 
-            value="" 
-            disabled="disabled" 
-            selected="selected">Choose New Plan</option>
-          <option 
-            v-for="plan in plans" 
-            :key="plan.id" 
-            :value="plan.id">
-            {{ plan.id }} ({{ plan.price / 100 }} {{ plan.currency }} / {{ plan.interval }})
+      <display-row v-if="subscription" :label="__('Change plan')">
+        <select v-model="newPlan" class="form-control form-select">
+          <option value="" disabled="disabled" selected="selected">
+            {{ __('Choose new plan') }}
+          </option>
+          <option v-for="plan in plans" :key="plan.id" :value="plan.id">
+            {{ __(plan.id) }} ({{ plan.price / 100 }} {{ plan.currency }} / {{ __(plan.interval) }})
           </option>
         </select>
 
@@ -58,37 +42,32 @@
           class="btn btn-sm btn-outline"
           @click="$emit('update-plan', newPlan)"
         >
-          Update Plan
+          {{ __('Update Plan') }}
         </button>
       </display-row>
 
-      <display-row 
-        v-if="subscription" 
-        label="Amount">
+      <display-row v-if="subscription" :label="__('Amount')">
         {{ subscription.plan_amount / 100 }} ({{ subscription.plan_currency }}) /
-        {{ subscription.plan_interval }}
+        {{ __(subscription.plan_interval) }}
       </display-row>
 
-      <display-row 
-        v-if="subscription" 
-        label="Billing period">
-        {{ subscription.current_period_start }} => {{ subscription.current_period_end }}
+      <display-row v-if="subscription" :label="__('Billing period')">
+        {{ subscription.current_period_start | moment(__('DD.MM.YYYY HH:mm')) }} {{ __('to') }}
+        {{ subscription.current_period_end | moment(__('DD.MM.YYYY HH:mm')) }}
       </display-row>
 
-      <display-row 
-        v-if="subscription" 
-        label="Status">
+      <display-row v-if="subscription" :label="__('Status')">
         <span v-if="subscription.on_grace_period">On Grace Period</span>
-        <span 
-          v-if="subscription.cancelled || subscription.cancel_at_period_end" 
+        <span
+          v-if="subscription.cancelled || subscription.cancel_at_period_end"
           class="text-danger"
-        >Cancelled</span
+          >{{ __('Cancelled') }}</span
         >
         <span
           v-if="
             subscription.active && !subscription.cancelled && !subscription.cancel_at_period_end
           "
-        >Active</span
+          >{{ __('Active') }}</span
         >
 
         <button
@@ -98,30 +77,35 @@
           class="btn btn-sm btn-outline ml-4"
           @click="$emit('cancel-subscription')"
         >
-          Cancel
+          {{ __('Cancel') }}
         </button>
 
         <button
           v-if="subscription.active && subscription.cancel_at_period_end"
           class="btn btn-sm btn-outline ml-4"
           @click="$emit('resume-subscription')"
         >
-          Resume
+          {{ __('Resume') }}
         </button>
       </display-row>
     </div>
 
-    <invoices-table 
-      v-if="invoices.length" 
-      :invoices="invoices" />
+    <invoices-table v-if="invoices.length" :invoices="invoices" />
   </loading-view>
 </template>
 
 <script>
 import DisplayRow from './DisplayRow';
 import InvoicesTable from './InvoicesTable';
 
+import moment from 'moment';
+
 export default {
+  filters: {
+    moment: function(date, format) {
+      return moment(date).format(format);
+    },
+  },
   name: 'StripeDetails',
 
   components: {

resources/js/components/Subscription.vue

@@ -1,13 +1,11 @@
 <template>
   <div>
     <h1 class="mb-3 text-90 font-normal text-2xl">
-      Subscription <span class="font-light text-70">({{ subscriptionName }})</span>
+      {{ __('Subscription') }}
     </h1>
 
     <card class="mb-6 py-3 px-6 flex flex-col">
-      <database-details 
-        :subscription="databaseSubscription" 
-        :loading="loading.database" />
+      <database-details :subscription="databaseSubscription" :loading="loading.database" />
 
       <stripe-details
         :subscription="stripeSubscription"