Eamco/eamco_office_frontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Working API CHARGING!

Browse Source
This commit is contained in:
Edwin Eames
2025-09-20 15:33:25 -04:00
parent b77e5b4b9d
commit 279f0d9deb
10 changed files with 1794 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/pages/customer/profile/profile.vue
View File

@@ -140,7 +140,7 @@
<CreditCards <CreditCards
:cards="credit_cards" :cards="credit_cards"
:count="credit_cards_count" :count="credit_cards_count"
:user_id="customer.user_id || 0" :user_id="customer.id"
:auth_net_profile_id="customer.auth_net_profile_id" :auth_net_profile_id="customer.auth_net_profile_id"
@edit-card="editCard" @edit-card="editCard"
@remove-card="removeCard" @remove-card="removeCard"
@@ -1025,7 +1025,7 @@ onSubmitSocial(commentText: string) {
}, },
addCreditCard() { addCreditCard() {
// Redirect to add card page // Redirect to add card page
this.$router.push({ name: 'cardadd', params: { customerId: this.customer.id } }); this.$router.push({ name: 'cardadd', params: { id: this.customer.id } });
}, },
showDeleteAccountModal() { showDeleteAccountModal() {
this.isDeleteAccountModalVisible = true; this.isDeleteAccountModalVisible = true;

25
src/pages/delivery/viewstatus/todaysdeliveries.vue
View File

@@ -44,7 +44,7 @@
<tr v-for="oil in deliveries" :key="oil.id" class="hover:bg-blue-600 hover:text-white"> <tr v-for="oil in deliveries" :key="oil.id" class="hover:bg-blue-600 hover:text-white">
<td>{{ oil.id }}</td> <td>{{ oil.id }}</td>
<td> <td>
<router-link :to="{ name: 'customerProfile', params: { id: oil.customer_id } }" class="link link-hover"> <router-link :to="{ name: 'customerProfile', params: { id: oil.customer_id } }" class="link link-hover hover:text-green-500">
{{ oil.customer_name }} {{ oil.customer_name }}
</router-link> </router-link>
</td> </td>
@@ -230,16 +230,19 @@ export default defineComponent({
}, },
get_oil_orders(page: any) { mod: (date: any) => new Date (date).getTime(),
let path = import.meta.env.VITE_BASE_URL + '/delivery/outfordelivery/' + page; get_oil_orders(page: any) {
axios({ let path = import.meta.env.VITE_BASE_URL + '/delivery/outfordelivery/' + page;
method: 'get', axios({
url: path, method: 'get',
headers: authHeader(), url: path,
}).then((response: any) => { headers: authHeader(),
this.deliveries = response.data }).then((response: any) => {
}) this.deliveries = response.data
}, // Sort deliveries by Delivery # (id) in descending order
this.deliveries.sort((a, b) => b.id - a.id);
})
},
deleteCall(delivery_id: any) { deleteCall(delivery_id: any) {
let path = import.meta.env.VITE_BASE_URL + '/delivery/delete/' + delivery_id; let path = import.meta.env.VITE_BASE_URL + '/delivery/delete/' + delivery_id;

45
src/pages/pay/oil/authorize_preauthcharge.vue
View File

@@ -117,7 +117,7 @@
</router-link> </router-link>
<button <button
@click="handlePreauthorize" @click="handlePreauthorize"
class="btn btn-warning" class="btn btn-success"
:disabled="loading || !chargeAmount" :disabled="loading || !chargeAmount"
> >
<span v-if="loading && action === 'preauthorize'" class="loading loading-spinner loading-sm"></span> <span v-if="loading && action === 'preauthorize'" class="loading loading-spinner loading-sm"></span>
@@ -125,7 +125,7 @@
</button> </button>
<button <button
@click="handleChargeNow" @click="handleChargeNow"
class="btn btn-primary" class="btn btn-warning text-black"
:disabled="loading || !chargeAmount" :disabled="loading || !chargeAmount"
> >
<span v-if="loading && action === 'charge'" class="loading loading-spinner loading-sm"></span> <span v-if="loading && action === 'charge'" class="loading loading-spinner loading-sm"></span>
@@ -137,6 +137,29 @@
</div> </div>
</div> </div>
</div> </div>
<!-- Charge Confirmation Modal -->
<div class="modal" :class="{ 'modal-open': isChargeConfirmationModalVisible }">
<div class="modal-box">
<h3 class="font-bold text-lg text-warning">⚠️ Warning: Charge Now</h3>
<p class="py-4">
You are about to <strong>immediately charge</strong> this customer's card
for <strong>${{ chargeAmount.toFixed(2) }}</strong>.
<br><br>
This action is <strong>not reversible</strong> and will debit the customer's account immediately.
<br><br>
Are you sure you want to proceed with the charge?
</p>
<div class="modal-action">
<button @click="proceedWithCharge" class="btn btn-warning">
Yes, Charge Now
</button>
<button @click="cancelCharge" class="btn btn-ghost">
Cancel
</button>
</div>
</div>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
@@ -157,6 +180,7 @@ export default defineComponent({
action: '', // 'preauthorize' or 'charge' action: '', // 'preauthorize' or 'charge'
error: '', error: '',
success: '', success: '',
isChargeConfirmationModalVisible: false,
user: { user: {
user_id: 0, user_id: 0,
}, },
@@ -517,9 +541,26 @@ export default defineComponent({
}, },
async handleChargeNow() { async handleChargeNow() {
if (!this.selectedCard) {
this.error = 'No credit card found for this customer'
return
}
if (!this.chargeAmount || this.chargeAmount <= 0) {
this.error = 'Please enter a valid charge amount'
return
}
this.isChargeConfirmationModalVisible = true
},
async proceedWithCharge() {
this.isChargeConfirmationModalVisible = false
await this.processPayment('charge') await this.processPayment('charge')
}, },
cancelCharge() {
this.isChargeConfirmationModalVisible = false
},
async processPayment(actionType: string) { async processPayment(actionType: string) {
if (!this.selectedCard) { if (!this.selectedCard) {
this.error = 'No credit card found for this customer' this.error = 'No credit card found for this customer'

16
src/pages/pay/routes.ts
View File

@@ -3,6 +3,8 @@
import PayOil from './oil/pay_oil.vue'; import PayOil from './oil/pay_oil.vue';
import AuthorizePreauthCharge from './oil/authorize_preauthcharge.vue'; import AuthorizePreauthCharge from './oil/authorize_preauthcharge.vue';
import CaptureAuthorize from './oil/capture_authorize.vue'; import CaptureAuthorize from './oil/capture_authorize.vue';
import PayService from './service/pay_service.vue';
import AuthorizeServicePreauthCharge from './service/authorize_preauthcharge.vue';
import ChargeServiceAuthorize from './service/capture_authorize.vue'; import ChargeServiceAuthorize from './service/capture_authorize.vue';
const payRoutes = [ const payRoutes = [
@@ -17,11 +19,25 @@ const payRoutes = [
name: 'authorizePreauthCharge', name: 'authorizePreauthCharge',
component: AuthorizePreauthCharge, component: AuthorizePreauthCharge,
}, },
// This is for oil delivery
{ {
path: '/pay/capture/authorize/:id', path: '/pay/capture/authorize/:id',
name: 'captureAuthorize', name: 'captureAuthorize',
component: CaptureAuthorize, component: CaptureAuthorize,
}, },
{
path: '/pay/service/:id',
name: 'payService',
component: PayService,
},
{
path: '/pay/service/authorize/:id',
name: 'authorizeServicePreauthCharge',
component: AuthorizeServicePreauthCharge,
},
// this is for service
{ {
path: '/pay/service/capture/authorize/:id', path: '/pay/service/capture/authorize/:id',
name: 'chargeServiceAuthorize', name: 'chargeServiceAuthorize',

536
src/pages/pay/service/authorize_preauthcharge.vue Normal file
View File

@@ -0,0 +1,536 @@
<!-- src/pages/pay/oil/authorize_preauthcharge.vue -->
<template>
<div class="flex">
<!-- Main Content -->
<div class="flex-1 px-8 py-6">
<!-- Breadcrumbs & Header -->
<div class="text-sm breadcrumbs mb-6">
<ul>
<li><router-link :to="{ name: 'home' }">Home</router-link></li>
<li><router-link :to="{ name: 'payService', params: { id: serviceId } }">Payment Confirmation</router-link></li>
<li>Payment Authorization</li>
</ul>
</div>
<!-- 2x2 Grid Layout -->
<div class="max-w-6xl">
<h1 class="text-3xl font-bold mb-8">Payment Authorization Authorize.net</h1>
<!-- Top Row: Charge Breakdown and Payment Method -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
<!-- Service Details -->
<div class="bg-base-100 rounded-lg p-6">
<h3 class="text-lg font-semibold mb-4">Service Details</h3>
<div class="space-y-3">
<div class="flex justify-between">
<span>Service Type:</span>
<span class="badge" :class="getServiceTypeColor(service.type_service_call)">
{{ getServiceTypeName(service.type_service_call) }}
</span>
</div>
<div class="flex justify-between">
<span>Scheduled Date:</span>
<span>{{ service.scheduled_date ? formatScheduledDate(service.scheduled_date) : 'Not scheduled' }}</span>
</div>
<div class="flex flex-col space-y-2">
<span><strong>Description:</strong></span>
<div class="bg-base-200 p-2 rounded text-sm">{{ service.description || 'No description provided' }}</div>
</div>
<hr class="my-3">
<div class="flex justify-between font-bold text-lg">
<span>Service Cost:</span>
<span>${{ service.service_cost || '0.00' }}</span>
</div>
</div> <!-- close space-y-3 -->
</div> <!-- close bg-base-100 -->
<!-- Credit Card Selection -->
<div class="bg-base-100 rounded-lg p-6">
<h3 class="text-lg font-semibold mb-4">Payment Method</h3>
<div v-if="credit_cards.length > 1" class="space-y-2">
<div v-for="card in credit_cards" :key="card.id"
@click="selectCard(card.id)"
:class="[
'p-3 rounded-md cursor-pointer border-2 transition-all duration-200',
selectedCardId === card.id || (!selectedCardId && selectedCard && selectedCard.id === card.id)
? 'bg-primary text-primary-content border-primary'
: 'bg-base-200 hover:bg-base-300 border-transparent'
]">
<div class="flex justify-between items-center mb-1">
<div class="font-semibold">{{ card.type_of_card }}</div>
<div class="flex gap-2">
<div v-if="card.main_card" class="badge badge-outline badge-sm">Primary</div>
<div v-if="selectedCardId === card.id || (!selectedCardId && selectedCard && selectedCard.id === card.id)"
class="w-3 h-3 bg-current rounded-full"></div>
</div>
</div>
<div class="font-mono text-sm">
<div> **** **** **** {{ card.last_four_digits }}</div>
<div>{{ card.name_on_card }}</div>
<div>Expires: {{ card.expiration_month }}/{{ card.expiration_year }}</div>
</div>
</div>
</div>
<div v-else-if="credit_cards.length === 1" class="bg-base-200 p-4 rounded-md">
<div class="flex justify-between items-center mb-2">
<div class="font-semibold">{{ credit_cards[0].type_of_card }}</div>
<div v-if="credit_cards[0].main_card" class="badge badge-primary">Primary</div>
</div>
<div class="font-mono text-sm">
<div> **** **** **** {{ credit_cards[0].last_four_digits }}</div>
<div>{{ credit_cards[0].name_on_card }}</div>
<div>Expires: {{ credit_cards[0].expiration_month }}/{{ credit_cards[0].expiration_year }}</div>
</div>
</div>
<div v-else class="text-gray-500 p-4">
No payment methods available
</div>
</div>
</div>
<!-- Error/Success Messages -->
<div class="mb-6">
<div v-if="error" class="alert alert-error">
<span>{{ error }}</span>
</div>
<div v-if="success" class="alert alert-success">
<span>{{ success }}</span>
</div>
</div>
<!-- Bottom Section: Action Buttons -->
<div class="bg-base-100 rounded-lg p-6">
<div class="flex flex-col lg:flex-row lg:items-center gap-6">
<!-- Charge Amount Input - Always visible -->
<div class="flex-1">
<h3 class="text-lg font-semibold mb-2">Charge/Preauthorize Amount</h3>
<div class="form-control">
<div class="relative">
<span class="absolute left-3 top-1/2 transform -translate-y-1/2 text-sm z-10">$</span>
<input
id="chargeAmountInput"
v-model="chargeAmount"
type="number"
step="0.01"
class="input input-bordered input-sm w-full pl-6"
placeholder="0.00"
:disabled="loading"
min="0.01"
autofocus
/>
</div>
</div>
</div>
<!-- Action Buttons -->
<div class="flex gap-3 mt-4">
<router-link :to="{ name: 'payService', params: { id: serviceId } }">
<button class="btn btn-ghost">Cancel</button>
</router-link>
<button
@click="handlePreauthorize"
class="btn btn-success"
:disabled="loading || chargeAmount <= 0 || isNaN(Number(chargeAmount))"
>
<span v-if="loading && action === 'preauthorize'" class="loading loading-spinner loading-sm"></span>
Preauthorize
</button>
<button
@click="handleChargeNow"
class="btn btn-warning"
:disabled="loading || chargeAmount <= 0 || isNaN(Number(chargeAmount))"
>
<span v-if="loading && action === 'charge'" class="loading loading-spinner loading-sm"></span>
Charge
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent, watch } from 'vue'
import axios from 'axios'
import authHeader from '../../../services/auth.header'
import { notify } from "@kyvg/vue3-notification"
export default defineComponent({
name: 'AuthorizeServicePreauthCharge',
data() {
return {
serviceId: this.$route.params.id as string,
loaded: false,
chargeAmount: 0,
loading: false,
action: '', // 'preauthorize' or 'charge'
error: '',
success: '',
selectedCardId: null as number | null, // Track which card is selected
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,
},
credit_cards: [
{
id: 0,
name_on_card: '',
main_card: false,
card_number: '',
expiration_month: '',
type_of_card: '',
last_four_digits: '',
expiration_year: '',
security_number: '',
}
],
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: '',
},
}
},
computed: {
selectedCard(): any {
// If user has selected a card manually, use that
if (this.selectedCardId) {
return this.credit_cards.find((card: any) => card.id === this.selectedCardId)
}
// Otherwise use automatic selection logic
// First try to find payment_card_id from service
if (this.service.payment_card_id && this.service.payment_card_id > 0) {
return this.credit_cards.find((card: any) => card.id === this.service.payment_card_id)
}
// Otherwise return the primary card (main_card = true)
return this.credit_cards.find((card: any) => card.main_card === true) ||
this.credit_cards.find((card: any) => card.id > 0) || // Any card if no primary
null
}
},
mounted() {
this.loadData(this.serviceId)
},
created() {
this.watchRoute()
},
methods: {
watchRoute() {
watch(
() => this.$route.params.id,
(newId) => {
if (newId !== this.serviceId) {
this.resetState()
this.serviceId = newId as string
this.loadData(newId as string)
}
}
)
},
resetState() {
this.loading = false
this.action = ''
this.error = ''
this.success = ''
this.chargeAmount = 0
this.serviceId = this.$route.params.id as string
},
loadData(serviceId: string) {
this.userStatus()
this.getServiceOrder(serviceId)
},
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(serviceId: any) {
let path = import.meta.env.VITE_BASE_URL + "/service/" + serviceId;
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);
} 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);
notify({
title: "Error",
text: "Could not get service data",
type: "error",
});
});
},
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) => {
console.log('Credit cards loaded:', response.data?.length || 0, 'cards');
this.credit_cards = response.data || [];
}).catch((error: any) => {
console.error('Failed to load credit cards:', error);
this.credit_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
})
},
async handlePreauthorize() {
await this.processPayment('preauthorize')
},
async handleChargeNow() {
await this.processPayment('charge')
},
async processPayment(actionType: string) {
if (!this.selectedCard) {
this.error = 'No credit card found for this customer'
return
}
this.loading = true
this.action = actionType
this.error = ''
this.success = ''
try {
// Step 2: If payment method is credit, perform the pre-authorization
if (actionType === 'preauthorize') {
if (!this.chargeAmount || this.chargeAmount <= 0) {
throw new Error("Pre-authorization amount must be greater than zero.");
}
const authPayload = {
card_id: (this.selectedCard as any).id,
preauthorize_amount: this.chargeAmount.toFixed(2),
service_id: this.service.id,
delivery_id: null, // No delivery for services
};
const authPath = `${import.meta.env.VITE_AUTHORIZE_URL}/api/payments/authorize/saved-card/${this.customer.id}`;
const response = await axios.post(authPath, authPayload, { withCredentials: true, headers: authHeader() });
// Update payment type to 11 after successful preauthorization
try {
await axios.put(`${import.meta.env.VITE_BASE_URL}/payment/authorize/service/${this.service.id}`, {
card_id: (this.selectedCard as any).id,
status: actionType === 'preauthorize' ? 1 : 3
}, { headers: authHeader() });
} catch (updateError) {
console.error('Failed to update payment type after preauthorization:', updateError);
}
// On successful authorization, show success and redirect
this.success = `Preauthorization successful! Transaction ID: ${response.data?.auth_net_transaction_id || 'N/A'}`;
setTimeout(() => {
this.$router.push({ name: "customerProfile", params: { id: this.customer.id } });
}, 2000);
} else { // Handle 'charge' action
if (!this.chargeAmount || this.chargeAmount <= 0) {
throw new Error("Charge amount must be greater than zero.");
}
// Create a payload that matches the backend's TransactionCreateByCardID schema
const chargePayload = {
card_id: (this.selectedCard as any).id,
charge_amount: this.chargeAmount.toFixed(2),
service_id: this.service.id,
delivery_id: null, // No delivery for services
// You can add other fields here if your schema requires them
};
// Use the correct endpoint for charging a saved card
const chargePath = `${import.meta.env.VITE_AUTHORIZE_URL}/api/payments/charge/saved-card/${this.customer.id}`;
console.log('=== DEBUG: Charge payload ===');
console.log('Calling endpoint:', chargePath);
console.log('Final payload being sent:', chargePayload);
const response = await axios.post(chargePath, chargePayload, { withCredentials: true, headers: authHeader() });
// Update service cost to the charged amount using new dedicated API
try {
await axios.put(
`${import.meta.env.VITE_BASE_URL}/service/update-cost/${this.service.id}`,
{ service_cost: this.chargeAmount },
{ headers: authHeader(), withCredentials: true }
);
console.log(`✅ Updated service cost to ${this.chargeAmount} for service ${this.service.id}`);
} catch (costError) {
console.error('❌ Failed to update service cost:', costError);
}
// Update payment status after successful charge
try {
await axios.put(`${import.meta.env.VITE_BASE_URL}/payment/capture/service/${this.service.id}`, {
card_id: (this.selectedCard as any).id,
status: 3 // Approved status
}, {
headers: authHeader(),
withCredentials: true
});
} catch (updateError) {
console.error('Failed to update payment status after charge:', updateError);
}
// Status codes: 0 = APPROVED, 1 = DECLINED (based on backend TransactionStatus enum)
if (response.data && response.data.status === 0) { // 0 = APPROVED
this.success = `Charge successful! Transaction ID: ${response.data.auth_net_transaction_id || 'N/A'}`;
setTimeout(() => {
this.$router.push({ name: "customerProfile", params: { id: this.customer.id } });
}, 2000);
} else {
// The error message from your backend will be more specific now
throw new Error(`Payment charge failed: ${response.data?.rejection_reason || 'Unknown error'}`);
}
}
} catch (error: any) {
console.log(error)
this.error = error.response?.data?.detail || `Failed to ${actionType} payment`
notify({
title: "Error",
text: this.error,
type: "error",
})
} finally {
this.loading = false
this.action = ''
}
},
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'}`;
},
selectCard(cardId: number) {
this.selectedCardId = cardId;
},
formatScheduledDate(dateString: string): string {
if (!dateString) return 'Not scheduled';
return dateString; // Could format with dayjs if needed
}
},
})
</script>
<style scoped></style>

