@crm-market/template-shared 1.0.3 → 1.0.4

package/components/AddAddress/index.vue

@@ -8,35 +8,35 @@
 
         <div class="col-lg-8">
           <div class="address-list">
-            <h3 class="mb-3">Address</h3>
+            <h3 class="mb-3">{{ t('account.address') }}</h3>
 
             <div class="row">
               <div class="col-lg-6">
                 <div class="added-address">
                   <NuxtLink to="/address" class="text-decoration-none">
                     <i class="ri-add-line"></i>
-                    <span>Add address</span>
+                    <span>{{ t('account.addAddress') }}</span>
                   </NuxtLink>
                 </div>
               </div>
               <div class="col-lg-6">
                 <div class="billing-address-bar mb-0">
-                  <h3>Billing Address</h3>
+                  <h3>{{ t('account.billingAddress') }}</h3>
                   <ul>
                     <li class="p-0">Doreen McCool</li>
                     <li>
-                      <span>Address:</span>
+                      <span>{{ t('account.address') }}:</span>
                       2491 Reel Avenue Albuquerque
                     </li>
                   </ul>
 
                   <ul>
                     <li>
-                      <span>Phone:</span>
+                      <span>{{ t('account.phone') }}:</span>
                       <a href="tel:+1-(514)-321-4566">+1 (514) 321-4566</a>
                     </li>
                     <li>
-                      <span>Email:</span>
+                      <span>{{ t('account.email') }}:</span>
                       <a href="mailto:hello@tuan.com">hello@tuan.com</a>
                     </li>
                   </ul>
@@ -46,11 +46,11 @@
                       to="/edit-address"
                       class="btn edit btn-warning text-white"
                     >
-                      Edit
+                      {{ t('common.edit') }}
                     </NuxtLink>
 
                     <button class="btn btn-warning text-white ms-3">
-                      Remove
+                      {{ t('product.remove') }}
                     </button>
                   </div>
                 </div>
@@ -63,8 +63,6 @@
   </section>
 </template>
 
-<script>
-export default {
-  name: "AddAddress",
-};
+<script setup lang="ts">
+const { t } = useI18n();
 </script>

package/components/Cart/index.vue

@@ -5,12 +5,12 @@
         <table class="table align-middle">
           <thead>
             <tr>
-              <th scope="col">Product</th>
-              <th scope="col">Name</th>
-              <th scope="col">Unit Price</th>
-              <th scope="col">Quantity</th>
-              <th scope="col">Subtotal</th>
-              <th scope="col">Remove</th>
+              <th scope="col">{{ t('product.product') }}</th>
+              <th scope="col">{{ t('product.name') }}</th>
+              <th scope="col">{{ t('product.unitPrice') }}</th>
+              <th scope="col">{{ t('product.quantity') }}</th>
+              <th scope="col">{{ t('product.subtotal') }}</th>
+              <th scope="col">{{ t('product.remove') }}</th>
             </tr>
           </thead>
           <tbody>
@@ -117,13 +117,13 @@
             <input
               type="text"
               class="form-control w-100"
-              placeholder="Coupon"
+              :placeholder="t('cart.coupon')"
             />
             <button
               type="submit"
               class="btn btn-warning text-white mt-3 mt-md-0 w-100"
             >
-              Apply Coupon
+              {{ t('cart.applyCoupon') }}
               <i class="flaticon-up-right-arrow"></i>
             </button>
           </div>
@@ -133,26 +133,26 @@
             type="submit"
             class="btn btn-warning text-white w-100 mt-3 mt-lg-0"
           >
-            Update Price
+            {{ t('cart.updatePrice') }}
             <i class="flaticon-up-right-arrow"></i>
           </button>
         </div>
       </div>
 
       <div class="total-cart">
-        <h3>Cart Totals</h3>
+        <h3>{{ t('cart.cartTotals') }}</h3>
         <ul>
           <li class="d-flex justify-content-between">
-            <span class="title">Subtotal</span>
+            <span class="title">{{ t('cart.subtotal') }}</span>
             <span class="price">$595</span>
           </li>
           <li class="d-flex justify-content-between">
