@crm-market/template-shared 1.0.3 → 1.0.5

package/components/MyAccount/index.vue

@@ -15,32 +15,29 @@
           <div class="col-lg-7">
             <div class="authentication-form">
               <v-tabs v-model="tab" bg-color="white" class="login-tabs">
-                <v-tab value="login">Login</v-tab>
-                <v-tab value="register">Register</v-tab>
+                <v-tab value="login">{{ t('auth.login') }}</v-tab>
+                <v-tab value="register">{{ t('auth.register') }}</v-tab>
               </v-tabs>
 
               <v-card-text>
                 <v-tabs-window v-model="tab">
                   <v-tabs-window-item value="login">
-                    <p>
-                      If you have an account, sign in with your username or
-                      email address.
-                    </p>
+                    <p>{{ t('auth.loginDescription') }}</p>
                     <form>
                       <div class="form-group mb-4">
-                        <label class="label">Username or Email Address *</label>
+                        <label class="label">{{ t('auth.usernameOrEmail') }} *</label>
                         <input
                           type="text"
                           class="form-control"
-                          placeholder="Enter your user name"
+                          :placeholder="t('auth.usernameOrEmail')"
                         />
                       </div>
                       <div class="form-group mb-4">
-                        <label class="label">Your Password *</label>
+                        <label class="label">{{ t('auth.yourPassword') }} *</label>
                         <input
                           type="password"
                           class="form-control"
-                          placeholder="Enter your  password"
+                          :placeholder="t('auth.yourPassword')"
                         />
                       </div>
                       <div class="d-flex justify-content-between mb-4">
@@ -55,11 +52,11 @@
                             class="form-check-label"
                             for="flexCheckDefault"
                           >
-                            Remember
+                            {{ t('auth.remember') }}
                           </label>
                         </div>
                         <NuxtLink to="/forgot-password" class="text-primary">
-                          Lost your password?
+                          {{ t('auth.lostPassword') }}
                         </NuxtLink>
                       </div>
                       <div class="form-group mb-4">
@@ -67,50 +64,47 @@
                           type="submit"
                           class="btn btn-warning btn-pill text-white w-100 d-block"
                         >
-                          Login
+                          {{ t('auth.login') }}
                         </button>
                       </div>
                       <div class="form-group mb-0">
                         <p class="text-secondary ms-1 text-primary">
-                          Don’t have an account?
+                          {{ t('auth.noAccount') }}
                           <NuxtLink
                             to="/register"
                             class="text-decoration-none text-primary"
                           >
-                            Register
+                            {{ t('auth.register') }}
                           </NuxtLink>
                         </p>
                       </div>
                     </form>
                   </v-tabs-window-item>
                   <v-tabs-window-item value="register">
-                    <p>
-                      If you have an account, sign in with your username or
-                      email address.
-                    </p>
+                    <p>{{ t('auth.loginDescription') }}</p>
                     <form>
                       <div class="form-group mb-4">
-                        <label class="label">Username *</label>
+                        <label class="label">{{ t('auth.username') }} *</label>
                         <input
                           type="text"
                           class="form-control"
-                          placeholder="Enter your user name"
+                          :placeholder="t('auth.username')"
                         />
                       </div>
                       <div class="form-group mb-4">
-                        <label class="label">Email Address *</label>
+                        <label class="label">{{ t('auth.email') }} *</label>
                         <input
                           type="email"
                           class="form-control"
-                          placeholder="Enter your  email address"
+                          :placeholder="t('auth.email')"
                         />
                       </div>
                       <div class="form-group mb-4">
-                        <label class="label">Password *</label>
+                        <label class="label">{{ t('auth.password') }} *</label>
                         <input
                           type="password"
                           class="form-control"
-                          placeholder="Enter  password"
+                          :placeholder="t('auth.password')"
                         />
                       </div>
                       <div class="form-group mb-4">
@@ -118,17 +112,17 @@
                           type="submit"
                           class="btn btn-warning btn-pill text-white w-100 d-block"
                         >
-                          Register
+                          {{ t('auth.register') }}
                         </button>
                       </div>
                       <div class="form-group mb-0">
                         <p class="text-secondary ms-1 text-primary">
-                          Already have an account?
+                          {{ t('auth.haveAccount') }}
                           <NuxtLink
                             to="/login"
                             class="text-decoration-none text-primary"
                           >
-                            Login
+                            {{ t('auth.login') }}
                           </NuxtLink>
                         </p>
                       </div>
