fix: (CXSPA-9504) support Chinese address in address book

feature-libs/user/profile/assets/translations/en/address.json

@@ -19,6 +19,8 @@
       "placeholder": "City"
     },
     "state": "State",
+    "province": "Province",
+    "district": "District",
     "zipCode": {
       "label": "Zip code",
       "placeholder": "Postal Code/Zip"
@@ -36,6 +38,8 @@
     "streetAddress": "Street Address",
     "aptSuite": "Apartment Number",
     "selectOne": "Select One...",
+    "selectProvinceFirst": "Please select a province first",
+    "selectCityFirst": "Please select a city first",
     "setAsDefault": "Set as default delivery address",
     "titleRequired": "Title is required.",
     "userAddressAddSuccess": "New address was added successfully!",

feature-libs/user/profile/assets/translations/zh/address.json

@@ -19,6 +19,8 @@
       "placeholder": "城市"
     },
     "state": "州/省",
+    "province": "省份",
+    "district": "区/县",
     "zipCode": {
       "label": "邮政编码",
       "placeholder": "邮政编码"
@@ -36,6 +38,8 @@
     "streetAddress": "街道地址",
     "aptSuite": "公寓号",
     "selectOne": "选择一个...",
+    "selectProvinceFirst": "请先选择省份",
+    "selectCityFirst": "请先选择城市",
     "setAsDefault": "设置默认送货地址",
     "titleRequired": "标题为必填项。",
     "userAddressAddSuccess": "新地址添加成功！",

feature-libs/user/profile/assets/translations/zh_TW/address.json

@@ -19,6 +19,8 @@
       "placeholder": "城市"
     },
     "state": "州",
+    "province": "省份",
+    "district": "區/縣",
     "zipCode": {
       "label": "郵遞區號",
       "placeholder": "郵遞區號/ZIP"
@@ -36,6 +38,8 @@
     "streetAddress": "街道地址",
     "aptSuite": "公寓號碼",
     "selectOne": "選擇一個...",
+    "selectProvinceFirst": "請先選擇省份",
+    "selectCityFirst": "請先選擇城市",
     "setAsDefault": "設定為預設交貨地址",
     "titleRequired": "稱謂為必要。",
     "userAddressAddSuccess": "已成功新增地址！",

feature-libs/user/profile/components/address-book/address-book.component.ts

@@ -110,11 +110,12 @@ export class AddressBookComponent implements OnInit {
           textPhone,
           textMobile,
         ]) => {
-          let region = '';
-
-          if (address.region && address.region.isocode) {
-            region = address.region.isocode + ', ';
-          }
+          const region = this.buildRegion(address);
+          const countryName =
+            address.country?.name || address.country?.isocode || '';
+          const townName = address.city?.name || address.town || '';
+          const districtName =
+            address.cityDistrict?.name || address.district || '';
 
           const actions: { name: string; event: string }[] = [];
           if (!address.defaultAddress) {
@@ -125,16 +126,21 @@ export class AddressBookComponent implements OnInit {
 
           const numbers = getAddressNumbers(address, textPhone, textMobile);
 
+          const locationParts = [townName, region, countryName]
+            .filter(Boolean)
+            .join(', ');
+
           return {
             role: 'application',
             textBold: address.firstName + ' ' + address.lastName,
             text: [
               address.line1,
               address.line2,
-              address.town + ', ' + region + address.country?.isocode,
+              locationParts,
+              districtName,
               address.postalCode,
               numbers,
-            ],
+            ].filter(Boolean) as string[],
             actions: actions,
             header: address.defaultAddress ? `✓ ${defaultText}` : '',
             deleteMsg: textVerifyDeleteMsg,
@@ -147,6 +153,10 @@ export class AddressBookComponent implements OnInit {
     );
   }
 
+  private buildRegion(address: Address): string {
+    return address.region?.name || address.region?.isocode || '';
+  }
+
   setAddressAsDefault(address: Address): void {
     this.service.setAddressAsDefault(address.id ?? '');
     this.globalMessageService.add(

feature-libs/user/profile/components/address-book/address-form/address-form.component.html

@@ -158,24 +158,87 @@
     </label>
   </div>
   <div class="row">
+    <ng-container *ngIf="regions$ | async as regions" formGroupName="region">
+      <ng-container *ngIf="regions.length !== 0">
+        <div class="form-group col-md-6">
+          <label>
+            <span class="label-content required"
+              >{{
+                isChineseAddress
+                  ? ('addressForm.province' | cxTranslate)
+                  : ('addressForm.state' | cxTranslate)
+              }}
+              <cx-form-required-asterisks />
+            </span>
+            <ng-select
+              [inputAttrs]="{ required: 'true' }"
+              class="region-select"
+              formControlName="isocode"
+              [searchable]="true"
+              [clearable]="false"
+              [items]="regions"
+              bindLabel="{{ regions[0].name ? 'name' : 'isocode' }}"
+              bindValue="{{ regions[0].name ? 'isocode' : 'region' }}"
+              placeholder="{{ 'addressForm.selectOne' | cxTranslate }}"
+              (change)="regionSelected($event)"
+              id="region-select"
+              ariaLabelDropdown="{{
+                'common.ngSelectDropdownOptionsList' | cxTranslate
+              }}"
+              [cxNgSelectA11y]="{
+                ariaLabel: 'addressForm.state' | cxTranslate,
+              }"
+            >
+            </ng-select>
+            <cx-form-errors
+              [control]="addressForm.get('region.isocode')"
+            ></cx-form-errors>
+          </label>
+        </div>
+      </ng-container>
+    </ng-container>
     <div class="form-group col-sm-6">
       <label>
         <span class="label-content required"
           >{{ 'addressForm.city.label' | cxTranslate }}
 
           <cx-form-required-asterisks />
         </span>
-        <input
-          required="true"
-          type="text"
-          class="form-control"
-          placeholder="{{ 'addressForm.city.placeholder' | cxTranslate }}"
+        <ng-select
+          *ngIf="isChineseAddress; else cityTextInput"
+          class="city-select"
+          id="city-select"
           formControlName="town"
-          [attr.aria-invalid]="
-            addressForm.get('town')?.touched && addressForm.get('town')?.invalid
-          "
-          [attr.aria-errormessage]="'townError'"
-        />
+          [searchable]="true"
+          [clearable]="false"
+          [items]="cities"
+          bindLabel="name"
+          bindValue="isocode"
+          placeholder="{{
+            selectedRegion$.value
+              ? ('addressForm.selectOne' | cxTranslate)
+              : ('addressForm.selectProvinceFirst' | cxTranslate)
+          }}"
+          (change)="citySelected($event)"
+          [cxNgSelectA11y]="{
+            ariaLabel: 'addressForm.city.label' | cxTranslate,
+          }"
+        >
+        </ng-select>
+        <ng-template #cityTextInput>
+          <input
+            required="true"
+            type="text"
+            class="form-control"
+            placeholder="{{ 'addressForm.city.placeholder' | cxTranslate }}"
+            formControlName="town"
+            [attr.aria-invalid]="
+              addressForm.get('town')?.touched &&
+              addressForm.get('town')?.invalid
+            "
+            [attr.aria-errormessage]="'townError'"
+          />
+        </ng-template>
         <cx-form-errors
           id="townError"
           [translationParams]="{
