Working API CHARGING!
This commit is contained in:
807
src/pages/pay/service/pay_service.vue
Executable file
807
src/pages/pay/service/pay_service.vue
Executable file
@@ -0,0 +1,807 @@
|
||||
<!-- src/pages/pay/pay_oil.vue -->
|
||||
<template>
|
||||
<div class="flex">
|
||||
|
||||
<div class="w-full px-4 md:px-10 py-4">
|
||||
<!-- Breadcrumbs & Title -->
|
||||
<div class="text-sm breadcrumbs">
|
||||
<ul>
|
||||
<li><router-link :to="{ name: 'home' }">Home</router-link></li>
|
||||
<!-- Add a link to the customer's profile if the data is available -->
|
||||
<li v-if="customer && customer.id">
|
||||
<router-link :to="{ name: 'customerProfile', params: { id: customer.id } }">
|
||||
{{ customer.customer_first_name }} {{ customer.customer_last_name }}
|
||||
</router-link>
|
||||
</li>
|
||||
<li>Confirm Service Payment</li>
|
||||
</ul>
|
||||
</div>
|
||||
<h1 class="text-3xl font-bold mt-4 border-b border-gray-600 pb-2">
|
||||
Confirm Service Payment #{{ service.id }}
|
||||
</h1>
|
||||
|
||||
<!-- Main Content Grid -->
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 my-6">
|
||||
|
||||
<!-- LEFT COLUMN: Customer and Delivery Details -->
|
||||
<div class="space-y-6">
|
||||
|
||||
<!-- Customer Info Card -->
|
||||
<div class="bg-neutral rounded-lg p-5">
|
||||
<div class="flex justify-between items-center mb-4">
|
||||
<div>
|
||||
<div class="text-xl font-bold">{{ customer.customer_first_name }} {{ customer.customer_last_name }}</div>
|
||||
<div class="text-sm text-gray-400">Account: {{ customer.account_number }}</div>
|
||||
</div>
|
||||
<router-link v-if="customer && customer.id" :to="{ name: 'customerProfile', params: { id: customer.id } }" class="btn btn-secondary btn-sm">
|
||||
View Profile
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<div>{{ customer.customer_address }}</div>
|
||||
<div v-if="customer.customer_apt && customer.customer_apt !== 'None'">Apt: {{ customer.customer_apt }}</div>
|
||||
<div>{{ customer.customer_town }}, {{ customer.customer_state === 0 ? 'MA' : 'RI' }} {{ customer.customer_zip }}</div>
|
||||
<div class="mt-2">{{ customer.customer_phone_number }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Service Details Card -->
|
||||
<div class="bg-neutral rounded-lg p-5">
|
||||
<h3 class="text-xl font-bold mb-4">Service Details</h3>
|
||||
<div class="space-y-3">
|
||||
<div>
|
||||
<div class="font-bold text-sm">Service Type</div>
|
||||
<div class="badge" :class="getServiceTypeColor(service.type_service_call)">
|
||||
{{ getServiceTypeName(service.type_service_call) }}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="font-bold text-sm">Scheduled Date</div>
|
||||
<div>{{ service.scheduled_date ? formatScheduledDate(service.scheduled_date) : 'Not scheduled' }}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="font-bold text-sm">Description</div>
|
||||
<div class="text-sm">{{ service.description || 'No description provided' }}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="font-bold text-sm">Total Cost</div>
|
||||
<div>${{ service.service_cost || '0.00' }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- RIGHT COLUMN: Payment and Pricing Details -->
|
||||
<div class="space-y-6">
|
||||
<!-- Authorize.net Account Status Box -->
|
||||
<div v-if="customer.id" class="bg-base-100 rounded-lg p-4 border">
|
||||
<div class="flex flex-col xl:flex-row xl:items-center xl:justify-between gap-3">
|
||||
<div class="flex items-center gap-3 min-w-0 flex-1">
|
||||
<svg class="w-5 h-5 text-blue-600 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v4a3 3 0 003 3z"/>
|
||||
</svg>
|
||||
<span v-if="isLoadingAuthorize" class="text-sm font-medium">
|
||||
<span class="loading loading-dots loading-xs mr-2"></span>
|
||||
Loading...
|
||||
</span>
|
||||
<span v-else-if="authorizeCheck.valid_for_charging" class="text-sm font-medium">
|
||||
Authorize Account ID: {{ customer.auth_net_profile_id }}
|
||||
</span>
|
||||
<span v-else class="text-sm font-medium text-red-600">
|
||||
{{ getAccountStatusMessage() }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex gap-2 flex-shrink-0" v-if="!isLoadingAuthorize">
|
||||
<!-- CREATE ACCOUNT SECTION - Only show when account doesn't exist -->
|
||||
<div v-if="!authorizeCheck.valid_for_charging" class="flex gap-2">
|
||||
<button
|
||||
v-if="credit_cards_count === 0"
|
||||
@click="addCreditCard"
|
||||
class="btn btn-primary btn-sm"
|
||||
>
|
||||
Add Card
|
||||
</button>
|
||||
<button
|
||||
@click="createAuthorizeAccount"
|
||||
:class="['btn btn-sm', credit_cards_count === 0 ? 'btn-disabled' : 'btn-primary']"
|
||||
:disabled="credit_cards_count === 0"
|
||||
v-if="credit_cards_count > 0"
|
||||
>
|
||||
Create Account
|
||||
</button>
|
||||
<button
|
||||
v-else
|
||||
@click="addCreditCard"
|
||||
class="btn btn-secondary btn-sm"
|
||||
>
|
||||
Add Card First
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- DELETE ACCOUNT SECTION - Only show when account exists -->
|
||||
<div v-if="authorizeCheck.valid_for_charging" class="flex gap-2">
|
||||
<button
|
||||
@click="showDeleteAccountModal"
|
||||
class="btn btn-error btn-sm"
|
||||
>
|
||||
Delete Account
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Service Payment Card -->
|
||||
<div class="bg-neutral rounded-lg p-5">
|
||||
<h3 class="text-xl font-bold mb-4">Service Payment</h3>
|
||||
<div class="space-y-4">
|
||||
<!-- Payment Method Selection -->
|
||||
<div>
|
||||
<div class="font-bold text-sm mb-2">Select Payment Method</div>
|
||||
<div class="space-y-2">
|
||||
<!-- Show the selected card if payment is by credit -->
|
||||
<div v-for="card in credit_cards" :key="card.id">
|
||||
<div v-if="card.id === service.payment_card_id" class="bg-base-100 p-3 rounded-md text-sm">
|
||||
<div class="font-mono font-semibold">{{ card.type_of_card }} ending in {{ card.last_four_digits }}</div>
|
||||
<div>{{ card.name_on_card }}</div>
|
||||
<div>Expires: {{ card.expiration_month }}/{{ card.expiration_year }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Service Cost -->
|
||||
<div class="pt-2">
|
||||
<div class="divide-y divide-gray-300">
|
||||
<div class="flex justify-between items-center py-3">
|
||||
<span class="text-lg font-bold">Service Total</span>
|
||||
<span class="text-2xl font-bold text-accent">
|
||||
${{ service.service_cost || '0.00' }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Actions Card -->
|
||||
<div class="bg-neutral rounded-lg p-5">
|
||||
<div class="flex flex-wrap gap-4 justify-between items-center">
|
||||
<!-- Pay Authorize Button -->
|
||||
<button class="btn btn-success" :class="{ 'btn-disabled': !authorizeCheck.valid_for_charging }" :disabled="!authorizeCheck.valid_for_charging" @click="$router.push({ name: 'authorizeServicePreauthCharge', params: { id: $route.params.id } })">
|
||||
Pay Authorize.net
|
||||
</button>
|
||||
<!-- A single confirm button is cleaner -->
|
||||
<button class="btn btn-warning" @click="processServicePayment(1)">
|
||||
Pay Tiger
|
||||
</button>
|
||||
<!-- Edit Service button removed due to no route defined -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Delete Account Confirmation Modal -->
|
||||
<div class="modal" :class="{ 'modal-open': isDeleteAccountModalVisible }">
|
||||
<div class="modal-box">
|
||||
<h3 class="font-bold text-lg">Confirm Account Deletion</h3>
|
||||
<p class="py-4">This will permanently delete the Authorize.net account and remove all payment profiles. This action cannot be undone.</p>
|
||||
<div class="modal-action">
|
||||
<button @click="deleteAccount" class="btn btn-error">Delete Account</button>
|
||||
<button @click="isDeleteAccountModalVisible = false" class="btn">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Create Account Progress Modal -->
|
||||
<div class="modal" :class="{ 'modal-open': isCreateAccountModalVisible }">
|
||||
<div class="modal-box">
|
||||
<h3 class="font-bold text-lg">Creating Authorize.net Account</h3>
|
||||
<div class="py-4 flex flex-col items-center">
|
||||
<div v-if="isCreatingAccount" class="text-center">
|
||||
<span class="text-lg mb-3">Setting up your payment account...</span>
|
||||
<div class="loading loading-spinner loading-lg text-primary mb-3"></div>
|
||||
<p class="text-sm text-gray-600">Please wait while we create your Authorize.net customer profile.</p>
|
||||
</div>
|
||||
<div v-else class="text-center">
|
||||
<div class="text-success mb-3">
|
||||
<svg class="w-12 h-12 mx-auto mb-2" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
<p class="text-lg font-semibold mb-2">Account Created Successfully!</p>
|
||||
<div class="bg-base-200 p-3 rounded-lg mb-4">
|
||||
<p class="text-sm mb-1">Authorize.net Profile ID:</p>
|
||||
<p class="font-mono font-bold text-success">{{ createdProfileId }}</p>
|
||||
</div>
|
||||
<p class="text-sm text-gray-600">Your payment account is now ready for transactions.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Duplicate Account Error Modal -->
|
||||
<div class="modal" :class="{ 'modal-open': isDuplicateErrorModalVisible }">
|
||||
<div class="modal-box">
|
||||
<h3 class="font-bold text-lg text-error">⚠️ Duplicate Account Detected</h3>
|
||||
<div class="py-4 space-y-4">
|
||||
<div class="text-center">
|
||||
<svg class="w-16 h-16 mx-auto mb-4 text-warning" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"/>
|
||||
</svg>
|
||||
<p class="text-lg font-semibold">Duplicate Account in Authorize.net</p>
|
||||
<p class="text-sm text-gray-600 mt-2">
|
||||
A duplicate account was found in your Authorize.net merchant account.
|
||||
</p>
|
||||
<p class="text-sm text-gray-600 mt-2">
|
||||
Customer ID: <strong>{{ customer.id }}</strong>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-base-200 p-4 rounded-lg">
|
||||
<h4 class="font-semibold mb-2 text-warning">Action Required:</h4>
|
||||
<ul class="list-disc list-inside text-sm space-y-1">
|
||||
<li>Manually check your Authorize.net merchant dashboard</li>
|
||||
<li>Review existing customer profiles</li>
|
||||
<li>Contact support for linkage if needed</li>
|
||||
</ul>
|
||||
<p class="text-xs text-gray-500 mt-2">
|
||||
Inconsistency between your system and Authorize.net detected.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="text-center pt-2">
|
||||
<p class="text-xs text-gray-500">
|
||||
This profile may have been created previously and needs manual linking.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-action">
|
||||
<button class="btn btn-primary" @click="hideDuplicateErrorModal()">
|
||||
Acknowledge
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Footer />
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue'
|
||||
import axios from 'axios'
|
||||
import authHeader from '../../../services/auth.header'
|
||||
import Header from '../../../layouts/headers/headerauth.vue'
|
||||
import SideBar from '../../../layouts/sidebar/sidebar.vue'
|
||||
import Footer from '../../../layouts/footers/footer.vue'
|
||||
|
||||
import useValidate from "@vuelidate/core";
|
||||
import { notify } from "@kyvg/vue3-notification"
|
||||
import { required } from "@vuelidate/validators";
|
||||
|
||||
export default defineComponent({
|
||||
name: 'PayService',
|
||||
|
||||
components: {
|
||||
Header,
|
||||
SideBar,
|
||||
Footer,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
v$: useValidate(),
|
||||
loaded: false,
|
||||
user: {
|
||||
user_id: 0,
|
||||
},
|
||||
service: {
|
||||
id: 0,
|
||||
scheduled_date: '',
|
||||
customer_id: 0,
|
||||
customer_name: '',
|
||||
customer_address: '',
|
||||
customer_town: '',
|
||||
type_service_call: 0,
|
||||
description: '',
|
||||
service_cost: '',
|
||||
payment_card_id: 0,
|
||||
},
|
||||
serviceParts: null as any,
|
||||
credit_cards: [
|
||||
{
|
||||
id: 0,
|
||||
name_on_card: '',
|
||||
main_card: false,
|
||||
card_number: '',
|
||||
expiration_month: '',
|
||||
type_of_card: '',
|
||||
last_four_digits: '',
|
||||
expiration_year: '',
|
||||
security_number: '',
|
||||
|
||||
}
|
||||
],
|
||||
|
||||
stripe: null,
|
||||
customer: {
|
||||
id: 0,
|
||||
user_id: 0,
|
||||
customer_first_name: '',
|
||||
customer_last_name: '',
|
||||
customer_town: '',
|
||||
customer_address: '',
|
||||
customer_state: 0,
|
||||
customer_zip: '',
|
||||
customer_apt: '',
|
||||
customer_home_type: 0,
|
||||
customer_phone_number: '',
|
||||
account_number: '',
|
||||
auth_net_profile_id: null,
|
||||
},
|
||||
pricing: {
|
||||
price_from_supplier: 0,
|
||||
price_for_customer: 0,
|
||||
price_for_employee: 0,
|
||||
price_same_day: 0,
|
||||
price_prime: 0,
|
||||
price_emergency: 0,
|
||||
date: "",
|
||||
},
|
||||
promo_active: false,
|
||||
promo: {
|
||||
name_of_promotion: '',
|
||||
description: '',
|
||||
money_off_delivery: 0,
|
||||
text_on_ticket: ''
|
||||
},
|
||||
priceprime: 0,
|
||||
pricesameday: 0,
|
||||
priceemergency: 0,
|
||||
total_amount: 0,
|
||||
discount: 0,
|
||||
total_amount_after_discount: 0,
|
||||
credit_cards_count: 0,
|
||||
isLoadingAuthorize: true,
|
||||
authorizeCheck: { profile_exists: false, has_payment_methods: false, missing_components: [] as string[], valid_for_charging: false },
|
||||
isDeleteAccountModalVisible: false,
|
||||
isCreateAccountModalVisible: false,
|
||||
isCreatingAccount: false,
|
||||
createdProfileId: '',
|
||||
isDuplicateErrorModalVisible: false,
|
||||
}
|
||||
},
|
||||
validations() {
|
||||
return {
|
||||
CreateServiceOrderForm: {
|
||||
basicInfo: {
|
||||
description: { required },
|
||||
service_cost: { required },
|
||||
},
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.userStatus()
|
||||
|
||||
},
|
||||
watch: {
|
||||
$route() {
|
||||
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.getServiceOrder(this.$route.params.id)
|
||||
this.getServicePartsForCustomer();
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
userStatus() {
|
||||
let path = import.meta.env.VITE_BASE_URL + '/auth/whoami';
|
||||
axios({
|
||||
method: 'get',
|
||||
url: path,
|
||||
withCredentials: true,
|
||||
headers: authHeader(),
|
||||
})
|
||||
.then((response: any) => {
|
||||
if (response.data.ok) {
|
||||
this.user = response.data.user;
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
getServiceOrder(service_id: any) {
|
||||
let path = import.meta.env.VITE_BASE_URL + "/service/" + service_id;
|
||||
axios({
|
||||
method: "get",
|
||||
url: path,
|
||||
withCredentials: true,
|
||||
headers: authHeader(),
|
||||
})
|
||||
.then((response: any) => {
|
||||
let serviceData;
|
||||
if (response.data) {
|
||||
// Handle different API response structures
|
||||
if (response.data.service) {
|
||||
// API returns {ok: true, service: {...}} structure
|
||||
serviceData = response.data.service;
|
||||
} else if (Array.isArray(response.data)) {
|
||||
serviceData = response.data[0]; // Array response
|
||||
} else {
|
||||
serviceData = response.data; // Direct object response
|
||||
}
|
||||
|
||||
if (serviceData && serviceData.id) {
|
||||
this.service = {
|
||||
id: serviceData.id,
|
||||
scheduled_date: serviceData.scheduled_date,
|
||||
customer_id: serviceData.customer_id,
|
||||
customer_name: serviceData.customer_name,
|
||||
customer_address: serviceData.customer_address,
|
||||
customer_town: serviceData.customer_town,
|
||||
type_service_call: serviceData.type_service_call,
|
||||
description: serviceData.description,
|
||||
service_cost: serviceData.service_cost,
|
||||
payment_card_id: serviceData.payment_card_id || 0,
|
||||
};
|
||||
|
||||
// Fetch related data
|
||||
this.getCustomer(this.service.customer_id);
|
||||
this.getCreditCards(this.service.customer_id);
|
||||
this.getCreditCardsCount(this.service.customer_id);
|
||||
this.getServicePartsForCustomer();
|
||||
} else {
|
||||
console.error("API Error: Invalid service data received:", serviceData);
|
||||
notify({
|
||||
title: "Error",
|
||||
text: "Invalid service data received",
|
||||
type: "error",
|
||||
});
|
||||
}
|
||||
} else {
|
||||
console.error("API Error: No response data received");
|
||||
notify({
|
||||
title: "Error",
|
||||
text: "Could not get service data",
|
||||
type: "error",
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch((error: any) => {
|
||||
console.error("API Error in getServiceOrder:", error);
|
||||
console.error("Error details:", error.response?.data || error.message);
|
||||
notify({
|
||||
title: "Error",
|
||||
text: "Could not get service data",
|
||||
type: "error",
|
||||
});
|
||||
});
|
||||
},
|
||||
getServicePartsForCustomer() {
|
||||
if (!this.service.customer_id) return;
|
||||
|
||||
let path = `${import.meta.env.VITE_BASE_URL}/service/parts/customer/${this.service.customer_id}`;
|
||||
axios.get(path, { headers: authHeader() })
|
||||
.then((response: any) => {
|
||||
this.serviceParts = response.data;
|
||||
})
|
||||
.catch((error: any) => {
|
||||
console.error("Failed to fetch service parts:", error);
|
||||
this.serviceParts = null;
|
||||
});
|
||||
},
|
||||
getCreditCards(user_id: any) {
|
||||
let path = import.meta.env.VITE_BASE_URL + '/payment/cards/' + user_id;
|
||||
axios({
|
||||
method: 'get',
|
||||
url: path,
|
||||
headers: authHeader(),
|
||||
}).then((response: any) => {
|
||||
|
||||
this.credit_cards = response.data
|
||||
})
|
||||
},
|
||||
getCreditCardsCount(user_id: any) {
|
||||
let path = import.meta.env.VITE_BASE_URL + '/payment/cards/onfile/' + user_id;
|
||||
axios({
|
||||
method: 'get',
|
||||
url: path,
|
||||
headers: authHeader(),
|
||||
}).then((response: any) => {
|
||||
this.credit_cards_count = response.data.cards
|
||||
})
|
||||
},
|
||||
getCustomer(userid: any) {
|
||||
let path = import.meta.env.VITE_BASE_URL + '/customer/' + userid;
|
||||
axios({
|
||||
method: 'get',
|
||||
url: path,
|
||||
headers: authHeader(),
|
||||
}).then((response: any) => {
|
||||
this.customer = response.data
|
||||
this.checkAuthorizeAccount();
|
||||
})
|
||||
},
|
||||
processServicePayment(payment_type: number) {
|
||||
let path = import.meta.env.VITE_BASE_URL + "/payment/service/payment/" + this.service.id + '/' + payment_type;
|
||||
axios({
|
||||
method: "PUT",
|
||||
url: path,
|
||||
})
|
||||
.then((response: any) => {
|
||||
if (response.data.ok) {
|
||||
if (payment_type == 0) {
|
||||
notify({
|
||||
title: "Success",
|
||||
text: "Service marked as cash payment",
|
||||
type: "success",
|
||||
});
|
||||
}
|
||||
if (payment_type == 1) {
|
||||
notify({
|
||||
title: "Success",
|
||||
text: "Service marked as credit card payment",
|
||||
type: "success",
|
||||
});
|
||||
}
|
||||
if (payment_type == 3) {
|
||||
notify({
|
||||
title: "Success",
|
||||
text: "Service marked as check payment",
|
||||
type: "success",
|
||||
});
|
||||
}
|
||||
if (payment_type == 11) {
|
||||
notify({
|
||||
title: "Success",
|
||||
text: "Service payment processed via Authorize.net",
|
||||
type: "success",
|
||||
});
|
||||
}
|
||||
this.$router.push({ name: "ServiceHome" });
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
notify({
|
||||
title: "Error",
|
||||
text: "Could not process service payment",
|
||||
type: "error",
|
||||
});
|
||||
});
|
||||
},
|
||||
async checkAuthorizeAccount() {
|
||||
if (!this.customer.id) return;
|
||||
|
||||
this.isLoadingAuthorize = true;
|
||||
|
||||
try {
|
||||
const path = `${import.meta.env.VITE_AUTHORIZE_URL}/user/check-authorize-account/${this.customer.id}`;
|
||||
const response = await axios.get(path, { headers: authHeader() });
|
||||
this.authorizeCheck = response.data;
|
||||
|
||||
// Check if the API returned an error in the response body
|
||||
if (this.authorizeCheck.missing_components && this.authorizeCheck.missing_components.includes('api_error')) {
|
||||
console.log("API error detected in response, calling cleanup for customer:", this.customer.id);
|
||||
this.cleanupAuthorizeData();
|
||||
return; // Don't set loading to false yet, let cleanup handle it
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Failed to check authorize account:", error);
|
||||
notify({ title: "Error", text: "Could not check payment account status.", type: "error" });
|
||||
// Set default error state
|
||||
this.authorizeCheck = {
|
||||
profile_exists: false,
|
||||
has_payment_methods: false,
|
||||
missing_components: ['api_error'],
|
||||
valid_for_charging: false
|
||||
};
|
||||
// Automatically cleanup the local Authorize.Net data on API error
|
||||
console.log("Calling cleanupAuthorizedData for customer:", this.customer.id);
|
||||
this.cleanupAuthorizeData();
|
||||
} finally {
|
||||
this.isLoadingAuthorize = false;
|
||||
}
|
||||
},
|
||||
async createAuthorizeAccount() {
|
||||
// Show the creating account modal
|
||||
this.isCreatingAccount = true;
|
||||
this.isCreateAccountModalVisible = true;
|
||||
|
||||
try {
|
||||
const path = `${import.meta.env.VITE_AUTHORIZE_URL}/user/create-account/${this.customer.id}`;
|
||||
const response = await axios.post(path, {}, { headers: authHeader() });
|
||||
|
||||
if (response.data.success) {
|
||||
// Update local state
|
||||
this.customer.auth_net_profile_id = response.data.profile_id;
|
||||
this.authorizeCheck.valid_for_charging = true;
|
||||
this.authorizeCheck.profile_exists = true;
|
||||
this.authorizeCheck.has_payment_methods = true;
|
||||
this.authorizeCheck.missing_components = [];
|
||||
this.createdProfileId = response.data.profile_id;
|
||||
|
||||
// Refresh credit cards to get updated payment profile IDs
|
||||
await this.getCreditCards(this.customer.id);
|
||||
|
||||
// Switch modal to success view and close after delay
|
||||
setTimeout(() => {
|
||||
this.isCreatingAccount = false;
|
||||
setTimeout(() => {
|
||||
this.isCreateAccountModalVisible = false;
|
||||
this.createdProfileId = '';
|
||||
|
||||
notify({
|
||||
title: "Success",
|
||||
text: "Authorize.net account created successfully!",
|
||||
type: "success"
|
||||
});
|
||||
}, 3000); // Show success message for 3 seconds
|
||||
}, 1000); // Brief delay to show success animation
|
||||
|
||||
} else {
|
||||
// Hide modal on error
|
||||
this.isCreateAccountModalVisible = false;
|
||||
|
||||
// Check for E00039 duplicate error
|
||||
const errorMessage = response.data.message || response.data.error_detail || "Failed to create Authorize.net account";
|
||||
|
||||
if (response.data.is_duplicate || errorMessage.includes("E00039")) {
|
||||
// Show duplicate account popup
|
||||
setTimeout(() => {
|
||||
this.showDuplicateErrorModal();
|
||||
}, 300);
|
||||
return;
|
||||
} else {
|
||||
// Normal error notification
|
||||
notify({
|
||||
title: "Error",
|
||||
text: errorMessage,
|
||||
type: "error"
|
||||
});
|
||||
}
|
||||
}
|
||||
} catch (error: any) {
|
||||
console.error("Failed to create account:", error);
|
||||
this.isCreateAccountModalVisible = false;
|
||||
this.isCreatingAccount = false;
|
||||
|
||||
// Check for E00039 duplicate error
|
||||
const errorMessage = error.response?.data?.error_detail ||
|
||||
error.response?.data?.detail ||
|
||||
error.response?.data?.message ||
|
||||
error.message || "Failed to create Authorize.net account";
|
||||
|
||||
if (error.response?.data?.is_duplicate || errorMessage.includes("E00039")) {
|
||||
// Show duplicate account popup
|
||||
setTimeout(() => {
|
||||
this.showDuplicateErrorModal();
|
||||
}, 300);
|
||||
return;
|
||||
}
|
||||
|
||||
// Normal error notification
|
||||
notify({
|
||||
title: "Error",
|
||||
text: errorMessage,
|
||||
type: "error"
|
||||
});
|
||||
}
|
||||
},
|
||||
showDeleteAccountModal() {
|
||||
this.isDeleteAccountModalVisible = true;
|
||||
},
|
||||
showDuplicateErrorModal() {
|
||||
this.isDuplicateErrorModalVisible = true;
|
||||
},
|
||||
hideDuplicateErrorModal() {
|
||||
this.isDuplicateErrorModalVisible = false;
|
||||
},
|
||||
addCreditCard() {
|
||||
// Redirect to add card page
|
||||
this.$router.push({ name: 'cardadd', params: { customerId: this.customer.id } });
|
||||
},
|
||||
async deleteAccount() {
|
||||
this.isDeleteAccountModalVisible = false;
|
||||
|
||||
try {
|
||||
const path = `${import.meta.env.VITE_AUTHORIZE_URL}/user/delete-account/${this.customer.id}`;
|
||||
const response = await axios.delete(path, { headers: authHeader() });
|
||||
|
||||
if (response.data.success) {
|
||||
// Update local state
|
||||
this.customer.auth_net_profile_id = null;
|
||||
this.authorizeCheck.valid_for_charging = false;
|
||||
this.authorizeCheck.profile_exists = false;
|
||||
this.authorizeCheck.has_payment_methods = false;
|
||||
|
||||
// Refresh credit cards list (IDs should now be null)
|
||||
this.getCreditCards(this.customer.id);
|
||||
|
||||
notify({
|
||||
title: "Success",
|
||||
text: "Authorize.net account deleted successfully",
|
||||
type: "success"
|
||||
});
|
||||
} else {
|
||||
notify({
|
||||
title: "Warning",
|
||||
text: response.data.message || "Account deletion completed with warnings",
|
||||
type: "warning"
|
||||
});
|
||||
}
|
||||
} catch (error: any) {
|
||||
console.error("Failed to delete account:", error);
|
||||
notify({
|
||||
title: "Error",
|
||||
text: "Failed to delete Authorize.net account",
|
||||
type: "error"
|
||||
});
|
||||
}
|
||||
},
|
||||
async cleanupAuthorizeData() {
|
||||
try {
|
||||
const path = `${import.meta.env.VITE_BASE_URL}/payment/authorize/cleanup/${this.customer.id}`;
|
||||
const response = await axios.post(path, {}, { headers: authHeader() });
|
||||
|
||||
if (response.data.ok) {
|
||||
// Update local state to reflect cleanup
|
||||
this.customer.auth_net_profile_id = null;
|
||||
this.authorizeCheck.valid_for_charging = false;
|
||||
this.authorizeCheck.profile_exists = false;
|
||||
this.authorizeCheck.has_payment_methods = false;
|
||||
|
||||
// Refresh credit cards to reflect null payment profile IDs
|
||||
this.getCreditCards(this.customer.id);
|
||||
|
||||
console.log("Successfully cleaned up Authorize.Net data:", response.data.message);
|
||||
} else {
|
||||
console.error("Failed to cleanup Authorize.Net data:", response.data.error);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error during cleanup:", error);
|
||||
}
|
||||
},
|
||||
getAccountStatusMessage(): string {
|
||||
if (!this.authorizeCheck || !this.authorizeCheck.missing_components) {
|
||||
return 'Account setup incomplete';
|
||||
}
|
||||
|
||||
const missing = this.authorizeCheck.missing_components;
|
||||
if (missing.includes('customer_not_found')) {
|
||||
return 'Customer not found in Authorize.net';
|
||||
} else if (missing.includes('authorize_net_profile')) {
|
||||
return 'No Authorize.net profile configured';
|
||||
} else if (missing.includes('authorize_net_profile_invalid')) {
|
||||
return 'Authorize.net profile is invalid';
|
||||
} else if (missing.includes('payment_method')) {
|
||||
return 'No payment methods configured';
|
||||
} else if (missing.includes('api_error')) {
|
||||
return 'Error checking account status';
|
||||
} else {
|
||||
return 'Account requires setup';
|
||||
}
|
||||
},
|
||||
getServiceTypeName(typeId: number): string {
|
||||
const typeMap: { [key: number]: string } = { 0: 'Tune-up', 1: 'No Heat', 2: 'Fix', 3: 'Tank Install', 4: 'Other' };
|
||||
return typeMap[typeId] || 'Unknown';
|
||||
},
|
||||
getServiceTypeColor(typeId: number): string {
|
||||
const colorMap: { [key: number]: string } = { 0: 'primary', 1: 'error', 2: 'warning', 3: 'info', 4: 'neutral' };
|
||||
return `badge-${colorMap[typeId] || 'neutral'}`;
|
||||
},
|
||||
formatScheduledDate(dateString: string): string {
|
||||
if (!dateString) return 'Not scheduled';
|
||||
return dateString; // Could format with dayjs if needed
|
||||
}
|
||||
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
Reference in New Issue
Block a user