@tapni/auth 1.0.5 → 1.0.6-3.dev

package/src/store/store.js

@@ -1,8 +1,8 @@
-import { createStore } from 'vuex'
-import auth from './auth.js'
+import { createStore } from 'vuex';
+import auth from './auth.js';
 
 export default createStore({
-  modules: {
-    auth
-  },
-})
+	modules: {
+		auth
+	}
+});

package/src/views/Account.vue

@@ -2,7 +2,7 @@
   <div class="page-login content-boxed content-boxed-padding center-text" style="margin-top: -1px; overflow: hidden; border: solid 0px #ffffff;">
     <br>
     <img v-if="false" :src="account.photo" class="user-photo margin-center" style="max-width: 110px;" alt="">
-    <h1 class="bold full-top no-bottom center-text">{{ssoLang[appLanguage].welcome_account}}</h1>
+    <h1 class="bold full-top no-bottom center-text text-[24px]">{{ssoLang[appLanguage].welcome_account}}</h1>
     <p class="full-bottom half-top center-text font-16">{{account.email}}</p>
 
     <div v-if="display !== 'npm' && false" class="full-top full-bottom">
@@ -79,7 +79,19 @@
         </div>
       </div>
 
-      <router-link to="/general" class="settingRow">
+      <div v-if="isModal" class="settingRow" @click="$emit('update:viewProp', 'AuthGeneral')">
+        <div class="firstRow">
+          <img
+              :src="getIcon('user-black.svg')"
+              class="withBackground"
+          />
+          <h4>{{ssoLang[appLanguage].general }}</h4>
+
+          <img :src="getIcon('arrow-gray-right.svg')" />
+        </div>
+      </div>
+
+      <router-link v-else to="/general" class="settingRow">
         <div class="firstRow">
           <img
               :src="getIcon('user-black.svg')"
@@ -91,7 +103,19 @@
         </div>
       </router-link>
 
-      <router-link to="/security" class="settingRow">
+      <div v-if="isModal" class="settingRow" @click="$emit('update:viewProp', 'AuthSecurity')">
+        <div class="firstRow">
+          <img
+              :src="getIcon('shield-black.svg')"
+              class="withBackground"
+          />
+          <h4>{{ssoLang[appLanguage].security }}</h4>
+
+          <img :src="getIcon('arrow-gray-right.svg')" />
+        </div>
+      </div>
+
+      <router-link v-else to="/security" class="settingRow">
         <div class="firstRow">
           <img
               :src="getIcon('shield-black.svg')"
@@ -103,7 +127,7 @@
         </div>
       </router-link>
 
-      <router-link to="/apps" class="settingRow">
+      <router-link v-if="false" to="/apps" class="settingRow">
         <div class="firstRow">
           <img
               :src="getIcon('apps-black.svg')"
@@ -128,7 +152,7 @@
       </router-link>
 
 
-      <div class="settingRow" @click="logoutAccount">
+      <div v-if="!isModal" class="settingRow" @click="logoutAccount">
         <div class="firstRow">
           <img
               :src="getIcon('logout-red.svg')"
