@crm-market/template-shared 1.0.2 → 1.0.4

package/components/Contact/ContactForm.vue

@@ -14,50 +14,47 @@
           </div>
           <div class="col-lg-7">
             <div class="authentication-form form-wrap">
-              <h3 class="title mb-2">Get In Touch</h3>
-              <p>
-                Your Gateway to Excellence: Contact Us and Unlock a World of
-                Possibilities
-              </p>
+              <h3 class="title mb-2">{{ t('contact.getInTouch') }}</h3>
+              <p>{{ t('contact.contactDescription') }}</p>
 
               <form>
                 <div class="row">
                   <div class="col-lg-6">
                     <div class="form-group mb-4">
-                      <label class="label">Your Name *</label>
+                      <label class="label">{{ t('contact.yourName') }} *</label>
                       <input
                         type="text"
                         class="form-control"
-                        placeholder="Enter your name"
+                        :placeholder="t('contact.enterName')"
                       />
                     </div>
                   </div>
                   <div class="col-lg-6">
                     <div class="form-group mb-4">
-                      <label class="label">Your Email *</label>
+                      <label class="label">{{ t('contact.yourEmail') }} *</label>
                       <input
                         type="email"
                         class="form-control"
-                        placeholder="Enter your  email"
+                        :placeholder="t('contact.enterEmail')"
                       />
                     </div>
                   </div>
                   <div class="col-lg-12">
                     <div class="form-group mb-4">
-                      <label class="label">Your Subject *</label>
+                      <label class="label">{{ t('contact.yourSubject') }} *</label>
                       <input
                         type="text"
                         class="form-control"
-                        placeholder="Your subject"
+                        :placeholder="t('contact.yourSubject')"
                       />
                     </div>
                   </div>
                   <div class="col-lg-12">
                     <div class="form-group mb-4">
-                      <label class="label">Your Message *</label>
+                      <label class="label">{{ t('contact.yourMessage') }} *</label>
                       <textarea
                         class="form-control"
-                        placeholder="Write message"
+                        :placeholder="t('contact.writeMessage')"
                         cols="30"
                         rows="5"
                       ></textarea>
@@ -70,7 +67,7 @@
                         type="submit"
                         class="btn btn-warning btn-pill text-white"
                       >
-                        Submit Now
+                        {{ t('footer.submitNow') }}
                       </button>
                     </div>
                   </div>
@@ -84,8 +81,6 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: "ContactForm",
-};
+<script setup lang="ts">
+const { t } = useI18n();
 </script>

package/components/Dashboard/index.vue

@@ -25,7 +25,7 @@
                     to="/edit-profile"
                     class="btn btn-warning text-white"
                   >
-                    Edit Profile
+                    {{ t('account.editProfile') }}
                   </NuxtLink>
                 </div>
               </div>
@@ -33,22 +33,22 @@
 
             <div class="col-lg-6">
               <div class="billing-address-bar">
-                <h3>Default</h3>
+                <h3>{{ t('common.default') }}</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>
@@ -72,8 +72,6 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: "Dashboard",
-};
+<script setup lang="ts">
+const { t } = useI18n();
 </script>

package/components/EditAddress/index.vue

@@ -8,27 +8,27 @@
 
         <div class="col-lg-8">
           <div class="edit-profile">
-            <h3>Edit Address</h3>
+            <h3>{{ t('account.editAddress') }}</h3>
 
             <form class="submit-property-form">
               <div class="row">
                 <div class="col-lg-6">
                   <div class="form-group">
-                    <label>First Name</label>
+                    <label>{{ t('checkout.firstName') }}</label>
                     <input type="text" class="form-control" value="Amanda" />
                   </div>
                 </div>
 
                 <div class="col-lg-6">
                   <div class="form-group">
-                    <label>Last Name</label>
+                    <label>{{ t('checkout.lastName') }}</label>
                     <input type="text" class="form-control" value="McCarter" />
                   </div>
                 </div>
 
                 <div class="col-lg-6">
                   <div class="form-group">
-                    <label>Email Address</label>
+                    <label>{{ t('checkout.emailAddress') }}</label>
                     <input
                       type="email"
                       class="form-control"
@@ -39,7 +39,7 @@
 
                 <div class="col-lg-6">
                   <div class="form-group">
-                    <label>Phone Number</label>
+                    <label>{{ t('checkout.phoneNumber') }}</label>
                     <input
                       type="text"
                       class="form-control"
