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

@@ -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>;

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

@@ -7,7 +7,7 @@ import {
 } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
 
-import { DaffButtonComponent } from '@daffodil/design/button';
+import { DAFF_BUTTON_COMPONENTS } from '@daffodil/design/button';
 import { DaffPersonalAddress } from '@daffodil/geography';
 
 import { DemoCheckoutAddressFormComponent } from '../../forms/address/components/address-form/address-form.component';
@@ -24,7 +24,7 @@ import {
   imports: [
     DemoCheckoutAddressFormComponent,
     ReactiveFormsModule,
-    DaffButtonComponent,
+    DAFF_BUTTON_COMPONENTS,
   ],
 })
 export class DemoCheckoutShippingAddressFormComponent implements OnInit {