@snsw/business-profile-widget v2.0.2

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

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.