fix: validate email during the checkout process of an anonymous user (#…

…1312)
intershop · Nov 21, 2022 · 5ba41ec · 5ba41ec
1 parent a98d391
commit 5ba41ec
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 22 deletions.
diff --git a/.../checkout-address/checkout-address-anonymous/checkout-address-anonymous.component.spec.ts b/.../checkout-address/checkout-address-anonymous/checkout-address-anonymous.component.spec.ts
@@ -54,6 +54,8 @@ describe('Checkout Address Anonymous Component', () => {
       additionalAddressAttributes: fb.group({
         email: new FormControl('', Validators.required),
         taxationID: new FormControl(''),
+      }),
+      shipOptions: fb.group({
         shipOption: new FormControl('shipToInvoiceAddress'),
       }),
       invoiceAddress: fb.group({
@@ -125,9 +127,11 @@ describe('Checkout Address Anonymous Component', () => {
   it('should create address for valid invoice address form', () => {
     component.form.get('additionalAddressAttributes').setValue({
       taxationID: '',
-      shipOption: 'shipToInvoiceAddress',
       email: 'test@intershop.de',
     });
+    component.form.get('shipOptions').setValue({
+      shipOption: 'shipToInvoiceAddress',
+    });
 
     component.submitAddressForm();
     fixture.detectChanges();

diff --git a/...pages/checkout-address/checkout-address-anonymous/checkout-address-anonymous.component.ts b/...pages/checkout-address/checkout-address-anonymous/checkout-address-anonymous.component.ts
@@ -64,10 +64,13 @@ export class CheckoutAddressAnonymousComponent implements OnChanges {
 
     this.addressForm.control.get('additionalAddressAttributes').setValue({
       taxationID: '',
-      shipOption: 'shipToInvoiceAddress',
       email: '',
     });
 
+    this.addressForm.control.get('shipOptions').setValue({
+      shipOption: 'shipToInvoiceAddress',
+    });
+
     this.submitted = false;
   }
 
@@ -88,7 +91,7 @@ export class CheckoutAddressAnonymousComponent implements OnChanges {
     };
 
     const shippingAddress =
-      this.form.get('additionalAddressAttributes').value.shipOption === 'shipToInvoiceAddress'
+      this.form.get('shipOptions').value.shipOption === 'shipToInvoiceAddress'
         ? undefined
         : this.form.get('shippingAddress').value.address;
 
@@ -114,6 +117,6 @@ export class CheckoutAddressAnonymousComponent implements OnChanges {
   }
 
   get isShippingAddressFormExpanded() {
-    return this.form && this.form.get('additionalAddressAttributes').value.shipOption === 'shipToDifferentAddress';
+    return this.form && this.form.get('shipOptions').value.shipOption === 'shipToDifferentAddress';
   }
 }
diff --git a/...components/checkout-address-anonymous-form/checkout-address-anonymous-form.component.html b/...components/checkout-address-anonymous-form/checkout-address-anonymous-form.component.html
@@ -11,12 +11,12 @@ <h3 class="subheading">{{ 'checkout.addresses.billing_address.heading' | transla
 </ish-formly-address-form>
 
 <!-- Taxation ID and Email address input field-->
-<formly-form [form]="form" [fields]="addressFields" [options]="addressOptions"></formly-form>
+<formly-form [form]="attributesForm" [fields]="attributesFields"></formly-form>
 
 <!-- Shipping Address Selection Radio boxes-->
 <div class="section">
   <h3>{{ 'checkout.addresses.shipping_address.heading' | translate }}</h3>
-  <formly-form [form]="form" [fields]="shipOptionFields"></formly-form>
+  <formly-form [form]="shipOptionForm" [fields]="shipOptionFields"></formly-form>
 </div>
 
 <!-- Shipping Address -->

diff --git a/...ponents/checkout-address-anonymous-form/checkout-address-anonymous-form.component.spec.ts b/...ponents/checkout-address-anonymous-form/checkout-address-anonymous-form.component.spec.ts
@@ -51,7 +51,7 @@ describe('Checkout Address Anonymous Form Component', () => {
   it('should add shipping address form to parent form, when shipOption is set to shipToDifferentAddress', () => {
     fixture.detectChanges();
 
-    component.form.get('shipOption').setValue('shipToDifferentAddress');
+    component.shipOptionForm.get('shipOption').setValue('shipToDifferentAddress');
 
     fixture.detectChanges();
 

diff --git a/...y/components/checkout-address-anonymous-form/checkout-address-anonymous-form.component.ts b/...y/components/checkout-address-anonymous-form/checkout-address-anonymous-form.component.ts
@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, Component, Input, OnDestroy, OnInit } from '@angular/core';
-import { FormControl, FormGroup } from '@angular/forms';
-import { FormlyFieldConfig, FormlyFormOptions } from '@ngx-formly/core';
+import { FormGroup } from '@angular/forms';
+import { FormlyFieldConfig } from '@ngx-formly/core';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
@@ -13,29 +13,27 @@ import { FeatureToggleService } from 'ish-core/feature-toggle.module';
 })
 export class CheckoutAddressAnonymousFormComponent implements OnInit, OnDestroy {
   @Input() parentForm: FormGroup;
-  formControl: FormControl;
 
   invoiceAddressForm = new FormGroup({});
   shippingAddressForm = new FormGroup({});
-  form: FormGroup = new FormGroup({});
-
-  addressFields: FormlyFieldConfig[];
-  addressOptions: FormlyFormOptions = {};
+  attributesForm: FormGroup = new FormGroup({});
+  shipOptionForm: FormGroup = new FormGroup({});
 
+  attributesFields: FormlyFieldConfig[];
   shipOptionFields: FormlyFieldConfig[];
 
   isBusinessCustomer = false;
 
   private destroy$ = new Subject<void>();
 
   get isShippingAddressFormExpanded() {
-    return this.form && this.form.get('shipOption').value === 'shipToDifferentAddress';
+    return this.shipOptionForm && this.shipOptionForm.get('shipOption').value === 'shipToDifferentAddress';
   }
 
   constructor(private featureToggleService: FeatureToggleService) {}
 
   ngOnInit() {
-    this.addressFields = [
+    this.attributesFields = [
       {
         type: 'ish-fieldset-field',
         fieldGroup: [
@@ -45,7 +43,6 @@ export class CheckoutAddressAnonymousFormComponent implements OnInit, OnDestroy
             templateOptions: {
               required: true,
               label: 'checkout.addresses.email.label',
-              forceRequiredStar: true,
               customDescription: {
                 key: 'account.address.email.hint',
               },
@@ -57,7 +54,7 @@ export class CheckoutAddressAnonymousFormComponent implements OnInit, OnDestroy
     ];
 
     if (this.featureToggleService.enabled('businessCustomerRegistration')) {
-      this.addressFields = [this.createTaxationIDField(), ...this.addressFields];
+      this.attributesFields = [this.createTaxationIDField(), ...this.attributesFields];
       this.isBusinessCustomer = true;
     }
 
@@ -82,14 +79,15 @@ export class CheckoutAddressAnonymousFormComponent implements OnInit, OnDestroy
       },
     ];
     this.parentForm.setControl('invoiceAddress', this.invoiceAddressForm);
-    this.parentForm.setControl('additionalAddressAttributes', this.form);
+    this.parentForm.setControl('additionalAddressAttributes', this.attributesForm);
+    this.parentForm.setControl('shipOptions', this.shipOptionForm);
 
     // add / remove shipping form if shipTo address option changes
     this.parentForm
-      .get('additionalAddressAttributes')
+      .get('shipOptions')
       .valueChanges.pipe(takeUntil(this.destroy$))
-      .subscribe(attributes => {
-        attributes.shipOption === 'shipToInvoiceAddress'
+      .subscribe(options => {
+        options.shipOption === 'shipToInvoiceAddress'
           ? this.parentForm.removeControl('shippingAddress')
           : this.parentForm.setControl('shippingAddress', this.shippingAddressForm);
       });