-            <span class="title">Total</span>
+            <span class="title">{{ t('cart.total') }}</span>
             <span class="price">$595</span>
           </li>
         </ul>
         <NuxtLink to="/checkout" class="btn btn-warning text-white">
-          Proceed To Checkout
+          {{ t('cart.proceedToCheckout') }}
           <i class="flaticon-up-right-arrow"></i>
         </NuxtLink>
       </div>
@@ -160,8 +160,6 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: "Cart",
-};
+<script setup lang="ts">
+const { t } = useI18n();
 </script>

package/components/ChangePassword/index.vue

@@ -17,34 +17,34 @@
               <ul class="nav nav-tabs login-tabs" id="myTab" role="tablist">
                 <li class="nav-item" role="presentation">
                   <NuxtLink to="/change-password" class="nav-link active">
-                    Change Password
+                    {{ t('auth.changePassword') }}
                   </NuxtLink>
                 </li>
               </ul>
-              <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
+              <p>{{ t('auth.loginDescription') }}</p>
               <form>
                 <div class="form-group mb-4">
-                  <label class="label">Old Password *</label>
+                  <label class="label">{{ t('auth.oldPassword') }} *</label>
                   <input
                     type="password"
                     class="form-control"
-                    placeholder="Enter your  password"
+                    :placeholder="t('auth.oldPassword')"
                   />
                 </div>
                 <div class="form-group mb-4">
-                  <label class="label">New Password *</label>
+                  <label class="label">{{ t('auth.newPassword') }} *</label>
                   <input
                     type="password"
                     class="form-control"
-                    placeholder="Enter your  password"
+                    :placeholder="t('auth.newPassword')"
                   />
                 </div>
                 <div class="form-group mb-4">
-                  <label class="label">Confirm Password *</label>
+                  <label class="label">{{ t('auth.confirmPassword') }} *</label>
                   <input
                     type="password"
                     class="form-control"
-                    placeholder="Enter your  password"
+                    :placeholder="t('auth.confirmPassword')"
                   />
                 </div>
                 <div class="form-group mb-0">
@@ -52,7 +52,7 @@
                     type="submit"
                     class="btn btn-warning btn-pill text-white w-100 d-block"
                   >
-                    Save Password
+                    {{ t('auth.savePassword') }}
                   </button>
                 </div>
               </form>
@@ -64,8 +64,6 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: "ChangePassword",
-};
+<script setup lang="ts">
+const { t } = useI18n();
 </script>

package/components/Checkout/index.vue

@@ -4,45 +4,45 @@
       <div class="row">
         <div class="col-lg-5">
           <div class="checkout-content">
-            <h3>Billing Details</h3>
+            <h3>{{ t('checkout.billingDetails') }}</h3>
             <div class="form-group mb-4">
-              <label class="label">First Name</label>
+              <label class="label">{{ t('checkout.firstName') }}</label>
               <input
                 type="text"
                 class="form-control"
-                placeholder="First Name"
+                :placeholder="t('checkout.firstName')"
               />
             </div>
             <div class="form-group mb-4">
-              <label class="label">Last Name</label>
-              <input type="text" class="form-control" placeholder="Last Name" />
+              <label class="label">{{ t('checkout.lastName') }}</label>
+              <input type="text" class="form-control" :placeholder="t('checkout.lastName')" />
             </div>
             <div class="form-group mb-4">
-              <label class="label">Email Address</label>
+              <label class="label">{{ t('checkout.emailAddress') }}</label>
               <input
                 type="email"
                 class="form-control"
-                placeholder="Email Address"
+                :placeholder="t('checkout.emailAddress')"
               />
             </div>
             <div class="form-group mb-4">
-              <label class="label">Company Name</label>
+              <label class="label">{{ t('checkout.companyName') }}</label>
               <input
                 type="text"
                 class="form-control"
-                placeholder="Company Name (Optional)"
+                :placeholder="t('checkout.companyName')"
               />
             </div>
             <div class="form-group mb-4">
-              <label class="label">Country/Region</label>
+              <label class="label">{{ t('checkout.countryRegion') }}</label>
               <input
                 type="text"
                 class="form-control"
