translations update

app/FileManagerFile.php

@@ -116,8 +116,8 @@ class FileManagerFile extends Model
      */
     public function getThumbnailAttribute()
     {
-        // Get thumbnail from s3
+        // Get thumbnail from external storage
-        if ($this->attributes['thumbnail'] && is_storage_driver(['s3', 'spaces'])) {
+        if ($this->attributes['thumbnail'] && is_storage_driver(['s3', 'spaces', 'wasabi', 'backblaze'])) {
 
             return Storage::temporaryUrl('file-manager/' . $this->attributes['thumbnail'], now()->addHour());
         }
@@ -146,7 +146,7 @@ class FileManagerFile extends Model
     public function getFileUrlAttribute()
     {
         // Get file from s3
-        if (is_storage_driver(['s3', 'spaces'])) {
+        if (is_storage_driver(['s3', 'spaces', 'wasabi', 'backblaze'])) {
 
             $header = [
                 "ResponseAcceptRanges"       => "bytes",

app/User.php

@@ -10,6 +10,7 @@ use Illuminate\Foundation\Auth\User as Authenticatable;
 use Illuminate\Notifications\Notifiable;
 use Illuminate\Support\Facades\Hash;
 use Illuminate\Support\Facades\Notification;
+use Illuminate\Support\Facades\Storage;
 use Laravel\Cashier\Billable;
 use Laravel\Passport\HasApiTokens;
 use Rinvex\Subscriptions\Traits\HasSubscriptions;
@@ -151,6 +152,11 @@ class User extends Authenticatable
         return $user_capacity;
     }
 
+    /**
+     * Get user full folder tree
+     *
+     * @return \Illuminate\Database\Eloquent\Builder[]|\Illuminate\Database\Eloquent\Collection
+     */
     public function getFolderTreeAttribute()
     {
         return FileManagerFolder::with(['folders.shared', 'shared:token,id,item_id,permission,protected'])
@@ -166,6 +172,13 @@ class User extends Authenticatable
      */
     public function getAvatarAttribute()
     {
+        // Get avatar from external storage
+        if ($this->attributes['avatar'] && is_storage_driver(['s3', 'spaces', 'wasabi', 'backblaze'])) {
+
+            return Storage::temporaryUrl($this->attributes['avatar'], now()->addDay());
+        }
+
+        // Get avatar from local storage
         if ($this->attributes['avatar']) {
             return url('/' . $this->attributes['avatar']);
         }

public/mix-manifest.json

@@ -239,5 +239,59 @@
     "/js/main.f7ea32b1bdd7d5893101.hot-update.js": "/js/main.f7ea32b1bdd7d5893101.hot-update.js",
     "/js/main.bb919bf230ccfd1da5ad.hot-update.js": "/js/main.bb919bf230ccfd1da5ad.hot-update.js",
     "/js/main.c339a8942aeb56673ce8.hot-update.js": "/js/main.c339a8942aeb56673ce8.hot-update.js",
-    "/js/main.666b5bd039ecb83ba849.hot-update.js": "/js/main.666b5bd039ecb83ba849.hot-update.js"
+    "/js/main.666b5bd039ecb83ba849.hot-update.js": "/js/main.666b5bd039ecb83ba849.hot-update.js",
+    "/js/main.5d6bd6229cad21177b5d.hot-update.js": "/js/main.5d6bd6229cad21177b5d.hot-update.js",
+    "/js/main.1314bd7b0155050142db.hot-update.js": "/js/main.1314bd7b0155050142db.hot-update.js",
+    "/js/main.c55d0aaf47449e57f28f.hot-update.js": "/js/main.c55d0aaf47449e57f28f.hot-update.js",
+    "/js/main.1ebff55b9a709134bdf9.hot-update.js": "/js/main.1ebff55b9a709134bdf9.hot-update.js",
+    "/js/main.d9e14c4f874d9aae2991.hot-update.js": "/js/main.d9e14c4f874d9aae2991.hot-update.js",
+    "/js/main.6aad28750a58dc8a1a84.hot-update.js": "/js/main.6aad28750a58dc8a1a84.hot-update.js",
+    "/js/main.a4a5e491361ca05ac530.hot-update.js": "/js/main.a4a5e491361ca05ac530.hot-update.js",
+    "/js/main.ab40d76d1114a2a348d9.hot-update.js": "/js/main.ab40d76d1114a2a348d9.hot-update.js",
+    "/js/main.272e7fc5df78185ef223.hot-update.js": "/js/main.272e7fc5df78185ef223.hot-update.js",
+    "/js/main.3980c9d6032f6d9893d6.hot-update.js": "/js/main.3980c9d6032f6d9893d6.hot-update.js",
+    "/js/main.3fd1ae93571bb5fe8493.hot-update.js": "/js/main.3fd1ae93571bb5fe8493.hot-update.js",
+    "/js/main.c9097f4a153e7fd3e0bd.hot-update.js": "/js/main.c9097f4a153e7fd3e0bd.hot-update.js",
+    "/js/main.89cbccfdfb280c101229.hot-update.js": "/js/main.89cbccfdfb280c101229.hot-update.js",
+    "/js/main.3a92cbc41ec25d8e2018.hot-update.js": "/js/main.3a92cbc41ec25d8e2018.hot-update.js",
+    "/js/main.2a86157426eb177cc6f2.hot-update.js": "/js/main.2a86157426eb177cc6f2.hot-update.js",
+    "/js/main.411caab58470390ff0bd.hot-update.js": "/js/main.411caab58470390ff0bd.hot-update.js",
+    "/js/main.d594e00eec3ae4abd751.hot-update.js": "/js/main.d594e00eec3ae4abd751.hot-update.js",
+    "/js/main.70d17783fe28bf990276.hot-update.js": "/js/main.70d17783fe28bf990276.hot-update.js",
+    "/js/main.c7bc397e2e421f0141fc.hot-update.js": "/js/main.c7bc397e2e421f0141fc.hot-update.js",
+    "/js/main.815d02e7f3f9f8841915.hot-update.js": "/js/main.815d02e7f3f9f8841915.hot-update.js",
+    "/js/main.d40b9abc043ed8480a8a.hot-update.js": "/js/main.d40b9abc043ed8480a8a.hot-update.js",
+    "/js/main.19a9789de3de21c4b8eb.hot-update.js": "/js/main.19a9789de3de21c4b8eb.hot-update.js",
+    "/js/main.8be11c6045cb66da58d1.hot-update.js": "/js/main.8be11c6045cb66da58d1.hot-update.js",
+    "/js/main.1983ca165da1e65707ed.hot-update.js": "/js/main.1983ca165da1e65707ed.hot-update.js",
+    "/js/main.7a29b122f46980bbd2ef.hot-update.js": "/js/main.7a29b122f46980bbd2ef.hot-update.js",
+    "/js/main.ddb45dcd7b4091c5ac5f.hot-update.js": "/js/main.ddb45dcd7b4091c5ac5f.hot-update.js",
+    "/js/main.7d7ac6845f8c792a4476.hot-update.js": "/js/main.7d7ac6845f8c792a4476.hot-update.js",
+    "/js/main.ae16004d1621864211e7.hot-update.js": "/js/main.ae16004d1621864211e7.hot-update.js",
+    "/js/main.84b099565f7cb44a5aae.hot-update.js": "/js/main.84b099565f7cb44a5aae.hot-update.js",
+    "/js/main.61d6dc70f0b4a8d69347.hot-update.js": "/js/main.61d6dc70f0b4a8d69347.hot-update.js",
+    "/js/main.6d77e25fc48e11872fb5.hot-update.js": "/js/main.6d77e25fc48e11872fb5.hot-update.js",
+    "/js/main.e52f1368604fe28cad40.hot-update.js": "/js/main.e52f1368604fe28cad40.hot-update.js",
+    "/js/main.0d074a932a774d85ed24.hot-update.js": "/js/main.0d074a932a774d85ed24.hot-update.js",
+    "/js/main.9372920546a93ccc4f10.hot-update.js": "/js/main.9372920546a93ccc4f10.hot-update.js",
+    "/js/main.e865592c8390a29c196a.hot-update.js": "/js/main.e865592c8390a29c196a.hot-update.js",
+    "/js/main.a405908c3c0bda177afe.hot-update.js": "/js/main.a405908c3c0bda177afe.hot-update.js",
+    "/js/main.40ee7f6bbbdb4944b217.hot-update.js": "/js/main.40ee7f6bbbdb4944b217.hot-update.js",
+    "/js/main.0ca213bc260327e5c44c.hot-update.js": "/js/main.0ca213bc260327e5c44c.hot-update.js",
+    "/js/main.1917f89d4150ee8fa356.hot-update.js": "/js/main.1917f89d4150ee8fa356.hot-update.js",
+    "/js/main.f61541d93f712f3870ca.hot-update.js": "/js/main.f61541d93f712f3870ca.hot-update.js",
+    "/js/main.ebf234ddd5de8b436e8c.hot-update.js": "/js/main.ebf234ddd5de8b436e8c.hot-update.js",
+    "/js/main.fb8288157f51ae2a8545.hot-update.js": "/js/main.fb8288157f51ae2a8545.hot-update.js",
+    "/js/main.16962ba62f72f7247d29.hot-update.js": "/js/main.16962ba62f72f7247d29.hot-update.js",
+    "/js/main.039a8cc665108287b217.hot-update.js": "/js/main.039a8cc665108287b217.hot-update.js",
+    "/js/main.ee47b865bc9872684964.hot-update.js": "/js/main.ee47b865bc9872684964.hot-update.js",
+    "/js/main.63b6901d1d22c6ac0984.hot-update.js": "/js/main.63b6901d1d22c6ac0984.hot-update.js",
+    "/js/main.45cbdbd7827041cbf512.hot-update.js": "/js/main.45cbdbd7827041cbf512.hot-update.js",
+    "/js/main.3e33271a12bfec030777.hot-update.js": "/js/main.3e33271a12bfec030777.hot-update.js",
+    "/js/main.5dbd0ab9a4c5232667e8.hot-update.js": "/js/main.5dbd0ab9a4c5232667e8.hot-update.js",
+    "/js/main.04e901a4b402b51a750f.hot-update.js": "/js/main.04e901a4b402b51a750f.hot-update.js",
+    "/js/main.4558580a594cbc8eff6c.hot-update.js": "/js/main.4558580a594cbc8eff6c.hot-update.js",
+    "/js/main.dba2bd0ad2b7d3512714.hot-update.js": "/js/main.dba2bd0ad2b7d3512714.hot-update.js",
+    "/js/main.5a7ca08ce1752a485326.hot-update.js": "/js/main.5a7ca08ce1752a485326.hot-update.js",
+    "/js/main.1a592bc84a9da2723333.hot-update.js": "/js/main.1a592bc84a9da2723333.hot-update.js"
 }

resources/js/components/Mobile/MenuItemList.vue

@@ -15,6 +15,8 @@
                 <database-icon v-if="link.icon === 'database'" size="17"></database-icon>
                 <credit-card-icon v-if="link.icon === 'credit-card'" size="17"></credit-card-icon>
                 <cloud-icon v-if="link.icon === 'cloud'" size="17"></cloud-icon>
+                <monitor-icon v-if="link.icon === 'monitor'" size="17"></monitor-icon>
+                <box-icon v-if="link.icon === 'box'" size="17"></box-icon>
             </div>
             <b class="menu-link">
                 <span>{{ link.title }}</span>
@@ -33,6 +35,7 @@
         FileTextIcon,
         SettingsIcon,
         DatabaseIcon,
+        MonitorIcon,
         Trash2Icon,
         CloudIcon,
         PowerIcon,
@@ -40,11 +43,14 @@
         UsersIcon,
         UserIcon,
         LockIcon,
+        BoxIcon,
     } from 'vue-feather-icons'
 
     export default {
         name: 'MenuBar',
         components: {
+            BoxIcon,
+            MonitorIcon,
             ChevronRightIcon,
             UploadCloudIcon,
             CreditCardIcon,

resources/js/components/Others/PlanPricingTables.vue

@@ -15,10 +15,10 @@
                 </section>
                 <footer class="plan-footer">
                     <b class="price">
-                        {{ plan.data.attributes.price }}/Mo.
+                        {{ plan.data.attributes.price }}/{{ $t('global.monthly_ac') }}.
                     </b>
                     <ButtonBase @click.native="selectPlan(plan)" type="submit" button-style="secondary" class="sign-in-button">
-                        Sign Up
+                        {{ $t('global.get_it') }}
                     </ButtonBase>
                 </footer>
             </div>
@@ -49,7 +49,6 @@
             }
         },
         created() {
-
             axios.get('/api/public/pricing')
                 .then(response => {
                     this.plans = response.data

resources/js/i18n/lang/en.json

@@ -1,4 +1,80 @@
 {
+    "global": {
+        "premium": "Premium",
+        "free": "Free",
+        "default": "Default",
+        "canceled": "Canceled",
+        "active": "Active",
+        "or": "or",
+        "total": "Total",
+        "monthly_ac": "Mo.",
+        "get_it": "Mo.",
+        "admin": "Admin",
+        "menu": "Menu",
+        "subscription": "Subscription",
+        "upgrade_plan": "Upgrade Plan",
+        "saas": "Services"
+    },
+    "errors": {
+        "capacity_digit": "The storage capacity must be lower than 10 digit number."
+    },
+    "user_invoices": {
+        "title": "Invoices",
+        "empty": "You don't have any invoices yet."
+    },
+    "user_password": {
+        "title": "Change Your Password"
+    },
+    "user_payments": {
+        "title": "Payment Methods",
+        "set_as_default": "Set as default card",
+        "delete_card": "Delete card",
+        "empty": "You don't have any payment cards yet."
+    },
+    "user_subscription": {
+        "title": "Subscription Plan",
+        "plan": "Plan",
+        "billed": "Billed",
+        "status": "Status",
+        "created_at": "Created At",
+        "renews_at": "Renews At",
+        "canceled_at": "Canceled At",
+        "ends_at": "Ends At",
+        "empty": "You don't have any subscription yet.",
+        "cancel_plan": "Cancel Plan",
+        "resume_plan": "Resume Plan"
+    },
+    "user_settings": {
+        "title_account": "Account Information",
+        "title_billing": "Billing Information",
+        "name": "Name",
+        "name_plac": "Type your billing name",
+        "address": "Address",
+        "address_plac": "Type your billing address",
+        "state": "State",
+        "state_plac": "Type your billing state",
+        "city": "City",
+        "city_plac": "Type your billing city",
+        "postal_code": "Postal Code",
+        "postal_code_plac": "Type your billing postal code",
+        "country": "Country",
+        "country_plac": "Type your billing country",
+        "phone_number": "Phone Number",
+        "phone_number_plac": "Type your billing phone number"
+    },
+    "rows": {
+        "invoice": {
+            "number": "Invoice Number",
+            "total": "Total",
+            "plan": "Plan",
+            "payed": "Payed"
+        },
+        "card": {
+            "number": "Card Number",
+            "status": "Status",
+            "expiration": "Expiration Date"
+        }
+    },
     "routes": {
         "create_new_password": "create-new-password"
     },
@@ -81,6 +157,30 @@
         "registration_text": "Don’t have an account?",
         "registration_button": "Register account."
     },
+    "page_pricing_tables": {
+        "title": "Choose Your Plan",
+        "description": "Choose plan witch perfect fit your needs. All plans is billed monthly automatically via your credit card."
+    },
+    "page_upgrade_account": {
+        "title": "Choose Payment Method",
+        "desription": "Choose plan witch perfect fit your needs. All plans is billed monthly automatically via your credit card.",
+        "section_card": "Payment Card",
+        "section_billing": "Billing Information",
+        "section_summary": "Order Summary",
+        "change_payment": {
+            "you_can": "Also you can",
+            "change_payment": "change your default payment method",
+            "pay_by_new_card": "pay by new credit card"
+        },
+        "errors": {
+            "pay_by_another_card": "Please pay by another payment card"
+        },
+        "summary": {
+            "period": "Billed monthly",
+            "submit_button": "Pay with credit card",
+            "submit_disclaimer": "By submit form, you agree to save the payment method and billing information in your VueFileManager account."
+        }
+    },
     "uploading": {
         "progress": "Uploading files {current}/{total}"
     },
@@ -122,7 +222,7 @@
         "of": "of"
     },
     "storage": {
-        "sec_capacity": "Storage Capacity",
+        "sec_capacity": "Your disk Usage",
         "sec_details": "Capacity Usage Details",
         "total_used": "Total used {used}",
         "total_capacity": "Your storage capacity {capacity}",
@@ -163,6 +263,9 @@
         "move": "Move"
     },
     "menu": {
+        "payment_cards": "Payment Cards",
+        "invoices": "Invoices",
+        "subscription": "Subscription",
         "files": "Files",
         "latest": "Recent Uploads",
         "shared": "Shared Files",
@@ -266,6 +369,24 @@
         "title": "User was deleted",
         "message": "Your user was deleted with all user data content."
     },
+    "popup_set_card": {
+        "title": "Set as default card?",
+        "message": "Your card will be set as default and will be always charged for the next billings."
+    },
+    "popup_delete_card": {
+        "title": "Are you sure?",
+        "message": "This event is irreversible and your payment card will be delete forever"
+    },
+    "popup_subscription_cancel": {
+        "title": "Subscription Was Resumed",
+        "message": "You'll continue to have access to the features you've paid for until the end of your billing cycle.",
+        "button": "I'm done"
+    },
+    "popup_subscription_resumed": {
+        "title": "Subscription Was Canceled",
+        "message": "Your subscription was re-activated, and they will be billed on the original billing cycle.",
+        "button": "That's awesome!"
+    },
     "user_box_storage": {
         "title": "Change User Storage Capacity",
         "description": "Change user storage capacity by input bellow. You have to type only number e.g. value '5' means, user will have 5GB of storage capacity."
@@ -283,8 +404,67 @@
         "description": "You can change role for current user. Admin role can edit or create new users, change storage capacity and any other application settings."
     },
     "admin_menu": {
-        "admin_label": "Admin",
+        "dashboard": "Dashboard",
-        "users": "Users"
+        "users": "Users",
+        "settings": "Settings",
+        "plans": "Plans",
+        "invoices": "Invoices",
+        "pages": "Pages"
+    },
+    "admin_pages": {
+        "table": {
+            "page": "Page",
+            "slug": "Slug",
+            "status": "Status"
+        }
+    },
+    "admin_page_dashboard": {
+        "version": "Version",
+        "license": "License",
+        "backer_button": "Become a Backer",
+        "w_total_users": {
+            "title": "Total Users",
+            "link": "Show All Users"
+        },
+        "w_total_space": {
+            "title": "Total Space Used",
+            "link": "Show All Users"
+        },
+        "w_total_premium": {
+            "title": "Total Premium Users",
+            "link": "Show All Plans"
+        },
+        "w_latest_users": {
+            "title": "Latest Registrations"
+        }
+    },
+    "admin_page_invoices": {
+        "empty": {
+            "title": "You don’t have any invoices yet",
+            "description": "All customers invoices will be showed here."
+        },
+        "table": {
+            "number": "Invoice Number",
+            "total": "Total",
+            "plan": "Plan",
+            "payed": "Payed",
+            "user": "User"
+        }
+    },
+    "admin_page_plans": {
+        "create_plan_button": "Create Plan",
+        "empty": {
+            "title": "You don’t have any plan yet",
+            "description": "For create new plan, click on button below.",
+            "button": "Create New Plan"
+        },
+        "table": {
+            "status": "Status",
+            "name": "Plan Name",
+            "subscribers": "Subscribers",
+            "price": "Price",
+            "storage_capacity": "Storage Capacity"
+        }
     },
     "admin_page_user": {
         "select_role": "Select user role",
@@ -297,13 +477,16 @@
         "change_capacity": "Change Capacity",
         "send_password_link": "Send Password Reset Link",
         "tabs": {
-            "detail": "Detail",
+            "subscription": "Subscription",
             "storage": "Storage Usage",
+            "invoices": "Invoices",
             "password": "Password",
-            "delete": "Delete User"
+            "delete": "Delete User",
+            "detail": "Detail"
         },
         "table": {
             "name": "User",
+            "plan": "Sunscription Plan",
             "role": "Role",
             "storage_used": "Storage Used",
             "storage_capacity": "Storage Capacity",
@@ -317,13 +500,22 @@
             "label_email": "Type E-mail",
             "label_name": "Type full name",
             "label_conf_pass": "Confirm password"
+        },
+        "invoices": {
+            "empty": "User don't have any invoices yet."
+        },
+        "subscription": {
+            "empty": "User don't have any subscription yet."
         }
     },
     "toaster": {
         "changed_user": "You successfully changed user's role!",
         "sended_password": "You successfully send user email for reset password!",
         "changed_capacity": "You successfully changed user's storage size!",
-        "created_user": "User was created successfully!"
+        "created_user": "User was created successfully!",
+        "card_deleted": "Your card was successfully deleted.",
+        "card_set": "Your card was successfully set as default.",
+        "account_upgraded": "Your account was successfully upgraded."
     },
     "roles": {
         "admin": "Admin",

resources/js/views/Admin.vue

@@ -4,14 +4,14 @@
         <ContentSidebar>
 
             <!--Admin-->
-            <ContentGroup :title="$t('admin_menu.admin_label')" class="navigator">
+            <ContentGroup :title="$t('global.admin')" class="navigator">
                 <div class="menu-list-wrapper vertical">
                     <router-link :to="{name: 'Dashboard'}" class="menu-list-item link">
                         <div class="icon">
                             <box-icon size="17"></box-icon>
                         </div>
                         <div class="label">
-                            Dashboard
+                            {{ $t('admin_menu.dashboard') }}
                         </div>
                     </router-link>
                     <router-link :to="{name: 'Users'}" class="menu-list-item link">
@@ -27,7 +27,7 @@
                             <settings-icon size="17"></settings-icon>
                         </div>
                         <div class="label">
-                            Settings
+                            {{ $t('admin_menu.settings') }}
                         </div>
                     </router-link>
                 </div>
@@ -41,7 +41,7 @@
                             <database-icon size="17"></database-icon>
                         </div>
                         <div class="label">
-                            Plans
+                            {{ $t('admin_menu.plans') }}
                         </div>
                     </router-link>
                     <router-link :to="{name: 'Invoices'}" class="menu-list-item link">
@@ -49,7 +49,7 @@
                             <file-text-icon size="17"></file-text-icon>
                         </div>
                         <div class="label">
-                            Invoices
+                            {{ $t('admin_menu.invoices') }}
                         </div>
                     </router-link>
                     <router-link :to="{name: 'Pages'}" class="menu-list-item link">
@@ -57,7 +57,7 @@
                             <monitor-icon size="17"></monitor-icon>
                         </div>
                         <div class="label">
-                            Pages
+                            {{ $t('admin_menu.pages') }}
                         </div>
                     </router-link>
                 </div>

resources/js/views/Admin/Dashboard.vue

@@ -10,15 +10,15 @@
                 </div>
                 <div class="metadata">
                     <a href="https://vuefilemanager.com/changelog" target="_blank" class="meta">
-                        <span class="meta-title">Version:</span>
+                        <span class="meta-title">{{ $t('admin_page_dashboard.version') }}:</span>
                         <ColorLabel color="purple">
                             {{ data.app_version }}
                         </ColorLabel>
                     </a>
                     <a href="https://codecanyon.net/item/vue-file-manager-with-laravel-backend/25815986" target="_blank" class="meta">
-                        <span class="meta-title">License:</span>
+                        <span class="meta-title">{{ $t('admin_page_dashboard.license') }}:</span>
                         <ColorLabel color="purple">
-                            Extended
+                            {{ data.license }}
                         </ColorLabel>
                     </a>
                     <a href="https://vuefilemanager.com" target="_blank" class="became-backer">
@@ -26,7 +26,7 @@
                             <credit-card-icon size="15"></credit-card-icon>
                         </div>
                         <span class="content">
-                            Become a Backer
+                            {{ $t('admin_page_dashboard.backer_button') }}
                         </span>
                     </a>
                 </div>
@@ -35,34 +35,34 @@
                 <WidgetTotals
                         class="widget"
                         icon="users"
-                        title="Total Users"
+                        :title="$t('admin_page_dashboard.w_total_users.title')"
                         :value="data.total_users"
                         link-route="Users"
-                        link-name="Show All Users"
+                        :link-name="$t('admin_page_dashboard.w_total_users.link')"
                 ></WidgetTotals>
                 <WidgetTotals
                         class="widget"
                         icon="hard-drive"
-                        title="Total Space Used"
+                        :title="$t('admin_page_dashboard.w_total_space.title')"
                         :value="data.total_used_space"
                         link-route="Users"
-                        link-name="Show All Users"
+                        :link-name="$t('admin_page_dashboard.w_total_space.link')"
                 ></WidgetTotals>
                 <WidgetTotals
                         v-if="config.isSaaS"
                         class="widget"
                         icon="star"
-                        title="Total Premium Users"
+                        :title="$t('admin_page_dashboard.w_total_premium.title')"
                         :value="data.total_premium_users"
                         link-route="Plans"
-                        link-name="Show All Plans"
+                        :link-name="$t('admin_page_dashboard.w_total_premium.link')"
                 ></WidgetTotals>
             </div>
             <div class="widget-users">
                 <WidgetLatestRegistrations
                         class="widget"
                         icon="users"
-                        title="Latest Registrations"
+                        :title="$t('admin_page_dashboard.w_latest_users.title')"
                 />
             </div>
         </div>

resources/js/views/Admin/Invoices.vue

@@ -55,8 +55,8 @@
         <EmptyPageContent
                 v-if="! isLoading && invoices.length === 0"
                 icon="file-text"
-                title="You don’t have any invoices yet"
+                :title="$t('admin_page_invoices.empty.title')"
-                description="All customers invoices will be showed here."
+                :description="$t('admin_page_invoices.empty.description')"
         >
         </EmptyPageContent>
         <div id="loader" v-if="isLoading">
@@ -102,27 +102,27 @@
                 invoices: undefined,
                 columns: [
                     {
-                        label: 'Invoice Number',
+                        label: this.$t('admin_page_invoices.table.number'),
                         field: 'data.attributes.order',
                         sortable: true
                     },
                     {
-                        label: 'Total',
+                        label: this.$t('admin_page_invoices.table.total'),
                         field: 'data.attributes.bag.amount',
                         sortable: true
                     },
                     {
-                        label: 'Plan',
+                        label: this.$t('admin_page_invoices.table.plan'),
                         field: 'data.attributes.bag.amount',
                         sortable: true
                     },
                     {
-                        label: 'Payed',
+                        label: this.$t('admin_page_invoices.table.payed'),
                         field: 'data.attributes.created_at',
                         sortable: true
                     },
                     {
-                        label: 'User',
+                        label: this.$t('admin_page_invoices.table.user'),
                         field: 'relationships.user.data.attributes.name',
                         sortable: true
                     },

resources/js/views/Admin/Pages.vue

@@ -78,17 +78,17 @@
                 pages: undefined,
                 columns: [
                     {
-                        label: 'Page',
+                        label: this.$t('admin_pages.table.page'),
                         field: 'data.attributes.title',
                         sortable: true
                     },
                     {
-                        label: 'Slug',
+                        label: this.$t('admin_pages.table.slug'),
                         field: 'data.attributes.slug',
                         sortable: true
                     },
                     {
-                        label: 'Status',
+                        label: this.$t('admin_pages.table.status'),
                         field: 'data.attributes.visibility',
                         sortable: true
                     },

resources/js/views/Admin/Plans.vue

@@ -9,7 +9,7 @@
                     <div class="buttons">
                         <router-link :to="{name: 'PlanCreate'}">
                             <MobileActionButton icon="plus">
-                                Create Plan
+                                {{ $t('admin_page_plans.create_plan_button') }}
                             </MobileActionButton>
                         </router-link>
                     </div>
@@ -65,11 +65,11 @@
         <EmptyPageContent
                 v-if="! isLoading && plans.length === 0"
                 icon="file"
-                title="You don’t have any plan yet"
+                :title="$t('admin_page_plans.empty.title')"
-                description="For create new plan, click on button below."
+                :description="$t('admin_page_plans.empty.description')"
         >
             <router-link :to="{name: 'PlanCreate'}">
-                <ButtonBase button-style="theme">Create New Plan</ButtonBase>
+                <ButtonBase button-style="theme">{{ $t('admin_page_plans.empty.button') }}</ButtonBase>
             </router-link>
         </EmptyPageContent>
 
@@ -115,27 +115,27 @@
                 plans: undefined,
                 columns: [
                     {
-                        label: 'Status',
+                        label: this.$t('admin_page_plans.table.status'),
                         field: 'data.attributes.status',
                         sortable: true
                     },
                     {
-                        label: 'Plan Name',
+                        label: this.$t('admin_page_plans.table.name'),
                         field: 'data.attributes.name',
                         sortable: true
                     },
                     {
-                        label: 'Subscribers',
+                        label: this.$t('admin_page_plans.table.subscribers'),
                         field: 'data.attributes.subscribers',
                         sortable: true
                     },
                     {
-                        label: 'Price',
+                        label: this.$t('admin_page_plans.table.price'),
                         field: 'data.attributes.price',
                         sortable: true
                     },
                     {
-                        label: 'Storage Capacity',
+                        label: this.$t('admin_page_plans.table.storage_capacity'),
                         field: 'data.attributes.capacity',
                         sortable: true
                     },

resources/js/views/Admin/Users.vue

@@ -20,7 +20,7 @@
                 <DatatableWrapper :paginator="true" :columns="columns" :data="users" class="table table-users">
                     <template scope="{ row }">
                         <tr>
-                            <td style="width: 300px">
+                            <td style="min-width: 320px">
                                 <router-link :to="{name: 'UserDetail', params: {id: row.data.id}}">
                                     <DatatableCellImage
                                             :image="row.data.attributes.avatar"
@@ -36,10 +36,10 @@
                             </td>
                             <td v-if="config.isSaaS">
                                 <span class="cell-item" v-if="row.data.attributes.subscription">
-                                    Premium
+                                    {{ $t('global.premium') }}
                                 </span>
                                 <span class="cell-item" v-else>
-                                    Free
+                                    {{ $t('global.free') }}
                                 </span>
                             </td>
                             <td>
@@ -142,7 +142,7 @@
                     sortable: true
                 },
                 {
-                    label: 'Subscription Plan',
+                    label: this.$t('admin_page_user.table.plan'),
                     field: 'data.attributes.subscription',
                     sortable: true,
                     hidden: ! this.config.isSaaS,

resources/js/views/Admin/Users/User.vue

@@ -47,7 +47,7 @@
                             <credit-card-icon size="17"></credit-card-icon>
                         </div>
                         <div class="label">
-                            Subscription
+                            {{ $t('admin_page_user.tabs.subscription') }}
                         </div>
                     </router-link>
 
@@ -56,7 +56,7 @@
                             <file-text-icon size="17"></file-text-icon>
                         </div>
                         <div class="label">
-                            Invoices
+                            {{ $t('admin_page_user.tabs.invoices') }}
                         </div>
                     </router-link>
 

resources/js/views/Admin/Users/UserTabs/UserDetail.vue

@@ -3,16 +3,16 @@
 
         <!--Change role-->
         <PageTabGroup>
-            <FormLabel>{{ $t('user_box_role.title') }}</FormLabel>
+            <FormLabel>
+                {{ $t('user_box_role.title') }}
+            </FormLabel>
 
             <InfoBox>
                 <p>{{ $t('user_box_role.description') }}</p>
             </InfoBox>
 
-            <ValidationObserver ref="changeRole" @submit.prevent="changeRole" v-slot="{ invalid }" tag="form"
+            <ValidationObserver ref="changeRole" @submit.prevent="changeRole" v-slot="{ invalid }" tag="form" class="form block-form">
-                                class="form block-form">
+                <ValidationProvider tag="div" class="block-wrapper" v-slot="{ errors }" mode="passive" name="Role" rules="required">
-                <ValidationProvider tag="div" class="block-wrapper" v-slot="{ errors }" mode="passive" name="Role"
-                                    rules="required">
                     <label>{{ $t('admin_page_user.select_role') }}:</label>
                     <div class="single-line-form">
                         <SelectInput v-model="userRole" :options="roles"
@@ -61,10 +61,10 @@
         <!--Billing Information-->
         <PageTabGroup>
             <div class="form block-form">
-                <FormLabel>Billing Information</FormLabel>
+                <FormLabel>{{ $t('user_settings.title_billing') }}</FormLabel>
 
                 <div class="block-wrapper">
-                    <label>Name:</label>
+                    <label>{{ $t('user_settings.name') }}:</label>
                     <div class="input-wrapper">
                         <input :value="user.relationships.settings.data.attributes.billing_name"
                                type="text"
@@ -73,7 +73,7 @@
                     </div>
                 </div>
                 <div class="block-wrapper">
-                    <label>Address:</label>
+                    <label>{{ $t('user_settings.address') }}:</label>
                     <div class="input-wrapper">
                         <input :value="user.relationships.settings.data.attributes.billing_address"
                                type="text"
@@ -82,7 +82,7 @@
                     </div>
                 </div>
                 <div class="block-wrapper">
-                    <label>State:</label>
+                    <label>{{ $t('user_settings.state') }}:</label>
                     <div class="input-wrapper">
                         <input :value="user.relationships.settings.data.attributes.billing_state"
                                type="text"
@@ -92,7 +92,7 @@
                 </div>
                 <div class="wrapper-inline">
                     <div class="block-wrapper">
-                        <label>City:</label>
+                        <label>{{ $t('user_settings.city') }}:</label>
                         <div class="input-wrapper">
                             <input :value="user.relationships.settings.data.attributes.billing_city"
                                    type="text"
@@ -101,7 +101,7 @@
                         </div>
                     </div>
                     <div class="block-wrapper">
-                        <label>Postal Code:</label>
+                        <label>{{ $t('user_settings.postal_code') }}:</label>
                         <div class="input-wrapper">
                             <input :value="user.relationships.settings.data.attributes.billing_postal_code"
                                    type="text"
@@ -111,7 +111,7 @@
                     </div>
                 </div>
                 <div class="block-wrapper">
-                    <label>Country:</label>
+                    <label>{{ $t('user_settings.country') }}:</label>
                     <div class="input-wrapper">
                         <input :value="user.relationships.settings.data.attributes.billing_country"
                                type="text"
@@ -120,7 +120,7 @@
                     </div>
                 </div>
                 <div class="block-wrapper">
-                    <label>Phone Number:</label>
+                    <label>{{ $t('user_settings.phone_number') }}:</label>
                     <div class="input-wrapper">
                         <input :value="user.relationships.settings.data.attributes.billing_phone_number"
                                type="text"

resources/js/views/Admin/Users/UserTabs/UserInvoices.vue

@@ -36,7 +36,7 @@
             </DatatableWrapper>
         </PageTabGroup>
         <InfoBox v-else>
-            <p>User don't have any invoices yet.</p>
+            <p>{{ $t('admin_page_user.invoices.empty') }}</p>
         </InfoBox>
     </PageTab>
 </template>
@@ -66,22 +66,22 @@
                 invoices: undefined,
                 columns: [
                     {
-                        label: 'Invoice Number',
+                        label: this.$t('admin_page_invoices.table.number'),
                         field: 'data.attributes.order',
                         sortable: true
                     },
                     {
-                        label: 'Total',
+                        label: this.$t('admin_page_invoices.table.total'),
                         field: 'data.attributes.bag.amount',
                         sortable: true
                     },
                     {
-                        label: 'Plan',
+                        label: this.$t('admin_page_invoices.table.plan'),
                         field: 'data.attributes.bag.amount',
                         sortable: true
                     },
                     {
-                        label: 'Payed',
+                        label: this.$t('admin_page_invoices.table.payed'),
                         field: 'data.attributes.created_at',
                         sortable: true
                     },
@@ -110,14 +110,4 @@
     .block-form {
         max-width: 100%;
     }
-
-
-    @media only screen and (max-width: 960px) {
-
-    }
-
-    @media (prefers-color-scheme: dark) {
-
-    }
-
 </style>

resources/js/views/Admin/Users/UserTabs/UserPassword.vue

@@ -1,7 +1,9 @@
 <template>
     <PageTab class="form-fixed-width">
         <PageTabGroup>
-            <FormLabel>{{ $t('user_box_password.title') }}</FormLabel>
+            <FormLabel>
+                {{ $t('user_box_password.title') }}
+            </FormLabel>
             <InfoBox>
                 <p>{{ $t('user_box_password.description') }}</p>
             </InfoBox>
@@ -83,14 +85,4 @@
     .block-form {
         max-width: 100%;
     }
-
-
-    @media only screen and (max-width: 960px) {
-
-    }
-
-    @media (prefers-color-scheme: dark) {
-
-    }
-
 </style>

resources/js/views/Admin/Users/UserTabs/UserStorage.vue

@@ -1,7 +1,9 @@
 <template>
     <PageTab :is-loading="isLoading" class="form-fixed-width" v-if="storage">
         <PageTabGroup v-if="config.storageLimit || ! user.data.attributes.subscription">
-            <FormLabel>{{ $t('user_box_storage.title') }}</FormLabel>
+            <FormLabel>
+                {{ $t('user_box_storage.title') }}
+            </FormLabel>
             <InfoBox>
                 <p>{{ $t('user_box_storage.description') }}</p>
             </InfoBox>
@@ -124,7 +126,7 @@
                             if (error.response.data.errors['attributes.storage_capacity']) {
 
                                 this.$refs.changeStorageCapacity.setErrors({
-                                    'Capacity': 'The storage capacity must be lower than 10 digit number.'
+                                    'Capacity': this.$t('errors.capacity_digit')
                                 });
                             }
                         } else {
@@ -158,14 +160,4 @@
     .block-form {
         max-width: 100%;
     }
-
-
-    @media only screen and (max-width: 960px) {
-
-    }
-
-    @media (prefers-color-scheme: dark) {
-
-    }
-
 </style>

resources/js/views/Admin/Users/UserTabs/UserSubscription.vue

@@ -1,32 +1,34 @@
 <template>
     <PageTab :is-loading="isLoading" class="form-fixed-width">
         <PageTabGroup v-if="subscription">
-            <FormLabel>Subscription Plan</FormLabel>
+            <FormLabel>
+                {{ $t('user_subscription.title') }}
+            </FormLabel>
 
             <!--Info about active subscription-->
             <div v-if="! subscription.canceled" class="state active">
                 <ListInfo class="list-info">
-                    <ListInfoItem class="list-item" title="Plan" :content="subscription.attributes.name + ' - ' + subscription.attributes.capacity_formatted"/>
+                    <ListInfoItem class="list-item" :title="$t('user_subscription.plan')" :content="subscription.attributes.name + ' - ' + subscription.attributes.capacity_formatted"/>
-                    <ListInfoItem class="list-item" title="Billed" content="Monthly"/>
+                    <ListInfoItem class="list-item" :title="$t('user_subscription.billed')" content="Monthly"/>
-                    <ListInfoItem class="list-item" title="Status" :content="status"/>
+                    <ListInfoItem class="list-item" :title="$t('user_subscription.status')" :content="status"/>
-                    <ListInfoItem class="list-item" title="Created At" :content="subscription.attributes.created_at"/>
+                    <ListInfoItem class="list-item" :title="$t('user_subscription.created_at')" :content="subscription.attributes.created_at"/>
-                    <ListInfoItem class="list-item" title="Renews At" :content="subscription.attributes.ends_at"/>
+                    <ListInfoItem class="list-item" :title="$t('user_subscription.renews_at')" :content="subscription.attributes.ends_at"/>
                 </ListInfo>
             </div>
 
             <!--Info about canceled subscription-->
             <div v-if="subscription.attributes.canceled" class="state canceled">
                 <ListInfo class="list-info">
-                    <ListInfoItem class="list-item" title="Plan" :content="subscription.attributes.name"/>
+                    <ListInfoItem class="list-item" :title="$t('user_subscription.plan')" :content="subscription.attributes.name"/>
-                    <ListInfoItem class="list-item" title="Status" :content="status"/>
+                    <ListInfoItem class="list-item" :title="$t('user_subscription.status')" :content="status"/>
-                    <ListInfoItem class="list-item" title="Canceled At" :content="subscription.attributes.canceled_at"/>
+                    <ListInfoItem class="list-item" :title="$t('user_subscription.canceled_at')" :content="subscription.attributes.canceled_at"/>
-                    <ListInfoItem class="list-item" title="Ends At" :content="subscription.attributes.ends_at"/>
+                    <ListInfoItem class="list-item" :title="$t('user_subscription.ends_at')" :content="subscription.attributes.ends_at"/>
                 </ListInfo>
             </div>
         </PageTabGroup>
         <PageTabGroup v-if="! subscription">
             <InfoBox>
-                <p>User don't have any subscription yet.</p>
+                <p>{{ $t('admin_page_user.subscription.empty') }}</p>
             </InfoBox>
         </PageTabGroup>
     </PageTab>
@@ -62,10 +64,10 @@
         computed: {
             status() {
                 if (this.subscription.attributes.canceled) {
-                    return 'Canceled'
+                    return this.$t('global.canceled')
                 }
                 if (this.subscription.attributes.active) {
-                    return 'Active'
+                    return this.$t('global.active')
                 }
             }
         },
@@ -106,13 +108,4 @@
             flex: 0 0 50%;
         }
     }
-
-    @media only screen and (max-width: 960px) {
-
-    }
-
-    @media (prefers-color-scheme: dark) {
-
-    }
-
 </style>

resources/js/views/Mobile/AdminMobileMenu.vue

@@ -10,11 +10,11 @@
                 <nav class="mobile-navigation">
 
                     <!--Admin menu-->
-                    <b class="mobile-menu-label">Admin</b>
+                    <b class="mobile-menu-label">{{ $t('global.admin') }}</b>
                     <MenuItemList :navigation="AdminNavigation" />
 
                     <!--SaaS menu-->
-                    <b class="mobile-menu-label">SaaS</b>
+                    <b class="mobile-menu-label">{{ $t('global.saas') }}</b>
                     <MenuItemList :navigation="SassNavigation" />
                 </nav>
             </div>
@@ -36,15 +36,21 @@
         data() {
             return {
                 AdminNavigation: [
+                    {
+                        icon: 'box',
+                        title: this.$t('admin_menu.dashboard'),
+                        routeName: 'Dashboard',
+                        isVisible: true,
+                    },
                     {
                         icon: 'users',
-                        title: 'Users',
+                        title: this.$t('admin_menu.users'),
                         routeName: 'Users',
                         isVisible: true,
                     },
                     {
                         icon: 'settings',
-                        title: 'Settings',
+                        title: this.$t('admin_menu.settings'),
                         routeName: 'User',
                         isVisible: true,
                     },
@@ -52,16 +58,22 @@
                 SassNavigation: [
                     {
                         icon: 'database',
-                        title: 'Plans',
+                        title: this.$t('admin_menu.plans'),
                         routeName: 'Plans',
                         isVisible: true,
                     },
                     {
                         icon: 'file-text',
-                        title: 'Invoices',
+                        title: this.$t('admin_menu.invoices'),
                         routeName: 'Invoices',
                         isVisible: true,
                     },
+                    {
+                        icon: 'monitor-icon',
+                        title: this.$t('admin_menu.pages'),
+                        routeName: 'Pages',
+                        isVisible: true,
+                    },
                 ]
             }
         },

resources/js/views/Mobile/UserProfileMobileMenu.vue

@@ -10,11 +10,11 @@
                 <nav class="mobile-navigation">
 
                     <!--Admin menu-->
-                    <b class="mobile-menu-label">Menu</b>
+                    <b class="mobile-menu-label">{{ $t('global.menu') }}</b>
                     <MenuItemList :navigation="ProfileNavigation" />
 
                     <!--SaaS menu-->
-                    <b class="mobile-menu-label">Subscription</b>
+                    <b class="mobile-menu-label">{{ $t('global.subscription') }}</b>
                     <MenuItemList :navigation="SubscriptionNavigation" />
                 </nav>
             </div>
@@ -37,19 +37,19 @@
                 ProfileNavigation: [
                     {
                         icon: 'user',
-                        title: 'Profile',
+                        title: this.$t('menu.profile'),
                         routeName: 'Profile',
                         isVisible: true,
                     },
                     {
                         icon: 'hard-drive',
-                        title: 'Storage',
+                        title: this.$t('menu.storage'),
                         routeName: 'Storage',
                         isVisible: true,
                     },
                     {
                         icon: 'lock',
-                        title: 'Password',
+                        title: this.$t('menu.password'),
                         routeName: 'Password',
                         isVisible: true,
                     },
@@ -57,19 +57,19 @@
                 SubscriptionNavigation: [
                     {
                         icon: 'cloud',
-                        title: 'Subscription',
+                        title: this.$t('menu.subscription'),
                         routeName: 'Subscription',
                         isVisible: true,
                     },
                     {
                         icon: 'credit-card',
-                        title: 'Payment Cards',
+                        title: this.$t('menu.payment_cards'),
                         routeName: 'PaymentMethods',
                         isVisible: true,
                     },
                     {
                         icon: 'file-text',
-                        title: 'Invoices',
+                        title: this.$t('menu.invoices'),
                         routeName: 'Invoice',
                         isVisible: true,
                     },

resources/js/views/Profile.vue

@@ -41,7 +41,7 @@
                             <cloud-icon size="17"></cloud-icon>
                         </div>
                         <div class="label">
-                            Subscription
+                            {{ $t('menu.subscription') }}
                         </div>
                     </router-link>
 
@@ -50,7 +50,7 @@
                             <credit-card-icon size="17"></credit-card-icon>
                         </div>
                         <div class="label">
-                            Payment Cards
+                            {{ $t('menu.payment_cards') }}
                         </div>
                     </router-link>
 
@@ -59,7 +59,7 @@
                             <file-text-icon size="17"></file-text-icon>
                         </div>
                         <div class="label">
-                            Invoices
+                            {{ $t('menu.invoices') }}
                         </div>
                     </router-link>
                 </div>
@@ -94,7 +94,7 @@
                         <div v-if="config.storageLimit && config.isSaaS && config.app_payments_active" class="headline-actions">
                             <router-link :to="{name: 'UpgradePlan'}" v-if="! user.relationships.subscription || (user.relationships.subscription && ! user.relationships.subscription.data.attributes.is_highest)">
                                 <ButtonBase class="upgrade-button" button-style="secondary" type="button">
-                                    Upgrade Plan
+                                    {{ $t('upgrade.upgrade_plan') }}
                                 </ButtonBase>
                             </router-link>
                         </div>
@@ -153,7 +153,7 @@
         computed: {
             ...mapGetters(['user', 'config']),
             subscriptionStatus() {
-                return this.user.data.attributes.subscription ? 'Premium' : 'Free'
+                return this.user.data.attributes.subscription ? this.$t('global.premium') : this.$t('global.free')
             },
             subscriptionColor() {
                 return this.user.data.attributes.subscription ? 'green' : 'purple'

resources/js/views/Upgrade/UpgradeBilling.vue

@@ -6,9 +6,8 @@
 
                 <div class="plan-title">
                     <credit-card-icon size="42" class="title-icon"></credit-card-icon>
-                    <h1>Choose Payment Method</h1>
+                    <h1>{{ $t('page_upgrade_account.title') }}</h1>
-                    <h2>Choose plan witch perfect fit your needs. All plans is billed monthly automatically via your
+                    <h2>{{ $t('page_upgrade_account.desription') }}</h2>
-                        credit card.</h2>
                 </div>
 
                 <div class="order">
@@ -16,7 +15,7 @@
                     <div class="steps">
 
                         <div class="payment-card">
-                            <FormLabel>Payment Card</FormLabel>
+                            <FormLabel>{{ $t('page_upgrade_account.section_card') }}</FormLabel>
 
                             <!-- Pay by new credit card -->
                             <div class="register-card" v-show="! defaultPaymentMethod || payByNewCard">
@@ -43,7 +42,7 @@
                                         <div class="credit-card-numbers">
                                             •••• {{ defaultPaymentMethod.data.attributes.last4 }}
                                         </div>
-                                        <ColorLabel color="purple">Default</ColorLabel>
+                                        <ColorLabel color="purple">{{ $t('global.default') }}</ColorLabel>
                                     </div>
                                     <div class="expiration-date">
                                         <span>{{ defaultPaymentMethod.data.attributes.exp_month }} / {{ defaultPaymentMethod.data.attributes.exp_year }}</span>
@@ -52,41 +51,51 @@
 
                                 <!--Change payment-->
                                 <div class="change-payment" v-if="! isError">
-                                    <span>Also you can</span>
+                                    <span>
+                                        {{ $t('page_upgrade_account.change_payment.you_can') }}
+                                    </span>
 
-                                    <router-link v-if="PaymentMethods.data.length > 0" :to="{name: 'PaymentMethods'}">change your
+                                    <router-link v-if="PaymentMethods.data.length > 0" :to="{name: 'PaymentMethods'}">
-                                        default payment method
+                                        {{ $t('page_upgrade_account.change_payment.change_payment') }}
                                     </router-link>
-                                    <span v-if="PaymentMethods.data.length > 0">or</span>
 
-                                    <a @click="payByNewCardForm">pay by new credit card.</a>
+                                    <span v-if="PaymentMethods.data.length > 0">
+                                        {{ $t('global.or') }}
+                                    </span>
+
+                                    <a @click="payByNewCardForm">
+                                        {{ $t('page_upgrade_account.change_payment.pay_by_new_card') }}
+                                    </a>
                                 </div>
 
                                 <!--Card error-->
                                 <div class="card-error-message" v-if="isError">
                                     <span>{{ errorMessage }}</span>
-                                    <span @click="payByNewCardForm"
+                                    <span @click="payByNewCardForm" class="link">
-                                          class="link">Please pay by another payment card</span>
+                                        {{ $t('page_upgrade_account.errors.pay_by_another_card') }}
-                                    <span> or </span>
+                                    </span>
-                                    <router-link :to="{name: 'PaymentMethods'}" class="link">Change your default payment
+                                    <span>
-                                        method
+                                        {{ $t('global.or') }}
+                                    </span>
+                                    <router-link :to="{name: 'PaymentMethods'}" class="link">
+                                        {{ $t('page_upgrade_account.change_payment.change_payment') }}
                                     </router-link>
                                 </div>
                             </div>
                         </div>
                         <div class="billing" v-if="billing">
-                            <FormLabel>Billing Information</FormLabel>
+                            <FormLabel>{{ $t('page_upgrade_account.section_billing') }}</FormLabel>
 
                             <ValidationObserver ref="order" v-slot="{ invalid }" tag="form" class="form block-form">
                                 <div class="form block-form">
 
                                     <div class="block-wrapper">
-                                        <label>Name:</label>
+                                        <label>{{ $t('user_settings.name') }}:</label>
                                         <ValidationProvider tag="div" mode="passive" class="input-wrapper"
                                                             rules="required"
                                                             name="billing_name" v-slot="{ errors }">
                                             <input v-model="billing.billing_name"
-                                                   placeholder="Type your billing name"
+                                                   :placeholder="$t('user_settings.name_plac')"
                                                    type="text"
                                                    :class="{'is-error': errors[0]}"
                                             />
@@ -95,12 +104,12 @@
                                     </div>
 
                                     <div class="block-wrapper">
-                                        <label>Address:</label>
+                                        <label>{{ $t('user_settings.address') }}:</label>
                                         <ValidationProvider tag="div" mode="passive" class="input-wrapper"
                                                             rules="required"
                                                             name="billing_address" v-slot="{ errors }">
                                             <input v-model="billing.billing_address"
-                                                   placeholder="Type your billing address"
+                                                   :placeholder="$t('user_settings.address_plac')"
                                                    type="text"
                                                    :class="{'is-error': errors[0]}"
                                             />
@@ -109,12 +118,12 @@
                                     </div>
 
                                     <div class="block-wrapper">
-                                        <label>State:</label>
+                                        <label>{{ $t('user_settings.state') }}:</label>
                                         <ValidationProvider tag="div" mode="passive" class="input-wrapper"
                                                             rules="required"
                                                             name="billing_state" v-slot="{ errors }">
                                             <input v-model="billing.billing_state"
-                                                   placeholder="Type your billing state"
+                                                   :placeholder="$t('user_settings.state_plac')"
                                                    type="text"
                                                    :class="{'is-error': errors[0]}"
                                             />
@@ -124,12 +133,12 @@
 
                                     <div class="wrapper-inline">
                                         <div class="block-wrapper">
-                                            <label>City:</label>
+                                            <label>{{ $t('user_settings.city') }}:</label>
                                             <ValidationProvider tag="div" mode="passive" class="input-wrapper"
                                                                 rules="required" name="billing_city"
                                                                 v-slot="{ errors }">
                                                 <input v-model="billing.billing_city"
-                                                       placeholder="Type your billing city"
+                                                       :placeholder="$t('user_settings.city_plac')"
                                                        type="text"
                                                        :class="{'is-error': errors[0]}"
                                                 />
@@ -138,12 +147,12 @@
                                         </div>
 
                                         <div class="block-wrapper">
-                                            <label>Postal Code:</label>
+                                            <label>{{ $t('user_settings.postal_code') }}:</label>
                                             <ValidationProvider tag="div" mode="passive" class="input-wrapper"
                                                                 rules="required" name="billing_postal_code"
                                                                 v-slot="{ errors }">
                                                 <input v-model="billing.billing_postal_code"
-                                                       placeholder="Type your billing postal code"
+                                                       :placeholder="$t('user_settings.postal_code_plac')"
                                                        type="text"
                                                        :class="{'is-error': errors[0]}"
                                                 />
@@ -153,12 +162,12 @@
                                     </div>
 
                                     <div class="block-wrapper">
-                                        <label>Country:</label>
+                                        <label>{{ $t('user_settings.country') }}:</label>
                                         <ValidationProvider tag="div" mode="passive" class="input-wrapper"
                                                             rules="required"
                                                             name="billing_country" v-slot="{ errors }">
                                             <input v-model="billing.billing_country"
-                                                   placeholder="Type your billing country"
+                                                   :placeholder="$t('user_settings.country_plac')"
                                                    type="text"
                                                    :class="{'is-error': errors[0]}"
                                             />
@@ -167,12 +176,12 @@
                                     </div>
 
                                     <div class="block-wrapper">
-                                        <label>Phone Number:</label>
+                                        <label>{{ $t('user_settings.phone_number') }}:</label>
                                         <ValidationProvider tag="div" mode="passive" class="input-wrapper"
                                                             rules="required"
                                                             name="billing_phone_number" v-slot="{ errors }">
                                             <input v-model="billing.billing_phone_number"
-                                                   placeholder="Type your billing phone number"
+                                                   :placeholder="$t('user_settings.phone_number_plac')"
                                                    type="text"
                                                    :class="{'is-error': errors[0]}"
                                             />
@@ -184,12 +193,12 @@
                         </div>
                     </div>
                     <div class="summary">
-                        <FormLabel>Order Summary</FormLabel>
+                        <FormLabel>{{ $t('page_upgrade_account.section_summary') }}</FormLabel>
                         <div class="summary-list" :class="{'is-error': isError}" v-if="requestedPlan">
                             <div class="row">
                                 <div class="cell">
                                     <b>{{ requestedPlan.data.attributes.name }}</b>
-                                    <small>Billed monthly</small>
+                                    <small>{{ $t('page_upgrade_account.summary.period') }}</small>
                                 </div>
                                 <div class="cell">
                                     <b>{{ requestedPlan.data.attributes.price }}</b>
@@ -197,7 +206,7 @@
                             </div>
                             <div class="row">
                                 <div class="cell">
-                                    <b>Total</b>
+                                    <b>{{ $t('global.total') }}</b>
                                 </div>
                                 <div class="cell">
                                     <b>{{ requestedPlan.data.attributes.price }}</b>
@@ -205,12 +214,11 @@
                             </div>
                             <ButtonBase :disabled="isSubmitted" :loading="isSubmitted" @click.native="submitOrder"
                                         type="submit" button-style="theme-solid" class="next-submit">
-                                Pay with credit card
+                                {{ $t('page_upgrade_account.summary.submit_button') }}
                             </ButtonBase>
                             <p class="error-message" v-if="isError">{{ errorMessage }}</p>
                             <small class="disclaimer">
-                                By submit form, you agree to save the payment method and billing information in your
+                                {{ $t('page_upgrade_account.summary.submit_disclaimer') }}
-                                VueFileManager account.
                             </small>
                         </div>
                     </div>
@@ -297,7 +305,7 @@
                 // Show toaster
                 events.$emit('toaster', {
                     type: 'success',
-                    message: 'Your account was successfully upgraded.',
+                    message: this.$t('toaster.account_upgraded'),
                 })
 
                 // Go to User page

resources/js/views/Upgrade/UpgradePlan.vue

@@ -6,8 +6,8 @@
             <div class="content-page">
                 <div class="plan-title">
                     <cloud-icon size="42" class="title-icon"></cloud-icon>
-                    <h1>Choose Your Plan</h1>
+                    <h1>{{ $t('page_pricing_tables.title') }}</h1>
-                    <h2>Choose plan witch perfect fit your needs. All plans is billed monthly automatically via your credit card.</h2>
+                    <h2>{{ $t('page_pricing_tables.description') }}</h2>
                 </div>
 
                 <PlanPricingTables @load="onLoadPricingTables" @selected-plan="onSelectTable"/>

resources/js/views/User/Invoices.vue

@@ -1,7 +1,7 @@
 <template>
     <PageTab :is-loading="isLoading">
         <PageTabGroup v-if="invoices && invoices.length > 0">
-            <FormLabel>Invoices</FormLabel>
+            <FormLabel>{{ $t('user_invoices.title') }}</FormLabel>
             <DatatableWrapper :paginator="true" :columns="columns" :data="invoices" class="table">
                 <template scope="{ row }">
                     <tr>
@@ -37,7 +37,7 @@
             </DatatableWrapper>
         </PageTabGroup>
         <InfoBox v-else>
-            <p>You don't have any invoices yet.</p>
+            <p>{{ $t('user_invoices.empty') }}</p>
         </InfoBox>
     </PageTab>
 </template>
@@ -48,7 +48,7 @@
     import FormLabel from '@/components/Others/Forms/FormLabel'
     import PageTab from '@/components/Others/Layout/PageTab'
     import InfoBox from '@/components/Others/Forms/InfoBox'
-    import {ExternalLinkIcon} from "vue-feather-icons";
+    import {ExternalLinkIcon} from "vue-feather-icons"
     import axios from 'axios'
 
     export default {
@@ -67,22 +67,22 @@
                 invoices: undefined,
                 columns: [
                     {
-                        label: 'Invoice Number',
+                        label: this.$t('rows.invoice.number'),
                         field: 'data.attributes.order',
                         sortable: true
                     },
                     {
-                        label: 'Total',
+                        label: this.$t('rows.invoice.total'),
                         field: 'data.attributes.bag.amount',
                         sortable: true
                     },
                     {
-                        label: 'Plan',
+                        label: this.$t('rows.invoice.plan'),
                         field: 'data.attributes.bag.amount',
                         sortable: true
                     },
                     {
-                        label: 'Payed',
+                        label: this.$t('rows.invoice.payed'),
                         field: 'data.attributes.created_at',
                         sortable: true
                     },
@@ -112,13 +112,4 @@
         max-width: 100%;
     }
 
-
-    @media only screen and (max-width: 960px) {
-
-    }
-
-    @media (prefers-color-scheme: dark) {
-
-    }
-
 </style>

resources/js/views/User/Password.vue

@@ -2,7 +2,7 @@
     <PageTab>
         <PageTabGroup>
             <ValidationObserver ref="password" @submit.prevent="resetPassword" v-slot="{ invalid }" tag="form" class="form block-form">
-                <FormLabel>Change Your Password</FormLabel>
+                <FormLabel>{{ $t('user_password.title') }}</FormLabel>
                 <div class="block-wrapper">
                     <label>{{ $t('page_create_password.label_new_pass') }}:</label>
                     <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="New Password"

resources/js/views/User/PaymentMethods.vue

@@ -1,7 +1,7 @@
 <template>
     <PageTab :is-loading="isLoading">
         <PageTabGroup v-if="PaymentMethods && PaymentMethods.length > 0">
-            <FormLabel>Payment Methods</FormLabel>
+            <FormLabel>{{ $t('user_payments.title') }}</FormLabel>
             <DatatableWrapper :paginator="true" :columns="columns" :data="PaymentMethods" class="table">
                 <template scope="{ row }">
                     <tr :class="{'is-deleting': row.data.attributes.card_id === deletingID}">
@@ -13,15 +13,15 @@
                                     <div class="credit-card-numbers">
                                         •••• {{ row.data.attributes.last4 }}
                                     </div>
-                                    <ColorLabel v-if="row.data.id === defaultPaymentCard.data.id" color="purple">Default</ColorLabel>
+                                    <ColorLabel v-if="row.data.id === defaultPaymentCard.data.id" color="purple">{{ $t('global.default') }}</ColorLabel>
                                 </div>
                             </span>
                         </td>
-                        <td>
+                        <!--<td>
                             <span class="cell-item">
                                 <ColorLabel :color="getCardStatusColor(row.data.attributes.status)">{{ getCardStatus(row.data.attributes.status) }}</ColorLabel>
                             </span>
-                        </td>
+                        </td>-->
                         <td>
                             <span class="cell-item">
                                 {{ row.data.attributes.exp_month }} / {{ row.data.attributes.exp_year }}
@@ -29,8 +29,8 @@
                         </td>
                         <td>
                             <div class="action-icons">
-                                <credit-card-icon size="15" class="icon icon-card" title="Set as default card" @click="setDefaultCard(row.data.attributes)"  v-if="row.data.id !== defaultPaymentCard.data.id"></credit-card-icon>
+                                <credit-card-icon size="15" class="icon icon-card" :title="$t('user_payments.set_as_default')" @click="setDefaultCard(row.data.attributes)"  v-if="row.data.id !== defaultPaymentCard.data.id"></credit-card-icon>
-                                <trash2-icon size="15" class="icon icon-trash" title="Delete card" @click="deleteCard(row.data.attributes)"></trash2-icon>
+                                <trash2-icon size="15" class="icon icon-trash" :title="$t('user_payments.delete_card')" @click="deleteCard(row.data.attributes)"></trash2-icon>
                             </div>
                         </td>
                     </tr>
@@ -38,7 +38,7 @@
             </DatatableWrapper>
         </PageTabGroup>
         <InfoBox v-else>
-            <p>You don't have any payment cards yet.</p>
+            <p>{{ $t('user_payments.empty') }}</p>
         </InfoBox>
     </PageTab>
 </template>
@@ -73,17 +73,17 @@
                 deletingID: undefined,
                 columns: [
                     {
-                        label: 'Card Number',
+                        label: this.$t('rows.card.number'),
                         field: 'data.attributes.total',
                         sortable: true
                     },
-                    {
+                    /*{
-                        label: 'Status',
+                        label: this.$t('rows.card.status'),
                         field: 'data.attributes.status',
                         sortable: true
-                    },
+                    },*/
                     {
-                        label: 'Expiration Date',
+                        label: this.$t('rows.card.expiration'),
                         field: 'data.attributes.total',
                         sortable: true
                     },
@@ -125,8 +125,8 @@
             },
             setDefaultCard(card) {
                 events.$emit('confirm:open', {
-                    title: 'Set as default card?',
+                    title: this.$t('popup_set_card.title'),
-                    message: 'Your card will be set as default and will be always charged for the next billings.',
+                    message: this.$t('popup_set_card.message'),
                     buttonColor: 'theme-solid',
                     action: {
                         id: card.card_id,
@@ -136,8 +136,8 @@
             },
             deleteCard(card) {
                 events.$emit('confirm:open', {
-                    title: 'Are you sure?',
+                    title: this.$t('popup_set_card.'),
-                    message: 'This event is irreversible and your payment card will be delete forever',
+                    message: this.$t('popup_set_card.'),
                     action: {
                         id: card.card_id,
                         operation: 'delete-credit-card'
@@ -185,7 +185,7 @@
                             // Show toaster
                             events.$emit('toaster', {
                                 type: 'success',
-                                message: 'Your card was successfully deleted.',
+                                message: this.$t('toaster.card_deleted'),
                             })
                         })
                         .catch(error => {
@@ -206,7 +206,7 @@
                             // Show toaster
                             events.$emit('toaster', {
                                 type: 'success',
-                                message: 'Your card was successfully set as default.',
+                                message: this.$t('toaster.card_set'),
                             })
                         })
                         .catch(error => {

resources/js/views/User/Settings.vue

@@ -2,7 +2,7 @@
     <PageTab>
         <PageTabGroup v-if="userInfo">
             <div class="form block-form">
-                <FormLabel>Account Information</FormLabel>
+                <FormLabel>{{ $t('user_settings.title_account') }}</FormLabel>
                 <div class="block-wrapper">
                     <label>{{ $t('page_registration.label_email') }}</label>
                     <div class="input-wrapper">
@@ -27,75 +27,75 @@
         </PageTabGroup>
         <PageTabGroup v-if="config.isSaaS && billingInfo">
             <div class="form block-form">
-                <FormLabel>Billing Information</FormLabel>
+                <FormLabel>{{ $t('user_settings.title_billing') }}</FormLabel>
                 <div class="block-wrapper">
-                    <label>Name:</label>
+                    <label>{{ $t('user_settings.name') }}:</label>
                     <div class="input-wrapper">
                         <input @keyup="$updateText('/user/relationships/settings', 'billing_name', billingInfo.billing_name)"
                                v-model="billingInfo.billing_name"
-                               placeholder="Type your billing name"
+                               :placeholder="$t('user_settings.name_plac')"
                                type="text"
                         />
                     </div>
                 </div>
                 <div class="block-wrapper">
-                    <label>Address:</label>
+                    <label>{{ $t('user_settings.address') }}:</label>
                     <div class="input-wrapper">
                         <input @keyup="$updateText('/user/relationships/settings', 'billing_address', billingInfo.billing_address)"
                                v-model="billingInfo.billing_address"
-                               placeholder="Type your billing address"
+                               :placeholder="$t('user_settings.address_plac')"
                                type="text"
                         />
                     </div>
                 </div>
                 <div class="block-wrapper">
-                    <label>State:</label>
+                    <label>{{ $t('user_settings.state') }}:</label>
                     <div class="input-wrapper">
                         <input @keyup="$updateText('/user/relationships/settings', 'billing_state', billingInfo.billing_state)"
                                v-model="billingInfo.billing_state"
-                               placeholder="Type your billing state"
+                               :placeholder="$t('user_settings.state_plac')"
                                type="text"
                         />
                     </div>
                 </div>
                 <div class="wrapper-inline">
                     <div class="block-wrapper">
-                        <label>City:</label>
+                        <label>{{ $t('user_settings.city') }}:</label>
                         <div class="input-wrapper">
                             <input @keyup="$updateText('/user/relationships/settings', 'billing_city', billingInfo.billing_city)"
                                    v-model="billingInfo.billing_city"
-                                   placeholder="Type your billing city"
+                                   :placeholder="$t('user_settings.city_plac')"
                                    type="text"
                             />
                         </div>
                     </div>
                     <div class="block-wrapper">
-                        <label>Postal Code:</label>
+                        <label>{{ $t('user_settings.postal_code') }}:</label>
                         <div class="input-wrapper">
                             <input @keyup="$updateText('/user/relationships/settings', 'billing_postal_code', billingInfo.billing_postal_code)"
                                    v-model="billingInfo.billing_postal_code"
-                                   placeholder="Type your billing postal code"
+                                   :placeholder="$t('user_settings.postal_code_plac')"
                                    type="text"
                             />
                         </div>
                     </div>
                 </div>
                 <div class="block-wrapper">
-                    <label>Country:</label>
+                    <label>{{ $t('user_settings.country') }}:</label>
                     <div class="input-wrapper">
                         <input @keyup="$updateText('/user/relationships/settings', 'billing_country', billingInfo.billing_country)"
                                v-model="billingInfo.billing_country"
-                               placeholder="Type your billing country"
+                               :placeholder="$t('user_settings.country_plac')"
                                type="text"
                         />
                     </div>
                 </div>
                 <div class="block-wrapper">
-                    <label>Phone Number:</label>
+                    <label>{{ $t('user_settings.phone_number') }}:</label>
                     <div class="input-wrapper">
                         <input @keyup="$updateText('/user/relationships/settings', 'billing_phone_number', billingInfo.billing_phone_number)"
                                v-model="billingInfo.billing_phone_number"
-                               placeholder="Type your billing phone number"
+                               :placeholder="$t('user_settings.phone_number_plac')"
                                type="text"
                         />
                     </div>
@@ -180,12 +180,4 @@
         max-width: 100%;
     }
 
-    @media only screen and (max-width: 960px) {
-
-    }
-
-    @media (prefers-color-scheme: dark) {
-
-    }
-
 </style>

resources/js/views/User/Storage.vue

@@ -1,7 +1,7 @@
 <template>
     <PageTab v-if="storage">
         <PageTabGroup>
-            <FormLabel>Your disk Usage</FormLabel>
+            <FormLabel>{{ $t('storage.sec_capacity') }}</FormLabel>
             <StorageItemDetail type="disk" :title="$t('storage.total_used', {used: storage.attributes.used})" :percentage="storage.attributes.percentage" :used="$t('storage.total_capacity', {capacity: storage.attributes.capacity})"/>
         </PageTabGroup>
         <PageTabGroup>

resources/js/views/User/Subscription.vue

@@ -1,16 +1,18 @@
 <template>
     <PageTab :is-loading="isLoading">
         <PageTabGroup v-if="subscription">
-            <FormLabel>Subscription Plan</FormLabel>
+            <FormLabel>
+                {{ $t('user_subscription.title') }}
+            </FormLabel>
 
             <!--Info about active subscription-->
             <div v-if="! subscription.data.attributes.canceled" class="state active">
                 <ListInfo class="list-info">
-                    <ListInfoItem class="list-item" title="Plan" :content="subscription.data.attributes.name + ' - ' + subscription.data.attributes.capacity_formatted"/>
+                    <ListInfoItem class="list-item" :title="$t('user_subscription.plan')" :content="subscription.data.attributes.name + ' - ' + subscription.data.attributes.capacity_formatted"/>
-                    <ListInfoItem class="list-item" title="Billed" content="Monthly"/>
+                    <ListInfoItem class="list-item" :title="$t('user_subscription.billed')" content="Monthly"/>
-                    <ListInfoItem class="list-item" title="Status" :content="status"/>
+                    <ListInfoItem class="list-item" :title="$t('user_subscription.status')" :content="status"/>
-                    <ListInfoItem class="list-item" title="Created At" :content="subscription.data.attributes.created_at"/>
+                    <ListInfoItem class="list-item" :title="$t('user_subscription.created_at')" :content="subscription.data.attributes.created_at"/>
-                    <ListInfoItem class="list-item" title="Renews At" :content="subscription.data.attributes.ends_at"/>
+                    <ListInfoItem class="list-item" :title="$t('user_subscription.renews_at')" :content="subscription.data.attributes.ends_at"/>
                 </ListInfo>
                 <div class="plan-action">
                     <ButtonBase
@@ -26,10 +28,10 @@
             <!--Info about canceled subscription-->
             <div v-if="subscription.data.attributes.canceled" class="state canceled">
                 <ListInfo class="list-info">
-                    <ListInfoItem class="list-item" title="Plan" :content="subscription.data.attributes.name"/>
+                    <ListInfoItem class="list-item" :title="$t('user_subscription.plan')" :content="subscription.data.attributes.name"/>
-                    <ListInfoItem class="list-item" title="Status" :content="status"/>
+                    <ListInfoItem class="list-item" :title="$t('user_subscription.status')" :content="status"/>
-                    <ListInfoItem class="list-item" title="Canceled At" :content="subscription.data.attributes.canceled_at"/>
+                    <ListInfoItem class="list-item" :title="$t('user_subscription.canceled_at')" :content="subscription.data.attributes.canceled_at"/>
-                    <ListInfoItem class="list-item" title="Ends At" :content="subscription.data.attributes.ends_at"/>
+                    <ListInfoItem class="list-item" :title="$t('user_subscription.ends_at')" :content="subscription.data.attributes.ends_at"/>
                 </ListInfo>
                 <div class="plan-action">
                     <ButtonBase
@@ -43,7 +45,7 @@
             </div>
         </PageTabGroup>
         <InfoBox v-else>
-            <p>You don't have any subscription yet.</p>
+            <p>{{ $t('user_subscription.empty') }}</p>
         </InfoBox>
     </PageTab>
 </template>
@@ -77,23 +79,23 @@
         },
         computed: {
             cancelButtonText() {
-                return this.isConfirmedCancel ? this.$t('popup_share_edit.confirm') : 'Cancel Plan'
+                return this.isConfirmedCancel ? this.$t('popup_share_edit.confirm') : this.$t('user_subscription.cancel_plan')
             },
             cancelButtonStyle() {
                 return this.isConfirmedCancel ? 'danger-solid' : 'secondary'
             },
             resumeButtonText() {
-                return this.isConfirmedResume ? this.$t('popup_share_edit.confirm') : 'Resume Plan'
+                return this.isConfirmedResume ? this.$t('popup_share_edit.confirm') : this.$t('user_subscription.resume_plan')
             },
             resumeButtonStyle() {
                 return this.isConfirmedResume ? 'theme-solid' : 'secondary'
             },
             status() {
                 if (this.subscription.data.attributes.canceled) {
-                    return 'Canceled'
+                    return this.$t('global.canceled')
                 }
                 if (this.subscription.data.attributes.active) {
-                    return 'Active'
+                    return this.$t('global.active')
                 }
             }
         },
@@ -135,10 +137,10 @@
 
                             events.$emit('alert:open', {
                                 emoji: '👍',
-                                title: 'Subscription Was Canceled',
+                                title: this.$t('popup_subscription_cancel.title'),
-                                message: 'You\'ll continue to have access to the features you\'ve paid for until the end of your billing cycle.',
+                                message: this.$t('popup_subscription_cancel.message'),
                                 buttonStyle: 'theme',
-                                button: 'I\'m done'
+                                button: this.$t('popup_subscription_cancel.button')
                             })
                         })
                         .catch(() => {
@@ -176,10 +178,10 @@
 
                             events.$emit('alert:open', {
                                 emoji: '👍',
-                                title: 'Subscription Was Resumed',
+                                title: this.$t('popup_subscription_cancel.title'),
-                                message: 'Your subscription was re-activated, and they will be billed on the original billing cycle.',
+                                message: this.$t('popup_subscription_cancel.message'),
                                 buttonStyle: 'theme',
-                                button: 'That\'s awesome!'
+                                button: this.$t('popup_subscription_cancel.button')
                             })
                         })
                         .catch(() => {