<?xml version="1.0" encoding="UTF-8"?>
<mxfile host="Electron" modified="2026-02-23T08:00:00.000Z" agent="draw.io" version="24.0.0">
  <diagram name="Ecommerce Domain Flow" id="domain-features">
    <mxGraphModel dx="1400" dy="800" grid="1" gridSize="10">
      <root>
        <mxCell id="0" />
        <mxCell id="1" parent="0" />

        <!-- Title -->
        <mxCell id="title" value="TechShop — Ecommerce Domain Feature Flow (Part 5)" style="text;html=1;strokeColor=none;fillColor=none;align=center;fontSize=17;fontStyle=1;" vertex="1" parent="1">
          <mxGeometry x="100" y="20" width="1000" height="40" as="geometry" />
        </mxCell>

        <!-- STEP 1: CATALOG -->
        <mxCell id="cat-bg" value="1 — Product Catalog" style="swimlane;startSize=30;fillColor=#dae8fc;strokeColor=#6c8ebf;fontSize=13;fontStyle=1;" vertex="1" parent="1">
          <mxGeometry x="40" y="80" width="250" height="320" as="geometry" />
        </mxCell>
        <mxCell id="cat-store" value="&lt;b&gt;ProductStore&lt;/b&gt;&lt;br/&gt;filter signal&lt;br/&gt;resource() reloads on change" style="rounded=1;fillColor=#E3F2FD;strokeColor=#1565C0;fontSize=11;whiteSpace=wrap;html=1;" vertex="1" parent="cat-bg">
          <mxGeometry x="20" y="50" width="210" height="65" as="geometry" />
        </mxCell>
        <mxCell id="cat-list" value="&lt;b&gt;ProductListComponent&lt;/b&gt;&lt;br/&gt;@for products — @defer recs&lt;br/&gt;OnPush + Signals" style="rounded=1;fillColor=#E3F2FD;strokeColor=#1565C0;fontSize=11;whiteSpace=wrap;html=1;" vertex="1" parent="cat-bg">
          <mxGeometry x="20" y="140" width="210" height="65" as="geometry" />
        </mxCell>
        <mxCell id="cat-detail" value="&lt;b&gt;ProductDetailComponent&lt;/b&gt;&lt;br/&gt;SSR route · NgOptimizedImage&lt;br/&gt;JSON-LD · real-time stock" style="rounded=1;fillColor=#E3F2FD;strokeColor=#1565C0;fontSize=11;whiteSpace=wrap;html=1;" vertex="1" parent="cat-bg">
          <mxGeometry x="20" y="230" width="210" height="65" as="geometry" />
        </mxCell>

        <!-- Arrow 1→2 -->
        <mxCell id="a12" value="Add to Cart" edge="1" style="edgeStyle=orthogonalEdgeStyle;strokeColor=#1565C0;strokeWidth=2;fontStyle=1;" parent="1" source="cat-detail" target="cart-service">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>

        <!-- STEP 2: CART -->
        <mxCell id="cart-bg" value="2 — Cart" style="swimlane;startSize=30;fillColor=#d5e8d4;strokeColor=#82b366;fontSize=13;fontStyle=1;" vertex="1" parent="1">
          <mxGeometry x="340" y="80" width="250" height="320" as="geometry" />
        </mxCell>
        <mxCell id="cart-service" value="&lt;b&gt;CartService&lt;/b&gt;&lt;br/&gt;signal&lt;CartItem[]&gt;&lt;br/&gt;itemCount() · subtotal()&lt;br/&gt;Persists to localStorage" style="rounded=1;fillColor=#E8F5E9;strokeColor=#2E7D32;fontSize=11;whiteSpace=wrap;html=1;" vertex="1" parent="cart-bg">
          <mxGeometry x="20" y="50" width="210" height="80" as="geometry" />
        </mxCell>
        <mxCell id="cart-header" value="&lt;b&gt;Header Cart Badge&lt;/b&gt;&lt;br/&gt;cart.itemCount() — reactive&lt;br/&gt;Updates across all tabs" style="rounded=1;fillColor=#E8F5E9;strokeColor=#2E7D32;fontSize=11;whiteSpace=wrap;html=1;" vertex="1" parent="cart-bg">
          <mxGeometry x="20" y="155" width="210" height="65" as="geometry" />
        </mxCell>
        <mxCell id="cart-drawer" value="&lt;b&gt;CartComponent&lt;/b&gt;&lt;br/&gt;items() · updateQty()&lt;br/&gt;remove() · subtotal" style="rounded=1;fillColor=#E8F5E9;strokeColor=#2E7D32;fontSize=11;whiteSpace=wrap;html=1;" vertex="1" parent="cart-bg">
          <mxGeometry x="20" y="240" width="210" height="60" as="geometry" />
        </mxCell>

        <!-- Arrow 2→3 -->
        <mxCell id="a23" value="Checkout" edge="1" style="edgeStyle=orthogonalEdgeStyle;strokeColor=#2E7D32;strokeWidth=2;fontStyle=1;" parent="1" source="cart-drawer" target="checkout-comp">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>

        <!-- STEP 3: CHECKOUT -->
        <mxCell id="chk-bg" value="3 — Checkout" style="swimlane;startSize=30;fillColor=#fff2cc;strokeColor=#d6b656;fontSize=13;fontStyle=1;" vertex="1" parent="1">
          <mxGeometry x="640" y="80" width="250" height="320" as="geometry" />
        </mxCell>
        <mxCell id="checkout-comp" value="&lt;b&gt;CheckoutComponent&lt;/b&gt;&lt;br/&gt;Signal step: shipping → payment → review&lt;br/&gt;@switch (currentStep())" style="rounded=1;fillColor=#FFFDE7;strokeColor=#F9A825;fontSize=11;whiteSpace=wrap;html=1;" vertex="1" parent="chk-bg">
          <mxGeometry x="20" y="50" width="210" height="70" as="geometry" />
        </mxCell>
        <mxCell id="checkout-form" value="&lt;b&gt;Reactive Forms&lt;/b&gt;&lt;br/&gt;FormBuilder · Validators&lt;br/&gt;Strongly typed FormGroup" style="rounded=1;fillColor=#FFFDE7;strokeColor=#F9A825;fontSize=11;whiteSpace=wrap;html=1;" vertex="1" parent="chk-bg">
          <mxGeometry x="20" y="145" width="210" height="65" as="geometry" />
        </mxCell>
        <mxCell id="checkout-stripe" value="&lt;b&gt;Payment (Stripe Elements)&lt;/b&gt;&lt;br/&gt;PaymentIntent from .NET API&lt;br/&gt;paymentIntentId in FormGroup" style="rounded=1;fillColor=#FFFDE7;strokeColor=#F9A825;fontSize=11;whiteSpace=wrap;html=1;" vertex="1" parent="chk-bg">
          <mxGeometry x="20" y="235" width="210" height="65" as="geometry" />
        </mxCell>

        <!-- Arrow 3→4 -->
        <mxCell id="a34" value="Place Order" edge="1" style="edgeStyle=orthogonalEdgeStyle;strokeColor=#F9A825;strokeWidth=2;fontStyle=1;" parent="1" source="checkout-stripe" target="order-comp">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>

        <!-- STEP 4: ORDERS -->
        <mxCell id="ord-bg" value="4 — Orders" style="swimlane;startSize=30;fillColor=#f8cecc;strokeColor=#b85450;fontSize=13;fontStyle=1;" vertex="1" parent="1">
          <mxGeometry x="940" y="80" width="250" height="320" as="geometry" />
        </mxCell>
        <mxCell id="order-comp" value="&lt;b&gt;OrderDetailComponent&lt;/b&gt;&lt;br/&gt;Status timeline&lt;br/&gt;Real-time tracking badge" style="rounded=1;fillColor=#FFEBEE;strokeColor=#C62828;fontSize=11;whiteSpace=wrap;html=1;" vertex="1" parent="ord-bg">
          <mxGeometry x="20" y="50" width="210" height="65" as="geometry" />
        </mxCell>
        <mxCell id="order-signalr" value="&lt;b&gt;OrderRealtimeService&lt;/b&gt;&lt;br/&gt;SignalR hub subscription&lt;br/&gt;latestUpdate = toSignal($)" style="rounded=1;fillColor=#FFEBEE;strokeColor=#C62828;fontSize=11;whiteSpace=wrap;html=1;" vertex="1" parent="ord-bg">
          <mxGeometry x="20" y="150" width="210" height="65" as="geometry" />
        </mxCell>
        <mxCell id="order-store" value="&lt;b&gt;OrderStore (NgRx Signals)&lt;/b&gt;&lt;br/&gt;withEntities · cancelOrder()&lt;br/&gt;Optimistic updates + rollback" style="rounded=1;fillColor=#FFEBEE;strokeColor=#C62828;fontSize=11;whiteSpace=wrap;html=1;" vertex="1" parent="ord-bg">
          <mxGeometry x="20" y="240" width="210" height="65" as="geometry" />
        </mxCell>

        <!-- .NET domain layer row -->
        <mxCell id="dn-bg" value=".NET 10 Domain — Read by any step above" style="swimlane;startSize=30;fillColor=#f5f5f5;strokeColor=#666;fontSize=12;fontStyle=1;" vertex="1" parent="1">
          <mxGeometry x="40" y="430" width="1150" height="80" as="geometry" />
        </mxCell>
        <mxCell id="dn1" value="Product Aggregate" style="rounded=1;fillColor=#E8EAF6;strokeColor=#3949AB;fontSize=11;" vertex="1" parent="dn-bg">
          <mxGeometry x="20" y="30" width="200" height="35" as="geometry" />
        </mxCell>
        <mxCell id="dn2" value="CartSession" style="rounded=1;fillColor=#E8EAF6;strokeColor=#3949AB;fontSize=11;" vertex="1" parent="dn-bg">
          <mxGeometry x="250" y="30" width="200" height="35" as="geometry" />
        </mxCell>
        <mxCell id="dn3" value="Order Aggregate" style="rounded=1;fillColor=#E8EAF6;strokeColor=#3949AB;fontSize=11;" vertex="1" parent="dn-bg">
          <mxGeometry x="480" y="30" width="200" height="35" as="geometry" />
        </mxCell>
        <mxCell id="dn4" value="EF Core 10 + PostgreSQL" style="rounded=1;fillColor=#E8EAF6;strokeColor=#3949AB;fontSize=11;" vertex="1" parent="dn-bg">
          <mxGeometry x="710" y="30" width="200" height="35" as="geometry" />
        </mxCell>
        <mxCell id="dn5" value="Redis (cart session cache)" style="rounded=1;fillColor=#E8EAF6;strokeColor=#3949AB;fontSize=11;" vertex="1" parent="dn-bg">
          <mxGeometry x="930" y="30" width="195" height="35" as="geometry" />
        </mxCell>

      </root>
    </mxGraphModel>
  </diagram>
</mxfile>
