From 80cb0683d58f61bca660f1587622eb11484686b4 Mon Sep 17 00:00:00 2001 From: Joanna Lau <118241363+joannalauu@users.noreply.github.com> Date: Sat, 31 Jan 2026 21:20:34 -0500 Subject: [PATCH 1/3] Convert checkout to standalone --- apps/demo/src/app/app-routing.module.ts | 4 +-- .../src/app/checkout/checkout-state.module.ts | 13 ---------- .../app/checkout/checkout-state.provider.ts | 8 ++++++ apps/demo/src/app/checkout/checkout.module.ts | 25 ------------------- ...t-routing.module.ts => checkout.routes.ts} | 25 +++++++------------ .../payment-form/payment-form.component.ts | 4 +-- .../payment-summary.component.ts | 1 - .../place-order/place-order.component.spec.ts | 7 ++---- .../place-order/place-order.component.ts | 7 +++++- .../place-order/place-order.module.ts | 20 --------------- .../form/shipping-address-form.component.ts | 4 +-- .../shipping-form/shipping-form.component.ts | 4 +-- .../shipping-summary.component.ts | 1 - .../checkout-view/checkout-view.component.ts | 4 +-- 14 files changed, 35 insertions(+), 92 deletions(-) delete mode 100644 apps/demo/src/app/checkout/checkout-state.module.ts create mode 100644 apps/demo/src/app/checkout/checkout-state.provider.ts delete mode 100644 apps/demo/src/app/checkout/checkout.module.ts rename apps/demo/src/app/checkout/{checkout-routing.module.ts => checkout.routes.ts} (83%) delete mode 100644 apps/demo/src/app/checkout/components/place-order/place-order.module.ts diff --git a/apps/demo/src/app/app-routing.module.ts b/apps/demo/src/app/app-routing.module.ts index 8ebb0e46f2..b2efadf006 100644 --- a/apps/demo/src/app/app-routing.module.ts +++ b/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 }, { diff --git a/apps/demo/src/app/checkout/checkout-state.module.ts b/apps/demo/src/app/checkout/checkout-state.module.ts deleted file mode 100644 index 019873f129..0000000000 --- a/apps/demo/src/app/checkout/checkout-state.module.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { NgModule } from '@angular/core'; -import { EffectsModule } from '@ngrx/effects'; - -import { CheckoutEffects } from './effects/checkout.effects'; - -@NgModule({ - imports: [ - EffectsModule.forFeature([ - CheckoutEffects, - ]), - ], -}) -export class DemoCheckoutStateModule { } diff --git a/apps/demo/src/app/checkout/checkout-state.provider.ts b/apps/demo/src/app/checkout/checkout-state.provider.ts new file mode 100644 index 0000000000..a30444a1ac --- /dev/null +++ b/apps/demo/src/app/checkout/checkout-state.provider.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])), +]; diff --git a/apps/demo/src/app/checkout/checkout.module.ts b/apps/demo/src/app/checkout/checkout.module.ts deleted file mode 100644 index a4f425160d..0000000000 --- a/apps/demo/src/app/checkout/checkout.module.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { CommonModule } from '@angular/common'; -import { NgModule } from '@angular/core'; - -import { DaffCartStateModule } from '@daffodil/cart/state'; -import { DaffAccordionModule } from '@daffodil/design/accordion'; -import { DaffContainerModule } from '@daffodil/design/container'; -import { DaffLoadingIconModule } from '@daffodil/design/loading-icon'; - -import { CheckoutRoutingModule } from './checkout-routing.module'; -import { DemoCheckoutStateModule } from './checkout-state.module'; -import { PlaceOrderModule } from './components/place-order/place-order.module'; - -@NgModule({ - imports: [ - CommonModule, - DaffCartStateModule, - DaffLoadingIconModule, - DemoCheckoutStateModule, - PlaceOrderModule, - DaffAccordionModule, - DaffContainerModule, - CheckoutRoutingModule, - ], -}) -export class CheckoutModule { } diff --git a/apps/demo/src/app/checkout/checkout-routing.module.ts b/apps/demo/src/app/checkout/checkout.routes.ts similarity index 83% rename from apps/demo/src/app/checkout/checkout-routing.module.ts rename to apps/demo/src/app/checkout/checkout.routes.ts index 6632a9dbb0..9e1400548a 100644 --- a/apps/demo/src/app/checkout/checkout-routing.module.ts +++ b/apps/demo/src/app/checkout/checkout.routes.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 { } diff --git a/apps/demo/src/app/checkout/components/payment/payment-form/payment-form.component.ts b/apps/demo/src/app/checkout/components/payment/payment-form/payment-form.component.ts index 4c1922b244..c1b4a4334e 100644 --- a/apps/demo/src/app/checkout/components/payment/payment-form/payment-form.component.ts +++ b/apps/demo/src/app/checkout/components/payment/payment-form/payment-form.component.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, ], diff --git a/apps/demo/src/app/checkout/components/payment/payment-summary/payment-summary.component.ts b/apps/demo/src/app/checkout/components/payment/payment-summary/payment-summary.component.ts index bf5b6cb06d..2290c25dca 100644 --- a/apps/demo/src/app/checkout/components/payment/payment-summary/payment-summary.component.ts +++ b/apps/demo/src/app/checkout/components/payment/payment-summary/payment-summary.component.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; diff --git a/apps/demo/src/app/checkout/components/place-order/place-order.component.spec.ts b/apps/demo/src/app/checkout/components/place-order/place-order.component.spec.ts index 57ff8247b9..d667735dad 100644 --- a/apps/demo/src/app/checkout/components/place-order/place-order.component.spec.ts +++ b/apps/demo/src/app/checkout/components/place-order/place-order.component.spec.ts @@ -22,7 +22,6 @@ import { PlaceOrderComponent } from './place-order.component'; describe('PlaceOrderComponent', () => { let fixture: ComponentFixture; let component: PlaceOrderComponent; - const stubEnablePlaceOrderButton = true; let store: MockStore; let cartFactory: DaffCartFactory; let stubCart: DaffCart; @@ -30,15 +29,13 @@ describe('PlaceOrderComponent', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ - declarations: [ + imports: [ + DaffCartStateTestingModule, PlaceOrderComponent, ], providers: [ provideMockStore({}), ], - imports: [ - DaffCartStateTestingModule, - ], }) .compileComponents(); })); diff --git a/apps/demo/src/app/checkout/components/place-order/place-order.component.ts b/apps/demo/src/app/checkout/components/place-order/place-order.component.ts index b52eeb940d..9d3066070e 100644 --- a/apps/demo/src/app/checkout/components/place-order/place-order.component.ts +++ b/apps/demo/src/app/checkout/components/place-order/place-order.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; diff --git a/apps/demo/src/app/checkout/components/place-order/place-order.module.ts b/apps/demo/src/app/checkout/components/place-order/place-order.module.ts deleted file mode 100644 index 46dbe6ef89..0000000000 --- a/apps/demo/src/app/checkout/components/place-order/place-order.module.ts +++ /dev/null @@ -1,20 +0,0 @@ -import { CommonModule } from '@angular/common'; -import { NgModule } from '@angular/core'; - -import { DaffButtonModule } from '@daffodil/design/button'; - -import { PlaceOrderComponent } from './place-order.component'; - -@NgModule({ - imports: [ - CommonModule, - DaffButtonModule, - ], - declarations: [ - PlaceOrderComponent, - ], - exports: [ - PlaceOrderComponent, - ], -}) -export class PlaceOrderModule { } diff --git a/apps/demo/src/app/checkout/components/shipping-address/form/shipping-address-form.component.ts b/apps/demo/src/app/checkout/components/shipping-address/form/shipping-address-form.component.ts index 83c2d430a5..7e5e75325b 100644 --- a/apps/demo/src/app/checkout/components/shipping-address/form/shipping-address-form.component.ts +++ b/apps/demo/src/app/checkout/components/shipping-address/form/shipping-address-form.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 { diff --git a/apps/demo/src/app/checkout/components/shipping/shipping-form/shipping-form.component.ts b/apps/demo/src/app/checkout/components/shipping/shipping-form/shipping-form.component.ts index 56017ac35c..2061f37354 100644 --- a/apps/demo/src/app/checkout/components/shipping/shipping-form/shipping-form.component.ts +++ b/apps/demo/src/app/checkout/components/shipping/shipping-form/shipping-form.component.ts @@ -8,7 +8,7 @@ import { import { ReactiveFormsModule } from '@angular/forms'; import { DaffCartShippingRate } from '@daffodil/cart'; -import { DaffButtonComponent } from '@daffodil/design/button'; +import { DAFF_BUTTON_COMPONENTS } from '@daffodil/design/button'; import { DemoCheckoutAddressFormComponent } from '../../forms/address/components/address-form/address-form.component'; import { DemoCheckoutShippingOptionsComponent } from '../shipping-options/components/shipping-options/shipping-options.component'; @@ -26,7 +26,7 @@ import { DemoCheckoutAddressFormComponent, DemoCheckoutShippingOptionsComponent, ReactiveFormsModule, - DaffButtonComponent, + DAFF_BUTTON_COMPONENTS, ], }) export class DemoCheckoutShippingFormComponent implements OnInit { diff --git a/apps/demo/src/app/checkout/components/shipping/shipping-summary/shipping-summary.component.ts b/apps/demo/src/app/checkout/components/shipping/shipping-summary/shipping-summary.component.ts index e6677e8dc5..d75538b63f 100644 --- a/apps/demo/src/app/checkout/components/shipping/shipping-summary/shipping-summary.component.ts +++ b/apps/demo/src/app/checkout/components/shipping/shipping-summary/shipping-summary.component.ts @@ -11,7 +11,6 @@ import { DaffCartShippingRate } from '@daffodil/cart'; selector: 'demo-checkout-shipping-summary', templateUrl: './shipping-summary.component.html', styleUrls: ['./shipping-summary.component.scss'], - standalone: true, }) export class DemoCheckoutShippingSummaryComponent { @Input() selectedShippingOption: DaffCartShippingRate; diff --git a/apps/demo/src/app/checkout/pages/checkout-view/checkout-view.component.ts b/apps/demo/src/app/checkout/pages/checkout-view/checkout-view.component.ts index 2f80eb7eff..780ae15290 100644 --- a/apps/demo/src/app/checkout/pages/checkout-view/checkout-view.component.ts +++ b/apps/demo/src/app/checkout/pages/checkout-view/checkout-view.component.ts @@ -33,7 +33,7 @@ import { DemoCheckoutBillingFormGroup } from '../../components/payment/models/pa import { DemoCheckoutPaymentFormComponent } from '../../components/payment/payment-form/payment-form.component'; import { demoCheckoutPaymentInfoRequestDataTransform } from '../../components/payment/payment-info-form/transforms/request-data'; import { DemoCheckoutPaymentSummaryComponent } from '../../components/payment/payment-summary/payment-summary.component'; -import { PlaceOrderModule } from '../../components/place-order/place-order.module'; +import { PlaceOrderComponent } from '../../components/place-order/place-order.component'; import { DemoCheckoutShippingFormComponent } from '../../components/shipping/shipping-form/shipping-form.component'; import { DemoCheckoutShippingSummaryComponent } from '../../components/shipping/shipping-summary/shipping-summary.component'; import { DemoCheckoutShippingAddressFormComponent } from '../../components/shipping-address/form/shipping-address-form.component'; @@ -58,7 +58,7 @@ import { DemoCheckoutPaymentFormComponent, DemoCheckoutBillingAddressSummaryComponent, DemoCheckoutPaymentSummaryComponent, - PlaceOrderModule, + PlaceOrderComponent, CartSummaryWrapperComponent, ], }) From 10ad38f52780d6473bf2dbadba0efc4ab69ea684 Mon Sep 17 00:00:00 2001 From: Joanna Lau <118241363+joannalauu@users.noreply.github.com> Date: Tue, 3 Feb 2026 13:21:56 -0500 Subject: [PATCH 2/3] Import `DAFF_BASIC_BUTTON_COMPONENTS` instead of `DAFF_BUTTON_COMPONENTS --- .../shipping-address/form/shipping-address-form.component.ts | 4 ++-- .../shipping/shipping-form/shipping-form.component.ts | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/apps/demo/src/app/checkout/components/shipping-address/form/shipping-address-form.component.ts b/apps/demo/src/app/checkout/components/shipping-address/form/shipping-address-form.component.ts index 7e5e75325b..d9922de760 100644 --- a/apps/demo/src/app/checkout/components/shipping-address/form/shipping-address-form.component.ts +++ b/apps/demo/src/app/checkout/components/shipping-address/form/shipping-address-form.component.ts @@ -7,7 +7,7 @@ import { } from '@angular/core'; import { ReactiveFormsModule } from '@angular/forms'; -import { DAFF_BUTTON_COMPONENTS } from '@daffodil/design/button'; +import { DAFF_BASIC_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, - DAFF_BUTTON_COMPONENTS, + DAFF_BASIC_BUTTON_COMPONENTS, ], }) export class DemoCheckoutShippingAddressFormComponent implements OnInit { diff --git a/apps/demo/src/app/checkout/components/shipping/shipping-form/shipping-form.component.ts b/apps/demo/src/app/checkout/components/shipping/shipping-form/shipping-form.component.ts index 2061f37354..66346c89c2 100644 --- a/apps/demo/src/app/checkout/components/shipping/shipping-form/shipping-form.component.ts +++ b/apps/demo/src/app/checkout/components/shipping/shipping-form/shipping-form.component.ts @@ -8,7 +8,7 @@ import { import { ReactiveFormsModule } from '@angular/forms'; import { DaffCartShippingRate } from '@daffodil/cart'; -import { DAFF_BUTTON_COMPONENTS } from '@daffodil/design/button'; +import { DAFF_BASIC_BUTTON_COMPONENTS } from '@daffodil/design/button'; import { DemoCheckoutAddressFormComponent } from '../../forms/address/components/address-form/address-form.component'; import { DemoCheckoutShippingOptionsComponent } from '../shipping-options/components/shipping-options/shipping-options.component'; @@ -26,7 +26,7 @@ import { DemoCheckoutAddressFormComponent, DemoCheckoutShippingOptionsComponent, ReactiveFormsModule, - DAFF_BUTTON_COMPONENTS, + DAFF_BASIC_BUTTON_COMPONENTS, ], }) export class DemoCheckoutShippingFormComponent implements OnInit { From 477eca4fd21560c13c5bd136d9464be54fbea373 Mon Sep 17 00:00:00 2001 From: Joanna Lau <118241363+joannalauu@users.noreply.github.com> Date: Thu, 9 Apr 2026 09:50:43 -0400 Subject: [PATCH 3/3] Remove outer array of provider --- apps/demo/src/app/checkout/checkout-state.provider.ts | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/apps/demo/src/app/checkout/checkout-state.provider.ts b/apps/demo/src/app/checkout/checkout-state.provider.ts index a30444a1ac..57b96701bf 100644 --- a/apps/demo/src/app/checkout/checkout-state.provider.ts +++ b/apps/demo/src/app/checkout/checkout-state.provider.ts @@ -3,6 +3,5 @@ import { EffectsModule } from '@ngrx/effects'; import { CheckoutEffects } from './effects/checkout.effects'; -export const provideDemoCheckoutState = () => [ - importProvidersFrom(EffectsModule.forFeature([CheckoutEffects])), -]; +export const provideDemoCheckoutState = () => + importProvidersFrom(EffectsModule.forFeature([CheckoutEffects]));