All files / app/(dynamic)/last-will/(pages)/order-confirmation page.tsx

100% Statements 10/10
100% Branches 12/12
100% Functions 2/2
100% Lines 9/9

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98                    3x               3x                   3x 3x 3x 3x 4x   3x   3x                                                                                                                          
'use client'
import Image from 'next/image'
import { useSearchParams } from 'next/navigation'
import { PaymentPlans } from '../../../../../../content/paymentPlans'
import headerBackground from '../../../../../assets/images/layout/headerBackground.jpg'
import { Route } from '../../../../../components/ButtonsAndLinks/Route/Route'
import { Headline } from '../../../../../components/Headline/Headline'
import { Icon } from '../../../../../components/Icon/Icon'
import { routes } from '../../../../../services/routes/routes'
 
const textsPaymentSucceeded = {
	header: 'Ihre Zahlung war erfolgreich!',
	subheader:
		'Vielen Dank für Ihre Zahlung. Im nächsten Schritt können Sie nun ihr generiertes Testament einsehen und abschreiben.',
	paymentStatus: 'erfolgreich',
	button: 'Testamente einsehen',
}
 
const textsPaymentFailed = {
	header: 'Die Zahlung konnte nicht durchgeführt werden',
	subheader: 'Bitte versuchen Sie, den Zahlungsvorgang erneut durchzuführen',
	paymentStatus: 'fehlgeschlagen',
	button: 'Zurück zur Produktauswahl',
}
 
/**
 * Return page after payment with stripe
 */
const OrderConfirmation = () => {
	const searchParams = useSearchParams()
	const paymentSucceeded = searchParams.get('success')
	const boughtPlanParam = searchParams.get('plan')
	const boughtPlan = PaymentPlans.find((plan) => plan.type === boughtPlanParam)
 
	const texts = paymentSucceeded == '1' ? textsPaymentSucceeded : textsPaymentFailed
 
	return (
		<>
			<header className="relative w-full">
				<Image
					height={256}
					className="absolute -z-10 h-full w-full object-cover object-top brightness-50"
					src={headerBackground}
					alt="Couple"
				/>
				<div className="mx-8 my-12 sm:mx-20 sm:my-16 md:mx-32 lg:mx-48 xl:mx-96 xl:my-24">
					<Headline className="mb-4 text-yellow">{texts.header}</Headline>
					<p className="text-base font-medium text-white sm:text-lg">{texts.subheader}</p>
				</div>
			</header>
			<main datacy={`paymentSucceeded-${paymentSucceeded}`} className="flex w-full flex-col items-center px-8">
				<div datacy="paymentSummaryTable" className="my-8 w-full space-y-2 sm:w-2/3 md:w-1/2 xl:w-1/2 2xl:w-1/3">
					<div className="flex items-center">
						<div className="mr-4 h-0.5 w-full rounded bg-gray-200" />
						<Headline datacy={`paymentSummaryTable-section-summary`} level={4} hasMargin={false}>
							Zusammenfassung
						</Headline>
						<div className="ml-4 h-0.5 w-full rounded bg-gray-200" />
					</div>
					{boughtPlan && (
						<>
							<div datacy={`plan-${boughtPlan}`} className="flex justify-between gap-2">
								<p>Produkt</p>
								<p className="flex items-center gap-1 text-end">{boughtPlan.title}</p>
							</div>
							<div className="flex justify-between gap-2">
								<p>Preis</p>
								<p className="flex items-center gap-1 text-end">{boughtPlan.price}</p>
							</div>
						</>
					)}
					<div className="flex justify-between gap-2">
						<p>Zahlungsstatus</p>
						<p className="flex items-center gap-1 text-end">
							<Icon
								icon={paymentSucceeded == '1' ? 'check_circle' : 'cancel'}
								className={`text-base ${paymentSucceeded == '1' ? 'text-green-500' : 'text-red-500'}`}
							/>
							{texts.paymentStatus}
						</p>
					</div>
				</div>
				<Route
					datacy="button-submit"
					href={paymentSucceeded == '1' ? routes.profile.myLastWills : routes.lastWill.buy()}
					icon={paymentSucceeded == '1' ? 'arrow_forward' : 'arrow_back'}
					kind="primary"
					className="mb-8"
				>
					{texts.button}
				</Route>
			</main>
		</>
	)
}
 
export default OrderConfirmation