Hampus/fix/cr errors (#909)

## Describe your changes

Fixes: #

## Checklist before requesting review

- [ ] Feature/fix PRs should add one atomic (as small as possible)
feature or fix.
- [ ] The code compiles and all the tests pass.

apps/complete_registration/src/App.tsx

@@ -4,21 +4,20 @@ import { selectActiveForm } from "./store/form/form_selectors"
 import { useEffect, useRef } from "react"
 import { reverseMap } from "./utils/mapper"
 import { useDispatch } from "react-redux"
-import { setField } from "./store/form/form_slice"
+import { setErrors, setField } from "./store/form/form_slice"
 import {
-    PACKAGE_KEY,
     ProductMeta,
     loadProducts,
     pickProduct
 } from "./store/products/products_slice"
 import { DashboardScreen } from "./screens/dashboard/screen"
 import {
     RegistrationStatus,
+    setCompanyName,
     setCompanyRegistrationStatus,
     setUser
 } from "./store/company/company_slice"
-
-export const HOST = ""
+import { HOST, PACKAGE_KEY } from "./shared/vars"
 
 export function App() {
     const initialized = useRef(false)
@@ -33,19 +32,21 @@ export function App() {
             const data = await raw.json()
             dispatch(loadProducts(data))
         })
-        fetch(`${HOST}/api/registration/`, {
-            headers: new Headers({
-                "ngrok-skip-browser-warning": "69420"
-            })
-        }).then(async raw => {
+        fetch(`${HOST}/api/registration/`, {}).then(async raw => {
             const data = await raw.json()
+
+            if (data.error != null) {
+                dispatch(setErrors(data.error))
+            }
+
             const awaitingMappings = reverseMap(data)
 
             // Set status for company
             dispatch(
                 setCompanyRegistrationStatus(data.type as RegistrationStatus)
             )
-            dispatch(setUser(data.contact))
+            if (data.company?.name) dispatch(setCompanyName(data.company.name))
+            if (data.contact) dispatch(setUser(data.contact))
 
             for (const current of awaitingMappings) {
                 dispatch(
@@ -58,7 +59,7 @@ export function App() {
 
             // Apply orders
             const orders = data.orders as ProductMeta[]
-            for (const productMeta of orders) {
+            for (const productMeta of orders ?? []) {
                 dispatch(
                     pickProduct({
                         id: productMeta.product.id,

apps/complete_registration/src/forms/exhibitor_catalog/detailed.page.tsx

@@ -1,23 +1,37 @@
 import { FormWrapper } from "../FormWrapper"
 import { FormField } from "../../screens/form/FormInput"
+import { CompleteButton } from "../../shared/CompleteButton"
 
 export function DetailedFormPage() {
     return (
         <FormWrapper>
             <FormField.MultiSelect
-                label=""
+                label="Your industries"
                 mapping="exhibitor.catalogue_industries"
-                options={[
-                    {
-                        label: "First",
-                        value: "first"
-                    },
-                    {
-                        label: "Second",
-                        value: "third"
-                    }
-                ]}
+                className="w-full"
+                filter
+                optionLabel="industry"
+                optionValue="selected"
             />
+            <FormField.MultiSelect
+                label="What employment are you offering?"
+                mapping="exhibitor.catalogue_employments"
+                className="w-full"
+                filter
+                optionLabel="employment"
+                optionValue="selected"
+            />
+            <FormField.MultiSelect
+                label="Select your countries"
+                mapping="exhibitor.catalogue_locations"
+                className="w-full"
+                filter
+                optionLabel="location"
+                optionValue="selected"
+            />
+            <div className="mt-10 flex justify-center">
+                <CompleteButton />
+            </div>
         </FormWrapper>
     )
 }

apps/complete_registration/src/forms/exhibitor_catalog/form.tsx

@@ -35,7 +35,6 @@ export const form: Form = {
         {
             id: "logo",
             title: "Logo",
-            hasNextButton: false,
             pageComponent: LogoFormPage,
             fields: [
                 {
@@ -51,10 +50,19 @@ export const form: Form = {
             id: "detailed",
             title: "Exhibitor Specification",
             pageComponent: DetailedFormPage,
+            hasNextButton: false,
             fields: [
                 {
                     mapping: "exhibitor.catalogue_industries",
                     isMultiSelect: true
+                },
+                {
+                    mapping: "exhibitor.catalogue_employments",
+                    isMultiSelect: true
+                },
+                {
+                    mapping: "exhibitor.catalogue_locations",
+                    isMultiSelect: true
                 }
             ]
         }

apps/complete_registration/src/forms/exhibitor_catalog/logo.page.tsx

@@ -1,6 +1,5 @@
 import { FormWrapper } from "../FormWrapper"
 import { FormField } from "../../screens/form/FormInput"
-import { CompleteButton } from "../../shared/CompleteButton"
 
 export function LogoFormPage() {
     return (
@@ -13,10 +12,6 @@ export function LogoFormPage() {
                 mapping="exhibitor.catalogue_logo_freesize"
                 label="Company Free Sized Logo"
             />
-
-            <div className="mt-10 flex flex-1 justify-center">
-                <CompleteButton />
-            </div>
         </FormWrapper>
     )
 }

apps/complete_registration/src/forms/index.ts

@@ -14,3 +14,14 @@ export function getMutableFormsInstance() {
     }
 }
 export const FORMS = Object.freeze(getMutableFormsInstance())
+
+export function getFieldFromForm(forms: typeof FORMS, mapping: string) {
+    // Iterate over all forms and pages to find the field with the given mapping
+    for (const formMeta of Object.values(forms)) {
+        for (const page of formMeta.pages) {
+            const field = page.fields?.find(f => f.mapping == mapping) ?? 0
+            if (field) return field
+        }
+    }
+    return null
+}

apps/complete_registration/src/forms/primary/package_select.page.tsx

@@ -7,7 +7,7 @@ export function PackageSelectFormPage() {
     const packages = useSelector(selectProductPackages)
 
     return (
-        <FormWrapper>
+        <FormWrapper className="max-w-none">
             <div className="flex flex-wrap justify-center gap-5">
                 {packages.map(productPackageMeta => (
                     <FormField.Package

apps/complete_registration/src/forms/primary/summary.page.tsx

@@ -1,6 +1,6 @@
 import { Button } from "primereact/button"
 import { Checkbox } from "primereact/checkbox"
-import { useState, MouseEvent } from "react"
+import { useState, MouseEvent, useRef } from "react"
 import { useDispatch, useSelector } from "react-redux"
 import {
     selectActiveForm,
@@ -9,48 +9,57 @@ import {
 import { RootState } from "../../store/store"
 import { Card } from "../../screens/form/sidebar/PageCard"
 import { ConfirmPopup, confirmPopup } from "primereact/confirmpopup"
-import { HOST } from "../../App"
 import { setCompanyRegistrationStatus } from "../../store/company/company_slice"
 import { setActiveForm } from "../../store/form/form_slice"
+import { Toast } from "primereact/toast"
+import { HOST } from "../../shared/vars"
 
 export function SummaryFormPage() {
     const dispatch = useDispatch()
+    const toastRef = useRef<Toast>(null)
     const [confirmEligibility, setConfirmEligibility] = useState(false)
 
     const activeForm = useSelector(selectActiveForm)
     const unfilledFields = useSelector((state: RootState) =>
         selectUnfilledFields(state, activeForm?.key ?? "primary")
     )
 
-    console.log("HELLO", unfilledFields, activeForm?.key)
-
     const readyToSign = confirmEligibility && unfilledFields.length === 0
 
     async function submitRegistration() {
         const response = await fetch(`${HOST}/api/registration/submit`, {
             method: "POST"
         })
+        if (response.status < 200 || response.status >= 300) {
+            toastRef.current?.show({
+                severity: "error",
+                summary: "Error",
+                detail: "We encountered an error while submitting, if the problem persists please contact us."
+            })
+            return
+        }
+
         dispatch(setCompanyRegistrationStatus("complete_registration_signed"))
         dispatch(setActiveForm(null))
-        console.log(JSON.stringify(await response.json()))
     }
 
     const confirm = (event: MouseEvent<HTMLButtonElement>) => {
         confirmPopup({
             target: event.currentTarget,
             message: (
                 <div className="flex flex-col">
-                    <p> </p>
+                    <p>Lock your product selection</p>
                 </div>
             ),
-            icon: "pi pi-exclamation-triangle",
+            icon: "pi pi-info-circle",
             accept: submitRegistration,
             reject: () => {}
         })
     }
 
     return (
         <div className="flex flex-col items-center">
+            <Toast ref={toastRef} />
             {unfilledFields.length > 0 && (
                 <h2 className="mb-2 text-lg text-red-400">
                     Missing information

apps/complete_registration/src/forms/transport/summary.page.tsx

@@ -11,7 +11,6 @@ export function TransportSummaryFormPage() {
     const transportTo = useSelector((state: RootState) =>
         selectField(state, "exhibitor.transport_to")
     )
-    console.log(transportFrom, transportTo)
     return (
         <FormWrapper>
             <div className="flex flex-col gap-5">

apps/complete_registration/src/screens/dashboard/DashboardError.tsx

@@ -0,0 +1,39 @@
+import { useSelector } from "react-redux"
+import { selectErrors } from "../../store/form/form_selectors"
+
+const ERRORS = {
+    not_authorized: (
+        <p>
+            You are not logged in, you can{" "}
+            <a className="text-emerald-400 underline" href="/register">
+                sign in here
+            </a>
+        </p>
+    ),
+    user_did_not_sign_ir: (
+        <p>
+            You have not completed Initial Registraion please contact sales at{" "}
+            <span className="underline">[email protected]</span>
+        </p>
+    ),
+    user_is_not_exhibitor: (
+        <p>
+            You did not get picked for the fair this year, contact
+            [email protected] if you have any questions
+        </p>
+    ),
+    user_has_no_company: <p>You are not associated with any company</p>
+}
+
+export function DashboardError() {
+    const error = useSelector(selectErrors)
+
+    if (typeof error !== "string") return null
+
+    return (
+        <div className="flex h-[100vh] w-[100vw] flex-col items-center justify-center">
+            <p className="mb-4 text-4xl">Oups, something went wrong</p>
+            <div className="max-w-xl text-center">{ERRORS[error]}</div>
+        </div>
+    )
+}

apps/complete_registration/src/screens/dashboard/FormCard.tsx

@@ -44,7 +44,7 @@ export default function FormCard({
             <p className="text-xs text-slate-500">{form.description}</p>
             <div className="flex-1" />
             {form.key === "primary" && !locked && (
-                <p className="mt-2 rounded bg-yellow-500 p-1 px-3 text-white">
+                <p className="mt-4 rounded bg-yellow-500 p-1 px-3 text-white">
                     Contract has not been signed
                 </p>
             )}

apps/complete_registration/src/screens/dashboard/screen.tsx

@@ -3,29 +3,37 @@ import { cx } from "../../utils/cx"
 import FormCard from "./FormCard"
 import {
     selectCompanyProgress,
+    selectErrors,
     selectForms
 } from "../../store/form/form_selectors"
 import {
+    selectCompanyName,
     selectCompanyStatus,
     selectUser
 } from "../../store/company/company_selectors"
 import { RegistrationStatus } from "../../store/company/company_slice"
 import { FORMS } from "../../forms"
 import { Card } from "../form/sidebar/PageCard"
+import { DashboardError } from "./DashboardError"
 
 export function DashboardScreen() {
     const forms = useSelector(selectForms)
     const companyStatus = useSelector(selectCompanyStatus)
     const companyProgress = useSelector(selectCompanyProgress)
+    const selectError = useSelector(selectErrors)
+    const companyName = useSelector(selectCompanyName)
 
-    const FORM_CLOSED_DURING: Record<keyof typeof FORMS, RegistrationStatus[]> =
-        {
-            primary: ["complete_registration_signed"],
-            lunch_tickets: [],
-            exhibitor_catalog: [],
-            transport: [],
-            banquet_tickets: []
-        }
+    const FORM_OPEN_DURING: Record<keyof typeof FORMS, RegistrationStatus[]> = {
+        primary: ["complete_registration"],
+        lunch_tickets: ["complete_registration_signed"],
+        exhibitor_catalog: [
+            "complete_registration_signed",
+            "complete_registration",
+            "before_complete_registration"
+        ],
+        transport: ["complete_registration_signed"],
+        banquet_tickets: ["complete_registration_signed"]
+    }
 
     const user = useSelector(selectUser)
 
@@ -35,17 +43,9 @@ export function DashboardScreen() {
         "text-emerald-400": companyProgress <= 1
     }
 
-    if (user == null) {
-        return (
-            <div className="flex h-[100vh] w-[100vw] items-center justify-center">
-                <p>
-                    You are not logged in, you can{" "}
-                    <a className="text-emerald-400 underline" href="/register">
-                        sign in here
-                    </a>
-                </p>
-            </div>
-        )
+    // Check if root error
+    if (selectError != null && typeof selectError === "string") {
+        return <DashboardError />
     }
 
     return (
@@ -56,7 +56,7 @@ export function DashboardScreen() {
                     <div className="grid w-full grid-cols-[1fr_2fr_1fr]">
                         <div />
                         <h1 className="rounded p-2 px-8 text-center text-4xl text-emerald-400">
-                            Company AB
+                            {companyName}
                         </h1>
                     </div>
                     {user?.first_name != null && (
@@ -92,8 +92,8 @@ export function DashboardScreen() {
                                 key={key}
                                 form={formMeta}
                                 locked={
-                                    companyStatus != null &&
-                                    FORM_CLOSED_DURING[formMeta.key].includes(
+                                    companyStatus == null ||
+                                    !FORM_OPEN_DURING[formMeta.key].includes(
                                         companyStatus
                                     )
                                 }