code cleanups and success page

src/dictionaries/en.ts

@@ -20,4 +20,7 @@ export const englishStringTable: StringTable = {
     PAYMENT_EXPIRATION_DATE: "Expiration date",
     PAYMENT_FINALISE: "Finalise Transaction",
     PAYMENT_BACK: "Back to checkout",
+    CHECKOUT_SUCCESS_IMAGE_ALT: "Ticket bought successfully",
+    CHECKOUT_SUCCESS_TITLE: "Ticket bought successfully",
+    CHECKOUT_SUCCESS_NAME: "Name:"
 };

src/dictionaries/index.ts

@@ -23,6 +23,9 @@ export type StringTable = {
     PAYMENT_EXPIRATION_DATE: string;
     PAYMENT_FINALISE: string;
     PAYMENT_BACK: string;
+    CHECKOUT_SUCCESS_IMAGE_ALT: string;
+    CHECKOUT_SUCCESS_TITLE: string;
+    CHECKOUT_SUCCESS_NAME: string;
 };
 
 export const useDictionary = () => {

src/dictionaries/pl.ts

@@ -20,4 +20,7 @@ export const polishStringTable: StringTable = {
     PAYMENT_EXPIRATION_DATE:  "Data wygaśnięcia karty",
     PAYMENT_FINALISE: "Zakończ transakcję",
     PAYMENT_BACK: "Powrót do zewnętrznego szachu",
+    CHECKOUT_SUCCESS_IMAGE_ALT: "Zakup biletu zakończony",
+    CHECKOUT_SUCCESS_TITLE: "Bilet został kupiony",
+    CHECKOUT_SUCCESS_NAME: "Imię i nazwisko:"
 };

src/pages/checkout/index.module.scss

@@ -1,8 +1,3 @@
-.head {
-    color: var(--accent);
-    font-weight: 500;
-}
-
 .page {
     width: 100%;
     min-height: 100vh;
@@ -18,67 +13,61 @@
         background-color: var(--background);
         padding: 60px;
         box-sizing: border-box;
-        width: 60%;
-        height: 75%;
-        display: flex;
-        flex-direction: column;
-        gap: 10px;
-        align-items: center;
-        justify-content: space-evenly;
+        width: 100%;
+        max-width: 60%;
 
-        .div {
+        .successImg {
+            width: 100%;
+            max-width: 300px;
+        }
+
+        .inputContainer {
             gap: 20px;
             display: flex;
             flex-direction: column;
-            flex-wrap: nowrap;
-        }
-    }
-}
+            align-items: center;
 
-.input {
-    padding: 10px;
-    width: 100%;
-    font-size: 1.5rem;
-    border-radius: 45px;
-    border-color: var(--accent);
-    background-color: var(--backgroundDarker);
-    color: var(--text);
-}
-
-.input_box1 {
-    box-sizing: border-box;
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    justify-content: stretch;
-    flex-direction: row;
-    align-items: center;
-    gap: 30px;
-}
-
-.input_box2 {
-    box-sizing: border-box;
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    justify-content: stretch;
-    flex-direction: row;
-    align-items: center;
-    gap: 20px;
-}
-
-@media (max-width: 1024px) {
-    .input_box1,
-    .input_box2 {
-        gap: 20px;
-        display: flex;
-        flex-direction: column;
-    }
-    .page {
-        .form {
-            padding: 30px;
-            width: 80%;
-
-            form {
-                width: 100%;
+            h1 {
+                color: var(--accent);
+                font-weight: 500;
+                text-align: center;
+            }
+            .input_box1 {
+                box-sizing: border-box;
+                display: grid;
+                grid-template-columns: repeat(2, 1fr);
+                justify-content: stretch;
+                flex-direction: row;
+                align-items: center;
+                gap: 30px;
+            }
+            .input_box2 {
+                box-sizing: border-box;
+                display: grid;
+                grid-template-columns: repeat(3, 1fr);
+                justify-content: stretch;
+                flex-direction: row;
+                align-items: center;
+                gap: 20px;
+            }
+        }
+    }
+}
+
+@media (max-width: 1024px) {
+    .page {
+        .form {
+            padding: 30px;
+            width: 100%;
+            max-width: 80%;
+
+            .inputContainer {
+                .input_box1,
+                .input_box2 {
+                    gap: 20px;
+                    display: flex;
+                    flex-direction: column;
+                }
             }
         }
     }

src/pages/checkout/index.tsx

@@ -1,4 +1,4 @@
-import { Component, createSignal, type Setter } from "solid-js";
+import { Component, createSignal, Show, type Setter } from "solid-js";
 import style from "./index.module.scss";
 import { useDictionary } from "../../dictionaries";
 import { FormInput } from "../../components/FormInput";
@@ -10,7 +10,8 @@ const CheckoutForm: Component<FormProps> = (props) => {
     const konstantyn = useDictionary();
 
     return (
-        <div class={style.div} style={{ display: props.visible ? "flex" : "none" }}>
+        <div class={style.inputContainer} style={{ display: props.visible ? "flex" : "none" }}>
+            <h1>{konstantyn()["CHECKOUT_TITLE"]}</h1>
             <div class={style.input_box1}>
                 <FormInput
                     name="first_name"
@@ -56,7 +57,8 @@ const PaymentForm: Component<FormProps> = (props) => {
     const konstantyn = useDictionary();
 
     return (
-        <div class={style.div} style={{ display: props.visible ? "flex" : "none" }}>
+        <div class={style.inputContainer} style={{ display: props.visible ? "flex" : "none" }}>
+            <h1>{konstantyn()["PAYMENT_TITLE"]}</h1>
             <div class={style.input_box2}>
                 <FormInput
                     name="card_number"
@@ -87,26 +89,42 @@ const PaymentForm: Component<FormProps> = (props) => {
         </div>
     );
 };
+const CheckoutSuccess: Component = () => {
+    const params = new URLSearchParams(window.location.search);
+    const st = useDictionary();
+
+    return (
+        <div class={style.inputContainer}>
+            <h1>{st()["CHECKOUT_SUCCESS_TITLE"]}</h1>
+            <img
+                src={"/success.png"}
+                alt={st()["CHECKOUT_SUCCESS_IMAGE_ALT"]}
+                class={style.successImg}
+            />
+            <p>
+                {st()["CHECKOUT_SUCCESS_NAME"]}{" "}
+                <strong>{`${params.get("first_name")} ${params.get("last_name")}`}</strong>
+            </p>
+        </div>
+    );
+};
 
 export const Checkout: Component = () => {
-    const konstantyn = useDictionary();
+    const isSuccess = window.location.search.includes("card_number");
 
     const [formState, setFormState] = createSignal(0);
 
-    if (window.location.search.includes("card_number")) {
-        const params = new URLSearchParams(window.location.search);
-        // TODO add success page
-        return <></>;
-    }
-
     return (
         <div class={style.page}>
             <form class={style.form}>
-                <h1 class={style.head}>
-                    {konstantyn()[formState() === 0 ? "CHECKOUT_TITLE" : "PAYMENT_TITLE"]}
-                </h1>
-                <CheckoutForm stateSetter={setFormState} visible={formState() === 0} />
-                <PaymentForm stateSetter={setFormState} visible={formState() === 1} />
+                <Show when={isSuccess}>
+                    <CheckoutSuccess />
+                </Show>
+                <CheckoutForm
+                    stateSetter={setFormState}
+                    visible={formState() === 0 && !isSuccess}
+                />
+                <PaymentForm stateSetter={setFormState} visible={formState() === 1 && !isSuccess} />
             </form>
         </div>
     );

src/pages/success/index.module.scss

@@ -1,13 +0,0 @@
-.page {
-    width: 100%;
-    min-height: 100vh;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-size: cover;
-}
-
-.Success{
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-}

src/pages/success/index.tsx

@@ -1,11 +0,0 @@
-import { Component } from "solid-js";
-import style from "./index.module.scss";
-import { useDictionary } from "../../dictionaries";
-import { useNavigate } from "@solidjs/router";
-
-export const Success: Component = () => {
-
-    return(
-<div class={style.page}>a</div>
-    );
-}