364
src/pages/pay/service/capture_authorize.vue
View File

@@ -11,14 +11,14 @@
{{ service.customer_name }} {{ service.customer_name }}
</router-link> </router-link>
</li> </li>
<li>Charge Service #{{ service.id }}</li> <li>Capture Service #{{ service.id }}</li>
</ul> </ul>
</div> </div>
<!-- Page Header --> <!-- Page Header -->
<div class="flex flex-wrap items-center justify-between gap-2 mt-4"> <div class="flex flex-wrap items-center justify-between gap-2 mt-4">
<h1 class="text-3xl font-bold"> <h1 class="text-3xl font-bold">
Charge Service #{{ service?.id }} Capture Charge for Service #{{ service?.id }}
</h1> </h1>
<router-link v-if="service" :to="{ name: 'customerProfile', params: { id: service.customer_id } }"> <router-link v-if="service" :to="{ name: 'customerProfile', params: { id: service.customer_id } }">
<button class="btn btn-sm btn-secondary">Back to Customer</button> <button class="btn btn-sm btn-secondary">Back to Customer</button>
@@ -60,61 +60,102 @@
</div> </div>
</div> </div>
</div> </div>
<!-- Transaction History Card -->
<div class="p-5 rounded-lg bg-neutral">
<h3 class="mb-4 text-xl font-bold">Transaction History</h3>
<div v-if="serviceTransactions.length === 0" class="text-sm opacity-80">
<p>No transactions found for this service.</p>
</div>
<div v-else class="space-y-3">
<div
v-for="transaction in serviceTransactions"
:key="transaction.id"
class="p-3 bg-base-100 rounded-lg border border-base-300"
>
<div class="flex justify-between items-start mb-2">
<div class="text-sm">
<div class="font-bold">Transaction ID: {{ transaction.id }}</div>
<div class="opacity-70">{{ transaction.created_at ? formatDateTime(transaction.created_at) : 'N/A' }}</div>
</div>
<div class="badge"
:class="{
'badge-success': transaction.status === 0,
'badge-warning': transaction.status === 1,
'badge-error': transaction.status === 2,
'badge-info': transaction.status === 3,
}">
{{ getTransactionStatus(transaction.status) }}
</div>
</div>
<div class="grid grid-cols-2 gap-4 text-sm">
<div>
<div class="font-bold">Preauth Amount</div>
<div class="font-mono">${{ formatCurrency(transaction.preauthorize_amount) }}</div>
</div>
<div>
<div class="font-bold">Charge Amount</div>
<div class="font-mono">${{ formatCurrency(transaction.charge_amount) }}</div>
</div>
<div>
<div class="font-bold">Transaction Type</div>
<div>{{ getTransactionType(transaction.transaction_type) }}</div>
</div>
<div>
<div class="font-bold">Auth Transaction ID</div>
<div class="font-mono text-xs">{{ transaction.auth_net_transaction_id || 'N/A' }}</div>
</div>
</div>
<div v-if="transaction.rejection_reason" class="mt-2 p-2 bg-error/10 border border-error/20 rounded text-sm">
<div class="font-bold text-error">Rejection Reason:</div>
<div class="text-error">{{ transaction.rejection_reason }}</div>
</div>
</div>
</div>
</div>
</div> </div>
<!-- RIGHT COLUMN: Cards and Payment Form --> <!-- RIGHT COLUMN: Cards and Payment Form -->
<div class="space-y-6"> <div class="space-y-6">
<!-- Credit Cards Display --> <!-- Credit Cards Display -->
<div class="p-5 rounded-lg bg-neutral"> <div class="p-5 rounded-lg bg-neutral">
<div class="flex items-center justify-between mb-4"> <h3 class="text-xl font-bold mb-4">Pre-authorized Card</h3>
<h3 class="text-xl font-bold">Credit Cards</h3> <div v-if="!preAuthCard" class="mt-2 text-sm opacity-70">
<router-link :to="{ name: 'cardadd', params: { id: service.customer_id } }"> <p class="font-semibold text-warning">No pre-authorized card found.</p>
<button class="btn btn-xs btn-outline btn-success">Add New</button>
</router-link>
</div> </div>
<div v-if="userCards.length === 0" class="mt-2 text-sm opacity-70"> <div class="mt-4">
<p class="font-semibold text-warning">No cards on file.</p> <div class="p-2 border rounded-lg bg-base-200 border-base-300" v-if="preAuthCard">
</div>
<div class="mt-4 space-y-3">
<div
v-for="card in userCards"
:key="card.id"
class="p-2 border rounded-lg cursor-pointer transition-colors"
:class="{
'bg-blue-500 text-white border-blue-500': selectedCard?.id === card.id,
'bg-primary/10 border-primary': selectedCard?.id !== card.id && card.main_card,
'bg-base-200 border-base-300': selectedCard?.id !== card.id && !card.main_card,
}"
@click="selectCard(card)"
>
<div class="flex items-start justify-between"> <div class="flex items-start justify-between">
<div> <div>
<div class="text-sm font-bold">{{ card.name_on_card }}</div> <div class="text-sm font-bold">{{ preAuthCard.name_on_card }}</div>
<div class="text-xs opacity-70">{{ card.type_of_card }}</div> <div class="text-xs opacity-70">{{ preAuthCard.type_of_card }}</div>
</div> </div>
<div v-if="card.main_card" class="badge badge-primary badge-sm">Primary</div> <div v-if="preAuthCard.main_card" class="badge badge-primary badge-sm">Primary</div>
</div> </div>
<div class="mt-1 font-mono text-sm tracking-wider"> <div class="mt-1 font-mono text-sm tracking-wider">
<p>{{ card.card_number }}</p> <p>{{ preAuthCard.card_number }}</p>
<p>Exp: {{ formattedExpiration(card) }}</p> <p>Exp: {{ formattedExpiration(preAuthCard) }}</p>
<p>{{ card.security_number }}</p> <p>{{ preAuthCard.security_number }}</p>
</div> </div>
</div> </div>
</div> </div>
<!-- Payment Form - always shown --> <!-- Payment Form - always shown -->
<div class="pt-4 mt-6 space-y-4 border-t border-base-300"> <div class="pt-4 mt-6 space-y-4 border-t border-base-300">
<div v-if="preAuthAmount && preAuthAmount > 0" class="mb-2 text-sm text-orange-600">Preauthorization amount: ${{ preAuthAmount.toFixed(2) }}</div>
<div class="form-control"> <div class="form-control">
<label class="label"> <div class="relative">
<span class="font-bold label-text">Charge Amount</span> <span class="absolute left-3 top-1/2 transform -translate-y-1/2 text-sm z-10">$</span>
</label> <input
<input v-model="chargeAmount"
v-model="chargeAmount" class="w-full input input-bordered input-sm pl-6"
class="w-full input input-bordered input-sm" type="number"
type="number" step="0.01"
step="0.01" placeholder="0.00"
placeholder="0.00" />
/> </div>
</div> </div>
<div class="flex gap-4"> <div class="flex gap-4">
@@ -124,7 +165,7 @@
@click="chargeService" @click="chargeService"
> >
<span v-if="isSubmitting" class="loading loading-spinner loading-sm"></span> <span v-if="isSubmitting" class="loading loading-spinner loading-sm"></span>
Charge Service Capture Charge
</button> </button>
<button class="btn btn-ghost" :disabled="isSubmitting" @click="cancelCharge"> <button class="btn btn-ghost" :disabled="isSubmitting" @click="cancelCharge">
Cancel Cancel
@@ -165,6 +206,20 @@ interface UserCard {
security_number: string; security_number: string;
} }
interface ServiceTransaction {
id: number;
preauthorize_amount: number;
charge_amount: number;
transaction_type: number;
status: number;
created_at: string;
auth_net_transaction_id?: string;
rejection_reason?: string;
delivery_id?: number;
service_id?: number;
card_id?: number;
}
interface Service { interface Service {
id: number; id: number;
customer_id: number; customer_id: number;
@@ -178,6 +233,7 @@ interface Service {
scheduled_date: string; scheduled_date: string;
description: string; description: string;
service_cost: number; service_cost: number;
payment_card_id?: number;
} }
// --- Component State --- // --- Component State ---
@@ -186,11 +242,12 @@ const router = useRouter();
const isSubmitting = ref(false); const isSubmitting = ref(false);
const service = ref<Service | null>(null); const service = ref<Service | null>(null);
const userCards = ref<UserCard[]>([]); const preAuthCard = ref<UserCard | null>(null);
const selectedCard = ref<UserCard | null>(null); const selectedCard = ref<UserCard | null>(null);
const chargeAmount = ref<number>(0); const chargeAmount = ref<number>(0);
const transaction = ref(null as any); const transaction = ref(null as any);
const preAuthAmount = ref<number>(0); const preAuthAmount = ref<number>(0);
const serviceTransactions = ref<ServiceTransaction[]>([]);
// --- Computed Properties for Cleaner Template --- // --- Computed Properties for Cleaner Template ---
const stateName = computed(() => { const stateName = computed(() => {
@@ -208,11 +265,50 @@ const serviceTypeName = computed(() => {
return service.value ? typeMap[service.value.type_service_call] || 'Unknown' : ''; return service.value ? typeMap[service.value.type_service_call] || 'Unknown' : '';
}); });
// --- Additional Utility Functions ---
const formattedExpiration = (card: UserCard) => { const formattedExpiration = (card: UserCard) => {
const month = String(card.expiration_month).padStart(2, '0'); const month = String(card.expiration_month).padStart(2, '0');
return `${month} / ${card.expiration_year}`; return `${month} / ${card.expiration_year}`;
}; };
const formatCurrency = (value: number): string => {
if (value === null || value === undefined || isNaN(value)) return '$0.00';
return value.toFixed(2);
};
const formatDateTime = (dateString: string): string => {
if (!dateString) return 'N/A';
try {
const date = new Date(dateString);
return date.toLocaleDateString() + ' ' + date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
} catch {
return 'N/A';
}
};
const getTransactionStatus = (status: number): string => {
const statuses: { [key: number]: string } = {
0: 'Approved',
1: 'Pending',
2: 'Declined',
3: 'Captured',
4: 'Voided',
5: 'Settled',
};
return statuses[status] || 'Unknown';
};
const getTransactionType = (type: number): string => {
const types: { [key: number]: string } = {
0: 'Charge',
1: 'Pre-authorization',
2: 'Void',
3: 'Refund',
4: 'Capture',
};
return types[type] || 'Unknown';
};
// --- Methods --- // --- Methods ---
@@ -229,6 +325,32 @@ const selectCard = (card: UserCard) => {
} }
}; };
/**
* Dedicated function to update the service cost using the new dedicated API
*/
const updateServiceCost = async (serviceId: number, newCost: number): Promise<boolean> => {
try {
console.log(`🎯 UPDATING SERVICE COST: Service ${serviceId} → $${newCost}`);
const response = await axios.put(
`${import.meta.env.VITE_BASE_URL}/service/update-cost/${serviceId}`,
{ service_cost: newCost },
{ withCredentials: true, headers: authHeader() }
);
if (response.data.ok) {
console.log(`✅ SERVICE COST UPDATED SUCCESSFULLY: ${response.data.message}`);
return true;
} else {
console.error(`❌ SERVICE COST UPDATE FAILED:`, response.data);
return false;
}
} catch (error: any) {
console.error(`💥 ERROR UPDATING SERVICE COST:`, error.response?.data || error.message);
return false;
}
};
const chargeService = async () => { const chargeService = async () => {
if (!selectedCard.value || !chargeAmount.value || chargeAmount.value <= 0) { if (!selectedCard.value || !chargeAmount.value || chargeAmount.value <= 0) {
notify({ title: "Error", text: "Please select a card and enter a valid amount.", type: "error" }); notify({ title: "Error", text: "Please select a card and enter a valid amount.", type: "error" });
@@ -237,48 +359,95 @@ const chargeService = async () => {
isSubmitting.value = true; isSubmitting.value = true;
try { try {
const card = selectedCard.value; // Check if we have an auth transaction ID from transaction history
const expMonth = String(card.expiration_month).padStart(2, '0'); const authTransaction = serviceTransactions.value?.find(t => t.auth_net_transaction_id);
const expYear = String(card.expiration_year).toString().slice(-2);
const payload = { if (!authTransaction?.auth_net_transaction_id) {
// No auth transaction found, try the original charge flow
const card = selectedCard.value;
const expMonth = String(card.expiration_month).padStart(2, '0');
const expYear = String(card.expiration_year).toString().slice(-2);
const payload = {
charge_amount: chargeAmount.value,
service_id: service.value!.id,
delivery_id: null,
transaction_type: 0,
card_id: card.id,
card_number: card.card_number,
expiration_date: `${expMonth}${expYear}`,
cvv: card.security_number,
};
const response = await axios.post(
`${import.meta.env.VITE_AUTHORIZE_URL}/api/charge/${service.value!.customer_id}`,
payload,
{ withCredentials: true, headers: authHeader() }
);
if (response.data?.status === 0) {
// Update service cost to the charged amount using the new dedicated function
const costUpdateSuccess = await updateServiceCost(service.value!.id, chargeAmount.value);
// Update payment status to 3 for success
await axios.put(
`${import.meta.env.VITE_BASE_URL}/payment/capture/service/${service.value!.id}`,
{
card_id: selectedCard.value!.id,
status: 3
},
{ withCredentials: true, headers: authHeader() }
);
notify({ title: "Success", text: "Service charged successfully!", type: "success" });
router.push({ name: 'customerProfile', params: { id: service.value!.customer_id } });
return;
} else {
const reason = response.data?.rejection_reason || "The charge was declined.";
notify({ title: "Charge Declined", text: reason, type: "error" });
return;
}
}
// We have an auth transaction, so capture it
const capturePayload = {
charge_amount: chargeAmount.value, charge_amount: chargeAmount.value,
service_id: service.value!.id, auth_net_transaction_id: authTransaction.auth_net_transaction_id
delivery_id: null,
transaction_type: 0,
card_id: card.id,
card_number: card.card_number,
expiration_date: `${expMonth}${expYear}`,
cvv: card.security_number,
}; };
console.log(payload)
console.log(card) const captureResponse = await axios.post(
const response = await axios.post( `${import.meta.env.VITE_AUTHORIZE_URL}/api/capture/`,
`${import.meta.env.VITE_AUTHORIZE_URL}/api/charge/${service.value!.customer_id}`, capturePayload,
payload,
{ withCredentials: true, headers: authHeader() } { withCredentials: true, headers: authHeader() }
); );
if (response.data?.status === 0) { if (captureResponse.data?.status === 0) {
// Payment approved: now update the service cost in the database // Update service cost to the captured amount using the new dedicated function
const costUpdateSuccess = await updateServiceCost(service.value!.id, chargeAmount.value);
// Update service payment status
await axios.put( await axios.put(
`${import.meta.env.VITE_BASE_URL}/service/update/${service.value!.id}`, `${import.meta.env.VITE_BASE_URL}/payment/capture/service/${service.value!.id}`,
{ {
service_cost: chargeAmount.value card_id: selectedCard.value!.id,
status: 3
}, },
{ withCredentials: true, headers: authHeader() } { withCredentials: true, headers: authHeader() }
); );
notify({ title: "Success", text: "Service charged successfully!", type: "success" }); notify({ title: "Success", text: "Payment captured successfully!", type: "success" });
router.push({ name: 'customerProfile', params: { id: service.value!.customer_id } }); router.push({ name: 'customerProfile', params: { id: service.value!.customer_id } });
} else if (captureResponse.data?.status === 1) {
const reason = captureResponse.data.rejection_reason || "The payment was declined by the gateway.";
notify({ title: "Payment Declined", text: reason, type: "warn" });
} else { } else {
const reason = response.data?.rejection_reason || "The charge was declined."; throw new Error("Invalid response from server during capture.");
notify({ title: "Charge Declined", text: reason, type: "error" });
} }
} catch (error: any) { } catch (error: any) {
const detail = error.response?.data?.detail || "Failed to charge service due to a server error."; const detail = error.response?.data?.detail || "Failed to process payment due to a server error.";
notify({ title: "Error", text: detail, type: "error" }); notify({ title: "Error", text: detail, type: "error" });
console.error("Charge Service Error:", error); console.error("Charge/Capture Service Error:", error);
} finally { } finally {
isSubmitting.value = false; isSubmitting.value = false;
} }
@@ -290,21 +459,25 @@ const cancelCharge = () => {
} }
}; };
const getTransaction = () => { const getTransaction = async () => {
const serviceId = route.params.id; const serviceId = route.params.id;
const path = `${import.meta.env.VITE_AUTHORIZE_URL}/api/transaction/service/${serviceId}`; const path = `${import.meta.env.VITE_AUTHORIZE_URL}/api/transaction/service/${serviceId}`;
axios.get(path, { withCredentials: true, headers: authHeader() }) try {
.then((response: any) => { const response = await axios.get(path, { withCredentials: true, headers: authHeader() });
transaction.value = response.data; transaction.value = response.data;
preAuthAmount.value = parseFloat(response.data.preauthorize_amount || service.value?.service_cost || 0); preAuthAmount.value = parseFloat(response.data.preauthorize_amount || service.value?.service_cost || 0);
if (response.data.status !== 0) { // Not approved if (response.data.status !== 0) {
preAuthAmount.value = 0; preAuthAmount.value = 0;
} } else if (response.data.card_id) {
}) const cardResponse = await axios.get(`${import.meta.env.VITE_BASE_URL}/payment/card/${response.data.card_id}`, { withCredentials: true, headers: authHeader() });
.catch((error: any) => { preAuthCard.value = cardResponse.data;
console.error("No pre-authorized transaction found for service:", error); selectedCard.value = cardResponse.data;
preAuthAmount.value = service.value?.service_cost || 0; // fallback to service cost chargeAmount.value = preAuthAmount.value;
}); }
} catch (error: any) {
console.error("No pre-authorized transaction found for service:", error);
preAuthAmount.value = service.value?.service_cost || 0;
}
}; };
// --- Lifecycle Hook --- // --- Lifecycle Hook ---
@@ -325,13 +498,38 @@ onMounted(async () => {
service.value = serviceResponse.data.service; service.value = serviceResponse.data.service;
chargeAmount.value = service.value?.service_cost || 0; chargeAmount.value = service.value?.service_cost || 0;
// Fetch Customer Cards // Fetch transaction history for this service
const cardsPath = `${import.meta.env.VITE_BASE_URL}/payment/cards/${service.value!.customer_id}`; try {
const cardsResponse = await axios.get(cardsPath, { withCredentials: true, headers: authHeader() }); const transactionPath = `${import.meta.env.VITE_BASE_URL}/payment/transactions/service/${serviceId}`;
userCards.value = cardsResponse.data; const transactionResponse = await axios.get(transactionPath, { withCredentials: true, headers: authHeader() });
serviceTransactions.value = Array.isArray(transactionResponse.data) ? transactionResponse.data : [];
} catch (error) {
console.error("Failed to fetch transaction history:", error);
serviceTransactions.value = [];
}
// Fetch pre-auth transaction // Fetch pre-auth transaction
getTransaction(); await getTransaction();
// If no card from transaction but service has payment_card_id, fetch directly
if (!preAuthCard.value && service.value?.payment_card_id) {
try {
const cardResponse = await axios.get(`${import.meta.env.VITE_BASE_URL}/payment/card/${service.value.payment_card_id}`, { withCredentials: true, headers: authHeader() });
preAuthCard.value = cardResponse.data;
selectedCard.value = cardResponse.data;
// Keep the chargeAmount as service_cost, since there's no preauth amount
} catch (error) {
console.error("Failed to fetch card from service payment_card_id:", error);
}
// Check if we have transactions with preauth amounts to set the global preAuthAmount
if (serviceTransactions.value.length > 0 && preAuthAmount.value === (service.value?.service_cost || 0)) {
const firstTransaction = serviceTransactions.value.find(t => t.preauthorize_amount && t.preauthorize_amount > 0);
if (firstTransaction) {
preAuthAmount.value = firstTransaction.preauthorize_amount;
}
}
}
} else { } else {
throw new Error(serviceResponse.data?.error || "Failed to fetch service data."); throw new Error(serviceResponse.data?.error || "Failed to fetch service data.");
} }

807
src/pages/pay/service/pay_service.vue Executable file
View 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>

43
src/pages/service/ServiceHome.vue
View File

@@ -51,13 +51,20 @@
<tbody> <tbody>
<!-- Removed @click from tr to avoid conflicting actions --> <!-- Removed @click from tr to avoid conflicting actions -->
<tr v-for="service in services" :key="service.id" class=" hover:bg-blue-600"> <tr v-for="service in services" :key="service.id" class=" hover:bg-blue-600">
<td class="align-top">{{ service.id }}</td> <td class="align-top text-white">{{ service.id }}</td>
<td class="align-top"> <td class="align-top text-white">
<div>{{ formatDate(service.scheduled_date) }}</div> <div>{{ formatDate(service.scheduled_date) }}</div>
<div class="text-xs opacity-70">{{ formatTime(service.scheduled_date) }}</div> <div class="text-xs opacity-70">{{ formatTime(service.scheduled_date) }}</div>
</td> </td>
<td class="align-top">{{ service.customer_name }}</td> <td class="align-top">
<td class="align-top">{{ service.customer_address }}, {{ service.customer_town }}</td> <router-link
:to="{ name: 'customerProfile', params: { id: service.customer_id } }"
class="text-white hover:text-green-500 hover:underline"
>
{{ service.customer_name }}
</router-link>
</td>
<td class="align-top text-white">{{ service.customer_address }}, {{ service.customer_town }}</td>
<td class="align-top"> <td class="align-top">
<span <span
class="badge badge-sm text-white" class="badge badge-sm text-white"
@@ -66,7 +73,7 @@
{{ getServiceTypeName(service.type_service_call) }} {{ getServiceTypeName(service.type_service_call) }}
</span> </span>
</td> </td>
<td class="whitespace-normal text-sm align-top"> <td class="whitespace-normal text-sm align-top text-white">
<!-- TRUNCATION LOGIC FOR DESKTOP --> <!-- TRUNCATION LOGIC FOR DESKTOP -->
<div v-if="!isLongDescription(service.description) || isExpanded(service.id)"> <div v-if="!isLongDescription(service.description) || isExpanded(service.id)">
{{ service.description }} {{ service.description }}
@@ -77,10 +84,11 @@
<a @click.prevent="toggleExpand(service.id)" href="#" class="link link-info link-hover text-xs ml-1 whitespace-nowrap">Read more</a> <a @click.prevent="toggleExpand(service.id)" href="#" class="link link-info link-hover text-xs ml-1 whitespace-nowrap">Read more</a>
</div> </div>
</td> </td>
<td class="text-right font-mono align-top">{{ formatCurrency(service.service_cost) }}</td> <td class="text-right font-mono align-top text-white">{{ formatCurrency(service.service_cost) }}</td>
<td class="text-right align-top space-x-2"> <td class="text-right align-top space-x-2">
<button @click="openEditModal(service)" class="btn btn-sm btn-primary">View</button> <button @click="openEditModal(service)" class="btn btn-sm btn-primary">View</button>
<router-link v-if="service.service_cost !== undefined && service.service_cost !== '' && Number(service.service_cost) === 0" :to="{ name: 'chargeServiceAuthorize', params: { id: service.id } }" class="btn btn-sm btn-success">Charge</router-link> <router-link v-if="shouldShowChargeButton(service)" :to="{ name: 'payService', params: { id: service.id } }" class="btn btn-sm btn-success">Charge</router-link>
<router-link v-if="shouldShowCaptureButton(service)" :to="{ name: 'chargeServiceAuthorize', params: { id: service.id } }" class="btn btn-sm btn-warning">Capture</router-link>
</td> </td>
</tr> </tr>
</tbody> </tbody>
@@ -93,7 +101,12 @@
<div class="card-body p-4"> <div class="card-body p-4">
<div class="flex justify-between items-start"> <div class="flex justify-between items-start">
<div> <div>
<h2 class="card-title text-base">{{ service.customer_name }}</h2> <router-link
:to="{ name: 'customerProfile', params: { id: service.customer_id } }"
class="card-title text-base text-white hover:text-green-500 hover:underline"
>
{{ service.customer_name }}
</router-link>
<p class="text-xs text-gray-500">ID: {{ service.id }}</p> <p class="text-xs text-gray-500">ID: {{ service.id }}</p>
<p class="text-xs text-gray-400">{{ service.customer_address }}, {{ service.customer_town }}</p> <p class="text-xs text-gray-400">{{ service.customer_address }}, {{ service.customer_town }}</p>
</div> </div>
@@ -122,7 +135,8 @@
<div class="card-actions justify-end mt-2 space-x-2"> <div class="card-actions justify-end mt-2 space-x-2">
<button @click="openEditModal(service)" class="btn btn-sm btn-primary">View</button> <button @click="openEditModal(service)" class="btn btn-sm btn-primary">View</button>
<router-link v-if="service.service_cost !== undefined && service.service_cost !== '' && Number(service.service_cost) === 0" :to="{ name: 'chargeServiceAuthorize', params: { id: service.id } }" class="btn btn-sm btn-success">Charge</router-link> <router-link v-if="shouldShowChargeButton(service)" :to="{ name: 'payService', params: { id: service.id } }" class="btn btn-sm btn-success">Charge</router-link>
<router-link v-if="shouldShowCaptureButton(service)" :to="{ name: 'chargeServiceAuthorize', params: { id: service.id } }" class="btn btn-sm btn-warning">Capture</router-link>
</div> </div>
</div> </div>
</div> </div>
@@ -160,6 +174,7 @@ interface ServiceCall {
type_service_call: number; type_service_call: number;
description: string; description: string;
service_cost: string; service_cost: string;
payment_status?: number;
} }
export default defineComponent({ export default defineComponent({
@@ -189,7 +204,7 @@ export default defineComponent({
headers: authHeader(), headers: authHeader(),
withCredentials: true, withCredentials: true,
}); });
this.services = response.data; this.services = response.data.sort((a: ServiceCall, b: ServiceCall) => b.id - a.id);
} catch (error) { } catch (error) {
console.error("Failed to fetch upcoming service calls:", error); console.error("Failed to fetch upcoming service calls:", error);
} finally { } finally {
@@ -313,6 +328,14 @@ export default defineComponent({
4: 'black', 4: 'black',
}; };
return colorMap[typeId] || 'gray'; return colorMap[typeId] || 'gray';
},
shouldShowChargeButton(service: any): boolean {
return service.payment_status === null || service.payment_status === undefined;
},
shouldShowCaptureButton(service: any): boolean {
return service.payment_status === 1;
} }
}, },
}) })

