refactor(demo): convert checkout to standalone (#4307)

Author: joannalauu

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

@@ -35,11 +35,11 @@ export const appRoutes: Routes = [
       },
       {
         path: 'category',
-        loadChildren: () => import('./category/category.routes').then(m => m.demoCategoryRoutes),
+        loadChildren: () => import('./category/category.routes').then(r => r.demoCategoryRoutes),
       },
       {
         path: 'checkout',
-        loadChildren: () => import('./checkout/checkout.module').then(m => m.CheckoutModule),
+        loadChildren: () => import('./checkout/checkout.routes').then(r => r.demoCheckoutRoutes),
       },
       { path: '404', component: NotFoundComponent },
       {

apps/demo/src/app/checkout/checkout-state.module.ts

@@ -0,0 +1,7 @@
+import { importProvidersFrom } from '@angular/core';
+import { EffectsModule } from '@ngrx/effects';
+
+import { CheckoutEffects } from './effects/checkout.effects';
+
+export const provideDemoCheckoutState = () =>
+  importProvidersFrom(EffectsModule.forFeature([CheckoutEffects]));

apps/demo/src/app/checkout/checkout-state.provider.ts

@@ -1,29 +1,33 @@
 import {
-  NgModule,
+  importProvidersFrom,
   inject,
 } from '@angular/core';
 import {
   ActivatedRouteSnapshot,
-  RouterModule,
-  RouterStateSnapshot,
   Routes,
+  RouterStateSnapshot,
 } from '@angular/router';
 
 import {
   DaffCartInStockItemsGuard,
   DaffCartItemsGuard,
-  DaffCartRoutingModule,
   DaffResolveCartGuard,
+  DaffCartRoutingModule,
 } from '@daffodil/cart/routing';
 import { daffRouterComposeGuards } from '@daffodil/router';
 
+import { provideDemoCheckoutState } from './checkout-state.provider';
 import { DemoCheckoutViewComponent } from './pages/checkout-view/checkout-view.component';
 import { ThankYouViewComponent } from '../thank-you/pages/thank-you-view.component';
 
-const routes: Routes = [
+export const demoCheckoutRoutes: Routes = [
   {
     path: '',
     pathMatch: 'full',
+    providers: [
+      provideDemoCheckoutState(),
+      importProvidersFrom(DaffCartRoutingModule),
+    ],
     children: [
       { path: '', component: DemoCheckoutViewComponent },
       { path: 'thank-you', component: ThankYouViewComponent },
@@ -44,14 +48,3 @@ const routes: Routes = [
     ],
   },
 ];
-
-@NgModule({
-  imports: [
-    RouterModule.forChild(routes),
-    DaffCartRoutingModule,
-  ],
-  exports: [
-    RouterModule,
-  ],
-})
-export class CheckoutRoutingModule { }

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

@@ -13,7 +13,7 @@ import {
 import { DaffAuthorizeNetCreditCard } from '@daffodil/authorizenet';
 import { DaffCartAddress } from '@daffodil/cart';
 import { DaffButtonComponent } from '@daffodil/design/button';
-import { DaffCheckboxModule } from '@daffodil/design/checkbox';
+import { DAFF_CHECKBOX_COMPONENTS } from '@daffodil/design/checkbox';
 import { DaffInputComponent } from '@daffodil/design/input';
 
 import { DemoGeographyAddressSummaryComponent } from '../../../../geography/components/address-summary/address-summary.component';
@@ -32,7 +32,7 @@ import { PaymentInfoFormFactory } from '../payment-info-form/factories/payment-i
     DaffInputComponent,
     DemoCheckoutPaymentInfoFormComponent,
     DaffButtonComponent,
-    DaffCheckboxModule,
+    DAFF_CHECKBOX_COMPONENTS,
     DemoCheckoutAddressFormComponent,
     DemoGeographyAddressSummaryComponent,
   ],

…/app/checkout/checkout-routing.module.ts …demo/src/app/checkout/checkout.routes.tsapps/demo/src/app/checkout/checkout-routing.module.ts renamed to apps/demo/src/app/checkout/checkout.routes.ts apps/demo/src/app/checkout/checkout-routing.module.ts renamed to apps/demo/src/app/checkout/checkout.routes.ts

@@ -11,7 +11,6 @@ import { DaffAuthorizeNetCreditCard } from '@daffodil/authorizenet';
   selector: 'demo-checkout-payment-summary',
   templateUrl: './payment-summary.component.html',
   styleUrls: ['./payment-summary.component.scss'],
-  standalone: true,
 })
 export class DemoCheckoutPaymentSummaryComponent {
   @Input() paymentInfo: DaffAuthorizeNetCreditCard;

apps/demo/src/app/checkout/components/payment/payment-form/payment-form.component.ts

@@ -22,23 +22,20 @@ import { PlaceOrderComponent } from './place-order.component';
 describe('PlaceOrderComponent', () => {
   let fixture: ComponentFixture<PlaceOrderComponent>;
   let component: PlaceOrderComponent;
-  const stubEnablePlaceOrderButton = true;
   let store: MockStore<any>;
   let cartFactory: DaffCartFactory;
   let stubCart: DaffCart;
   let cartFacade: MockDaffCartFacade;
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [
+      imports: [
+        DaffCartStateTestingModule,
         PlaceOrderComponent,
       ],
       providers: [
         provideMockStore({}),
       ],
-      imports: [
-        DaffCartStateTestingModule,
-      ],
     })
       .compileComponents();
   }));

apps/demo/src/app/checkout/components/payment/payment-summary/payment-summary.component.ts

@@ -1,3 +1,4 @@
+import { AsyncPipe } from '@angular/common';
 import {
   Component,
   OnInit,
@@ -9,12 +10,16 @@ import {
   DaffCartFacade,
   DaffCartPlaceOrder,
 } from '@daffodil/cart/state';
+import { DaffButtonComponent } from '@daffodil/design/button';
 
 @Component({
   selector: 'demo-place-order',
   templateUrl: './place-order.component.html',
   styleUrls: ['./place-order.component.scss'],
-  standalone: false,
+  imports: [
+    DaffButtonComponent,
+    AsyncPipe,
+  ],
 })
 export class PlaceOrderComponent implements OnInit {
   enablePlaceOrderButton$: Observable<boolean>;