336 lines
9.6 KiB
Vue
336 lines
9.6 KiB
Vue
<template>
|
|
<v-dialog
|
|
:model-value="modelValue"
|
|
@update:model-value="$emit('update:model-value', $event)"
|
|
max-width="600"
|
|
persistent
|
|
scrollable
|
|
>
|
|
<v-card class="registration-success-card">
|
|
<v-card-title class="d-flex align-center pa-6 bg-success">
|
|
<v-icon class="mr-3 text-white" size="32">mdi-check-circle</v-icon>
|
|
<h2 class="text-h5 text-white font-weight-bold flex-grow-1">
|
|
Registration Successful!
|
|
</h2>
|
|
</v-card-title>
|
|
|
|
<v-card-text class="pa-6">
|
|
<!-- Success Message -->
|
|
<div class="text-center mb-6">
|
|
<v-avatar size="80" class="mb-4" color="success">
|
|
<v-icon size="48" color="white">mdi-account-check</v-icon>
|
|
</v-avatar>
|
|
|
|
<h3 class="text-h6 mb-3">
|
|
Welcome to MonacoUSA Association!
|
|
</h3>
|
|
|
|
<p class="text-body-1 mb-2">
|
|
Your membership application has been submitted successfully.
|
|
</p>
|
|
|
|
<v-chip
|
|
v-if="memberData?.memberId"
|
|
color="success"
|
|
variant="outlined"
|
|
size="small"
|
|
class="ma-1"
|
|
>
|
|
<v-icon start size="14">mdi-identifier</v-icon>
|
|
Member ID: {{ memberData.memberId }}
|
|
</v-chip>
|
|
</div>
|
|
|
|
<v-divider class="mb-6" />
|
|
|
|
<!-- Next Steps -->
|
|
<div class="mb-6">
|
|
<h4 class="text-h6 mb-3 d-flex align-center">
|
|
<v-icon class="mr-2" color="primary">mdi-format-list-checks</v-icon>
|
|
Next Steps
|
|
</h4>
|
|
|
|
<v-timeline density="compact" side="end">
|
|
<v-timeline-item
|
|
dot-color="success"
|
|
size="small"
|
|
icon="mdi-check"
|
|
>
|
|
<template #opposite>
|
|
<strong class="text-body-2">Step 1</strong>
|
|
</template>
|
|
<div class="mb-2">
|
|
<strong class="text-body-2">Registration Complete</strong>
|
|
<p class="text-body-2 text-medium-emphasis mb-0">
|
|
Your account has been created in our system.
|
|
</p>
|
|
</div>
|
|
</v-timeline-item>
|
|
|
|
<v-timeline-item
|
|
dot-color="warning"
|
|
size="small"
|
|
icon="mdi-email"
|
|
>
|
|
<template #opposite>
|
|
<strong class="text-body-2">Step 2</strong>
|
|
</template>
|
|
<div class="mb-2">
|
|
<strong class="text-body-2">Check Your Email</strong>
|
|
<p class="text-body-2 text-medium-emphasis mb-0">
|
|
We've sent a verification email to <strong>{{ memberData?.email }}</strong>.
|
|
Click the link in the email to verify your account and set your password.
|
|
</p>
|
|
</div>
|
|
</v-timeline-item>
|
|
|
|
<v-timeline-item
|
|
dot-color="info"
|
|
size="small"
|
|
icon="mdi-bank"
|
|
>
|
|
<template #opposite>
|
|
<strong class="text-body-2">Step 3</strong>
|
|
</template>
|
|
<div class="mb-2">
|
|
<strong class="text-body-2">Pay Membership Dues</strong>
|
|
<p class="text-body-2 text-medium-emphasis mb-0">
|
|
Transfer your annual membership dues using the banking details below.
|
|
</p>
|
|
</div>
|
|
</v-timeline-item>
|
|
|
|
<v-timeline-item
|
|
dot-color="success"
|
|
size="small"
|
|
icon="mdi-account-check"
|
|
>
|
|
<template #opposite>
|
|
<strong class="text-body-2">Step 4</strong>
|
|
</template>
|
|
<div>
|
|
<strong class="text-body-2">Account Activation</strong>
|
|
<p class="text-body-2 text-medium-emphasis mb-0">
|
|
Once payment is verified, your account will be activated and you can access the member portal.
|
|
</p>
|
|
</div>
|
|
</v-timeline-item>
|
|
</v-timeline>
|
|
</div>
|
|
|
|
<v-divider class="mb-6" />
|
|
|
|
<!-- Payment Information -->
|
|
<div class="payment-info mb-6">
|
|
<h4 class="text-h6 mb-3 d-flex align-center">
|
|
<v-icon class="mr-2" color="primary">mdi-bank</v-icon>
|
|
Payment Instructions
|
|
</h4>
|
|
|
|
<v-card variant="outlined" class="pa-4" color="primary-lighten-5">
|
|
<v-row dense>
|
|
<v-col cols="12" sm="4">
|
|
<span class="text-body-2 font-weight-bold">Amount:</span>
|
|
</v-col>
|
|
<v-col cols="12" sm="8">
|
|
<span class="text-body-1 font-weight-bold">€{{ paymentInfo?.membershipFee || '50' }}/year</span>
|
|
</v-col>
|
|
</v-row>
|
|
|
|
<v-row dense v-if="paymentInfo?.iban" class="mb-2">
|
|
<v-col cols="12" sm="4">
|
|
<span class="text-body-2 font-weight-bold">IBAN:</span>
|
|
</v-col>
|
|
<v-col cols="12" sm="8">
|
|
<div class="d-flex align-center">
|
|
<span class="text-body-2 font-family-monospace mr-2">{{ paymentInfo.iban }}</span>
|
|
<v-btn
|
|
icon="mdi-content-copy"
|
|
size="x-small"
|
|
variant="text"
|
|
@click="copyToClipboard(paymentInfo.iban)"
|
|
:title="'Copy IBAN'"
|
|
/>
|
|
</div>
|
|
</v-col>
|
|
</v-row>
|
|
|
|
<v-row dense v-if="paymentInfo?.accountHolder">
|
|
<v-col cols="12" sm="4">
|
|
<span class="text-body-2 font-weight-bold">Account:</span>
|
|
</v-col>
|
|
<v-col cols="12" sm="8">
|
|
<span class="text-body-2">{{ paymentInfo.accountHolder }}</span>
|
|
</v-col>
|
|
</v-row>
|
|
|
|
<v-row dense>
|
|
<v-col cols="12" sm="4">
|
|
<span class="text-body-2 font-weight-bold">Reference:</span>
|
|
</v-col>
|
|
<v-col cols="12" sm="8">
|
|
<span class="text-body-2">Member {{ memberData?.memberId || 'Registration' }}</span>
|
|
</v-col>
|
|
</v-row>
|
|
</v-card>
|
|
</div>
|
|
|
|
<!-- Important Notes -->
|
|
<v-alert
|
|
type="info"
|
|
variant="tonal"
|
|
class="mb-4"
|
|
>
|
|
<template #title>Important Notes</template>
|
|
<ul class="text-body-2 ml-4">
|
|
<li>Check your spam folder if you don't receive the verification email within 10 minutes</li>
|
|
<li>Your membership will be activated within 2-3 business days after payment verification</li>
|
|
<li>Contact our administrators if you need assistance with the verification process</li>
|
|
</ul>
|
|
</v-alert>
|
|
|
|
<!-- Copy Notification -->
|
|
<v-snackbar
|
|
v-model="showCopyNotification"
|
|
timeout="2000"
|
|
color="success"
|
|
location="bottom"
|
|
>
|
|
IBAN copied to clipboard!
|
|
</v-snackbar>
|
|
</v-card-text>
|
|
|
|
<v-card-actions class="pa-6 pt-0">
|
|
<v-spacer />
|
|
<v-btn
|
|
variant="outlined"
|
|
@click="closeDialog"
|
|
class="mr-3"
|
|
>
|
|
Close
|
|
</v-btn>
|
|
<v-btn
|
|
color="primary"
|
|
@click="goToLogin"
|
|
>
|
|
<v-icon start>mdi-login</v-icon>
|
|
Go to Login
|
|
</v-btn>
|
|
</v-card-actions>
|
|
</v-card>
|
|
</v-dialog>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
interface Props {
|
|
modelValue: boolean;
|
|
memberData?: {
|
|
memberId: string;
|
|
email: string;
|
|
};
|
|
paymentInfo?: {
|
|
membershipFee: number;
|
|
iban: string;
|
|
accountHolder: string;
|
|
};
|
|
}
|
|
|
|
interface Emits {
|
|
(e: 'update:model-value', value: boolean): void;
|
|
(e: 'go-to-login'): void;
|
|
}
|
|
|
|
const props = defineProps<Props>();
|
|
const emit = defineEmits<Emits>();
|
|
|
|
const showCopyNotification = ref(false);
|
|
|
|
// Methods
|
|
const closeDialog = () => {
|
|
emit('update:model-value', false);
|
|
};
|
|
|
|
const goToLogin = () => {
|
|
emit('go-to-login');
|
|
closeDialog();
|
|
};
|
|
|
|
const copyToClipboard = async (text: string) => {
|
|
try {
|
|
await navigator.clipboard.writeText(text);
|
|
showCopyNotification.value = true;
|
|
} catch (error) {
|
|
console.error('Failed to copy to clipboard:', error);
|
|
// Fallback for older browsers
|
|
const textArea = document.createElement('textarea');
|
|
textArea.value = text;
|
|
document.body.appendChild(textArea);
|
|
textArea.select();
|
|
document.execCommand('copy');
|
|
document.body.removeChild(textArea);
|
|
showCopyNotification.value = true;
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.registration-success-card {
|
|
border-radius: 16px !important;
|
|
}
|
|
|
|
.bg-success {
|
|
background: linear-gradient(135deg, #4caf50 0%, #66bb6a 100%) !important;
|
|
}
|
|
|
|
.payment-info .v-card {
|
|
border-radius: 12px !important;
|
|
}
|
|
|
|
/* Timeline styling */
|
|
.v-timeline :deep(.v-timeline-item__body) {
|
|
padding-bottom: 16px;
|
|
}
|
|
|
|
.v-timeline :deep(.v-timeline-item__opposite) {
|
|
padding-inline-end: 16px;
|
|
}
|
|
|
|
/* Copy button styling */
|
|
.v-btn--size-x-small {
|
|
min-width: 24px !important;
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
|
|
/* Responsive adjustments */
|
|
@media (max-width: 600px) {
|
|
.v-card-title {
|
|
padding: 16px !important;
|
|
}
|
|
|
|
.v-card-text {
|
|
padding: 16px !important;
|
|
}
|
|
|
|
.v-card-actions {
|
|
padding: 16px !important;
|
|
padding-top: 0 !important;
|
|
}
|
|
|
|
.v-timeline :deep(.v-timeline-item__opposite) {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
/* Print styles (if user wants to print) */
|
|
@media print {
|
|
.v-card-actions {
|
|
display: none;
|
|
}
|
|
|
|
.payment-info .v-card {
|
|
border: 2px solid #ddd !important;
|
|
}
|
|
}
|
|
</style>
|