cleanup: ckflow, order, checkout page

apps/frontend/src/lib/domains/checkout/sid.store.ts

@@ -0,0 +1,4 @@
+import { nanoid } from "nanoid/non-secure";
+import { writable } from "svelte/store";
+
+export const checkoutSessionIdStore = writable(nanoid());

apps/frontend/src/lib/domains/ckflow/data/repository.ts

@@ -435,7 +435,7 @@ export class CheckoutFlowRepository {
 				.where(eq(checkoutFlowSession.flowId, flowId))
 				.execute();
 
-			// If shadow passenger info is provided, sync it
+			// If shadow info is provided, sync it
 			if (payload.personalInfo) {
 				await this.syncPersonalInfo(flowId, payload.personalInfo);
 			}

apps/frontend/src/lib/domains/ckflow/view/ckflow.vm.svelte.ts

@@ -10,12 +10,12 @@ import {
 	type PendingActions,
 } from "$lib/domains/ckflow/data/entities";
 import type { CustomerInfoModel } from "$lib/domains/customerinfo/data";
+import { customerInfoModel } from "$lib/domains/customerinfo/data";
+import { customerInfoVM } from "$lib/domains/customerinfo/view/customerinfo.vm.svelte";
 import {
 	CheckoutStep,
 	type OrderPriceDetailsModel,
 } from "$lib/domains/order/data/entities";
-import { customerInfoModel } from "$lib/domains/passengerinfo/data/entities";
-import { passengerInfoVM } from "$lib/domains/passengerinfo/view/passenger.info.vm.svelte";
 import type { PaymentInfoPayload } from "$lib/domains/paymentinfo/data/entities";
 import { PaymentMethod } from "$lib/domains/paymentinfo/data/entities";
 import { productStore } from "$lib/domains/product/store";
@@ -529,17 +529,19 @@ export class CKFlowViewModel {
 			return;
 		}
 
-		// Get primary passenger's PII
+		const personalInfo = customerInfoVM.customerInfo;
-		const primaryPassengerInfo =
+		if (!personalInfo) {
-			passengerInfoVM.passengerInfos.length > 0
+			toast.error("Could not find customer info", {
-				? passengerInfoVM.passengerInfos[0].passengerPii
+				description: "Please try again later or contact support",
-				: undefined;
+			});
+			return;
+		}
 
 		const out = await api.ckflow.executePrePaymentStep.mutate({
 			flowId: this.flowId!,
 			payload: {
 				initialUrl: "",
-				personalInfo: primaryPassengerInfo,
+				personalInfo: personalInfo,
 			},
 		});
 

apps/frontend/src/lib/domains/order/domain/router.ts

@@ -61,7 +61,7 @@ export const orderRouter = createTRPCRouter({
 				return { error: out.error };
 			}
 
-			Logger.info(`Creating passenger infos with oid: ${out.data}`);
+			Logger.info(`Creating customer infos with oid: ${out.data}`);
 			const pOut = await pc.createPassengerInfos(
 				input.passengerInfos,
 				out.data.id,

apps/frontend/src/lib/domains/order/view/create/create.order.vm.svelte.ts

@@ -1,26 +1,20 @@
+import { billingDetailsVM } from "$lib/domains/checkout/payment-info-section/billing.details.vm.svelte";
 import { ckFlowVM } from "$lib/domains/ckflow/view/ckflow.vm.svelte";
+import { customerInfoVM } from "$lib/domains/customerinfo/view/customerinfo.vm.svelte";
 import {
 	createOrderPayloadModel,
 	OrderCreationStep,
 } from "$lib/domains/order/data/entities";
-import { passengerInfoVM } from "$lib/domains/passengerinfo/view/passenger.info.vm.svelte";
+import { productStore } from "$lib/domains/product/store";
-import type { FlightTicket } from "$lib/domains/ticket/data/entities";
 import { trpcApiStore } from "$lib/stores/api";
-import type { EmailAccountPayload } from "@pkg/logic/domains/account/data/entities";
 import { toast } from "svelte-sonner";
 import { get } from "svelte/store";
 
 export class CreateOrderViewModel {
 	orderStep = $state(OrderCreationStep.ACCOUNT_SELECTION);
 
-	accountInfo = $state<EmailAccountPayload>({ email: "", password: "" });
-	accountInfoOk = $state(false);
-
 	passengerInfosOk = $state(false);
 
-	ticketInfo = $state<FlightTicket | undefined>(undefined);
-	ticketInfoOk = $state(false);
-
 	loading = $state(true);
 
 	setStep(step: OrderCreationStep) {
@@ -74,6 +68,10 @@ export class CreateOrderViewModel {
 		}
 
 		const parsed = createOrderPayloadModel.safeParse({
+			product: get(productStore),
+			productId: get(productStore)?.id,
+			customerInfo: customerInfoVM.customerInfo,
+			paymentInfo: billingDetailsVM.billingDetails,
 			orderModel: {
 				basePrice,
 				displayPrice,
@@ -81,9 +79,6 @@ export class CreateOrderViewModel {
 				flightTicketInfoId: 0,
 				emailAccountId: 0,
 			},
-			emailAccountInfo: this.accountInfo,
-			flightTicketInfo: this.ticketInfo!,
-			passengerInfos: passengerInfoVM.passengerInfos,
 			flowId: ckFlowVM.flowId,
 		});
 		if (parsed.error) {

apps/frontend/src/routes/(main)/[pageid]/+page.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+	import Title from "$lib/components/atoms/title.svelte";
+	import { checkoutSessionIdStore } from "$lib/domains/checkout/sid.store";
 	import { onMount } from "svelte";
 	import { toast } from "svelte-sonner";
 	import type { PageData } from "./$types";
@@ -7,17 +9,37 @@
 
 	onMount(() => {
 		toast("Do the check here to then either redirect or show the error");
+		if (data.error) {
+			return;
+		}
 		setTimeout(() => {
-			toast("redirect to checkout naw");
+			if (!data.data) {
+				toast.error("An error occurred during checkout", {
+					description: "Please try again later or contact support",
+				});
+				return;
+			}
+			toast("Please hold...", {
+				description: "Preparing checkout session",
+			});
+			window.location.replace(
+				`/checkout/${$checkoutSessionIdStore}/${data.data.id}`,
+			);
 		}, 3000);
 	});
 </script>
 
-{#if data.data}
+<div class="flex w-full flex-col items-center justify-center gap-8 p-20">
+	{#if data.data}
+		<Title size="h3" weight="medium">{data.data.title}</Title>
+		<p>{data.data.description}</p>
 		<span>
-		Either show the user the product as being valid and redirecting them to
+			Either show the user the product as being valid and redirecting them
-		the checkout
+			to the checkout
 		</span>
-{:else}
+	{:else}
-	<span>Show the user an error around "page not found" or "expired link"</span>
+		<span
-{/if}
+			>Show the user an error around "page not found" or "expired link"</span
+		>
+	{/if}
+</div>

apps/frontend/src/routes/(main)/checkout/[sid]/[tid]/+page.svelte

@@ -3,18 +3,17 @@
 	import Title from "$lib/components/atoms/title.svelte";
 	import MaxWidthWrapper from "$lib/components/molecules/max-width-wrapper.svelte";
 	import Button from "$lib/components/ui/button/button.svelte";
+	import CheckoutConfirmationSection from "$lib/domains/checkout/checkout-confirmation-section.svelte";
+	import CheckoutLoadingSection from "$lib/domains/checkout/checkout-loading-section.svelte";
+	import CheckoutStepsIndicator from "$lib/domains/checkout/checkout-steps-indicator.svelte";
+	import { checkoutVM } from "$lib/domains/checkout/checkout.vm.svelte";
+	import InitialInfoSection from "$lib/domains/checkout/initial-info-section.svelte";
+	import PaymentInfoSection from "$lib/domains/checkout/payment-info-section/index.svelte";
+	import PaymentSummary from "$lib/domains/checkout/payment-summary.svelte";
+	import PaymentVerificationSection from "$lib/domains/checkout/payment-verification-section.svelte";
 	import { ckFlowVM } from "$lib/domains/ckflow/view/ckflow.vm.svelte";
 	import { CheckoutStep } from "$lib/domains/order/data/entities";
 	import { flightTicketStore } from "$lib/domains/ticket/data/store";
-	import CheckoutConfirmationSection from "$lib/domains/ticket/view/checkout/checkout-confirmation-section.svelte";
-	import CheckoutLoadingSection from "$lib/domains/ticket/view/checkout/checkout-loading-section.svelte";
-	import CheckoutStepsIndicator from "$lib/domains/ticket/view/checkout/checkout-steps-indicator.svelte";
-	import { checkoutVM } from "$lib/domains/ticket/view/checkout/checkout.vm.svelte";
-	import InitialInfoSection from "$lib/domains/ticket/view/checkout/initial-info-section.svelte";
-	import PaymentInfoSection from "$lib/domains/ticket/view/checkout/payment-info-section/index.svelte";
-	import PaymentSummary from "$lib/domains/ticket/view/checkout/payment-summary.svelte";
-	import PaymentVerificationSection from "$lib/domains/ticket/view/checkout/payment-verification-section.svelte";
-	import UpdatePriceDialog from "$lib/domains/ticket/view/checkout/update-price-dialog.svelte";
 	import { onDestroy, onMount } from "svelte";
 	import { toast } from "svelte-sonner";
 	import SearchIcon from "~icons/solar/magnifer-linear";
@@ -46,8 +45,6 @@
 	});
 </script>
 
-<UpdatePriceDialog />
-
 <div class="grid h-full w-full place-items-center">
 	<MaxWidthWrapper cls="p-4 md:p-8 lg:p-10 3xl:p-0">
 		{#if !pageData.data || !!pageData.error}