refactor(demo): Convert cart to standalone

apps/demo/src/app/app-routing.module.ts

@@ -25,7 +25,7 @@ export const appRoutes: Routes = [
   {
     path: '', component: TemplateComponent, children: [
       { path: 'product-grid', component: ProductGridViewComponent },
-      { path: 'cart',       loadChildren: () => import('./cart/cart.module').then(m => m.DemoCartModule) },
+      { path: 'cart',       loadChildren: () => import('./cart/cart.routes').then(m => m.demoCartRoutes) },
       {
         path: 'product/:id',
         component: ProductViewComponent,

apps/demo/src/app/app.module.ts

@@ -22,7 +22,6 @@ import { DaffPaymentStateModule } from '@daffodil/payment/state';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
-import { DemoCartRootModule } from './cart/cart-root.module';
 import { environment } from '../environments/environment';
 import { DemoCheckoutStepActionTypes } from './checkout/actions/checkout-step.actions';
 import { TemplateModule } from './core/template/template/template.module';
@@ -48,7 +47,6 @@ import { DemoIndicatorComponent } from './routing/indicator/indicator.component'
 
     AppRoutingModule,
     DemoIndicatorComponent,
-    DemoCartRootModule,
     TemplateModule,
     DaffAuthorizeNetPaymentStateModule,
     DaffAuthorizeNetStateModule,

apps/demo/src/app/cart/cart-root.provider.ts

@@ -0,0 +1,10 @@
+import { importProvidersFrom } from '@angular/core';
+
+import { DaffCartStateModule } from '@daffodil/cart/state';
+
+import { provideAddToCartNotificationState } from './components/add-to-cart-notification/add-to-cart-notification-state.provider';
+
+export const provideCartRoot = () => [
+  importProvidersFrom(DaffCartStateModule),
+  ...provideAddToCartNotificationState(),
+];

apps/demo/src/app/cart/cart.routes.ts

@@ -0,0 +1,13 @@
+import { Routes } from '@angular/router';
+
+import { provideCartRoot } from './cart-root.provider';
+import { DemoCartViewComponent } from './pages/cart-view/cart-view.component';
+
+export const demoCartRoutes: Routes = [
+  {
+    path: '',
+    pathMatch: 'full',
+    providers: [provideCartRoot()],
+    component: DemoCartViewComponent,
+  },
+];

apps/demo/src/app/cart/components/add-to-cart-notification/add-to-cart-notification-state.provider.ts

@@ -0,0 +1,22 @@
+import {
+  importProvidersFrom,
+  makeEnvironmentProviders,
+} from '@angular/core';
+import { EffectsModule } from '@ngrx/effects';
+import { StoreModule } from '@ngrx/store';
+
+import { DaffModalService } from '@daffodil/design/modal';
+
+import { AddToCartNotificationEffects } from './effects/add-to-cart-notification.effects';
+import { reducers } from './reducers/index';
+
+export const provideAddToCartNotificationState = () => [
+  importProvidersFrom(
+    StoreModule.forFeature('demoAddToCartNotification', reducers),
+    EffectsModule.forFeature([AddToCartNotificationEffects]),
+  ),
+  makeEnvironmentProviders([
+    DaffModalService,
+  ]),
+];
+

apps/demo/src/app/cart/components/add-to-cart-notification/components/add-to-cart-notification/add-to-cart-notification.component.spec.ts

@@ -1,16 +1,11 @@
-import {
-  Component,
-  Input,
-  NO_ERRORS_SCHEMA,
-} from '@angular/core';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
 import {
   waitForAsync,
   ComponentFixture,
   TestBed,
 } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { provideNoopAnimations } from '@angular/platform-browser/animations';
 import {
   StoreModule,
   combineReducers,
@@ -34,7 +29,6 @@ import {
   daffComposeReducers,
   daffIdentityReducer,
 } from '@daffodil/core/state';
-import { DaffLoadingIconModule } from '@daffodil/design/loading-icon';
 import { DaffProduct } from '@daffodil/product';
 import {
   DaffProductLoadSuccess,
@@ -50,25 +44,10 @@ import {
   OpenAddToCartNotification,
 } from '../../actions/add-to-cart-notification.actions';
 import * as fromAddToCartNotification from '../../reducers/index';
-
-@Component({
-  template: '<demo-add-to-cart-notification></demo-add-to-cart-notification>',
-  standalone: false,
-})
-class WrapperComponent {}
-
-@Component({
-  selector: 'demo-product-added', template: '',
-  standalone: false,
-})
-class MockProductAddedComponent {
-  @Input() product: DaffProduct;
-  @Input() qty: number;
-}
+import { ProductAddedComponent } from '../product-added/product-added.component';
 
 describe('AddToCartNotificationComponent', () => {
-  let wrapper: WrapperComponent;
-  let fixture: ComponentFixture<WrapperComponent>;
+  let fixture: ComponentFixture<AddToCartNotificationComponent>;
   let store: Store<{
     demoAddToCartNotification: fromAddToCartNotification.State;
     cart: DaffCartReducersState;
@@ -78,7 +57,7 @@ describe('AddToCartNotificationComponent', () => {
   let cartFactory: DaffCartFactory;
 
   let addToCartNotification: AddToCartNotificationComponent;
-  let productAdded: MockProductAddedComponent;
+  let productAdded: ProductAddedComponent;
   let stubProduct: DaffProduct;
   let productAddPayload;
   let stubCart: DaffCart;
@@ -98,18 +77,14 @@ describe('AddToCartNotificationComponent', () => {
           ]),
           [DAFF_PRODUCT_STORE_FEATURE_KEY]: combineReducers(daffProductReducers),
         }),
-        NoopAnimationsModule,
-        DaffLoadingIconModule,
-        FontAwesomeModule,
-      ],
-      declarations: [
-        WrapperComponent,
         AddToCartNotificationComponent,
-        MockProductAddedComponent,
       ],
       schemas: [
         NO_ERRORS_SCHEMA,
       ],
+      providers: [
+        provideNoopAnimations(),
+      ],
     })
       .compileComponents();
   }));
@@ -122,13 +97,11 @@ describe('AddToCartNotificationComponent', () => {
     productAddPayload = { productId: stubProduct.id, qty: 1 };
     stubCart = cartFactory.create();
 
-    fixture = TestBed.createComponent(WrapperComponent);
-    wrapper = fixture.componentInstance;
+    fixture = TestBed.createComponent(AddToCartNotificationComponent);
+    addToCartNotification = fixture.componentInstance;
     store = TestBed.inject(Store);
 
     fixture.detectChanges();
-
-    addToCartNotification = fixture.debugElement.query(By.css('demo-add-to-cart-notification')).componentInstance;
   });
 
 

apps/demo/src/app/cart/components/add-to-cart-notification/components/add-to-cart-notification/add-to-cart-notification.component.ts

@@ -1,7 +1,9 @@
+import { AsyncPipe } from '@angular/common';
 import {
   Component,
   OnInit,
 } from '@angular/core';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import {
   faCheck,
   faTimes,
@@ -14,21 +16,37 @@ import { Observable } from 'rxjs';
 import { switchMap } from 'rxjs/operators';
 
 import { DaffCartItem } from '@daffodil/cart';
+import {
+  DAFF_BASIC_BUTTON_COMPONENTS,
+  DAFF_ICON_BUTTON_COMPONENTS,
+} from '@daffodil/design/button';
+import { DaffLoadingIconComponent } from '@daffodil/design/loading-icon';
 import { DaffProduct } from '@daffodil/product';
 import {
   DaffProductStateRootSlice,
   getDaffProductSelectors,
 } from '@daffodil/product/state';
 
+import { ProceedToCheckoutDirective } from '../../../proceed-to-checkout/proceed-to-checkout.directive';
+import { ViewCartDirective } from '../../../view-cart/view-cart.directive';
 import { CloseAddToCartNotification } from '../../actions/add-to-cart-notification.actions';
 import * as fromDemoAddToCartNotification from '../../reducers/index';
-
+import { ProductAddedComponent } from '../product-added/product-added.component';
 
 @Component({
   selector: 'demo-add-to-cart-notification',
   templateUrl: './add-to-cart-notification.component.html',
   styleUrls: ['./add-to-cart-notification.component.scss'],
-  standalone: false,
+  imports: [
+    AsyncPipe,
+    ViewCartDirective,
+    ProceedToCheckoutDirective,
+    ProductAddedComponent,
+    DaffLoadingIconComponent,
+    DAFF_BASIC_BUTTON_COMPONENTS,
+    DAFF_ICON_BUTTON_COMPONENTS,
+    FaIconComponent,
+  ],
 })
 export class AddToCartNotificationComponent implements OnInit {
   faCheck = faCheck;

apps/demo/src/app/cart/components/add-to-cart-notification/components/product-added/product-added.component.spec.ts

@@ -18,7 +18,7 @@ const stubQty = 1;
 
 @Component({
   template: '<demo-product-added [qty]="qtyValue" [product]="productValue"></demo-product-added>',
-  standalone: false,
+  imports: [ProductAddedComponent],
 })
 class WrapperComponent {
   qtyValue: number = stubQty;
@@ -36,9 +36,8 @@ describe('ProductAddedComponent', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [
+      imports: [
         WrapperComponent,
-        ProductAddedComponent,
       ],
     })
       .compileComponents();

apps/demo/src/app/cart/components/add-to-cart-notification/components/product-added/product-added.component.ts

@@ -9,7 +9,6 @@ import { DaffProduct } from '@daffodil/product';
   selector: 'demo-product-added',
   templateUrl: './product-added.component.html',
   styleUrls: ['./product-added.component.scss'],
-  standalone: false,
 })
 export class ProductAddedComponent {