rework from review

Author: FollowTheFlo

Diff for: integration-libs/punchout/components/punchout-requisition/punchout-requisition.component.html

@@ -7,6 +7,11 @@
     [formGroup]="punchoutFormGroup"
     #punchoutFormElement
   >
-    <input name="orderAsCXML" formControlName="order" type="hidden" value="" />
+    <input
+      name="orderAsCXML"
+      formControlName="{{ FORM_CONTROL_NAME.ORDER }}"
+      type="hidden"
+      value=""
+    />
   </form>
 </ng-container>

Diff for: integration-libs/punchout/components/punchout-requisition/punchout-requisition.component.ts

@@ -24,7 +24,7 @@ import { filter, map, Observable, switchMap, take, tap, timer } from 'rxjs';
 @Component({
   selector: 'cx-punchout-requsition',
   templateUrl: './punchout-requisition.component.html',
-  changeDetection: ChangeDetectionStrategy.Default,
+  changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: false,
 })
 export class PunchoutRequisitionComponent implements OnInit {
@@ -36,6 +36,10 @@ export class PunchoutRequisitionComponent implements OnInit {
 
   protected formBuilder = inject(FormBuilder);
 
+  readonly FORM_CONTROL_NAME = {
+    ORDER: 'order',
+  } as const;
+
   punchoutRequisition$: Observable<PunchoutRequisition | undefined> =
     this.punchoutFacade.getPunchoutSessionRequisition().pipe(
       take(1),
@@ -56,14 +60,16 @@ export class PunchoutRequisitionComponent implements OnInit {
 
   ngOnInit(): void {
     this.punchoutFormGroup = this.formBuilder.group({
-      order: [''],
+      [this.FORM_CONTROL_NAME.ORDER]: [''],
     });
   }
 
   protected listenAndSubmitForm(
     req: PunchoutRequisition | undefined
   ): Observable<boolean> {
-    return this.punchoutFormGroup.controls['order'].valueChanges.pipe(
+    return this.punchoutFormGroup.controls[
+      this.FORM_CONTROL_NAME.ORDER
+    ].valueChanges.pipe(
       filter((value: string) => value === req?.orderAsCXML),
       take(1),
       switchMap(() => {