Many an update!
This commit is contained in:
parent
85195d6c7a
commit
d588c49946
35 changed files with 3528 additions and 1142 deletions
|
|
@ -4,7 +4,7 @@
|
|||
<PageHeader
|
||||
v-if="!isAuthenticated"
|
||||
title="Join Ghost Guild"
|
||||
subtitle="Become a member of our community and start building a more worker-centric future for games."
|
||||
subtitle=""
|
||||
theme="gray"
|
||||
size="large"
|
||||
/>
|
||||
|
|
@ -16,6 +16,27 @@
|
|||
size="large"
|
||||
/>
|
||||
|
||||
<!-- How Ghost Guild Works -->
|
||||
<section class="py-20 bg-[--ui-bg-elevated]">
|
||||
<UContainer>
|
||||
<div class="max-w-2xl">
|
||||
<h2 class="text-3xl font-bold text-[--ui-text] mb-6">
|
||||
How Membership Works
|
||||
</h2>
|
||||
<p class="text-lg text-[--ui-text] mb-4">
|
||||
Every member gets full access to our resource library, workshops,
|
||||
events, Slack community, and peer support. Your circle connects you
|
||||
with other folks and resources for your stage.
|
||||
</p>
|
||||
<p class="text-lg text-[--ui-text]">
|
||||
Contribute what you can afford ($0–50+/month). Higher contributions
|
||||
create solidarity spots for those who need them. You can adjust
|
||||
anytime.
|
||||
</p>
|
||||
</div>
|
||||
</UContainer>
|
||||
</section>
|
||||
|
||||
<!-- Membership Sign Up Form -->
|
||||
<section v-if="!isAuthenticated" class="py-20 bg-[--ui-bg]">
|
||||
<UContainer class="max-w-4xl">
|
||||
|
|
@ -23,11 +44,6 @@
|
|||
<h2 class="text-3xl font-bold text-[--ui-text] mb-4">
|
||||
Membership Sign Up
|
||||
</h2>
|
||||
<p class="text-lg text-[--ui-text]">
|
||||
Choose your circle to connect with others at your stage. Choose your
|
||||
contribution based on what you can afford. Everyone gets full
|
||||
access.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Step Indicators -->
|
||||
|
|
@ -385,123 +401,6 @@
|
|||
</div>
|
||||
</UContainer>
|
||||
</section>
|
||||
|
||||
<!-- How Ghost Guild Works -->
|
||||
<section class="py-20 bg-[--ui-bg-elevated]">
|
||||
<UContainer>
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<div class="text-center mb-12">
|
||||
<h2 class="text-3xl font-bold text-[--ui-text] mb-4">
|
||||
How Ghost Guild Works
|
||||
</h2>
|
||||
<p class="text-lg text-[--ui-text]">
|
||||
Every member gets everything. Your circle helps you find relevant
|
||||
content and peers. Your contribution helps sustain our solidarity
|
||||
economy.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
<!-- Full Access -->
|
||||
<div class="bg-[--ui-bg] rounded-xl p-6">
|
||||
<h3 class="text-xl font-semibold mb-4 text-[--ui-text]">
|
||||
Full Access
|
||||
</h3>
|
||||
<ul class="text-[--ui-text] space-y-2">
|
||||
<li>Complete resource library</li>
|
||||
<li>All workshops and events</li>
|
||||
<li>Slack community</li>
|
||||
<li>Voting rights</li>
|
||||
<li>Peer support opportunities</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Circle-Specific Guidance -->
|
||||
<div class="bg-[--ui-bg] rounded-xl p-6">
|
||||
<h3 class="text-xl font-semibold mb-4 text-[--ui-text]">
|
||||
Circle-Specific Guidance
|
||||
</h3>
|
||||
<ul class="text-[--ui-text] space-y-2">
|
||||
<li>Resources for your stage</li>
|
||||
<li>Connection with peers</li>
|
||||
<li>Workshop recommendations</li>
|
||||
<li>Support for your challenges</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</UContainer>
|
||||
</section>
|
||||
|
||||
<!-- How to Join -->
|
||||
<section class="py-20 bg-[--ui-bg]">
|
||||
<UContainer>
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<div class="space-y-8">
|
||||
<div class="flex items-start gap-6">
|
||||
<div class="flex-shrink-0">
|
||||
<div
|
||||
class="w-12 h-12 bg-neutral-900 rounded-full flex items-center justify-center text-neutral-50 font-bold text-xl"
|
||||
>
|
||||
1
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h3 class="text-xl font-semibold mb-2 text-[--ui-text]">
|
||||
Pick your circle
|
||||
</h3>
|
||||
<p class="text-[--ui-text]">
|
||||
Where are you in your co-op journey? Select based on where you
|
||||
are in your cooperative journey - exploring, building, or
|
||||
practicing. Not sure? Start with Community.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start gap-6">
|
||||
<div class="flex-shrink-0">
|
||||
<div
|
||||
class="w-12 h-12 bg-neutral-900 rounded-full flex items-center justify-center text-neutral-50 font-bold text-xl"
|
||||
>
|
||||
2
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h3 class="text-xl font-semibold mb-2 text-[--ui-text]">
|
||||
Choose your contribution
|
||||
</h3>
|
||||
<p class="text-[--ui-text]">
|
||||
What can you afford? ($0-50+/month) Choose based on your
|
||||
financial capacity. From $0 for those who need support to $50+
|
||||
for those who can sponsor others. You can adjust anytime.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start gap-6">
|
||||
<div class="flex-shrink-0">
|
||||
<div
|
||||
class="w-12 h-12 bg-neutral-900 rounded-full flex items-center justify-center text-neutral-50 font-bold text-xl"
|
||||
>
|
||||
3
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h3 class="text-xl font-semibold mb-2 text-[--ui-text]">
|
||||
Join the community
|
||||
</h3>
|
||||
<p class="text-[--ui-text]">
|
||||
Get access to everything. Fill out your profile, agree to our
|
||||
community guidelines, and complete payment (if applicable).
|
||||
You'll get access to our community as soon as we review your
|
||||
application.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</UContainer>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -598,7 +497,6 @@ const handleSubmit = async () => {
|
|||
});
|
||||
|
||||
if (response.success) {
|
||||
console.log("Customer response:", response);
|
||||
customerId.value = response.customerId;
|
||||
customerCode.value = response.customerCode;
|
||||
|
||||
|
|
@ -608,13 +506,6 @@ const handleSubmit = async () => {
|
|||
// Move to next step
|
||||
if (needsPayment.value) {
|
||||
currentStep.value = 2;
|
||||
// Debug log
|
||||
console.log(
|
||||
"Customer ID:",
|
||||
customerId.value,
|
||||
"Customer Code:",
|
||||
customerCode.value,
|
||||
);
|
||||
// Initialize HelcimPay.js session for card verification
|
||||
await initializeHelcimPay(customerId.value, customerCode.value, 0);
|
||||
} else {
|
||||
|
|
@ -623,9 +514,9 @@ const handleSubmit = async () => {
|
|||
// Check member status to ensure user is properly authenticated
|
||||
await checkMemberStatus();
|
||||
|
||||
// Automatically redirect to dashboard after a short delay
|
||||
// Automatically redirect to welcome page after a short delay
|
||||
setTimeout(() => {
|
||||
navigateTo("/member/dashboard");
|
||||
navigateTo("/welcome");
|
||||
}, 3000); // 3 second delay to show success message
|
||||
}
|
||||
}
|
||||
|
|
@ -642,21 +533,16 @@ const handleSubmit = async () => {
|
|||
const processPayment = async () => {
|
||||
if (isSubmitting.value) return;
|
||||
|
||||
console.log("Starting payment process...");
|
||||
isSubmitting.value = true;
|
||||
errorMessage.value = "";
|
||||
|
||||
try {
|
||||
console.log("Calling verifyPayment()...");
|
||||
// Verify payment through HelcimPay.js
|
||||
const paymentResult = await verifyPayment();
|
||||
console.log("Payment result from HelcimPay:", paymentResult);
|
||||
|
||||
if (paymentResult.success) {
|
||||
paymentToken.value = paymentResult.cardToken;
|
||||
console.log("Payment successful, cardToken:", paymentResult.cardToken);
|
||||
|
||||
console.log("Calling verify-payment endpoint...");
|
||||
// Verify payment on server
|
||||
const verifyResult = await $fetch("/api/helcim/verify-payment", {
|
||||
method: "POST",
|
||||
|
|
@ -665,9 +551,7 @@ const processPayment = async () => {
|
|||
customerId: customerId.value,
|
||||
},
|
||||
});
|
||||
console.log("Payment verification result:", verifyResult);
|
||||
|
||||
console.log("Calling createSubscription...");
|
||||
// Create subscription (don't let subscription errors prevent form progression)
|
||||
const subscriptionResult = await createSubscription(
|
||||
paymentResult.cardToken,
|
||||
|
|
@ -686,12 +570,6 @@ const processPayment = async () => {
|
|||
}
|
||||
} catch (error) {
|
||||
console.error("Payment process error:", error);
|
||||
console.error("Error details:", {
|
||||
message: error.message,
|
||||
statusCode: error.statusCode,
|
||||
statusMessage: error.statusMessage,
|
||||
data: error.data,
|
||||
});
|
||||
errorMessage.value =
|
||||
error.message || "Payment verification failed. Please try again.";
|
||||
} finally {
|
||||
|
|
@ -702,12 +580,6 @@ const processPayment = async () => {
|
|||
// Create subscription
|
||||
const createSubscription = async (cardToken = null) => {
|
||||
try {
|
||||
console.log("Creating subscription with:", {
|
||||
customerId: customerId.value,
|
||||
contributionTier: form.contributionTier,
|
||||
cardToken: cardToken ? "present" : "null",
|
||||
});
|
||||
|
||||
const response = await $fetch("/api/helcim/subscription", {
|
||||
method: "POST",
|
||||
body: {
|
||||
|
|
@ -718,20 +590,17 @@ const createSubscription = async (cardToken = null) => {
|
|||
},
|
||||
});
|
||||
|
||||
console.log("Subscription creation response:", response);
|
||||
|
||||
if (response.success) {
|
||||
subscriptionData.value = response.subscription;
|
||||
console.log("Moving to step 3 - success!");
|
||||
currentStep.value = 3;
|
||||
successMessage.value = "Your membership has been activated successfully!";
|
||||
|
||||
// Check member status to ensure user is properly authenticated
|
||||
await checkMemberStatus();
|
||||
|
||||
// Automatically redirect to dashboard after a short delay
|
||||
// Automatically redirect to welcome page after a short delay
|
||||
setTimeout(() => {
|
||||
navigateTo("/member/dashboard");
|
||||
navigateTo("/welcome");
|
||||
}, 3000); // 3 second delay to show success message
|
||||
} else {
|
||||
throw new Error("Subscription creation failed - response not successful");
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue