feat(fulfillment): create and handle fulfilment request

Author: belsman

packages/modules/fulfillment/src/lib/data/fulfillment.repository.ts

@@ -3,6 +3,7 @@ import { map, Observable } from 'rxjs';
 
 import {
   FulfillmentFulfillmentReadGQL,
+  FulfillmentFulfillmentSubmitGQL,
   FulfillmentListReadGQL,
   IIoRestorecommerceResourcebaseReadRequest,
   IoRestorecommerceFulfillmentFulfillment,
@@ -13,6 +14,9 @@ import {
 export class FulfillmentRepository {
   private readonly fulfilmentListReadGQL = inject(FulfillmentListReadGQL);
   private readonly fulfillmentReadGQL = inject(FulfillmentFulfillmentReadGQL);
+  private readonly fulfillmentSubmitGQL = inject(
+    FulfillmentFulfillmentSubmitGQL
+  );
 
   list(): Observable<IoRestorecommerceFulfillmentFulfillment[]> {
     return this.fulfilmentListReadGQL
@@ -71,4 +75,32 @@ export class FulfillmentRepository {
       })
     );
   }
+
+  submit(
+    fulfillmentId: string
+  ): Observable<IoRestorecommerceFulfillmentFulfillment> {
+    return this.fulfillmentSubmitGQL
+      .mutate({
+        input: {
+          items: [
+            {
+              id: fulfillmentId,
+            },
+          ],
+        },
+      })
+      .pipe(
+        map((result) => {
+          const fulfillment =
+            result.data?.fulfillment?.fulfillment?.Submit?.details?.items?.[0]
+              ?.payload;
+
+          if (!fulfillment) {
+            throw new Error('Fulfillment not found or response is malformed');
+          }
+
+          return fulfillment as IoRestorecommerceFulfillmentFulfillment;
+        })
+      );
+  }
 }

packages/modules/fulfillment/src/lib/modules-fulfillment.module.ts

@@ -11,6 +11,7 @@ import {
   fulfillmentViewReducer,
   loadFulfillmentListEffect,
   loadFulfillmentViewEffect,
+  submitFulfillmentViewEffect,
 } from './store';
 
 @NgModule({
@@ -21,6 +22,7 @@ import {
     EffectsModule.forFeature({
       loadFulfillmentListEffect,
       loadFulfillmentViewEffect,
+      submitFulfillmentViewEffect,
     }),
   ],
 })

packages/modules/fulfillment/src/lib/store/fulfillment-view/fulfillment-view.actions.ts

@@ -22,4 +22,21 @@ export const loadFulfillmentSuccess = createAction(
 export const loadFulfillmentFailure = createAction(
   '[Fulfillment View] Load Fulfillment Failure',
   props<{ error: string }>()
-);
+);
+
+/// Actions for fulfilment.
+
+export const fulfillmentSubmitRequest = createAction(
+  '[Fulfillment View] Submit Request',
+  props<{ fulfillmentId: string }>()
+);
+
+export const fulfillmentSubmitSuccess = createAction(
+  '[Fulfillment View] Fulfillment Submit Success',
+  props<{ fulfillment: Fulfillment }>()
+);
+
+export const fulfillmentSubmitFailure = createAction(
+  '[Fulfillment View] Fulfillment Submit Failure',
+  props<{ error: string }>()
+);

packages/modules/fulfillment/src/lib/store/fulfillment-view/fulfillment-view.effects.ts

@@ -17,9 +17,9 @@ export const loadFulfillmentViewEffect = createEffect(
       ofType(FulfillmentViewActions.enterPage),
       switchMap(({ fulfillmentId }) =>
         fulfillmentsRepository.getFulfillment(fulfillmentId).pipe(
-          map((fulfillments) =>
+          map((fulfillment) =>
             FulfillmentViewActions.loadFulfillmentSuccess({
-              fulfillment: mapFulfillmentDto(fulfillments),
+              fulfillment: mapFulfillmentDto(fulfillment),
             })
           ),
           catchError((error) =>
@@ -35,3 +35,31 @@ export const loadFulfillmentViewEffect = createEffect(
   },
   { functional: true }
 );
+
+export const submitFulfillmentViewEffect = createEffect(
+  (
+    actions$ = inject(Actions),
+    fulfillmentsRepository = inject(FulfillmentRepository)
+  ) => {
+    return actions$.pipe(
+      ofType(FulfillmentViewActions.fulfillmentSubmitRequest),
+      switchMap(({ fulfillmentId }) =>
+        fulfillmentsRepository.submit(fulfillmentId).pipe(
+          map((fulfillment) =>
+            FulfillmentViewActions.fulfillmentSubmitSuccess({
+              fulfillment: mapFulfillmentDto(fulfillment),
+            })
+          ),
+          catchError((error) =>
+            of(
+              FulfillmentViewActions.fulfillmentSubmitFailure({
+                error: error.message ?? 'Failed to submit fulfillment',
+              })
+            )
+          )
+        )
+      )
+    );
+  },
+  { functional: true }
+);

packages/modules/fulfillment/src/lib/store/fulfillment-view/fulfillment-view.facade.ts

@@ -37,4 +37,10 @@ export class FulfillmentViewFacade {
       fulfillmentViewActions.loadFulfillment({ fulfillmentId })
     );
   }
+
+  submitFulfillment(fulfillmentId: string) {
+    this.store.dispatch(
+      fulfillmentViewActions.fulfillmentSubmitRequest({ fulfillmentId })
+    );
+  }
 }

packages/modules/fulfillment/src/lib/store/fulfillment-view/fulfillment-view.reducer.ts

@@ -45,5 +45,28 @@ export const fulfillmentViewReducer = createReducer(
   on(
     FulfillmentViewActions.leavePage,
     (): FulfillmentViewState => initialFulfillmentViewState
+  ),
+  on(
+    FulfillmentViewActions.fulfillmentSubmitRequest,
+    (state): FulfillmentViewState => ({
+      ...state,
+      loading: true,
+    })
+  ),
+  on(
+    FulfillmentViewActions.fulfillmentSubmitSuccess,
+    (state, { fulfillment }): FulfillmentViewState => ({
+      ...state,
+      fulfillment,
+      loading: false,
+    })
+  ),
+  on(
+    FulfillmentViewActions.fulfillmentSubmitFailure,
+    (state, { error }): FulfillmentViewState => ({
+      ...state,
+      loading: false,
+      error,
+    })
   )
 );

packages/modules/fulfillment/src/lib/ui/pages/fulfillment-view/fulfillment-view.component.ts

@@ -69,6 +69,10 @@ export class FulfillmentViewComponent implements OnInit {
   }
 
   onSubmitFulfillment() {
-    // TODO
+    const fulfillment = this.fulfillment();
+    if (fulfillment) {
+      console.log('Submiting fulfilment for id', fulfillment.id);
+      this.fulfillmentFacade.submitFulfillment(fulfillment.id);
+    }
   }
 }