@@ -185,6 +248,39 @@
         ></cx-form-errors>
       </label>
     </div>
+    <div class="form-group col-md-6" *ngIf="isChineseAddress">
+      <label>
+        <span class="label-content required"
+          >{{ 'addressForm.district' | cxTranslate }}
+          <cx-form-required-asterisks />
+        </span>
+        <ng-select
+          class="district-select"
+          id="district-select"
+          formControlName="district"
+          [searchable]="true"
+          [clearable]="false"
+          [items]="districts"
+          bindLabel="name"
+          bindValue="isocode"
+          placeholder="{{
+            selectedCity$.value
+              ? ('addressForm.selectOne' | cxTranslate)
+              : ('addressForm.selectCityFirst' | cxTranslate)
+          }}"
+          [cxNgSelectA11y]="{
+            ariaLabel: 'addressForm.district' | cxTranslate,
+          }"
+        >
+        </ng-select>
+        <cx-form-errors
+          [translationParams]="{
+            label: 'addressForm.district' | cxTranslate,
+          }"
+          [control]="addressForm.get('district')"
+        ></cx-form-errors>
+      </label>
+    </div>
     <div class="form-group col-sm-6">
       <label>
         <span class="label-content required"
@@ -213,40 +309,6 @@
         ></cx-form-errors>
       </label>
     </div>
-    <ng-container *ngIf="regions$ | async as regions" formGroupName="region">
-      <ng-container *ngIf="regions.length !== 0">
-        <div class="form-group col-md-6">
-          <label>
-            <span class="label-content required"
-              >{{ 'addressForm.state' | cxTranslate }}
-              <cx-form-required-asterisks />
-            </span>
-            <ng-select
-              [inputAttrs]="{ required: 'true' }"
-              class="region-select"
-              formControlName="isocode"
-              [searchable]="true"
-              [clearable]="false"
-              [items]="regions"
-              bindLabel="{{ regions[0].name ? 'name' : 'isocode' }}"
-              bindValue="{{ regions[0].name ? 'isocode' : 'region' }}"
-              placeholder="{{ 'addressForm.selectOne' | cxTranslate }}"
-              id="region-select"
-              ariaLabelDropdown="{{
-                'common.ngSelectDropdownOptionsList' | cxTranslate
-              }}"
-              [cxNgSelectA11y]="{
-                ariaLabel: 'addressForm.state' | cxTranslate,
-              }"
-            >
-            </ng-select>
-            <cx-form-errors
-              [control]="addressForm.get('region.isocode')"
-            ></cx-form-errors>
-          </label>
-        </div>
-      </ng-container>
-    </ng-container>
   </div>
 
   <div class="row">
@@ -267,15 +329,23 @@
     </div>
     <div class="form-group col-md-6">
       <label>
-        <span class="label-content">{{
-          'addressForm.cellphone.label' | cxTranslate
-        }}</span>
+        <span class="label-content" [class.required]="isChineseAddress"
+          >{{ 'addressForm.cellphone.label' | cxTranslate }}
+          <cx-form-required-asterisks *ngIf="isChineseAddress" />
+        </span>
         <input
           type="tel"
           class="form-control"
           placeholder="{{ 'addressForm.cellphone.placeholder' | cxTranslate }}"
           formControlName="cellphone"
         />
+        <cx-form-errors
+          *ngIf="isChineseAddress"
+          [translationParams]="{
+            label: 'addressForm.cellphone.label' | cxTranslate,
+          }"
+          [control]="addressForm.get('cellphone')"
+        ></cx-form-errors>
       </label>
     </div>
   </div>