@officialaccount/components
v1.2.1
Published
Business Page block. Single card, List medium card, List half banner horizontal, Single Large, Single Small, Products SKU, Onboarding Business page
Downloads
720
Readme
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
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