-                placeholder="Company Name (Optional)"
+                :placeholder="t('checkout.countryRegion')"
               />
             </div>
             <div class="form-group mb-4">
-              <label class="label">Finding Source</label>
+              <label class="label">{{ t('checkout.countryRegion') }}</label>
               <select
                 class="form-select form-control"
                 aria-label="Default select example"
@@ -53,41 +53,41 @@
               </select>
             </div>
             <div class="form-group mb-4">
-              <label class="label">Street Address</label>
+              <label class="label">{{ t('checkout.streetAddress') }}</label>
               <input
                 type="text"
                 class="form-control"
-                placeholder="Address line 1"
+                :placeholder="t('checkout.addressLine1')"
               />
             </div>
             <div class="form-group mb-4">
               <input
                 type="text"
                 class="form-control"
-                placeholder="Address line 2"
+                :placeholder="t('checkout.addressLine2')"
               />
             </div>
             <div class="form-group mb-4">
-              <label class="label">Town/City</label>
-              <input type="text" class="form-control" placeholder="Town/City" />
+              <label class="label">{{ t('checkout.townCity') }}</label>
+              <input type="text" class="form-control" :placeholder="t('checkout.townCity')" />
             </div>
             <div class="form-group mb-4">
-              <label class="label">Postal Code</label>
+              <label class="label">{{ t('checkout.postalCode') }}</label>
               <input
                 type="text"
                 class="form-control"
-                placeholder="Postal Code"
+                :placeholder="t('checkout.postalCode')"
               />
             </div>
             <div class="form-group mb-4">
-              <label class="label">Phone</label>
-              <input type="text" class="form-control" placeholder="Phone" />
+              <label class="label">{{ t('checkout.phone') }}</label>
+              <input type="text" class="form-control" :placeholder="t('checkout.phone')" />
             </div>
             <div class="form-group mb-4">
-              <label class="label">Additional Info</label>
+              <label class="label">{{ t('checkout.additionalInfo') }}</label>
               <textarea
                 class="form-control"
-                placeholder="Notes (Optional)"
+                :placeholder="t('checkout.notes')"
                 cols="30"
                 rows="5"
               ></textarea>
@@ -97,15 +97,15 @@
 
         <div class="col-lg-7">
           <div class="your-order">
-            <h3>Your Order</h3>
+            <h3>{{ t('checkout.yourOrder') }}</h3>
 
             <div class="your-order-form table-responsive bg-fffbf5">
               <table class="table table-bordered">
                 <thead>
                   <tr>
-                    <th scope="col">Product</th>
-                    <th scope="col">Quantity</th>
-                    <th scope="col">Subtotal</th>
+                    <th scope="col">{{ t('product.product') }}</th>
+                    <th scope="col">{{ t('product.quantity') }}</th>
+                    <th scope="col">{{ t('product.subtotal') }}</th>
                   </tr>
                 </thead>
                 <tbody>
@@ -137,19 +137,19 @@
                     <td class="price">$398</td>
                   </tr>
                   <tr>
-                    <td class="sub-title">Subtotal</td>
+                    <td class="sub-title">{{ t('cart.subtotal') }}</td>
                     <td class="sub-price"></td>
                     <td class="sub-price">$595</td>
                   </tr>
                   <tr class="total">
-                    <td class="sub-title">Total</td>
+                    <td class="sub-title">{{ t('cart.total') }}</td>
                     <td class="sub-price"></td>
                     <td class="sub-price">$595</td>
                   </tr>
                 </tbody>
               </table>
 
-              <h3>Payment Option</h3>
+              <h3>{{ t('checkout.paymentOption') }}</h3>
               <div class="form-check">
                 <input
                   class="form-check-input"
@@ -158,7 +158,7 @@
                   id="flexCheckDefault"
                 />
                 <label class="form-check-label" for="flexCheckDefault">
-                  Card Payment
+                  {{ t('checkout.cardPayment') }}
                 </label>
               </div>
               <div class="form-check mb-0">
@@ -170,12 +170,12 @@
                   checked
                 />
                 <label class="form-check-label" for="flexCheckChecked">
