refactor: extract semantic methods & add missing assets

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

@@ -7,13 +7,13 @@
   <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">
+        class="text-gray-900 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-100 font-medium rounded-lg px-5 py-2.5 me-2 mb-2 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:focus:ring-gray-700 m-4 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">
+        class="text-white bg-gradient-to-r from-purple-500 via-purple-600 to-purple-700 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-purple-300 dark:focus:ring-purple-800 shadow-lg shadow-purple-500/50 dark:shadow-lg dark:shadow-purple-800/80 font-medium rounded-lg px-5 py-2.5 text-center m-4 float-right">
         Next
       </button>
     </div>
   </footer>
-</main>
+</main>

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

@@ -19,8 +19,8 @@ export class BurguerTypeStepComponent {
   config = BURGUER_TYPE_CHOICE_CONFIG;
 
   onChoiceChanged(choice: SimpleChoice) {
-    this.customerPreferencesState.patch({
-      burguerType: choice.value as BurguerType,
-    });
+    this.customerPreferencesState.toggleBurguerType(
+      choice.value as BurguerType
+    );
   }
 }

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

@@ -20,8 +20,6 @@ export class DeliveryStepComponent {
   config = DELIVERY_CHOICE_CONFIG;
 
   onChoiceChanged(choice: SimpleChoice) {
-    this.customerPreferencesState.patch({
-      delivery: choice.value as Delivery,
-    });
+    this.customerPreferencesState.toggleDelivery(choice.value as Delivery);
   }
 }

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

@@ -20,8 +20,6 @@ export class GarnishStepComponent {
   config = GARNISH_CHOICE_CONFIG;
 
   onChoiceChanged(choice: SimpleChoice) {
-    this.customerPreferencesState.patch({
-      garnish: choice.value as Garnish,
-    });
+    this.customerPreferencesState.toggleGarnish(choice.value as Garnish);
   }
 }

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

@@ -20,8 +20,6 @@ export class HighlightsStepComponent {
   config = HIGHLIGHTS_CHOICE_CONFIG;
 
   onChoiceChanged(choice: SimpleChoice) {
-    this.customerPreferencesState.patch({
-      highlights: choice.value as Highlights,
-    });
+    this.customerPreferencesState.toggleHighlights(choice.value as Highlights);
   }
 }

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

@@ -1,5 +1,4 @@
 import { Component, inject } from '@angular/core';
