@tapni/auth 1.0.4 → 1.0.6-3.dev

package/src/views/Billing.vue

@@ -0,0 +1,538 @@
+<template>
+    <div class="page-login content-boxed content-boxed-padding">
+        <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%;"/>
+          </i>
+        </a>
+      <div class="subheaderContainer full-top">
+        <!-- Back Button -->
+        <router-link v-if="!isModal" to="/account" class="button gray-button pointer left-button">
+          <img
+              :src="getIcon('arrow-gray-right.svg')"
+              height="20"
+              width="20"
+              class="btn-icon"
+              style="rotate: 180deg;"
+          />
+        </router-link>
+
+        <!-- Centered Text -->
+        <h2 class="center-text" style="flex-grow: 1; text-align: center; margin: 0; font-weight: 600;">
+          {{ssoLang[appLanguage].billing }}
+        </h2>
+      </div>
+
+      <div class="container left-text">
+        <p class="center-text">{{ssoLang[appLanguage].billing_p }}</p>
+
+        <div class="full-top">
+          <!-- 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>
+
+          <!-- 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 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>
+
+              <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>
+
+
+<script>
+import AuthMixin from "../mixins/auth.mixin";
+import {EventBus} from "@/store/event-bus.js";
+import api from "@/services/Api.js";
+
+export default {
+  name: "AuthBilling",
+  mixins: [AuthMixin],
+  props: {
+    payload: {
+      type: Object,
+      default: {}
+    },
+  },
+  data () {
+    return {
+      loading: false,
+      subscriptions: [],
+      showCancelModal: false,
+      selectedSubscription: null,
+      cancelFeedback: ''
+    }
+  },
+  async mounted() {
+    if (!this.isLoggedIn) this.$router.push('/login');
+    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;
+}
+
+.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>

package/src/views/Callback.vue

@@ -1,46 +1,49 @@
 <template>
- <div class="page-login content-boxed content-boxed-padding">
-   <h5 v-if="($route.query.platform ==='android' || $route.query.platform ==='ios') && !isNative" style="text-align: center; width: 80%; margin: 0 auto; margin-top: 260px; ">
-       {{ssoLang[this.appLanguage].you_will_be_redirected}}<br>
-       {{ssoLang[this.appLanguage].if_redirect_not_directly}}, <span @click="inAppRedirect" style="color: blue; cursor: pointer">{{ssoLang[this.appLanguage].click_here}}</span>.</h5>
-   <h4 v-else style="text-align: center; width: 80%; margin: 0 auto; margin-top: 260px; ">{{ssoLang[this.appLanguage].please_wait}}</h4>
- </div>
+	<div class="page-login content-boxed content-boxed-padding">
+		<h5 v-if="($route.query.platform === 'android' || $route.query.platform === 'ios') && !isNative" style="text-align: center; width: 80%; margin: 0 auto; margin-top: 260px">
+			{{ ssoLang[this.appLanguage].you_will_be_redirected }}<br />
+			{{ ssoLang[this.appLanguage].if_redirect_not_directly }}, <span @click="inAppRedirect" style="color: blue; cursor: pointer">{{ ssoLang[this.appLanguage].click_here }}</span
+			>.
+		</h5>
+		<h4 v-else style="text-align: center; width: 80%; margin: 0 auto; margin-top: 260px">{{ ssoLang[this.appLanguage].please_wait }}</h4>
+	</div>
 </template>
 
 <script>
 /* eslint-disable */
-import OktaMixin from "../mixins/okta.mixin";
-import SamlMixin from "../mixins/saml.mixin";
-import AuthMixin from "../mixins/auth.mixin";
+import OktaMixin from '../mixins/okta.mixin';
+import SamlMixin from '../mixins/saml.mixin';
+import AuthMixin from '../mixins/auth.mixin';
 import { sanitizeUrl } from '@braintree/sanitize-url';
 export default {
-  name: "AuthCallback",
-  mixins: [OktaMixin, SamlMixin, AuthMixin],
+	name: 'AuthCallback',
+	mixins: [OktaMixin, SamlMixin, AuthMixin],
 
-  data() {
-    return {
+	data() {
+		return {};
+	},
 
-    };
-  },
-
-  async mounted() {
-    if(this.$route.path === '/callback/auth') {
-        this.exchangeAuthCode({
-            code: this.$route.query.code
-        })
-    }
-    if(this.$route.path === '/callback/okta') return await this.handleOktaRedirect();
-    if(this.$route.path === '/callback/saml') return await this.handleSamlRedirect();
-  },
-  methods: {
-    inAppRedirect() {
-      let url = sanitizeUrl(location.href);
-      url = url.replace('http', 'tapni')
-      url = url.replace('https', 'tapni')
-      return window.open(url);
+	async mounted() {
+		if (this.$route.path === '/callback/redirect') {
+      return location.href = atob(this.$route.query.uri);
     }
-  },
-
+		if (this.$route.path === '/callback/auth') {
+			this.exchangeAuthCode({
+				code: this.$route.query.code,
+        code_verifier: this.$route.query.code_verifier
+			});
+		}
+		if (this.$route.path === '/callback/okta') return await this.handleOktaRedirect();
+		if (this.$route.path === '/callback/saml') return await this.handleSamlRedirect();
+	},
+	methods: {
+		inAppRedirect() {
+			let url = sanitizeUrl(location.href);
+			url = url.replace('http', 'tapni');
+			url = url.replace('https', 'tapni');
+			return window.open(url);
+		}
+	}
 };
 </script>
 

package/src/views/CustomApp.vue

@@ -7,7 +7,7 @@
         </a>
       <div class="subheaderContainer full-top">
         <!-- Back Button -->
-        <router-link to="/account" class="button gray-button pointer left-button">
+        <router-link v-if="!isModal" to="/apps" class="button gray-button pointer left-button">
           <img
               :src="getIcon('arrow-gray-right.svg')"
               height="20"
@@ -19,7 +19,7 @@
 
         <!-- Centered Text -->
         <h2 class="center-text" style="flex-grow: 1; text-align: center; margin: 0; font-weight: 600;">
-          {{$route.params.app }}
+          {{ app.t_apps_name }}
         </h2>
       </div>
 
@@ -27,43 +27,7 @@
         <p class="center-text">{{ssoLang[appLanguage].apps_p }}</p>
 
         <div class="full-top">
-          <h3 v-if="false" class="full-top bold small-bottom">{{ssoLang[appLanguage].apps_my}}</h3>
 
-          <router-link to="/apps/tapni" class="settingRow">
-            <div class="firstRow">
-              <img
-                  :src="getIcon('tapni-logo-small-black.png')"
-                  class="withBackground"
-              />
-              <h4>Tapni</h4>
-
-              <img :src="getIcon('arrow-gray-right.svg')" />
-            </div>
-          </router-link>
-
-          <router-link to="/apps/mailsign" class="settingRow half-top">
-            <div class="firstRow">
-              <img
-                  :src="getIcon('app-logo-mailsign.svg')"
-                  class="withBackground"
-              />
-              <h4>MailSign</h4>
-
-              <img :src="getIcon('arrow-gray-right.svg')" />
-            </div>
-          </router-link>
-
-          <router-link v-if="false" to="/apps/qrcodetoolkit" class="settingRow half-top">
-            <div class="firstRow">
-              <img
-                  :src="getIcon('app-logo-qrcodetoolkit.svg')"
-                  class="withBackground"
-              />
-              <h4>QRCode Toolkit</h4>
-
-              <img :src="getIcon('arrow-gray-right.svg')" />
-            </div>
-          </router-link>
         </div>
       </div>
     </div>
@@ -73,9 +37,10 @@
 <script>
 import AuthMixin from "../mixins/auth.mixin";
 import {EventBus} from "@/store/event-bus.js";
+import AuthService from "@/services/AuthService.js";
 
 export default {
-  name: "AuthSecurity",
+  name: "AuthCustomApp",
   mixins: [AuthMixin],
   props: {
     payload: {
@@ -86,10 +51,20 @@ export default {
   data () {
     return {
       loading: false,
+      app: {}
     }
   },
   async mounted() {
     if (!this.isLoggedIn) this.$router.push('/login');
+
+    const response = await AuthService.getRecordById({
+      id: this.$route.params.app,
+      query: {
+        fields: ['t_apps_name', 't_apps_icon', 't_apps_url'],
+        relations: []
+      }
+    })
+    this.app = response.data.record;
   },
   methods: {
     close () {