@@ -50,7 +50,7 @@
 
                 <div class="col-lg-6">
                   <div class="form-group">
-                    <label>Company Name (Optional)</label>
+                    <label>{{ t('checkout.companyName') }}</label>
                     <input
                       type="text"
                       class="form-control"
@@ -61,7 +61,7 @@
 
                 <div class="col-lg-6">
                   <div class="form-group">
-                    <label>Country</label>
+                    <label>{{ t('account.country') }}</label>
                     <input
                       type="text"
                       class="form-control"
@@ -72,35 +72,35 @@
 
                 <div class="col-lg-6">
                   <div class="form-group">
-                    <label>Street Address</label>
+                    <label>{{ t('checkout.streetAddress') }}</label>
                     <input type="text" class="form-control" value="Cities" />
                   </div>
                 </div>
 
                 <div class="col-lg-6">
                   <div class="form-group">
-                    <label>Town / City</label>
+                    <label>{{ t('checkout.townCity') }}</label>
                     <input type="text" class="form-control" value="Cities" />
                   </div>
                 </div>
 
                 <div class="col-lg-6">
                   <div class="form-group">
-                    <label>State / County</label>
+                    <label>{{ t('account.stateCounty') }}</label>
                     <input type="text" class="form-control" value="Liverpool" />
                   </div>
                 </div>
 
                 <div class="col-lg-6">
                   <div class="form-group">
-                    <label>Zip</label>
+                    <label>{{ t('account.zip') }}</label>
                     <input type="text" class="form-control" value="1457856" />
                   </div>
                 </div>
 
                 <div class="col-lg-12">
                   <button type="submit" class="btn btn-warning text-white">
-                    Save
+                    {{ t('common.save') }}
                   </button>
                 </div>
               </div>
@@ -112,8 +112,6 @@
   </section>
 </template>
 
-<script>
-export default {
-  name: "EditAddress",
-};
+<script setup lang="ts">
+const { t } = useI18n();
 </script>

package/components/EditProfile/index.vue

@@ -8,27 +8,27 @@
 
         <div class="col-lg-8">
           <div class="edit-profile">
-            <h3>Edit Profile</h3>
+            <h3>{{ t('account.editProfile') }}</h3>
 
             <form class="submit-property-form">
               <div class="row">
                 <div class="col-lg-6">
                   <div class="form-group">
-                    <label>First Name</label>
+                    <label>{{ t('checkout.firstName') }}</label>
                     <input type="text" class="form-control" value="Amanda" />
                   </div>
                 </div>
 
                 <div class="col-lg-6">
                   <div class="form-group">
-                    <label>Last Name</label>
+                    <label>{{ t('checkout.lastName') }}</label>
                     <input type="text" class="form-control" value="McCarter" />
                   </div>
                 </div>
 
                 <div class="col-lg-6">
                   <div class="form-group">
-                    <label>Email Address</label>
+                    <label>{{ t('checkout.emailAddress') }}</label>
                     <input
                       type="email"
                       class="form-control"
@@ -39,7 +39,7 @@
 
                 <div class="col-lg-6">
                   <div class="form-group">
-                    <label>Phone Number</label>
+                    <label>{{ t('checkout.phoneNumber') }}</label>
                     <input
                       type="text"
                       class="form-control"
@@ -50,7 +50,7 @@
 
                 <div class="col-lg-12">
                   <div class="form-group">
-                    <label>Change Your Image</label>
+                    <label>{{ t('common.changeImage') }}</label>
                     <div class="file-upload">
                       <input
                         type="file"
@@ -60,7 +60,7 @@
                       />
                       <label class="upload" for="file">
                         <i class="ri-image-2-fill"></i>
-                        Click here
+                        {{ t('common.clickHere') }}
                       </label>
                     </div>
                   </div>
@@ -78,7 +78,7 @@
 
                 <div class="col-lg-12">
                   <button type="submit" class="btn btn-warning text-white">
-                    Save Change
+                    {{ t('common.saveChange') }}
                   </button>
                 </div>
               </div>
@@ -90,8 +90,6 @@
   </section>
 </template>
 
-<script>
-export default {
-  name: "EditProfile",
-};
+<script setup lang="ts">
+const { t } = useI18n();
 </script>

package/components/ForgotPassword/index.vue

