feat: success and error handling (#358)

AtB-AS · Sep 26, 2024 · 5ab1925 · 5ab1925
1 parent 96e0630
commit 5ab1925
Show file tree

Hide file tree

Showing 6 changed files with 41 additions and 7 deletions.
diff --git a/src/page-modules/contact/means-of-transport/index.tsx b/src/page-modules/contact/means-of-transport/index.tsx
@@ -83,9 +83,9 @@ export const MeansOfTransportContent = () => {
           title={t(PageText.Contact.submit)}
           mode={'interactive_0--bordered'}
           buttonProps={{ type: 'submit' }}
+          state={state.matches('submitting') ? 'loading' : undefined}
         />
       )}
-      {state.hasTag('success') && <div>success!</div>}
     </form>
   );
 };

diff --git a/src/page-modules/contact/means-of-transport/means-of-transport-form-machine.ts b/src/page-modules/contact/means-of-transport/means-of-transport-form-machine.ts
@@ -84,6 +84,12 @@ export const meansOfTransportFormMachine = setup({
       }
       return context;
     }),
+    navigateToErrorPage: () => {
+      window.location.href = '/contact/error';
+    },
+    navigateToSuccessPage: () => {
+      window.location.href = '/contact/success';
+    },
   },
   actors: {
     submit: fromPromise(
@@ -229,12 +235,17 @@ export const meansOfTransportFormMachine = setup({
         },
 
         onError: {
-          target: 'editing',
+          target: 'error',
         },
       },
     },
 
     success: {
+      entry: 'navigateToSuccessPage',
+      type: 'final',
+    },
+    error: {
+      entry: 'navigateToErrorPage',
       type: 'final',
     },
   },

diff --git a/src/page-modules/contact/ticket-control/index.tsx b/src/page-modules/contact/ticket-control/index.tsx
@@ -66,9 +66,9 @@ const TicketControlPageContent = () => {
           title={t(PageText.Contact.submit)}
           mode={'interactive_0--bordered'}
           buttonProps={{ type: 'submit' }}
+          state={state.matches('submitting') ? 'loading' : undefined}
         />
       )}
-      {state.matches('success') && <div>success!</div>}
     </form>
   );
 };

diff --git a/src/page-modules/contact/ticket-control/ticket-control-form-machine.ts b/src/page-modules/contact/ticket-control/ticket-control-form-machine.ts
@@ -192,7 +192,12 @@ export const ticketControlFormMachine = setup({
     cleanErrorMessages: assign({
       errorMessages: () => ({}),
     }),
-
+    navigateToErrorPage: () => {
+      window.location.href = '/contact/error';
+    },
+    navigateToSuccessPage: () => {
+      window.location.href = '/contact/success';
+    },
     onInputChange: assign(({ context, event }) => {
       if (event.type === 'ON_INPUT_CHANGE') {
         const { inputName, value } = event;
@@ -356,12 +361,17 @@ export const ticketControlFormMachine = setup({
         },
 
         onError: {
-          target: 'editing',
+          target: 'error',
         },
       },
     },
 
     success: {
+      entry: 'navigateToSuccessPage',
+      type: 'final',
+    },
+    error: {
+      entry: 'navigateToErrorPage',
       type: 'final',
     },
   },

diff --git a/src/page-modules/contact/travel-guarantee/index.tsx b/src/page-modules/contact/travel-guarantee/index.tsx
@@ -445,6 +445,7 @@ export const RefundForm = () => {
             title={t(PageText.Contact.submit)}
             mode={'interactive_0--bordered'}
             buttonProps={{ type: 'submit' }}
+            state={state.matches('submitting') ? 'loading' : undefined}
           />
         </div>
       )}

diff --git a/src/page-modules/contact/travel-guarantee/travelGuaranteeFormMachine.ts b/src/page-modules/contact/travel-guarantee/travelGuaranteeFormMachine.ts
@@ -65,9 +65,16 @@ export const fetchMachine = setup({
       },
     }),
 
+    navigateToErrorPage: () => {
+      window.location.href = '/contact/error';
+    },
+    navigateToSuccessPage: () => {
+      window.location.href = '/contact/success';
+    },
+
     onInputChange: assign(({ context, event }) => {
       if (event.type === 'ON_INPUT_CHANGE') {
-        const { inputName, value } = event;
+        let { inputName, value } = event;
         context.errorMessages[inputName] = [];
         return {
           ...context,
@@ -246,12 +253,17 @@ export const fetchMachine = setup({
         },
 
         onError: {
-          target: 'editing',
+          target: 'error',
         },
       },
     },
 
     success: {
+      entry: 'navigateToSuccessPage',
+      type: 'final',
+    },
+    error: {
+      entry: 'navigateToErrorPage',
       type: 'final',
     },
   },