@@ -144,11 +138,17 @@
   </div>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
   name: "MyAccount",
   data: () => ({
     tab: null,
   }),
-};
+  setup() {
+    const { t } = useI18n();
+    return { t };
+  },
+});
 </script>

package/components/OrderDetails/index.vue

@@ -9,21 +9,21 @@
         <div class="col-lg-8">
           <div class="row">
             <div class="col-lg-6 col-md-6">
-              <h3 class="order-details-title">Order Details</h3>
+              <h3 class="order-details-title">{{ t('account.orderDetails') }}</h3>
               <div class="order-details-area">
                 <div class="cart-totals">
-                  <h3>Order number: #001</h3>
-                  <p>Order created at: 30 August, 2021</p>
+                  <h3>{{ t('order.orderNumber') }}: #001</h3>
+                  <p>{{ t('order.orderCreatedAt') }}: 30 August, 2021</p>
                   <NuxtLink to="/order-history" class="read-more">
-                    Back History
+                    {{ t('order.backHistory') }}
                   </NuxtLink>
                   <ul>
-                    <li>Subtotal <span>$240.00</span></li>
-                    <li>Shipping <span>$240.00</span></li>
-                    <li>Coupon <span>$00.00</span></li>
-                    <li>Total <span>$240.00</span></li>
+                    <li>{{ t('cart.subtotal') }} <span>$240.00</span></li>
+                    <li>{{ t('cart.shipping') }} <span>$240.00</span></li>
+                    <li>{{ t('cart.coupon') }} <span>$00.00</span></li>
+                    <li>{{ t('cart.total') }} <span>$240.00</span></li>
                     <li>
-                      <b>Total</b> <span><b>$240.00</b></span>
+                      <b>{{ t('cart.total') }}</b> <span><b>$240.00</b></span>
                     </li>
                   </ul>
                 </div>
@@ -32,23 +32,23 @@
 
             <div class="col-lg-6 col-md-6">
               <div class="billing-address-bar orders-details mb-0">
-                <h3>Billing Address</h3>
+                <h3>{{ t('account.billingAddress') }}</h3>
 
                 <ul>
                   <li class="p-0">Amanda McCarter</li>
                   <li>
-                    <span>Address:</span>
+                    <span>{{ t('account.address') }}:</span>
                     4 Shady Pines Drive Bowling Green
                   </li>
                 </ul>
 
                 <ul>
                   <li>
-                    <span>Phone:</span>
+                    <span>{{ t('account.phone') }}:</span>
                     <a href="tel:270-957-9995">270-957-9995</a>
                   </li>
                   <li>
-                    <span>Email:</span>
+                    <span>{{ t('account.email') }}:</span>
                     <a href="mailto:contact@tuan.com">contact@tuan.com</a>
                   </li>
                 </ul>
@@ -58,7 +58,7 @@
                     to="/edit-address"
                     class="btn btn-warning text-white"
                   >
-                    Edit Address
+                    {{ t('account.editAddress') }}
                   </NuxtLink>
                 </div>
               </div>
@@ -70,8 +70,6 @@
   </section>
 </template>
 
-<script>
-export default {
-  name: "OrderDetails",
-};
+<script setup lang="ts">
+const { t } = useI18n();
 </script>

package/components/OrderHistory/index.vue

@@ -8,19 +8,19 @@
 
         <div class="col-lg-8">
           <div class="cart-area recent-order">
-            <h3 class="mb-3">Order History</h3>
+            <h3 class="mb-3">{{ t('account.orderHistory') }}</h3>
             <form class="cart-controller mb-0">
               <div class="cart-table table-responsive">
                 <table class="table table-bordered align-middle">
                   <thead>
                     <tr>
-                      <th scope="col">Trash</th>
-                      <th scope="col">Product</th>
+                      <th scope="col">{{ t('order.trash') }}</th>
+                      <th scope="col">{{ t('product.product') }}</th>
                       <th scope="col"></th>
-                      <th scope="col">Order</th>
-                      <th scope="col">Quantity</th>
-                      <th scope="col">Status</th>
-                      <th scope="col">Total</th>
+                      <th scope="col">{{ t('order.order') }}</th>
+                      <th scope="col">{{ t('product.quantity') }}</th>
+                      <th scope="col">{{ t('order.status') }}</th>
+                      <th scope="col">{{ t('cart.total') }}</th>
                     </tr>
                   </thead>
 