-                  Cash on Delivery
+                  {{ t('checkout.cashOnDelivery') }}
                 </label>
               </div>
 
               <div class="mt-5">
-                <button class="btn btn-warning text-white">Place Order</button>
+                <button class="btn btn-warning text-white">{{ t('checkout.placeOrder') }}</button>
               </div>
             </div>
           </div>
@@ -185,8 +185,6 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: "Checkout",
-};
+<script setup lang="ts">
+const { t } = useI18n();
 </script>

package/components/Common/DashboardNavigation.vue

@@ -1,37 +1,35 @@
 <template>
   <ul class="dashboard-navigation">
     <li>
-      <h3>Navigation</h3>
+      <h3>{{ t('account.navigation') }}</h3>
     </li>
     <li>
-      <NuxtLink to="/dashboard">Dashboard</NuxtLink>
+      <NuxtLink to="/dashboard">{{ t('account.dashboard') }}</NuxtLink>
     </li>
     <li>
-      <NuxtLink to="/edit-profile">Edit Profile</NuxtLink>
+      <NuxtLink to="/edit-profile">{{ t('account.editProfile') }}</NuxtLink>
     </li>
     <li>
-      <NuxtLink to="/edit-address">Edit Address</NuxtLink>
+      <NuxtLink to="/edit-address">{{ t('account.editAddress') }}</NuxtLink>
     </li>
     <li>
-      <NuxtLink to="/order-history">Order History</NuxtLink>
+      <NuxtLink to="/order-history">{{ t('account.orderHistory') }}</NuxtLink>
     </li>
     <li>
-      <NuxtLink to="/order-details">Order Details</NuxtLink>
+      <NuxtLink to="/order-details">{{ t('account.orderDetails') }}</NuxtLink>
     </li>
     <li>
-      <NuxtLink to="/address">Address</NuxtLink>
+      <NuxtLink to="/address">{{ t('account.address') }}</NuxtLink>
     </li>
     <li>
-      <NuxtLink to="/password">Password</NuxtLink>
+      <NuxtLink to="/password">{{ t('auth.changePassword') }}</NuxtLink>
     </li>
     <li>
-      <NuxtLink to="/my-account">Log Out</NuxtLink>
+      <NuxtLink to="/my-account">{{ t('auth.logOut') }}</NuxtLink>
     </li>
   </ul>
 </template>
 
-<script>
-export default {
-  name: "DashboardNavigation",
-};
+<script setup lang="ts">
+const { t } = useI18n();
 </script>

package/components/Common/PageBanner.vue

@@ -4,7 +4,7 @@
       <div class="d-flex justify-content-between align-items-center">
         <ul class="d-flex align-content-center list-unstyled mb-0 page-content">
           <li>
-            <NuxtLink to="/" class="text-decoration-none">Home</NuxtLink>
+            <NuxtLink to="/" class="text-decoration-none">{{ t('nav.home') }}</NuxtLink>
           </li>
           <li>
             <span>{{ pageTitle }}</span>
@@ -20,9 +20,7 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: "PageBanner",
-  props: ["pageTitle"],
-};
+<script setup lang="ts">
+defineProps<{ pageTitle: string }>();
+const { t } = useI18n();
 </script>

package/components/Common/ProductCard.vue

@@ -19,7 +19,7 @@
           class="btn btn-sm"
           :class="inCart ? 'btn-success' : 'btn-outline-primary'"
           @click="handleAddToCart"
-          :title="inCart ? 'In cart' : 'Add to cart'"
+          :title="inCart ? t('product.inCart') : t('product.addToCart')"
         >
           <i :class="inCart ? 'ri-check-line' : 'ri-shopping-cart-line'"></i>
         </button>
@@ -50,66 +50,52 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, computed } from "vue";
+<script setup lang="ts">
+import { computed } from "vue";
 import { resolveImageUrl } from "~/utils/image";
 