43
src/pages/service/ServicePast.vue
View File

@@ -50,13 +50,20 @@
</thead> </thead>
<tbody> <tbody>
<tr v-for="service in services" :key="service.id" class="hover:bg-blue-600"> <tr v-for="service in services" :key="service.id" class="hover:bg-blue-600">
<td class="align-top">{{ service.id }}</td> <td class="align-top text-white">{{ service.id }}</td>
<td class="align-top"> <td class="align-top text-white">
<div>{{ formatDate(service.scheduled_date) }}</div> <div>{{ formatDate(service.scheduled_date) }}</div>
<div class="text-xs opacity-70">{{ formatTime(service.scheduled_date) }}</div> <div class="text-xs opacity-70">{{ formatTime(service.scheduled_date) }}</div>
</td> </td>
<td class="align-top">{{ service.customer_name }}</td> <td class="align-top">
<td class="align-top">{{ service.customer_address }}, {{ service.customer_town }}</td> <router-link
:to="{ name: 'customerProfile', params: { id: service.customer_id } }"
class="text-white hover:text-green-500 hover:underline"
>
{{ service.customer_name }}
</router-link>
</td>
<td class="align-top text-white">{{ service.customer_address }}, {{ service.customer_town }}</td>
<!-- <!--
FIX IS HERE: Replaced the colored text with a styled badge. FIX IS HERE: Replaced the colored text with a styled badge.
@@ -73,7 +80,7 @@
</span> </span>
</td> </td>
<td class="whitespace-normal text-sm align-top"> <td class="whitespace-normal text-sm align-top text-white">
<div v-if="!isLongDescription(service.description) || isExpanded(service.id)"> <div v-if="!isLongDescription(service.description) || isExpanded(service.id)">
{{ service.description }} {{ service.description }}
<a v-if="isLongDescription(service.description)" @click.prevent="toggleExpand(service.id)" href="#" class="link link-info link-hover text-xs ml-1 whitespace-nowrap">Show less</a> <a v-if="isLongDescription(service.description)" @click.prevent="toggleExpand(service.id)" href="#" class="link link-info link-hover text-xs ml-1 whitespace-nowrap">Show less</a>
@@ -83,10 +90,11 @@
<a @click.prevent="toggleExpand(service.id)" href="#" class="link link-info link-hover text-xs ml-1 whitespace-nowrap">Read more</a> <a @click.prevent="toggleExpand(service.id)" href="#" class="link link-info link-hover text-xs ml-1 whitespace-nowrap">Read more</a>
</div> </div>
</td> </td>
<td class="text-right font-mono align-top">{{ formatCurrency(service.service_cost) }}</td> <td class="text-right font-mono align-top text-white">{{ formatCurrency(service.service_cost) }}</td>
<td class="text-right align-top space-x-2"> <td class="text-right align-top space-x-2">
<button @click="openEditModal(service)" class="btn btn-sm btn-primary">View</button> <button @click="openEditModal(service)" class="btn btn-sm btn-primary">View</button>
<router-link v-if="service.service_cost !== undefined && service.service_cost !== '' && Number(service.service_cost) === 0" :to="{ name: 'chargeServiceAuthorize', params: { id: service.id } }" class="btn btn-sm btn-success">Charge</router-link> <router-link v-if="shouldShowChargeButton(service)" :to="{ name: 'payService', params: { id: service.id } }" class="btn btn-sm btn-success">Charge</router-link>
<router-link v-if="shouldShowCaptureButton(service)" :to="{ name: 'chargeServiceAuthorize', params: { id: service.id } }" class="btn btn-sm btn-warning">Capture</router-link>
</td> </td>
</tr> </tr>
</tbody> </tbody>
@@ -99,7 +107,12 @@
<div class="card-body p-4"> <div class="card-body p-4">
<div class="flex justify-between items-start"> <div class="flex justify-between items-start">
<div> <div>
<h2 class="card-title text-base">{{ service.customer_name }}</h2> <router-link
:to="{ name: 'customerProfile', params: { id: service.customer_id } }"
class="card-title text-base text-white hover:text-green-500 hover:underline"
>
{{ service.customer_name }}
</router-link>
<p class="text-xs text-gray-500">ID: {{ service.id }}</p> <p class="text-xs text-gray-500">ID: {{ service.id }}</p>
<p class="text-xs text-gray-400">{{ service.customer_address }}, {{ service.customer_town }}</p> <p class="text-xs text-gray-400">{{ service.customer_address }}, {{ service.customer_town }}</p>
</div> </div>
@@ -128,7 +141,8 @@
<div class="card-actions justify-end mt-2 space-x-2"> <div class="card-actions justify-end mt-2 space-x-2">
<button @click="openEditModal(service)" class="btn btn-sm btn-primary">View</button> <button @click="openEditModal(service)" class="btn btn-sm btn-primary">View</button>
<router-link v-if="service.service_cost !== undefined && service.service_cost !== '' && Number(service.service_cost) === 0" :to="{ name: 'chargeServiceAuthorize', params: { id: service.id } }" class="btn btn-sm btn-success">Charge</router-link> <router-link v-if="shouldShowChargeButton(service)" :to="{ name: 'payService', params: { id: service.id } }" class="btn btn-sm btn-success">Charge</router-link>
<router-link v-if="shouldShowCaptureButton(service)" :to="{ name: 'chargeServiceAuthorize', params: { id: service.id } }" class="btn btn-sm btn-warning">Capture</router-link>
</div> </div>
</div> </div>
</div> </div>
@@ -167,6 +181,7 @@ interface ServiceCall {
type_service_call: number; type_service_call: number;
description: string; description: string;
service_cost: string; service_cost: string;
payment_status?: number;
} }
export default defineComponent({ export default defineComponent({
@@ -219,7 +234,7 @@ export default defineComponent({
headers: authHeader(), headers: authHeader(),
withCredentials: true, withCredentials: true,
}); });
this.services = response.data; this.services = response.data.sort((a: ServiceCall, b: ServiceCall) => b.id - a.id);
} catch (error) { } catch (error) {
console.error("Failed to fetch past service calls:", error); console.error("Failed to fetch past service calls:", error);
} finally { } finally {
@@ -326,6 +341,14 @@ export default defineComponent({
4: 'black', 4: 'black',
}; };
return colorMap[typeId] || 'gray'; return colorMap[typeId] || 'gray';
},
shouldShowChargeButton(service: any): boolean {
return service.payment_status === null || service.payment_status === undefined;
},
shouldShowCaptureButton(service: any): boolean {
return service.payment_status === 1;
} }
}, },
}) })