@@ -55,7 +55,7 @@
                       </td>
 
                       <td class="product-subtotal">
-                        <span class="subtotal-amount">Paid</span>
+                        <span class="subtotal-amount">{{ t('order.paid') }}</span>
                       </td>
 
                       <td class="product-subtotal">
@@ -94,7 +94,7 @@
                       </td>
 
                       <td class="product-subtotal">
-                        <span class="subtotal-amount">Pending</span>
+                        <span class="subtotal-amount">{{ t('order.pending') }}</span>
                       </td>
 
                       <td class="product-subtotal">
@@ -133,7 +133,7 @@
                       </td>
 
                       <td class="product-subtotal">
-                        <span class="subtotal-amount">Failed</span>
+                        <span class="subtotal-amount">{{ t('order.failed') }}</span>
                       </td>
 
                       <td class="product-subtotal">
@@ -172,7 +172,7 @@
                       </td>
 
                       <td class="product-subtotal">
-                        <span class="subtotal-amount">Paid</span>
+                        <span class="subtotal-amount">{{ t('order.paid') }}</span>
                       </td>
 
                       <td class="product-subtotal">
@@ -190,8 +190,6 @@
   </section>
 </template>
 
-<script>
-export default {
-  name: "OrderHistory",
-};
+<script setup lang="ts">
+const { t } = useI18n();
 </script>

package/components/ProductDetails/index.vue

@@ -44,7 +44,7 @@
           <div class="product-details-content">
             <span class="stock">
               <i class="ri-check-line"></i>
-              In Stock
+              {{ t('product.inStock') }}
             </span>
             <h3>
               Apple MacBook Pro 16.2" with Liquid Retina XDR Display, M2 Max
@@ -56,11 +56,11 @@
               <i class="flaticon-star"></i>
               <i class="flaticon-star"></i>
               <i class="flaticon-star"></i>
-              <span>(5 Reviews)</span>
+              <span>(5 {{ t('product.reviews') }})</span>
             </div>
             <h2 class="price">$399 <del>$450</del></h2>
             <div class="d-flex style-select">
-              <span>Style:</span>
+              <span>{{ t('product.style') }}:</span>
               <h5>{{ typeText }}</h5>
             </div>
             <div class="select-style mb-4">
@@ -82,7 +82,7 @@
               </label>
             </div>
             <div class="d-flex style-select">
-              <span>Capacity:</span>
+              <span>{{ t('product.capacity') }}:</span>
               <h5>{{ capacityText }}</h5>
             </div>
             <div class="select-style mb-4">
@@ -105,7 +105,7 @@
               </label>
             </div>
             <div class="d-flex style-select">
-              <span>Color:</span>
+              <span>{{ t('product.color') }}:</span>
               <h5>{{ colorText }}</h5>
             </div>
             <ul class="d-flex ps-0 mb-0 list-unstyled select-color gap-2 mb-4">
@@ -124,42 +124,42 @@
               <ProductDetailsProductQuantity />
               <button class="btn btn-success text-white rounded-pill">
                 <i class="ri-shopping-cart-line"></i>
-                <span>Add To Cart</span>
+                <span>{{ t('product.addToCart') }}</span>
               </button>
             </div>
             <button class="d-flex align-items-center gap-3 wishlist mb-3">
               <i class="ri-heart-line"></i>
-              <span>Add to wishlist</span>
+              <span>{{ t('product.addToWishlist') }}</span>
             </button>
             <button class="d-flex align-items-center gap-3 wishlist">
               <i class="ri-eye-line"></i>
-              <span><span>565 people</span> are viewing the products</span>
+              <span><span>565</span> {{ t('product.viewingProduct') }}</span>
             </button>
             <ul class="services-list ps-0 mb-0 list-unstyled">
               <li class="d-flex align-items-center">
                 <i class="ri-check-line"></i>
-                <span>Free delivery today</span>
+                <span>{{ t('product.freeDelivery') }}</span>
               </li>
               <li class="d-flex align-items-center">
                 <i class="ri-check-line"></i>
-                <span>100% money back Guarantee</span>
+                <span>{{ t('product.moneyBack') }}</span>
               </li>
               <li class="d-flex align-items-center">
                 <i class="ri-check-line"></i>
-                <span>7 days product return policy</span>
+                <span>{{ t('product.returnPolicy') }}</span>
               </li>
             </ul>
             <ul class="sku-list ps-0 mb-0 list-unstyled">
               <li class="d-flex align-items-center">
