fix subscriptions info tab in team

xroom-dashboard/src/components/Membership.vue

@@ -1,59 +1,106 @@
 <template>
   <div class="tab-content">
     <div class="access-container">
-      <div class="access-header" style="background: white; border-radius: 20px; padding: 20px;">
+      <!-- Header Section -->
-        <img :src="require('@/assets/img/lock Icon.png')" alt="lock" class="lock-icon" />
+      <div class="access-header">
-        <div class="header-text">
+        <div class="header-content">
-          <h3>فعال‌سازی دسترسی XRoom</h3>
+          <img :src="require('@/assets/img/lock Icon.png')" alt="lock" class="lock-icon" />
-          <p>دسترسی کامل به امکانات XRoom بدون واترمارک</p>
+          <div class="header-text">
+            <h3>فعال‌سازی دسترسی XRoom</h3>
+            <p>دسترسی کامل به امکانات XRoom بدون واترمارک</p>
+          </div>
         </div>
-        <button class="primary-button" @click="changeTab('buy-subscription')">
+        <button class="primary-button" @click="navigateToSubscription">
-          <img style="margin-left: 10px" :src="require('@/assets/img/hand.png')" alt="hand" />
+          <img :src="require('@/assets/img/hand.png')" alt="hand" class="button-icon" />
-          انتخاب طرح اشتراکی
+          <span>انتخاب طرح اشتراکی</span>
         </button>
       </div>
-      <!-- subscription card -->
+
-      <div class="info-cards">
+      <!-- Info Cards Section -->
+      <div class="info-cards" v-if="isLoading">
+        <div class="loading">در حال بارگذاری...</div>
+      </div>
+      <div class="info-cards" v-else-if="error">
+        <div class="error">{{ error }} <button @click="retryFetch">تلاش مجدد</button></div>
+      </div>
+      <div class="info-cards" v-else>
+        <!-- Billing Info Card -->
         <div class="info-card">
-          <h4>وضعیت اشتراک تیم</h4>
+          <div class="card-content">
-          <p v-if="subscriptionCount - teamMemberCapacity > 0">
+            <h4>{{ translations.billing.title }}</h4>
-            ظرفیت کل تیم: <strong>{{ subscriptionCount }} کاربر</strong><br />
+            <div class="billing-info">
-            ظرفیت باقی‌مانده: <strong>{{ subscriptionCount - teamMemberCapacity }} کاربر</strong><br />
+              <p class="billing-address">{{ billingInfo.address }}</p>
-            کاربران اضافه کرده: <strong>{{ teamMemberCapacity }} کاربر</strong>
+              <p class="billing-phoneNum">
-          </p>
+                {{ translations.billing.phone }}: <span>{{ billingInfo.phone }}</span>
-          <p class="invalid-subscription" v-else>شما اشتراک فعالی ندارین، لطفا اشتراک جدیدی خریداری نمایید.</p>
+              </p>
-          <button class="disable-button" v-if="subscriptionCount - teamMemberCapacity > 0">
+              <p class="billing-email">
-            اشتراک فعال دارید
+                {{ translations.billing.email }}: <span>{{ billingInfo.email }}</span>
-          </button>
+              </p>
-          <button class="secondary-button" @click="changeTab('buy-subscription')" v-else>
+            </div>
-            خرید اشتراک جدید
+          </div>
-          </button>
-        </div>
-        <div class="info-card">
-          <h4>جزئیات صورتحساب</h4>
-          <p>
-            اصفهان، خیابان وحید، نبش خیابان حسین آباد، مجتمع عسگری ۳، واحد ۳<br />
-            ۸۱۷۵۹۴۹۹۹۱<br />
-            شماره تماس: ۰۹۳۷۹۸۹۸۶۲۳<br />
-            ایمیل: aminimperator@gmail.com
-          </p>
           <button class="secondary-button" @click="openBillingModal">
-            ویرایش جزئیات صورتحساب
+            {{ translations.billing.editButton }}
           </button>
         </div>
+
+        <!-- Memberships Card -->
         <div class="info-card">
-          <h4>عضویت‌ها</h4>
+          <div class="card-content">
-          <p>
+            <h4>{{ translations.memberships.title }}</h4>
-            هنوز مجوزی فعال نیست. کاربران شما نمی‌توانند از XRoom با واترمارک استفاده کنند.
+            <p class="memberships">
-          </p>
+              {{ hasActiveSubscription ? translations.memberships.active : translations.memberships.inactive }}
-          <button class="secondary-button">مدیریت عضویت‌ها</button>
+            </p>
+          </div>
+          <button class="secondary-button" @click="manageMemberships">
+            {{ translations.memberships.manageButton }}
+          </button>
         </div>
+
+        <!-- Payment Method Card -->
         <div class="info-card">
