@snsw/business-profile-widget
v2.0.2
Published
``` # Install dependencies yarn
Downloads
9
Maintainers
Keywords
Readme
Local development
# Install dependencies
yarn
# Start project at localhost:8080
yarn dev
Install
Add to your project using either npm or yarn
# For npm
npm install @snsw/business-profile-widget
## Or yarn
yarn add @snsw/business-profile-widget;
Usage
Import the widget to your page and use the render function to render the widget with the props.
import businessProfileWidget from '@snsw/business-profile-widget';
businessProfileWidget.render({
selector: ".widget-selector",
defaultProps: {
bizProfileApiKey: '',
abrApiKey: '',
env: 'psm',
accessToken: '',
loadingMarkup: 'Loading...',
cssClass: '',
onBusy,
onSelect,
onReset,
onError,
onValidityChange,
onDateFormat,
onDisplayABNDetails,
debug: false,
defaultBusiness: {identifier: 'abn', businessName: 'businessName'}
}
});
Parameters for render function
| Param | Description |
|-----------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| selector | Container selector in which you want the widget to be displayed |
| bizProfileApiKey | Apigee key for biz-profile-api proxy |
| abrApiKey | Apigee key for etdb-abnacn-lookup-app proxy |
| env | values are dev, sit, psm, prod |
| accessToken | MyAccount Token |
| loadingMarkup | a html string to decorate the loading markup |
| cssClass | Pass the css class to customise the behaviour |
| onBusy | Hook to display loading spinners while it is fetching data | |
| onSelect | Hook that fires on business selection & sends selected business |
| onReset | Hook that fires on 'Change selection' click |
| onError | Hook that fires on error occurance with error details |
| onValidityChange | Hook that fires on validity change by passing true when a business is selected |
| onDateFormat | Customise the date formats in ABN details section. Sends date & tag |
| onDisplayABNDetails | Customise the ABN Details section for ordering, what to show & hide |
| debug | true to see debug messages. by default it is false. |
| defaultBusiness | Should be used to pass pre-selected business by user. The object structure for it is:{identifier: 'abn', businessName: 'businessName'}
|
| enableChangeSelection | Should be used to disable Change selection button. Should be used when business needs to be pre-selected and user should not have option to change the business. Default is true.``` |
Hooks/Fields display customizations
onDisplayABNDetails
const onDisplayABNDetailsFn = (business) => {
return [
{className: 'abn', label: 'ABN', value: business.identifier},
{className: 'businessName', label: 'Business name', value: business.businessName},
{className: 'entityName', label: 'Entity name', value: business.abnEntityName},
{className: 'tradingName', label: 'Trading name', value: business.tradingName},
{className: 'entityStatus', label: 'Status', value: business.abnEntityStatus && business.abnEntityStatus.status},
{className: 'entityType', label: 'Entity Type', value: business.abnEntityType},
{className: 'gst', label: 'GST', value: business.abnGstStatus && business.abnGstStatus.status},
{className: 'location', label: 'Main business location', value: business.abnLocation.location}
];
}
onDateFormat
const onDateFormat = (date, tag) => {
debug && console.log(date, tag);
#based on tag you can format the date;
#tag values are entityEffectiveFrom, gstEffectiveFrom, charityEffectiveFrom etc
return date;`
}
CSS Customisations
Use the custom class css passed in props or use the default one like below to inject your styles.
//For container
.customWidgetClass {
//css
}
//For the auto fill button
.customWidgetClass .autoPrefillButton {
//css
}
//For business Drop down
.customWidgetClass .businessDropdown {
//css
}
//For change business Button
.customWidgetClass .changeBusinessButton {
//css
}
// For abn lookup container
.customWidgetClass .abnLookup {
//css
}
// For abn lookup container text
.customWidgetClass .abnLookup .abnLookupLabel {
//css
}
// For abn lookup container support copy
.customWidgetClass .abnLookup .abnLookupHelpText {
//css
}
// For abn lookup container auto suggest box
.customWidgetClass .abnLookup .abnLookupSuggestions {
//css
}
// For business details container
.customWidgetClass .abnDetails {
//css
}
// For business details container labels
.customWidgetClass .abnDetails .label {
//css
}
// For business details container values
.customWidgetClass .abnDetails .value {
//css
}
// For abn details container
.customWidgetClass .abnDetails .abn {
//css
}
// For abn details container, customise label of a particular section
.customWidgetClass .abnDetails .abn .label {
//css
}
// For abn details container, customise value of a particular section
.customWidgetClass .abnDetails .abn .value {
//css
}
// For businessName details container
customWidgetClass .abnDetails .businessName {
//css
}
// For entityName details container
customWidgetClass .abnDetails .entityName {
//css
}
// For tradingName details container
customWidgetClass .abnDetails .tradingName {
//css
}
// For entityType details conatiner
customWidgetClass .abnDetails .entityType {
//css
}
// For entityStatus details conatiner
customWidgetClass .abnDetails .entityStatus {
//css
}
// For gst details conatiner
customWidgetClass .abnDetails .gst {
//css
}
// For location details conatiner
customWidgetClass .abnDetails .location {
//css
}
Business Object Structure
Business structure that's passed on selecting a new business / an existing business from user's business profile Fields within [] only be passed if user selects an existing business from his/her profile.
{
"identifier": "",
"businessName": "",
"abnEntityName": "",
"abnEntityType": "",
"abnEntityStatus": {
"status": "",
"statusCode": "",
"effectiveFrom": "",
"effectiveTo": ""
},
"abnLocation": {
"location": "",
"stateCode": "",
"postCode": ""
},
"abnGstStatus": {
"status": "",
"registered": "",
"effectiveFrom": "",
"effectiveTo": ""
},
"abnCharityType": {
"status": "",
"description": "",
"effectiveFrom": "",
"effectiveTo": ""
},
"abnTradingName": "",
["id": ""],
["identifierType": "ABN"],
["businessEmail": null],
["businessPhone": null],
["bankAccountName": null],
["bankAccountNumber": null],
["bankAccountBsb": null],
["businessAddress": {
"unitNumber": "",
"buildingNumber": "",
"streetNumber": "",
"streetName": "",
"streetType": "",
"propertyName": "",
"addressLine": "",
"suburb": "",
"state": "",
"country": "",
"postcode": "",
"latitude": 0.0,
"longitude": 0.0,
"nswPointId": "",
"formattedAddress": "",
"validated": true
}],
["postalAddress": {
"unitNumber": "",
"buildingNumber": "",
"streetNumber": "",
"streetName": "",
"streetType": "",
"propertyName": "",
"addressLine": "",
"suburb": "",
"state": "",
"country": "",
"postcode": "",
"latitude": 0.0,
"longitude": 0.0,
"nswPointId": "",
"formattedAddress": "",
"validated": true
}],
["role": ""]
}
Error Response
{
"message": "some message",
"name": "some error"
}
Most of time it will fire on token related problems like expiry/wrong-token etc.