Working log in/route guard
This commit is contained in:
@@ -1,302 +1,157 @@
|
||||
<template>
|
||||
<div class="flex">
|
||||
|
||||
<div class=" w-full px-10">
|
||||
<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
|
||||
<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>
|
||||
</li>
|
||||
<li>Confirm Payment</li>
|
||||
</ul>
|
||||
</div>
|
||||
<h1 class="text-3xl font-bold mt-4 border-b border-gray-600 pb-2">
|
||||
Confirm Delivery #{{ delivery.id }}
|
||||
</h1>
|
||||
|
||||
<div class="grid grid-cols-1 rounded-md p-6 mb-5">
|
||||
<div class=" col-span-12 text-2xl">
|
||||
Confirm Payment Oil Delivery {{ delivery.id }}
|
||||
<!-- 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>
|
||||
|
||||
<!-- Delivery Details Card -->
|
||||
<div class="bg-neutral rounded-lg p-5">
|
||||
<h3 class="text-xl font-bold mb-4">Delivery Details</h3>
|
||||
<div class="space-y-3">
|
||||
<div>
|
||||
<div class="font-bold text-sm">Current Status</div>
|
||||
<div class="badge" :class="{ 'badge-info': delivery.delivery_status === 0, 'badge-success': delivery.delivery_status === 1, 'badge-warning': delivery.delivery_status > 1 }">
|
||||
<span v-if="delivery.delivery_status == 0">Waiting</span>
|
||||
<span v-else-if="delivery.delivery_status == 1">Delivered</span>
|
||||
<span v-else-if="delivery.delivery_status == 2">Out for Delivery</span>
|
||||
<span v-else-if="delivery.delivery_status == 3">Cancelled</span>
|
||||
<span v-else-if="delivery.delivery_status == 4">Partial Delivery</span>
|
||||
<span v-else-if="delivery.delivery_status == 5">Issue</span>
|
||||
<span v-else>Pending</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="font-bold text-sm">Scheduled Date</div>
|
||||
<div>{{ delivery.expected_delivery_date }}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="font-bold text-sm">Gallons Ordered</div>
|
||||
<div>
|
||||
<span v-if="delivery.customer_asked_for_fill == 1" class="badge badge-info">FILL (250 gal estimate)</span>
|
||||
<span v-else>{{ delivery.gallons_ordered }} Gallons</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-12 mb-5 gap-5">
|
||||
|
||||
<div class="col-span-12 xl:col-span-6 ">
|
||||
<div class="col-span-12 font-bold flex pb-5 text-lg">
|
||||
{{ customer.account_number }}
|
||||
</div>
|
||||
<div class="col-span-12 font-bold flex">
|
||||
{{ customer.customer_first_name }}
|
||||
{{ customer.customer_last_name }}
|
||||
</div>
|
||||
<div class="col-span-12 font-bold flex">
|
||||
{{ customer.customer_address }}
|
||||
<div v-if="customer.customer_apt != 'None'">
|
||||
{{ customer.customer_apt }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-12 font-bold flex">
|
||||
<div class="pr-2">
|
||||
{{ customer.customer_town }},
|
||||
</div>
|
||||
<div class="pr-2">
|
||||
<div v-if="customer.customer_state == 0">Massachusetts</div>
|
||||
<div v-else-if="customer.customer_state == 1">Rhode Island</div>
|
||||
<div v-else-if="customer.customer_state == 2">New Hampshire</div>
|
||||
<div v-else-if="customer.customer_state == 3">Maine</div>
|
||||
<div v-else-if="customer.customer_state == 4">Vermont</div>
|
||||
<div v-else-if="customer.customer_state == 5">Maine</div>
|
||||
<div v-else-if="customer.customer_state == 6">New York</div>
|
||||
<div v-else>Unknown state</div>
|
||||
</div>
|
||||
<div class="pr-2">
|
||||
{{ customer.customer_zip }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-12 font-bold flex" v-if="customer.customer_apt !== 'None'">
|
||||
{{ customer.customer_apt }}
|
||||
</div>
|
||||
<div class="col-span-12 font-bold flex">
|
||||
<div v-if="customer.customer_home_type == 0">Residential</div>
|
||||
<div v-else-if="customer.customer_home_type == 1">apartment</div>
|
||||
<div v-else-if="customer.customer_home_type == 2">condo</div>
|
||||
<div v-else-if="customer.customer_home_type == 3">commercial</div>
|
||||
<div v-else-if="customer.customer_home_type == 4">business</div>
|
||||
<div v-else-if="customer.customer_home_type == 5">construction</div>
|
||||
<div v-else-if="customer.customer_home_type == 6">container</div>
|
||||
</div>
|
||||
<div class="col-span-12 font-bold flex">
|
||||
{{ customer.customer_phone_number }}
|
||||
</div>
|
||||
|
||||
<!-- RIGHT COLUMN: Payment and Pricing Details -->
|
||||
<div class="space-y-6">
|
||||
|
||||
<div class="col-span-12 ">
|
||||
<div class="grid grid-cols-12 mb-5">
|
||||
<div class="col-span-12 pt-10 font-bold">Delivery Status</div>
|
||||
<div class="col-span-12 text-gray-500">
|
||||
<div v-if="delivery.delivery_status == 0"> Waiting</div>
|
||||
<div v-else-if="delivery.delivery_status == 1"> delivered</div>
|
||||
<div v-else-if="delivery.delivery_status == 2"> Out for Delivery</div>
|
||||
<div v-else-if="delivery.delivery_status == 3">Cancelled</div>
|
||||
<div v-else-if="delivery.delivery_status == 4"> Partial Delivery</div>
|
||||
<div v-else-if="delivery.delivery_status == 5">Issue</div>
|
||||
<div v-else></div>
|
||||
<!-- Payment & Pricing Card -->
|
||||
<div class="bg-neutral rounded-lg p-5">
|
||||
<h3 class="text-xl font-bold mb-4">Payment & Pricing</h3>
|
||||
<div class="space-y-4">
|
||||
<!-- Payment Method -->
|
||||
<div>
|
||||
<div class="font-bold text-sm">Payment Method</div>
|
||||
<div class="text-lg">
|
||||
<span v-if="delivery.payment_type == 0">Cash</span>
|
||||
<span v-else-if="delivery.payment_type == 1">Credit Card</span>
|
||||
<span v-else-if="delivery.payment_type == 2">Credit Card / Cash</span>
|
||||
<span v-else-if="delivery.payment_type == 3">Check</span>
|
||||
<span v-else-if="delivery.payment_type == 4">Other</span>
|
||||
</div>
|
||||
<div class="col-span-12 pt-3 font-bold">
|
||||
Expected Delivery:
|
||||
</div>
|
||||
<div class="col-span-12 text-gray-500">
|
||||
{{ delivery.expected_delivery_date }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-span-12 xl:col-span-6">
|
||||
<div class="grid grid-cols-12 mb-5 ">
|
||||
<div v-for="card in credit_cards" class="col-span-12">
|
||||
<div class="col-span-12 ">
|
||||
<div v-if="card.main_card" class="basis-1/3 p-2">
|
||||
<div class="bg-secondary rounded-md border-2 ">
|
||||
<div class="flex p-3">
|
||||
{{ card.type_of_card }}
|
||||
</div>
|
||||
<div class="flex p-1 pl-4">
|
||||
{{ card.name_on_card }}
|
||||
</div>
|
||||
<div class="flex p-1 pl-4">
|
||||
{{ card.card_number }}
|
||||
</div>
|
||||
<div class="flex p-1 pl-4">
|
||||
{{ card.expiration_month }}/ {{ card.expiration_year }}
|
||||
</div>
|
||||
<div class="flex p-1 pl-4">
|
||||
{{ card.security_number }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="basis-1/3 p-2">
|
||||
<div class=" rounded-md border-2 ">
|
||||
<div class="flex p-3">
|
||||
{{ card.type_of_card }}
|
||||
</div>
|
||||
<div class="flex p-1 pl-4">
|
||||
{{ card.name_on_card }}
|
||||
</div>
|
||||
<div class="flex p-1 pl-4">
|
||||
{{ card.card_number }}
|
||||
</div>
|
||||
<div class="flex p-1 pl-4">
|
||||
{{ card.expiration_month }}/ {{ card.expiration_year }}
|
||||
</div>
|
||||
<div class="flex p-1 pl-4">
|
||||
{{ card.security_number }}
|
||||
</div>
|
||||
<!-- Show the main card if payment is by credit -->
|
||||
<div v-if="delivery.payment_type == 1 || delivery.payment_type == 3" class="mt-2">
|
||||
<div v-for="card in credit_cards" :key="card.id">
|
||||
<div v-if="card.main_card" 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>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-12 mb-5">
|
||||
<div class="col-span-12 pt-3 font-bold">
|
||||
Payment Type:
|
||||
</div>
|
||||
<div class="col-span-12 text-gray-500" v-if="delivery.payment_type == 0">
|
||||
Cash
|
||||
</div>
|
||||
<div class="col-span-12 text-gray-500" v-if="delivery.payment_type == 1">
|
||||
Credit Card
|
||||
</div>
|
||||
<div class="col-span-12 text-gray-500" v-if="delivery.payment_type == 2">
|
||||
Credit Card / Cash
|
||||
</div>
|
||||
<div class="col-span-12 text-gray-500" v-if="delivery.payment_type == 3">
|
||||
Check with CC Hold
|
||||
</div>
|
||||
<div class="col-span-12 text-gray-500" v-if="delivery.payment_type == 4">
|
||||
Other (Rent, etc):
|
||||
</div>
|
||||
<div v-if="promo_active" class="col-span-12">
|
||||
<div class="col-span-12 pt-3 font-bold">
|
||||
Promo
|
||||
|
||||
<!-- Pricing Breakdown -->
|
||||
<div class="space-y-2 pt-2">
|
||||
<div class="flex justify-between text-sm">
|
||||
<span>Price per Gallon</span>
|
||||
<span>${{ delivery.customer_price }}</span>
|
||||
</div>
|
||||
<div v-if="delivery.prime == 1" class="flex justify-between text-sm">
|
||||
<span>Prime Fee</span>
|
||||
<span>+ ${{ pricing.price_prime }}</span>
|
||||
</div>
|
||||
<div v-if="delivery.emergency == 1" class="flex justify-between text-sm">
|
||||
<span>Emergency Fee</span>
|
||||
<span>+ ${{ pricing.price_emergency }}</span>
|
||||
</div>
|
||||
<div v-if="delivery.same_day == 1" class="flex justify-between text-sm">
|
||||
<span>Same Day Fee</span>
|
||||
<span>+ ${{ pricing.price_same_day }}</span>
|
||||
</div>
|
||||
<div v-if="promo_active" class="flex justify-between text-sm text-success">
|
||||
<span>Promo: {{ promo.name_of_promotion }}</span>
|
||||
<span>- ${{ discount }}</span>
|
||||
</div>
|
||||
|
||||
<div class="col-span-12 text-gray-500">
|
||||
{{ promo.name_of_promotion }}
|
||||
</div>
|
||||
<div class="col-span-12 pt-3 font-bold">
|
||||
Promo Discount:
|
||||
</div>
|
||||
<div class="col-span-12 text-gray-500">
|
||||
{{ promo.money_off_delivery }} off a gallon
|
||||
</div>
|
||||
<div class="col-span-12 text-gray-500">
|
||||
{{ discount }} off total delivery
|
||||
</div>
|
||||
<div class="col-span-12 text-gray-500">
|
||||
{{ total_amount_after_discount }} total price after discount
|
||||
</div>
|
||||
<div class="col-span-12 pt-3 font-bold">
|
||||
Price / Gallon:
|
||||
</div>
|
||||
<div class="col-span-12 text-gray-500">
|
||||
{{ delivery.customer_price }} ({{ delivery.customer_price - promo.money_off_delivery}})
|
||||
</div>
|
||||
</div>
|
||||
<div class="divider my-1"></div>
|
||||
|
||||
|
||||
|
||||
<div class="col-span-12 pt-3 font-bold">
|
||||
Gallons Ordered:
|
||||
</div>
|
||||
|
||||
<div class="col-span-12 text-gray-500">
|
||||
<div v-if="delivery.customer_asked_for_fill == 1"> FILL (250)</div>
|
||||
<div v-else> Gallons Ordered: {{ delivery.gallons_ordered }}</div>
|
||||
</div>
|
||||
|
||||
<div class="col-span-12 py-3" v-if="delivery.prime == 1">
|
||||
Prime Fee: {{ pricing.price_prime }}
|
||||
</div>
|
||||
<div class="col-span-12 py-3" v-if="delivery.emergency == 1">
|
||||
Emergency Fee: {{ pricing.price_emergency }}
|
||||
</div>
|
||||
<div class="col-span-12 py-3" v-if="delivery.same_day == 1">
|
||||
Same Day: {{ pricing.price_same_day }}
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-span-12 py-3" v-if="delivery.promo_id != null">
|
||||
<div class="col-span-12 " v-if="delivery.payment_type == 0">
|
||||
<div class="font-bold py-5">
|
||||
CASH Total:
|
||||
</div>
|
||||
<div class="col-span-12 text-gray-500">
|
||||
${{ total_amount_after_discount }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-12 font-bold py-5 text-accent" v-if="delivery.payment_type == 1">
|
||||
<div class="">
|
||||
Pre Charge Credit Card Total: ${{ total_amount_after_discount }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-12 font-bold py-5 text-accent" v-if="delivery.payment_type == 2">
|
||||
<div class="">
|
||||
Pre Charge Credit Card Total: ${{ total_amount_after_discount }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-12 font-bold py-5 text-accent" v-if="delivery.payment_type == 3">
|
||||
<div class="">
|
||||
Check - Pre Charge Credit Card Total: ${{ total_amount_after_discount }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-12 py-3" v-else>
|
||||
<div class="col-span-12 " v-if="delivery.payment_type == 0">
|
||||
<div class="font-bold py-5">
|
||||
CASH Total:
|
||||
</div>
|
||||
<div class="col-span-12 text-gray-500">
|
||||
${{ total_amount }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-12 font-bold py-5 text-accent" v-if="delivery.payment_type == 1">
|
||||
<div class="">
|
||||
Pre Charge Credit Card Total: ${{ total_amount }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-12 font-bold py-5 text-accent" v-if="delivery.payment_type == 2">
|
||||
<div class="">
|
||||
Pre Charge Credit Card Total: ${{ total_amount }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-12 font-bold py-5 text-accent" v-if="delivery.payment_type == 3">
|
||||
<div class="">
|
||||
Check - Pre Charge Credit Card Total: ${{ total_amount }}
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="text-lg font-bold">Total to be Charged</span>
|
||||
<span class="text-2xl font-bold text-accent">
|
||||
${{ promo_active ? total_amount_after_discount : total_amount }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="flex justify-between">
|
||||
|
||||
<div class="" v-if="delivery.payment_type == 0">
|
||||
<button class="btn bg-green-800 btn-sm" @click="checkoutOilUpdatePayment(0)">
|
||||
Confirm Payment
|
||||
</button>
|
||||
</div>
|
||||
<div class="" v-if="delivery.payment_type == 1">
|
||||
<button class="btn bg-green-800 btn-sm" @click="checkoutOilUpdatePayment(1)">
|
||||
Confirm Payment
|
||||
</button>
|
||||
</div>
|
||||
<div class="" v-if="delivery.payment_type == 2">
|
||||
<button class="btn bg-green-800 btn-sm" @click="checkoutOilUpdatePayment(2)">
|
||||
Confirm Payment
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="" v-if="delivery.payment_type == 3">
|
||||
<button class="btn bg-green-800 btn-sm" @click="checkoutOilUpdatePayment(3)">
|
||||
Confirm Payment
|
||||
<!-- Actions Card -->
|
||||
<div class="bg-neutral rounded-lg p-5">
|
||||
<div class="flex flex-wrap gap-4 justify-between items-center">
|
||||
<!-- A single confirm button is cleaner -->
|
||||
<button class="btn btn-primary" @click="checkoutOilUpdatePayment(delivery.payment_type)">
|
||||
Confirm & Process Payment
|
||||
</button>
|
||||
</div>
|
||||
<div class="" v-if="delivery.payment_type == 4">
|
||||
<button class="btn bg-green-800 btn-sm" @click="checkoutOilUpdatePayment(3)">
|
||||
Confirm Payment
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-12 py-10">
|
||||
|
||||
<router-link :to="{ name: 'deliveryEdit', params: { id: delivery.id } }">
|
||||
<button class="btn btn-sm btn-secondary">Edit Delivery</button>
|
||||
</router-link>
|
||||
|
||||
<router-link v-if="delivery && delivery.id" :to="{ name: 'deliveryEdit', params: { id: delivery.id } }">
|
||||
<button class="btn btn-sm btn-ghost">Edit Delivery</button>
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -304,7 +159,6 @@
|
||||
<Footer />
|
||||
</template>
|
||||
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue'
|
||||
import axios from 'axios'
|
||||
|
||||
Reference in New Issue
Block a user