@officialaccount/components v1.2.1
Official Account component hub
OA Block will display the OA Recommend, OA Nearby, Promotion nearby. The kind of OA Nearest, Similar, Suggestion
Implementation
Required package.json
"react": "17.0.1"
"react-native"
"@momo-kits/core"
"@momo-kits/avatar"
"@momo-platform/api"
"@momo-platform/utils"
"@momo-kits/skeleton"
"@officialaccount/components": "latest"
Required webpack.config.js
include: [
  // ...
  /node_modules(.*[/\\])+@momo-platform[/\\](.*)+/,
  /node_modules(.*[/\\])+@officialaccount[/\\](.*)+/,
]IMPORT
import { OaHub, TypeDisplay, DisplaySize } from '@officialaccount/components';enum TypeDisplay  
{
    DEFAULT: 'SUGGESTION',
    SUGGESTION: 'SUGGESTION',
    NEARBY: 'NEARBY',
    NEARBY_OA: 'NEARBY_OA',
    SIMILAR_TO_OA: 'SIMILAR_TO_OA',
    REVIEW: 'REVIEW',
    LIST_NEARBY: 'LIST_NEARBY'
}
enum DisplaySize
{
  DEFAULT: 'SLIDER_SMALL',
  SINGLE_MEDIUM: 'SINGLE_MEDIUM',
  SINGLE_LARGE: 'SINGLE_LARGE',
  SLIDER_SMALL: 'SLIDER_SMALL',
  LIST_MEDIUM: 'LIST_MEDIUM',
}Props
| Name | Type | Default | Description | 
|---|---|---|---|
| params | Object | {} | |
| header | Object | {} | |
| type | String | DEFAULT | |
| size | String | LIST_MEDIUM | |
| styleSection | Object | '' | style content | 
Params Props
| Name | Type | Required | 
|---|---|---|
| merchant_id | String | Required | 
| store_id | String | |
| oa_id | Number | |
| oaIds | List<Number> | |
| storeCodes | List<String> | |
| latitude | Number | |
| longitude | Number | |
| track | Object | { source, service_name, screen_name } | 
1 - Usage size SLIDER_SMALL

TYPE = TypeDisplay.SIMILAR_TO_OA 
SIZE = DisplaySize.SLIDER_SMALL 
return (
    <SafeAreaView>
        <OaHub params={{
            oa_id: oa_id,
            store_id: store_id,
            limit: 5,
            track: { source, service_name, screen_name }
          }} header={{
            title: 'QUÁN TƯƠNG TỰ',
            rightButton: {
              buttonTitle: 'Xem thêm',
              refId: 'oa_local_discovery'
            },
            isShowHeader: true, //default is true
          }}
          type={ TypeDisplay.SIMILAR_TO_OA }
          size= { DisplaySize.SLIDER_SMALL }/>
    </SafeAreaView>
)2 - Usage size LIST_MEDIUM

| props key | Type | Required | Description | 
|---|---|---|---|
| type | enum | required | TypeDisplay.DEFAULT | 
| size | enum | required | DisplaySize.LIST_MEDIUM | 
| params | object | required | |
| slocation | |||
| onloadDone | Function | option | function callback api response | 
| header | object | option | custom header view | 
| styleSection | object | option | custom header style | 
| params key | Type | Required | Description | 
|---|---|---|---|
| merchant_id | String | required | Default value is 0 | 
| oaIds | String | option | list oaId | 
| latitude | number | option | location | 
| longitude | number | option | |
| location | 
TYPE = TypeDisplay.DEFAULT 
SIZE = DisplaySize.LIST_MEDIUM 
LOCATION is optional 
return (
    <SafeAreaView>
        <OaHub 
        type={ TypeDisplay.DEFAULT }
        size={ DisplaySize.LIST_MEDIUM }
        params={{
          merchant_id: merchant_id,
          store_id: store_id,
          oaIds: '1,2,3', 
          storeCodes: '1,2,3', 
          limit: 3,
          latitude: 10.7741709,
          longitude: 106.7014805,
          distance: 20, //unit = km
          locationRequired: true, //default is true - show popup location if need
          track: { source, service_name, screen_name }
        }} 
        header={{
          title: 'Cửa hàng gần bạn',
          isShowHeader: false, //default is true,
          styleHeaderTitle: { fontWeight: 'bold', fontSize: 16 },
        }}
        styleSection={{
          marginHorizontal: 0,
          paddingHorizontal: 0
        }}
        />
    </SafeAreaView>
)3 - Usage size SINGLE_MEDIUM