-                <span class="title">SKU:</span>
+                <span class="title">{{ t('product.sku') }}:</span>
                 <span class="title2">SMTGS6T45</span>
               </li>
               <li class="d-flex align-items-center">
-                <span class="title">Category:</span>
+                <span class="title">{{ t('product.category') }}:</span>
                 <span class="title2">Computer</span>
               </li>
               <li class="d-flex align-items-center">
-                <span class="title">Tags:</span>
+                <span class="title">{{ t('nav.tags') }}:</span>
                 <span class="title2">laptop, macbook, PC</span>
               </li>
             </ul>
@@ -167,7 +167,7 @@
               class="social-link ps-0 mb-0 list-unstyled d-flex gap-2 flex-wrap"
             >
               <li class="d-flex align-items-center me-2">
-                <span>Share:</span>
+                <span>{{ t('product.share') }}:</span>
               </li>
               <li class="d-flex align-items-center gap-2">
                 <a href="https://facebook.com/" target="_blank">
@@ -210,6 +210,7 @@ export default defineComponent({
     tab: null,
   }),
   setup() {
+    const { t } = useI18n();
     const typeText = ref("Apple M1 Max Chip");
     const typeActiveButton = ref("first");
 
@@ -250,6 +251,7 @@ export default defineComponent({
     };
 
     return {
+      t,
       typeText,
       typeActiveButton,
       setTypeTextToFirst,

package/components/Products/RecentlyViewed.vue

@@ -56,12 +56,12 @@
               >
                 <span class="delivery">
                   <i class="ri-truck-line"></i>
-                  Free Delivery
+                  {{ t('product.freeDelivery') }}
                 </span>
                 <button class="cart-btn">
                   <i class="ri-shopping-cart-line"></i>
                   <v-tooltip activator="parent" location="top">
-                    Add To Cart
+                    {{ t('product.addToCart') }}
                   </v-tooltip>
                 </button>
               </div>
@@ -112,12 +112,12 @@
               >
                 <span class="delivery">
                   <i class="ri-truck-line"></i>
-                  Free Delivery
+                  {{ t('product.freeDelivery') }}
                 </span>
                 <button class="cart-btn">
                   <i class="ri-shopping-cart-line"></i>
                   <v-tooltip activator="parent" location="top">
-                    Add To Cart
+                    {{ t('product.addToCart') }}
                   </v-tooltip>
                 </button>
               </div>
@@ -168,12 +168,12 @@
               >
                 <span class="delivery">
                   <i class="ri-truck-line"></i>
-                  Free Delivery
+                  {{ t('product.freeDelivery') }}
                 </span>
                 <button class="cart-btn">
                   <i class="ri-shopping-cart-line"></i>
                   <v-tooltip activator="parent" location="top">
-                    Add To Cart
+                    {{ t('product.addToCart') }}
                   </v-tooltip>
                 </button>
               </div>
@@ -224,12 +224,12 @@
               >
                 <span class="delivery">
                   <i class="ri-truck-line"></i>
-                  Free Delivery
+                  {{ t('product.freeDelivery') }}
                 </span>
                 <button class="cart-btn">
                   <i class="ri-shopping-cart-line"></i>
                   <v-tooltip activator="parent" location="top">
-                    Add To Cart
+                    {{ t('product.addToCart') }}
                   </v-tooltip>
                 </button>
               </div>
@@ -280,12 +280,12 @@
               >
                 <span class="delivery">
                   <i class="ri-truck-line"></i>
-                  Free Delivery
+                  {{ t('product.freeDelivery') }}
                 </span>
                 <button class="cart-btn">
                   <i class="ri-shopping-cart-line"></i>
                   <v-tooltip activator="parent" location="top">
-                    Add To Cart
+                    {{ t('product.addToCart') }}
                   </v-tooltip>
                 </button>
               </div>
@@ -297,8 +297,6 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: "RecentlyViewed",
-};
+<script setup lang="ts">
+const { t } = useI18n();
 </script>

package/components/Products/index.vue

@@ -13,7 +13,7 @@
           <div class="sidebar product-sidebar">
             <!-- Categories filter -->
             <div class="single-sidebar-widget">
-              <h3>Filter By Categories</h3>
+              <h3>{{ t('product.filterByCategories') }}</h3>
               <ul class="ps-0 mb-0 list-unstyled filter-selecet">
                 <li v-for="category in topLevelCategories" :key="category.id">
                   <div class="form-check">
@@ -32,7 +32,7 @@
                 </li>
                 <li v-if="selectedCategoryId">
                   <a href="javascript:void(0)" class="text-primary fs-13" @click="selectedCategoryId = ''">
-                    Clear filter
+                    {{ t('product.clearFilter') }}
                   </a>
                 </li>
               </ul>
@@ -40,12 +40,12 @@
 
             <!-- Price filter -->
             <div class="single-sidebar-widget">
-              <h3>Price Range</h3>
+              <h3>{{ t('product.priceRange') }}</h3>
               <div class="d-flex gap-2 align-items-center">
                 <input
                   type="number"
                   class="form-control form-control-sm"
-                  placeholder="Min"
+                  :placeholder="t('product.min')"
                   v-model.number="minPrice"
                   min="0"
                 />
@@ -53,7 +53,7 @@
                 <input
                   type="number"
                   class="form-control form-control-sm"
-                  placeholder="Max"
+                  :placeholder="t('product.max')"
                   v-model.number="maxPrice"
                   min="0"
                 />
@@ -62,18 +62,18 @@
                 class="btn btn-sm btn-outline-primary mt-2 w-100"
                 @click="applyFilters"
               >
-                Apply
+                {{ t('product.apply') }}
               </button>
             </div>
 
             <!-- Sort -->
             <div class="single-sidebar-widget">
-              <h3>Sort By</h3>
+              <h3>{{ t('product.sortBy') }}</h3>
               <select class="form-select form-select-sm" v-model="sortBy">
-                <option value="newest">Newest</option>
-                <option value="price-asc">Price: Low to High</option>
-                <option value="price-desc">Price: High to Low</option>
-                <option value="name">Name A-Z</option>
+                <option value="newest">{{ t('product.newest') }}</option>
+                <option value="price-asc">{{ t('product.priceLowHigh') }}</option>
+                <option value="price-desc">{{ t('product.priceHighLow') }}</option>
+                <option value="name">{{ t('product.nameAZ') }}</option>
               </select>
             </div>
           </div>
@@ -84,24 +84,24 @@
           <!-- Search info -->
           <div class="d-flex align-items-center justify-content-between mb-3" v-if="searchQuery || selectedCategoryId">
             <p class="mb-0 text-muted">
-              <span v-if="searchQuery">Search: "{{ searchQuery }}"</span>
-              <span v-if="selectedCategoryName"> | Category: {{ selectedCategoryName }}</span>
-              <span v-if="totalProducts"> | {{ totalProducts }} products found</span>
+              <span v-if="searchQuery">{{ t('nav.search') }}: "{{ searchQuery }}"</span>
+              <span v-if="selectedCategoryName"> | {{ t('product.category') }}: {{ selectedCategoryName }}</span>
+              <span v-if="totalProducts"> | {{ totalProducts }} {{ t('product.productsFound') }}</span>
             </p>
             <button class="btn btn-sm btn-outline-secondary" @click="clearAllFilters">
-              Clear all
+              {{ t('product.clearAll') }}
             </button>
           </div>
 
           <!-- Products count and total -->
           <div class="d-flex align-items-center justify-content-between mb-3" v-else>
-            <p class="mb-0 text-muted">{{ totalProducts }} products</p>
+            <p class="mb-0 text-muted">{{ totalProducts }} {{ t('product.productsFound') }}</p>
           </div>
 
           <!-- Loading -->
           <div v-if="loading" class="text-center py-5">
             <div class="spinner-border text-primary" role="status">
-              <span class="visually-hidden">Loading...</span>
+              <span class="visually-hidden">{{ t('product.loading') }}</span>
             </div>
           </div>
 
@@ -119,7 +119,7 @@
           <!-- No products -->
           <div v-else class="text-center py-5">
             <i class="ri-shopping-bag-line fs-1 text-muted"></i>
-            <p class="mt-3 text-muted">No products found</p>
+            <p class="mt-3 text-muted">{{ t('product.noProducts') }}</p>
           </div>
 
           <!-- Pagination -->
@@ -161,6 +161,7 @@ import { defineComponent, ref, computed, watch, onMounted } from "vue";
 export default defineComponent({
   name: "ProductsIndex",
   setup() {
+    const { t } = useI18n();
     const route = useRoute();
     const router = useRouter();
     const { fetchProducts, products, loading } = useProducts();
@@ -270,6 +271,7 @@ export default defineComponent({
     });
 
     return {
+      t,
       products,
       loading,
       topLevelCategories,