@@ -13,18 +13,18 @@
               <ul class="nav nav-tabs login-tabs" id="myTab" role="tablist">
                 <li class="nav-item" role="presentation">
                   <NuxtLink to="/forgot-password" class="nav-link active">
-                    Forgot Password
+                    {{ t('auth.forgotPassword') }}
                   </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">Email Address</label>
+                  <label class="label">{{ t('auth.email') }}</label>
                   <input
                     type="email"
                     class="form-control"
-                    placeholder="Enter Your Email"
+                    :placeholder="t('auth.enterEmail')"
                   />
                 </div>
                 <div class="form-group mb-0">
@@ -32,7 +32,7 @@
                     type="submit"
                     class="btn btn-warning btn-pill text-white w-100 d-block"
                   >
-                    Forgot Password
+                    {{ t('auth.forgotPassword') }}
                   </button>
                 </div>
               </form>
@@ -44,8 +44,6 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: "ForgotPassword",
-};
+<script setup lang="ts">
+const { t } = useI18n();
 </script>

package/components/Layout/Copyright.vue

@@ -4,7 +4,7 @@
       <v-row class="align-items-center">
         <v-col cols="12" lg="6" md="6">
           <p class="mb-2 mb-md-0 text-center text-md-start">
-            © <span>Tuan.</span> All Rights Reserved by
+            © <span>Tuan.</span> {{ t('footer.allRightsReserved') }}
             <a href="https://envytheme.com/" target="_blank">EnvyTheme</a>
           </p>
         </v-col>
@@ -18,8 +18,6 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: "Copyright",
-};
+<script setup lang="ts">
+const { t } = useI18n();
 </script>

package/components/Layout/Footer.vue

@@ -10,11 +10,11 @@
                 {{ siteConfig.siteDescription }}
               </p>
               <p v-else>
-                Your online store for the best products and deals.
+                {{ t('footer.storeDescription') }}
               </p>
 
               <div class="call-info" v-if="phone">
-                <span class="title">Got Question? Call us 24/7</span>
+                <span class="title">{{ t('footer.gotQuestion') }}</span>
                 <div class="d-flex align-items-center">
                   <i class="flaticon-headphones-1"></i>
                   <a :href="`tel:${phone}`">{{ phone }}</a>
@@ -30,7 +30,7 @@
           </v-col>
           <v-col cols="12" lg="3" sm="6">
             <div class="single-footer-widget">
-              <h3>Popular Categories</h3>
+              <h3>{{ t('footer.popularCategories') }}</h3>
 
               <ul class="ps-0 mb-0 list-unstyled import-link">
                 <li v-for="category in footerCategories" :key="category.id">
@@ -39,50 +39,50 @@
                   </NuxtLink>
                 </li>
                 <li v-if="footerCategories.length === 0">
-                  <NuxtLink to="/products">All Products</NuxtLink>
+                  <NuxtLink to="/products">{{ t('nav.allProducts') }}</NuxtLink>
                 </li>
               </ul>
             </div>
           </v-col>
           <v-col cols="12" lg="3" sm="6">
             <div class="single-footer-widget">
-              <h3>Let Us Help You</h3>
+              <h3>{{ t('footer.letUsHelp') }}</h3>
 
               <ul class="ps-0 mb-0 list-unstyled import-link">
                 <li>
-                  <NuxtLink to="/dashboard">Your Account</NuxtLink>
+                  <NuxtLink to="/dashboard">{{ t('account.yourAccount') }}</NuxtLink>
                 </li>
                 <li>
-                  <NuxtLink to="/order-history">Your Orders</NuxtLink>
+                  <NuxtLink to="/order-history">{{ t('account.yourOrders') }}</NuxtLink>
                 </li>
                 <li>
-                  <NuxtLink to="/privacy-policy">Privacy Policy</NuxtLink>
+                  <NuxtLink to="/privacy-policy">{{ t('common.privacyPolicy') }}</NuxtLink>
                 </li>
                 <li>
-                  <NuxtLink to="/faq">Help Center</NuxtLink>
+                  <NuxtLink to="/faq">{{ t('common.helpCenter') }}</NuxtLink>
                 </li>
                 <li>
-                  <NuxtLink to="/terms-conditions">Terms & Conditions</NuxtLink>
+                  <NuxtLink to="/terms-conditions">{{ t('common.termsConditions') }}</NuxtLink>
                 </li>
               </ul>
             </div>
           </v-col>
           <v-col cols="12" lg="3" sm="6">
             <div class="single-footer-widget">