-export default defineComponent({
-  name: "ProductCard",
-  props: {
-    product: {
-      type: Object,
-      required: true,
-    },
-  },
-  setup(props) {
-    const { addToCart, isInCart } = useCart();
+const { t } = useI18n();
 
-    const productImage = computed(() => {
-      const images = props.product.images;
-      if (images && images.length > 0) {
-        return resolveImageUrl(images[0]);
-      }
-      return '';
-    });
-
-    const hasDiscount = computed(() =>
-      props.product.discountPrice && props.product.discountPrice < props.product.price
-    );
+const props = defineProps<{
+  product: Record<string, any>;
+}>();
 
-    const effectivePrice = computed(() =>
-      hasDiscount.value ? props.product.discountPrice : props.product.price
-    );
+const { addToCart, isInCart } = useCart();
 
-    const discountPercent = computed(() => {
-      if (!hasDiscount.value) return 0;
-      return Math.round(((props.product.price - props.product.discountPrice) / props.product.price) * 100);
-    });
+const productImage = computed(() => {
+  const images = props.product.images;
+  if (images && images.length > 0) {
+    return resolveImageUrl(images[0]);
+  }
+  return '';
+});
 
-    const inCart = computed(() => isInCart(props.product.id));
+const hasDiscount = computed(() =>
+  props.product.discountPrice && props.product.discountPrice < props.product.price
+);
 
-    const handleAddToCart = () => {
-      if (!inCart.value) {
-        addToCart({
-          productId: props.product.id,
-          name: props.product.name,
-          price: props.product.price,
-          discountPrice: props.product.discountPrice,
-          image: props.product.images?.[0] || '',
-        });
-      }
-    };
+const effectivePrice = computed(() =>
+  hasDiscount.value ? props.product.discountPrice : props.product.price
+);
 
-    return {
-      productImage,
-      hasDiscount,
-      effectivePrice,
-      discountPercent,
-      inCart,
-      handleAddToCart,
-    };
-  },
+const discountPercent = computed(() => {
+  if (!hasDiscount.value) return 0;
+  return Math.round(((props.product.price - props.product.discountPrice) / props.product.price) * 100);
 });
+
+const inCart = computed(() => isInCart(props.product.id));
+
+const handleAddToCart = () => {
+  if (!inCart.value) {
+    addToCart({
+      productId: props.product.id,
+      name: props.product.name,
+      price: props.product.price,
+      discountPrice: props.product.discountPrice,
+      image: props.product.images?.[0] || '',
+    });
+  }
+};
 </script>
 
 <style scoped>

package/components/Common/Services.vue

@@ -8,8 +8,8 @@
               <img src="~/assets/images/shipped.png" alt="shipped" />
             </div>
             <div class="flex-grow-1 ms-3">
-              <h3>Fast Delivery</h3>
-              <span>Experience Lightning-Fast Delivery</span>
+              <h3>{{ t('services.fastDelivery') }}</h3>
+              <span>{{ t('services.fastDeliveryDesc') }}</span>
             </div>
           </div>
         </v-col>
@@ -19,8 +19,8 @@
               <img src="~/assets/images/credit.png" alt="shipped" />
             </div>
             <div class="flex-grow-1 ms-3">
-              <h3>Secured Payment</h3>
-              <span>Shop with Confidence</span>
+              <h3>{{ t('services.securedPayment') }}</h3>
+              <span>{{ t('services.securedPaymentDesc') }}</span>
             </div>
           </div>
         </v-col>
@@ -30,8 +30,8 @@
               <img src="~/assets/images/wallet.png" alt="shipped" />
             </div>
             <div class="flex-grow-1 ms-3">
-              <h3>Money Back</h3>
-              <span>100% Money-Back Guarantee</span>
+              <h3>{{ t('services.moneyBack') }}</h3>
+              <span>{{ t('services.moneyBackDesc') }}</span>
             </div>
           </div>
         </v-col>
@@ -41,8 +41,8 @@
               <img src="~/assets/images/headphones.png" alt="shipped" />
             </div>
             <div class="flex-grow-1 ms-3">
-              <h3>24/7 Support</h3>
-              <span>Always Here for You</span>
+              <h3>{{ t('services.support247') }}</h3>
+              <span>{{ t('services.support247Desc') }}</span>
             </div>
           </div>
         </v-col>
@@ -51,8 +51,6 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: "Services",
-};
+<script setup lang="ts">
+const { t } = useI18n();
 </script>