Extending address capture

You can extend the address capture capabilities in Sterling Store Engagement by adding or modifying address capture templates.

Note: For more information about the implementation of the address capture capability, see Implementing address capture and display.

Adding a new address capture template

Use the following procedure to add a new address capture template:

Create the following folder structure under SCREEN_EXTENSIONS_HOME, if not already present:SCREEN_EXTENSIONS_HOME/app-common/address/address-capture
Copy address-extension.module.ts from <WORKSPACE>/store-frontend/src/app/app-common/address to the <WORKSPACE>/store-frontend/store-extensions-src/app/app-common/address folder.
Custom address capture template components and providers are declared in this file.

If address-extension.module.ts is already present, then do not copy the file.
To create a new address capture template, perform the following steps:
1. Run the following command:
```
ng g c app-common/address/address-capture/components/<componentName> --project=store-extensions --skip-import
```
2. Update the address capture template component class name in declarations and exports property of @NgModule decorator in address-extension.module.ts.
Register the new address capture template in the address capture configuration (IAddressCaptureConfig) file. In the store-customization-impl.ts file, update the extensionAddressConfigList property with the JSON specification as shown in the following example:
```
static extensionAddressConfigList: IAddressConfig[] =  [
          {
              countryCode: 'US',
              tid: 'US',
              captureComponent: USCaptureComponent
          }
]
```

The following table lists the properties of the IAddressCaptureConfig file.

Table 1. Configuration file properties and descriptions
Property	Description
`countryCode {string}`	Required. Type and unique identifier for the address capture template.
`tid {string}`	Required. Unique identifier for testing the address capture template.
`captureComponent {component}`	Optional. Reference of the component to be rendered for address capture template.
`isDefaultComponent {boolean}`	Optional. Indicates that this must load as the default component if component does not exist for a particular country code.If not provided, it takes US by default.

Modifying address capture templates

You can override the out-of-the-box address capture template component by providing new component in the component property in the IAddressCaptureConfig file.

You can use a new custom address capture template component, CustomCaptureComponent, for existing address capture template with the JSON specification as shown in the following example:

static extensionAddressConfigList: IAddressConfig[] =  [
          {
              countryCode: 'US',
              tid: 'US',
              captureComponent: CustomCaptureComponent
          }
]

Note:

You must ensure that you import the corresponding address capture component class into address-extension.module.ts file.
You must ensure that you are importing from the store-extensions-src folder and not from the store-app-build folder.

Setting the out-of-the-box address capture template as default

You can set the out-of-the-box address capture template as the default by setting the isDefaultComponent property as true in the IAddressCaptureConfig file.

The JSON specification for setting an address capture template as the default is shown in the following example:

static extensionAddressConfigList: IAddressConfig[] =  [
          {
              countryCode: 'US',
              tid: 'US',
              captureComponent: USCaptureComponent,
              isDefaultComponent: true
          }
]

Add or remove and change validations on the out-of-the-box address capture templates

You can add or remove and change validations on the out-of-the-box address capture templates by replacing the specific address capture template component folder in store-extensions-src.