-import { CommonModule } from '@angular/common';
 import {
   SimpleChoice,
   SimpleChoicePickerComponent,
@@ -21,8 +20,8 @@ export class IntolerancesStepComponent {
   config = INTOLERANCES_CHOICE_CONFIG;
 
   onChoiceChanged(choice: SimpleChoice) {
-    this.customerPreferencesState.patch({
-      intolerances: choice.value as Intolerances,
-    });
+    this.customerPreferencesState.toggleIntolerances(
+      choice.value as Intolerances
+    );
   }
 }

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

@@ -20,8 +20,6 @@ export class ModeStepComponent {
   config = MODE_CHOICE_CONFIG;
 
   onChoiceChanged(choice: SimpleChoice) {
-    this.customerPreferencesState.patch({
-      mode: choice.value as Mode,
-    });
+    this.customerPreferencesState.toggleMode(choice.value as Mode);
   }
 }

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

@@ -20,8 +20,6 @@ export class PricingStepComponent {
   config = PRICING_CHOICE_CONFIG;
 
   onChoiceChanged(choice: SimpleChoice) {
-    this.customerPreferencesState.patch({
-      pricing: choice.value as Pricing,
-    });
+    this.customerPreferencesState.togglePricing(choice.value as Pricing);
   }
 }

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

@@ -19,8 +19,6 @@ export class SiteTypeStepComponent {
   config = SITE_TYPE_CHOICE_CONFIG;
 
   onChoiceChanged(choice: SimpleChoice) {
-    this.customerPreferencesState.patch({
-      siteType: choice.value as SiteType,
-    });
+    this.customerPreferencesState.toggleSiteType(choice.value as SiteType);
   }
 }

apps/your-burguer/src/app/choice-assistant/domain/preference/customer-preferences-state.ts

@@ -8,14 +8,14 @@ import { Pricing } from './pricing/pricing';
 import { SiteType } from './site-type/site-type';
 
 export interface CustomerPreferencesProps {
-  burguerType?: BurguerType;
-  delivery?: Delivery;
-  pricing?: Pricing;
-  siteType?: SiteType;
-  intolerances?: Intolerances;
-  highlights?: Highlights;
-  garnish?: Garnish;
-  mode?: Mode;
+  burguerType?: BurguerType[];
+  delivery?: Delivery[];
+  pricing?: Pricing[];
+  siteType?: SiteType[];
+  intolerances?: Intolerances[];
+  highlights?: Highlights[];
+  garnish?: Garnish[];
+  mode?: Mode[];
   location?: {
     street?: string;
     latitude?: number;
@@ -25,7 +25,16 @@ export interface CustomerPreferencesProps {
   };
 }
 
-const DEFAULT_CUSTOMER_PREFERENCES: CustomerPreferencesProps = {};
+const DEFAULT_CUSTOMER_PREFERENCES: CustomerPreferencesProps = {
+  burguerType: [],
+  delivery: [],
+  pricing: [],
+  siteType: [],
+  intolerances: [],
+  highlights: [],
+  garnish: [],
+  mode: [],
+};
 
 export class CustomerPreferencesState {
   private state: CustomerPreferencesProps = DEFAULT_CUSTOMER_PREFERENCES;
@@ -40,4 +49,52 @@ export class CustomerPreferencesState {
       ...preferences,
     };
   }
+
+  private toggleItem<T>(key: keyof CustomerPreferencesProps, item: T) {
+    const array = (this.state[key] as T[]) || [];
+    const set = new Set(array);
+
+    if (set.has(item)) {
+      set.delete(item);
+    } else {
+      set.add(item);
+    }
+
+    this.state = {
+      ...this.state,
+      [key]: Array.from(set),
+    };
+  }
+
+  toggleBurguerType(burguerType: BurguerType) {
+    this.toggleItem('burguerType', burguerType);
+  }
+
+  toggleDelivery(delivery: Delivery) {
+    this.toggleItem('delivery', delivery);
+  }
+
+  togglePricing(pricing: Pricing) {
+    this.toggleItem('pricing', pricing);
+  }
+
+  toggleSiteType(siteType: SiteType) {
+    this.toggleItem('siteType', siteType);
+  }
+
+  toggleIntolerances(intolerances: Intolerances) {
+    this.toggleItem('intolerances', intolerances);
+  }
+
+  toggleHighlights(highlights: Highlights) {
+    this.toggleItem('highlights', highlights);
+  }
+
+  toggleGarnish(garnish: Garnish) {
+    this.toggleItem('garnish', garnish);
+  }
+
+  toggleMode(mode: Mode) {
+    this.toggleItem('mode', mode);
+  }
 }

apps/your-burguer/src/app/choice-assistant/infra/ui/simple-choice-picker/simple-choice-picker.component.css

@@ -1,4 +1,32 @@
-.selected {
-  background-color: #1d4ed8; /* Azul tailwind */
-  color: white;
+.section {
+  @apply border p-4 rounded-lg;
+
+  .title {
+    @apply text-xl font-semibold mb-4;
+  }
+
+  .grid-container {
+    @apply grid grid-cols-2 gap-4 text-center content-stretch;
+
+    .choice-item {
+      @apply relative flex flex-col items-center justify-center;
+      @apply bg-gray-200 border-2 border-purple-500 rounded-lg cursor-pointer transition-all duration-200 p-8;
+    }
+
+    .icon {
+      @apply w-12 h-12 mb-2;
+    }
+
+    .checkmark {
+      @apply absolute top-0 right-0 px-2 py-1 m-2 text-white bg-green-500 rounded-full;
+    }
+
+    .choice-text {
+      @apply text-sm font-medium;
+    }
+
+    .selected {
+      @apply bg-purple-500 text-white;
+    }
+  }
 }

apps/your-burguer/src/app/choice-assistant/infra/ui/simple-choice-picker/simple-choice-picker.component.html

@@ -1,23 +1,23 @@
-<div class="border p-4 rounded-lg">
-  <h2 class="text-xl font-semibold mb-4">{{title()}}</h2>
-  <div class="grid grid-cols-2 gap-4 text-center content-stretch">
+<section class="section">
+  <h2 class="title">{{title()}}</h2>
+  <div class="grid-container">
     @for (choice of config().choices; track $index) {
     <div aria-hidden="true"
-      class="relative flex flex-col items-center justify-center bg-gray-200 rounded-lg cursor-pointer transition-all duration-200 p-8"
-      (click)="pickChoice(choice)" [class.selected]="isPicked(choice)" [class.bg-blue-500]="isPicked(choice)"
-      [class.text-white]="isPicked(choice)" [class.bg-gray-200]="!isPicked(choice)">
+      class="choice-item"
+      (click)="pickChoice(choice)"
+      [class.selected]="isPicked(choice)"
+      [class.bg-purple-500]="isPicked(choice)"
+      [class.text-white]="isPicked(choice)"
+      [class.bg-gray-200]="!isPicked(choice)">
 
-      <img [src]="choice.icon" alt="" class="w-12 h-12 mb-2" width="50px" height="50px">
+      <img [src]="choice.icon" alt="" class="icon" width="50px" height="50px">
 
       @if (isPicked(choice)) {
-      <div class="absolute top-0 right-0 px-2 py-1 m-2 text-white bg-green-500 rounded-full">
-        ✓
-      </div>
+      <div class="checkmark"> ✓ </div>
       }
 
-      <!-- Texto -->
-      <span class="text-sm font-medium">{{choice.displayText}}</span>
+      <span class="choice-text">{{choice.displayText}}</span>
     </div>
     }
   </div>
-</div>
+</section>

apps/your-burguer/src/app/choice-assistant/infra/ui/simple-choice-picker/simple-choice-picker.component.ts

@@ -1,4 +1,4 @@
-import { Component, input, model, output } from '@angular/core';
+import { Component, input, output, model } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { ReactiveFormsModule } from '@angular/forms';
 
@@ -25,15 +25,21 @@ export class SimpleChoicePickerComponent {
   config = input.required<SimpleChoiceConfig>();
   choiceChanged = output<SimpleChoice>();
 
-  choicePicked = model<SimpleChoice>();
+  choicesPicked = model<Set<SimpleChoice>>(new Set());
 
   pickChoice(choice: SimpleChoice) {
-    this.choicePicked.set(choice);
+    this.choicesPicked.update((choices) => {
+      if (choices.has(choice)) {
+        choices.delete(choice);
+        return choices;
+      }
+      return choices?.add(choice);
+    });
     this.choiceChanged.emit(choice);
   }
 
   isPicked(choice: SimpleChoice) {
-    return choice.value === this.choicePicked()?.value;
+    return this.choicesPicked()?.has(choice);
   }
 
   selected = false;