@@ -159,6 +183,12 @@ import { EventBus } from "../store/event-bus.js";
 import CONSTANTS from "../store/constants.js";
 export default {
   mixins: [AuthMixin],
+  props: {
+    isModal: {
+      type: Boolean,
+      default: false
+    }
+  },
   data () {
     return {
       expanded: false,
@@ -174,17 +204,15 @@ export default {
     if (!this.isLoggedIn) {
       return this.$router.push('/');
     }
-    this.getAccountSettings();
+    await this.getAccountSettings();
   },
   methods: {
     continueTo (realm) {
-      console.log('continue to ' + realm);
     },
     addAccount () {
       this.$router.push('/login');
     },
     switchAccount (username) {
-      console.log('switch', username);
     },
     toggleLanguageModal () {
       EventBus.$emit('toggleSSOLanguageModal')

package/src/views/Billing.vue

@@ -27,23 +27,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 +126,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,38 +140,132 @@ 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>
@@ -105,4 +274,265 @@ export default {
 .withBackground {
   height: 50px;
 }
+
+.no-subscriptions {
+  padding: 40px 20px;
+}
+
+.gray-text {
+  color: #666;
+  font-size: 16px;
+}
+
+.subscription-card {
+  background: #fff;
+  border: 1px solid #e0e0e0;
+  border-radius: 12px;
+  padding: 20px;
+  margin-bottom: 16px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+}
+
+.subscription-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 16px;
+  padding-bottom: 16px;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.subscription-info {
+  flex: 1;
+}
+
+.subscription-name {
+  font-size: 20px;
+  font-weight: 600;
+  margin: 0 0 8px 0;
+  color: #000;
+}
+
+.subscription-status {
+  display: inline-block;
+  padding: 4px 12px;
+  border-radius: 12px;
+  font-size: 12px;
+  font-weight: 600;
+  text-transform: uppercase;
+}
+
+.status-trialing {
+  background: #e3f2fd;
+  color: #1976d2;
+}
+
+.status-active {
+  background: #e8f5e9;
+  color: #388e3c;
+}
+
+.status-past_due {
+  background: #fff3e0;
+  color: #f57c00;
+}
+
+.status-canceled {
+  background: #ffebee;
+  color: #d32f2f;
+}
+
+.subscription-details {
+  margin-bottom: 16px;
+}
+
+.detail-row {
+  display: flex;
+  justify-content: space-between;
+  padding: 8px 0;
+  font-size: 15px;
+}
+
+.detail-label {
+  color: #666;
+  font-weight: 500;
+}
+
+.detail-value {
+  color: #000;
+  font-weight: 600;
+}
+
+.subscription-actions {
+  display: flex;
+  justify-content: flex-end;
+  padding-top: 16px;
+  border-top: 1px solid #f0f0f0;
+}
+
+.cancel-button {
+  padding: 10px 20px;
+  background: #fff;
+  color: #d32f2f;
+  border: 1px solid #d32f2f;
+  border-radius: 8px;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.cancel-button:hover:not(:disabled) {
+  background: #d32f2f;
+  color: #fff;
+}
+
+.cancel-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Modal Styles */
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 9999;
+  padding: 20px;
+}
+
+.modal-content {
+  background: #fff;
+  border-radius: 16px;
+  width: 100%;
+  max-width: 500px;
+  max-height: 90vh;
+  overflow-y: auto;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
+}
+
+.modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 24px;
+  border-bottom: 1px solid #e0e0e0;
+}
+
+.modal-header h3 {
+  margin: 0;
+  font-size: 20px;
+  font-weight: 600;
+  color: #000;
+}
+
+.close-button {
+  background: none;
+  border: none;
+  font-size: 28px;
+  color: #666;
+  cursor: pointer;
+  padding: 0;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  transition: background 0.2s;
+}
+
+.close-button:hover {
+  background: #f0f0f0;
+}
+
+.modal-body {
+  padding: 24px;
+}
+
+.modal-text {
+  font-size: 16px;
+  line-height: 1.5;
+  color: #333;
+  margin-bottom: 24px;
+}
+
+.feedback-section {
+  margin-top: 20px;
+}
+
+.feedback-label {
+  display: block;
+  font-size: 14px;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 8px;
+}
+
+.feedback-textarea {
+  width: 100%;
+  padding: 12px;
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+  font-size: 14px;
+  font-family: inherit;
+  resize: vertical;
+  transition: border-color 0.2s;
+}
+
+.feedback-textarea:focus {
+  outline: none;
+  border-color: #1976d2;
+}
+
+.modal-footer {
+  display: flex;
+  gap: 12px;
+  padding: 20px 24px;
+  border-top: 1px solid #e0e0e0;
+  justify-content: flex-end;
+}
+
+.button-secondary {
+  padding: 12px 24px;
+  background: #fff;
+  color: #333;
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.button-secondary:hover {
+  background: #f5f5f5;
+}
+
+.button-danger {
+  padding: 12px 24px;
+  background: #d32f2f;
+  color: #fff;
+  border: none;
+  border-radius: 8px;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.button-danger:hover:not(:disabled) {
+  background: #b71c1c;
+}
+
+.button-danger:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
 </style>