feat(admin-ui): Add Address custom fields to order detail

Relates to #409

packages/admin-ui/src/lib/core/src/data/utils/add-custom-fields.ts

@@ -17,10 +17,17 @@ export function addCustomFields(documentNode: DocumentNode, customFields: Custom
     const fragmentDefs = documentNode.definitions.filter(isFragmentDefinition);
 
     for (const fragmentDef of fragmentDefs) {
-        const entityType = fragmentDef.typeCondition.name.value as keyof Pick<
+        let entityType = fragmentDef.typeCondition.name.value as keyof Pick<
             CustomFields,
             Exclude<keyof CustomFields, '__typename'>
         >;
+
+        if (entityType === ('OrderAddress' as any)) {
+            // OrderAddress is a special case of the Address entity, and shares its custom fields
+            // so we treat it as an alias
+            entityType = 'Address';
+        }
+
         const customFieldsForType = customFields[entityType];
         if (customFieldsForType && customFieldsForType.length) {
             (fragmentDef.selectionSet.selections as SelectionNode[]).push({

packages/admin-ui/src/lib/core/src/shared/components/formatted-address/formatted-address.component.html

@@ -13,4 +13,7 @@
         <clr-icon shape="phone-handset" size="12"></clr-icon>
         {{ address.phoneNumber }}
     </li>
+    <li *ngFor="let customField of getCustomFields()" class="custom-field">
+        <vdr-labeled-data [label]="customField.key">{{ customField.value }}</vdr-labeled-data>
+    </li>
 </ul>

packages/admin-ui/src/lib/core/src/shared/components/formatted-address/formatted-address.component.scss

@@ -4,3 +4,7 @@
     list-style-type: none;
     line-height: 1.2em;
 }
+
+.custom-field {
+    margin-top: 6px;
+}

packages/admin-ui/src/lib/core/src/shared/components/formatted-address/formatted-address.component.ts

@@ -19,6 +19,17 @@ export class FormattedAddressComponent {
         }
     }
 
+    getCustomFields(): Array<{ key: string; value: any }> {
+        const customFields = (this.address as any).customFields;
+        if (customFields) {
+            return Object.entries(customFields)
+                .filter(([key]) => key !== '__typename')
+                .map(([key, value]) => ({ key, value: (value as any)?.toString() ?? '-' }));
+        } else {
+            return [];
+        }
+    }
+
     private isAddressFragment(input: AddressFragment | OrderAddress): input is AddressFragment {
         return typeof input.country !== 'string';
     }