33
src/pages/service/ServiceToday.vue
View File

@@ -55,7 +55,14 @@
<div>{{ formatDate(service.scheduled_date) }}</div> <div>{{ formatDate(service.scheduled_date) }}</div>
<div class="text-xs opacity-70">{{ formatTime(service.scheduled_date) }}</div> <div class="text-xs opacity-70">{{ formatTime(service.scheduled_date) }}</div>
</td> </td>
<td class="align-top">{{ service.customer_name }}</td> <td class="align-top">
<router-link
:to="{ name: 'customerProfile', params: { id: service.customer_id } }"
class="text-white hover:text-green-500 hover:underline"
>
{{ service.customer_name }}
</router-link>
</td>
<td class="align-top">{{ service.customer_address }}, {{ service.customer_town }}</td> <td class="align-top">{{ service.customer_address }}, {{ service.customer_town }}</td>
<!-- <!--
@@ -86,7 +93,8 @@
<td class="text-right font-mono align-top">{{ formatCurrency(service.service_cost) }}</td> <td class="text-right font-mono align-top">{{ formatCurrency(service.service_cost) }}</td>
<td class="text-right align-top space-x-2"> <td class="text-right align-top space-x-2">
<button @click="openEditModal(service)" class="btn btn-sm btn-primary">View</button> <button @click="openEditModal(service)" class="btn btn-sm btn-primary">View</button>
<router-link v-if="service.service_cost !== undefined && service.service_cost !== '' && Number(service.service_cost) === 0" :to="{ name: 'chargeServiceAuthorize', params: { id: service.id } }" class="btn btn-sm btn-success">Charge</router-link> <router-link v-if="shouldShowChargeButton(service)" :to="{ name: 'payService', params: { id: service.id } }" class="btn btn-sm btn-success">Charge</router-link>
<router-link v-if="shouldShowCaptureButton(service)" :to="{ name: 'chargeServiceAuthorize', params: { id: service.id } }" class="btn btn-sm btn-warning">Capture</router-link>
</td> </td>
</tr> </tr>
</tbody> </tbody>
@@ -99,7 +107,12 @@
<div class="card-body p-4"> <div class="card-body p-4">
<div class="flex justify-between items-start"> <div class="flex justify-between items-start">
<div> <div>
<h2 class="card-title text-base">{{ service.customer_name }}</h2> <router-link
:to="{ name: 'customerProfile', params: { id: service.customer_id } }"
class="card-title text-base text-white hover:text-green-500 hover:underline"
>
{{ service.customer_name }}
</router-link>
<p class="text-xs text-gray-500">ID: {{ service.id }}</p> <p class="text-xs text-gray-500">ID: {{ service.id }}</p>
<p class="text-xs text-gray-400">{{ service.customer_address }}, {{ service.customer_town }}</p> <p class="text-xs text-gray-400">{{ service.customer_address }}, {{ service.customer_town }}</p>
</div> </div>
@@ -128,7 +141,8 @@
<div class="card-actions justify-end mt-2 space-x-2"> <div class="card-actions justify-end mt-2 space-x-2">
<button @click="openEditModal(service)" class="btn btn-sm btn-primary">View</button> <button @click="openEditModal(service)" class="btn btn-sm btn-primary">View</button>
<router-link v-if="service.service_cost !== undefined && service.service_cost !== '' && Number(service.service_cost) === 0" :to="{ name: 'chargeServiceAuthorize', params: { id: service.id } }" class="btn btn-sm btn-success">Charge</router-link> <router-link v-if="shouldShowChargeButton(service)" :to="{ name: 'payService', params: { id: service.id } }" class="btn btn-sm btn-success">Charge</router-link>
<router-link v-if="shouldShowCaptureButton(service)" :to="{ name: 'chargeServiceAuthorize', params: { id: service.id } }" class="btn btn-sm btn-warning">Capture</router-link>
</div> </div>
</div> </div>
</div> </div>
@@ -167,6 +181,7 @@ interface ServiceCall {
type_service_call: number; type_service_call: number;
description: string; description: string;
service_cost: string; service_cost: string;
payment_status?: number;
} }
export default defineComponent({ export default defineComponent({
@@ -219,7 +234,7 @@ export default defineComponent({
headers: authHeader(), headers: authHeader(),
withCredentials: true, withCredentials: true,
}); });
this.services = response.data; this.services = response.data.sort((a: ServiceCall, b: ServiceCall) => b.id - a.id);
} catch (error) { } catch (error) {
console.error("Failed to fetch today's service calls:", error); console.error("Failed to fetch today's service calls:", error);
} finally { } finally {
@@ -326,6 +341,14 @@ export default defineComponent({
4: 'black', 4: 'black',
}; };
return colorMap[typeId] || 'gray'; return colorMap[typeId] || 'gray';
},
shouldShowChargeButton(service: any): boolean {
return service.payment_status === null || service.payment_status === undefined;
},
shouldShowCaptureButton(service: any): boolean {
return service.payment_status === 1;
} }
}, },
}) })