Convert checkout to standalone

Author: joannalauu

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

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

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

@@ -0,0 +1,8 @@
+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

@@ -12,8 +12,8 @@ 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_BUTTON_COMPONENTS } from '@daffodil/design/button';
+import { DAFF_CHECKBOX_COMPONENTS } from '@daffodil/design/checkbox';
 import { DaffInputComponent } from '@daffodil/design/input';
 
 import { DemoGeographyAddressSummaryComponent } from '../../../../geography/components/address-summary/address-summary.component';
@@ -31,8 +31,8 @@ import { PaymentInfoFormFactory } from '../payment-info-form/factories/payment-i
     ReactiveFormsModule,
     DaffInputComponent,
     DemoCheckoutPaymentInfoFormComponent,
-    DaffButtonComponent,
-    DaffCheckboxModule,
+    DAFF_BUTTON_COMPONENTS,
+    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

@@ -4,10 +4,6 @@ import {
   TestBed,
 } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
-import {
-  provideMockStore,
-  MockStore,
-} from '@ngrx/store/testing';
 import { of } from 'rxjs';
 
 import { DaffCart } from '@daffodil/cart';
@@ -22,22 +18,15 @@ 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: [
-        PlaceOrderComponent,
-      ],
-      providers: [
-        provideMockStore({}),
-      ],
       imports: [
         DaffCartStateTestingModule,
+        PlaceOrderComponent,
       ],
     })
       .compileComponents();
@@ -46,7 +35,6 @@ describe('PlaceOrderComponent', () => {
   beforeEach(() => {
     fixture = TestBed.createComponent(PlaceOrderComponent);
     component = fixture.componentInstance;
-    store = TestBed.inject(MockStore);
     cartFactory = TestBed.inject(DaffCartFactory);
     stubCart = cartFactory.create();
     cartFacade = TestBed.inject(MockDaffCartFacade);
@@ -57,10 +45,6 @@ describe('PlaceOrderComponent', () => {
     fixture.detectChanges();
   });
 
-  afterAll(() => {
-    store.resetSelectors();
-  });
-
   it('should create', () => {
     expect(component).toBeTruthy();
   });

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 { DAFF_BUTTON_COMPONENTS } from '@daffodil/design/button';
 
 @Component({
   selector: 'demo-place-order',
   templateUrl: './place-order.component.html',
   styleUrls: ['./place-order.component.scss'],
-  standalone: false,
+  imports: [
+    DAFF_BUTTON_COMPONENTS,
+    AsyncPipe,
+  ],
 })
 export class PlaceOrderComponent implements OnInit {
   enablePlaceOrderButton$: Observable<boolean>;