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
|