| props key | Type | Required | Description | 
|---|---|---|---|
| type | enum | required | DEFAULT or LIST_NEARBY | 
| size | enum | required | DisplaySize.SINGLE_MEDIUM | 
| params | object | required | |
| onloadDone | Function | option | function callback api response | 
| header | object | option | custom header view | 
| styleSection | object | option | custom header style | 
| params key | Type | Required | Description | 
|---|---|---|---|
| oaId | number | required | number oaId | 
| oaIds | String | required | list oaId | 
| latitude | number | required | location | 
| longitude | number | option | |
| location | |||
| track | object | required | |
| tracking source | 
TYPE = TypeDisplay.DEFAULT 
SIZE = DisplaySize.SINGLE_MEDIUM or DisplaySize.LIST_MEDIUM 
LOCATION is optional 
return (
    <SafeAreaView>
        <OaHub 
        type={ TypeDisplay.DEFAULT }
        size={ DisplaySize.SINGLE_MEDIUM }
        params={{
          oa_id: 1237, //required 
          oaIds: '1237,1240,1241,1243,1244,1247,1253,1259,1262', //required 
          latitude: 10.7741709, //optional 
          longitude: 106.7014805, //optional 
          track: { source, service_name, screen_name }
        }} 
        header={{
          title: '',
          isShowHeader: true, //default is true,
          styleHeaderTitle: {
            fontSize: 15,
            fontWeight: 'bold',
          }
          isShowArrow: true, //default is true,
          enableViewAll: true, //default is true. Set false In case disable click on header title
        }}
        styleSection={{
          marginHorizontal: 0,
          paddingHorizontal: 0
        }}
        />
    </SafeAreaView>
)Version 0.3.20 or newest
OA LISTING screen by Type LIST_NEARBY & sorting Neaby first
 OA LISTING screen by Type LIST_NEARBY & sorting Rating first
OA LISTING screen by Type LIST_NEARBY & sorting Rating first

4- OA Statistics
Version 0.3.6 or newest

| Name | Type | Required | Description | 
|---|---|---|---|
| merchantCode | String | required | |
| storeCode | String | option | |
| filter | String | required | ALL, TODAY, YESTERDAY, LAST_7_DAYS, LAST_14_DAYS, LAST_30_DAYS | 
| onloadDone | Function | option | function callback api response | 
| styleContainer | Object | option | style of Container | 
| styleContent | Object | option | style of content | 
| styleBlockTitle | Object | option | style of header | 
| styleTextTitle | Object | option | style of title header | 
import { OAStats } from '@officialaccount/components';
<OAStats 
  params={{
    merchantCode, 
    storeCode, 
    filter: 'LAST_7_DAYS',
    title: 'Trang doanh nghiệp',
    styleContainer,
    styleContent,
    styleBlockTitle,
    styleTextTitle,
  }}
  onloadDone={callback}
/>5 - Usage size SINGLE_SMALL

| props key | Type | Required | Description | 
|---|---|---|---|
| type | enum | required | DisplaySize.DEFAULT | 
| size | enum | required | DisplaySize.SINGLE_SMALL | 
| params | object | required | |
| onloadDone | Function | option | function callback api response | 
| styleSection | object | option | custom container style | 
| styleContent | object | option | custom inner style | 
| params key | Type | Required | extra data param | 
| ----------------------------- | ----------------------- | ------------------------ | ------------------------------------------ | 
| oaId | number | required | number oaId | 
| merchantCode | String | required | merchantCode | 
TYPE = TypeDisplay.DEFAULT 
SIZE = DisplaySize.SINGLE_SMALL
return (
    <SafeAreaView>
        <OaHub 
        type={TypeDisplay.DEFAULT} 
        size={DisplaySize.SINGLE_SMALL}
        styleSection={{}}
        params={{
            merchantCode,
            oaId,
            hasContainer: true,
        }}/>
    </SafeAreaView>
)Version 1.1.31
Handle Error token expired (errorCode 21) and token invalid  (errorCode 22)Container
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago