@tapni/auth 1.0.61 → 1.0.66

package/src/store/locales/tr.js

@@ -9,6 +9,8 @@ export default {
 		serbian: 'Sırpça',
 		turkish: 'Çince',
 		chinese: 'Kineski',
+		japanese: 'Japonca',
+		portuguese: 'Portekizce',
 		app_language: 'Dil seçin',
 		profile_preview: 'Profil Önizlemesi',
 		edit_profile: 'Profili Düzenle',
@@ -23,9 +25,9 @@ export default {
 		exchange_contact: 'Değişim İletişim',
 		add_details: 'Daha fazlasını ekle',
 		show_details: 'Daha fazlasını göster',
-		download_contact: "İletişim Kartını İndir",
-		stay_in_touch: "İle iletişim kurun",
-		no_thanks: "Hayır, teşekkürler",
+		download_contact: 'İletişim Kartını İndir',
+		stay_in_touch: 'İle iletişim kurun',
+		no_thanks: 'Hayır, teşekkürler',
 		connect_join: "Tapni'ye katıl",
 		connect_with: 'ile bağlanın',
 		connect_required_fields: 'İki iletişim alanından biri sağlanmalıdır',
@@ -167,7 +169,7 @@ export default {
 		update_username: 'Kullanıcı adını güncelle',
 		new_username: 'Yeni kullanıcı adınızı girin',
 		username_check: 'Lütfen uygun bir kullanıcı adı girin',
-		username_is_free: "Kullanıcı adınız kullanılabilir",
+		username_is_free: 'Kullanıcı adınız kullanılabilir',
 		anonymous: 'Anonim',
 		connected: 'Bağlı',
 		exchanged: 'Değiş tokuş',
@@ -366,9 +368,9 @@ export default {
 		accept_request: 'İsteği kabul et',
 		close: 'Kapat',
 		request_accepted: 'İstek başarıyla kabul edildi',
-		companyEmail: "Şirket e-postası",
-		companyPhone: "Şirket telefon numarası",
-		addBusinessInformations: "İş bilgilerini ekle",
+		companyEmail: 'Şirket e-postası',
+		companyPhone: 'Şirket telefon numarası',
+		addBusinessInformations: 'İş bilgilerini ekle',
 		resetFilter: 'Sıfırla',
 		selectMarkers: 'İşaretleyicileri Seçin',
 		filterConnectionsHeader: 'Filtre Bağlantıları',
@@ -444,36 +446,36 @@ export default {
 		choose_other_login_methods: 'Diğer giriş yöntemlerini seçin',
 		no_sso_logins: 'Şirketiniz SSO girişini kullanmıyor, lütfen yöneticinizle iletişime geçin',
 
-		mfa: "Çok Faktörlü Kimlik Doğrulama",
-		otp_title: "Devam etmek için MFA kodunu girin",
-		otp_code: "MFA Kodu",
-		otp_subtitle: "Kimlik doğrulama uygulamasındaki kodu girin",
-		otp_p1: "MFA ile ilgili sorun yaşıyorsanız, <br> bize ulaşın:",
-		change_language: "Dili Değiştir",
-		welcome_account: "Hesap Merkezine Hoş Geldiniz",
-		security: "Güvenlik",
-		security_p: "Kimlik doğrulama seçeneklerinizi & hesap durumunuzu yönetin",
-		general: "Genel",
-		general_p: "Kişisel bilgilerinizi & diğer tercihlerinizi yönetin",
-		billing: "Faturalama",
-		billing_p: "Aboneliklerinizi & ödeme profillerinizi yönetin",
-		apps: "Uygulamalar",
-		apps_p: "Aktif uygulamalarınızı görüntüleyin & diğerlerini keşfedin",
-		apps_my: "Uygulamalarım",
-		mfa_auth: "2 Faktörlü Doğrulama",
-		mfa_auth_enabled: "Hesabınız MFA ile korunuyor.",
-		mfa_auth_p: "Hesabınızı çok faktörlü doğrulama (MFA) ile koruyun",
-		mfa_auth_qr: "Yukarıdaki QR kodunu tarayın ya da gizli anahtarı doğrulama uygulamanıza girin.",
-		change_password: "Şifreyi Değiştir",
-		active_account: "Aktif Hesap",
-		active_account_p: "Kapatılırsa hesabınız yeniden açılana dek geçici olarak devre dışı kalır.",
-		delete_account: "Hesabı Sil",
-		delete_account_p: "Hesabı Sil",
-		permanent_delete: "Kalıcı Silme",
-		permanent_delete_p: "Hesabınızı silerseniz tüm verileriniz kalıcı olarak silinir. Geri alınamaz. Emin değilseniz hesabı geçici olarak devre dışı bırakın.",
-		personal_details: "Kişisel Bilgiler",
-		app_language_p: "Uygulamayı tercih ettiğiniz dile çevirin",
-		app_region: "Bölge",
-		app_region_p: "Kişiselleştirilmiş faturalama ve destek için bölgenizi seçin"
+		mfa: 'Çok Faktörlü Kimlik Doğrulama',
+		otp_title: 'Devam etmek için MFA kodunu girin',
+		otp_code: 'MFA Kodu',
+		otp_subtitle: 'Kimlik doğrulama uygulamasındaki kodu girin',
+		otp_p1: 'MFA ile ilgili sorun yaşıyorsanız, <br> bize ulaşın:',
+		change_language: 'Dili Değiştir',
+		welcome_account: 'Hesap Merkezine Hoş Geldiniz',
+		security: 'Güvenlik',
+		security_p: 'Kimlik doğrulama seçeneklerinizi & hesap durumunuzu yönetin',
+		general: 'Genel',
+		general_p: 'Kişisel bilgilerinizi & diğer tercihlerinizi yönetin',
+		billing: 'Faturalama',
+		billing_p: 'Aboneliklerinizi & ödeme profillerinizi yönetin',
+		apps: 'Uygulamalar',
+		apps_p: 'Aktif uygulamalarınızı görüntüleyin & diğerlerini keşfedin',
+		apps_my: 'Uygulamalarım',
+		mfa_auth: '2 Faktörlü Doğrulama',
+		mfa_auth_enabled: 'Hesabınız MFA ile korunuyor.',
+		mfa_auth_p: 'Hesabınızı çok faktörlü doğrulama (MFA) ile koruyun',
+		mfa_auth_qr: 'Yukarıdaki QR kodunu tarayın ya da gizli anahtarı doğrulama uygulamanıza girin.',
+		change_password: 'Şifreyi Değiştir',
+		active_account: 'Aktif Hesap',
+		active_account_p: 'Kapatılırsa hesabınız yeniden açılana dek geçici olarak devre dışı kalır.',
+		delete_account: 'Hesabı Sil',
+		delete_account_p: 'Hesabı Sil',
+		permanent_delete: 'Kalıcı Silme',
+		permanent_delete_p: 'Hesabınızı silerseniz tüm verileriniz kalıcı olarak silinir. Geri alınamaz. Emin değilseniz hesabı geçici olarak devre dışı bırakın.',
+		personal_details: 'Kişisel Bilgiler',
+		app_language_p: 'Uygulamayı tercih ettiğiniz dile çevirin',
+		app_region: 'Bölge',
+		app_region_p: 'Kişiselleştirilmiş faturalama ve destek için bölgenizi seçin'
 	}
 };

package/src/views/Account.vue

@@ -139,7 +139,19 @@
         </div>
       </router-link>
 
-      <router-link v-if="false" to="/billing" class="settingRow">
+      <div v-if="isModal" class="settingRow" @click="$emit('update:viewProp', 'AuthBilling')">
+        <div class="firstRow">
+          <img
+              :src="getIcon('billing-card-black.svg')"
+              class="withBackground"
+          />
+          <h4>{{ssoLang[appLanguage].billing }}</h4>
+
+          <img :src="getIcon('arrow-gray-right.svg')" />
+        </div>
+      </div>
+
+      <router-link v-else to="/billing" class="settingRow">
         <div class="firstRow">
           <img
               :src="getIcon('billing-card-black.svg')"
@@ -204,7 +216,7 @@ export default {
     if (!this.isLoggedIn) {
       return this.$router.push('/');
     }
-    this.getAccountSettings();
+    await this.getAccountSettings();
   },
   methods: {
     continueTo (realm) {

package/src/views/Billing.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="page-login content-boxed content-boxed-padding">
+    <div class="page-login content-boxed content-boxed-padding tapni-auth-billing">
         <a v-if="isModal" @click="close" class="color-black pull-right pointer" style="margin-top: 0px; position: absolute; right: -20px; text-align: right;">
           <i class="font-17 color-black">
             <img src="https://cdn.tapni.co/icons/down-arrow.png" class="responsive-image" style="width: 35%;"/>
@@ -7,7 +7,16 @@
         </a>
       <div class="subheaderContainer full-top">
         <!-- Back Button -->
-        <router-link v-if="!isModal" to="/account" class="button gray-button pointer left-button">
+        <div v-if="isModal" class="pointer left-button" @click="$emit('update:viewProp', 'AuthAccount')">
+          <img
+              :src="getIcon('arrow-gray-right.svg')"
+              height="20"
+              width="20"
+              class="btn-icon"
+              style="rotate: 180deg;"
+          />
+        </div>
+        <router-link v-else to="/account" class="button gray-button pointer left-button">
           <img
               :src="getIcon('arrow-gray-right.svg')"
               height="20"
@@ -27,23 +36,98 @@
         <p class="center-text">{{ssoLang[appLanguage].billing_p }}</p>
 
         <div class="full-top">
-          <h3 v-if="false" class="full-top bold small-bottom">{{ssoLang[appLanguage].apps_my}}</h3>
+          <!-- No subscriptions message -->
+          <div v-if="subscriptions.length === 0" class="no-subscriptions center-text full-top">
+            <p class="gray-text">There are no active subscriptions at this point.</p>
+          </div>
 
-          {{account.billing}}
+          <!-- Subscriptions list -->
+          <div v-else>
+            <div v-for="sub in subscriptions" :key="sub.subscriptionId" class="subscription-card half-bottom">
+              <div class="subscription-header">
+                <div class="subscription-info">
+                  <h3 class="subscription-name">{{ sub.subscriptionName }}</h3>
+                  <span class="subscription-status" :class="getStatusClass(sub.status)">
+                    {{ getStatusText(sub.status) }}
+                  </span>
+                </div>
+              </div>
 
-          <div v-for="sub in subscriptions" :key="sub.id" class="settingRow half-bottom">
-            <div class="firstRow">
-              <img
-                  :src="getIcon(app.t_apps_icon)"
-                  class="withBackground"
-              />
-              <h4>{{ sub.t_subscriptions_name }}</h4>
+              <div class="subscription-details">
+                <div class="detail-row">
+                  <span class="detail-label">Amount:</span>
+                  <span class="detail-value">{{ formatCurrency(sub.amount, sub.currency) }}</span>
+                </div>
+                <div class="detail-row">
+                  <span class="detail-label">Billing:</span>
+                  <span class="detail-value">{{ formatInterval(sub.interval) }}</span>
+                </div>
+                <div class="detail-row">
+                  <span class="detail-label">Licenses:</span>
+                  <span class="detail-value">{{ sub.licenses }}</span>
+                </div>
+                <div v-if="sub.isTrial" class="detail-row">
+                  <span class="detail-label">Trial Ends:</span>
+                  <span class="detail-value">{{ formatDate(sub.trialEnd) }}</span>
+                </div>
+                <div v-else-if="sub.endDate" class="detail-row">
+                  <span class="detail-label">Next Billing:</span>
+                  <span class="detail-value">{{ formatDate(sub.endDate) }}</span>
+                </div>
+              </div>
 
-              <img :src="getIcon('arrow-gray-right.svg')" />
+              <div class="subscription-actions" v-if="sub.status !== 'canceled'">
+                <button
+                  @click="openCancelModal(sub)"
+                  class="cancel-button"
+                  :disabled="loading"
+                >
+                  {{ loading ? 'Processing...' : 'Cancel Subscription' }}
+                </button>
+              </div>
             </div>
           </div>
         </div>
       </div>
+
+      <!-- Cancel Confirmation Modal -->
+      <div v-if="showCancelModal" class="modal-overlay" @click.self="closeCancelModal">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h3>Cancel Subscription</h3>
+            <button @click="closeCancelModal" class="close-button">&times;</button>
+          </div>
+
+          <div class="modal-body">
+            <p class="modal-text">
+              Are you sure you want to cancel your subscription to <b>{{ selectedSubscription?.subscriptionName }}</b>?
+            </p>
+
+            <div class="feedback-section">
+              <label class="feedback-label">We'd love to know why you're canceling (optional):</label>
+              <textarea
+                v-model="cancelFeedback"
+                class="feedback-textarea"
+                placeholder="Your feedback helps us improve our service..."
+                rows="4"
+              ></textarea>
+            </div>
+          </div>
+
+          <div class="modal-footer">
+            <button @click="closeCancelModal" class="button-secondary">
+              Keep Subscription
+            </button>
+            <button
+              @click="confirmCancel"
+              class="button-danger"
+              :disabled="loading"
+            >
+              {{ loading ? 'Canceling...' : 'Confirm Cancellation' }}
+            </button>
+          </div>
+        </div>
+      </div>
     </div>
 </template>
 
@@ -51,7 +135,7 @@
 <script>
 import AuthMixin from "../mixins/auth.mixin";
 import {EventBus} from "@/store/event-bus.js";
-import AuthService from "@/services/AuthService.js";
+import api from "@/services/Api.js";
 
 export default {
   name: "AuthBilling",
@@ -65,44 +149,136 @@ export default {
   data () {
     return {
       loading: false,
-      subscriptions: []
+      subscriptions: [],
+      showCancelModal: false,
+      selectedSubscription: null,
+      cancelFeedback: ''
     }
   },
   async mounted() {
     if (!this.isLoggedIn) this.$router.push('/login');
-
-
-    const response = await AuthService.getRecords({
-      objectId: '6dc545ea-2e2f-4720-b4fe-c5ebdd8af066',
-      query: {
-        where: {
-          account: this.account.id,
-        },
-        fields: ['t_subscriptions_name', 't_subscriptions_desc', 't_subscriptions_type', 't_subscriptions_active', 't_subscriptions_app'],
-        relations: {
-          t_subscriptions_app: {
-            fields: [
-              "t_apps_name",
-              "t_apps_icon",
-              "t_apps_url"
-            ],
-            relations: {},
-          }
-        }
-      }
-    })
-    this.subscriptions = response.data.records;
+    await this.getAccountSettings();
+    this.loadSubscriptions();
   },
   methods: {
     close () {
       EventBus.$emit('ssoEvent', {name: 'toggleAuthModal', data: true})
     },
+    loadSubscriptions() {
+      // Extract subscriptions from account.billing
+      if (this.account.billing) {
+        const billing = this.account.billing;
+        const subs = [];
+
+        // Loop through billing object to find subscription objects
+        for (const key in billing) {
+          if (key !== 'region' && key !== 'currency' && key !== 'paymentProfiles' && typeof billing[key] === 'object' && billing[key].subscriptionId) {
+            subs.push(billing[key]);
+          }
+        }
+
+        this.subscriptions = subs;
+      }
+    },
+    formatCurrency(amount, currency) {
+      const currencySymbols = {
+        'EUR': '€',
+        'USD': '$',
+        'GBP': '£'
+      };
+      const symbol = currencySymbols[currency?.toUpperCase()] || currency || '';
+      return `${symbol}${amount?.toFixed(2) || '0.00'}`;
+    },
+    formatInterval(interval) {
+      return interval ? `per ${interval}` : '';
+    },
+    formatDate(timestamp) {
+      if (!timestamp) return '';
+      const date = new Date(timestamp * 1000);
+      return date.toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' });
+    },
+    getStatusText(status) {
+      const statusMap = {
+        'trialing': 'Trial',
+        'active': 'Active',
+        'past_due': 'Past Due',
+        'canceled': 'Canceled',
+        'unpaid': 'Unpaid'
+      };
+      return statusMap[status] || status;
+    },
+    getStatusClass(status) {
+      return `status-${status}`;
+    },
+    openCancelModal(subscription) {
+      this.selectedSubscription = subscription;
+      this.showCancelModal = true;
+      this.cancelFeedback = '';
+    },
+    closeCancelModal() {
+      this.showCancelModal = false;
+      this.selectedSubscription = null;
+      this.cancelFeedback = '';
+    },
+    async confirmCancel() {
+      if (!this.selectedSubscription) return;
+
+      // Check if this is a RevenueCat in-app purchase subscription
+      if (this.selectedSubscription.paymentGateway === 'revenuecat') {
+        // Fire event to redirect user to RevenueCat management URL
+        EventBus.$emit('ssoEvent', {
+          name: 'subscriptionCancelled',
+          data: {
+            subscriptionId: this.selectedSubscription.subscriptionId,
+            paymentGateway: this.selectedSubscription.paymentGateway,
+            feedback: this.cancelFeedback
+          }
+        });
+
+        // Close the modal
+        this.closeCancelModal();
+        return;
+      }
+
+      // For other payment gateways (like Stripe), proceed with API cancellation
+      this.loading = true;
+
+      try {
+        // Send cancel request to backend
+        const response = await api(false, 'v2').post('checkout/cancel/' + this.selectedSubscription.subscriptionId, {
+          feedback: this.cancelFeedback
+        });
+
+        if (response.data.success) {
+          // Show success message
+          EventBus.$emit('showToast', {
+            type: 'success',
+            message: 'Subscription canceled successfully'
+          });
+
+          // Refresh account settings to get updated billing info
+          await this.getAccountSettings();
+          this.loadSubscriptions();
+
+          // Close modal
+          this.closeCancelModal();
+        } else {
+          throw new Error(response.data.message || 'Failed to cancel subscription');
+        }
+      } catch (error) {
+        console.error('Error canceling subscription:', error);
+        EventBus.$emit('showToast', {
+          type: 'error',
+          message: error.response?.data?.message || 'Failed to cancel subscription. Please try again.'
+        });
+      } finally {
+        this.loading = false;
+      }
+    }
   }
 };
 </script>
 
-<style scoped>
-.withBackground {
-  height: 50px;
-}
+<style>
+
 </style>