-          <h4>روش پرداخت</h4>
+          <div class="card-content">
-          <p>هیچ روش پرداختی برای صورتحساب مرتبط نیست.</p>
+            <h4>{{ translations.payment.title }}</h4>
+            <p class="payment-method">
+              {{ paymentMethod || translations.payment.noMethod }}
+            </p>
+          </div>
+        </div>
+
+        <!-- Team Subscription Card -->
+        <div class="info-card">
+          <div class="card-content">
+            <h4>{{ translations.subscription.title }}</h4>
+            <div class="subscription-info" v-if="hasRemainingCapacity">
+              <p class="subscription-all">
+                {{ translations.subscription.total }}: <span>{{ subscriptionCount }} {{ translations.subscription.users }}</span>
+              </p>
+              <p class="subscription-remainder">
+                {{ translations.subscription.remaining }}: <span>{{ remainingCapacity }} {{ translations.subscription.users }}</span>
+              </p>
+              <p class="subscription-added">
+                {{ translations.subscription.added }}: <span>{{ teamMemberCapacity }} {{ translations.subscription.users }}</span>
+              </p>
+            </div>
+            <p class="invalid-subscription" v-else>
+              {{ translations.subscription.noActive }}
+            </p>
+          </div>
+          <button
+            :class="hasRemainingCapacity ? 'disable-button' : 'secondary-button'"
+            :disabled="hasRemainingCapacity"
+            @click="navigateToSubscription"
+          >
+            {{ hasRemainingCapacity ? translations.subscription.activeButton : translations.subscription.buyButton }}
+          </button>
         </div>
       </div>
-      <EditBillingModal :isVisible="isBillingModalVisible" @close="closeBillingModal" />
+
+      <!-- Billing Modal -->
+      <EditBillingModal
+        :isVisible="isBillingModalVisible"
+        @close="closeBillingModal"
+        @update:billingInfo="updateBillingInfo"
+      />
     </div>
   </div>
 </template>
@@ -70,19 +117,87 @@ export default {
     subscriptionCount: {
       type: Number,
       required: true,
+      validator: (value) => value >= 0,
     },
     teamMemberCapacity: {
       type: Number,
       required: true,
+      validator: (value) => value >= 0,
     },
     isBillingModalVisible: {
       type: Boolean,
-      required: true,
+      default: false,
     },
   },
+  data() {
+    return {
+      translations: {
+        billing: {
+          title: 'جزئیات صورتحساب',
+          phone: 'شماره تماس',
+          email: 'ایمیل',
+          editButton: 'ویرایش جزئیات صورتحساب',
+        },
+        memberships: {
+          title: 'عضویت‌ها',
+          active: 'اشتراک فعال است',
+          inactive: 'هنوز مجوزی فعال نیست. کاربران شما نمی‌توانند از XRoom با واترمارک استفاده کنند.',
+          manageButton: 'مدیریت عضویت‌ها',
+        },
+        payment: {
+          title: 'روش پرداخت',
+          noMethod: 'هیچ روش پرداختی برای صورتحساب مرتبط نیست.',
+        },
+        subscription: {
+          title: 'وضعیت اشتراک تیم',
+          total: 'ظرفیت کل تیم',
+          remaining: 'ظرفیت باقی‌مانده',
+          added: 'کاربران اضافه کرده',
+          users: 'کاربر',
+          noActive: 'شما اشتراک فعالی ندارین، لطفا اشتراک جدیدی خریداری نمایید.',
+          activeButton: 'اشتراک فعال دارید',
+          buyButton: 'خرید اشتراک جدید',
+        },
+        error: {
+          fetchFailed: 'خطا در دریافت اطلاعات. لطفاً دوباره تلاش کنید.',
+        },
+      },
+      billingInfo: {
+        address: 'اصفهان، خیابان وحید، نبش خیابان حسین آباد، مجتمع عسگری ۳، واحد ۳ ۸۱۷۵۹۴۹۹۹۱',
+        phone: '۰۹۳۷۹۸۹۸۶۲۳',
+        email: 'aminimperator@gmail.com',
+      },
+      paymentMethod: null,
+      hasActiveSubscription: false,
+      isLoading: false,
+      error: null,
+    };
+  },
+  computed: {
+    hasRemainingCapacity() {
+      return this.subscriptionCount - this.teamMemberCapacity > 0;
+    },
+    remainingCapacity() {
+      return this.subscriptionCount - this.teamMemberCapacity;
+    },
+  },
+  created() {
+    this.simulateFetch();
+  },
   methods: {
-    changeTab(tabName) {
+    simulateFetch() {
-      this.$emit('change-tab', tabName);
+      // شبیه‌سازی دریافت داده‌ها
+      this.isLoading = true;
+      setTimeout(() => {
+        this.isLoading = false;
+      }, 1000);
+    },
+    retryFetch() {
+      this.error = null;
+      this.simulateFetch();
+    },
+    navigateToSubscription() {
+      this.$emit('change-tab', 'buy-subscription');
     },
     openBillingModal() {
       this.$emit('update:isBillingModalVisible', true);
@@ -90,41 +205,60 @@ export default {
     closeBillingModal() {
       this.$emit('update:isBillingModalVisible', false);
     },
+    updateBillingInfo(newBillingInfo) {
+      this.billingInfo = { ...newBillingInfo };
+    },
+    manageMemberships() {
+      console.log('مدیریت عضویت‌ها');
+    },
   },
 };
 </script>
 
 <style scoped>
+
 .access-container {
   direction: rtl;
   font-family: IRANSansXFaNum, sans-serif;
-  padding: 20px;
+  padding: 20px 0;
   background-color: #f9f9fb;
-  width: -webkit-fill-available;
+  width: 100%;
 }
 
 .access-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
+  background: white;
+  border-radius: 20px;
+  padding: 20px;
   margin-bottom: 24px;
 }
 
+.header-content {
+  display: flex;
+  align-items: center;
+}
+
+.header-text {
+  margin-right: 1.5rem;
+}
+
 .header-text h3 {
   font-size: 20px;
   font-weight: 700;
   color: #1a202c;
-  margin-bottom: 6px;
+  margin-bottom: 1.5rem;
 }
 
 .header-text p {
-  color: #4a5568;
+  color: #5a6678;
   font-size: 14px;
 }
 
 .lock-icon {
-  width: 40px;
+  width: 75px;
-  height: 40px;
+  height: 75px;
 }
 
 .primary-button {
@@ -134,8 +268,13 @@ export default {
   padding: 12px 24px;
   font-size: 14px;
   border-radius: 10px;
-  margin-bottom: 30px;
   cursor: pointer;
+  display: flex;
+  align-items: center;
+}
+
+.button-icon {
+  margin-left: 10px;
 }
 
 .info-cards {
@@ -149,54 +288,101 @@ export default {
   border-radius: 16px;
   padding: 20px;
   width: 100%;
-  max-width: 300px;
+  max-width: 32%;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
   display: flex;
   flex-direction: column;
   justify-content: space-between;
+  height: 20rem;
 }
 
-.info-card h4 {
+.card-content h4 {
-  font-size: 16px;
+  font-size: 18px;
   font-weight: 600;
-  margin-bottom: 12px;
+  margin-bottom: 1.5rem;
 }
 
-.info-card p {
+.secondary-button,
-  font-size: 14px;
+.disable-button {
-  color: #4a5568;
+  border: none;
-  margin-bottom: 16px;
+  padding: 10px 16px;
-  line-height: 1.7;
+  font-size: 15px;
+  font-weight: 500;
+  border-radius: 8px;
+  cursor: pointer;
 }
 
 .secondary-button {
   background-color: #3a57e8;
   color: white;
-  border: none;
-  padding: 10px 16px;
-  font-size: 13px;
-  border-radius: 8px;
-  cursor: pointer;
-}
-
-.invalid-subscription {
-  color: #f44336 !important;
 }
 
 .disable-button {
-  background-color: #ebeeFD;
+  background-color: #ebeefd;
-  color: #101010;
+  color: #1a202c;
+  cursor: not-allowed;
+}
+
+.billing-info,
+.subscription-info {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.billing-address,
+.memberships,
+.payment-method,
+.subscription-all,
+.subscription-remainder,
+.subscription-added {
+  line-height: 190%;
+  font-size: 16px;
+  color: #5a6678;
+}
+
+.billing-phoneNum,
+.billing-email,
+.subscription-all,
+.subscription-remainder,
+.subscription-added {
+  color: #1a202c;
+}
+
+.billing-phoneNum span,
+.billing-email span,
+.subscription-all span,
+.subscription-remainder span,
+.subscription-added span {
+  color: #5a6678;
+  font-size: 15px;
+}
+
+.invalid-subscription {
+  color: #f44336;
+  line-height: 190%;
+  font-size: 15px;
+}
+
+.loading {
+  margin-top: 2.5rem;
+  text-align: center;
+  font-size: 16px;
+  color: #5a6678;
+}
+
+.error {
+  text-align: center;
+  color: #f44336;
+  font-size: 16px;
+}
+
+.error button {
+  background-color: #3a57e8;
+  color: white;
   border: none;
-  padding: 10px 16px;
+  padding: 8px 16px;
-  font-size: 14px;
-  font-weight: 600;
   border-radius: 8px;
   cursor: pointer;
 }
-
-.tab-content {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 16px;
-}
 </style>