feat: POC

apps/your-burguer/project.json

@@ -13,7 +13,7 @@
         "outputPath": "dist/apps/your-burguer",
         "index": "apps/your-burguer/src/index.html",
         "browser": "apps/your-burguer/src/main.ts",
-        "polyfills": ["zone.js"],
+        "polyfills": [],
         "tsConfig": "apps/your-burguer/tsconfig.app.json",
         "assets": [
           {

apps/your-burguer/src/app/_pages/choice-assistant/choice-assistant.page.component.html

@@ -0,0 +1,19 @@
+<main class="min-h-screen flex flex-col justify-between">
+  <section class="flex-grow">
+    <router-outlet />
+    <pre> {{ customerPreferencesState.snapshot | json }} </pre>
+  </section>
+
+  <footer class="sticky bottom-0">
+    <div class="justify-between">
+      <button (click)="navigator.previous()" [hidden]="!navigator.hasPrevious()"
+        class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded float-left">
+        Prev
+      </button>
+      <button (click)="navigator.next()" [hidden]="!navigator.hasNext()"
+        class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded float-right">
+        Next
+      </button>
+    </div>
+  </footer>
+</main>

apps/your-burguer/src/app/_pages/choice-assistant/choice-assistant.page.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ChoiceAssistantPageComponent } from './choice-assistant.page.component';
+
+describe('ChoiceAssistantPageComponent', () => {
+  let component: ChoiceAssistantPageComponent;
+  let fixture: ComponentFixture<ChoiceAssistantPageComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ChoiceAssistantPageComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ChoiceAssistantPageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

apps/your-burguer/src/app/_pages/choice-assistant/choice-assistant.page.component.ts

@@ -0,0 +1,18 @@
+import { Component, inject } from '@angular/core';
+import { SimpleChoicePickerComponent } from '@choice-assistant/infra/ui/simple-choice-picker/simple-choice-picker.component';
+import { RouterModule } from '@angular/router';
+import { WorkflowNavigator } from '@workflow/domain/workflow-navigator';
+import { CustomerPreferencesState } from '@choice-assistant/domain/preference/customer-preferences-state';
+import { JsonPipe } from '@angular/common';
+
+@Component({
+  selector: 'app-choice-assistant-page',
+  standalone: true,
+  imports: [RouterModule, SimpleChoicePickerComponent, JsonPipe],
+  templateUrl: './choice-assistant.page.component.html',
+  styleUrl: './choice-assistant.page.component.css',
+})
+export class ChoiceAssistantPageComponent {
+  public navigator = inject(WorkflowNavigator);
+  public customerPreferencesState = inject(CustomerPreferencesState);
+}

apps/your-burguer/src/app/_pages/choice-assistant/steps/_utils/map-ui-choices.ts

@@ -0,0 +1,12 @@
+import { CustomerPreference } from '@choice-assistant/domain/preference/customer-preference';
+import { SimpleChoice } from '@choice-assistant/infra/ui/simple-choice-picker/simple-choice-picker.component';
+
+export function mapToUiChoices(
+  preferences: CustomerPreference<any, any>[]
+): SimpleChoice[] {
+  return preferences.map((preference) => ({
+    value: preference.name,
+    displayText: preference.name,
+    icon: 'images/burguer-type/classic.png',
+  }));
+}

apps/your-burguer/src/app/_pages/choice-assistant/steps/burguer-type/adapter.ts

@@ -0,0 +1,29 @@
+import { BurguerType } from '@choice-assistant/domain/preference/burguer-type/burguer-type';
+import { SimpleChoiceConfig } from '@choice-assistant/infra/ui/simple-choice-picker/simple-choice-picker.component';
+
+export const BURGUER_TYPE_ICON_MAP = new Map<BurguerType, string>([
+  [BurguerType.CLASSIC, 'images/burguer-type/classic.png'],
+  [BurguerType.SMASH, 'images/burguer-type/smash.png'],
+  [BurguerType.VEGAN, 'images/burguer-type/vegan.png'],
+]);
+
+export const BURGUER_TYPE_CHOICE_CONFIG: SimpleChoiceConfig = {
+  choices: [
+    {
+      value: BurguerType.CLASSIC,
+      displayText: BurguerType.CLASSIC,
+      icon: BURGUER_TYPE_ICON_MAP.get(BurguerType.CLASSIC)!,
+    },
+    {
+      value: BurguerType.SMASH,
+      displayText: BurguerType.SMASH,
+      icon: BURGUER_TYPE_ICON_MAP.get(BurguerType.SMASH)!,
+    },
+    {
+      value: BurguerType.VEGAN,
+      displayText: BurguerType.VEGAN,
+      icon: BURGUER_TYPE_ICON_MAP.get(BurguerType.VEGAN)!,
+    },
+  ],
+  default: '',
+};

apps/your-burguer/src/app/_pages/choice-assistant/steps/burguer-type/burguer-type-step.component.html

@@ -0,0 +1,2 @@
+<app-simple-choice-picker [config]="config" title="Choose your favourite burguer style!"
+  (choiceChanged)="onChoiceChanged($event)" />

apps/your-burguer/src/app/_pages/choice-assistant/steps/burguer-type/burguer-type-step.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { BurguerTypeStepComponent } from './burguer-type-step.component';
+
+describe('BurguerTypeStepComponent', () => {
+  let component: BurguerTypeStepComponent;
+  let fixture: ComponentFixture<BurguerTypeStepComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [BurguerTypeStepComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(BurguerTypeStepComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

apps/your-burguer/src/app/_pages/choice-assistant/steps/burguer-type/burguer-type-step.component.ts

@@ -0,0 +1,26 @@
+import { Component, inject } from '@angular/core';
+import { BURGUER_TYPE_CHOICE_CONFIG } from './adapter';
+import {
+  SimpleChoice,
+  SimpleChoicePickerComponent,
+} from '@choice-assistant/infra/ui/simple-choice-picker/simple-choice-picker.component';
+import { CustomerPreferencesState } from '@choice-assistant/domain/preference/customer-preferences-state';
+import { BurguerType } from '@choice-assistant/domain/preference/burguer-type/burguer-type';
+
+@Component({
+  selector: 'app-burguer-type-step',
+  standalone: true,
+  imports: [SimpleChoicePickerComponent],
+  templateUrl: './burguer-type-step.component.html',
+  styleUrl: './burguer-type-step.component.css',
+})
+export class BurguerTypeStepComponent {
+  private readonly customerPreferencesState = inject(CustomerPreferencesState);
+  config = BURGUER_TYPE_CHOICE_CONFIG;
+
+  onChoiceChanged(choice: SimpleChoice) {
+    this.customerPreferencesState.patch({
+      burguerType: choice.value as BurguerType,
+    });
+  }
+}

apps/your-burguer/src/app/_pages/choice-assistant/steps/delivery/adapter.ts

@@ -0,0 +1,29 @@
+import { Delivery } from '@choice-assistant/domain/preference/delivery/delivery';
+import { SimpleChoiceConfig } from '@choice-assistant/infra/ui/simple-choice-picker/simple-choice-picker.component';
+
+export const DELIVERY_ICON_MAP = new Map<Delivery, string>([
+  [Delivery.IN_SITE, 'images/delivery/in-site.png'],
+  [Delivery.PICK_UP, 'images/delivery/pick-up.png'],
+  [Delivery.DELIVERY, 'images/delivery/delivery.png'],
+]);
+
+export const DELIVERY_CHOICE_CONFIG: SimpleChoiceConfig = {
+  choices: [
+    {
+      value: Delivery.IN_SITE,
+      displayText: Delivery.IN_SITE,
+      icon: DELIVERY_ICON_MAP.get(Delivery.IN_SITE)!,
+    },
+    {
+      value: Delivery.PICK_UP,
+      displayText: Delivery.PICK_UP,
+      icon: DELIVERY_ICON_MAP.get(Delivery.PICK_UP)!,
+    },
+    {
+      value: Delivery.DELIVERY,
+      displayText: Delivery.DELIVERY,
+      icon: DELIVERY_ICON_MAP.get(Delivery.DELIVERY)!,
+    },
+  ],
+  default: '',
+};

apps/your-burguer/src/app/_pages/choice-assistant/steps/delivery/delivery-step.component.html

@@ -0,0 +1 @@
+<app-simple-choice-picker [config]="config" title="Delivery" (choiceChanged)="onChoiceChanged($event)" />

apps/your-burguer/src/app/_pages/choice-assistant/steps/delivery/delivery-step.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { DeliveryStepComponent } from './delivery-step.component';
+
+describe('DeliveryStepComponent', () => {
+  let component: DeliveryStepComponent;
+  let fixture: ComponentFixture<DeliveryStepComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [DeliveryStepComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(DeliveryStepComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

apps/your-burguer/src/app/_pages/choice-assistant/steps/delivery/delivery-step.component.ts

@@ -0,0 +1,28 @@
+import { Component, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { DELIVERY_CHOICE_CONFIG } from './adapter';
+import {
+  SimpleChoice,
+  SimpleChoicePickerComponent,
+} from '@choice-assistant/infra/ui/simple-choice-picker/simple-choice-picker.component';
+import { CustomerPreferencesState } from '@choice-assistant/domain/preference/customer-preferences-state';
+import { Delivery } from '@choice-assistant/domain/preference/delivery/delivery';
+
+@Component({
+  selector: 'app-delivery-step',
+  standalone: true,
+  imports: [CommonModule, SimpleChoicePickerComponent],
+  templateUrl: './delivery-step.component.html',
+  styleUrl: './delivery-step.component.css',
+})
+export class DeliveryStepComponent {
+  private readonly customerPreferencesState = inject(CustomerPreferencesState);
+
+  config = DELIVERY_CHOICE_CONFIG;
+
+  onChoiceChanged(choice: SimpleChoice) {
+    this.customerPreferencesState.patch({
+      delivery: choice.value as Delivery,
+    });
+  }
+}

apps/your-burguer/src/app/app.component.ts

@@ -1,14 +1,10 @@
 import { Component } from '@angular/core';
-import { RouterModule } from '@angular/router';
-import { NxWelcomeComponent } from './nx-welcome.component';
+import { ShellComponent } from './shell/shell.component';
 
 @Component({
   standalone: true,
-  imports: [NxWelcomeComponent, RouterModule],
+  imports: [ShellComponent],
   selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrl: './app.component.css',
+  template: `<app-shell />`,
 })
-export class AppComponent {
-  title = 'your-burguer';
-}
+export class AppComponent {}

apps/your-burguer/src/app/app.config.ts

@@ -1,10 +1,20 @@
-import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
+import {
+  ApplicationConfig,
+  importProvidersFrom,
+  provideExperimentalZonelessChangeDetection,
+} from '@angular/core';
 import { provideRouter } from '@angular/router';
 import { appRoutes } from './app.routes';
+import { WorkflowModule } from '@workflow/workflow.module';
+import { ChoiceAssistantModule } from '@choice-assistant/choice-assistant.module';
 
 export const appConfig: ApplicationConfig = {
   providers: [
-    provideZoneChangeDetection({ eventCoalescing: true }),
+    provideExperimentalZonelessChangeDetection(),
     provideRouter(appRoutes),
+    importProvidersFrom(
+      WorkflowModule.forRoot(),
+      ChoiceAssistantModule.forRoot()
+    ),
   ],
 };

apps/your-burguer/src/app/app.routes.ts

@@ -1,3 +1,32 @@
 import { Route } from '@angular/router';
 
-export const appRoutes: Route[] = [];
+export const appRoutes: Route[] = [
+  {
+    path: '',
+    redirectTo: 'choice-assistant/burguer-type',
+    pathMatch: 'full',
+  },
+  {
+    path: 'choice-assistant',
+    loadComponent: () =>
+      import('./_pages/choice-assistant/choice-assistant.page.component').then(
+        (c) => c.ChoiceAssistantPageComponent
+      ),
+    children: [
+      {
+        path: 'burguer-type',
+        loadComponent: () =>
+          import(
+            './_pages/choice-assistant/steps/burguer-type/burguer-type-step.component'
+          ).then((c) => c.BurguerTypeStepComponent),
+      },
+      {
+        path: 'delivery',
+        loadComponent: () =>
+          import(
+            './_pages/choice-assistant/steps/delivery/delivery-step.component'
+          ).then((c) => c.DeliveryStepComponent),
+      },
+    ],
+  },
+];

apps/your-burguer/src/app/choice-assistant/choice-assistant.module.ts

@@ -0,0 +1,12 @@
+import { ModuleWithProviders, NgModule } from '@angular/core';
+import { CustomerPreferencesState } from './domain/preference/customer-preferences-state';
+
+@NgModule()
+export class ChoiceAssistantModule {
+  static forRoot(): ModuleWithProviders<ChoiceAssistantModule> {
+    return {
+      ngModule: ChoiceAssistantModule,
+      providers: [CustomerPreferencesState],
+    };
+  }
+}

apps/your-burguer/src/app/choice-assistant/domain/choice-assistant.ts

@@ -0,0 +1,10 @@
+import { Choice } from './choice';
+
+export class ChoiceAssistant {
+  async getChoice(): Promise<Choice> {
+    return {
+      id: 'uuid',
+      burguer: 'GOIKO SMASH',
+    };
+  }
+}

apps/your-burguer/src/app/choice-assistant/domain/choice.ts

@@ -0,0 +1,4 @@
+export interface Choice {
+  id: string;
+  burguer: string;
+}