-              <h3>Get to Know Us</h3>
+              <h3>{{ t('footer.getToKnowUs') }}</h3>
 
               <ul class="ps-0 mb-0 list-unstyled import-link">
                 <li>
-                  <NuxtLink to="/about-us">About Us</NuxtLink>
+                  <NuxtLink to="/about-us">{{ t('nav.aboutUs') }}</NuxtLink>
                 </li>
                 <li>
-                  <NuxtLink to="/contact">Contact Us</NuxtLink>
+                  <NuxtLink to="/contact">{{ t('nav.contact') }}</NuxtLink>
                 </li>
                 <li>
-                  <NuxtLink to="/categories">Categories</NuxtLink>
+                  <NuxtLink to="/categories">{{ t('nav.categories') }}</NuxtLink>
                 </li>
                 <li>
-                  <NuxtLink to="/products">All Products</NuxtLink>
+                  <NuxtLink to="/products">{{ t('nav.allProducts') }}</NuxtLink>
                 </li>
               </ul>
             </div>
@@ -92,17 +92,17 @@
       <v-row class="align-items-end justify-content-center">
         <v-col cols="12" lg="3" md="6">
           <div class="single-footer-bottom-item">
-            <span class="title">Subscribe to the newsletter</span>
+            <span class="title">{{ t('footer.subscribe') }}</span>
             <form class="subscribe-form position-relative" @submit.prevent>
               <input
                 type="text"
                 class="form-control"
-                placeholder="Enter your email"
+                :placeholder="t('footer.enterEmail')"
               />
               <button
                 class="btn btn-warning text-white position-absolute top-50 end-0 translate-middle-y"
               >
-                Submit Now
+                {{ t('footer.submitNow') }}
               </button>
             </form>
           </div>
@@ -113,7 +113,7 @@
               class="ps-0 mb-0 list-unstyled d-flex align-items-center social-link justify-content-center"
             >
               <li>
-                <span class="titles">Follow Us:</span>
+                <span class="titles">{{ t('footer.followUs') }}:</span>
               </li>
               <li v-if="socialMedia?.facebook">
                 <a :href="socialMedia.facebook" target="_blank">
@@ -136,7 +136,7 @@
         <v-col cols="12" lg="5" md="6">
           <div class="single-footer-bottom-item">
             <p class="text-center text-lg-end mb-0 text-muted">
-              &copy; {{ new Date().getFullYear() }} {{ storeName }}. All rights reserved.
+              &copy; {{ new Date().getFullYear() }} {{ storeName }}. {{ t('footer.allRightsReserved') }}.
             </p>
           </div>
         </v-col>
@@ -145,39 +145,24 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { computed } from "vue";
 
-export default {
-  name: "Footer",
-  setup() {
-    const { siteConfig, siteName, contactInfo } = useSiteConfig();
-    const { topLevelCategories } = useCategories();
+const { t } = useI18n();
+const { siteConfig, siteName, contactInfo } = useSiteConfig();
+const { topLevelCategories } = useCategories();
 
-    const storeName = computed(() => siteName.value || 'Our Store');
-    const phone = computed(() => contactInfo.value?.phone);
-    const email = computed(() => contactInfo.value?.email);
-    const address = computed(() => contactInfo.value?.address);
-    const socialMedia = computed(() => contactInfo.value?.socialMedia);
-    const hasSocialMedia = computed(() => {
-      const sm = socialMedia.value;
-      return sm && (sm.facebook || sm.twitter || sm.instagram);
-    });
+const storeName = computed(() => siteName.value || 'Our Store');
+const phone = computed(() => contactInfo.value?.phone);
+const email = computed(() => contactInfo.value?.email);
+const address = computed(() => contactInfo.value?.address);
+const socialMedia = computed(() => contactInfo.value?.socialMedia);
+const hasSocialMedia = computed(() => {
+  const sm = socialMedia.value;
+  return sm && (sm.facebook || sm.twitter || sm.instagram);
+});
 
-    const footerCategories = computed(() =>
-      topLevelCategories.value.slice(0, 6)
-    );
-
-    return {
-      siteConfig,
-      storeName,
-      phone,
-      email,
-      address,
-      socialMedia,
-      hasSocialMedia,
-      footerCategories,
-    };
-  },
-};
+const footerCategories = computed(() =>
+  topLevelCategories.value.slice(0, 6)
+);
 </script>